.vscode/settings.json

@@ -66,7 +66,6 @@
     "ADVB",
     "Analyse",
     "Backquote",
-    "bezier",
     "BIGPR",
     "cctext",
     "Certbot",

README.md

@@ -33,6 +33,7 @@ This readme file is used mostly to document project dependencies and conventions
   - react-icons
   - react-router
   - react-toastify
+  - react-loader-spinner
   - react-tabs
   - react-intl
   - react-select
@@ -42,6 +43,7 @@ This readme file is used mostly to document project dependencies and conventions
   - reactflow
   - js-file-download
   - use-debounce
+  - framer-motion
   - html-to-image
   - @tanstack/react-table
   - @uiw/react-codemirror

TODO.txt

@@ -17,14 +17,15 @@ For more specific TODOs see comments in code
 
 - Static analyzer for RSForm as a whole: check term duplication and empty conventions
 - OSS clone and versioning
-- Clone with saving info connection
-- Semantic diff for library items
 
 - Focus on codemirror editor when label is clicked (need React 19 ref for clean code solution)
 - Draggable rows in constituents table
 
-- Search functionality for Help Manuals - use google search integration filtered by site?
+- M-graph visualization for typification and RSForm in general
-- Export PDF (Items list, Graph)
+
+- replace reagraph with react-flow in TermGraph and FormulaGraph
+- Search functionality for Help Manuals
+- Export PDF (Items list, Graph) - use google search integration filtered by site?
 - ARIA (accessibility considerations) - for now machine reading not supported
 - Internationalization - at least english version. Consider react.intl
 - Sitemap for better SEO and crawler optimization
@@ -32,6 +33,7 @@ For more specific TODOs see comments in code
 [Functionality - CANCELED]
 - User notifications on edit - consider spam prevention and change aggregation
 - Content based search in Library
+- Home page (user specific)
 - Private projects. Consider cooperative editing
 - OSS: synthesis table: auto substitution for diamond synthesis
 
@@ -40,8 +42,10 @@ For more specific TODOs see comments in code
 - duplicate syntax parsing and type info calculations to client. Consider moving backend to Nodejs or embedding c++ lib
 - add debounce to some search fields. Consider pagination and dynamic loading
 - move autopep8 and isort settings from vscode settings to pyproject.toml
+- Test UI for #enable-force-dark Chrome setting
 
 - Testing: frontend react components, testplane / playwright?
+- Documentation: frontend base components at least
 
 
 [Deployment]

rsconcept/backend/requirements-dev-lock.txt

@@ -3,18 +3,17 @@ Django==5.1.3
 djangorestframework==3.15.2
 django-cors-headers==4.6.0
 django-filter==24.3
-drf-spectacular==0.28.0
+drf-spectacular==0.27.2
-drf-spectacular-sidecar==2024.12.1
+drf-spectacular-sidecar==2024.11.1
 coreapi==2.3.3
 django-rest-passwordreset==1.5.0
 cctext==0.1.4
-pyconcept==0.1.12
+pyconcept==0.1.11
 
 psycopg2-binary==2.9.10
 gunicorn==23.0.0
 djangorestframework-stubs==3.15.1
 django-extensions==3.2.3
-django-stubs==5.1.1
+mypy==1.11.2
-mypy==1.13.0
+pylint==3.3.1
-pylint==3.3.2
+coverage==7.6.5
-coverage==7.6.8

rsconcept/backend/requirements-dev.txt

@@ -15,7 +15,6 @@ gunicorn
 
 djangorestframework-stubs[compatible-mypy]
 django-extensions
-django-stubs
 mypy
 pylint
 coverage

rsconcept/backend/requirements.txt

@@ -3,12 +3,12 @@ Django==5.1.3
 djangorestframework==3.15.2
 django-cors-headers==4.6.0
 django-filter==24.3
-drf-spectacular==0.28.0
+drf-spectacular==0.27.2
-drf-spectacular-sidecar==2024.12.1
+drf-spectacular-sidecar==2024.11.1
 coreapi==2.3.3
 django-rest-passwordreset==1.5.0
 cctext==0.1.4
-pyconcept==0.1.12
+pyconcept==0.1.11
 
 psycopg2-binary==2.9.10
 gunicorn==23.0.0

rsconcept/frontend/index.html

@@ -21,7 +21,6 @@
 
     <title>Концепт Портал</title>
 
-    <!-- <script src="https://unpkg.com/react-scan/dist/auto.global.js"></script> -->
     <script>
       let isDark = false;
       if ('portal.theme.dark' in localStorage) {

rsconcept/frontend/package.json

@@ -17,17 +17,20 @@
     "@tanstack/react-table": "^8.20.5",
     "@uiw/codemirror-themes": "^4.23.6",
     "@uiw/react-codemirror": "^4.23.6",
-    "axios": "^1.7.9",
+    "axios": "^1.7.8",
     "clsx": "^2.1.1",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "framer-motion": "^11.12.0",
     "html-to-image": "^1.11.11",
     "js-file-download": "^0.4.12",
-    "react": "^19.0.0",
+    "react": "^18.3.1",
-    "react-dom": "^19.0.0",
+    "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
-    "react-icons": "^5.4.0",
+    "react-icons": "^5.3.0",
-    "react-intl": "^7.0.4",
+    "react-intl": "^7.0.1",
-    "react-router": "^7.0.2",
+    "react-loader-spinner": "^6.1.6",
-    "react-select": "^5.9.0",
+    "react-router": "^7.0.1",
+    "react-select": "^5.8.3",
     "react-tabs": "^6.0.2",
     "react-toastify": "^10.0.6",
     "react-tooltip": "^5.28.0",
@@ -36,30 +39,26 @@
     "use-debounce": "^10.0.4"
   },
   "devDependencies": {
-    "@lezer/generator": "^1.7.2",
+    "@lezer/generator": "^1.7.1",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.10.2",
+    "@types/node": "^22.10.1",
-    "@types/react": "^19.0.1",
+    "@types/react": "^18.3.12",
-    "@types/react-dom": "^19.0.2",
+    "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^8.0.1",
     "@typescript-eslint/parser": "^8.0.1",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.16.0",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "globals": "^15.13.0",
     "jest": "^29.7.0",
     "postcss": "^8.4.49",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^3.4.15",
     "ts-jest": "^29.2.5",
     "typescript": "^5.7.2",
-    "typescript-eslint": "^8.18.0",
+    "typescript-eslint": "^8.16.0",
-    "vite": "^6.0.3"
+    "vite": "^6.0.2"
-  },
-  "overrides": {
-    "react": "^19.0.0"
   },
   "jest": {
     "preset": "ts-jest",

rsconcept/frontend/src/app/ApplicationLayout.tsx

@@ -1,10 +1,8 @@
-import { Suspense } from 'react';
 import { Outlet } from 'react-router';
 
 import ConceptToaster from '@/app/ConceptToaster';
 import Footer from '@/app/Footer';
 import Navigation from '@/app/Navigation';
-import Loader from '@/components/ui/Loader';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { NavigationState } from '@/context/NavigationContext';
 import { globals } from '@/utils/constants';
@@ -31,9 +29,7 @@ function ApplicationLayout() {
           }}
         >
           <main className='cc-scroll-y' style={{ overflowY: showScroll ? 'scroll' : 'auto', minHeight: mainHeight }}>
-            <Suspense fallback={<Loader />}>
+            <Outlet />
-              <Outlet />
-            </Suspense>
           </main>
           <Footer />
         </div>

rsconcept/frontend/src/app/Navigation/Logo.tsx

@@ -1,3 +1,5 @@
+import clsx from 'clsx';
+
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import useWindowSize from '@/hooks/useWindowSize';
 
@@ -8,7 +10,7 @@ function Logo() {
   return (
     <img
       alt=''
-      className='max-h-[1.6rem] w-fit max-w-[11.4rem]'
+      className={clsx('max-h-[1.6rem] w-fit max-w-[11.4rem]')}
       src={size.isSmall ? '/logo_sign.svg' : !darkMode ? '/logo_full.svg' : '/logo_full_dark.svg'}
     />
   );

rsconcept/frontend/src/app/Navigation/Navigation.tsx

@@ -1,11 +1,11 @@
 import clsx from 'clsx';
+import { motion } from 'framer-motion';
 
 import { IconLibrary2, IconManuals, IconNewItem2 } from '@/components/Icons';
 import { CProps } from '@/components/props';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { useConceptNavigation } from '@/context/NavigationContext';
-import useWindowSize from '@/hooks/useWindowSize';
+import { animateNavigation } from '@/styling/animations';
-import { PARAMETER } from '@/utils/constants';
 
 import { urls } from '../urls';
 import Logo from './Logo';
@@ -15,7 +15,6 @@ import UserMenu from './UserMenu';
 
 function Navigation() {
   const router = useConceptNavigation();
-  const size = useWindowSize();
   const { noNavigationAnimation } = useConceptOptions();
 
   const navigateHome = (event: CProps.EventMouse) => router.push(urls.home, event.ctrlKey || event.metaKey);
@@ -34,24 +33,17 @@ function Navigation() {
       )}
     >
       <ToggleNavigation />
-      <div
+      <motion.div
         className={clsx(
           'pl-2 pr-[1.5rem] sm:pr-[0.9rem] h-[3rem]', // prettier: split lines
           'flex',
           'cc-shadow-border'
         )}
-        style={{
+        initial={false}
-          transitionProperty: 'height, translate',
+        animate={!noNavigationAnimation ? 'open' : 'closed'}
-          transitionDuration: `${PARAMETER.moveDuration}ms`,
+        variants={animateNavigation}
-          height: noNavigationAnimation ? '0rem' : '3rem',
-          translate: noNavigationAnimation ? '0 -1.5rem' : '0'
-        }}
       >
-        <div
+        <div tabIndex={-1} className='flex items-center mr-auto cursor-pointer' onClick={navigateHome}>
-          tabIndex={-1}
-          className={clsx('flex items-center mr-auto', !size.isSmall && 'cursor-pointer')}
-          onClick={!size.isSmall ? navigateHome : undefined}
-        >
           <Logo />
         </div>
         <div className='flex gap-1 py-[0.3rem]'>
@@ -60,7 +52,7 @@ function Navigation() {
           <NavigationButton text='Справка' icon={<IconManuals size='1.5rem' />} onClick={navigateHelp} />
           <UserMenu />
         </div>
-      </div>
+      </motion.div>
     </nav>
   );
 }

rsconcept/frontend/src/app/Navigation/NavigationButton.tsx

@@ -3,22 +3,13 @@ import clsx from 'clsx';
 import { CProps } from '@/components/props';
 import { globals } from '@/utils/constants';
 
-interface NavigationButtonProps extends CProps.Titled, CProps.Styling {
+interface NavigationButtonProps extends CProps.Titled {
   text?: string;
   icon: React.ReactNode;
   onClick?: (event: CProps.EventMouse) => void;
 }
 
-function NavigationButton({
+function NavigationButton({ icon, title, titleHtml, hideTitle, onClick, text }: NavigationButtonProps) {
-  icon,
-  title,
-  className,
-  style,
-  titleHtml,
-  hideTitle,
-  onClick,
-  text
-}: NavigationButtonProps) {
   return (
     <button
       type='button'
@@ -38,10 +29,8 @@ function NavigationButton({
         {
           'px-2': text,
           'px-4': !text
-        },
+        }
-        className
       )}
-      style={style}
     >
       {icon ? <span>{icon}</span> : null}
       {text ? <span className='hidden sm:inline'>{text}</span> : null}

rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx

@@ -1,13 +1,15 @@
 import clsx from 'clsx';
+import { motion } from 'framer-motion';
 
 import { IconPin, IconUnpin } from '@/components/Icons';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
-import { globals, PARAMETER } from '@/utils/constants';
+import { animateNavigationToggle } from '@/styling/animations';
+import { globals } from '@/utils/constants';
 
 function ToggleNavigation() {
   const { noNavigationAnimation, toggleNoNavigation } = useConceptOptions();
   return (
-    <button
+    <motion.button
       type='button'
       tabIndex={-1}
       className={clsx(
@@ -18,18 +20,15 @@ function ToggleNavigation() {
         'select-none'
       )}
       onClick={toggleNoNavigation}
+      initial={false}
+      animate={noNavigationAnimation ? 'off' : 'on'}
+      variants={animateNavigationToggle}
       data-tooltip-id={globals.tooltip}
       data-tooltip-content={noNavigationAnimation ? 'Показать навигацию' : 'Скрыть навигацию'}
-      style={{
-        transitionProperty: 'height, width',
-        transitionDuration: `${PARAMETER.moveDuration}ms`,
-        height: noNavigationAnimation ? '1.2rem' : '3rem',
-        width: noNavigationAnimation ? '3rem' : '1.2rem'
-      }}
     >
       {!noNavigationAnimation ? <IconPin /> : null}
       {noNavigationAnimation ? <IconUnpin /> : null}
-    </button>
+    </motion.button>
   );
 }
 

rsconcept/frontend/src/app/Navigation/UserMenu.tsx

@@ -1,5 +1,8 @@
+import { AnimatePresence } from 'framer-motion';
+
 import { IconLogin, IconUser2 } from '@/components/Icons';
 import Loader from '@/components/ui/Loader';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useAuth } from '@/context/AuthContext';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { useConceptNavigation } from '@/context/NavigationContext';
@@ -16,25 +19,32 @@ function UserMenu() {
   const menu = useDropdown();
 
   const navigateLogin = () => router.push(urls.login);
-
   return (
     <div ref={menu.ref} className='h-full w-[4rem] flex items-center justify-center'>
-      {loading ? <Loader circular scale={1.5} /> : null}
+      <AnimatePresence mode='wait'>
-      {!user && !loading ? (
+        {loading ? (
-        <NavigationButton
+          <AnimateFade key='nav_user_badge_loader'>
-          className='cc-fade-in'
+            <Loader circular scale={1.5} />
-          title='Перейти на страницу логина'
+          </AnimateFade>
-          icon={<IconLogin size='1.5rem' className='icon-primary' />}
+        ) : null}
-          onClick={navigateLogin}
+        {!user && !loading ? (
-        />
+          <AnimateFade key='nav_user_badge_login' className='h-full'>
-      ) : null}
+            <NavigationButton
-      {user && !loading ? (
+              title='Перейти на страницу логина'
-        <NavigationButton
+              icon={<IconLogin size='1.5rem' className='icon-primary' />}
-          className='cc-fade-in'
+              onClick={navigateLogin}
-          icon={<IconUser2 size='1.5rem' className={adminMode && user.is_staff ? 'icon-primary' : ''} />}
+            />
-          onClick={menu.toggle}
+          </AnimateFade>
-        />
+        ) : null}
-      ) : null}
+        {user ? (
+          <AnimateFade key='nav_user_badge_profile' className='h-full'>
+            <NavigationButton
+              icon={<IconUser2 size='1.5rem' className={adminMode && user.is_staff ? 'icon-primary' : ''} />}
+              onClick={menu.toggle}
+            />
+          </AnimateFade>
+        ) : null}
+      </AnimatePresence>
       <UserDropdown isOpen={!!user && menu.isOpen} hideDropdown={() => menu.hide()} />
     </div>
   );

rsconcept/frontend/src/app/Router.tsx

@@ -1,25 +1,23 @@
-import React from 'react';
 import { createBrowserRouter } from 'react-router';
 
 import CreateItemPage from '@/pages/CreateItemPage';
+import DatabaseSchemaPage from '@/pages/DatabaseSchemaPage';
 import HomePage from '@/pages/HomePage';
+import IconsPage from '@/pages/IconsPage';
 import LibraryPage from '@/pages/LibraryPage';
 import LoginPage from '@/pages/LoginPage';
+import ManualsPage from '@/pages/ManualsPage';
 import NotFoundPage from '@/pages/NotFoundPage';
 import OssPage from '@/pages/OssPage';
+import PasswordChangePage from '@/pages/PasswordChangePage';
+import RegisterPage from '@/pages/RegisterPage';
+import RestorePasswordPage from '@/pages/RestorePasswordPage';
 import RSFormPage from '@/pages/RSFormPage';
+import UserProfilePage from '@/pages/UserProfilePage';
 
 import ApplicationLayout from './ApplicationLayout';
 import { routes } from './urls';
 
-const UserProfilePage = React.lazy(() => import('@/pages/UserProfilePage'));
-const RestorePasswordPage = React.lazy(() => import('@/pages/RestorePasswordPage'));
-const PasswordChangePage = React.lazy(() => import('@/pages/PasswordChangePage'));
-const RegisterPage = React.lazy(() => import('@/pages/RegisterPage'));
-const ManualsPage = React.lazy(() => import('@/pages/ManualsPage'));
-const IconsPage = React.lazy(() => import('@/pages/IconsPage'));
-const DatabaseSchemaPage = React.lazy(() => import('@/pages/DatabaseSchemaPage'));
-
 export const Router = createBrowserRouter([
   {
     path: '/',

rsconcept/frontend/src/components/Icons.tsx

@@ -22,7 +22,7 @@ export { BiShareAlt       as IconShare }          from 'react-icons/bi';
 export { LuFilter         as IconFilter }         from 'react-icons/lu';
 export { LuFilterX        as IconFilterReset }    from 'react-icons/lu';
 export {BiDownArrowCircle as IconOpenList }       from 'react-icons/bi';
-export { LuTriangleAlert  as IconAlert }          from 'react-icons/lu';
+export { LuAlertTriangle  as IconAlert }          from 'react-icons/lu';
 
 // ===== UI elements =======
 export { BiX              as IconClose }          from 'react-icons/bi';
@@ -36,7 +36,7 @@ export { LuFolderTree     as IconFolderTree }     from 'react-icons/lu';
 export { LuFolder         as IconFolder }         from 'react-icons/lu';
 export { LuFolderSearch   as IconFolderSearch }   from 'react-icons/lu';
 export { LuFolders        as IconSubfolders }     from 'react-icons/lu';
-export { LuFolderPen      as IconFolderEdit }     from 'react-icons/lu';
+export { LuFolderEdit     as IconFolderEdit }     from 'react-icons/lu';
 export { LuFolderOpen     as IconFolderOpened }   from 'react-icons/lu';
 export { LuFolderClosed   as IconFolderClosed }   from 'react-icons/lu';
 export { LuFolderDot      as IconFolderEmpty }    from 'react-icons/lu';
@@ -55,7 +55,7 @@ export { TbCalendarRepeat as IconDateUpdate }     from 'react-icons/tb';
 export { PiFileCsv        as IconCSV }            from 'react-icons/pi';
 
 // ==== User status =======
-export { LuCircleUserRound as IconUser }          from 'react-icons/lu';
+export { LuUserCircle2    as IconUser }           from 'react-icons/lu';
 export { FaCircleUser     as IconUser2 }          from 'react-icons/fa6';
 export { TbUserEdit       as IconEditor }         from 'react-icons/tb';
 export { TbUserSearch     as IconUserSearch }     from 'react-icons/tb';
@@ -131,7 +131,7 @@ export { FaSortAmountDownAlt as IconSortList }    from 'react-icons/fa';
 export { LuNetwork        as IconGenerateStructure } from 'react-icons/lu';
 export { LuCombine        as IconSynthesis }      from 'react-icons/lu';
 export { LuBookCopy       as IconInlineSynthesis } from 'react-icons/lu';
-export { LuWandSparkles   as IconGenerateNames }  from 'react-icons/lu';
+export { LuWand2          as IconGenerateNames }  from 'react-icons/lu';
 export { GrConnect        as IconConnect }        from 'react-icons/gr';
 export { BiPlayCircle     as IconExecute }        from 'react-icons/bi';
 

rsconcept/frontend/src/components/RefsInput/RefsInput.tsx

@@ -6,6 +6,7 @@ import { createTheme } from '@uiw/codemirror-themes';
 import CodeMirror, { BasicSetupOptions, ReactCodeMirrorProps, ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import clsx from 'clsx';
 import { EditorView } from 'codemirror';
+import { AnimatePresence } from 'framer-motion';
 import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
 
 import Label from '@/components/ui/Label';
@@ -206,20 +207,22 @@ const RefsInput = forwardRef<ReactCodeMirrorRef, RefsInputInputProps>(
 
     return (
       <div className={clsx('flex flex-col gap-2', cursor)}>
-        {showEditor && schema ? (
+        <AnimatePresence>
-          <DlgEditReference
+          {showEditor && schema ? (
-            hideWindow={hideEditReference}
+            <DlgEditReference
-            schema={schema}
+              hideWindow={hideEditReference}
-            initial={{
+              schema={schema}
-              type: currentType,
+              initial={{
-              refRaw: refText,
+                type: currentType,
-              text: hintText,
+                refRaw: refText,
-              basePosition: basePosition,
+                text: hintText,
-              mainRefs: mainRefs
+                basePosition: basePosition,
-            }}
+                mainRefs: mainRefs
-            onSave={handleInputReference}
+              }}
-          />
+              onSave={handleInputReference}
-        ) : null}
+            />
+          ) : null}
+        </AnimatePresence>
         <Label text={label} />
         <CodeMirror
           id={id}

rsconcept/frontend/src/components/info/BadgeHelp.tsx

@@ -1,15 +1,11 @@
-import React, { Suspense } from 'react';
-
 import TextURL from '@/components/ui/TextURL';
 import Tooltip, { PlacesType } from '@/components/ui/Tooltip';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { HelpTopic } from '@/models/miscellaneous';
+import TopicPage from '@/pages/ManualsPage/TopicPage';
 
 import { IconHelp } from '../Icons';
 import { CProps } from '../props';
-import Loader from '../ui/Loader';
-
-const TopicPage = React.lazy(() => import('@/pages/ManualsPage/TopicPage'));
 
 interface BadgeHelpProps extends CProps.Styling {
   /** Topic to display in a tooltip. */
@@ -38,14 +34,12 @@ function BadgeHelp({ topic, padding = 'p-1', ...restProps }: BadgeHelpProps) {
     <div tabIndex={-1} id={`help-${topic}`} className={padding}>
       <IconHelp size='1.25rem' className='icon-primary' />
       <Tooltip clickable anchorSelect={`#help-${topic}`} layer='z-modalTooltip' {...restProps}>
-        <Suspense fallback={<Loader />}>
+        <div className='relative' onClick={event => event.stopPropagation()}>
-          <div className='relative' onClick={event => event.stopPropagation()}>
+          <div className='absolute right-0 text-sm top-[0.4rem] clr-input'>
-            <div className='absolute right-0 text-sm top-[0.4rem] clr-input'>
+            <TextURL text='Справка...' href={`/manuals?topic=${topic}`} />
-              <TextURL text='Справка...' href={`/manuals?topic=${topic}`} />
-            </div>
           </div>
-          <TopicPage topic={topic} />
+        </div>
-        </Suspense>
+        <TopicPage topic={topic} />
       </Tooltip>
     </div>
   );

rsconcept/frontend/src/components/info/InfoError.tsx

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import { isResponseHtml } from '@/utils/utils';
 
 import PrettyJson from '../ui/PrettyJSON';
+import AnimateFade from '../wrap/AnimateFade';
 
 export type ErrorData = string | Error | AxiosError | undefined;
 
@@ -58,9 +59,8 @@ function DescribeError({ error }: { error: ErrorData }) {
 
 function InfoError({ error }: InfoErrorProps) {
   return (
-    <div
+    <AnimateFade
       className={clsx(
-        'cc-fade-in',
         'min-w-[25rem]',
         'px-3 py-2 flex flex-col',
         'clr-text-red',
@@ -75,7 +75,7 @@ function InfoError({ error }: InfoErrorProps) {
       </div>
 
       <DescribeError error={error} />
-    </div>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/components/props.d.ts

@@ -1,5 +1,5 @@
 // =========== Module contains interfaces for common UI elements. ==========
-import React from 'react';
+import { HTMLMotionProps } from 'framer-motion';
 
 export namespace CProps {
   /**
@@ -88,6 +88,16 @@ export namespace CProps {
    */
   export type Input = Titled & React.ComponentProps<'input'>;
 
+  /**
+   * Represents `button` component with optional title and animation properties.
+   */
+  export type AnimatedButton = Titled & Omit<HTMLMotionProps<'button'>, 'type'>;
+
+  /**
+   * Represents `div` component with animation properties.
+   */
+  export type AnimatedDiv = HTMLMotionProps<'div'>;
+
   /**
    * Represents `mouse event` in React.
    */

rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx

@@ -32,7 +32,9 @@ function TableBody<TData>({
   onRowDoubleClicked
 }: TableBodyProps<TData>) {
   function handleRowClicked(target: Row<TData>, event: CProps.EventMouse) {
-    onRowClicked?.(target.original, event);
+    if (onRowClicked) {
+      onRowClicked(target.original, event);
+    }
     if (enableRowSelection && target.getCanSelect()) {
       if (event.shiftKey && !!lastSelected && lastSelected !== target.id) {
         const { rows, rowsById } = table.getRowModel();

rsconcept/frontend/src/components/ui/Dropdown.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
+import { motion } from 'framer-motion';
 
-import { PARAMETER } from '@/utils/constants';
+import { animateDropdown } from '@/styling/animations';
 
 import { CProps } from '../props';
 
@@ -24,12 +25,11 @@ function Dropdown({
   stretchTop,
   className,
   children,
-  style,
   ...restProps
 }: React.PropsWithChildren<DropdownProps>) {
   return (
     <div className='relative'>
-      <div
+      <motion.div
         tabIndex={-1}
         className={clsx(
           'z-topmost',
@@ -45,18 +45,13 @@ function Dropdown({
           },
           className
         )}
-        style={{
+        initial={false}
-          transitionProperty: 'clip-path, transform',
+        animate={isOpen ? 'open' : 'closed'}
-          transitionDuration: `${PARAMETER.dropdownDuration}ms`,
+        variants={animateDropdown}
-          transitionTimingFunction: 'ease-in-out',
-          transform: isOpen ? 'translateY(0)' : 'translateY(-10%)',
-          clipPath: isOpen ? 'inset(0% 0% 0% 0%)' : 'inset(10% 0% 90% 0%)',
-          ...style
-        }}
         {...restProps}
       >
         {children}
-      </div>
+      </motion.div>
     </div>
   );
 }

rsconcept/frontend/src/components/ui/DropdownButton.tsx

@@ -1,10 +1,12 @@
 import clsx from 'clsx';
+import { motion } from 'framer-motion';
 
+import { animateDropdownItem } from '@/styling/animations';
 import { globals } from '@/utils/constants';
 
 import { CProps } from '../props';
 
-interface DropdownButtonProps extends CProps.Button {
+interface DropdownButtonProps extends CProps.AnimatedButton {
   /** Icon to display first (not used if children are provided). */
   icon?: React.ReactNode;
 
@@ -16,7 +18,7 @@ interface DropdownButtonProps extends CProps.Button {
 }
 
 /**
- * `button` with optional text, icon, and click functionality styled for use in a {@link Dropdown}.
+ * Animated `button` with optional text, icon, and click functionality.
  * It supports optional children for custom content or the default text/icon display.
  */
 function DropdownButton({
@@ -31,7 +33,7 @@ function DropdownButton({
   ...restProps
 }: DropdownButtonProps) {
   return (
-    <button
+    <motion.button
       tabIndex={-1}
       type='button'
       onClick={onClick}
@@ -46,6 +48,7 @@ function DropdownButton({
         },
         className
       )}
+      variants={animateDropdownItem}
       data-tooltip-id={!!title || !!titleHtml ? globals.tooltip : undefined}
       data-tooltip-html={titleHtml}
       data-tooltip-content={title}
@@ -55,7 +58,7 @@ function DropdownButton({
       {children ? children : null}
       {!children && icon ? icon : null}
       {!children && text ? <span>{text}</span> : null}
-    </button>
+    </motion.button>
   );
 }
 

rsconcept/frontend/src/components/ui/DropdownCheckbox.tsx

@@ -1,11 +1,15 @@
 import clsx from 'clsx';
+import { motion } from 'framer-motion';
+
+import { animateDropdownItem } from '@/styling/animations';
 
 import Checkbox, { CheckboxProps } from './Checkbox';
 
 /** Animated {@link Checkbox} inside a {@link Dropdown} item. */
 function DropdownCheckbox({ setValue, disabled, ...restProps }: CheckboxProps) {
   return (
-    <div
+    <motion.div
+      variants={animateDropdownItem}
       className={clsx(
         'px-3 py-1',
         'text-left overflow-ellipsis whitespace-nowrap',
@@ -14,7 +18,7 @@ function DropdownCheckbox({ setValue, disabled, ...restProps }: CheckboxProps) {
       )}
     >
       <Checkbox tabIndex={-1} disabled={disabled} setValue={setValue} {...restProps} />
-    </div>
+    </motion.div>
   );
 }
 

rsconcept/frontend/src/components/ui/DropdownDivider.tsx

@@ -0,0 +1,28 @@
+import clsx from 'clsx';
+import { motion } from 'framer-motion';
+
+import { animateDropdownItem } from '@/styling/animations';
+
+import { DividerProps } from './Divider';
+
+/**
+ * {@link Divider} with animation inside {@link Dropdown}.
+ */
+function DropdownDivider({ vertical, margins = 'mx-2', className, ...restProps }: DividerProps) {
+  return (
+    <motion.div
+      variants={animateDropdownItem}
+      className={clsx(
+        margins, //prettier: split-lines
+        className,
+        {
+          'border-x': vertical,
+          'border-y': !vertical
+        }
+      )}
+      {...restProps}
+    />
+  );
+}
+
+export default DropdownDivider;

rsconcept/frontend/src/components/ui/FileInput.tsx

@@ -36,7 +36,9 @@ function FileInput({ id, label, acceptType, title, className, style, onChange, .
     } else {
       setFileName('');
     }
-    onChange?.(event);
+    if (onChange) {
+      onChange(event);
+    }
   };
 
   return (

rsconcept/frontend/src/components/ui/Loader.tsx

@@ -1,7 +1,11 @@
 'use client';
 
+import { ThreeCircles, ThreeDots } from 'react-loader-spinner';
+
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 
+import AnimateFade from '../wrap/AnimateFade';
+
 interface LoaderProps {
   /** Scale of the loader from 1 to 10. */
   scale?: number;
@@ -10,85 +14,20 @@ interface LoaderProps {
   circular?: boolean;
 }
 
-const animateRotation = (duration: string) => {
-  return (
-    <animateTransform
-      attributeName='transform'
-      attributeType='XML'
-      type='rotate'
-      dur={duration}
-      from='0 50 50'
-      to='360 50 50'
-      repeatCount='indefinite'
-    />
-  );
-};
-
-const animatePulse = (startBig: boolean, duration: string) => {
-  return (
-    <>
-      <animate
-        attributeName='r'
-        from={startBig ? '15' : '9'}
-        to={startBig ? '15' : '9'}
-        begin='0s'
-        dur={duration}
-        values={startBig ? '15;9;15' : '9;15;9'}
-        calcMode='linear'
-        repeatCount='indefinite'
-      />
-      <animate
-        attributeName='fill-opacity'
-        from={startBig ? '1' : '.5'}
-        to={startBig ? '.5' : '1'}
-        begin='0s'
-        dur={duration}
-        values={startBig ? '1;.5;1' : '.5;1;.5'}
-        calcMode='linear'
-        repeatCount='indefinite'
-      />
-    </>
-  );
-};
-
 /**
  * Displays animated loader.
  */
 function Loader({ scale = 5, circular }: LoaderProps) {
   const { colors } = useConceptOptions();
-  if (circular) {
+  return (
-    return (
+    <AnimateFade noFadeIn className='flex justify-center'>
-      <div className='flex justify-center' aria-label='three-circles-loading' aria-busy='true' role='progressbar'>
+      {circular ? (
-        <svg height={`${scale * 20}`} width={`${scale * 20}`} viewBox='0 0 100 100' fill={colors.bgPrimary}>
+        <ThreeCircles color={colors.bgPrimary} height={scale * 20} width={scale * 20} />
-          <path d='M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3 c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z'>
+      ) : (
-            {animateRotation('2.25s')}
+        <ThreeDots color={colors.bgPrimary} height={scale * 20} width={scale * 20} radius={scale * 2} />
-          </path>
+      )}
-          <path d='M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5 L82,35.7z'>
+    </AnimateFade>
-            {animateRotation('1.75s')}
+  );
-          </path>
-          <path d='M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7 c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z'>
-            {animateRotation('0.75s')}
-          </path>
-        </svg>
-      </div>
-    );
-  } else {
-    return (
-      <div className='flex justify-center' aria-busy='true' role='progressbar'>
-        <svg height={`${scale * 20}`} width={`${scale * 20}`} viewBox='0 0 120 30' fill={colors.bgPrimary}>
-          <circle cx='15' cy='15' r='16'>
-            {animatePulse(true, '0.8s')}
-          </circle>
-          <circle cx='60' cy='15' r='10' attributeName='fill-opacity' from='1' to='0.3'>
-            {animatePulse(false, '0.8s')}
-          </circle>
-          <circle cx='105' cy='15' r='16'>
-            {animatePulse(true, '0.8s')}
-          </circle>
-        </svg>
-      </div>
-    );
-  }
 }
 
 export default Loader;

rsconcept/frontend/src/components/ui/Modal.tsx

@@ -1,9 +1,12 @@
 'use client';
 
 import clsx from 'clsx';
+import { motion } from 'framer-motion';
+import { useRef } from 'react';
 
 import useEscapeKey from '@/hooks/useEscapeKey';
 import { HelpTopic } from '@/models/miscellaneous';
+import { animateModal } from '@/styling/animations';
 import { PARAMETER } from '@/utils/constants';
 import { prepareTooltip } from '@/utils/labels';
 
@@ -76,18 +79,19 @@ function Modal({
   hideHelpWhen,
   ...restProps
 }: React.PropsWithChildren<ModalProps>) {
+  const ref = useRef(null);
   useEscapeKey(hideWindow);
 
   const handleCancel = () => {
     hideWindow();
-    onCancel?.();
+    if (onCancel) onCancel();
   };
 
   const handleSubmit = () => {
     if (beforeSubmit && !beforeSubmit()) {
       return;
     }
-    onSubmit?.();
+    if (onSubmit) onSubmit();
     hideWindow();
   };
 
@@ -98,12 +102,18 @@ function Modal({
         className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'cc-modal-backdrop')}
         onClick={hideWindow}
       />
-      <div
+      <motion.div
+        ref={ref}
         className={clsx(
-          'cc-animate-modal',
+          'z-modal',
-          'z-modal absolute bottom-1/2 left-1/2 -translate-x-1/2 translate-y-1/2',
+          'absolute bottom-1/2 left-1/2 -translate-x-1/2 translate-y-1/2',
-          'border rounded-xl clr-app'
+          'border rounded-xl',
+          'clr-app'
         )}
+        initial={{ ...animateModal.initial }}
+        animate={{ ...animateModal.animate }}
+        exit={{ ...animateModal.exit }}
+        {...restProps}
       >
         <Overlay position='right-2 top-2'>
           <MiniButton
@@ -123,14 +133,13 @@ function Modal({
 
         <div
           className={clsx(
-            'overscroll-contain max-h-[calc(100svh-8rem)] max-w-[100svw] xs:max-w-[calc(100svw-2rem)] outline-none',
+            'overscroll-contain max-h-[calc(100svh-8rem)] max-w-[100svw] xs:max-w-[calc(100svw-2rem)]',
             {
               'overflow-auto': !overflowVisible,
               'overflow-visible': overflowVisible
             },
             className
           )}
-          {...restProps}
         >
           {children}
         </div>
@@ -149,7 +158,7 @@ function Modal({
           ) : null}
           <Button text={readonly ? 'Закрыть' : 'Отмена'} className='min-w-[7rem]' onClick={handleCancel} />
         </div>
-      </div>
+      </motion.div>
     </div>
   );
 }

rsconcept/frontend/src/components/ui/SelectTree.tsx

@@ -1,7 +1,9 @@
 import clsx from 'clsx';
+import { AnimatePresence, motion } from 'framer-motion';
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 
-import { globals, PARAMETER } from '@/utils/constants';
+import { animateSideAppear } from '@/styling/animations';
+import { globals } from '@/utils/constants';
 
 import { IconDropArrow, IconPageRight } from '../Icons';
 import { CProps } from '../props';
@@ -92,46 +94,41 @@ function SelectTree<ItemType>({
 
   return (
     <div {...restProps}>
-      {items.map((item, index) => {
+      <AnimatePresence initial={false}>
-        const isActive = getParent(item) === item || !folded.includes(getParent(item));
+        {items.map((item, index) =>
-        return (
+          getParent(item) === item || !folded.includes(getParent(item)) ? (
-          <div
+            <motion.div
-            tabIndex={-1}
+              tabIndex={-1}
-            key={`${prefix}${index}`}
+              key={`${prefix}${index}`}
-            className={clsx(
+              className={clsx(
-              'pr-3 pl-6 border-b',
+                'pr-3 pl-6 py-1',
-              'cc-scroll-row',
+                'cc-scroll-row',
-              'clr-controls clr-hover',
+                'clr-controls clr-hover',
-              'cursor-pointer',
+                'cursor-pointer',
-              value === item && 'clr-selected'
+                value === item && 'clr-selected'
-            )}
+              )}
-            data-tooltip-id={globals.tooltip}
+              data-tooltip-id={globals.tooltip}
-            data-tooltip-html={isActive ? getDescription(item) : undefined}
+              data-tooltip-html={getDescription(item)}
-            onClick={isActive ? event => handleSetValue(event, item) : undefined}
+              onClick={event => handleSetValue(event, item)}
-            style={{
+              initial={{ ...animateSideAppear.initial }}
-              borderBottomWidth: isActive ? '1px' : '0px',
+              animate={{ ...animateSideAppear.animate }}
-              transitionProperty: 'height, opacity, padding',
+              exit={{ ...animateSideAppear.exit }}
-              transitionDuration: `${PARAMETER.moveDuration}ms`,
+            >
-              paddingTop: isActive ? '0.25rem' : '0',
+              {foldable.has(item) ? (
-              paddingBottom: isActive ? '0.25rem' : '0',
+                <Overlay position='left-[-1.3rem]' className={clsx(!folded.includes(item) && 'top-[0.1rem]')}>
-              height: isActive ? 'min-content' : '0',
+                  <MiniButton
-              opacity: isActive ? '1' : '0'
+                    noPadding
-            }}
+                    noHover
-          >
+                    icon={!folded.includes(item) ? <IconDropArrow size='1rem' /> : <IconPageRight size='1.25rem' />}
-            {foldable.has(item) ? (
+                    onClick={event => handleClickFold(event, item, folded.includes(item))}
-              <Overlay position='left-[-1.3rem]' className={clsx(!folded.includes(item) && 'top-[0.1rem]')}>
+                  />
-                <MiniButton
+                </Overlay>
-                  noPadding
+              ) : null}
-                  noHover
+              {getParent(item) === item ? getLabel(item) : `- ${getLabel(item).toLowerCase()}`}
-                  icon={!folded.includes(item) ? <IconDropArrow size='1rem' /> : <IconPageRight size='1.25rem' />}
+            </motion.div>
-                  onClick={event => handleClickFold(event, item, folded.includes(item))}
+          ) : null
-                />
+        )}
-              </Overlay>
+      </AnimatePresence>
-            ) : null}
-            {getParent(item) === item ? getLabel(item) : `- ${getLabel(item).toLowerCase()}`}
-          </div>
-        );
-      })}
     </div>
   );
 }

rsconcept/frontend/src/components/wrap/AnimateFade.tsx

@@ -0,0 +1,29 @@
+import { motion } from 'framer-motion';
+
+import { animateFade } from '@/styling/animations';
+
+import { CProps } from '../props';
+
+interface AnimateFadeProps extends CProps.AnimatedDiv {
+  noFadeIn?: boolean;
+  noFadeOut?: boolean;
+  hideContent?: boolean;
+}
+
+function AnimateFade({ style, noFadeIn, noFadeOut, children, hideContent, ...restProps }: AnimateFadeProps) {
+  return (
+    <motion.div
+      tabIndex={-1}
+      initial={{ ...(!noFadeIn ? animateFade.initial : {}) }}
+      animate={hideContent ? 'hidden' : 'active'}
+      variants={animateFade.variants}
+      exit={{ ...(!noFadeOut ? animateFade.exit : {}) }}
+      style={{ display: hideContent ? 'none' : '', willChange: 'auto', ...style }}
+      {...restProps}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+export default AnimateFade;

rsconcept/frontend/src/components/wrap/DataLoader.tsx

@@ -1,25 +1,43 @@
-import InfoError, { ErrorData } from '../info/InfoError';
+import { AnimatePresence } from 'framer-motion';
-import Loader from '../ui/Loader';
+
+import InfoError, { ErrorData } from '../info/InfoError';
+import { CProps } from '../props';
+import Loader from '../ui/Loader';
+import AnimateFade from './AnimateFade';
+
+interface DataLoaderProps extends CProps.AnimatedDiv {
+  id: string;
 
-interface DataLoaderProps {
   isLoading?: boolean;
   error?: ErrorData;
   hasNoData?: boolean;
 }
 
-function DataLoader({ isLoading, hasNoData, error, children }: React.PropsWithChildren<DataLoaderProps>) {
+function DataLoader({
-  if (isLoading) {
+  id,
-    return <Loader />;
+  isLoading,
-  }
+  hasNoData,
-  if (error) {
+  error,
-    return <InfoError error={error} />;
+  className,
-  }
+  children,
-
+  ...restProps
-  if (hasNoData) {
+}: React.PropsWithChildren<DataLoaderProps>) {
-    return <div className='cc-fade-in w-full text-center p-1'>Данные не загружены</div>;
+  return (
-  } else {
+    <AnimatePresence mode='wait'>
-    return <>{children}</>;
+      {!isLoading && !error && !hasNoData ? (
-  }
+        <AnimateFade id={id} key={`${id}-data`} className={className} {...restProps}>
+          {children}
+        </AnimateFade>
+      ) : null}
+      {!isLoading && !error && hasNoData ? (
+        <AnimateFade key={`${id}-no-data`} className='w-full text-center p-1' {...restProps}>
+          Данные не загружены
+        </AnimateFade>
+      ) : null}
+      {isLoading ? <Loader key={`${id}-loader`} /> : null}
+      {error ? <InfoError key={`${id}-error`} error={error} /> : null}
+    </AnimatePresence>
+  );
 }
 
 export default DataLoader;

rsconcept/frontend/src/components/wrap/ExpectedAnonymous.tsx

@@ -13,7 +13,7 @@ function ExpectedAnonymous() {
   }
 
   return (
-    <div className='cc-fade-in flex flex-col items-center gap-3 py-6'>
+    <div className='flex flex-col items-center gap-3 py-6'>
       <p className='font-semibold'>{`Вы вошли в систему как ${user?.username ?? ''}`}</p>
       <div className='flex gap-3'>
         <TextURL text='Новая схема' href='/library/create' />

rsconcept/frontend/src/components/wrap/RequireAuth.tsx

@@ -1,28 +1,30 @@
 'use client';
 
+import { AnimatePresence } from 'framer-motion';
+
 import { useAuth } from '@/context/AuthContext';
 
 import Loader from '../ui/Loader';
 import TextURL from '../ui/TextURL';
+import AnimateFade from './AnimateFade';
 
 function RequireAuth({ children }: React.PropsWithChildren) {
   const { user, loading } = useAuth();
 
-  if (loading) {
+  return (
-    return <Loader key='auth-loader' />;
+    <AnimatePresence mode='wait'>
-  }
+      {loading ? <Loader key='auth-loader' /> : null}
-  if (user) {
+      {!loading && user ? <AnimateFade key='auth-data'>{children}</AnimateFade> : null}
-    return <>{children}</>;
+      {!loading && !user ? (
-  } else {
+        <AnimateFade key='auth-no-user' className='flex flex-col items-center gap-1 mt-2'>
-    return (
+          <p className='mb-2'>Пожалуйста войдите в систему</p>
-      <div key='auth-no-user' className='flex flex-col items-center gap-1 mt-2'>
+          <TextURL text='Войти в Портал' href='/login' />
-        <p className='mb-2'>Пожалуйста войдите в систему</p>
+          <TextURL text='Зарегистрироваться' href='/signup' />
-        <TextURL text='Войти в Портал' href='/login' />
+          <TextURL text='Начальная страница' href='/' />
-        <TextURL text='Зарегистрироваться' href='/signup' />
+        </AnimateFade>
-        <TextURL text='Начальная страница' href='/' />
+      ) : null}
-      </div>
+    </AnimatePresence>
-    );
+  );
-  }
 }
 
 export default RequireAuth;

rsconcept/frontend/src/context/AuthContext.tsx

@@ -69,7 +69,7 @@ export const AuthState = ({ children }: React.PropsWithChildren) => {
           } else {
             setUser(undefined);
           }
-          callback?.();
+          if (callback) callback();
         }
       });
     },
@@ -85,7 +85,7 @@ export const AuthState = ({ children }: React.PropsWithChildren) => {
       onError: setError,
       onSuccess: newData =>
         reload(() => {
-          callback?.(newData);
+          if (callback) callback(newData);
         })
     });
   }
@@ -96,7 +96,7 @@ export const AuthState = ({ children }: React.PropsWithChildren) => {
       showError: true,
       onSuccess: newData =>
         reload(() => {
-          callback?.(newData);
+          if (callback) callback(newData);
         })
     });
   }
@@ -111,7 +111,7 @@ export const AuthState = ({ children }: React.PropsWithChildren) => {
       onSuccess: newData =>
         reload(() => {
           users.push(newData as IUserInfo);
-          callback?.(newData);
+          if (callback) callback(newData);
         })
     });
   }
@@ -126,7 +126,7 @@ export const AuthState = ({ children }: React.PropsWithChildren) => {
         onError: setError,
         onSuccess: () =>
           reload(() => {
-            callback?.();
+            if (callback) callback();
           })
       });
     },
@@ -143,7 +143,7 @@ export const AuthState = ({ children }: React.PropsWithChildren) => {
         onError: setError,
         onSuccess: () =>
           reload(() => {
-            callback?.();
+            if (callback) callback();
           })
       });
     },
@@ -160,7 +160,7 @@ export const AuthState = ({ children }: React.PropsWithChildren) => {
         onError: setError,
         onSuccess: () =>
           reload(() => {
-            callback?.();
+            if (callback) callback();
           })
       });
     },
@@ -177,7 +177,7 @@ export const AuthState = ({ children }: React.PropsWithChildren) => {
         onError: setError,
         onSuccess: () =>
           reload(() => {
-            callback?.();
+            if (callback) callback();
           })
       });
     },

rsconcept/frontend/src/context/ConceptOptionsContext.tsx

@@ -4,8 +4,9 @@ import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useSt
 
 import Tooltip from '@/components/ui/Tooltip';
 import useLocalStorage from '@/hooks/useLocalStorage';
+import { animationDuration } from '@/styling/animations';
 import { darkT, IColorTheme, lightT } from '@/styling/color';
-import { globals, PARAMETER, storage } from '@/utils/constants';
+import { globals, storage } from '@/utils/constants';
 import { contextOutsideScope } from '@/utils/labels';
 
 interface IOptionsContext {
@@ -90,7 +91,7 @@ export const OptionsState = ({ children }: React.PropsWithChildren) => {
       setNoNavigation(false);
     } else {
       setNoNavigationAnimation(true);
-      setTimeout(() => setNoNavigation(true), PARAMETER.moveDuration);
+      setTimeout(() => setNoNavigation(true), animationDuration.navigationToggle);
     }
   }, [noNavigation]);
 

rsconcept/frontend/src/context/GlobalOssContext.tsx

@@ -48,7 +48,7 @@ export const GlobalOssState = ({ children }: React.PropsWithChildren) => {
     (callback?: () => void) => {
       reloadInternal(undefined, () => {
         setIsValid(true);
-        callback?.();
+        if (callback) callback();
       });
     },
     [reloadInternal]

rsconcept/frontend/src/context/LibraryContext.tsx

@@ -157,7 +157,7 @@ export const LibraryState = ({ children }: React.PropsWithChildren) => {
           onError: setLoadingError,
           onSuccess: newData => {
             setItems(newData);
-            callback?.();
+            if (callback) callback();
           }
         });
       } else {
@@ -167,7 +167,7 @@ export const LibraryState = ({ children }: React.PropsWithChildren) => {
           onError: setLoadingError,
           onSuccess: newData => {
             setItems(newData);
-            callback?.();
+            if (callback) callback();
           }
         });
       }
@@ -217,7 +217,7 @@ export const LibraryState = ({ children }: React.PropsWithChildren) => {
     (data: ILibraryCreateData, callback?: DataCallback<ILibraryItem>) => {
       const onSuccess = (newSchema: ILibraryItem) =>
         reloadItems(() => {
-          callback?.(newSchema);
+          if (callback) callback(newSchema);
         });
       setProcessingError(undefined);
       if (data.file) {
@@ -250,7 +250,7 @@ export const LibraryState = ({ children }: React.PropsWithChildren) => {
         onError: setProcessingError,
         onSuccess: () =>
           reloadItems(() => {
-            callback?.();
+            if (callback) callback();
           })
       });
     },
@@ -270,7 +270,7 @@ export const LibraryState = ({ children }: React.PropsWithChildren) => {
         onError: setProcessingError,
         onSuccess: newSchema =>
           reloadItems(() => {
-            callback?.(newSchema);
+            if (callback) callback(newSchema);
           })
       });
     },
@@ -287,7 +287,7 @@ export const LibraryState = ({ children }: React.PropsWithChildren) => {
         onError: setProcessingError,
         onSuccess: () =>
           reloadItems(() => {
-            callback?.();
+            if (callback) callback();
           })
       });
     },

rsconcept/frontend/src/context/OssContext.tsx

@@ -114,7 +114,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
           const fullData: IOperationSchemaData = Object.assign(model, newData);
           oss.setData(fullData);
           library.localUpdateItem(newData);
-          callback?.(newData);
+          if (callback) callback(newData);
         }
       });
     },
@@ -137,7 +137,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         onSuccess: () => {
           model.owner = newOwner;
           library.reloadItems(() => {
-            callback?.();
+            if (callback) callback();
           });
         }
       });
@@ -161,7 +161,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         onSuccess: () => {
           model.access_policy = newPolicy;
           library.reloadItems(() => {
-            callback?.();
+            if (callback) callback();
           });
         }
       });
@@ -185,7 +185,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         onSuccess: () => {
           model.location = newLocation;
           library.reloadItems(() => {
-            callback?.();
+            if (callback) callback();
           });
         }
       });
@@ -209,7 +209,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         onSuccess: () => {
           model.editors = newEditors;
           library.reloadItems(() => {
-            callback?.();
+            if (callback) callback();
           });
         }
       });
@@ -227,7 +227,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         onError: setProcessingError,
         onSuccess: () => {
           library.localUpdateTimestamp(Number(itemID));
-          callback?.();
+          if (callback) callback();
         }
       });
     },
@@ -245,7 +245,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         onSuccess: newData => {
           oss.setData(newData.oss);
           library.localUpdateTimestamp(newData.oss.id);
-          callback?.(newData.new_operation);
+          if (callback) callback(newData.new_operation);
         }
       });
     },
@@ -263,7 +263,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         onSuccess: newData => {
           oss.setData(newData);
           library.reloadItems(() => {
-            callback?.();
+            if (callback) callback();
           });
         }
       });
@@ -282,7 +282,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         onSuccess: newData => {
           oss.setData(newData.oss);
           library.reloadItems(() => {
-            callback?.(newData.new_schema);
+            if (callback) callback(newData.new_schema);
           });
         }
       });
@@ -304,7 +304,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         onSuccess: newData => {
           oss.setData(newData);
           library.reloadItems(() => {
-            callback?.();
+            if (callback) callback();
           });
         }
       });
@@ -326,7 +326,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         onSuccess: newData => {
           oss.setData(newData);
           library.reloadItems(() => {
-            callback?.();
+            if (callback) callback();
           });
         }
       });
@@ -348,7 +348,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         onSuccess: newData => {
           oss.setData(newData);
           library.reloadItems(() => {
-            callback?.();
+            if (callback) callback();
           });
         }
       });
@@ -370,7 +370,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         onSuccess: () => {
           oss.reload();
           library.reloadItems(() => {
-            callback?.();
+            if (callback) callback();
           });
         }
       });

rsconcept/frontend/src/context/RSFormContext.tsx

@@ -147,7 +147,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
           setSchema(Object.assign(schema, newData));
           library.localUpdateItem(newData);
           oss.invalidateItem(newData.id);
-          callback?.(newData);
+          if (callback) callback(newData);
         }
       });
     },
@@ -168,7 +168,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         onSuccess: newData => {
           setSchema(newData);
           library.localUpdateItem(newData);
-          callback?.();
+          if (callback) callback();
         }
       });
     },
@@ -191,7 +191,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         onSuccess: () => {
           schema.owner = newOwner;
           library.localUpdateItem(schema);
-          callback?.();
+          if (callback) callback();
         }
       });
     },
@@ -214,7 +214,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         onSuccess: () => {
           schema.access_policy = newPolicy;
           library.localUpdateItem(schema);
-          callback?.();
+          if (callback) callback();
         }
       });
     },
@@ -258,7 +258,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         onError: setProcessingError,
         onSuccess: () => {
           schema.editors = newEditors;
-          callback?.();
+          if (callback) callback();
         }
       });
     },
@@ -279,7 +279,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
           setSchema(newData);
           library.localUpdateTimestamp(newData.id);
           oss.invalidateItem(newData.id);
-          callback?.();
+          if (callback) callback();
         }
       });
     },
@@ -299,7 +299,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         onSuccess: newData => {
           setSchema(newData);
           library.localUpdateTimestamp(newData.id);
-          callback?.();
+          if (callback) callback();
         }
       });
     },
@@ -318,7 +318,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
           setSchema(newData.schema);
           library.localUpdateTimestamp(newData.schema.id);
           oss.invalidateItem(newData.schema.id);
-          callback?.(newData.cst_list);
+          if (callback) callback(newData.cst_list);
         }
       });
     },
@@ -350,7 +350,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
           setSchema(newData.schema);
           library.localUpdateTimestamp(newData.schema.id);
           oss.invalidateItem(newData.schema.id);
-          callback?.(newData.new_cst);
+          if (callback) callback(newData.new_cst);
         }
       });
     },
@@ -369,7 +369,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
           setSchema(newData);
           library.localUpdateTimestamp(newData.id);
           oss.invalidateItem(newData.id);
-          callback?.();
+          if (callback) callback();
         }
       });
     },
@@ -388,7 +388,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
           reload(setProcessing, () => {
             library.localUpdateTimestamp(Number(itemID));
             oss.invalidateItem(Number(itemID));
-            callback?.(newData);
+            if (callback) callback(newData);
           })
       });
     },
@@ -407,7 +407,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
           setSchema(newData.schema);
           library.localUpdateTimestamp(newData.schema.id);
           oss.invalidateItem(newData.schema.id);
-          callback?.(newData.new_cst);
+          if (callback) callback(newData.new_cst);
         }
       });
     },
@@ -426,7 +426,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
           setSchema(newData);
           library.localUpdateTimestamp(newData.id);
           oss.invalidateItem(newData.id);
-          callback?.();
+          if (callback) callback();
         }
       });
     },
@@ -444,7 +444,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         onSuccess: newData => {
           setSchema(newData);
           library.localUpdateTimestamp(Number(itemID));
-          callback?.();
+          if (callback) callback();
         }
       });
     },
@@ -462,7 +462,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         onSuccess: newData => {
           setSchema(newData.schema);
           library.localUpdateTimestamp(Number(itemID));
-          callback?.(newData.version);
+          if (callback) callback(newData.version);
         }
       });
     },
@@ -499,7 +499,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
             }
           });
           setSchema(schema);
-          callback?.();
+          if (callback) callback();
         }
       });
     },
@@ -516,7 +516,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         onSuccess: () => {
           schema!.versions = schema!.versions.filter(prev => prev.id !== target);
           setSchema(schema);
-          callback?.();
+          if (callback) callback();
         }
       });
     },
@@ -533,7 +533,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         onSuccess: newData => {
           setSchema(newData);
           library.localUpdateItem(newData);
-          callback?.();
+          if (callback) callback();
         }
       });
     },
@@ -552,7 +552,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
           setSchema(newData);
           library.localUpdateTimestamp(newData.id);
           oss.invalidateItem(newData.id);
-          callback?.(newData);
+          if (callback) callback(newData);
         }
       });
     },

rsconcept/frontend/src/context/UserProfileContext.tsx

@@ -64,7 +64,7 @@ export const UserProfileState = ({ children }: React.PropsWithChildren) => {
             libraryUser.first_name = newData.first_name;
             libraryUser.last_name = newData.last_name;
           }
-          callback?.(newData);
+          if (callback) callback(newData);
         }
       });
     },

rsconcept/frontend/src/context/UsersContext.tsx

@@ -69,7 +69,7 @@ export const UsersState = ({ children }: React.PropsWithChildren) => {
             }
           });
           setUsers(newData);
-          callback?.();
+          if (callback) callback();
         }
       });
     },

rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx

@@ -6,6 +6,7 @@ import { TabList, TabPanel, Tabs } from 'react-tabs';
 
 import Modal, { ModalProps } from '@/components/ui/Modal';
 import TabLabel from '@/components/ui/TabLabel';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useLibrary } from '@/context/LibraryContext';
 import usePartialUpdate from '@/hooks/usePartialUpdate';
 import { HelpTopic } from '@/models/miscellaneous';
@@ -144,9 +145,9 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
   const editorPanel = useMemo(
     () => (
       <TabPanel>
-        <div className='cc-fade-in cc-column'>
+        <AnimateFade className='cc-column'>
           <FormCreateCst state={constituenta} partialUpdate={updateConstituenta} schema={schema} />
-        </div>
+        </AnimateFade>
       </TabPanel>
     ),
     [constituenta, updateConstituenta, schema]

rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TabArguments.tsx

@@ -10,6 +10,7 @@ import PickConstituenta from '@/components/select/PickConstituenta';
 import DataTable, { IConditionalStyle } from '@/components/ui/DataTable';
 import MiniButton from '@/components/ui/MiniButton';
 import NoData from '@/components/ui/NoData';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { IConstituenta, IRSForm } from '@/models/rsform';
 import { IArgumentValue } from '@/models/rslang';
@@ -146,7 +147,7 @@ function TabArguments({ state, schema, partialUpdate }: TabArgumentsProps) {
   );
 
   return (
-    <div className='cc-fade-in'>
+    <AnimateFade>
       <DataTable
         dense
         noFooter
@@ -223,7 +224,7 @@ function TabArguments({ state, schema, partialUpdate }: TabArgumentsProps) {
         height='5.1rem'
         value={state.definition}
       />
-    </div>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TabTemplate.tsx

@@ -6,6 +6,7 @@ import RSInput from '@/components/RSInput';
 import PickConstituenta from '@/components/select/PickConstituenta';
 import SelectSingle from '@/components/ui/SelectSingle';
 import TextArea from '@/components/ui/TextArea';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useLibrary } from '@/context/LibraryContext';
 import { CATEGORY_CST_TYPE, IConstituenta, IRSForm } from '@/models/rsform';
 import { applyFilterCategory } from '@/models/rsformAPI';
@@ -77,7 +78,7 @@ function TabTemplate({ state, partialUpdate, templateSchema }: TabTemplateProps)
   }, [state.filterCategory, templateSchema]);
 
   return (
-    <div className='cc-fade-in'>
+    <AnimateFade>
       <div className='flex border-t border-x rounded-t-md clr-input'>
         <SelectSingle
           noBorder
@@ -137,7 +138,7 @@ function TabTemplate({ state, partialUpdate, templateSchema }: TabTemplateProps)
         height='5.1rem'
         value={state.prototype?.definition_formal}
       />
-    </div>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
+import { AnimatePresence } from 'framer-motion';
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 
 import BadgeHelp from '@/components/info/BadgeHelp';
@@ -8,6 +9,7 @@ import RSInput from '@/components/RSInput';
 import SelectSingle from '@/components/ui/SelectSingle';
 import TextArea from '@/components/ui/TextArea';
 import TextInput from '@/components/ui/TextInput';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { HelpTopic } from '@/models/miscellaneous';
 import { CstType, ICstCreateData, IRSForm } from '@/models/rsform';
 import { generateAlias, isBaseSet, isBasicConcept, isFunctional, validateNewAlias } from '@/models/rsformAPI';
@@ -46,8 +48,8 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
   );
 
   return (
-    <>
+    <AnimatePresence>
-      <div className='flex items-center self-center gap-3'>
+      <div key='dlg_cst_alias_picker' className='flex items-center self-center gap-3'>
         <SelectSingle
           id='dlg_cst_type'
           placeholder='Выберите тип'
@@ -70,8 +72,8 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
           className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
         />
       </div>
-
       <TextArea
+        key='dlg_cst_term'
         id='dlg_cst_term'
         fitContent
         spellCheck
@@ -81,8 +83,7 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
         value={state.term_raw}
         onChange={event => partialUpdate({ term_raw: event.target.value })}
       />
-
+      <AnimateFade key='dlg_cst_expression' hideContent={!state.definition_formal && isElementary}>
-      {!!state.definition_formal || !isElementary ? (
         <RSInput
           id='dlg_cst_expression'
           noTooltip
@@ -100,9 +101,8 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
           onChange={value => partialUpdate({ definition_formal: value })}
           schema={schema}
         />
-      ) : null}
+      </AnimateFade>
-
+      <AnimateFade key='dlg_cst_definition' hideContent={!state.definition_raw && isElementary}>
-      {!!state.definition_raw || !isElementary ? (
         <TextArea
           id='dlg_cst_definition'
           spellCheck
@@ -113,10 +113,10 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
           value={state.definition_raw}
           onChange={event => partialUpdate({ definition_raw: event.target.value })}
         />
-      ) : null}
+      </AnimateFade>
-
       {!showConvention ? (
         <button
+          key='dlg_cst_show_comment'
           id='dlg_cst_show_comment'
           tabIndex={-1}
           type='button'
@@ -125,8 +125,10 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
         >
           Добавить комментарий
         </button>
-      ) : (
+      ) : null}
+      <AnimateFade hideContent={!showConvention}>
         <TextArea
+          key='dlg_cst_convention'
           id='dlg_cst_convention'
           spellCheck
           fitContent
@@ -136,8 +138,8 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
           value={state.convention}
           onChange={event => partialUpdate({ convention: event.target.value })}
         />
-      )}
+      </AnimateFade>
-    </>
+    </AnimatePresence>
   );
 }
 

rsconcept/frontend/src/dialogs/DlgCreateOperation/TabInputOperation.tsx

@@ -9,6 +9,7 @@ import Label from '@/components/ui/Label';
 import MiniButton from '@/components/ui/MiniButton';
 import TextArea from '@/components/ui/TextArea';
 import TextInput from '@/components/ui/TextInput';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useLibrary } from '@/context/LibraryContext';
 import { ILibraryItem, LibraryItemID, LibraryItemType } from '@/models/library';
 import { IOperationSchema } from '@/models/oss';
@@ -52,7 +53,7 @@ function TabInputOperation({
   }, [createSchema, onChangeAttachedID]);
 
   return (
-    <div className='cc-fade-in cc-column'>
+    <AnimateFade className='cc-column'>
       <TextInput
         id='operation_title'
         label='Полное название'
@@ -110,7 +111,7 @@ function TabInputOperation({
           baseFilter={baseFilter}
         />
       ) : null}
-    </div>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/dialogs/DlgCreateOperation/TabSynthesisOperation.tsx

@@ -2,6 +2,7 @@ import FlexColumn from '@/components/ui/FlexColumn';
 import Label from '@/components/ui/Label';
 import TextArea from '@/components/ui/TextArea';
 import TextInput from '@/components/ui/TextInput';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { IOperationSchema, OperationID } from '@/models/oss';
 
 import PickMultiOperation from '../../components/select/PickMultiOperation';
@@ -30,7 +31,7 @@ function TabSynthesisOperation({
   setInputs
 }: TabSynthesisOperationProps) {
   return (
-    <div className='cc-fade-in cc-column'>
+    <AnimateFade className='cc-column'>
       <TextInput
         id='operation_title'
         label='Полное название'
@@ -60,7 +61,7 @@ function TabSynthesisOperation({
         <Label text={`Выбор аргументов: [ ${inputs.length} ]`} />
         <PickMultiOperation items={oss.items} selected={inputs} setSelected={setInputs} rows={6} />
       </FlexColumn>
-    </div>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/dialogs/DlgEditOperation/TabArguments.tsx

@@ -5,6 +5,7 @@ import { useMemo } from 'react';
 import PickMultiOperation from '@/components/select/PickMultiOperation';
 import FlexColumn from '@/components/ui/FlexColumn';
 import Label from '@/components/ui/Label';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { IOperationSchema, OperationID } from '@/models/oss';
 
 interface TabArgumentsProps {
@@ -21,12 +22,12 @@ function TabArguments({ oss, inputs, target, setInputs }: TabArgumentsProps) {
     [oss.items, potentialCycle]
   );
   return (
-    <div className='cc-fade-in cc-column'>
+    <AnimateFade className='cc-column'>
       <FlexColumn>
         <Label text={`Выбор аргументов: [ ${inputs.length} ]`} />
         <PickMultiOperation items={filtered} selected={inputs} setSelected={setInputs} rows={8} />
       </FlexColumn>
-    </div>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/dialogs/DlgEditOperation/TabOperation.tsx

@@ -1,5 +1,6 @@
 import TextArea from '@/components/ui/TextArea';
 import TextInput from '@/components/ui/TextInput';
+import AnimateFade from '@/components/wrap/AnimateFade';
 
 interface TabOperationProps {
   alias: string;
@@ -12,7 +13,7 @@ interface TabOperationProps {
 
 function TabOperation({ alias, onChangeAlias, title, onChangeTitle, comment, onChangeComment }: TabOperationProps) {
   return (
-    <div className='cc-fade-in cc-column'>
+    <AnimateFade className='cc-column'>
       <TextInput
         id='operation_title'
         label='Полное название'
@@ -37,7 +38,7 @@ function TabOperation({ alias, onChangeAlias, title, onChangeTitle, comment, onC
           onChange={event => onChangeComment(event.target.value)}
         />
       </div>
-    </div>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/dialogs/DlgEditOperation/TabSynthesis.tsx

@@ -31,23 +31,21 @@ function TabSynthesis({
 }: TabSynthesisProps) {
   const { colors } = useConceptOptions();
   return (
-    <DataLoader isLoading={loading} error={error}>
+    <DataLoader id='dlg-synthesis-tab' className='cc-column mt-3' isLoading={loading} error={error}>
-      <div className='cc-fade-in cc-column mt-3'>
+      <PickSubstitutions
-        <PickSubstitutions
+        schemas={schemas}
-          schemas={schemas}
+        prefixID={prefixes.dlg_cst_substitutes_list}
-          prefixID={prefixes.dlg_cst_substitutes_list}
+        rows={8}
-          rows={8}
+        substitutions={substitutions}
-          substitutions={substitutions}
+        setSubstitutions={setSubstitutions}
-          setSubstitutions={setSubstitutions}
+        suggestions={suggestions}
-          suggestions={suggestions}
+      />
-        />
+      <TextArea
-        <TextArea
+        disabled
-          disabled
+        value={validationText}
-          value={validationText}
+        rows={4}
-          rows={4}
+        style={{ borderColor: isCorrect ? undefined : colors.fgRed }}
-          style={{ borderColor: isCorrect ? undefined : colors.fgRed }}
+      />
-        />
-      </div>
     </DataLoader>
   );
 }

rsconcept/frontend/src/dialogs/DlgEditReference/TabEntityReference.tsx

@@ -6,6 +6,7 @@ import PickConstituenta from '@/components/select/PickConstituenta';
 import SelectMultiGrammeme from '@/components/select/SelectMultiGrammeme';
 import Label from '@/components/ui/Label';
 import TextInput from '@/components/ui/TextInput';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { ReferenceType } from '@/models/language';
 import { parseEntityReference, parseGrammemes } from '@/models/languageAPI';
 import { CstMatchMode } from '@/models/miscellaneous';
@@ -58,7 +59,7 @@ function TabEntityReference({ initial, schema, onChangeValid, onChangeReference
   }
 
   return (
-    <div className='cc-fade-in cc-column'>
+    <AnimateFade className='cc-column'>
       <PickConstituenta
         id='dlg_reference_entity_picker'
         initialFilter={initial.text}
@@ -107,7 +108,7 @@ function TabEntityReference({ initial, schema, onChangeValid, onChangeReference
           onChangeValue={setSelectedGrams}
         />
       </div>
-    </div>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/dialogs/DlgEditReference/TabSyntacticReference.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
 
 import TextInput from '@/components/ui/TextInput';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { ReferenceType } from '@/models/language';
 import { parseSyntacticReference } from '@/models/languageAPI';
 
@@ -43,7 +44,7 @@ function TabSyntacticReference({ initial, onChangeValid, onChangeReference }: Ta
   }, [nominal, offset, onChangeValid, onChangeReference]);
 
   return (
-    <div className='cc-fade-in flex flex-col gap-2'>
+    <AnimateFade className='flex flex-col gap-2'>
       <TextInput
         id='dlg_reference_offset'
         type='number'
@@ -69,7 +70,7 @@ function TabSyntacticReference({ initial, onChangeValid, onChangeReference }: Ta
         value={nominal}
         onChange={event => setNominal(event.target.value)}
       />
-    </div>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/dialogs/DlgInlineSynthesis/TabConstituents.tsx

@@ -16,7 +16,7 @@ interface TabConstituentsProps {
 
 function TabConstituents({ schema, error, loading, selected, setSelected }: TabConstituentsProps) {
   return (
-    <DataLoader isLoading={loading} error={error} hasNoData={!schema}>
+    <DataLoader id='dlg-constituents-tab' isLoading={loading} error={error} hasNoData={!schema}>
       {schema ? (
         <PickMultiConstituenta
           schema={schema}

rsconcept/frontend/src/dialogs/DlgInlineSynthesis/TabSchema.tsx

@@ -4,6 +4,7 @@ import { useMemo } from 'react';
 
 import PickSchema from '@/components/select/PickSchema';
 import TextInput from '@/components/ui/TextInput';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useLibrary } from '@/context/LibraryContext';
 import { LibraryItemID, LibraryItemType } from '@/models/library';
 import { IRSForm } from '@/models/rsform';
@@ -21,7 +22,7 @@ function TabSchema({ selected, receiver, setSelected }: TabSchemaProps) {
   const sortedItems = useMemo(() => sortItemsForInlineSynthesis(receiver, library.items), [receiver, library.items]);
 
   return (
-    <div className='cc-fade-in flex flex-col'>
+    <AnimateFade className='flex flex-col'>
       <PickSchema
         id='dlg_schema_picker' // prettier: split lines
         items={sortedItems}
@@ -42,7 +43,7 @@ function TabSchema({ selected, receiver, setSelected }: TabSchemaProps) {
           dense
         />
       </div>
-    </div>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/dialogs/DlgInlineSynthesis/TabSubstitutions.tsx

@@ -40,7 +40,7 @@ function TabSubstitutions({
   const schemas = useMemo(() => [...(source ? [source] : []), ...(receiver ? [receiver] : [])], [source, receiver]);
 
   return (
-    <DataLoader isLoading={loading} error={error} hasNoData={!source}>
+    <DataLoader id='dlg-substitutions-tab' className='cc-column' isLoading={loading} error={error} hasNoData={!source}>
       <PickSubstitutions
         substitutions={substitutions}
         setSubstitutions={setSubstitutions}

rsconcept/frontend/src/dialogs/DlgRelocateConstituents.tsx

@@ -118,7 +118,7 @@ function DlgRelocateConstituents({ oss, hideWindow, initialTarget, onSubmit }: D
             onSelectValue={handleSelectDestination}
           />
         </div>
-        <DataLoader isLoading={sourceData.loading} error={sourceData.error}>
+        <DataLoader id='dlg-relocate-constituents' isLoading={sourceData.loading} error={sourceData.error}>
           {sourceData.schema ? (
             <PickMultiConstituenta
               noBorder

rsconcept/frontend/src/hooks/useCheckConstituenta.ts

@@ -29,7 +29,7 @@ function useCheckConstituenta({ schema }: { schema?: IRSForm }) {
       onError: setError,
       onSuccess: parse => {
         setParseData(parse);
-        onSuccess?.(parse);
+        if (onSuccess) onSuccess(parse);
       }
     });
   }

rsconcept/frontend/src/hooks/useClickedOutside.ts

@@ -13,7 +13,7 @@ function useClickedOutside(enabled: boolean, ref: React.RefObject<HTMLElement>,
     function handleClickOutside(event: MouseEvent) {
       assertIsNode(event.target);
       if (ref.current && !ref.current.contains(event.target)) {
-        callback?.();
+        if (callback) callback();
       }
     }
     document.addEventListener('mouseup', handleClickOutside);

rsconcept/frontend/src/hooks/useConceptText.ts

@@ -19,7 +19,7 @@ function useConceptText() {
       setLoading: setProcessing,
       onError: setError,
       onSuccess: data => {
-        onSuccess?.(data);
+        if (onSuccess) onSuccess(data);
       }
     });
   }, []);
@@ -32,7 +32,7 @@ function useConceptText() {
       setLoading: setProcessing,
       onError: setError,
       onSuccess: data => {
-        onSuccess?.(data);
+        if (onSuccess) onSuccess(data);
       }
     });
   }, []);
@@ -45,7 +45,7 @@ function useConceptText() {
       setLoading: setProcessing,
       onError: setError,
       onSuccess: data => {
-        onSuccess?.(data);
+        if (onSuccess) onSuccess(data);
       }
     });
   }, []);

rsconcept/frontend/src/hooks/useOssDetails.ts

@@ -42,7 +42,7 @@ function useOssDetails({ target, items }: { target?: string; items: ILibraryItem
         },
         onSuccess: schema => {
           setSchema(schema);
-          callback?.();
+          if (callback) callback();
         }
       });
     },

rsconcept/frontend/src/hooks/useRSFormDetails.ts

@@ -38,7 +38,7 @@ function useRSFormDetails({ target, version }: { target?: string; version?: stri
         },
         onSuccess: schema => {
           setSchema(schema);
-          callback?.();
+          if (callback) callback();
         }
       });
     },

rsconcept/frontend/src/pages/CreateItemPage/CreateItemPage.tsx

@@ -1,12 +1,15 @@
+import AnimateFade from '@/components/wrap/AnimateFade';
 import RequireAuth from '@/components/wrap/RequireAuth';
 
 import FormCreateItem from './FormCreateItem';
 
 function CreateItemPage() {
   return (
-    <RequireAuth>
+    <AnimateFade>
-      <FormCreateItem />
+      <RequireAuth>
-    </RequireAuth>
+        <FormCreateItem />
+      </RequireAuth>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/pages/CreateItemPage/FormCreateItem.tsx

@@ -122,10 +122,7 @@ function FormCreateItem() {
   }, [itemType]);
 
   return (
-    <form
+    <form className={clsx('cc-column', 'min-w-[30rem] max-w-[30rem] mx-auto', 'px-6 py-3')} onSubmit={handleSubmit}>
-      className={clsx('cc-fade-in cc-column', 'min-w-[30rem] max-w-[30rem] mx-auto', 'px-6 py-3')}
-      onSubmit={handleSubmit}
-    >
       <h1 className='select-none'>
         {itemType == LibraryItemType.RSFORM ? (
           <Overlay position='top-0 right-[0.5rem]'>

rsconcept/frontend/src/pages/DatabaseSchemaPage.tsx

@@ -3,6 +3,7 @@
 import { useLayoutEffect, useMemo } from 'react';
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
 
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { resources } from '@/utils/constants';
 
@@ -17,13 +18,13 @@ function DatabaseSchemaPage() {
   }, [setNoFooter]);
 
   return (
-    <div className='cc-fade-in flex justify-center overflow-hidden' style={{ maxHeight: panelHeight }}>
+    <AnimateFade className='flex justify-center overflow-hidden' style={{ maxHeight: panelHeight }}>
       <TransformWrapper>
         <TransformComponent>
           <img alt='Схема базы данных' src={resources.db_schema} className='w-fit h-fit' />
         </TransformComponent>
       </TransformWrapper>
-    </div>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { AnimatePresence } from 'framer-motion';
 import fileDownload from 'js-file-download';
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -149,7 +150,6 @@ function LibraryPage() {
   const viewLocations = useMemo(
     () => (
       <ViewSideLocation
-        isVisible={options.folderMode}
         activeLocation={options.location}
         onChangeActiveLocation={options.setLocation}
         subfolders={subfolders}
@@ -163,7 +163,6 @@ function LibraryPage() {
       options.location,
       library.folders,
       options.setLocation,
-      options.folderMode,
       toggleFolderMode,
       promptRenameLocation,
       toggleSubfolders,
@@ -172,7 +171,12 @@ function LibraryPage() {
   );
 
   return (
-    <DataLoader isLoading={library.loading} error={library.loadingError} hasNoData={library.items.length === 0}>
+    <DataLoader
+      id='library-page' // prettier: split lines
+      isLoading={library.loading}
+      error={library.loadingError}
+      hasNoData={library.items.length === 0}
+    >
       {showRenameLocation ? (
         <DlgChangeLocation
           initial={options.location}
@@ -183,7 +187,7 @@ function LibraryPage() {
       <Overlay
         position={options.noNavigation ? 'top-[0.25rem] right-[3rem]' : 'top-[0.25rem] right-0'}
         layer='z-tooltip'
-        className='cc-animate-position'
+        className='transition-all'
       >
         <MiniButton
           title='Выгрузить в формате CSV'
@@ -214,8 +218,8 @@ function LibraryPage() {
         toggleFolderMode={toggleFolderMode}
       />
 
-      <div className='cc-fade-in flex'>
+      <div className='flex'>
-        {viewLocations}
+        <AnimatePresence initial={false}>{options.folderMode ? viewLocations : null}</AnimatePresence>
         {viewLibrary}
       </div>
     </DataLoader>

rsconcept/frontend/src/pages/LibraryPage/TableLibraryItems.tsx

@@ -161,7 +161,7 @@ function TableLibraryItems({ items, resetQuery, folderMode, toggleFolderMode }:
       columns={columns}
       data={items}
       headPosition='0'
-      className={clsx('text-xs sm:text-sm cc-scroll-y h-fit border-b', { 'border-l': folderMode })}
+      className={clsx('text-xs sm:text-sm cc-scroll-y h-fit', { 'border-l border-b': folderMode })}
       style={{ maxHeight: tableHeight }}
       noDataComponent={
         <FlexColumn className='dense p-3 items-center min-h-[6rem]'>

rsconcept/frontend/src/pages/LibraryPage/ToolbarSearch.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
+import { motion } from 'framer-motion';
 import { useCallback, useMemo } from 'react';
 
 import { LocationIcon, VisibilityIcon } from '@/components/DomainIcons';
@@ -24,6 +25,7 @@ import { useUsers } from '@/context/UsersContext';
 import useDropdown from '@/hooks/useDropdown';
 import { LocationHead } from '@/models/library';
 import { UserID } from '@/models/user';
+import { animateDropdownItem } from '@/styling/animations';
 import { prefixes } from '@/utils/constants';
 import { describeLocationHead, labelLocationHead } from '@/utils/labels';
 import { tripleToggleColor } from '@/utils/utils';
@@ -161,14 +163,16 @@ function ToolbarSearch({
               icon={<IconEditor size='1.25rem' className={tripleToggleColor(isEditor)} />}
               onClick={toggleEditor}
             />
-            <SelectUser
+            <motion.div className='px-1 pb-1' variants={animateDropdownItem}>
-              noBorder
+              <SelectUser
-              placeholder='Выберите владельца'
+                noBorder
-              className='min-w-[15rem] text-sm mx-1 mb-1'
+                placeholder='Выберите владельца'
-              items={users}
+                className='min-w-[15rem] text-sm'
-              value={filterUser}
+                items={users}
-              onSelectValue={onChangeFilterUser}
+                value={filterUser}
-            />
+                onSelectValue={onChangeFilterUser}
+              />
+            </motion.div>
           </Dropdown>
         </div>
 

rsconcept/frontend/src/pages/LibraryPage/ViewSideLocation.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { motion } from 'framer-motion';
 import { useCallback, useMemo } from 'react';
 import { toast } from 'react-toastify';
 
@@ -14,12 +15,12 @@ import { useLibrary } from '@/context/LibraryContext';
 import useWindowSize from '@/hooks/useWindowSize';
 import { FolderNode, FolderTree } from '@/models/FolderTree';
 import { HelpTopic } from '@/models/miscellaneous';
+import { animateSideMinWidth } from '@/styling/animations';
 import { PARAMETER, prefixes } from '@/utils/constants';
 import { information } from '@/utils/labels';
 
 interface ViewSideLocationProps {
   folderTree: FolderTree;
-  isVisible: boolean;
   subfolders: boolean;
   activeLocation: string;
   onChangeActiveLocation: (newValue: string) => void;
@@ -32,7 +33,6 @@ function ViewSideLocation({
   folderTree,
   activeLocation,
   subfolders,
-  isVisible,
   onChangeActiveLocation,
   toggleFolderMode,
   toggleSubfolders,
@@ -57,6 +57,7 @@ function ViewSideLocation({
     return located.length !== 0;
   }, [activeLocation, user, items]);
 
+  const animations = useMemo(() => animateSideMinWidth(windowSize.isSmall ? '10rem' : '15rem'), [windowSize]);
   const maxHeight = useMemo(() => calculateHeight('4.5rem'), [calculateHeight]);
 
   const handleClickFolder = useCallback(
@@ -76,16 +77,11 @@ function ViewSideLocation({
   );
 
   return (
-    <div
+    <motion.div
       className={clsx('max-w-[10rem] sm:max-w-[15rem]', 'flex flex-col', 'text:xs sm:text-sm', 'select-none')}
-      style={{
+      initial={{ ...animations.initial }}
-        transitionProperty: 'width, min-width, opacity',
+      animate={{ ...animations.animate }}
-        transitionDuration: `${PARAMETER.moveDuration}ms`,
+      exit={{ ...animations.exit }}
-        transitionTimingFunction: 'ease-out',
-        minWidth: isVisible ? (windowSize.isSmall ? '10rem' : '15rem') : '0',
-        width: isVisible ? '100%' : '0',
-        opacity: isVisible ? 1 : 0
-      }}
     >
       <div className='h-[2.08rem] flex justify-between items-center pr-1 pl-[0.125rem]'>
         <BadgeHelp
@@ -121,7 +117,7 @@ function ViewSideLocation({
         onClick={handleClickFolder}
         style={{ maxHeight: maxHeight }}
       />
-    </div>
+    </motion.div>
   );
 }
 

rsconcept/frontend/src/pages/LoginPage.tsx

@@ -9,6 +9,7 @@ import InfoError, { ErrorData } from '@/components/info/InfoError';
 import SubmitButton from '@/components/ui/SubmitButton';
 import TextInput from '@/components/ui/TextInput';
 import TextURL from '@/components/ui/TextURL';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import ExpectedAnonymous from '@/components/wrap/ExpectedAnonymous';
 import { useAuth } from '@/context/AuthContext';
 import { useConceptNavigation } from '@/context/NavigationContext';
@@ -51,42 +52,44 @@ function LoginPage() {
     return <ExpectedAnonymous />;
   }
   return (
-    <form className={clsx('cc-column cc-fade-in', 'w-[24rem] mx-auto', 'pt-12 pb-6 px-6')} onSubmit={handleSubmit}>
+    <AnimateFade>
-      <img alt='Концепт Портал' src={resources.logo} className='max-h-[2.5rem] min-w-[2.5rem] mb-3' />
+      <form className={clsx('cc-column', 'w-[24rem] mx-auto', 'pt-12 pb-6 px-6')} onSubmit={handleSubmit}>
-      <TextInput
+        <img alt='Концепт Портал' src={resources.logo} className='max-h-[2.5rem] min-w-[2.5rem] mb-3' />
-        id='username'
+        <TextInput
-        label='Логин или email'
+          id='username'
-        autoComplete='username'
+          label='Логин или email'
-        autoFocus
+          autoComplete='username'
-        required
+          autoFocus
-        allowEnter
+          required
-        spellCheck={false}
+          allowEnter
-        value={username}
+          spellCheck={false}
-        onChange={event => setUsername(event.target.value)}
+          value={username}
-      />
+          onChange={event => setUsername(event.target.value)}
-      <TextInput
+        />
-        id='password'
+        <TextInput
-        type='password'
+          id='password'
-        label='Пароль'
+          type='password'
-        autoComplete='current-password'
+          label='Пароль'
-        required
+          autoComplete='current-password'
-        allowEnter
+          required
-        value={password}
+          allowEnter
-        onChange={event => setPassword(event.target.value)}
+          value={password}
-      />
+          onChange={event => setPassword(event.target.value)}
+        />
 
-      <SubmitButton
+        <SubmitButton
-        text='Войти'
+          text='Войти'
-        className='self-center w-[12rem] mt-3'
+          className='self-center w-[12rem] mt-3'
-        loading={loading}
+          loading={loading}
-        disabled={!username || !password}
+          disabled={!username || !password}
-      />
+        />
-      <div className='flex flex-col text-sm'>
+        <div className='flex flex-col text-sm'>
-        <TextURL text='Восстановить пароль...' href='/restore-password' />
+          <TextURL text='Восстановить пароль...' href='/restore-password' />
-        <TextURL text='Нет аккаунта? Зарегистрируйтесь...' href='/signup' />
+          <TextURL text='Нет аккаунта? Зарегистрируйтесь...' href='/signup' />
-      </div>
+        </div>
-      {error ? <ProcessError error={error} /> : null}
+        {error ? <ProcessError error={error} /> : null}
-    </form>
+      </form>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/pages/ManualsPage/TopicsDropdown.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
+import { motion } from 'framer-motion';
 import { useCallback } from 'react';
 
 import { IconMenuFold, IconMenuUnfold } from '@/components/Icons';
@@ -9,7 +10,8 @@ import SelectTree from '@/components/ui/SelectTree';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import useDropdown from '@/hooks/useDropdown';
 import { HelpTopic, topicParent } from '@/models/miscellaneous';
-import { PARAMETER, prefixes } from '@/utils/constants';
+import { animateSlideLeft } from '@/styling/animations';
+import { prefixes } from '@/utils/constants';
 import { describeHelpTopic, labelHelpTopic } from '@/utils/labels';
 
 interface TopicsDropdownProps {
@@ -50,29 +52,30 @@ function TopicsDropdown({ activeTopic, onChangeTopic }: TopicsDropdownProps) {
         title='Список тем'
         hideTitle={menu.isOpen}
         icon={!menu.isOpen ? <IconMenuUnfold size='1.25rem' /> : <IconMenuFold size='1.25rem' />}
-        className={clsx('w-[3rem] h-7 rounded-none border-l-0', menu.isOpen && 'border-b-0')}
+        className='w-[3rem] h-7 rounded-none'
         onClick={menu.toggle}
       />
-      <SelectTree
+      <motion.div
-        items={Object.values(HelpTopic).map(item => item as HelpTopic)}
-        value={activeTopic}
-        onChangeValue={handleSelectTopic}
-        prefix={prefixes.topic_list}
-        getParent={item => topicParent.get(item) ?? item}
-        getLabel={labelHelpTopic}
-        getDescription={describeHelpTopic}
         className={clsx(
-          'border-r border-t rounded-none', // prettier: split-lines
+          'border divide-y rounded-none', // prettier: split-lines
           'cc-scroll-y',
           'clr-controls'
         )}
-        style={{
+        style={{ maxHeight: calculateHeight('4rem + 2px') }}
-          maxHeight: calculateHeight('4rem + 2px'),
+        initial={false}
-          transitionProperty: 'clip-path',
+        animate={menu.isOpen ? 'open' : 'closed'}
-          transitionDuration: `${PARAMETER.moveDuration}ms`,
+        variants={animateSlideLeft}
-          clipPath: menu.isOpen ? 'inset(0% 0% 0% 0%)' : 'inset(0% 100% 0% 0%)'
+      >
-        }}
+        <SelectTree
-      />
+          items={Object.values(HelpTopic).map(item => item as HelpTopic)}
+          value={activeTopic}
+          onChangeValue={handleSelectTopic}
+          prefix={prefixes.topic_list}
+          getParent={item => topicParent.get(item) ?? item}
+          getLabel={labelHelpTopic}
+          getDescription={describeHelpTopic}
+        />
+      </motion.div>
     </div>
   );
 }

rsconcept/frontend/src/pages/ManualsPage/TopicsStatic.tsx

@@ -27,7 +27,7 @@ function TopicsStatic({ activeTopic, onChangeTopic }: TopicsStaticProps) {
         'min-w-[14.5rem] max-w-[14.5rem] sm:min-w-[12.5rem] sm:max-w-[12.5rem] md:min-w-[14.5rem] md:max-w-[14.5rem]',
         'cc-scroll-y',
         'self-start',
-        'border-x border-t rounded-none',
+        'border divide-y rounded-none',
         'clr-controls',
         'text-xs sm:text-sm',
         'select-none'

rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { HelpTopic } from '@/models/miscellaneous';
 import TopicPage from '@/pages/ManualsPage/TopicPage';
@@ -11,13 +12,13 @@ interface ViewTopicProps {
 function ViewTopic({ topic }: ViewTopicProps) {
   const { mainHeight } = useConceptOptions();
   return (
-    <div
+    <AnimateFade
       key={topic}
-      className='cc-fade-in py-2 px-6 mx-auto sm:mx-0 lg:px-12 overflow-y-auto'
+      className='py-2 px-6 mx-auto sm:mx-0 lg:px-12 overflow-y-auto'
       style={{ maxHeight: mainHeight }}
     >
       <TopicPage topic={topic} />
-    </div>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/pages/OssPage/EditorOssCard/EditorOssCard.tsx

@@ -3,6 +3,7 @@
 import clsx from 'clsx';
 
 import FlexColumn from '@/components/ui/FlexColumn';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useOSS } from '@/context/OssContext';
 import EditorLibraryItem from '@/pages/RSFormPage/EditorRSFormCard/EditorLibraryItem';
 import ToolbarRSFormCard from '@/pages/RSFormPage/EditorRSFormCard/ToolbarRSFormCard';
@@ -46,14 +47,9 @@ function EditorOssCard({ isModified, onDestroy, setIsModified }: EditorOssCardPr
         onDestroy={onDestroy}
         controller={controller}
       />
-      <div
+      <AnimateFade
         onKeyDown={handleInput}
-        className={clsx(
+        className={clsx('md:w-fit md:max-w-fit max-w-[32rem]', 'mx-auto pt-[1.9rem]', 'flex flex-row flex-wrap px-6')}
-          'cc-fade-in',
-          'md:w-fit md:max-w-fit max-w-[32rem]',
-          'mx-auto pt-[1.9rem]',
-          'flex flex-row flex-wrap px-6'
-        )}
       >
         <FlexColumn className='px-3'>
           <FormOSS id={globals.library_item_editor} isModified={isModified} setIsModified={setIsModified} />
@@ -61,7 +57,7 @@ function EditorOssCard({ isModified, onDestroy, setIsModified }: EditorOssCardPr
         </FlexColumn>
 
         {schema ? <OssStats stats={schema.stats} /> : null}
-      </div>
+      </AnimateFade>
     </>
   );
 }

rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OssFlow.tsx

@@ -18,6 +18,7 @@ import {
 
 import { CProps } from '@/components/props';
 import Overlay from '@/components/ui/Overlay';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { useOSS } from '@/context/OssContext';
 import useLocalStorage from '@/hooks/useLocalStorage';
@@ -348,7 +349,7 @@ function OssFlow({ isModified, setIsModified }: OssFlowProps) {
   );
 
   return (
-    <div tabIndex={-1} onKeyDown={handleKeyDown}>
+    <AnimateFade tabIndex={-1} onKeyDown={handleKeyDown}>
       <Overlay position='top-[1.9rem] pt-1 right-1/2 translate-x-1/2' className='rounded-b-2xl cc-blur'>
         <ToolbarOssGraph
           isModified={isModified}
@@ -380,10 +381,10 @@ function OssFlow({ isModified, setIsModified }: OssFlowProps) {
           {...menuProps}
         />
       ) : null}
-      <div className='cc-fade-in relative w-[100vw]' style={{ height: mainHeight, fontFamily: 'Rubik' }}>
+      <div className='relative w-[100vw]' style={{ height: mainHeight, fontFamily: 'Rubik' }}>
         {graph}
       </div>
-    </div>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/pages/OssPage/MenuOssTabs.tsx

@@ -16,9 +16,9 @@ import {
   IconShare
 } from '@/components/Icons';
 import Button from '@/components/ui/Button';
-import Divider from '@/components/ui/Divider';
 import Dropdown from '@/components/ui/Dropdown';
 import DropdownButton from '@/components/ui/DropdownButton';
+import DropdownDivider from '@/components/ui/DropdownDivider';
 import { useAccessMode } from '@/context/AccessModeContext';
 import { useAuth } from '@/context/AuthContext';
 import { useConceptNavigation } from '@/context/NavigationContext';
@@ -102,7 +102,7 @@ function MenuOssTabs({ onDestroy }: MenuOssTabsProps) {
             />
           ) : null}
 
-          <Divider margins='mx-3 my-1' />
+          <DropdownDivider margins='mx-3 my-1' />
 
           {user ? (
             <DropdownButton

rsconcept/frontend/src/pages/OssPage/OssEditContext.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { AnimatePresence } from 'framer-motion';
 import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 
@@ -217,7 +218,7 @@ export const OssEditState = ({ selected, setSelected, children }: React.PropsWit
           }
         });
         toast.success(information.changesSaved);
-        callback?.();
+        if (callback) callback();
       });
     },
     [model]
@@ -417,7 +418,7 @@ export const OssEditState = ({ selected, setSelected, children }: React.PropsWit
       }}
     >
       {model.schema ? (
-        <>
+        <AnimatePresence>
           {showEditEditors ? (
             <DlgEditEditors
               hideWindow={() => setShowEditEditors(false)}
@@ -471,7 +472,8 @@ export const OssEditState = ({ selected, setSelected, children }: React.PropsWit
               onSubmit={handleRelocateConstituents}
             />
           ) : null}
-        </>
+          )
+        </AnimatePresence>
       ) : null}
 
       {children}

rsconcept/frontend/src/pages/OssPage/OssTabs.tsx

@@ -12,6 +12,7 @@ import Loader from '@/components/ui/Loader';
 import Overlay from '@/components/ui/Overlay';
 import TabLabel from '@/components/ui/TabLabel';
 import TextURL from '@/components/ui/TextURL';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useAuth } from '@/context/AuthContext';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { useLibrary } from '@/context/LibraryContext';
@@ -150,10 +151,10 @@ function OssTabs() {
             </TabList>
           </Overlay>
 
-          <div className='overflow-x-hidden'>
+          <AnimateFade>
             {cardPanel}
             {graphPanel}
-          </div>
+          </AnimateFade>
         </Tabs>
       ) : null}
     </OssEditState>

rsconcept/frontend/src/pages/PasswordChangePage.tsx

@@ -65,8 +65,12 @@ function PasswordChangePage() {
     return <ProcessError error={error} />;
   }
   return (
-    <DataLoader isLoading={loading} hasNoData={!isTokenValid}>
+    <DataLoader
-      <form className={clsx('cc-fade-in cc-column', 'w-[24rem] mx-auto', 'px-6 mt-3')} onSubmit={handleSubmit}>
+      id='password-change-page' //
+      isLoading={loading}
+      hasNoData={!isTokenValid}
+    >
+      <form className={clsx('cc-column', 'w-[24rem] mx-auto', 'px-6 mt-3')} onSubmit={handleSubmit}>
         <TextInput
           id='new_password'
           type='password'

rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/EditorConstituenta.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
+import { AnimatePresence } from 'framer-motion';
 import { useMemo, useState } from 'react';
 
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
@@ -87,37 +88,39 @@ function EditorConstituenta({ activeCst, isModified, setIsModified, onOpenEdit }
         onReset={() => setToggleReset(prev => !prev)}
         onToggleList={() => setShowList(prev => !prev)}
       />
-      <div
+      <div className='pt-[1.9rem] overflow-y-auto min-h-[20rem]' style={{ maxHeight: mainHeight }}>
-        tabIndex={-1}
+        <div
-        className={clsx(
+          tabIndex={-1}
-          'cc-fade-in',
+          className={clsx(
-          'min-h-[20rem] max-w-[95rem] mx-auto',
+            'max-w-[95rem] mx-auto', // prettier: split lines
-          'flex pt-[1.9rem]',
+            'flex',
-          'overflow-y-auto overflow-x-clip',
+            { 'flex-col md:items-center': isNarrow }
-          { 'flex-col md:items-center': isNarrow }
+          )}
-        )}
+          onKeyDown={handleInput}
-        style={{ maxHeight: mainHeight }}
+        >
-        onKeyDown={handleInput}
+          <FormConstituenta
-      >
+            disabled={disabled}
-        <FormConstituenta
+            id={globals.constituenta_editor}
-          disabled={disabled}
+            state={activeCst}
-          id={globals.constituenta_editor}
+            isModified={isModified}
-          state={activeCst}
+            toggleReset={toggleReset}
-          isModified={isModified}
+            setIsModified={setIsModified}
-          toggleReset={toggleReset}
+            onEditTerm={controller.editTermForms}
-          setIsModified={setIsModified}
+            onRename={controller.renameCst}
-          onEditTerm={controller.editTermForms}
+            onOpenEdit={onOpenEdit}
-          onRename={controller.renameCst}
+          />
-          onOpenEdit={onOpenEdit}
+          <AnimatePresence initial={false}>
-        />
+            {showList ? (
-        <ViewConstituents
+              <ViewConstituents
-          isMounted={showList}
+                schema={controller.schema}
-          schema={controller.schema}
+                expression={activeCst?.definition_formal ?? ''}
-          expression={activeCst?.definition_formal ?? ''}
+                isBottom={isNarrow}
-          isBottom={isNarrow}
+                activeCst={activeCst}
-          activeCst={activeCst}
+                onOpenEdit={onOpenEdit}
-          onOpenEdit={onOpenEdit}
+              />
-        />
+            ) : null}
+          </AnimatePresence>
+        </div>
       </div>
     </>
   );

rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
+import { AnimatePresence } from 'framer-motion';
 import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 
@@ -11,6 +12,7 @@ import Indicator from '@/components/ui/Indicator';
 import Overlay from '@/components/ui/Overlay';
 import SubmitButton from '@/components/ui/SubmitButton';
 import TextArea from '@/components/ui/TextArea';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useRSForm } from '@/context/RSFormContext';
 import DlgShowTypeGraph from '@/dialogs/DlgShowTypeGraph';
 import { ConstituentaID, CstType, IConstituenta, ICstUpdateData } from '@/models/rsform';
@@ -153,10 +155,12 @@ function FormConstituenta({
   }
 
   return (
-    <div className='mx-0 md:mx-auto pt-[2rem] xs:pt-0'>
+    <AnimateFade className='mx-0 md:mx-auto pt-[2rem] xs:pt-0'>
-      {showTypification && state ? (
+      <AnimatePresence>
-        <DlgShowTypeGraph items={typeInfo ? [typeInfo] : []} hideWindow={() => setShowTypification(false)} />
+        {showTypification && state ? (
-      ) : null}
+          <DlgShowTypeGraph items={typeInfo ? [typeInfo] : []} hideWindow={() => setShowTypification(false)} />
+        ) : null}
+      </AnimatePresence>
       {state ? (
         <ControlsOverlay
           disabled={disabled}
@@ -197,8 +201,12 @@ function FormConstituenta({
           />
         ) : null}
         {state ? (
-          <>
+          <AnimatePresence>
-            {!!state.definition_formal || !isElementary ? (
+            <AnimateFade
+              key='cst_expression_fade'
+              hideContent={!state.definition_formal && isElementary}
+              style={{ willChange: 'auto' }}
+            >
               <EditorRSExpression
                 id='cst_expression'
                 label={
@@ -221,8 +229,8 @@ function FormConstituenta({
                 onOpenEdit={onOpenEdit}
                 onShowTypeGraph={handleTypeGraph}
               />
-            ) : null}
+            </AnimateFade>
-            {!!state.definition_raw || !isElementary ? (
+            <AnimateFade key='cst_definition_fade' hideContent={!state.definition_raw && isElementary}>
               <RefsInput
                 id='cst_definition'
                 label='Текстовое определение'
@@ -237,9 +245,8 @@ function FormConstituenta({
                 disabled={disabled}
                 onChange={newValue => setTextDefinition(newValue)}
               />
-            ) : null}
+            </AnimateFade>
-
+            <AnimateFade key='cst_convention_fade' hideContent={!showConvention}>
-            {showConvention ? (
               <TextArea
                 id='cst_convention'
                 fitContent
@@ -251,9 +258,8 @@ function FormConstituenta({
                 disabled={disabled || (isBasic && state.is_inherited)}
                 onChange={event => setConvention(event.target.value)}
               />
-            ) : null}
+            </AnimateFade>
-
+            <AnimateFade key='cst_convention_button' hideContent={showConvention || (disabled && !processing)}>
-            {!showConvention && (!disabled || processing) ? (
               <button
                 key='cst_disable_comment'
                 id='cst_disable_comment'
@@ -264,7 +270,7 @@ function FormConstituenta({
               >
                 Добавить комментарий
               </button>
-            ) : null}
+            </AnimateFade>
 
             {!disabled || processing ? (
               <div className='mx-auto flex'>
@@ -291,10 +297,10 @@ function FormConstituenta({
                 </Overlay>
               </div>
             ) : null}
-          </>
+          </AnimatePresence>
         ) : null}
       </form>
-    </div>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ToolbarConstituenta.tsx

@@ -51,7 +51,7 @@ function ToolbarConstituenta({
   return (
     <Overlay
       position='cc-tab-tools right-1/2 translate-x-1/2 xs:right-4 xs:translate-x-0 md:right-1/2 md:translate-x-1/2'
-      className='cc-icons cc-animate-position outline-none cc-blur px-1 rounded-b-2xl'
+      className='cc-icons outline-none transition-all duration-500 cc-blur px-1 rounded-b-2xl'
     >
       {controller.schema && controller.schema?.oss.length > 0 ? (
         <MiniSelectorOSS

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { ReactCodeMirrorRef } from '@uiw/react-codemirror';
+import { AnimatePresence } from 'framer-motion';
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'react-toastify';
 
@@ -95,7 +96,7 @@ function EditorRSExpression({
           args: parse.args
         })
       );
-      callback?.(parse);
+      if (callback) callback(parse);
     });
   }
 
@@ -160,10 +161,12 @@ function EditorRSExpression({
   );
 
   return (
-    <div className='cc-fade-in'>
+    <div>
-      {showAST ? (
+      <AnimatePresence>
-        <DlgShowAST expression={expression} syntaxTree={syntaxTree} hideWindow={() => setShowAST(false)} />
+        {showAST ? (
-      ) : null}
+          <DlgShowAST expression={expression} syntaxTree={syntaxTree} hideWindow={() => setShowAST(false)} />
+        ) : null}
+      </AnimatePresence>
 
       <ToolbarRSExpression
         disabled={disabled}

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx

@@ -1,5 +1,8 @@
+import { motion } from 'framer-motion';
+
 import { IExpressionParse, IRSErrorDescription } from '@/models/rslang';
 import { getRSErrorPrefix } from '@/models/rslangAPI';
+import { animateParseResults } from '@/styling/animations';
 import { describeRSError } from '@/utils/labels';
 
 interface ParsingResultProps {
@@ -14,16 +17,12 @@ function ParsingResult({ isOpen, data, disabled, onShowError }: ParsingResultPro
   const warningsCount = data ? data.errors.length - errorCount : 0;
 
   return (
-    <div
+    <motion.div
       tabIndex={-1}
-      className='text-sm border dense cc-scroll-y transition-all duration-300'
+      className='text-sm border dense cc-scroll-y'
-      style={{
+      initial={false}
-        clipPath: isOpen ? 'inset(0% 0% 0% 0%)' : 'inset(0% 0% 100% 0%)',
+      animate={isOpen ? 'open' : 'closed'}
-        marginTop: isOpen ? '0.75rem' : '0rem',
+      variants={animateParseResults}
-        padding: isOpen ? '0.25rem 0.5rem 0.25rem 0.5rem' : '0rem 0rem 0rem 0rem',
-        borderWidth: isOpen ? '1px' : '0px',
-        height: isOpen ? '4.5rem' : '0rem'
-      }}
     >
       <p>
         Ошибок: <b>{errorCount}</b> | Предупреждений: <b>{warningsCount}</b>
@@ -43,7 +42,7 @@ function ParsingResult({ isOpen, data, disabled, onShowError }: ParsingResultPro
           </p>
         );
       })}
-    </div>
+    </motion.div>
   );
 }
 

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx

@@ -1,7 +1,9 @@
 import clsx from 'clsx';
+import { motion } from 'framer-motion';
 
 import { TokenID } from '@/models/rslang';
-import { PARAMETER, prefixes } from '@/utils/constants';
+import { animateRSControl } from '@/styling/animations';
+import { prefixes } from '@/utils/constants';
 
 import RSLocalButton from './RSLocalButton';
 import RSTokenButton from './RSTokenButton';
@@ -88,7 +90,7 @@ interface RSEditorControlsProps {
 
 function RSEditorControls({ isOpen, disabled, onEdit }: RSEditorControlsProps) {
   return (
-    <div
+    <motion.div
       className={clsx(
         'max-w-[28rem] min-w-[28rem] xs:max-w-[38.5rem] xs:min-w-[38.5rem] sm:max-w-[40rem] sm:min-w-[40rem] md:max-w-fit mx-1 sm:mx-0',
         'flex-wrap',
@@ -96,13 +98,9 @@ function RSEditorControls({ isOpen, disabled, onEdit }: RSEditorControlsProps) {
         'text-xs md:text-sm',
         'select-none'
       )}
-      style={{
+      initial={false}
-        transitionProperty: 'clipPath, height',
+      animate={isOpen ? 'open' : 'closed'}
-        transitionDuration: `${PARAMETER.moveDuration}ms`,
+      variants={animateRSControl}
-        clipPath: isOpen ? 'inset(0% 0% 0% 0%)' : 'inset(0% 0% 100% 0%)',
-        marginTop: isOpen ? '0.25rem' : '0rem',
-        height: isOpen ? 'max-content' : '0rem'
-      }}
     >
       {MAIN_FIRST_ROW.map(token => (
         <RSTokenButton key={`${prefixes.rsedit_btn}${token}`} token={token} onInsert={onEdit} disabled={disabled} />
@@ -145,7 +143,7 @@ function RSEditorControls({ isOpen, disabled, onEdit }: RSEditorControlsProps) {
           disabled={disabled}
         />
       ))}
-    </div>
+    </motion.div>
   );
 }
 

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
+import { AnimatePresence } from 'framer-motion';
 import { useMemo } from 'react';
 
 import { StatusIcon } from '@/components/DomainIcons';
@@ -40,30 +41,29 @@ function StatusBar({ isModified, processing, activeCst, parseData, onAnalyze }:
       tabIndex={0}
       className={clsx(
         'w-[10rem] h-[1.75rem]',
-        'px-2 flex items-center justify-center',
+        'px-2 flex items-center justify-center gap-2',
         'border',
         'select-none',
         'cursor-pointer',
         'focus-frame',
-        'transition-colors duration-500'
+        'duration-500 transition-colors'
       )}
       style={{ backgroundColor: processing ? colors.bgDefault : colorStatusBar(status, colors) }}
       data-tooltip-id={globals.tooltip}
       data-tooltip-html={prepareTooltip('Проверить определение', 'Ctrl + Q')}
       onClick={onAnalyze}
     >
-      {processing ? (
+      <AnimatePresence mode='wait'>
-        <div className='cc-fade-in'>
+        {processing ? <Loader key='status-loader' scale={3} /> : null}
-          {' '}
+        {!processing ? (
-          <Loader scale={3} />
+          <>
-        </div>
+            <StatusIcon key='status-icon' size='1rem' value={status} />
-      ) : null}
+            <span key='status-text' className='pb-[0.125rem] font-controls pr-2'>
-      {!processing ? (
+              {labelExpressionStatus(status)}
-        <div className='cc-fade-in flex items-center gap-2'>
+            </span>
-          <StatusIcon size='1rem' value={status} />
+          </>
-          <span className='pb-[0.125rem] font-controls pr-2'>{labelExpressionStatus(status)}</span>
+        ) : null}
-        </div>
+      </AnimatePresence>
-      ) : null}
     </div>
   );
 }

rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorRSFormCard.tsx

@@ -3,6 +3,7 @@
 import clsx from 'clsx';
 
 import FlexColumn from '@/components/ui/FlexColumn';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useRSForm } from '@/context/RSFormContext';
 import { globals } from '@/utils/constants';
 
@@ -46,13 +47,9 @@ function EditorRSFormCard({ isModified, onDestroy, setIsModified }: EditorRSForm
         onDestroy={onDestroy}
         controller={controller}
       />
-      <div
+      <AnimateFade
         onKeyDown={handleInput}
-        className={clsx(
+        className={clsx('md:w-fit md:max-w-fit max-w-[32rem] mx-auto', 'flex flex-row flex-wrap px-6 pt-[1.9rem]')}
-          'cc-fade-in',
-          'md:w-fit md:max-w-fit max-w-[32rem] mx-auto',
-          'flex flex-row flex-wrap px-6 pt-[1.9rem]'
-        )}
       >
         <FlexColumn className='flex-shrink'>
           <FormRSForm id={globals.library_item_editor} isModified={isModified} setIsModified={setIsModified} />
@@ -60,7 +57,7 @@ function EditorRSFormCard({ isModified, onDestroy, setIsModified }: EditorRSForm
         </FlexColumn>
 
         {model.schema ? <RSFormStats stats={model.schema.stats} isArchive={model.isArchive} /> : null}
-      </div>
+      </AnimateFade>
     </>
   );
 }

rsconcept/frontend/src/pages/RSFormPage/EditorRSList/EditorRSList.tsx

@@ -9,6 +9,7 @@ import { type RowSelectionState } from '@/components/ui/DataTable';
 import MiniButton from '@/components/ui/MiniButton';
 import Overlay from '@/components/ui/Overlay';
 import SearchBar from '@/components/ui/SearchBar';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { CstMatchMode } from '@/models/miscellaneous';
 import { ConstituentaID, CstType, IConstituenta } from '@/models/rsform';
@@ -141,7 +142,7 @@ function EditorRSList({ onOpenEdit }: EditorRSListProps) {
   return (
     <>
       {controller.isContentEditable ? <ToolbarRSList /> : null}
-      <div tabIndex={-1} onKeyDown={handleKeyDown} className='cc-fade-in pt-[1.9rem]'>
+      <AnimateFade tabIndex={-1} onKeyDown={handleKeyDown} className='pt-[1.9rem]'>
         {controller.isContentEditable ? (
           <div className='flex items-center border-b'>
             <div className='px-2'>
@@ -174,7 +175,7 @@ function EditorRSList({ onOpenEdit }: EditorRSListProps) {
           onEdit={onOpenEdit}
           onCreateNew={() => controller.createCst(undefined, false)}
         />
-      </div>
+      </AnimateFade>
     </>
   );
 }

rsconcept/frontend/src/pages/RSFormPage/EditorRSList/ToolbarRSList.tsx

@@ -29,7 +29,7 @@ function ToolbarRSList() {
   return (
     <Overlay
       position='cc-tab-tools right-4 translate-x-0 md:right-1/2 md:translate-x-1/2'
-      className='cc-icons cc-animate-position items-start outline-none'
+      className='cc-icons items-start outline-none transition-all duration-500'
     >
       {controller.schema && controller.schema?.oss.length > 0 ? (
         <MiniSelectorOSS

rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/TGFlow.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
+import { AnimatePresence } from 'framer-motion';
 import { toPng } from 'html-to-image';
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -24,6 +25,7 @@ import SelectedCounter from '@/components/info/SelectedCounter';
 import { CProps } from '@/components/props';
 import ToolbarGraphSelection from '@/components/select/ToolbarGraphSelection';
 import Overlay from '@/components/ui/Overlay';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import DlgGraphParams from '@/dialogs/DlgGraphParams';
 import useLocalStorage from '@/hooks/useLocalStorage';
@@ -374,68 +376,70 @@ function TGFlow({ onOpenEdit }: TGFlowProps) {
 
   return (
     <>
-      {showParamsDialog ? (
+      <AnimatePresence>
-        <DlgGraphParams
+        {showParamsDialog ? (
-          hideWindow={() => setShowParamsDialog(false)}
+          <DlgGraphParams
-          initial={filterParams}
+            hideWindow={() => setShowParamsDialog(false)}
-          onConfirm={handleChangeParams}
+            initial={filterParams}
-        />
+            onConfirm={handleChangeParams}
-      ) : null}
-
-      <Overlay position='cc-tab-tools' className='flex flex-col items-center rounded-b-2xl cc-blur'>
-        <ToolbarTermGraph
-          noText={filterParams.noText}
-          foldDerived={filterParams.foldDerived}
-          showParamsDialog={() => setShowParamsDialog(true)}
-          onCreate={handleCreateCst}
-          onDelete={handleDeleteCst}
-          onFitView={() => setToggleResetView(prev => !prev)}
-          onSaveImage={handleSaveImage}
-          toggleFoldDerived={handleFoldDerived}
-          toggleNoText={() =>
-            setFilterParams(prev => ({
-              ...prev,
-              noText: !prev.noText
-            }))
-          }
-        />
-        {!focusCst ? (
-          <ToolbarGraphSelection
-            graph={controller.schema!.graph}
-            isCore={cstID => isBasicConcept(controller.schema?.cstByID.get(cstID)?.cst_type)}
-            isOwned={
-              controller.schema && controller.schema.inheritance.length > 0
-                ? cstID => !controller.schema!.cstByID.get(cstID)?.is_inherited
-                : undefined
-            }
-            selected={controller.selected}
-            setSelected={handleSetSelected}
-            emptySelection={controller.selected.length === 0}
           />
         ) : null}
-        {focusCst ? (
+      </AnimatePresence>
-          <ToolbarFocusedCst
+
-            center={focusCst}
+      <AnimateFade tabIndex={-1} onKeyDown={handleKeyDown}>
-            reset={() => handleSetFocus(undefined)}
+        <Overlay position='cc-tab-tools' className='flex flex-col items-center rounded-b-2xl cc-blur'>
-            showInputs={filterParams.focusShowInputs}
+          <ToolbarTermGraph
-            showOutputs={filterParams.focusShowOutputs}
+            noText={filterParams.noText}
-            toggleShowInputs={() =>
+            foldDerived={filterParams.foldDerived}
+            showParamsDialog={() => setShowParamsDialog(true)}
+            onCreate={handleCreateCst}
+            onDelete={handleDeleteCst}
+            onFitView={() => setToggleResetView(prev => !prev)}
+            onSaveImage={handleSaveImage}
+            toggleFoldDerived={handleFoldDerived}
+            toggleNoText={() =>
               setFilterParams(prev => ({
                 ...prev,
-                focusShowInputs: !prev.focusShowInputs
+                noText: !prev.noText
-              }))
-            }
-            toggleShowOutputs={() =>
-              setFilterParams(prev => ({
-                ...prev,
-                focusShowOutputs: !prev.focusShowOutputs
               }))
             }
           />
-        ) : null}
+          {!focusCst ? (
-      </Overlay>
+            <ToolbarGraphSelection
+              graph={controller.schema!.graph}
+              isCore={cstID => isBasicConcept(controller.schema?.cstByID.get(cstID)?.cst_type)}
+              isOwned={
+                controller.schema && controller.schema.inheritance.length > 0
+                  ? cstID => !controller.schema!.cstByID.get(cstID)?.is_inherited
+                  : undefined
+              }
+              selected={controller.selected}
+              setSelected={handleSetSelected}
+              emptySelection={controller.selected.length === 0}
+            />
+          ) : null}
+          {focusCst ? (
+            <ToolbarFocusedCst
+              center={focusCst}
+              reset={() => handleSetFocus(undefined)}
+              showInputs={filterParams.focusShowInputs}
+              showOutputs={filterParams.focusShowOutputs}
+              toggleShowInputs={() =>
+                setFilterParams(prev => ({
+                  ...prev,
+                  focusShowInputs: !prev.focusShowInputs
+                }))
+              }
+              toggleShowOutputs={() =>
+                setFilterParams(prev => ({
+                  ...prev,
+                  focusShowOutputs: !prev.focusShowOutputs
+                }))
+              }
+            />
+          ) : null}
+        </Overlay>
 
-      <div className='cc-fade-in' tabIndex={-1} onKeyDown={handleKeyDown}>
         <SelectedCounter
           hideZero
           totalCount={controller.schema?.stats?.count_all ?? 0}
@@ -466,9 +470,8 @@ function TGFlow({ onOpenEdit }: TGFlowProps) {
             {viewHidden}
           </div>
         </Overlay>
-
         {graph}
-      </div>
+      </AnimateFade>
     </>
   );
 }

rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
+import { motion } from 'framer-motion';
 import { useCallback, useMemo } from 'react';
 
 import { IconDropArrow, IconDropArrowUp } from '@/components/Icons';
@@ -13,8 +14,9 @@ import useLocalStorage from '@/hooks/useLocalStorage';
 import useWindowSize from '@/hooks/useWindowSize';
 import { GraphColoring } from '@/models/miscellaneous';
 import { ConstituentaID, IRSForm } from '@/models/rsform';
+import { animateDropdown, animateHiddenHeader } from '@/styling/animations';
 import { colorBgGraphNode } from '@/styling/color';
-import { PARAMETER, prefixes, storage } from '@/utils/constants';
+import { prefixes, storage } from '@/utils/constants';
 
 interface ViewHiddenProps {
   items: ConstituentaID[];
@@ -58,35 +60,39 @@ function ViewHidden({ items, selected, toggleSelection, setFocus, schema, colori
           onClick={() => setIsFolded(prev => !prev)}
         />
       </Overlay>
-      <div className={clsx('pt-2 clr-input border-x pb-2', { 'border-b rounded-b-md': isFolded })}>
-        <div
-          className='w-fit select-none'
-          style={{
-            transitionProperty: 'margin, translate',
-            transitionDuration: `${PARAMETER.fastAnimation}ms`,
-            transitionTimingFunction: 'ease-out',
-            marginLeft: isFolded ? '0.75rem' : '0',
-            translate: isFolded ? '0' : 'calc(6.5rem - 50%)'
-          }}
-        >
-          {`Скрытые [${localSelected.length} | ${items.length}]`}
-        </div>
-      </div>
-
       <div
         className={clsx(
-          'flex flex-wrap justify-center gap-2 py-2 mt-[-0.5rem]',
+          'pt-2', //
+          'border-x',
+          'clr-input',
+          'select-none',
+          {
+            'pb-2 border-b': isFolded
+          }
+        )}
+      >
+        <motion.div
+          className='w-fit'
+          animate={!isFolded ? 'open' : 'closed'}
+          variants={animateHiddenHeader}
+          initial={false}
+        >
+          {`Скрытые [${localSelected.length} | ${items.length}]`}
+        </motion.div>
+      </div>
+
+      <motion.div
+        className={clsx(
+          'flex flex-wrap justify-center gap-2 py-2',
+          'border-x border-b rounded-b-md',
+          'clr-input',
           'text-sm',
-          'clr-input border-x border-b rounded-b-md',
           'cc-scroll-y'
         )}
-        style={{
+        style={{ maxHeight: calculateHeight(windowSize.isSmall ? '10.4rem + 2px' : '12.5rem + 2px') }}
-          maxHeight: calculateHeight(windowSize.isSmall ? '10.4rem + 2px' : '12.5rem + 2px'),
+        initial={false}
-          transitionProperty: 'clip-path',
+        animate={!isFolded ? 'open' : 'closed'}
-          transitionDuration: `${PARAMETER.fastAnimation}ms`,
+        variants={animateDropdown}
-          transitionTimingFunction: 'ease-out',
-          clipPath: isFolded ? 'inset(10% 0% 90% 0%)' : 'inset(0% 0% 0% 0%)'
-        }}
       >
         {items.map(cstID => {
           const cst = schema.cstByID.get(cstID)!;
@@ -118,7 +124,7 @@ function ViewHidden({ items, selected, toggleSelection, setFocus, schema, colori
             </div>
           );
         })}
-      </div>
+      </motion.div>
     </div>
   );
 }

rsconcept/frontend/src/pages/RSFormPage/MenuRSTabs.tsx

@@ -27,9 +27,9 @@ import {
   IconUpload
 } from '@/components/Icons';
 import Button from '@/components/ui/Button';
-import Divider from '@/components/ui/Divider';
 import Dropdown from '@/components/ui/Dropdown';
 import DropdownButton from '@/components/ui/DropdownButton';
+import DropdownDivider from '@/components/ui/DropdownDivider';
 import { useAccessMode } from '@/context/AccessModeContext';
 import { useAuth } from '@/context/AuthContext';
 import { useGlobalOss } from '@/context/GlobalOssContext';
@@ -191,7 +191,7 @@ function MenuRSTabs({ onDestroy }: MenuRSTabsProps) {
             />
           ) : null}
 
-          <Divider margins='mx-3 my-1' />
+          <DropdownDivider margins='mx-3 my-1' />
 
           {user ? (
             <DropdownButton
@@ -244,7 +244,7 @@ function MenuRSTabs({ onDestroy }: MenuRSTabsProps) {
               onClick={handleInlineSynthesis}
             />
 
-            <Divider margins='mx-3 my-1' />
+            <DropdownDivider margins='mx-3 my-1' />
 
             <DropdownButton
               text='Упорядочить список'

rsconcept/frontend/src/pages/RSFormPage/RSEditContext.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { AnimatePresence } from 'framer-motion';
 import fileDownload from 'js-file-download';
 import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -325,7 +326,7 @@ export const RSEditState = ({
       model.cstDelete(data, () => {
         toast.success(information.constituentsDestroyed(deletedNames));
         setSelected(nextActive ? [nextActive] : []);
-        onDeleteCst?.(nextActive);
+        if (onDeleteCst) onDeleteCst(nextActive);
       });
     },
     [model, activeCst, onDeleteCst, setSelected]
@@ -683,7 +684,7 @@ export const RSEditState = ({
       }}
     >
       {model.schema ? (
-        <>
+        <AnimatePresence>
           {showUpload ? <DlgUploadRSForm hideWindow={() => setShowUpload(false)} /> : null}
           {showClone ? (
             <DlgCloneLibraryItem
@@ -781,7 +782,7 @@ export const RSEditState = ({
           ) : null}
 
           {showTypeGraph ? <DlgShowTypeGraph items={typeInfo} hideWindow={() => setShowTypeGraph(false)} /> : null}
-        </>
+        </AnimatePresence>
       ) : null}
 
       {children}

rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx

@@ -13,6 +13,7 @@ import Loader from '@/components/ui/Loader';
 import Overlay from '@/components/ui/Overlay';
 import TabLabel from '@/components/ui/TabLabel';
 import TextURL from '@/components/ui/TextURL';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { useGlobalOss } from '@/context/GlobalOssContext';
 import { useLibrary } from '@/context/LibraryContext';
@@ -269,12 +270,12 @@ function RSTabs() {
             </TabList>
           </Overlay>
 
-          <div className='overflow-x-hidden'>
+          <AnimateFade className='overflow-x-hidden'>
             {cardPanel}
             {listPanel}
             {editorPanel}
             {graphPanel}
-          </div>
+          </AnimateFade>
         </Tabs>
       ) : null}
     </RSEditState>

rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
+import { motion } from 'framer-motion';
 import { useMemo, useState } from 'react';
 
 import { useAccessMode } from '@/context/AccessModeContext';
@@ -8,7 +9,7 @@ import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import useWindowSize from '@/hooks/useWindowSize';
 import { ConstituentaID, IConstituenta, IRSForm } from '@/models/rsform';
 import { UserLevel } from '@/models/user';
-import { PARAMETER } from '@/utils/constants';
+import { animateSideView } from '@/styling/animations';
 
 import ConstituentsSearch from './ConstituentsSearch';
 import TableSideConstituents from './TableSideConstituents';
@@ -22,10 +23,9 @@ interface ViewConstituentsProps {
   activeCst?: IConstituenta;
   schema?: IRSForm;
   onOpenEdit: (cstID: ConstituentaID) => void;
-  isMounted: boolean;
 }
 
-function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit, isMounted }: ViewConstituentsProps) {
+function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit }: ViewConstituentsProps) {
   const { calculateHeight } = useConceptOptions();
   const windowSize = useWindowSize();
   const { accessLevel } = useAccessMode();
@@ -50,7 +50,7 @@ function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit,
   );
 
   return (
-    <div
+    <motion.div
       className={clsx(
         'border', // prettier: split-lines
         {
@@ -58,13 +58,9 @@ function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit,
           'mt-3 mx-6 rounded-md md:max-w-[45.8rem] overflow-hidden': isBottom
         }
       )}
-      style={{
+      initial={{ ...animateSideView.initial }}
-        transitionProperty: 'opacity, width',
+      animate={{ ...animateSideView.animate }}
-        transitionDuration: `${2 * PARAMETER.moveDuration}ms`,
+      exit={{ ...animateSideView.exit }}
-        transitionTimingFunction: 'ease-in-out',
-        opacity: isMounted ? 1 : 0,
-        width: isMounted ? '100%' : '0'
-      }}
     >
       <ConstituentsSearch
         dense={windowSize.width && windowSize.width < COLUMN_DENSE_SEARCH_THRESHOLD ? true : undefined}
@@ -74,7 +70,7 @@ function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit,
         setFiltered={setFilteredData}
       />
       {table}
-    </div>
+    </motion.div>
   );
 }
 

rsconcept/frontend/src/pages/RegisterPage/FormSignup.tsx

@@ -72,7 +72,7 @@ function FormSignup() {
     }
   }
   return (
-    <form className={clsx('cc-fade-in cc-column', 'mx-auto w-[36rem]', 'px-6 py-3')} onSubmit={handleSubmit}>
+    <form className={clsx('cc-column', 'mx-auto w-[36rem]', 'px-6 py-3')} onSubmit={handleSubmit}>
       <h1>
         <span>Новый пользователь</span>
         <Overlay id={globals.password_tooltip} position='top-[5.4rem] left-[3.5rem]'>

rsconcept/frontend/src/pages/RegisterPage/RegisterPage.tsx

@@ -1,4 +1,7 @@
+import { AnimatePresence } from 'framer-motion';
+
 import Loader from '@/components/ui/Loader';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import ExpectedAnonymous from '@/components/wrap/ExpectedAnonymous';
 import { useAuth } from '@/context/AuthContext';
 
@@ -10,11 +13,28 @@ function RegisterPage() {
   if (loading) {
     return <Loader />;
   }
-  if (user) {
+  if (user && !loading) {
-    return <ExpectedAnonymous />;
+    return (
-  } else {
+      <AnimateFade>
-    return <FormSignup />;
+        <ExpectedAnonymous />
+      </AnimateFade>
+    );
   }
+  return (
+    <AnimatePresence mode='wait'>
+      {loading ? <Loader key='signup-loader' /> : null}
+      {!loading && user ? (
+        <AnimateFade key='signup-has-user'>
+          <ExpectedAnonymous />
+        </AnimateFade>
+      ) : null}
+      {!loading && !user ? (
+        <AnimateFade key='signup-no-user'>
+          <FormSignup />
+        </AnimateFade>
+      ) : null}
+    </AnimatePresence>
+  );
 }
 
 export default RegisterPage;

rsconcept/frontend/src/pages/RestorePasswordPage.tsx

@@ -8,6 +8,7 @@ import InfoError, { ErrorData } from '@/components/info/InfoError';
 import SubmitButton from '@/components/ui/SubmitButton';
 import TextInput from '@/components/ui/TextInput';
 import TextURL from '@/components/ui/TextURL';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useAuth } from '@/context/AuthContext';
 import { IRequestPasswordData } from '@/models/user';
 
@@ -31,37 +32,38 @@ function RestorePasswordPage() {
     setError(undefined);
   }, [email, setError]);
 
-  if (isCompleted) {
+  return (
-    return (
+    <AnimateFade>
-      <div className='cc-fade-in flex flex-col items-center gap-1 mt-3'>
+      {!isCompleted ? (
-        <p>На указанную почту отправлены инструкции по восстановлению пароля.</p>
+        <form className={clsx('cc-column', 'w-[24rem] mx-auto', 'px-6 mt-3')} onSubmit={handleSubmit}>
-        <TextURL text='Войти в Портал' href='/login' />
+          <TextInput
-        <TextURL text='Начальная страница' href='/' />
+            id='email'
-      </div>
+            autoComplete='email'
-    );
+            required
-  } else {
+            allowEnter
-    return (
+            label='Электронная почта'
-      <form className={clsx('cc-fade-in cc-column', 'w-[24rem] mx-auto', 'px-6 mt-3')} onSubmit={handleSubmit}>
+            value={email}
-        <TextInput
+            onChange={event => setEmail(event.target.value)}
-          id='email'
+          />
-          autoComplete='email'
-          required
-          allowEnter
-          label='Электронная почта'
-          value={email}
-          onChange={event => setEmail(event.target.value)}
-        />
 
-        <SubmitButton
+          <SubmitButton
-          text='Запросить пароль'
+            text='Запросить пароль'
-          className='self-center w-[12rem] mt-3'
+            className='self-center w-[12rem] mt-3'
-          loading={loading}
+            loading={loading}
-          disabled={!email}
+            disabled={!email}
-        />
+          />
-        {error ? <ProcessError error={error} /> : null}
+          {error ? <ProcessError error={error} /> : null}
-      </form>
+        </form>
-    );
+      ) : null}
-  }
+      {isCompleted ? (
+        <div className='flex flex-col items-center gap-1 mt-3'>
+          <p>На указанную почту отправлены инструкции по восстановлению пароля.</p>
+          <TextURL text='Войти в Портал' href='/login' />
+          <TextURL text='Начальная страница' href='/' />
+        </div>
+      ) : null}
+    </AnimateFade>
+  );
 }
 
 export default RestorePasswordPage;

rsconcept/frontend/src/pages/UserProfilePage/UserContents.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import AnimateFade from '@/components/wrap/AnimateFade';
 import DataLoader from '@/components/wrap/DataLoader';
 import { useUserProfile } from '@/context/UserProfileContext';
 
@@ -10,14 +11,21 @@ function UserContents() {
   const { user, error, loading } = useUserProfile();
 
   return (
-    <DataLoader isLoading={loading} error={error} hasNoData={!user}>
+    <DataLoader
-      <div className='cc-fade-in flex gap-6 py-2 mx-auto w-fit'>
+      id='profile-page' // prettier: split lines
-        <h1 className='mb-4 select-none'>Учетные данные пользователя</h1>
+      isLoading={loading}
-        <div className='flex py-2'>
+      error={error}
-          <EditorProfile />
+      hasNoData={!user}
-          <EditorPassword />
+    >
+      <AnimateFade className='flex gap-6 py-2 mx-auto w-fit'>
+        <div className='w-fit'>
+          <h1 className='mb-4 select-none'>Учетные данные пользователя</h1>
+          <div className='flex py-2'>
+            <EditorProfile />
+            <EditorPassword />
+          </div>
         </div>
-      </div>
+      </AnimateFade>
     </DataLoader>
   );
 }

rsconcept/frontend/src/styling/animations.ts

@@ -0,0 +1,340 @@
+/**
+ * Module: animations parameters.
+ */
+
+import { Variants } from 'framer-motion';
+
+/**
+ * Duration constants in ms.
+ */
+export const animationDuration = {
+  navigationToggle: 500
+};
+
+export const animateNavigation: Variants = {
+  open: {
+    height: '3rem',
+    translateY: 0,
+    transition: {
+      type: 'spring',
+      bounce: 0,
+      duration: animationDuration.navigationToggle / 1000
+    }
+  },
+  closed: {
+    height: 0,
+    translateY: '-1.5rem',
+    transition: {
+      type: 'spring',
+      bounce: 0,
+      duration: animationDuration.navigationToggle / 1000
+    }
+  }
+};
+
+export const animateNavigationToggle: Variants = {
+  on: {
+    height: '3rem',
+    width: '1.2rem',
+    transition: {
+      type: 'spring',
+      bounce: 0,
+      duration: animationDuration.navigationToggle / 1000
+    }
+  },
+  off: {
+    height: '1.2rem',
+    width: '3rem',
+    transition: {
+      type: 'spring',
+      bounce: 0,
+      duration: animationDuration.navigationToggle / 1000
+    }
+  }
+};
+
+export const animateSlideLeft: Variants = {
+  open: {
+    clipPath: 'inset(0% 0% 0% 0%)',
+    transition: {
+      type: 'spring',
+      bounce: 0,
+      duration: 0.4,
+      delayChildren: 0.2,
+      staggerChildren: 0.05
+    }
+  },
+  closed: {
+    clipPath: 'inset(0% 100% 0% 0%)',
+    transition: {
+      type: 'spring',
+      bounce: 0,
+      duration: 0.3
+    }
+  }
+};
+
+export const animateHiddenHeader: Variants = {
+  open: {
+    translateX: 'calc(6.5rem - 50%)',
+    marginLeft: 0,
+    transition: {
+      type: 'spring',
+      bounce: 0,
+      duration: 0.3
+    }
+  },
+  closed: {
+    translateX: 0,
+    marginLeft: '0.75rem',
+    transition: {
+      type: 'spring',
+      bounce: 0,
+      duration: 0.3
+    }
+  }
+};
+
+export const animateDropdown: Variants = {
+  open: {
+    clipPath: 'inset(0% 0% 0% 0%)',
+    transition: {
+      type: 'spring',
+      bounce: 0,
+      duration: 0.4,
+      delayChildren: 0.2,
+      staggerChildren: 0.05
+    }
+  },
+  closed: {
+    clipPath: 'inset(10% 0% 90% 0%)',
+    transition: {
+      type: 'spring',
+      bounce: 0,
+      duration: 0.3
+    }
+  }
+};
+
+export const animateDropdownItem: Variants = {
+  open: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      type: 'spring',
+      duration: 0.1,
+      stiffness: 300,
+      damping: 24
+    }
+  },
+  closed: {
+    opacity: 0,
+    y: 10,
+    transition: {
+      duration: 0.1
+    }
+  }
+};
+
+export const animateRSControl: Variants = {
+  open: {
+    clipPath: 'inset(0% 0% 0% 0%)',
+    marginTop: '0.25rem',
+    height: 'max-content',
+    transition: {
+      type: 'spring',
+      bounce: 0,
+      duration: 0.4
+    }
+  },
+  closed: {
+    clipPath: 'inset(0% 0% 100% 0%)',
+    marginTop: '0',
+    height: 0,
+    transition: {
+      type: 'spring',
+      bounce: 0,
+      duration: 0.3
+    }
+  }
+};
+
+export const animateParseResults: Variants = {
+  open: {
+    clipPath: 'inset(0% 0% 0% 0%)',
+    marginTop: '0.75rem',
+    padding: '0.25rem 0.5rem 0.25rem 0.5rem',
+    borderWidth: '1px',
+    height: '4.5rem',
+    transition: {
+      type: 'spring',
+      bounce: 0,
+      duration: 0.4
+    }
+  },
+  closed: {
+    clipPath: 'inset(0% 0% 100% 0%)',
+    marginTop: '0',
+    borderWidth: '0',
+    padding: '0 0 0 0',
+    height: 0,
+    transition: {
+      type: 'spring',
+      bounce: 0,
+      duration: 0.3
+    }
+  }
+};
+
+export const animateSideView = {
+  initial: {
+    width: 0,
+    opacity: 0
+  },
+  animate: {
+    width: 'auto',
+    opacity: 1,
+    transition: {
+      width: {
+        duration: 0.4
+      },
+      opacity: {
+        delay: 0.4,
+        duration: 0
+      }
+    }
+  },
+  exit: {
+    width: 0,
+    opacity: 0,
+    transition: {
+      width: {
+        duration: 0.4
+      },
+      opacity: {
+        duration: 0
+      }
+    }
+  }
+};
+
+export const animateSideMinWidth = (width: string) => ({
+  initial: {
+    minWidth: 0,
+    opacity: 0
+  },
+  animate: {
+    minWidth: width,
+    opacity: 1,
+    transition: {
+      width: {
+        duration: 0.4
+      },
+      opacity: {
+        delay: 0.4,
+        duration: 0
+      }
+    }
+  },
+  exit: {
+    minWidth: 0,
+    opacity: 0,
+    transition: {
+      width: {
+        duration: 0.4
+      },
+      opacity: {
+        duration: 0
+      }
+    }
+  }
+});
+
+export const animateSideAppear = {
+  initial: {
+    height: 0,
+    opacity: 0
+  },
+  animate: {
+    height: 'auto',
+    opacity: 1,
+    transition: {
+      height: {
+        duration: 0.25
+      },
+      opacity: {
+        delay: 0.25,
+        duration: 0
+      }
+    }
+  },
+  exit: {
+    height: 0,
+    opacity: 0,
+    transition: {
+      height: {
+        duration: 0.25
+      },
+      opacity: {
+        duration: 0
+      }
+    }
+  }
+};
+
+export const animateModal = {
+  initial: {
+    clipPath: 'inset(50% 50% 50% 50%)',
+    opacity: 0
+  },
+  animate: {
+    clipPath: 'inset(0% 0% 0% 0%)',
+    opacity: 1,
+    transition: {
+      type: 'spring',
+      bounce: 0,
+      duration: 0.3
+    }
+  },
+  exit: {
+    opacity: 0,
+    clipPath: 'inset(50% 50% 50% 50%)',
+    transition: {
+      type: 'spring',
+      bounce: 0,
+      duration: 0.2
+    }
+  }
+};
+
+export const animateFade = {
+  initial: {
+    opacity: 0
+  },
+  variants: {
+    active: {
+      opacity: 1,
+      transition: {
+        type: 'tween',
+        ease: 'linear',
+        duration: 0.4
+      }
+    },
+    hidden: {
+      opacity: 0,
+      transition: {
+        type: 'tween',
+        ease: 'linear',
+        duration: 0.4
+      }
+    }
+  },
+  exit: {
+    opacity: 0,
+    transition: {
+      type: 'tween',
+      ease: 'linear',
+      duration: 0.4
+    }
+  }
+};