dirk-cfx-react 1.1.58 → 1.1.64

package/dist/components/index.js

@@ -1,12 +1,12 @@
-import { Flex, Text, Image, TextInput, Select, Box, useMantineTheme, alpha, Progress, RingProgress, Portal, Button, Loader, Group, JsonInput } from '@mantine/core';
+import { Flex, Text, Image, TextInput, Select, Box, useMantineTheme, Tooltip, alpha, Progress, RingProgress, Portal, Button, 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 { create, useStore, createStore } from 'zustand';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { motion, AnimatePresence, useMotionValue } from 'framer-motion';
+import { Info, X, AlertTriangle, Trash2, Check, FlaskConical, ChevronUp, ChevronDown, ArrowLeft, Undo2, Redo2, Save, History, XCircle, Code2, RotateCcw, Search, Filter, User } from 'lucide-react';
 import clickSoundUrl from '../click_sound-PNCRRTM4.mp3';
 import hoverSoundUrl from '../hover_sound-NBUA222C.mp3';
-import { X, AlertTriangle, Trash2, Check, Undo2, Redo2, Save, History, XCircle, Code2, RotateCcw, Search, Filter, User, ChevronDown } from 'lucide-react';
 import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query';
 
 // src/components/BlipSelect.tsx
@@ -1267,13 +1267,24 @@ async function fetchNui(eventName, data, mockData) {
   }
   const overrideResourceName = useSettings.getState().overideResourceName;
   const resourceName = window.GetParentResourceName ? window.GetParentResourceName() : overrideResourceName ? overrideResourceName : "dirk-cfx-react";
-  const resp = await fetch(`https://${resourceName}/${eventName}`, options);
-  return await resp.json();
+  try {
+    const resp = await fetch(`https://${resourceName}/${eventName}`, options);
+    return await resp.json();
+  } catch {
+    return mockData ?? {};
+  }
 }
 async function registerInitialFetch(eventName, data, mockData) {
   const fetcher = () => fetchNui(eventName, data, mockData);
   return fetcher();
 }
+var reportedMissing = /* @__PURE__ */ new Set();
+function reportMissingLocale(key) {
+  if (!key || reportedMissing.has(key)) return;
+  reportedMissing.add(key);
+  fetchNui("REPORT_MISSING_LOCALE", { key }).catch(() => {
+  });
+}
 var localeStore = create((set, get) => {
   return {
     locales: {
@@ -1281,6 +1292,7 @@ var localeStore = create((set, get) => {
     },
     locale: (key, ...args) => {
       const exists = get().locales[key];
+      if (!exists) reportMissingLocale(key);
       let translation = exists || key;
       if (args.length) {
         translation = translation.replace(/%s/g, () => String(args.shift() || ""));
@@ -1292,7 +1304,16 @@ var localeStore = create((set, get) => {
 var locale = localeStore.getState().locale;
 registerInitialFetch("GET_LOCALES", void 0).then((data) => {
   localeStore.setState({ locales: data });
+}).catch(() => {
 });
+if (typeof window !== "undefined") {
+  window.addEventListener("message", (event) => {
+    const msg = event.data;
+    if (!msg || msg.action !== "UPDATE_DIRK_LIB_LOCALES") return;
+    if (!msg.data || typeof msg.data !== "object") return;
+    localeStore.setState({ locales: msg.data });
+  });
+}
 var useItems = create(() => ({}));
 var useItemsList = (excludeItemNames = []) => {
   const excludeSet = new Set(excludeItemNames);
@@ -1305,6 +1326,7 @@ registerInitialFetch("FETCH_ALL_ITEMS", null, {
 }).then((fetchedItems) => {
   if (!fetchedItems) return;
   useItems.setState(fetchedItems);
+}).catch(() => {
 });
 
 // src/utils/inputMapper.ts
@@ -1931,8 +1953,8 @@ function InputContainer(props) {
               (props.title || props.description) && /* @__PURE__ */ jsxs(
                 Flex,
                 {
-                  direction: "column",
-                  gap: "xxs",
+                  align: "center",
+                  flex: 1,
                   p: props.p == "0" ? "sm" : 0,
                   children: [
                     props.title && /* @__PURE__ */ jsx(
@@ -1949,12 +1971,26 @@ function InputContainer(props) {
                       }
                     ),
                     props.description && /* @__PURE__ */ jsx(
-                      Text,
+                      Tooltip,
                       {
-                        size: "xs",
-                        c: "rgba(255, 255, 255, 0.8)",
-                        fw: 400,
-                        children: props.description
+                        label: props.description,
+                        position: "top-end",
+                        withArrow: true,
+                        multiline: true,
+                        maw: "22vh",
+                        styles: {
+                          tooltip: {
+                            background: alpha(theme.colors.dark[7], 0.95),
+                            border: `0.1vh solid rgba(255,255,255,0.1)`,
+                            color: "rgba(255,255,255,0.75)",
+                            fontFamily: "Akrobat Bold",
+                            fontSize: "1.3vh",
+                            lineHeight: 1.3,
+                            padding: "0.6vh 0.8vh",
+                            letterSpacing: "0.03em"
+                          }
+                        },
+                        children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", style: { marginLeft: "auto", cursor: "help" }, children: /* @__PURE__ */ jsx(Info, { size: "1.6vh", color: alpha(theme.colors[theme.primaryColor][5], 0.45) }) })
                       }
                     )
                   ]
@@ -1971,13 +2007,7 @@ function InputContainer(props) {
                   children: props.error
                 }
               ),
-              /* @__PURE__ */ jsx(
-                Flex,
-                {
-                  ml: "auto",
-                  children: props.rightSection
-                }
-              )
+              props.rightSection && /* @__PURE__ */ jsx(Flex, { children: props.rightSection })
             ]
           }
         ),
@@ -2668,7 +2698,7 @@ function Modal({
                 children: description
               }
             ) }),
-            children
+            /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }, children })
           ]
         }
       )
@@ -3291,10 +3321,10 @@ function useFormActions() {
   }
   return store.getState();
 }
-function getScriptSettingsInstance() {
-  throw new Error("[dirk-cfx-react] createScriptSettings must be called before using SettingsPanel");
+function getScriptConfigInstance() {
+  throw new Error("[dirk-cfx-react] createScriptConfig must be called before using ConfigPanel");
 }
-var settingsPanelQueryClient = new QueryClient({
+var configPanelQueryClient = new QueryClient({
   defaultOptions: { queries: { staleTime: 3e4, gcTime: 5 * 6e4 } }
 });
 function NavItemButton({
@@ -3338,7 +3368,7 @@ function NavItemButton({
     }
   );
 }
-function SettingsJsonModal({
+function ConfigJsonModal({
   onClose,
   schema
 }) {
@@ -3375,7 +3405,7 @@ function SettingsJsonModal({
       setError(e.message);
     }
   };
-  return /* @__PURE__ */ jsxs(Modal, { title: "Settings JSON", icon: Code2, iconColor: color, onClose, width: "60vh", maxHeight: "80vh", zIndex: 200, children: [
+  return /* @__PURE__ */ jsxs(Modal, { title: "Config JSON", icon: Code2, iconColor: color, onClose, width: "60vh", maxHeight: "80vh", zIndex: 200, children: [
     /* @__PURE__ */ jsxs(Box, { flex: 1, p: "0.8vh", style: { overflowY: "auto" }, children: [
       /* @__PURE__ */ jsx(
         JsonInput,
@@ -3517,10 +3547,10 @@ function HistoryTableHeader() {
     /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", c: "rgba(255,255,255,0.45)", children: "Version" })
   ] });
 }
-function SettingsHistoryModal({
+function ConfigHistoryModal({
   onClose
 }) {
-  const { getHistory } = getScriptSettingsInstance();
+  const { getHistory } = getScriptConfigInstance();
   const theme = useMantineTheme();
   const color = theme.colors[theme.primaryColor][5];
   const [queryInput, setQueryInput] = useState("");
@@ -3532,7 +3562,7 @@ function SettingsHistoryModal({
   const [expandedKey, setExpandedKey] = useState(null);
   const filters = useMemo(() => ({ query, path, admin }), [query, path, admin]);
   const historyQuery = useInfiniteQuery({
-    queryKey: ["scriptSettingsHistory", filters],
+    queryKey: ["scriptConfigHistory", filters],
     initialPageParam: 0,
     queryFn: async ({ pageParam }) => {
       const response = await getHistory({
@@ -3543,7 +3573,7 @@ function SettingsHistoryModal({
         admin: filters.admin || void 0
       });
       if (!response?.success || !response.data) {
-        throw new Error(response?._error || "Failed to load settings history");
+        throw new Error(response?._error || "Failed to load config history");
       }
       return response.data;
     },
@@ -3557,7 +3587,7 @@ function SettingsHistoryModal({
       historyQuery.fetchNextPage();
     }
   };
-  return /* @__PURE__ */ jsxs(Modal, { title: "Settings History", icon: History, iconColor: color, onClose, width: "88vh", maxHeight: "82vh", zIndex: 260, children: [
+  return /* @__PURE__ */ jsxs(Modal, { title: "Config History", icon: History, iconColor: color, onClose, width: "88vh", maxHeight: "82vh", zIndex: 260, children: [
     /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { flex: 1, minHeight: 0 }, children: [
       /* @__PURE__ */ jsxs(Flex, { gap: "xs", p: "sm", style: { borderBottom: `0.1vh solid ${alpha(theme.colors.dark[7], 0.8)}` }, children: [
         /* @__PURE__ */ jsx(TextInput, { leftSection: /* @__PURE__ */ jsx(Search, { size: "1.4vh" }), placeholder: "Search path/admin/value", value: queryInput, onChange: (e) => setQueryInput(e.currentTarget.value), size: "xs", style: { flex: 1 } }),
@@ -3606,7 +3636,7 @@ function SettingsHistoryModal({
     ) })
   ] });
 }
-function SettingsPanelInner({
+function ConfigPanelInner({
   navItems,
   title,
   subtitle,
@@ -3615,28 +3645,37 @@ function SettingsPanelInner({
   onClose,
   schema,
   resetConfirmText,
-  defaultSettings,
+  defaultConfig,
   width,
   height
 }) {
-  const { updateSettings, getHistory } = getScriptSettingsInstance();
+  const { updateConfig, resetConfig, getHistory } = getScriptConfigInstance();
   const form = useForm();
   const theme = useMantineTheme();
   const color = theme.colors[theme.primaryColor][5];
   const version = useSettings((s) => s.resourceVersion);
   const [activeTab, setActiveTab] = useState(navItems[0]?.id ?? "");
+  const firstMountRef = useRef(true);
   const [jsonOpen, setJsonOpen] = useState(false);
   const [historyOpen, setHistoryOpen] = useState(false);
   const [resetOpen, setResetOpen] = useState(false);
-  const [closeConfirmOpen, setCloseConfirmOpen] = useState(false);
+  const [pendingAction, setPendingAction] = useState(null);
   const changedCount = form.changedCount ?? 0;
   const isDirty = changedCount > 0;
+  const goBack = () => fetchNui("CONFIG_PANEL_BACK");
+  const handleBack = () => {
+    if (isDirty) {
+      setPendingAction("back");
+      return;
+    }
+    goBack();
+  };
   useEffect(() => {
     function handleKeyDown(e) {
       if (e.key !== "Escape") return;
       if (isDirty) {
         e.preventDefault();
-        setCloseConfirmOpen(true);
+        setPendingAction("close");
         return;
       }
       onClose();
@@ -3645,34 +3684,40 @@ function SettingsPanelInner({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isDirty, onClose]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(AnimatePresence, { children: jsonOpen && /* @__PURE__ */ jsx(SettingsJsonModal, { onClose: () => setJsonOpen(false), schema }) }),
-    /* @__PURE__ */ jsx(AnimatePresence, { children: historyOpen && /* @__PURE__ */ jsx(SettingsHistoryModal, { onClose: () => setHistoryOpen(false) }) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: jsonOpen && /* @__PURE__ */ jsx(ConfigJsonModal, { onClose: () => setJsonOpen(false), schema }) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: historyOpen && /* @__PURE__ */ jsx(ConfigHistoryModal, { onClose: () => setHistoryOpen(false) }) }),
     /* @__PURE__ */ jsx(AnimatePresence, { children: resetOpen && /* @__PURE__ */ jsx(
       ConfirmModal,
       {
         title: "Reset to Defaults",
-        description: "This will permanently reset ALL settings back to their defaults. Every setting you have configured will be overwritten. This cannot be undone.",
-        confirmLabel: "Reset Settings",
+        description: "This will permanently reset ALL config back to the defaults. Every value you have configured will be overwritten. This cannot be undone.",
+        confirmLabel: "Reset Config",
         confirmText: resetConfirmText,
-        onConfirm: () => {
-          updateSettings(defaultSettings).then(() => form.reinitialize(cloneSettings(defaultSettings)));
+        onConfirm: async () => {
           setResetOpen(false);
+          const result = await resetConfig();
+          if (result?.success) {
+            const { store } = getScriptConfigInstance();
+            form.reinitialize(cloneConfig(store.getState()));
+          }
         },
         onClose: () => setResetOpen(false),
         zIndex: 300
       }
     ) }),
-    /* @__PURE__ */ jsx(AnimatePresence, { children: closeConfirmOpen && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: pendingAction !== null && /* @__PURE__ */ jsx(
       ConfirmModal,
       {
         title: "Discard Unsaved Changes?",
-        description: "You have unsaved changes. Closing now will discard them.",
-        confirmLabel: "Close Without Saving",
+        description: pendingAction === "back" ? "You have unsaved changes. Going back now will discard them." : "You have unsaved changes. Closing now will discard them.",
+        confirmLabel: pendingAction === "back" ? "Go Back Without Saving" : "Close Without Saving",
         onConfirm: () => {
-          setCloseConfirmOpen(false);
-          onClose();
+          const action = pendingAction;
+          setPendingAction(null);
+          if (action === "back") goBack();
+          else onClose();
         },
-        onClose: () => setCloseConfirmOpen(false),
+        onClose: () => setPendingAction(null),
         zIndex: 300
       }
     ) }),
@@ -3699,9 +3744,33 @@ function SettingsPanelInner({
         exit: { scale: 0.3, opacity: 0, transform: "translate(-50%, -50%)" },
         children: [
           /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { width: "18vh", flexShrink: 0, borderRight: `0.1vh solid ${alpha(theme.colors.dark[6], 0.8)}`, background: alpha(theme.colors.dark[8], 0.6), overflow: "hidden" }, children: [
-            /* @__PURE__ */ jsxs(Flex, { align: "baseline", gap: "0.3vh", px: "sm", py: "sm", style: { borderBottom: `0.1vh solid ${alpha(theme.colors.dark[6], 0.5)}`, flexShrink: 0 }, children: [
-              /* @__PURE__ */ jsx(Text, { size: "lg", ff: "Akrobat Bold", tt: "uppercase", children: title }),
-              subtitle && /* @__PURE__ */ jsx(Text, { tt: "uppercase", fw: 600, c: color, children: subtitle })
+            /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "0.6vh", px: "sm", py: "sm", style: { borderBottom: `0.1vh solid ${alpha(theme.colors.dark[6], 0.5)}`, flexShrink: 0 }, children: [
+              /* @__PURE__ */ jsx(
+                motion.button,
+                {
+                  title: "Back to script list",
+                  onClick: handleBack,
+                  whileHover: { background: alpha(color, 0.16), borderColor: alpha(color, 0.45) },
+                  whileTap: { scale: 0.95 },
+                  style: {
+                    aspectRatio: "1 / 1",
+                    height: "2.4vh",
+                    background: alpha(color, 0.08),
+                    border: `0.1vh solid ${alpha(color, 0.3)}`,
+                    borderRadius: theme.radius.xs,
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    flexShrink: 0
+                  },
+                  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 }),
+                subtitle && /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.08em", c: color, truncate: true, children: subtitle })
+              ] })
             ] }),
             /* @__PURE__ */ jsxs(Flex, { gap: "xxs", px: "xs", py: "xs", style: { borderBottom: `0.1vh solid ${alpha(theme.colors.dark[6], 0.4)}`, flexShrink: 0 }, children: [
               /* @__PURE__ */ jsx(
@@ -3804,7 +3873,7 @@ function SettingsPanelInner({
           /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
             motion.div,
             {
-              initial: { opacity: 0, y: 4 },
+              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 },
@@ -3818,15 +3887,15 @@ function SettingsPanelInner({
     )
   ] });
 }
-function cloneSettings(value) {
+function cloneConfig(value) {
   return JSON.parse(JSON.stringify(value));
 }
 function ServerOnlyFetcher() {
-  const { fetchSettings } = getScriptSettingsInstance();
+  const { fetchConfig } = getScriptConfigInstance();
   const { reinitialize } = useFormActions();
   useEffect(() => {
     let cancelled = false;
-    fetchSettings().then((full) => {
+    fetchConfig().then((full) => {
       if (!cancelled && full) reinitialize(full);
     }).catch(() => {
     });
@@ -3837,28 +3906,28 @@ function ServerOnlyFetcher() {
   return null;
 }
 var defaultOnClose = () => fetchNui("CLOSE_ADMIN_SECTION");
-function SettingsPanel(props) {
+function ConfigPanel(props) {
   const { open, onClose = defaultOnClose } = props;
-  const { store, updateSettings, fetchSettings } = getScriptSettingsInstance();
+  const { store, updateConfig } = getScriptConfigInstance();
   const [isSaving, setIsSaving] = useState(false);
   if (!open) return null;
-  return /* @__PURE__ */ jsx(QueryClientProvider, { client: settingsPanelQueryClient, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client: configPanelQueryClient, children: /* @__PURE__ */ jsxs(
     FormProvider,
     {
-      initialValues: cloneSettings(store.getState()),
+      initialValues: cloneConfig(store.getState()),
       onSubmit: async (form) => {
         if (isSaving) return;
         setIsSaving(true);
         try {
-          const result = await updateSettings(form.values);
+          const result = await updateConfig(form.values);
           if (result?.success) {
-            form.reinitialize(cloneSettings(form.values));
-            settingsPanelQueryClient.invalidateQueries({ queryKey: ["scriptSettingsHistory"] });
+            form.reinitialize(cloneConfig(form.values));
+            configPanelQueryClient.invalidateQueries({ queryKey: ["scriptConfigHistory"] });
             return;
           }
-          form.reinitialize(cloneSettings(store.getState()));
+          form.reinitialize(cloneConfig(store.getState()));
           if (result?._error) {
-            console.warn(`[SettingsPanel] settings save failed: ${result._error}`);
+            console.warn(`[ConfigPanel] config save failed: ${result._error}`);
           }
         } finally {
           setIsSaving(false);
@@ -3867,7 +3936,7 @@ function SettingsPanel(props) {
       children: [
         /* @__PURE__ */ jsx(ServerOnlyFetcher, {}),
         /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
-          SettingsPanelInner,
+          ConfigPanelInner,
           {
             ...props,
             onClose,
@@ -4075,7 +4144,161 @@ 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 loadPersistedState = (storageKey) => {
+  try {
+    const raw = localStorage.getItem(storageKey);
+    return raw ? JSON.parse(raw) : {};
+  } catch {
+    return {};
+  }
+};
+var savePersistedState = (storageKey, state) => {
+  try {
+    localStorage.setItem(storageKey, JSON.stringify(state));
+  } catch {
+  }
+};
+function TestBed({
+  items,
+  storageKey = "testbed:open-state",
+  disablePersistence = false,
+  title = "TestBed"
+}) {
+  const [open, setOpen] = useState(false);
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+  useEffect(() => {
+    if (!isEnvBrowser() || disablePersistence) return;
+    const persisted = loadPersistedState(storageKey);
+    itemsRef.current.forEach((item) => {
+      const persistedValue = persisted[item.key];
+      if (typeof persistedValue === "boolean" && persistedValue !== item.active) {
+        item.onToggle(persistedValue);
+      }
+    });
+  }, []);
+  if (!isEnvBrowser()) return null;
+  const toggle = (item) => {
+    const next = !item.active;
+    item.onToggle(next);
+    if (!disablePersistence) {
+      const persisted = loadPersistedState(storageKey);
+      persisted[item.key] = next;
+      savePersistedState(storageKey, persisted);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: "1vh",
+        left: "1vh",
+        zIndex: 2147483647,
+        pointerEvents: "auto",
+        fontSize: "1.4vh"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            align: "center",
+            gap: "xs",
+            px: "sm",
+            py: "xs",
+            onClick: () => setOpen((v) => !v),
+            style: {
+              cursor: "pointer",
+              background: "rgba(0,0,0,0.55)",
+              backdropFilter: "blur(0.6vh)",
+              WebkitBackdropFilter: "blur(0.6vh)",
+              border: "0.1vh solid rgba(255,255,255,0.1)",
+              borderRadius: "var(--mantine-radius-sm)",
+              userSelect: "none",
+              minWidth: "16vh"
+            },
+            children: [
+              /* @__PURE__ */ jsx(FlaskConical, { size: 14, color: "rgba(255,255,255,0.7)" }),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  size: "xs",
+                  ff: "Akrobat Bold",
+                  tt: "uppercase",
+                  lts: "0.08em",
+                  c: "rgba(255,255,255,0.85)",
+                  style: { flex: 1 },
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsx(ActionIcon, { size: "xs", variant: "transparent", c: "rgba(255,255,255,0.6)", children: open ? /* @__PURE__ */ jsx(ChevronUp, { size: 14 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 14 }) })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx(
+          Stack,
+          {
+            gap: 4,
+            mt: "xxs",
+            p: "xs",
+            style: {
+              background: "rgba(0,0,0,0.55)",
+              backdropFilter: "blur(0.6vh)",
+              WebkitBackdropFilter: "blur(0.6vh)",
+              border: "0.1vh solid rgba(255,255,255,0.1)",
+              borderRadius: "var(--mantine-radius-sm)",
+              minWidth: "16vh",
+              maxHeight: "80vh",
+              overflowY: "auto"
+            },
+            children: items.map((item) => /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                align: "center",
+                justify: "space-between",
+                gap: "xs",
+                px: "xs",
+                py: "xxs",
+                onClick: () => toggle(item),
+                style: {
+                  cursor: "pointer",
+                  borderRadius: "var(--mantine-radius-xs)",
+                  background: item.active ? "rgba(245,158,11,0.15)" : "rgba(255,255,255,0.03)",
+                  border: `0.1vh solid ${item.active ? "rgba(245,158,11,0.35)" : "rgba(255,255,255,0.05)"}`,
+                  userSelect: "none"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      size: "xs",
+                      ff: "Akrobat Bold",
+                      c: item.active ? "#f59e0b" : "rgba(255,255,255,0.75)",
+                      children: item.label
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      size: "xxs",
+                      ff: "Akrobat Bold",
+                      tt: "uppercase",
+                      lts: "0.06em",
+                      c: item.active ? "#f59e0b" : "rgba(255,255,255,0.35)",
+                      children: item.active ? "On" : "Off"
+                    }
+                  )
+                ]
+              },
+              item.key
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
 
-export { AdminPageTitle, AsyncSaveButton, BlipColorSelect, BlipIconSelect, BorderedIcon, ConfirmModal, Counter, FiveMKeyBindInput, FloatingParticles, InfoBox, InputContainer, LevelBanner, LevelPanel, Modal, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PromptModal, SegmentedControl, SegmentedProgress, SelectItem, SettingsPanel, Title, useModal, useModalActions, useNavigation, useNavigationStore };
+export { AdminPageTitle, AsyncSaveButton, BlipColorSelect, BlipIconSelect, BorderedIcon, ConfigPanel, ConfirmModal, Counter, FiveMKeyBindInput, FloatingParticles, InfoBox, InputContainer, LevelBanner, LevelPanel, Modal, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PromptModal, SegmentedControl, SegmentedProgress, SelectItem, TestBed, Title, useModal, useModalActions, useNavigation, useNavigationStore };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map