dirk-cfx-react 1.1.72 → 1.1.75

package/dist/index.d.cts

@@ -1,7 +1,8 @@
-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 { 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, TestBedPlacement, TestBedProps, ThemeOverrideSection, ThemeOverrideSectionProps, ThemeOverrideValue, Title, TitleProps, TitleSize, 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';
+import { z } from 'zod';
 import 'react/jsx-runtime';
 import '@mantine/core';
 import 'react';
@@ -9,3 +10,35 @@ import 'framer-motion';
 import '@fortawesome/fontawesome-svg-core';
 import 'zustand';
 import 'lucide-react';
+
+/**
+ * 2-component vector (x, y). FiveM `vec2(x, y)`.
+ */
+declare const Vector2Schema: z.ZodObject<{
+    x: z.ZodNumber;
+    y: z.ZodNumber;
+}, z.core.$strip>;
+type Vector2 = z.infer<typeof Vector2Schema>;
+/**
+ * 3-component vector (x, y, z). FiveM `vec3(x, y, z)`.
+ * Used for positions, rotations, camera offsets.
+ */
+declare const Vector3Schema: z.ZodObject<{
+    x: z.ZodNumber;
+    y: z.ZodNumber;
+    z: z.ZodNumber;
+}, z.core.$strip>;
+type Vector3 = z.infer<typeof Vector3Schema>;
+/**
+ * 4-component vector (x, y, z, w). FiveM `vec4(x, y, z, w)`.
+ * `w` is typically heading (degrees) in worldspace positions.
+ */
+declare const Vector4Schema: z.ZodObject<{
+    x: z.ZodNumber;
+    y: z.ZodNumber;
+    z: z.ZodNumber;
+    w: z.ZodNumber;
+}, z.core.$strip>;
+type Vector4 = z.infer<typeof Vector4Schema>;
+
+export { type Vector2, Vector2Schema, type Vector3, Vector3Schema, type Vector4, Vector4Schema };

package/dist/index.d.ts

@@ -1,7 +1,8 @@
-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 { 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, TestBedPlacement, TestBedProps, ThemeOverrideSection, ThemeOverrideSectionProps, ThemeOverrideValue, Title, TitleProps, TitleSize, 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';
+import { z } from 'zod';
 import 'react/jsx-runtime';
 import '@mantine/core';
 import 'react';
@@ -9,3 +10,35 @@ import 'framer-motion';
 import '@fortawesome/fontawesome-svg-core';
 import 'zustand';
 import 'lucide-react';
+
+/**
+ * 2-component vector (x, y). FiveM `vec2(x, y)`.
+ */
+declare const Vector2Schema: z.ZodObject<{
+    x: z.ZodNumber;
+    y: z.ZodNumber;
+}, z.core.$strip>;
+type Vector2 = z.infer<typeof Vector2Schema>;
+/**
+ * 3-component vector (x, y, z). FiveM `vec3(x, y, z)`.
+ * Used for positions, rotations, camera offsets.
+ */
+declare const Vector3Schema: z.ZodObject<{
+    x: z.ZodNumber;
+    y: z.ZodNumber;
+    z: z.ZodNumber;
+}, z.core.$strip>;
+type Vector3 = z.infer<typeof Vector3Schema>;
+/**
+ * 4-component vector (x, y, z, w). FiveM `vec4(x, y, z, w)`.
+ * `w` is typically heading (degrees) in worldspace positions.
+ */
+declare const Vector4Schema: z.ZodObject<{
+    x: z.ZodNumber;
+    y: z.ZodNumber;
+    z: z.ZodNumber;
+    w: z.ZodNumber;
+}, z.core.$strip>;
+type Vector4 = z.infer<typeof Vector4Schema>;
+
+export { type Vector2, Vector2Schema, type Vector3, Vector3Schema, type Vector4, Vector4Schema };

package/dist/index.js

@@ -1,15 +1,16 @@
-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 { 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, Switch, ColorInput, Popover, MantineProvider, BackgroundImage, Group, JsonInput } from '@mantine/core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 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, 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 { Info, X, AlertTriangle, Trash2, RefreshCw, ChevronDown, Check, Copy, MapPin, Crosshair, EyeOff, Eye, RotateCcw, FlaskConical, ChevronUp, Palette, 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';
 import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query';
+import { generateColors } from '@mantine/colors-generator';
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
 import './styles/fonts.css';
@@ -20,6 +21,7 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 import { far } from '@fortawesome/free-regular-svg-icons';
 import { fas } from '@fortawesome/free-solid-svg-icons';
+import { z } from 'zod';
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -1331,7 +1333,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();
@@ -3074,9 +3080,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 theme2 = useMantineTheme();
+  const preset = getSizePreset(props.size ?? "md", theme2.fontSizes.md);
   return /* @__PURE__ */ jsx(
     Flex,
     {
@@ -3085,71 +3107,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(theme2.colors[theme2.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: theme2.fontSizes.md,
-                      color: props.iconColor
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    Flex,
-                    {
-                      direction: "column",
-                      gap: "0.25vh",
-                      children: [
-                        /* @__PURE__ */ jsx(Text, { p: "0", size: "sm", style: {
-                          lineHeight: theme2.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 })
+      ] })
     }
   );
 }
@@ -4826,7 +4827,22 @@ function ConfigPanelInner({
           if (result?.success) {
             const { store } = getScriptConfigInstance();
             form.reinitialize(cloneConfig(store.getState()));
+            notifications.show({
+              color: "green",
+              title: locale("ConfigResetSuccessTitle"),
+              message: locale("ConfigResetSuccessBody"),
+              autoClose: 3e3
+            });
+            return;
           }
+          const err = result?._error || "Unknown";
+          console.warn(`[ConfigPanel] config reset failed: ${err}`);
+          notifications.show({
+            color: "red",
+            title: locale("ConfigResetFailedTitle"),
+            message: locale("ConfigResetFailedBody", err),
+            autoClose: 6e3
+          });
         },
         onClose: () => setResetOpen(false),
         zIndex: 300
@@ -4894,8 +4910,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 })
               ] })
             ] }),
@@ -5836,6 +5852,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);
@@ -5854,7 +5881,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);
@@ -5884,8 +5912,7 @@ function TestBed({
     {
       style: {
         position: "fixed",
-        top: "1vh",
-        left: "1vh",
+        ...placementStyle(placement),
         zIndex: 2147483647,
         pointerEvents: "auto",
         fontSize: "1.4vh"
@@ -5990,6 +6017,281 @@ function TestBed({
     }
   );
 }
+var MANTINE_COLOR_OPTIONS = [
+  "dirk",
+  "red",
+  "pink",
+  "grape",
+  "violet",
+  "indigo",
+  "blue",
+  "cyan",
+  "teal",
+  "green",
+  "lime",
+  "yellow",
+  "orange"
+].map((value) => ({ value, label: value }));
+var DEFAULT_PALETTE = [
+  "#f0f4ff",
+  "#d9e3ff",
+  "#bfcfff",
+  "#a6bbff",
+  "#8ca7ff",
+  "#7393ff",
+  "#5a7fff",
+  "#406bff",
+  "#2547ff",
+  "#0b33ff"
+];
+var DEFAULT_VALUE = {
+  useOverride: false,
+  primaryColor: "dirk",
+  primaryShade: 5,
+  customTheme: DEFAULT_PALETTE
+};
+function GroupLabel({ label: label2 }) {
+  return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", mt: "xxs", children: [
+    /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.07em", c: "rgba(255,255,255,0.2)", children: label2 }),
+    /* @__PURE__ */ jsx("div", { style: { flex: 1, height: "0.05vh", background: "rgba(255,255,255,0.06)" } })
+  ] });
+}
+function ThemeOverrideSection({
+  schemaKey = "theme",
+  title
+}) {
+  const mantineTheme = useMantineTheme();
+  const color = mantineTheme.colors[mantineTheme.primaryColor][5];
+  const raw = useFormField(schemaKey);
+  const value = {
+    useOverride: raw?.useOverride ?? DEFAULT_VALUE.useOverride,
+    primaryColor: raw?.primaryColor ?? DEFAULT_VALUE.primaryColor,
+    primaryShade: raw?.primaryShade ?? DEFAULT_VALUE.primaryShade,
+    customTheme: Array.isArray(raw?.customTheme) && raw.customTheme.length === 10 ? raw.customTheme : DEFAULT_VALUE.customTheme
+  };
+  const { setValue } = useFormActions();
+  const set = (key, val) => setValue(schemaKey, { ...value, [key]: val });
+  const useCustom = value.primaryColor === "custom";
+  const editable = value.useOverride;
+  const setSwatch = (index, hex) => {
+    const next = [...value.customTheme];
+    next[index] = hex;
+    set("customTheme", next);
+  };
+  const generateFromBase = (hex) => {
+    try {
+      const generated = generateColors(hex);
+      set("customTheme", generated);
+    } catch {
+    }
+  };
+  const resetPalette = () => set("customTheme", DEFAULT_PALETTE);
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: "column",
+      gap: "xs",
+      p: "sm",
+      style: { flex: 1, minHeight: 0, overflowY: "auto" },
+      children: [
+        /* @__PURE__ */ jsx(
+          AdminPageTitle,
+          {
+            icon: Palette,
+            title: title || locale("Theme") || "Theme",
+            color
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            align: "center",
+            justify: "space-between",
+            p: "xs",
+            style: {
+              background: `rgba(255,255,255,${editable ? 0.04 : 0.02})`,
+              border: `0.1vh solid ${editable ? color : "rgba(255,255,255,0.08)"}`,
+              borderRadius: mantineTheme.radius.xs,
+              transition: "background 0.15s, border-color 0.15s"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "xxs", style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xs", c: "rgba(255,255,255,0.9)", children: locale("OverrideGlobalTheme") || "Override global theme" }),
+                /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", c: "rgba(255,255,255,0.4)", children: locale("OverrideGlobalThemeDesc") || "When on, this resource uses its own primary colour and palette instead of dirk_lib's. Turn off to fall back to the global theme \u2014 your custom palette is kept." })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Switch,
+                {
+                  size: "md",
+                  checked: value.useOverride,
+                  onChange: (e) => set("useOverride", e.currentTarget.checked)
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              opacity: editable ? 1 : 0.4,
+              pointerEvents: editable ? "auto" : "none",
+              transition: "opacity 0.15s"
+            },
+            children: [
+              /* @__PURE__ */ jsx(GroupLabel, { label: locale("PrimaryColor") || "Primary Colour" }),
+              /* @__PURE__ */ jsx(
+                Switch,
+                {
+                  label: locale("UseCustomPalette") || "Use custom palette",
+                  size: "md",
+                  checked: useCustom,
+                  onChange: (e) => set("primaryColor", e.currentTarget.checked ? "custom" : "dirk"),
+                  styles: {
+                    label: {
+                      fontFamily: "Akrobat Bold",
+                      fontSize: "0.65em",
+                      letterSpacing: "0.06em",
+                      textTransform: "uppercase",
+                      color: "rgba(255,255,255,0.35)"
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs(Flex, { gap: "xs", mt: "xs", children: [
+                !useCustom && /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    label: locale("MantinePalette") || "Mantine palette",
+                    size: "xs",
+                    style: { flex: 1 },
+                    value: value.primaryColor,
+                    data: MANTINE_COLOR_OPTIONS,
+                    allowDeselect: false,
+                    onChange: (v) => v && set("primaryColor", v)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  NumberInput,
+                  {
+                    label: locale("Shade") || "Shade",
+                    size: "xs",
+                    style: { flex: 1 },
+                    min: 0,
+                    max: 9,
+                    value: value.primaryShade,
+                    onChange: (v) => set("primaryShade", Number(v))
+                  }
+                )
+              ] }),
+              useCustom && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "space-between", mt: "sm", children: [
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      ff: "Akrobat Bold",
+                      size: "xxs",
+                      tt: "uppercase",
+                      lts: "0.07em",
+                      c: "rgba(255,255,255,0.2)",
+                      children: locale("CustomPalette") || "Custom palette"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    ActionIcon,
+                    {
+                      size: "sm",
+                      variant: "subtle",
+                      onClick: resetPalette,
+                      title: locale("ResetPalette") || "Reset palette",
+                      children: /* @__PURE__ */ jsx(RotateCcw, { size: "1.4vh" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  ColorInput,
+                  {
+                    label: locale("BaseColor") || "Base colour",
+                    size: "xs",
+                    value: value.customTheme[value.primaryShade] ?? value.customTheme[5] ?? "#000000",
+                    onChange: generateFromBase,
+                    eyeDropperIcon: /* @__PURE__ */ jsx(Fragment, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(Flex, { gap: "xxs", mt: "xxs", children: value.customTheme.map((swatch, i) => /* @__PURE__ */ jsx(
+                  SwatchTile,
+                  {
+                    index: i,
+                    value: swatch,
+                    isPrimary: i === value.primaryShade,
+                    onChange: (v) => setSwatch(i, v)
+                  },
+                  i
+                )) })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function SwatchTile({
+  index,
+  value,
+  isPrimary,
+  onChange
+}) {
+  const [opened, setOpened] = useState(false);
+  return /* @__PURE__ */ jsxs(Popover, { opened, onChange: setOpened, position: "bottom", withArrow: true, zIndex: 1e4, children: [
+    /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setOpened((o) => !o),
+        title: `${index} \xB7 ${value}`,
+        style: {
+          flex: 1,
+          aspectRatio: "1 / 1",
+          background: value,
+          border: isPrimary ? "0.2vh solid rgba(255,255,255,0.85)" : "0.1vh solid rgba(255,255,255,0.15)",
+          borderRadius: "0.4vh",
+          cursor: "pointer",
+          padding: 0,
+          display: "flex",
+          alignItems: "flex-end",
+          justifyContent: "flex-end",
+          position: "relative"
+        },
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontFamily: "Akrobat Bold",
+              fontSize: "0.9vh",
+              lineHeight: 1,
+              padding: "0.2vh 0.3vh",
+              color: "rgba(0,0,0,0.55)",
+              background: "rgba(255,255,255,0.55)",
+              borderRadius: "0.25vh",
+              margin: "0.2vh"
+            },
+            children: index
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Popover.Dropdown, { p: "xs", children: /* @__PURE__ */ jsx(
+      ColorInput,
+      {
+        size: "xs",
+        value,
+        onChange,
+        format: "hex",
+        eyeDropperIcon: /* @__PURE__ */ jsx(Fragment, {})
+      }
+    ) })
+  ] });
+}
 function useTornEdges() {
   const game = useSettings((state) => state.game);
   return game === "rdr3" ? "torn-edge-wrapper" : "";
@@ -6271,6 +6573,12 @@ function DirkProvider({ children, overideResourceName, themeOverride }) {
   }, []);
   useNuiEvent("UPDATE_DIRK_LIB_SETTINGS", (data) => {
     if (!data || typeof data !== "object") return;
+    const current = useSettings.getState();
+    if (current.themeOverride) {
+      const { primaryColor: _pc, primaryShade: _ps, customTheme: _ct, ...rest } = data;
+      useSettings.setState(rest);
+      return;
+    }
     useSettings.setState(data);
   });
   const mergedTheme = useMemo(
@@ -6295,7 +6603,22 @@ function DirkProvider({ children, overideResourceName, themeOverride }) {
   ) : children;
   return /* @__PURE__ */ jsx(MantineProvider, { theme: mergedTheme, defaultColorScheme: "dark", children: /* @__PURE__ */ jsx(DirkErrorBoundary, { children: content }) });
 }
+var Vector2Schema = z.object({
+  x: z.number(),
+  y: z.number()
+});
+var Vector3Schema = z.object({
+  x: z.number(),
+  y: z.number(),
+  z: z.number()
+});
+var Vector4Schema = z.object({
+  x: z.number(),
+  y: z.number(),
+  z: z.number(),
+  w: z.number()
+});
 
-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 };
+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, ThemeOverrideSection, Title, TornEdgeSVGFilter, Vector2Schema, Vector3Schema, Vector4DeleteButton, Vector4Display, Vector4Schema, 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