dirk-cfx-react 1.1.71 → 1.1.72

package/dist/components/index.d.cts

@@ -5,6 +5,7 @@ import React__default, { ReactNode, ComponentType } from 'react';
 import * as framer_motion from 'framer-motion';
 import { Variants } from 'framer-motion';
 import * as _fortawesome_fontawesome_svg_core from '@fortawesome/fontawesome-svg-core';
+import * as zustand from 'zustand';
 import { StoreApi } from 'zustand';
 import { LucideProps } from 'lucide-react';
 
@@ -813,6 +814,10 @@ interface ConfigPanelProps<T extends Record<string, any> = Record<string, any>>
     resetConfirmText?: string;
     width?: string;
     height?: string;
+    /** Skip the auto-mounted MissingItemsBanner. Default: false (banner shown).
+        The banner self-hides when nothing is missing, so leaving it on costs
+        nothing visually. */
+    suppressMissingItemsBanner?: boolean;
 }
 declare function ConfigPanel<T extends Record<string, any>>(props: ConfigPanelProps<T>): react_jsx_runtime.JSX.Element | null;
 
@@ -959,6 +964,29 @@ type AdminPageTitleProps = {
 };
 declare function AdminPageTitle(props: AdminPageTitleProps): react_jsx_runtime.JSX.Element;
 
+type MissingItem = {
+    name: string;
+    label?: string;
+    weight?: number;
+    description?: string;
+};
+type AuditPayload = {
+    missing: MissingItem[];
+    snippets: {
+        ox: string;
+        qb: string;
+        esx: string;
+    };
+};
+type AuditStore = {
+    data: AuditPayload | null;
+    loaded: boolean;
+    inFlight: boolean;
+    refresh: () => Promise<void>;
+};
+declare const useMissingItemsAudit: zustand.UseBoundStore<zustand.StoreApi<AuditStore>>;
+declare function MissingItemsBanner(): react_jsx_runtime.JSX.Element | null;
+
 interface TestBedItem {
     key: string;
     label: string;
@@ -976,4 +1004,4 @@ interface TestBedProps {
 }
 declare function TestBed({ items, storageKey, disablePersistence, title, }: TestBedProps): react_jsx_runtime.JSX.Element | null;
 
-export { AdminPageTitle, type AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, type BlipColorSelectProps, BlipDisplaySelect, type BlipDisplaySelectProps, BlipIconSelect, type BlipIconSelectProps, BorderedIcon, type BorderedIconProps, type ButtonProps, ConfigPanel, type ConfigPanelProps, ConfirmModal, type ConfirmModalProps, ControlMultiSelect, type ControlMultiSelectProps, ControlSelect, type ControlSelectProps, Counter, type FiveMControls, FiveMKeyBindInput, FloatingParticles, type FloatingParticlesProps, GroupName, type GroupNameProps, GroupRank, type GroupRankProps, GroupSelect, type GroupSelectProps, type GroupType, type GroupValue, InfoBox, type InfoBoxProps, InputContainer, type InputContainerProps, LevelBanner, LevelPanel, Modal, ModalContext, type ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, type NavItem, NavigationContext, NavigationProvider, type NavigationStore, type ParticleState, PositionPicker, type PositionPickerProps, type ProgressProps, type Prompt, type PromptButton, PromptModal, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, TestBed, type TestBedItem, type TestBedProps, Title, type TitleProps, Vector4DeleteButton, Vector4Display, type Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useModal, useModalActions, useNavigation, useNavigationStore };
+export { AdminPageTitle, type AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, type BlipColorSelectProps, BlipDisplaySelect, type BlipDisplaySelectProps, BlipIconSelect, type BlipIconSelectProps, BorderedIcon, type BorderedIconProps, type ButtonProps, ConfigPanel, type ConfigPanelProps, ConfirmModal, type ConfirmModalProps, ControlMultiSelect, type ControlMultiSelectProps, ControlSelect, type ControlSelectProps, Counter, type FiveMControls, FiveMKeyBindInput, FloatingParticles, type FloatingParticlesProps, GroupName, type GroupNameProps, GroupRank, type GroupRankProps, GroupSelect, type GroupSelectProps, type GroupType, type GroupValue, InfoBox, type InfoBoxProps, InputContainer, type InputContainerProps, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, type ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, type NavItem, NavigationContext, NavigationProvider, type NavigationStore, type ParticleState, PositionPicker, type PositionPickerProps, type ProgressProps, type Prompt, type PromptButton, PromptModal, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, TestBed, type TestBedItem, type TestBedProps, Title, type TitleProps, Vector4DeleteButton, Vector4Display, type Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore };

package/dist/components/index.d.ts

@@ -5,6 +5,7 @@ import React__default, { ReactNode, ComponentType } from 'react';
 import * as framer_motion from 'framer-motion';
 import { Variants } from 'framer-motion';
 import * as _fortawesome_fontawesome_svg_core from '@fortawesome/fontawesome-svg-core';
+import * as zustand from 'zustand';
 import { StoreApi } from 'zustand';
 import { LucideProps } from 'lucide-react';
 
@@ -813,6 +814,10 @@ interface ConfigPanelProps<T extends Record<string, any> = Record<string, any>>
     resetConfirmText?: string;
     width?: string;
     height?: string;
+    /** Skip the auto-mounted MissingItemsBanner. Default: false (banner shown).
+        The banner self-hides when nothing is missing, so leaving it on costs
+        nothing visually. */
+    suppressMissingItemsBanner?: boolean;
 }
 declare function ConfigPanel<T extends Record<string, any>>(props: ConfigPanelProps<T>): react_jsx_runtime.JSX.Element | null;
 
@@ -959,6 +964,29 @@ type AdminPageTitleProps = {
 };
 declare function AdminPageTitle(props: AdminPageTitleProps): react_jsx_runtime.JSX.Element;
 
+type MissingItem = {
+    name: string;
+    label?: string;
+    weight?: number;
+    description?: string;
+};
+type AuditPayload = {
+    missing: MissingItem[];
+    snippets: {
+        ox: string;
+        qb: string;
+        esx: string;
+    };
+};
+type AuditStore = {
+    data: AuditPayload | null;
+    loaded: boolean;
+    inFlight: boolean;
+    refresh: () => Promise<void>;
+};
+declare const useMissingItemsAudit: zustand.UseBoundStore<zustand.StoreApi<AuditStore>>;
+declare function MissingItemsBanner(): react_jsx_runtime.JSX.Element | null;
+
 interface TestBedItem {
     key: string;
     label: string;
@@ -976,4 +1004,4 @@ interface TestBedProps {
 }
 declare function TestBed({ items, storageKey, disablePersistence, title, }: TestBedProps): react_jsx_runtime.JSX.Element | null;
 
-export { AdminPageTitle, type AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, type BlipColorSelectProps, BlipDisplaySelect, type BlipDisplaySelectProps, BlipIconSelect, type BlipIconSelectProps, BorderedIcon, type BorderedIconProps, type ButtonProps, ConfigPanel, type ConfigPanelProps, ConfirmModal, type ConfirmModalProps, ControlMultiSelect, type ControlMultiSelectProps, ControlSelect, type ControlSelectProps, Counter, type FiveMControls, FiveMKeyBindInput, FloatingParticles, type FloatingParticlesProps, GroupName, type GroupNameProps, GroupRank, type GroupRankProps, GroupSelect, type GroupSelectProps, type GroupType, type GroupValue, InfoBox, type InfoBoxProps, InputContainer, type InputContainerProps, LevelBanner, LevelPanel, Modal, ModalContext, type ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, type NavItem, NavigationContext, NavigationProvider, type NavigationStore, type ParticleState, PositionPicker, type PositionPickerProps, type ProgressProps, type Prompt, type PromptButton, PromptModal, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, TestBed, type TestBedItem, type TestBedProps, Title, type TitleProps, Vector4DeleteButton, Vector4Display, type Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useModal, useModalActions, useNavigation, useNavigationStore };
+export { AdminPageTitle, type AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, type BlipColorSelectProps, BlipDisplaySelect, type BlipDisplaySelectProps, BlipIconSelect, type BlipIconSelectProps, BorderedIcon, type BorderedIconProps, type ButtonProps, ConfigPanel, type ConfigPanelProps, ConfirmModal, type ConfirmModalProps, ControlMultiSelect, type ControlMultiSelectProps, ControlSelect, type ControlSelectProps, Counter, type FiveMControls, FiveMKeyBindInput, FloatingParticles, type FloatingParticlesProps, GroupName, type GroupNameProps, GroupRank, type GroupRankProps, GroupSelect, type GroupSelectProps, type GroupType, type GroupValue, InfoBox, type InfoBoxProps, InputContainer, type InputContainerProps, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, type ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, type NavItem, NavigationContext, NavigationProvider, type NavigationStore, type ParticleState, PositionPicker, type PositionPickerProps, type ProgressProps, type Prompt, type PromptButton, PromptModal, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, TestBed, type TestBedItem, type TestBedProps, Title, type TitleProps, Vector4DeleteButton, Vector4Display, type Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore };

package/dist/components/index.js

@@ -1,10 +1,10 @@
 import { Flex, Text, Image, TextInput, Select, Box, useMantineTheme, Tooltip, alpha, Progress, RingProgress, Portal, Button, NumberInput, MultiSelect, Loader, ActionIcon, Stack, Group, JsonInput } from '@mantine/core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, useContext, useRef, useState, useEffect, useMemo } from 'react';
+import { createContext, useContext, useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { create, useStore, createStore } from 'zustand';
 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';
@@ -1229,11 +1229,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);
@@ -1241,12 +1241,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;
@@ -3198,6 +3198,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 theme = 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: theme.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 theme = 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: theme.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(theme.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);
 }
@@ -3800,7 +4040,8 @@ function ConfigPanelInner({
   resetConfirmText,
   defaultConfig,
   width,
-  height
+  height,
+  suppressMissingItemsBanner
 }) {
   const { updateConfig, resetConfig, getHistory } = getScriptConfigInstance();
   const form = useForm();
@@ -4023,18 +4264,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
+            ) })
+          ] })
         ]
       }
     )
@@ -4076,6 +4320,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"),
@@ -4113,6 +4358,7 @@ function ConfigPanel(props) {
     }
   ) });
 }
+var MISSING_COLOR = "#f59e0b";
 function LazyImage({ src, style }) {
   const [visible, setVisible] = useState(false);
   const ref = useRef(null);
@@ -4130,14 +4376,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,
     {
@@ -4152,10 +4403,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,
         {
           fallbackSrc: "/placeholder.png",
@@ -4166,19 +4418,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 })
+          ] })
+        ] });
+      }
     }
   );
 }
@@ -4988,6 +5258,6 @@ function TestBed({
   );
 }
 
-export { AdminPageTitle, AsyncSaveButton, BlipColorSelect, BlipDisplaySelect, BlipIconSelect, BorderedIcon, ConfigPanel, ConfirmModal, ControlMultiSelect, ControlSelect, Counter, FiveMKeyBindInput, FloatingParticles, GroupName, GroupRank, GroupSelect, InfoBox, InputContainer, LevelBanner, LevelPanel, Modal, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PositionPicker, PromptModal, SegmentedControl, SegmentedProgress, SelectItem, TestBed, Title, Vector4DeleteButton, Vector4Display, WorldPositionGotoButton, WorldPositionSetButton, useModal, useModalActions, useNavigation, useNavigationStore };
+export { AdminPageTitle, AsyncSaveButton, BlipColorSelect, BlipDisplaySelect, BlipIconSelect, BorderedIcon, ConfigPanel, ConfirmModal, ControlMultiSelect, ControlSelect, Counter, FiveMKeyBindInput, FloatingParticles, GroupName, GroupRank, GroupSelect, InfoBox, InputContainer, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PositionPicker, PromptModal, SegmentedControl, SegmentedProgress, SelectItem, TestBed, Title, Vector4DeleteButton, Vector4Display, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map