dirk-cfx-react 1.1.91 → 1.1.93

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 export { AccessOverrideSection, AccessOverrideSectionProps, AccessOverrideValue, AccountSelect, AccountSelectProps, ActiveTool, AdminPageTitle, AdminPageTitleProps, AnimPostFxSelect, AnimPostFxSelectProps, AsyncSaveButton, BlipColorSelect, BlipColorSelectProps, BlipDisplaySelect, BlipDisplaySelectProps, BlipIconSelect, BlipIconSelectProps, BlipMarker, BlipMarkerProps, BorderedIcon, BorderedIconProps, ButtonProps, ConfigPanel, ConfigPanelProps, ConfirmModal, ConfirmModalProps, ControlMultiSelect, ControlMultiSelectProps, ControlSelect, ControlSelectProps, Counter, DiscordRole, DiscordRoleSelect, DiscordRoleSelectProps, DoorPickerButton, FiveMControls, FiveMKeyBindInput, FloatingParticles, FloatingParticlesProps, FrameworkAccount, GroupName, GroupNameProps, GroupRank, GroupRankProps, GroupSelect, GroupSelectProps, GroupType, GroupValue, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, InstructionKey, InstructionPanel, InstructionPanelProps, LevelBanner, LevelPanel, Map, MapLayer, MapProps, MapStyle, MissingItemsBanner, Modal, ModalContext, ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavItem, NavigationContext, NavigationProvider, NavigationStore, ParticleState, PickedDoor, PickedDoorGroup, PlayerSelect, PlayerSelectProps, PositionPicker, PositionPickerProps, ProgressProps, Prompt, PromptButton, PromptModal, ScenarioSelect, ScenarioSelectProps, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, SelectItem, SelectItemProps, StoreModalProps, SwitchPanel, SwitchPanelProps, TestBed, TestBedItem, TestBedPlacement, TestBedProps, ThemeOverrideSection, ThemeOverrideSectionProps, Title, TitleProps, TitleSize, Vector4DeleteButton, Vector4Display, Vector4Value, WorldPositionGotoButton, WorldPositionPicker, WorldPositionPickerSlot, WorldPositionSetButton, ZoomControls, blipUrl, blipUrlForSprite, getBlipColor, getBlipEntry, useAdminToolStore, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore, usePickDoor } from './components/index.cjs';
 export { FrameworkGrade, FrameworkGroup, GTA_CONTROLS, GTA_CONTROL_GROUP_ORDER, GtaControl, GtaControlGroup, INPUT_MAPPER_KEYS_BY_PRIMARY, INPUT_MAPPER_PRIMARY_OPTIONS, InitialFetch, InternalEvent, InventoryItem, InventoryItems, SettingsState, SkillSettings, UploadImageProps, colorWithAlpha, copyToClipboard, createSkill, ensureFrameworkGroups, extractDefaults, fetchLuaTable, fetchNui, formatGtaControl, gameToMap, getGtaControl, getImageShape, getItemImageUrl, initialFetches, internalEvent, isEnvBrowser, isProfanity, latPr100, locale, localeStore, mapCenter, mapToGame, noop, numberToRoman, openLink, registerInitialFetch, registerInitialLuaTableFetch, runFetches, selectAllGroups, splitFAString, updatePresignedURL, uploadImage, useAutoFetcher, useFrameworkGroups, useItems, useItemsList, useProfanityStore, useSettings } from './utils/index.cjs';
-export { FormProvider, FormState, NuiHandlerSignature, NuiMessageData, ScriptConfigHistoryChange, ScriptConfigHistoryEntry, ScriptConfigHistoryRequest, ScriptConfigHistoryResponse, ScriptConfigInstance, TornEdgeSVGFilter, ValidationRules, ValidatorFn, clearAdminState, createFormStore, createScriptConfig, getScriptConfigInstance, useAdminState, useAudio, useForm, useFormActions, useFormError, useFormErrors, useFormField, useFormFields, useNuiEvent, useTornEdges, useValidModels } from './hooks/index.cjs';
+export { FormProvider, FormState, NuiHandlerSignature, NuiMessageData, ScriptConfigHistoryChange, ScriptConfigHistoryEntry, ScriptConfigHistoryRequest, ScriptConfigHistoryResponse, ScriptConfigInstance, ServerOnlyScriptConfigResponse, TornEdgeSVGFilter, ValidationRules, ValidatorFn, clearAdminState, createFormStore, createScriptConfig, getScriptConfigInstance, useAdminState, useAudio, useForm, useFormActions, useFormError, useFormErrors, useFormField, useFormFields, useNuiEvent, useTornEdges, useValidModels } from './hooks/index.cjs';
 export { P as Player, U as UsePlayersOptions, a as UsePlayersResult, u as usePlayers } from './usePlayers-BlGBBevs.cjs';
 export { DirkProvider, DirkProviderProps, dirkQueryClient } from './providers/index.cjs';
 import { z } from 'zod';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { AccessOverrideSection, AccessOverrideSectionProps, AccessOverrideValue, AccountSelect, AccountSelectProps, ActiveTool, AdminPageTitle, AdminPageTitleProps, AnimPostFxSelect, AnimPostFxSelectProps, AsyncSaveButton, BlipColorSelect, BlipColorSelectProps, BlipDisplaySelect, BlipDisplaySelectProps, BlipIconSelect, BlipIconSelectProps, BlipMarker, BlipMarkerProps, BorderedIcon, BorderedIconProps, ButtonProps, ConfigPanel, ConfigPanelProps, ConfirmModal, ConfirmModalProps, ControlMultiSelect, ControlMultiSelectProps, ControlSelect, ControlSelectProps, Counter, DiscordRole, DiscordRoleSelect, DiscordRoleSelectProps, DoorPickerButton, FiveMControls, FiveMKeyBindInput, FloatingParticles, FloatingParticlesProps, FrameworkAccount, GroupName, GroupNameProps, GroupRank, GroupRankProps, GroupSelect, GroupSelectProps, GroupType, GroupValue, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, InstructionKey, InstructionPanel, InstructionPanelProps, LevelBanner, LevelPanel, Map, MapLayer, MapProps, MapStyle, MissingItemsBanner, Modal, ModalContext, ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavItem, NavigationContext, NavigationProvider, NavigationStore, ParticleState, PickedDoor, PickedDoorGroup, PlayerSelect, PlayerSelectProps, PositionPicker, PositionPickerProps, ProgressProps, Prompt, PromptButton, PromptModal, ScenarioSelect, ScenarioSelectProps, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, SelectItem, SelectItemProps, StoreModalProps, SwitchPanel, SwitchPanelProps, TestBed, TestBedItem, TestBedPlacement, TestBedProps, ThemeOverrideSection, ThemeOverrideSectionProps, Title, TitleProps, TitleSize, Vector4DeleteButton, Vector4Display, Vector4Value, WorldPositionGotoButton, WorldPositionPicker, WorldPositionPickerSlot, WorldPositionSetButton, ZoomControls, blipUrl, blipUrlForSprite, getBlipColor, getBlipEntry, useAdminToolStore, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore, usePickDoor } from './components/index.js';
 export { FrameworkGrade, FrameworkGroup, GTA_CONTROLS, GTA_CONTROL_GROUP_ORDER, GtaControl, GtaControlGroup, INPUT_MAPPER_KEYS_BY_PRIMARY, INPUT_MAPPER_PRIMARY_OPTIONS, InitialFetch, InternalEvent, InventoryItem, InventoryItems, SettingsState, SkillSettings, UploadImageProps, colorWithAlpha, copyToClipboard, createSkill, ensureFrameworkGroups, extractDefaults, fetchLuaTable, fetchNui, formatGtaControl, gameToMap, getGtaControl, getImageShape, getItemImageUrl, initialFetches, internalEvent, isEnvBrowser, isProfanity, latPr100, locale, localeStore, mapCenter, mapToGame, noop, numberToRoman, openLink, registerInitialFetch, registerInitialLuaTableFetch, runFetches, selectAllGroups, splitFAString, updatePresignedURL, uploadImage, useAutoFetcher, useFrameworkGroups, useItems, useItemsList, useProfanityStore, useSettings } from './utils/index.js';
-export { FormProvider, FormState, NuiHandlerSignature, NuiMessageData, ScriptConfigHistoryChange, ScriptConfigHistoryEntry, ScriptConfigHistoryRequest, ScriptConfigHistoryResponse, ScriptConfigInstance, TornEdgeSVGFilter, ValidationRules, ValidatorFn, clearAdminState, createFormStore, createScriptConfig, getScriptConfigInstance, useAdminState, useAudio, useForm, useFormActions, useFormError, useFormErrors, useFormField, useFormFields, useNuiEvent, useTornEdges, useValidModels } from './hooks/index.js';
+export { FormProvider, FormState, NuiHandlerSignature, NuiMessageData, ScriptConfigHistoryChange, ScriptConfigHistoryEntry, ScriptConfigHistoryRequest, ScriptConfigHistoryResponse, ScriptConfigInstance, ServerOnlyScriptConfigResponse, TornEdgeSVGFilter, ValidationRules, ValidatorFn, clearAdminState, createFormStore, createScriptConfig, getScriptConfigInstance, useAdminState, useAudio, useForm, useFormActions, useFormError, useFormErrors, useFormField, useFormFields, useNuiEvent, useTornEdges, useValidModels } from './hooks/index.js';
 export { P as Player, U as UsePlayersOptions, a as UsePlayersResult, u as usePlayers } from './usePlayers-BlGBBevs.js';
 export { DirkProvider, DirkProviderProps, dirkQueryClient } from './providers/index.js';
 import { z } from 'zod';

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,31 @@ function mergeMantineThemeSafe(base, custom, override) {
     }
   };
 }
+function isPlainObject2(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+function deepMerge(base, patch) {
+  if (!isPlainObject2(base) || !isPlainObject2(patch)) {
+    return patch ?? base;
+  }
+  const out = { ...base };
+  for (const key of Object.keys(patch)) {
+    const patchVal = patch[key];
+    const baseVal = out[key];
+    out[key] = isPlainObject2(baseVal) && isPlainObject2(patchVal) ? deepMerge(baseVal, patchVal) : patchVal;
+  }
+  return out;
+}
+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 +4712,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 +4739,37 @@ function createScriptConfig(defaultValue) {
     }
     return null;
   };
-  const updateScriptConfig = async (newConfig) => {
+  const fetchServerOnlyScriptConfig = async () => {
+    try {
+      const response = await fetchNui(
+        "GET_SERVER_ONLY_SCRIPT_CONFIG"
+      );
+      if (response?.success && response.data) {
+        if (typeof response.data.clientVersion === "number") {
+          clientVersion = response.data.clientVersion;
+        }
+        const sliver = response.data.serverOnly;
+        const merged = deepMerge(store2.getState(), sliver ?? {});
+        store2.setState(() => merged);
+        return merged;
+      }
+    } catch {
+    }
+    return null;
+  };
+  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;
     }
@@ -4731,10 +4784,7 @@ function createScriptConfig(defaultValue) {
   const resetConfig = async () => {
     const response = await fetchNui("RESET_SCRIPT_CONFIG");
     if (response?.success) {
-      const fresh = await fetchScriptConfig();
-      if (fresh) {
-        store2.setState(() => fresh);
-      }
+      await fetchServerOnlyScriptConfig();
     }
     return response;
   };
@@ -4743,9 +4793,10 @@ function createScriptConfig(defaultValue) {
     updateConfig: updateScriptConfig,
     resetConfig,
     getHistory: getScriptConfigHistory,
-    fetchConfig: fetchScriptConfig
+    fetchConfig: fetchScriptConfig,
+    fetchServerOnly: fetchServerOnlyScriptConfig
   };
-  return { store: store2, updateScriptConfig, resetConfig, getScriptConfigHistory, useScriptConfigHooks, fetchScriptConfig };
+  return { store: store2, updateScriptConfig, resetConfig, getScriptConfigHistory, useScriptConfigHooks, fetchScriptConfig, fetchServerOnlyScriptConfig };
 }
 var DirkErrorBoundary = class extends React4.Component {
   constructor() {
@@ -4932,12 +4983,6 @@ function DirkProvider({ children, overideResourceName, themeOverride }) {
           setScTheme(s?.theme ?? null);
         });
       }
-      inst.fetchConfig?.().then((full) => {
-        if (full && typeof full === "object") {
-          setScTheme(full.theme ?? null);
-        }
-      }).catch(() => {
-      });
     } catch {
     }
     return () => {
@@ -5557,11 +5602,11 @@ function cloneConfig(value) {
   return JSON.parse(JSON.stringify(value));
 }
 function ServerOnlyFetcher() {
-  const { fetchConfig } = getScriptConfigInstance();
+  const { fetchServerOnly } = getScriptConfigInstance();
   const { reinitialize } = useFormActions();
   useEffect(() => {
     let cancelled = false;
-    fetchConfig().then((full) => {
+    fetchServerOnly().then((full) => {
       if (!cancelled && full) reinitialize(full);
     }).catch(() => {
     });
@@ -5585,7 +5630,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 +7057,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 +7080,6 @@ function AccessOverrideSection({
   schemaKey = "access",
   title,
   description: description2,
-  groupType,
   includeOffline = true
 }) {
   const mantineTheme = useMantineTheme();
@@ -7049,14 +7094,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 +7138,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 +7216,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 +7324,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 = [