dirk-cfx-react 1.1.62 → 1.1.65

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-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 { AdminPageTitle, AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, BlipColorSelectProps, BlipDisplaySelect, BlipDisplaySelectProps, 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, PositionPicker, PositionPickerProps, ProgressProps, Prompt, PromptButton, PromptModal, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, SelectItem, SelectItemProps, StoreModalProps, TestBed, TestBedItem, TestBedProps, Title, TitleProps, Vector4Value, 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, 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';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-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 { AdminPageTitle, AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, BlipColorSelectProps, BlipDisplaySelect, BlipDisplaySelectProps, 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, PositionPicker, PositionPickerProps, ProgressProps, Prompt, PromptButton, PromptModal, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, SelectItem, SelectItemProps, StoreModalProps, TestBed, TestBedItem, TestBedProps, Title, TitleProps, Vector4Value, 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, 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';

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, ActionIcon, 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, Tooltip, alpha, Progress, RingProgress, Portal, Button, NumberInput, Loader, ActionIcon, MantineProvider, BackgroundImage, Group, JsonInput } from '@mantine/core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 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 { Info, X, AlertTriangle, Trash2, MapPin, Crosshair, EyeOff, Eye, RotateCcw, Check, FlaskConical, ChevronUp, ChevronDown, ArrowLeft, Undo2, Redo2, Save, History, XCircle, Code2, Search, Filter, User } from 'lucide-react';
 import clickSoundUrl from './click_sound-PNCRRTM4.mp3';
 import hoverSoundUrl from './hover_sound-NBUA222C.mp3';
-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';
@@ -1070,6 +1070,31 @@ function BlipColorSelect({ value, onChange, label: label2 = "Blip Color", size =
     }
   );
 }
+var BLIP_DISPLAY_DATA = [
+  { value: "2", label: "2 \u2014 Main map + minimap (selectable)" },
+  { value: "3", label: "3 \u2014 Main map only (selectable)" },
+  { value: "4", label: "4 \u2014 Main map only (selectable)" },
+  { value: "5", label: "5 \u2014 Minimap only" },
+  { value: "6", label: "6 \u2014 Main map + minimap (selectable)" },
+  { value: "8", label: "8 \u2014 Main map + minimap (not selectable)" },
+  { value: "9", label: "9 \u2014 Minimap only" },
+  { value: "10", label: "10 \u2014 Main map + minimap (not selectable)" }
+];
+function BlipDisplaySelect({ value, onChange, label: label2 = "Blip Display", size = "xs", ...rest }) {
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      label: label2,
+      size,
+      ...rest,
+      data: BLIP_DISPLAY_DATA,
+      value: value != null ? String(value) : null,
+      onChange: (val) => val != null && onChange(Number(val)),
+      allowDeselect: false,
+      maxDropdownHeight: 300
+    }
+  );
+}
 
 // src/utils/colorWithAlpha.ts
 var colorNames = {
@@ -1216,11 +1241,11 @@ var colorNames = {
   Yellow: { r: 255, g: 255, b: 0 },
   YellowGreen: { r: 154, g: 205, b: 50 }
 };
-function colorWithAlpha(color, alpha8) {
+function colorWithAlpha(color, alpha9) {
   const lowerCasedColor = color.toLowerCase();
   if (colorNames[lowerCasedColor]) {
     const rgb = colorNames[lowerCasedColor];
-    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha8})`;
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha9})`;
   }
   if (/^#([A-Fa-f0-9]{6})$/.test(color)) {
     const hex = color.slice(1);
@@ -1228,12 +1253,12 @@ function colorWithAlpha(color, alpha8) {
     const r = bigint >> 16 & 255;
     const g = bigint >> 8 & 255;
     const b = bigint & 255;
-    return `rgba(${r}, ${g}, ${b}, ${alpha8})`;
+    return `rgba(${r}, ${g}, ${b}, ${alpha9})`;
   }
   if (/^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/.test(color)) {
     const result = color.match(/^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/);
     if (result) {
-      return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha8})`;
+      return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha9})`;
     }
   }
   return color;
@@ -1306,8 +1331,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) {
@@ -1354,6 +1383,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 = create((set, get) => {
   return {
     locales: {
@@ -1361,6 +1397,7 @@ var localeStore = 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() || ""));
@@ -1374,6 +1411,14 @@ 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];
@@ -2536,8 +2581,8 @@ function InputContainer(props) {
               (props.title || props.description) && /* @__PURE__ */ jsxs(
                 Flex,
                 {
-                  direction: "column",
-                  gap: "xxs",
+                  align: "center",
+                  flex: 1,
                   p: props.p == "0" ? "sm" : 0,
                   children: [
                     props.title && /* @__PURE__ */ jsx(
@@ -2554,12 +2599,26 @@ function InputContainer(props) {
                       }
                     ),
                     props.description && /* @__PURE__ */ jsx(
-                      Text,
+                      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: 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__ */ jsx(Flex, { align: "center", justify: "center", style: { marginLeft: "auto", cursor: "help" }, children: /* @__PURE__ */ jsx(Info, { size: "1.6vh", color: alpha(theme2.colors[theme2.primaryColor][5], 0.45) }) })
                       }
                     )
                   ]
@@ -2576,13 +2635,7 @@ function InputContainer(props) {
                   children: props.error
                 }
               ),
-              /* @__PURE__ */ jsx(
-                Flex,
-                {
-                  ml: "auto",
-                  children: props.rightSection
-                }
-              )
+              props.rightSection && /* @__PURE__ */ jsx(Flex, { children: props.rightSection })
             ]
           }
         ),
@@ -4715,6 +4768,219 @@ function SelectItem(props) {
     }
   );
 }
+var ZERO = { x: 0, y: 0, z: 0, w: 0 };
+function PositionPicker(props) {
+  const {
+    label: label2,
+    value,
+    onChange,
+    relativeTo,
+    fetchEvent = "GET_POSITION",
+    previewEvent = "PREVIEW_POSITION",
+    stopPreviewEvent = "STOP_PREVIEW_POSITION",
+    description: description2,
+    showHeading = true
+  } = props;
+  const theme2 = useMantineTheme();
+  const color = theme2.colors[theme2.primaryColor][5];
+  const [previewing, setPreviewing] = useState(false);
+  const previewingRef = useRef(false);
+  useEffect(() => {
+    return () => {
+      if (previewingRef.current) {
+        fetchNui(stopPreviewEvent, { relativeTo }).catch(() => {
+        });
+      }
+    };
+  }, [stopPreviewEvent, relativeTo]);
+  const set = (key, val) => {
+    const next = { ...value, [key]: val };
+    onChange(next);
+    if (previewingRef.current) {
+      fetchNui(previewEvent, { value: next, relativeTo }).catch(() => {
+      });
+    }
+  };
+  const grab = async () => {
+    try {
+      const resp = await fetchNui(fetchEvent, { relativeTo }, value);
+      if (resp && typeof resp === "object") {
+        const next = {
+          x: Number(resp.x ?? 0),
+          y: Number(resp.y ?? 0),
+          z: Number(resp.z ?? 0),
+          w: Number(resp.w ?? 0)
+        };
+        onChange(next);
+        if (previewingRef.current) {
+          fetchNui(previewEvent, { value: next, relativeTo }).catch(() => {
+          });
+        }
+      }
+    } catch {
+    }
+  };
+  const togglePreview = async () => {
+    const nextState = !previewing;
+    setPreviewing(nextState);
+    previewingRef.current = nextState;
+    if (nextState) {
+      await fetchNui(previewEvent, { value, relativeTo }).catch(() => {
+      });
+    } else {
+      await fetchNui(stopPreviewEvent, { relativeTo }).catch(() => {
+      });
+    }
+  };
+  const reset = () => {
+    onChange({ ...ZERO });
+    if (previewingRef.current) {
+      fetchNui(previewEvent, { value: ZERO, relativeTo }).catch(() => {
+      });
+    }
+  };
+  const numberStyles = {
+    input: { textAlign: "right", fontFamily: "monospace" }
+  };
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: "column",
+      gap: "xxs",
+      p: "xs",
+      style: {
+        background: alpha(theme2.colors.dark[5], 0.35),
+        border: "0.1vh solid rgba(255,255,255,0.05)",
+        borderRadius: theme2.radius.xs
+      },
+      children: [
+        (label2 || description2) && /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", gap: "xs", children: [
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 0, style: { minWidth: 0 }, children: [
+            label2 && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xxs", children: [
+              /* @__PURE__ */ jsx(MapPin, { size: "1.4vh", color: alpha(color, 0.7) }),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  ff: "Akrobat Bold",
+                  size: "xxs",
+                  tt: "uppercase",
+                  lts: "0.05em",
+                  c: "rgba(255,255,255,0.75)",
+                  children: locale(label2)
+                }
+              ),
+              relativeTo && /* @__PURE__ */ jsxs(Text, { ff: "Akrobat Bold", size: "xxs", c: alpha(color, 0.5), lts: "0.05em", children: [
+                "\xB7 ",
+                locale("RelativeTo"),
+                " ",
+                relativeTo
+              ] })
+            ] }),
+            description2 && /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", c: "dimmed", lh: 1.3, children: locale(description2) })
+          ] }),
+          /* @__PURE__ */ jsxs(Flex, { gap: "xxs", style: { flexShrink: 0 }, children: [
+            /* @__PURE__ */ jsx(PickerButton, { tooltip: locale("GrabMyPosition"), onClick: grab, color, children: /* @__PURE__ */ jsx(Crosshair, { size: "1.4vh", color }) }),
+            /* @__PURE__ */ jsx(
+              PickerButton,
+              {
+                tooltip: previewing ? locale("StopPreview") : locale("PreviewInWorld"),
+                onClick: togglePreview,
+                color,
+                active: previewing,
+                children: previewing ? /* @__PURE__ */ jsx(EyeOff, { size: "1.4vh", color }) : /* @__PURE__ */ jsx(Eye, { size: "1.4vh", color: alpha(color, 0.7) })
+              }
+            ),
+            /* @__PURE__ */ jsx(PickerButton, { tooltip: locale("Reset"), onClick: reset, color: "#ef4444", children: /* @__PURE__ */ jsx(RotateCcw, { size: "1.4vh", color: "#ef4444" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Flex, { gap: "xxs", children: [
+          /* @__PURE__ */ jsx(
+            NumberInput,
+            {
+              size: "xs",
+              label: "X",
+              value: value.x,
+              onChange: (v) => set("x", Number(v)),
+              decimalScale: 4,
+              step: 0.1,
+              style: { flex: 1 },
+              styles: numberStyles
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            NumberInput,
+            {
+              size: "xs",
+              label: "Y",
+              value: value.y,
+              onChange: (v) => set("y", Number(v)),
+              decimalScale: 4,
+              step: 0.1,
+              style: { flex: 1 },
+              styles: numberStyles
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            NumberInput,
+            {
+              size: "xs",
+              label: "Z",
+              value: value.z,
+              onChange: (v) => set("z", Number(v)),
+              decimalScale: 4,
+              step: 0.1,
+              style: { flex: 1 },
+              styles: numberStyles
+            }
+          ),
+          showHeading && /* @__PURE__ */ jsx(
+            NumberInput,
+            {
+              size: "xs",
+              label: "W",
+              value: value.w,
+              onChange: (v) => set("w", Number(v)),
+              decimalScale: 2,
+              step: 1,
+              min: 0,
+              max: 360,
+              style: { flex: 1 },
+              styles: numberStyles
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function PickerButton({
+  children,
+  onClick,
+  tooltip,
+  color,
+  active
+}) {
+  const theme2 = useMantineTheme();
+  return /* @__PURE__ */ jsx(Tooltip, { label: tooltip, position: "top", withArrow: true, children: /* @__PURE__ */ jsx(
+    motion.button,
+    {
+      onClick,
+      whileHover: { background: alpha(color, 0.18) },
+      whileTap: { scale: 0.95 },
+      style: {
+        background: active ? alpha(color, 0.22) : alpha(color, 0.08),
+        border: `0.1vh solid ${alpha(color, active ? 0.5 : 0.3)}`,
+        borderRadius: theme2.radius.xs,
+        padding: "0.4vh 0.6vh",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children
+    }
+  ) });
+}
 var KeyBindContext = createContext(null);
 function useKeyBindContext() {
   const ctx = useContext(KeyBindContext);
@@ -5177,6 +5443,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,
@@ -5250,6 +5521,7 @@ function DirkProvider({ children, overideResourceName, themeOverride }) {
     customTheme,
     game
   } = useSettings();
+  localeStore((s) => s.locales);
   useLayoutEffect(() => {
     useSettings.setState({
       overideResourceName
@@ -5270,6 +5542,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 = useMemo(
     () => mergeMantineThemeSafe(
       { ...theme_default, primaryColor, primaryShade },
@@ -5293,6 +5569,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, 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 };
+export { AdminPageTitle, AsyncSaveButton, BlipColorSelect, BlipDisplaySelect, 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, PositionPicker, 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