dirk-cfx-react 1.1.71 → 1.1.72

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { AdminPageTitle, AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, BlipColorSelectProps, BlipDisplaySelect, BlipDisplaySelectProps, BlipIconSelect, BlipIconSelectProps, BorderedIcon, BorderedIconProps, ButtonProps, ConfigPanel, ConfigPanelProps, ConfirmModal, ConfirmModalProps, ControlMultiSelect, ControlMultiSelectProps, ControlSelect, ControlSelectProps, Counter, FiveMControls, FiveMKeyBindInput, FloatingParticles, FloatingParticlesProps, GroupName, GroupNameProps, GroupRank, GroupRankProps, GroupSelect, GroupSelectProps, GroupType, GroupValue, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, LevelBanner, LevelPanel, Modal, ModalContext, ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavItem, NavigationContext, NavigationProvider, NavigationStore, ParticleState, PositionPicker, PositionPickerProps, ProgressProps, Prompt, PromptButton, PromptModal, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, SelectItem, SelectItemProps, StoreModalProps, TestBed, TestBedItem, TestBedProps, Title, TitleProps, Vector4DeleteButton, Vector4Display, Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.cjs';
+export { AdminPageTitle, AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, BlipColorSelectProps, BlipDisplaySelect, BlipDisplaySelectProps, BlipIconSelect, BlipIconSelectProps, BorderedIcon, BorderedIconProps, ButtonProps, ConfigPanel, ConfigPanelProps, ConfirmModal, ConfirmModalProps, ControlMultiSelect, ControlMultiSelectProps, ControlSelect, ControlSelectProps, Counter, FiveMControls, FiveMKeyBindInput, FloatingParticles, FloatingParticlesProps, GroupName, GroupNameProps, GroupRank, GroupRankProps, GroupSelect, GroupSelectProps, GroupType, GroupValue, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavItem, NavigationContext, NavigationProvider, NavigationStore, ParticleState, PositionPicker, PositionPickerProps, ProgressProps, Prompt, PromptButton, PromptModal, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, SelectItem, SelectItemProps, StoreModalProps, TestBed, TestBedItem, TestBedProps, Title, TitleProps, Vector4DeleteButton, Vector4Display, Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore } 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, 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, createFormStore, createScriptConfig, getScriptConfigInstance, useAudio, useForm, useFormActions, useFormError, useFormErrors, useFormField, useFormFields, useNuiEvent, useTornEdges } from './hooks/index.cjs';
 export { DirkProvider, DirkProviderProps } from './providers/index.cjs';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { AdminPageTitle, AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, BlipColorSelectProps, BlipDisplaySelect, BlipDisplaySelectProps, BlipIconSelect, BlipIconSelectProps, BorderedIcon, BorderedIconProps, ButtonProps, ConfigPanel, ConfigPanelProps, ConfirmModal, ConfirmModalProps, ControlMultiSelect, ControlMultiSelectProps, ControlSelect, ControlSelectProps, Counter, FiveMControls, FiveMKeyBindInput, FloatingParticles, FloatingParticlesProps, GroupName, GroupNameProps, GroupRank, GroupRankProps, GroupSelect, GroupSelectProps, GroupType, GroupValue, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, LevelBanner, LevelPanel, Modal, ModalContext, ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavItem, NavigationContext, NavigationProvider, NavigationStore, ParticleState, PositionPicker, PositionPickerProps, ProgressProps, Prompt, PromptButton, PromptModal, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, SelectItem, SelectItemProps, StoreModalProps, TestBed, TestBedItem, TestBedProps, Title, TitleProps, Vector4DeleteButton, Vector4Display, Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.js';
+export { AdminPageTitle, AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, BlipColorSelectProps, BlipDisplaySelect, BlipDisplaySelectProps, BlipIconSelect, BlipIconSelectProps, BorderedIcon, BorderedIconProps, ButtonProps, ConfigPanel, ConfigPanelProps, ConfirmModal, ConfirmModalProps, ControlMultiSelect, ControlMultiSelectProps, ControlSelect, ControlSelectProps, Counter, FiveMControls, FiveMKeyBindInput, FloatingParticles, FloatingParticlesProps, GroupName, GroupNameProps, GroupRank, GroupRankProps, GroupSelect, GroupSelectProps, GroupType, GroupValue, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavItem, NavigationContext, NavigationProvider, NavigationStore, ParticleState, PositionPicker, PositionPickerProps, ProgressProps, Prompt, PromptButton, PromptModal, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, SelectItem, SelectItemProps, StoreModalProps, TestBed, TestBedItem, TestBedProps, Title, TitleProps, Vector4DeleteButton, Vector4Display, Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore } 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, 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, createFormStore, createScriptConfig, getScriptConfigInstance, useAudio, useForm, useFormActions, useFormError, useFormErrors, useFormField, useFormFields, useNuiEvent, useTornEdges } from './hooks/index.js';
 export { DirkProvider, DirkProviderProps } from './providers/index.js';

package/dist/index.js

@@ -1,11 +1,11 @@
 import { Flex, Text, Image as Image$1, createTheme, Box, Stack, Title as Title$1, Code, TextInput, Select, useMantineTheme, Tooltip, alpha, Progress, RingProgress, Portal, Button, NumberInput, MultiSelect, Loader, ActionIcon, MantineProvider, BackgroundImage, Group, JsonInput } from '@mantine/core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React6, { createContext, useContext, useEffect, useRef, useState, useMemo, useLayoutEffect } from 'react';
+import React6, { createContext, useContext, useEffect, useRef, useState, useCallback, useMemo, useLayoutEffect } from 'react';
 import { create, useStore, createStore } from 'zustand';
 import axios from 'axios';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { motion, AnimatePresence, useMotionValue } from 'framer-motion';
-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 { Info, X, AlertTriangle, Trash2, RefreshCw, ChevronDown, Check, Copy, MapPin, Crosshair, EyeOff, Eye, RotateCcw, FlaskConical, ChevronUp, 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';
@@ -1242,11 +1242,11 @@ var colorNames = {
   Yellow: { r: 255, g: 255, b: 0 },
   YellowGreen: { r: 154, g: 205, b: 50 }
 };
-function colorWithAlpha(color, alpha9) {
+function colorWithAlpha(color, alpha10) {
   const lowerCasedColor = color.toLowerCase();
   if (colorNames[lowerCasedColor]) {
     const rgb = colorNames[lowerCasedColor];
-    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha9})`;
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha10})`;
   }
   if (/^#([A-Fa-f0-9]{6})$/.test(color)) {
     const hex = color.slice(1);
@@ -1254,12 +1254,12 @@ function colorWithAlpha(color, alpha9) {
     const r = bigint >> 16 & 255;
     const g = bigint >> 8 & 255;
     const b = bigint & 255;
-    return `rgba(${r}, ${g}, ${b}, ${alpha9})`;
+    return `rgba(${r}, ${g}, ${b}, ${alpha10})`;
   }
   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]}, ${alpha9})`;
+      return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha10})`;
     }
   }
   return color;
@@ -3807,6 +3807,246 @@ function ConfirmModal({
     }
   ) });
 }
+var TABS = [
+  { id: "ox", label: "ox_inventory" },
+  { id: "qb", label: "qb-inventory" },
+  { id: "esx", label: "ESX legacy SQL" }
+];
+var useMissingItemsAudit = create((set, get) => ({
+  data: null,
+  loaded: false,
+  inFlight: false,
+  refresh: async () => {
+    if (get().inFlight) return;
+    set({ inFlight: true });
+    try {
+      const res = await fetchNui("GET_MISSING_ITEMS", void 0, {
+        success: true,
+        data: { missing: [], snippets: { ox: "", qb: "", esx: "" } }
+      });
+      if (res?.success && res.data) {
+        set({ data: res.data, loaded: true });
+      } else {
+        set({ loaded: true });
+      }
+    } catch {
+      set({ loaded: true });
+    } finally {
+      set({ inFlight: false });
+    }
+  }
+}));
+function MissingItemsBanner() {
+  const theme2 = useMantineTheme();
+  const audit = useMissingItemsAudit((s) => s.data);
+  const loaded = useMissingItemsAudit((s) => s.loaded);
+  const inFlight = useMissingItemsAudit((s) => s.inFlight);
+  const refresh = useMissingItemsAudit((s) => s.refresh);
+  const [expanded, setExpanded] = useState(false);
+  const [activeTab, setActiveTab] = useState("ox");
+  const [hoveredTab, setHoveredTab] = useState(null);
+  const [copied, setCopied] = useState(null);
+  useEffect(() => {
+    if (!loaded) refresh();
+  }, [loaded, refresh]);
+  const handleCopy = useCallback((tab) => {
+    if (!audit) return;
+    const text = audit.snippets[tab] ?? "";
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(tab);
+      setTimeout(() => setCopied((c) => c === tab ? null : c), 1500);
+    }).catch(() => {
+    });
+  }, [audit]);
+  const handleRefresh = useCallback((e) => {
+    e.stopPropagation();
+    refresh();
+  }, [refresh]);
+  if (!audit || audit.missing.length === 0) return null;
+  const warnColor = "#f59e0b";
+  const names = audit.missing.map((m) => m.name);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        background: alpha(warnColor, 0.06),
+        border: `0.1vh solid ${alpha(warnColor, 0.35)}`,
+        borderLeft: `0.3vh solid ${warnColor}`,
+        borderRadius: theme2.radius.xs,
+        margin: "0.6vh 1vh",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "0.8vh", p: "0.8vh 1vh", style: { cursor: "pointer" }, onClick: () => setExpanded((e) => !e), children: [
+          /* @__PURE__ */ jsx(AlertTriangle, { size: "1.8vh", color: warnColor, strokeWidth: 2.5 }),
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xs", tt: "uppercase", lts: "0.07em", c: warnColor, children: audit.missing.length === 1 ? "1 item missing from your inventory" : `${audit.missing.length} items missing from your inventory` }),
+            /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", c: "rgba(255,255,255,0.5)", lineClamp: 1, style: { fontFamily: "monospace" }, children: names.join(", ") })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleRefresh,
+              disabled: inFlight,
+              style: {
+                background: "transparent",
+                border: "none",
+                padding: "0.3vh",
+                cursor: inFlight ? "wait" : "pointer",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                opacity: inFlight ? 0.4 : 0.7
+              },
+              title: "Re-check",
+              children: /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  animate: { rotate: inFlight ? 360 : 0 },
+                  transition: inFlight ? { duration: 1, repeat: Infinity, ease: "linear" } : { duration: 0 },
+                  style: { display: "flex", alignItems: "center", justifyContent: "center" },
+                  children: /* @__PURE__ */ jsx(RefreshCw, { size: "1.5vh", color: alpha(warnColor, 0.7) })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              animate: { rotate: expanded ? 180 : 0 },
+              transition: { duration: 0.18 },
+              style: { display: "flex", alignItems: "center", justifyContent: "center" },
+              children: /* @__PURE__ */ jsx(ChevronDown, { size: "1.8vh", color: alpha(warnColor, 0.7) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: expanded && /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: { height: 0, opacity: 0 },
+            animate: { height: "auto", opacity: 1 },
+            exit: { height: 0, opacity: 0 },
+            transition: { duration: 0.18, ease: "easeOut" },
+            style: { overflow: "hidden", borderTop: `0.1vh solid ${alpha(warnColor, 0.18)}` },
+            children: [
+              /* @__PURE__ */ jsx(Flex, { gap: "0", style: { borderBottom: `0.1vh solid ${alpha(warnColor, 0.18)}` }, children: TABS.map((tab) => {
+                const active = tab.id === activeTab;
+                const hovered = hoveredTab === tab.id;
+                let bg = "transparent";
+                if (active) bg = alpha(warnColor, 0.12);
+                else if (hovered) bg = alpha(warnColor, 0.08);
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setActiveTab(tab.id);
+                    },
+                    onMouseEnter: () => setHoveredTab(tab.id),
+                    onMouseLeave: () => setHoveredTab((h) => h === tab.id ? null : h),
+                    style: {
+                      flex: 1,
+                      background: bg,
+                      border: "none",
+                      borderBottom: active ? `0.2vh solid ${warnColor}` : "0.2vh solid transparent",
+                      padding: "0.3vh 1vh",
+                      cursor: active ? "default" : "pointer",
+                      color: active ? warnColor : "rgba(255,255,255,0.5)",
+                      fontFamily: "Akrobat Bold",
+                      fontSize: "var(--mantine-font-size-xxs)",
+                      letterSpacing: "0.07em",
+                      textTransform: "uppercase",
+                      transition: "background 0.12s"
+                    },
+                    children: tab.label
+                  },
+                  tab.id
+                );
+              }) }),
+              /* @__PURE__ */ jsx(
+                CodeView,
+                {
+                  code: audit.snippets[activeTab] ?? "",
+                  copied: copied === activeTab,
+                  onCopy: (e) => {
+                    e.stopPropagation();
+                    handleCopy(activeTab);
+                  },
+                  warnColor
+                }
+              )
+            ]
+          },
+          "expanded"
+        ) })
+      ]
+    }
+  );
+}
+function CodeView({
+  code,
+  copied,
+  onCopy,
+  warnColor
+}) {
+  const theme2 = useMantineTheme();
+  const [hovered, setHovered] = useState(false);
+  const lines = code === "" ? [""] : code.split("\n");
+  const lineNumWidth = String(lines.length).length;
+  const copyBg = copied ? alpha("#22c55e", 0.15) : hovered ? alpha(warnColor, 0.18) : alpha(warnColor, 0.1);
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: onCopy,
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        style: {
+          position: "absolute",
+          top: "0.6vh",
+          right: "0.8vh",
+          zIndex: 2,
+          background: copyBg,
+          border: `0.1vh solid ${alpha(copied ? "#22c55e" : warnColor, 0.35)}`,
+          borderRadius: theme2.radius.xs,
+          padding: "0.4vh 0.7vh",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          gap: "0.4vh",
+          transition: "background 0.12s"
+        },
+        children: [
+          copied ? /* @__PURE__ */ jsx(Check, { size: "1.4vh", color: "#22c55e" }) : /* @__PURE__ */ jsx(Copy, { size: "1.4vh", color: warnColor }),
+          /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.06em", c: copied ? "#22c55e" : warnColor, children: copied ? "Copied" : "Copy" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: {
+      background: alpha(theme2.colors.dark[9], 0.6),
+      maxHeight: "40vh",
+      overflowY: "auto",
+      overflowX: "auto",
+      padding: "0.6vh 0"
+    }, children: /* @__PURE__ */ jsx("table", { style: { borderCollapse: "collapse", width: "100%", fontFamily: "monospace", fontSize: "1.2vh", lineHeight: 1.5 }, children: /* @__PURE__ */ jsx("tbody", { children: lines.map((line, i) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { style: {
+        width: `${lineNumWidth + 2}ch`,
+        textAlign: "right",
+        padding: "0 0.8vh 0 1vh",
+        color: "rgba(255,255,255,0.25)",
+        userSelect: "none",
+        whiteSpace: "nowrap",
+        verticalAlign: "top"
+      }, children: i + 1 }),
+      /* @__PURE__ */ jsx("td", { style: {
+        padding: "0 1vh",
+        color: "rgba(255,255,255,0.85)",
+        whiteSpace: "pre",
+        verticalAlign: "top"
+      }, children: line || "\u200B" })
+    ] }, i)) }) }) })
+  ] });
+}
 function getNested(obj, path) {
   return path.split(".").reduce((acc, key) => acc ? acc[key] : void 0, obj);
 }
@@ -4533,7 +4773,8 @@ function ConfigPanelInner({
   resetConfirmText,
   defaultConfig,
   width,
-  height
+  height,
+  suppressMissingItemsBanner
 }) {
   const { updateConfig, resetConfig, getHistory } = getScriptConfigInstance();
   const form = useForm();
@@ -4756,18 +4997,21 @@ function ConfigPanelInner({
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
-            motion.div,
-            {
-              initial: firstMountRef.current ? (firstMountRef.current = false, false) : { opacity: 0, y: 4 },
-              animate: { opacity: 1, y: 0 },
-              exit: { opacity: 0, y: -4 },
-              transition: { duration: 0.15 },
-              style: { flex: 1, display: "flex", flexDirection: "column", overflowY: "auto" },
-              children: children(activeTab)
-            },
-            activeTab
-          ) })
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { flex: 1, minWidth: 0, overflow: "hidden" }, children: [
+            !suppressMissingItemsBanner && /* @__PURE__ */ jsx(MissingItemsBanner, {}),
+            /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: firstMountRef.current ? (firstMountRef.current = false, false) : { opacity: 0, y: 4 },
+                animate: { opacity: 1, y: 0 },
+                exit: { opacity: 0, y: -4 },
+                transition: { duration: 0.15 },
+                style: { flex: 1, display: "flex", flexDirection: "column", overflowY: "auto" },
+                children: children(activeTab)
+              },
+              activeTab
+            ) })
+          ] })
         ]
       }
     )
@@ -4809,6 +5053,7 @@ function ConfigPanel(props) {
           if (result?.success) {
             form.reinitialize(cloneConfig(form.values));
             configPanelQueryClient.invalidateQueries({ queryKey: ["scriptConfigHistory"] });
+            useMissingItemsAudit.getState().refresh();
             notifications.show({
               color: "green",
               title: locale("ConfigSaveSuccessTitle"),
@@ -4846,6 +5091,7 @@ function ConfigPanel(props) {
     }
   ) });
 }
+var MISSING_COLOR = "#f59e0b";
 function LazyImage({ src, style }) {
   const [visible, setVisible] = useState(false);
   const ref = useRef(null);
@@ -4863,14 +5109,19 @@ function LazyImage({ src, style }) {
 }
 function SelectItem(props) {
   const invItems = useItems();
+  const isMissing = !!props.value && !invItems[props.value];
   const formattedItems = useMemo(() => {
     const seen = /* @__PURE__ */ new Set();
-    return useItemsList(props.excludeItemNames ?? []).filter((item) => {
+    const list = useItemsList(props.excludeItemNames ?? []).filter((item) => {
       if (seen.has(item.name)) return false;
       seen.add(item.name);
       return true;
     }).map((item) => ({ value: item.name, label: item.label, image: item.image }));
-  }, [invItems, props.excludeItemNames]);
+    if (isMissing) {
+      list.unshift({ value: props.value, label: props.value, image: "" });
+    }
+    return list;
+  }, [invItems, props.excludeItemNames, props.value, isMissing]);
   return /* @__PURE__ */ jsx(
     Select,
     {
@@ -4885,10 +5136,11 @@ function SelectItem(props) {
       data: formattedItems,
       allowDeselect: false,
       searchable: true,
+      styles: isMissing ? { input: { color: MISSING_COLOR } } : void 0,
       comboboxProps: { withinPortal: true, zIndex: 2e3 },
       leftSectionWidth: "4vh",
       leftSectionPointerEvents: "none",
-      leftSection: props.value ? /* @__PURE__ */ jsx(
+      leftSection: isMissing ? /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", w: "4vh", h: "4vh", children: /* @__PURE__ */ jsx(AlertTriangle, { size: "2vh", color: MISSING_COLOR, strokeWidth: 2.5 }) }) : props.value ? /* @__PURE__ */ jsx(
         Image$1,
         {
           fallbackSrc: "/placeholder.png",
@@ -4899,19 +5151,37 @@ function SelectItem(props) {
         }
       ) : null,
       nothingFoundMessage: locale("NoItemsFound"),
-      renderOption: (item) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", w: "100%", children: [
-        /* @__PURE__ */ jsx(
-          LazyImage,
-          {
-            src: invItems[item.option.value]?.image || "",
-            style: { aspectRatio: "1 / 1" }
-          }
-        ),
-        /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
-          /* @__PURE__ */ jsx(Text, { size: "sm", children: item.option.label }),
-          /* @__PURE__ */ jsx(Text, { size: "xxs", c: "dimmed", children: item.option.value })
-        ] })
-      ] })
+      renderOption: (item) => {
+        const optionMissing = !invItems[item.option.value] && item.option.value === props.value;
+        if (optionMissing) {
+          return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", w: "100%", children: [
+            /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", w: "4vh", h: "4vh", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(AlertTriangle, { size: "2vh", color: MISSING_COLOR, strokeWidth: 2.5 }) }),
+            /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx(Text, { size: "sm", c: MISSING_COLOR, style: { fontFamily: "monospace" }, children: item.option.value }),
+              /* @__PURE__ */ jsx(Text, { size: "xxs", c: "dimmed", children: locale("ItemNotInInventory") })
+            ] }),
+            /* @__PURE__ */ jsx("div", { style: {
+              background: "rgba(245,158,11,0.12)",
+              border: `0.1vh solid ${MISSING_COLOR}59`,
+              borderRadius: "0.3vh",
+              padding: "0.1vh 0.6vh"
+            }, children: /* @__PURE__ */ jsx(Text, { size: "xxs", c: MISSING_COLOR, ff: "Akrobat Bold", tt: "uppercase", lts: "0.06em", children: locale("Missing") }) })
+          ] });
+        }
+        return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", w: "100%", children: [
+          /* @__PURE__ */ jsx(
+            LazyImage,
+            {
+              src: invItems[item.option.value]?.image || "",
+              style: { aspectRatio: "1 / 1" }
+            }
+          ),
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+            /* @__PURE__ */ jsx(Text, { size: "sm", children: item.option.label }),
+            /* @__PURE__ */ jsx(Text, { size: "xxs", c: "dimmed", children: item.option.value })
+          ] })
+        ] });
+      }
     }
   );
 }
@@ -6026,6 +6296,6 @@ function DirkProvider({ children, overideResourceName, themeOverride }) {
   return /* @__PURE__ */ jsx(MantineProvider, { theme: mergedTheme, defaultColorScheme: "dark", children: /* @__PURE__ */ jsx(DirkErrorBoundary, { children: content }) });
 }
 
-export { AdminPageTitle, AsyncSaveButton, BlipColorSelect, BlipDisplaySelect, BlipIconSelect, BorderedIcon, ConfigPanel, ConfirmModal, ControlMultiSelect, ControlSelect, Counter, DirkProvider, FiveMKeyBindInput, FloatingParticles, FormProvider, GTA_CONTROLS, GTA_CONTROL_GROUP_ORDER, GroupName, GroupRank, GroupSelect, INPUT_MAPPER_KEYS_BY_PRIMARY, INPUT_MAPPER_PRIMARY_OPTIONS, InfoBox, InputContainer, LevelBanner, LevelPanel, Modal, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PositionPicker, PromptModal, SegmentedControl, SegmentedProgress, SelectItem, TestBed, Title, TornEdgeSVGFilter, Vector4DeleteButton, Vector4Display, WorldPositionGotoButton, WorldPositionSetButton, colorWithAlpha, copyToClipboard, createFormStore, createScriptConfig, createSkill, extractDefaults, fetchLuaTable, fetchNui, formatGtaControl, gameToMap, getGtaControl, getImageShape, getItemImageUrl, getScriptConfigInstance, initialFetches, internalEvent, isEnvBrowser, isProfanity, latPr100, locale, localeStore, mapCenter, mapToGame, noop, numberToRoman, openLink, registerInitialFetch, registerInitialLuaTableFetch, runFetches, selectAllGroups, splitFAString, updatePresignedURL, uploadImage, useAudio, useAutoFetcher, useForm, useFormActions, useFormError, useFormErrors, useFormField, useFormFields, useFrameworkGroups, useItems, useItemsList, useModal, useModalActions, useNavigation, useNavigationStore, useNuiEvent, useProfanityStore, useSettings, useTornEdges };
+export { AdminPageTitle, AsyncSaveButton, BlipColorSelect, BlipDisplaySelect, BlipIconSelect, BorderedIcon, ConfigPanel, ConfirmModal, ControlMultiSelect, ControlSelect, Counter, DirkProvider, FiveMKeyBindInput, FloatingParticles, FormProvider, GTA_CONTROLS, GTA_CONTROL_GROUP_ORDER, GroupName, GroupRank, GroupSelect, INPUT_MAPPER_KEYS_BY_PRIMARY, INPUT_MAPPER_PRIMARY_OPTIONS, InfoBox, InputContainer, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PositionPicker, PromptModal, SegmentedControl, SegmentedProgress, SelectItem, TestBed, Title, TornEdgeSVGFilter, Vector4DeleteButton, Vector4Display, WorldPositionGotoButton, WorldPositionSetButton, colorWithAlpha, copyToClipboard, createFormStore, createScriptConfig, createSkill, extractDefaults, fetchLuaTable, fetchNui, formatGtaControl, gameToMap, getGtaControl, getImageShape, getItemImageUrl, getScriptConfigInstance, initialFetches, internalEvent, isEnvBrowser, isProfanity, latPr100, locale, localeStore, mapCenter, mapToGame, noop, numberToRoman, openLink, registerInitialFetch, registerInitialLuaTableFetch, runFetches, selectAllGroups, splitFAString, updatePresignedURL, uploadImage, useAudio, useAutoFetcher, useForm, useFormActions, useFormError, useFormErrors, useFormField, useFormFields, useFrameworkGroups, useItems, useItemsList, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore, useNuiEvent, useProfanityStore, useSettings, useTornEdges };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map