@nice2dev/ui-graphics 1.3.15 → 1.3.17

package/dist/esm/game/GameAsset2dEditor.js

@@ -1,425 +1,1236 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { NiceAppShell, NiceButton, NiceTextInput, NiceSelect, NiceNumberInput } from '@nice2dev/ui';
-import { NiceIcon, clickOnActivationKey, resolveCssColor } from '@nice2dev/ui-core';
-import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
-import { useNiceTranslation } from '../core/i18n.js';
-import styles from './GameAsset2dEditor.module.css.js';
-import { useGameAssetEditor } from './useGameAssetEditor.js';
-
-/* ────────────────────────────────────────────────────────────────
-   MENU BAR
-──────────────────────────────────────────────────────────────── */
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { NiceAppShell, NiceButton, NiceTextInput, NiceSelect, NiceNumberInput } from "@nice2dev/ui";
+import { NiceIcon, clickOnActivationKey, resolveCssColor } from "@nice2dev/ui-core";
+import { useRef, useState, useMemo, useEffect, useCallback } from "react";
+import { useNiceTranslation } from "../core/i18n.js";
+import styles from "./GameAsset2dEditor.module.css.js";
+import { useGameAssetEditor } from "./useGameAssetEditor.js";
 const MenuBar = ({ api }) => {
-    const { t } = useNiceTranslation();
-    const fileInputRef = useRef(null);
-    return (jsxs("div", { className: styles.menuBar, children: [jsxs("h3", { children: [jsx(NiceIcon, { name: "gamepad", size: 16 }), ' ', t('gameAsset2dEditor.gameAssetEditor', 'Game Asset Editor')] }), jsxs("div", { className: styles.menuGroup, children: [jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => api.newProject('New Project'), children: [jsx(NiceIcon, { name: "file", size: 14 }), " ", t('gameAsset2dEditor.new', 'New')] }), jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: [jsx(NiceIcon, { name: "folder", size: 14 }), " ", t('gameAsset2dEditor.open', 'Open')] }), jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.saveProject, children: [jsx(NiceIcon, { name: "save", size: 14 }), " ", t('gameAsset2dEditor.save', 'Save')] })] }), jsx("div", { className: styles.spacer }), jsxs("div", { className: styles.menuGroup, children: [jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.undo, disabled: !api.canUndo, children: [jsx(NiceIcon, { name: "arrow-left", size: 14 }), " ", t('gameAsset2dEditor.undo', 'Undo')] }), jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.redo, disabled: !api.canRedo, children: [jsx(NiceIcon, { name: "arrow-right", size: 14 }), " ", t('gameAsset2dEditor.redo', 'Redo')] })] }), 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) {
-                        api.loadProject(file);
-                    }
-                    e.target.value = '';
-                } })] }));
+  const { t } = useNiceTranslation();
+  const fileInputRef = useRef(null);
+  return /* @__PURE__ */ jsxs("div", { className: styles.menuBar, children: [
+    /* @__PURE__ */ jsxs("h3", { children: [
+      /* @__PURE__ */ jsx(NiceIcon, { name: "gamepad", size: 16 }),
+      " ",
+      t("gameAsset2dEditor.gameAssetEditor", "Game Asset Editor")
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: styles.menuGroup, children: [
+      /* @__PURE__ */ jsxs(
+        NiceButton,
+        {
+          className: styles.menuBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: () => api.newProject("New Project"),
+          children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "file", size: 14 }),
+            " ",
+            t("gameAsset2dEditor.new", "New")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        NiceButton,
+        {
+          className: styles.menuBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: () => fileInputRef.current?.click(),
+          children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "folder", size: 14 }),
+            " ",
+            t("gameAsset2dEditor.open", "Open")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.saveProject, children: [
+        /* @__PURE__ */ jsx(NiceIcon, { name: "save", size: 14 }),
+        " ",
+        t("gameAsset2dEditor.save", "Save")
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.spacer }),
+    /* @__PURE__ */ jsxs("div", { className: styles.menuGroup, children: [
+      /* @__PURE__ */ jsxs(
+        NiceButton,
+        {
+          className: styles.menuBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: api.undo,
+          disabled: !api.canUndo,
+          children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "arrow-left", size: 14 }),
+            " ",
+            t("gameAsset2dEditor.undo", "Undo")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        NiceButton,
+        {
+          className: styles.menuBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: api.redo,
+          disabled: !api.canRedo,
+          children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "arrow-right", size: 14 }),
+            " ",
+            t("gameAsset2dEditor.redo", "Redo")
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: ".json",
+        style: { display: "none" },
+        onChange: (e) => {
+          const file = e.target.files?.[0];
+          if (file) {
+            api.loadProject(file);
+          }
+          e.target.value = "";
+        }
+      }
+    )
+  ] });
 };
-/* ────────────────────────────────────────────────────────────────
-   MODE TABS
-──────────────────────────────────────────────────────────────── */
 const ModeTabs = ({ api }) => {
-    const { t } = useNiceTranslation();
-    const modes = [
-        { id: 'tilemap', label: t('gameAsset2dEditor.tileMap', 'Tile Map'), icon: 'grid' },
-        { id: 'spritesheet', label: t('gameAsset2dEditor.spriteSheet', 'Sprite Sheet'), icon: 'image' },
-        { id: 'animation', label: t('gameAsset2dEditor.animation', 'Animation'), icon: 'video' },
-        { id: 'effects', label: t('gameAsset2dEditor.effects2', 'Effects'), icon: 'wand' },
-    ];
-    return (jsx("div", { className: styles.modeTabs, children: modes.map((mode) => (jsxs(NiceButton, { className: `${styles.modeTab} ${api.editorState.mode === mode.id ? styles.active : ''}`, variant: api.editorState.mode === mode.id ? 'primary' : 'ghost', onClick: () => api.setMode(mode.id), children: [jsx(NiceIcon, { name: mode.icon, size: 16 }), " ", mode.label] }, mode.id))) }));
+  const { t } = useNiceTranslation();
+  const modes = [
+    { id: "tilemap", label: t("gameAsset2dEditor.tileMap", "Tile Map"), icon: "grid" },
+    { id: "spritesheet", label: t("gameAsset2dEditor.spriteSheet", "Sprite Sheet"), icon: "image" },
+    { id: "animation", label: t("gameAsset2dEditor.animation", "Animation"), icon: "video" },
+    { id: "effects", label: t("gameAsset2dEditor.effects2", "Effects"), icon: "wand" }
+  ];
+  return /* @__PURE__ */ jsx("div", { className: styles.modeTabs, children: modes.map((mode) => /* @__PURE__ */ jsxs(
+    NiceButton,
+    {
+      className: `${styles.modeTab} ${api.editorState.mode === mode.id ? styles.active : ""}`,
+      variant: api.editorState.mode === mode.id ? "primary" : "ghost",
+      onClick: () => api.setMode(mode.id),
+      children: [
+        /* @__PURE__ */ jsx(NiceIcon, { name: mode.icon, size: 16 }),
+        " ",
+        mode.label
+      ]
+    },
+    mode.id
+  )) });
 };
-/* ────────────────────────────────────────────────────────────────
-   TILE MAP TOOLBAR
-──────────────────────────────────────────────────────────────── */
 const TileMapToolbar = ({ api }) => {
-    const { t } = useNiceTranslation();
-    const tools = [
-        { id: 'select', icon: 'square', label: t('gameAsset2dEditor.select', 'Select') },
-        { id: 'brush', icon: 'brush', label: t('gameAsset2dEditor.brush', 'Brush') },
-        { id: 'eraser', icon: 'eraser', label: t('gameAsset2dEditor.eraser', 'Eraser') },
-        { id: 'fill', icon: 'bucket', label: t('gameAsset2dEditor.fill', 'Fill') },
-        { id: 'rectangle', icon: 'square', label: t('gameAsset2dEditor.rectangle', 'Rectangle') },
-        { id: 'line', icon: 'line', label: t('gameAsset2dEditor.line', 'Line') },
-        {
-            id: 'eyedropper',
-            icon: 'eyedropper',
-            label: t('gameAsset2dEditor.eyedropper', 'Eyedropper'),
-        },
-    ];
-    return (jsxs("div", { className: styles.toolbar, children: [jsx("div", { className: styles.toolGroup, children: tools.map((tool) => (jsx(NiceButton, { className: `${styles.toolBtn} ${api.editorState.tileMapTool === tool.id ? styles.active : ''}`, variant: api.editorState.tileMapTool === tool.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setTileMapTool(tool.id), title: tool.label, children: jsx(NiceIcon, { name: tool.icon, size: 16 }) }, tool.id))) }), jsx("div", { className: styles.spacer }), jsx(NiceButton, { className: `${styles.toolBtn} ${api.editorState.showGrid ? styles.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: jsx(NiceIcon, { name: "grid", size: 16 }) }), jsx(NiceButton, { className: `${styles.toolBtn} ${api.editorState.showCollision ? styles.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: jsx(NiceIcon, { name: "square", size: 16 }) }), jsx(NiceButton, { className: `${styles.toolBtn} ${api.editorState.snapToGrid ? styles.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: jsx(NiceIcon, { name: "grid", size: 16 }) })] }));
+  const { t } = useNiceTranslation();
+  const tools = [
+    { id: "select", icon: "square", label: t("gameAsset2dEditor.select", "Select") },
+    { id: "brush", icon: "brush", label: t("gameAsset2dEditor.brush", "Brush") },
+    { id: "eraser", icon: "eraser", label: t("gameAsset2dEditor.eraser", "Eraser") },
+    { id: "fill", icon: "bucket", label: t("gameAsset2dEditor.fill", "Fill") },
+    { id: "rectangle", icon: "square", label: t("gameAsset2dEditor.rectangle", "Rectangle") },
+    { id: "line", icon: "line", label: t("gameAsset2dEditor.line", "Line") },
+    {
+      id: "eyedropper",
+      icon: "eyedropper",
+      label: t("gameAsset2dEditor.eyedropper", "Eyedropper")
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: styles.toolbar, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.toolGroup, children: tools.map((tool) => /* @__PURE__ */ jsx(
+      NiceButton,
+      {
+        className: `${styles.toolBtn} ${api.editorState.tileMapTool === tool.id ? styles.active : ""}`,
+        variant: api.editorState.tileMapTool === tool.id ? "primary" : "ghost",
+        size: "sm",
+        onClick: () => api.setTileMapTool(tool.id),
+        title: tool.label,
+        children: /* @__PURE__ */ jsx(NiceIcon, { name: tool.icon, size: 16 })
+      },
+      tool.id
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: styles.spacer }),
+    /* @__PURE__ */ jsx(
+      NiceButton,
+      {
+        className: `${styles.toolBtn} ${api.editorState.showGrid ? styles.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: /* @__PURE__ */ jsx(NiceIcon, { name: "grid", size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NiceButton,
+      {
+        className: `${styles.toolBtn} ${api.editorState.showCollision ? styles.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: /* @__PURE__ */ jsx(NiceIcon, { name: "square", size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NiceButton,
+      {
+        className: `${styles.toolBtn} ${api.editorState.snapToGrid ? styles.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: /* @__PURE__ */ jsx(NiceIcon, { name: "grid", size: 16 })
+      }
+    )
+  ] });
 };
-/* ────────────────────────────────────────────────────────────────
-   SPRITE SHEET TOOLBAR
-──────────────────────────────────────────────────────────────── */
 const SpriteSheetToolbar = ({ api }) => {
-    const { t } = useNiceTranslation();
-    const [sliceWidth, setSliceWidth] = useState(16);
-    const [sliceHeight, setSliceHeight] = useState(16);
-    return (jsxs("div", { className: styles.toolbar, children: [jsxs("div", { className: styles.toolGroup, children: [jsx(NiceButton, { className: `${styles.toolBtn} ${api.editorState.spriteSheetTool === 'select' ? styles.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: jsx(NiceIcon, { name: "square", size: 16 }) }), jsx(NiceButton, { className: `${styles.toolBtn} ${api.editorState.spriteSheetTool === 'slice' ? styles.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: jsx(NiceIcon, { name: "scissors", size: 16 }) })] }), jsx("div", { className: styles.spacer }), jsxs("label", { style: { fontSize: 11, color: 'var(--nice-text-secondary, #8892a8)' }, children: [t('gameAsset2dEditor.frameSize', 'Frame size:'), jsx(NiceNumberInput, { value: sliceWidth, onChange: (val) => setSliceWidth(val !== null && val !== void 0 ? val : 16), style: { width: 40, margin: '0 4px' }, className: styles.panelInput }), "\u00D7", jsx(NiceNumberInput, { value: sliceHeight, onChange: (val) => setSliceHeight(val !== null && val !== void 0 ? val : 16), style: { width: 40, marginLeft: 4 }, className: styles.panelInput })] }), jsx(NiceButton, { className: styles.btnSecondary, variant: "ghost", onClick: () => api.autoSlice(sliceWidth, sliceHeight), style: { marginLeft: 8 }, children: t('gameAsset2dEditor.autoSlice', 'Auto Slice') }), jsx(NiceButton, { className: styles.btnSecondary, variant: "ghost", onClick: api.detectSprites, style: { marginLeft: 4 }, children: t('gameAsset2dEditor.detectSprites', 'Detect Sprites') })] }));
-};
-/* ────────────────────────────────────────────────────────────────
-   TILE PALETTE (LEFT PANEL)
-──────────────────────────────────────────────────────────────── */
-const TilePalette = ({ api }) => {
-    const { t } = useNiceTranslation();
-    const fileInputRef = useRef(null);
-    return (jsxs("div", { className: styles.leftPanel, children: [jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: t('gameAsset2dEditor.tiles', 'Tiles') }), jsx(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: t('gameAsset2dEditor.add', '+ Add') })] }), jsx("div", { className: styles.panelContent, children: api.project.tileSets.length === 0 ? (jsxs("div", { className: styles.emptyState, children: [jsx("div", { className: styles.emptyStateText, children: t('gameAsset2dEditor.noTilesYet', 'No tiles yet') }), jsx(NiceButton, { className: styles.btnSecondary, variant: "ghost", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: t('gameAsset2dEditor.importTiles', 'Import Tiles') })] })) : (jsx("div", { className: styles.tilePalette, children: api.project.tileSets.map((tile) => (jsx("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.tileItem} ${api.editorState.selectedTileId === tile.id ? styles.selected : ''}`, onClick: () => api.selectTile(tile.id), title: tile.name, children: jsx("img", { src: tile.thumbnail, alt: tile.name }) }, tile.id))) })) }), 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) {
-                        api.importTileSet(file);
-                    }
-                    e.target.value = '';
-                } })] }));
-};
-/* ────────────────────────────────────────────────────────────────
-   LAYERS PANEL (RIGHT PANEL)
-──────────────────────────────────────────────────────────────── */
-const LayersPanel = ({ api }) => {
-    const { t } = useNiceTranslation();
-    const activeMap = api.project.tileMaps.find((m) => m.id === api.editorState.activeTileMapId);
-    return (jsxs("div", { className: styles.rightPanel, children: [jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: t('gameAsset2dEditor.layers', 'Layers') }), jsx(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.addLayer, disabled: !activeMap, children: t('gameAsset2dEditor.add', '+ Add') })] }), jsx("div", { className: styles.panelContent, children: activeMap ? (jsx("div", { className: styles.layersList, children: [...activeMap.layers].reverse().map((layer) => (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.layerItem} ${api.editorState.activeLayerId === layer.id ? styles.selected : ''}`, onClick: () => api.selectLayer(layer.id), children: [jsx(NiceButton, { className: `${styles.layerVisibility} ${!layer.visible ? styles.hidden : ''}`, variant: "ghost", size: "sm", onClick: (e) => {
-                                    e.stopPropagation();
-                                    api.toggleLayerVisibility(layer.id);
-                                }, "aria-label": layer.visible
-                                    ? t('gameAsset2dEditor.hideLayer', 'Hide layer')
-                                    : t('gameAsset2dEditor.showLayer', 'Show layer'), children: jsx(NiceIcon, { name: layer.visible ? 'eye' : 'eye-off', size: 16 }) }), jsx("span", { className: styles.layerName, children: layer.name }), jsxs("span", { className: styles.layerOpacity, children: [Math.round(layer.opacity * 100), "%"] })] }, layer.id))) })) : (jsx("div", { className: styles.emptyState, children: jsx("div", { className: styles.emptyStateText, children: t('gameAsset2dEditor.noTileMapSelected', 'No tile map selected') }) })) }), jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: t('gameAsset2dEditor.maps', 'Maps') }), jsx(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => api.createTileMap('New Map', 32, 32), children: t('gameAsset2dEditor.new2', '+ New') })] }), jsx("div", { className: styles.panelContent, children: api.project.tileMaps.map((map) => (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.layerItem} ${api.editorState.activeTileMapId === map.id ? styles.selected : ''}`, onClick: () => api.selectTileMap(map.id), children: [jsx("span", { className: styles.layerName, children: map.name }), jsxs("span", { className: styles.layerOpacity, children: [map.width, "\u00D7", map.height] })] }, map.id))) })] }));
-};
-/* ────────────────────────────────────────────────────────────────
-   TILE MAP CANVAS
-──────────────────────────────────────────────────────────────── */
-const TileMapCanvas = ({ api }) => {
-    const { t } = useNiceTranslation();
-    const canvasRef = useRef(null);
-    const containerRef = useRef(null);
-    const [isDragging, setIsDragging] = useState(false);
-    const activeMap = api.project.tileMaps.find((m) => m.id === api.editorState.activeTileMapId);
-    // Render the tile map
-    useEffect(() => {
-        var _a;
-        const canvas = canvasRef.current;
-        if (!canvas || !activeMap) {
-            return;
-        }
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        canvas.width = activeMap.width * activeMap.tileWidth;
-        canvas.height = activeMap.height * activeMap.tileHeight;
-        // Background
-        ctx.fillStyle = activeMap.backgroundColor;
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-        // Render layers
-        for (const layer of activeMap.layers.filter((l) => l.visible)) {
-            ctx.globalAlpha = layer.opacity;
-            for (let y = 0; y < activeMap.height; y++) {
-                for (let x = 0; x < activeMap.width; x++) {
-                    const tileId = (_a = layer.tiles[y]) === null || _a === void 0 ? void 0 : _a[x];
-                    if (tileId) {
-                        const tile = api.project.tileSets.find((t) => t.id === tileId);
-                        if (tile === null || tile === void 0 ? void 0 : tile.thumbnail) {
-                            const img = new Image();
-                            img.src = tile.thumbnail;
-                            ctx.drawImage(img, x * activeMap.tileWidth, y * activeMap.tileHeight, activeMap.tileWidth, activeMap.tileHeight);
-                        }
-                    }
-                }
-            }
+  const { t } = useNiceTranslation();
+  const [sliceWidth, setSliceWidth] = useState(16);
+  const [sliceHeight, setSliceHeight] = useState(16);
+  return /* @__PURE__ */ jsxs("div", { className: styles.toolbar, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.toolGroup, children: [
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: `${styles.toolBtn} ${api.editorState.spriteSheetTool === "select" ? styles.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: /* @__PURE__ */ jsx(NiceIcon, { name: "square", size: 16 })
         }
-        // Grid overlay
-        if (api.editorState.showGrid) {
-            ctx.globalAlpha = 0.3;
-            ctx.strokeStyle = resolveCssColor('var(--nice-bg, #fff)', ctx.canvas);
-            ctx.lineWidth = 1;
-            for (let x = 0; x <= activeMap.width; x++) {
-                ctx.beginPath();
-                ctx.moveTo(x * activeMap.tileWidth, 0);
-                ctx.lineTo(x * activeMap.tileWidth, canvas.height);
-                ctx.stroke();
-            }
-            for (let y = 0; y <= activeMap.height; y++) {
-                ctx.beginPath();
-                ctx.moveTo(0, y * activeMap.tileHeight);
-                ctx.lineTo(canvas.width, y * activeMap.tileHeight);
-                ctx.stroke();
-            }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: `${styles.toolBtn} ${api.editorState.spriteSheetTool === "slice" ? styles.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: /* @__PURE__ */ jsx(NiceIcon, { name: "scissors", size: 16 })
         }
-        ctx.globalAlpha = 1;
-    }, [activeMap, api.project.tileSets, api.editorState.showGrid]);
-    const handleCanvasClick = useCallback((e) => {
-        if (!activeMap || !api.editorState.activeLayerId || !api.editorState.selectedTileId) {
-            return;
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.spacer }),
+    /* @__PURE__ */ jsxs("label", { style: { fontSize: 11, color: "var(--nice-text-secondary, #8892a8)" }, children: [
+      t("gameAsset2dEditor.frameSize", "Frame size:"),
+      /* @__PURE__ */ jsx(
+        NiceNumberInput,
+        {
+          value: sliceWidth,
+          onChange: (val) => setSliceWidth(val ?? 16),
+          style: { width: 40, margin: "0 4px" },
+          className: styles.panelInput
         }
-        const canvas = canvasRef.current;
-        if (!canvas) {
-            return;
+      ),
+      "×",
+      /* @__PURE__ */ jsx(
+        NiceNumberInput,
+        {
+          value: sliceHeight,
+          onChange: (val) => setSliceHeight(val ?? 16),
+          style: { width: 40, marginLeft: 4 },
+          className: styles.panelInput
         }
-        const rect = canvas.getBoundingClientRect();
-        const scaleX = canvas.width / rect.width;
-        const scaleY = canvas.height / rect.height;
-        const x = Math.floor(((e.clientX - rect.left) * scaleX) / activeMap.tileWidth);
-        const y = Math.floor(((e.clientY - rect.top) * scaleY) / activeMap.tileHeight);
-        if (api.editorState.tileMapTool === 'brush') {
-            api.setTile(api.editorState.activeLayerId, x, y, api.editorState.selectedTileId);
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      NiceButton,
+      {
+        className: styles.btnSecondary,
+        variant: "ghost",
+        onClick: () => api.autoSlice(sliceWidth, sliceHeight),
+        style: { marginLeft: 8 },
+        children: t("gameAsset2dEditor.autoSlice", "Auto Slice")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NiceButton,
+      {
+        className: styles.btnSecondary,
+        variant: "ghost",
+        onClick: api.detectSprites,
+        style: { marginLeft: 4 },
+        children: t("gameAsset2dEditor.detectSprites", "Detect Sprites")
+      }
+    )
+  ] });
+};
+const TilePalette = ({ api }) => {
+  const { t } = useNiceTranslation();
+  const fileInputRef = useRef(null);
+  return /* @__PURE__ */ jsxs("div", { className: styles.leftPanel, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.panelHeader, children: [
+      /* @__PURE__ */ jsx("span", { children: t("gameAsset2dEditor.tiles", "Tiles") }),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.menuBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: () => fileInputRef.current?.click(),
+          children: t("gameAsset2dEditor.add", "+ Add")
         }
-        else if (api.editorState.tileMapTool === 'eraser') {
-            api.setTile(api.editorState.activeLayerId, x, y, null);
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.panelContent, children: api.project.tileSets.length === 0 ? /* @__PURE__ */ jsxs("div", { className: styles.emptyState, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.emptyStateText, children: t("gameAsset2dEditor.noTilesYet", "No tiles yet") }),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.btnSecondary,
+          variant: "ghost",
+          onClick: () => fileInputRef.current?.click(),
+          children: t("gameAsset2dEditor.importTiles", "Import Tiles")
         }
-        else if (api.editorState.tileMapTool === 'fill') {
-            api.fillTiles(api.editorState.activeLayerId, x, y, api.editorState.selectedTileId);
+      )
+    ] }) : /* @__PURE__ */ jsx("div", { className: styles.tilePalette, children: api.project.tileSets.map((tile) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: clickOnActivationKey,
+        className: `${styles.tileItem} ${api.editorState.selectedTileId === tile.id ? styles.selected : ""}`,
+        onClick: () => api.selectTile(tile.id),
+        title: tile.name,
+        children: /* @__PURE__ */ jsx("img", { src: tile.thumbnail, alt: tile.name })
+      },
+      tile.id
+    )) }) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: "image/*",
+        style: { display: "none" },
+        onChange: (e) => {
+          const file = e.target.files?.[0];
+          if (file) {
+            api.importTileSet(file);
+          }
+          e.target.value = "";
         }
-    }, [activeMap, api]);
-    return (jsx("div", { className: styles.viewport, ref: containerRef, children: activeMap ? (jsx("canvas", { ref: canvasRef, className: styles.viewportCanvas, style: {
-                transform: `translate(-50%, -50%) scale(${api.editorState.zoom})`,
-            }, onClick: handleCanvasClick, onMouseDown: () => setIsDragging(true), onMouseUp: () => setIsDragging(false), onMouseMove: (e) => {
-                if (isDragging &&
-                    (api.editorState.tileMapTool === 'brush' || api.editorState.tileMapTool === 'eraser')) {
-                    handleCanvasClick(e);
-                }
-            } })) : (jsxs("div", { className: styles.emptyState, children: [jsx("div", { className: styles.emptyStateText, children: t('gameAsset2dEditor.createOrSelectATile', 'Create or select a tile map to start editing') }), jsx(NiceButton, { className: styles.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 } = useNiceTranslation();
-    const canvasRef = useRef(null);
-    const fileInputRef = useRef(null);
-    const activeSheet = api.project.spriteSheets.find((s) => s.id === api.editorState.activeSpriteSheetId);
-    // Render sprite sheet with frame overlays
-    useEffect(() => {
-        const canvas = canvasRef.current;
-        if (!canvas || !(activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.image)) {
-            return;
-        }
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
-            return;
+const LayersPanel = ({ api }) => {
+  const { t } = useNiceTranslation();
+  const activeMap = api.project.tileMaps.find((m) => m.id === api.editorState.activeTileMapId);
+  return /* @__PURE__ */ jsxs("div", { className: styles.rightPanel, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.panelHeader, children: [
+      /* @__PURE__ */ jsx("span", { children: t("gameAsset2dEditor.layers", "Layers") }),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.menuBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: api.addLayer,
+          disabled: !activeMap,
+          children: t("gameAsset2dEditor.add", "+ Add")
         }
-        canvas.width = activeSheet.width;
-        canvas.height = activeSheet.height;
-        // Draw image
-        ctx.drawImage(activeSheet.image, 0, 0);
-        // Draw frame overlays
-        ctx.strokeStyle = resolveCssColor('var(--nice-warning, #ffd369)', ctx.canvas);
-        ctx.lineWidth = 2;
-        for (const frame of activeSheet.frames) {
-            const isSelected = api.editorState.selectedFrameIds.includes(frame.id);
-            ctx.strokeStyle = resolveCssColor(isSelected ? 'var(--nice-warning, #ffd369)' : 'var(--nice-text-secondary, #4a5a7e)', ctx.canvas);
-            ctx.strokeRect(frame.x, frame.y, frame.width, frame.height);
-            // Draw pivot point
-            const pivotX = frame.x + frame.width * frame.pivotX;
-            const pivotY = frame.y + frame.height * frame.pivotY;
-            ctx.fillStyle = resolveCssColor(isSelected ? 'var(--nice-warning, #ffd369)' : 'var(--nice-text-secondary, #4a5a7e)', ctx.canvas);
-            ctx.beginPath();
-            ctx.arc(pivotX, pivotY, 3, 0, Math.PI * 2);
-            ctx.fill();
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.panelContent, children: activeMap ? /* @__PURE__ */ jsx("div", { className: styles.layersList, children: [...activeMap.layers].reverse().map((layer) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: clickOnActivationKey,
+        className: `${styles.layerItem} ${api.editorState.activeLayerId === layer.id ? styles.selected : ""}`,
+        onClick: () => api.selectLayer(layer.id),
+        children: [
+          /* @__PURE__ */ jsx(
+            NiceButton,
+            {
+              className: `${styles.layerVisibility} ${!layer.visible ? styles.hidden : ""}`,
+              variant: "ghost",
+              size: "sm",
+              onClick: (e) => {
+                e.stopPropagation();
+                api.toggleLayerVisibility(layer.id);
+              },
+              "aria-label": layer.visible ? t("gameAsset2dEditor.hideLayer", "Hide layer") : t("gameAsset2dEditor.showLayer", "Show layer"),
+              children: /* @__PURE__ */ jsx(NiceIcon, { name: layer.visible ? "eye" : "eye-off", size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: styles.layerName, children: layer.name }),
+          /* @__PURE__ */ jsxs("span", { className: styles.layerOpacity, children: [
+            Math.round(layer.opacity * 100),
+            "%"
+          ] })
+        ]
+      },
+      layer.id
+    )) }) : /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: /* @__PURE__ */ jsx("div", { className: styles.emptyStateText, children: t("gameAsset2dEditor.noTileMapSelected", "No tile map selected") }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: styles.panelHeader, children: [
+      /* @__PURE__ */ jsx("span", { children: t("gameAsset2dEditor.maps", "Maps") }),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.menuBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: () => api.createTileMap("New Map", 32, 32),
+          children: t("gameAsset2dEditor.new2", "+ New")
         }
-    }, [activeSheet, api.editorState.selectedFrameIds]);
-    const handleFrameClick = useCallback((e) => {
-        if (!activeSheet) {
-            return;
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.panelContent, children: api.project.tileMaps.map((map) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: clickOnActivationKey,
+        className: `${styles.layerItem} ${api.editorState.activeTileMapId === map.id ? styles.selected : ""}`,
+        onClick: () => api.selectTileMap(map.id),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: styles.layerName, children: map.name }),
+          /* @__PURE__ */ jsxs("span", { className: styles.layerOpacity, children: [
+            map.width,
+            "×",
+            map.height
+          ] })
+        ]
+      },
+      map.id
+    )) })
+  ] });
+};
+const TileMapCanvas = ({ api }) => {
+  const { t } = useNiceTranslation();
+  const canvasRef = useRef(null);
+  const containerRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const activeMap = api.project.tileMaps.find((m) => m.id === api.editorState.activeTileMapId);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !activeMap) {
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+    canvas.width = activeMap.width * activeMap.tileWidth;
+    canvas.height = activeMap.height * activeMap.tileHeight;
+    ctx.fillStyle = activeMap.backgroundColor;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    for (const layer of activeMap.layers.filter((l) => l.visible)) {
+      ctx.globalAlpha = layer.opacity;
+      for (let y = 0; y < activeMap.height; y++) {
+        for (let x = 0; x < activeMap.width; x++) {
+          const tileId = layer.tiles[y]?.[x];
+          if (tileId) {
+            const tile = api.project.tileSets.find((t2) => t2.id === tileId);
+            if (tile?.thumbnail) {
+              const img = new Image();
+              img.src = tile.thumbnail;
+              ctx.drawImage(
+                img,
+                x * activeMap.tileWidth,
+                y * activeMap.tileHeight,
+                activeMap.tileWidth,
+                activeMap.tileHeight
+              );
+            }
+          }
         }
-        const canvas = canvasRef.current;
-        if (!canvas) {
-            return;
+      }
+    }
+    if (api.editorState.showGrid) {
+      ctx.globalAlpha = 0.3;
+      ctx.strokeStyle = resolveCssColor("var(--nice-bg, #fff)", ctx.canvas);
+      ctx.lineWidth = 1;
+      for (let x = 0; x <= activeMap.width; x++) {
+        ctx.beginPath();
+        ctx.moveTo(x * activeMap.tileWidth, 0);
+        ctx.lineTo(x * activeMap.tileWidth, canvas.height);
+        ctx.stroke();
+      }
+      for (let y = 0; y <= activeMap.height; y++) {
+        ctx.beginPath();
+        ctx.moveTo(0, y * activeMap.tileHeight);
+        ctx.lineTo(canvas.width, y * activeMap.tileHeight);
+        ctx.stroke();
+      }
+    }
+    ctx.globalAlpha = 1;
+  }, [activeMap, api.project.tileSets, api.editorState.showGrid]);
+  const handleCanvasClick = useCallback(
+    (e) => {
+      if (!activeMap || !api.editorState.activeLayerId || !api.editorState.selectedTileId) {
+        return;
+      }
+      const canvas = canvasRef.current;
+      if (!canvas) {
+        return;
+      }
+      const rect = canvas.getBoundingClientRect();
+      const scaleX = canvas.width / rect.width;
+      const scaleY = canvas.height / rect.height;
+      const x = Math.floor((e.clientX - rect.left) * scaleX / activeMap.tileWidth);
+      const y = Math.floor((e.clientY - rect.top) * scaleY / activeMap.tileHeight);
+      if (api.editorState.tileMapTool === "brush") {
+        api.setTile(api.editorState.activeLayerId, x, y, api.editorState.selectedTileId);
+      } else if (api.editorState.tileMapTool === "eraser") {
+        api.setTile(api.editorState.activeLayerId, x, y, null);
+      } else if (api.editorState.tileMapTool === "fill") {
+        api.fillTiles(api.editorState.activeLayerId, x, y, api.editorState.selectedTileId);
+      }
+    },
+    [activeMap, api]
+  );
+  return /* @__PURE__ */ jsx("div", { className: styles.viewport, ref: containerRef, children: activeMap ? /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      className: styles.viewportCanvas,
+      style: {
+        transform: `translate(-50%, -50%) scale(${api.editorState.zoom})`
+      },
+      onClick: handleCanvasClick,
+      onMouseDown: () => setIsDragging(true),
+      onMouseUp: () => setIsDragging(false),
+      onMouseMove: (e) => {
+        if (isDragging && (api.editorState.tileMapTool === "brush" || api.editorState.tileMapTool === "eraser")) {
+          handleCanvasClick(e);
         }
-        const rect = canvas.getBoundingClientRect();
-        const scaleX = canvas.width / rect.width;
-        const scaleY = canvas.height / rect.height;
-        const x = (e.clientX - rect.left) * scaleX;
-        const y = (e.clientY - rect.top) * scaleY;
-        // Find clicked frame
-        const clickedFrame = activeSheet.frames.find((f) => x >= f.x && x <= f.x + f.width && y >= f.y && y <= f.y + f.height);
-        if (clickedFrame) {
-            if (e.ctrlKey || e.metaKey) {
-                // Toggle selection
-                const newSelection = api.editorState.selectedFrameIds.includes(clickedFrame.id)
-                    ? api.editorState.selectedFrameIds.filter((id) => id !== clickedFrame.id)
-                    : [...api.editorState.selectedFrameIds, clickedFrame.id];
-                api.selectFrames(newSelection);
-            }
-            else {
-                api.selectFrames([clickedFrame.id]);
-            }
+      }
+    }
+  ) : /* @__PURE__ */ jsxs("div", { className: styles.emptyState, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.emptyStateText, children: t(
+      "gameAsset2dEditor.createOrSelectATile",
+      "Create or select a tile map to start editing"
+    ) }),
+    /* @__PURE__ */ jsx(
+      NiceButton,
+      {
+        className: styles.btnPrimary,
+        variant: "primary",
+        onClick: () => api.createTileMap("New Map", 32, 32),
+        children: t("gameAsset2dEditor.createTileMap", "Create Tile Map")
+      }
+    )
+  ] }) });
+};
+const SpriteSheetCanvas = ({ api }) => {
+  const { t } = useNiceTranslation();
+  const canvasRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const activeSheet = api.project.spriteSheets.find(
+    (s) => s.id === api.editorState.activeSpriteSheetId
+  );
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !activeSheet?.image) {
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+    canvas.width = activeSheet.width;
+    canvas.height = activeSheet.height;
+    ctx.drawImage(activeSheet.image, 0, 0);
+    ctx.strokeStyle = resolveCssColor("var(--nice-warning, #ffd369)", ctx.canvas);
+    ctx.lineWidth = 2;
+    for (const frame of activeSheet.frames) {
+      const isSelected = api.editorState.selectedFrameIds.includes(frame.id);
+      ctx.strokeStyle = resolveCssColor(
+        isSelected ? "var(--nice-warning, #ffd369)" : "var(--nice-text-secondary, #4a5a7e)",
+        ctx.canvas
+      );
+      ctx.strokeRect(frame.x, frame.y, frame.width, frame.height);
+      const pivotX = frame.x + frame.width * frame.pivotX;
+      const pivotY = frame.y + frame.height * frame.pivotY;
+      ctx.fillStyle = resolveCssColor(
+        isSelected ? "var(--nice-warning, #ffd369)" : "var(--nice-text-secondary, #4a5a7e)",
+        ctx.canvas
+      );
+      ctx.beginPath();
+      ctx.arc(pivotX, pivotY, 3, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  }, [activeSheet, api.editorState.selectedFrameIds]);
+  const handleFrameClick = useCallback(
+    (e) => {
+      if (!activeSheet) {
+        return;
+      }
+      const canvas = canvasRef.current;
+      if (!canvas) {
+        return;
+      }
+      const rect = canvas.getBoundingClientRect();
+      const scaleX = canvas.width / rect.width;
+      const scaleY = canvas.height / rect.height;
+      const x = (e.clientX - rect.left) * scaleX;
+      const y = (e.clientY - rect.top) * scaleY;
+      const clickedFrame = activeSheet.frames.find(
+        (f) => x >= f.x && x <= f.x + f.width && y >= f.y && y <= f.y + f.height
+      );
+      if (clickedFrame) {
+        if (e.ctrlKey || e.metaKey) {
+          const newSelection = api.editorState.selectedFrameIds.includes(clickedFrame.id) ? api.editorState.selectedFrameIds.filter((id) => id !== clickedFrame.id) : [...api.editorState.selectedFrameIds, clickedFrame.id];
+          api.selectFrames(newSelection);
+        } else {
+          api.selectFrames([clickedFrame.id]);
         }
-        else {
-            api.selectFrames([]);
+      } else {
+        api.selectFrames([]);
+      }
+    },
+    [activeSheet, api]
+  );
+  return /* @__PURE__ */ jsx("div", { className: styles.viewport, children: activeSheet ? /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      className: styles.viewportCanvas,
+      style: {
+        transform: `translate(-50%, -50%) scale(${api.editorState.zoom})`
+      },
+      onClick: handleFrameClick
+    }
+  ) : /* @__PURE__ */ jsxs("div", { className: styles.emptyState, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.emptyStateText, children: t("gameAsset2dEditor.importASpriteSheetTo", "Import a sprite sheet to start") }),
+    /* @__PURE__ */ jsx(
+      NiceButton,
+      {
+        className: styles.btnPrimary,
+        variant: "primary",
+        onClick: () => fileInputRef.current?.click(),
+        children: t("gameAsset2dEditor.importSpriteSheet", "Import Sprite Sheet")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: "image/*",
+        style: { display: "none" },
+        onChange: (e) => {
+          const file = e.target.files?.[0];
+          if (file) {
+            api.importSpriteSheet(file);
+          }
+          e.target.value = "";
         }
-    }, [activeSheet, api]);
-    return (jsx("div", { className: styles.viewport, children: activeSheet ? (jsx("canvas", { ref: canvasRef, className: styles.viewportCanvas, style: {
-                transform: `translate(-50%, -50%) scale(${api.editorState.zoom})`,
-            }, onClick: handleFrameClick })) : (jsxs("div", { className: styles.emptyState, children: [jsx("div", { className: styles.emptyStateText, children: t('gameAsset2dEditor.importASpriteSheetTo', 'Import a sprite sheet to start') }), jsx(NiceButton, { className: styles.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') }), 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) {
-                            api.importSpriteSheet(file);
-                        }
-                        e.target.value = '';
-                    } })] })) }));
+      }
+    )
+  ] }) });
 };
-/* ────────────────────────────────────────────────────────────────
-   SPRITE SHEETS LIST
-──────────────────────────────────────────────────────────────── */
 const SpriteSheetsList = ({ api }) => {
-    const { t } = useNiceTranslation();
-    const fileInputRef = useRef(null);
-    return (jsxs("div", { className: styles.leftPanel, children: [jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: t('gameAsset2dEditor.spriteSheets', 'Sprite Sheets') }), jsx(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: t('gameAsset2dEditor.import', '+ Import') })] }), jsx("div", { className: styles.panelContent, children: api.project.spriteSheets.length === 0 ? (jsx("div", { className: styles.emptyState, children: jsx("div", { className: styles.emptyStateText, children: t('gameAsset2dEditor.noSpriteSheets', 'No sprite sheets') }) })) : (jsx("div", { className: styles.layersList, children: api.project.spriteSheets.map((sheet) => (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.layerItem} ${api.editorState.activeSpriteSheetId === sheet.id ? styles.selected : ''}`, onClick: () => api.selectSpriteSheet(sheet.id), children: [jsx("span", { className: styles.layerName, children: sheet.name }), jsx("span", { className: styles.layerOpacity, children: t('gameAsset2dEditor.frames', '{frames} frames').replace('{frames}', String(sheet.frames.length)) })] }, sheet.id))) })) }), 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) {
-                        api.importSpriteSheet(file);
-                    }
-                    e.target.value = '';
-                } })] }));
+  const { t } = useNiceTranslation();
+  const fileInputRef = useRef(null);
+  return /* @__PURE__ */ jsxs("div", { className: styles.leftPanel, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.panelHeader, children: [
+      /* @__PURE__ */ jsx("span", { children: t("gameAsset2dEditor.spriteSheets", "Sprite Sheets") }),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.menuBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: () => fileInputRef.current?.click(),
+          children: t("gameAsset2dEditor.import", "+ Import")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.panelContent, children: api.project.spriteSheets.length === 0 ? /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: /* @__PURE__ */ jsx("div", { className: styles.emptyStateText, children: t("gameAsset2dEditor.noSpriteSheets", "No sprite sheets") }) }) : /* @__PURE__ */ jsx("div", { className: styles.layersList, children: api.project.spriteSheets.map((sheet) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: clickOnActivationKey,
+        className: `${styles.layerItem} ${api.editorState.activeSpriteSheetId === sheet.id ? styles.selected : ""}`,
+        onClick: () => api.selectSpriteSheet(sheet.id),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: styles.layerName, children: sheet.name }),
+          /* @__PURE__ */ jsx("span", { className: styles.layerOpacity, children: t("gameAsset2dEditor.frames", "{frames} frames").replace(
+            "{frames}",
+            String(sheet.frames.length)
+          ) })
+        ]
+      },
+      sheet.id
+    )) }) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: "image/*",
+        style: { display: "none" },
+        onChange: (e) => {
+          const file = e.target.files?.[0];
+          if (file) {
+            api.importSpriteSheet(file);
+          }
+          e.target.value = "";
+        }
+      }
+    )
+  ] });
 };
-/* ────────────────────────────────────────────────────────────────
-   FRAMES & ANIMATIONS PANEL
-──────────────────────────────────────────────────────────────── */
 const FramesPanel = ({ api }) => {
-    var _a;
-    const { t } = useNiceTranslation();
-    const [animName, setAnimName] = useState('');
-    const activeSheet = api.project.spriteSheets.find((s) => s.id === api.editorState.activeSpriteSheetId);
-    const createAnimationFromSelection = useCallback(() => {
-        if (animName && api.editorState.selectedFrameIds.length > 0) {
-            api.createAnimation(animName, api.editorState.selectedFrameIds);
-            setAnimName('');
-        }
-    }, [animName, api]);
-    return (jsxs("div", { className: styles.rightPanel, children: [jsx("div", { className: styles.panelHeader, children: jsx("span", { children: t('gameAsset2dEditor.frames2', 'Frames ({frames})').replace('{frames}', String((_a = activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.frames.length) !== null && _a !== void 0 ? _a : 0)) }) }), jsx("div", { className: styles.panelContent, style: { maxHeight: 200 }, children: activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.frames.map((frame) => (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.layerItem} ${api.editorState.selectedFrameIds.includes(frame.id) ? styles.selected : ''}`, onClick: () => api.selectFrames([frame.id]), children: [jsx("span", { className: styles.layerName, children: frame.name }), jsxs("span", { className: styles.layerOpacity, children: [frame.width, "\u00D7", frame.height] })] }, frame.id))) }), jsx("div", { className: styles.panelHeader, children: jsx("span", { children: t('gameAsset2dEditor.animations', 'Animations') }) }), jsxs("div", { className: styles.panelContent, children: [api.editorState.selectedFrameIds.length > 0 && (jsxs("div", { className: styles.panelSection, children: [jsx(NiceTextInput, { className: styles.panelInput, placeholder: t('gameAsset2dEditor.animationName', 'Animation name...'), value: animName, onChange: (val) => setAnimName(val) }), jsx(NiceButton, { className: styles.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) => (jsxs("div", { className: styles.layerItem, children: [jsx("span", { className: styles.layerName, children: anim.name }), jsxs("span", { className: styles.layerOpacity, children: [anim.frameIds.length, "f"] }), jsx(NiceButton, { className: styles.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeAnimation(anim.id), "aria-label": t('gameAsset2dEditor.removeAnimation', 'Remove animation'), children: jsx(NiceIcon, { name: "close", size: 14 }) })] }, anim.id)))] })] }));
+  const { t } = useNiceTranslation();
+  const [animName, setAnimName] = useState("");
+  const activeSheet = api.project.spriteSheets.find(
+    (s) => s.id === api.editorState.activeSpriteSheetId
+  );
+  const createAnimationFromSelection = useCallback(() => {
+    if (animName && api.editorState.selectedFrameIds.length > 0) {
+      api.createAnimation(animName, api.editorState.selectedFrameIds);
+      setAnimName("");
+    }
+  }, [animName, api]);
+  return /* @__PURE__ */ jsxs("div", { className: styles.rightPanel, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.panelHeader, children: /* @__PURE__ */ jsx("span", { children: t("gameAsset2dEditor.frames2", "Frames ({frames})").replace(
+      "{frames}",
+      String(activeSheet?.frames.length ?? 0)
+    ) }) }),
+    /* @__PURE__ */ jsx("div", { className: styles.panelContent, style: { maxHeight: 200 }, children: activeSheet?.frames.map((frame) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: clickOnActivationKey,
+        className: `${styles.layerItem} ${api.editorState.selectedFrameIds.includes(frame.id) ? styles.selected : ""}`,
+        onClick: () => api.selectFrames([frame.id]),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: styles.layerName, children: frame.name }),
+          /* @__PURE__ */ jsxs("span", { className: styles.layerOpacity, children: [
+            frame.width,
+            "×",
+            frame.height
+          ] })
+        ]
+      },
+      frame.id
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: styles.panelHeader, children: /* @__PURE__ */ jsx("span", { children: t("gameAsset2dEditor.animations", "Animations") }) }),
+    /* @__PURE__ */ jsxs("div", { className: styles.panelContent, children: [
+      api.editorState.selectedFrameIds.length > 0 && /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+        /* @__PURE__ */ jsx(
+          NiceTextInput,
+          {
+            className: styles.panelInput,
+            placeholder: t("gameAsset2dEditor.animationName", "Animation name..."),
+            value: animName,
+            onChange: (val) => setAnimName(val)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          NiceButton,
+          {
+            className: styles.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?.animations.map((anim) => /* @__PURE__ */ jsxs("div", { className: styles.layerItem, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.layerName, children: anim.name }),
+        /* @__PURE__ */ jsxs("span", { className: styles.layerOpacity, children: [
+          anim.frameIds.length,
+          "f"
+        ] }),
+        /* @__PURE__ */ jsx(
+          NiceButton,
+          {
+            className: styles.effectRemove,
+            variant: "ghost",
+            size: "sm",
+            onClick: () => api.removeAnimation(anim.id),
+            "aria-label": t("gameAsset2dEditor.removeAnimation", "Remove animation"),
+            children: /* @__PURE__ */ jsx(NiceIcon, { name: "close", size: 14 })
+          }
+        )
+      ] }, anim.id))
+    ] })
+  ] });
 };
-/* ────────────────────────────────────────────────────────────────
-   ANIMATION STATE MACHINE
-──────────────────────────────────────────────────────────────── */
 const AnimationStateMachineView = ({ api }) => {
-    var _a;
-    const { t } = useNiceTranslation();
-    const [newStateName, setNewStateName] = useState('');
-    const activeSM = api.project.stateMachines.find((sm) => sm.id === api.editorState.activeStateMachineId);
-    // Get all animations from all sprite sheets
-    const allAnimations = useMemo(() => {
-        const result = [];
-        for (const sheet of api.project.spriteSheets) {
-            for (const anim of sheet.animations) {
-                result.push({ ...anim, sheetName: sheet.name });
-            }
+  const { t } = useNiceTranslation();
+  const [newStateName, setNewStateName] = useState("");
+  const activeSM = api.project.stateMachines.find(
+    (sm) => sm.id === api.editorState.activeStateMachineId
+  );
+  const allAnimations = useMemo(() => {
+    const result = [];
+    for (const sheet of api.project.spriteSheets) {
+      for (const anim of sheet.animations) {
+        result.push({ ...anim, sheetName: sheet.name });
+      }
+    }
+    return result;
+  }, [api.project.spriteSheets]);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flex: 1, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.leftPanel, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.panelHeader, children: [
+        /* @__PURE__ */ jsx("span", { children: t("gameAsset2dEditor.stateMachines", "State Machines") }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: styles.menuBtn,
+            onClick: () => api.createStateMachine("New State Machine"),
+            children: t("gameAsset2dEditor.new2", "+ New")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: styles.panelContent, style: { maxHeight: 150 }, children: api.project.stateMachines.map((sm) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: clickOnActivationKey,
+          className: `${styles.layerItem} ${api.editorState.activeStateMachineId === sm.id ? styles.selected : ""}`,
+          onClick: () => api.selectStateMachine(sm.id),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: styles.layerName, children: sm.name }),
+            /* @__PURE__ */ jsx("span", { className: styles.layerOpacity, children: t("gameAsset2dEditor.states2", "{states} states").replace(
+              "{states}",
+              String(sm.states.length)
+            ) })
+          ]
+        },
+        sm.id
+      )) }),
+      activeSM && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: styles.panelHeader, children: /* @__PURE__ */ jsx("span", { children: t("gameAsset2dEditor.states", "States") }) }),
+        /* @__PURE__ */ jsxs("div", { className: styles.panelContent, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+            /* @__PURE__ */ jsx(
+              NiceTextInput,
+              {
+                className: styles.panelInput,
+                placeholder: t("gameAsset2dEditor.stateName", "State name..."),
+                value: newStateName,
+                onChange: (val) => setNewStateName(val)
+              }
+            ),
+            allAnimations.length > 0 && newStateName && /* @__PURE__ */ jsx(
+              NiceSelect,
+              {
+                className: styles.panelInput,
+                style: { marginTop: 4 },
+                onChange: (val) => {
+                  if (val) {
+                    api.addState(newStateName, val);
+                    setNewStateName("");
+                  }
+                },
+                options: [
+                  {
+                    value: "",
+                    label: t("gameAsset2dEditor.selectAnimation", "Select animation...")
+                  },
+                  ...allAnimations.map((anim) => ({
+                    value: anim.id,
+                    label: `${anim.sheetName}: ${anim.name}`
+                  }))
+                ]
+              }
+            )
+          ] }),
+          activeSM.states.map((state) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: clickOnActivationKey,
+              className: `${styles.layerItem} ${api.editorState.selectedStateId === state.id ? styles.selected : ""} ${activeSM.entryStateId === state.id ? styles.entry : ""}`,
+              onClick: () => api.selectState(state.id),
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: styles.layerName, children: [
+                  activeSM.entryStateId === state.id && /* @__PURE__ */ jsx(NiceIcon, { name: "play", size: 12 }),
+                  " ",
+                  state.name
+                ] }),
+                /* @__PURE__ */ jsx(
+                  NiceButton,
+                  {
+                    className: styles.effectRemove,
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      api.removeState(state.id);
+                    },
+                    "aria-label": t("gameAsset2dEditor.removeState", "Remove state"),
+                    children: /* @__PURE__ */ jsx(NiceIcon, { name: "close", size: 14 })
+                  }
+                )
+              ]
+            },
+            state.id
+          ))
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.stateGraph, children: activeSM ? /* @__PURE__ */ jsxs("svg", { width: "100%", height: "100%", children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+        "marker",
+        {
+          id: "arrowhead",
+          markerWidth: "10",
+          markerHeight: "7",
+          refX: "9",
+          refY: "3.5",
+          orient: "auto",
+          children: /* @__PURE__ */ 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) {
+          return null;
         }
-        return result;
-    }, [api.project.spriteSheets]);
-    return (jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [jsxs("div", { className: styles.leftPanel, children: [jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: t('gameAsset2dEditor.stateMachines', 'State Machines') }), jsx("button", { className: styles.menuBtn, onClick: () => api.createStateMachine('New State Machine'), children: t('gameAsset2dEditor.new2', '+ New') })] }), jsx("div", { className: styles.panelContent, style: { maxHeight: 150 }, children: api.project.stateMachines.map((sm) => (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.layerItem} ${api.editorState.activeStateMachineId === sm.id ? styles.selected : ''}`, onClick: () => api.selectStateMachine(sm.id), children: [jsx("span", { className: styles.layerName, children: sm.name }), jsx("span", { className: styles.layerOpacity, children: t('gameAsset2dEditor.states2', '{states} states').replace('{states}', String(sm.states.length)) })] }, sm.id))) }), activeSM && (jsxs(Fragment, { children: [jsx("div", { className: styles.panelHeader, children: jsx("span", { children: t('gameAsset2dEditor.states', 'States') }) }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.panelSection, children: [jsx(NiceTextInput, { className: styles.panelInput, placeholder: t('gameAsset2dEditor.stateName', 'State name...'), value: newStateName, onChange: (val) => setNewStateName(val) }), allAnimations.length > 0 && newStateName && (jsx(NiceSelect, { className: styles.panelInput, style: { marginTop: 4 }, onChange: (val) => {
-                                                    if (val) {
-                                                        api.addState(newStateName, val);
-                                                        setNewStateName('');
-                                                    }
-                                                }, options: [
-                                                    {
-                                                        value: '',
-                                                        label: t('gameAsset2dEditor.selectAnimation', 'Select animation...'),
-                                                    },
-                                                    ...allAnimations.map((anim) => ({
-                                                        value: anim.id,
-                                                        label: `${anim.sheetName}: ${anim.name}`,
-                                                    })),
-                                                ] }))] }), activeSM.states.map((state) => (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.layerItem} ${api.editorState.selectedStateId === state.id ? styles.selected : ''} ${activeSM.entryStateId === state.id ? styles.entry : ''}`, onClick: () => api.selectState(state.id), children: [jsxs("span", { className: styles.layerName, children: [activeSM.entryStateId === state.id && jsx(NiceIcon, { name: "play", size: 12 }), ' ', state.name] }), jsx(NiceButton, { className: styles.effectRemove, variant: "ghost", size: "sm", onClick: (e) => {
-                                                    e.stopPropagation();
-                                                    api.removeState(state.id);
-                                                }, "aria-label": t('gameAsset2dEditor.removeState', 'Remove state'), children: jsx(NiceIcon, { name: "close", size: 14 }) })] }, state.id)))] })] }))] }), jsx("div", { className: styles.stateGraph, children: activeSM ? (jsxs("svg", { width: "100%", height: "100%", children: [jsx("defs", { children: jsx("marker", { id: "arrowhead", markerWidth: "10", markerHeight: "7", refX: "9", refY: "3.5", orient: "auto", children: 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) {
-                                return null;
-                            }
-                            return (jsx("line", { x1: from.position.x + 60, y1: from.position.y + 20, x2: to.position.x + 60, y2: to.position.y + 20, className: styles.transition, onClick: () => api.removeTransition(trans.id) }, trans.id));
-                        }), activeSM.states.map((state) => {
-                            var _a, _b;
-                            return (jsx("foreignObject", { x: state.position.x, y: state.position.y, width: 120, height: 50, children: jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.stateNode} ${api.editorState.selectedStateId === state.id ? styles.selected : ''} ${activeSM.entryStateId === state.id ? styles.entry : ''}`, onClick: () => api.selectState(state.id), children: [jsx("div", { className: styles.stateNodeName, children: state.name }), jsx("div", { className: styles.stateNodeAnim, children: (_b = (_a = allAnimations.find((a) => a.id === state.animationId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : t('gameAsset2dEditor.noAnimation', 'No animation') })] }) }, state.id));
-                        })] })) : (jsx("div", { className: styles.emptyState, children: jsx("div", { className: styles.emptyStateText, children: t('gameAsset2dEditor.createAStateMachineTo', 'Create a state machine to design animation flows') }) })) }), jsxs("div", { className: styles.rightPanel, children: [jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: t('gameAsset2dEditor.parameters', 'Parameters') }), jsx(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => api.addParameter('new_param', 'trigger'), disabled: !activeSM, children: t('gameAsset2dEditor.add', '+ Add') })] }), jsx("div", { className: styles.panelContent, children: activeSM === null || activeSM === void 0 ? void 0 : activeSM.parameters.map((param) => (jsxs("div", { className: styles.layerItem, children: [jsx("span", { className: styles.layerOpacity, children: param.type }), jsx("span", { className: styles.layerName, children: param.name }), jsx(NiceButton, { className: styles.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeParameter(param.id), "aria-label": t('gameAsset2dEditor.removeParameter', 'Remove parameter'), children: jsx(NiceIcon, { name: "close", size: 14 }) })] }, param.id))) }), jsx("div", { className: styles.panelHeader, children: jsx("span", { children: t('gameAsset2dEditor.transitions', 'Transitions') }) }), jsxs("div", { className: styles.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 (jsxs("div", { className: styles.layerItem, children: [jsxs("span", { className: styles.layerName, children: [(_a = from === null || from === void 0 ? void 0 : from.name) !== null && _a !== void 0 ? _a : '?', " ", jsx(NiceIcon, { name: "arrow-right", size: 12 }), " ", (_b = to === null || to === void 0 ? void 0 : to.name) !== null && _b !== void 0 ? _b : '?'] }), jsx(NiceButton, { className: styles.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeTransition(trans.id), "aria-label": t('gameAsset2dEditor.removeTransition', 'Remove transition'), children: jsx(NiceIcon, { name: "close", size: 14 }) })] }, trans.id));
-                            }), api.editorState.selectedStateId && (jsxs("div", { className: styles.panelSection, style: { marginTop: 12 }, children: [jsx("label", { className: styles.panelLabel, children: t('gameAsset2dEditor.addTransitionTo', 'Add transition to:') }), jsx(NiceSelect, { className: styles.panelInput, onChange: (val) => {
-                                            if (val && api.editorState.selectedStateId) {
-                                                api.addTransition(api.editorState.selectedStateId, val);
-                                            }
-                                        }, options: [
-                                            {
-                                                value: '',
-                                                label: t('gameAsset2dEditor.selectTargetState', 'Select target state...'),
-                                            },
-                                            ...((_a = activeSM === null || activeSM === void 0 ? void 0 : activeSM.states.filter((s) => s.id !== api.editorState.selectedStateId).map((s) => ({ value: s.id, label: s.name }))) !== null && _a !== void 0 ? _a : []),
-                                        ] })] }))] })] })] }));
+        return /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: from.position.x + 60,
+            y1: from.position.y + 20,
+            x2: to.position.x + 60,
+            y2: to.position.y + 20,
+            className: styles.transition,
+            onClick: () => api.removeTransition(trans.id)
+          },
+          trans.id
+        );
+      }),
+      activeSM.states.map((state) => /* @__PURE__ */ jsx(
+        "foreignObject",
+        {
+          x: state.position.x,
+          y: state.position.y,
+          width: 120,
+          height: 50,
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: clickOnActivationKey,
+              className: `${styles.stateNode} ${api.editorState.selectedStateId === state.id ? styles.selected : ""} ${activeSM.entryStateId === state.id ? styles.entry : ""}`,
+              onClick: () => api.selectState(state.id),
+              children: [
+                /* @__PURE__ */ jsx("div", { className: styles.stateNodeName, children: state.name }),
+                /* @__PURE__ */ jsx("div", { className: styles.stateNodeAnim, children: allAnimations.find((a) => a.id === state.animationId)?.name ?? t("gameAsset2dEditor.noAnimation", "No animation") })
+              ]
+            }
+          )
+        },
+        state.id
+      ))
+    ] }) : /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: /* @__PURE__ */ jsx("div", { className: styles.emptyStateText, children: t(
+      "gameAsset2dEditor.createAStateMachineTo",
+      "Create a state machine to design animation flows"
+    ) }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: styles.rightPanel, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.panelHeader, children: [
+        /* @__PURE__ */ jsx("span", { children: t("gameAsset2dEditor.parameters", "Parameters") }),
+        /* @__PURE__ */ jsx(
+          NiceButton,
+          {
+            className: styles.menuBtn,
+            variant: "ghost",
+            size: "sm",
+            onClick: () => api.addParameter("new_param", "trigger"),
+            disabled: !activeSM,
+            children: t("gameAsset2dEditor.add", "+ Add")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: styles.panelContent, children: activeSM?.parameters.map((param) => /* @__PURE__ */ jsxs("div", { className: styles.layerItem, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.layerOpacity, children: param.type }),
+        /* @__PURE__ */ jsx("span", { className: styles.layerName, children: param.name }),
+        /* @__PURE__ */ jsx(
+          NiceButton,
+          {
+            className: styles.effectRemove,
+            variant: "ghost",
+            size: "sm",
+            onClick: () => api.removeParameter(param.id),
+            "aria-label": t("gameAsset2dEditor.removeParameter", "Remove parameter"),
+            children: /* @__PURE__ */ jsx(NiceIcon, { name: "close", size: 14 })
+          }
+        )
+      ] }, param.id)) }),
+      /* @__PURE__ */ jsx("div", { className: styles.panelHeader, children: /* @__PURE__ */ jsx("span", { children: t("gameAsset2dEditor.transitions", "Transitions") }) }),
+      /* @__PURE__ */ jsxs("div", { className: styles.panelContent, children: [
+        activeSM?.transitions.map((trans) => {
+          const from = activeSM.states.find((s) => s.id === trans.fromStateId);
+          const to = activeSM.states.find((s) => s.id === trans.toStateId);
+          return /* @__PURE__ */ jsxs("div", { className: styles.layerItem, children: [
+            /* @__PURE__ */ jsxs("span", { className: styles.layerName, children: [
+              from?.name ?? "?",
+              " ",
+              /* @__PURE__ */ jsx(NiceIcon, { name: "arrow-right", size: 12 }),
+              " ",
+              to?.name ?? "?"
+            ] }),
+            /* @__PURE__ */ jsx(
+              NiceButton,
+              {
+                className: styles.effectRemove,
+                variant: "ghost",
+                size: "sm",
+                onClick: () => api.removeTransition(trans.id),
+                "aria-label": t("gameAsset2dEditor.removeTransition", "Remove transition"),
+                children: /* @__PURE__ */ jsx(NiceIcon, { name: "close", size: 14 })
+              }
+            )
+          ] }, trans.id);
+        }),
+        api.editorState.selectedStateId && /* @__PURE__ */ jsxs("div", { className: styles.panelSection, style: { marginTop: 12 }, children: [
+          /* @__PURE__ */ jsx("label", { className: styles.panelLabel, children: t("gameAsset2dEditor.addTransitionTo", "Add transition to:") }),
+          /* @__PURE__ */ jsx(
+            NiceSelect,
+            {
+              className: styles.panelInput,
+              onChange: (val) => {
+                if (val && api.editorState.selectedStateId) {
+                  api.addTransition(api.editorState.selectedStateId, val);
+                }
+              },
+              options: [
+                {
+                  value: "",
+                  label: t("gameAsset2dEditor.selectTargetState", "Select target state...")
+                },
+                ...activeSM?.states.filter((s) => s.id !== api.editorState.selectedStateId).map((s) => ({ value: s.id, label: s.name })) ?? []
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
 };
-/* ────────────────────────────────────────────────────────────────
-   EFFECTS PANEL
-──────────────────────────────────────────────────────────────── */
 const EffectsView = ({ api }) => {
-    const { t } = useNiceTranslation();
-    const [_currentEffects, _setCurrentEffects] = useState([]);
-    const [presetName, setPresetName] = useState('');
-    const effectTypes = [
-        { type: 'brightness', label: t('gameAsset2dEditor.brightness', 'Brightness') },
-        { type: 'contrast', label: t('gameAsset2dEditor.contrast', 'Contrast') },
-        { type: 'saturation', label: t('gameAsset2dEditor.saturation', 'Saturation') },
-        { type: 'hue-shift', label: t('gameAsset2dEditor.hueShift', 'Hue Shift') },
-        { type: 'invert', label: t('gameAsset2dEditor.invert', 'Invert') },
-        { type: 'pixelate', label: t('gameAsset2dEditor.pixelate', 'Pixelate') },
-        { type: 'outline', label: t('gameAsset2dEditor.outline', 'Outline') },
-        { type: 'tint', label: t('gameAsset2dEditor.tint', 'Tint') },
-        { type: 'blur', label: t('gameAsset2dEditor.blur', 'Blur') },
-        { type: 'glow', label: t('gameAsset2dEditor.glow', 'Glow') },
-        { type: 'shadow', label: t('gameAsset2dEditor.shadow', 'Shadow') },
-        { type: 'palette-swap', label: t('gameAsset2dEditor.paletteSwap', 'Palette Swap') },
-    ];
-    return (jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [jsxs("div", { className: styles.leftPanel, children: [jsx("div", { className: styles.panelHeader, children: jsx("span", { children: t('gameAsset2dEditor.addEffect', 'Add Effect') }) }), jsx("div", { className: styles.panelContent, children: effectTypes.map(({ type, label }) => (jsx(NiceButton, { className: styles.layerItem, variant: "ghost", onClick: () => api.addEffect(type), style: { cursor: 'pointer', border: 'none', textAlign: 'left' }, children: jsx("span", { className: styles.layerName, children: label }) }, type))) }), jsx("div", { className: styles.panelHeader, children: jsx("span", { children: t('gameAsset2dEditor.presets', 'Presets') }) }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.panelSection, children: [jsx(NiceTextInput, { className: styles.panelInput, placeholder: t('gameAsset2dEditor.presetName', 'Preset name...'), value: presetName, onChange: (val) => setPresetName(val) }), jsx(NiceButton, { className: styles.btnSecondary, variant: "ghost", style: { marginTop: 4, width: '100%' }, onClick: () => {
-                                            if (presetName) {
-                                                api.saveEffectPreset(presetName);
-                                                setPresetName('');
-                                            }
-                                        }, disabled: !presetName, children: t('gameAsset2dEditor.saveCurrentEffects', 'Save Current Effects') })] }), api.project.effectPresets.map((preset) => (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: styles.layerItem, onClick: () => api.loadEffectPreset(preset.id), style: { cursor: 'pointer' }, children: [jsx("span", { className: styles.layerName, children: preset.name }), jsx("span", { className: styles.layerOpacity, children: t('gameAsset2dEditor.effects', '{effects} effects').replace('{effects}', String(preset.effects.length)) })] }, preset.id)))] })] }), jsx("div", { className: styles.viewport, children: jsx("div", { className: styles.emptyState, children: jsx("div", { className: styles.emptyStateText, children: t('gameAsset2dEditor.selectASpriteOrTile', 'Select a sprite or tile to preview effects') }) }) }), jsxs("div", { className: styles.rightPanel, children: [jsx("div", { className: styles.panelHeader, children: jsx("span", { children: t('gameAsset2dEditor.activeEffects', 'Active Effects') }) }), jsx("div", { className: styles.panelContent, children: jsx("div", { className: styles.effectsList, children: jsx("div", { className: styles.emptyState, children: jsx("div", { className: styles.emptyStateText, children: t('gameAsset2dEditor.addEffectsFromTheLeft', 'Add effects from the left panel') }) }) }) })] })] }));
+  const { t } = useNiceTranslation();
+  const [_currentEffects, _setCurrentEffects] = useState([]);
+  const [presetName, setPresetName] = useState("");
+  const effectTypes = [
+    { type: "brightness", label: t("gameAsset2dEditor.brightness", "Brightness") },
+    { type: "contrast", label: t("gameAsset2dEditor.contrast", "Contrast") },
+    { type: "saturation", label: t("gameAsset2dEditor.saturation", "Saturation") },
+    { type: "hue-shift", label: t("gameAsset2dEditor.hueShift", "Hue Shift") },
+    { type: "invert", label: t("gameAsset2dEditor.invert", "Invert") },
+    { type: "pixelate", label: t("gameAsset2dEditor.pixelate", "Pixelate") },
+    { type: "outline", label: t("gameAsset2dEditor.outline", "Outline") },
+    { type: "tint", label: t("gameAsset2dEditor.tint", "Tint") },
+    { type: "blur", label: t("gameAsset2dEditor.blur", "Blur") },
+    { type: "glow", label: t("gameAsset2dEditor.glow", "Glow") },
+    { type: "shadow", label: t("gameAsset2dEditor.shadow", "Shadow") },
+    { type: "palette-swap", label: t("gameAsset2dEditor.paletteSwap", "Palette Swap") }
+  ];
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flex: 1, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.leftPanel, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.panelHeader, children: /* @__PURE__ */ jsx("span", { children: t("gameAsset2dEditor.addEffect", "Add Effect") }) }),
+      /* @__PURE__ */ jsx("div", { className: styles.panelContent, children: effectTypes.map(({ type, label }) => /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.layerItem,
+          variant: "ghost",
+          onClick: () => api.addEffect(type),
+          style: { cursor: "pointer", border: "none", textAlign: "left" },
+          children: /* @__PURE__ */ jsx("span", { className: styles.layerName, children: label })
+        },
+        type
+      )) }),
+      /* @__PURE__ */ jsx("div", { className: styles.panelHeader, children: /* @__PURE__ */ jsx("span", { children: t("gameAsset2dEditor.presets", "Presets") }) }),
+      /* @__PURE__ */ jsxs("div", { className: styles.panelContent, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+          /* @__PURE__ */ jsx(
+            NiceTextInput,
+            {
+              className: styles.panelInput,
+              placeholder: t("gameAsset2dEditor.presetName", "Preset name..."),
+              value: presetName,
+              onChange: (val) => setPresetName(val)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            NiceButton,
+            {
+              className: styles.btnSecondary,
+              variant: "ghost",
+              style: { marginTop: 4, width: "100%" },
+              onClick: () => {
+                if (presetName) {
+                  api.saveEffectPreset(presetName);
+                  setPresetName("");
+                }
+              },
+              disabled: !presetName,
+              children: t("gameAsset2dEditor.saveCurrentEffects", "Save Current Effects")
+            }
+          )
+        ] }),
+        api.project.effectPresets.map((preset) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: clickOnActivationKey,
+            className: styles.layerItem,
+            onClick: () => api.loadEffectPreset(preset.id),
+            style: { cursor: "pointer" },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: styles.layerName, children: preset.name }),
+              /* @__PURE__ */ jsx("span", { className: styles.layerOpacity, children: t("gameAsset2dEditor.effects", "{effects} effects").replace(
+                "{effects}",
+                String(preset.effects.length)
+              ) })
+            ]
+          },
+          preset.id
+        ))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.viewport, children: /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: /* @__PURE__ */ jsx("div", { className: styles.emptyStateText, children: t(
+      "gameAsset2dEditor.selectASpriteOrTile",
+      "Select a sprite or tile to preview effects"
+    ) }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: styles.rightPanel, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.panelHeader, children: /* @__PURE__ */ jsx("span", { children: t("gameAsset2dEditor.activeEffects", "Active Effects") }) }),
+      /* @__PURE__ */ jsx("div", { className: styles.panelContent, children: /* @__PURE__ */ jsx("div", { className: styles.effectsList, children: /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: /* @__PURE__ */ jsx("div", { className: styles.emptyStateText, children: t("gameAsset2dEditor.addEffectsFromTheLeft", "Add effects from the left panel") }) }) }) })
+    ] })
+  ] });
 };
-/* ────────────────────────────────────────────────────────────────
-   STATUS BAR
-──────────────────────────────────────────────────────────────── */
 const StatusBar = ({ api }) => {
-    const { t } = useNiceTranslation();
-    const activeMap = api.project.tileMaps.find((m) => m.id === api.editorState.activeTileMapId);
-    const activeSheet = api.project.spriteSheets.find((s) => s.id === api.editorState.activeSpriteSheetId);
-    return (jsxs("div", { className: styles.statusBar, children: [jsx("span", { className: styles.statusItem, children: t('gameAsset2dEditor.mode', 'Mode: {mode}').replace('{mode}', String(api.editorState.mode)) }), api.editorState.mode === 'tilemap' && activeMap && (jsxs(Fragment, { children: [jsx("span", { className: styles.statusItem, children: t('gameAsset2dEditor.map', 'Map: {name} ({width}×{height})')
-                            .replace('{name}', String(activeMap.name))
-                            .replace('{width}', String(activeMap.width))
-                            .replace('{height}', String(activeMap.height)) }), jsx("span", { className: styles.statusItem, children: t('gameAsset2dEditor.tilePx', 'Tile: {tileWidth}×{tileHeight}px')
-                            .replace('{tileWidth}', String(activeMap.tileWidth))
-                            .replace('{tileHeight}', String(activeMap.tileHeight)) })] })), api.editorState.mode === 'spritesheet' && activeSheet && (jsxs(Fragment, { children: [jsx("span", { className: styles.statusItem, children: t('gameAsset2dEditor.sheet', 'Sheet: {name}').replace('{name}', String(activeSheet.name)) }), jsx("span", { className: styles.statusItem, children: t('gameAsset2dEditor.selectedFrames', 'Selected: {selectedFrameIds} frames').replace('{selectedFrameIds}', String(api.editorState.selectedFrameIds.length)) })] })), jsxs("div", { className: styles.zoomControl, children: [jsx(NiceButton, { className: styles.zoomBtn, variant: "ghost", size: "sm", onClick: () => api.setZoom(api.editorState.zoom - 0.25), children: "\u2212" }), jsxs("span", { children: [Math.round(api.editorState.zoom * 100), "%"] }), jsx(NiceButton, { className: styles.zoomBtn, variant: "ghost", size: "sm", onClick: () => api.setZoom(api.editorState.zoom + 0.25), children: "+" }), jsx(NiceButton, { className: styles.zoomBtn, variant: "ghost", size: "sm", onClick: () => api.setZoom(1), children: "\u2299" })] })] }));
-};
-/* ────────────────────────────────────────────────────────────────
-   MAIN COMPONENT
-──────────────────────────────────────────────────────────────── */
-const NiceGameAsset2dEditor = ({ className, onSave, onExport, }) => {
-    const api = useGameAssetEditor({ onSave, onExport });
-    const renderModeContent = () => {
-        switch (api.editorState.mode) {
-            case 'tilemap':
-                return (jsxs(Fragment, { children: [jsx(TileMapToolbar, { api: api }), jsxs("div", { className: styles.mainArea, children: [jsx(TilePalette, { api: api }), jsx("div", { className: styles.centerArea, children: jsx(TileMapCanvas, { api: api }) }), jsx(LayersPanel, { api: api })] })] }));
-            case 'spritesheet':
-                return (jsxs(Fragment, { children: [jsx(SpriteSheetToolbar, { api: api }), jsxs("div", { className: styles.mainArea, children: [jsx(SpriteSheetsList, { api: api }), jsx("div", { className: styles.centerArea, children: jsx(SpriteSheetCanvas, { api: api }) }), jsx(FramesPanel, { api: api })] })] }));
-            case 'animation':
-                return (jsx("div", { className: styles.mainArea, children: jsx(AnimationStateMachineView, { api: api }) }));
-            case 'effects':
-                return (jsx("div", { className: styles.mainArea, children: jsx(EffectsView, { api: api }) }));
-            default:
-                return null;
+  const { t } = useNiceTranslation();
+  const activeMap = api.project.tileMaps.find((m) => m.id === api.editorState.activeTileMapId);
+  const activeSheet = api.project.spriteSheets.find(
+    (s) => s.id === api.editorState.activeSpriteSheetId
+  );
+  return /* @__PURE__ */ jsxs("div", { className: styles.statusBar, children: [
+    /* @__PURE__ */ jsx("span", { className: styles.statusItem, children: t("gameAsset2dEditor.mode", "Mode: {mode}").replace(
+      "{mode}",
+      String(api.editorState.mode)
+    ) }),
+    api.editorState.mode === "tilemap" && activeMap && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: styles.statusItem, children: t("gameAsset2dEditor.map", "Map: {name} ({width}×{height})").replace("{name}", String(activeMap.name)).replace("{width}", String(activeMap.width)).replace("{height}", String(activeMap.height)) }),
+      /* @__PURE__ */ jsx("span", { className: styles.statusItem, children: t("gameAsset2dEditor.tilePx", "Tile: {tileWidth}×{tileHeight}px").replace("{tileWidth}", String(activeMap.tileWidth)).replace("{tileHeight}", String(activeMap.tileHeight)) })
+    ] }),
+    api.editorState.mode === "spritesheet" && activeSheet && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: styles.statusItem, children: t("gameAsset2dEditor.sheet", "Sheet: {name}").replace(
+        "{name}",
+        String(activeSheet.name)
+      ) }),
+      /* @__PURE__ */ jsx("span", { className: styles.statusItem, children: t("gameAsset2dEditor.selectedFrames", "Selected: {selectedFrameIds} frames").replace(
+        "{selectedFrameIds}",
+        String(api.editorState.selectedFrameIds.length)
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: styles.zoomControl, children: [
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.zoomBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: () => api.setZoom(api.editorState.zoom - 0.25),
+          children: "−"
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { children: [
+        Math.round(api.editorState.zoom * 100),
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.zoomBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: () => api.setZoom(api.editorState.zoom + 0.25),
+          children: "+"
         }
-    };
-    return (jsx(NiceAppShell, { className: `${styles.root} ${className || ''}`, flush: true, menubar: jsx(MenuBar, { api: api }), toolbar: jsx(ModeTabs, { api: api }), statusBar: jsx(StatusBar, { api: api }), children: jsx("div", { style: { display: 'flex', flexDirection: 'column', minHeight: 0, height: '100%' }, children: renderModeContent() }) }));
+      ),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: styles.zoomBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: () => api.setZoom(1),
+          children: "⊙"
+        }
+      )
+    ] })
+  ] });
+};
+const NiceGameAsset2dEditor = ({
+  className,
+  onSave,
+  onExport
+}) => {
+  const api = useGameAssetEditor({ onSave, onExport });
+  const renderModeContent = () => {
+    switch (api.editorState.mode) {
+      case "tilemap":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(TileMapToolbar, { api }),
+          /* @__PURE__ */ jsxs("div", { className: styles.mainArea, children: [
+            /* @__PURE__ */ jsx(TilePalette, { api }),
+            /* @__PURE__ */ jsx("div", { className: styles.centerArea, children: /* @__PURE__ */ jsx(TileMapCanvas, { api }) }),
+            /* @__PURE__ */ jsx(LayersPanel, { api })
+          ] })
+        ] });
+      case "spritesheet":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(SpriteSheetToolbar, { api }),
+          /* @__PURE__ */ jsxs("div", { className: styles.mainArea, children: [
+            /* @__PURE__ */ jsx(SpriteSheetsList, { api }),
+            /* @__PURE__ */ jsx("div", { className: styles.centerArea, children: /* @__PURE__ */ jsx(SpriteSheetCanvas, { api }) }),
+            /* @__PURE__ */ jsx(FramesPanel, { api })
+          ] })
+        ] });
+      case "animation":
+        return /* @__PURE__ */ jsx("div", { className: styles.mainArea, children: /* @__PURE__ */ jsx(AnimationStateMachineView, { api }) });
+      case "effects":
+        return /* @__PURE__ */ jsx("div", { className: styles.mainArea, children: /* @__PURE__ */ jsx(EffectsView, { api }) });
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    NiceAppShell,
+    {
+      className: `${styles.root} ${className || ""}`,
+      flush: true,
+      menubar: /* @__PURE__ */ jsx(MenuBar, { api }),
+      toolbar: /* @__PURE__ */ jsx(ModeTabs, { api }),
+      statusBar: /* @__PURE__ */ jsx(StatusBar, { api }),
+      children: /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", minHeight: 0, height: "100%" }, children: renderModeContent() })
+    }
+  );
+};
+export {
+  NiceGameAsset2dEditor
 };
-
-export { NiceGameAsset2dEditor };