@nice2dev/ui-graphics 1.1.0 → 1.1.1

package/dist/esm/game/GameAsset2dEditor.js

@@ -1,20 +1,20 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { g as on, d as Je, c as Ze, b as Qe } from '../packages/ui/dist/NiceTabs-DzLHzwuA.js';
 import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import styles from './GameAsset2dEditor.module.css.js';
 import { useGameAssetEditor } from './useGameAssetEditor.js';
-import { c as Fe, b as Re, a as De } from '../packages/ui/dist/NiceButton-D9l39Rs7.js';
-import { a as ie } from '../packages/ui/dist/NiceToggle-CaY1u82g.js';
 
 /* ────────────────────────────────────────────────────────────────
    MENU BAR
 ──────────────────────────────────────────────────────────────── */
 const MenuBar = ({ api }) => {
     const fileInputRef = useRef(null);
-    return (jsxs("div", { className: styles.menuBar, children: [jsx("h3", { children: "\uD83C\uDFAE Game Asset Editor" }), jsxs("div", { className: styles.menuGroup, children: [jsx(Fe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => api.newProject('New Project'), children: "\uD83D\uDCC4 New" }), jsx(Fe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "\uD83D\uDCC2 Open" }), jsx(Fe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.saveProject, children: "\uD83D\uDCBE Save" })] }), jsx("div", { className: styles.spacer }), jsxs("div", { className: styles.menuGroup, children: [jsx(Fe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.undo, disabled: !api.canUndo, children: "\u21A9 Undo" }), jsx(Fe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.redo, disabled: !api.canRedo, children: "\u21AA Redo" })] }), jsx("input", { ref: fileInputRef, type: "file", accept: ".json", style: { display: 'none' }, onChange: e => {
+    return (jsxs("div", { className: styles.menuBar, children: [jsx("h3", { children: "\uD83C\uDFAE Game Asset Editor" }), jsxs("div", { className: styles.menuGroup, children: [jsx(on, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => api.newProject('New Project'), children: "\uD83D\uDCC4 New" }), jsx(on, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "\uD83D\uDCC2 Open" }), jsx(on, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.saveProject, children: "\uD83D\uDCBE Save" })] }), jsx("div", { className: styles.spacer }), jsxs("div", { className: styles.menuGroup, children: [jsx(on, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.undo, disabled: !api.canUndo, children: "\u21A9 Undo" }), jsx(on, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.redo, disabled: !api.canRedo, children: "\u21AA 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)
+                    if (file) {
                         api.loadProject(file);
+                    }
                     e.target.value = '';
                 } })] }));
 };
@@ -28,7 +28,7 @@ const ModeTabs = ({ api }) => {
         { id: 'animation', label: 'Animation', icon: '🎬' },
         { id: 'effects', label: 'Effects', icon: '✨' },
     ];
-    return (jsx("div", { className: styles.modeTabs, children: modes.map(mode => (jsxs(Fe, { className: `${styles.modeTab} ${api.editorState.mode === mode.id ? styles.active : ''}`, variant: api.editorState.mode === mode.id ? 'primary' : 'ghost', onClick: () => api.setMode(mode.id), children: [mode.icon, " ", mode.label] }, mode.id))) }));
+    return (jsx("div", { className: styles.modeTabs, children: modes.map((mode) => (jsxs(on, { className: `${styles.modeTab} ${api.editorState.mode === mode.id ? styles.active : ''}`, variant: api.editorState.mode === mode.id ? 'primary' : 'ghost', onClick: () => api.setMode(mode.id), children: [mode.icon, " ", mode.label] }, mode.id))) }));
 };
 /* ────────────────────────────────────────────────────────────────
    TILE MAP TOOLBAR
@@ -43,7 +43,7 @@ const TileMapToolbar = ({ api }) => {
         { id: 'line', icon: '╱', label: 'Line' },
         { id: 'eyedropper', icon: '💧', label: 'Eyedropper' },
     ];
-    return (jsxs("div", { className: styles.toolbar, children: [jsx("div", { className: styles.toolGroup, children: tools.map(tool => (jsx(Fe, { 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: tool.icon }, tool.id))) }), jsx("div", { className: styles.spacer }), jsx(Fe, { className: `${styles.toolBtn} ${api.editorState.showGrid ? styles.active : ''}`, variant: api.editorState.showGrid ? 'primary' : 'ghost', size: "sm", onClick: api.toggleGrid, title: "Toggle Grid", children: "\u229E" }), jsx(Fe, { className: `${styles.toolBtn} ${api.editorState.showCollision ? styles.active : ''}`, variant: api.editorState.showCollision ? 'primary' : 'ghost', size: "sm", onClick: api.toggleCollision, title: "Show Collision", children: "\u25C7" }), jsx(Fe, { className: `${styles.toolBtn} ${api.editorState.snapToGrid ? styles.active : ''}`, variant: api.editorState.snapToGrid ? 'primary' : 'ghost', size: "sm", onClick: api.toggleSnap, title: "Snap to Grid", children: "\u22A1" })] }));
+    return (jsxs("div", { className: styles.toolbar, children: [jsx("div", { className: styles.toolGroup, children: tools.map((tool) => (jsx(on, { 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: tool.icon }, tool.id))) }), jsx("div", { className: styles.spacer }), jsx(on, { className: `${styles.toolBtn} ${api.editorState.showGrid ? styles.active : ''}`, variant: api.editorState.showGrid ? 'primary' : 'ghost', size: "sm", onClick: api.toggleGrid, title: "Toggle Grid", children: "\u229E" }), jsx(on, { className: `${styles.toolBtn} ${api.editorState.showCollision ? styles.active : ''}`, variant: api.editorState.showCollision ? 'primary' : 'ghost', size: "sm", onClick: api.toggleCollision, title: "Show Collision", children: "\u25C7" }), jsx(on, { className: `${styles.toolBtn} ${api.editorState.snapToGrid ? styles.active : ''}`, variant: api.editorState.snapToGrid ? 'primary' : 'ghost', size: "sm", onClick: api.toggleSnap, title: "Snap to Grid", children: "\u22A1" })] }));
 };
 /* ────────────────────────────────────────────────────────────────
    SPRITE SHEET TOOLBAR
@@ -51,18 +51,19 @@ const TileMapToolbar = ({ api }) => {
 const SpriteSheetToolbar = ({ api }) => {
     const [sliceWidth, setSliceWidth] = useState(16);
     const [sliceHeight, setSliceHeight] = useState(16);
-    return (jsxs("div", { className: styles.toolbar, children: [jsxs("div", { className: styles.toolGroup, children: [jsx(Fe, { className: `${styles.toolBtn} ${api.editorState.spriteSheetTool === 'select' ? styles.active : ''}`, variant: api.editorState.spriteSheetTool === 'select' ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSpriteSheetTool('select'), title: "Select", children: "\u2B1A" }), jsx(Fe, { className: `${styles.toolBtn} ${api.editorState.spriteSheetTool === 'slice' ? styles.active : ''}`, variant: api.editorState.spriteSheetTool === 'slice' ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSpriteSheetTool('slice'), title: "Manual Slice", children: "\u2702" })] }), jsx("div", { className: styles.spacer }), jsxs("label", { style: { fontSize: 11, color: '#8892a8' }, children: ["Frame size:", jsx(ie, { value: sliceWidth, onChange: val => setSliceWidth(val !== null && val !== void 0 ? val : 16), style: { width: 40, margin: '0 4px' }, className: styles.panelInput }), "\u00D7", jsx(ie, { value: sliceHeight, onChange: val => setSliceHeight(val !== null && val !== void 0 ? val : 16), style: { width: 40, marginLeft: 4 }, className: styles.panelInput })] }), jsx(Fe, { className: styles.btnSecondary, variant: "ghost", onClick: () => api.autoSlice(sliceWidth, sliceHeight), style: { marginLeft: 8 }, children: "Auto Slice" }), jsx(Fe, { className: styles.btnSecondary, variant: "ghost", onClick: api.detectSprites, style: { marginLeft: 4 }, children: "Detect Sprites" })] }));
+    return (jsxs("div", { className: styles.toolbar, children: [jsxs("div", { className: styles.toolGroup, children: [jsx(on, { className: `${styles.toolBtn} ${api.editorState.spriteSheetTool === 'select' ? styles.active : ''}`, variant: api.editorState.spriteSheetTool === 'select' ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSpriteSheetTool('select'), title: "Select", children: "\u2B1A" }), jsx(on, { className: `${styles.toolBtn} ${api.editorState.spriteSheetTool === 'slice' ? styles.active : ''}`, variant: api.editorState.spriteSheetTool === 'slice' ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSpriteSheetTool('slice'), title: "Manual Slice", children: "\u2702" })] }), jsx("div", { className: styles.spacer }), jsxs("label", { style: { fontSize: 11, color: '#8892a8' }, children: ["Frame size:", jsx(Qe, { value: sliceWidth, onChange: (val) => setSliceWidth(val !== null && val !== void 0 ? val : 16), style: { width: 40, margin: '0 4px' }, className: styles.panelInput }), "\u00D7", jsx(Qe, { value: sliceHeight, onChange: (val) => setSliceHeight(val !== null && val !== void 0 ? val : 16), style: { width: 40, marginLeft: 4 }, className: styles.panelInput })] }), jsx(on, { className: styles.btnSecondary, variant: "ghost", onClick: () => api.autoSlice(sliceWidth, sliceHeight), style: { marginLeft: 8 }, children: "Auto Slice" }), jsx(on, { className: styles.btnSecondary, variant: "ghost", onClick: api.detectSprites, style: { marginLeft: 4 }, children: "Detect Sprites" })] }));
 };
 /* ────────────────────────────────────────────────────────────────
    TILE PALETTE (LEFT PANEL)
 ──────────────────────────────────────────────────────────────── */
 const TilePalette = ({ api }) => {
     const fileInputRef = useRef(null);
-    return (jsxs("div", { className: styles.leftPanel, children: [jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: "Tiles" }), jsx(Fe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "+ Add" })] }), jsx("div", { className: styles.panelContent, children: api.project.tileSets.length === 0 ? (jsxs("div", { className: styles.emptyState, children: [jsx("div", { className: styles.emptyStateText, children: "No tiles yet" }), jsx(Fe, { className: styles.btnSecondary, variant: "ghost", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Import Tiles" })] })) : (jsx("div", { className: styles.tilePalette, children: api.project.tileSets.map(tile => (jsx("div", { 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 => {
+    return (jsxs("div", { className: styles.leftPanel, children: [jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: "Tiles" }), jsx(on, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "+ Add" })] }), jsx("div", { className: styles.panelContent, children: api.project.tileSets.length === 0 ? (jsxs("div", { className: styles.emptyState, children: [jsx("div", { className: styles.emptyStateText, children: "No tiles yet" }), jsx(on, { className: styles.btnSecondary, variant: "ghost", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Import Tiles" })] })) : (jsx("div", { className: styles.tilePalette, children: api.project.tileSets.map((tile) => (jsx("div", { 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)
+                    if (file) {
                         api.importTileSet(file);
+                    }
                     e.target.value = '';
                 } })] }));
 };
@@ -70,11 +71,11 @@ const TilePalette = ({ api }) => {
    LAYERS PANEL (RIGHT PANEL)
 ──────────────────────────────────────────────────────────────── */
 const LayersPanel = ({ api }) => {
-    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: "Layers" }), jsx(Fe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.addLayer, disabled: !activeMap, children: "+ Add" })] }), jsx("div", { className: styles.panelContent, children: activeMap ? (jsx("div", { className: styles.layersList, children: [...activeMap.layers].reverse().map(layer => (jsxs("div", { className: `${styles.layerItem} ${api.editorState.activeLayerId === layer.id ? styles.selected : ''}`, onClick: () => api.selectLayer(layer.id), children: [jsx(Fe, { className: `${styles.layerVisibility} ${!layer.visible ? styles.hidden : ''}`, variant: "ghost", size: "sm", onClick: e => {
+    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: "Layers" }), jsx(on, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: api.addLayer, disabled: !activeMap, children: "+ Add" })] }), jsx("div", { className: styles.panelContent, children: activeMap ? (jsx("div", { className: styles.layersList, children: [...activeMap.layers].reverse().map((layer) => (jsxs("div", { className: `${styles.layerItem} ${api.editorState.activeLayerId === layer.id ? styles.selected : ''}`, onClick: () => api.selectLayer(layer.id), children: [jsx(on, { className: `${styles.layerVisibility} ${!layer.visible ? styles.hidden : ''}`, variant: "ghost", size: "sm", onClick: (e) => {
                                     e.stopPropagation();
                                     api.toggleLayerVisibility(layer.id);
-                                }, children: layer.visible ? '👁' : '○' }), 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: "No tile map selected" }) })) }), jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: "Maps" }), jsx(Fe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => api.createTileMap('New Map', 32, 32), children: "+ New" })] }), jsx("div", { className: styles.panelContent, children: api.project.tileMaps.map(map => (jsxs("div", { 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))) })] }));
+                                }, children: layer.visible ? '👁' : '○' }), 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: "No tile map selected" }) })) }), jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: "Maps" }), jsx(on, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => api.createTileMap('New Map', 32, 32), children: "+ New" })] }), jsx("div", { className: styles.panelContent, children: api.project.tileMaps.map((map) => (jsxs("div", { 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
@@ -83,29 +84,31 @@ const TileMapCanvas = ({ api }) => {
     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);
+    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)
+        if (!canvas || !activeMap) {
             return;
+        }
         const ctx = canvas.getContext('2d');
-        if (!ctx)
+        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)) {
+        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);
+                        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;
@@ -136,16 +139,18 @@ const TileMapCanvas = ({ api }) => {
         ctx.globalAlpha = 1;
     }, [activeMap, api.project.tileSets, api.editorState.showGrid]);
     const handleCanvasClick = useCallback((e) => {
-        if (!activeMap || !api.editorState.activeLayerId || !api.editorState.selectedTileId)
+        if (!activeMap || !api.editorState.activeLayerId || !api.editorState.selectedTileId) {
             return;
+        }
         const canvas = canvasRef.current;
-        if (!canvas)
+        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);
+        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);
         }
@@ -158,11 +163,12 @@ const TileMapCanvas = ({ api }) => {
     }, [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')) {
+            }, 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: "Create or select a tile map to start editing" }), jsx(Fe, { className: styles.btnPrimary, variant: "primary", onClick: () => api.createTileMap('New Map', 32, 32), children: "Create Tile Map" })] })) }));
+            } })) : (jsxs("div", { className: styles.emptyState, children: [jsx("div", { className: styles.emptyStateText, children: "Create or select a tile map to start editing" }), jsx(on, { className: styles.btnPrimary, variant: "primary", onClick: () => api.createTileMap('New Map', 32, 32), children: "Create Tile Map" })] })) }));
 };
 /* ────────────────────────────────────────────────────────────────
    SPRITE SHEET CANVAS
@@ -170,15 +176,17 @@ const TileMapCanvas = ({ api }) => {
 const SpriteSheetCanvas = ({ api }) => {
     const canvasRef = useRef(null);
     const fileInputRef = useRef(null);
-    const activeSheet = api.project.spriteSheets.find(s => s.id === api.editorState.activeSpriteSheetId);
+    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))
+        if (!canvas || !(activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.image)) {
             return;
+        }
         const ctx = canvas.getContext('2d');
-        if (!ctx)
+        if (!ctx) {
             return;
+        }
         canvas.width = activeSheet.width;
         canvas.height = activeSheet.height;
         // Draw image
@@ -200,23 +208,25 @@ const SpriteSheetCanvas = ({ api }) => {
         }
     }, [activeSheet, api.editorState.selectedFrameIds]);
     const handleFrameClick = useCallback((e) => {
-        if (!activeSheet)
+        if (!activeSheet) {
             return;
+        }
         const canvas = canvasRef.current;
-        if (!canvas)
+        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;
         // 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);
+        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.filter((id) => id !== clickedFrame.id)
                     : [...api.editorState.selectedFrameIds, clickedFrame.id];
                 api.selectFrames(newSelection);
             }
@@ -230,11 +240,12 @@ const SpriteSheetCanvas = ({ api }) => {
     }, [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: "Import a sprite sheet to start" }), jsx(Fe, { className: styles.btnPrimary, variant: "primary", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Import Sprite Sheet" }), jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: e => {
+            }, onClick: handleFrameClick })) : (jsxs("div", { className: styles.emptyState, children: [jsx("div", { className: styles.emptyStateText, children: "Import a sprite sheet to start" }), jsx(on, { className: styles.btnPrimary, variant: "primary", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "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)
+                        if (file) {
                             api.importSpriteSheet(file);
+                        }
                         e.target.value = '';
                     } })] })) }));
 };
@@ -243,11 +254,12 @@ const SpriteSheetCanvas = ({ api }) => {
 ──────────────────────────────────────────────────────────────── */
 const SpriteSheetsList = ({ api }) => {
     const fileInputRef = useRef(null);
-    return (jsxs("div", { className: styles.leftPanel, children: [jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: "Sprite Sheets" }), jsx(Fe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "+ Import" })] }), jsx("div", { className: styles.panelContent, children: api.project.spriteSheets.length === 0 ? (jsx("div", { className: styles.emptyState, children: jsx("div", { className: styles.emptyStateText, children: "No sprite sheets" }) })) : (jsx("div", { className: styles.layersList, children: api.project.spriteSheets.map(sheet => (jsxs("div", { className: `${styles.layerItem} ${api.editorState.activeSpriteSheetId === sheet.id ? styles.selected : ''}`, onClick: () => api.selectSpriteSheet(sheet.id), children: [jsx("span", { className: styles.layerName, children: sheet.name }), jsxs("span", { className: styles.layerOpacity, children: [sheet.frames.length, " frames"] })] }, sheet.id))) })) }), jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: e => {
+    return (jsxs("div", { className: styles.leftPanel, children: [jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: "Sprite Sheets" }), jsx(on, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "+ Import" })] }), jsx("div", { className: styles.panelContent, children: api.project.spriteSheets.length === 0 ? (jsx("div", { className: styles.emptyState, children: jsx("div", { className: styles.emptyStateText, children: "No sprite sheets" }) })) : (jsx("div", { className: styles.layersList, children: api.project.spriteSheets.map((sheet) => (jsxs("div", { className: `${styles.layerItem} ${api.editorState.activeSpriteSheetId === sheet.id ? styles.selected : ''}`, onClick: () => api.selectSpriteSheet(sheet.id), children: [jsx("span", { className: styles.layerName, children: sheet.name }), jsxs("span", { className: styles.layerOpacity, children: [sheet.frames.length, " frames"] })] }, 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)
+                    if (file) {
                         api.importSpriteSheet(file);
+                    }
                     e.target.value = '';
                 } })] }));
 };
@@ -257,14 +269,14 @@ const SpriteSheetsList = ({ api }) => {
 const FramesPanel = ({ api }) => {
     var _a;
     const [animName, setAnimName] = useState('');
-    const activeSheet = api.project.spriteSheets.find(s => s.id === api.editorState.activeSpriteSheetId);
+    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: jsxs("span", { children: ["Frames (", (_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", { 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: "Animations" }) }), jsxs("div", { className: styles.panelContent, children: [api.editorState.selectedFrameIds.length > 0 && (jsxs("div", { className: styles.panelSection, children: [jsx(Re, { className: styles.panelInput, placeholder: "Animation name...", value: animName, onChange: val => setAnimName(val) }), jsxs(Fe, { className: styles.btnPrimary, variant: "primary", onClick: createAnimationFromSelection, style: { marginTop: 8, width: '100%' }, disabled: !animName, children: ["Create from ", api.editorState.selectedFrameIds.length, " frames"] })] })), activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.animations.map(anim => (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(Fe, { className: styles.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeAnimation(anim.id), children: "\u00D7" })] }, anim.id)))] })] }));
+    return (jsxs("div", { className: styles.rightPanel, children: [jsx("div", { className: styles.panelHeader, children: jsxs("span", { children: ["Frames (", (_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", { 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: "Animations" }) }), jsxs("div", { className: styles.panelContent, children: [api.editorState.selectedFrameIds.length > 0 && (jsxs("div", { className: styles.panelSection, children: [jsx(Je, { className: styles.panelInput, placeholder: "Animation name...", value: animName, onChange: (val) => setAnimName(val) }), jsxs(on, { className: styles.btnPrimary, variant: "primary", onClick: createAnimationFromSelection, style: { marginTop: 8, width: '100%' }, disabled: !animName, children: ["Create from ", api.editorState.selectedFrameIds.length, " frames"] })] })), activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.animations.map((anim) => (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(on, { className: styles.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeAnimation(anim.id), children: "\u00D7" })] }, anim.id)))] })] }));
 };
 /* ────────────────────────────────────────────────────────────────
    ANIMATION STATE MACHINE
@@ -272,7 +284,7 @@ const FramesPanel = ({ api }) => {
 const AnimationStateMachineView = ({ api }) => {
     var _a;
     const [newStateName, setNewStateName] = useState('');
-    const activeSM = api.project.stateMachines.find(sm => sm.id === api.editorState.activeStateMachineId);
+    const activeSM = api.project.stateMachines.find((sm) => sm.id === api.editorState.activeStateMachineId);
     // Get all animations from all sprite sheets
     const allAnimations = useMemo(() => {
         const result = [];
@@ -283,41 +295,42 @@ const AnimationStateMachineView = ({ api }) => {
         }
         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: "State Machines" }), jsx("button", { className: styles.menuBtn, onClick: () => api.createStateMachine('New State Machine'), children: "+ New" })] }), jsx("div", { className: styles.panelContent, style: { maxHeight: 150 }, children: api.project.stateMachines.map(sm => (jsxs("div", { className: `${styles.layerItem} ${api.editorState.activeStateMachineId === sm.id ? styles.selected : ''}`, onClick: () => api.selectStateMachine(sm.id), children: [jsx("span", { className: styles.layerName, children: sm.name }), jsxs("span", { className: styles.layerOpacity, children: [sm.states.length, " states"] })] }, sm.id))) }), activeSM && (jsxs(Fragment, { children: [jsx("div", { className: styles.panelHeader, children: jsx("span", { children: "States" }) }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.panelSection, children: [jsx(Re, { className: styles.panelInput, placeholder: "State name...", value: newStateName, onChange: val => setNewStateName(val) }), allAnimations.length > 0 && newStateName && (jsx(De, { className: styles.panelInput, style: { marginTop: 4 }, onChange: val => {
+    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: "State Machines" }), jsx("button", { className: styles.menuBtn, onClick: () => api.createStateMachine('New State Machine'), children: "+ New" })] }), jsx("div", { className: styles.panelContent, style: { maxHeight: 150 }, children: api.project.stateMachines.map((sm) => (jsxs("div", { className: `${styles.layerItem} ${api.editorState.activeStateMachineId === sm.id ? styles.selected : ''}`, onClick: () => api.selectStateMachine(sm.id), children: [jsx("span", { className: styles.layerName, children: sm.name }), jsxs("span", { className: styles.layerOpacity, children: [sm.states.length, " states"] })] }, sm.id))) }), activeSM && (jsxs(Fragment, { children: [jsx("div", { className: styles.panelHeader, children: jsx("span", { children: "States" }) }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.panelSection, children: [jsx(Je, { className: styles.panelInput, placeholder: "State name...", value: newStateName, onChange: (val) => setNewStateName(val) }), allAnimations.length > 0 && newStateName && (jsx(Ze, { className: styles.panelInput, style: { marginTop: 4 }, onChange: (val) => {
                                                     if (val) {
                                                         api.addState(newStateName, val);
                                                         setNewStateName('');
                                                     }
                                                 }, options: [
                                                     { value: '', label: 'Select animation...' },
-                                                    ...allAnimations.map(anim => ({
+                                                    ...allAnimations.map((anim) => ({
                                                         value: anim.id,
-                                                        label: `${anim.sheetName}: ${anim.name}`
-                                                    }))
-                                                ] }))] }), activeSM.states.map(state => (jsxs("div", { 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 && '▶ ', state.name] }), jsx(Fe, { className: styles.effectRemove, variant: "ghost", size: "sm", onClick: e => {
+                                                        label: `${anim.sheetName}: ${anim.name}`,
+                                                    })),
+                                                ] }))] }), activeSM.states.map((state) => (jsxs("div", { 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 && '▶ ', state.name] }), jsx(on, { className: styles.effectRemove, variant: "ghost", size: "sm", onClick: (e) => {
                                                     e.stopPropagation();
                                                     api.removeState(state.id);
-                                                }, children: "\u00D7" })] }, 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: "#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)
+                                                }, children: "\u00D7" })] }, 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: "#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 => {
+                        }), 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", { 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 : 'No animation' })] }) }, state.id));
-                        })] })) : (jsx("div", { className: styles.emptyState, children: jsx("div", { className: styles.emptyStateText, children: "Create a state machine to design animation flows" }) })) }), jsxs("div", { className: styles.rightPanel, children: [jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: "Parameters" }), jsx(Fe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => api.addParameter('new_param', 'trigger'), disabled: !activeSM, children: "+ 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(Fe, { className: styles.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeParameter(param.id), children: "\u00D7" })] }, param.id))) }), jsx("div", { className: styles.panelHeader, children: jsx("span", { children: "Transitions" }) }), jsxs("div", { className: styles.panelContent, children: [activeSM === null || activeSM === void 0 ? void 0 : activeSM.transitions.map(trans => {
+                            return (jsx("foreignObject", { x: state.position.x, y: state.position.y, width: 120, height: 50, children: jsxs("div", { 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 : 'No animation' })] }) }, state.id));
+                        })] })) : (jsx("div", { className: styles.emptyState, children: jsx("div", { className: styles.emptyStateText, children: "Create a state machine to design animation flows" }) })) }), jsxs("div", { className: styles.rightPanel, children: [jsxs("div", { className: styles.panelHeader, children: [jsx("span", { children: "Parameters" }), jsx(on, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => api.addParameter('new_param', 'trigger'), disabled: !activeSM, children: "+ 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(on, { className: styles.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeParameter(param.id), children: "\u00D7" })] }, param.id))) }), jsx("div", { className: styles.panelHeader, children: jsx("span", { children: "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 : '?', " \u2192 ", (_b = to === null || to === void 0 ? void 0 : to.name) !== null && _b !== void 0 ? _b : '?'] }), jsx(Fe, { className: styles.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeTransition(trans.id), children: "\u00D7" })] }, trans.id));
-                            }), api.editorState.selectedStateId && (jsxs("div", { className: styles.panelSection, style: { marginTop: 12 }, children: [jsx("label", { className: styles.panelLabel, children: "Add transition to:" }), jsx(De, { className: styles.panelInput, onChange: val => {
+                                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 : '?', " \u2192 ", (_b = to === null || to === void 0 ? void 0 : to.name) !== null && _b !== void 0 ? _b : '?'] }), jsx(on, { className: styles.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeTransition(trans.id), children: "\u00D7" })] }, trans.id));
+                            }), api.editorState.selectedStateId && (jsxs("div", { className: styles.panelSection, style: { marginTop: 12 }, children: [jsx("label", { className: styles.panelLabel, children: "Add transition to:" }), jsx(Ze, { className: styles.panelInput, onChange: (val) => {
                                             if (val && api.editorState.selectedStateId) {
                                                 api.addTransition(api.editorState.selectedStateId, val);
                                             }
                                         }, options: [
                                             { value: '', label: '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 : [])
+                                            ...((_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 : []),
                                         ] })] }))] })] })] }));
 };
 /* ────────────────────────────────────────────────────────────────
@@ -340,20 +353,20 @@ const EffectsView = ({ api }) => {
         { type: 'shadow', label: 'Shadow' },
         { type: 'palette-swap', label: '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: "Add Effect" }) }), jsx("div", { className: styles.panelContent, children: effectTypes.map(({ type, label }) => (jsx(Fe, { 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: "Presets" }) }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.panelSection, children: [jsx(Re, { className: styles.panelInput, placeholder: "Preset name...", value: presetName, onChange: val => setPresetName(val) }), jsx(Fe, { className: styles.btnSecondary, variant: "ghost", style: { marginTop: 4, width: '100%' }, onClick: () => {
+    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: "Add Effect" }) }), jsx("div", { className: styles.panelContent, children: effectTypes.map(({ type, label }) => (jsx(on, { 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: "Presets" }) }), jsxs("div", { className: styles.panelContent, children: [jsxs("div", { className: styles.panelSection, children: [jsx(Je, { className: styles.panelInput, placeholder: "Preset name...", value: presetName, onChange: (val) => setPresetName(val) }), jsx(on, { className: styles.btnSecondary, variant: "ghost", style: { marginTop: 4, width: '100%' }, onClick: () => {
                                             if (presetName) {
                                                 api.saveEffectPreset(presetName);
                                                 setPresetName('');
                                             }
-                                        }, disabled: !presetName, children: "Save Current Effects" })] }), api.project.effectPresets.map(preset => (jsxs("div", { className: styles.layerItem, onClick: () => api.loadEffectPreset(preset.id), style: { cursor: 'pointer' }, children: [jsx("span", { className: styles.layerName, children: preset.name }), jsxs("span", { className: styles.layerOpacity, children: [preset.effects.length, " effects"] })] }, preset.id)))] })] }), jsx("div", { className: styles.viewport, children: jsx("div", { className: styles.emptyState, children: jsx("div", { className: styles.emptyStateText, children: "Select a sprite or tile to preview effects" }) }) }), jsxs("div", { className: styles.rightPanel, children: [jsx("div", { className: styles.panelHeader, children: jsx("span", { children: "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: "Add effects from the left panel" }) }) }) })] })] }));
+                                        }, disabled: !presetName, children: "Save Current Effects" })] }), api.project.effectPresets.map((preset) => (jsxs("div", { className: styles.layerItem, onClick: () => api.loadEffectPreset(preset.id), style: { cursor: 'pointer' }, children: [jsx("span", { className: styles.layerName, children: preset.name }), jsxs("span", { className: styles.layerOpacity, children: [preset.effects.length, " effects"] })] }, preset.id)))] })] }), jsx("div", { className: styles.viewport, children: jsx("div", { className: styles.emptyState, children: jsx("div", { className: styles.emptyStateText, children: "Select a sprite or tile to preview effects" }) }) }), jsxs("div", { className: styles.rightPanel, children: [jsx("div", { className: styles.panelHeader, children: jsx("span", { children: "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: "Add effects from the left panel" }) }) }) })] })] }));
 };
 /* ────────────────────────────────────────────────────────────────
    STATUS BAR
 ──────────────────────────────────────────────────────────────── */
 const StatusBar = ({ api }) => {
-    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: [jsxs("span", { className: styles.statusItem, children: ["Mode: ", api.editorState.mode] }), api.editorState.mode === 'tilemap' && activeMap && (jsxs(Fragment, { children: [jsxs("span", { className: styles.statusItem, children: ["Map: ", activeMap.name, " (", activeMap.width, "\u00D7", activeMap.height, ")"] }), jsxs("span", { className: styles.statusItem, children: ["Tile: ", activeMap.tileWidth, "\u00D7", activeMap.tileHeight, "px"] })] })), api.editorState.mode === 'spritesheet' && activeSheet && (jsxs(Fragment, { children: [jsxs("span", { className: styles.statusItem, children: ["Sheet: ", activeSheet.name] }), jsxs("span", { className: styles.statusItem, children: ["Selected: ", api.editorState.selectedFrameIds.length, " frames"] })] })), jsxs("div", { className: styles.zoomControl, children: [jsx(Fe, { 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(Fe, { className: styles.zoomBtn, variant: "ghost", size: "sm", onClick: () => api.setZoom(api.editorState.zoom + 0.25), children: "+" }), jsx(Fe, { className: styles.zoomBtn, variant: "ghost", size: "sm", onClick: () => api.setZoom(1), children: "\u2299" })] })] }));
+    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: [jsxs("span", { className: styles.statusItem, children: ["Mode: ", api.editorState.mode] }), api.editorState.mode === 'tilemap' && activeMap && (jsxs(Fragment, { children: [jsxs("span", { className: styles.statusItem, children: ["Map: ", activeMap.name, " (", activeMap.width, "\u00D7", activeMap.height, ")"] }), jsxs("span", { className: styles.statusItem, children: ["Tile: ", activeMap.tileWidth, "\u00D7", activeMap.tileHeight, "px"] })] })), api.editorState.mode === 'spritesheet' && activeSheet && (jsxs(Fragment, { children: [jsxs("span", { className: styles.statusItem, children: ["Sheet: ", activeSheet.name] }), jsxs("span", { className: styles.statusItem, children: ["Selected: ", api.editorState.selectedFrameIds.length, " frames"] })] })), jsxs("div", { className: styles.zoomControl, children: [jsx(on, { 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(on, { className: styles.zoomBtn, variant: "ghost", size: "sm", onClick: () => api.setZoom(api.editorState.zoom + 0.25), children: "+" }), jsx(on, { className: styles.zoomBtn, variant: "ghost", size: "sm", onClick: () => api.setZoom(1), children: "\u2299" })] })] }));
 };
 /* ────────────────────────────────────────────────────────────────
    MAIN COMPONENT