dirk-cfx-react 1.1.87 → 1.1.89

package/dist/components/index.js

@@ -1,15 +1,30 @@
 import { Flex, Text, Image, TextInput, Select, Box, useMantineTheme, Tooltip, alpha, Progress, RingProgress, Portal, Button, NumberInput, MultiSelect, Loader, Switch, ActionIcon, Stack, ColorInput, Popover, Group, JsonInput } from '@mantine/core';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, useContext, useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, memo, useRef, useEffect, useContext, useState, useCallback, useMemo } from 'react';
 import { create, useStore, createStore } from 'zustand';
 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 { QueryClient, useQuery, keepPreviousData, useInfiniteQuery } from '@tanstack/react-query';
+import '@mantine/core/styles.css';
+import '@mantine/notifications/styles.css';
+import './styles/fonts.css';
+import './styles/notify.css';
+import './styles/scrollBar.css';
+import './styles/tornEdge.css';
+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';
 
 // src/components/BlipSelect.tsx
 var BLIP_ENTRIES = [
@@ -953,6 +968,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;
@@ -1230,11 +1257,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);
@@ -1242,12 +1269,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;
@@ -1342,9 +1369,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 = create(() => ({}));
 var useItemsList = (excludeItemNames = []) => {
   const excludeSet = new Set(excludeItemNames);
@@ -1364,15 +1404,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 });
-});
+}
 
 // src/utils/inputMapper.ts
 var INPUT_MAPPER_PRIMARY_OPTIONS = [
@@ -2381,7 +2427,7 @@ function NavigationProvider({ children, defaultPage }) {
 }
 function NavBar(props) {
   const pageId = useNavigation((state) => state.pageId);
-  const store = useNavigationStore();
+  const store2 = useNavigationStore();
   return /* @__PURE__ */ jsx(
     SegmentedControl,
     {
@@ -2390,7 +2436,7 @@ function NavBar(props) {
       value: pageId,
       items: props.items,
       onChange: (value) => {
-        store.setState({ pageId: value });
+        store2.setState({ pageId: value });
       }
     }
   );
@@ -3697,34 +3743,82 @@ 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 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 getScriptConfigInstance() {
   throw new Error("[dirk-cfx-react] createScriptConfig must be called before using ConfigPanel");
 }
-var configPanelQueryClient = new QueryClient({
+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 });
+  }
+}));
+library.add(fas, far, fab);
+var dirkQueryClient = new QueryClient({
   defaultOptions: { queries: { staleTime: 3e4, gcTime: 5 * 6e4 } }
 });
 function NavItemButton({
@@ -4055,7 +4149,7 @@ function ConfigPanelInner({
   const theme = useMantineTheme();
   const color = theme.colors[theme.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);
@@ -4098,8 +4192,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.show({
               color: "green",
               title: locale("ConfigResetSuccessTitle"),
@@ -4327,13 +4421,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);
@@ -4341,7 +4435,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",
@@ -4351,7 +4445,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";
@@ -4848,6 +4942,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;
@@ -4887,6 +4984,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 ?? [];
@@ -6532,7 +6632,733 @@ function AccountSelect(props) {
     !hideFrameworkHint && /* @__PURE__ */ 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 = MapPin,
+  hideRestOfAdmin = true
+}) {
+  const theme = useMantineTheme();
+  const pc = theme.colors[theme.primaryColor];
+  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 createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...{ [OVERLAY_ATTR]: "" },
+        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(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__ */ 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(
+    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__ */ 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"
+        },
+        children: action
+      }
+    )
+  ] });
+}
+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 theme = 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__ */ 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: 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__ */ 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") })
+      ]
+    }
+  ) });
+}
+function WorldPositionGotoButton2({
+  value,
+  compact
+}) {
+  const theme = useMantineTheme();
+  const color = theme.colors[theme.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: 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__ */ 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 {
+    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 = useMantineTheme();
+  const color = theme.colors[theme.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 })
+        }
+      )
+    }
+  );
+}
+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}`);
+  }
+  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 = 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__ */ 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: 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__ */ 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: label ?? 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(() => {
+    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 () => {
+      if (layerRef.current) {
+        map.removeLayer(layerRef.current);
+      }
+    };
+  }, [mapLayer, map]);
+  return null;
+};
+function ZoomControls() {
+  const theme = 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(theme.colors.dark[9], 0.85)}`,
+        background: 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__ */ jsx(
+        motion.div,
+        {
+          whileHover: { scale: 1.1, filter: "brightness(1.5)" },
+          onClick: fn,
+          style: {
+            padding: theme.spacing.xs,
+            cursor: "pointer",
+            display: "flex"
+          },
+          children: /* @__PURE__ */ 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] = 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,
+    {
+      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"
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 
-export { AccountSelect, AdminPageTitle, AnimPostFxSelect, AsyncSaveButton, BlipColorSelect, BlipDisplaySelect, BlipIconSelect, BorderedIcon, ConfigPanel, ConfirmModal, ControlMultiSelect, ControlSelect, Counter, DiscordRoleSelect, FiveMKeyBindInput, FloatingParticles, GroupName, GroupRank, GroupSelect, 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, Vector4DeleteButton, Vector4Display, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore };
+export { AccountSelect, AdminPageTitle, AnimPostFxSelect, AsyncSaveButton, BlipColorSelect, BlipDisplaySelect, BlipIconSelect, BlipMarker, BorderedIcon, ConfigPanel, ConfirmModal, ControlMultiSelect, ControlSelect, Counter, DiscordRoleSelect, DoorPickerButton, FiveMKeyBindInput, FloatingParticles, GroupName, GroupRank, GroupSelect, 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, Vector4DeleteButton, Vector4Display, WorldPositionGotoButton, WorldPositionPicker, WorldPositionSetButton, ZoomControls, blipUrl, blipUrlForSprite, getBlipColor, getBlipEntry, useAdminToolStore, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore, usePickDoor };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map