dirk-cfx-react 1.1.73 → 1.1.75

package/dist/components/index.d.cts

@@ -1014,4 +1014,24 @@ interface TestBedProps {
 }
 declare function TestBed({ items, storageKey, disablePersistence, title, placement, }: TestBedProps): react_jsx_runtime.JSX.Element | null;
 
-export { AdminPageTitle, type AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, type BlipColorSelectProps, BlipDisplaySelect, type BlipDisplaySelectProps, BlipIconSelect, type BlipIconSelectProps, BorderedIcon, type BorderedIconProps, type ButtonProps, ConfigPanel, type ConfigPanelProps, ConfirmModal, type ConfirmModalProps, ControlMultiSelect, type ControlMultiSelectProps, ControlSelect, type ControlSelectProps, Counter, type FiveMControls, FiveMKeyBindInput, FloatingParticles, type FloatingParticlesProps, GroupName, type GroupNameProps, GroupRank, type GroupRankProps, GroupSelect, type GroupSelectProps, type GroupType, type GroupValue, InfoBox, type InfoBoxProps, InputContainer, type InputContainerProps, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, type ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, type NavItem, NavigationContext, NavigationProvider, type NavigationStore, type ParticleState, PositionPicker, type PositionPickerProps, type ProgressProps, type Prompt, type PromptButton, PromptModal, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, TestBed, type TestBedItem, type TestBedPlacement, type TestBedProps, Title, type TitleProps, type TitleSize, Vector4DeleteButton, Vector4Display, type Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore };
+type ThemeOverrideValue = {
+    useOverride: boolean;
+    primaryColor: string;
+    primaryShade: number;
+    customTheme: string[];
+};
+type ThemeOverrideSectionProps = {
+    /**
+     * Schema path the consumer stores its override block under. Defaults to
+     * "theme" — matches the recommended schema key.
+     */
+    schemaKey?: string;
+    /**
+     * Optional title for the AdminPageTitle. Defaults to the localized
+     * "Theme" string with a fallback.
+     */
+    title?: string;
+};
+declare function ThemeOverrideSection({ schemaKey, title, }: ThemeOverrideSectionProps): react_jsx_runtime.JSX.Element;
+
+export { AdminPageTitle, type AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, type BlipColorSelectProps, BlipDisplaySelect, type BlipDisplaySelectProps, BlipIconSelect, type BlipIconSelectProps, BorderedIcon, type BorderedIconProps, type ButtonProps, ConfigPanel, type ConfigPanelProps, ConfirmModal, type ConfirmModalProps, ControlMultiSelect, type ControlMultiSelectProps, ControlSelect, type ControlSelectProps, Counter, type FiveMControls, FiveMKeyBindInput, FloatingParticles, type FloatingParticlesProps, GroupName, type GroupNameProps, GroupRank, type GroupRankProps, GroupSelect, type GroupSelectProps, type GroupType, type GroupValue, InfoBox, type InfoBoxProps, InputContainer, type InputContainerProps, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, type ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, type NavItem, NavigationContext, NavigationProvider, type NavigationStore, type ParticleState, PositionPicker, type PositionPickerProps, type ProgressProps, type Prompt, type PromptButton, PromptModal, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, TestBed, type TestBedItem, type TestBedPlacement, type TestBedProps, ThemeOverrideSection, type ThemeOverrideSectionProps, type ThemeOverrideValue, Title, type TitleProps, type TitleSize, Vector4DeleteButton, Vector4Display, type Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore };

package/dist/components/index.d.ts

@@ -1014,4 +1014,24 @@ interface TestBedProps {
 }
 declare function TestBed({ items, storageKey, disablePersistence, title, placement, }: TestBedProps): react_jsx_runtime.JSX.Element | null;
 
-export { AdminPageTitle, type AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, type BlipColorSelectProps, BlipDisplaySelect, type BlipDisplaySelectProps, BlipIconSelect, type BlipIconSelectProps, BorderedIcon, type BorderedIconProps, type ButtonProps, ConfigPanel, type ConfigPanelProps, ConfirmModal, type ConfirmModalProps, ControlMultiSelect, type ControlMultiSelectProps, ControlSelect, type ControlSelectProps, Counter, type FiveMControls, FiveMKeyBindInput, FloatingParticles, type FloatingParticlesProps, GroupName, type GroupNameProps, GroupRank, type GroupRankProps, GroupSelect, type GroupSelectProps, type GroupType, type GroupValue, InfoBox, type InfoBoxProps, InputContainer, type InputContainerProps, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, type ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, type NavItem, NavigationContext, NavigationProvider, type NavigationStore, type ParticleState, PositionPicker, type PositionPickerProps, type ProgressProps, type Prompt, type PromptButton, PromptModal, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, TestBed, type TestBedItem, type TestBedPlacement, type TestBedProps, Title, type TitleProps, type TitleSize, Vector4DeleteButton, Vector4Display, type Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore };
+type ThemeOverrideValue = {
+    useOverride: boolean;
+    primaryColor: string;
+    primaryShade: number;
+    customTheme: string[];
+};
+type ThemeOverrideSectionProps = {
+    /**
+     * Schema path the consumer stores its override block under. Defaults to
+     * "theme" — matches the recommended schema key.
+     */
+    schemaKey?: string;
+    /**
+     * Optional title for the AdminPageTitle. Defaults to the localized
+     * "Theme" string with a fallback.
+     */
+    title?: string;
+};
+declare function ThemeOverrideSection({ schemaKey, title, }: ThemeOverrideSectionProps): react_jsx_runtime.JSX.Element;
+
+export { AdminPageTitle, type AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, type BlipColorSelectProps, BlipDisplaySelect, type BlipDisplaySelectProps, BlipIconSelect, type BlipIconSelectProps, BorderedIcon, type BorderedIconProps, type ButtonProps, ConfigPanel, type ConfigPanelProps, ConfirmModal, type ConfirmModalProps, ControlMultiSelect, type ControlMultiSelectProps, ControlSelect, type ControlSelectProps, Counter, type FiveMControls, FiveMKeyBindInput, FloatingParticles, type FloatingParticlesProps, GroupName, type GroupNameProps, GroupRank, type GroupRankProps, GroupSelect, type GroupSelectProps, type GroupType, type GroupValue, InfoBox, type InfoBoxProps, InputContainer, type InputContainerProps, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, type ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, type NavItem, NavigationContext, NavigationProvider, type NavigationStore, type ParticleState, PositionPicker, type PositionPickerProps, type ProgressProps, type Prompt, type PromptButton, PromptModal, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, TestBed, type TestBedItem, type TestBedPlacement, type TestBedProps, ThemeOverrideSection, type ThemeOverrideSectionProps, type ThemeOverrideValue, Title, type TitleProps, type TitleSize, Vector4DeleteButton, Vector4Display, type Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore };

package/dist/components/index.js

@@ -1,14 +1,15 @@
-import { Flex, Text, Image, TextInput, Select, Box, useMantineTheme, Tooltip, alpha, Progress, RingProgress, Portal, Button, NumberInput, MultiSelect, Loader, ActionIcon, Stack, Group, JsonInput } from '@mantine/core';
+import { Flex, Text, Image, TextInput, Select, Box, useMantineTheme, Tooltip, alpha, Progress, RingProgress, Portal, Button, NumberInput, MultiSelect, Loader, ActionIcon, Stack, Switch, ColorInput, Popover, Group, JsonInput } from '@mantine/core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, useContext, useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { create, useStore, createStore } from 'zustand';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { motion, AnimatePresence, useMotionValue } from 'framer-motion';
-import { Info, X, AlertTriangle, Trash2, RefreshCw, ChevronDown, Check, Copy, MapPin, Crosshair, EyeOff, Eye, RotateCcw, FlaskConical, ChevronUp, ArrowLeft, Undo2, Redo2, Save, History, XCircle, Code2, Search, Filter, User } from 'lucide-react';
+import { Info, X, AlertTriangle, Trash2, RefreshCw, ChevronDown, Check, Copy, MapPin, Crosshair, EyeOff, Eye, RotateCcw, FlaskConical, ChevronUp, Palette, ArrowLeft, Undo2, Redo2, Save, History, XCircle, Code2, Search, Filter, User } from 'lucide-react';
 import clickSoundUrl from '../click_sound-PNCRRTM4.mp3';
 import hoverSoundUrl from '../hover_sound-NBUA222C.mp3';
 import { notifications } from '@mantine/notifications';
 import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query';
+import { generateColors } from '@mantine/colors-generator';
 
 // src/components/BlipSelect.tsx
 var BLIP_ENTRIES = [
@@ -3706,6 +3707,13 @@ function useForm() {
   }, [state.values, state.initialValues]);
   return { ...state, changedFields, changedCount: changedFields.length };
 }
+function useFormField(path) {
+  const store = useContext(FormContext);
+  if (!store) {
+    throw new Error("useFormField must be used inside <FormProvider>");
+  }
+  return useStore(store, (s) => getNested(s.values, path));
+}
 function useFormActions() {
   const store = useContext(FormContext);
   if (!store) {
@@ -4092,7 +4100,22 @@ function ConfigPanelInner({
           if (result?.success) {
             const { store } = getScriptConfigInstance();
             form.reinitialize(cloneConfig(store.getState()));
+            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.show({
+            color: "red",
+            title: locale("ConfigResetFailedTitle"),
+            message: locale("ConfigResetFailedBody", err),
+            autoClose: 6e3
+          });
         },
         onClose: () => setResetOpen(false),
         zIndex: 300
@@ -5267,7 +5290,282 @@ 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__ */ jsxs(Flex, { align: "center", gap: "xs", mt: "xxs", children: [
+    /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.07em", c: "rgba(255,255,255,0.2)", children: label }),
+    /* @__PURE__ */ jsx("div", { style: { flex: 1, height: "0.05vh", background: "rgba(255,255,255,0.06)" } })
+  ] });
+}
+function ThemeOverrideSection({
+  schemaKey = "theme",
+  title
+}) {
+  const mantineTheme = 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 = generateColors(hex);
+      set("customTheme", generated);
+    } catch {
+    }
+  };
+  const resetPalette = () => set("customTheme", DEFAULT_PALETTE);
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: "column",
+      gap: "xs",
+      p: "sm",
+      style: { flex: 1, minHeight: 0, overflowY: "auto" },
+      children: [
+        /* @__PURE__ */ jsx(
+          AdminPageTitle,
+          {
+            icon: Palette,
+            title: title || locale("Theme") || "Theme",
+            color
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          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__ */ jsxs(Flex, { direction: "column", gap: "xxs", style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xs", c: "rgba(255,255,255,0.9)", children: locale("OverrideGlobalTheme") || "Override global theme" }),
+                /* @__PURE__ */ jsx(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__ */ jsx(
+                Switch,
+                {
+                  size: "md",
+                  checked: value.useOverride,
+                  onChange: (e) => set("useOverride", e.currentTarget.checked)
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              opacity: editable ? 1 : 0.4,
+              pointerEvents: editable ? "auto" : "none",
+              transition: "opacity 0.15s"
+            },
+            children: [
+              /* @__PURE__ */ jsx(GroupLabel, { label: locale("PrimaryColor") || "Primary Colour" }),
+              /* @__PURE__ */ jsx(
+                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__ */ jsxs(Flex, { gap: "xs", mt: "xs", children: [
+                !useCustom && /* @__PURE__ */ jsx(
+                  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__ */ jsx(
+                  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__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "space-between", mt: "sm", children: [
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      ff: "Akrobat Bold",
+                      size: "xxs",
+                      tt: "uppercase",
+                      lts: "0.07em",
+                      c: "rgba(255,255,255,0.2)",
+                      children: locale("CustomPalette") || "Custom palette"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    ActionIcon,
+                    {
+                      size: "sm",
+                      variant: "subtle",
+                      onClick: resetPalette,
+                      title: locale("ResetPalette") || "Reset palette",
+                      children: /* @__PURE__ */ jsx(RotateCcw, { size: "1.4vh" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  ColorInput,
+                  {
+                    label: locale("BaseColor") || "Base colour",
+                    size: "xs",
+                    value: value.customTheme[value.primaryShade] ?? value.customTheme[5] ?? "#000000",
+                    onChange: generateFromBase,
+                    eyeDropperIcon: /* @__PURE__ */ jsx(Fragment, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(Flex, { gap: "xxs", mt: "xxs", children: value.customTheme.map((swatch, i) => /* @__PURE__ */ 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] = useState(false);
+  return /* @__PURE__ */ jsxs(Popover, { opened, onChange: setOpened, position: "bottom", withArrow: true, zIndex: 1e4, children: [
+    /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ 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__ */ 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__ */ jsx(Popover.Dropdown, { p: "xs", children: /* @__PURE__ */ jsx(
+      ColorInput,
+      {
+        size: "xs",
+        value,
+        onChange,
+        format: "hex",
+        eyeDropperIcon: /* @__PURE__ */ jsx(Fragment, {})
+      }
+    ) })
+  ] });
+}
 
-export { AdminPageTitle, AsyncSaveButton, BlipColorSelect, BlipDisplaySelect, BlipIconSelect, BorderedIcon, ConfigPanel, ConfirmModal, ControlMultiSelect, ControlSelect, Counter, FiveMKeyBindInput, FloatingParticles, GroupName, GroupRank, GroupSelect, InfoBox, InputContainer, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PositionPicker, PromptModal, SegmentedControl, SegmentedProgress, SelectItem, TestBed, Title, Vector4DeleteButton, Vector4Display, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore };
+export { AdminPageTitle, AsyncSaveButton, BlipColorSelect, BlipDisplaySelect, BlipIconSelect, BorderedIcon, ConfigPanel, ConfirmModal, ControlMultiSelect, ControlSelect, Counter, FiveMKeyBindInput, FloatingParticles, GroupName, GroupRank, GroupSelect, InfoBox, InputContainer, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PositionPicker, PromptModal, SegmentedControl, SegmentedProgress, SelectItem, TestBed, ThemeOverrideSection, Title, Vector4DeleteButton, Vector4Display, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map