dirk-cfx-react 1.1.87 → 1.1.90

package/dist/index.js

@@ -1,16 +1,15 @@
-import { Flex, Text, Image as Image$1, createTheme, Box, Stack, Title as Title$1, Code, TextInput, Select, useMantineTheme, Tooltip, alpha, Progress, RingProgress, Portal, Button, NumberInput, MultiSelect, Loader, Switch, ActionIcon, ColorInput, Popover, MantineProvider, BackgroundImage, Group, JsonInput } from '@mantine/core';
+import { Flex, Text, Image as Image$1, createTheme, alpha, Box, Stack, Title as Title$1, Code, TextInput, Select, useMantineTheme, Tooltip, Progress, RingProgress, Portal, Button, MantineProvider, NumberInput, MultiSelect, Loader, Switch, ActionIcon, ColorInput, Popover, BackgroundImage, Group, JsonInput } from '@mantine/core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React6, { createContext, useContext, useEffect, useRef, useState, useCallback, useMemo, useLayoutEffect } from 'react';
+import React4, { createContext, memo, useRef, useEffect, useContext, useState, useCallback, useMemo, useLayoutEffect } from 'react';
 import { create, useStore, createStore } from 'zustand';
 import axios from 'axios';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { motion, AnimatePresence, useMotionValue } from 'framer-motion';
-import { Info, X, AlertTriangle, Trash2, RefreshCw, ChevronDown, Check, Copy, MapPin, Crosshair, EyeOff, Eye, RotateCcw, FlaskConical, ChevronUp, Palette, ArrowLeft, Undo2, Redo2, Save, History, XCircle, Code2, Search, Filter, User } from 'lucide-react';
+import { Info, X, AlertTriangle, Trash2, RefreshCw, ChevronDown, Check, Copy, MapPin, Crosshair, EyeOff, Eye, RotateCcw, FlaskConical, ChevronUp, Palette, DoorOpen, Plus, Minus, ArrowLeft, Undo2, Redo2, Save, History, XCircle, Code2, Search, Filter, User } from 'lucide-react';
 import clickSoundUrl from './click_sound-PNCRRTM4.mp3';
 import hoverSoundUrl from './hover_sound-NBUA222C.mp3';
 import { notifications } from '@mantine/notifications';
-import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query';
-import { generateColors } from '@mantine/colors-generator';
+import { QueryClient, QueryClientProvider, useQuery, keepPreviousData, useInfiniteQuery } from '@tanstack/react-query';
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
 import './styles/fonts.css';
@@ -21,6 +20,12 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 import { far } from '@fortawesome/free-regular-svg-icons';
 import { fas } from '@fortawesome/free-solid-svg-icons';
+import { generateColors } from '@mantine/colors-generator';
+import { createPortal } from 'react-dom';
+import { CRS, tileLayer, latLngBounds, latLng } from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import { MapContainer, useMap } from 'react-leaflet';
+import { Marker } from '@adamscybot/react-leaflet-component-marker';
 import { z } from 'zod';
 
 var __defProp = Object.defineProperty;
@@ -967,6 +972,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;
@@ -1244,11 +1261,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);
@@ -1256,12 +1273,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;
@@ -1397,11 +1414,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 = 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);
@@ -1415,7 +1456,7 @@ var localeStore = 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") {
@@ -1423,7 +1464,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 } });
   });
 }
 
@@ -1949,15 +1991,21 @@ var useFrameworkGroups = 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];
 }
@@ -2991,7 +3039,7 @@ function NavigationProvider({ children, defaultPage }) {
 }
 function NavBar(props) {
   const pageId = useNavigation((state) => state.pageId);
-  const store = useNavigationStore();
+  const store2 = useNavigationStore();
   return /* @__PURE__ */ jsx(
     SegmentedControl,
     {
@@ -3000,7 +3048,7 @@ function NavBar(props) {
       value: pageId,
       items: props.items,
       onChange: (value) => {
-        store.setState({ pageId: value });
+        store2.setState({ pageId: value });
       }
     }
   );
@@ -4307,29 +4355,29 @@ function FormProvider({
   return /* @__PURE__ */ jsx(FormContext.Provider, { value: storeRef.current, children });
 }
 function useForm() {
-  const store = useContext(FormContext);
-  if (!store) {
+  const store2 = useContext(FormContext);
+  if (!store2) {
     throw new Error("useForm must be used inside <FormProvider>");
   }
-  const state = useStore(store);
+  const state = useStore(store2);
   const changedFields = useMemo(() => {
     return collectChangedPaths(state.values, state.initialValues);
   }, [state.values, state.initialValues]);
   return { ...state, changedFields, changedCount: changedFields.length };
 }
 function useFormField(path) {
-  const store = useContext(FormContext);
-  if (!store) {
+  const store2 = useContext(FormContext);
+  if (!store2) {
     throw new Error("useFormField must be used inside <FormProvider>");
   }
-  return useStore(store, (s) => getNested(s.values, path));
+  return useStore(store2, (s) => getNested(s.values, path));
 }
 function useFormFields(...paths) {
-  const store = useContext(FormContext);
-  if (!store) {
+  const store2 = useContext(FormContext);
+  if (!store2) {
     throw new Error("useFormFields must be used inside <FormProvider>");
   }
-  return useStore(store, (s) => {
+  return useStore(store2, (s) => {
     const result = {};
     for (const path of paths) {
       result[path] = getNested(s.values, path);
@@ -4338,18 +4386,18 @@ function useFormFields(...paths) {
   });
 }
 function useFormError(path) {
-  const store = useContext(FormContext);
-  if (!store) {
+  const store2 = useContext(FormContext);
+  if (!store2) {
     throw new Error("useFormError must be used inside <FormProvider>");
   }
-  return useStore(store, (s) => s.errors[path]);
+  return useStore(store2, (s) => s.errors[path]);
 }
 function useFormErrors(...paths) {
-  const store = useContext(FormContext);
-  if (!store) {
+  const store2 = useContext(FormContext);
+  if (!store2) {
     throw new Error("useFormErrors must be used inside <FormProvider>");
   }
-  return useStore(store, (s) => {
+  return useStore(store2, (s) => {
     const result = {};
     for (const path of paths) {
       result[path] = s.errors[path];
@@ -4358,12 +4406,223 @@ function useFormErrors(...paths) {
   });
 }
 function useFormActions() {
-  const store = useContext(FormContext);
-  if (!store) {
+  const store2 = 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] = useState(0);
+  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 = 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: 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 = useRef(noop);
   useEffect(() => {
@@ -4382,13 +4641,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 = create(() => defaultValue);
+  const store2 = create(() => defaultValue);
   let clientVersion = 0;
   const useScriptConfigHooks = () => {
     useNuiEvent("UPDATE_SCRIPT_CONFIG", (data) => {
@@ -4397,7 +4678,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 }));
       }
     });
   };
@@ -4405,7 +4686,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;
         }
@@ -4416,7 +4697,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
@@ -4425,7 +4706,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;
   };
@@ -4437,25 +4718,248 @@ 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.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__ */ jsx(
+      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__ */ jsx(
+          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__ */ jsxs(Stack, { gap: "sm", children: [
+              /* @__PURE__ */ jsx(Title$1, { order: 2, c: "red.5", children: "Dirk UI Crash" }),
+              /* @__PURE__ */ jsx(Text, { c: "dimmed", size: "sm", children: "The interface encountered a fatal error and stopped rendering." }),
+              /* @__PURE__ */ jsx(Code, { block: true, style: { maxHeight: 150, overflow: "auto" }, children: this.state.error?.message }),
+              /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Check console for full stack trace" })
+            ] })
+          }
+        )
+      }
+    );
+  }
+};
+var useAdminToolStore = 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);
+  useEffect(() => {
+    installNuiListener();
+  }, []);
+  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 QueryClient({
+library.add(fas, far, fab);
+var dirkQueryClient = new QueryClient({
   defaultOptions: { queries: { staleTime: 3e4, gcTime: 5 * 6e4 } }
 });
-function NavItemButton({
-  icon: Icon,
+function DirkProvider({ children, overideResourceName, themeOverride }) {
+  const {
+    primaryColor,
+    primaryShade,
+    customTheme,
+    game
+  } = useSettings();
+  localeStore((s) => s.locales);
+  const [scTheme, setScTheme] = useState(null);
+  useLayoutEffect(() => {
+    useSettings.setState({
+      overideResourceName
+    });
+  }, [overideResourceName]);
+  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 {
+      }
+    }
+  );
+  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 = useMemo(
+    () => mergeMantineThemeSafe(
+      { ...theme_default, primaryColor: effectivePrimaryColor, primaryShade: effectivePrimaryShade },
+      effectiveCustomTheme,
+      themeOverride
+    ),
+    [effectivePrimaryColor, effectivePrimaryShade, effectiveCustomTheme, themeOverride]
+  );
+  useEffect(() => {
+    document.body.style.fontFamily = game === "rdr3" ? '"Red Dead", sans-serif' : '"Akrobat Regular", sans-serif';
+  }, [game]);
+  const content = isEnvBrowser() ? /* @__PURE__ */ jsx(
+    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__ */ jsx(QueryClientProvider, { client: dirkQueryClient, children: /* @__PURE__ */ jsx(MantineProvider, { theme: mergedTheme, defaultColorScheme: "dark", children: /* @__PURE__ */ jsxs(DirkErrorBoundary, { children: [
+    content,
+    /* @__PURE__ */ jsx(AdminOverlays, {})
+  ] }) }) });
+}
+function NavItemButton({
+  icon: Icon,
   label: label2,
   active,
   onClick
@@ -4532,7 +5036,7 @@ function ConfigJsonModal({
       setError(e.message);
     }
   };
-  return /* @__PURE__ */ jsxs(Modal, { title: "Config JSON", icon: Code2, iconColor: color, onClose, width: "60vh", maxHeight: "80vh", zIndex: 200, children: [
+  return /* @__PURE__ */ jsxs(Modal, { title: locale("cfgpanel_json_title"), icon: Code2, iconColor: color, onClose, width: "60vh", maxHeight: "80vh", zIndex: 200, children: [
     /* @__PURE__ */ jsxs(Box, { flex: 1, p: "0.8vh", style: { overflowY: "auto" }, children: [
       /* @__PURE__ */ jsx(
         JsonInput,
@@ -4560,7 +5064,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__ */ jsx(X, { color: "rgba(255,255,255,0.4)" }),
-            /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xs", tt: "uppercase", lts: "0.05em", c: "rgba(255,255,255,0.4)", children: "Cancel" })
+            /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xs", tt: "uppercase", lts: "0.05em", c: "rgba(255,255,255,0.4)", children: locale("cfgpanel_cancel") })
           ]
         }
       ),
@@ -4573,7 +5077,7 @@ function ConfigJsonModal({
           style: { background: alpha(color, 0.14), border: `0.1vh solid ${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__ */ jsx(Check, { color }),
-            /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xs", tt: "uppercase", lts: "0.05em", c: color, children: "Apply" })
+            /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xs", tt: "uppercase", lts: "0.05em", c: color, children: locale("cfgpanel_apply") })
           ]
         }
       )
@@ -4714,7 +5218,7 @@ function ConfigHistoryModal({
       historyQuery.fetchNextPage();
     }
   };
-  return /* @__PURE__ */ jsxs(Modal, { title: "Config History", icon: History, iconColor: color, onClose, width: "88vh", maxHeight: "82vh", zIndex: 260, children: [
+  return /* @__PURE__ */ jsxs(Modal, { title: locale("cfgpanel_history_title"), icon: History, iconColor: color, onClose, width: "88vh", maxHeight: "82vh", zIndex: 260, children: [
     /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { flex: 1, minHeight: 0 }, children: [
       /* @__PURE__ */ jsxs(Flex, { gap: "xs", p: "sm", style: { borderBottom: `0.1vh solid ${alpha(theme2.colors.dark[7], 0.8)}` }, children: [
         /* @__PURE__ */ jsx(TextInput, { leftSection: /* @__PURE__ */ jsx(Search, { size: "1.4vh" }), placeholder: "Search path/admin/value", value: queryInput, onChange: (e) => setQueryInput(e.currentTarget.value), size: "xs", style: { flex: 1 } }),
@@ -4757,7 +5261,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__ */ jsx(X, { color: "rgba(255,255,255,0.4)", size: "1.5vh" }),
-          /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xs", tt: "uppercase", lts: "0.05em", c: "rgba(255,255,255,0.4)", children: "Close" })
+          /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xs", tt: "uppercase", lts: "0.05em", c: "rgba(255,255,255,0.4)", children: locale("cfgpanel_close") })
         ]
       }
     ) })
@@ -4782,7 +5286,7 @@ function ConfigPanelInner({
   const theme2 = useMantineTheme();
   const color = theme2.colors[theme2.primaryColor][5];
   const version = useSettings((s) => s.resourceVersion);
-  const [activeTab, setActiveTab] = useState(navItems[0]?.id ?? "");
+  const [activeTab, setActiveTab] = useAdminState("__dirkConfigPanel:activeTab", navItems[0]?.id ?? "");
   const firstMountRef = useRef(true);
   const [jsonOpen, setJsonOpen] = useState(false);
   const [historyOpen, setHistoryOpen] = useState(false);
@@ -4817,16 +5321,16 @@ function ConfigPanelInner({
     /* @__PURE__ */ jsx(AnimatePresence, { children: resetOpen && /* @__PURE__ */ 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.show({
               color: "green",
               title: locale("ConfigResetSuccessTitle"),
@@ -4851,9 +5355,9 @@ function ConfigPanelInner({
     /* @__PURE__ */ jsx(AnimatePresence, { children: pendingAction !== null && /* @__PURE__ */ 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);
@@ -4891,7 +5395,7 @@ function ConfigPanelInner({
               /* @__PURE__ */ jsx(
                 motion.button,
                 {
-                  title: "Back to script list",
+                  title: locale("cfgpanel_back_title"),
                   onClick: handleBack,
                   whileHover: { background: alpha(color, 0.16), borderColor: alpha(color, 0.45) },
                   whileTap: { scale: 0.95 },
@@ -4919,7 +5423,7 @@ function ConfigPanelInner({
               /* @__PURE__ */ jsx(
                 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,
@@ -4931,7 +5435,7 @@ function ConfigPanelInner({
               /* @__PURE__ */ jsx(
                 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,
@@ -4943,7 +5447,7 @@ function ConfigPanelInner({
               /* @__PURE__ */ jsx(
                 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: alpha(color, 0.25), borderColor: alpha(color, 0.5) } : void 0,
@@ -4955,7 +5459,7 @@ function ConfigPanelInner({
               /* @__PURE__ */ jsx(
                 motion.button,
                 {
-                  title: "History",
+                  title: locale("cfgpanel_history"),
                   onClick: () => setHistoryOpen(true),
                   whileHover: { background: alpha("#22d3ee", 0.16), borderColor: alpha("#22d3ee", 0.5) },
                   whileTap: { scale: 0.97 },
@@ -4976,7 +5480,7 @@ function ConfigPanelInner({
                   style: { width: "100%", background: "transparent", border: `0.1vh solid ${isDirty ? alpha("#f97316", 0.35) : 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__ */ jsx(XCircle, { color: isDirty ? "#f97316" : "rgba(255,255,255,0.35)", size: "1.6vh" }),
-                    /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.06em", c: isDirty ? "#f97316" : "rgba(255,255,255,0.35)", children: "Discard" })
+                    /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.06em", c: isDirty ? "#f97316" : "rgba(255,255,255,0.35)", children: locale("cfgpanel_discard") })
                   ]
                 }
               ),
@@ -4990,7 +5494,7 @@ function ConfigPanelInner({
                   style: { width: "100%", background: alpha(color, 0.07), border: `0.1vh solid ${alpha(color, 0.28)}`, borderRadius: theme2.radius.xs, padding: "0.65vh 0.8vh", cursor: "pointer", display: "flex", alignItems: "center", gap: "0.55vh" },
                   children: [
                     /* @__PURE__ */ jsx(Code2, { color, size: "1.6vh" }),
-                    /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.06em", c: color, children: "Manual Edit" })
+                    /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.06em", c: color, children: locale("cfgpanel_manual_edit") })
                   ]
                 }
               ),
@@ -5003,12 +5507,13 @@ function ConfigPanelInner({
                   style: { width: "100%", background: alpha("#ef4444", 0.07), border: `0.1vh solid ${alpha("#ef4444", 0.25)}`, borderRadius: theme2.radius.xs, padding: "0.65vh 0.8vh", cursor: "pointer", display: "flex", alignItems: "center", gap: "0.55vh" },
                   children: [
                     /* @__PURE__ */ jsx(RotateCcw, { color: "#ef4444", size: "1.6vh" }),
-                    /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.06em", c: "#ef4444", children: "Reset Defaults" })
+                    /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.06em", c: "#ef4444", children: locale("cfgpanel_reset_defaults") })
                   ]
                 }
               ),
               version && /* @__PURE__ */ jsxs(Text, { size: "0.95vh", c: "dimmed", ta: "center", style: { letterSpacing: "0.04em", opacity: 0.8 }, children: [
-                "Version ",
+                locale("cfgpanel_version"),
+                " ",
                 version
               ] })
             ] })
@@ -5054,13 +5559,13 @@ function ServerOnlyFetcher() {
 var defaultOnClose = () => fetchNui("CLOSE_ADMIN_SECTION");
 function ConfigPanel(props) {
   const { open, onClose = defaultOnClose } = props;
-  const { store, updateConfig } = getScriptConfigInstance();
+  const { store: store2, updateConfig } = getScriptConfigInstance();
   const [isSaving, setIsSaving] = useState(false);
   if (!open) return null;
-  return /* @__PURE__ */ jsx(QueryClientProvider, { client: configPanelQueryClient, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     FormProvider,
     {
-      initialValues: cloneConfig(store.getState()),
+      initialValues: cloneConfig(store2.getState()),
       onSubmit: async (form) => {
         if (isSaving) return;
         setIsSaving(true);
@@ -5068,7 +5573,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.show({
               color: "green",
@@ -5078,7 +5583,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";
@@ -5575,6 +6080,9 @@ function GroupName(props) {
   const ctx = useContext(GroupSelectContext);
   const jobs = useFrameworkGroups((s) => s.jobs);
   const gangs = useFrameworkGroups((s) => s.gangs);
+  useEffect(() => {
+    ensureFrameworkGroups();
+  }, []);
   const inCompound = ctx !== null;
   const currentValue = inCompound ? ctx.value.name : props.value;
   const filterType = inCompound ? ctx.type : props.type;
@@ -5614,6 +6122,9 @@ function GroupRank(props) {
   }
   const jobs = useFrameworkGroups((s) => s.jobs);
   const gangs = useFrameworkGroups((s) => s.gangs);
+  useEffect(() => {
+    ensureFrameworkGroups();
+  }, []);
   const all = [...jobs, ...gangs];
   const selectedGroup = all.find((g) => g.name === ctx.value.name) ?? null;
   const grades = selectedGroup?.grades ?? [];
@@ -7259,349 +7770,831 @@ function AccountSelect(props) {
     !hideFrameworkHint && /* @__PURE__ */ 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 = MapPin,
+  hideRestOfAdmin = true
+}) {
+  const theme2 = useMantineTheme();
+  const pc = theme2.colors[theme2.primaryColor];
+  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 createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...{ [OVERLAY_ATTR2]: "" },
+        style: { position: "fixed", inset: 0, pointerEvents: "none", zIndex: 1e4 },
+        children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
+          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__ */ jsxs(
+              Flex,
+              {
+                direction: "column",
+                gap: "0.8vh",
+                style: {
+                  background: 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__ */ jsxs(Flex, { align: "center", gap: "0.6vh", children: [
+                    /* @__PURE__ */ jsx(Icon, { size: "1.6vh", color: pc[6], strokeWidth: 2.5 }),
+                    /* @__PURE__ */ jsx(
+                      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 ${alpha(pc[7], 0.5)}, 0 0 1.6vh ${alpha(pc[9], 0.3)}`
+                        },
+                        children: title
+                      }
+                    )
+                  ] }),
+                  (hint || keys && keys.length > 0) && /* @__PURE__ */ jsx("div", { style: { height: "0.1vh", background: "rgba(255,255,255,0.06)", margin: "0.1vh 0" } }),
+                  hint && /* @__PURE__ */ jsx(
+                    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__ */ jsxs(Fragment, { children: [
+                    hint && /* @__PURE__ */ jsx("div", { style: { height: "0.1vh", background: "rgba(255,255,255,0.06)", margin: "0.1vh 0" } }),
+                    /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "0.5vh", children: keys.map((k, i) => /* @__PURE__ */ 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__ */ jsx(MouseIcon, { side: "left" });
+  if (normalized === "RMB") return /* @__PURE__ */ jsx(MouseIcon, { side: "right" });
+  if (normalized === "BACKSPACE" || keyLabel === "\u232B") return /* @__PURE__ */ jsx(BackspaceIcon, {});
   return /* @__PURE__ */ jsx(
-    "svg",
+    Text,
     {
-      style: { position: "absolute", width: 0, height: 0, pointerEvents: "none" },
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: "torn-edge-filter", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
-        /* @__PURE__ */ jsx(
-          "feTurbulence",
-          {
-            type: "fractalNoise",
-            baseFrequency: "0.018 0.022",
-            numOctaves: "5",
-            seed: "9",
-            result: "noise1"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "feTurbulence",
-          {
-            type: "fractalNoise",
-            baseFrequency: "0.08 0.12",
-            numOctaves: "2",
-            seed: "3",
-            result: "noise2"
-          }
-        ),
-        /* @__PURE__ */ jsx("feBlend", { in: "noise1", in2: "noise2", mode: "multiply", result: "combinedNoise" }),
-        /* @__PURE__ */ jsx(
-          "feDisplacementMap",
-          {
-            in: "SourceGraphic",
-            in2: "combinedNoise",
-            scale: "52",
-            xChannelSelector: "R",
-            yChannelSelector: "G",
-            result: "displaced"
-          }
-        ),
-        /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "0.8", in: "displaced", result: "blurred" }),
-        /* @__PURE__ */ jsx("feComponentTransfer", { in: "blurred", result: "alphaFade", children: /* @__PURE__ */ jsx("feFuncA", { type: "gamma", amplitude: "1", exponent: "1.3", offset: "-0.05" }) }),
-        /* @__PURE__ */ jsx("feMorphology", { operator: "erode", radius: "0.4", in: "alphaFade", result: "eroded" }),
-        /* @__PURE__ */ jsx("feMerge", { children: /* @__PURE__ */ 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 = 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__ */ jsxs(Flex, { align: "center", gap: "0.6vh", children: [
+    /* @__PURE__ */ 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__ */ jsx(
+      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__ */ jsxs("svg", { viewBox: "0 0 16 22", width: "1.4vh", height: "1.9vh", fill: "none", stroke, strokeWidth: "1.4", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "14", height: "20", rx: "6" }),
+    /* @__PURE__ */ jsx("line", { x1: "8", y1: "1", x2: "8", y2: "9" }),
+    /* @__PURE__ */ 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__ */ 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__ */ jsx("path", { d: "M 21 2 L 8 2 L 2 8 L 8 14 L 21 14 Z" }),
+    /* @__PURE__ */ jsx("line", { x1: "11", y1: "6", x2: "16", y2: "11" }),
+    /* @__PURE__ */ jsx("line", { x1: "16", y1: "6", x2: "11", y2: "11" })
+  ] });
+}
+function WorldPositionPicker({ value, onChange, compact, setOnly, gotoOnly }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !gotoOnly && /* @__PURE__ */ jsx(WorldPositionSetButton2, { value, onChange, compact }),
+    !setOnly && /* @__PURE__ */ jsx(WorldPositionGotoButton2, { value, compact })
+  ] });
+}
+function WorldPositionSetButton2({
+  value,
+  onChange,
+  compact
+}) {
+  const theme2 = 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__ */ jsx(Tooltip, { label: locale("SetWorldTooltip"), position: "top", withArrow: true, withinPortal: true, zIndex: 2e3, children: /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      onClick,
+      whileHover: { background: alpha(color, 0.18) },
+      whileTap: { scale: 0.95 },
+      style: {
+        background: alpha(color, 0.1),
+        border: `0.1vh solid ${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__ */ jsx(Crosshair, { size: compact ? "1.1vh" : "1.3vh", color }),
+        /* @__PURE__ */ jsx(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 = useMantineTheme();
+  const color = theme2.colors[theme2.primaryColor][5];
+  const onClick = () => {
+    fetchNui("ADMIN_TOOL_INVOKE", { id: "gotoCoord", value }).catch(() => {
+    });
+  };
+  return /* @__PURE__ */ jsx(Tooltip, { label: locale("GotoWorldTooltip"), position: "top", withArrow: true, withinPortal: true, zIndex: 2e3, children: /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      onClick,
+      whileHover: { background: alpha(color, 0.18) },
+      whileTap: { scale: 0.95 },
+      style: {
+        background: alpha(color, 0.1),
+        border: `0.1vh solid ${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__ */ jsx(MapPin, { size: compact ? "1.1vh" : "1.3vh", color }),
+        /* @__PURE__ */ jsx(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 = 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 ? 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 = useMantineTheme();
+  const color = theme2.colors[theme2.primaryColor][5];
+  const [searchInput, setSearchInput] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const { players, isFetching, refresh } = usePlayers({
+    includeOffline,
+    search: includeOffline ? debouncedSearch : void 0,
+    limit
+  });
+  const sortedPlayers = useMemo(
+    () => [...players].sort((a, b) => {
+      if (a.online !== b.online) return a.online ? -1 : 1;
+      return a.charName.localeCompare(b.charName);
+    }),
+    [players]
+  );
+  const playerByCitizen = useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const p of sortedPlayers) m.set(p.citizenId, p);
+    return m;
+  }, [sortedPlayers]);
+  const data = 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;
+  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__ */ jsxs(Group, { justify: "space-between", wrap: "nowrap", gap: "xs", style: { width: "100%" }, children: [
+      /* @__PURE__ */ jsx(Text, { size: "xs", truncate: true, style: { flex: 1 }, children: formatLabel(p) }),
+      /* @__PURE__ */ jsx(StatusDot, { online: p.online, onlineLabel, offlineLabel })
+    ] });
   };
+  return /* @__PURE__ */ jsx(
+    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__ */ jsx(StatusDot, { online: selectedPlayer.online, onlineLabel, offlineLabel }) : void 0,
+      rightSectionWidth: "3.5vh",
+      rightSectionPointerEvents: "all",
+      rightSection: /* @__PURE__ */ jsx(
+        ActionIcon,
+        {
+          variant: "subtle",
+          size: "sm",
+          onClick: (e) => {
+            e.stopPropagation();
+            refresh();
+          },
+          "aria-label": refreshLabel,
+          title: refreshLabel,
+          style: { marginRight: "0.6vh" },
+          children: isFetching ? /* @__PURE__ */ jsx(Loader, { size: "1.2vh", color }) : /* @__PURE__ */ jsx(RefreshCw, { size: "1.4vh", color })
+        }
+      )
+    }
+  );
 }
-var DirkErrorBoundary = class extends React6.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__ */ jsx(
-      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__ */ jsx(
-          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__ */ jsxs(Stack, { gap: "sm", children: [
-              /* @__PURE__ */ jsx(Title$1, { order: 2, c: "red.5", children: "Dirk UI Crash" }),
-              /* @__PURE__ */ jsx(Text, { c: "dimmed", size: "sm", children: "The interface encountered a fatal error and stopped rendering." }),
-              /* @__PURE__ */ jsx(Code, { block: true, style: { maxHeight: 150, overflow: "auto" }, children: this.state.error?.message }),
-              /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Check console for full stack trace" })
-            ] })
-          }
-        )
+function StatusDot({ online, onlineLabel, offlineLabel }) {
+  return /* @__PURE__ */ 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}`);
   }
-};
-library.add(fas, far, fab);
-function DirkProvider({ children, overideResourceName, themeOverride }) {
-  const {
-    primaryColor,
-    primaryShade,
-    customTheme,
-    game
-  } = useSettings();
-  localeStore((s) => s.locales);
-  const [scTheme, setScTheme] = useState(null);
-  useLayoutEffect(() => {
-    useSettings.setState({
-      overideResourceName
-    });
-  }, [overideResourceName]);
-  useEffect(() => {
-    fetchNui("NUI_READY").catch(() => {
+  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") }
+      ]
     });
-    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);
+    fetchNui("ADMIN_TOOL_BEGIN", { id: "pickDoor" }).catch(() => {
+      useAdminToolStore.getState().cancelActive();
     });
-  }, []);
-  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 = 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__ */ jsx(
+    Tooltip,
+    {
+      label: tooltip ?? locale("PickDoorTooltip"),
+      position: "top",
+      withArrow: true,
+      withinPortal: true,
+      zIndex: 2e3,
+      children: /* @__PURE__ */ jsxs(
+        motion.button,
+        {
+          onClick,
+          whileHover: { background: alpha(color, 0.18) },
+          whileTap: { scale: 0.95 },
+          style: {
+            background: alpha(color, 0.1),
+            border: `0.1vh solid ${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__ */ jsx(DoorOpen, { size: compact ? "1.1vh" : "1.3vh", color }),
+            /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.06em", c: color, children: label2 ?? locale("PickDoor") })
+          ]
+        }
+      )
+    }
+  );
+}
+var MapImpl = memo(({
+  children,
+  initialZoom = 2,
+  initialCenter = gameToMap(0, 0),
+  mapStyle = "game"
+}) => {
+  const mapRef = useRef(null);
+  return /* @__PURE__ */ jsxs(
+    MapContainer,
+    {
+      maxBoundsViscosity: 1,
+      preferCanvas: true,
+      zoom: Math.round(initialZoom),
+      zoomSnap: 1,
+      zoomDelta: 1,
+      zoomControl: false,
+      crs: 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__ */ jsx(MapLayer, { mapLayer: mapStyle }),
+        children
+      ]
     }
   );
+});
+MapImpl.displayName = "DirkMap";
+var Map2 = MapImpl;
+var MapLayer = ({ mapLayer }) => {
+  const map = useMap();
+  const layerRef = useRef(null);
   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 {
+    if (layerRef.current) {
+      map.removeLayer(layerRef.current);
     }
+    const layer = tileLayer(
+      `https://s.rsg.sc/sc/images/games/GTAV/map/${mapLayer}/{z}/{x}/{y}.jpg`,
+      {
+        maxZoom: 6,
+        minZoom: 4,
+        bounds: latLngBounds(latLng(0, 128), 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 = useMemo(
-    () => mergeMantineThemeSafe(
-      { ...theme_default, primaryColor: effectivePrimaryColor, primaryShade: effectivePrimaryShade },
-      effectiveCustomTheme,
-      themeOverride
-    ),
-    [effectivePrimaryColor, effectivePrimaryShade, effectiveCustomTheme, themeOverride]
+  }, [mapLayer, map]);
+  return null;
+};
+function ZoomControls() {
+  const theme2 = useMantineTheme();
+  const map = useMap();
+  const buttons = [
+    { Icon: Plus, fn: () => map.zoomIn() },
+    { Icon: Minus, fn: () => map.zoomOut() }
+  ];
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      style: {
+        position: "absolute",
+        right: "2vh",
+        top: "2vh",
+        display: "flex",
+        flexDirection: "column",
+        zIndex: 999999,
+        boxShadow: `0 0 1vh ${alpha(theme2.colors.dark[9], 0.85)}`,
+        background: 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__ */ jsx(
+        motion.div,
+        {
+          whileHover: { scale: 1.1, filter: "brightness(1.5)" },
+          onClick: fn,
+          style: {
+            padding: theme2.spacing.xs,
+            cursor: "pointer",
+            display: "flex"
+          },
+          children: /* @__PURE__ */ jsx(Icon, { size: 34, color: theme2.colors.gray[5] })
+        },
+        i
+      ))
+    }
   );
-  useEffect(() => {
-    document.body.style.fontFamily = game === "rdr3" ? '"Red Dead", sans-serif' : '"Akrobat Regular", sans-serif';
-  }, [game]);
-  const content = isEnvBrowser() ? /* @__PURE__ */ jsx(
-    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] = useState(false);
+  const mapCoords = 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__ */ jsx(
+    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__ */ jsxs(
+        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__ */ jsx(
+              motion.div,
+              {
+                style: {
+                  position: "absolute",
+                  width: ringSize,
+                  height: ringSize,
+                  borderRadius: "50%",
+                  border: `0.18vh solid ${alpha(colorHex, 0.85)}`,
+                  boxShadow: `0 0 1vh ${alpha(colorHex, 0.55)}`
+                },
+                initial: { opacity: 0, scale: 0.8 },
+                animate: { opacity: 1, scale: 1 }
+              }
+            ),
+            url && /* @__PURE__ */ 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 ${alpha("#000", 0.7)})`
+                  ].join(" "),
+                  pointerEvents: "none",
+                  userSelect: "none"
+                }
+              }
+            )
+          ]
+        }
+      )
     }
-  ) : children;
-  return /* @__PURE__ */ jsx(MantineProvider, { theme: mergedTheme, defaultColorScheme: "dark", children: /* @__PURE__ */ jsx(DirkErrorBoundary, { children: content }) });
+  );
+}
+function useTornEdges() {
+  const game = useSettings((state) => state.game);
+  return game === "rdr3" ? "torn-edge-wrapper" : "";
+}
+function TornEdgeSVGFilter() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      style: { position: "absolute", width: 0, height: 0, pointerEvents: "none" },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: "torn-edge-filter", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+        /* @__PURE__ */ jsx(
+          "feTurbulence",
+          {
+            type: "fractalNoise",
+            baseFrequency: "0.018 0.022",
+            numOctaves: "5",
+            seed: "9",
+            result: "noise1"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "feTurbulence",
+          {
+            type: "fractalNoise",
+            baseFrequency: "0.08 0.12",
+            numOctaves: "2",
+            seed: "3",
+            result: "noise2"
+          }
+        ),
+        /* @__PURE__ */ jsx("feBlend", { in: "noise1", in2: "noise2", mode: "multiply", result: "combinedNoise" }),
+        /* @__PURE__ */ jsx(
+          "feDisplacementMap",
+          {
+            in: "SourceGraphic",
+            in2: "combinedNoise",
+            scale: "52",
+            xChannelSelector: "R",
+            yChannelSelector: "G",
+            result: "displaced"
+          }
+        ),
+        /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "0.8", in: "displaced", result: "blurred" }),
+        /* @__PURE__ */ jsx("feComponentTransfer", { in: "blurred", result: "alphaFade", children: /* @__PURE__ */ jsx("feFuncA", { type: "gamma", amplitude: "1", exponent: "1.3", offset: "-0.05" }) }),
+        /* @__PURE__ */ jsx("feMorphology", { operator: "erode", radius: "0.4", in: "alphaFade", result: "eroded" }),
+        /* @__PURE__ */ jsx("feMerge", { children: /* @__PURE__ */ jsx("feMergeNode", { in: "eroded" }) })
+      ] }) })
+    }
+  );
+}
+var moduleCache = /* @__PURE__ */ new Map();
+function useValidModels(names) {
+  const cacheKey = 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] = useState(0);
+  const inflight = useRef(/* @__PURE__ */ new Set());
+  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 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 = z.object({
   x: z.number(),
@@ -7619,6 +8612,6 @@ var Vector4Schema = z.object({
   w: z.number()
 });
 
-export { AccountSelect, AdminPageTitle, AnimPostFxSelect, AsyncSaveButton, BlipColorSelect, BlipDisplaySelect, BlipIconSelect, BorderedIcon, ConfigPanel, ConfirmModal, ControlMultiSelect, ControlSelect, Counter, DirkProvider, DiscordRoleSelect, FiveMKeyBindInput, FloatingParticles, FormProvider, GTA_CONTROLS, GTA_CONTROL_GROUP_ORDER, GroupName, GroupRank, GroupSelect, INPUT_MAPPER_KEYS_BY_PRIMARY, INPUT_MAPPER_PRIMARY_OPTIONS, InfoBox, InputContainer, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PositionPicker, PromptModal, ScenarioSelect, SegmentedControl, SegmentedProgress, SelectItem, SwitchPanel, TestBed, ThemeOverrideSection, Title, TornEdgeSVGFilter, Vector2Schema, Vector3Schema, Vector4DeleteButton, Vector4Display, Vector4Schema, WorldPositionGotoButton, WorldPositionSetButton, colorWithAlpha, copyToClipboard, createFormStore, createScriptConfig, createSkill, extractDefaults, fetchLuaTable, fetchNui, formatGtaControl, gameToMap, getGtaControl, getImageShape, getItemImageUrl, getScriptConfigInstance, initialFetches, internalEvent, isEnvBrowser, isProfanity, latPr100, locale, localeStore, mapCenter, mapToGame, noop, numberToRoman, openLink, registerInitialFetch, registerInitialLuaTableFetch, runFetches, selectAllGroups, splitFAString, updatePresignedURL, uploadImage, useAudio, useAutoFetcher, useForm, useFormActions, useFormError, useFormErrors, useFormField, useFormFields, useFrameworkGroups, useItems, useItemsList, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore, useNuiEvent, useProfanityStore, useSettings, useTornEdges };
+export { AccountSelect, AdminPageTitle, AnimPostFxSelect, AsyncSaveButton, BlipColorSelect, BlipDisplaySelect, BlipIconSelect, BlipMarker, BorderedIcon, ConfigPanel, ConfirmModal, ControlMultiSelect, ControlSelect, Counter, DirkProvider, DiscordRoleSelect, DoorPickerButton, FiveMKeyBindInput, FloatingParticles, FormProvider, GTA_CONTROLS, GTA_CONTROL_GROUP_ORDER, GroupName, GroupRank, GroupSelect, INPUT_MAPPER_KEYS_BY_PRIMARY, INPUT_MAPPER_PRIMARY_OPTIONS, InfoBox, InputContainer, InstructionPanel, LevelBanner, LevelPanel, Map2 as Map, MapLayer, MissingItemsBanner, Modal, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PlayerSelect, PositionPicker, PromptModal, ScenarioSelect, SegmentedControl, SegmentedProgress, SelectItem, SwitchPanel, TestBed, ThemeOverrideSection, Title, TornEdgeSVGFilter, Vector2Schema, Vector3Schema, Vector4DeleteButton, Vector4Display, Vector4Schema, WorldPositionGotoButton, WorldPositionPicker, WorldPositionSetButton, ZoomControls, blipUrl, blipUrlForSprite, clearAdminState, colorWithAlpha, copyToClipboard, createFormStore, createScriptConfig, createSkill, dirkQueryClient, ensureFrameworkGroups, extractDefaults, fetchLuaTable, fetchNui, formatGtaControl, gameToMap, getBlipColor, getBlipEntry, getGtaControl, getImageShape, getItemImageUrl, getScriptConfigInstance, initialFetches, internalEvent, isEnvBrowser, isProfanity, latPr100, locale, localeStore, mapCenter, mapToGame, noop, numberToRoman, openLink, registerInitialFetch, registerInitialLuaTableFetch, runFetches, selectAllGroups, splitFAString, updatePresignedURL, uploadImage, useAdminState, useAdminToolStore, useAudio, useAutoFetcher, useForm, useFormActions, useFormError, useFormErrors, useFormField, useFormFields, useFrameworkGroups, useItems, useItemsList, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore, useNuiEvent, usePickDoor, usePlayers, useProfanityStore, useSettings, useTornEdges, useValidModels };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map