@gamepark/react-game 7.5.7 → 7.5.9

package/dist/components/material/GameTable/DevToolsHub.js

@@ -1,14 +1,55 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css, keyframes } from '@emotion/react';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useContext, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useGame } from '../../../hooks/useGame';
 import { usePlayerId, usePlayerIds } from '../../../hooks/usePlayerId';
+import { gameContext } from '../../GameProvider/GameContext';
 const GP_PRIMARY = '#28B8CE';
 const GP_DARK = '#002448';
 const GP_SURFACE = '#0a1929';
 const GP_ACCENT = '#9fe2f7';
+// ═══════════════════════════════════════
+//  JSON syntax highlighting (pure React)
+// ═══════════════════════════════════════
+const highlightJson = (json) => {
+    const parts = [];
+    // Regex to match JSON tokens
+    const tokenRegex = /("(?:\\.|[^"\\])*"\s*:)|("(?:\\.|[^"\\])*")|(true|false|null)|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|([{}[\],])/g;
+    let lastIndex = 0;
+    let match;
+    while ((match = tokenRegex.exec(json)) !== null) {
+        // Add whitespace between tokens
+        if (match.index > lastIndex) {
+            parts.push(json.slice(lastIndex, match.index));
+        }
+        const [full, key, str, bool, num, punct] = match;
+        if (key) {
+            // key: "xxx":
+            const colonIdx = key.lastIndexOf(':');
+            parts.push(_jsx("span", { css: jsonKeyCss, children: key.slice(0, colonIdx) }, `k${match.index}`));
+            parts.push(key.slice(colonIdx));
+        }
+        else if (str) {
+            parts.push(_jsx("span", { css: jsonStringCss, children: full }, `s${match.index}`));
+        }
+        else if (bool) {
+            parts.push(_jsx("span", { css: jsonBoolCss, children: full }, `b${match.index}`));
+        }
+        else if (num) {
+            parts.push(_jsx("span", { css: jsonNumCss, children: full }, `n${match.index}`));
+        }
+        else if (punct) {
+            parts.push(_jsx("span", { css: jsonPunctCss, children: full }, `p${match.index}`));
+        }
+        lastIndex = match.index + full.length;
+    }
+    if (lastIndex < json.length) {
+        parts.push(json.slice(lastIndex));
+    }
+    return parts;
+};
 /**
  * A single entry in the DevToolsHub panel.
  * Use this instead of raw `<button>` when adding custom tools via `children`.
@@ -19,17 +60,47 @@ const GP_ACCENT = '#9fe2f7';
  * </DevToolsHub>
  */
 export const DevToolEntry = ({ icon, label, desc, onClick }) => (_jsxs("button", { css: devToolBtnCss, onClick: onClick, children: [_jsx("span", { css: devToolIconCss, children: icon }), _jsx("span", { css: devToolLabelCss, children: label }), desc && _jsx("span", { css: devToolDescCss, children: desc })] }));
+// ═══════════════════════════════════════
+//  Save/Load helpers
+// ═══════════════════════════════════════
+const SAVE_PREFIX = ':save:';
+const getSaveKeys = (gameName) => {
+    const prefix = gameName + SAVE_PREFIX;
+    const keys = [];
+    for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (key?.startsWith(prefix))
+            keys.push(key);
+    }
+    return keys.sort();
+};
+const getSaveLabel = (key, gameName) => {
+    return key.slice((gameName + SAVE_PREFIX).length);
+};
+const menuItems = [
+    { id: 'game', icon: '\u2699', label: 'Game' },
+    { id: 'save', icon: '\u2B73', label: 'Save / Load' },
+    { id: 'export', icon: '\u2398', label: 'Export' },
+];
 export const DevToolsHub = ({ children, fabBottom, gameOptions }) => {
     const [isOpen, setIsOpen] = useState(false);
+    const [activeMenu, setActiveMenu] = useState(null);
     const [newGamePlayers, setNewGamePlayers] = useState(2);
     const [options, setOptions] = useState({});
     const [undoCount, setUndoCount] = useState(1);
     const [botActive, setBotActive] = useState(false);
     const [flash, setFlash] = useState(null);
+    const [saveLabel, setSaveLabel] = useState('');
+    const [importText, setImportText] = useState('');
+    const [pasteError, setPasteError] = useState(null);
+    const [showPasteModal, setShowPasteModal] = useState(false);
+    const [saveRefresh, setSaveRefresh] = useState(0);
     const flashTimeout = useRef(null);
+    const fileInputRef = useRef(null);
     const gameState = useGame();
     const currentPlayer = usePlayerId();
     const players = usePlayerIds();
+    const gameName = useContext(gameContext)?.game ?? 'unknown';
     const doFlash = useCallback((msg) => {
         if (flashTimeout.current)
             clearTimeout(flashTimeout.current);
@@ -54,30 +125,171 @@ export const DevToolsHub = ({ children, fabBottom, gameOptions }) => {
         action();
         doFlash(successMsg);
     }, [g, doFlash]);
+    // Save/Load handlers
+    const saveKeys = getSaveKeys(gameName);
+    void saveRefresh; // force re-read
+    const handleSave = useCallback(() => {
+        if (!gameState) {
+            doFlash('No game state');
+            return;
+        }
+        const label = saveLabel.trim() || new Date().toLocaleTimeString();
+        const key = gameName + SAVE_PREFIX + label;
+        localStorage.setItem(key, JSON.stringify(gameState));
+        setSaveLabel('');
+        setSaveRefresh(n => n + 1);
+        doFlash(`Saved: ${label}`);
+    }, [gameState, saveLabel, gameName, doFlash]);
+    const handleLoad = useCallback((key) => {
+        const raw = localStorage.getItem(key);
+        if (!raw) {
+            doFlash('Save not found');
+            return;
+        }
+        try {
+            const state = JSON.parse(raw);
+            if (g) {
+                g.new(state);
+                doFlash(`Loaded: ${getSaveLabel(key, gameName)}`);
+            }
+            else {
+                doFlash('game helper not available');
+            }
+        }
+        catch {
+            doFlash('Invalid save data');
+        }
+    }, [g, gameName, doFlash]);
+    const handleDownloadSave = useCallback((key) => {
+        const raw = localStorage.getItem(key);
+        if (!raw) {
+            doFlash('Save not found');
+            return;
+        }
+        const label = getSaveLabel(key, gameName);
+        const blob = new Blob([raw], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${gameName}-${label.replace(/[^a-zA-Z0-9_-]/g, '_')}.json`;
+        a.click();
+        URL.revokeObjectURL(url);
+        doFlash(`Downloaded: ${label}`);
+    }, [gameName, doFlash]);
+    const handleDelete = useCallback((key) => {
+        localStorage.removeItem(key);
+        setSaveRefresh(n => n + 1);
+        doFlash(`Deleted: ${getSaveLabel(key, gameName)}`);
+    }, [gameName, doFlash]);
+    const handleImportFile = useCallback((e) => {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        const reader = new FileReader();
+        reader.onload = () => {
+            try {
+                const state = JSON.parse(reader.result);
+                if (g) {
+                    g.new(state);
+                    doFlash(`Imported: ${file.name}`);
+                }
+                else {
+                    doFlash('game helper not available');
+                }
+            }
+            catch {
+                doFlash('Invalid JSON file');
+            }
+        };
+        reader.readAsText(file);
+        e.target.value = '';
+    }, [g, doFlash]);
+    const handleImportPaste = useCallback(() => {
+        if (!importText.trim()) {
+            setPasteError('Paste a JSON state first');
+            return;
+        }
+        try {
+            const state = JSON.parse(importText);
+            if (g) {
+                g.new(state);
+                setImportText('');
+                setPasteError(null);
+                setShowPasteModal(false);
+                doFlash('State imported!');
+            }
+            else {
+                setPasteError('game helper not available');
+            }
+        }
+        catch {
+            setPasteError('Invalid JSON — check syntax');
+        }
+    }, [g, importText, doFlash]);
+    const handlePasteChange = useCallback((value) => {
+        setImportText(value);
+        setPasteError(null);
+        // Try to pretty-print if valid
+        try {
+            const parsed = JSON.parse(value);
+            setImportText(JSON.stringify(parsed, null, 2));
+        }
+        catch {
+            // Keep raw text if invalid
+        }
+    }, []);
+    const handleDownloadState = useCallback(() => {
+        if (!gameState) {
+            doFlash('No game state');
+            return;
+        }
+        const json = JSON.stringify(gameState, null, 2);
+        const blob = new Blob([json], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${gameName}-state-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.json`;
+        a.click();
+        URL.revokeObjectURL(url);
+        doFlash('State downloaded');
+    }, [gameState, gameName, doFlash]);
+    const handleMenuClick = (id) => {
+        setActiveMenu(prev => prev === id ? null : id);
+    };
+    const handleMenuHover = (id) => {
+        setActiveMenu(id);
+    };
+    const allMenuItems = children
+        ? [...menuItems, { id: 'custom', icon: '\u2726', label: 'Custom' }]
+        : menuItems;
     const root = document.getElementById('root');
     if (!root)
         return null;
-    return createPortal(_jsxs(_Fragment, { children: [_jsx("button", { css: fabCss, onClick: () => setIsOpen(o => !o), "data-open": isOpen, style: fabBottom ? { bottom: fabBottom } : undefined, children: _jsxs("svg", { css: logoCss, viewBox: "0 0 46 46", "data-open": isOpen, children: [_jsx("circle", { cx: "11", cy: "11", r: "7" }), _jsx("circle", { cx: "35", cy: "11", r: "7" }), _jsx("circle", { cx: "11", cy: "35", r: "7" }), _jsx("circle", { cx: "35", cy: "35", r: "7" })] }) }), isOpen && (_jsxs(_Fragment, { children: [_jsx("div", { css: backdropCss, onClick: () => setIsOpen(false) }), _jsxs("div", { css: panelCss, style: fabBottom ? { bottom: `calc(${fabBottom} + 48px)` } : undefined, children: [_jsxs("div", { css: panelHeaderCss, children: [_jsxs("svg", { css: headerLogoCss, viewBox: "0 0 46 46", children: [_jsx("circle", { cx: "11", cy: "11", r: "7" }), _jsx("circle", { cx: "35", cy: "11", r: "7" }), _jsx("circle", { cx: "11", cy: "35", r: "7" }), _jsx("circle", { cx: "35", cy: "35", r: "7" })] }), _jsx("span", { css: panelTitleCss, children: "Dev Tools" }), _jsx("span", { css: panelBadgeCss, children: "GP" })] }), _jsxs("div", { css: toolListCss, children: [_jsxs("div", { css: devToolBtnCss, style: { animationDelay: '0ms' }, children: [_jsx("span", { css: devToolIconCss, children: '\u21BB' }), _jsx("span", { css: devToolLabelCss, children: "New Game" }), _jsx("span", { css: devToolDescCss, children: "Reset with N players" }), _jsxs("div", { css: inlineRowCss, onClick: e => e.stopPropagation(), children: [_jsx("button", { css: stepBtnCss, onClick: () => setNewGamePlayers(c => Math.max(1, c - 1)), children: "-" }), _jsx("input", { type: "number", min: 1, max: 10, value: newGamePlayers, onChange: e => setNewGamePlayers(Math.max(1, parseInt(e.target.value) || 2)), css: numberInputCss }), _jsx("button", { css: stepBtnCss, onClick: () => setNewGamePlayers(c => Math.min(10, c + 1)), children: "+" }), _jsx("button", { css: goBtnCss, onClick: () => exec(() => {
-                                                            const hasOptions = gameOptions?.length && Object.values(options).some(Boolean);
-                                                            g.new(hasOptions ? { players: newGamePlayers, ...options } : newGamePlayers);
-                                                        }, `New game ${newGamePlayers}p`), children: "Go" })] }), gameOptions?.map(opt => (_jsxs("label", { css: toggleRowCss, onClick: e => e.stopPropagation(), children: [_jsx("input", { type: "checkbox", checked: options[opt.key] ?? false, onChange: e => setOptions(prev => ({ ...prev, [opt.key]: e.target.checked })), css: checkboxCss }), _jsx("span", { css: toggleLabelCss, children: opt.label })] }, opt.key)))] }), _jsxs("div", { css: devToolBtnCss, style: { animationDelay: '40ms' }, children: [_jsx("span", { css: devToolIconCss, children: '\u238C' }), _jsx("span", { css: devToolLabelCss, children: "Undo" }), _jsx("span", { css: devToolDescCss, children: "Revert N moves" }), _jsxs("div", { css: inlineRowCss, onClick: e => e.stopPropagation(), children: [_jsx("button", { css: stepBtnCss, onClick: () => setUndoCount(c => Math.max(1, c - 1)), children: "-" }), _jsx("input", { type: "number", min: 1, max: 999, value: undoCount, onChange: e => setUndoCount(Math.max(1, parseInt(e.target.value) || 1)), css: numberInputCss }), _jsx("button", { css: stepBtnCss, onClick: () => setUndoCount(c => c + 1), children: "+" }), _jsx("button", { css: goBtnCss, onClick: () => exec(() => g.undo(undoCount), `Undo ${undoCount} move${undoCount > 1 ? 's' : ''}`), children: "Go" })] })] }), _jsxs("div", { css: devToolBtnCss, style: { animationDelay: '80ms' }, children: [_jsx("span", { css: devToolIconCss, children: '\u2194' }), _jsx("span", { css: devToolLabelCss, children: "Switch Player" }), _jsx("span", { css: devToolDescCss, children: "View as another player" }), _jsxs("div", { css: inlineRowCss, onClick: e => e.stopPropagation(), children: [players.map(pid => (_jsxs("button", { css: [playerBtnCss, pid === currentPlayer && playerBtnActiveCss], onClick: () => exec(() => g.changePlayer(pid), `Switched to P${pid}`), children: ["P", String(pid)] }, String(pid)))), _jsx("button", { css: [playerBtnCss, currentPlayer === undefined && playerBtnActiveCss], onClick: () => exec(() => g.changePlayer(), 'Spectator mode'), children: "Spect" })] })] }), _jsxs("button", { css: [devToolBtnCss, botActive && toolBtnActiveCss], style: { animationDelay: '120ms' }, onClick: () => {
-                                            const next = !botActive;
-                                            exec(() => g.bot(next), next ? 'Bots enabled' : 'Bots disabled');
-                                            setBotActive(next);
-                                        }, children: [_jsx("span", { css: devToolIconCss, children: '\u2699' }), _jsx("span", { css: devToolLabelCss, children: botActive ? 'Disable Bots' : 'Enable Bots' }), _jsx("span", { css: devToolDescCss, children: botActive ? 'Stop auto-play' : 'Auto-play all moves' }), botActive && _jsx("span", { css: activeIndicatorCss })] }), _jsxs("button", { css: devToolBtnCss, style: { animationDelay: '160ms' }, onClick: () => exec(() => g.tutorial(), 'Tutorial started'), children: [_jsx("span", { css: devToolIconCss, children: "?" }), _jsx("span", { css: devToolLabelCss, children: "Tutorial" }), _jsx("span", { css: devToolDescCss, children: "Start tutorial mode" })] }), children && (_jsxs(_Fragment, { children: [_jsx("div", { css: dividerCss }), children] })), _jsx("div", { css: dividerCss }), _jsxs("button", { css: devToolBtnCss, style: { animationDelay: '240ms' }, onClick: () => {
-                                            if (gameState)
-                                                copyToClipboard(JSON.stringify(gameState, null, 2), 'Game state');
-                                            else
-                                                doFlash('No game state');
-                                        }, children: [_jsx("span", { css: devToolIconCss, children: '\u2398' }), _jsx("span", { css: devToolLabelCss, children: "Copy State" }), _jsx("span", { css: devToolDescCss, children: "Copy game state to clipboard" })] }), _jsxs("button", { css: devToolBtnCss, style: { animationDelay: '280ms' }, onClick: () => {
-                                            const data = {};
-                                            for (let i = 0; i < localStorage.length; i++) {
-                                                const key = localStorage.key(i);
-                                                if (key)
-                                                    data[key] = localStorage.getItem(key) ?? '';
-                                            }
-                                            copyToClipboard(JSON.stringify(data, null, 2), 'localStorage');
-                                        }, children: [_jsx("span", { css: devToolIconCss, children: '\u29C9' }), _jsx("span", { css: devToolLabelCss, children: "Copy LocalStorage" }), _jsx("span", { css: devToolDescCss, children: "Copy localStorage to clipboard" })] })] }), flash && _jsx("div", { css: flashCss, children: flash }, flash)] })] }))] }), root);
+    return createPortal(_jsxs(_Fragment, { children: [_jsx("button", { css: fabCss, onClick: () => { setIsOpen(o => !o); if (isOpen)
+                    setActiveMenu(null); }, "data-open": isOpen, style: fabBottom ? { bottom: fabBottom } : undefined, children: _jsxs("svg", { css: logoCss, viewBox: "0 0 46 46", "data-open": isOpen, children: [_jsx("circle", { cx: "11", cy: "11", r: "7" }), _jsx("circle", { cx: "35", cy: "11", r: "7" }), _jsx("circle", { cx: "11", cy: "35", r: "7" }), _jsx("circle", { cx: "35", cy: "35", r: "7" })] }) }), isOpen && (_jsxs(_Fragment, { children: [_jsx("div", { css: backdropCss, onClick: () => { setIsOpen(false); setActiveMenu(null); } }), _jsxs("div", { css: hubContainerCss, style: fabBottom ? { bottom: `calc(${fabBottom} + 48px)` } : undefined, children: [_jsxs("div", { css: mainMenuCss, children: [_jsxs("div", { css: panelHeaderCss, children: [_jsxs("svg", { css: headerLogoCss, viewBox: "0 0 46 46", children: [_jsx("circle", { cx: "11", cy: "11", r: "7" }), _jsx("circle", { cx: "35", cy: "11", r: "7" }), _jsx("circle", { cx: "11", cy: "35", r: "7" }), _jsx("circle", { cx: "35", cy: "35", r: "7" })] }), _jsx("span", { css: panelTitleCss, children: "Dev Tools" }), _jsx("span", { css: panelBadgeCss, children: "GP" })] }), _jsx("div", { css: menuListCss, children: allMenuItems.map(item => (_jsxs("button", { css: [menuItemCss, activeMenu === item.id && menuItemActiveCss], onClick: () => handleMenuClick(item.id), onMouseEnter: () => handleMenuHover(item.id), children: [_jsx("span", { css: menuItemIconCss, children: item.icon }), _jsx("span", { css: menuItemLabelCss, children: item.label }), _jsx("span", { css: menuChevronCss, children: '\u25B8' })] }, item.id))) }), flash && _jsx("div", { css: flashCss, children: flash }, flash)] }), activeMenu && (_jsxs("div", { css: subPanelCss, children: [_jsx("div", { css: subPanelHeaderCss, children: _jsx("span", { css: subPanelTitleCss, children: allMenuItems.find(m => m.id === activeMenu)?.label }) }), _jsxs("div", { css: subPanelContentCss, children: [activeMenu === 'game' && (_jsxs(_Fragment, { children: [_jsxs("div", { css: devToolBtnCss, children: [_jsx("span", { css: devToolIconCss, children: '\u21BB' }), _jsx("span", { css: devToolLabelCss, children: "New Game" }), _jsx("span", { css: devToolDescCss, children: "Reset with N players" }), _jsxs("div", { css: inlineRowCss, onClick: e => e.stopPropagation(), children: [_jsx("button", { css: stepBtnCss, onClick: () => setNewGamePlayers(c => Math.max(1, c - 1)), children: "-" }), _jsx("input", { type: "number", min: 1, max: 10, value: newGamePlayers, onChange: e => setNewGamePlayers(Math.max(1, parseInt(e.target.value) || 2)), css: numberInputCss }), _jsx("button", { css: stepBtnCss, onClick: () => setNewGamePlayers(c => Math.min(10, c + 1)), children: "+" }), _jsx("button", { css: goBtnCss, onClick: () => exec(() => {
+                                                                            const hasOptions = gameOptions?.length && Object.values(options).some(Boolean);
+                                                                            g.new(hasOptions ? { players: newGamePlayers, ...options } : newGamePlayers);
+                                                                        }, `New game ${newGamePlayers}p`), children: "Go" })] }), gameOptions?.map(opt => (_jsxs("label", { css: toggleRowCss, onClick: e => e.stopPropagation(), children: [_jsx("input", { type: "checkbox", checked: options[opt.key] ?? false, onChange: e => setOptions(prev => ({ ...prev, [opt.key]: e.target.checked })), css: checkboxCss }), _jsx("span", { css: toggleLabelCss, children: opt.label })] }, opt.key)))] }), _jsxs("div", { css: devToolBtnCss, children: [_jsx("span", { css: devToolIconCss, children: '\u238C' }), _jsx("span", { css: devToolLabelCss, children: "Undo" }), _jsx("span", { css: devToolDescCss, children: "Revert N moves" }), _jsxs("div", { css: inlineRowCss, onClick: e => e.stopPropagation(), children: [_jsx("button", { css: stepBtnCss, onClick: () => setUndoCount(c => Math.max(1, c - 1)), children: "-" }), _jsx("input", { type: "number", min: 1, max: 999, value: undoCount, onChange: e => setUndoCount(Math.max(1, parseInt(e.target.value) || 1)), css: numberInputCss }), _jsx("button", { css: stepBtnCss, onClick: () => setUndoCount(c => c + 1), children: "+" }), _jsx("button", { css: goBtnCss, onClick: () => exec(() => g.undo(undoCount), `Undo ${undoCount} move${undoCount > 1 ? 's' : ''}`), children: "Go" })] })] }), _jsxs("div", { css: devToolBtnCss, children: [_jsx("span", { css: devToolIconCss, children: '\u2194' }), _jsx("span", { css: devToolLabelCss, children: "Switch Player" }), _jsx("span", { css: devToolDescCss, children: "View as another player" }), _jsxs("div", { css: inlineRowCss, onClick: e => e.stopPropagation(), children: [players.map(pid => (_jsxs("button", { css: [playerBtnCss, pid === currentPlayer && playerBtnActiveCss], onClick: () => exec(() => g.changePlayer(pid), `Switched to P${pid}`), children: ["P", String(pid)] }, String(pid)))), _jsx("button", { css: [playerBtnCss, currentPlayer === undefined && playerBtnActiveCss], onClick: () => exec(() => g.changePlayer(), 'Spectator mode'), children: "Spect" })] })] }), _jsxs("button", { css: [devToolBtnCss, botActive && toolBtnActiveCss], onClick: () => {
+                                                            const next = !botActive;
+                                                            exec(() => g.bot(next), next ? 'Bots enabled' : 'Bots disabled');
+                                                            setBotActive(next);
+                                                        }, children: [_jsx("span", { css: devToolIconCss, children: '\u2699' }), _jsx("span", { css: devToolLabelCss, children: botActive ? 'Disable Bots' : 'Enable Bots' }), _jsx("span", { css: devToolDescCss, children: botActive ? 'Stop auto-play' : 'Auto-play all moves' }), botActive && _jsx("span", { css: activeIndicatorCss })] }), _jsxs("button", { css: devToolBtnCss, onClick: () => exec(() => g.tutorial(), 'Tutorial started'), children: [_jsx("span", { css: devToolIconCss, children: "?" }), _jsx("span", { css: devToolLabelCss, children: "Tutorial" }), _jsx("span", { css: devToolDescCss, children: "Start tutorial mode" })] })] })), activeMenu === 'save' && (_jsxs(_Fragment, { children: [_jsxs("div", { css: devToolBtnCss, children: [_jsx("span", { css: devToolIconCss, children: '\u2B73' }), _jsx("span", { css: devToolLabelCss, children: "Save State" }), _jsx("span", { css: devToolDescCss, children: "Save current game state" }), _jsxs("div", { css: inlineRowCss, onClick: e => e.stopPropagation(), children: [_jsx("input", { type: "text", placeholder: "label (optional)", value: saveLabel, onChange: e => setSaveLabel(e.target.value), onKeyDown: e => { if (e.key === 'Enter')
+                                                                            handleSave(); }, css: textInputCss }), _jsx("button", { css: goBtnCss, onClick: handleSave, children: "Save" })] })] }), saveKeys.length > 0 && (_jsx("div", { css: savedListCss, children: saveKeys.map(key => (_jsxs("div", { css: savedEntryCss, children: [_jsx("span", { css: savedLabelCss, children: getSaveLabel(key, gameName) }), _jsxs("div", { css: savedActionsCss, children: [_jsx("button", { css: smallBtnCss, onClick: () => handleLoad(key), title: "Load", children: '\u25B6' }), _jsx("button", { css: smallBtnCss, onClick: () => handleDownloadSave(key), title: "Download", children: '\u2913' }), _jsx("button", { css: [smallBtnCss, smallBtnDangerCss], onClick: () => handleDelete(key), title: "Delete", children: '\u2715' })] })] }, key))) })), _jsx("div", { css: dividerCss }), _jsxs("button", { css: devToolBtnCss, onClick: () => fileInputRef.current?.click(), children: [_jsx("span", { css: devToolIconCss, children: '\u2912' }), _jsx("span", { css: devToolLabelCss, children: "Import File" }), _jsx("span", { css: devToolDescCss, children: "Load state from JSON file" })] }), _jsx("input", { ref: fileInputRef, type: "file", accept: ".json,application/json", onChange: handleImportFile, style: { display: 'none' } }), _jsxs("button", { css: devToolBtnCss, onClick: () => { setShowPasteModal(true); setPasteError(null); }, children: [_jsx("span", { css: devToolIconCss, children: '\u2398' }), _jsx("span", { css: devToolLabelCss, children: "Paste State" }), _jsx("span", { css: devToolDescCss, children: "Open editor to paste JSON" })] })] })), activeMenu === 'export' && (_jsxs(_Fragment, { children: [_jsxs("button", { css: devToolBtnCss, onClick: handleDownloadState, children: [_jsx("span", { css: devToolIconCss, children: '\u2913' }), _jsx("span", { css: devToolLabelCss, children: "Download State" }), _jsx("span", { css: devToolDescCss, children: "Save state as .json file" })] }), _jsxs("button", { css: devToolBtnCss, onClick: () => {
+                                                            const raw = localStorage.getItem(gameName);
+                                                            if (raw) {
+                                                                copyToClipboard(raw, `${gameName} state`);
+                                                            }
+                                                            else {
+                                                                doFlash(`No "${gameName}" key in localStorage`);
+                                                            }
+                                                        }, children: [_jsx("span", { css: devToolIconCss, children: '\u29C9' }), _jsx("span", { css: devToolLabelCss, children: "Copy LocalStorage" }), _jsxs("span", { css: devToolDescCss, children: ["Copy \"", gameName, "\" key to clipboard"] })] })] })), activeMenu === 'custom' && children] })] }))] })] })), showPasteModal && (_jsxs(_Fragment, { children: [_jsx("div", { css: modalBackdropCss, onClick: () => { setShowPasteModal(false); setPasteError(null); } }), _jsxs("div", { css: modalCss, children: [_jsxs("div", { css: modalHeaderCss, children: [_jsx("span", { css: modalTitleCss, children: "Paste Game State" }), _jsx("button", { css: modalCloseBtnCss, onClick: () => { setShowPasteModal(false); setPasteError(null); }, children: '\u2715' })] }), _jsxs("div", { css: modalBodyCss, children: [_jsx("textarea", { css: modalTextareaCss, placeholder: 'Paste your JSON game state here...', value: importText, onChange: e => handlePasteChange(e.target.value), spellCheck: false }), importText.trim() && (_jsxs("div", { css: jsonPreviewCss, children: [_jsx("div", { css: jsonPreviewLabelCss, children: "Preview" }), _jsx("pre", { css: jsonPreviewCodeCss, children: (() => {
+                                                    try {
+                                                        return highlightJson(JSON.stringify(JSON.parse(importText), null, 2));
+                                                    }
+                                                    catch {
+                                                        return _jsx("span", { css: jsonErrorTextCss, children: importText });
+                                                    }
+                                                })() })] })), pasteError && _jsx("div", { css: pasteErrorCss, children: pasteError })] }), _jsxs("div", { css: modalFooterCss, children: [_jsx("button", { css: modalCancelBtnCss, onClick: () => { setShowPasteModal(false); setPasteError(null); }, children: "Cancel" }), _jsx("button", { css: modalLoadBtnCss, onClick: handleImportPaste, children: "Load State" })] })] })] }))] }), root);
 };
 // ═══════════════════════════════════════
 //  Styles — GamePark branded
@@ -126,23 +338,26 @@ const logoCss = css `
     transform: rotate(90deg);
   }
 `;
-const backdropCss = css `
-  position: fixed;
-  inset: 0;
-  z-index: 899;
-  background: rgba(0, 0, 0, 0.3);
-  backdrop-filter: blur(2px);
-`;
 const slideUp = keyframes `
   from { opacity: 0; transform: translateY(8px) scale(0.97); }
   to { opacity: 1; transform: translateY(0) scale(1); }
 `;
-const panelCss = css `
+const slideRight = keyframes `
+  from { opacity: 0; transform: translateX(-8px) scale(0.97); }
+  to { opacity: 1; transform: translateX(0) scale(1); }
+`;
+const hubContainerCss = css `
   position: fixed;
   bottom: 64px;
   left: 16px;
   z-index: 900;
-  width: 320px;
+  display: flex;
+  align-items: flex-end;
+  gap: 6px;
+`;
+const mainMenuCss = css `
+  position: relative;
+  width: 200px;
   background: linear-gradient(170deg, #0f2035 0%, ${GP_SURFACE} 100%);
   border: 1px solid rgba(40, 184, 206, 0.25);
   border-radius: 12px;
@@ -150,9 +365,47 @@ const panelCss = css `
     0 12px 40px rgba(0, 0, 0, 0.5),
     0 0 0 1px rgba(0, 0, 0, 0.3),
     inset 0 1px 0 rgba(159, 226, 247, 0.05);
-  overflow: hidden;
   animation: ${slideUp} 0.2s ease-out;
   font-family: 'Mulish', sans-serif;
+  overflow: hidden;
+`;
+const subPanelCss = css `
+  width: 320px;
+  max-height: calc(100vh - 80px);
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(170deg, #0f2035 0%, ${GP_SURFACE} 100%);
+  border: 1px solid rgba(40, 184, 206, 0.25);
+  border-radius: 12px;
+  box-shadow:
+    0 12px 40px rgba(0, 0, 0, 0.5),
+    0 0 0 1px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(159, 226, 247, 0.05);
+  animation: ${slideRight} 0.15s ease-out;
+  font-family: 'Mulish', sans-serif;
+  overflow: hidden;
+`;
+const subPanelHeaderCss = css `
+  padding: 10px 16px;
+  border-bottom: 1px solid rgba(40, 184, 206, 0.15);
+  background: rgba(40, 184, 206, 0.04);
+  flex-shrink: 0;
+`;
+const subPanelTitleCss = css `
+  font-size: 12px;
+  font-weight: 800;
+  color: #5a8a98;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+`;
+const subPanelContentCss = css `
+  display: flex;
+  flex-direction: column;
+  padding: 6px;
+  gap: 2px;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
 `;
 const panelHeaderCss = css `
   display: flex;
@@ -185,16 +438,71 @@ const panelBadgeCss = css `
   color: ${GP_PRIMARY};
   letter-spacing: 0.1em;
 `;
-const toolReveal = keyframes `
-  from { opacity: 0; transform: translateX(-6px); }
-  to { opacity: 1; transform: translateX(0); }
-`;
-const toolListCss = css `
+const menuListCss = css `
   display: flex;
   flex-direction: column;
   padding: 6px;
   gap: 2px;
 `;
+const menuItemCss = css `
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s;
+  font-family: inherit;
+
+  &:hover {
+    background: rgba(40, 184, 206, 0.08);
+  }
+`;
+const menuItemActiveCss = css `
+  background: rgba(40, 184, 206, 0.12);
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 18px;
+    border-radius: 0 3px 3px 0;
+    background: ${GP_PRIMARY};
+  }
+`;
+const menuItemIconCss = css `
+  font-size: 15px;
+  color: ${GP_PRIMARY};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  background: rgba(40, 184, 206, 0.08);
+  flex-shrink: 0;
+`;
+const menuItemLabelCss = css `
+  font-size: 13px;
+  font-weight: 700;
+  color: #e0f0f4;
+  flex: 1;
+`;
+const menuChevronCss = css `
+  font-size: 10px;
+  color: #3a6070;
+`;
+const toolReveal = keyframes `
+  from { opacity: 0; transform: translateX(-6px); }
+  to { opacity: 1; transform: translateX(0); }
+`;
 export const devToolBtnCss = css `
   position: relative;
   display: grid;
@@ -324,6 +632,28 @@ const numberInputCss = css `
     margin: 0;
   }
 `;
+const textInputCss = css `
+  flex: 1;
+  height: 26px;
+  border-radius: 5px;
+  border: 1px solid rgba(40, 184, 206, 0.25);
+  background: rgba(0, 0, 0, 0.3);
+  color: #e0f0f4;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 0 8px;
+  font-family: inherit;
+
+  &::placeholder {
+    color: #3a6070;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: ${GP_PRIMARY};
+    box-shadow: 0 0 0 2px rgba(40, 184, 206, 0.15);
+  }
+`;
 const goBtnCss = css `
   height: 26px;
   padding: 0 12px;
@@ -339,6 +669,7 @@ const goBtnCss = css `
   margin-left: auto;
   font-family: inherit;
   transition: all 0.15s;
+  flex-shrink: 0;
 
   &:hover {
     background: rgba(40, 184, 206, 0.25);
@@ -369,21 +700,291 @@ const playerBtnActiveCss = css `
   border-color: ${GP_PRIMARY};
   color: ${GP_PRIMARY};
 `;
+// ── Save/Load styles ──
+const savedListCss = css `
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 0 8px;
+`;
+const savedEntryCss = css `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 8px;
+  border-radius: 5px;
+  background: rgba(40, 184, 206, 0.04);
+  border: 1px solid rgba(40, 184, 206, 0.08);
+`;
+const savedLabelCss = css `
+  font-size: 12px;
+  font-weight: 600;
+  color: #8ab8c8;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  margin-right: 8px;
+`;
+const savedActionsCss = css `
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+`;
+const smallBtnCss = css `
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  border: 1px solid rgba(40, 184, 206, 0.25);
+  background: rgba(40, 184, 206, 0.08);
+  color: ${GP_PRIMARY};
+  font-size: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+  transition: all 0.15s;
+
+  &:hover {
+    background: rgba(40, 184, 206, 0.2);
+    border-color: rgba(40, 184, 206, 0.4);
+  }
+`;
+const smallBtnDangerCss = css `
+  &:hover {
+    background: rgba(220, 60, 60, 0.2);
+    border-color: rgba(220, 60, 60, 0.4);
+    color: #dc3c3c;
+  }
+`;
+// ── Backdrop (click-outside to close) ──
+const backdropCss = css `
+  position: fixed;
+  inset: 0;
+  z-index: 899;
+`;
+// ── Paste Modal ──
+const modalBackdropCss = css `
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(2px);
+`;
+const modalFadeIn = keyframes `
+  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
+  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+`;
+const modalCss = css `
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1001;
+  width: min(700px, 90vw);
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(170deg, #0f2035 0%, ${GP_SURFACE} 100%);
+  border: 1px solid rgba(40, 184, 206, 0.3);
+  border-radius: 12px;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
+  font-family: 'Mulish', sans-serif;
+  animation: ${modalFadeIn} 0.2s ease-out;
+`;
+const modalHeaderCss = css `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 20px;
+  border-bottom: 1px solid rgba(40, 184, 206, 0.15);
+  background: rgba(40, 184, 206, 0.04);
+  border-radius: 12px 12px 0 0;
+`;
+const modalTitleCss = css `
+  font-size: 14px;
+  font-weight: 800;
+  color: #e0f0f4;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+`;
+const modalCloseBtnCss = css `
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 6px;
+  background: rgba(40, 184, 206, 0.08);
+  color: #5a8a98;
+  font-size: 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+
+  &:hover {
+    background: rgba(220, 60, 60, 0.2);
+    color: #dc3c3c;
+  }
+`;
+const modalBodyCss = css `
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+`;
+const modalTextareaCss = css `
+  width: 100%;
+  min-height: 100px;
+  border-radius: 8px;
+  border: 1px solid rgba(40, 184, 206, 0.25);
+  background: rgba(0, 0, 0, 0.4);
+  color: #e0f0f4;
+  font-size: 13px;
+  font-weight: 500;
+  padding: 12px;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  resize: vertical;
+  line-height: 1.5;
+
+  &::placeholder {
+    color: #3a6070;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: ${GP_PRIMARY};
+    box-shadow: 0 0 0 2px rgba(40, 184, 206, 0.15);
+  }
+`;
+const jsonPreviewCss = css `
+  border-radius: 8px;
+  border: 1px solid rgba(40, 184, 206, 0.15);
+  background: rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+`;
+const jsonPreviewLabelCss = css `
+  font-size: 10px;
+  font-weight: 800;
+  color: #3a6070;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  padding: 6px 12px;
+  border-bottom: 1px solid rgba(40, 184, 206, 0.08);
+`;
+const jsonPreviewCodeCss = css `
+  padding: 12px;
+  margin: 0;
+  font-size: 12px;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  line-height: 1.6;
+  color: #8ab8c8;
+  max-height: 300px;
+  overflow-y: auto;
+  white-space: pre;
+  tab-size: 2;
+`;
+const pasteErrorCss = css `
+  font-size: 12px;
+  font-weight: 700;
+  color: #dc3c3c;
+  padding: 6px 10px;
+  border-radius: 6px;
+  background: rgba(220, 60, 60, 0.1);
+  border: 1px solid rgba(220, 60, 60, 0.2);
+`;
+const modalFooterCss = css `
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 20px;
+  border-top: 1px solid rgba(40, 184, 206, 0.15);
+`;
+const modalCancelBtnCss = css `
+  height: 32px;
+  padding: 0 16px;
+  border-radius: 6px;
+  border: 1px solid rgba(40, 184, 206, 0.25);
+  background: transparent;
+  color: #5a8a98;
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  font-family: inherit;
+  transition: all 0.15s;
+
+  &:hover {
+    background: rgba(40, 184, 206, 0.08);
+    color: #e0f0f4;
+  }
+`;
+const modalLoadBtnCss = css `
+  height: 32px;
+  padding: 0 20px;
+  border-radius: 6px;
+  border: 1px solid rgba(40, 184, 206, 0.4);
+  background: rgba(40, 184, 206, 0.2);
+  color: ${GP_PRIMARY};
+  font-size: 13px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  font-family: inherit;
+  transition: all 0.15s;
+
+  &:hover {
+    background: rgba(40, 184, 206, 0.35);
+    border-color: ${GP_PRIMARY};
+  }
+`;
+// ── JSON syntax colors ──
+const jsonKeyCss = css `
+  color: ${GP_ACCENT};
+`;
+const jsonStringCss = css `
+  color: #8bbb6a;
+`;
+const jsonBoolCss = css `
+  color: #d4872a;
+`;
+const jsonNumCss = css `
+  color: #c4a0e8;
+`;
+const jsonPunctCss = css `
+  color: #5a6a78;
+`;
+const jsonErrorTextCss = css `
+  color: #dc3c3c;
+`;
 // ── Flash ──
 const flashFade = keyframes `
-  0% { opacity: 0; transform: translateY(4px); }
+  0% { opacity: 0; transform: translateY(6px); }
   15% { opacity: 1; transform: translateY(0); }
   85% { opacity: 1; transform: translateY(0); }
-  100% { opacity: 0; transform: translateY(-4px); }
+  100% { opacity: 0; transform: translateY(-6px); }
 `;
 const flashCss = css `
-  padding: 8px 16px;
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  margin-bottom: 8px;
+  padding: 6px 14px;
   font-size: 12px;
   font-weight: 700;
   color: ${GP_PRIMARY};
   text-align: center;
-  border-top: 1px solid rgba(40, 184, 206, 0.1);
-  background: rgba(40, 184, 206, 0.04);
+  background: linear-gradient(145deg, ${GP_SURFACE}, ${GP_DARK});
+  border: 1px solid rgba(40, 184, 206, 0.3);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  white-space: nowrap;
+  pointer-events: none;
   animation: ${flashFade} 1.5s ease-out forwards;
 `;
 // ── Game Options toggles ──
@@ -414,7 +1015,7 @@ const checkboxCss = css `
   }
 
   &:checked::after {
-    content: '✓';
+    content: '\u2713';
     position: absolute;
     top: 50%;
     left: 50%;