dirk-cfx-react 1.1.91 → 1.1.92

package/dist/index.js

@@ -6,7 +6,7 @@ import { z } from 'zod';
 import axios from 'axios';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { motion, AnimatePresence, useMotionValue } from 'framer-motion';
-import { Info, X, AlertTriangle, Trash2, RefreshCw, ChevronDown, Check, Copy, MapPin, Crosshair, EyeOff, Eye, RotateCcw, FlaskConical, ChevronUp, Palette, ShieldCheck, Users, UserRound, Plus, DoorOpen, Minus, 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, Palette, ShieldCheck, Users, Plus, UserRound, DoorOpen, Minus, 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';
@@ -1261,11 +1261,11 @@ var colorNames = {
   Yellow: { r: 255, g: 255, b: 0 },
   YellowGreen: { r: 154, g: 205, b: 50 }
 };
-function colorWithAlpha(color, alpha18) {
+function colorWithAlpha(color, alpha19) {
   const lowerCasedColor = color.toLowerCase();
   if (colorNames[lowerCasedColor]) {
     const rgb = colorNames[lowerCasedColor];
-    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha18})`;
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha19})`;
   }
   if (/^#([A-Fa-f0-9]{6})$/.test(color)) {
     const hex = color.slice(1);
@@ -1273,12 +1273,12 @@ function colorWithAlpha(color, alpha18) {
     const r = bigint >> 16 & 255;
     const g = bigint >> 8 & 255;
     const b = bigint & 255;
-    return `rgba(${r}, ${g}, ${b}, ${alpha18})`;
+    return `rgba(${r}, ${g}, ${b}, ${alpha19})`;
   }
   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]}, ${alpha18})`;
+      return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha19})`;
     }
   }
   return color;
@@ -4678,6 +4678,16 @@ function mergeMantineThemeSafe(base, custom, override) {
     }
   };
 }
+function changedTopLevelSections(changedFields) {
+  if (!changedFields || changedFields.length === 0) return [];
+  const sections = /* @__PURE__ */ new Set();
+  for (const path of changedFields) {
+    if (typeof path !== "string" || path.length === 0) continue;
+    const dot = path.indexOf(".");
+    sections.add(dot === -1 ? path : path.slice(0, dot));
+  }
+  return Array.from(sections);
+}
 var _instance = null;
 function getScriptConfigInstance() {
   if (!_instance) throw new Error("[dirk-cfx-react] createScriptConfig must be called before using ConfigPanel");
@@ -4687,15 +4697,18 @@ function createScriptConfig(defaultValue) {
   const store2 = create(() => defaultValue);
   let clientVersion = 0;
   const useScriptConfigHooks = () => {
-    useNuiEvent("UPDATE_SCRIPT_CONFIG", (data) => {
-      if (!data) return;
-      if (typeof data.clientVersion === "number") {
-        clientVersion = data.clientVersion;
-      }
-      if (data.config && typeof data.config === "object") {
-        store2.setState((prev) => ({ ...prev, ...data.config }));
+    useNuiEvent(
+      "UPDATE_SCRIPT_CONFIG",
+      (data) => {
+        if (!data) return;
+        if (typeof data.clientVersion === "number") {
+          clientVersion = data.clientVersion;
+        }
+        if (data.config && typeof data.config === "object") {
+          store2.setState((prev) => ({ ...prev, ...data.config }));
+        }
       }
-    });
+    );
   };
   const fetchScriptConfig = async () => {
     try {
@@ -4711,12 +4724,19 @@ function createScriptConfig(defaultValue) {
     }
     return null;
   };
-  const updateScriptConfig = async (newConfig) => {
+  const updateScriptConfig = async (newConfig, changedFields) => {
     store2.setState((prev) => ({ ...prev, ...newConfig }));
-    const response = await fetchNui("UPDATE_SCRIPT_CONFIG", {
-      data: newConfig,
-      expectedVersion: clientVersion
-    });
+    const sections = changedTopLevelSections(changedFields);
+    let payload;
+    if (sections.length > 0) {
+      const current = store2.getState();
+      const delta = {};
+      for (const key of sections) delta[key] = current[key];
+      payload = { data: delta, expectedVersion: clientVersion, sectionReplace: true };
+    } else {
+      payload = { data: newConfig, expectedVersion: clientVersion };
+    }
+    const response = await fetchNui("UPDATE_SCRIPT_CONFIG", payload);
     if (response?.meta?.client_version != null) {
       clientVersion = response.meta.client_version;
     }
@@ -5585,7 +5605,7 @@ function ConfigPanel(props) {
         if (isSaving) return;
         setIsSaving(true);
         try {
-          const result = await updateConfig(form.values);
+          const result = await updateConfig(form.values, form.changedFields);
           if (result?.success) {
             form.reinitialize(cloneConfig(form.values));
             dirkQueryClient.invalidateQueries({ queryKey: ["scriptConfigHistory"] });
@@ -7012,6 +7032,7 @@ function formatLabel(p) {
   }
   return parts.join(" \xB7 ");
 }
+var COMMON_ACE_GROUPS = ["group.admin", "group.mod", "group.superadmin"];
 var t = (key, fallback) => {
   const v = locale(key);
   return v === key ? fallback : v;
@@ -7034,7 +7055,6 @@ function AccessOverrideSection({
   schemaKey = "access",
   title,
   description: description2,
-  groupType,
   includeOffline = true
 }) {
   const mantineTheme = useMantineTheme();
@@ -7049,14 +7069,19 @@ function AccessOverrideSection({
   const [addingGroup, setAddingGroup] = useState(false);
   const [addingPlayer, setAddingPlayer] = useState(false);
   const commitGroup = (name) => {
-    if (!name) return;
-    set("groups", [...value.groups, name]);
+    const g = name.trim();
+    if (!g) return;
+    if (!value.groups.includes(g)) set("groups", [...value.groups, g]);
     setAddingGroup(false);
   };
   const setGroup = (index, name) => {
     const next = [...value.groups];
     next[index] = name;
-    set("groups", next.filter((g) => g !== ""));
+    set("groups", next);
+  };
+  const quickAddGroup = (name) => {
+    if (value.groups.includes(name)) return;
+    set("groups", [...value.groups, name]);
   };
   const removeGroup = (index) => set("groups", value.groups.filter((_, i) => i !== index));
   const commitIdentifier = (id) => {
@@ -7088,19 +7113,68 @@ function AccessOverrideSection({
         ),
         /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", c: "rgba(255,255,255,0.4)", children: description2 || t(
           "AccessOverrideDesc",
-          "Grant access to this resource's admin panel to specific groups and players, in addition to your global dirk_lib admins. Enforcement is server-side."
+          "Grant access to this resource's admin panel to specific ACE groups and players, in addition to your global dirk_lib admins. Enforcement is server-side."
         ) }),
-        /* @__PURE__ */ jsx(SectionLabel, { icon: Users, label: t("AccessGroups", "Groups") }),
+        /* @__PURE__ */ jsx(SectionLabel, { icon: Users, label: t("AccessGroups", "Admin groups (ACE)") }),
+        /* @__PURE__ */ jsx(Flex, { gap: "xs", wrap: "wrap", children: COMMON_ACE_GROUPS.map((g) => {
+          const added = value.groups.includes(g);
+          return /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              align: "center",
+              gap: "xxs",
+              onClick: added ? void 0 : () => quickAddGroup(g),
+              role: "button",
+              tabIndex: added ? -1 : 0,
+              "aria-disabled": added,
+              onKeyDown: (e) => {
+                if (added) return;
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  quickAddGroup(g);
+                }
+              },
+              px: "xs",
+              py: "xxs",
+              style: {
+                cursor: added ? "default" : "pointer",
+                opacity: added ? 0.4 : 1,
+                background: alpha(color, 0.12),
+                border: `0.1vh solid ${alpha(color, 0.4)}`,
+                borderRadius: "0.4vh",
+                transition: "background 0.15s, border-color 0.15s"
+              },
+              onMouseEnter: (e) => {
+                if (added) return;
+                e.currentTarget.style.background = alpha(color, 0.22);
+              },
+              onMouseLeave: (e) => {
+                if (added) return;
+                e.currentTarget.style.background = alpha(color, 0.12);
+              },
+              children: [
+                !added && /* @__PURE__ */ jsx(Plus, { size: "1.2vh", color }),
+                /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", lts: "0.04em", c: color, children: g })
+              ]
+            },
+            g
+          );
+        }) }),
         /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "xxs", children: [
-          value.groups.length === 0 && !addingGroup && /* @__PURE__ */ jsx(EmptyHint, { text: t("AccessNoGroups", "No groups added.") }),
+          value.groups.length === 0 && !addingGroup && /* @__PURE__ */ jsx(
+            EmptyHint,
+            {
+              text: t("AccessNoGroups", "No ACE groups added. e.g. group.admin")
+            }
+          ),
           value.groups.map((name, i) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", children: [
             /* @__PURE__ */ jsx(
-              GroupName,
+              TextInput,
               {
                 value: name,
-                onChange: (v) => setGroup(i, v),
-                type: groupType,
-                placeholder: t("AccessPickGroup", "Pick a group\u2026"),
+                onChange: (e) => setGroup(i, e.currentTarget.value),
+                placeholder: t("AccessGroupPlaceholder", "ACE group or permission, e.g. group.admin"),
+                size: "xs",
                 style: { flex: 1 }
               }
             ),
@@ -7117,30 +7191,15 @@ function AccessOverrideSection({
               }
             )
           ] }, i)),
-          addingGroup && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", children: [
-            /* @__PURE__ */ jsx(
-              GroupName,
-              {
-                value: "",
-                onChange: (v) => commitGroup(v),
-                type: groupType,
-                placeholder: t("AccessPickGroup", "Pick a group\u2026"),
-                style: { flex: 1 }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              ActionIcon,
-              {
-                variant: "subtle",
-                color: "red",
-                size: "md",
-                onClick: () => setAddingGroup(false),
-                title: t("Remove", "Remove"),
-                "aria-label": t("Remove", "Remove"),
-                children: /* @__PURE__ */ jsx(Trash2, { size: "1.4vh" })
-              }
-            )
-          ] })
+          addingGroup && /* @__PURE__ */ jsx(
+            AceGroupAddRow,
+            {
+              placeholder: t("AccessGroupPlaceholder", "ACE group or permission, e.g. group.admin"),
+              onCommit: commitGroup,
+              onCancel: () => setAddingGroup(false),
+              removeLabel: t("Remove", "Remove")
+            }
+          )
         ] }),
         !addingGroup && /* @__PURE__ */ jsx(AddRowButton, { label: t("AccessAddGroup", "Add group"), onClick: () => setAddingGroup(true) }),
         /* @__PURE__ */ jsx(SectionLabel, { icon: UserRound, label: t("AccessPlayers", "Players") }),
@@ -7240,6 +7299,53 @@ function AddRowButton({ label: label2, onClick }) {
     }
   );
 }
+function AceGroupAddRow({
+  placeholder,
+  onCommit,
+  onCancel,
+  removeLabel
+}) {
+  const [draft, setDraft] = useState("");
+  const commit = () => {
+    if (draft.trim()) onCommit(draft);
+    else onCancel();
+  };
+  return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", children: [
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        value: draft,
+        onChange: (e) => setDraft(e.currentTarget.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            commit();
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            onCancel();
+          }
+        },
+        onBlur: commit,
+        placeholder,
+        size: "xs",
+        autoFocus: true,
+        style: { flex: 1 }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ActionIcon,
+      {
+        variant: "subtle",
+        color: "red",
+        size: "md",
+        onClick: onCancel,
+        title: removeLabel,
+        "aria-label": removeLabel,
+        children: /* @__PURE__ */ jsx(Trash2, { size: "1.4vh" })
+      }
+    )
+  ] });
+}
 
 // src/utils/gtaAnimPostFx.ts
 var GTA_ANIM_POST_FX_GROUP_ORDER = [