dirk-cfx-react 1.1.62 → 1.1.65

package/dist/components/index.cjs

@@ -6,9 +6,9 @@ var react = require('react');
 var zustand = require('zustand');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var framerMotion = require('framer-motion');
+var lucideReact = require('lucide-react');
 var clickSoundUrl = require('../click_sound-PNCRRTM4.mp3');
 var hoverSoundUrl = require('../hover_sound-NBUA222C.mp3');
-var lucideReact = require('lucide-react');
 var reactQuery = require('@tanstack/react-query');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -1064,6 +1064,31 @@ function BlipColorSelect({ value, onChange, label = "Blip Color", size = "xs", .
     }
   );
 }
+var BLIP_DISPLAY_DATA = [
+  { value: "2", label: "2 \u2014 Main map + minimap (selectable)" },
+  { value: "3", label: "3 \u2014 Main map only (selectable)" },
+  { value: "4", label: "4 \u2014 Main map only (selectable)" },
+  { value: "5", label: "5 \u2014 Minimap only" },
+  { value: "6", label: "6 \u2014 Main map + minimap (selectable)" },
+  { value: "8", label: "8 \u2014 Main map + minimap (not selectable)" },
+  { value: "9", label: "9 \u2014 Minimap only" },
+  { value: "10", label: "10 \u2014 Main map + minimap (not selectable)" }
+];
+function BlipDisplaySelect({ value, onChange, label = "Blip Display", size = "xs", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Select,
+    {
+      label,
+      size,
+      ...rest,
+      data: BLIP_DISPLAY_DATA,
+      value: value != null ? String(value) : null,
+      onChange: (val) => val != null && onChange(Number(val)),
+      allowDeselect: false,
+      maxDropdownHeight: 300
+    }
+  );
+}
 
 // src/utils/colorWithAlpha.ts
 var colorNames = {
@@ -1210,11 +1235,11 @@ var colorNames = {
   Yellow: { r: 255, g: 255, b: 0 },
   YellowGreen: { r: 154, g: 205, b: 50 }
 };
-function colorWithAlpha(color, alpha8) {
+function colorWithAlpha(color, alpha9) {
   const lowerCasedColor = color.toLowerCase();
   if (colorNames[lowerCasedColor]) {
     const rgb = colorNames[lowerCasedColor];
-    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha8})`;
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha9})`;
   }
   if (/^#([A-Fa-f0-9]{6})$/.test(color)) {
     const hex = color.slice(1);
@@ -1222,12 +1247,12 @@ function colorWithAlpha(color, alpha8) {
     const r = bigint >> 16 & 255;
     const g = bigint >> 8 & 255;
     const b = bigint & 255;
-    return `rgba(${r}, ${g}, ${b}, ${alpha8})`;
+    return `rgba(${r}, ${g}, ${b}, ${alpha9})`;
   }
   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]}, ${alpha8})`;
+      return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha9})`;
     }
   }
   return color;
@@ -1274,13 +1299,24 @@ async function fetchNui(eventName, data, mockData) {
   }
   const overrideResourceName = useSettings.getState().overideResourceName;
   const resourceName = window.GetParentResourceName ? window.GetParentResourceName() : overrideResourceName ? overrideResourceName : "dirk-cfx-react";
-  const resp = await fetch(`https://${resourceName}/${eventName}`, options);
-  return await resp.json();
+  try {
+    const resp = await fetch(`https://${resourceName}/${eventName}`, options);
+    return await resp.json();
+  } catch {
+    return mockData ?? {};
+  }
 }
 async function registerInitialFetch(eventName, data, mockData) {
   const fetcher = () => fetchNui(eventName, data, mockData);
   return fetcher();
 }
+var reportedMissing = /* @__PURE__ */ new Set();
+function reportMissingLocale(key) {
+  if (!key || reportedMissing.has(key)) return;
+  reportedMissing.add(key);
+  fetchNui("REPORT_MISSING_LOCALE", { key }).catch(() => {
+  });
+}
 var localeStore = zustand.create((set, get) => {
   return {
     locales: {
@@ -1288,6 +1324,7 @@ var localeStore = zustand.create((set, get) => {
     },
     locale: (key, ...args) => {
       const exists = get().locales[key];
+      if (!exists) reportMissingLocale(key);
       let translation = exists || key;
       if (args.length) {
         translation = translation.replace(/%s/g, () => String(args.shift() || ""));
@@ -1301,6 +1338,14 @@ registerInitialFetch("GET_LOCALES", void 0).then((data) => {
   localeStore.setState({ locales: data });
 }).catch(() => {
 });
+if (typeof window !== "undefined") {
+  window.addEventListener("message", (event) => {
+    const msg = event.data;
+    if (!msg || msg.action !== "UPDATE_DIRK_LIB_LOCALES") return;
+    if (!msg.data || typeof msg.data !== "object") return;
+    localeStore.setState({ locales: msg.data });
+  });
+}
 var useItems = zustand.create(() => ({}));
 var useItemsList = (excludeItemNames = []) => {
   const excludeSet = new Set(excludeItemNames);
@@ -1940,8 +1985,8 @@ function InputContainer(props) {
               (props.title || props.description) && /* @__PURE__ */ jsxRuntime.jsxs(
                 core.Flex,
                 {
-                  direction: "column",
-                  gap: "xxs",
+                  align: "center",
+                  flex: 1,
                   p: props.p == "0" ? "sm" : 0,
                   children: [
                     props.title && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1958,12 +2003,26 @@ function InputContainer(props) {
                       }
                     ),
                     props.description && /* @__PURE__ */ jsxRuntime.jsx(
-                      core.Text,
+                      core.Tooltip,
                       {
-                        size: "xs",
-                        c: "rgba(255, 255, 255, 0.8)",
-                        fw: 400,
-                        children: props.description
+                        label: props.description,
+                        position: "top-end",
+                        withArrow: true,
+                        multiline: true,
+                        maw: "22vh",
+                        styles: {
+                          tooltip: {
+                            background: core.alpha(theme.colors.dark[7], 0.95),
+                            border: `0.1vh solid rgba(255,255,255,0.1)`,
+                            color: "rgba(255,255,255,0.75)",
+                            fontFamily: "Akrobat Bold",
+                            fontSize: "1.3vh",
+                            lineHeight: 1.3,
+                            padding: "0.6vh 0.8vh",
+                            letterSpacing: "0.03em"
+                          }
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(core.Flex, { align: "center", justify: "center", style: { marginLeft: "auto", cursor: "help" }, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { size: "1.6vh", color: core.alpha(theme.colors[theme.primaryColor][5], 0.45) }) })
                       }
                     )
                   ]
@@ -1980,13 +2039,7 @@ function InputContainer(props) {
                   children: props.error
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                core.Flex,
-                {
-                  ml: "auto",
-                  children: props.rightSection
-                }
-              )
+              props.rightSection && /* @__PURE__ */ jsxRuntime.jsx(core.Flex, { children: props.rightSection })
             ]
           }
         ),
@@ -3995,6 +4048,219 @@ function SelectItem(props) {
     }
   );
 }
+var ZERO = { x: 0, y: 0, z: 0, w: 0 };
+function PositionPicker(props) {
+  const {
+    label,
+    value,
+    onChange,
+    relativeTo,
+    fetchEvent = "GET_POSITION",
+    previewEvent = "PREVIEW_POSITION",
+    stopPreviewEvent = "STOP_PREVIEW_POSITION",
+    description,
+    showHeading = true
+  } = props;
+  const theme = core.useMantineTheme();
+  const color = theme.colors[theme.primaryColor][5];
+  const [previewing, setPreviewing] = react.useState(false);
+  const previewingRef = react.useRef(false);
+  react.useEffect(() => {
+    return () => {
+      if (previewingRef.current) {
+        fetchNui(stopPreviewEvent, { relativeTo }).catch(() => {
+        });
+      }
+    };
+  }, [stopPreviewEvent, relativeTo]);
+  const set = (key, val) => {
+    const next = { ...value, [key]: val };
+    onChange(next);
+    if (previewingRef.current) {
+      fetchNui(previewEvent, { value: next, relativeTo }).catch(() => {
+      });
+    }
+  };
+  const grab = async () => {
+    try {
+      const resp = await fetchNui(fetchEvent, { relativeTo }, value);
+      if (resp && typeof resp === "object") {
+        const next = {
+          x: Number(resp.x ?? 0),
+          y: Number(resp.y ?? 0),
+          z: Number(resp.z ?? 0),
+          w: Number(resp.w ?? 0)
+        };
+        onChange(next);
+        if (previewingRef.current) {
+          fetchNui(previewEvent, { value: next, relativeTo }).catch(() => {
+          });
+        }
+      }
+    } catch {
+    }
+  };
+  const togglePreview = async () => {
+    const nextState = !previewing;
+    setPreviewing(nextState);
+    previewingRef.current = nextState;
+    if (nextState) {
+      await fetchNui(previewEvent, { value, relativeTo }).catch(() => {
+      });
+    } else {
+      await fetchNui(stopPreviewEvent, { relativeTo }).catch(() => {
+      });
+    }
+  };
+  const reset = () => {
+    onChange({ ...ZERO });
+    if (previewingRef.current) {
+      fetchNui(previewEvent, { value: ZERO, relativeTo }).catch(() => {
+      });
+    }
+  };
+  const numberStyles = {
+    input: { textAlign: "right", fontFamily: "monospace" }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.Flex,
+    {
+      direction: "column",
+      gap: "xxs",
+      p: "xs",
+      style: {
+        background: core.alpha(theme.colors.dark[5], 0.35),
+        border: "0.1vh solid rgba(255,255,255,0.05)",
+        borderRadius: theme.radius.xs
+      },
+      children: [
+        (label || description) && /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { justify: "space-between", align: "center", gap: "xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", gap: 0, style: { minWidth: 0 }, children: [
+            label && /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", gap: "xxs", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { size: "1.4vh", color: core.alpha(color, 0.7) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                core.Text,
+                {
+                  ff: "Akrobat Bold",
+                  size: "xxs",
+                  tt: "uppercase",
+                  lts: "0.05em",
+                  c: "rgba(255,255,255,0.75)",
+                  children: locale(label)
+                }
+              ),
+              relativeTo && /* @__PURE__ */ jsxRuntime.jsxs(core.Text, { ff: "Akrobat Bold", size: "xxs", c: core.alpha(color, 0.5), lts: "0.05em", children: [
+                "\xB7 ",
+                locale("RelativeTo"),
+                " ",
+                relativeTo
+              ] })
+            ] }),
+            description && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", c: "dimmed", lh: 1.3, children: locale(description) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { gap: "xxs", style: { flexShrink: 0 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(PickerButton, { tooltip: locale("GrabMyPosition"), onClick: grab, color, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Crosshair, { size: "1.4vh", color }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              PickerButton,
+              {
+                tooltip: previewing ? locale("StopPreview") : locale("PreviewInWorld"),
+                onClick: togglePreview,
+                color,
+                active: previewing,
+                children: previewing ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { size: "1.4vh", color }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: "1.4vh", color: core.alpha(color, 0.7) })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(PickerButton, { tooltip: locale("Reset"), onClick: reset, color: "#ef4444", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { size: "1.4vh", color: "#ef4444" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { gap: "xxs", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.NumberInput,
+            {
+              size: "xs",
+              label: "X",
+              value: value.x,
+              onChange: (v) => set("x", Number(v)),
+              decimalScale: 4,
+              step: 0.1,
+              style: { flex: 1 },
+              styles: numberStyles
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.NumberInput,
+            {
+              size: "xs",
+              label: "Y",
+              value: value.y,
+              onChange: (v) => set("y", Number(v)),
+              decimalScale: 4,
+              step: 0.1,
+              style: { flex: 1 },
+              styles: numberStyles
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.NumberInput,
+            {
+              size: "xs",
+              label: "Z",
+              value: value.z,
+              onChange: (v) => set("z", Number(v)),
+              decimalScale: 4,
+              step: 0.1,
+              style: { flex: 1 },
+              styles: numberStyles
+            }
+          ),
+          showHeading && /* @__PURE__ */ jsxRuntime.jsx(
+            core.NumberInput,
+            {
+              size: "xs",
+              label: "W",
+              value: value.w,
+              onChange: (v) => set("w", Number(v)),
+              decimalScale: 2,
+              step: 1,
+              min: 0,
+              max: 360,
+              style: { flex: 1 },
+              styles: numberStyles
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function PickerButton({
+  children,
+  onClick,
+  tooltip,
+  color,
+  active
+}) {
+  const theme = core.useMantineTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { label: tooltip, position: "top", withArrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.button,
+    {
+      onClick,
+      whileHover: { background: core.alpha(color, 0.18) },
+      whileTap: { scale: 0.95 },
+      style: {
+        background: active ? core.alpha(color, 0.22) : core.alpha(color, 0.08),
+        border: `0.1vh solid ${core.alpha(color, active ? 0.5 : 0.3)}`,
+        borderRadius: theme.radius.xs,
+        padding: "0.4vh 0.6vh",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children
+    }
+  ) });
+}
 var KeyBindContext = react.createContext(null);
 function useKeyBindContext() {
   const ctx = react.useContext(KeyBindContext);
@@ -4281,6 +4547,7 @@ function TestBed({
 exports.AdminPageTitle = AdminPageTitle;
 exports.AsyncSaveButton = AsyncSaveButton;
 exports.BlipColorSelect = BlipColorSelect;
+exports.BlipDisplaySelect = BlipDisplaySelect;
 exports.BlipIconSelect = BlipIconSelect;
 exports.BorderedIcon = BorderedIcon;
 exports.ConfigPanel = ConfigPanel;
@@ -4302,6 +4569,7 @@ exports.MotionText = MotionText;
 exports.NavBar = NavBar;
 exports.NavigationContext = NavigationContext;
 exports.NavigationProvider = NavigationProvider;
+exports.PositionPicker = PositionPicker;
 exports.PromptModal = PromptModal;
 exports.SegmentedControl = SegmentedControl;
 exports.SegmentedProgress = SegmentedProgress;