@nice2dev/ui-graphics 1.1.0 → 1.1.1

package/dist/cjs/game/useGameAssetEditor.js

@@ -44,27 +44,28 @@ const useGameAssetEditor = (options = {}) => {
             timestamp: Date.now(),
             snapshot: JSON.parse(JSON.stringify(project)),
         };
-        setHistory(prev => {
+        setHistory((prev) => {
             const newHistory = prev.slice(0, historyIndex + 1);
             newHistory.push(entry);
-            if (newHistory.length > MAX_HISTORY)
+            if (newHistory.length > MAX_HISTORY) {
                 newHistory.shift();
+            }
             return newHistory;
         });
-        setHistoryIndex(prev => Math.min(prev + 1, MAX_HISTORY - 1));
+        setHistoryIndex((prev) => Math.min(prev + 1, MAX_HISTORY - 1));
     }, [project, historyIndex]);
     const undo = React.useCallback(() => {
         if (historyIndex > 0) {
             const entry = history[historyIndex - 1];
             setProject(entry.snapshot);
-            setHistoryIndex(prev => prev - 1);
+            setHistoryIndex((prev) => prev - 1);
         }
     }, [history, historyIndex]);
     const redo = React.useCallback(() => {
         if (historyIndex < history.length - 1) {
             const entry = history[historyIndex + 1];
             setProject(entry.snapshot);
-            setHistoryIndex(prev => prev + 1);
+            setHistoryIndex((prev) => prev + 1);
         }
     }, [history, historyIndex]);
     // ─────────────────────────────────────────────────────────────
@@ -94,46 +95,46 @@ const useGameAssetEditor = (options = {}) => {
     // Editor state operations
     // ─────────────────────────────────────────────────────────────
     const setMode = React.useCallback((mode) => {
-        setEditorState(prev => ({ ...prev, mode }));
+        setEditorState((prev) => ({ ...prev, mode }));
     }, []);
     const setTileMapTool = React.useCallback((tool) => {
-        setEditorState(prev => ({ ...prev, tileMapTool: tool }));
+        setEditorState((prev) => ({ ...prev, tileMapTool: tool }));
     }, []);
     const setSpriteSheetTool = React.useCallback((tool) => {
-        setEditorState(prev => ({ ...prev, spriteSheetTool: tool }));
+        setEditorState((prev) => ({ ...prev, spriteSheetTool: tool }));
     }, []);
     const setZoom = React.useCallback((zoom) => {
-        setEditorState(prev => ({ ...prev, zoom: Math.max(0.1, Math.min(10, zoom)) }));
+        setEditorState((prev) => ({ ...prev, zoom: Math.max(0.1, Math.min(10, zoom)) }));
     }, []);
     const setPan = React.useCallback((x, y) => {
-        setEditorState(prev => ({ ...prev, panX: x, panY: y }));
+        setEditorState((prev) => ({ ...prev, panX: x, panY: y }));
     }, []);
     const toggleGrid = React.useCallback(() => {
-        setEditorState(prev => ({ ...prev, showGrid: !prev.showGrid }));
+        setEditorState((prev) => ({ ...prev, showGrid: !prev.showGrid }));
     }, []);
     const toggleCollision = React.useCallback(() => {
-        setEditorState(prev => ({ ...prev, showCollision: !prev.showCollision }));
+        setEditorState((prev) => ({ ...prev, showCollision: !prev.showCollision }));
     }, []);
     const toggleSnap = React.useCallback(() => {
-        setEditorState(prev => ({ ...prev, snapToGrid: !prev.snapToGrid }));
+        setEditorState((prev) => ({ ...prev, snapToGrid: !prev.snapToGrid }));
     }, []);
     // ─────────────────────────────────────────────────────────────
     // Tile set operations
     // ─────────────────────────────────────────────────────────────
     const addTile = React.useCallback((imageData, name) => {
         const tile = gameAssetUtils.createTileFromImage(imageData, name);
-        setProject(prev => ({ ...prev, tileSets: [...prev.tileSets, tile] }));
+        setProject((prev) => ({ ...prev, tileSets: [...prev.tileSets, tile] }));
         pushHistory(`Add tile: ${name}`);
     }, [pushHistory]);
     const removeTile = React.useCallback((id) => {
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            tileSets: prev.tileSets.filter(t => t.id !== id),
+            tileSets: prev.tileSets.filter((t) => t.id !== id),
         }));
         pushHistory('Remove tile');
     }, [pushHistory]);
     const selectTile = React.useCallback((id) => {
-        setEditorState(prev => ({ ...prev, selectedTileId: id }));
+        setEditorState((prev) => ({ ...prev, selectedTileId: id }));
     }, []);
     const importTileSet = React.useCallback(async (file) => {
         const dataUrl = await new Promise((resolve) => {
@@ -150,8 +151,8 @@ const useGameAssetEditor = (options = {}) => {
     // ─────────────────────────────────────────────────────────────
     const createTileMap = React.useCallback((name, width, height) => {
         const map = gameAssetUtils.createEmptyTileMap(name, width, height, project.settings.defaultTileWidth, project.settings.defaultTileHeight);
-        setProject(prev => ({ ...prev, tileMaps: [...prev.tileMaps, map] }));
-        setEditorState(prev => ({
+        setProject((prev) => ({ ...prev, tileMaps: [...prev.tileMaps, map] }));
+        setEditorState((prev) => ({
             ...prev,
             activeTileMapId: map.id,
             activeLayerId: map.layers[0].id,
@@ -159,16 +160,16 @@ const useGameAssetEditor = (options = {}) => {
         pushHistory(`Create tile map: ${name}`);
     }, [project.settings, pushHistory]);
     const removeTileMap = React.useCallback((id) => {
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            tileMaps: prev.tileMaps.filter(m => m.id !== id),
+            tileMaps: prev.tileMaps.filter((m) => m.id !== id),
         }));
         pushHistory('Remove tile map');
     }, [pushHistory]);
     const selectTileMap = React.useCallback((id) => {
-        setEditorState(prev => {
+        setEditorState((prev) => {
             var _a, _b;
-            const map = project.tileMaps.find(m => m.id === id);
+            const map = project.tileMaps.find((m) => m.id === id);
             return {
                 ...prev,
                 activeTileMapId: id,
@@ -177,14 +178,15 @@ const useGameAssetEditor = (options = {}) => {
         });
     }, [project.tileMaps]);
     const setTile = React.useCallback((layerId, x, y, tileId) => {
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            tileMaps: prev.tileMaps.map(map => ({
+            tileMaps: prev.tileMaps.map((map) => ({
                 ...map,
-                layers: map.layers.map(layer => {
-                    if (layer.id !== layerId)
+                layers: map.layers.map((layer) => {
+                    if (layer.id !== layerId) {
                         return layer;
-                    const newTiles = layer.tiles.map(row => [...row]);
+                    }
+                    const newTiles = layer.tiles.map((row) => [...row]);
                     if (y >= 0 && y < newTiles.length && x >= 0 && x < newTiles[0].length) {
                         newTiles[y][x] = tileId;
                     }
@@ -194,95 +196,107 @@ const useGameAssetEditor = (options = {}) => {
         }));
     }, []);
     const fillTiles = React.useCallback((layerId, startX, startY, newTileId) => {
-        setProject(prev => {
+        setProject((prev) => {
             var _a;
-            const map = prev.tileMaps.find(m => m.layers.some(l => l.id === layerId));
-            if (!map)
+            const map = prev.tileMaps.find((m) => m.layers.some((l) => l.id === layerId));
+            if (!map) {
                 return prev;
-            const layer = map.layers.find(l => l.id === layerId);
-            if (!layer)
+            }
+            const layer = map.layers.find((l) => l.id === layerId);
+            if (!layer) {
                 return prev;
+            }
             const targetId = (_a = layer.tiles[startY]) === null || _a === void 0 ? void 0 : _a[startX];
-            if (targetId === newTileId)
+            if (targetId === newTileId) {
                 return prev;
-            const newTiles = layer.tiles.map(row => [...row]);
+            }
+            const newTiles = layer.tiles.map((row) => [...row]);
             const stack = [[startX, startY]];
             const visited = new Set();
             while (stack.length > 0) {
                 const [x, y] = stack.pop();
                 const key = `${x},${y}`;
-                if (visited.has(key))
+                if (visited.has(key)) {
                     continue;
-                if (y < 0 || y >= newTiles.length || x < 0 || x >= newTiles[0].length)
+                }
+                if (y < 0 || y >= newTiles.length || x < 0 || x >= newTiles[0].length) {
                     continue;
-                if (newTiles[y][x] !== targetId)
+                }
+                if (newTiles[y][x] !== targetId) {
                     continue;
+                }
                 visited.add(key);
                 newTiles[y][x] = newTileId;
                 stack.push([x + 1, y], [x - 1, y], [x, y + 1], [x, y - 1]);
             }
             return {
                 ...prev,
-                tileMaps: prev.tileMaps.map(m => m.id === map.id
-                    ? { ...m, layers: m.layers.map(l => (l.id === layerId ? { ...l, tiles: newTiles } : l)) }
+                tileMaps: prev.tileMaps.map((m) => m.id === map.id
+                    ? {
+                        ...m,
+                        layers: m.layers.map((l) => (l.id === layerId ? { ...l, tiles: newTiles } : l)),
+                    }
                     : m),
             };
         });
         pushHistory('Fill tiles');
     }, [pushHistory]);
     const addLayer = React.useCallback(() => {
-        const map = project.tileMaps.find(m => m.id === editorState.activeTileMapId);
-        if (!map)
+        const map = project.tileMaps.find((m) => m.id === editorState.activeTileMapId);
+        if (!map) {
             return;
+        }
         const newLayer = gameAssetUtils.createEmptyTileLayer(`Layer ${map.layers.length + 1}`, map.width, map.height);
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            tileMaps: prev.tileMaps.map(m => m.id === map.id ? { ...m, layers: [...m.layers, newLayer] } : m),
+            tileMaps: prev.tileMaps.map((m) => m.id === map.id ? { ...m, layers: [...m.layers, newLayer] } : m),
         }));
-        setEditorState(prev => ({ ...prev, activeLayerId: newLayer.id }));
+        setEditorState((prev) => ({ ...prev, activeLayerId: newLayer.id }));
         pushHistory('Add layer');
     }, [project.tileMaps, editorState.activeTileMapId, pushHistory]);
     const removeLayer = React.useCallback((id) => {
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            tileMaps: prev.tileMaps.map(m => ({
+            tileMaps: prev.tileMaps.map((m) => ({
                 ...m,
-                layers: m.layers.filter(l => l.id !== id),
+                layers: m.layers.filter((l) => l.id !== id),
             })),
         }));
         pushHistory('Remove layer');
     }, [pushHistory]);
     const selectLayer = React.useCallback((id) => {
-        setEditorState(prev => ({ ...prev, activeLayerId: id }));
+        setEditorState((prev) => ({ ...prev, activeLayerId: id }));
     }, []);
     const toggleLayerVisibility = React.useCallback((id) => {
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            tileMaps: prev.tileMaps.map(m => ({
+            tileMaps: prev.tileMaps.map((m) => ({
                 ...m,
-                layers: m.layers.map(l => (l.id === id ? { ...l, visible: !l.visible } : l)),
+                layers: m.layers.map((l) => (l.id === id ? { ...l, visible: !l.visible } : l)),
             })),
         }));
     }, []);
     const setLayerOpacity = React.useCallback((id, opacity) => {
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            tileMaps: prev.tileMaps.map(m => ({
+            tileMaps: prev.tileMaps.map((m) => ({
                 ...m,
-                layers: m.layers.map(l => (l.id === id ? { ...l, opacity } : l)),
+                layers: m.layers.map((l) => (l.id === id ? { ...l, opacity } : l)),
             })),
         }));
     }, []);
     const moveLayer = React.useCallback((id, direction) => {
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            tileMaps: prev.tileMaps.map(m => {
-                const idx = m.layers.findIndex(l => l.id === id);
-                if (idx === -1)
+            tileMaps: prev.tileMaps.map((m) => {
+                const idx = m.layers.findIndex((l) => l.id === id);
+                if (idx === -1) {
                     return m;
+                }
                 const newIdx = direction === 'up' ? idx - 1 : idx + 1;
-                if (newIdx < 0 || newIdx >= m.layers.length)
+                if (newIdx < 0 || newIdx >= m.layers.length) {
                     return m;
+                }
                 const newLayers = [...m.layers];
                 [newLayers[idx], newLayers[newIdx]] = [newLayers[newIdx], newLayers[idx]];
                 return { ...m, layers: newLayers };
@@ -317,103 +331,103 @@ const useGameAssetEditor = (options = {}) => {
             frames: [],
             animations: [],
         };
-        setProject(prev => ({ ...prev, spriteSheets: [...prev.spriteSheets, sheet] }));
-        setEditorState(prev => ({ ...prev, activeSpriteSheetId: sheet.id }));
+        setProject((prev) => ({ ...prev, spriteSheets: [...prev.spriteSheets, sheet] }));
+        setEditorState((prev) => ({ ...prev, activeSpriteSheetId: sheet.id }));
         pushHistory(`Import sprite sheet: ${sheet.name}`);
     }, [pushHistory]);
     const removeSpriteSheet = React.useCallback((id) => {
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            spriteSheets: prev.spriteSheets.filter(s => s.id !== id),
+            spriteSheets: prev.spriteSheets.filter((s) => s.id !== id),
         }));
         pushHistory('Remove sprite sheet');
     }, [pushHistory]);
     const selectSpriteSheet = React.useCallback((id) => {
-        setEditorState(prev => ({ ...prev, activeSpriteSheetId: id, selectedFrameIds: [] }));
+        setEditorState((prev) => ({ ...prev, activeSpriteSheetId: id, selectedFrameIds: [] }));
     }, []);
     const autoSlice = React.useCallback((frameWidth, frameHeight) => {
-        const sheet = project.spriteSheets.find(s => s.id === editorState.activeSpriteSheetId);
-        if (!(sheet === null || sheet === void 0 ? void 0 : sheet.imageData))
+        const sheet = project.spriteSheets.find((s) => s.id === editorState.activeSpriteSheetId);
+        if (!(sheet === null || sheet === void 0 ? void 0 : sheet.imageData)) {
             return;
+        }
         const frames = gameAssetUtils.autoSliceSpriteSheet(sheet.imageData, frameWidth, frameHeight);
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            spriteSheets: prev.spriteSheets.map(s => s.id === sheet.id ? { ...s, frames } : s),
+            spriteSheets: prev.spriteSheets.map((s) => (s.id === sheet.id ? { ...s, frames } : s)),
         }));
         pushHistory('Auto-slice sprite sheet');
     }, [project.spriteSheets, editorState.activeSpriteSheetId, pushHistory]);
     const detectSprites = React.useCallback(() => {
-        const sheet = project.spriteSheets.find(s => s.id === editorState.activeSpriteSheetId);
-        if (!(sheet === null || sheet === void 0 ? void 0 : sheet.imageData))
+        const sheet = project.spriteSheets.find((s) => s.id === editorState.activeSpriteSheetId);
+        if (!(sheet === null || sheet === void 0 ? void 0 : sheet.imageData)) {
             return;
+        }
         const frames = gameAssetUtils.detectFrames(sheet.imageData);
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            spriteSheets: prev.spriteSheets.map(s => s.id === sheet.id ? { ...s, frames } : s),
+            spriteSheets: prev.spriteSheets.map((s) => (s.id === sheet.id ? { ...s, frames } : s)),
         }));
         pushHistory('Detect sprites');
     }, [project.spriteSheets, editorState.activeSpriteSheetId, pushHistory]);
     const addFrame = React.useCallback((frame) => {
         const newFrame = { ...frame, id: gameAssetUtils.generateId('frame') };
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            spriteSheets: prev.spriteSheets.map(s => s.id === editorState.activeSpriteSheetId
-                ? { ...s, frames: [...s.frames, newFrame] }
-                : s),
+            spriteSheets: prev.spriteSheets.map((s) => s.id === editorState.activeSpriteSheetId ? { ...s, frames: [...s.frames, newFrame] } : s),
         }));
         pushHistory('Add frame');
     }, [editorState.activeSpriteSheetId, pushHistory]);
     const updateFrame = React.useCallback((id, updates) => {
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            spriteSheets: prev.spriteSheets.map(s => ({
+            spriteSheets: prev.spriteSheets.map((s) => ({
                 ...s,
-                frames: s.frames.map(f => (f.id === id ? { ...f, ...updates } : f)),
+                frames: s.frames.map((f) => (f.id === id ? { ...f, ...updates } : f)),
             })),
         }));
     }, []);
     const removeFrame = React.useCallback((id) => {
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            spriteSheets: prev.spriteSheets.map(s => ({
+            spriteSheets: prev.spriteSheets.map((s) => ({
                 ...s,
-                frames: s.frames.filter(f => f.id !== id),
+                frames: s.frames.filter((f) => f.id !== id),
             })),
         }));
         pushHistory('Remove frame');
     }, [pushHistory]);
     const selectFrames = React.useCallback((ids) => {
-        setEditorState(prev => ({ ...prev, selectedFrameIds: ids }));
+        setEditorState((prev) => ({ ...prev, selectedFrameIds: ids }));
     }, []);
     // ─────────────────────────────────────────────────────────────
     // Animation operations
     // ─────────────────────────────────────────────────────────────
     const createAnimation = React.useCallback((name, frameIds) => {
         const animation = gameAssetUtils.createSpriteAnimation(name, frameIds);
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            spriteSheets: prev.spriteSheets.map(s => s.id === editorState.activeSpriteSheetId
+            spriteSheets: prev.spriteSheets.map((s) => s.id === editorState.activeSpriteSheetId
                 ? { ...s, animations: [...s.animations, animation] }
                 : s),
         }));
         pushHistory(`Create animation: ${name}`);
     }, [editorState.activeSpriteSheetId, pushHistory]);
     const removeAnimation = React.useCallback((id) => {
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            spriteSheets: prev.spriteSheets.map(s => ({
+            spriteSheets: prev.spriteSheets.map((s) => ({
                 ...s,
-                animations: s.animations.filter(a => a.id !== id),
+                animations: s.animations.filter((a) => a.id !== id),
             })),
         }));
         pushHistory('Remove animation');
     }, [pushHistory]);
     const updateAnimation = React.useCallback((id, updates) => {
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            spriteSheets: prev.spriteSheets.map(s => ({
+            spriteSheets: prev.spriteSheets.map((s) => ({
                 ...s,
-                animations: s.animations.map(a => (a.id === id ? { ...a, ...updates } : a)),
+                animations: s.animations.map((a) => (a.id === id ? { ...a, ...updates } : a)),
             })),
         }));
     }, []);
@@ -430,19 +444,19 @@ const useGameAssetEditor = (options = {}) => {
             entryStateId: '',
             anyStateTransitions: [],
         };
-        setProject(prev => ({ ...prev, stateMachines: [...prev.stateMachines, sm] }));
-        setEditorState(prev => ({ ...prev, activeStateMachineId: sm.id }));
+        setProject((prev) => ({ ...prev, stateMachines: [...prev.stateMachines, sm] }));
+        setEditorState((prev) => ({ ...prev, activeStateMachineId: sm.id }));
         pushHistory(`Create state machine: ${name}`);
     }, [pushHistory]);
     const removeStateMachine = React.useCallback((id) => {
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            stateMachines: prev.stateMachines.filter(sm => sm.id !== id),
+            stateMachines: prev.stateMachines.filter((sm) => sm.id !== id),
         }));
         pushHistory('Remove state machine');
     }, [pushHistory]);
     const selectStateMachine = React.useCallback((id) => {
-        setEditorState(prev => ({ ...prev, activeStateMachineId: id, selectedStateId: null }));
+        setEditorState((prev) => ({ ...prev, activeStateMachineId: id, selectedStateId: null }));
     }, []);
     const addState = React.useCallback((name, animationId) => {
         const state = {
@@ -453,9 +467,9 @@ const useGameAssetEditor = (options = {}) => {
             loop: true,
             position: { x: Math.random() * 400, y: Math.random() * 300 },
         };
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            stateMachines: prev.stateMachines.map(sm => sm.id === editorState.activeStateMachineId
+            stateMachines: prev.stateMachines.map((sm) => sm.id === editorState.activeStateMachineId
                 ? {
                     ...sm,
                     states: [...sm.states, state],
@@ -466,25 +480,25 @@ const useGameAssetEditor = (options = {}) => {
         pushHistory(`Add state: ${name}`);
     }, [editorState.activeStateMachineId, pushHistory]);
     const removeState = React.useCallback((id) => {
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            stateMachines: prev.stateMachines.map(sm => ({
+            stateMachines: prev.stateMachines.map((sm) => ({
                 ...sm,
-                states: sm.states.filter(s => s.id !== id),
-                transitions: sm.transitions.filter(t => t.fromStateId !== id && t.toStateId !== id),
+                states: sm.states.filter((s) => s.id !== id),
+                transitions: sm.transitions.filter((t) => t.fromStateId !== id && t.toStateId !== id),
             })),
         }));
         pushHistory('Remove state');
     }, [pushHistory]);
     const selectState = React.useCallback((id) => {
-        setEditorState(prev => ({ ...prev, selectedStateId: id }));
+        setEditorState((prev) => ({ ...prev, selectedStateId: id }));
     }, []);
     const updateState = React.useCallback((id, updates) => {
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            stateMachines: prev.stateMachines.map(sm => ({
+            stateMachines: prev.stateMachines.map((sm) => ({
                 ...sm,
-                states: sm.states.map(s => (s.id === id ? { ...s, ...updates } : s)),
+                states: sm.states.map((s) => (s.id === id ? { ...s, ...updates } : s)),
             })),
         }));
     }, []);
@@ -497,20 +511,20 @@ const useGameAssetEditor = (options = {}) => {
             duration: 0.1,
             priority: 0,
         };
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            stateMachines: prev.stateMachines.map(sm => sm.id === editorState.activeStateMachineId
+            stateMachines: prev.stateMachines.map((sm) => sm.id === editorState.activeStateMachineId
                 ? { ...sm, transitions: [...sm.transitions, transition] }
                 : sm),
         }));
         pushHistory('Add transition');
     }, [editorState.activeStateMachineId, pushHistory]);
     const removeTransition = React.useCallback((id) => {
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            stateMachines: prev.stateMachines.map(sm => ({
+            stateMachines: prev.stateMachines.map((sm) => ({
                 ...sm,
-                transitions: sm.transitions.filter(t => t.id !== id),
+                transitions: sm.transitions.filter((t) => t.id !== id),
             })),
         }));
         pushHistory('Remove transition');
@@ -522,20 +536,20 @@ const useGameAssetEditor = (options = {}) => {
             type,
             defaultValue: type === 'bool' ? false : 0,
         };
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            stateMachines: prev.stateMachines.map(sm => sm.id === editorState.activeStateMachineId
+            stateMachines: prev.stateMachines.map((sm) => sm.id === editorState.activeStateMachineId
                 ? { ...sm, parameters: [...sm.parameters, param] }
                 : sm),
         }));
         pushHistory(`Add parameter: ${name}`);
     }, [editorState.activeStateMachineId, pushHistory]);
     const removeParameter = React.useCallback((id) => {
-        setProject(prev => ({
+        setProject((prev) => ({
             ...prev,
-            stateMachines: prev.stateMachines.map(sm => ({
+            stateMachines: prev.stateMachines.map((sm) => ({
                 ...sm,
-                parameters: sm.parameters.filter(p => p.id !== id),
+                parameters: sm.parameters.filter((p) => p.id !== id),
             })),
         }));
         pushHistory('Remove parameter');
@@ -545,18 +559,18 @@ const useGameAssetEditor = (options = {}) => {
     // ─────────────────────────────────────────────────────────────
     const addEffect = React.useCallback((type) => {
         const defaultParams = {
-            'outline': { color: '#000000', thickness: 1 },
-            'shadow': { color: '#00000080', offsetX: 2, offsetY: 2, blur: 0 },
-            'glow': { color: '#ffffff', size: 4, intensity: 0.8 },
+            outline: { color: '#000000', thickness: 1 },
+            shadow: { color: '#00000080', offsetX: 2, offsetY: 2, blur: 0 },
+            glow: { color: '#ffffff', size: 4, intensity: 0.8 },
             'palette-swap': { from: '#ffffff', to: '#ff0000' },
-            'pixelate': { size: 4 },
-            'blur': { radius: 2 },
-            'brightness': { value: 0 },
-            'contrast': { value: 0 },
-            'saturation': { value: 0 },
+            pixelate: { size: 4 },
+            blur: { radius: 2 },
+            brightness: { value: 0 },
+            contrast: { value: 0 },
+            saturation: { value: 0 },
             'hue-shift': { degrees: 0 },
-            'invert': {},
-            'tint': { color: '#ffffff', amount: 0.5 },
+            invert: {},
+            tint: { color: '#ffffff', amount: 0.5 },
         };
         const effect = {
             id: gameAssetUtils.generateId('effect'),
@@ -564,30 +578,30 @@ const useGameAssetEditor = (options = {}) => {
             enabled: true,
             params: { ...defaultParams[type] },
         };
-        setCurrentEffects(prev => [...prev, effect]);
+        setCurrentEffects((prev) => [...prev, effect]);
     }, []);
     const removeEffect = React.useCallback((id) => {
-        setCurrentEffects(prev => prev.filter(e => e.id !== id));
+        setCurrentEffects((prev) => prev.filter((e) => e.id !== id));
     }, []);
     const updateEffect = React.useCallback((id, updates) => {
-        setCurrentEffects(prev => prev.map(e => (e.id === id ? { ...e, ...updates } : e)));
+        setCurrentEffects((prev) => prev.map((e) => (e.id === id ? { ...e, ...updates } : e)));
     }, []);
     const toggleEffect = React.useCallback((id) => {
-        setCurrentEffects(prev => prev.map(e => (e.id === id ? { ...e, enabled: !e.enabled } : e)));
+        setCurrentEffects((prev) => prev.map((e) => (e.id === id ? { ...e, enabled: !e.enabled } : e)));
     }, []);
     const saveEffectPreset = React.useCallback((name) => {
         const preset = {
             id: gameAssetUtils.generateId('preset'),
             name,
-            effects: currentEffects.map(e => ({ ...e, id: gameAssetUtils.generateId('effect') })),
+            effects: currentEffects.map((e) => ({ ...e, id: gameAssetUtils.generateId('effect') })),
         };
-        setProject(prev => ({ ...prev, effectPresets: [...prev.effectPresets, preset] }));
+        setProject((prev) => ({ ...prev, effectPresets: [...prev.effectPresets, preset] }));
         pushHistory(`Save effect preset: ${name}`);
     }, [currentEffects, pushHistory]);
     const loadEffectPreset = React.useCallback((id) => {
-        const preset = project.effectPresets.find(p => p.id === id);
+        const preset = project.effectPresets.find((p) => p.id === id);
         if (preset) {
-            setCurrentEffects(preset.effects.map(e => ({ ...e, id: gameAssetUtils.generateId('effect') })));
+            setCurrentEffects(preset.effects.map((e) => ({ ...e, id: gameAssetUtils.generateId('effect') })));
         }
     }, [project.effectPresets]);
     const previewEffects = React.useCallback((imageData) => {
@@ -598,9 +612,10 @@ const useGameAssetEditor = (options = {}) => {
     // ─────────────────────────────────────────────────────────────
     const exportTileMap = React.useCallback((format) => {
         var _a;
-        const map = project.tileMaps.find(m => m.id === editorState.activeTileMapId);
-        if (!map)
+        const map = project.tileMaps.find((m) => m.id === editorState.activeTileMapId);
+        if (!map) {
             return;
+        }
         if (format === 'json') {
             gameAssetUtils.downloadJson(map, `${map.name}.json`);
         }
@@ -616,13 +631,13 @@ const useGameAssetEditor = (options = {}) => {
             const ctx = canvas.getContext('2d');
             ctx.fillStyle = map.backgroundColor;
             ctx.fillRect(0, 0, canvas.width, canvas.height);
-            for (const layer of map.layers.filter(l => l.visible)) {
+            for (const layer of map.layers.filter((l) => l.visible)) {
                 ctx.globalAlpha = layer.opacity;
                 for (let y = 0; y < map.height; y++) {
                     for (let x = 0; x < map.width; x++) {
                         const tileId = (_a = layer.tiles[y]) === null || _a === void 0 ? void 0 : _a[x];
                         if (tileId) {
-                            const tile = project.tileSets.find(t => t.id === tileId);
+                            const tile = project.tileSets.find((t) => t.id === tileId);
                             if (tile === null || tile === void 0 ? void 0 : tile.image) {
                                 const tempCanvas = document.createElement('canvas');
                                 tempCanvas.width = tile.image.width;
@@ -639,9 +654,10 @@ const useGameAssetEditor = (options = {}) => {
         onExport === null || onExport === void 0 ? void 0 : onExport(JSON.stringify(map), format);
     }, [project, editorState.activeTileMapId, onExport]);
     const exportSpriteSheet = React.useCallback((format) => {
-        const sheet = project.spriteSheets.find(s => s.id === editorState.activeSpriteSheetId);
-        if (!sheet)
+        const sheet = project.spriteSheets.find((s) => s.id === editorState.activeSpriteSheetId);
+        if (!sheet) {
             return;
+        }
         if (format === 'json') {
             const exportData = {
                 name: sheet.name,
@@ -676,9 +692,10 @@ const useGameAssetEditor = (options = {}) => {
         onExport === null || onExport === void 0 ? void 0 : onExport(JSON.stringify(sheet), format);
     }, [project.spriteSheets, editorState.activeSpriteSheetId, onExport]);
     const exportStateMachine = React.useCallback((format) => {
-        const sm = project.stateMachines.find(s => s.id === editorState.activeStateMachineId);
-        if (!sm)
+        const sm = project.stateMachines.find((s) => s.id === editorState.activeStateMachineId);
+        if (!sm) {
             return;
+        }
         gameAssetUtils.downloadJson(sm, `${sm.name}.statemachine.json`);
         onExport === null || onExport === void 0 ? void 0 : onExport(JSON.stringify(sm), format);
     }, [project.stateMachines, editorState.activeStateMachineId, onExport]);