@gamepark/react-game 7.6.1 → 7.6.3

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

@@ -1,64 +1,13 @@
 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';
-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 })] }));
+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';
 // ═══════════════════════════════════════
 //  Save/Load helpers
 // ═══════════════════════════════════════
@@ -146,19 +95,15 @@ export const DevToolsHub = ({ children, fabBottom, gameOptions }) => {
             return;
         }
         try {
-            const state = JSON.parse(raw);
-            if (g) {
-                g.new(state);
-                doFlash(`Loaded: ${getSaveLabel(key, gameName)}`);
-            }
-            else {
-                doFlash('game helper not available');
-            }
+            JSON.parse(raw); // validate JSON
+            localStorage.setItem(gameName, raw);
+            doFlash(`Loaded: ${getSaveLabel(key, gameName)}`);
+            window.location.reload();
         }
         catch {
             doFlash('Invalid save data');
         }
-    }, [g, gameName, doFlash]);
+    }, [gameName, doFlash]);
     const handleDownloadSave = useCallback((key) => {
         const raw = localStorage.getItem(key);
         if (!raw) {
@@ -187,14 +132,11 @@ export const DevToolsHub = ({ children, fabBottom, gameOptions }) => {
         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');
-                }
+                const raw = reader.result;
+                JSON.parse(raw); // validate JSON
+                localStorage.setItem(gameName, raw);
+                doFlash(`Imported: ${file.name}`);
+                window.location.reload();
             }
             catch {
                 doFlash('Invalid JSON file');
@@ -202,33 +144,28 @@ export const DevToolsHub = ({ children, fabBottom, gameOptions }) => {
         };
         reader.readAsText(file);
         e.target.value = '';
-    }, [g, doFlash]);
+    }, [gameName, 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');
-            }
+            JSON.parse(importText); // validate JSON
+            localStorage.setItem(gameName, importText);
+            setImportText('');
+            setPasteError(null);
+            setShowPasteModal(false);
+            doFlash('State imported!');
+            window.location.reload();
         }
         catch {
             setPasteError('Invalid JSON — check syntax');
         }
-    }, [g, importText, doFlash]);
+    }, [gameName, 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));
@@ -276,7 +213,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) {
-                                                                copyToClipboard(raw, `${gameName} state`);
+                                                                void copyToClipboard(raw, `${gameName} state`);
                                                             }
                                                             else {
                                                                 doFlash(`No "${gameName}" key in localStorage`);
@@ -290,747 +227,4 @@ 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