dirk-cfx-react 1.1.58 → 1.1.64

package/dist/index.cjs

@@ -7,9 +7,9 @@ var zustand = require('zustand');
 var axios = require('axios');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var framerMotion = require('framer-motion');
+var lucideReact = require('lucide-react');
 var clickSoundUrl = require('./click_sound-PNCRRTM4.mp3');
 var hoverSoundUrl = require('./hover_sound-NBUA222C.mp3');
-var lucideReact = require('lucide-react');
 var reactQuery = require('@tanstack/react-query');
 require('@mantine/core/styles.css');
 require('@mantine/notifications/styles.css');
@@ -1315,8 +1315,12 @@ async function fetchNui(eventName, data, mockData) {
   }
   const overrideResourceName = useSettings.getState().overideResourceName;
   const resourceName = window.GetParentResourceName ? window.GetParentResourceName() : overrideResourceName ? overrideResourceName : "dirk-cfx-react";
-  const resp = await fetch(`https://${resourceName}/${eventName}`, options);
-  return await resp.json();
+  try {
+    const resp = await fetch(`https://${resourceName}/${eventName}`, options);
+    return await resp.json();
+  } catch {
+    return mockData ?? {};
+  }
 }
 var initialFetches = {};
 async function registerInitialFetch(eventName, data, mockData) {
@@ -1335,10 +1339,8 @@ async function runFetches() {
 var useAutoFetcher = () => {
   React5.useEffect(() => {
     if (isEnvBrowser()) return;
-    const run = async () => {
-      await runFetches();
-    };
-    run();
+    runFetches().catch(() => {
+    });
   }, []);
 };
 var fetchLuaTable = (tableName, mockData) => {
@@ -1365,6 +1367,13 @@ var internalEvent = (events, timer = 1e3) => {
     }
   }
 };
+var reportedMissing = /* @__PURE__ */ new Set();
+function reportMissingLocale(key) {
+  if (!key || reportedMissing.has(key)) return;
+  reportedMissing.add(key);
+  fetchNui("REPORT_MISSING_LOCALE", { key }).catch(() => {
+  });
+}
 var localeStore = zustand.create((set, get) => {
   return {
     locales: {
@@ -1372,6 +1381,7 @@ var localeStore = zustand.create((set, get) => {
     },
     locale: (key, ...args) => {
       const exists = get().locales[key];
+      if (!exists) reportMissingLocale(key);
       let translation = exists || key;
       if (args.length) {
         translation = translation.replace(/%s/g, () => String(args.shift() || ""));
@@ -1383,7 +1393,16 @@ var localeStore = zustand.create((set, get) => {
 var locale = localeStore.getState().locale;
 registerInitialFetch("GET_LOCALES", void 0).then((data) => {
   localeStore.setState({ locales: data });
+}).catch(() => {
 });
+if (typeof window !== "undefined") {
+  window.addEventListener("message", (event) => {
+    const msg = event.data;
+    if (!msg || msg.action !== "UPDATE_DIRK_LIB_LOCALES") return;
+    if (!msg.data || typeof msg.data !== "object") return;
+    localeStore.setState({ locales: msg.data });
+  });
+}
 
 // src/utils/map.ts
 var mapCenter = [-119.43, 58.84];
@@ -1900,6 +1919,7 @@ registerInitialFetch("FETCH_ALL_ITEMS", null, {
 }).then((fetchedItems) => {
   if (!fetchedItems) return;
   useItems.setState(fetchedItems);
+}).catch(() => {
 });
 
 // src/utils/inputMapper.ts
@@ -2545,8 +2565,8 @@ function InputContainer(props) {
               (props.title || props.description) && /* @__PURE__ */ jsxRuntime.jsxs(
                 core.Flex,
                 {
-                  direction: "column",
-                  gap: "xxs",
+                  align: "center",
+                  flex: 1,
                   p: props.p == "0" ? "sm" : 0,
                   children: [
                     props.title && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2563,12 +2583,26 @@ function InputContainer(props) {
                       }
                     ),
                     props.description && /* @__PURE__ */ jsxRuntime.jsx(
-                      core.Text,
+                      core.Tooltip,
                       {
-                        size: "xs",
-                        c: "rgba(255, 255, 255, 0.8)",
-                        fw: 400,
-                        children: props.description
+                        label: props.description,
+                        position: "top-end",
+                        withArrow: true,
+                        multiline: true,
+                        maw: "22vh",
+                        styles: {
+                          tooltip: {
+                            background: core.alpha(theme2.colors.dark[7], 0.95),
+                            border: `0.1vh solid rgba(255,255,255,0.1)`,
+                            color: "rgba(255,255,255,0.75)",
+                            fontFamily: "Akrobat Bold",
+                            fontSize: "1.3vh",
+                            lineHeight: 1.3,
+                            padding: "0.6vh 0.8vh",
+                            letterSpacing: "0.03em"
+                          }
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(core.Flex, { align: "center", justify: "center", style: { marginLeft: "auto", cursor: "help" }, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { size: "1.6vh", color: core.alpha(theme2.colors[theme2.primaryColor][5], 0.45) }) })
                       }
                     )
                   ]
@@ -2585,13 +2619,7 @@ function InputContainer(props) {
                   children: props.error
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                core.Flex,
-                {
-                  ml: "auto",
-                  children: props.rightSection
-                }
-              )
+              props.rightSection && /* @__PURE__ */ jsxRuntime.jsx(core.Flex, { children: props.rightSection })
             ]
           }
         ),
@@ -3282,7 +3310,7 @@ function Modal({
                 children: description2
               }
             ) }),
-            children
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }, children })
           ]
         }
       )
@@ -3964,42 +3992,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) {
@@ -4010,18 +4038,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({
@@ -4065,7 +4104,7 @@ function NavItemButton({
     }
   );
 }
-function SettingsJsonModal({
+function ConfigJsonModal({
   onClose,
   schema
 }) {
@@ -4102,7 +4141,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,
@@ -4244,10 +4283,10 @@ 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] = React5.useState("");
@@ -4259,7 +4298,7 @@ function SettingsHistoryModal({
   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({
@@ -4270,7 +4309,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;
     },
@@ -4284,7 +4323,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 } }),
@@ -4333,7 +4372,7 @@ function SettingsHistoryModal({
     ) })
   ] });
 }
-function SettingsPanelInner({
+function ConfigPanelInner({
   navItems,
   title,
   subtitle,
@@ -4342,28 +4381,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] = 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 [closeConfirmOpen, setCloseConfirmOpen] = React5.useState(false);
+  const [pendingAction, setPendingAction] = React5.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();
+  };
   React5.useEffect(() => {
     function handleKeyDown(e) {
       if (e.key !== "Escape") return;
       if (isDirty) {
         e.preventDefault();
-        setCloseConfirmOpen(true);
+        setPendingAction("close");
         return;
       }
       onClose();
@@ -4372,34 +4420,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
       }
     ) }),
@@ -4426,9 +4480,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(
@@ -4531,7 +4609,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 },
@@ -4545,15 +4623,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();
   React5.useEffect(() => {
     let cancelled = false;
-    fetchSettings().then((full) => {
+    fetchConfig().then((full) => {
       if (!cancelled && full) reinitialize(full);
     }).catch(() => {
     });
@@ -4564,28 +4642,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] = 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);
@@ -4594,7 +4672,7 @@ function SettingsPanel(props) {
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ServerOnlyFetcher, {}),
         /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsx(
-          SettingsPanelInner,
+          ConfigPanelInner,
           {
             ...props,
             onClose,
@@ -4802,6 +4880,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" : "";
@@ -4982,6 +5214,11 @@ function mergeMantineThemeSafe(base, custom, override) {
   const colors = { ...base.colors };
   if (custom && isValidColorScale(custom)) {
     colors["custom"] = custom;
+  } else if (!colors["custom"]) {
+    const fallback = base.colors && base.colors.dirk;
+    if (fallback && isValidColorScale(fallback)) {
+      colors["custom"] = fallback;
+    }
   }
   return {
     ...base,
@@ -5055,6 +5292,7 @@ function DirkProvider({ children, overideResourceName, themeOverride }) {
     customTheme,
     game
   } = useSettings();
+  localeStore((s) => s.locales);
   React5.useLayoutEffect(() => {
     useSettings.setState({
       overideResourceName
@@ -5075,6 +5313,10 @@ function DirkProvider({ children, overideResourceName, themeOverride }) {
       console.error("Failed to fetch initial settings within dirk-cfx-react:", err);
     });
   }, []);
+  useNuiEvent("UPDATE_DIRK_LIB_SETTINGS", (data) => {
+    if (!data || typeof data !== "object") return;
+    useSettings.setState(data);
+  });
   const mergedTheme = React5.useMemo(
     () => mergeMantineThemeSafe(
       { ...theme_default, primaryColor, primaryShade },
@@ -5103,6 +5345,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;
@@ -5129,13 +5372,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;
@@ -5143,7 +5386,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;