dirk-cfx-react 1.1.87 → 1.1.90

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 var core = require('@mantine/core');
 var jsxRuntime = require('react/jsx-runtime');
-var React6 = require('react');
+var React4 = require('react');
 var zustand = require('zustand');
 var axios = require('axios');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
@@ -12,7 +12,6 @@ var clickSoundUrl = require('./click_sound-PNCRRTM4.mp3');
 var hoverSoundUrl = require('./hover_sound-NBUA222C.mp3');
 var notifications = require('@mantine/notifications');
 var reactQuery = require('@tanstack/react-query');
-var colorsGenerator = require('@mantine/colors-generator');
 require('@mantine/core/styles.css');
 require('@mantine/notifications/styles.css');
 require('./styles/fonts.css');
@@ -23,11 +22,17 @@ var fontawesomeSvgCore = require('@fortawesome/fontawesome-svg-core');
 var freeBrandsSvgIcons = require('@fortawesome/free-brands-svg-icons');
 var freeRegularSvgIcons = require('@fortawesome/free-regular-svg-icons');
 var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
+var colorsGenerator = require('@mantine/colors-generator');
+var reactDom = require('react-dom');
+var leaflet = require('leaflet');
+require('leaflet/dist/leaflet.css');
+var reactLeaflet = require('react-leaflet');
+var reactLeafletComponentMarker = require('@adamscybot/react-leaflet-component-marker');
 var zod = require('zod');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React6__default = /*#__PURE__*/_interopDefault(React6);
+var React4__default = /*#__PURE__*/_interopDefault(React4);
 var axios__default = /*#__PURE__*/_interopDefault(axios);
 var clickSoundUrl__default = /*#__PURE__*/_interopDefault(clickSoundUrl);
 var hoverSoundUrl__default = /*#__PURE__*/_interopDefault(hoverSoundUrl);
@@ -976,6 +981,18 @@ var BLIP_COLOR_DATA = BLIP_COLORS.map(([id, label2]) => ({
 }));
 var blipEntryMap = new Map(BLIP_ENTRIES.map(([id, name, ext]) => [String(id), { id, name, ext }]));
 var blipColorMap = new Map(BLIP_COLORS.map(([id, label2, hex]) => [String(id), { id, label: label2, hex }]));
+function getBlipEntry(spriteId) {
+  if (spriteId == null) return void 0;
+  return blipEntryMap.get(String(spriteId));
+}
+function getBlipColor(colorId) {
+  if (colorId == null) return void 0;
+  return blipColorMap.get(String(colorId));
+}
+function blipUrlForSprite(spriteId) {
+  const entry = getBlipEntry(spriteId);
+  return entry ? blipUrl(entry.name, entry.ext) : null;
+}
 var renderBlipOption = ({ option }) => {
   const entry = blipEntryMap.get(option.value);
   if (!entry) return option.label;
@@ -1253,11 +1270,11 @@ var colorNames = {
   Yellow: { r: 255, g: 255, b: 0 },
   YellowGreen: { r: 154, g: 205, b: 50 }
 };
-function colorWithAlpha(color, alpha12) {
+function colorWithAlpha(color, alpha18) {
   const lowerCasedColor = color.toLowerCase();
   if (colorNames[lowerCasedColor]) {
     const rgb = colorNames[lowerCasedColor];
-    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha12})`;
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha18})`;
   }
   if (/^#([A-Fa-f0-9]{6})$/.test(color)) {
     const hex = color.slice(1);
@@ -1265,12 +1282,12 @@ function colorWithAlpha(color, alpha12) {
     const r = bigint >> 16 & 255;
     const g = bigint >> 8 & 255;
     const b = bigint & 255;
-    return `rgba(${r}, ${g}, ${b}, ${alpha12})`;
+    return `rgba(${r}, ${g}, ${b}, ${alpha18})`;
   }
   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]}, ${alpha12})`;
+      return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha18})`;
     }
   }
   return color;
@@ -1369,7 +1386,7 @@ async function runFetches() {
   );
 }
 var useAutoFetcher = () => {
-  React6.useEffect(() => {
+  React4.useEffect(() => {
     if (isEnvBrowser()) return;
     runFetches().catch(() => {
     });
@@ -1406,11 +1423,35 @@ function reportMissingLocale(key) {
   fetchNui("REPORT_MISSING_LOCALE", { key }).catch(() => {
   });
 }
+var PACKAGE_DEFAULTS = {
+  "OccupantsDesc": "Here you can view and manage the occupants of your traphouse. These occupants can be used mainly for selling drugs to the NPCs surrounding your traphouse. However they have other uses to so be careful who you add as an occupant.",
+  "cfgpanel_discard": "Discard",
+  "cfgpanel_manual_edit": "Manual Edit",
+  "cfgpanel_reset_defaults": "Reset Defaults",
+  "cfgpanel_version": "Version",
+  "cfgpanel_back_title": "Back to script list",
+  "cfgpanel_undo": "Undo",
+  "cfgpanel_redo": "Redo",
+  "cfgpanel_save": "Save",
+  "cfgpanel_saving": "Saving...",
+  "cfgpanel_history": "History",
+  "cfgpanel_reset_title": "Reset to Defaults",
+  "cfgpanel_reset_desc": "This will permanently reset ALL config back to the defaults. Every value you have configured will be overwritten. This cannot be undone.",
+  "cfgpanel_reset_confirm": "Reset Config",
+  "cfgpanel_discard_title": "Discard Unsaved Changes?",
+  "cfgpanel_discard_desc_back": "You have unsaved changes. Going back now will discard them.",
+  "cfgpanel_discard_desc_close": "You have unsaved changes. Closing now will discard them.",
+  "cfgpanel_discard_confirm_back": "Go Back Without Saving",
+  "cfgpanel_discard_confirm_close": "Close Without Saving",
+  "cfgpanel_json_title": "Config JSON",
+  "cfgpanel_cancel": "Cancel",
+  "cfgpanel_apply": "Apply",
+  "cfgpanel_history_title": "Config History",
+  "cfgpanel_close": "Close"
+};
 var localeStore = zustand.create((set, get) => {
   return {
-    locales: {
-      "OccupantsDesc": "Here you can view and manage the occupants of your traphouse. These occupants can be used mainly for selling drugs to the NPCs surrounding your traphouse. However they have other uses to so be careful who you add as an occupant."
-    },
+    locales: { ...PACKAGE_DEFAULTS },
     locale: (key, ...args) => {
       const exists = get().locales[key];
       if (!exists) reportMissingLocale(key);
@@ -1424,7 +1465,7 @@ var localeStore = zustand.create((set, get) => {
 });
 var locale = localeStore.getState().locale;
 registerInitialFetch("GET_LOCALES", void 0).then((data) => {
-  localeStore.setState({ locales: data });
+  localeStore.setState({ locales: { ...PACKAGE_DEFAULTS, ...data } });
 }).catch(() => {
 });
 if (typeof window !== "undefined") {
@@ -1432,7 +1473,8 @@ if (typeof window !== "undefined") {
     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 });
+    if (Object.keys(msg.data).length === 0) return;
+    localeStore.setState({ locales: { ...PACKAGE_DEFAULTS, ...msg.data } });
   });
 }
 
@@ -1865,7 +1907,7 @@ function createSkill(defaultSettings) {
   }));
   const useSkill = (xp) => {
     const { settings, levelMap } = useStore4();
-    return React6.useMemo(() => {
+    return React4.useMemo(() => {
       const currentLevel = getLevelFromXP(xp, levelMap, settings);
       const nextLevel = Math.min(currentLevel + 1, settings.maxLevel);
       const currentLevelXP = levelMap[currentLevel.toString()] || 0;
@@ -1958,15 +2000,21 @@ var useFrameworkGroups = zustand.create(() => ({
   gangs: [],
   loaded: false
 }));
-registerInitialFetch("GET_FRAMEWORK_GROUPS", void 0).then((data) => {
-  useFrameworkGroups.setState({
-    jobs: Array.isArray(data?.jobs) ? data.jobs : [],
-    gangs: Array.isArray(data?.gangs) ? data.gangs : [],
-    loaded: true
+var frameworkGroupsRequested = false;
+function ensureFrameworkGroups() {
+  if (frameworkGroupsRequested) return;
+  frameworkGroupsRequested = true;
+  fetchNui("GET_FRAMEWORK_GROUPS", void 0).then((data) => {
+    useFrameworkGroups.setState({
+      jobs: Array.isArray(data?.jobs) ? data.jobs : [],
+      gangs: Array.isArray(data?.gangs) ? data.gangs : [],
+      loaded: true
+    });
+  }).catch(() => {
+    frameworkGroupsRequested = false;
+    useFrameworkGroups.setState({ loaded: true });
   });
-}).catch(() => {
-  useFrameworkGroups.setState({ loaded: true });
-});
+}
 function selectAllGroups(state) {
   return [...state.jobs, ...state.gangs];
 }
@@ -2455,8 +2503,8 @@ var FloatingParticles = ({
   mouseRepelStrength = 50,
   backgroundColor = "transparent"
 }) => {
-  const containerRef = React6.useRef(null);
-  const [particles, setParticles] = React6.useState([]);
+  const containerRef = React4.useRef(null);
+  const [particles, setParticles] = React4.useState([]);
   const mouseX = framerMotion.useMotionValue(0);
   const mouseY = framerMotion.useMotionValue(0);
   const durationMap = {
@@ -2469,7 +2517,7 @@ var FloatingParticles = ({
     const x = Math.sin(seed) * 1e4;
     return x - Math.floor(x);
   };
-  React6.useEffect(() => {
+  React4.useEffect(() => {
     if (!containerRef.current) return;
     const bounds = containerRef.current.getBoundingClientRect();
     const newParticles = [...Array(particleCount)].map((_, i) => {
@@ -2490,7 +2538,7 @@ var FloatingParticles = ({
     });
     setParticles(newParticles);
   }, [particleCount, icons.length, duration.base, duration.variance]);
-  React6.useEffect(() => {
+  React4.useEffect(() => {
     if (!containerRef.current) return;
     const handleMouseMove = (e) => {
       const bounds = containerRef.current.getBoundingClientRect();
@@ -2539,7 +2587,7 @@ var FloatingParticles = ({
       container.removeEventListener("mouseleave", handleMouseLeave);
     };
   }, [mouseX, mouseY, mouseRepelDistance, mouseRepelStrength]);
-  React6.useEffect(() => {
+  React4.useEffect(() => {
     const handleResize = () => {
       if (!containerRef.current) return;
       const bounds = containerRef.current.getBoundingClientRect();
@@ -2975,23 +3023,23 @@ function Segment(props) {
     }
   );
 }
-var NavigationContext = React6.createContext(null);
+var NavigationContext = React4.createContext(null);
 function useNavigation(selector) {
-  const navigation = React6.useContext(NavigationContext);
+  const navigation = React4.useContext(NavigationContext);
   if (!navigation) {
     throw new Error("useNavigation must be used within a NavigationProvider");
   }
   return zustand.useStore(navigation, selector);
 }
 function useNavigationStore() {
-  const navigation = React6.useContext(NavigationContext);
+  const navigation = React4.useContext(NavigationContext);
   if (!navigation) {
     throw new Error("useNavigationStore must be used within a NavigationProvider");
   }
   return navigation;
 }
 function NavigationProvider({ children, defaultPage }) {
-  const storeRef = React6.useRef(
+  const storeRef = React4.useRef(
     zustand.create(() => ({
       pageId: defaultPage || "home"
     }))
@@ -3000,7 +3048,7 @@ function NavigationProvider({ children, defaultPage }) {
 }
 function NavBar(props) {
   const pageId = useNavigation((state) => state.pageId);
-  const store = useNavigationStore();
+  const store2 = useNavigationStore();
   return /* @__PURE__ */ jsxRuntime.jsx(
     SegmentedControl,
     {
@@ -3009,7 +3057,7 @@ function NavBar(props) {
       value: pageId,
       items: props.items,
       onChange: (value) => {
-        store.setState({ pageId: value });
+        store2.setState({ pageId: value });
       }
     }
   );
@@ -3343,7 +3391,7 @@ function Modal({
   children
 }) {
   const theme2 = core.useMantineTheme();
-  const pointerDownOnOverlay = React6.useRef(false);
+  const pointerDownOnOverlay = React4.useRef(false);
   return /* @__PURE__ */ jsxRuntime.jsx(core.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     framerMotion.motion.div,
     {
@@ -3524,9 +3572,9 @@ function PromptModal(props) {
     }
   );
 }
-var ModalContext = React6.createContext(null);
+var ModalContext = React4.createContext(null);
 function useModal(selector) {
-  const modal = React6.useContext(ModalContext);
+  const modal = React4.useContext(ModalContext);
   if (!modal) {
     throw new Error("useModal must be used within a ModalProvider");
   }
@@ -3554,7 +3602,7 @@ function StoreModal() {
   ) });
 }
 function ModalProvider({ children }) {
-  const storeRef = React6.useRef(
+  const storeRef = React4.useRef(
     zustand.create(() => ({
       active: null
     }))
@@ -3565,7 +3613,7 @@ function ModalProvider({ children }) {
   ] });
 }
 function useModalActions() {
-  const modal = React6.useContext(ModalContext);
+  const modal = React4.useContext(ModalContext);
   if (!modal) throw new Error("useModalActions must be used within a ModalProvider");
   const showModal = (openModal) => {
     modal.setState({ active: openModal });
@@ -3585,7 +3633,7 @@ function ConfirmModal({
   zIndex = 200
 }) {
   const theme2 = core.useMantineTheme();
-  const [typed, setTyped] = React6.useState("");
+  const [typed, setTyped] = React4.useState("");
   const canConfirm = !confirmText || typed === confirmText;
   return /* @__PURE__ */ jsxRuntime.jsx(core.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     framerMotion.motion.div,
@@ -3852,14 +3900,14 @@ function MissingItemsBanner() {
   const loaded = useMissingItemsAudit((s) => s.loaded);
   const inFlight = useMissingItemsAudit((s) => s.inFlight);
   const refresh = useMissingItemsAudit((s) => s.refresh);
-  const [expanded, setExpanded] = React6.useState(false);
-  const [activeTab, setActiveTab] = React6.useState("ox");
-  const [hoveredTab, setHoveredTab] = React6.useState(null);
-  const [copied, setCopied] = React6.useState(null);
-  React6.useEffect(() => {
+  const [expanded, setExpanded] = React4.useState(false);
+  const [activeTab, setActiveTab] = React4.useState("ox");
+  const [hoveredTab, setHoveredTab] = React4.useState(null);
+  const [copied, setCopied] = React4.useState(null);
+  React4.useEffect(() => {
     if (!loaded) refresh();
   }, [loaded, refresh]);
-  const handleCopy = React6.useCallback((tab) => {
+  const handleCopy = React4.useCallback((tab) => {
     if (!audit) return;
     const text = audit.snippets[tab] ?? "";
     navigator.clipboard.writeText(text).then(() => {
@@ -3868,7 +3916,7 @@ function MissingItemsBanner() {
     }).catch(() => {
     });
   }, [audit]);
-  const handleRefresh = React6.useCallback((e) => {
+  const handleRefresh = React4.useCallback((e) => {
     e.stopPropagation();
     refresh();
   }, [refresh]);
@@ -4000,7 +4048,7 @@ function CodeView({
   warnColor
 }) {
   const theme2 = core.useMantineTheme();
-  const [hovered, setHovered] = React6.useState(false);
+  const [hovered, setHovered] = React4.useState(false);
   const lines = code === "" ? [""] : code.split("\n");
   const lineNumWidth = String(lines.length).length;
   const copyBg = copied ? core.alpha("#22c55e", 0.15) : hovered ? core.alpha(warnColor, 0.18) : core.alpha(warnColor, 0.1);
@@ -4303,42 +4351,42 @@ function createFormStore(initialValues, validationRules, onSubmit) {
     }
   }));
 }
-var FormContext = React6.createContext(null);
+var FormContext = React4.createContext(null);
 function FormProvider({
   initialValues,
   validate,
   onSubmit,
   children
 }) {
-  const storeRef = React6.useRef(
+  const storeRef = React4.useRef(
     createFormStore(initialValues, validate, onSubmit)
   );
   return /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: storeRef.current, children });
 }
 function useForm() {
-  const store = React6.useContext(FormContext);
-  if (!store) {
+  const store2 = React4.useContext(FormContext);
+  if (!store2) {
     throw new Error("useForm must be used inside <FormProvider>");
   }
-  const state = zustand.useStore(store);
-  const changedFields = React6.useMemo(() => {
+  const state = zustand.useStore(store2);
+  const changedFields = React4.useMemo(() => {
     return collectChangedPaths(state.values, state.initialValues);
   }, [state.values, state.initialValues]);
   return { ...state, changedFields, changedCount: changedFields.length };
 }
 function useFormField(path) {
-  const store = React6.useContext(FormContext);
-  if (!store) {
+  const store2 = React4.useContext(FormContext);
+  if (!store2) {
     throw new Error("useFormField must be used inside <FormProvider>");
   }
-  return zustand.useStore(store, (s) => getNested(s.values, path));
+  return zustand.useStore(store2, (s) => getNested(s.values, path));
 }
 function useFormFields(...paths) {
-  const store = React6.useContext(FormContext);
-  if (!store) {
+  const store2 = React4.useContext(FormContext);
+  if (!store2) {
     throw new Error("useFormFields must be used inside <FormProvider>");
   }
-  return zustand.useStore(store, (s) => {
+  return zustand.useStore(store2, (s) => {
     const result = {};
     for (const path of paths) {
       result[path] = getNested(s.values, path);
@@ -4347,18 +4395,18 @@ function useFormFields(...paths) {
   });
 }
 function useFormError(path) {
-  const store = React6.useContext(FormContext);
-  if (!store) {
+  const store2 = React4.useContext(FormContext);
+  if (!store2) {
     throw new Error("useFormError must be used inside <FormProvider>");
   }
-  return zustand.useStore(store, (s) => s.errors[path]);
+  return zustand.useStore(store2, (s) => s.errors[path]);
 }
 function useFormErrors(...paths) {
-  const store = React6.useContext(FormContext);
-  if (!store) {
+  const store2 = React4.useContext(FormContext);
+  if (!store2) {
     throw new Error("useFormErrors must be used inside <FormProvider>");
   }
-  return zustand.useStore(store, (s) => {
+  return zustand.useStore(store2, (s) => {
     const result = {};
     for (const path of paths) {
       result[path] = s.errors[path];
@@ -4367,18 +4415,229 @@ function useFormErrors(...paths) {
   });
 }
 function useFormActions() {
-  const store = React6.useContext(FormContext);
-  if (!store) {
+  const store2 = React4.useContext(FormContext);
+  if (!store2) {
     throw new Error("useFormActions must be used inside <FormProvider>");
   }
-  return store.getState();
+  return store2.getState();
+}
+var store = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Map();
+function notify(key) {
+  const ls = listeners.get(key);
+  if (!ls) return;
+  ls.forEach((fn) => fn());
+}
+function useAdminState(key, initial) {
+  const [, setTick] = React4.useState(0);
+  React4.useEffect(() => {
+    const set = listeners.get(key) ?? /* @__PURE__ */ new Set();
+    listeners.set(key, set);
+    const handler = () => setTick((t3) => t3 + 1);
+    set.add(handler);
+    return () => {
+      set.delete(handler);
+      if (set.size === 0) listeners.delete(key);
+    };
+  }, [key]);
+  const value = store.has(key) ? store.get(key) : initial;
+  const setValue = (v) => {
+    const next = typeof v === "function" ? v(value) : v;
+    store.set(key, next);
+    notify(key);
+  };
+  return [value, setValue];
+}
+function clearAdminState(key) {
+  if (key) {
+    store.delete(key);
+    notify(key);
+  } else {
+    const keys = Array.from(store.keys());
+    store.clear();
+    keys.forEach(notify);
+  }
 }
+var label = {
+  fontSize: "var(--mantine-font-size-xs)",
+  fontFamily: "Akrobat Bold",
+  letterSpacing: "0.05em",
+  textTransform: "uppercase"
+};
+var error = {
+  fontSize: "var(--mantine-font-size-xs)",
+  fontFamily: "Akrobat Regular"
+};
+var description = {
+  fontSize: "var(--mantine-font-size-xs)"
+};
+var genericInputStyles = {
+  styles: {
+    label,
+    error,
+    description,
+    input: {
+      background: "rgba(255,255,255,0.04)",
+      border: "0.1vh solid rgba(255,255,255,0.08)",
+      color: "rgba(255,255,255,0.85)",
+      minHeight: "4vh"
+    }
+  }
+};
+var theme = core.createTheme({
+  primaryColor: "dirk",
+  primaryShade: 9,
+  defaultRadius: "xs",
+  fontFamily: "Akrobat Regular, sans-serif",
+  radius: {
+    xxs: "0.3vh",
+    xs: "0.5vh",
+    sm: "0.75vh",
+    md: "1vh",
+    lg: "1.5vh",
+    xl: "2vh",
+    xxl: "3vh"
+  },
+  fontSizes: {
+    xxs: "1.2vh",
+    xs: "1.5vh",
+    sm: "1.8vh",
+    md: "2.2vh",
+    lg: "2.8vh",
+    xl: "3.3vh",
+    xxl: "3.8vh"
+  },
+  lineHeights: {
+    xxs: "1.4vh",
+    xs: "1.8vh",
+    sm: "2.2vh",
+    md: "2.8vh",
+    lg: "3.3vh",
+    xl: "3.8vh"
+  },
+  spacing: {
+    xxs: "0.5vh",
+    xs: "0.75vh",
+    sm: "1.5vh",
+    md: "2vh",
+    lg: "3vh",
+    xl: "4vh",
+    xxl: "5vh"
+  },
+  components: {
+    Progress: {
+      styles: {
+        label: {
+          fontFamily: "Akrobat Bold",
+          letterSpacing: "0.05em",
+          textTransform: "uppercase"
+        },
+        root: {
+          backgroundColor: "rgba(77, 77, 77, 0.4)"
+        }
+      }
+    },
+    Input: genericInputStyles,
+    TextInput: genericInputStyles,
+    NumberInput: genericInputStyles,
+    Select: genericInputStyles,
+    MultiSelect: genericInputStyles,
+    Textarea: genericInputStyles,
+    ColorInput: genericInputStyles,
+    DateInput: genericInputStyles,
+    // Mantine's <Button> defaults to rem-based heights (xs ≈ 1.875rem)
+    // which doesn't match this theme's vh-based input min-heights, so
+    // `<Button size="xs">` rendered next to `<TextInput size="xs">` ends
+    // up visibly shorter. Pin the button heights to the same vh values
+    // the inputs use so xs-everything lines up out of the box.
+    Button: {
+      styles: {
+        label: {
+          fontFamily: "Akrobat Bold",
+          letterSpacing: "0.05em",
+          textTransform: "uppercase"
+        },
+        root: {
+          // Mantine maps these to --button-height per size; setting them
+          // directly here keeps native Button sizing logic intact.
+        }
+      },
+      vars: (_theme, props) => {
+        const heights = {
+          xs: "4vh",
+          sm: "4.5vh",
+          md: "5vh",
+          lg: "5.5vh",
+          xl: "6vh"
+        };
+        const h = heights[props.size ?? "sm"] ?? "4.5vh";
+        return {
+          root: {
+            "--button-height": h
+          }
+        };
+      }
+    },
+    Pill: {
+      styles: (theme2) => ({
+        root: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          backgroundColor: "rgba(76, 76, 76, 0.3)",
+          height: "fit-content",
+          textTransform: "uppercase",
+          letterSpacing: "0.05em",
+          fontFamily: "Akrobat Bold",
+          fontSize: "1.25vh",
+          borderRadius: theme2.defaultRadius,
+          paddingBottom: "0.5vh",
+          paddingTop: "0.5vh"
+        }
+      })
+    },
+    // Mantine's <Tooltip> defaults to a white card with black text — looks
+    // jarring against every dirk consumer's dark configurator. Every script
+    // used to hand-paste this dark style block per Tooltip; centralised here
+    // so consumers get the right look automatically and never need to think
+    // about it again.
+    Tooltip: {
+      styles: (theme2) => ({
+        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"
+        }
+      })
+    }
+  },
+  colors: {
+    dirk: [
+      "#ffffff",
+      "#f3fce9",
+      "#dbf5bd",
+      "#c3ee91",
+      "#ace765",
+      "#94e039",
+      "#7ac61f",
+      "#5f9a18",
+      "#29420a",
+      "#446e11"
+    ]
+  }
+});
+var theme_default = theme;
 var useNuiEvent = (action, handler) => {
-  const savedHandler = React6.useRef(noop);
-  React6.useEffect(() => {
+  const savedHandler = React4.useRef(noop);
+  React4.useEffect(() => {
     savedHandler.current = handler;
   }, [handler]);
-  React6.useEffect(() => {
+  React4.useEffect(() => {
     const eventListener = (event) => {
       const { action: eventAction, data } = event.data;
       if (savedHandler.current) {
@@ -4391,13 +4650,35 @@ var useNuiEvent = (action, handler) => {
     return () => window.removeEventListener("message", eventListener);
   }, [action]);
 };
+
+// src/utils/mergeMantineTheme.ts
+var isValidColorScale = (v) => Array.isArray(v) && v.length === 10 && v.every((shade) => typeof shade === "string");
+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,
+    ...override,
+    colors: {
+      ...colors,
+      ...override?.colors ?? {}
+    }
+  };
+}
 var _instance = null;
 function getScriptConfigInstance() {
   if (!_instance) throw new Error("[dirk-cfx-react] createScriptConfig must be called before using ConfigPanel");
   return _instance;
 }
 function createScriptConfig(defaultValue) {
-  const store = zustand.create(() => defaultValue);
+  const store2 = zustand.create(() => defaultValue);
   let clientVersion = 0;
   const useScriptConfigHooks = () => {
     useNuiEvent("UPDATE_SCRIPT_CONFIG", (data) => {
@@ -4406,7 +4687,7 @@ function createScriptConfig(defaultValue) {
         clientVersion = data.clientVersion;
       }
       if (data.config && typeof data.config === "object") {
-        store.setState((prev) => ({ ...prev, ...data.config }));
+        store2.setState((prev) => ({ ...prev, ...data.config }));
       }
     });
   };
@@ -4414,7 +4695,7 @@ function createScriptConfig(defaultValue) {
     try {
       const response = await fetchNui("GET_FULL_SCRIPT_CONFIG");
       if (response?.success && response.data?.config) {
-        store.setState(() => response.data.config);
+        store2.setState(() => response.data.config);
         if (typeof response.data.clientVersion === "number") {
           clientVersion = response.data.clientVersion;
         }
@@ -4425,7 +4706,7 @@ function createScriptConfig(defaultValue) {
     return null;
   };
   const updateScriptConfig = async (newConfig) => {
-    store.setState((prev) => ({ ...prev, ...newConfig }));
+    store2.setState((prev) => ({ ...prev, ...newConfig }));
     const response = await fetchNui("UPDATE_SCRIPT_CONFIG", {
       data: newConfig,
       expectedVersion: clientVersion
@@ -4434,7 +4715,7 @@ function createScriptConfig(defaultValue) {
       clientVersion = response.meta.client_version;
     }
     if (response?.success === false && response?.meta?.latestData) {
-      store.setState((prev) => ({ ...prev, ...response.meta.latestData }));
+      store2.setState((prev) => ({ ...prev, ...response.meta.latestData }));
     }
     return response;
   };
@@ -4446,28 +4727,251 @@ function createScriptConfig(defaultValue) {
     if (response?.success) {
       const fresh = await fetchScriptConfig();
       if (fresh) {
-        store.setState(() => fresh);
+        store2.setState(() => fresh);
       }
     }
     return response;
   };
   _instance = {
-    store,
+    store: store2,
     updateConfig: updateScriptConfig,
     resetConfig,
     getHistory: getScriptConfigHistory,
     fetchConfig: fetchScriptConfig
   };
-  return { store, updateScriptConfig, resetConfig, getScriptConfigHistory, useScriptConfigHooks, fetchScriptConfig };
+  return { store: store2, updateScriptConfig, resetConfig, getScriptConfigHistory, useScriptConfigHooks, fetchScriptConfig };
+}
+var DirkErrorBoundary = class extends React4__default.default.Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "state", { error: null, stack: void 0 });
+  }
+  static getDerivedStateFromError(error2) {
+    return { error: error2 };
+  }
+  componentDidCatch(error2, info) {
+    console.group("\u{1F525} Dirk UI Crash");
+    console.error("Error:", error2);
+    console.error("Component Stack:", info.componentStack);
+    console.groupEnd();
+  }
+  render() {
+    if (!this.state.error) return this.props.children;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      core.Box,
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          width: "100vw",
+          height: "100vh",
+          background: "rgba(10, 10, 12, 0.92)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "2rem",
+          zIndex: 999999
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          core.Box,
+          {
+            maw: 900,
+            w: "100%",
+            p: "lg",
+            style: {
+              background: "rgba(20,20,24,0.75)",
+              border: "1px solid rgba(255,255,255,0.08)",
+              borderRadius: "10px",
+              boxShadow: "0 10px 40px rgba(0,0,0,0.6)"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { gap: "sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(core.Title, { order: 2, c: "red.5", children: "Dirk UI Crash" }),
+              /* @__PURE__ */ jsxRuntime.jsx(core.Text, { c: "dimmed", size: "sm", children: "The interface encountered a fatal error and stopped rendering." }),
+              /* @__PURE__ */ jsxRuntime.jsx(core.Code, { block: true, style: { maxHeight: 150, overflow: "auto" }, children: this.state.error?.message }),
+              /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "xs", c: "dimmed", children: "Check console for full stack trace" })
+            ] })
+          }
+        )
+      }
+    );
+  }
+};
+var useAdminToolStore = zustand.create((set, get) => ({
+  active: null,
+  begin: (spec) => new Promise((resolve) => {
+    const prev = get().active;
+    if (prev) prev.resolve(null);
+    set({ active: { ...spec, resolve } });
+  }),
+  resolveActive: (value) => {
+    const cur = get().active;
+    if (!cur) return;
+    cur.resolve(value);
+    set({ active: null });
+  },
+  cancelActive: () => {
+    const cur = get().active;
+    if (!cur) return;
+    cur.resolve(null);
+    set({ active: null });
+  }
+}));
+
+// src/components/AdminTools/AdminOverlays.tsx
+var listenerInstalled = false;
+function installNuiListener() {
+  if (listenerInstalled || typeof window === "undefined") return;
+  listenerInstalled = true;
+  window.addEventListener("message", (e) => {
+    const msg = e?.data;
+    if (!msg || typeof msg !== "object" || typeof msg.action !== "string") return;
+    const action = msg.action;
+    const cur = useAdminToolStore.getState().active;
+    if (!cur) return;
+    if (action === `${cur.id}_RESULT`) {
+      useAdminToolStore.getState().resolveActive(msg.data ?? null);
+    } else if (action === `${cur.id}_CANCELLED`) {
+      useAdminToolStore.getState().cancelActive();
+    }
+  });
+}
+var BODY_HIDE_STYLE_ID = "dirk-instruction-panel-style";
+var BODY_HIDE_ATTR = "data-dirk-instruction-active";
+var OVERLAY_ATTR = "data-dirk-instruction-overlay";
+function ensureBodyHideStyle() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(BODY_HIDE_STYLE_ID)) return;
+  const el = document.createElement("style");
+  el.id = BODY_HIDE_STYLE_ID;
+  el.textContent = `
+    body[${BODY_HIDE_ATTR}] > *:not([${OVERLAY_ATTR}]) {
+      visibility: hidden !important;
+      opacity: 0 !important;
+      pointer-events: none !important;
+    }
+  `;
+  document.head.appendChild(el);
+}
+function AdminOverlays() {
+  const active = useAdminToolStore((s) => s.active);
+  React4.useEffect(() => {
+    installNuiListener();
+  }, []);
+  React4.useEffect(() => {
+    if (!active || typeof document === "undefined") return;
+    ensureBodyHideStyle();
+    document.body.setAttribute(BODY_HIDE_ATTR, "");
+    return () => {
+      document.body.removeAttribute(BODY_HIDE_ATTR);
+    };
+  }, [active]);
+  return null;
 }
-var configPanelQueryClient = new reactQuery.QueryClient({
+fontawesomeSvgCore.library.add(freeSolidSvgIcons.fas, freeRegularSvgIcons.far, freeBrandsSvgIcons.fab);
+var dirkQueryClient = new reactQuery.QueryClient({
   defaultOptions: { queries: { staleTime: 3e4, gcTime: 5 * 6e4 } }
 });
-function NavItemButton({
-  icon: Icon,
-  label: label2,
-  active,
-  onClick
+function DirkProvider({ children, overideResourceName, themeOverride }) {
+  const {
+    primaryColor,
+    primaryShade,
+    customTheme,
+    game
+  } = useSettings();
+  localeStore((s) => s.locales);
+  const [scTheme, setScTheme] = React4.useState(null);
+  React4.useLayoutEffect(() => {
+    useSettings.setState({
+      overideResourceName
+    });
+  }, [overideResourceName]);
+  React4.useEffect(() => {
+    fetchNui("NUI_READY").catch(() => {
+    });
+    Promise.all([
+      fetchNui("GET_SETTINGS"),
+      fetchNui("GET_RESOURCE_VERSION", void 0, { version: "dev" })
+    ]).then(([data, resourceInfo]) => {
+      useSettings.setState({
+        ...data,
+        resourceVersion: resourceInfo?.version || "dev"
+      });
+    }).catch((err) => {
+      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);
+  });
+  useNuiEvent(
+    "UPDATE_SCRIPT_CONFIG",
+    (data) => {
+      if (!data || !data.config || typeof data.config !== "object") return;
+      try {
+        const inst = getScriptConfigInstance();
+        inst.store.setState((prev) => ({ ...prev, ...data.config }));
+      } catch {
+      }
+    }
+  );
+  React4.useEffect(() => {
+    let unsubscribe;
+    try {
+      const inst = getScriptConfigInstance();
+      setScTheme(inst.store.getState()?.theme ?? null);
+      const subscribable = inst.store;
+      if (typeof subscribable.subscribe === "function") {
+        unsubscribe = subscribable.subscribe((s) => {
+          setScTheme(s?.theme ?? null);
+        });
+      }
+      inst.fetchConfig?.().then((full) => {
+        if (full && typeof full === "object") {
+          setScTheme(full.theme ?? null);
+        }
+      }).catch(() => {
+      });
+    } catch {
+    }
+    return () => {
+      unsubscribe?.();
+    };
+  }, []);
+  const overrideActive = scTheme?.useOverride === true;
+  const effectivePrimaryColor = overrideActive ? scTheme.primaryColor ?? primaryColor : primaryColor;
+  const effectivePrimaryShade = overrideActive ? scTheme.primaryShade ?? primaryShade : primaryShade;
+  const effectiveCustomTheme = overrideActive ? scTheme.customTheme ?? customTheme : customTheme;
+  const mergedTheme = React4.useMemo(
+    () => mergeMantineThemeSafe(
+      { ...theme_default, primaryColor: effectivePrimaryColor, primaryShade: effectivePrimaryShade },
+      effectiveCustomTheme,
+      themeOverride
+    ),
+    [effectivePrimaryColor, effectivePrimaryShade, effectiveCustomTheme, themeOverride]
+  );
+  React4.useEffect(() => {
+    document.body.style.fontFamily = game === "rdr3" ? '"Red Dead", sans-serif' : '"Akrobat Regular", sans-serif';
+  }, [game]);
+  const content = isEnvBrowser() ? /* @__PURE__ */ jsxRuntime.jsx(
+    core.BackgroundImage,
+    {
+      w: "100vw",
+      h: "100vh",
+      src: game === "fivem" ? "https://i.ytimg.com/vi/TOxuNbXrO28/maxresdefault.jpg" : "https://raw.githubusercontent.com/Jump-On-Studios/RedM-jo_libs/refs/heads/main/source-repositories/Menu/public/assets/images/background_dev.jpg",
+      children
+    }
+  ) : children;
+  return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: dirkQueryClient, children: /* @__PURE__ */ jsxRuntime.jsx(core.MantineProvider, { theme: mergedTheme, defaultColorScheme: "dark", children: /* @__PURE__ */ jsxRuntime.jsxs(DirkErrorBoundary, { children: [
+    content,
+    /* @__PURE__ */ jsxRuntime.jsx(AdminOverlays, {})
+  ] }) }) });
+}
+function NavItemButton({
+  icon: Icon,
+  label: label2,
+  active,
+  onClick
 }) {
   const theme2 = core.useMantineTheme();
   const color = theme2.colors[theme2.primaryColor][5];
@@ -4511,8 +5015,8 @@ function ConfigJsonModal({
   const theme2 = core.useMantineTheme();
   const color = theme2.colors[theme2.primaryColor][5];
   const form = useForm();
-  const [json, setJson] = React6.useState(() => JSON.stringify(form.values, null, 2));
-  const [error2, setError] = React6.useState(null);
+  const [json, setJson] = React4.useState(() => JSON.stringify(form.values, null, 2));
+  const [error2, setError] = React4.useState(null);
   const handleSave = () => {
     try {
       const parsed = JSON.parse(json);
@@ -4541,7 +5045,7 @@ function ConfigJsonModal({
       setError(e.message);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { title: "Config JSON", icon: lucideReact.Code2, iconColor: color, onClose, width: "60vh", maxHeight: "80vh", zIndex: 200, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { title: locale("cfgpanel_json_title"), 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,
@@ -4569,7 +5073,7 @@ function ConfigJsonModal({
           style: { background: "transparent", border: `0.1vh solid ${theme2.colors.dark[6]}`, borderRadius: theme2.radius.xs, padding: `${theme2.spacing.xxs} ${theme2.spacing.xs}`, cursor: "pointer", display: "flex", alignItems: "center", gap: theme2.spacing.xxs },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { color: "rgba(255,255,255,0.4)" }),
-            /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xs", tt: "uppercase", lts: "0.05em", c: "rgba(255,255,255,0.4)", children: "Cancel" })
+            /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xs", tt: "uppercase", lts: "0.05em", c: "rgba(255,255,255,0.4)", children: locale("cfgpanel_cancel") })
           ]
         }
       ),
@@ -4582,7 +5086,7 @@ function ConfigJsonModal({
           style: { background: core.alpha(color, 0.14), border: `0.1vh solid ${core.alpha(color, 0.4)}`, borderRadius: theme2.radius.xs, padding: `${theme2.spacing.xxs} ${theme2.spacing.xs}`, cursor: "pointer", display: "flex", alignItems: "center", gap: theme2.spacing.xxs },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { color }),
-            /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xs", tt: "uppercase", lts: "0.05em", c: color, children: "Apply" })
+            /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xs", tt: "uppercase", lts: "0.05em", c: color, children: locale("cfgpanel_apply") })
           ]
         }
       )
@@ -4689,14 +5193,14 @@ function ConfigHistoryModal({
   const { getHistory } = getScriptConfigInstance();
   const theme2 = core.useMantineTheme();
   const color = theme2.colors[theme2.primaryColor][5];
-  const [queryInput, setQueryInput] = React6.useState("");
-  const [pathInput, setPathInput] = React6.useState("");
-  const [adminInput, setAdminInput] = React6.useState("");
-  const [query, setQuery] = React6.useState("");
-  const [path, setPath] = React6.useState("");
-  const [admin, setAdmin] = React6.useState("");
-  const [expandedKey, setExpandedKey] = React6.useState(null);
-  const filters = React6.useMemo(() => ({ query, path, admin }), [query, path, admin]);
+  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 historyQuery = reactQuery.useInfiniteQuery({
     queryKey: ["scriptConfigHistory", filters],
     initialPageParam: 0,
@@ -4723,7 +5227,7 @@ function ConfigHistoryModal({
       historyQuery.fetchNextPage();
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { title: "Config History", icon: lucideReact.History, iconColor: color, onClose, width: "88vh", maxHeight: "82vh", zIndex: 260, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { title: locale("cfgpanel_history_title"), 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 } }),
@@ -4766,7 +5270,7 @@ function ConfigHistoryModal({
         style: { background: "transparent", border: `0.1vh solid ${theme2.colors.dark[6]}`, borderRadius: theme2.radius.xs, padding: `${theme2.spacing.xxs} ${theme2.spacing.xs}`, cursor: "pointer", display: "flex", alignItems: "center", gap: theme2.spacing.xxs },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { color: "rgba(255,255,255,0.4)", size: "1.5vh" }),
-          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xs", tt: "uppercase", lts: "0.05em", c: "rgba(255,255,255,0.4)", children: "Close" })
+          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xs", tt: "uppercase", lts: "0.05em", c: "rgba(255,255,255,0.4)", children: locale("cfgpanel_close") })
         ]
       }
     ) })
@@ -4791,12 +5295,12 @@ function ConfigPanelInner({
   const theme2 = core.useMantineTheme();
   const color = theme2.colors[theme2.primaryColor][5];
   const version = useSettings((s) => s.resourceVersion);
-  const [activeTab, setActiveTab] = React6.useState(navItems[0]?.id ?? "");
-  const firstMountRef = React6.useRef(true);
-  const [jsonOpen, setJsonOpen] = React6.useState(false);
-  const [historyOpen, setHistoryOpen] = React6.useState(false);
-  const [resetOpen, setResetOpen] = React6.useState(false);
-  const [pendingAction, setPendingAction] = React6.useState(null);
+  const [activeTab, setActiveTab] = useAdminState("__dirkConfigPanel:activeTab", navItems[0]?.id ?? "");
+  const firstMountRef = React4.useRef(true);
+  const [jsonOpen, setJsonOpen] = React4.useState(false);
+  const [historyOpen, setHistoryOpen] = React4.useState(false);
+  const [resetOpen, setResetOpen] = React4.useState(false);
+  const [pendingAction, setPendingAction] = React4.useState(null);
   const changedCount = form.changedCount ?? 0;
   const isDirty = changedCount > 0;
   const goBack = () => fetchNui("CONFIG_PANEL_BACK");
@@ -4807,7 +5311,7 @@ function ConfigPanelInner({
     }
     goBack();
   };
-  React6.useEffect(() => {
+  React4.useEffect(() => {
     function handleKeyDown(e) {
       if (e.key !== "Escape") return;
       if (isDirty) {
@@ -4826,16 +5330,16 @@ function ConfigPanelInner({
     /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: resetOpen && /* @__PURE__ */ jsxRuntime.jsx(
       ConfirmModal,
       {
-        title: "Reset to Defaults",
-        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",
+        title: locale("cfgpanel_reset_title"),
+        description: locale("cfgpanel_reset_desc"),
+        confirmLabel: locale("cfgpanel_reset_confirm"),
         confirmText: resetConfirmText,
         onConfirm: async () => {
           setResetOpen(false);
           const result = await resetConfig();
           if (result?.success) {
-            const { store } = getScriptConfigInstance();
-            form.reinitialize(cloneConfig(store.getState()));
+            const { store: store2 } = getScriptConfigInstance();
+            form.reinitialize(cloneConfig(store2.getState()));
             notifications.notifications.show({
               color: "green",
               title: locale("ConfigResetSuccessTitle"),
@@ -4860,9 +5364,9 @@ function ConfigPanelInner({
     /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: pendingAction !== null && /* @__PURE__ */ jsxRuntime.jsx(
       ConfirmModal,
       {
-        title: "Discard Unsaved Changes?",
-        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",
+        title: locale("cfgpanel_discard_title"),
+        description: pendingAction === "back" ? locale("cfgpanel_discard_desc_back") : locale("cfgpanel_discard_desc_close"),
+        confirmLabel: pendingAction === "back" ? locale("cfgpanel_discard_confirm_back") : locale("cfgpanel_discard_confirm_close"),
         onConfirm: () => {
           const action = pendingAction;
           setPendingAction(null);
@@ -4900,7 +5404,7 @@ function ConfigPanelInner({
               /* @__PURE__ */ jsxRuntime.jsx(
                 framerMotion.motion.button,
                 {
-                  title: "Back to script list",
+                  title: locale("cfgpanel_back_title"),
                   onClick: handleBack,
                   whileHover: { background: core.alpha(color, 0.16), borderColor: core.alpha(color, 0.45) },
                   whileTap: { scale: 0.95 },
@@ -4928,7 +5432,7 @@ function ConfigPanelInner({
               /* @__PURE__ */ jsxRuntime.jsx(
                 framerMotion.motion.button,
                 {
-                  title: "Undo",
+                  title: locale("cfgpanel_undo"),
                   onClick: () => form.canBack && form.back(),
                   disabled: !form.canBack,
                   whileHover: form.canBack ? { background: "rgba(255,255,255,0.07)" } : void 0,
@@ -4940,7 +5444,7 @@ function ConfigPanelInner({
               /* @__PURE__ */ jsxRuntime.jsx(
                 framerMotion.motion.button,
                 {
-                  title: "Redo",
+                  title: locale("cfgpanel_redo"),
                   onClick: () => form.canForward && form.forward(),
                   disabled: !form.canForward,
                   whileHover: form.canForward ? { background: "rgba(255,255,255,0.07)" } : void 0,
@@ -4952,7 +5456,7 @@ function ConfigPanelInner({
               /* @__PURE__ */ jsxRuntime.jsx(
                 framerMotion.motion.button,
                 {
-                  title: isSaving ? "Saving..." : isDirty ? `Save (${changedCount})` : "Save",
+                  title: isSaving ? locale("cfgpanel_saving") : isDirty ? `${locale("cfgpanel_save")} (${changedCount})` : locale("cfgpanel_save"),
                   onClick: () => isDirty && !isSaving && form.submit(),
                   disabled: !isDirty || isSaving,
                   whileHover: isDirty && !isSaving ? { background: core.alpha(color, 0.25), borderColor: core.alpha(color, 0.5) } : void 0,
@@ -4964,7 +5468,7 @@ function ConfigPanelInner({
               /* @__PURE__ */ jsxRuntime.jsx(
                 framerMotion.motion.button,
                 {
-                  title: "History",
+                  title: locale("cfgpanel_history"),
                   onClick: () => setHistoryOpen(true),
                   whileHover: { background: core.alpha("#22d3ee", 0.16), borderColor: core.alpha("#22d3ee", 0.5) },
                   whileTap: { scale: 0.97 },
@@ -4985,7 +5489,7 @@ function ConfigPanelInner({
                   style: { width: "100%", background: "transparent", border: `0.1vh solid ${isDirty ? core.alpha("#f97316", 0.35) : core.alpha(theme2.colors.dark[5], 0.3)}`, borderRadius: theme2.radius.xs, padding: "0.65vh 0.8vh", cursor: isDirty ? "pointer" : "default", display: "flex", alignItems: "center", gap: "0.55vh", opacity: isDirty ? 1 : 0.35, transition: "opacity 0.2s" },
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { color: isDirty ? "#f97316" : "rgba(255,255,255,0.35)", size: "1.6vh" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.06em", c: isDirty ? "#f97316" : "rgba(255,255,255,0.35)", children: "Discard" })
+                    /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.06em", c: isDirty ? "#f97316" : "rgba(255,255,255,0.35)", children: locale("cfgpanel_discard") })
                   ]
                 }
               ),
@@ -4999,7 +5503,7 @@ function ConfigPanelInner({
                   style: { width: "100%", background: core.alpha(color, 0.07), border: `0.1vh solid ${core.alpha(color, 0.28)}`, borderRadius: theme2.radius.xs, padding: "0.65vh 0.8vh", cursor: "pointer", display: "flex", alignItems: "center", gap: "0.55vh" },
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2, { color, size: "1.6vh" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.06em", c: color, children: "Manual Edit" })
+                    /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.06em", c: color, children: locale("cfgpanel_manual_edit") })
                   ]
                 }
               ),
@@ -5012,12 +5516,13 @@ function ConfigPanelInner({
                   style: { width: "100%", background: core.alpha("#ef4444", 0.07), border: `0.1vh solid ${core.alpha("#ef4444", 0.25)}`, borderRadius: theme2.radius.xs, padding: "0.65vh 0.8vh", cursor: "pointer", display: "flex", alignItems: "center", gap: "0.55vh" },
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { color: "#ef4444", size: "1.6vh" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.06em", c: "#ef4444", children: "Reset Defaults" })
+                    /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.06em", c: "#ef4444", children: locale("cfgpanel_reset_defaults") })
                   ]
                 }
               ),
               version && /* @__PURE__ */ jsxRuntime.jsxs(core.Text, { size: "0.95vh", c: "dimmed", ta: "center", style: { letterSpacing: "0.04em", opacity: 0.8 }, children: [
-                "Version ",
+                locale("cfgpanel_version"),
+                " ",
                 version
               ] })
             ] })
@@ -5048,7 +5553,7 @@ function cloneConfig(value) {
 function ServerOnlyFetcher() {
   const { fetchConfig } = getScriptConfigInstance();
   const { reinitialize } = useFormActions();
-  React6.useEffect(() => {
+  React4.useEffect(() => {
     let cancelled = false;
     fetchConfig().then((full) => {
       if (!cancelled && full) reinitialize(full);
@@ -5063,13 +5568,13 @@ function ServerOnlyFetcher() {
 var defaultOnClose = () => fetchNui("CLOSE_ADMIN_SECTION");
 function ConfigPanel(props) {
   const { open, onClose = defaultOnClose } = props;
-  const { store, updateConfig } = getScriptConfigInstance();
-  const [isSaving, setIsSaving] = React6.useState(false);
+  const { store: store2, updateConfig } = getScriptConfigInstance();
+  const [isSaving, setIsSaving] = React4.useState(false);
   if (!open) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: configPanelQueryClient, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     FormProvider,
     {
-      initialValues: cloneConfig(store.getState()),
+      initialValues: cloneConfig(store2.getState()),
       onSubmit: async (form) => {
         if (isSaving) return;
         setIsSaving(true);
@@ -5077,7 +5582,7 @@ function ConfigPanel(props) {
           const result = await updateConfig(form.values);
           if (result?.success) {
             form.reinitialize(cloneConfig(form.values));
-            configPanelQueryClient.invalidateQueries({ queryKey: ["scriptConfigHistory"] });
+            dirkQueryClient.invalidateQueries({ queryKey: ["scriptConfigHistory"] });
             useMissingItemsAudit.getState().refresh();
             notifications.notifications.show({
               color: "green",
@@ -5087,7 +5592,7 @@ function ConfigPanel(props) {
             });
             return;
           }
-          form.reinitialize(cloneConfig(store.getState()));
+          form.reinitialize(cloneConfig(store2.getState()));
           const err = result?._error || "Unknown";
           console.warn(`[ConfigPanel] config save failed: ${err}`);
           const titleKey = err === "NoPermission" ? "ConfigSaveNoPermissionTitle" : err === "VersionConflict" ? "ConfigSaveVersionConflictTitle" : err === "NotReady" ? "ConfigSaveNotReadyTitle" : "ConfigSaveFailedTitle";
@@ -5118,9 +5623,9 @@ function ConfigPanel(props) {
 }
 var MISSING_COLOR = "#f59e0b";
 function LazyImage({ src, style }) {
-  const [visible, setVisible] = React6.useState(false);
-  const ref = React6.useRef(null);
-  React6.useEffect(() => {
+  const [visible, setVisible] = React4.useState(false);
+  const ref = React4.useRef(null);
+  React4.useEffect(() => {
     const observer = new IntersectionObserver(([entry]) => {
       if (entry.isIntersecting) {
         setVisible(true);
@@ -5135,7 +5640,7 @@ function LazyImage({ src, style }) {
 function SelectItem(props) {
   const invItems = useItems();
   const isMissing = !!props.value && !invItems[props.value];
-  const formattedItems = React6.useMemo(() => {
+  const formattedItems = React4.useMemo(() => {
     const seen = /* @__PURE__ */ new Set();
     const list = useItemsList(props.excludeItemNames ?? []).filter((item) => {
       if (seen.has(item.name)) return false;
@@ -5225,9 +5730,9 @@ function PositionPicker(props) {
   } = props;
   const theme2 = core.useMantineTheme();
   const color = theme2.colors[theme2.primaryColor][5];
-  const [previewing, setPreviewing] = React6.useState(false);
-  const previewingRef = React6.useRef(false);
-  React6.useEffect(() => {
+  const [previewing, setPreviewing] = React4.useState(false);
+  const previewingRef = React4.useRef(false);
+  React4.useEffect(() => {
     return () => {
       if (previewingRef.current) {
         fetchNui(stopPreviewEvent, { relativeTo }).catch(() => {
@@ -5565,7 +6070,7 @@ function Vector4DeleteButton({
     }
   );
 }
-var GroupSelectContext = React6.createContext(null);
+var GroupSelectContext = React4.createContext(null);
 function GroupSelect({
   value,
   onChange,
@@ -5581,9 +6086,12 @@ function filterByType(jobs, gangs, type) {
   return [...jobs, ...gangs];
 }
 function GroupName(props) {
-  const ctx = React6.useContext(GroupSelectContext);
+  const ctx = React4.useContext(GroupSelectContext);
   const jobs = useFrameworkGroups((s) => s.jobs);
   const gangs = useFrameworkGroups((s) => s.gangs);
+  React4.useEffect(() => {
+    ensureFrameworkGroups();
+  }, []);
   const inCompound = ctx !== null;
   const currentValue = inCompound ? ctx.value.name : props.value;
   const filterType = inCompound ? ctx.type : props.type;
@@ -5617,12 +6125,15 @@ function GroupName(props) {
   );
 }
 function GroupRank(props) {
-  const ctx = React6.useContext(GroupSelectContext);
+  const ctx = React4.useContext(GroupSelectContext);
   if (ctx === null) {
     throw new Error("<GroupRank> must be a child of <GroupSelect>");
   }
   const jobs = useFrameworkGroups((s) => s.jobs);
   const gangs = useFrameworkGroups((s) => s.gangs);
+  React4.useEffect(() => {
+    ensureFrameworkGroups();
+  }, []);
   const all = [...jobs, ...gangs];
   const selectedGroup = all.find((g) => g.name === ctx.value.name) ?? null;
   const grades = selectedGroup?.grades ?? [];
@@ -5653,9 +6164,9 @@ function GroupRank(props) {
 }
 GroupSelect.Name = GroupName;
 GroupSelect.Rank = GroupRank;
-var KeyBindContext = React6.createContext(null);
+var KeyBindContext = React4.createContext(null);
 function useKeyBindContext() {
-  const ctx = React6.useContext(KeyBindContext);
+  const ctx = React4.useContext(KeyBindContext);
   if (!ctx) {
     throw new Error("FiveMKeyBindInput.* must be used inside <FiveMKeyBindInput>");
   }
@@ -5814,7 +6325,7 @@ function AsyncSaveButton({
   style
 }) {
   const theme2 = core.useMantineTheme();
-  const [state, setState] = React6.useState("idle");
+  const [state, setState] = React4.useState("idle");
   const handleClick = async () => {
     if (state === "pending") return;
     setState("pending");
@@ -5954,10 +6465,10 @@ function TestBed({
   title = "TestBed",
   placement = "top-left"
 }) {
-  const [open, setOpen] = React6.useState(false);
-  const itemsRef = React6.useRef(items);
+  const [open, setOpen] = React4.useState(false);
+  const itemsRef = React4.useRef(items);
   itemsRef.current = items;
-  React6.useEffect(() => {
+  React4.useEffect(() => {
     if (!isEnvBrowser() || disablePersistence) return;
     const persisted = loadPersistedState(storageKey);
     itemsRef.current.forEach((item) => {
@@ -6294,7 +6805,7 @@ function SwatchTile({
   isPrimary,
   onChange
 }) {
-  const [opened, setOpened] = React6.useState(false);
+  const [opened, setOpened] = React4.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(core.Popover, { opened, onChange: setOpened, position: "bottom", withArrow: true, zIndex: 1e4, children: [
     /* @__PURE__ */ jsxRuntime.jsx(core.Popover.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -6964,9 +7475,9 @@ var NOT_CONFIGURED_TINT = "rgba(255,184,0,0.35)";
 var NOT_CONFIGURED_FILL = "rgba(255,184,0,0.05)";
 function DiscordRoleSelect(props) {
   const { endpoint, label: label2, size = "xs", placeholder, disabled, style, styles } = props;
-  const [roles, setRoles] = React6.useState(null);
-  const [loading, setLoading] = React6.useState(false);
-  const [errorCode, setErrorCode] = React6.useState(null);
+  const [roles, setRoles] = React4.useState(null);
+  const [loading, setLoading] = React4.useState(false);
+  const [errorCode, setErrorCode] = React4.useState(null);
   const refresh = async () => {
     setLoading(true);
     try {
@@ -6992,10 +7503,10 @@ function DiscordRoleSelect(props) {
       setLoading(false);
     }
   };
-  React6.useEffect(() => {
+  React4.useEffect(() => {
     refresh();
   }, [endpoint]);
-  const rolesById = React6.useMemo(() => {
+  const rolesById = React4.useMemo(() => {
     const map = {};
     for (const r of roles ?? []) map[r.id] = r;
     return map;
@@ -7161,9 +7672,9 @@ function FrameworkHint({ framework }) {
 }
 function AccountSelect(props) {
   const { endpoint, label: label2, size = "xs", placeholder, disabled, style, styles, hideFrameworkHint } = props;
-  const [accounts, setAccounts] = React6.useState(null);
-  const [framework, setFramework] = React6.useState(void 0);
-  const [loading, setLoading] = React6.useState(false);
+  const [accounts, setAccounts] = React4.useState(null);
+  const [framework, setFramework] = React4.useState(void 0);
+  const [loading, setLoading] = React4.useState(false);
   const refresh = async () => {
     setLoading(true);
     try {
@@ -7188,10 +7699,10 @@ function AccountSelect(props) {
       setLoading(false);
     }
   };
-  React6.useEffect(() => {
+  React4.useEffect(() => {
     refresh();
   }, [endpoint]);
-  const accountsByName = React6.useMemo(() => {
+  const accountsByName = React4.useMemo(() => {
     const map = {};
     for (const a of accounts ?? []) map[a.name] = a;
     if (props.multi) {
@@ -7268,349 +7779,831 @@ function AccountSelect(props) {
     !hideFrameworkHint && /* @__PURE__ */ jsxRuntime.jsx(FrameworkHint, { framework })
   ] });
 }
-function useTornEdges() {
-  const game = useSettings((state) => state.game);
-  return game === "rdr3" ? "torn-edge-wrapper" : "";
+var BODY_HIDE_STYLE_ID2 = "dirk-instruction-panel-style";
+var BODY_HIDE_ATTR2 = "data-dirk-instruction-active";
+var OVERLAY_ATTR2 = "data-dirk-instruction-overlay";
+function ensureBodyHideStyle2() {
+  if (document.getElementById(BODY_HIDE_STYLE_ID2)) return;
+  const el = document.createElement("style");
+  el.id = BODY_HIDE_STYLE_ID2;
+  el.textContent = `
+    body[${BODY_HIDE_ATTR2}] > *:not([${OVERLAY_ATTR2}]) {
+      visibility: hidden !important;
+      opacity: 0 !important;
+      pointer-events: none !important;
+    }
+  `;
+  document.head.appendChild(el);
 }
-function TornEdgeSVGFilter() {
+function InstructionPanel({
+  visible,
+  title,
+  hint,
+  keys,
+  icon: Icon = lucideReact.MapPin,
+  hideRestOfAdmin = true
+}) {
+  const theme2 = core.useMantineTheme();
+  const pc = theme2.colors[theme2.primaryColor];
+  React4.useEffect(() => {
+    if (!visible || !hideRestOfAdmin) return;
+    ensureBodyHideStyle2();
+    document.body.setAttribute(BODY_HIDE_ATTR2, "");
+    return () => {
+      document.body.removeAttribute(BODY_HIDE_ATTR2);
+    };
+  }, [visible, hideRestOfAdmin]);
+  if (!visible) return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ...{ [OVERLAY_ATTR2]: "" },
+        style: { position: "fixed", inset: 0, pointerEvents: "none", zIndex: 1e4 },
+        children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            initial: { opacity: 0, y: 12, scale: 0.92 },
+            animate: { opacity: 1, y: 0, scale: 1 },
+            exit: { opacity: 0, y: 12, scale: 0.92 },
+            transition: { duration: 0.25, ease: "easeInOut" },
+            style: { position: "absolute", bottom: "3vh", right: "3vh", userSelect: "none" },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              core.Flex,
+              {
+                direction: "column",
+                gap: "0.8vh",
+                style: {
+                  background: core.alpha(theme2.colors.dark[9], 0.55),
+                  border: "0.1vh solid rgba(255,255,255,0.07)",
+                  borderRadius: theme2.radius.sm,
+                  boxShadow: "0 0.74vh 2.96vh rgba(0,0,0,0.5)",
+                  padding: "1.4vh 1.6vh",
+                  minWidth: "22vh",
+                  maxWidth: "28vh"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", gap: "0.6vh", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "1.6vh", color: pc[6], strokeWidth: 2.5 }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      core.Text,
+                      {
+                        style: {
+                          fontFamily: "Akrobat Bold, sans-serif",
+                          fontSize: "1.7vh",
+                          fontWeight: 700,
+                          letterSpacing: "0.14em",
+                          textTransform: "uppercase",
+                          color: pc[6],
+                          textShadow: `0 0 0.8vh ${core.alpha(pc[7], 0.5)}, 0 0 1.6vh ${core.alpha(pc[9], 0.3)}`
+                        },
+                        children: title
+                      }
+                    )
+                  ] }),
+                  (hint || keys && keys.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "0.1vh", background: "rgba(255,255,255,0.06)", margin: "0.1vh 0" } }),
+                  hint && /* @__PURE__ */ jsxRuntime.jsx(
+                    core.Text,
+                    {
+                      style: {
+                        fontFamily: "Akrobat Bold, sans-serif",
+                        fontSize: "1.05vh",
+                        color: "rgba(255,255,255,0.45)",
+                        letterSpacing: "0.06em",
+                        textTransform: "uppercase",
+                        lineHeight: 1.4
+                      },
+                      children: hint
+                    }
+                  ),
+                  keys && keys.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    hint && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "0.1vh", background: "rgba(255,255,255,0.06)", margin: "0.1vh 0" } }),
+                    /* @__PURE__ */ jsxRuntime.jsx(core.Flex, { direction: "column", gap: "0.5vh", children: keys.map((k, i) => /* @__PURE__ */ jsxRuntime.jsx(InstructionKeyRow, { keyLabel: k.key, action: k.action }, i)) })
+                  ] })
+                ]
+              }
+            )
+          },
+          "instruction-card"
+        ) })
+      }
+    ),
+    document.body
+  );
+}
+function renderKeyContent(keyLabel) {
+  const normalized = keyLabel.trim().toUpperCase();
+  if (normalized === "LMB") return /* @__PURE__ */ jsxRuntime.jsx(MouseIcon, { side: "left" });
+  if (normalized === "RMB") return /* @__PURE__ */ jsxRuntime.jsx(MouseIcon, { side: "right" });
+  if (normalized === "BACKSPACE" || keyLabel === "\u232B") return /* @__PURE__ */ jsxRuntime.jsx(BackspaceIcon, {});
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
+    core.Text,
     {
-      style: { position: "absolute", width: 0, height: 0, pointerEvents: "none" },
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: "torn-edge-filter", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "feTurbulence",
-          {
-            type: "fractalNoise",
-            baseFrequency: "0.018 0.022",
-            numOctaves: "5",
-            seed: "9",
-            result: "noise1"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "feTurbulence",
-          {
-            type: "fractalNoise",
-            baseFrequency: "0.08 0.12",
-            numOctaves: "2",
-            seed: "3",
-            result: "noise2"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("feBlend", { in: "noise1", in2: "noise2", mode: "multiply", result: "combinedNoise" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "feDisplacementMap",
-          {
-            in: "SourceGraphic",
-            in2: "combinedNoise",
-            scale: "52",
-            xChannelSelector: "R",
-            yChannelSelector: "G",
-            result: "displaced"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "0.8", in: "displaced", result: "blurred" }),
-        /* @__PURE__ */ jsxRuntime.jsx("feComponentTransfer", { in: "blurred", result: "alphaFade", children: /* @__PURE__ */ jsxRuntime.jsx("feFuncA", { type: "gamma", amplitude: "1", exponent: "1.3", offset: "-0.05" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("feMorphology", { operator: "erode", radius: "0.4", in: "alphaFade", result: "eroded" }),
-        /* @__PURE__ */ jsxRuntime.jsx("feMerge", { children: /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", { in: "eroded" }) })
-      ] }) })
+      style: {
+        fontFamily: "Akrobat Bold, sans-serif",
+        fontSize: "1.2vh",
+        color: "rgba(255,255,255,0.85)",
+        lineHeight: 1,
+        padding: "0 0.3vh"
+      },
+      children: keyLabel
     }
   );
 }
-var label = {
-  fontSize: "var(--mantine-font-size-xs)",
-  fontFamily: "Akrobat Bold",
-  letterSpacing: "0.05em",
-  textTransform: "uppercase"
-};
-var error = {
-  fontSize: "var(--mantine-font-size-xs)",
-  fontFamily: "Akrobat Regular"
-};
-var description = {
-  fontSize: "var(--mantine-font-size-xs)"
-};
-var genericInputStyles = {
-  styles: {
-    label,
-    error,
-    description,
-    input: {
-      background: "rgba(255,255,255,0.04)",
-      border: "0.1vh solid rgba(255,255,255,0.08)",
-      color: "rgba(255,255,255,0.85)",
-      minHeight: "4vh"
-    }
-  }
-};
-var theme = core.createTheme({
-  primaryColor: "dirk",
-  primaryShade: 9,
-  defaultRadius: "xs",
-  fontFamily: "Akrobat Regular, sans-serif",
-  radius: {
-    xxs: "0.3vh",
-    xs: "0.5vh",
-    sm: "0.75vh",
-    md: "1vh",
-    lg: "1.5vh",
-    xl: "2vh",
-    xxl: "3vh"
-  },
-  fontSizes: {
-    xxs: "1.2vh",
-    xs: "1.5vh",
-    sm: "1.8vh",
-    md: "2.2vh",
-    lg: "2.8vh",
-    xl: "3.3vh",
-    xxl: "3.8vh"
-  },
-  lineHeights: {
-    xxs: "1.4vh",
-    xs: "1.8vh",
-    sm: "2.2vh",
-    md: "2.8vh",
-    lg: "3.3vh",
-    xl: "3.8vh"
-  },
-  spacing: {
-    xxs: "0.5vh",
-    xs: "0.75vh",
-    sm: "1.5vh",
-    md: "2vh",
-    lg: "3vh",
-    xl: "4vh",
-    xxl: "5vh"
-  },
-  components: {
-    Progress: {
-      styles: {
-        label: {
-          fontFamily: "Akrobat Bold",
-          letterSpacing: "0.05em",
+function InstructionKeyRow({ keyLabel, action }) {
+  const normalized = keyLabel.trim().toUpperCase();
+  const isIconKey = normalized === "LMB" || normalized === "RMB" || normalized === "BACKSPACE" || keyLabel === "\u232B";
+  const minWidth = isIconKey ? "2.6vh" : "2.4vh";
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", gap: "0.6vh", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          minWidth,
+          height: "2.4vh",
+          padding: "0 0.4vh",
+          borderRadius: "0.3vh",
+          border: "0.15vh solid rgba(255,255,255,0.35)",
+          background: "rgba(255,255,255,0.06)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          opacity: 0.85,
+          filter: "drop-shadow(0 0 0.3vh rgba(0,0,0,0.5))",
+          flexShrink: 0,
+          boxSizing: "border-box"
+        },
+        children: renderKeyContent(keyLabel)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      core.Text,
+      {
+        style: {
+          fontFamily: "Akrobat Bold, sans-serif",
+          fontSize: "1.05vh",
+          color: "rgba(255,255,255,0.45)",
+          letterSpacing: "0.06em",
           textTransform: "uppercase"
         },
-        root: {
-          backgroundColor: "rgba(77, 77, 77, 0.4)"
-        }
+        children: action
       }
-    },
-    Input: genericInputStyles,
-    TextInput: genericInputStyles,
-    NumberInput: genericInputStyles,
-    Select: genericInputStyles,
-    MultiSelect: genericInputStyles,
-    Textarea: genericInputStyles,
-    ColorInput: genericInputStyles,
-    DateInput: genericInputStyles,
-    Pill: {
-      styles: (theme2) => ({
-        root: {
-          display: "inline-flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          backgroundColor: "rgba(76, 76, 76, 0.3)",
-          height: "fit-content",
-          textTransform: "uppercase",
-          letterSpacing: "0.05em",
-          fontFamily: "Akrobat Bold",
-          fontSize: "1.25vh",
-          borderRadius: theme2.defaultRadius,
-          paddingBottom: "0.5vh",
-          paddingTop: "0.5vh"
-        }
-      })
+    )
+  ] });
+}
+function MouseIcon({ side }) {
+  const stroke = "rgba(255,255,255,0.85)";
+  const fillActive = "rgba(255,255,255,0.85)";
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 16 22", width: "1.4vh", height: "1.9vh", fill: "none", stroke, strokeWidth: "1.4", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "1", width: "14", height: "20", rx: "6" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "8", y1: "1", x2: "8", y2: "9" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: side === "left" ? "M 7.4 1.6 L 2 1.6 A 5 5 0 0 0 1 6 L 1 9 L 7.4 9 Z" : "M 8.6 1.6 L 14 1.6 A 5 5 0 0 1 15 6 L 15 9 L 8.6 9 Z",
+        fill: fillActive,
+        stroke: "none"
+      }
+    )
+  ] });
+}
+function BackspaceIcon() {
+  const stroke = "rgba(255,255,255,0.85)";
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 22 16", width: "1.7vh", height: "1.3vh", fill: "none", stroke, strokeWidth: "1.4", strokeLinejoin: "round", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 21 2 L 8 2 L 2 8 L 8 14 L 21 14 Z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "11", y1: "6", x2: "16", y2: "11" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "6", x2: "11", y2: "11" })
+  ] });
+}
+function WorldPositionPicker({ value, onChange, compact, setOnly, gotoOnly }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    !gotoOnly && /* @__PURE__ */ jsxRuntime.jsx(WorldPositionSetButton2, { value, onChange, compact }),
+    !setOnly && /* @__PURE__ */ jsxRuntime.jsx(WorldPositionGotoButton2, { value, compact })
+  ] });
+}
+function WorldPositionSetButton2({
+  value,
+  onChange,
+  compact
+}) {
+  const theme2 = core.useMantineTheme();
+  const color = theme2.colors[theme2.primaryColor][5];
+  const begin = useAdminToolStore((s) => s.begin);
+  const onClick = async () => {
+    const instructions = {
+      title: locale("PickPositionTitle") || "Pick Position",
+      hint: locale("PickPositionHint") || "Walk to where you want this set",
+      keys: [
+        { key: "E", action: locale("Set") || "Set" },
+        { key: "\u232B", action: locale("Cancel") || "Cancel" }
+      ]
+    };
+    const pendingResult = begin({ id: "capturePosition", ...instructions });
+    fetchNui("ADMIN_TOOL_BEGIN", { id: "capturePosition", instructions }).catch(() => {
+      useAdminToolStore.getState().cancelActive();
+    });
+    const result = await pendingResult;
+    if (result) onChange(result);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { label: locale("SetWorldTooltip"), position: "top", withArrow: true, withinPortal: true, zIndex: 2e3, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    framerMotion.motion.button,
+    {
+      onClick,
+      whileHover: { background: core.alpha(color, 0.18) },
+      whileTap: { scale: 0.95 },
+      style: {
+        background: core.alpha(color, 0.1),
+        border: `0.1vh solid ${core.alpha(color, 0.35)}`,
+        borderRadius: theme2.radius.xs,
+        padding: compact ? "0.25vh 0.6vh" : "0.5vh 0.8vh",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        gap: compact ? "0.3vh" : "0.4vh"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Crosshair, { size: compact ? "1.1vh" : "1.3vh", color }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.06em", c: color, children: locale("Set") })
+      ]
     }
-  },
-  colors: {
-    dirk: [
-      "#ffffff",
-      "#f3fce9",
-      "#dbf5bd",
-      "#c3ee91",
-      "#ace765",
-      "#94e039",
-      "#7ac61f",
-      "#5f9a18",
-      "#29420a",
-      "#446e11"
-    ]
-  }
-});
-var theme_default = theme;
-
-// src/utils/mergeMantineTheme.ts
-var isValidColorScale = (v) => Array.isArray(v) && v.length === 10 && v.every((shade) => typeof shade === "string");
-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;
+  ) });
+}
+function WorldPositionGotoButton2({
+  value,
+  compact
+}) {
+  const theme2 = core.useMantineTheme();
+  const color = theme2.colors[theme2.primaryColor][5];
+  const onClick = () => {
+    fetchNui("ADMIN_TOOL_INVOKE", { id: "gotoCoord", value }).catch(() => {
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { label: locale("GotoWorldTooltip"), position: "top", withArrow: true, withinPortal: true, zIndex: 2e3, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    framerMotion.motion.button,
+    {
+      onClick,
+      whileHover: { background: core.alpha(color, 0.18) },
+      whileTap: { scale: 0.95 },
+      style: {
+        background: core.alpha(color, 0.1),
+        border: `0.1vh solid ${core.alpha(color, 0.35)}`,
+        borderRadius: theme2.radius.xs,
+        padding: compact ? "0.25vh 0.6vh" : "0.5vh 0.8vh",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        gap: compact ? "0.3vh" : "0.4vh"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { size: compact ? "1.1vh" : "1.3vh", color }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.06em", c: color, children: locale("Goto") })
+      ]
     }
-  }
+  ) });
+}
+function usePlayers(opts = {}) {
+  const {
+    includeOffline = false,
+    search = "",
+    limit = 50,
+    staleTimeMs,
+    refetchIntervalMs
+  } = opts;
+  const query = reactQuery.useQuery({
+    queryKey: includeOffline ? ["dirk:players", "search", search.trim().toLowerCase(), limit] : ["dirk:players", "online"],
+    queryFn: async () => {
+      const toolId = includeOffline ? "searchPlayers" : "getOnlinePlayers";
+      const payload = includeOffline ? { id: toolId, value: { search: search.trim(), limit } } : { id: toolId };
+      const result = await fetchNui(
+        "ADMIN_TOOL_QUERY",
+        payload,
+        // Browser-dev fallback. Returns a couple of mock players so the
+        // dev shell isn't blank.
+        includeOffline ? [
+          { id: 1, citizenId: "ABC12345", name: "Dev User", charName: "John Doe", online: true },
+          { id: null, citizenId: "DEF67890", name: "", charName: "Jane Offline", online: false }
+        ] : [
+          { id: 1, citizenId: "ABC12345", name: "Dev User", charName: "John Doe", online: true }
+        ]
+      );
+      return Array.isArray(result) ? result : [];
+    },
+    staleTime: staleTimeMs ?? (includeOffline ? 3e4 : 5e3),
+    gcTime: 5 * 6e4,
+    refetchInterval: refetchIntervalMs ?? false,
+    refetchOnWindowFocus: false,
+    placeholderData: includeOffline ? reactQuery.keepPreviousData : void 0
+  });
   return {
-    ...base,
-    ...override,
-    colors: {
-      ...colors,
-      ...override?.colors ?? {}
+    players: query.data ?? [],
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    error: query.error ?? null,
+    refresh: () => query.refetch()
+  };
+}
+var DEBOUNCE_MS = 300;
+var ONLINE_COLOR = "#3FA83F";
+var OFFLINE_COLOR = "#E54141";
+function PlayerSelect({
+  value,
+  onChange,
+  includeOffline = false,
+  limit = 50,
+  searchable: searchableProp,
+  placeholder,
+  nothingFoundMessage: nothingFoundMessageProp,
+  loadingLabel = "Loading\u2026",
+  onlineLabel = "Online",
+  offlineLabel = "Offline",
+  refreshLabel = "Refresh player list",
+  ...rest
+}) {
+  const theme2 = core.useMantineTheme();
+  const color = theme2.colors[theme2.primaryColor][5];
+  const [searchInput, setSearchInput] = React4.useState("");
+  const [debouncedSearch, setDebouncedSearch] = React4.useState("");
+  const { players, isFetching, refresh } = usePlayers({
+    includeOffline,
+    search: includeOffline ? debouncedSearch : void 0,
+    limit
+  });
+  const sortedPlayers = React4.useMemo(
+    () => [...players].sort((a, b) => {
+      if (a.online !== b.online) return a.online ? -1 : 1;
+      return a.charName.localeCompare(b.charName);
+    }),
+    [players]
+  );
+  const playerByCitizen = React4.useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const p of sortedPlayers) m.set(p.citizenId, p);
+    return m;
+  }, [sortedPlayers]);
+  const data = React4.useMemo(() => {
+    const items = sortedPlayers.map((p) => ({
+      value: p.citizenId,
+      label: formatLabel(p)
+    }));
+    if (value && !items.some((i) => i.value === value)) {
+      items.unshift({ value, label: value });
     }
+    return items;
+  }, [sortedPlayers, value]);
+  const selectedPlayer = value ? playerByCitizen.get(value) ?? null : null;
+  const selectedLabel = selectedPlayer ? formatLabel(selectedPlayer) : null;
+  React4.useEffect(() => {
+    if (!includeOffline) return;
+    if (selectedLabel && searchInput === selectedLabel) return;
+    const t3 = setTimeout(() => setDebouncedSearch(searchInput), DEBOUNCE_MS);
+    return () => clearTimeout(t3);
+  }, [searchInput, includeOffline, selectedLabel]);
+  const renderOption = ({ option }) => {
+    const p = playerByCitizen.get(option.value);
+    if (!p) return option.label;
+    return /* @__PURE__ */ jsxRuntime.jsxs(core.Group, { justify: "space-between", wrap: "nowrap", gap: "xs", style: { width: "100%" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "xs", truncate: true, style: { flex: 1 }, children: formatLabel(p) }),
+      /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { online: p.online, onlineLabel, offlineLabel })
+    ] });
   };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Select,
+    {
+      ...rest,
+      data,
+      value: value ?? null,
+      onChange: (v) => {
+        if (!v) return onChange(null);
+        const player = playerByCitizen.get(v) ?? null;
+        onChange(player);
+      },
+      searchable: searchableProp ?? true,
+      searchValue: includeOffline ? searchInput : void 0,
+      onSearchChange: includeOffline ? setSearchInput : void 0,
+      placeholder,
+      nothingFoundMessage: isFetching ? loadingLabel : nothingFoundMessageProp ?? "No players found",
+      maxDropdownHeight: 300,
+      renderOption,
+      leftSection: selectedPlayer ? /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { online: selectedPlayer.online, onlineLabel, offlineLabel }) : void 0,
+      rightSectionWidth: "3.5vh",
+      rightSectionPointerEvents: "all",
+      rightSection: /* @__PURE__ */ jsxRuntime.jsx(
+        core.ActionIcon,
+        {
+          variant: "subtle",
+          size: "sm",
+          onClick: (e) => {
+            e.stopPropagation();
+            refresh();
+          },
+          "aria-label": refreshLabel,
+          title: refreshLabel,
+          style: { marginRight: "0.6vh" },
+          children: isFetching ? /* @__PURE__ */ jsxRuntime.jsx(core.Loader, { size: "1.2vh", color }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { size: "1.4vh", color })
+        }
+      )
+    }
+  );
 }
-var DirkErrorBoundary = class extends React6__default.default.Component {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "state", { error: null, stack: void 0 });
-  }
-  static getDerivedStateFromError(error2) {
-    return { error: error2 };
-  }
-  componentDidCatch(error2, info) {
-    console.group("\u{1F525} Dirk UI Crash");
-    console.error("Error:", error2);
-    console.error("Component Stack:", info.componentStack);
-    console.groupEnd();
-  }
-  render() {
-    if (!this.state.error) return this.props.children;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      core.Box,
-      {
-        style: {
-          position: "fixed",
-          inset: 0,
-          width: "100vw",
-          height: "100vh",
-          background: "rgba(10, 10, 12, 0.92)",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: "2rem",
-          zIndex: 999999
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          core.Box,
-          {
-            maw: 900,
-            w: "100%",
-            p: "lg",
-            style: {
-              background: "rgba(20,20,24,0.75)",
-              border: "1px solid rgba(255,255,255,0.08)",
-              borderRadius: "10px",
-              boxShadow: "0 10px 40px rgba(0,0,0,0.6)"
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { gap: "sm", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(core.Title, { order: 2, c: "red.5", children: "Dirk UI Crash" }),
-              /* @__PURE__ */ jsxRuntime.jsx(core.Text, { c: "dimmed", size: "sm", children: "The interface encountered a fatal error and stopped rendering." }),
-              /* @__PURE__ */ jsxRuntime.jsx(core.Code, { block: true, style: { maxHeight: 150, overflow: "auto" }, children: this.state.error?.message }),
-              /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "xs", c: "dimmed", children: "Check console for full stack trace" })
-            ] })
-          }
-        )
+function StatusDot({ online, onlineLabel, offlineLabel }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      title: online ? onlineLabel : offlineLabel,
+      style: {
+        display: "inline-block",
+        width: "0.9vh",
+        height: "0.9vh",
+        borderRadius: "50%",
+        backgroundColor: online ? ONLINE_COLOR : OFFLINE_COLOR,
+        boxShadow: `0 0 0.4vh ${online ? ONLINE_COLOR : OFFLINE_COLOR}`,
+        flexShrink: 0
       }
-    );
+    }
+  );
+}
+function formatLabel(p) {
+  const parts = [p.charName || p.citizenId];
+  if (p.online) {
+    if (p.name) parts.push(p.name);
+    if (p.id != null) parts.push(`#${p.id}`);
   }
-};
-fontawesomeSvgCore.library.add(freeSolidSvgIcons.fas, freeRegularSvgIcons.far, freeBrandsSvgIcons.fab);
-function DirkProvider({ children, overideResourceName, themeOverride }) {
-  const {
-    primaryColor,
-    primaryShade,
-    customTheme,
-    game
-  } = useSettings();
-  localeStore((s) => s.locales);
-  const [scTheme, setScTheme] = React6.useState(null);
-  React6.useLayoutEffect(() => {
-    useSettings.setState({
-      overideResourceName
+  return parts.join(" \xB7 ");
+}
+function usePickDoor() {
+  const begin = useAdminToolStore((s) => s.begin);
+  return async () => {
+    const pending = begin({
+      id: "pickDoor",
+      title: locale("PickDoorTitle"),
+      hint: locale("PickDoorHint"),
+      keys: [
+        { key: "LMB", action: locale("Toggle") },
+        { key: "E", action: locale("Confirm") },
+        { key: "BACKSPACE", action: locale("Cancel") }
+      ]
     });
-  }, [overideResourceName]);
-  React6.useEffect(() => {
-    fetchNui("NUI_READY").catch(() => {
+    fetchNui("ADMIN_TOOL_BEGIN", { id: "pickDoor" }).catch(() => {
+      useAdminToolStore.getState().cancelActive();
     });
-    Promise.all([
-      fetchNui("GET_SETTINGS"),
-      fetchNui("GET_RESOURCE_VERSION", void 0, { version: "dev" })
-    ]).then(([data, resourceInfo]) => {
-      useSettings.setState({
-        ...data,
-        resourceVersion: resourceInfo?.version || "dev"
-      });
-    }).catch((err) => {
-      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);
-  });
-  useNuiEvent(
-    "UPDATE_SCRIPT_CONFIG",
-    (data) => {
-      if (!data || !data.config || typeof data.config !== "object") return;
-      try {
-        const inst = getScriptConfigInstance();
-        inst.store.setState((prev) => ({ ...prev, ...data.config }));
-      } catch {
-      }
+    return await pending;
+  };
+}
+function DoorPickerButton({
+  onPick,
+  compact,
+  label: label2,
+  tooltip
+}) {
+  const theme2 = core.useMantineTheme();
+  const color = theme2.colors[theme2.primaryColor][5];
+  const pickDoor = usePickDoor();
+  const onClick = async () => {
+    const picked = await pickDoor();
+    if (picked && picked.doors.length > 0) onPick(picked);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Tooltip,
+    {
+      label: tooltip ?? locale("PickDoorTooltip"),
+      position: "top",
+      withArrow: true,
+      withinPortal: true,
+      zIndex: 2e3,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        framerMotion.motion.button,
+        {
+          onClick,
+          whileHover: { background: core.alpha(color, 0.18) },
+          whileTap: { scale: 0.95 },
+          style: {
+            background: core.alpha(color, 0.1),
+            border: `0.1vh solid ${core.alpha(color, 0.35)}`,
+            borderRadius: theme2.radius.xs,
+            padding: compact ? "0.25vh 0.6vh" : "0.5vh 0.8vh",
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            gap: compact ? "0.3vh" : "0.4vh"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.DoorOpen, { size: compact ? "1.1vh" : "1.3vh", color }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.06em", c: color, children: label2 ?? locale("PickDoor") })
+          ]
+        }
+      )
     }
   );
-  React6.useEffect(() => {
-    let unsubscribe;
-    try {
-      const inst = getScriptConfigInstance();
-      setScTheme(inst.store.getState()?.theme ?? null);
-      const subscribable = inst.store;
-      if (typeof subscribable.subscribe === "function") {
-        unsubscribe = subscribable.subscribe((s) => {
-          setScTheme(s?.theme ?? null);
-        });
-      }
-      inst.fetchConfig?.().then((full) => {
-        if (full && typeof full === "object") {
-          setScTheme(full.theme ?? null);
-        }
-      }).catch(() => {
-      });
-    } catch {
+}
+var MapImpl = React4.memo(({
+  children,
+  initialZoom = 2,
+  initialCenter = gameToMap(0, 0),
+  mapStyle = "game"
+}) => {
+  const mapRef = React4.useRef(null);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactLeaflet.MapContainer,
+    {
+      maxBoundsViscosity: 1,
+      preferCanvas: true,
+      zoom: Math.round(initialZoom),
+      zoomSnap: 1,
+      zoomDelta: 1,
+      zoomControl: false,
+      crs: leaflet.CRS.Simple,
+      style: {
+        height: "100%",
+        width: "100%",
+        overflow: "hidden",
+        outline: "none !important",
+        border: "none !important",
+        boxShadow: "none !important",
+        backgroundColor: "#384950"
+      },
+      center: initialCenter,
+      attributionControl: false,
+      doubleClickZoom: false,
+      inertia: false,
+      zoomAnimation: false,
+      ref: mapRef,
+      maxBounds: [[-250, -250], [250, 250]],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(MapLayer, { mapLayer: mapStyle }),
+        children
+      ]
     }
+  );
+});
+MapImpl.displayName = "DirkMap";
+var Map2 = MapImpl;
+var MapLayer = ({ mapLayer }) => {
+  const map = reactLeaflet.useMap();
+  const layerRef = React4.useRef(null);
+  React4.useEffect(() => {
+    if (layerRef.current) {
+      map.removeLayer(layerRef.current);
+    }
+    const layer = leaflet.tileLayer(
+      `https://s.rsg.sc/sc/images/games/GTAV/map/${mapLayer}/{z}/{x}/{y}.jpg`,
+      {
+        maxZoom: 6,
+        minZoom: 4,
+        bounds: leaflet.latLngBounds(leaflet.latLng(0, 128), leaflet.latLng(-192, 0)),
+        tileSize: 256,
+        updateWhenZooming: false,
+        keepBuffer: 2,
+        opacity: 0.75
+      }
+    );
+    layer.addTo(map);
+    layerRef.current = layer;
     return () => {
-      unsubscribe?.();
+      if (layerRef.current) {
+        map.removeLayer(layerRef.current);
+      }
     };
-  }, []);
-  const overrideActive = scTheme?.useOverride === true;
-  const effectivePrimaryColor = overrideActive ? scTheme.primaryColor ?? primaryColor : primaryColor;
-  const effectivePrimaryShade = overrideActive ? scTheme.primaryShade ?? primaryShade : primaryShade;
-  const effectiveCustomTheme = overrideActive ? scTheme.customTheme ?? customTheme : customTheme;
-  const mergedTheme = React6.useMemo(
-    () => mergeMantineThemeSafe(
-      { ...theme_default, primaryColor: effectivePrimaryColor, primaryShade: effectivePrimaryShade },
-      effectiveCustomTheme,
-      themeOverride
-    ),
-    [effectivePrimaryColor, effectivePrimaryShade, effectiveCustomTheme, themeOverride]
+  }, [mapLayer, map]);
+  return null;
+};
+function ZoomControls() {
+  const theme2 = core.useMantineTheme();
+  const map = reactLeaflet.useMap();
+  const buttons = [
+    { Icon: lucideReact.Plus, fn: () => map.zoomIn() },
+    { Icon: lucideReact.Minus, fn: () => map.zoomOut() }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      style: {
+        position: "absolute",
+        right: "2vh",
+        top: "2vh",
+        display: "flex",
+        flexDirection: "column",
+        zIndex: 999999,
+        boxShadow: `0 0 1vh ${core.alpha(theme2.colors.dark[9], 0.85)}`,
+        background: core.alpha(theme2.colors.dark[9], 0.85),
+        borderRadius: theme2.radius.xs
+      },
+      initial: { opacity: 0, y: -20 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -20 },
+      children: buttons.map(({ Icon, fn }, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.div,
+        {
+          whileHover: { scale: 1.1, filter: "brightness(1.5)" },
+          onClick: fn,
+          style: {
+            padding: theme2.spacing.xs,
+            cursor: "pointer",
+            display: "flex"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 34, color: theme2.colors.gray[5] })
+        },
+        i
+      ))
+    }
   );
-  React6.useEffect(() => {
-    document.body.style.fontFamily = game === "rdr3" ? '"Red Dead", sans-serif' : '"Akrobat Regular", sans-serif';
-  }, [game]);
-  const content = isEnvBrowser() ? /* @__PURE__ */ jsxRuntime.jsx(
-    core.BackgroundImage,
+}
+var DEFAULT_SPRITE = 162;
+var DEFAULT_COLOR = 5;
+function BlipMarker({
+  position,
+  sprite,
+  color,
+  scale = 1,
+  onClick,
+  selected,
+  disabled,
+  fallbackSprite = DEFAULT_SPRITE,
+  fallbackColor = DEFAULT_COLOR
+}) {
+  const [hovered, setHovered] = React4.useState(false);
+  const mapCoords = React4.useMemo(() => gameToMap(position.x, position.y), [position.x, position.y]);
+  const effectiveSprite = sprite ?? fallbackSprite;
+  const effectiveColor = color ?? fallbackColor;
+  const url = blipUrlForSprite(effectiveSprite);
+  const colorHex = getBlipColor(effectiveColor)?.hex ?? "#ffffff";
+  const handleClick = (e) => {
+    e.originalEvent?.stopPropagation?.();
+    if (disabled) return;
+    onClick?.();
+  };
+  const baseSize = 1.8 * scale;
+  const size = `${baseSize}vh`;
+  const ringSize = `${baseSize * 1.6}vh`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactLeafletComponentMarker.Marker,
     {
-      w: "100vw",
-      h: "100vh",
-      src: game === "fivem" ? "https://i.ytimg.com/vi/TOxuNbXrO28/maxresdefault.jpg" : "https://raw.githubusercontent.com/Jump-On-Studios/RedM-jo_libs/refs/heads/main/source-repositories/Menu/public/assets/images/background_dev.jpg",
-      children
+      position: mapCoords,
+      eventHandlers: onClick ? { click: handleClick } : void 0,
+      icon: /* @__PURE__ */ jsxRuntime.jsxs(
+        framerMotion.motion.div,
+        {
+          onHoverStart: () => setHovered(true),
+          onHoverEnd: () => setHovered(false),
+          style: {
+            position: "relative",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            cursor: disabled ? "not-allowed" : onClick ? "pointer" : "default",
+            opacity: disabled ? 0.35 : 1,
+            width: size,
+            height: size
+          },
+          animate: { scale: hovered && !disabled ? 1.2 : selected ? 1.15 : 1 },
+          transition: { duration: 0.15, ease: "easeOut" },
+          children: [
+            (selected || hovered) && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+              framerMotion.motion.div,
+              {
+                style: {
+                  position: "absolute",
+                  width: ringSize,
+                  height: ringSize,
+                  borderRadius: "50%",
+                  border: `0.18vh solid ${core.alpha(colorHex, 0.85)}`,
+                  boxShadow: `0 0 1vh ${core.alpha(colorHex, 0.55)}`
+                },
+                initial: { opacity: 0, scale: 0.8 },
+                animate: { opacity: 1, scale: 1 }
+              }
+            ),
+            url && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  width: size,
+                  height: size,
+                  backgroundColor: colorHex,
+                  WebkitMaskImage: `url(${url})`,
+                  maskImage: `url(${url})`,
+                  WebkitMaskRepeat: "no-repeat",
+                  maskRepeat: "no-repeat",
+                  WebkitMaskPosition: "center",
+                  maskPosition: "center",
+                  WebkitMaskSize: "contain",
+                  maskSize: "contain",
+                  filter: [
+                    "drop-shadow(0.12vh 0 0 #000)",
+                    "drop-shadow(-0.12vh 0 0 #000)",
+                    "drop-shadow(0 0.12vh 0 #000)",
+                    "drop-shadow(0 -0.12vh 0 #000)",
+                    `drop-shadow(0 0 0.4vh ${core.alpha("#000", 0.7)})`
+                  ].join(" "),
+                  pointerEvents: "none",
+                  userSelect: "none"
+                }
+              }
+            )
+          ]
+        }
+      )
     }
-  ) : children;
-  return /* @__PURE__ */ jsxRuntime.jsx(core.MantineProvider, { theme: mergedTheme, defaultColorScheme: "dark", children: /* @__PURE__ */ jsxRuntime.jsx(DirkErrorBoundary, { children: content }) });
+  );
+}
+function useTornEdges() {
+  const game = useSettings((state) => state.game);
+  return game === "rdr3" ? "torn-edge-wrapper" : "";
+}
+function TornEdgeSVGFilter() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      style: { position: "absolute", width: 0, height: 0, pointerEvents: "none" },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: "torn-edge-filter", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "feTurbulence",
+          {
+            type: "fractalNoise",
+            baseFrequency: "0.018 0.022",
+            numOctaves: "5",
+            seed: "9",
+            result: "noise1"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "feTurbulence",
+          {
+            type: "fractalNoise",
+            baseFrequency: "0.08 0.12",
+            numOctaves: "2",
+            seed: "3",
+            result: "noise2"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("feBlend", { in: "noise1", in2: "noise2", mode: "multiply", result: "combinedNoise" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "feDisplacementMap",
+          {
+            in: "SourceGraphic",
+            in2: "combinedNoise",
+            scale: "52",
+            xChannelSelector: "R",
+            yChannelSelector: "G",
+            result: "displaced"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "0.8", in: "displaced", result: "blurred" }),
+        /* @__PURE__ */ jsxRuntime.jsx("feComponentTransfer", { in: "blurred", result: "alphaFade", children: /* @__PURE__ */ jsxRuntime.jsx("feFuncA", { type: "gamma", amplitude: "1", exponent: "1.3", offset: "-0.05" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("feMorphology", { operator: "erode", radius: "0.4", in: "alphaFade", result: "eroded" }),
+        /* @__PURE__ */ jsxRuntime.jsx("feMerge", { children: /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", { in: "eroded" }) })
+      ] }) })
+    }
+  );
+}
+var moduleCache = /* @__PURE__ */ new Map();
+function useValidModels(names) {
+  const cacheKey = React4.useMemo(() => {
+    const unique = Array.from(new Set(names.filter((n) => typeof n === "string" && n.length > 0)));
+    unique.sort();
+    return unique.join("|");
+  }, [names]);
+  const [version, setVersion] = React4.useState(0);
+  const inflight = React4.useRef(/* @__PURE__ */ new Set());
+  React4.useEffect(() => {
+    if (!cacheKey) return;
+    const all = cacheKey.split("|").filter(Boolean);
+    const missing = all.filter((n) => !moduleCache.has(n) && !inflight.current.has(n));
+    if (missing.length === 0) return;
+    missing.forEach((n) => inflight.current.add(n));
+    let cancelled = false;
+    fetchNui(
+      "ADMIN_TOOL_QUERY",
+      { id: "validateModels", value: missing },
+      // Fallback when running outside FiveM (browser dev) — assume valid so the
+      // dev shell doesn't grey out every row.
+      Object.fromEntries(missing.map((n) => [n, true]))
+    ).then((result) => {
+      if (cancelled) return;
+      const map = result && typeof result === "object" ? result : {};
+      missing.forEach((n) => {
+        moduleCache.set(n, !!map[n]);
+        inflight.current.delete(n);
+      });
+      setVersion((v) => v + 1);
+    }).catch(() => {
+      if (cancelled) return;
+      missing.forEach((n) => {
+        inflight.current.delete(n);
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [cacheKey]);
+  return React4.useMemo(() => {
+    const out = /* @__PURE__ */ new Set();
+    if (!cacheKey) return out;
+    for (const n of cacheKey.split("|")) {
+      if (n && moduleCache.get(n) === true) out.add(n);
+    }
+    return out;
+  }, [cacheKey, version]);
 }
 var Vector2Schema = zod.z.object({
   x: zod.z.number(),
@@ -7635,6 +8628,7 @@ exports.AsyncSaveButton = AsyncSaveButton;
 exports.BlipColorSelect = BlipColorSelect;
 exports.BlipDisplaySelect = BlipDisplaySelect;
 exports.BlipIconSelect = BlipIconSelect;
+exports.BlipMarker = BlipMarker;
 exports.BorderedIcon = BorderedIcon;
 exports.ConfigPanel = ConfigPanel;
 exports.ConfirmModal = ConfirmModal;
@@ -7643,6 +8637,7 @@ exports.ControlSelect = ControlSelect;
 exports.Counter = Counter;
 exports.DirkProvider = DirkProvider;
 exports.DiscordRoleSelect = DiscordRoleSelect;
+exports.DoorPickerButton = DoorPickerButton;
 exports.FiveMKeyBindInput = FiveMKeyBindInput;
 exports.FloatingParticles = FloatingParticles;
 exports.FormProvider = FormProvider;
@@ -7655,8 +8650,11 @@ exports.INPUT_MAPPER_KEYS_BY_PRIMARY = INPUT_MAPPER_KEYS_BY_PRIMARY;
 exports.INPUT_MAPPER_PRIMARY_OPTIONS = INPUT_MAPPER_PRIMARY_OPTIONS;
 exports.InfoBox = InfoBox;
 exports.InputContainer = InputContainer;
+exports.InstructionPanel = InstructionPanel;
 exports.LevelBanner = LevelBanner;
 exports.LevelPanel = LevelPanel;
+exports.Map = Map2;
+exports.MapLayer = MapLayer;
 exports.MissingItemsBanner = MissingItemsBanner;
 exports.Modal = Modal;
 exports.ModalContext = ModalContext;
@@ -7668,6 +8666,7 @@ exports.MotionText = MotionText;
 exports.NavBar = NavBar;
 exports.NavigationContext = NavigationContext;
 exports.NavigationProvider = NavigationProvider;
+exports.PlayerSelect = PlayerSelect;
 exports.PositionPicker = PositionPicker;
 exports.PromptModal = PromptModal;
 exports.ScenarioSelect = ScenarioSelect;
@@ -7685,17 +8684,26 @@ exports.Vector4DeleteButton = Vector4DeleteButton;
 exports.Vector4Display = Vector4Display;
 exports.Vector4Schema = Vector4Schema;
 exports.WorldPositionGotoButton = WorldPositionGotoButton;
+exports.WorldPositionPicker = WorldPositionPicker;
 exports.WorldPositionSetButton = WorldPositionSetButton;
+exports.ZoomControls = ZoomControls;
+exports.blipUrl = blipUrl;
+exports.blipUrlForSprite = blipUrlForSprite;
+exports.clearAdminState = clearAdminState;
 exports.colorWithAlpha = colorWithAlpha;
 exports.copyToClipboard = copyToClipboard;
 exports.createFormStore = createFormStore;
 exports.createScriptConfig = createScriptConfig;
 exports.createSkill = createSkill;
+exports.dirkQueryClient = dirkQueryClient;
+exports.ensureFrameworkGroups = ensureFrameworkGroups;
 exports.extractDefaults = extractDefaults;
 exports.fetchLuaTable = fetchLuaTable;
 exports.fetchNui = fetchNui;
 exports.formatGtaControl = formatGtaControl;
 exports.gameToMap = gameToMap;
+exports.getBlipColor = getBlipColor;
+exports.getBlipEntry = getBlipEntry;
 exports.getGtaControl = getGtaControl;
 exports.getImageShape = getImageShape;
 exports.getItemImageUrl = getItemImageUrl;
@@ -7719,6 +8727,8 @@ exports.selectAllGroups = selectAllGroups;
 exports.splitFAString = splitFAString;
 exports.updatePresignedURL = updatePresignedURL;
 exports.uploadImage = uploadImage;
+exports.useAdminState = useAdminState;
+exports.useAdminToolStore = useAdminToolStore;
 exports.useAudio = useAudio;
 exports.useAutoFetcher = useAutoFetcher;
 exports.useForm = useForm;
@@ -7736,8 +8746,11 @@ exports.useModalActions = useModalActions;
 exports.useNavigation = useNavigation;
 exports.useNavigationStore = useNavigationStore;
 exports.useNuiEvent = useNuiEvent;
+exports.usePickDoor = usePickDoor;
+exports.usePlayers = usePlayers;
 exports.useProfanityStore = useProfanityStore;
 exports.useSettings = useSettings;
 exports.useTornEdges = useTornEdges;
+exports.useValidModels = useValidModels;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map