@gamepark/react-game 7.6.4 → 7.6.6

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

@@ -1,13 +1,64 @@
 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, useContext, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { usePlayerId, usePlayerIds } from '../../../hooks/usePlayerId';
 import { gameContext } from '../../GameProvider/GameContext';
-import { highlightJson } from './JsonHighlighter';
-import { fabCss, logoCss, hubContainerCss, mainMenuCss, subPanelCss, subPanelHeaderCss, subPanelTitleCss, subPanelContentCss, panelHeaderCss, headerLogoCss, panelTitleCss, panelBadgeCss, menuListCss, menuItemCss, menuItemActiveCss, menuItemIconCss, menuItemLabelCss, menuChevronCss, devToolBtnCss, devToolIconCss, devToolLabelCss, devToolDescCss, toolBtnActiveCss, activeIndicatorCss, dividerCss, inlineRowCss, stepBtnCss, numberInputCss, textInputCss, goBtnCss, playerBtnCss, playerBtnActiveCss, savedListCss, savedEntryCss, savedLabelCss, savedActionsCss, smallBtnCss, smallBtnDangerCss, backdropCss, flashCss, modalBackdropCss, modalCss, modalHeaderCss, modalTitleCss, modalCloseBtnCss, modalBodyCss, modalTextareaCss, jsonPreviewCss, jsonPreviewLabelCss, jsonPreviewCodeCss, jsonErrorTextCss, pasteErrorCss, modalFooterCss, modalCancelBtnCss, modalLoadBtnCss, toggleRowCss, checkboxCss, toggleLabelCss } from './DevToolsStyles';
-export { DevToolEntry } from './DevToolEntry';
-export { devToolBtnCss, devToolIconCss, devToolLabelCss, devToolDescCss } from './DevToolsStyles';
+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`.
+ *
+ * @example
+ * <DevToolsHub>
+ *   <DevToolEntry icon="✦" label="Card Viewer" desc="Browse agents" onClick={() => setShowCards(true)} />
+ * </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
 // ═══════════════════════════════════════
@@ -95,15 +146,19 @@ export const DevToolsHub = ({ children, fabBottom, gameOptions }) => {
             return;
         }
         try {
-            JSON.parse(raw); // validate JSON
-            localStorage.setItem(gameName, raw);
-            doFlash(`Loaded: ${getSaveLabel(key, gameName)}`);
-            window.location.reload();
+            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');
         }
-    }, [gameName, doFlash]);
+    }, [g, gameName, doFlash]);
     const handleDownloadSave = useCallback((key) => {
         const raw = localStorage.getItem(key);
         if (!raw) {
@@ -132,11 +187,14 @@ export const DevToolsHub = ({ children, fabBottom, gameOptions }) => {
         const reader = new FileReader();
         reader.onload = () => {
             try {
-                const raw = reader.result;
-                JSON.parse(raw); // validate JSON
-                localStorage.setItem(gameName, raw);
-                doFlash(`Imported: ${file.name}`);
-                window.location.reload();
+                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');
@@ -144,28 +202,33 @@ export const DevToolsHub = ({ children, fabBottom, gameOptions }) => {
         };
         reader.readAsText(file);
         e.target.value = '';
-    }, [gameName, doFlash]);
+    }, [g, doFlash]);
     const handleImportPaste = useCallback(() => {
         if (!importText.trim()) {
             setPasteError('Paste a JSON state first');
             return;
         }
         try {
-            JSON.parse(importText); // validate JSON
-            localStorage.setItem(gameName, importText);
-            setImportText('');
-            setPasteError(null);
-            setShowPasteModal(false);
-            doFlash('State imported!');
-            window.location.reload();
+            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');
         }
-    }, [gameName, importText, doFlash]);
+    }, [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));
@@ -213,7 +276,7 @@ export const DevToolsHub = ({ children, fabBottom, gameOptions }) => {
                                                                             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) {
-                                                                void copyToClipboard(raw, `${gameName} state`);
+                                                                copyToClipboard(raw, `${gameName} state`);
                                                             }
                                                             else {
                                                                 doFlash(`No "${gameName}" key in localStorage`);
@@ -227,4 +290,747 @@ export const DevToolsHub = ({ children, fabBottom, gameOptions }) => {
                                                     }
                                                 })() })] })), 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
+// ═══════════════════════════════════════
+const fabPulse = keyframes `
+  0%, 100% { box-shadow: 0 0 0 0 rgba(40, 184, 206, 0.25); }
+  50% { box-shadow: 0 0 0 5px rgba(40, 184, 206, 0); }
+`;
+const fabCss = css `
+  position: fixed;
+  bottom: 16px;
+  left: 16px;
+  z-index: 900;
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  border: 1px solid rgba(40, 184, 206, 0.4);
+  background: linear-gradient(145deg, ${GP_SURFACE}, ${GP_DARK});
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  animation: ${fabPulse} 3s ease-in-out infinite;
+  transition: all 0.2s;
+
+  &:hover {
+    border-color: rgba(40, 184, 206, 0.7);
+    animation: none;
+  }
+
+  &[data-open="true"] {
+    animation: none;
+    background: ${GP_PRIMARY};
+    border-color: ${GP_PRIMARY};
+  }
+`;
+const logoCss = css `
+  width: 22px;
+  height: 22px;
+  fill: ${GP_PRIMARY};
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  &[data-open="true"] {
+    fill: ${GP_DARK};
+    transform: rotate(90deg);
+  }
+`;
+const slideUp = keyframes `
+  from { opacity: 0; transform: translateY(8px) scale(0.97); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+`;
+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;
+  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;
+  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: ${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;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(40, 184, 206, 0.15);
+  background: rgba(40, 184, 206, 0.04);
+`;
+const headerLogoCss = css `
+  width: 18px;
+  height: 18px;
+  fill: ${GP_ACCENT};
+  flex-shrink: 0;
+`;
+const panelTitleCss = css `
+  font-size: 14px;
+  font-weight: 800;
+  color: #e0f0f4;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  flex: 1;
+`;
+const panelBadgeCss = css `
+  font-size: 9px;
+  font-weight: 800;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: rgba(40, 184, 206, 0.15);
+  color: ${GP_PRIMARY};
+  letter-spacing: 0.1em;
+`;
+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;
+  grid-template-columns: 28px 1fr;
+  grid-template-rows: auto auto;
+  align-items: center;
+  gap: 0 10px;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s;
+  animation: ${toolReveal} 0.25s ease-out backwards;
+  font-family: inherit;
+
+  &:hover {
+    background: rgba(40, 184, 206, 0.08);
+  }
+  &:active {
+    background: rgba(40, 184, 206, 0.14);
+  }
+`;
+const toolBtnActiveCss = css `
+  background: rgba(40, 184, 206, 0.1);
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 8px;
+    bottom: 8px;
+    width: 3px;
+    border-radius: 0 3px 3px 0;
+    background: ${GP_PRIMARY};
+  }
+`;
+export const devToolIconCss = css `
+  grid-row: 1 / -1;
+  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);
+`;
+export const devToolLabelCss = css `
+  font-size: 14px;
+  font-weight: 700;
+  color: #e0f0f4;
+  line-height: 1.2;
+`;
+export const devToolDescCss = css `
+  font-size: 12px;
+  color: #5a8a98;
+  line-height: 1.2;
+`;
+const activeIndicatorCss = css `
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: ${GP_PRIMARY};
+  box-shadow: 0 0 6px rgba(40, 184, 206, 0.5);
+`;
+const dividerCss = css `
+  height: 1px;
+  margin: 4px 12px;
+  background: rgba(40, 184, 206, 0.1);
+`;
+// ── Inline controls ──
+const inlineRowCss = css `
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 6px;
+`;
+const stepBtnCss = css `
+  width: 26px;
+  height: 26px;
+  border-radius: 5px;
+  border: 1px solid rgba(40, 184, 206, 0.25);
+  background: rgba(40, 184, 206, 0.06);
+  color: ${GP_PRIMARY};
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+  transition: all 0.15s;
+
+  &:hover {
+    background: rgba(40, 184, 206, 0.14);
+    border-color: rgba(40, 184, 206, 0.4);
+  }
+`;
+const numberInputCss = css `
+  width: 48px;
+  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: 13px;
+  font-weight: 700;
+  text-align: center;
+  font-family: inherit;
+  font-variant-numeric: tabular-nums;
+
+  &:focus {
+    outline: none;
+    border-color: ${GP_PRIMARY};
+    box-shadow: 0 0 0 2px rgba(40, 184, 206, 0.15);
+  }
+
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    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;
+  border-radius: 5px;
+  border: 1px solid rgba(40, 184, 206, 0.35);
+  background: rgba(40, 184, 206, 0.15);
+  color: ${GP_PRIMARY};
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  margin-left: auto;
+  font-family: inherit;
+  transition: all 0.15s;
+  flex-shrink: 0;
+
+  &:hover {
+    background: rgba(40, 184, 206, 0.25);
+    border-color: rgba(40, 184, 206, 0.5);
+  }
+`;
+const playerBtnCss = css `
+  height: 26px;
+  padding: 0 10px;
+  border-radius: 5px;
+  border: 1px solid rgba(40, 184, 206, 0.25);
+  background: rgba(40, 184, 206, 0.06);
+  color: #5a8a98;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+  font-family: inherit;
+  transition: all 0.15s;
+
+  &:hover {
+    background: rgba(40, 184, 206, 0.14);
+    border-color: rgba(40, 184, 206, 0.4);
+    color: #e0f0f4;
+  }
+`;
+const playerBtnActiveCss = css `
+  background: rgba(40, 184, 206, 0.2);
+  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(6px); }
+  15% { opacity: 1; transform: translateY(0); }
+  85% { opacity: 1; transform: translateY(0); }
+  100% { opacity: 0; transform: translateY(-6px); }
+`;
+const flashCss = css `
+  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;
+  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 ──
+const toggleRowCss = css `
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+  padding: 4px 0;
+  cursor: pointer;
+`;
+const checkboxCss = css `
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1px solid rgba(40, 184, 206, 0.35);
+  background: rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  flex-shrink: 0;
+  position: relative;
+  transition: all 0.15s;
+
+  &:checked {
+    background: rgba(40, 184, 206, 0.2);
+    border-color: ${GP_PRIMARY};
+  }
+
+  &:checked::after {
+    content: '\u2713';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 11px;
+    color: ${GP_PRIMARY};
+    font-weight: 700;
+  }
+
+  &:hover {
+    border-color: rgba(40, 184, 206, 0.5);
+  }
+`;
+const toggleLabelCss = css `
+  font-size: 12px;
+  font-weight: 600;
+  color: #5a8a98;
+`;
 //# sourceMappingURL=DevToolsHub.js.map