dirk-cfx-react 1.1.2 → 1.1.6

package/dist/index.js

@@ -1,9 +1,9 @@
-import { createContext, useEffect, useRef, useState, useContext, useMemo } from 'react';
+import React3, { createContext, useEffect, useRef, useState, useContext, useMemo } from 'react';
 import { create, useStore, createStore } from 'zustand';
 import axios from 'axios';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Flex, Text, Image as Image$1, createTheme, useMantineTheme, alpha, Progress, RingProgress, Button, MantineProvider, BackgroundImage } from '@mantine/core';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Flex, Text, Image as Image$1, createTheme, Box, Code, useMantineTheme, alpha, Progress, RingProgress, Button, MantineProvider, BackgroundImage } from '@mantine/core';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { motion, AnimatePresence, useMotionValue } from 'framer-motion';
 import clickSoundUrl from './click_sound-PNCRRTM4.mp3';
 import hoverSoundUrl from './hover_sound-NBUA222C.mp3';
@@ -19,6 +19,10 @@ import { fab } from '@fortawesome/free-brands-svg-icons';
 import { far } from '@fortawesome/free-regular-svg-icons';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 
+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;
+var __publicField = (obj, key, value) => __defNormalProp(obj, key + "" , value);
+
 // src/utils/colorWithAlpha.ts
 var colorNames = {
   AliceBlue: { r: 240, g: 248, b: 255 },
@@ -797,6 +801,33 @@ async function getImageShape(file) {
     img.src = typeof file === "string" ? file : URL.createObjectURL(file);
   });
 }
+var useSettings = create(() => ({
+  hydrated: false,
+  game: "fivem",
+  primaryColor: "dirk",
+  primaryShade: 9,
+  itemImgPath: "",
+  customTheme: [
+    "#f0f4ff",
+    "#d9e3ff",
+    "#bfcfff",
+    "#a6bbff",
+    "#8ca7ff",
+    "#7393ff",
+    "#5a7fff",
+    "#406bff",
+    "#2547ff",
+    "#0b33ff"
+  ]
+}));
+registerInitialFetch("GET_SETTINGS").then((data) => {
+  useSettings.setState({
+    ...data,
+    hydrated: true
+  });
+}).catch(() => {
+  useSettings.setState({ hydrated: true });
+});
 function BorderedIcon(props) {
   const theme2 = useMantineTheme();
   return /* @__PURE__ */ jsx(
@@ -2135,6 +2166,70 @@ function useForm() {
   if (!store) throw new Error("useForm must be used inside a <FormProvider>");
   return useStore(store);
 }
+function useTornEdges() {
+  const game = useSettings((state) => state.game);
+  return game === "rdr3" ? "torn-edge-wrapper" : "";
+}
+function TornEdgeSVGFilter() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      style: { position: "absolute", width: 0, height: 0, pointerEvents: "none" },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: "torn-edge-filter", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+        /* @__PURE__ */ jsx(
+          "feTurbulence",
+          {
+            type: "fractalNoise",
+            baseFrequency: "0.018 0.022",
+            numOctaves: "5",
+            seed: "9",
+            result: "noise1"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "feTurbulence",
+          {
+            type: "fractalNoise",
+            baseFrequency: "0.08 0.12",
+            numOctaves: "2",
+            seed: "3",
+            result: "noise2"
+          }
+        ),
+        /* @__PURE__ */ jsx("feBlend", { in: "noise1", in2: "noise2", mode: "multiply", result: "combinedNoise" }),
+        /* @__PURE__ */ jsx(
+          "feDisplacementMap",
+          {
+            in: "SourceGraphic",
+            in2: "combinedNoise",
+            scale: "52",
+            xChannelSelector: "R",
+            yChannelSelector: "G",
+            result: "displaced"
+          }
+        ),
+        /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "0.8", in: "displaced", result: "blurred" }),
+        /* @__PURE__ */ jsx("feComponentTransfer", { in: "blurred", result: "alphaFade", children: /* @__PURE__ */ jsx("feFuncA", { type: "gamma", amplitude: "1", exponent: "1.3", offset: "-0.05" }) }),
+        /* @__PURE__ */ jsx("feMorphology", { operator: "erode", radius: "0.4", in: "alphaFade", result: "eroded" }),
+        /* @__PURE__ */ jsx("feMerge", { children: /* @__PURE__ */ jsx("feMergeNode", { in: "eroded" }) })
+      ] }) })
+    }
+  );
+}
+function createScriptSettings(defaultValue) {
+  const store = create(() => defaultValue);
+  const useScriptSettingHooks = () => {
+    useNuiEvent("UPDATE_SCRIPT_SETTINGS", (newSettings) => {
+      store.setState((prev) => ({ ...prev, ...newSettings }));
+    });
+  };
+  const updateScriptSettings = async (newSettings) => {
+    store.setState((prev) => ({ ...prev, ...newSettings }));
+    return await fetchNui("UPDATE_SCRIPT_SETTINGS", newSettings);
+  };
+  return { store, updateScriptSettings, useScriptSettingHooks };
+}
 var label = {
   fontSize: "var(--mantine-font-size-xs)",
   fontFamily: "Akrobat Bold",
@@ -2294,134 +2389,77 @@ var theme = createTheme({
   }
 });
 var theme_default = theme;
+
+// src/utils/mergeMantineTheme.ts
+var isValidColorScale = (v) => Array.isArray(v) && v.length === 10 && v.every((shade) => typeof shade === "string");
+function mergeMantineThemeSafe(base, custom, override) {
+  const colors = { ...base.colors };
+  if (custom && isValidColorScale(custom)) {
+    colors["custom"] = custom;
+  }
+  return {
+    ...base,
+    ...override,
+    colors: {
+      ...colors,
+      ...override?.colors ?? {}
+    }
+  };
+}
+var DirkErrorBoundary = class extends React3.Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "state", { error: null });
+  }
+  static getDerivedStateFromError(error2) {
+    return { error: error2 };
+  }
+  componentDidCatch(error2, info) {
+    console.group("\u{1F525} Dirk UI Crash");
+    console.error(error2);
+    console.error(info.componentStack);
+    console.groupEnd();
+  }
+  render() {
+    if (!this.state.error) return this.props.children;
+    return /* @__PURE__ */ jsxs(Box, { p: "md", bg: "dark.8", children: [
+      /* @__PURE__ */ jsx(Text, { c: "red", fw: 600, children: "UI crashed" }),
+      /* @__PURE__ */ jsx(Code, { block: true, mt: "sm", children: this.state.error.message })
+    ] });
+  }
+};
 library.add(fas, far, fab);
-var useSettings = create((set) => ({
-  game: "fivem",
-  primaryColor: "dirk",
-  primaryShade: 9,
-  itemImgPath: "https://assets.dirkcfx.com/items/",
-  customTheme: {}
-}));
-registerInitialFetch("GET_SETTINGS", void 0, {
-  game: "fivem",
-  primaryColor: "dirk",
-  primaryShade: 9,
-  itemImgPath: "https://assets.dirkcfx.com/items/",
-  customTheme: {}
-}).then((data) => {
-  console.log("Fetched initial settings:");
-  useSettings.setState({
-    ...data
-  });
-});
-function DirkProvider(props) {
-  const primaryColor = useSettings((data) => data.primaryColor);
-  const primaryShade = useSettings((data) => data.primaryShade);
-  const customTheme = useSettings((data) => data.customTheme);
-  const game = useSettings((data) => data.game);
-  const mergedTheme = useMemo(() => ({
-    ...theme_default,
+function DirkProvider({ children, themeOverride }) {
+  const {
+    hydrated,
     primaryColor,
     primaryShade,
-    colors: {
-      ...theme_default.colors,
-      ...customTheme,
-      // Custom theme colors will override/extend base colors
-      ...props.themeOverride?.colors
-      // Props theme colors will override/extend previous colors
-    },
-    ...props.themeOverride
-    // Props theme will override/extend the entire theme
-  }), [primaryColor, primaryShade, customTheme, props.themeOverride]);
+    customTheme,
+    game
+  } = useSettings();
+  if (!hydrated) return null;
+  const mergedTheme = useMemo(
+    () => mergeMantineThemeSafe(
+      { ...theme_default, primaryColor, primaryShade },
+      customTheme,
+      themeOverride
+    ),
+    [primaryColor, primaryShade, customTheme, themeOverride]
+  );
   useEffect(() => {
-    document.fonts.ready.then(() => {
-      document.body.style.fontFamily = game === "rdr3" ? '"Red Dead", sans-serif' : game === "fivem" ? '"Akrobat Regular", sans-serif' : "sans-serif";
-    });
+    document.body.style.fontFamily = game === "rdr3" ? '"Red Dead", sans-serif' : '"Akrobat Regular", sans-serif';
+    console.log(`%cNew Font Applied: ${document.body.style.fontFamily}`, "font-family: " + document.body.style.fontFamily);
   }, [game]);
-  useEffect(() => {
-    fetchNui("NUI_READY");
-  }, []);
-  useAutoFetcher();
-  console.log("DirkProvider rendered with game:", game);
-  return /* @__PURE__ */ jsx(MantineProvider, { theme: mergedTheme, defaultColorScheme: "dark", children: /* @__PURE__ */ jsx(Wrapper, { children: props.children }) });
-}
-function Wrapper({ children }) {
-  const game = useSettings((data) => data.game);
-  if (!isEnvBrowser()) return /* @__PURE__ */ jsx(Fragment, { children });
-  return /* @__PURE__ */ jsx(
+  const content = isEnvBrowser() ? /* @__PURE__ */ jsx(
     BackgroundImage,
     {
       w: "100vw",
       h: "100vh",
-      style: { overflow: "hidden", backgroundColor: "transparent" },
       src: game === "fivem" ? "https://i.ytimg.com/vi/TOxuNbXrO28/maxresdefault.jpg" : "https://raw.githubusercontent.com/Jump-On-Studios/RedM-jo_libs/refs/heads/main/source-repositories/Menu/public/assets/images/background_dev.jpg",
       children
     }
-  );
-}
-function useTornEdges() {
-  const game = useSettings((state) => state.game);
-  return game === "rdr3" ? "torn-edge-wrapper" : "";
-}
-function TornEdgeSVGFilter() {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      style: { position: "absolute", width: 0, height: 0, pointerEvents: "none" },
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: "torn-edge-filter", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
-        /* @__PURE__ */ jsx(
-          "feTurbulence",
-          {
-            type: "fractalNoise",
-            baseFrequency: "0.018 0.022",
-            numOctaves: "5",
-            seed: "9",
-            result: "noise1"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "feTurbulence",
-          {
-            type: "fractalNoise",
-            baseFrequency: "0.08 0.12",
-            numOctaves: "2",
-            seed: "3",
-            result: "noise2"
-          }
-        ),
-        /* @__PURE__ */ jsx("feBlend", { in: "noise1", in2: "noise2", mode: "multiply", result: "combinedNoise" }),
-        /* @__PURE__ */ jsx(
-          "feDisplacementMap",
-          {
-            in: "SourceGraphic",
-            in2: "combinedNoise",
-            scale: "52",
-            xChannelSelector: "R",
-            yChannelSelector: "G",
-            result: "displaced"
-          }
-        ),
-        /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "0.8", in: "displaced", result: "blurred" }),
-        /* @__PURE__ */ jsx("feComponentTransfer", { in: "blurred", result: "alphaFade", children: /* @__PURE__ */ jsx("feFuncA", { type: "gamma", amplitude: "1", exponent: "1.3", offset: "-0.05" }) }),
-        /* @__PURE__ */ jsx("feMorphology", { operator: "erode", radius: "0.4", in: "alphaFade", result: "eroded" }),
-        /* @__PURE__ */ jsx("feMerge", { children: /* @__PURE__ */ jsx("feMergeNode", { in: "eroded" }) })
-      ] }) })
-    }
-  );
-}
-function createScriptSettings(defaultValue) {
-  const store = create(() => defaultValue);
-  const useScriptSettingHooks = () => {
-    useNuiEvent("UPDATE_SCRIPT_SETTINGS", (newSettings) => {
-      store.setState((prev) => ({ ...prev, ...newSettings }));
-    });
-  };
-  const updateScriptSettings = async (newSettings) => {
-    store.setState((prev) => ({ ...prev, ...newSettings }));
-    return await fetchNui("UPDATE_SCRIPT_SETTINGS", newSettings);
-  };
-  return { store, updateScriptSettings, useScriptSettingHooks };
+  ) : children;
+  return /* @__PURE__ */ jsx(DirkErrorBoundary, { children: /* @__PURE__ */ jsx(MantineProvider, { theme: mergedTheme, defaultColorScheme: "dark", children: content }) });
 }
 
 export { BorderedIcon, Counter, DirkProvider, FloatingParticles, FormProvider, InfoBox, InputContainer, LevelBanner, LevelPanel, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PromptModal, SegmentedControl, SegmentedProgress, Title, TornEdgeSVGFilter, colorWithAlpha, copyToClipboard, createFormStore, createScriptSettings, createSkill, fetchNui, gameToMap, getImageShape, initialFetches, internalEvent, isEnvBrowser, isProfanity, latPr100, locale, localeStore, mapCenter, mapToGame, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, updatePresignedURL, uploadImage, useAutoFetcher, useForm, useModal, useModalActions, useNavigation, useNavigationStore, useNuiEvent, useProfanityStore, useSettings, useTornEdges };