dirk-cfx-react 1.1.70 → 1.1.72

package/dist/components/index.js

@@ -1,12 +1,13 @@
 import { Flex, Text, Image, TextInput, Select, Box, useMantineTheme, Tooltip, alpha, Progress, RingProgress, Portal, Button, NumberInput, MultiSelect, Loader, ActionIcon, Stack, Group, JsonInput } from '@mantine/core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, useContext, useRef, useState, useEffect, useMemo } from 'react';
+import { createContext, useContext, useRef, useState, useEffect, 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, MapPin, Crosshair, EyeOff, Eye, RotateCcw, Check, FlaskConical, ChevronUp, ChevronDown, 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, 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';
 
 // src/components/BlipSelect.tsx
@@ -1228,11 +1229,11 @@ var colorNames = {
   Yellow: { r: 255, g: 255, b: 0 },
   YellowGreen: { r: 154, g: 205, b: 50 }
 };
-function colorWithAlpha(color, alpha9) {
+function colorWithAlpha(color, alpha10) {
   const lowerCasedColor = color.toLowerCase();
   if (colorNames[lowerCasedColor]) {
     const rgb = colorNames[lowerCasedColor];
-    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha9})`;
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha10})`;
   }
   if (/^#([A-Fa-f0-9]{6})$/.test(color)) {
     const hex = color.slice(1);
@@ -1240,12 +1241,12 @@ function colorWithAlpha(color, alpha9) {
     const r = bigint >> 16 & 255;
     const g = bigint >> 8 & 255;
     const b = bigint & 255;
-    return `rgba(${r}, ${g}, ${b}, ${alpha9})`;
+    return `rgba(${r}, ${g}, ${b}, ${alpha10})`;
   }
   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]}, ${alpha9})`;
+      return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha10})`;
     }
   }
   return color;
@@ -3197,6 +3198,246 @@ function ConfirmModal({
     }
   ) });
 }
+var TABS = [
+  { id: "ox", label: "ox_inventory" },
+  { id: "qb", label: "qb-inventory" },
+  { id: "esx", label: "ESX legacy SQL" }
+];
+var useMissingItemsAudit = create((set, get) => ({
+  data: null,
+  loaded: false,
+  inFlight: false,
+  refresh: async () => {
+    if (get().inFlight) return;
+    set({ inFlight: true });
+    try {
+      const res = await fetchNui("GET_MISSING_ITEMS", void 0, {
+        success: true,
+        data: { missing: [], snippets: { ox: "", qb: "", esx: "" } }
+      });
+      if (res?.success && res.data) {
+        set({ data: res.data, loaded: true });
+      } else {
+        set({ loaded: true });
+      }
+    } catch {
+      set({ loaded: true });
+    } finally {
+      set({ inFlight: false });
+    }
+  }
+}));
+function MissingItemsBanner() {
+  const theme = useMantineTheme();
+  const audit = useMissingItemsAudit((s) => s.data);
+  const loaded = useMissingItemsAudit((s) => s.loaded);
+  const inFlight = useMissingItemsAudit((s) => s.inFlight);
+  const refresh = useMissingItemsAudit((s) => s.refresh);
+  const [expanded, setExpanded] = useState(false);
+  const [activeTab, setActiveTab] = useState("ox");
+  const [hoveredTab, setHoveredTab] = useState(null);
+  const [copied, setCopied] = useState(null);
+  useEffect(() => {
+    if (!loaded) refresh();
+  }, [loaded, refresh]);
+  const handleCopy = useCallback((tab) => {
+    if (!audit) return;
+    const text = audit.snippets[tab] ?? "";
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(tab);
+      setTimeout(() => setCopied((c) => c === tab ? null : c), 1500);
+    }).catch(() => {
+    });
+  }, [audit]);
+  const handleRefresh = useCallback((e) => {
+    e.stopPropagation();
+    refresh();
+  }, [refresh]);
+  if (!audit || audit.missing.length === 0) return null;
+  const warnColor = "#f59e0b";
+  const names = audit.missing.map((m) => m.name);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        background: alpha(warnColor, 0.06),
+        border: `0.1vh solid ${alpha(warnColor, 0.35)}`,
+        borderLeft: `0.3vh solid ${warnColor}`,
+        borderRadius: theme.radius.xs,
+        margin: "0.6vh 1vh",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "0.8vh", p: "0.8vh 1vh", style: { cursor: "pointer" }, onClick: () => setExpanded((e) => !e), children: [
+          /* @__PURE__ */ jsx(AlertTriangle, { size: "1.8vh", color: warnColor, strokeWidth: 2.5 }),
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xs", tt: "uppercase", lts: "0.07em", c: warnColor, children: audit.missing.length === 1 ? "1 item missing from your inventory" : `${audit.missing.length} items missing from your inventory` }),
+            /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", c: "rgba(255,255,255,0.5)", lineClamp: 1, style: { fontFamily: "monospace" }, children: names.join(", ") })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleRefresh,
+              disabled: inFlight,
+              style: {
+                background: "transparent",
+                border: "none",
+                padding: "0.3vh",
+                cursor: inFlight ? "wait" : "pointer",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                opacity: inFlight ? 0.4 : 0.7
+              },
+              title: "Re-check",
+              children: /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  animate: { rotate: inFlight ? 360 : 0 },
+                  transition: inFlight ? { duration: 1, repeat: Infinity, ease: "linear" } : { duration: 0 },
+                  style: { display: "flex", alignItems: "center", justifyContent: "center" },
+                  children: /* @__PURE__ */ jsx(RefreshCw, { size: "1.5vh", color: alpha(warnColor, 0.7) })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              animate: { rotate: expanded ? 180 : 0 },
+              transition: { duration: 0.18 },
+              style: { display: "flex", alignItems: "center", justifyContent: "center" },
+              children: /* @__PURE__ */ jsx(ChevronDown, { size: "1.8vh", color: alpha(warnColor, 0.7) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: expanded && /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: { height: 0, opacity: 0 },
+            animate: { height: "auto", opacity: 1 },
+            exit: { height: 0, opacity: 0 },
+            transition: { duration: 0.18, ease: "easeOut" },
+            style: { overflow: "hidden", borderTop: `0.1vh solid ${alpha(warnColor, 0.18)}` },
+            children: [
+              /* @__PURE__ */ jsx(Flex, { gap: "0", style: { borderBottom: `0.1vh solid ${alpha(warnColor, 0.18)}` }, children: TABS.map((tab) => {
+                const active = tab.id === activeTab;
+                const hovered = hoveredTab === tab.id;
+                let bg = "transparent";
+                if (active) bg = alpha(warnColor, 0.12);
+                else if (hovered) bg = alpha(warnColor, 0.08);
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setActiveTab(tab.id);
+                    },
+                    onMouseEnter: () => setHoveredTab(tab.id),
+                    onMouseLeave: () => setHoveredTab((h) => h === tab.id ? null : h),
+                    style: {
+                      flex: 1,
+                      background: bg,
+                      border: "none",
+                      borderBottom: active ? `0.2vh solid ${warnColor}` : "0.2vh solid transparent",
+                      padding: "0.3vh 1vh",
+                      cursor: active ? "default" : "pointer",
+                      color: active ? warnColor : "rgba(255,255,255,0.5)",
+                      fontFamily: "Akrobat Bold",
+                      fontSize: "var(--mantine-font-size-xxs)",
+                      letterSpacing: "0.07em",
+                      textTransform: "uppercase",
+                      transition: "background 0.12s"
+                    },
+                    children: tab.label
+                  },
+                  tab.id
+                );
+              }) }),
+              /* @__PURE__ */ jsx(
+                CodeView,
+                {
+                  code: audit.snippets[activeTab] ?? "",
+                  copied: copied === activeTab,
+                  onCopy: (e) => {
+                    e.stopPropagation();
+                    handleCopy(activeTab);
+                  },
+                  warnColor
+                }
+              )
+            ]
+          },
+          "expanded"
+        ) })
+      ]
+    }
+  );
+}
+function CodeView({
+  code,
+  copied,
+  onCopy,
+  warnColor
+}) {
+  const theme = useMantineTheme();
+  const [hovered, setHovered] = useState(false);
+  const lines = code === "" ? [""] : code.split("\n");
+  const lineNumWidth = String(lines.length).length;
+  const copyBg = copied ? alpha("#22c55e", 0.15) : hovered ? alpha(warnColor, 0.18) : alpha(warnColor, 0.1);
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: onCopy,
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        style: {
+          position: "absolute",
+          top: "0.6vh",
+          right: "0.8vh",
+          zIndex: 2,
+          background: copyBg,
+          border: `0.1vh solid ${alpha(copied ? "#22c55e" : warnColor, 0.35)}`,
+          borderRadius: theme.radius.xs,
+          padding: "0.4vh 0.7vh",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          gap: "0.4vh",
+          transition: "background 0.12s"
+        },
+        children: [
+          copied ? /* @__PURE__ */ jsx(Check, { size: "1.4vh", color: "#22c55e" }) : /* @__PURE__ */ jsx(Copy, { size: "1.4vh", color: warnColor }),
+          /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.06em", c: copied ? "#22c55e" : warnColor, children: copied ? "Copied" : "Copy" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: {
+      background: alpha(theme.colors.dark[9], 0.6),
+      maxHeight: "40vh",
+      overflowY: "auto",
+      overflowX: "auto",
+      padding: "0.6vh 0"
+    }, children: /* @__PURE__ */ jsx("table", { style: { borderCollapse: "collapse", width: "100%", fontFamily: "monospace", fontSize: "1.2vh", lineHeight: 1.5 }, children: /* @__PURE__ */ jsx("tbody", { children: lines.map((line, i) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { style: {
+        width: `${lineNumWidth + 2}ch`,
+        textAlign: "right",
+        padding: "0 0.8vh 0 1vh",
+        color: "rgba(255,255,255,0.25)",
+        userSelect: "none",
+        whiteSpace: "nowrap",
+        verticalAlign: "top"
+      }, children: i + 1 }),
+      /* @__PURE__ */ jsx("td", { style: {
+        padding: "0 1vh",
+        color: "rgba(255,255,255,0.85)",
+        whiteSpace: "pre",
+        verticalAlign: "top"
+      }, children: line || "\u200B" })
+    ] }, i)) }) }) })
+  ] });
+}
 function getNested(obj, path) {
   return path.split(".").reduce((acc, key) => acc ? acc[key] : void 0, obj);
 }
@@ -3799,7 +4040,8 @@ function ConfigPanelInner({
   resetConfirmText,
   defaultConfig,
   width,
-  height
+  height,
+  suppressMissingItemsBanner
 }) {
   const { updateConfig, resetConfig, getHistory } = getScriptConfigInstance();
   const form = useForm();
@@ -4022,18 +4264,21 @@ function ConfigPanelInner({
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
-            motion.div,
-            {
-              initial: firstMountRef.current ? (firstMountRef.current = false, false) : { opacity: 0, y: 4 },
-              animate: { opacity: 1, y: 0 },
-              exit: { opacity: 0, y: -4 },
-              transition: { duration: 0.15 },
-              style: { flex: 1, display: "flex", flexDirection: "column", overflowY: "auto" },
-              children: children(activeTab)
-            },
-            activeTab
-          ) })
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { flex: 1, minWidth: 0, overflow: "hidden" }, children: [
+            !suppressMissingItemsBanner && /* @__PURE__ */ jsx(MissingItemsBanner, {}),
+            /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: firstMountRef.current ? (firstMountRef.current = false, false) : { opacity: 0, y: 4 },
+                animate: { opacity: 1, y: 0 },
+                exit: { opacity: 0, y: -4 },
+                transition: { duration: 0.15 },
+                style: { flex: 1, display: "flex", flexDirection: "column", overflowY: "auto" },
+                children: children(activeTab)
+              },
+              activeTab
+            ) })
+          ] })
         ]
       }
     )
@@ -4075,12 +4320,26 @@ function ConfigPanel(props) {
           if (result?.success) {
             form.reinitialize(cloneConfig(form.values));
             configPanelQueryClient.invalidateQueries({ queryKey: ["scriptConfigHistory"] });
+            useMissingItemsAudit.getState().refresh();
+            notifications.show({
+              color: "green",
+              title: locale("ConfigSaveSuccessTitle"),
+              message: locale("ConfigSaveSuccessBody"),
+              autoClose: 3e3
+            });
             return;
           }
           form.reinitialize(cloneConfig(store.getState()));
-          if (result?._error) {
-            console.warn(`[ConfigPanel] config save failed: ${result._error}`);
-          }
+          const err = result?._error || "Unknown";
+          console.warn(`[ConfigPanel] config save failed: ${err}`);
+          const titleKey = err === "NoPermission" ? "ConfigSaveNoPermissionTitle" : err === "VersionConflict" ? "ConfigSaveVersionConflictTitle" : err === "NotReady" ? "ConfigSaveNotReadyTitle" : "ConfigSaveFailedTitle";
+          const bodyKey = err === "NoPermission" ? "ConfigSaveNoPermissionBody" : err === "VersionConflict" ? "ConfigSaveVersionConflictBody" : err === "NotReady" ? "ConfigSaveNotReadyBody" : "ConfigSaveFailedBody";
+          notifications.show({
+            color: "red",
+            title: locale(titleKey),
+            message: locale(bodyKey, err),
+            autoClose: 6e3
+          });
         } finally {
           setIsSaving(false);
         }
@@ -4099,6 +4358,7 @@ function ConfigPanel(props) {
     }
   ) });
 }
+var MISSING_COLOR = "#f59e0b";
 function LazyImage({ src, style }) {
   const [visible, setVisible] = useState(false);
   const ref = useRef(null);
@@ -4116,14 +4376,19 @@ function LazyImage({ src, style }) {
 }
 function SelectItem(props) {
   const invItems = useItems();
+  const isMissing = !!props.value && !invItems[props.value];
   const formattedItems = useMemo(() => {
     const seen = /* @__PURE__ */ new Set();
-    return useItemsList(props.excludeItemNames ?? []).filter((item) => {
+    const list = useItemsList(props.excludeItemNames ?? []).filter((item) => {
       if (seen.has(item.name)) return false;
       seen.add(item.name);
       return true;
     }).map((item) => ({ value: item.name, label: item.label, image: item.image }));
-  }, [invItems, props.excludeItemNames]);
+    if (isMissing) {
+      list.unshift({ value: props.value, label: props.value, image: "" });
+    }
+    return list;
+  }, [invItems, props.excludeItemNames, props.value, isMissing]);
   return /* @__PURE__ */ jsx(
     Select,
     {
@@ -4138,10 +4403,11 @@ function SelectItem(props) {
       data: formattedItems,
       allowDeselect: false,
       searchable: true,
+      styles: isMissing ? { input: { color: MISSING_COLOR } } : void 0,
       comboboxProps: { withinPortal: true, zIndex: 2e3 },
       leftSectionWidth: "4vh",
       leftSectionPointerEvents: "none",
-      leftSection: props.value ? /* @__PURE__ */ jsx(
+      leftSection: isMissing ? /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", w: "4vh", h: "4vh", children: /* @__PURE__ */ jsx(AlertTriangle, { size: "2vh", color: MISSING_COLOR, strokeWidth: 2.5 }) }) : props.value ? /* @__PURE__ */ jsx(
         Image,
         {
           fallbackSrc: "/placeholder.png",
@@ -4152,19 +4418,37 @@ function SelectItem(props) {
         }
       ) : null,
       nothingFoundMessage: locale("NoItemsFound"),
-      renderOption: (item) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", w: "100%", children: [
-        /* @__PURE__ */ jsx(
-          LazyImage,
-          {
-            src: invItems[item.option.value]?.image || "",
-            style: { aspectRatio: "1 / 1" }
-          }
-        ),
-        /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
-          /* @__PURE__ */ jsx(Text, { size: "sm", children: item.option.label }),
-          /* @__PURE__ */ jsx(Text, { size: "xxs", c: "dimmed", children: item.option.value })
-        ] })
-      ] })
+      renderOption: (item) => {
+        const optionMissing = !invItems[item.option.value] && item.option.value === props.value;
+        if (optionMissing) {
+          return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", w: "100%", children: [
+            /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", w: "4vh", h: "4vh", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(AlertTriangle, { size: "2vh", color: MISSING_COLOR, strokeWidth: 2.5 }) }),
+            /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx(Text, { size: "sm", c: MISSING_COLOR, style: { fontFamily: "monospace" }, children: item.option.value }),
+              /* @__PURE__ */ jsx(Text, { size: "xxs", c: "dimmed", children: locale("ItemNotInInventory") })
+            ] }),
+            /* @__PURE__ */ jsx("div", { style: {
+              background: "rgba(245,158,11,0.12)",
+              border: `0.1vh solid ${MISSING_COLOR}59`,
+              borderRadius: "0.3vh",
+              padding: "0.1vh 0.6vh"
+            }, children: /* @__PURE__ */ jsx(Text, { size: "xxs", c: MISSING_COLOR, ff: "Akrobat Bold", tt: "uppercase", lts: "0.06em", children: locale("Missing") }) })
+          ] });
+        }
+        return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", w: "100%", children: [
+          /* @__PURE__ */ jsx(
+            LazyImage,
+            {
+              src: invItems[item.option.value]?.image || "",
+              style: { aspectRatio: "1 / 1" }
+            }
+          ),
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+            /* @__PURE__ */ jsx(Text, { size: "sm", children: item.option.label }),
+            /* @__PURE__ */ jsx(Text, { size: "xxs", c: "dimmed", children: item.option.value })
+          ] })
+        ] });
+      }
     }
   );
 }
@@ -4381,6 +4665,148 @@ function PickerButton({
     }
   ) });
 }
+function fmtV4(n) {
+  return Number.isFinite(n) ? n.toFixed(2) : "0.00";
+}
+function Vector4Display({ value }) {
+  const theme = useMantineTheme();
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      align: "center",
+      gap: "xs",
+      p: "xs",
+      style: {
+        background: alpha(theme.colors.dark[5], 0.35),
+        border: "0.1vh solid rgba(255,255,255,0.05)",
+        borderRadius: theme.radius.xs
+      },
+      children: /* @__PURE__ */ jsxs(
+        Text,
+        {
+          ff: "monospace",
+          size: "xxs",
+          c: "rgba(255,255,255,0.85)",
+          style: { flex: 1, letterSpacing: "0.02em", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" },
+          children: [
+            "vector4(",
+            fmtV4(value.x),
+            ", ",
+            fmtV4(value.y),
+            ", ",
+            fmtV4(value.z),
+            ", ",
+            fmtV4(value.w),
+            ")"
+          ]
+        }
+      )
+    }
+  );
+}
+function Vector4ActionButton({
+  icon,
+  label,
+  tooltip,
+  onClick,
+  color,
+  compact
+}) {
+  const theme = useMantineTheme();
+  return /* @__PURE__ */ jsx(Tooltip, { label: tooltip, 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: [
+        icon,
+        /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.06em", c: color, children: label })
+      ]
+    }
+  ) });
+}
+function WorldPositionSetButton({
+  value,
+  onChange,
+  compact
+}) {
+  const theme = useMantineTheme();
+  const color = theme.colors[theme.primaryColor][5];
+  const grab = async () => {
+    try {
+      const resp = await fetchNui("GET_POSITION", {}, value);
+      if (!resp || typeof resp !== "object") return;
+      onChange({
+        x: Number(resp.x ?? 0),
+        y: Number(resp.y ?? 0),
+        z: Number(resp.z ?? 0),
+        w: Number(resp.w ?? 0)
+      });
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Vector4ActionButton,
+    {
+      icon: /* @__PURE__ */ jsx(Crosshair, { size: compact ? "1.1vh" : "1.3vh", color }),
+      label: locale("Set"),
+      tooltip: locale("SetWorldTooltip"),
+      onClick: grab,
+      color,
+      compact
+    }
+  );
+}
+function WorldPositionGotoButton({
+  value,
+  compact
+}) {
+  const theme = useMantineTheme();
+  const color = theme.colors[theme.primaryColor][5];
+  const goto = () => {
+    fetchNui("GOTO_POSITION", value).catch(() => {
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    Vector4ActionButton,
+    {
+      icon: /* @__PURE__ */ jsx(MapPin, { size: compact ? "1.1vh" : "1.3vh", color }),
+      label: locale("Goto"),
+      tooltip: locale("GotoWorldTooltip"),
+      onClick: goto,
+      color,
+      compact
+    }
+  );
+}
+function Vector4DeleteButton({
+  onClick,
+  compact
+}) {
+  const color = "#ef4444";
+  return /* @__PURE__ */ jsx(
+    Vector4ActionButton,
+    {
+      icon: /* @__PURE__ */ jsx(Trash2, { size: compact ? "1.1vh" : "1.3vh", color }),
+      label: locale("Delete"),
+      tooltip: locale("Delete"),
+      onClick,
+      color,
+      compact
+    }
+  );
+}
 var GroupSelectContext = createContext(null);
 function GroupSelect({
   value,
@@ -4832,6 +5258,6 @@ function TestBed({
   );
 }
 
-export { AdminPageTitle, AsyncSaveButton, BlipColorSelect, BlipDisplaySelect, BlipIconSelect, BorderedIcon, ConfigPanel, ConfirmModal, ControlMultiSelect, ControlSelect, Counter, FiveMKeyBindInput, FloatingParticles, GroupName, GroupRank, GroupSelect, InfoBox, InputContainer, LevelBanner, LevelPanel, Modal, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PositionPicker, PromptModal, SegmentedControl, SegmentedProgress, SelectItem, TestBed, Title, useModal, useModalActions, useNavigation, useNavigationStore };
+export { AdminPageTitle, AsyncSaveButton, BlipColorSelect, BlipDisplaySelect, BlipIconSelect, BorderedIcon, ConfigPanel, ConfirmModal, ControlMultiSelect, ControlSelect, Counter, FiveMKeyBindInput, FloatingParticles, GroupName, GroupRank, GroupSelect, InfoBox, InputContainer, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PositionPicker, PromptModal, SegmentedControl, SegmentedProgress, SelectItem, TestBed, Title, Vector4DeleteButton, Vector4Display, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map