dirk-cfx-react 1.1.56 → 1.1.62

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 var core = require('@mantine/core');
 var jsxRuntime = require('react/jsx-runtime');
-var React4 = require('react');
+var React5 = require('react');
 var zustand = require('zustand');
 var axios = require('axios');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
@@ -24,7 +24,7 @@ var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React4__default = /*#__PURE__*/_interopDefault(React4);
+var React5__default = /*#__PURE__*/_interopDefault(React5);
 var axios__default = /*#__PURE__*/_interopDefault(axios);
 var clickSoundUrl__default = /*#__PURE__*/_interopDefault(clickSoundUrl);
 var hoverSoundUrl__default = /*#__PURE__*/_interopDefault(hoverSoundUrl);
@@ -1333,12 +1333,10 @@ async function runFetches() {
   );
 }
 var useAutoFetcher = () => {
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (isEnvBrowser()) return;
-    const run = async () => {
-      await runFetches();
-    };
-    run();
+    runFetches().catch(() => {
+    });
   }, []);
 };
 var fetchLuaTable = (tableName, mockData) => {
@@ -1383,6 +1381,7 @@ var localeStore = zustand.create((set, get) => {
 var locale = localeStore.getState().locale;
 registerInitialFetch("GET_LOCALES", void 0).then((data) => {
   localeStore.setState({ locales: data });
+}).catch(() => {
 });
 
 // src/utils/map.ts
@@ -1814,7 +1813,7 @@ function createSkill(defaultSettings) {
   }));
   const useSkill = (xp) => {
     const { settings, levelMap } = useStore4();
-    return React4.useMemo(() => {
+    return React5.useMemo(() => {
       const currentLevel = getLevelFromXP(xp, levelMap, settings);
       const nextLevel = Math.min(currentLevel + 1, settings.maxLevel);
       const currentLevelXP = levelMap[currentLevel.toString()] || 0;
@@ -1900,6 +1899,7 @@ registerInitialFetch("FETCH_ALL_ITEMS", null, {
 }).then((fetchedItems) => {
   if (!fetchedItems) return;
   useItems.setState(fetchedItems);
+}).catch(() => {
 });
 
 // src/utils/inputMapper.ts
@@ -2270,8 +2270,8 @@ var FloatingParticles = ({
   mouseRepelStrength = 50,
   backgroundColor = "transparent"
 }) => {
-  const containerRef = React4.useRef(null);
-  const [particles, setParticles] = React4.useState([]);
+  const containerRef = React5.useRef(null);
+  const [particles, setParticles] = React5.useState([]);
   const mouseX = framerMotion.useMotionValue(0);
   const mouseY = framerMotion.useMotionValue(0);
   const durationMap = {
@@ -2284,7 +2284,7 @@ var FloatingParticles = ({
     const x = Math.sin(seed) * 1e4;
     return x - Math.floor(x);
   };
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!containerRef.current) return;
     const bounds = containerRef.current.getBoundingClientRect();
     const newParticles = [...Array(particleCount)].map((_, i) => {
@@ -2305,7 +2305,7 @@ var FloatingParticles = ({
     });
     setParticles(newParticles);
   }, [particleCount, icons.length, duration.base, duration.variance]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!containerRef.current) return;
     const handleMouseMove = (e) => {
       const bounds = containerRef.current.getBoundingClientRect();
@@ -2354,7 +2354,7 @@ var FloatingParticles = ({
       container.removeEventListener("mouseleave", handleMouseLeave);
     };
   }, [mouseX, mouseY, mouseRepelDistance, mouseRepelStrength]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     const handleResize = () => {
       if (!containerRef.current) return;
       const bounds = containerRef.current.getBoundingClientRect();
@@ -2782,23 +2782,23 @@ function Segment(props) {
     }
   );
 }
-var NavigationContext = React4.createContext(null);
+var NavigationContext = React5.createContext(null);
 function useNavigation(selector) {
-  const navigation = React4.useContext(NavigationContext);
+  const navigation = React5.useContext(NavigationContext);
   if (!navigation) {
     throw new Error("useNavigation must be used within a NavigationProvider");
   }
   return zustand.useStore(navigation, selector);
 }
 function useNavigationStore() {
-  const navigation = React4.useContext(NavigationContext);
+  const navigation = React5.useContext(NavigationContext);
   if (!navigation) {
     throw new Error("useNavigationStore must be used within a NavigationProvider");
   }
   return navigation;
 }
 function NavigationProvider({ children, defaultPage }) {
-  const storeRef = React4.useRef(
+  const storeRef = React5.useRef(
     zustand.create(() => ({
       pageId: defaultPage || "home"
     }))
@@ -3155,6 +3155,7 @@ function Modal({
   children
 }) {
   const theme2 = core.useMantineTheme();
+  const pointerDownOnOverlay = React5.useRef(false);
   return /* @__PURE__ */ jsxRuntime.jsx(core.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     framerMotion.motion.div,
     {
@@ -3170,7 +3171,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__ */ jsxRuntime.jsxs(
         framerMotion.motion.div,
         {
@@ -3178,7 +3186,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: core.alpha(theme2.colors.dark[9], 0.98),
             border: `0.1vh solid ${theme2.colors.dark[7]}`,
@@ -3275,7 +3282,7 @@ function Modal({
                 children: description2
               }
             ) }),
-            children
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }, children })
           ]
         }
       )
@@ -3329,9 +3336,9 @@ function PromptModal(props) {
     }
   );
 }
-var ModalContext = React4.createContext(null);
+var ModalContext = React5.createContext(null);
 function useModal(selector) {
-  const modal = React4.useContext(ModalContext);
+  const modal = React5.useContext(ModalContext);
   if (!modal) {
     throw new Error("useModal must be used within a ModalProvider");
   }
@@ -3359,7 +3366,7 @@ function StoreModal() {
   ) });
 }
 function ModalProvider({ children }) {
-  const storeRef = React4.useRef(
+  const storeRef = React5.useRef(
     zustand.create(() => ({
       active: null
     }))
@@ -3370,7 +3377,7 @@ function ModalProvider({ children }) {
   ] });
 }
 function useModalActions() {
-  const modal = React4.useContext(ModalContext);
+  const modal = React5.useContext(ModalContext);
   if (!modal) throw new Error("useModalActions must be used within a ModalProvider");
   const showModal = (openModal) => {
     modal.setState({ active: openModal });
@@ -3390,7 +3397,7 @@ function ConfirmModal({
   zIndex = 200
 }) {
   const theme2 = core.useMantineTheme();
-  const [typed, setTyped] = React4.useState("");
+  const [typed, setTyped] = React5.useState("");
   const canConfirm = !confirmText || typed === confirmText;
   return /* @__PURE__ */ jsxRuntime.jsx(core.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     framerMotion.motion.div,
@@ -3868,38 +3875,38 @@ function createFormStore(initialValues, validationRules, onSubmit) {
     }
   }));
 }
-var FormContext = React4.createContext(null);
+var FormContext = React5.createContext(null);
 function FormProvider({
   initialValues,
   validate,
   onSubmit,
   children
 }) {
-  const storeRef = React4.useRef(
+  const storeRef = React5.useRef(
     createFormStore(initialValues, validate, onSubmit)
   );
   return /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: storeRef.current, children });
 }
 function useForm() {
-  const store = React4.useContext(FormContext);
+  const store = React5.useContext(FormContext);
   if (!store) {
     throw new Error("useForm must be used inside <FormProvider>");
   }
   const state = zustand.useStore(store);
-  const changedFields = React4.useMemo(() => {
+  const changedFields = React5.useMemo(() => {
     return collectChangedPaths(state.values, state.initialValues);
   }, [state.values, state.initialValues]);
   return { ...state, changedFields, changedCount: changedFields.length };
 }
 function useFormField(path) {
-  const store = React4.useContext(FormContext);
+  const store = React5.useContext(FormContext);
   if (!store) {
     throw new Error("useFormField must be used inside <FormProvider>");
   }
   return zustand.useStore(store, (s) => getNested(s.values, path));
 }
 function useFormFields(...paths) {
-  const store = React4.useContext(FormContext);
+  const store = React5.useContext(FormContext);
   if (!store) {
     throw new Error("useFormFields must be used inside <FormProvider>");
   }
@@ -3912,14 +3919,14 @@ function useFormFields(...paths) {
   });
 }
 function useFormError(path) {
-  const store = React4.useContext(FormContext);
+  const store = React5.useContext(FormContext);
   if (!store) {
     throw new Error("useFormError must be used inside <FormProvider>");
   }
   return zustand.useStore(store, (s) => s.errors[path]);
 }
 function useFormErrors(...paths) {
-  const store = React4.useContext(FormContext);
+  const store = React5.useContext(FormContext);
   if (!store) {
     throw new Error("useFormErrors must be used inside <FormProvider>");
   }
@@ -3932,18 +3939,18 @@ function useFormErrors(...paths) {
   });
 }
 function useFormActions() {
-  const store = React4.useContext(FormContext);
+  const store = React5.useContext(FormContext);
   if (!store) {
     throw new Error("useFormActions must be used inside <FormProvider>");
   }
   return store.getState();
 }
 var useNuiEvent = (action, handler) => {
-  const savedHandler = React4.useRef(noop);
-  React4.useEffect(() => {
+  const savedHandler = React5.useRef(noop);
+  React5.useEffect(() => {
     savedHandler.current = handler;
   }, [handler]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     const eventListener = (event) => {
       const { action: eventAction, data } = event.data;
       if (savedHandler.current) {
@@ -3957,42 +3964,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 = zustand.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) {
@@ -4003,18 +4010,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 reactQuery.QueryClient({
+var configPanelQueryClient = new reactQuery.QueryClient({
   defaultOptions: { queries: { staleTime: 3e4, gcTime: 5 * 6e4 } }
 });
 function NavItemButton({
@@ -4058,15 +4076,15 @@ function NavItemButton({
     }
   );
 }
-function SettingsJsonModal({
+function ConfigJsonModal({
   onClose,
   schema
 }) {
   const theme2 = core.useMantineTheme();
   const color = theme2.colors[theme2.primaryColor][5];
   const form = useForm();
-  const [json, setJson] = React4.useState(() => JSON.stringify(form.values, null, 2));
-  const [error2, setError] = React4.useState(null);
+  const [json, setJson] = React5.useState(() => JSON.stringify(form.values, null, 2));
+  const [error2, setError] = React5.useState(null);
   const handleSave = () => {
     try {
       const parsed = JSON.parse(json);
@@ -4095,7 +4113,7 @@ function SettingsJsonModal({
       setError(e.message);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { title: "Settings JSON", icon: lucideReact.Code2, iconColor: color, onClose, width: "60vh", maxHeight: "80vh", zIndex: 200, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { title: "Config JSON", icon: lucideReact.Code2, iconColor: color, onClose, width: "60vh", maxHeight: "80vh", zIndex: 200, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(core.Box, { flex: 1, p: "0.8vh", style: { overflowY: "auto" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         core.JsonInput,
@@ -4237,22 +4255,22 @@ function HistoryTableHeader() {
     /* @__PURE__ */ jsxRuntime.jsx(core.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 = core.useMantineTheme();
   const color = theme2.colors[theme2.primaryColor][5];
-  const [queryInput, setQueryInput] = React4.useState("");
-  const [pathInput, setPathInput] = React4.useState("");
-  const [adminInput, setAdminInput] = React4.useState("");
-  const [query, setQuery] = React4.useState("");
-  const [path, setPath] = React4.useState("");
-  const [admin, setAdmin] = React4.useState("");
-  const [expandedKey, setExpandedKey] = React4.useState(null);
-  const filters = React4.useMemo(() => ({ query, path, admin }), [query, path, admin]);
+  const [queryInput, setQueryInput] = React5.useState("");
+  const [pathInput, setPathInput] = React5.useState("");
+  const [adminInput, setAdminInput] = React5.useState("");
+  const [query, setQuery] = React5.useState("");
+  const [path, setPath] = React5.useState("");
+  const [admin, setAdmin] = React5.useState("");
+  const [expandedKey, setExpandedKey] = React5.useState(null);
+  const filters = React5.useMemo(() => ({ query, path, admin }), [query, path, admin]);
   const historyQuery = reactQuery.useInfiniteQuery({
-    queryKey: ["scriptSettingsHistory", filters],
+    queryKey: ["scriptConfigHistory", filters],
     initialPageParam: 0,
     queryFn: async ({ pageParam }) => {
       const response = await getHistory({
@@ -4263,7 +4281,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;
     },
@@ -4277,7 +4295,7 @@ function SettingsHistoryModal({
       historyQuery.fetchNextPage();
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { title: "Settings History", icon: lucideReact.History, iconColor: color, onClose, width: "88vh", maxHeight: "82vh", zIndex: 260, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { title: "Config History", icon: lucideReact.History, iconColor: color, onClose, width: "88vh", maxHeight: "82vh", zIndex: 260, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", style: { flex: 1, minHeight: 0 }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { gap: "xs", p: "sm", style: { borderBottom: `0.1vh solid ${core.alpha(theme2.colors.dark[7], 0.8)}` }, children: [
         /* @__PURE__ */ jsxRuntime.jsx(core.TextInput, { leftSection: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: "1.4vh" }), placeholder: "Search path/admin/value", value: queryInput, onChange: (e) => setQueryInput(e.currentTarget.value), size: "xs", style: { flex: 1 } }),
@@ -4326,7 +4344,7 @@ function SettingsHistoryModal({
     ) })
   ] });
 }
-function SettingsPanelInner({
+function ConfigPanelInner({
   navItems,
   title,
   subtitle,
@@ -4335,28 +4353,37 @@ function SettingsPanelInner({
   onClose,
   schema,
   resetConfirmText,
-  defaultSettings,
+  defaultConfig,
   width,
   height
 }) {
-  const { updateSettings, getHistory } = getScriptSettingsInstance();
+  const { updateConfig, resetConfig, getHistory } = getScriptConfigInstance();
   const form = useForm();
   const theme2 = core.useMantineTheme();
   const color = theme2.colors[theme2.primaryColor][5];
   const version = useSettings((s) => s.resourceVersion);
-  const [activeTab, setActiveTab] = React4.useState(navItems[0]?.id ?? "");
-  const [jsonOpen, setJsonOpen] = React4.useState(false);
-  const [historyOpen, setHistoryOpen] = React4.useState(false);
-  const [resetOpen, setResetOpen] = React4.useState(false);
-  const [closeConfirmOpen, setCloseConfirmOpen] = React4.useState(false);
+  const [activeTab, setActiveTab] = React5.useState(navItems[0]?.id ?? "");
+  const firstMountRef = React5.useRef(true);
+  const [jsonOpen, setJsonOpen] = React5.useState(false);
+  const [historyOpen, setHistoryOpen] = React5.useState(false);
+  const [resetOpen, setResetOpen] = React5.useState(false);
+  const [pendingAction, setPendingAction] = React5.useState(null);
   const changedCount = form.changedCount ?? 0;
   const isDirty = changedCount > 0;
-  React4.useEffect(() => {
+  const goBack = () => fetchNui("CONFIG_PANEL_BACK");
+  const handleBack = () => {
+    if (isDirty) {
+      setPendingAction("back");
+      return;
+    }
+    goBack();
+  };
+  React5.useEffect(() => {
     function handleKeyDown(e) {
       if (e.key !== "Escape") return;
       if (isDirty) {
         e.preventDefault();
-        setCloseConfirmOpen(true);
+        setPendingAction("close");
         return;
       }
       onClose();
@@ -4365,34 +4392,40 @@ function SettingsPanelInner({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isDirty, onClose]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: jsonOpen && /* @__PURE__ */ jsxRuntime.jsx(SettingsJsonModal, { onClose: () => setJsonOpen(false), schema }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: historyOpen && /* @__PURE__ */ jsxRuntime.jsx(SettingsHistoryModal, { onClose: () => setHistoryOpen(false) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: jsonOpen && /* @__PURE__ */ jsxRuntime.jsx(ConfigJsonModal, { onClose: () => setJsonOpen(false), schema }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: historyOpen && /* @__PURE__ */ jsxRuntime.jsx(ConfigHistoryModal, { onClose: () => setHistoryOpen(false) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: resetOpen && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: closeConfirmOpen && /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: pendingAction !== null && /* @__PURE__ */ jsxRuntime.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
       }
     ) }),
@@ -4419,9 +4452,33 @@ function SettingsPanelInner({
         exit: { scale: 0.3, opacity: 0, transform: "translate(-50%, -50%)" },
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", style: { width: "18vh", flexShrink: 0, borderRight: `0.1vh solid ${core.alpha(theme2.colors.dark[6], 0.8)}`, background: core.alpha(theme2.colors.dark[8], 0.6), overflow: "hidden" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "baseline", gap: "0.3vh", px: "sm", py: "sm", style: { borderBottom: `0.1vh solid ${core.alpha(theme2.colors.dark[6], 0.5)}`, flexShrink: 0 }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "lg", ff: "Akrobat Bold", tt: "uppercase", children: title }),
-              subtitle && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { tt: "uppercase", fw: 600, c: color, children: subtitle })
+            /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", gap: "0.6vh", px: "sm", py: "sm", style: { borderBottom: `0.1vh solid ${core.alpha(theme2.colors.dark[6], 0.5)}`, flexShrink: 0 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                framerMotion.motion.button,
+                {
+                  title: "Back to script list",
+                  onClick: handleBack,
+                  whileHover: { background: core.alpha(color, 0.16), borderColor: core.alpha(color, 0.45) },
+                  whileTap: { scale: 0.95 },
+                  style: {
+                    aspectRatio: "1 / 1",
+                    height: "2.4vh",
+                    background: core.alpha(color, 0.08),
+                    border: `0.1vh solid ${core.alpha(color, 0.3)}`,
+                    borderRadius: theme2.radius.xs,
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    flexShrink: 0
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { size: "1.4vh", color })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", style: { minWidth: 0, lineHeight: 1 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "lg", ff: "Akrobat Bold", tt: "uppercase", lts: "0.04em", truncate: true, children: title }),
+                subtitle && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.08em", c: color, truncate: true, children: subtitle })
+              ] })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { gap: "xxs", px: "xs", py: "xs", style: { borderBottom: `0.1vh solid ${core.alpha(theme2.colors.dark[6], 0.4)}`, flexShrink: 0 }, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -4524,7 +4581,7 @@ function SettingsPanelInner({
           /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
             framerMotion.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 },
@@ -4538,15 +4595,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();
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     let cancelled = false;
-    fetchSettings().then((full) => {
+    fetchConfig().then((full) => {
       if (!cancelled && full) reinitialize(full);
     }).catch(() => {
     });
@@ -4557,28 +4614,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 [isSaving, setIsSaving] = React4.useState(false);
+  const { store, updateConfig } = getScriptConfigInstance();
+  const [isSaving, setIsSaving] = React5.useState(false);
   if (!open) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: settingsPanelQueryClient, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: configPanelQueryClient, children: /* @__PURE__ */ jsxRuntime.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);
@@ -4587,7 +4644,7 @@ function SettingsPanel(props) {
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ServerOnlyFetcher, {}),
         /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsx(
-          SettingsPanelInner,
+          ConfigPanelInner,
           {
             ...props,
             onClose,
@@ -4599,9 +4656,9 @@ function SettingsPanel(props) {
   ) });
 }
 function LazyImage({ src, alt, style }) {
-  const [visible, setVisible] = React4.useState(false);
-  const ref = React4.useRef(null);
-  React4.useEffect(() => {
+  const [visible, setVisible] = React5.useState(false);
+  const ref = React5.useRef(null);
+  React5.useEffect(() => {
     const observer = new IntersectionObserver(([entry]) => {
       if (entry.isIntersecting) {
         setVisible(true);
@@ -4615,7 +4672,7 @@ function LazyImage({ src, alt, style }) {
 }
 function SelectItem(props) {
   const invItems = useItems();
-  const formattedItems = React4.useMemo(() => {
+  const formattedItems = React5.useMemo(() => {
     const seen = /* @__PURE__ */ new Set();
     return useItemsList(props.excludeItemNames ?? []).filter((item) => {
       if (seen.has(item.name)) return false;
@@ -4667,9 +4724,9 @@ function SelectItem(props) {
     }
   );
 }
-var KeyBindContext = React4.createContext(null);
+var KeyBindContext = React5.createContext(null);
 function useKeyBindContext() {
-  const ctx = React4.useContext(KeyBindContext);
+  const ctx = React5.useContext(KeyBindContext);
   if (!ctx) {
     throw new Error("FiveMKeyBindInput.* must be used inside <FiveMKeyBindInput>");
   }
@@ -4748,7 +4805,7 @@ function AsyncSaveButton({
   style
 }) {
   const theme2 = core.useMantineTheme();
-  const [state, setState] = React4.useState("idle");
+  const [state, setState] = React5.useState("idle");
   const handleClick = async () => {
     if (state === "pending") return;
     setState("pending");
@@ -4795,6 +4852,160 @@ function AdminPageTitle(props) {
     /* @__PURE__ */ jsxRuntime.jsx(core.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] = React5.useState(false);
+  const itemsRef = React5.useRef(items);
+  itemsRef.current = items;
+  React5.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: "1vh",
+        left: "1vh",
+        zIndex: 2147483647,
+        pointerEvents: "auto",
+        fontSize: "1.4vh"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          core.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__ */ jsxRuntime.jsx(lucideReact.FlaskConical, { size: 14, color: "rgba(255,255,255,0.7)" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                core.Text,
+                {
+                  size: "xs",
+                  ff: "Akrobat Bold",
+                  tt: "uppercase",
+                  lts: "0.08em",
+                  c: "rgba(255,255,255,0.85)",
+                  style: { flex: 1 },
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(core.ActionIcon, { size: "xs", variant: "transparent", c: "rgba(255,255,255,0.6)", children: open ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 14 }) })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsxRuntime.jsx(
+          core.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__ */ jsxRuntime.jsxs(
+              core.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__ */ jsxRuntime.jsx(
+                    core.Text,
+                    {
+                      size: "xs",
+                      ff: "Akrobat Bold",
+                      c: item.active ? "#f59e0b" : "rgba(255,255,255,0.75)",
+                      children: item.label
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    core.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" : "";
@@ -4985,7 +5196,7 @@ function mergeMantineThemeSafe(base, custom, override) {
     }
   };
 }
-var DirkErrorBoundary = class extends React4__default.default.Component {
+var DirkErrorBoundary = class extends React5__default.default.Component {
   constructor() {
     super(...arguments);
     __publicField(this, "state", { error: null, stack: void 0 });
@@ -5048,12 +5259,12 @@ function DirkProvider({ children, overideResourceName, themeOverride }) {
     customTheme,
     game
   } = useSettings();
-  React4.useLayoutEffect(() => {
+  React5.useLayoutEffect(() => {
     useSettings.setState({
       overideResourceName
     });
   }, [overideResourceName]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     fetchNui("NUI_READY").catch(() => {
     });
     Promise.all([
@@ -5068,7 +5279,7 @@ function DirkProvider({ children, overideResourceName, themeOverride }) {
       console.error("Failed to fetch initial settings within dirk-cfx-react:", err);
     });
   }, []);
-  const mergedTheme = React4.useMemo(
+  const mergedTheme = React5.useMemo(
     () => mergeMantineThemeSafe(
       { ...theme_default, primaryColor, primaryShade },
       customTheme,
@@ -5076,7 +5287,7 @@ function DirkProvider({ children, overideResourceName, themeOverride }) {
     ),
     [primaryColor, primaryShade, customTheme, themeOverride]
   );
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     document.body.style.fontFamily = game === "rdr3" ? '"Red Dead", sans-serif' : '"Akrobat Regular", sans-serif';
   }, [game]);
   const content = isEnvBrowser() ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -5096,6 +5307,7 @@ exports.AsyncSaveButton = AsyncSaveButton;
 exports.BlipColorSelect = BlipColorSelect;
 exports.BlipIconSelect = BlipIconSelect;
 exports.BorderedIcon = BorderedIcon;
+exports.ConfigPanel = ConfigPanel;
 exports.ConfirmModal = ConfirmModal;
 exports.Counter = Counter;
 exports.DirkProvider = DirkProvider;
@@ -5122,13 +5334,13 @@ exports.PromptModal = PromptModal;
 exports.SegmentedControl = SegmentedControl;
 exports.SegmentedProgress = SegmentedProgress;
 exports.SelectItem = SelectItem;
-exports.SettingsPanel = SettingsPanel;
+exports.TestBed = TestBed;
 exports.Title = Title;
 exports.TornEdgeSVGFilter = TornEdgeSVGFilter;
 exports.colorWithAlpha = colorWithAlpha;
 exports.copyToClipboard = copyToClipboard;
 exports.createFormStore = createFormStore;
-exports.createScriptSettings = createScriptSettings;
+exports.createScriptConfig = createScriptConfig;
 exports.createSkill = createSkill;
 exports.extractDefaults = extractDefaults;
 exports.fetchLuaTable = fetchLuaTable;
@@ -5136,7 +5348,7 @@ exports.fetchNui = fetchNui;
 exports.gameToMap = gameToMap;
 exports.getImageShape = getImageShape;
 exports.getItemImageUrl = getItemImageUrl;
-exports.getScriptSettingsInstance = getScriptSettingsInstance;
+exports.getScriptConfigInstance = getScriptConfigInstance;
 exports.initialFetches = initialFetches;
 exports.internalEvent = internalEvent;
 exports.isEnvBrowser = isEnvBrowser;