dirk-cfx-react 1.1.72 → 1.1.75

package/dist/components/index.d.cts

@@ -678,6 +678,7 @@ type ButtonProps = {
     icon: string;
     onClick?: () => void;
 };
+type TitleSize = "xs" | "sm" | "md" | "lg" | "xl";
 type TitleProps = {
     title: string;
     description: string;
@@ -688,6 +689,12 @@ type TitleProps = {
     removeBorder?: boolean;
     borderColor?: string;
     p?: string;
+    /**
+     * Scale of the whole block — icon, title text, description text, and inner
+     * spacing all follow this single value. Defaults to "md" to preserve the
+     * historical look so existing consumers don't shift.
+     */
+    size?: TitleSize;
     rightSection?: React.ReactNode;
 };
 declare function Title(props: TitleProps): react_jsx_runtime.JSX.Element;
@@ -993,6 +1000,7 @@ interface TestBedItem {
     active: boolean;
     onToggle: (next: boolean) => void;
 }
+type TestBedPlacement = "top-left" | "top-center" | "top-right";
 interface TestBedProps {
     items: TestBedItem[];
     /** localStorage key used to persist toggled state across reloads. Default: "testbed:open-state". */
@@ -1001,7 +1009,29 @@ interface TestBedProps {
     disablePersistence?: boolean;
     /** Header label shown in the collapsed pill. Default: "TestBed". */
     title?: string;
+    /** Where to anchor the floating panel. Default: "top-left". */
+    placement?: TestBedPlacement;
 }
-declare function TestBed({ items, storageKey, disablePersistence, title, }: TestBedProps): react_jsx_runtime.JSX.Element | null;
+declare function TestBed({ items, storageKey, disablePersistence, title, placement, }: TestBedProps): react_jsx_runtime.JSX.Element | null;
+
+type ThemeOverrideValue = {
+    useOverride: boolean;
+    primaryColor: string;
+    primaryShade: number;
+    customTheme: string[];
+};
+type ThemeOverrideSectionProps = {
+    /**
+     * Schema path the consumer stores its override block under. Defaults to
+     * "theme" — matches the recommended schema key.
+     */
+    schemaKey?: string;
+    /**
+     * Optional title for the AdminPageTitle. Defaults to the localized
+     * "Theme" string with a fallback.
+     */
+    title?: string;
+};
+declare function ThemeOverrideSection({ schemaKey, title, }: ThemeOverrideSectionProps): react_jsx_runtime.JSX.Element;
 
-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 };
+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 TestBedPlacement, type TestBedProps, ThemeOverrideSection, type ThemeOverrideSectionProps, type ThemeOverrideValue, Title, type TitleProps, type TitleSize, Vector4DeleteButton, Vector4Display, type Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore };

package/dist/components/index.d.ts

@@ -678,6 +678,7 @@ type ButtonProps = {
     icon: string;
     onClick?: () => void;
 };
+type TitleSize = "xs" | "sm" | "md" | "lg" | "xl";
 type TitleProps = {
     title: string;
     description: string;
@@ -688,6 +689,12 @@ type TitleProps = {
     removeBorder?: boolean;
     borderColor?: string;
     p?: string;
+    /**
+     * Scale of the whole block — icon, title text, description text, and inner
+     * spacing all follow this single value. Defaults to "md" to preserve the
+     * historical look so existing consumers don't shift.
+     */
+    size?: TitleSize;
     rightSection?: React.ReactNode;
 };
 declare function Title(props: TitleProps): react_jsx_runtime.JSX.Element;
@@ -993,6 +1000,7 @@ interface TestBedItem {
     active: boolean;
     onToggle: (next: boolean) => void;
 }
+type TestBedPlacement = "top-left" | "top-center" | "top-right";
 interface TestBedProps {
     items: TestBedItem[];
     /** localStorage key used to persist toggled state across reloads. Default: "testbed:open-state". */
@@ -1001,7 +1009,29 @@ interface TestBedProps {
     disablePersistence?: boolean;
     /** Header label shown in the collapsed pill. Default: "TestBed". */
     title?: string;
+    /** Where to anchor the floating panel. Default: "top-left". */
+    placement?: TestBedPlacement;
 }
-declare function TestBed({ items, storageKey, disablePersistence, title, }: TestBedProps): react_jsx_runtime.JSX.Element | null;
+declare function TestBed({ items, storageKey, disablePersistence, title, placement, }: TestBedProps): react_jsx_runtime.JSX.Element | null;
+
+type ThemeOverrideValue = {
+    useOverride: boolean;
+    primaryColor: string;
+    primaryShade: number;
+    customTheme: string[];
+};
+type ThemeOverrideSectionProps = {
+    /**
+     * Schema path the consumer stores its override block under. Defaults to
+     * "theme" — matches the recommended schema key.
+     */
+    schemaKey?: string;
+    /**
+     * Optional title for the AdminPageTitle. Defaults to the localized
+     * "Theme" string with a fallback.
+     */
+    title?: string;
+};
+declare function ThemeOverrideSection({ schemaKey, title, }: ThemeOverrideSectionProps): react_jsx_runtime.JSX.Element;
 
-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 };
+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 TestBedPlacement, type TestBedProps, ThemeOverrideSection, type ThemeOverrideSectionProps, type ThemeOverrideValue, Title, type TitleProps, type TitleSize, Vector4DeleteButton, Vector4Display, type Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore };

package/dist/components/index.js

@@ -1,14 +1,15 @@
-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 { Flex, Text, Image, TextInput, Select, Box, useMantineTheme, Tooltip, alpha, Progress, RingProgress, Portal, Button, NumberInput, MultiSelect, Loader, ActionIcon, Stack, Switch, ColorInput, Popover, Group, JsonInput } from '@mantine/core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 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, 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';
 
 // src/components/BlipSelect.tsx
 var BLIP_ENTRIES = [
@@ -1292,7 +1293,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 +2470,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 +2497,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 })
+      ] })
     }
   );
 }
@@ -3707,6 +3707,13 @@ function useForm() {
   }, [state.values, state.initialValues]);
   return { ...state, changedFields, changedCount: changedFields.length };
 }
+function useFormField(path) {
+  const store = useContext(FormContext);
+  if (!store) {
+    throw new Error("useFormField must be used inside <FormProvider>");
+  }
+  return useStore(store, (s) => getNested(s.values, path));
+}
 function useFormActions() {
   const store = useContext(FormContext);
   if (!store) {
@@ -4093,7 +4100,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
@@ -4161,8 +4183,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 })
               ] })
             ] }),
@@ -5103,6 +5125,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);
@@ -5121,7 +5154,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);
@@ -5151,8 +5185,7 @@ function TestBed({
     {
       style: {
         position: "fixed",
-        top: "1vh",
-        left: "1vh",
+        ...placementStyle(placement),
         zIndex: 2147483647,
         pointerEvents: "auto",
         fontSize: "1.4vh"
@@ -5257,7 +5290,282 @@ 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 }) {
+  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: label }),
+    /* @__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, {})
+      }
+    ) })
+  ] });
+}
 
-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 };
+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, ThemeOverrideSection, Title, Vector4DeleteButton, Vector4Display, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map