dirk-cfx-react 1.1.2 → 1.1.6

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var react = require('react');
+var React3 = require('react');
 var zustand = require('zustand');
 var axios = require('axios');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
@@ -23,10 +23,15 @@ var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var React3__default = /*#__PURE__*/_interopDefault(React3);
 var axios__default = /*#__PURE__*/_interopDefault(axios);
 var clickSoundUrl__default = /*#__PURE__*/_interopDefault(clickSoundUrl);
 var hoverSoundUrl__default = /*#__PURE__*/_interopDefault(hoverSoundUrl);
 
+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 },
@@ -259,7 +264,7 @@ async function runFetches() {
   );
 }
 var useAutoFetcher = () => {
-  react.useEffect(() => {
+  React3.useEffect(() => {
     if (isEnvBrowser()) return;
     const run = async () => {
       await runFetches();
@@ -734,7 +739,7 @@ function createSkill(defaultSettings) {
   }));
   const useSkill = (xp) => {
     const { settings, levelMap } = useStore4();
-    return react.useMemo(() => {
+    return React3.useMemo(() => {
       const currentLevel = getLevelFromXP(xp, levelMap, settings);
       const nextLevel = Math.min(currentLevel + 1, settings.maxLevel);
       const currentLevelXP = levelMap[currentLevel.toString()] || 0;
@@ -805,6 +810,33 @@ async function getImageShape(file) {
     img.src = typeof file === "string" ? file : URL.createObjectURL(file);
   });
 }
+var useSettings = zustand.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 = core.useMantineTheme();
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -868,8 +900,8 @@ var FloatingParticles = ({
   mouseRepelStrength = 50,
   backgroundColor = "transparent"
 }) => {
-  const containerRef = react.useRef(null);
-  const [particles, setParticles] = react.useState([]);
+  const containerRef = React3.useRef(null);
+  const [particles, setParticles] = React3.useState([]);
   const mouseX = framerMotion.useMotionValue(0);
   const mouseY = framerMotion.useMotionValue(0);
   const durationMap = {
@@ -882,7 +914,7 @@ var FloatingParticles = ({
     const x = Math.sin(seed) * 1e4;
     return x - Math.floor(x);
   };
-  react.useEffect(() => {
+  React3.useEffect(() => {
     if (!containerRef.current) return;
     const bounds = containerRef.current.getBoundingClientRect();
     const newParticles = [...Array(particleCount)].map((_, i) => {
@@ -903,7 +935,7 @@ var FloatingParticles = ({
     });
     setParticles(newParticles);
   }, [particleCount, icons.length, duration.base, duration.variance]);
-  react.useEffect(() => {
+  React3.useEffect(() => {
     if (!containerRef.current) return;
     const handleMouseMove = (e) => {
       const bounds = containerRef.current.getBoundingClientRect();
@@ -952,7 +984,7 @@ var FloatingParticles = ({
       container.removeEventListener("mouseleave", handleMouseLeave);
     };
   }, [mouseX, mouseY, mouseRepelDistance, mouseRepelStrength]);
-  react.useEffect(() => {
+  React3.useEffect(() => {
     const handleResize = () => {
       if (!containerRef.current) return;
       const bounds = containerRef.current.getBoundingClientRect();
@@ -1380,23 +1412,23 @@ function Segment(props) {
     }
   );
 }
-var NavigationContext = react.createContext(null);
+var NavigationContext = React3.createContext(null);
 function useNavigation(selector) {
-  const navigation = react.useContext(NavigationContext);
+  const navigation = React3.useContext(NavigationContext);
   if (!navigation) {
     throw new Error("useNavigation must be used within a NavigationProvider");
   }
   return zustand.useStore(navigation, selector);
 }
 function useNavigationStore() {
-  const navigation = react.useContext(NavigationContext);
+  const navigation = React3.useContext(NavigationContext);
   if (!navigation) {
     throw new Error("useNavigationStore must be used within a NavigationProvider");
   }
   return navigation;
 }
 function NavigationProvider({ children, defaultPage }) {
-  const storeRef = react.useRef(
+  const storeRef = React3.useRef(
     zustand.create(() => ({
       pageId: defaultPage || "home"
     }))
@@ -1738,16 +1770,16 @@ function LevelPanel(props) {
     }
   );
 }
-var ModalContext = react.createContext(null);
+var ModalContext = React3.createContext(null);
 function useModal(selector) {
-  const modal = react.useContext(ModalContext);
+  const modal = React3.useContext(ModalContext);
   if (!modal) {
     throw new Error("useModal must be used within a ModalProvider");
   }
   return zustand.useStore(modal, selector);
 }
 function ModalProvider({ children, defaultPage }) {
-  const storeRef = react.useRef(
+  const storeRef = React3.useRef(
     zustand.create(() => ({
       active: null
     }))
@@ -1758,7 +1790,7 @@ function ModalProvider({ children, defaultPage }) {
   ] });
 }
 function useModalActions() {
-  const modal = react.useContext(ModalContext);
+  const modal = React3.useContext(ModalContext);
   if (!modal) throw new Error("useModalActions must be used within a ModalProvider");
   const showModal = (openModal) => {
     modal.setState({ active: openModal });
@@ -1935,11 +1967,11 @@ function PromptModal(props) {
   );
 }
 var useNuiEvent = (action, handler) => {
-  const savedHandler = react.useRef(noop);
-  react.useEffect(() => {
+  const savedHandler = React3.useRef(noop);
+  React3.useEffect(() => {
     savedHandler.current = handler;
   }, [handler]);
-  react.useEffect(() => {
+  React3.useEffect(() => {
     const eventListener = (event) => {
       const { action: eventAction, data } = event.data;
       if (savedHandler.current) {
@@ -2128,21 +2160,85 @@ function createFormStore(initialValues, validationRules, onSubmit) {
     }
   }));
 }
-var FormContext = react.createContext(null);
+var FormContext = React3.createContext(null);
 function FormProvider({
   initialValues,
   validate,
   onSubmit,
   children
 }) {
-  const storeRef = react.useRef(createFormStore(initialValues, validate, onSubmit));
+  const storeRef = React3.useRef(createFormStore(initialValues, validate, onSubmit));
   return /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: storeRef.current, children });
 }
 function useForm() {
-  const store = react.useContext(FormContext);
+  const store = React3.useContext(FormContext);
   if (!store) throw new Error("useForm must be used inside a <FormProvider>");
   return zustand.useStore(store);
 }
+function useTornEdges() {
+  const game = useSettings((state) => state.game);
+  return game === "rdr3" ? "torn-edge-wrapper" : "";
+}
+function TornEdgeSVGFilter() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      style: { position: "absolute", width: 0, height: 0, pointerEvents: "none" },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: "torn-edge-filter", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "feTurbulence",
+          {
+            type: "fractalNoise",
+            baseFrequency: "0.018 0.022",
+            numOctaves: "5",
+            seed: "9",
+            result: "noise1"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "feTurbulence",
+          {
+            type: "fractalNoise",
+            baseFrequency: "0.08 0.12",
+            numOctaves: "2",
+            seed: "3",
+            result: "noise2"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("feBlend", { in: "noise1", in2: "noise2", mode: "multiply", result: "combinedNoise" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "feDisplacementMap",
+          {
+            in: "SourceGraphic",
+            in2: "combinedNoise",
+            scale: "52",
+            xChannelSelector: "R",
+            yChannelSelector: "G",
+            result: "displaced"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "0.8", in: "displaced", result: "blurred" }),
+        /* @__PURE__ */ jsxRuntime.jsx("feComponentTransfer", { in: "blurred", result: "alphaFade", children: /* @__PURE__ */ jsxRuntime.jsx("feFuncA", { type: "gamma", amplitude: "1", exponent: "1.3", offset: "-0.05" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("feMorphology", { operator: "erode", radius: "0.4", in: "alphaFade", result: "eroded" }),
+        /* @__PURE__ */ jsxRuntime.jsx("feMerge", { children: /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", { in: "eroded" }) })
+      ] }) })
+    }
+  );
+}
+function createScriptSettings(defaultValue) {
+  const store = zustand.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",
@@ -2302,134 +2398,77 @@ var theme = core.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__default.default.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__ */ jsxRuntime.jsxs(core.Box, { p: "md", bg: "dark.8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.Text, { c: "red", fw: 600, children: "UI crashed" }),
+      /* @__PURE__ */ jsxRuntime.jsx(core.Code, { block: true, mt: "sm", children: this.state.error.message })
+    ] });
+  }
+};
 fontawesomeSvgCore.library.add(freeSolidSvgIcons.fas, freeRegularSvgIcons.far, freeBrandsSvgIcons.fab);
-var useSettings = zustand.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 = react.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]);
-  react.useEffect(() => {
-    document.fonts.ready.then(() => {
-      document.body.style.fontFamily = game === "rdr3" ? '"Red Dead", sans-serif' : game === "fivem" ? '"Akrobat Regular", sans-serif' : "sans-serif";
-    });
+    customTheme,
+    game
+  } = useSettings();
+  if (!hydrated) return null;
+  const mergedTheme = React3.useMemo(
+    () => mergeMantineThemeSafe(
+      { ...theme_default, primaryColor, primaryShade },
+      customTheme,
+      themeOverride
+    ),
+    [primaryColor, primaryShade, customTheme, themeOverride]
+  );
+  React3.useEffect(() => {
+    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]);
-  react.useEffect(() => {
-    fetchNui("NUI_READY");
-  }, []);
-  useAutoFetcher();
-  console.log("DirkProvider rendered with game:", game);
-  return /* @__PURE__ */ jsxRuntime.jsx(core.MantineProvider, { theme: mergedTheme, defaultColorScheme: "dark", children: /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { children: props.children }) });
-}
-function Wrapper({ children }) {
-  const game = useSettings((data) => data.game);
-  if (!isEnvBrowser()) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const content = isEnvBrowser() ? /* @__PURE__ */ jsxRuntime.jsx(
     core.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__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      style: { position: "absolute", width: 0, height: 0, pointerEvents: "none" },
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: "torn-edge-filter", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "feTurbulence",
-          {
-            type: "fractalNoise",
-            baseFrequency: "0.018 0.022",
-            numOctaves: "5",
-            seed: "9",
-            result: "noise1"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "feTurbulence",
-          {
-            type: "fractalNoise",
-            baseFrequency: "0.08 0.12",
-            numOctaves: "2",
-            seed: "3",
-            result: "noise2"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("feBlend", { in: "noise1", in2: "noise2", mode: "multiply", result: "combinedNoise" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "feDisplacementMap",
-          {
-            in: "SourceGraphic",
-            in2: "combinedNoise",
-            scale: "52",
-            xChannelSelector: "R",
-            yChannelSelector: "G",
-            result: "displaced"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "0.8", in: "displaced", result: "blurred" }),
-        /* @__PURE__ */ jsxRuntime.jsx("feComponentTransfer", { in: "blurred", result: "alphaFade", children: /* @__PURE__ */ jsxRuntime.jsx("feFuncA", { type: "gamma", amplitude: "1", exponent: "1.3", offset: "-0.05" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("feMorphology", { operator: "erode", radius: "0.4", in: "alphaFade", result: "eroded" }),
-        /* @__PURE__ */ jsxRuntime.jsx("feMerge", { children: /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", { in: "eroded" }) })
-      ] }) })
-    }
-  );
-}
-function createScriptSettings(defaultValue) {
-  const store = zustand.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__ */ jsxRuntime.jsx(DirkErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(core.MantineProvider, { theme: mergedTheme, defaultColorScheme: "dark", children: content }) });
 }
 
 exports.BorderedIcon = BorderedIcon;