dirk-cfx-react 1.1.56 → 1.1.62

package/dist/index.d.cts

@@ -1,6 +1,6 @@
-export { AdminPageTitle, AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, BlipColorSelectProps, BlipIconSelect, BlipIconSelectProps, BorderedIcon, BorderedIconProps, ButtonProps, ConfirmModal, ConfirmModalProps, Counter, FiveMControls, FiveMKeyBindInput, FloatingParticles, FloatingParticlesProps, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, LevelBanner, LevelPanel, Modal, ModalContext, ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavItem, NavigationContext, NavigationProvider, NavigationStore, ParticleState, ProgressProps, Prompt, PromptButton, PromptModal, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, SelectItem, SelectItemProps, SettingsPanel, SettingsPanelProps, StoreModalProps, Title, TitleProps, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.cjs';
+export { AdminPageTitle, AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, BlipColorSelectProps, BlipIconSelect, BlipIconSelectProps, BorderedIcon, BorderedIconProps, ButtonProps, ConfigPanel, ConfigPanelProps, ConfirmModal, ConfirmModalProps, Counter, FiveMControls, FiveMKeyBindInput, FloatingParticles, FloatingParticlesProps, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, LevelBanner, LevelPanel, Modal, ModalContext, ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavItem, NavigationContext, NavigationProvider, NavigationStore, ParticleState, ProgressProps, Prompt, PromptButton, PromptModal, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, SelectItem, SelectItemProps, StoreModalProps, TestBed, TestBedItem, TestBedProps, Title, TitleProps, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.cjs';
 export { INPUT_MAPPER_KEYS_BY_PRIMARY, INPUT_MAPPER_PRIMARY_OPTIONS, InitialFetch, InternalEvent, InventoryItem, InventoryItems, SettingsState, SkillSettings, UploadImageProps, colorWithAlpha, copyToClipboard, createSkill, extractDefaults, fetchLuaTable, fetchNui, gameToMap, getImageShape, getItemImageUrl, initialFetches, internalEvent, isEnvBrowser, isProfanity, latPr100, locale, localeStore, mapCenter, mapToGame, noop, numberToRoman, openLink, registerInitialFetch, registerInitialLuaTableFetch, runFetches, splitFAString, updatePresignedURL, uploadImage, useAutoFetcher, useItems, useItemsList, useProfanityStore, useSettings } from './utils/index.cjs';
-export { FormProvider, FormState, NuiHandlerSignature, NuiMessageData, ScriptSettingsHistoryChange, ScriptSettingsHistoryEntry, ScriptSettingsHistoryRequest, ScriptSettingsHistoryResponse, ScriptSettingsInstance, TornEdgeSVGFilter, ValidationRules, ValidatorFn, createFormStore, createScriptSettings, getScriptSettingsInstance, useAudio, useForm, useFormActions, useFormError, useFormErrors, useFormField, useFormFields, useNuiEvent, useTornEdges } from './hooks/index.cjs';
+export { FormProvider, FormState, NuiHandlerSignature, NuiMessageData, ScriptConfigHistoryChange, ScriptConfigHistoryEntry, ScriptConfigHistoryRequest, ScriptConfigHistoryResponse, ScriptConfigInstance, TornEdgeSVGFilter, ValidationRules, ValidatorFn, createFormStore, createScriptConfig, getScriptConfigInstance, useAudio, useForm, useFormActions, useFormError, useFormErrors, useFormField, useFormFields, useNuiEvent, useTornEdges } from './hooks/index.cjs';
 export { DirkProvider, DirkProviderProps } from './providers/index.cjs';
 import 'react/jsx-runtime';
 import '@mantine/core';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-export { AdminPageTitle, AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, BlipColorSelectProps, BlipIconSelect, BlipIconSelectProps, BorderedIcon, BorderedIconProps, ButtonProps, ConfirmModal, ConfirmModalProps, Counter, FiveMControls, FiveMKeyBindInput, FloatingParticles, FloatingParticlesProps, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, LevelBanner, LevelPanel, Modal, ModalContext, ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavItem, NavigationContext, NavigationProvider, NavigationStore, ParticleState, ProgressProps, Prompt, PromptButton, PromptModal, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, SelectItem, SelectItemProps, SettingsPanel, SettingsPanelProps, StoreModalProps, Title, TitleProps, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.js';
+export { AdminPageTitle, AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, BlipColorSelectProps, BlipIconSelect, BlipIconSelectProps, BorderedIcon, BorderedIconProps, ButtonProps, ConfigPanel, ConfigPanelProps, ConfirmModal, ConfirmModalProps, Counter, FiveMControls, FiveMKeyBindInput, FloatingParticles, FloatingParticlesProps, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, LevelBanner, LevelPanel, Modal, ModalContext, ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavItem, NavigationContext, NavigationProvider, NavigationStore, ParticleState, ProgressProps, Prompt, PromptButton, PromptModal, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, SelectItem, SelectItemProps, StoreModalProps, TestBed, TestBedItem, TestBedProps, Title, TitleProps, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.js';
 export { INPUT_MAPPER_KEYS_BY_PRIMARY, INPUT_MAPPER_PRIMARY_OPTIONS, InitialFetch, InternalEvent, InventoryItem, InventoryItems, SettingsState, SkillSettings, UploadImageProps, colorWithAlpha, copyToClipboard, createSkill, extractDefaults, fetchLuaTable, fetchNui, gameToMap, getImageShape, getItemImageUrl, initialFetches, internalEvent, isEnvBrowser, isProfanity, latPr100, locale, localeStore, mapCenter, mapToGame, noop, numberToRoman, openLink, registerInitialFetch, registerInitialLuaTableFetch, runFetches, splitFAString, updatePresignedURL, uploadImage, useAutoFetcher, useItems, useItemsList, useProfanityStore, useSettings } from './utils/index.js';
-export { FormProvider, FormState, NuiHandlerSignature, NuiMessageData, ScriptSettingsHistoryChange, ScriptSettingsHistoryEntry, ScriptSettingsHistoryRequest, ScriptSettingsHistoryResponse, ScriptSettingsInstance, TornEdgeSVGFilter, ValidationRules, ValidatorFn, createFormStore, createScriptSettings, getScriptSettingsInstance, useAudio, useForm, useFormActions, useFormError, useFormErrors, useFormField, useFormFields, useNuiEvent, useTornEdges } from './hooks/index.js';
+export { FormProvider, FormState, NuiHandlerSignature, NuiMessageData, ScriptConfigHistoryChange, ScriptConfigHistoryEntry, ScriptConfigHistoryRequest, ScriptConfigHistoryResponse, ScriptConfigInstance, TornEdgeSVGFilter, ValidationRules, ValidatorFn, createFormStore, createScriptConfig, getScriptConfigInstance, useAudio, useForm, useFormActions, useFormError, useFormErrors, useFormField, useFormFields, useNuiEvent, useTornEdges } from './hooks/index.js';
 export { DirkProvider, DirkProviderProps } from './providers/index.js';
 import 'react/jsx-runtime';
 import '@mantine/core';

package/dist/index.js

@@ -1,13 +1,13 @@
-import { Flex, Text, Image as Image$1, createTheme, Box, Stack, Title as Title$1, Code, TextInput, Select, useMantineTheme, alpha, Progress, RingProgress, Portal, Button, Loader, MantineProvider, BackgroundImage, Group, JsonInput } from '@mantine/core';
+import { Flex, Text, Image as Image$1, createTheme, Box, Stack, Title as Title$1, Code, TextInput, Select, useMantineTheme, alpha, Progress, RingProgress, Portal, Button, Loader, ActionIcon, MantineProvider, BackgroundImage, Group, JsonInput } from '@mantine/core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React4, { createContext, useContext, useEffect, useRef, useState, useMemo, useLayoutEffect } from 'react';
+import React5, { createContext, useContext, useEffect, useRef, useState, useMemo, useLayoutEffect } from 'react';
 import { create, useStore, createStore } from 'zustand';
 import axios from 'axios';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { motion, AnimatePresence, useMotionValue } from 'framer-motion';
 import clickSoundUrl from './click_sound-PNCRRTM4.mp3';
 import hoverSoundUrl from './hover_sound-NBUA222C.mp3';
-import { X, AlertTriangle, Trash2, Check, Undo2, Redo2, Save, History, XCircle, Code2, RotateCcw, Search, Filter, User, ChevronDown } from 'lucide-react';
+import { X, AlertTriangle, Trash2, Check, FlaskConical, ChevronUp, ChevronDown, ArrowLeft, Undo2, Redo2, Save, History, XCircle, Code2, RotateCcw, Search, Filter, User } from 'lucide-react';
 import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query';
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
@@ -1326,10 +1326,8 @@ async function runFetches() {
 var useAutoFetcher = () => {
   useEffect(() => {
     if (isEnvBrowser()) return;
-    const run = async () => {
-      await runFetches();
-    };
-    run();
+    runFetches().catch(() => {
+    });
   }, []);
 };
 var fetchLuaTable = (tableName, mockData) => {
@@ -1374,6 +1372,7 @@ var localeStore = create((set, get) => {
 var locale = localeStore.getState().locale;
 registerInitialFetch("GET_LOCALES", void 0).then((data) => {
   localeStore.setState({ locales: data });
+}).catch(() => {
 });
 
 // src/utils/map.ts
@@ -1891,6 +1890,7 @@ registerInitialFetch("FETCH_ALL_ITEMS", null, {
 }).then((fetchedItems) => {
   if (!fetchedItems) return;
   useItems.setState(fetchedItems);
+}).catch(() => {
 });
 
 // src/utils/inputMapper.ts
@@ -3146,6 +3146,7 @@ function Modal({
   children
 }) {
   const theme2 = useMantineTheme();
+  const pointerDownOnOverlay = useRef(false);
   return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
     motion.div,
     {
@@ -3161,7 +3162,14 @@ function Modal({
         justifyContent: "center",
         background: "rgba(0,0,0,0.65)"
       },
-      onClick: clickOutside ? onClose : void 0,
+      onPointerDown: (e) => {
+        pointerDownOnOverlay.current = e.target === e.currentTarget;
+      },
+      onClick: (e) => {
+        if (clickOutside && e.target === e.currentTarget && pointerDownOnOverlay.current) {
+          onClose();
+        }
+      },
       children: /* @__PURE__ */ jsxs(
         motion.div,
         {
@@ -3169,7 +3177,6 @@ function Modal({
           animate: { opacity: 1, scale: 1, y: 0 },
           exit: { opacity: 0, scale: 0.96, y: 8 },
           transition: { duration: 0.18, ease: "easeOut" },
-          onClick: (e) => e.stopPropagation(),
           style: {
             background: alpha(theme2.colors.dark[9], 0.98),
             border: `0.1vh solid ${theme2.colors.dark[7]}`,
@@ -3266,7 +3273,7 @@ function Modal({
                 children: description2
               }
             ) }),
-            children
+            /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }, children })
           ]
         }
       )
@@ -3948,42 +3955,42 @@ var useNuiEvent = (action, handler) => {
   }, [action]);
 };
 var _instance = null;
-function getScriptSettingsInstance() {
-  if (!_instance) throw new Error("[dirk-cfx-react] createScriptSettings must be called before using SettingsPanel");
+function getScriptConfigInstance() {
+  if (!_instance) throw new Error("[dirk-cfx-react] createScriptConfig must be called before using ConfigPanel");
   return _instance;
 }
-function createScriptSettings(defaultValue) {
+function createScriptConfig(defaultValue) {
   const store = create(() => defaultValue);
   let clientVersion = 0;
-  const useScriptSettingHooks = () => {
-    useNuiEvent("UPDATE_SCRIPT_SETTINGS", (data) => {
+  const useScriptConfigHooks = () => {
+    useNuiEvent("UPDATE_SCRIPT_CONFIG", (data) => {
       if (!data) return;
       if (typeof data.clientVersion === "number") {
         clientVersion = data.clientVersion;
       }
-      if (data.settings && typeof data.settings === "object") {
-        store.setState((prev) => ({ ...prev, ...data.settings }));
+      if (data.config && typeof data.config === "object") {
+        store.setState((prev) => ({ ...prev, ...data.config }));
       }
     });
   };
-  const fetchScriptSettings = async () => {
+  const fetchScriptConfig = async () => {
     try {
-      const response = await fetchNui("GET_FULL_SCRIPT_SETTINGS");
-      if (response?.success && response.data?.settings) {
-        store.setState(() => response.data.settings);
+      const response = await fetchNui("GET_FULL_SCRIPT_CONFIG");
+      if (response?.success && response.data?.config) {
+        store.setState(() => response.data.config);
         if (typeof response.data.clientVersion === "number") {
           clientVersion = response.data.clientVersion;
         }
-        return response.data.settings;
+        return response.data.config;
       }
     } catch {
     }
     return null;
   };
-  const updateScriptSettings = async (newSettings) => {
-    store.setState((prev) => ({ ...prev, ...newSettings }));
-    const response = await fetchNui("UPDATE_SCRIPT_SETTINGS", {
-      data: newSettings,
+  const updateScriptConfig = async (newConfig) => {
+    store.setState((prev) => ({ ...prev, ...newConfig }));
+    const response = await fetchNui("UPDATE_SCRIPT_CONFIG", {
+      data: newConfig,
       expectedVersion: clientVersion
     });
     if (response?.meta?.client_version != null) {
@@ -3994,18 +4001,29 @@ function createScriptSettings(defaultValue) {
     }
     return response;
   };
-  const getScriptSettingsHistory = async (params = {}) => {
-    return fetchNui("GET_SCRIPT_SETTINGS_HISTORY", params);
+  const getScriptConfigHistory = async (params = {}) => {
+    return fetchNui("GET_SCRIPT_CONFIG_HISTORY", params);
+  };
+  const resetConfig = async () => {
+    const response = await fetchNui("RESET_SCRIPT_CONFIG");
+    if (response?.success) {
+      const fresh = await fetchScriptConfig();
+      if (fresh) {
+        store.setState(() => fresh);
+      }
+    }
+    return response;
   };
   _instance = {
     store,
-    updateSettings: updateScriptSettings,
-    getHistory: getScriptSettingsHistory,
-    fetchSettings: fetchScriptSettings
+    updateConfig: updateScriptConfig,
+    resetConfig,
+    getHistory: getScriptConfigHistory,
+    fetchConfig: fetchScriptConfig
   };
-  return { store, updateScriptSettings, getScriptSettingsHistory, useScriptSettingHooks, fetchScriptSettings };
+  return { store, updateScriptConfig, resetConfig, getScriptConfigHistory, useScriptConfigHooks, fetchScriptConfig };
 }
-var settingsPanelQueryClient = new QueryClient({
+var configPanelQueryClient = new QueryClient({
   defaultOptions: { queries: { staleTime: 3e4, gcTime: 5 * 6e4 } }
 });
 function NavItemButton({
@@ -4049,7 +4067,7 @@ function NavItemButton({
     }
   );
 }
-function SettingsJsonModal({
+function ConfigJsonModal({
   onClose,
   schema
 }) {
@@ -4086,7 +4104,7 @@ function SettingsJsonModal({
       setError(e.message);
     }
   };
-  return /* @__PURE__ */ jsxs(Modal, { title: "Settings JSON", icon: Code2, iconColor: color, onClose, width: "60vh", maxHeight: "80vh", zIndex: 200, children: [
+  return /* @__PURE__ */ jsxs(Modal, { title: "Config JSON", icon: Code2, iconColor: color, onClose, width: "60vh", maxHeight: "80vh", zIndex: 200, children: [
     /* @__PURE__ */ jsxs(Box, { flex: 1, p: "0.8vh", style: { overflowY: "auto" }, children: [
       /* @__PURE__ */ jsx(
         JsonInput,
@@ -4228,10 +4246,10 @@ function HistoryTableHeader() {
     /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", c: "rgba(255,255,255,0.45)", children: "Version" })
   ] });
 }
-function SettingsHistoryModal({
+function ConfigHistoryModal({
   onClose
 }) {
-  const { getHistory } = getScriptSettingsInstance();
+  const { getHistory } = getScriptConfigInstance();
   const theme2 = useMantineTheme();
   const color = theme2.colors[theme2.primaryColor][5];
   const [queryInput, setQueryInput] = useState("");
@@ -4243,7 +4261,7 @@ function SettingsHistoryModal({
   const [expandedKey, setExpandedKey] = useState(null);
   const filters = useMemo(() => ({ query, path, admin }), [query, path, admin]);
   const historyQuery = useInfiniteQuery({
-    queryKey: ["scriptSettingsHistory", filters],
+    queryKey: ["scriptConfigHistory", filters],
     initialPageParam: 0,
     queryFn: async ({ pageParam }) => {
       const response = await getHistory({
@@ -4254,7 +4272,7 @@ function SettingsHistoryModal({
         admin: filters.admin || void 0
       });
       if (!response?.success || !response.data) {
-        throw new Error(response?._error || "Failed to load settings history");
+        throw new Error(response?._error || "Failed to load config history");
       }
       return response.data;
     },
@@ -4268,7 +4286,7 @@ function SettingsHistoryModal({
       historyQuery.fetchNextPage();
     }
   };
-  return /* @__PURE__ */ jsxs(Modal, { title: "Settings History", icon: History, iconColor: color, onClose, width: "88vh", maxHeight: "82vh", zIndex: 260, children: [
+  return /* @__PURE__ */ jsxs(Modal, { title: "Config History", icon: History, iconColor: color, onClose, width: "88vh", maxHeight: "82vh", zIndex: 260, children: [
     /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { flex: 1, minHeight: 0 }, children: [
       /* @__PURE__ */ jsxs(Flex, { gap: "xs", p: "sm", style: { borderBottom: `0.1vh solid ${alpha(theme2.colors.dark[7], 0.8)}` }, children: [
         /* @__PURE__ */ jsx(TextInput, { leftSection: /* @__PURE__ */ jsx(Search, { size: "1.4vh" }), placeholder: "Search path/admin/value", value: queryInput, onChange: (e) => setQueryInput(e.currentTarget.value), size: "xs", style: { flex: 1 } }),
@@ -4317,7 +4335,7 @@ function SettingsHistoryModal({
     ) })
   ] });
 }
-function SettingsPanelInner({
+function ConfigPanelInner({
   navItems,
   title,
   subtitle,
@@ -4326,28 +4344,37 @@ function SettingsPanelInner({
   onClose,
   schema,
   resetConfirmText,
-  defaultSettings,
+  defaultConfig,
   width,
   height
 }) {
-  const { updateSettings, getHistory } = getScriptSettingsInstance();
+  const { updateConfig, resetConfig, getHistory } = getScriptConfigInstance();
   const form = useForm();
   const theme2 = useMantineTheme();
   const color = theme2.colors[theme2.primaryColor][5];
   const version = useSettings((s) => s.resourceVersion);
   const [activeTab, setActiveTab] = useState(navItems[0]?.id ?? "");
+  const firstMountRef = useRef(true);
   const [jsonOpen, setJsonOpen] = useState(false);
   const [historyOpen, setHistoryOpen] = useState(false);
   const [resetOpen, setResetOpen] = useState(false);
-  const [closeConfirmOpen, setCloseConfirmOpen] = useState(false);
+  const [pendingAction, setPendingAction] = useState(null);
   const changedCount = form.changedCount ?? 0;
   const isDirty = changedCount > 0;
+  const goBack = () => fetchNui("CONFIG_PANEL_BACK");
+  const handleBack = () => {
+    if (isDirty) {
+      setPendingAction("back");
+      return;
+    }
+    goBack();
+  };
   useEffect(() => {
     function handleKeyDown(e) {
       if (e.key !== "Escape") return;
       if (isDirty) {
         e.preventDefault();
-        setCloseConfirmOpen(true);
+        setPendingAction("close");
         return;
       }
       onClose();
@@ -4356,34 +4383,40 @@ function SettingsPanelInner({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isDirty, onClose]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(AnimatePresence, { children: jsonOpen && /* @__PURE__ */ jsx(SettingsJsonModal, { onClose: () => setJsonOpen(false), schema }) }),
-    /* @__PURE__ */ jsx(AnimatePresence, { children: historyOpen && /* @__PURE__ */ jsx(SettingsHistoryModal, { onClose: () => setHistoryOpen(false) }) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: jsonOpen && /* @__PURE__ */ jsx(ConfigJsonModal, { onClose: () => setJsonOpen(false), schema }) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: historyOpen && /* @__PURE__ */ jsx(ConfigHistoryModal, { onClose: () => setHistoryOpen(false) }) }),
     /* @__PURE__ */ jsx(AnimatePresence, { children: resetOpen && /* @__PURE__ */ jsx(
       ConfirmModal,
       {
         title: "Reset to Defaults",
-        description: "This will permanently reset ALL settings back to their defaults. Every setting you have configured will be overwritten. This cannot be undone.",
-        confirmLabel: "Reset Settings",
+        description: "This will permanently reset ALL config back to the defaults. Every value you have configured will be overwritten. This cannot be undone.",
+        confirmLabel: "Reset Config",
         confirmText: resetConfirmText,
-        onConfirm: () => {
-          updateSettings(defaultSettings).then(() => form.reinitialize(cloneSettings(defaultSettings)));
+        onConfirm: async () => {
           setResetOpen(false);
+          const result = await resetConfig();
+          if (result?.success) {
+            const { store } = getScriptConfigInstance();
+            form.reinitialize(cloneConfig(store.getState()));
+          }
         },
         onClose: () => setResetOpen(false),
         zIndex: 300
       }
     ) }),
-    /* @__PURE__ */ jsx(AnimatePresence, { children: closeConfirmOpen && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: pendingAction !== null && /* @__PURE__ */ jsx(
       ConfirmModal,
       {
         title: "Discard Unsaved Changes?",
-        description: "You have unsaved changes. Closing now will discard them.",
-        confirmLabel: "Close Without Saving",
+        description: pendingAction === "back" ? "You have unsaved changes. Going back now will discard them." : "You have unsaved changes. Closing now will discard them.",
+        confirmLabel: pendingAction === "back" ? "Go Back Without Saving" : "Close Without Saving",
         onConfirm: () => {
-          setCloseConfirmOpen(false);
-          onClose();
+          const action = pendingAction;
+          setPendingAction(null);
+          if (action === "back") goBack();
+          else onClose();
         },
-        onClose: () => setCloseConfirmOpen(false),
+        onClose: () => setPendingAction(null),
         zIndex: 300
       }
     ) }),
@@ -4410,9 +4443,33 @@ function SettingsPanelInner({
         exit: { scale: 0.3, opacity: 0, transform: "translate(-50%, -50%)" },
         children: [
           /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { width: "18vh", flexShrink: 0, borderRight: `0.1vh solid ${alpha(theme2.colors.dark[6], 0.8)}`, background: alpha(theme2.colors.dark[8], 0.6), overflow: "hidden" }, children: [
-            /* @__PURE__ */ jsxs(Flex, { align: "baseline", gap: "0.3vh", px: "sm", py: "sm", style: { borderBottom: `0.1vh solid ${alpha(theme2.colors.dark[6], 0.5)}`, flexShrink: 0 }, children: [
-              /* @__PURE__ */ jsx(Text, { size: "lg", ff: "Akrobat Bold", tt: "uppercase", children: title }),
-              subtitle && /* @__PURE__ */ jsx(Text, { tt: "uppercase", fw: 600, c: color, children: subtitle })
+            /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "0.6vh", px: "sm", py: "sm", style: { borderBottom: `0.1vh solid ${alpha(theme2.colors.dark[6], 0.5)}`, flexShrink: 0 }, children: [
+              /* @__PURE__ */ jsx(
+                motion.button,
+                {
+                  title: "Back to script list",
+                  onClick: handleBack,
+                  whileHover: { background: alpha(color, 0.16), borderColor: alpha(color, 0.45) },
+                  whileTap: { scale: 0.95 },
+                  style: {
+                    aspectRatio: "1 / 1",
+                    height: "2.4vh",
+                    background: alpha(color, 0.08),
+                    border: `0.1vh solid ${alpha(color, 0.3)}`,
+                    borderRadius: theme2.radius.xs,
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    flexShrink: 0
+                  },
+                  children: /* @__PURE__ */ jsx(ArrowLeft, { size: "1.4vh", color })
+                }
+              ),
+              /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { minWidth: 0, lineHeight: 1 }, children: [
+                /* @__PURE__ */ jsx(Text, { size: "lg", ff: "Akrobat Bold", tt: "uppercase", lts: "0.04em", truncate: true, children: title }),
+                subtitle && /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.08em", c: color, truncate: true, children: subtitle })
+              ] })
             ] }),
             /* @__PURE__ */ jsxs(Flex, { gap: "xxs", px: "xs", py: "xs", style: { borderBottom: `0.1vh solid ${alpha(theme2.colors.dark[6], 0.4)}`, flexShrink: 0 }, children: [
               /* @__PURE__ */ jsx(
@@ -4515,7 +4572,7 @@ function SettingsPanelInner({
           /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
             motion.div,
             {
-              initial: { opacity: 0, y: 4 },
+              initial: firstMountRef.current ? (firstMountRef.current = false, false) : { opacity: 0, y: 4 },
               animate: { opacity: 1, y: 0 },
               exit: { opacity: 0, y: -4 },
               transition: { duration: 0.15 },
@@ -4529,15 +4586,15 @@ function SettingsPanelInner({
     )
   ] });
 }
-function cloneSettings(value) {
+function cloneConfig(value) {
   return JSON.parse(JSON.stringify(value));
 }
 function ServerOnlyFetcher() {
-  const { fetchSettings } = getScriptSettingsInstance();
+  const { fetchConfig } = getScriptConfigInstance();
   const { reinitialize } = useFormActions();
   useEffect(() => {
     let cancelled = false;
-    fetchSettings().then((full) => {
+    fetchConfig().then((full) => {
       if (!cancelled && full) reinitialize(full);
     }).catch(() => {
     });
@@ -4548,28 +4605,28 @@ function ServerOnlyFetcher() {
   return null;
 }
 var defaultOnClose = () => fetchNui("CLOSE_ADMIN_SECTION");
-function SettingsPanel(props) {
+function ConfigPanel(props) {
   const { open, onClose = defaultOnClose } = props;
-  const { store, updateSettings, fetchSettings } = getScriptSettingsInstance();
+  const { store, updateConfig } = getScriptConfigInstance();
   const [isSaving, setIsSaving] = useState(false);
   if (!open) return null;
-  return /* @__PURE__ */ jsx(QueryClientProvider, { client: settingsPanelQueryClient, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client: configPanelQueryClient, children: /* @__PURE__ */ jsxs(
     FormProvider,
     {
-      initialValues: cloneSettings(store.getState()),
+      initialValues: cloneConfig(store.getState()),
       onSubmit: async (form) => {
         if (isSaving) return;
         setIsSaving(true);
         try {
-          const result = await updateSettings(form.values);
+          const result = await updateConfig(form.values);
           if (result?.success) {
-            form.reinitialize(cloneSettings(form.values));
-            settingsPanelQueryClient.invalidateQueries({ queryKey: ["scriptSettingsHistory"] });
+            form.reinitialize(cloneConfig(form.values));
+            configPanelQueryClient.invalidateQueries({ queryKey: ["scriptConfigHistory"] });
             return;
           }
-          form.reinitialize(cloneSettings(store.getState()));
+          form.reinitialize(cloneConfig(store.getState()));
           if (result?._error) {
-            console.warn(`[SettingsPanel] settings save failed: ${result._error}`);
+            console.warn(`[ConfigPanel] config save failed: ${result._error}`);
           }
         } finally {
           setIsSaving(false);
@@ -4578,7 +4635,7 @@ function SettingsPanel(props) {
       children: [
         /* @__PURE__ */ jsx(ServerOnlyFetcher, {}),
         /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
-          SettingsPanelInner,
+          ConfigPanelInner,
           {
             ...props,
             onClose,
@@ -4786,6 +4843,160 @@ function AdminPageTitle(props) {
     /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", tt: "uppercase", lts: "0.1em", size: "sm", c: "rgba(255,255,255,0.6)", children: locale(props.title) })
   ] });
 }
+var loadPersistedState = (storageKey) => {
+  try {
+    const raw = localStorage.getItem(storageKey);
+    return raw ? JSON.parse(raw) : {};
+  } catch {
+    return {};
+  }
+};
+var savePersistedState = (storageKey, state) => {
+  try {
+    localStorage.setItem(storageKey, JSON.stringify(state));
+  } catch {
+  }
+};
+function TestBed({
+  items,
+  storageKey = "testbed:open-state",
+  disablePersistence = false,
+  title = "TestBed"
+}) {
+  const [open, setOpen] = useState(false);
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+  useEffect(() => {
+    if (!isEnvBrowser() || disablePersistence) return;
+    const persisted = loadPersistedState(storageKey);
+    itemsRef.current.forEach((item) => {
+      const persistedValue = persisted[item.key];
+      if (typeof persistedValue === "boolean" && persistedValue !== item.active) {
+        item.onToggle(persistedValue);
+      }
+    });
+  }, []);
+  if (!isEnvBrowser()) return null;
+  const toggle = (item) => {
+    const next = !item.active;
+    item.onToggle(next);
+    if (!disablePersistence) {
+      const persisted = loadPersistedState(storageKey);
+      persisted[item.key] = next;
+      savePersistedState(storageKey, persisted);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: "1vh",
+        left: "1vh",
+        zIndex: 2147483647,
+        pointerEvents: "auto",
+        fontSize: "1.4vh"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            align: "center",
+            gap: "xs",
+            px: "sm",
+            py: "xs",
+            onClick: () => setOpen((v) => !v),
+            style: {
+              cursor: "pointer",
+              background: "rgba(0,0,0,0.55)",
+              backdropFilter: "blur(0.6vh)",
+              WebkitBackdropFilter: "blur(0.6vh)",
+              border: "0.1vh solid rgba(255,255,255,0.1)",
+              borderRadius: "var(--mantine-radius-sm)",
+              userSelect: "none",
+              minWidth: "16vh"
+            },
+            children: [
+              /* @__PURE__ */ jsx(FlaskConical, { size: 14, color: "rgba(255,255,255,0.7)" }),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  size: "xs",
+                  ff: "Akrobat Bold",
+                  tt: "uppercase",
+                  lts: "0.08em",
+                  c: "rgba(255,255,255,0.85)",
+                  style: { flex: 1 },
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsx(ActionIcon, { size: "xs", variant: "transparent", c: "rgba(255,255,255,0.6)", children: open ? /* @__PURE__ */ jsx(ChevronUp, { size: 14 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 14 }) })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx(
+          Stack,
+          {
+            gap: 4,
+            mt: "xxs",
+            p: "xs",
+            style: {
+              background: "rgba(0,0,0,0.55)",
+              backdropFilter: "blur(0.6vh)",
+              WebkitBackdropFilter: "blur(0.6vh)",
+              border: "0.1vh solid rgba(255,255,255,0.1)",
+              borderRadius: "var(--mantine-radius-sm)",
+              minWidth: "16vh",
+              maxHeight: "80vh",
+              overflowY: "auto"
+            },
+            children: items.map((item) => /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                align: "center",
+                justify: "space-between",
+                gap: "xs",
+                px: "xs",
+                py: "xxs",
+                onClick: () => toggle(item),
+                style: {
+                  cursor: "pointer",
+                  borderRadius: "var(--mantine-radius-xs)",
+                  background: item.active ? "rgba(245,158,11,0.15)" : "rgba(255,255,255,0.03)",
+                  border: `0.1vh solid ${item.active ? "rgba(245,158,11,0.35)" : "rgba(255,255,255,0.05)"}`,
+                  userSelect: "none"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      size: "xs",
+                      ff: "Akrobat Bold",
+                      c: item.active ? "#f59e0b" : "rgba(255,255,255,0.75)",
+                      children: item.label
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      size: "xxs",
+                      ff: "Akrobat Bold",
+                      tt: "uppercase",
+                      lts: "0.06em",
+                      c: item.active ? "#f59e0b" : "rgba(255,255,255,0.35)",
+                      children: item.active ? "On" : "Off"
+                    }
+                  )
+                ]
+              },
+              item.key
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
 function useTornEdges() {
   const game = useSettings((state) => state.game);
   return game === "rdr3" ? "torn-edge-wrapper" : "";
@@ -4976,7 +5187,7 @@ function mergeMantineThemeSafe(base, custom, override) {
     }
   };
 }
-var DirkErrorBoundary = class extends React4.Component {
+var DirkErrorBoundary = class extends React5.Component {
   constructor() {
     super(...arguments);
     __publicField(this, "state", { error: null, stack: void 0 });
@@ -5082,6 +5293,6 @@ function DirkProvider({ children, overideResourceName, themeOverride }) {
   return /* @__PURE__ */ jsx(MantineProvider, { theme: mergedTheme, defaultColorScheme: "dark", children: /* @__PURE__ */ jsx(DirkErrorBoundary, { children: content }) });
 }
 
-export { AdminPageTitle, AsyncSaveButton, BlipColorSelect, BlipIconSelect, BorderedIcon, ConfirmModal, Counter, DirkProvider, FiveMKeyBindInput, FloatingParticles, FormProvider, INPUT_MAPPER_KEYS_BY_PRIMARY, INPUT_MAPPER_PRIMARY_OPTIONS, InfoBox, InputContainer, LevelBanner, LevelPanel, Modal, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PromptModal, SegmentedControl, SegmentedProgress, SelectItem, SettingsPanel, Title, TornEdgeSVGFilter, colorWithAlpha, copyToClipboard, createFormStore, createScriptSettings, createSkill, extractDefaults, fetchLuaTable, fetchNui, gameToMap, getImageShape, getItemImageUrl, getScriptSettingsInstance, initialFetches, internalEvent, isEnvBrowser, isProfanity, latPr100, locale, localeStore, mapCenter, mapToGame, noop, numberToRoman, openLink, registerInitialFetch, registerInitialLuaTableFetch, runFetches, splitFAString, updatePresignedURL, uploadImage, useAudio, useAutoFetcher, useForm, useFormActions, useFormError, useFormErrors, useFormField, useFormFields, useItems, useItemsList, useModal, useModalActions, useNavigation, useNavigationStore, useNuiEvent, useProfanityStore, useSettings, useTornEdges };
+export { AdminPageTitle, AsyncSaveButton, BlipColorSelect, BlipIconSelect, BorderedIcon, ConfigPanel, ConfirmModal, Counter, DirkProvider, FiveMKeyBindInput, FloatingParticles, FormProvider, INPUT_MAPPER_KEYS_BY_PRIMARY, INPUT_MAPPER_PRIMARY_OPTIONS, InfoBox, InputContainer, LevelBanner, LevelPanel, Modal, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PromptModal, SegmentedControl, SegmentedProgress, SelectItem, TestBed, Title, TornEdgeSVGFilter, colorWithAlpha, copyToClipboard, createFormStore, createScriptConfig, createSkill, extractDefaults, fetchLuaTable, fetchNui, gameToMap, getImageShape, getItemImageUrl, getScriptConfigInstance, initialFetches, internalEvent, isEnvBrowser, isProfanity, latPr100, locale, localeStore, mapCenter, mapToGame, noop, numberToRoman, openLink, registerInitialFetch, registerInitialLuaTableFetch, runFetches, splitFAString, updatePresignedURL, uploadImage, useAudio, useAutoFetcher, useForm, useFormActions, useFormError, useFormErrors, useFormField, useFormFields, useItems, useItemsList, useModal, useModalActions, useNavigation, useNavigationStore, useNuiEvent, useProfanityStore, useSettings, useTornEdges };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map