cheminfo · hamed-musallam · Aug 4, 2025 · Aug 4, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -62,11 +62,11 @@
     "@blueprintjs/select": "^6.0.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@hookform/resolvers": "^5.1.1",
+    "@hookform/resolvers": "^5.2.1",
     "@zakodium/nmr-types": "^0.1.0",
     "@zakodium/nmrium-core": "^0.1.5",
     "@zakodium/nmrium-core-plugins": "^0.1.8",
-    "@zip.js/zip.js": "^2.7.68",
+    "@zip.js/zip.js": "^2.7.71",
     "cheminfo-font": "^1.13.1",
     "cheminfo-types": "^1.8.1",
     "clipboard-polyfill": "^4.1.1",
@@ -78,7 +78,7 @@
     "file-saver": "^2.0.5",
     "immer": "^10.1.1",
     "lodash": "^4.17.21",
-    "mf-parser": "^3.4.2",
+    "mf-parser": "^3.5.0",
     "ml-array-mean": "^1.1.6",
     "ml-array-median": "^1.1.6",
     "ml-conrec": "^5.0.3",
@@ -95,7 +95,7 @@
     "react-d3-utils": "^3.1.1",
     "react-dropzone": "^14.3.8",
     "react-error-boundary": "^6.0.0",
-    "react-hook-form": "^7.61.1",
+    "react-hook-form": "^7.62.0",
     "react-icons": "^5.5.0",
     "react-inspector": "^6.0.2",
     "react-mf": "^3.1.0",
@@ -106,10 +106,10 @@
     "react-science": "^19.1.0",
     "react-table": "^7.8.0",
     "smart-array-filter": "^4.1.1",
-    "yup": "^1.6.1"
+    "yup": "^1.7.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.54.1",
+    "@playwright/test": "^1.54.2",
     "@simbathesailor/use-what-changed": "^2.0.0",
     "@types/d3": "^7.4.3",
     "@types/dlv": "^1.1.5",
@@ -122,10 +122,10 @@
     "@vitejs/plugin-react": "^4.7.0",
     "@vitest/coverage-v8": "^3.2.4",
     "@zakodium/tsconfig": "^1.0.2",
-    "cross-env": "^7.0.3",
+    "cross-env": "^10.0.0",
     "cspell": "^9.2.0",
-    "eslint": "^9.31.0",
-    "eslint-config-cheminfo-react": "^17.0.0",
+    "eslint": "^9.32.0",
+    "eslint-config-cheminfo-react": "^17.0.1",
     "eslint-config-cheminfo-typescript": "^19.0.0",
     "knip": "^5.62.0",
     "modern-normalize": "^3.0.1",
@@ -134,17 +134,17 @@
     "rc-menu": "^9.16.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^7.7.0",
+    "react-router-dom": "^7.7.1",
     "rimraf": "^6.0.1",
     "rollup-plugin-analyzer": "^4.0.0",
     "serve": "^14.2.4",
-    "stylelint": "^16.22.0",
+    "stylelint": "^16.23.0",
     "stylelint-config-standard": "^38.0.0",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.2",
     "vite": "^7.0.6",
     "vitest": "^3.2.4"
   },
   "volta": {
     "node": "24.4.1"
   }
-}
+}
diff --git a/src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx b/src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx
@@ -36,13 +36,13 @@
   border: 1px solid transparent;
 
   .content {
-    width: 100%;
     height: 100%;
+    width: 100%;
   }
 
   &:hover {
-    border: 1px solid #ebecf1;
     background-color: white;
+    border: 1px solid #ebecf1;
   }
 `;
 
@@ -59,7 +59,7 @@
  const [isMoveActive, setIsMoveActive] = useState(false);

  useEffect(() => {
    setBounding({ ...moleculeView.floating.bounding });
  }, [moleculeView.floating.bounding]);

  function floatMoleculeHandler() {

diff --git a/src/component/1d-2d/tools/BrushXY.tsx b/src/component/1d-2d/tools/BrushXY.tsx
@@ -21,10 +21,10 @@ const LabelWrapper = styled.span`
   position: absolute;
   top: 0;
   left: 0;
-  transform-origin: center;
+  color: black;
   font-size: 12px;
+  transform-origin: center;
   will-change: transform;
-  color: black;
 `;
 
 const baseStyles: CSSProperties = {

diff --git a/src/component/1d/FloatPublicationString.tsx b/src/component/1d/FloatPublicationString.tsx
@@ -22,8 +22,8 @@
   border: 1px solid transparent;
 
   &:hover {
-    border: 1px solid #ebecf1;
     background-color: white;
+    border: 1px solid #ebecf1;
 
     button {
       visibility: visible;
@@ -138,7 +138,7 @@
  const isExportProcessStart = useCheckExportStatus();

  useEffect(() => {
    setBounding({ ...externalBounding });
  }, [externalBounding]);

  function handleResize(

diff --git a/src/component/1d/FloatingRanges.tsx b/src/component/1d/FloatingRanges.tsx
@@ -27,8 +27,8 @@
   border: 1px solid transparent;
 
   &:hover {
-    border: 1px solid #ebecf1;
     background-color: white;
+    border: 1px solid #ebecf1;
 
     button {
       visibility: visible;
@@ -176,7 +176,7 @@
  const isExportProcessStart = useCheckExportStatus();

  useEffect(() => {
    setBounding({ ...externalBounding });
  }, [externalBounding]);

  function handleResize(

diff --git a/src/component/1d/FooterBanner.tsx b/src/component/1d/FooterBanner.tsx
@@ -26,9 +26,9 @@ const InfoBlock = styled(InfoItem)`
 
 const Separator = styled.div`
   border-left: 2px solid gray;
+  height: 10px;
   margin: 0 10px;
   width: 1px;
-  height: 10px;
 `;
 
 interface FooterBannerInnerProps {

diff --git a/src/component/1d/PredictionErrorsNotations.tsx b/src/component/1d/PredictionErrorsNotations.tsx
@@ -31,9 +31,9 @@ const InfoHeader = styled.div`
 `;
 
 const BaseText = styled.span`
-  text-align: center;
   flex: 1;
   font-size: 12px;
+  text-align: center;
 `;
 
 const Text = styled(BaseText)`

diff --git a/src/component/1d/inset/DraggableInset.tsx b/src/component/1d/inset/DraggableInset.tsx
@@ -41,8 +41,8 @@
   border: 1px solid transparent;
 
   &:hover {
-    border: 1px solid #ebecf1;
     background-color: white;
+    border: 1px solid #ebecf1;
 
     button {
       visibility: visible;
@@ -67,7 +67,7 @@
  const isExportProcessStart = useCheckExportStatus();

  useEffect(() => {
    setBounding({ ...externalBounding });
  }, [externalBounding]);

  function handleResize(

diff --git a/src/component/1d/multiAnalysis/AnalysisRange.tsx b/src/component/1d/multiAnalysis/AnalysisRange.tsx
@@ -8,8 +8,8 @@ import { useHighlight } from '../../highlight/index.js';
 import { useResizerStatus } from '../../hooks/useResizerStatus.js';
 
 const Rect = styled.rect<{ isActive: boolean }>`
-  height: ${({ isActive }) => (isActive ? '100%' : '6px')};
   fill: ${({ isActive }) => (isActive ? '#ff6f0057' : 'green')};
+  height: ${({ isActive }) => (isActive ? '100%' : '6px')};
 `;
 
 interface AnalysisRangeProps {

diff --git a/src/component/2d/SignalDeltaLine.tsx b/src/component/2d/SignalDeltaLine.tsx
@@ -5,9 +5,9 @@ import { useChartData } from '../context/ChartContext.js';
 import { useScale2DX, useScale2DY } from './utilities/scale.js';
 
 const SignalLine = styled.line`
+  opacity: 0.5;
   stroke: green;
   stroke-width: 2;
-  opacity: 0.5;
 `;
 
 interface SignalDeltaLineProps {

diff --git a/src/component/elements/ActionsButtonsPopover.tsx b/src/component/elements/ActionsButtonsPopover.tsx
@@ -14,24 +14,24 @@ const Container = styled.div<Pick<CSSProperties, 'flexDirection' | 'gap'>>`
   button,
   a[role='button'] {
     border-radius: 50%;
-    min-width: 16px;
-    min-height: 16px;
     font-size: 10px;
+    min-height: 16px;
+    min-width: 16px;
     padding: 5px;
   }
 `;
 
 const HorizontalSeparator = styled.div`
   border-left: 1px solid #dedede;
+  height: 10px;
   margin: auto 5px;
   width: 1px;
-  height: 10px;
 `;
 const VerticalSeparator = styled.div`
   border-top: 1px solid #dedede;
+  height: 1px;
   margin: 5px auto;
   width: 10px;
-  height: 1px;
 `;
 
 interface PopoverButtonProps extends ButtonProps {

diff --git a/src/component/elements/Alert.tsx b/src/component/elements/Alert.tsx
@@ -5,10 +5,10 @@ import type { ReactNode } from 'react';
 import { createContext, useContext, useMemo, useState } from 'react';
 
 const Message = styled.p`
-  font-weight: bold;
+  color: #af0000;
   font-size: 14px;
+  font-weight: bold;
   text-align: center;
-  color: #af0000;
 `;
 
 const Footer = styled(DialogFooter)`

diff --git a/src/component/elements/Button.tsx b/src/component/elements/Button.tsx
@@ -119,32 +119,32 @@ function getFillStyle(props: ButtonStyle) {
   switch (fill) {
     case 'solid': {
       return css`
-        border-color: transparent;
         background-color: ${backgroundColor.base};
+        border-color: transparent;
         color: ${color.hover};
       `;
     }
     case 'outline': {
       return css`
-        border-style: solid;
-        border-color: ${backgroundColor.base};
         background-color: transparent;
+        border-color: ${backgroundColor.base};
+        border-style: solid;
         color: ${color.base};
       `;
     }
 
     case 'clear': {
       return css`
-        border-color: transparent;
         background-color: transparent;
+        border-color: transparent;
         color: ${color.base};
       `;
     }
     default:
       return css`
         background-color: ${backgroundColor.base};
-        color: ${color.base};
         border-color: ${borderColor};
+        color: ${color.base};
       `;
   }
 }
@@ -160,10 +160,10 @@ const styles: Style = {
     } = props;
 
     const basic = css`
+      align-items: center;
+      border-width: 1px;
       display: flex;
       flex-direction: row;
-      border-width: 1px;
-      align-items: center;
 
       &:hover + .content {
         display: flex;

diff --git a/src/component/elements/DraggableDialog.tsx b/src/component/elements/DraggableDialog.tsx
@@ -19,12 +19,12 @@ import type { ReactNode, RefObject } from 'react';
 import { useLayoutEffect, useRef } from 'react';
 
 const Container = styled.div`
-  min-height: 100%;
-  pointer-events: none;
-  user-select: none;
   position: absolute;
   top: 0;
   left: 0;
+  min-height: 100%;
+  pointer-events: none;
+  user-select: none;
   width: 100%;
 `;
 

diff --git a/src/component/elements/EditableColumn.tsx b/src/component/elements/EditableColumn.tsx
@@ -18,9 +18,9 @@ interface OverflowProps {
 
 const Text = styled.span<OverflowProps>`
   display: table-cell;
+  height: 100%;
   vertical-align: middle;
   width: 100%;
-  height: 100%;
   ${({ textOverflowEllipses }) =>
     textOverflowEllipses &&
     `
@@ -31,9 +31,9 @@ const Text = styled.span<OverflowProps>`
 `;
 const Container = styled.span<OverflowProps>`
   display: table;
-  width: 100%;
-  min-height: 22px;
   height: 100%;
+  min-height: 22px;
+  width: 100%;
   ${({ textOverflowEllipses }) =>
     textOverflowEllipses &&
     `

diff --git a/src/component/elements/EmptyText.tsx b/src/component/elements/EmptyText.tsx
@@ -3,15 +3,15 @@ import type { CSSProperties } from 'react';
 import { FaRegEyeSlash } from 'react-icons/fa';
 
 const EmptyContainer = styled.div`
+  color: #6a6a6a;
   display: flex;
   justify-content: center;
-  color: #6a6a6a;
   padding: 1.5rem 0;
 `;
 
 const Icon = styled(FaRegEyeSlash)`
-  margin: 0 10px;
   font-size: 1.1rem;
+  margin: 0 10px;
 `;
 const Text = styled.span`
   font-size: 0.8rem;

diff --git a/src/component/elements/Footer.tsx b/src/component/elements/Footer.tsx
@@ -2,17 +2,17 @@ import styled from '@emotion/styled';
 import type { CSSProperties, ReactNode } from 'react';
 
 const FooterContainer = styled.div`
-  display: flex;
+  position: absolute;
+  bottom: 0;
   align-items: center;
-  user-select: none;
   background-color: #f7f7f7;
+  color: #8d0018;
+  container-type: inline-size;
+  display: flex;
   height: 30px;
   padding: 6px;
-  color: #8d0018;
-  position: absolute;
+  user-select: none;
   width: 100%;
-  bottom: 0;
-  container-type: inline-size;
 `;
 
 interface InfoContainerProps {
@@ -25,8 +25,8 @@ interface InfoContainerProps {
 }
 
 const InfoContainer = styled.div<InfoContainerProps>`
-  margin: 0 10px;
   display: ${({ display = 'inline-block' }) => display};
+  margin: 0 10px;
 
   @container (max-width:${({ hideThreshold = 600 }) => hideThreshold}px) {
     display: ${({ autoHide = false, display = 'inline-block' }) =>
@@ -64,13 +64,13 @@ const Span = styled.span`
 `;
 
 InfoItem.Label = styled(Span)`
-  font-size: 12px;
   color: #4d4d4d;
+  font-size: 12px;
 `;
 
 InfoItem.Value = styled(Span)`
-  font-size: 14px;
   display: inline-block;
+  font-size: 14px;
 `;
 
 InfoItem.Unit = styled(Span)`