dirk-cfx-react 1.1.73 → 1.1.75

package/dist/index.cjs

@@ -12,6 +12,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');
 require('@mantine/core/styles.css');
 require('@mantine/notifications/styles.css');
 require('./styles/fonts.css');
@@ -4835,7 +4836,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
@@ -6010,6 +6026,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: label2 }) {
+  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: label2 }),
+    /* @__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] = React6.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, {})
+      }
+    ) })
+  ] });
+}
 function useTornEdges() {
   const game = useSettings((state) => state.game);
   return game === "rdr3" ? "torn-edge-wrapper" : "";
@@ -6291,6 +6582,12 @@ function DirkProvider({ children, overideResourceName, themeOverride }) {
   }, []);
   useNuiEvent("UPDATE_DIRK_LIB_SETTINGS", (data) => {
     if (!data || typeof data !== "object") return;
+    const current = useSettings.getState();
+    if (current.themeOverride) {
+      const { primaryColor: _pc, primaryShade: _ps, customTheme: _ct, ...rest } = data;
+      useSettings.setState(rest);
+      return;
+    }
     useSettings.setState(data);
   });
   const mergedTheme = React6.useMemo(
@@ -6374,6 +6671,7 @@ exports.SegmentedControl = SegmentedControl;
 exports.SegmentedProgress = SegmentedProgress;
 exports.SelectItem = SelectItem;
 exports.TestBed = TestBed;
+exports.ThemeOverrideSection = ThemeOverrideSection;
 exports.Title = Title;
 exports.TornEdgeSVGFilter = TornEdgeSVGFilter;
 exports.Vector2Schema = Vector2Schema;