seeder-st2110-components 1.6.0 → 1.6.2

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { memo, useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import React, { memo, useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import { Tooltip, App, Modal, Form, Input, Alert, message, Dropdown, Spin, Divider, Typography, InputNumber, ConfigProvider, Badge, Switch, Select, List, Empty, Button, Space, Flex, Checkbox, Row, Col } from 'antd';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useWebSocket, useInterval } from 'ahooks';
@@ -1086,16 +1086,13 @@ const NetworkSettingsModal = _ref2 => {
       const allSucceeded = results.every(result => result.status === 'fulfilled');
       if (allSucceeded) {
         handleSuccess();
-      } else {
-        message.error('Some configurations failed to update');
       }
     } catch (error) {
       console.error('Failed to update configurations: ', error);
-      message.error('Failed to update configurations');
     } finally {
       setSubmitLoading(false);
     }
-  }, [form, sections, lanConfigs, st2110Interfaces, updateLanConfig, updateSysConfig, handleSuccess, message]);
+  }, [form, sections, lanConfigs, st2110Interfaces, updateLanConfig, updateSysConfig, handleSuccess]);
 
   // 合并默认模态框属性和传入的属性
   const mergedModalProps = _objectSpread2({
@@ -1407,7 +1404,7 @@ const LeftList = /*#__PURE__*/memo(_ref => {
     showDescription = false,
     texts = {
       newButton: "New Preset",
-      removeButton: "Remove"
+      removeButton: "Delete"
     }
   } = _ref;
   // 动态计算列布局
@@ -1418,7 +1415,7 @@ const LeftList = /*#__PURE__*/memo(_ref => {
       className: "list-container",
       children: /*#__PURE__*/jsx(List, {
         header: /*#__PURE__*/jsxs("div", {
-          className: "grid ".concat(gridColumns, " w-full list-header"),
+          className: "grid ".concat(gridColumns, " gap-2 w-full list-header"),
           children: [/*#__PURE__*/jsx("div", {
             children: "Name"
           }), /*#__PURE__*/jsx("div", {
@@ -1436,14 +1433,27 @@ const LeftList = /*#__PURE__*/memo(_ref => {
           },
           onClick: () => onSelectPreset(item),
           children: /*#__PURE__*/jsxs("div", {
-            className: "grid ".concat(gridColumns, " w-full text-text-normal"),
+            className: "grid ".concat(gridColumns, " gap-2 w-full text-text-normal"),
             children: [/*#__PURE__*/jsx("div", {
-              title: item.name,
-              children: item.name || "Untitled Preset"
+              className: "min-w-0",
+              children: /*#__PURE__*/jsx(Typography.Text, {
+                ellipsis: true,
+                title: item.name,
+                children: item.name || "Untitled Preset"
+              })
             }), /*#__PURE__*/jsx("div", {
-              children: item.create_time
+              className: "min-w-0",
+              children: /*#__PURE__*/jsx(Typography.Text, {
+                ellipsis: true,
+                children: item.create_time
+              })
             }), showDescription && /*#__PURE__*/jsx("div", {
-              children: item.description
+              className: "min-w-0",
+              children: /*#__PURE__*/jsx(Typography.Text, {
+                ellipsis: true,
+                title: item.description,
+                children: item.description
+              })
             })]
           })
         }),
@@ -1459,7 +1469,7 @@ const LeftList = /*#__PURE__*/memo(_ref => {
                   onClick: onAddNew,
                   className: "p-0 h-auto",
                   icon: /*#__PURE__*/jsx(PlusOutlined, {}),
-                  children: "Create new preset"
+                  children: "Create New Preset"
                 })
               })
             })
@@ -1475,18 +1485,16 @@ const LeftList = /*#__PURE__*/memo(_ref => {
         size: "middle",
         children: [/*#__PURE__*/jsx(Button, {
           type: "default",
-          icon: /*#__PURE__*/jsx(PlusOutlined, {}),
-          style: {
-            padding: "20px 12px"
-          },
+          icon: /*#__PURE__*/jsx(PlusOutlined, {})
+          // style={{ padding: "20px 12px" }}
+          ,
           className: "btn-gray",
           onClick: onAddNew,
           children: texts.newButton
         }), /*#__PURE__*/jsx(Button, {
-          type: "default",
-          style: {
-            padding: "20px 12px"
-          },
+          type: "default"
+          // style={{ padding: "20px 12px" }}
+          ,
           className: "btn-gray",
           onClick: onRemove,
           children: texts.removeButton
@@ -1523,8 +1531,8 @@ const RightDetailForm = /*#__PURE__*/memo(_ref3 => {
     originalPresetData,
     fields = {
       name: {
-        label: "Preset Name",
-        placeholder: "Enter preset name",
+        label: "Name",
+        placeholder: "Please enter name",
         required: true
       }
     },
@@ -1532,7 +1540,7 @@ const RightDetailForm = /*#__PURE__*/memo(_ref3 => {
       loadButton: "Load",
       saveButton: "Save"
     },
-    presetChanged
+    presetChanged // 作用：在切换选中预设时强制触发 Checkbox 的重新初始化
   } = _ref3;
   const [initialSelected, setInitialSelected] = useState([]);
   const currentSelected = Form.useWatch('category_list', form) || [];
@@ -1592,32 +1600,40 @@ const RightDetailForm = /*#__PURE__*/memo(_ref3 => {
       },
       children: [/*#__PURE__*/jsx(Form.Item, {
         name: "name",
-        label: fields.name.label,
-        rules: [{
-          required: fields.name.required,
-          validator: async (_, value) => {
-            if (!value || value.trim() === '') {
-              return Promise.reject(new Error('Preset name cannot be empty or spaces only'));
-            }
-          }
-        }],
+        label: fields.name.label
+        // rules={[
+        //   { 
+        //     required: fields.name.required,
+        //     validator: async (_, value) => {
+        //       if (!value || value.trim() === '') {
+        //         return Promise.reject(new Error('Preset name cannot be empty or spaces only'));
+        //       }
+        //     }
+        //   }
+        // ]}
+        ,
+        required: true,
         children: /*#__PURE__*/jsx(Input, {
           placeholder: fields.name.placeholder,
           disabled: isEditing
         })
       }), hasCategoryList && /*#__PURE__*/jsx(Form.Item, {
         name: "category_list",
-        label: fields.category_list.label,
-        rules: [{
-          required: fields.category_list.required,
-          message: 'Please select at least one category',
-          validator: (_, value) => {
-            if (value && value.length > 0) {
-              return Promise.resolve();
-            }
-            return Promise.reject(new Error('Please select at least one category'));
-          }
-        }],
+        label: fields.category_list.label
+        // rules={[
+        //   { 
+        //     required: fields.category_list.required,
+        //     message: 'Please select at least one category',
+        //     validator: (_, value) => {
+        //       if (value && value.length > 0) {
+        //         return Promise.resolve();
+        //       }
+        //       return Promise.reject(new Error('Please select at least one category'));
+        //     }
+        //   }
+        // ]}
+        ,
+        required: true,
         children: /*#__PURE__*/jsx(Checkbox.Group, {
           className: "grid grid-cols-2 gap-2",
           onChange: handleCheckboxChange,
@@ -1633,7 +1649,10 @@ const RightDetailForm = /*#__PURE__*/memo(_ref3 => {
         children: /*#__PURE__*/jsx(Input.TextArea, {
           rows: 4,
           placeholder: fields.description.placeholder,
-          disabled: isEditing
+          disabled: isEditing,
+          style: {
+            resize: 'none'
+          }
         })
       })]
     }), isEditing ? /*#__PURE__*/jsx(SubmitButton, _objectSpread2(_objectSpread2({
@@ -1666,20 +1685,20 @@ const Preset = _ref => {
     // 字段配置
     fields = {
       name: {
-        label: "Preset Name",
-        placeholder: "Enter preset name",
+        label: "Name",
+        placeholder: "Please enter name",
         required: true
       }
     },
     texts = {
       title: "Preset Management",
       emptyText: "Select a preset from the list to view details",
-      deleteConfirm: "Are you sure to delete preset",
+      deleteConfirm: "Are you sure you want to delete preset",
       loadConfirm: "Are you sure you want to load preset",
       loadText: "Loading...",
       successText: "Success",
       newButton: "New Preset",
-      removeButton: "Remove",
+      removeButton: "Delete",
       loadButton: "Load",
       saveButton: "Save"
     },
@@ -1697,16 +1716,19 @@ const Preset = _ref => {
   const [loading, setLoading] = useState(false);
   const [presetChanged, setPresetChanged] = useState(0);
   const [form] = Form.useForm();
-
-  // 获取预设列表
-  useEffect(() => {
-    fetchPresetList();
-  }, []);
   const fetchPresetList = useCallback(async () => {
     try {
       const data = await getPresetList();
       const presets = (data === null || data === void 0 ? void 0 : data.preset_list) || data || [];
       setPresetList(presets);
+
+      // 自动选中第一个预设
+      if (presets.length > 0) {
+        const firstPreset = presets[0];
+        setSelectedPreset(firstPreset);
+        form.setFieldsValue(firstPreset);
+        setPresetChanged(prev => prev + 1);
+      }
     } catch (error) {
       console.error('Failed to fetch preset list:', error);
     }
@@ -1714,7 +1736,7 @@ const Preset = _ref => {
   const handleSelectPreset = useCallback(preset => {
     setSelectedPreset(preset);
     form.setFieldsValue(preset);
-    setPresetChanged(prev => prev + 1); // 触发react更新
+    setPresetChanged(prev => prev + 1);
   }, [form]);
   const handleAddNew = useCallback(() => {
     var _fields$category_list;
@@ -1752,18 +1774,44 @@ const Preset = _ref => {
         cancelText: 'No',
         okText: 'Yes',
         onOk: async () => {
+          // 在删除前记录当前选中项的位置
+          const currentIndex = presetList.findIndex(item => isUnsavedPreset ? !item.id : item.id === selectedPreset.id);
           if (!isUnsavedPreset) {
             await removePreset({
               id: selectedPreset.id
             });
             AntdMessage.success(texts.successText);
-            // 刷新列表
-            await fetchPresetList();
           } else {
+            // 移除未保存的预设
             setPresetList(prev => prev.filter(item => !!item.id));
           }
 
-          // 重置表单和选择状态
+          // 获取删除后的列表
+          const updatedList = isUnsavedPreset ? presetList.filter(item => !!item.id) : await getPresetList().then(data => (data === null || data === void 0 ? void 0 : data.preset_list) || data || []);
+
+          // 更新列表
+          setPresetList(updatedList);
+          if (updatedList.length > 0) {
+            // 计算下一个索引
+            let nextIndex = 0;
+            if (currentIndex > 0) {
+              // 如果删除的不是最后一项
+              if (currentIndex < updatedList.length) {
+                nextIndex = currentIndex; // 保持相同位置
+              } else {
+                nextIndex = updatedList.length - 1; // 选最后一个
+              }
+            }
+            const nextPreset = updatedList[nextIndex];
+            if (nextPreset) {
+              setSelectedPreset(nextPreset);
+              form.setFieldsValue(nextPreset);
+              setPresetChanged(prev => prev + 1);
+              return;
+            }
+          }
+
+          // 列表为空
           setSelectedPreset(null);
           form.resetFields();
         }
@@ -1771,7 +1819,7 @@ const Preset = _ref => {
     } catch (error) {
       console.error('Failed to delete preset:', error);
     }
-  }, [selectedPreset, form, AntdModal, AntdMessage, fetchPresetList, texts]);
+  }, [selectedPreset, form, AntdModal, AntdMessage, texts, removePreset, getPresetList]);
   const handleLoadPreset = useCallback(async loadData => {
     if (!loadData) return;
 
@@ -1827,27 +1875,53 @@ const Preset = _ref => {
   const handleSave = useCallback(async () => {
     setLoading(true);
     try {
-      const values = await form.validateFields();
-      console.log('Form values:', values);
+      var _fields$name, _fields$category_list2;
+      const values = await form.getFieldsValue();
+
+      // 验证预设名称
+      if ((_fields$name = fields.name) !== null && _fields$name !== void 0 && _fields$name.required) {
+        if (!values.name || values.name.trim() === '') {
+          AntdMessage.error('Name is required.');
+          return; // 直接返回 不执行
+        }
+      }
+
+      // 验证分类列表
+      if ((_fields$category_list2 = fields.category_list) !== null && _fields$category_list2 !== void 0 && _fields$category_list2.required) {
+        if (!values.category_list || values.category_list.length === 0) {
+          AntdMessage.error('No category selected.');
+          return;
+        }
+      }
       await savePreset(values);
       AntdMessage.success(texts.successText);
+      const savedPresetName = values.name;
+
       // 刷新列表
-      await fetchPresetList();
+      const data = await getPresetList();
+      const presets = (data === null || data === void 0 ? void 0 : data.preset_list) || data || [];
+      setPresetList(presets);
 
-      // 重置表单和选择状态
-      setSelectedPreset(null);
-      form.resetFields();
-    } catch (error) {
-      if (error.errorFields) {
-        // 表单验证错误
-        console.error('Form validation failed:', error.errorFields);
+      // 在刷新后的列表中查找同名的预设
+      const newlySavedPreset = presets.find(item => item.name === savedPresetName);
+      if (newlySavedPreset) {
+        setSelectedPreset(newlySavedPreset);
+        form.setFieldsValue(newlySavedPreset);
+        setPresetChanged(prev => prev + 1);
       } else {
-        console.error('Failed to save preset:', error);
+        setSelectedPreset(values);
       }
+    } catch (error) {
+      console.error('Failed to save preset:', error);
     } finally {
       setLoading(false);
     }
-  }, [form, AntdMessage, fetchPresetList, savePreset, texts]);
+  }, [form, AntdMessage, texts, savePreset, getPresetList]);
+
+  // 初始化数据
+  useEffect(() => {
+    fetchPresetList();
+  }, [fetchPresetList]);
   return /*#__PURE__*/jsx(Modal, {
     title: texts.title,
     width: width,
@@ -1913,7 +1987,7 @@ const Preset = _ref => {
 };
 var PresetModal = /*#__PURE__*/memo(Preset);
 
-const _excluded = ["menuItems", "onMenuClick", "downloadFiles", "upgradeExecute", "upgradeStatus", "acceptFileTypes", "uploadCompleteDelay", "statusPollingInterval", "children"];
+const _excluded$1 = ["menuItems", "onMenuClick", "downloadFiles", "upgradeExecute", "upgradeStatus", "acceptFileTypes", "uploadCompleteDelay", "statusPollingInterval", "children"];
 const UpgradeManager = _ref => {
   let {
       menuItems = [],
@@ -1926,7 +2000,7 @@ const UpgradeManager = _ref => {
       statusPollingInterval = 1000,
       children
     } = _ref,
-    dropdownProps = _objectWithoutProperties(_ref, _excluded);
+    dropdownProps = _objectWithoutProperties(_ref, _excluded$1);
   const [upgradeElement] = useUpgrade$1({
     menuItems,
     onMenuClick,
@@ -3321,7 +3395,9 @@ const CommonHeader = _ref => {
     getSocketUrl = defaultGetSocketUrl,
     logoProps = {},
     className = '',
-    style = {}
+    style = {},
+    // 新增插槽
+    leftContent // 左侧额外内容
   } = _ref;
   const [logo] = useSpaLogo$1(logoProps);
 
@@ -3351,7 +3427,7 @@ const CommonHeader = _ref => {
           },
           children: productInfo.version
         })]
-      })]
+      }), leftContent]
     }), /*#__PURE__*/jsxs(Flex, {
       align: "center",
       gap: 10,
@@ -3395,5 +3471,320 @@ CommonHeader.propTypes = {
 };
 var CommonHeader$1 = CommonHeader;
 
-export { AuthorizationModal$1 as AuthorizationModal, CommonHeader$1 as CommonHeader, NetworkSettingsModal$1 as NetworkSettingsModal, PresetModal, PtpModal$1 as PtpModal, SystemOperations$1 as SystemOperations, UpgradeManager$1 as UpgradeManager, useAuth, useHardwareUsage$1 as useHardwareUsage, useSystemOperations$1 as useSystemOperations, useUpgrade$1 as useUpgrade };
+const _excluded = ["value", "min", "max", "className", "disablePointerLock", "modifierKeys", "decimalPlaces", "onChange", "onDragStart", "onDragEnd", "style"];
+
+// 默认配置
+const DEFAULT_DECIMAL_PLACES = 2;
+
+// src/react/defaults-and-utils.ts
+// eslint-disable-next-line no-var
+var defaultModifiers = {
+  default: {
+    multiplier: 1,
+    sensitivity: 1
+  }
+  // ctrlKey: { multiplier: 1, sensitivity: 1 },
+  // shiftKey: { multiplier: 10, sensitivity: 0.5 },
+  // metaKey: { multiplier: 1, sensitivity: 1 },
+  // altKey: { multiplier: 1, sensitivity: 1 }
+};
+
+// multiplier: 控制每次鼠标移动时数值变化的基本单位 multiplier: 1- 鼠标移动1像素，值变化1 multiplier: 10- 鼠标移动1像素，值变化10
+// sensitivity: 控制数值变化的灵敏度 sensitivity: 1- 正常灵敏度 sensitivity: 0.5- 减半灵敏度，需要移动2像素才能产生正常1像素的效果
+
+// 修改 formatNumber 函数，强制显示1位小数
+function formatNumber(value) {
+  let decimalPlaces = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_DECIMAL_PLACES;
+  return new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: decimalPlaces,
+    maximumFractionDigits: decimalPlaces,
+    useGrouping: false
+  }).format(value);
+}
+function handleArrow(e, multiplier, value) {
+  if (e.key === "ArrowUp") {
+    return value + multiplier;
+  }
+  if (e.key === "ArrowDown") {
+    return value - multiplier;
+  }
+  return value;
+}
+
+// eslint-disable-next-line no-var
+var DragCursor = _ref => {
+  let {
+    cursorPosition
+  } = _ref;
+  return /* @__PURE__ */React.createElement("div", {
+    style: {
+      position: "fixed",
+      left: 0,
+      top: 0,
+      width: "100vw",
+      height: "100vh",
+      pointerEvents: "none"
+    }
+  }, /* @__PURE__ */React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    style: {
+      position: "absolute",
+      left: cursorPosition.x,
+      top: cursorPosition.y,
+      transform: "translate(-50%, -50%)",
+      pointerEvents: "none"
+    }
+  }, /* @__PURE__ */React.createElement("path", {
+    fill: "#000",
+    stroke: "#fff",
+    strokeLinejoin: "round",
+    d: "M6.5 9a.5.5 0 0 0-.8-.4l-4 3a.5.5 0 0 0 0 .8l4 3a.5.5 0 0 0 .8-.4v-1.5h11V15a.5.5 0 0 0 .8.4l4-3a.5.5 0 0 0 0-.8l-4-3a.5.5 0 0 0-.8.4v1.5h-11V9Z",
+    style: {
+      filter: "drop-shadow( 0px 2px 1px rgba(0, 0, 0, .35))"
+    }
+  })));
+};
+
+// eslint-disable-next-line no-var
+var noop = () => {};
+function DraggableNumberInput(_ref2) {
+  let {
+      value,
+      min,
+      max,
+      className = "",
+      disablePointerLock = false,
+      modifierKeys,
+      decimalPlaces = DEFAULT_DECIMAL_PLACES,
+      onChange = noop,
+      onDragStart = noop,
+      onDragEnd = noop,
+      style
+    } = _ref2,
+    restProps = _objectWithoutProperties(_ref2, _excluded);
+  const inputRef = useRef(null);
+  const [isMouseDown, setIsMouseDown] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [localValue, setLocalValue] = useState(() => formatNumber(value, decimalPlaces));
+  const [cursorPosition, setCursorPosition] = useState({
+    x: 0,
+    y: 0
+  });
+  const totalMovement = useRef(0);
+  const startValue = useRef(0);
+  const startX = useRef(0);
+  const currentMultiplier = useRef(1);
+
+  // === 新增：编辑状态跟踪 ===
+  const [isEditing, setIsEditing] = useState(false);
+  const lastExternalValueRef = useRef(value);
+
+  // 修改 formatNumber 调用，传入 decimalPlaces
+  const formatValue = useCallback(val => {
+    return formatNumber(val, decimalPlaces);
+  }, [decimalPlaces]);
+  const constrainedOnChange = useCallback(newValue => {
+    let constrainedValue = newValue;
+    if (typeof min === "number") {
+      constrainedValue = Math.max(min, constrainedValue);
+    }
+    if (typeof max === "number") {
+      constrainedValue = Math.min(max, constrainedValue);
+    }
+    onChange(constrainedValue);
+  }, [onChange, min, max]);
+  useEffect(() => {
+    // 只有当用户不在编辑状态，且外部值真正变化时才更新
+    if (!isEditing && lastExternalValueRef.current !== value) {
+      const formattedValue = formatValue(value);
+      setLocalValue(formattedValue);
+      lastExternalValueRef.current = value;
+    }
+  }, [value, formatValue, isEditing]);
+  const handleInputChange = e => {
+    const val = e.target.value;
+
+    // 标记为编辑状态
+    setIsEditing(true);
+    setLocalValue(val);
+
+    // 允许输入中间状态，不立即触发onChange
+    if (val === '' || val === '-' || val === '.' || val.endsWith('.')) {
+      return; // 输入中，不触发onChange
+    }
+    const num = parseFloat(val);
+    if (!isNaN(num)) {
+      constrainedOnChange(num);
+    }
+  };
+  const handleBlur = () => {
+    // 退出编辑状态
+    setIsEditing(false);
+    const num = parseFloat(localValue);
+    if (!isNaN(num)) {
+      // 根据 decimalPlaces 进行四舍五入
+      const precision = Math.pow(10, decimalPlaces);
+      const processedValue = Math.round(num * precision) / precision;
+      const formattedValue = formatValue(processedValue);
+
+      // 更新显示值
+      setLocalValue(formattedValue);
+      lastExternalValueRef.current = processedValue;
+      // 触发外部变化
+      constrainedOnChange(processedValue);
+    } else {
+      // 如果输入无效，重置为当前外部值
+      const formattedValue = formatValue(value);
+      setLocalValue(formattedValue);
+    }
+  };
+  const handleMouseDown = useCallback(e => {
+    if (!inputRef.current) return;
+    let x = 0,
+      y = 0;
+    if ("clientX" in e && "clientY" in e) {
+      [x, y] = [e.clientX, e.clientY];
+    }
+    if ("touches" in e) {
+      [x, y] = [e.touches[0].clientX, e.touches[0].clientY];
+    }
+    setIsMouseDown(true);
+    startX.current = x;
+    startValue.current = value;
+    totalMovement.current = 0;
+    setCursorPosition({
+      x,
+      y
+    });
+  }, [value, disablePointerLock]);
+  const updateDelta = useCallback(e => {
+    if (!isMouseDown) return;
+    applyMovement(totalMovement.current, e);
+  }, [isMouseDown]);
+  const getModifiers = useCallback(e => {
+    const mods = _objectSpread2(_objectSpread2({}, defaultModifiers), modifierKeys);
+    for (const key in mods) {
+      if (key !== "default" && e[key]) {
+        currentMultiplier.current = mods[key].multiplier;
+        return mods[key];
+      }
+    }
+    currentMultiplier.current = mods.default.multiplier;
+    return mods.default;
+  }, [modifierKeys]);
+  const applyMovement = useCallback((newMovement, e) => {
+    const {
+      sensitivity,
+      multiplier
+    } = getModifiers(e);
+    const delta = newMovement * sensitivity * multiplier;
+    let newValue = startValue.current + delta;
+    // 根据 decimalPlaces 进行精度控制
+    const precision = Math.pow(10, decimalPlaces);
+    newValue = Math.round(newValue * precision) / precision;
+    newValue = Object.is(newValue, -0) ? 0 : newValue;
+    constrainedOnChange(newValue);
+  }, [constrainedOnChange, getModifiers, decimalPlaces]);
+  const handleArrowKeyDown = e => {
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      e.preventDefault();
+      const {
+        multiplier
+      } = getModifiers(e);
+      const newValue = handleArrow(e, multiplier, value);
+      constrainedOnChange(newValue);
+    }
+  };
+  const handleModifierKeyDuringDrag = useCallback(e => {
+    if (e.key === "Shift" || e.key === "Control" || e.key === "Meta" || e.key === "Alt") {
+      updateDelta(e);
+    }
+  }, [updateDelta]);
+  const handleMouseMove = useCallback(e => {
+    if (!isMouseDown) return;
+    if ("touches" in e) {
+      e.preventDefault();
+    }
+    if (!disablePointerLock && document.pointerLockElement && !("touches" in e)) {
+      setCursorPosition(prev => {
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        const x2 = (prev.x + e.movementX + width) % width;
+        const y = (prev.y + e.movementY + height) % height;
+        return {
+          x: x2,
+          y
+        };
+      });
+    }
+    const x = "touches" in e ? e.touches[0].clientX : e.clientX;
+    const newMovement = disablePointerLock || "touches" in e ? x - startX.current : totalMovement.current + e.movementX;
+    if (!isDragging && newMovement !== 0) {
+      if (!disablePointerLock && !("touches" in e)) {
+        var _inputRef$current, _inputRef$current$req;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || (_inputRef$current$req = _inputRef$current.requestPointerLock) === null || _inputRef$current$req === void 0 || _inputRef$current$req.call(_inputRef$current);
+      }
+      setIsDragging(true);
+      document.addEventListener("keydown", handleModifierKeyDuringDrag);
+      document.addEventListener("keyup", handleModifierKeyDuringDrag);
+      onDragStart();
+    }
+    totalMovement.current = newMovement;
+    applyMovement(newMovement, e);
+  }, [isMouseDown, disablePointerLock, startX, isDragging, onDragStart, applyMovement]);
+  const handleMouseUp = useCallback(() => {
+    setIsMouseDown(false);
+    totalMovement.current = 0;
+    if (isDragging) {
+      setIsDragging(false);
+      document.removeEventListener("keydown", handleModifierKeyDuringDrag);
+      document.removeEventListener("keyup", handleModifierKeyDuringDrag);
+      onDragEnd();
+    }
+    if (document.pointerLockElement) {
+      document.exitPointerLock();
+    }
+  }, [isDragging, onDragEnd, disablePointerLock]);
+  useEffect(() => {
+    if (isMouseDown) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("touchmove", handleMouseMove, {
+        passive: false
+      });
+      document.addEventListener("mouseup", handleMouseUp);
+      document.addEventListener("touchend", handleMouseUp);
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        document.removeEventListener("touchmove", handleMouseMove);
+        document.removeEventListener("touchend", handleMouseUp);
+      };
+    }
+  }, [isMouseDown, handleMouseMove, handleMouseUp]);
+  return /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("input", _objectSpread2({
+    ref: inputRef,
+    type: "text",
+    inputMode: "numeric",
+    pattern: "-?[0-9]*\\.?[0-9]*",
+    value: localValue,
+    onChange: handleInputChange,
+    onBlur: handleBlur,
+    onMouseDown: handleMouseDown,
+    onTouchStart: handleMouseDown,
+    onKeyDown: handleArrowKeyDown,
+    className: "draggable-number-input ".concat(className, " ").concat(isDragging ? "dragging" : ""),
+    style: _objectSpread2(_objectSpread2({}, {
+      cursor: "ew-resize",
+      userSelect: "none",
+      caretColor: isDragging ? "transparent" : "initial"
+    }), style)
+  }, restProps)), isDragging && !disablePointerLock && /* @__PURE__ */React.createElement(DragCursor, {
+    cursorPosition
+  }));
+}
+
+export { AuthorizationModal$1 as AuthorizationModal, CommonHeader$1 as CommonHeader, DraggableNumberInput, NetworkSettingsModal$1 as NetworkSettingsModal, PresetModal, PtpModal$1 as PtpModal, SystemOperations$1 as SystemOperations, UpgradeManager$1 as UpgradeManager, useAuth, useHardwareUsage$1 as useHardwareUsage, useSystemOperations$1 as useSystemOperations, useUpgrade$1 as useUpgrade };
 //# sourceMappingURL=index.esm.js.map