dirk-cfx-react 1.1.71 → 1.1.73

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;
@@ -1292,7 +1292,11 @@ async function fetchNui(eventName, data, mockData) {
     return {};
   }
   const overrideResourceName = useSettings.getState().overideResourceName;
-  const resourceName = window.GetParentResourceName ? window.GetParentResourceName() : overrideResourceName ? overrideResourceName : "dirk-cfx-react";
+  const hasResourceContext = typeof window.GetParentResourceName === "function" || !!overrideResourceName;
+  if (!hasResourceContext) {
+    return mockData ?? {};
+  }
+  const resourceName = window.GetParentResourceName ? window.GetParentResourceName() : overrideResourceName;
   try {
     const resp = await fetch(`https://${resourceName}/${eventName}`, options);
     return await resp.json();
@@ -2465,9 +2469,25 @@ function SegmentedProgress(props) {
     }
   );
 }
+function getSizePreset(size, themeMdFontSize) {
+  switch (size) {
+    case "xs":
+      return { iconFontSize: "1.2vh", iconPadding: "xxs", titleSize: "xxs", titleLineHeight: "1.2vh", descriptionSize: "xxs", innerGap: "xs", bottomPad: "xs" };
+    case "sm":
+      return { iconFontSize: "1.6vh", iconPadding: "xxs", titleSize: "xs", titleLineHeight: "1.6vh", descriptionSize: "xxs", innerGap: "xs", bottomPad: "xs" };
+    case "lg":
+      return { iconFontSize: "2.6vh", iconPadding: "sm", titleSize: "md", titleLineHeight: "2.6vh", descriptionSize: "sm", innerGap: "sm", bottomPad: "sm" };
+    case "xl":
+      return { iconFontSize: "3.2vh", iconPadding: "sm", titleSize: "lg", titleLineHeight: "3.2vh", descriptionSize: "md", innerGap: "md", bottomPad: "md" };
+    case "md":
+    default:
+      return { iconFontSize: themeMdFontSize, iconPadding: "xs", titleSize: "sm", titleLineHeight: themeMdFontSize, descriptionSize: "xs", innerGap: "sm", bottomPad: "sm" };
+  }
+}
 function Title(props) {
   const game = useSettings((state) => state.game);
   const theme = useMantineTheme();
+  const preset = getSizePreset(props.size ?? "md", theme.fontSizes.md);
   return /* @__PURE__ */ jsx(
     Flex,
     {
@@ -2476,71 +2496,50 @@ function Title(props) {
       gap: "xs",
       w: props.w || "100%",
       p: props.p || "unset",
-      pb: !props.p ? "sm" : props.p,
+      pb: !props.p ? preset.bottomPad : props.p,
       style: {
         userSelect: "none",
         borderBottom: props.removeBorder ? "none" : `0.3vh solid ${props.borderColor || colorWithAlpha(theme.colors[theme.primaryColor][9], 0.5)}`
       },
-      children: /* @__PURE__ */ jsxs(
-        Flex,
-        {
-          align: "center",
-          justify: "center",
-          children: [
-            /* @__PURE__ */ jsxs(
-              Flex,
+      children: /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "center", children: [
+        /* @__PURE__ */ jsxs(Flex, { align: "center", gap: preset.innerGap, pr: "xs", children: [
+          /* @__PURE__ */ jsx(
+            BorderedIcon,
+            {
+              icon: props.icon,
+              fontSize: preset.iconFontSize,
+              color: props.iconColor,
+              p: preset.iconPadding
+            }
+          ),
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "0.25vh", children: [
+            /* @__PURE__ */ jsx(
+              Text,
               {
-                align: "center",
-                gap: "sm",
-                pr: "xs",
-                children: [
-                  /* @__PURE__ */ jsx(
-                    BorderedIcon,
-                    {
-                      icon: props.icon,
-                      fontSize: theme.fontSizes.md,
-                      color: props.iconColor
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    Flex,
-                    {
-                      direction: "column",
-                      gap: "0.25vh",
-                      children: [
-                        /* @__PURE__ */ jsx(Text, { p: "0", size: "sm", style: {
-                          lineHeight: theme.fontSizes.md,
-                          fontFamily: game == "fivem" ? "Akrobat Bold" : "Red Dead",
-                          letterSpacing: "0.05em",
-                          textTransform: "uppercase"
-                        }, children: props.title }),
-                        /* @__PURE__ */ jsx(
-                          Text,
-                          {
-                            size: "xs",
-                            c: "grey",
-                            style: { whiteSpace: "normal", wordWrap: "break-word" },
-                            children: props.description
-                          }
-                        )
-                      ]
-                    }
-                  )
-                ]
+                p: "0",
+                size: preset.titleSize,
+                style: {
+                  lineHeight: preset.titleLineHeight,
+                  fontFamily: game == "fivem" ? "Akrobat Bold" : "Red Dead",
+                  letterSpacing: "0.05em",
+                  textTransform: "uppercase"
+                },
+                children: props.title
               }
             ),
             /* @__PURE__ */ jsx(
-              Flex,
+              Text,
               {
-                ml: "auto",
-                align: "center",
-                gap: "xs",
-                children: props.rightSection
+                size: preset.descriptionSize,
+                c: "grey",
+                style: { whiteSpace: "normal", wordWrap: "break-word" },
+                children: props.description
               }
             )
-          ]
-        }
-      )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Flex, { ml: "auto", align: "center", gap: "xs", children: props.rightSection })
+      ] })
     }
   );
 }
@@ -3198,6 +3197,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 +4039,8 @@ function ConfigPanelInner({
   resetConfirmText,
   defaultConfig,
   width,
-  height
+  height,
+  suppressMissingItemsBanner
 }) {
   const { updateConfig, resetConfig, getHistory } = getScriptConfigInstance();
   const form = useForm();
@@ -3920,8 +4160,8 @@ function ConfigPanelInner({
                   children: /* @__PURE__ */ jsx(ArrowLeft, { size: "1.4vh", color })
                 }
               ),
-              /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { minWidth: 0, lineHeight: 1 }, children: [
-                /* @__PURE__ */ jsx(Text, { size: "lg", ff: "Akrobat Bold", tt: "uppercase", lts: "0.04em", truncate: true, children: title }),
+              /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { minWidth: 0, flex: 1, lineHeight: 1, overflow: "hidden" }, children: [
+                /* @__PURE__ */ jsx(Text, { size: "md", ff: "Akrobat Bold", tt: "uppercase", lts: "0.04em", truncate: true, children: title }),
                 subtitle && /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.08em", c: color, truncate: true, children: subtitle })
               ] })
             ] }),
@@ -4023,18 +4263,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 +4319,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 +4357,7 @@ function ConfigPanel(props) {
     }
   ) });
 }
+var MISSING_COLOR = "#f59e0b";
 function LazyImage({ src, style }) {
   const [visible, setVisible] = useState(false);
   const ref = useRef(null);
@@ -4130,14 +4375,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 +4402,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 +4417,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 })
+          ] })
+        ] });
+      }
     }
   );
 }
@@ -4833,6 +5102,17 @@ function AdminPageTitle(props) {
     /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", tt: "uppercase", lts: "0.1em", size: "sm", c: "rgba(255,255,255,0.6)", children: locale(props.title) })
   ] });
 }
+var placementStyle = (placement) => {
+  switch (placement) {
+    case "top-center":
+      return { top: "1vh", left: "50%", transform: "translateX(-50%)" };
+    case "top-right":
+      return { top: "1vh", right: "1vh" };
+    case "top-left":
+    default:
+      return { top: "1vh", left: "1vh" };
+  }
+};
 var loadPersistedState = (storageKey) => {
   try {
     const raw = localStorage.getItem(storageKey);
@@ -4851,7 +5131,8 @@ function TestBed({
   items,
   storageKey = "testbed:open-state",
   disablePersistence = false,
-  title = "TestBed"
+  title = "TestBed",
+  placement = "top-left"
 }) {
   const [open, setOpen] = useState(false);
   const itemsRef = useRef(items);
@@ -4881,8 +5162,7 @@ function TestBed({
     {
       style: {
         position: "fixed",
-        top: "1vh",
-        left: "1vh",
+        ...placementStyle(placement),
         zIndex: 2147483647,
         pointerEvents: "auto",
         fontSize: "1.4vh"
@@ -4988,6 +5268,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