dirk-cfx-react 1.1.64 → 1.1.66

package/dist/components/index.d.cts

@@ -18,6 +18,11 @@ type BlipColorSelectProps = Omit<SelectProps, "data" | "value" | "onChange" | "s
     onChange: (id: number) => void;
 };
 declare function BlipColorSelect({ value, onChange, label, size, ...rest }: BlipColorSelectProps): react_jsx_runtime.JSX.Element;
+type BlipDisplaySelectProps = Omit<SelectProps, "data" | "value" | "onChange"> & {
+    value: number | null;
+    onChange: (id: number) => void;
+};
+declare function BlipDisplaySelect({ value, onChange, label, size, ...rest }: BlipDisplaySelectProps): react_jsx_runtime.JSX.Element;
 
 type BorderedIconProps = {
     icon: string;
@@ -820,6 +825,72 @@ type SelectItemProps = {
 };
 declare function SelectItem(props: SelectItemProps): react_jsx_runtime.JSX.Element;
 
+type Vector4Value = {
+    x: number;
+    y: number;
+    z: number;
+    w: number;
+};
+type PositionPickerProps = {
+    label?: string;
+    value: Vector4Value;
+    onChange: (v: Vector4Value) => void;
+    /**
+     * If set, the picker treats `value` as an offset from this entity reference
+     * (e.g. "shell"). The Lua side must handle GET_POSITION + relativeTo by
+     * returning (playerCoords - entityCoords) instead of world coords, and must
+     * resolve the same reference when previewing.
+     */
+    relativeTo?: string;
+    /** Optional NUI event name to fetch the current position. Defaults to GET_POSITION. */
+    fetchEvent?: string;
+    /** Optional NUI event name to draw a marker at the value. Defaults to PREVIEW_POSITION. */
+    previewEvent?: string;
+    /** Optional NUI event name to clear the preview marker. Defaults to STOP_PREVIEW_POSITION. */
+    stopPreviewEvent?: string;
+    description?: string;
+    showHeading?: boolean;
+};
+declare function PositionPicker(props: PositionPickerProps): react_jsx_runtime.JSX.Element;
+
+type GroupValue = {
+    name?: string;
+    grade?: number;
+};
+type GroupType = "job" | "gang";
+type GroupSelectProps = {
+    value: GroupValue;
+    onChange: (next: GroupValue) => void;
+    type?: GroupType;
+    children: React__default.ReactNode;
+    style?: React__default.CSSProperties;
+};
+declare function GroupSelect({ value, onChange, type, children, style, }: GroupSelectProps): react_jsx_runtime.JSX.Element;
+declare namespace GroupSelect {
+    var Name: typeof GroupName;
+    var Rank: typeof GroupRank;
+}
+type GroupNameProps = {
+    value?: string;
+    onChange?: (name: string) => void;
+    type?: GroupType;
+    label?: string;
+    description?: string;
+    placeholder?: string;
+    size?: string;
+    disabled?: boolean;
+    style?: React__default.CSSProperties;
+};
+declare function GroupName(props: GroupNameProps): react_jsx_runtime.JSX.Element;
+type GroupRankProps = {
+    label?: string;
+    description?: string;
+    placeholder?: string;
+    size?: string;
+    style?: React__default.CSSProperties;
+};
+declare function GroupRank(props: GroupRankProps): react_jsx_runtime.JSX.Element;
+
 type FiveMControls = {
     _type: string;
     _key: string;
@@ -874,4 +945,4 @@ interface TestBedProps {
 }
 declare function TestBed({ items, storageKey, disablePersistence, title, }: TestBedProps): react_jsx_runtime.JSX.Element | null;
 
-export { AdminPageTitle, type AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, type BlipColorSelectProps, BlipIconSelect, type BlipIconSelectProps, BorderedIcon, type BorderedIconProps, type ButtonProps, ConfigPanel, type ConfigPanelProps, ConfirmModal, type ConfirmModalProps, Counter, type FiveMControls, FiveMKeyBindInput, FloatingParticles, type FloatingParticlesProps, InfoBox, type InfoBoxProps, InputContainer, type InputContainerProps, LevelBanner, LevelPanel, Modal, ModalContext, type ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, type NavItem, NavigationContext, NavigationProvider, type NavigationStore, type ParticleState, type ProgressProps, type Prompt, type PromptButton, PromptModal, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, TestBed, type TestBedItem, type TestBedProps, Title, type TitleProps, useModal, useModalActions, useNavigation, useNavigationStore };
+export { AdminPageTitle, type AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, type BlipColorSelectProps, BlipDisplaySelect, type BlipDisplaySelectProps, BlipIconSelect, type BlipIconSelectProps, BorderedIcon, type BorderedIconProps, type ButtonProps, ConfigPanel, type ConfigPanelProps, ConfirmModal, type ConfirmModalProps, Counter, type FiveMControls, FiveMKeyBindInput, FloatingParticles, type FloatingParticlesProps, GroupName, type GroupNameProps, GroupRank, type GroupRankProps, GroupSelect, type GroupSelectProps, type GroupType, type GroupValue, InfoBox, type InfoBoxProps, InputContainer, type InputContainerProps, LevelBanner, LevelPanel, Modal, ModalContext, type ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, type NavItem, NavigationContext, NavigationProvider, type NavigationStore, type ParticleState, PositionPicker, type PositionPickerProps, type ProgressProps, type Prompt, type PromptButton, PromptModal, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, TestBed, type TestBedItem, type TestBedProps, Title, type TitleProps, type Vector4Value, useModal, useModalActions, useNavigation, useNavigationStore };

package/dist/components/index.d.ts

@@ -18,6 +18,11 @@ type BlipColorSelectProps = Omit<SelectProps, "data" | "value" | "onChange" | "s
     onChange: (id: number) => void;
 };
 declare function BlipColorSelect({ value, onChange, label, size, ...rest }: BlipColorSelectProps): react_jsx_runtime.JSX.Element;
+type BlipDisplaySelectProps = Omit<SelectProps, "data" | "value" | "onChange"> & {
+    value: number | null;
+    onChange: (id: number) => void;
+};
+declare function BlipDisplaySelect({ value, onChange, label, size, ...rest }: BlipDisplaySelectProps): react_jsx_runtime.JSX.Element;
 
 type BorderedIconProps = {
     icon: string;
@@ -820,6 +825,72 @@ type SelectItemProps = {
 };
 declare function SelectItem(props: SelectItemProps): react_jsx_runtime.JSX.Element;
 
+type Vector4Value = {
+    x: number;
+    y: number;
+    z: number;
+    w: number;
+};
+type PositionPickerProps = {
+    label?: string;
+    value: Vector4Value;
+    onChange: (v: Vector4Value) => void;
+    /**
+     * If set, the picker treats `value` as an offset from this entity reference
+     * (e.g. "shell"). The Lua side must handle GET_POSITION + relativeTo by
+     * returning (playerCoords - entityCoords) instead of world coords, and must
+     * resolve the same reference when previewing.
+     */
+    relativeTo?: string;
+    /** Optional NUI event name to fetch the current position. Defaults to GET_POSITION. */
+    fetchEvent?: string;
+    /** Optional NUI event name to draw a marker at the value. Defaults to PREVIEW_POSITION. */
+    previewEvent?: string;
+    /** Optional NUI event name to clear the preview marker. Defaults to STOP_PREVIEW_POSITION. */
+    stopPreviewEvent?: string;
+    description?: string;
+    showHeading?: boolean;
+};
+declare function PositionPicker(props: PositionPickerProps): react_jsx_runtime.JSX.Element;
+
+type GroupValue = {
+    name?: string;
+    grade?: number;
+};
+type GroupType = "job" | "gang";
+type GroupSelectProps = {
+    value: GroupValue;
+    onChange: (next: GroupValue) => void;
+    type?: GroupType;
+    children: React__default.ReactNode;
+    style?: React__default.CSSProperties;
+};
+declare function GroupSelect({ value, onChange, type, children, style, }: GroupSelectProps): react_jsx_runtime.JSX.Element;
+declare namespace GroupSelect {
+    var Name: typeof GroupName;
+    var Rank: typeof GroupRank;
+}
+type GroupNameProps = {
+    value?: string;
+    onChange?: (name: string) => void;
+    type?: GroupType;
+    label?: string;
+    description?: string;
+    placeholder?: string;
+    size?: string;
+    disabled?: boolean;
+    style?: React__default.CSSProperties;
+};
+declare function GroupName(props: GroupNameProps): react_jsx_runtime.JSX.Element;
+type GroupRankProps = {
+    label?: string;
+    description?: string;
+    placeholder?: string;
+    size?: string;
+    style?: React__default.CSSProperties;
+};
+declare function GroupRank(props: GroupRankProps): react_jsx_runtime.JSX.Element;
+
 type FiveMControls = {
     _type: string;
     _key: string;
@@ -874,4 +945,4 @@ interface TestBedProps {
 }
 declare function TestBed({ items, storageKey, disablePersistence, title, }: TestBedProps): react_jsx_runtime.JSX.Element | null;
 
-export { AdminPageTitle, type AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, type BlipColorSelectProps, BlipIconSelect, type BlipIconSelectProps, BorderedIcon, type BorderedIconProps, type ButtonProps, ConfigPanel, type ConfigPanelProps, ConfirmModal, type ConfirmModalProps, Counter, type FiveMControls, FiveMKeyBindInput, FloatingParticles, type FloatingParticlesProps, InfoBox, type InfoBoxProps, InputContainer, type InputContainerProps, LevelBanner, LevelPanel, Modal, ModalContext, type ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, type NavItem, NavigationContext, NavigationProvider, type NavigationStore, type ParticleState, type ProgressProps, type Prompt, type PromptButton, PromptModal, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, TestBed, type TestBedItem, type TestBedProps, Title, type TitleProps, useModal, useModalActions, useNavigation, useNavigationStore };
+export { AdminPageTitle, type AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, type BlipColorSelectProps, BlipDisplaySelect, type BlipDisplaySelectProps, BlipIconSelect, type BlipIconSelectProps, BorderedIcon, type BorderedIconProps, type ButtonProps, ConfigPanel, type ConfigPanelProps, ConfirmModal, type ConfirmModalProps, Counter, type FiveMControls, FiveMKeyBindInput, FloatingParticles, type FloatingParticlesProps, GroupName, type GroupNameProps, GroupRank, type GroupRankProps, GroupSelect, type GroupSelectProps, type GroupType, type GroupValue, InfoBox, type InfoBoxProps, InputContainer, type InputContainerProps, LevelBanner, LevelPanel, Modal, ModalContext, type ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, type NavItem, NavigationContext, NavigationProvider, type NavigationStore, type ParticleState, PositionPicker, type PositionPickerProps, type ProgressProps, type Prompt, type PromptButton, PromptModal, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, TestBed, type TestBedItem, type TestBedProps, Title, type TitleProps, type Vector4Value, useModal, useModalActions, useNavigation, useNavigationStore };

package/dist/components/index.js

@@ -1,10 +1,10 @@
-import { Flex, Text, Image, TextInput, Select, Box, useMantineTheme, Tooltip, alpha, Progress, RingProgress, Portal, Button, Loader, ActionIcon, Stack, Group, JsonInput } from '@mantine/core';
+import { Flex, Text, Image, TextInput, Select, Box, useMantineTheme, Tooltip, alpha, Progress, RingProgress, Portal, Button, NumberInput, 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 { create, useStore, createStore } from 'zustand';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { motion, AnimatePresence, useMotionValue } from 'framer-motion';
-import { Info, X, AlertTriangle, Trash2, Check, FlaskConical, ChevronUp, ChevronDown, ArrowLeft, Undo2, Redo2, Save, History, XCircle, Code2, RotateCcw, Search, Filter, User } from 'lucide-react';
+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 clickSoundUrl from '../click_sound-PNCRRTM4.mp3';
 import hoverSoundUrl from '../hover_sound-NBUA222C.mp3';
 import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query';
@@ -1057,6 +1057,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__ */ jsx(
+    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 = {
@@ -1203,11 +1228,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);
@@ -1215,12 +1240,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;
@@ -1328,6 +1353,20 @@ registerInitialFetch("FETCH_ALL_ITEMS", null, {
   useItems.setState(fetchedItems);
 }).catch(() => {
 });
+var useFrameworkGroups = 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 });
+});
 
 // src/utils/inputMapper.ts
 var INPUT_MAPPER_PRIMARY_OPTIONS = [
@@ -4016,6 +4055,307 @@ 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 = useMantineTheme();
+  const color = theme.colors[theme.primaryColor][5];
+  const [previewing, setPreviewing] = useState(false);
+  const previewingRef = useRef(false);
+  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__ */ jsxs(
+    Flex,
+    {
+      direction: "column",
+      gap: "xxs",
+      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: [
+        (label || description) && /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", gap: "xs", children: [
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 0, style: { minWidth: 0 }, children: [
+            label && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xxs", children: [
+              /* @__PURE__ */ jsx(MapPin, { size: "1.4vh", color: alpha(color, 0.7) }),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  ff: "Akrobat Bold",
+                  size: "xxs",
+                  tt: "uppercase",
+                  lts: "0.05em",
+                  c: "rgba(255,255,255,0.75)",
+                  children: locale(label)
+                }
+              ),
+              relativeTo && /* @__PURE__ */ jsxs(Text, { ff: "Akrobat Bold", size: "xxs", c: alpha(color, 0.5), lts: "0.05em", children: [
+                "\xB7 ",
+                locale("RelativeTo"),
+                " ",
+                relativeTo
+              ] })
+            ] }),
+            description && /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", c: "dimmed", lh: 1.3, children: locale(description) })
+          ] }),
+          /* @__PURE__ */ jsxs(Flex, { gap: "xxs", style: { flexShrink: 0 }, children: [
+            /* @__PURE__ */ jsx(PickerButton, { tooltip: locale("GrabMyPosition"), onClick: grab, color, children: /* @__PURE__ */ jsx(Crosshair, { size: "1.4vh", color }) }),
+            /* @__PURE__ */ jsx(
+              PickerButton,
+              {
+                tooltip: previewing ? locale("StopPreview") : locale("PreviewInWorld"),
+                onClick: togglePreview,
+                color,
+                active: previewing,
+                children: previewing ? /* @__PURE__ */ jsx(EyeOff, { size: "1.4vh", color }) : /* @__PURE__ */ jsx(Eye, { size: "1.4vh", color: alpha(color, 0.7) })
+              }
+            ),
+            /* @__PURE__ */ jsx(PickerButton, { tooltip: locale("Reset"), onClick: reset, color: "#ef4444", children: /* @__PURE__ */ jsx(RotateCcw, { size: "1.4vh", color: "#ef4444" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Flex, { gap: "xxs", children: [
+          /* @__PURE__ */ jsx(
+            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__ */ jsx(
+            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__ */ jsx(
+            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__ */ jsx(
+            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 = useMantineTheme();
+  return /* @__PURE__ */ jsx(Tooltip, { label: tooltip, position: "top", withArrow: true, children: /* @__PURE__ */ jsx(
+    motion.button,
+    {
+      onClick,
+      whileHover: { background: alpha(color, 0.18) },
+      whileTap: { scale: 0.95 },
+      style: {
+        background: active ? alpha(color, 0.22) : alpha(color, 0.08),
+        border: `0.1vh solid ${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 GroupSelectContext = createContext(null);
+function GroupSelect({
+  value,
+  onChange,
+  type,
+  children,
+  style
+}) {
+  return /* @__PURE__ */ jsx(GroupSelectContext.Provider, { value: { value, onChange, type }, children: /* @__PURE__ */ 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 = 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__ */ jsx(
+    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 = 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__ */ jsx(
+    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 = createContext(null);
 function useKeyBindContext() {
   const ctx = useContext(KeyBindContext);
@@ -4299,6 +4639,6 @@ function TestBed({
   );
 }
 
-export { AdminPageTitle, AsyncSaveButton, BlipColorSelect, BlipIconSelect, BorderedIcon, ConfigPanel, ConfirmModal, Counter, FiveMKeyBindInput, FloatingParticles, InfoBox, InputContainer, LevelBanner, LevelPanel, Modal, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PromptModal, SegmentedControl, SegmentedProgress, SelectItem, TestBed, Title, useModal, useModalActions, useNavigation, useNavigationStore };
+export { AdminPageTitle, AsyncSaveButton, BlipColorSelect, BlipDisplaySelect, BlipIconSelect, BorderedIcon, ConfigPanel, ConfirmModal, 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map