dirk-cfx-react 1.1.72 → 1.1.75

package/dist/components/index.cjs

@@ -11,6 +11,7 @@ var clickSoundUrl = require('../click_sound-PNCRRTM4.mp3');
 var hoverSoundUrl = require('../hover_sound-NBUA222C.mp3');
 var notifications = require('@mantine/notifications');
 var reactQuery = require('@tanstack/react-query');
+var colorsGenerator = require('@mantine/colors-generator');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -1299,7 +1300,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();
@@ -2472,9 +2477,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 = core.useMantineTheme();
+  const preset = getSizePreset(props.size ?? "md", theme.fontSizes.md);
   return /* @__PURE__ */ jsxRuntime.jsx(
     core.Flex,
     {
@@ -2483,71 +2504,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__ */ jsxRuntime.jsxs(
-        core.Flex,
-        {
-          align: "center",
-          justify: "center",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              core.Flex,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", justify: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", gap: preset.innerGap, pr: "xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BorderedIcon,
+            {
+              icon: props.icon,
+              fontSize: preset.iconFontSize,
+              color: props.iconColor,
+              p: preset.iconPadding
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", gap: "0.25vh", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              core.Text,
               {
-                align: "center",
-                gap: "sm",
-                pr: "xs",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    BorderedIcon,
-                    {
-                      icon: props.icon,
-                      fontSize: theme.fontSizes.md,
-                      color: props.iconColor
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    core.Flex,
-                    {
-                      direction: "column",
-                      gap: "0.25vh",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.jsx(
-                          core.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__ */ jsxRuntime.jsx(
-              core.Flex,
+              core.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__ */ jsxRuntime.jsx(core.Flex, { ml: "auto", align: "center", gap: "xs", children: props.rightSection })
+      ] })
     }
   );
 }
@@ -3714,6 +3714,13 @@ function useForm() {
   }, [state.values, state.initialValues]);
   return { ...state, changedFields, changedCount: changedFields.length };
 }
+function useFormField(path) {
+  const store = react.useContext(FormContext);
+  if (!store) {
+    throw new Error("useFormField must be used inside <FormProvider>");
+  }
+  return zustand.useStore(store, (s) => getNested(s.values, path));
+}
 function useFormActions() {
   const store = react.useContext(FormContext);
   if (!store) {
@@ -4100,7 +4107,22 @@ function ConfigPanelInner({
           if (result?.success) {
             const { store } = getScriptConfigInstance();
             form.reinitialize(cloneConfig(store.getState()));
+            notifications.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.notifications.show({
+            color: "red",
+            title: locale("ConfigResetFailedTitle"),
+            message: locale("ConfigResetFailedBody", err),
+            autoClose: 6e3
+          });
         },
         onClose: () => setResetOpen(false),
         zIndex: 300
@@ -4168,8 +4190,8 @@ function ConfigPanelInner({
                   children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { size: "1.4vh", color })
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", style: { minWidth: 0, lineHeight: 1 }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "lg", ff: "Akrobat Bold", tt: "uppercase", lts: "0.04em", truncate: true, children: title }),
+              /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", style: { minWidth: 0, flex: 1, lineHeight: 1, overflow: "hidden" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "md", ff: "Akrobat Bold", tt: "uppercase", lts: "0.04em", truncate: true, children: title }),
                 subtitle && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.08em", c: color, truncate: true, children: subtitle })
               ] })
             ] }),
@@ -5110,6 +5132,17 @@ function AdminPageTitle(props) {
     /* @__PURE__ */ jsxRuntime.jsx(core.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);
@@ -5128,7 +5161,8 @@ function TestBed({
   items,
   storageKey = "testbed:open-state",
   disablePersistence = false,
-  title = "TestBed"
+  title = "TestBed",
+  placement = "top-left"
 }) {
   const [open, setOpen] = react.useState(false);
   const itemsRef = react.useRef(items);
@@ -5158,8 +5192,7 @@ function TestBed({
     {
       style: {
         position: "fixed",
-        top: "1vh",
-        left: "1vh",
+        ...placementStyle(placement),
         zIndex: 2147483647,
         pointerEvents: "auto",
         fontSize: "1.4vh"
@@ -5264,6 +5297,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 }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", gap: "xs", mt: "xxs", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.07em", c: "rgba(255,255,255,0.2)", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, height: "0.05vh", background: "rgba(255,255,255,0.06)" } })
+  ] });
+}
+function ThemeOverrideSection({
+  schemaKey = "theme",
+  title
+}) {
+  const mantineTheme = core.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 = colorsGenerator.generateColors(hex);
+      set("customTheme", generated);
+    } catch {
+    }
+  };
+  const resetPalette = () => set("customTheme", DEFAULT_PALETTE);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.Flex,
+    {
+      direction: "column",
+      gap: "xs",
+      p: "sm",
+      style: { flex: 1, minHeight: 0, overflowY: "auto" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AdminPageTitle,
+          {
+            icon: lucideReact.Palette,
+            title: title || locale("Theme") || "Theme",
+            color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          core.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__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", gap: "xxs", style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xs", c: "rgba(255,255,255,0.9)", children: locale("OverrideGlobalTheme") || "Override global theme" }),
+                /* @__PURE__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.jsx(
+                core.Switch,
+                {
+                  size: "md",
+                  checked: value.useOverride,
+                  onChange: (e) => set("useOverride", e.currentTarget.checked)
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              opacity: editable ? 1 : 0.4,
+              pointerEvents: editable ? "auto" : "none",
+              transition: "opacity 0.15s"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(GroupLabel, { label: locale("PrimaryColor") || "Primary Colour" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                core.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__ */ jsxRuntime.jsxs(core.Flex, { gap: "xs", mt: "xs", children: [
+                !useCustom && /* @__PURE__ */ jsxRuntime.jsx(
+                  core.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__ */ jsxRuntime.jsx(
+                  core.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", justify: "space-between", mt: "sm", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    core.Text,
+                    {
+                      ff: "Akrobat Bold",
+                      size: "xxs",
+                      tt: "uppercase",
+                      lts: "0.07em",
+                      c: "rgba(255,255,255,0.2)",
+                      children: locale("CustomPalette") || "Custom palette"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    core.ActionIcon,
+                    {
+                      size: "sm",
+                      variant: "subtle",
+                      onClick: resetPalette,
+                      title: locale("ResetPalette") || "Reset palette",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { size: "1.4vh" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  core.ColorInput,
+                  {
+                    label: locale("BaseColor") || "Base colour",
+                    size: "xs",
+                    value: value.customTheme[value.primaryShade] ?? value.customTheme[5] ?? "#000000",
+                    onChange: generateFromBase,
+                    eyeDropperIcon: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(core.Flex, { gap: "xxs", mt: "xxs", children: value.customTheme.map((swatch, i) => /* @__PURE__ */ jsxRuntime.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] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Popover, { opened, onChange: setOpened, position: "bottom", withArrow: true, zIndex: 1e4, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.Popover.Target, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(core.Popover.Dropdown, { p: "xs", children: /* @__PURE__ */ jsxRuntime.jsx(
+      core.ColorInput,
+      {
+        size: "xs",
+        value,
+        onChange,
+        format: "hex",
+        eyeDropperIcon: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
+      }
+    ) })
+  ] });
+}
 
 exports.AdminPageTitle = AdminPageTitle;
 exports.AsyncSaveButton = AsyncSaveButton;
@@ -5302,6 +5610,7 @@ exports.SegmentedControl = SegmentedControl;
 exports.SegmentedProgress = SegmentedProgress;
 exports.SelectItem = SelectItem;
 exports.TestBed = TestBed;
+exports.ThemeOverrideSection = ThemeOverrideSection;
 exports.Title = Title;
 exports.Vector4DeleteButton = Vector4DeleteButton;
 exports.Vector4Display = Vector4Display;