dirk-cfx-react 1.1.64 → 1.1.66

package/dist/components/index.cjs

@@ -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;
@@ -1335,6 +1360,20 @@ 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 });
+});
 
 // src/utils/inputMapper.ts
 var INPUT_MAPPER_PRIMARY_OPTIONS = [
@@ -4023,6 +4062,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 = 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 GroupSelectContext = react.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 = react.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 = react.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 = react.createContext(null);
 function useKeyBindContext() {
   const ctx = react.useContext(KeyBindContext);
@@ -4309,6 +4649,7 @@ function TestBed({
 exports.AdminPageTitle = AdminPageTitle;
 exports.AsyncSaveButton = AsyncSaveButton;
 exports.BlipColorSelect = BlipColorSelect;
+exports.BlipDisplaySelect = BlipDisplaySelect;
 exports.BlipIconSelect = BlipIconSelect;
 exports.BorderedIcon = BorderedIcon;
 exports.ConfigPanel = ConfigPanel;
@@ -4316,6 +4657,9 @@ exports.ConfirmModal = ConfirmModal;
 exports.Counter = Counter;
 exports.FiveMKeyBindInput = FiveMKeyBindInput;
 exports.FloatingParticles = FloatingParticles;
+exports.GroupName = GroupName;
+exports.GroupRank = GroupRank;
+exports.GroupSelect = GroupSelect;
 exports.InfoBox = InfoBox;
 exports.InputContainer = InputContainer;
 exports.LevelBanner = LevelBanner;
@@ -4330,6 +4674,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;