dirk-cfx-react 1.1.1 → 1.1.5

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 export { BorderedIcon, BorderedIconProps, ButtonProps, Counter, FloatingParticles, FloatingParticlesProps, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, LevelBanner, LevelPanel, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, NavigationStore, ParticleState, ProgressProps, Prompt, PromptButton, PromptModal, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, Title, TitleProps, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.cjs';
 export { InitialFetch, InternalEvent, SkillSettings, UploadImageProps, colorWithAlpha, copyToClipboard, createSkill, fetchNui, gameToMap, getImageShape, initialFetches, internalEvent, isEnvBrowser, isProfanity, latPr100, locale, localeStore, mapCenter, mapToGame, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, updatePresignedURL, uploadImage, useAutoFetcher, useProfanityStore } from './utils/index.cjs';
 export { FormProvider, FormState, NuiHandlerSignature, NuiMessageData, TornEdgeSVGFilter, ValidationRules, createFormStore, createScriptSettings, useForm, useNuiEvent, useTornEdges } from './hooks/index.cjs';
-export { DirkProvider, DirkProviderProps, useSettings } from './providers/index.cjs';
+export { DirkProvider, DirkProviderProps } from './providers/index.cjs';
 import 'react/jsx-runtime';
 import 'react';
 import 'framer-motion';

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { BorderedIcon, BorderedIconProps, ButtonProps, Counter, FloatingParticles, FloatingParticlesProps, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, LevelBanner, LevelPanel, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, NavigationStore, ParticleState, ProgressProps, Prompt, PromptButton, PromptModal, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, Title, TitleProps, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.js';
 export { InitialFetch, InternalEvent, SkillSettings, UploadImageProps, colorWithAlpha, copyToClipboard, createSkill, fetchNui, gameToMap, getImageShape, initialFetches, internalEvent, isEnvBrowser, isProfanity, latPr100, locale, localeStore, mapCenter, mapToGame, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, updatePresignedURL, uploadImage, useAutoFetcher, useProfanityStore } from './utils/index.js';
 export { FormProvider, FormState, NuiHandlerSignature, NuiMessageData, TornEdgeSVGFilter, ValidationRules, createFormStore, createScriptSettings, useForm, useNuiEvent, useTornEdges } from './hooks/index.js';
-export { DirkProvider, DirkProviderProps, useSettings } from './providers/index.js';
+export { DirkProvider, DirkProviderProps } from './providers/index.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'framer-motion';

package/dist/index.js

@@ -1,23 +1,19 @@
-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';
 import { useClickOutside } from '@mantine/hooks';
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
-import './styles/notify.css';
-import './styles/fonts.css';
-import './styles/scrollBar.css';
-import './styles/tornEdge.css';
-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';
+
+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 = {
@@ -1487,6 +1483,22 @@ function SegmentedProgress(props) {
     }
   );
 }
+var useSettings = create(() => ({
+  hydrated: false,
+  game: "fivem",
+  primaryColor: "dirk",
+  primaryShade: 9,
+  itemImgPath: "",
+  customTheme: {}
+}));
+registerInitialFetch("GET_SETTINGS").then((data) => {
+  useSettings.setState({
+    ...data,
+    hydrated: true
+  });
+}).catch(() => {
+  useSettings.setState({ hydrated: true });
+});
 function Title(props) {
   const game = useSettings((state) => state.game);
   const theme2 = useMantineTheme();
@@ -2135,6 +2147,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,136 +2370,81 @@ var theme = createTheme({
   }
 });
 var theme_default = theme;
-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) => {
-  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,
+
+// src/utils/mergeMantineTheme.ts
+var isValidColorScale = (v) => Array.isArray(v) && v.length >= 5 && v.every((c) => typeof c === "string");
+function mergeMantineThemeSafe(base, custom, override) {
+  const colors = { ...base.colors };
+  for (const [key, value] of Object.entries(custom ?? {})) {
+    if (isValidColorScale(value)) {
+      colors[key] = value;
+    } else {
+      console.warn(`[theme] invalid color ignored: ${key}`, value);
+    }
+  }
+  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 })
+    ] });
+  }
+};
+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]);
-  console.log("created merged theme:");
-  console.log(mergedTheme);
+    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';
   }, [game]);
-  useEffect(() => {
-    fetchNui("NUI_READY");
-  }, []);
-  useAutoFetcher();
-  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 };
+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, useTornEdges };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map