dirk-cfx-react 1.1.86 → 1.1.89

package/dist/components/index.cjs

@@ -11,7 +11,22 @@ 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');
+require('@mantine/core/styles.css');
+require('@mantine/notifications/styles.css');
+require('./styles/fonts.css');
+require('./styles/notify.css');
+require('./styles/scrollBar.css');
+require('./styles/tornEdge.css');
+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');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -960,6 +975,18 @@ var BLIP_COLOR_DATA = BLIP_COLORS.map(([id, label]) => ({
 }));
 var blipEntryMap = new Map(BLIP_ENTRIES.map(([id, name, ext]) => [String(id), { id, name, ext }]));
 var blipColorMap = new Map(BLIP_COLORS.map(([id, label, hex]) => [String(id), { id, label, 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;
@@ -1237,11 +1264,11 @@ var colorNames = {
   Yellow: { r: 255, g: 255, b: 0 },
   YellowGreen: { r: 154, g: 205, b: 50 }
 };
-function colorWithAlpha(color, alpha12) {
+function colorWithAlpha(color, alpha17) {
   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}, ${alpha17})`;
   }
   if (/^#([A-Fa-f0-9]{6})$/.test(color)) {
     const hex = color.slice(1);
@@ -1249,12 +1276,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}, ${alpha17})`;
   }
   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]}, ${alpha17})`;
     }
   }
   return color;
@@ -1349,9 +1376,22 @@ 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;
+    if (Object.keys(msg.data).length === 0) return;
     localeStore.setState({ locales: msg.data });
   });
 }
+
+// src/utils/map.ts
+var mapCenter = [-119.43, 58.84];
+var latPr100 = 1.421;
+function gameToMap(x, y) {
+  return [
+    mapCenter[0] + latPr100 / 100 * y,
+    // lng
+    mapCenter[1] + latPr100 / 100 * x
+    // lat
+  ];
+}
 var useItems = zustand.create(() => ({}));
 var useItemsList = (excludeItemNames = []) => {
   const excludeSet = new Set(excludeItemNames);
@@ -1371,15 +1411,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 });
-});
+}
 
 // src/utils/inputMapper.ts
 var INPUT_MAPPER_PRIMARY_OPTIONS = [
@@ -2388,7 +2434,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,
     {
@@ -2397,7 +2443,7 @@ function NavBar(props) {
       value: pageId,
       items: props.items,
       onChange: (value) => {
-        store.setState({ pageId: value });
+        store2.setState({ pageId: value });
       }
     }
   );
@@ -3704,34 +3750,82 @@ function FormProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: storeRef.current, children });
 }
 function useForm() {
-  const store = react.useContext(FormContext);
-  if (!store) {
+  const store2 = react.useContext(FormContext);
+  if (!store2) {
     throw new Error("useForm must be used inside <FormProvider>");
   }
-  const state = zustand.useStore(store);
+  const state = zustand.useStore(store2);
   const changedFields = react.useMemo(() => {
     return collectChangedPaths(state.values, state.initialValues);
   }, [state.values, state.initialValues]);
   return { ...state, changedFields, changedCount: changedFields.length };
 }
 function useFormField(path) {
-  const store = react.useContext(FormContext);
-  if (!store) {
+  const store2 = react.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 useFormActions() {
-  const store = react.useContext(FormContext);
-  if (!store) {
+  const store2 = react.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] = react.useState(0);
+  react.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 getScriptConfigInstance() {
   throw new Error("[dirk-cfx-react] createScriptConfig must be called before using ConfigPanel");
 }
-var configPanelQueryClient = new reactQuery.QueryClient({
+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 });
+  }
+}));
+fontawesomeSvgCore.library.add(freeSolidSvgIcons.fas, freeRegularSvgIcons.far, freeBrandsSvgIcons.fab);
+var dirkQueryClient = new reactQuery.QueryClient({
   defaultOptions: { queries: { staleTime: 3e4, gcTime: 5 * 6e4 } }
 });
 function NavItemButton({
@@ -4062,7 +4156,7 @@ function ConfigPanelInner({
   const theme = core.useMantineTheme();
   const color = theme.colors[theme.primaryColor][5];
   const version = useSettings((s) => s.resourceVersion);
-  const [activeTab, setActiveTab] = react.useState(navItems[0]?.id ?? "");
+  const [activeTab, setActiveTab] = useAdminState("__dirkConfigPanel:activeTab", navItems[0]?.id ?? "");
   const firstMountRef = react.useRef(true);
   const [jsonOpen, setJsonOpen] = react.useState(false);
   const [historyOpen, setHistoryOpen] = react.useState(false);
@@ -4105,8 +4199,8 @@ function ConfigPanelInner({
           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"),
@@ -4334,13 +4428,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] = react.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);
@@ -4348,7 +4442,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",
@@ -4358,7 +4452,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";
@@ -4855,6 +4949,9 @@ function GroupName(props) {
   const ctx = react.useContext(GroupSelectContext);
   const jobs = useFrameworkGroups((s) => s.jobs);
   const gangs = useFrameworkGroups((s) => s.gangs);
+  react.useEffect(() => {
+    ensureFrameworkGroups();
+  }, []);
   const inCompound = ctx !== null;
   const currentValue = inCompound ? ctx.value.name : props.value;
   const filterType = inCompound ? ctx.type : props.type;
@@ -4894,6 +4991,9 @@ function GroupRank(props) {
   }
   const jobs = useFrameworkGroups((s) => s.jobs);
   const gangs = useFrameworkGroups((s) => s.gangs);
+  react.useEffect(() => {
+    ensureFrameworkGroups();
+  }, []);
   const all = [...jobs, ...gangs];
   const selectedGroup = all.find((g) => g.name === ctx.value.name) ?? null;
   const grades = selectedGroup?.grades ?? [];
@@ -6396,7 +6496,7 @@ var t2 = (key, fallback) => {
 var FRAMEWORK_HINTS = {
   "es_extended": "from ESX Config.Accounts",
   "qb-core": "from QBCore Money.MoneyTypes",
-  "qbx_core": "default QBox trio (cash/bank/crypto) \u2014 server may have custom names, add them manually",
+  "qbx_core": "from QBox player session (or default trio if no one is online) \u2014 log in once to capture custom accounts",
   "nd-framework": "ND_Core only supports cash + bank",
   "unknown": "no framework detected \u2014 type account names manually"
 };
@@ -6539,6 +6639,732 @@ function AccountSelect(props) {
     !hideFrameworkHint && /* @__PURE__ */ jsxRuntime.jsx(FrameworkHint, { framework })
   ] });
 }
+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 (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 InstructionPanel({
+  visible,
+  title,
+  hint,
+  keys,
+  icon: Icon = lucideReact.MapPin,
+  hideRestOfAdmin = true
+}) {
+  const theme = core.useMantineTheme();
+  const pc = theme.colors[theme.primaryColor];
+  react.useEffect(() => {
+    if (!visible || !hideRestOfAdmin) return;
+    ensureBodyHideStyle();
+    document.body.setAttribute(BODY_HIDE_ATTR, "");
+    return () => {
+      document.body.removeAttribute(BODY_HIDE_ATTR);
+    };
+  }, [visible, hideRestOfAdmin]);
+  if (!visible) return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ...{ [OVERLAY_ATTR]: "" },
+        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(theme.colors.dark[9], 0.55),
+                  border: "0.1vh solid rgba(255,255,255,0.07)",
+                  borderRadius: theme.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(
+    core.Text,
+    {
+      style: {
+        fontFamily: "Akrobat Bold, sans-serif",
+        fontSize: "1.2vh",
+        color: "rgba(255,255,255,0.85)",
+        lineHeight: 1,
+        padding: "0 0.3vh"
+      },
+      children: keyLabel
+    }
+  );
+}
+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"
+        },
+        children: action
+      }
+    )
+  ] });
+}
+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 theme = core.useMantineTheme();
+  const color = theme.colors[theme.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: theme.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") })
+      ]
+    }
+  ) });
+}
+function WorldPositionGotoButton2({
+  value,
+  compact
+}) {
+  const theme = core.useMantineTheme();
+  const color = theme.colors[theme.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: theme.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 {
+    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 theme = core.useMantineTheme();
+  const color = theme.colors[theme.primaryColor][5];
+  const [searchInput, setSearchInput] = react.useState("");
+  const [debouncedSearch, setDebouncedSearch] = react.useState("");
+  const { players, isFetching, refresh } = usePlayers({
+    includeOffline,
+    search: includeOffline ? debouncedSearch : void 0,
+    limit
+  });
+  const sortedPlayers = react.useMemo(
+    () => [...players].sort((a, b) => {
+      if (a.online !== b.online) return a.online ? -1 : 1;
+      return a.charName.localeCompare(b.charName);
+    }),
+    [players]
+  );
+  const playerByCitizen = react.useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const p of sortedPlayers) m.set(p.citizenId, p);
+    return m;
+  }, [sortedPlayers]);
+  const data = react.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;
+  react.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 })
+        }
+      )
+    }
+  );
+}
+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}`);
+  }
+  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") }
+      ]
+    });
+    fetchNui("ADMIN_TOOL_BEGIN", { id: "pickDoor" }).catch(() => {
+      useAdminToolStore.getState().cancelActive();
+    });
+    return await pending;
+  };
+}
+function DoorPickerButton({
+  onPick,
+  compact,
+  label,
+  tooltip
+}) {
+  const theme = core.useMantineTheme();
+  const color = theme.colors[theme.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: theme.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: label ?? locale("PickDoor") })
+          ]
+        }
+      )
+    }
+  );
+}
+var MapImpl = react.memo(({
+  children,
+  initialZoom = 2,
+  initialCenter = gameToMap(0, 0),
+  mapStyle = "game"
+}) => {
+  const mapRef = react.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 = react.useRef(null);
+  react.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 () => {
+      if (layerRef.current) {
+        map.removeLayer(layerRef.current);
+      }
+    };
+  }, [mapLayer, map]);
+  return null;
+};
+function ZoomControls() {
+  const theme = 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(theme.colors.dark[9], 0.85)}`,
+        background: core.alpha(theme.colors.dark[9], 0.85),
+        borderRadius: theme.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: theme.spacing.xs,
+            cursor: "pointer",
+            display: "flex"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 34, color: theme.colors.gray[5] })
+        },
+        i
+      ))
+    }
+  );
+}
+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] = react.useState(false);
+  const mapCoords = react.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,
+    {
+      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"
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 
 exports.AccountSelect = AccountSelect;
 exports.AdminPageTitle = AdminPageTitle;
@@ -6547,6 +7373,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;
@@ -6554,6 +7381,7 @@ exports.ControlMultiSelect = ControlMultiSelect;
 exports.ControlSelect = ControlSelect;
 exports.Counter = Counter;
 exports.DiscordRoleSelect = DiscordRoleSelect;
+exports.DoorPickerButton = DoorPickerButton;
 exports.FiveMKeyBindInput = FiveMKeyBindInput;
 exports.FloatingParticles = FloatingParticles;
 exports.GroupName = GroupName;
@@ -6561,8 +7389,11 @@ exports.GroupRank = GroupRank;
 exports.GroupSelect = GroupSelect;
 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;
@@ -6574,6 +7405,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;
@@ -6587,11 +7419,19 @@ exports.Title = Title;
 exports.Vector4DeleteButton = Vector4DeleteButton;
 exports.Vector4Display = Vector4Display;
 exports.WorldPositionGotoButton = WorldPositionGotoButton;
+exports.WorldPositionPicker = WorldPositionPicker;
 exports.WorldPositionSetButton = WorldPositionSetButton;
+exports.ZoomControls = ZoomControls;
+exports.blipUrl = blipUrl;
+exports.blipUrlForSprite = blipUrlForSprite;
+exports.getBlipColor = getBlipColor;
+exports.getBlipEntry = getBlipEntry;
+exports.useAdminToolStore = useAdminToolStore;
 exports.useMissingItemsAudit = useMissingItemsAudit;
 exports.useModal = useModal;
 exports.useModalActions = useModalActions;
 exports.useNavigation = useNavigation;
 exports.useNavigationStore = useNavigationStore;
+exports.usePickDoor = usePickDoor;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map