dirk-cfx-react 1.1.90 → 1.1.92

package/dist/components/index.cjs

@@ -4,6 +4,7 @@ var core = require('@mantine/core');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var zustand = require('zustand');
+var zod = require('zod');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var framerMotion = require('framer-motion');
 var lucideReact = require('lucide-react');
@@ -1264,11 +1265,11 @@ var colorNames = {
   Yellow: { r: 255, g: 255, b: 0 },
   YellowGreen: { r: 154, g: 205, b: 50 }
 };
-function colorWithAlpha(color, alpha17) {
+function colorWithAlpha(color, alpha18) {
   const lowerCasedColor = color.toLowerCase();
   if (colorNames[lowerCasedColor]) {
     const rgb = colorNames[lowerCasedColor];
-    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha17})`;
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha18})`;
   }
   if (/^#([A-Fa-f0-9]{6})$/.test(color)) {
     const hex = color.slice(1);
@@ -1276,12 +1277,12 @@ function colorWithAlpha(color, alpha17) {
     const r = bigint >> 16 & 255;
     const g = bigint >> 8 & 255;
     const b = bigint & 255;
-    return `rgba(${r}, ${g}, ${b}, ${alpha17})`;
+    return `rgba(${r}, ${g}, ${b}, ${alpha18})`;
   }
   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]}, ${alpha17})`;
+      return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha18})`;
     }
   }
   return color;
@@ -1289,6 +1290,32 @@ function colorWithAlpha(color, alpha17) {
 
 // src/utils/misc.ts
 var isEnvBrowser = () => !window.invokeNative;
+var DEFAULT_PALETTE = [
+  "#f0f4ff",
+  "#d9e3ff",
+  "#bfcfff",
+  "#a6bbff",
+  "#8ca7ff",
+  "#7393ff",
+  "#5a7fff",
+  "#406bff",
+  "#2547ff",
+  "#0b33ff"
+];
+zod.z.object({
+  useOverride: zod.z.boolean(),
+  primaryColor: zod.z.string(),
+  primaryShade: zod.z.number(),
+  customTheme: zod.z.array(zod.z.string())
+});
+var defaultThemeOverride = {
+  useOverride: false,
+  primaryColor: "dirk",
+  primaryShade: 5,
+  customTheme: DEFAULT_PALETTE
+};
+
+// src/utils/useSettings.ts
 var useSettings = zustand.create(() => ({
   currency: "$",
   game: "fivem",
@@ -1296,18 +1323,7 @@ var useSettings = zustand.create(() => ({
   primaryShade: 9,
   itemImgPath: "",
   resourceVersion: "dev",
-  customTheme: [
-    "#f0f4ff",
-    "#d9e3ff",
-    "#bfcfff",
-    "#a6bbff",
-    "#8ca7ff",
-    "#7393ff",
-    "#5a7fff",
-    "#406bff",
-    "#2547ff",
-    "#0b33ff"
-  ]
+  customTheme: DEFAULT_PALETTE
 }));
 
 // src/utils/fetchNui.ts
@@ -3161,11 +3177,11 @@ function ConfirmModal({
                     placeholder: confirmText,
                     value: typed,
                     onChange: (e) => setTyped(e.currentTarget.value),
-                    styles: (t3) => ({
+                    styles: (t4) => ({
                       input: {
-                        backgroundColor: core.alpha(t3.colors.dark[7], 0.5),
+                        backgroundColor: core.alpha(t4.colors.dark[7], 0.5),
                         border: `0.1vh solid ${core.alpha(
-                          typed === confirmText ? "#ef4444" : t3.colors.dark[5],
+                          typed === confirmText ? "#ef4444" : t4.colors.dark[5],
                           0.5
                         )}`,
                         color: "rgba(255,255,255,0.85)",
@@ -3810,7 +3826,7 @@ function useAdminState(key, initial) {
   react.useEffect(() => {
     const set = listeners.get(key) ?? /* @__PURE__ */ new Set();
     listeners.set(key, set);
-    const handler = () => setTick((t3) => t3 + 1);
+    const handler = () => setTick((t4) => t4 + 1);
     set.add(handler);
     return () => {
       set.delete(handler);
@@ -4464,7 +4480,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"] });
@@ -5498,24 +5514,6 @@ var MANTINE_COLOR_OPTIONS = [
   "yellow",
   "orange"
 ].map((value) => ({ value, label: value }));
-var DEFAULT_PALETTE = [
-  "#f0f4ff",
-  "#d9e3ff",
-  "#bfcfff",
-  "#a6bbff",
-  "#8ca7ff",
-  "#7393ff",
-  "#5a7fff",
-  "#406bff",
-  "#2547ff",
-  "#0b33ff"
-];
-var DEFAULT_VALUE = {
-  useOverride: false,
-  primaryColor: "dirk",
-  primaryShade: 5,
-  customTheme: DEFAULT_PALETTE
-};
 function GroupLabel({ label }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", gap: "xs", mt: "xxs", children: [
     /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.07em", c: "rgba(255,255,255,0.2)", children: label }),
@@ -5530,10 +5528,10 @@ function ThemeOverrideSection({
   const color = mantineTheme.colors[mantineTheme.primaryColor][5];
   const raw = useFormField(schemaKey);
   const value = {
-    useOverride: raw?.useOverride ?? DEFAULT_VALUE.useOverride,
-    primaryColor: raw?.primaryColor ?? DEFAULT_VALUE.primaryColor,
-    primaryShade: raw?.primaryShade ?? DEFAULT_VALUE.primaryShade,
-    customTheme: Array.isArray(raw?.customTheme) && raw.customTheme.length === 10 ? raw.customTheme : DEFAULT_VALUE.customTheme
+    useOverride: raw?.useOverride ?? defaultThemeOverride.useOverride,
+    primaryColor: raw?.primaryColor ?? defaultThemeOverride.primaryColor,
+    primaryShade: raw?.primaryShade ?? defaultThemeOverride.primaryShade,
+    customTheme: Array.isArray(raw?.customTheme) && raw.customTheme.length === 10 ? raw.customTheme : defaultThemeOverride.customTheme
   };
   const { setValue } = useFormActions();
   const set = (key, val) => setValue(schemaKey, { ...value, [key]: val });
@@ -5740,6 +5738,489 @@ function SwatchTile({
     ) })
   ] });
 }
+function usePlayers(opts = {}) {
+  const {
+    includeOffline = false,
+    search = "",
+    limit = 50,
+    staleTimeMs,
+    refetchIntervalMs
+  } = opts;
+  const query = reactQuery.useQuery({
+    queryKey: includeOffline ? ["dirk:players", "search", search.trim().toLowerCase(), limit] : ["dirk:players", "online"],
+    queryFn: async () => {
+      const toolId = includeOffline ? "searchPlayers" : "getOnlinePlayers";
+      const payload = includeOffline ? { id: toolId, value: { search: search.trim(), limit } } : { id: toolId };
+      const result = await fetchNui(
+        "ADMIN_TOOL_QUERY",
+        payload,
+        // Browser-dev fallback. Returns a couple of mock players so the
+        // dev shell isn't blank.
+        includeOffline ? [
+          { id: 1, citizenId: "ABC12345", name: "Dev User", charName: "John Doe", online: true },
+          { id: null, citizenId: "DEF67890", name: "", charName: "Jane Offline", online: false }
+        ] : [
+          { id: 1, citizenId: "ABC12345", name: "Dev User", charName: "John Doe", online: true }
+        ]
+      );
+      return Array.isArray(result) ? result : [];
+    },
+    staleTime: staleTimeMs ?? (includeOffline ? 3e4 : 5e3),
+    gcTime: 5 * 6e4,
+    refetchInterval: refetchIntervalMs ?? false,
+    refetchOnWindowFocus: false,
+    placeholderData: includeOffline ? reactQuery.keepPreviousData : void 0
+  });
+  return {
+    players: query.data ?? [],
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    error: query.error ?? null,
+    refresh: () => query.refetch()
+  };
+}
+var DEBOUNCE_MS = 300;
+var ONLINE_COLOR = "#3FA83F";
+var OFFLINE_COLOR = "#E54141";
+function PlayerSelect({
+  value,
+  onChange,
+  includeOffline = false,
+  limit = 50,
+  searchable: searchableProp,
+  placeholder,
+  nothingFoundMessage: nothingFoundMessageProp,
+  loadingLabel = "Loading\u2026",
+  onlineLabel = "Online",
+  offlineLabel = "Offline",
+  refreshLabel = "Refresh player list",
+  ...rest
+}) {
+  const theme = core.useMantineTheme();
+  const color = theme.colors[theme.primaryColor][5];
+  const [searchInput, setSearchInput] = react.useState("");
+  const [debouncedSearch, setDebouncedSearch] = react.useState("");
+  const { players, isFetching, refresh } = usePlayers({
+    includeOffline,
+    search: includeOffline ? debouncedSearch : void 0,
+    limit
+  });
+  const sortedPlayers = react.useMemo(
+    () => [...players].sort((a, b) => {
+      if (a.online !== b.online) return a.online ? -1 : 1;
+      return a.charName.localeCompare(b.charName);
+    }),
+    [players]
+  );
+  const playerByCitizen = react.useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const p of sortedPlayers) m.set(p.citizenId, p);
+    return m;
+  }, [sortedPlayers]);
+  const data = react.useMemo(() => {
+    const items = sortedPlayers.map((p) => ({
+      value: p.citizenId,
+      label: formatLabel(p)
+    }));
+    if (value && !items.some((i) => i.value === value)) {
+      items.unshift({ value, label: value });
+    }
+    return items;
+  }, [sortedPlayers, value]);
+  const selectedPlayer = value ? playerByCitizen.get(value) ?? null : null;
+  const selectedLabel = selectedPlayer ? formatLabel(selectedPlayer) : null;
+  react.useEffect(() => {
+    if (!includeOffline) return;
+    if (selectedLabel && searchInput === selectedLabel) return;
+    const t4 = setTimeout(() => setDebouncedSearch(searchInput), DEBOUNCE_MS);
+    return () => clearTimeout(t4);
+  }, [searchInput, includeOffline, selectedLabel]);
+  const renderOption = ({ option }) => {
+    const p = playerByCitizen.get(option.value);
+    if (!p) return option.label;
+    return /* @__PURE__ */ jsxRuntime.jsxs(core.Group, { justify: "space-between", wrap: "nowrap", gap: "xs", style: { width: "100%" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "xs", truncate: true, style: { flex: 1 }, children: formatLabel(p) }),
+      /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { online: p.online, onlineLabel, offlineLabel })
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Select,
+    {
+      ...rest,
+      data,
+      value: value ?? null,
+      onChange: (v) => {
+        if (!v) return onChange(null);
+        const player = playerByCitizen.get(v) ?? null;
+        onChange(player);
+      },
+      searchable: searchableProp ?? true,
+      searchValue: includeOffline ? searchInput : void 0,
+      onSearchChange: includeOffline ? setSearchInput : void 0,
+      placeholder,
+      nothingFoundMessage: isFetching ? loadingLabel : nothingFoundMessageProp ?? "No players found",
+      maxDropdownHeight: 300,
+      renderOption,
+      leftSection: selectedPlayer ? /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { online: selectedPlayer.online, onlineLabel, offlineLabel }) : void 0,
+      rightSectionWidth: "3.5vh",
+      rightSectionPointerEvents: "all",
+      rightSection: /* @__PURE__ */ jsxRuntime.jsx(
+        core.ActionIcon,
+        {
+          variant: "subtle",
+          size: "sm",
+          onClick: (e) => {
+            e.stopPropagation();
+            refresh();
+          },
+          "aria-label": refreshLabel,
+          title: refreshLabel,
+          style: { marginRight: "0.6vh" },
+          children: isFetching ? /* @__PURE__ */ jsxRuntime.jsx(core.Loader, { size: "1.2vh", color }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { size: "1.4vh", color })
+        }
+      )
+    }
+  );
+}
+function StatusDot({ online, onlineLabel, offlineLabel }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      title: online ? onlineLabel : offlineLabel,
+      style: {
+        display: "inline-block",
+        width: "0.9vh",
+        height: "0.9vh",
+        borderRadius: "50%",
+        backgroundColor: online ? ONLINE_COLOR : OFFLINE_COLOR,
+        boxShadow: `0 0 0.4vh ${online ? ONLINE_COLOR : OFFLINE_COLOR}`,
+        flexShrink: 0
+      }
+    }
+  );
+}
+function formatLabel(p) {
+  const parts = [p.charName || p.citizenId];
+  if (p.online) {
+    if (p.name) parts.push(p.name);
+    if (p.id != null) parts.push(`#${p.id}`);
+  }
+  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;
+};
+var DEFAULT_VALUE = {
+  groups: [],
+  identifiers: []
+};
+function SectionLabel({ icon: Icon, label }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", gap: "xs", mt: "xs", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "1.4vh", color: "rgba(255,255,255,0.3)" }),
+    /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.07em", c: "rgba(255,255,255,0.2)", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, height: "0.05vh", background: "rgba(255,255,255,0.06)" } })
+  ] });
+}
+function EmptyHint({ text }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", c: "rgba(255,255,255,0.25)", ta: "center", py: "xs", children: text });
+}
+function AccessOverrideSection({
+  schemaKey = "access",
+  title,
+  description,
+  includeOffline = true
+}) {
+  const mantineTheme = core.useMantineTheme();
+  const color = mantineTheme.colors[mantineTheme.primaryColor][5];
+  const raw = useFormField(schemaKey);
+  const value = {
+    groups: Array.isArray(raw?.groups) ? raw.groups : DEFAULT_VALUE.groups,
+    identifiers: Array.isArray(raw?.identifiers) ? raw.identifiers : DEFAULT_VALUE.identifiers
+  };
+  const { setValue } = useFormActions();
+  const set = (key, val) => setValue(schemaKey, { ...value, [key]: val });
+  const [addingGroup, setAddingGroup] = react.useState(false);
+  const [addingPlayer, setAddingPlayer] = react.useState(false);
+  const commitGroup = (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);
+  };
+  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) => {
+    if (!id) return;
+    set("identifiers", [...value.identifiers, id]);
+    setAddingPlayer(false);
+  };
+  const setIdentifier = (index, id) => {
+    const next = [...value.identifiers];
+    next[index] = id;
+    set("identifiers", next.filter((x) => x !== ""));
+  };
+  const removeIdentifier = (index) => set("identifiers", value.identifiers.filter((_, i) => i !== index));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.Flex,
+    {
+      direction: "column",
+      gap: "xs",
+      p: "sm",
+      style: { flex: 1, minHeight: 0, overflowY: "auto" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AdminPageTitle,
+          {
+            icon: lucideReact.ShieldCheck,
+            title: title || t("Access", "Access"),
+            color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", c: "rgba(255,255,255,0.4)", children: description || t(
+          "AccessOverrideDesc",
+          "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__ */ jsxRuntime.jsx(SectionLabel, { icon: lucideReact.Users, label: t("AccessGroups", "Admin groups (ACE)") }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Flex, { gap: "xs", wrap: "wrap", children: COMMON_ACE_GROUPS.map((g) => {
+          const added = value.groups.includes(g);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            core.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: core.alpha(color, 0.12),
+                border: `0.1vh solid ${core.alpha(color, 0.4)}`,
+                borderRadius: "0.4vh",
+                transition: "background 0.15s, border-color 0.15s"
+              },
+              onMouseEnter: (e) => {
+                if (added) return;
+                e.currentTarget.style.background = core.alpha(color, 0.22);
+              },
+              onMouseLeave: (e) => {
+                if (added) return;
+                e.currentTarget.style.background = core.alpha(color, 0.12);
+              },
+              children: [
+                !added && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: "1.2vh", color }),
+                /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", lts: "0.04em", c: color, children: g })
+              ]
+            },
+            g
+          );
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", gap: "xxs", children: [
+          value.groups.length === 0 && !addingGroup && /* @__PURE__ */ jsxRuntime.jsx(
+            EmptyHint,
+            {
+              text: t("AccessNoGroups", "No ACE groups added. e.g. group.admin")
+            }
+          ),
+          value.groups.map((name, i) => /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", gap: "xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              core.TextInput,
+              {
+                value: name,
+                onChange: (e) => setGroup(i, e.currentTarget.value),
+                placeholder: t("AccessGroupPlaceholder", "ACE group or permission, e.g. group.admin"),
+                size: "xs",
+                style: { flex: 1 }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              core.ActionIcon,
+              {
+                variant: "subtle",
+                color: "red",
+                size: "md",
+                onClick: () => removeGroup(i),
+                title: t("Remove", "Remove"),
+                "aria-label": t("Remove", "Remove"),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: "1.4vh" })
+              }
+            )
+          ] }, i)),
+          addingGroup && /* @__PURE__ */ jsxRuntime.jsx(
+            AceGroupAddRow,
+            {
+              placeholder: t("AccessGroupPlaceholder", "ACE group or permission, e.g. group.admin"),
+              onCommit: commitGroup,
+              onCancel: () => setAddingGroup(false),
+              removeLabel: t("Remove", "Remove")
+            }
+          )
+        ] }),
+        !addingGroup && /* @__PURE__ */ jsxRuntime.jsx(AddRowButton, { label: t("AccessAddGroup", "Add group"), onClick: () => setAddingGroup(true) }),
+        /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { icon: lucideReact.UserRound, label: t("AccessPlayers", "Players") }),
+        /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", gap: "xxs", children: [
+          value.identifiers.length === 0 && !addingPlayer && /* @__PURE__ */ jsxRuntime.jsx(EmptyHint, { text: t("AccessNoPlayers", "No players added.") }),
+          value.identifiers.map((id, i) => /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", gap: "xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              PlayerSelect,
+              {
+                value: id || null,
+                onChange: (p) => setIdentifier(i, p?.citizenId ?? ""),
+                includeOffline,
+                placeholder: t("AccessPickPlayer", "Pick a player\u2026"),
+                style: { flex: 1 },
+                size: "xs"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              core.ActionIcon,
+              {
+                variant: "subtle",
+                color: "red",
+                size: "md",
+                onClick: () => removeIdentifier(i),
+                title: t("Remove", "Remove"),
+                "aria-label": t("Remove", "Remove"),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: "1.4vh" })
+              }
+            )
+          ] }, i)),
+          addingPlayer && /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", gap: "xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              PlayerSelect,
+              {
+                value: null,
+                onChange: (p) => commitIdentifier(p?.citizenId ?? ""),
+                includeOffline,
+                placeholder: t("AccessPickPlayer", "Pick a player\u2026"),
+                style: { flex: 1 },
+                size: "xs"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              core.ActionIcon,
+              {
+                variant: "subtle",
+                color: "red",
+                size: "md",
+                onClick: () => setAddingPlayer(false),
+                title: t("Remove", "Remove"),
+                "aria-label": t("Remove", "Remove"),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: "1.4vh" })
+              }
+            )
+          ] })
+        ] }),
+        !addingPlayer && /* @__PURE__ */ jsxRuntime.jsx(AddRowButton, { label: t("AccessAddPlayer", "Add player"), onClick: () => setAddingPlayer(true) })
+      ]
+    }
+  );
+}
+function AddRowButton({ label, onClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.Flex,
+    {
+      align: "center",
+      justify: "center",
+      gap: "xs",
+      onClick,
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      },
+      py: "xs",
+      style: {
+        cursor: "pointer",
+        border: "0.1vh dashed rgba(255,255,255,0.12)",
+        borderRadius: "0.4vh",
+        transition: "background 0.15s, border-color 0.15s"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = "rgba(255,255,255,0.03)";
+        e.currentTarget.style.borderColor = "rgba(255,255,255,0.2)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "transparent";
+        e.currentTarget.style.borderColor = "rgba(255,255,255,0.12)";
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: "1.4vh", color: "rgba(255,255,255,0.4)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.06em", c: "rgba(255,255,255,0.4)", children: label })
+      ]
+    }
+  );
+}
+function AceGroupAddRow({
+  placeholder,
+  onCommit,
+  onCancel,
+  removeLabel
+}) {
+  const [draft, setDraft] = react.useState("");
+  const commit = () => {
+    if (draft.trim()) onCommit(draft);
+    else onCancel();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", gap: "xs", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      core.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__ */ jsxRuntime.jsx(
+      core.ActionIcon,
+      {
+        variant: "subtle",
+        color: "red",
+        size: "md",
+        onClick: onCancel,
+        title: removeLabel,
+        "aria-label": removeLabel,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: "1.4vh" })
+      }
+    )
+  ] });
+}
 
 // src/utils/gtaAnimPostFx.ts
 var GTA_ANIM_POST_FX_GROUP_ORDER = [
@@ -6329,7 +6810,7 @@ function ScenarioSelect({
     }
   );
 }
-var t = (key, fallback) => {
+var t2 = (key, fallback) => {
   const v = locale(key);
   return v === key ? fallback : v;
 };
@@ -6397,7 +6878,7 @@ function DiscordRoleSelect(props) {
     return map;
   }, [roles]);
   if (errorCode === "NotConfigured") {
-    const notConfiguredPlaceholder = t(
+    const notConfiguredPlaceholder = t2(
       "DiscordNotConfigured",
       "Not configured \u2014 set in /dirk_lib"
     );
@@ -6465,9 +6946,9 @@ function DiscordRoleSelect(props) {
         e.stopPropagation();
         refresh();
       },
-      title: t("Refresh", "Refresh"),
+      title: t2("Refresh", "Refresh"),
       loading,
-      "aria-label": t("Refresh", "Refresh"),
+      "aria-label": t2("Refresh", "Refresh"),
       children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { size: "1.2vh" })
     }
   );
@@ -6477,7 +6958,7 @@ function DiscordRoleSelect(props) {
       {
         label,
         size,
-        placeholder: placeholder || t("PickRoles", "Pick roles..."),
+        placeholder: placeholder || t2("PickRoles", "Pick roles..."),
         data,
         value: props.value || [],
         onChange: (ids) => props.onChange(ids),
@@ -6489,7 +6970,7 @@ function DiscordRoleSelect(props) {
         rightSectionPointerEvents: "all",
         style,
         styles,
-        nothingFoundMessage: errorCode ? `${t("Error", "Error")} (${errorCode})` : t("NoRoles", "No roles found")
+        nothingFoundMessage: errorCode ? `${t2("Error", "Error")} (${errorCode})` : t2("NoRoles", "No roles found")
       }
     );
   }
@@ -6498,7 +6979,7 @@ function DiscordRoleSelect(props) {
     {
       label,
       size,
-      placeholder: placeholder || t("PickRole", "Pick a role..."),
+      placeholder: placeholder || t2("PickRole", "Pick a role..."),
       data,
       value: props.value || null,
       onChange: (id) => props.onChange(id),
@@ -6510,11 +6991,11 @@ function DiscordRoleSelect(props) {
       rightSectionPointerEvents: "all",
       style,
       styles,
-      nothingFoundMessage: errorCode ? `${t("Error", "Error")} (${errorCode})` : t("NoRoles", "No roles found")
+      nothingFoundMessage: errorCode ? `${t2("Error", "Error")} (${errorCode})` : t2("NoRoles", "No roles found")
     }
   );
 }
-var t2 = (key, fallback) => {
+var t3 = (key, fallback) => {
   const v = locale(key);
   return v === key ? fallback : v;
 };
@@ -6535,7 +7016,7 @@ function FrameworkHint({ framework }) {
   const theme = core.useMantineTheme();
   if (!framework) return null;
   const hintKey = `AccountFrameworkHint_${framework}`;
-  const text = t2(hintKey, FRAMEWORK_HINTS[framework] || FRAMEWORK_HINTS.unknown);
+  const text = t3(hintKey, FRAMEWORK_HINTS[framework] || FRAMEWORK_HINTS.unknown);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     core.Flex,
     {
@@ -6619,9 +7100,9 @@ function AccountSelect(props) {
         e.stopPropagation();
         refresh();
       },
-      title: t2("Refresh", "Refresh"),
+      title: t3("Refresh", "Refresh"),
       loading,
-      "aria-label": t2("Refresh", "Refresh"),
+      "aria-label": t3("Refresh", "Refresh"),
       children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { size: "1.2vh" })
     }
   );
@@ -6635,14 +7116,14 @@ function AccountSelect(props) {
     rightSection: refreshButton,
     rightSectionPointerEvents: "all",
     style,
-    nothingFoundMessage: t2("NoAccounts", "No accounts available")
+    nothingFoundMessage: t3("NoAccounts", "No accounts available")
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", gap: "0.3vh", style, children: [
     props.multi ? /* @__PURE__ */ jsxRuntime.jsx(
       core.MultiSelect,
       {
         ...sharedSelectProps,
-        placeholder: placeholder || t2("PickAccounts", "Pick accounts (or type custom)..."),
+        placeholder: placeholder || t3("PickAccounts", "Pick accounts (or type custom)..."),
         value: props.value || [],
         onChange: (names) => props.onChange(names),
         renderOption,
@@ -6654,7 +7135,7 @@ function AccountSelect(props) {
       core.Select,
       {
         ...sharedSelectProps,
-        placeholder: placeholder || t2("PickAccount", "Pick an account..."),
+        placeholder: placeholder || t3("PickAccount", "Pick an account..."),
         value: props.value || null,
         onChange: (name) => props.onChange(name),
         renderOption,
@@ -6946,175 +7427,6 @@ function WorldPositionGotoButton2({
     }
   ) });
 }
-function usePlayers(opts = {}) {
-  const {
-    includeOffline = false,
-    search = "",
-    limit = 50,
-    staleTimeMs,
-    refetchIntervalMs
-  } = opts;
-  const query = reactQuery.useQuery({
-    queryKey: includeOffline ? ["dirk:players", "search", search.trim().toLowerCase(), limit] : ["dirk:players", "online"],
-    queryFn: async () => {
-      const toolId = includeOffline ? "searchPlayers" : "getOnlinePlayers";
-      const payload = includeOffline ? { id: toolId, value: { search: search.trim(), limit } } : { id: toolId };
-      const result = await fetchNui(
-        "ADMIN_TOOL_QUERY",
-        payload,
-        // Browser-dev fallback. Returns a couple of mock players so the
-        // dev shell isn't blank.
-        includeOffline ? [
-          { id: 1, citizenId: "ABC12345", name: "Dev User", charName: "John Doe", online: true },
-          { id: null, citizenId: "DEF67890", name: "", charName: "Jane Offline", online: false }
-        ] : [
-          { id: 1, citizenId: "ABC12345", name: "Dev User", charName: "John Doe", online: true }
-        ]
-      );
-      return Array.isArray(result) ? result : [];
-    },
-    staleTime: staleTimeMs ?? (includeOffline ? 3e4 : 5e3),
-    gcTime: 5 * 6e4,
-    refetchInterval: refetchIntervalMs ?? false,
-    refetchOnWindowFocus: false,
-    placeholderData: includeOffline ? reactQuery.keepPreviousData : void 0
-  });
-  return {
-    players: query.data ?? [],
-    isLoading: query.isLoading,
-    isFetching: query.isFetching,
-    error: query.error ?? null,
-    refresh: () => query.refetch()
-  };
-}
-var DEBOUNCE_MS = 300;
-var ONLINE_COLOR = "#3FA83F";
-var OFFLINE_COLOR = "#E54141";
-function PlayerSelect({
-  value,
-  onChange,
-  includeOffline = false,
-  limit = 50,
-  searchable: searchableProp,
-  placeholder,
-  nothingFoundMessage: nothingFoundMessageProp,
-  loadingLabel = "Loading\u2026",
-  onlineLabel = "Online",
-  offlineLabel = "Offline",
-  refreshLabel = "Refresh player list",
-  ...rest
-}) {
-  const theme = core.useMantineTheme();
-  const color = theme.colors[theme.primaryColor][5];
-  const [searchInput, setSearchInput] = react.useState("");
-  const [debouncedSearch, setDebouncedSearch] = react.useState("");
-  const { players, isFetching, refresh } = usePlayers({
-    includeOffline,
-    search: includeOffline ? debouncedSearch : void 0,
-    limit
-  });
-  const sortedPlayers = react.useMemo(
-    () => [...players].sort((a, b) => {
-      if (a.online !== b.online) return a.online ? -1 : 1;
-      return a.charName.localeCompare(b.charName);
-    }),
-    [players]
-  );
-  const playerByCitizen = react.useMemo(() => {
-    const m = /* @__PURE__ */ new Map();
-    for (const p of sortedPlayers) m.set(p.citizenId, p);
-    return m;
-  }, [sortedPlayers]);
-  const data = react.useMemo(() => {
-    const items = sortedPlayers.map((p) => ({
-      value: p.citizenId,
-      label: formatLabel(p)
-    }));
-    if (value && !items.some((i) => i.value === value)) {
-      items.unshift({ value, label: value });
-    }
-    return items;
-  }, [sortedPlayers, value]);
-  const selectedPlayer = value ? playerByCitizen.get(value) ?? null : null;
-  const selectedLabel = selectedPlayer ? formatLabel(selectedPlayer) : null;
-  react.useEffect(() => {
-    if (!includeOffline) return;
-    if (selectedLabel && searchInput === selectedLabel) return;
-    const t3 = setTimeout(() => setDebouncedSearch(searchInput), DEBOUNCE_MS);
-    return () => clearTimeout(t3);
-  }, [searchInput, includeOffline, selectedLabel]);
-  const renderOption = ({ option }) => {
-    const p = playerByCitizen.get(option.value);
-    if (!p) return option.label;
-    return /* @__PURE__ */ jsxRuntime.jsxs(core.Group, { justify: "space-between", wrap: "nowrap", gap: "xs", style: { width: "100%" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "xs", truncate: true, style: { flex: 1 }, children: formatLabel(p) }),
-      /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { online: p.online, onlineLabel, offlineLabel })
-    ] });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    core.Select,
-    {
-      ...rest,
-      data,
-      value: value ?? null,
-      onChange: (v) => {
-        if (!v) return onChange(null);
-        const player = playerByCitizen.get(v) ?? null;
-        onChange(player);
-      },
-      searchable: searchableProp ?? true,
-      searchValue: includeOffline ? searchInput : void 0,
-      onSearchChange: includeOffline ? setSearchInput : void 0,
-      placeholder,
-      nothingFoundMessage: isFetching ? loadingLabel : nothingFoundMessageProp ?? "No players found",
-      maxDropdownHeight: 300,
-      renderOption,
-      leftSection: selectedPlayer ? /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { online: selectedPlayer.online, onlineLabel, offlineLabel }) : void 0,
-      rightSectionWidth: "3.5vh",
-      rightSectionPointerEvents: "all",
-      rightSection: /* @__PURE__ */ jsxRuntime.jsx(
-        core.ActionIcon,
-        {
-          variant: "subtle",
-          size: "sm",
-          onClick: (e) => {
-            e.stopPropagation();
-            refresh();
-          },
-          "aria-label": refreshLabel,
-          title: refreshLabel,
-          style: { marginRight: "0.6vh" },
-          children: isFetching ? /* @__PURE__ */ jsxRuntime.jsx(core.Loader, { size: "1.2vh", color }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { size: "1.4vh", color })
-        }
-      )
-    }
-  );
-}
-function StatusDot({ online, onlineLabel, offlineLabel }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      title: online ? onlineLabel : offlineLabel,
-      style: {
-        display: "inline-block",
-        width: "0.9vh",
-        height: "0.9vh",
-        borderRadius: "50%",
-        backgroundColor: online ? ONLINE_COLOR : OFFLINE_COLOR,
-        boxShadow: `0 0 0.4vh ${online ? ONLINE_COLOR : OFFLINE_COLOR}`,
-        flexShrink: 0
-      }
-    }
-  );
-}
-function formatLabel(p) {
-  const parts = [p.charName || p.citizenId];
-  if (p.online) {
-    if (p.name) parts.push(p.name);
-    if (p.id != null) parts.push(`#${p.id}`);
-  }
-  return parts.join(" \xB7 ");
-}
 function usePickDoor() {
   const begin = useAdminToolStore((s) => s.begin);
   return async () => {
@@ -7391,6 +7703,7 @@ function BlipMarker({
   );
 }
 
+exports.AccessOverrideSection = AccessOverrideSection;
 exports.AccountSelect = AccountSelect;
 exports.AdminPageTitle = AdminPageTitle;
 exports.AnimPostFxSelect = AnimPostFxSelect;