dirk-cfx-react 1.1.69 → 1.1.71

package/dist/components/index.cjs

@@ -9,6 +9,7 @@ var framerMotion = require('framer-motion');
 var lucideReact = require('lucide-react');
 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');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -4082,12 +4083,25 @@ function ConfigPanel(props) {
           if (result?.success) {
             form.reinitialize(cloneConfig(form.values));
             configPanelQueryClient.invalidateQueries({ queryKey: ["scriptConfigHistory"] });
+            notifications.notifications.show({
+              color: "green",
+              title: locale("ConfigSaveSuccessTitle"),
+              message: locale("ConfigSaveSuccessBody"),
+              autoClose: 3e3
+            });
             return;
           }
           form.reinitialize(cloneConfig(store.getState()));
-          if (result?._error) {
-            console.warn(`[ConfigPanel] config save failed: ${result._error}`);
-          }
+          const err = result?._error || "Unknown";
+          console.warn(`[ConfigPanel] config save failed: ${err}`);
+          const titleKey = err === "NoPermission" ? "ConfigSaveNoPermissionTitle" : err === "VersionConflict" ? "ConfigSaveVersionConflictTitle" : err === "NotReady" ? "ConfigSaveNotReadyTitle" : "ConfigSaveFailedTitle";
+          const bodyKey = err === "NoPermission" ? "ConfigSaveNoPermissionBody" : err === "VersionConflict" ? "ConfigSaveVersionConflictBody" : err === "NotReady" ? "ConfigSaveNotReadyBody" : "ConfigSaveFailedBody";
+          notifications.notifications.show({
+            color: "red",
+            title: locale(titleKey),
+            message: locale(bodyKey, err),
+            autoClose: 6e3
+          });
         } finally {
           setIsSaving(false);
         }
@@ -4106,7 +4120,7 @@ function ConfigPanel(props) {
     }
   ) });
 }
-function LazyImage({ src, alt, style }) {
+function LazyImage({ src, style }) {
   const [visible, setVisible] = react.useState(false);
   const ref = react.useRef(null);
   react.useEffect(() => {
@@ -4119,7 +4133,7 @@ function LazyImage({ src, alt, style }) {
     if (ref.current) observer.observe(ref.current);
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, style: { width: "4vh", height: "4vh" }, children: visible && /* @__PURE__ */ jsxRuntime.jsx(core.Image, { src, alt, fit: "contain", style }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, style: { width: "4vh", height: "4vh" }, children: visible && /* @__PURE__ */ jsxRuntime.jsx(core.Image, { src, fit: "contain", style }) });
 }
 function SelectItem(props) {
   const invItems = useItems();
@@ -4147,12 +4161,12 @@ function SelectItem(props) {
       searchable: true,
       comboboxProps: { withinPortal: true, zIndex: 2e3 },
       leftSectionWidth: "4vh",
+      leftSectionPointerEvents: "none",
       leftSection: props.value ? /* @__PURE__ */ jsxRuntime.jsx(
         core.Image,
         {
           fallbackSrc: "/placeholder.png",
           src: invItems[props.value]?.image || "",
-          alt: props.value,
           fit: "contain",
           maw: "4vh",
           style: { aspectRatio: "1 / 1" }
@@ -4164,7 +4178,6 @@ function SelectItem(props) {
           LazyImage,
           {
             src: invItems[item.option.value]?.image || "",
-            alt: item.option.label,
             style: { aspectRatio: "1 / 1" }
           }
         ),
@@ -4389,6 +4402,148 @@ function PickerButton({
     }
   ) });
 }
+function fmtV4(n) {
+  return Number.isFinite(n) ? n.toFixed(2) : "0.00";
+}
+function Vector4Display({ value }) {
+  const theme = core.useMantineTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Flex,
+    {
+      align: "center",
+      gap: "xs",
+      p: "xs",
+      style: {
+        background: core.alpha(theme.colors.dark[5], 0.35),
+        border: "0.1vh solid rgba(255,255,255,0.05)",
+        borderRadius: theme.radius.xs
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        core.Text,
+        {
+          ff: "monospace",
+          size: "xxs",
+          c: "rgba(255,255,255,0.85)",
+          style: { flex: 1, letterSpacing: "0.02em", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" },
+          children: [
+            "vector4(",
+            fmtV4(value.x),
+            ", ",
+            fmtV4(value.y),
+            ", ",
+            fmtV4(value.z),
+            ", ",
+            fmtV4(value.w),
+            ")"
+          ]
+        }
+      )
+    }
+  );
+}
+function Vector4ActionButton({
+  icon,
+  label,
+  tooltip,
+  onClick,
+  color,
+  compact
+}) {
+  const theme = core.useMantineTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { label: tooltip, position: "top", withArrow: true, withinPortal: true, zIndex: 2e3, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    framerMotion.motion.button,
+    {
+      onClick,
+      whileHover: { background: core.alpha(color, 0.18) },
+      whileTap: { scale: 0.95 },
+      style: {
+        background: core.alpha(color, 0.1),
+        border: `0.1vh solid ${core.alpha(color, 0.35)}`,
+        borderRadius: theme.radius.xs,
+        padding: compact ? "0.25vh 0.6vh" : "0.5vh 0.8vh",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        gap: compact ? "0.3vh" : "0.4vh"
+      },
+      children: [
+        icon,
+        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.06em", c: color, children: label })
+      ]
+    }
+  ) });
+}
+function WorldPositionSetButton({
+  value,
+  onChange,
+  compact
+}) {
+  const theme = core.useMantineTheme();
+  const color = theme.colors[theme.primaryColor][5];
+  const grab = async () => {
+    try {
+      const resp = await fetchNui("GET_POSITION", {}, value);
+      if (!resp || typeof resp !== "object") return;
+      onChange({
+        x: Number(resp.x ?? 0),
+        y: Number(resp.y ?? 0),
+        z: Number(resp.z ?? 0),
+        w: Number(resp.w ?? 0)
+      });
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Vector4ActionButton,
+    {
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Crosshair, { size: compact ? "1.1vh" : "1.3vh", color }),
+      label: locale("Set"),
+      tooltip: locale("SetWorldTooltip"),
+      onClick: grab,
+      color,
+      compact
+    }
+  );
+}
+function WorldPositionGotoButton({
+  value,
+  compact
+}) {
+  const theme = core.useMantineTheme();
+  const color = theme.colors[theme.primaryColor][5];
+  const goto = () => {
+    fetchNui("GOTO_POSITION", value).catch(() => {
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Vector4ActionButton,
+    {
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { size: compact ? "1.1vh" : "1.3vh", color }),
+      label: locale("Goto"),
+      tooltip: locale("GotoWorldTooltip"),
+      onClick: goto,
+      color,
+      compact
+    }
+  );
+}
+function Vector4DeleteButton({
+  onClick,
+  compact
+}) {
+  const color = "#ef4444";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Vector4ActionButton,
+    {
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: compact ? "1.1vh" : "1.3vh", color }),
+      label: locale("Delete"),
+      tooltip: locale("Delete"),
+      onClick,
+      color,
+      compact
+    }
+  );
+}
 var GroupSelectContext = react.createContext(null);
 function GroupSelect({
   value,
@@ -4877,6 +5032,10 @@ exports.SegmentedProgress = SegmentedProgress;
 exports.SelectItem = SelectItem;
 exports.TestBed = TestBed;
 exports.Title = Title;
+exports.Vector4DeleteButton = Vector4DeleteButton;
+exports.Vector4Display = Vector4Display;
+exports.WorldPositionGotoButton = WorldPositionGotoButton;
+exports.WorldPositionSetButton = WorldPositionSetButton;
 exports.useModal = useModal;
 exports.useModalActions = useModalActions;
 exports.useNavigation = useNavigation;