dirk-cfx-react 1.1.64 → 1.1.66

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 var core = require('@mantine/core');
 var jsxRuntime = require('react/jsx-runtime');
-var React5 = require('react');
+var React6 = require('react');
 var zustand = require('zustand');
 var axios = require('axios');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
@@ -24,7 +24,7 @@ var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React5__default = /*#__PURE__*/_interopDefault(React5);
+var React6__default = /*#__PURE__*/_interopDefault(React6);
 var axios__default = /*#__PURE__*/_interopDefault(axios);
 var clickSoundUrl__default = /*#__PURE__*/_interopDefault(clickSoundUrl);
 var hoverSoundUrl__default = /*#__PURE__*/_interopDefault(hoverSoundUrl);
@@ -1079,6 +1079,31 @@ function BlipColorSelect({ value, onChange, label: label2 = "Blip Color", size =
     }
   );
 }
+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: label2 = "Blip Display", size = "xs", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Select,
+    {
+      label: label2,
+      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 = {
@@ -1225,11 +1250,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);
@@ -1237,12 +1262,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;
@@ -1337,7 +1362,7 @@ async function runFetches() {
   );
 }
 var useAutoFetcher = () => {
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (isEnvBrowser()) return;
     runFetches().catch(() => {
     });
@@ -1833,7 +1858,7 @@ function createSkill(defaultSettings) {
   }));
   const useSkill = (xp) => {
     const { settings, levelMap } = useStore4();
-    return React5.useMemo(() => {
+    return React6.useMemo(() => {
       const currentLevel = getLevelFromXP(xp, levelMap, settings);
       const nextLevel = Math.min(currentLevel + 1, settings.maxLevel);
       const currentLevelXP = levelMap[currentLevel.toString()] || 0;
@@ -1921,6 +1946,23 @@ registerInitialFetch("FETCH_ALL_ITEMS", null, {
   useItems.setState(fetchedItems);
 }).catch(() => {
 });
+var useFrameworkGroups = zustand.create(() => ({
+  jobs: [],
+  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
+  });
+}).catch(() => {
+  useFrameworkGroups.setState({ loaded: true });
+});
+function selectAllGroups(state) {
+  return [...state.jobs, ...state.gangs];
+}
 
 // src/utils/inputMapper.ts
 var INPUT_MAPPER_PRIMARY_OPTIONS = [
@@ -2290,8 +2332,8 @@ var FloatingParticles = ({
   mouseRepelStrength = 50,
   backgroundColor = "transparent"
 }) => {
-  const containerRef = React5.useRef(null);
-  const [particles, setParticles] = React5.useState([]);
+  const containerRef = React6.useRef(null);
+  const [particles, setParticles] = React6.useState([]);
   const mouseX = framerMotion.useMotionValue(0);
   const mouseY = framerMotion.useMotionValue(0);
   const durationMap = {
@@ -2304,7 +2346,7 @@ var FloatingParticles = ({
     const x = Math.sin(seed) * 1e4;
     return x - Math.floor(x);
   };
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!containerRef.current) return;
     const bounds = containerRef.current.getBoundingClientRect();
     const newParticles = [...Array(particleCount)].map((_, i) => {
@@ -2325,7 +2367,7 @@ var FloatingParticles = ({
     });
     setParticles(newParticles);
   }, [particleCount, icons.length, duration.base, duration.variance]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!containerRef.current) return;
     const handleMouseMove = (e) => {
       const bounds = containerRef.current.getBoundingClientRect();
@@ -2374,7 +2416,7 @@ var FloatingParticles = ({
       container.removeEventListener("mouseleave", handleMouseLeave);
     };
   }, [mouseX, mouseY, mouseRepelDistance, mouseRepelStrength]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const handleResize = () => {
       if (!containerRef.current) return;
       const bounds = containerRef.current.getBoundingClientRect();
@@ -2810,23 +2852,23 @@ function Segment(props) {
     }
   );
 }
-var NavigationContext = React5.createContext(null);
+var NavigationContext = React6.createContext(null);
 function useNavigation(selector) {
-  const navigation = React5.useContext(NavigationContext);
+  const navigation = React6.useContext(NavigationContext);
   if (!navigation) {
     throw new Error("useNavigation must be used within a NavigationProvider");
   }
   return zustand.useStore(navigation, selector);
 }
 function useNavigationStore() {
-  const navigation = React5.useContext(NavigationContext);
+  const navigation = React6.useContext(NavigationContext);
   if (!navigation) {
     throw new Error("useNavigationStore must be used within a NavigationProvider");
   }
   return navigation;
 }
 function NavigationProvider({ children, defaultPage }) {
-  const storeRef = React5.useRef(
+  const storeRef = React6.useRef(
     zustand.create(() => ({
       pageId: defaultPage || "home"
     }))
@@ -3183,7 +3225,7 @@ function Modal({
   children
 }) {
   const theme2 = core.useMantineTheme();
-  const pointerDownOnOverlay = React5.useRef(false);
+  const pointerDownOnOverlay = React6.useRef(false);
   return /* @__PURE__ */ jsxRuntime.jsx(core.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     framerMotion.motion.div,
     {
@@ -3364,9 +3406,9 @@ function PromptModal(props) {
     }
   );
 }
-var ModalContext = React5.createContext(null);
+var ModalContext = React6.createContext(null);
 function useModal(selector) {
-  const modal = React5.useContext(ModalContext);
+  const modal = React6.useContext(ModalContext);
   if (!modal) {
     throw new Error("useModal must be used within a ModalProvider");
   }
@@ -3394,7 +3436,7 @@ function StoreModal() {
   ) });
 }
 function ModalProvider({ children }) {
-  const storeRef = React5.useRef(
+  const storeRef = React6.useRef(
     zustand.create(() => ({
       active: null
     }))
@@ -3405,7 +3447,7 @@ function ModalProvider({ children }) {
   ] });
 }
 function useModalActions() {
-  const modal = React5.useContext(ModalContext);
+  const modal = React6.useContext(ModalContext);
   if (!modal) throw new Error("useModalActions must be used within a ModalProvider");
   const showModal = (openModal) => {
     modal.setState({ active: openModal });
@@ -3425,7 +3467,7 @@ function ConfirmModal({
   zIndex = 200
 }) {
   const theme2 = core.useMantineTheme();
-  const [typed, setTyped] = React5.useState("");
+  const [typed, setTyped] = React6.useState("");
   const canConfirm = !confirmText || typed === confirmText;
   return /* @__PURE__ */ jsxRuntime.jsx(core.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     framerMotion.motion.div,
@@ -3903,38 +3945,38 @@ function createFormStore(initialValues, validationRules, onSubmit) {
     }
   }));
 }
-var FormContext = React5.createContext(null);
+var FormContext = React6.createContext(null);
 function FormProvider({
   initialValues,
   validate,
   onSubmit,
   children
 }) {
-  const storeRef = React5.useRef(
+  const storeRef = React6.useRef(
     createFormStore(initialValues, validate, onSubmit)
   );
   return /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: storeRef.current, children });
 }
 function useForm() {
-  const store = React5.useContext(FormContext);
+  const store = React6.useContext(FormContext);
   if (!store) {
     throw new Error("useForm must be used inside <FormProvider>");
   }
   const state = zustand.useStore(store);
-  const changedFields = React5.useMemo(() => {
+  const changedFields = React6.useMemo(() => {
     return collectChangedPaths(state.values, state.initialValues);
   }, [state.values, state.initialValues]);
   return { ...state, changedFields, changedCount: changedFields.length };
 }
 function useFormField(path) {
-  const store = React5.useContext(FormContext);
+  const store = React6.useContext(FormContext);
   if (!store) {
     throw new Error("useFormField must be used inside <FormProvider>");
   }
   return zustand.useStore(store, (s) => getNested(s.values, path));
 }
 function useFormFields(...paths) {
-  const store = React5.useContext(FormContext);
+  const store = React6.useContext(FormContext);
   if (!store) {
     throw new Error("useFormFields must be used inside <FormProvider>");
   }
@@ -3947,14 +3989,14 @@ function useFormFields(...paths) {
   });
 }
 function useFormError(path) {
-  const store = React5.useContext(FormContext);
+  const store = React6.useContext(FormContext);
   if (!store) {
     throw new Error("useFormError must be used inside <FormProvider>");
   }
   return zustand.useStore(store, (s) => s.errors[path]);
 }
 function useFormErrors(...paths) {
-  const store = React5.useContext(FormContext);
+  const store = React6.useContext(FormContext);
   if (!store) {
     throw new Error("useFormErrors must be used inside <FormProvider>");
   }
@@ -3967,18 +4009,18 @@ function useFormErrors(...paths) {
   });
 }
 function useFormActions() {
-  const store = React5.useContext(FormContext);
+  const store = React6.useContext(FormContext);
   if (!store) {
     throw new Error("useFormActions must be used inside <FormProvider>");
   }
   return store.getState();
 }
 var useNuiEvent = (action, handler) => {
-  const savedHandler = React5.useRef(noop);
-  React5.useEffect(() => {
+  const savedHandler = React6.useRef(noop);
+  React6.useEffect(() => {
     savedHandler.current = handler;
   }, [handler]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const eventListener = (event) => {
       const { action: eventAction, data } = event.data;
       if (savedHandler.current) {
@@ -4111,8 +4153,8 @@ function ConfigJsonModal({
   const theme2 = core.useMantineTheme();
   const color = theme2.colors[theme2.primaryColor][5];
   const form = useForm();
-  const [json, setJson] = React5.useState(() => JSON.stringify(form.values, null, 2));
-  const [error2, setError] = React5.useState(null);
+  const [json, setJson] = React6.useState(() => JSON.stringify(form.values, null, 2));
+  const [error2, setError] = React6.useState(null);
   const handleSave = () => {
     try {
       const parsed = JSON.parse(json);
@@ -4289,14 +4331,14 @@ function ConfigHistoryModal({
   const { getHistory } = getScriptConfigInstance();
   const theme2 = core.useMantineTheme();
   const color = theme2.colors[theme2.primaryColor][5];
-  const [queryInput, setQueryInput] = React5.useState("");
-  const [pathInput, setPathInput] = React5.useState("");
-  const [adminInput, setAdminInput] = React5.useState("");
-  const [query, setQuery] = React5.useState("");
-  const [path, setPath] = React5.useState("");
-  const [admin, setAdmin] = React5.useState("");
-  const [expandedKey, setExpandedKey] = React5.useState(null);
-  const filters = React5.useMemo(() => ({ query, path, admin }), [query, path, admin]);
+  const [queryInput, setQueryInput] = React6.useState("");
+  const [pathInput, setPathInput] = React6.useState("");
+  const [adminInput, setAdminInput] = React6.useState("");
+  const [query, setQuery] = React6.useState("");
+  const [path, setPath] = React6.useState("");
+  const [admin, setAdmin] = React6.useState("");
+  const [expandedKey, setExpandedKey] = React6.useState(null);
+  const filters = React6.useMemo(() => ({ query, path, admin }), [query, path, admin]);
   const historyQuery = reactQuery.useInfiniteQuery({
     queryKey: ["scriptConfigHistory", filters],
     initialPageParam: 0,
@@ -4390,12 +4432,12 @@ function ConfigPanelInner({
   const theme2 = core.useMantineTheme();
   const color = theme2.colors[theme2.primaryColor][5];
   const version = useSettings((s) => s.resourceVersion);
-  const [activeTab, setActiveTab] = React5.useState(navItems[0]?.id ?? "");
-  const firstMountRef = React5.useRef(true);
-  const [jsonOpen, setJsonOpen] = React5.useState(false);
-  const [historyOpen, setHistoryOpen] = React5.useState(false);
-  const [resetOpen, setResetOpen] = React5.useState(false);
-  const [pendingAction, setPendingAction] = React5.useState(null);
+  const [activeTab, setActiveTab] = React6.useState(navItems[0]?.id ?? "");
+  const firstMountRef = React6.useRef(true);
+  const [jsonOpen, setJsonOpen] = React6.useState(false);
+  const [historyOpen, setHistoryOpen] = React6.useState(false);
+  const [resetOpen, setResetOpen] = React6.useState(false);
+  const [pendingAction, setPendingAction] = React6.useState(null);
   const changedCount = form.changedCount ?? 0;
   const isDirty = changedCount > 0;
   const goBack = () => fetchNui("CONFIG_PANEL_BACK");
@@ -4406,7 +4448,7 @@ function ConfigPanelInner({
     }
     goBack();
   };
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     function handleKeyDown(e) {
       if (e.key !== "Escape") return;
       if (isDirty) {
@@ -4629,7 +4671,7 @@ function cloneConfig(value) {
 function ServerOnlyFetcher() {
   const { fetchConfig } = getScriptConfigInstance();
   const { reinitialize } = useFormActions();
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     let cancelled = false;
     fetchConfig().then((full) => {
       if (!cancelled && full) reinitialize(full);
@@ -4645,7 +4687,7 @@ var defaultOnClose = () => fetchNui("CLOSE_ADMIN_SECTION");
 function ConfigPanel(props) {
   const { open, onClose = defaultOnClose } = props;
   const { store, updateConfig } = getScriptConfigInstance();
-  const [isSaving, setIsSaving] = React5.useState(false);
+  const [isSaving, setIsSaving] = React6.useState(false);
   if (!open) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: configPanelQueryClient, children: /* @__PURE__ */ jsxRuntime.jsxs(
     FormProvider,
@@ -4684,9 +4726,9 @@ function ConfigPanel(props) {
   ) });
 }
 function LazyImage({ src, alt, style }) {
-  const [visible, setVisible] = React5.useState(false);
-  const ref = React5.useRef(null);
-  React5.useEffect(() => {
+  const [visible, setVisible] = React6.useState(false);
+  const ref = React6.useRef(null);
+  React6.useEffect(() => {
     const observer = new IntersectionObserver(([entry]) => {
       if (entry.isIntersecting) {
         setVisible(true);
@@ -4700,7 +4742,7 @@ function LazyImage({ src, alt, style }) {
 }
 function SelectItem(props) {
   const invItems = useItems();
-  const formattedItems = React5.useMemo(() => {
+  const formattedItems = React6.useMemo(() => {
     const seen = /* @__PURE__ */ new Set();
     return useItemsList(props.excludeItemNames ?? []).filter((item) => {
       if (seen.has(item.name)) return false;
@@ -4752,9 +4794,310 @@ function SelectItem(props) {
     }
   );
 }
-var KeyBindContext = React5.createContext(null);
+var ZERO = { x: 0, y: 0, z: 0, w: 0 };
+function PositionPicker(props) {
+  const {
+    label: label2,
+    value,
+    onChange,
+    relativeTo,
+    fetchEvent = "GET_POSITION",
+    previewEvent = "PREVIEW_POSITION",
+    stopPreviewEvent = "STOP_PREVIEW_POSITION",
+    description: description2,
+    showHeading = true
+  } = props;
+  const theme2 = core.useMantineTheme();
+  const color = theme2.colors[theme2.primaryColor][5];
+  const [previewing, setPreviewing] = React6.useState(false);
+  const previewingRef = React6.useRef(false);
+  React6.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(theme2.colors.dark[5], 0.35),
+        border: "0.1vh solid rgba(255,255,255,0.05)",
+        borderRadius: theme2.radius.xs
+      },
+      children: [
+        (label2 || description2) && /* @__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: [
+            label2 && /* @__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(label2)
+                }
+              ),
+              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
+              ] })
+            ] }),
+            description2 && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", c: "dimmed", lh: 1.3, children: locale(description2) })
+          ] }),
+          /* @__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 theme2 = 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: theme2.radius.xs,
+        padding: "0.4vh 0.6vh",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children
+    }
+  ) });
+}
+var GroupSelectContext = React6.createContext(null);
+function GroupSelect({
+  value,
+  onChange,
+  type,
+  children,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(GroupSelectContext.Provider, { value: { value, onChange, type }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.4vh", ...style }, children }) });
+}
+function filterByType(jobs, gangs, type) {
+  if (type === "job") return jobs;
+  if (type === "gang") return gangs;
+  return [...jobs, ...gangs];
+}
+function GroupName(props) {
+  const ctx = React6.useContext(GroupSelectContext);
+  const jobs = useFrameworkGroups((s) => s.jobs);
+  const gangs = useFrameworkGroups((s) => s.gangs);
+  const inCompound = ctx !== null;
+  const currentValue = inCompound ? ctx.value.name : props.value;
+  const filterType = inCompound ? ctx.type : props.type;
+  const list = filterByType(jobs, gangs, filterType);
+  const data = filterType === void 0 ? [
+    { group: locale("Jobs") || "Jobs", items: jobs.map((g) => ({ value: g.name, label: g.label })) },
+    { group: locale("Gangs") || "Gangs", items: gangs.map((g) => ({ value: g.name, label: g.label })) }
+  ] : list.map((g) => ({ value: g.name, label: g.label }));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Select,
+    {
+      label: props.label,
+      description: props.description,
+      placeholder: props.placeholder ?? (locale("SelectGroup") || "Select\u2026"),
+      size: props.size ?? "xs",
+      disabled: props.disabled,
+      style: props.style,
+      data,
+      value: currentValue ?? null,
+      searchable: true,
+      onChange: (v) => {
+        const name = v ?? "";
+        if (inCompound) {
+          ctx.onChange({ name: name || void 0, grade: void 0 });
+        } else if (props.onChange) {
+          props.onChange(name);
+        }
+      },
+      allowDeselect: false
+    }
+  );
+}
+function GroupRank(props) {
+  const ctx = React6.useContext(GroupSelectContext);
+  if (ctx === null) {
+    throw new Error("<GroupRank> must be a child of <GroupSelect>");
+  }
+  const jobs = useFrameworkGroups((s) => s.jobs);
+  const gangs = useFrameworkGroups((s) => s.gangs);
+  const all = [...jobs, ...gangs];
+  const selectedGroup = all.find((g) => g.name === ctx.value.name) ?? null;
+  const grades = selectedGroup?.grades ?? [];
+  const data = grades.map((g) => ({
+    value: String(g.grade),
+    label: `${g.grade} \u2014 ${g.label || g.name}${g.isBoss ? " (boss)" : ""}`
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Select,
+    {
+      label: props.label,
+      description: props.description,
+      placeholder: props.placeholder ?? (locale("SelectGrade") || "Select grade\u2026"),
+      size: props.size ?? "xs",
+      style: props.style,
+      data,
+      value: ctx.value.grade != null ? String(ctx.value.grade) : null,
+      onChange: (v) => {
+        ctx.onChange({
+          ...ctx.value,
+          grade: v != null ? Number(v) : void 0
+        });
+      },
+      disabled: !selectedGroup || grades.length === 0,
+      allowDeselect: false
+    }
+  );
+}
+GroupSelect.Name = GroupName;
+GroupSelect.Rank = GroupRank;
+var KeyBindContext = React6.createContext(null);
 function useKeyBindContext() {
-  const ctx = React5.useContext(KeyBindContext);
+  const ctx = React6.useContext(KeyBindContext);
   if (!ctx) {
     throw new Error("FiveMKeyBindInput.* must be used inside <FiveMKeyBindInput>");
   }
@@ -4833,7 +5176,7 @@ function AsyncSaveButton({
   style
 }) {
   const theme2 = core.useMantineTheme();
-  const [state, setState] = React5.useState("idle");
+  const [state, setState] = React6.useState("idle");
   const handleClick = async () => {
     if (state === "pending") return;
     setState("pending");
@@ -4900,10 +5243,10 @@ function TestBed({
   disablePersistence = false,
   title = "TestBed"
 }) {
-  const [open, setOpen] = React5.useState(false);
-  const itemsRef = React5.useRef(items);
+  const [open, setOpen] = React6.useState(false);
+  const itemsRef = React6.useRef(items);
   itemsRef.current = items;
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!isEnvBrowser() || disablePersistence) return;
     const persisted = loadPersistedState(storageKey);
     itemsRef.current.forEach((item) => {
@@ -5229,7 +5572,7 @@ function mergeMantineThemeSafe(base, custom, override) {
     }
   };
 }
-var DirkErrorBoundary = class extends React5__default.default.Component {
+var DirkErrorBoundary = class extends React6__default.default.Component {
   constructor() {
     super(...arguments);
     __publicField(this, "state", { error: null, stack: void 0 });
@@ -5293,12 +5636,12 @@ function DirkProvider({ children, overideResourceName, themeOverride }) {
     game
   } = useSettings();
   localeStore((s) => s.locales);
-  React5.useLayoutEffect(() => {
+  React6.useLayoutEffect(() => {
     useSettings.setState({
       overideResourceName
     });
   }, [overideResourceName]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     fetchNui("NUI_READY").catch(() => {
     });
     Promise.all([
@@ -5317,7 +5660,7 @@ function DirkProvider({ children, overideResourceName, themeOverride }) {
     if (!data || typeof data !== "object") return;
     useSettings.setState(data);
   });
-  const mergedTheme = React5.useMemo(
+  const mergedTheme = React6.useMemo(
     () => mergeMantineThemeSafe(
       { ...theme_default, primaryColor, primaryShade },
       customTheme,
@@ -5325,7 +5668,7 @@ function DirkProvider({ children, overideResourceName, themeOverride }) {
     ),
     [primaryColor, primaryShade, customTheme, themeOverride]
   );
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     document.body.style.fontFamily = game === "rdr3" ? '"Red Dead", sans-serif' : '"Akrobat Regular", sans-serif';
   }, [game]);
   const content = isEnvBrowser() ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -5343,6 +5686,7 @@ function DirkProvider({ children, overideResourceName, themeOverride }) {
 exports.AdminPageTitle = AdminPageTitle;
 exports.AsyncSaveButton = AsyncSaveButton;
 exports.BlipColorSelect = BlipColorSelect;
+exports.BlipDisplaySelect = BlipDisplaySelect;
 exports.BlipIconSelect = BlipIconSelect;
 exports.BorderedIcon = BorderedIcon;
 exports.ConfigPanel = ConfigPanel;
@@ -5352,6 +5696,9 @@ exports.DirkProvider = DirkProvider;
 exports.FiveMKeyBindInput = FiveMKeyBindInput;
 exports.FloatingParticles = FloatingParticles;
 exports.FormProvider = FormProvider;
+exports.GroupName = GroupName;
+exports.GroupRank = GroupRank;
+exports.GroupSelect = GroupSelect;
 exports.INPUT_MAPPER_KEYS_BY_PRIMARY = INPUT_MAPPER_KEYS_BY_PRIMARY;
 exports.INPUT_MAPPER_PRIMARY_OPTIONS = INPUT_MAPPER_PRIMARY_OPTIONS;
 exports.InfoBox = InfoBox;
@@ -5368,6 +5715,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;
@@ -5402,6 +5750,7 @@ exports.openLink = openLink;
 exports.registerInitialFetch = registerInitialFetch;
 exports.registerInitialLuaTableFetch = registerInitialLuaTableFetch;
 exports.runFetches = runFetches;
+exports.selectAllGroups = selectAllGroups;
 exports.splitFAString = splitFAString;
 exports.updatePresignedURL = updatePresignedURL;
 exports.uploadImage = uploadImage;
@@ -5413,6 +5762,7 @@ exports.useFormError = useFormError;
 exports.useFormErrors = useFormErrors;
 exports.useFormField = useFormField;
 exports.useFormFields = useFormFields;
+exports.useFrameworkGroups = useFrameworkGroups;
 exports.useItems = useItems;
 exports.useItemsList = useItemsList;
 exports.useModal = useModal;