R: Remove redundant types and styles

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

@@ -1,7 +1,6 @@
 import clsx from 'clsx';
 
 import { IconLibrary2, IconManuals, IconNewItem2 } from '@/components/Icons';
-import { type EventMouse } from '@/components/props';
 import { useWindowSize } from '@/hooks/useWindowSize';
 import { useAppLayoutStore } from '@/stores/appLayout';
 import { PARAMETER } from '@/utils/constants';
@@ -19,10 +18,12 @@ export function Navigation() {
   const size = useWindowSize();
   const noNavigationAnimation = useAppLayoutStore(state => state.noNavigationAnimation);
 
-  const navigateHome = (event: EventMouse) => router.push(urls.home, event.ctrlKey || event.metaKey);
+  const navigateHome = (event: React.MouseEvent<Element>) => router.push(urls.home, event.ctrlKey || event.metaKey);
-  const navigateLibrary = (event: EventMouse) => router.push(urls.library, event.ctrlKey || event.metaKey);
+  const navigateLibrary = (event: React.MouseEvent<Element>) =>
-  const navigateHelp = (event: EventMouse) => router.push(urls.manuals, event.ctrlKey || event.metaKey);
+    router.push(urls.library, event.ctrlKey || event.metaKey);
-  const navigateCreateNew = (event: EventMouse) => router.push(urls.create_schema, event.ctrlKey || event.metaKey);
+  const navigateHelp = (event: React.MouseEvent<Element>) => router.push(urls.manuals, event.ctrlKey || event.metaKey);
+  const navigateCreateNew = (event: React.MouseEvent<Element>) =>
+    router.push(urls.create_schema, event.ctrlKey || event.metaKey);
 
   return (
     <nav

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

@@ -1,12 +1,12 @@
 import clsx from 'clsx';
 
-import { type EventMouse, type Styling, type Titled } from '@/components/props';
+import { type Styling, type Titled } from '@/components/props';
 import { globalIDs } from '@/utils/constants';
 
 interface NavigationButtonProps extends Titled, Styling {
   text?: string;
   icon: React.ReactNode;
-  onClick?: (event: EventMouse) => void;
+  onClick?: (event: React.MouseEvent<Element>) => void;
 }
 
 export function NavigationButton({

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

@@ -15,7 +15,6 @@ import {
   IconRESTapi,
   IconUser
 } from '@/components/Icons';
-import { type EventMouse } from '@/components/props';
 import { usePreferencesStore } from '@/stores/preferences';
 
 import { urls } from '../urls';
@@ -39,7 +38,7 @@ export function UserDropdown({ isOpen, hideDropdown }: UserDropdownProps) {
   const adminMode = usePreferencesStore(state => state.adminMode);
   const toggleAdminMode = usePreferencesStore(state => state.toggleAdminMode);
 
-  function navigateProfile(event: EventMouse) {
+  function navigateProfile(event: React.MouseEvent<Element>) {
     hideDropdown();
     router.push(urls.profile, event.ctrlKey || event.metaKey);
   }
@@ -54,7 +53,7 @@ export function UserDropdown({ isOpen, hideDropdown }: UserDropdownProps) {
     void logout().then(() => router.push(urls.admin, true));
   }
 
-  function gotoIcons(event: EventMouse) {
+  function gotoIcons(event: React.MouseEvent<Element>) {
     hideDropdown();
     router.push(urls.icons, event.ctrlKey || event.metaKey);
   }
@@ -64,7 +63,7 @@ export function UserDropdown({ isOpen, hideDropdown }: UserDropdownProps) {
     router.push(urls.rest_api, true);
   }
 
-  function gotoDatabaseSchema(event: EventMouse) {
+  function gotoDatabaseSchema(event: React.MouseEvent<Element>) {
     hideDropdown();
     router.push(urls.database_schema, event.ctrlKey || event.metaKey);
   }

rsconcept/frontend/src/backend/apiTransport.ts

@@ -2,8 +2,8 @@
  * Module: generic API for backend REST communications using axios library.
  */
 import { toast } from 'react-toastify';
-import axios, { AxiosError, type AxiosRequestConfig } from 'axios';
+import axios, { type AxiosError, type AxiosRequestConfig } from 'axios';
-import { z, ZodError } from 'zod';
+import { type z, ZodError } from 'zod';
 
 import { buildConstants } from '@/utils/buildConstants';
 import { errorMsg } from '@/utils/labels';

rsconcept/frontend/src/backend/queryClient.ts

@@ -1,7 +1,7 @@
 import { QueryClient } from '@tanstack/react-query';
-import { ZodError } from 'zod';
+import { type ZodError } from 'zod';
 
-import { AxiosError } from './apiTransport';
+import { type AxiosError } from './apiTransport';
 import { DELAYS } from './configuration';
 
 declare module '@tanstack/react-query' {

rsconcept/frontend/src/components/Container/FlexColumn.tsx

@@ -1,12 +1,10 @@
 import clsx from 'clsx';
 
-import { type Div } from '../props';
-
 /**
  * `flex` column container.
  * This component is useful for creating vertical layouts with flexbox.
  */
-export function FlexColumn({ className, children, ...restProps }: Div) {
+export function FlexColumn({ className, children, ...restProps }: React.ComponentProps<'div'>) {
   return (
     <div className={clsx('cc-column', className)} {...restProps}>
       {children}

rsconcept/frontend/src/components/Control/Button.tsx

@@ -2,9 +2,9 @@ import clsx from 'clsx';
 
 import { globalIDs } from '@/utils/constants';
 
-import { type Button as ButtonStyle, type Colors, type Control } from '../props';
+import { type Button as ButtonStyle, type Control } from '../props';
 
-interface ButtonProps extends Control, Colors, ButtonStyle {
+interface ButtonProps extends Control, ButtonStyle {
   /** Icon to display first. */
   icon?: React.ReactNode;
 
@@ -32,7 +32,6 @@ export function Button({
   disabled,
   noBorder,
   noOutline,
-  colors = 'clr-btn-default',
   className,
   ...restProps
 }: ButtonProps) {
@@ -43,7 +42,7 @@ export function Button({
       className={clsx(
         'inline-flex gap-2 items-center justify-center',
         'select-none disabled:cursor-auto',
-        'cc-animate-color',
+        'clr-btn-default cc-animate-color',
         {
           'border rounded-sm': !noBorder,
           'px-1': dense,
@@ -53,8 +52,7 @@ export function Button({
           'outline-hidden': noOutline,
           'clr-outline': !noOutline
         },
-        className,
+        className
-        colors
       )}
       data-tooltip-id={!!title || !!titleHtml ? globalIDs.tooltip : undefined}
       data-tooltip-html={titleHtml}

rsconcept/frontend/src/components/Control/SelectorButton.tsx

@@ -11,9 +11,6 @@ interface SelectorButtonProps extends Button {
   /** Icon to display in the button. */
   icon?: React.ReactNode;
 
-  /** Classnames for the colors of the button. */
-  colors?: string;
-
   /** Indicates if button background should be transparent. */
   transparent?: boolean;
 }
@@ -26,7 +23,6 @@ export function SelectorButton({
   icon,
   title,
   titleHtml,
-  colors = 'clr-btn-default',
   className,
   transparent,
   hideTitle,
@@ -44,10 +40,9 @@ export function SelectorButton({
         'cc-animate-color',
         {
           'clr-hover': transparent,
-          'border': !transparent
+          'clr-btn-default border': !transparent
         },
-        className,
+        className
-        !transparent && colors
       )}
       data-tooltip-id={!!title || !!titleHtml ? globalIDs.tooltip : undefined}
       data-tooltip-html={titleHtml}

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

@@ -17,7 +17,7 @@ import {
   type VisibilityState
 } from '@tanstack/react-table';
 
-import { type EventMouse, type Styling } from '../props';
+import { type Styling } from '../props';
 
 import { DefaultNoData } from './DefaultNoData';
 import { PaginationTools } from './PaginationTools';
@@ -67,10 +67,10 @@ export interface DataTableProps<TData extends RowData>
   noDataComponent?: React.ReactNode;
 
   /** Callback to be called when a row is clicked. */
-  onRowClicked?: (rowData: TData, event: EventMouse) => void;
+  onRowClicked?: (rowData: TData, event: React.MouseEvent<Element>) => void;
 
   /** Callback to be called when a row is double clicked. */
-  onRowDoubleClicked?: (rowData: TData, event: EventMouse) => void;
+  onRowDoubleClicked?: (rowData: TData, event: React.MouseEvent<Element>) => void;
 
   /** Enable row selection. */
   enableRowSelection?: boolean;

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

@@ -3,8 +3,6 @@
 import { type Cell, flexRender, type Row, type Table } from '@tanstack/react-table';
 import clsx from 'clsx';
 
-import { type EventMouse } from '../props';
-
 import { SelectRow } from './SelectRow';
 import { type IConditionalStyle } from '.';
 
@@ -18,8 +16,8 @@ interface TableBodyProps<TData> {
   lastSelected: string | null;
   onChangeLastSelected: (newValue: string | null) => void;
 
-  onRowClicked?: (rowData: TData, event: EventMouse) => void;
+  onRowClicked?: (rowData: TData, event: React.MouseEvent<Element>) => void;
-  onRowDoubleClicked?: (rowData: TData, event: EventMouse) => void;
+  onRowDoubleClicked?: (rowData: TData, event: React.MouseEvent<Element>) => void;
 }
 
 export function TableBody<TData>({
@@ -33,7 +31,7 @@ export function TableBody<TData>({
   onRowClicked,
   onRowDoubleClicked
 }: TableBodyProps<TData>) {
-  function handleRowClicked(target: Row<TData>, event: EventMouse) {
+  function handleRowClicked(target: Row<TData>, event: React.MouseEvent<Element>) {
     onRowClicked?.(target.original, event);
     if (enableRowSelection && target.getCanSelect()) {
       if (event.shiftKey && !!lastSelected && lastSelected !== target.id) {

rsconcept/frontend/src/components/InfoError.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { ZodError } from 'zod';
 
-import { AxiosError, isAxiosError } from '@/backend/apiTransport';
+import { type AxiosError, isAxiosError } from '@/backend/apiTransport';
 import { isResponseHtml } from '@/utils/utils';
 
 import { PrettyJson } from './View';

rsconcept/frontend/src/components/Input/Checkbox.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { globalIDs } from '@/utils/constants';
 
 import { CheckboxChecked } from '../Icons';
-import { type Button, type EventMouse } from '../props';
+import { type Button } from '../props';
 
 export interface CheckboxProps extends Omit<Button, 'value' | 'onClick' | 'onChange'> {
   /** Label to display next to the checkbox. */
@@ -35,7 +35,7 @@ export function Checkbox({
 }: CheckboxProps) {
   const cursor = disabled ? 'cursor-arrow' : onChange ? 'cursor-pointer' : '';
 
-  function handleClick(event: EventMouse): void {
+  function handleClick(event: React.MouseEvent<Element>): void {
     event.preventDefault();
     event.stopPropagation();
     if (disabled || !onChange) {

rsconcept/frontend/src/components/Input/CheckboxTristate.tsx

@@ -3,7 +3,6 @@ import clsx from 'clsx';
 import { globalIDs } from '@/utils/constants';
 
 import { CheckboxChecked, CheckboxNull } from '../Icons';
-import { type EventMouse } from '../props';
 
 import { type CheckboxProps } from './Checkbox';
 
@@ -31,7 +30,7 @@ export function CheckboxTristate({
 }: CheckboxTristateProps) {
   const cursor = disabled ? 'cursor-arrow' : onChange ? 'cursor-pointer' : '';
 
-  function handleClick(event: EventMouse): void {
+  function handleClick(event: React.MouseEvent<Element>): void {
     event.preventDefault();
     event.stopPropagation();
     if (disabled || !onChange) {

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

@@ -5,11 +5,11 @@ import clsx from 'clsx';
 
 import { Button } from '../Control';
 import { IconUpload } from '../Icons';
-import { type Input } from '../props';
+import { type Titled } from '../props';
 
 import { Label } from './Label';
 
-interface FileInputProps extends Omit<Input, 'accept' | 'type'> {
+interface FileInputProps extends Titled, Omit<React.ComponentProps<'input'>, 'accept' | 'type'> {
   /** Label to display in file upload button. */
   label: string;
 

rsconcept/frontend/src/components/Input/Label.tsx

@@ -1,8 +1,6 @@
 import clsx from 'clsx';
 
-import { type Label as LabelStyle } from '../props';
+interface LabelProps extends Omit<React.ComponentProps<'label'>, 'children'> {
-
-interface LabelProps extends LabelStyle {
   /** Text to display. */
   text?: string;
 }

rsconcept/frontend/src/components/Input/SearchBar.tsx

@@ -48,10 +48,10 @@ export function SearchBar({
       <TextInput
         id={id}
         noOutline
+        transparent
         placeholder={placeholder}
         type='search'
-        colors='bg-transparent'
+        className={clsx('bg-transparent', !noIcon && 'pl-10')}
-        className={clsx(!noIcon && 'pl-10')}
         noBorder={noBorder}
         value={query}
         onChange={event => onChangeQuery?.(event.target.value)}

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

@@ -6,7 +6,7 @@ import { globalIDs, PARAMETER } from '@/utils/constants';
 import { Overlay } from '../Container';
 import { MiniButton } from '../Control';
 import { IconDropArrow, IconPageRight } from '../Icons';
-import { type EventMouse, type Styling } from '../props';
+import { type Styling } from '../props';
 
 interface SelectTreeProps<ItemType> extends Styling {
   /** Current value. */
@@ -66,13 +66,13 @@ export function SelectTree<ItemType>({
     );
   }
 
-  function handleClickFold(event: EventMouse, target: ItemType, showChildren: boolean) {
+  function handleClickFold(event: React.MouseEvent<Element>, target: ItemType, showChildren: boolean) {
     event.preventDefault();
     event.stopPropagation();
     onFoldItem(target, showChildren);
   }
 
-  function handleSetValue(event: EventMouse, target: ItemType) {
+  function handleSetValue(event: React.MouseEvent<Element>, target: ItemType) {
     event.preventDefault();
     event.stopPropagation();
     onChange(target);

rsconcept/frontend/src/components/Input/TextArea.tsx

@@ -1,11 +1,14 @@
 import clsx from 'clsx';
 
 import { Label } from '../Input/Label';
-import { type Colors, type Editor, type ErrorProcessing, type TextArea as TextAreaStyle } from '../props';
+import { type Editor, type ErrorProcessing, type Titled } from '../props';
 
 import { ErrorField } from './ErrorField';
 
-export interface TextAreaProps extends Editor, ErrorProcessing, Colors, TextAreaStyle {
+export interface TextAreaProps extends Editor, ErrorProcessing, Titled, React.ComponentProps<'textarea'> {
+  /** Indicates that the input should be transparent. */
+  transparent?: boolean;
+
   /** Indicates that padding should be minimal. */
   dense?: boolean;
 
@@ -23,6 +26,7 @@ export function TextArea({
   id,
   label,
   required,
+  transparent,
   rows,
   dense,
   noBorder,
@@ -31,7 +35,6 @@ export function TextArea({
   className,
   fitContent,
   error,
-  colors = 'clr-input',
   ...restProps
 }: TextAreaProps) {
   return (
@@ -53,14 +56,15 @@ export function TextArea({
           'leading-tight',
           'overflow-x-hidden overflow-y-auto',
           {
-            'cc-fit-content': fitContent,
+            'field-sizing-content': fitContent,
             'resize-none': noResize,
             'border': !noBorder,
             'grow max-w-full': dense,
             'mt-2': !dense && !!label,
-            'clr-outline': !noOutline
+            'clr-outline': !noOutline,
+            'bg-transparent': transparent,
+            'clr-input': !transparent
           },
-          colors,
           !dense && className
         )}
         rows={rows}

rsconcept/frontend/src/components/Input/TextInput.tsx

@@ -1,11 +1,14 @@
 import clsx from 'clsx';
 
 import { Label } from '../Input/Label';
-import { type Colors, type Editor, type ErrorProcessing, type Input } from '../props';
+import { type Editor, type ErrorProcessing, type Titled } from '../props';
 
 import { ErrorField } from './ErrorField';
 
-interface TextInputProps extends Editor, ErrorProcessing, Colors, Input {
+interface TextInputProps extends Editor, ErrorProcessing, Titled, React.ComponentProps<'input'> {
+  /** Indicates that the input should be transparent. */
+  transparent?: boolean;
+
   /** Indicates that padding should be minimal. */
   dense?: boolean;
 
@@ -30,8 +33,8 @@ export function TextInput({
   noOutline,
   allowEnter,
   disabled,
+  transparent,
   className,
-  colors = 'clr-input',
   onKeyDown,
   error,
   ...restProps
@@ -57,9 +60,10 @@ export function TextInput({
             'grow max-w-full': dense,
             'mt-2': !dense && !!label,
             'border': !noBorder,
-            'clr-outline': !noOutline
+            'clr-outline': !noOutline,
+            'bg-transparent': transparent,
+            'clr-input': !transparent
           },
-          colors,
           !dense && className
         )}
         onKeyDown={!allowEnter && !onKeyDown ? preventEnterCapture : onKeyDown}

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

@@ -2,7 +2,7 @@
 
 import clsx from 'clsx';
 
-import { BadgeHelp, HelpTopic } from '@/features/help';
+import { BadgeHelp, type HelpTopic } from '@/features/help';
 
 import { useEscapeKey } from '@/hooks/useEscapeKey';
 import { useDialogsStore } from '@/stores/dialogs';

rsconcept/frontend/src/components/View/NoData.tsx

@@ -1,11 +1,9 @@
 import clsx from 'clsx';
 
-import { type Div } from '@/components/props';
-
 /**
  * Wraps content in a div with a centered text.
  */
-export function NoData({ className, children, ...restProps }: Div) {
+export function NoData({ className, children, ...restProps }: React.ComponentProps<'div'>) {
   return (
     <div className={clsx('p-3 flex flex-col items-center text-center select-none w-full', className)} {...restProps}>
       {children}

rsconcept/frontend/src/components/View/ValueIcon.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { globalIDs } from '@/utils/constants';
 
 import { MiniButton } from '../Control';
-import { type EventMouse, type Styling, type Titled } from '../props';
+import { type Styling, type Titled } from '../props';
 
 interface ValueIconProps extends Styling, Titled {
   /** Id of the component. */
@@ -19,7 +19,7 @@ interface ValueIconProps extends Styling, Titled {
   textClassName?: string;
 
   /** Callback to be called when the component is clicked. */
-  onClick?: (event: EventMouse) => void;
+  onClick?: (event: React.MouseEvent<Element>) => void;
 
   /** Number of symbols to display in a small size. */
   smallThreshold?: number;

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

@@ -1,6 +1,6 @@
 // =========== Module contains interfaces for common UI elements. ==========
-import React from 'react';
+import type React from 'react';
-import { FieldError } from 'react-hook-form';
+import { type FieldError } from 'react-hook-form';
 
 /**
  * Represents an object that can have inline styles and CSS class names for styling.
@@ -13,14 +13,6 @@ export interface Styling {
   className?: string;
 }
 
-/**
- * Represents an object that can have a color or set of colors.
- */
-export interface Colors {
-  /** Optional color or set of colors applied via classNames. */
-  colors?: string;
-}
-
 /**
  * Represents an object that can have a title with optional HTML rendering and a flag to hide the title.
  */
@@ -70,32 +62,7 @@ export type Editor = Control & {
   label?: string;
 };
 
-/**
- * Represents `div` component with all standard HTML attributes and React-specific properties.
- */
-export type Div = React.ComponentProps<'div'>;
-
 /**
  * Represents `button` component with optional title and HTML attributes.
  */
 export type Button = Titled & Omit<React.ComponentProps<'button'>, 'children' | 'type'>;
-
-/**
- * Represents `label` component with HTML attributes.
- */
-export type Label = Omit<React.ComponentProps<'label'>, 'children'>;
-
-/**
- * Represents `textarea` component with optional title and HTML attributes.
- */
-export type TextArea = Titled & React.ComponentProps<'textarea'>;
-
-/**
- * Represents `input` component with optional title and HTML attributes.
- */
-export type Input = Titled & React.ComponentProps<'input'>;
-
-/**
- * Represents `mouse event` in React.
- */
-export type EventMouse = React.MouseEvent<Element, MouseEvent>;

rsconcept/frontend/src/features/auth/pages/PasswordChangePage.tsx

@@ -24,9 +24,6 @@ export function Component() {
   const [newPassword, setNewPassword] = useState('');
   const [newPasswordRepeat, setNewPasswordRepeat] = useState('');
 
-  const passwordColor =
-    !!newPassword && !!newPasswordRepeat && newPassword !== newPasswordRepeat ? 'bg-warn-100' : 'clr-input';
-
   const canSubmit = !!newPassword && !!newPasswordRepeat && newPassword === newPasswordRepeat;
 
   function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
@@ -61,7 +58,6 @@ export function Component() {
         label='Новый пароль'
         autoComplete='new-password'
         allowEnter
-        colors={passwordColor}
         value={newPassword}
         onChange={event => {
           setNewPassword(event.target.value);
@@ -73,7 +69,6 @@ export function Component() {
         label='Повторите новый'
         autoComplete='new-password'
         allowEnter
-        colors={passwordColor}
         value={newPasswordRepeat}
         onChange={event => {
           setNewPasswordRepeat(event.target.value);

rsconcept/frontend/src/features/help/components/BadgeHelp.tsx

@@ -7,7 +7,7 @@ import { Loader } from '@/components/Loader';
 import { type Styling } from '@/components/props';
 import { usePreferencesStore } from '@/stores/preferences';
 
-import { HelpTopic } from '../models/helpTopic';
+import { type HelpTopic } from '../models/helpTopic';
 
 const TopicPage = React.lazy(() =>
   import('@/features/help/pages/ManualsPage/TopicPage').then(module => ({ default: module.TopicPage }))

rsconcept/frontend/src/features/help/components/LinkTopic.tsx

@@ -2,7 +2,7 @@ import { urls } from '@/app';
 
 import { TextURL } from '@/components/Control';
 
-import { HelpTopic } from '../models/helpTopic';
+import { type HelpTopic } from '../models/helpTopic';
 
 interface TextURLProps {
   /** Text to display. */

rsconcept/frontend/src/features/help/components/TopicItem.tsx

@@ -2,7 +2,7 @@ import { removeTags } from '@/utils/utils';
 
 import { LinkTopic } from '../components/LinkTopic';
 import { describeHelpTopic, labelHelpTopic } from '../labels';
-import { HelpTopic } from '../models/helpTopic';
+import { type HelpTopic } from '../models/helpTopic';
 
 interface TopicItemProps {
   topic: HelpTopic;

rsconcept/frontend/src/features/help/pages/ManualsPage/TopicsList.tsx

@@ -2,7 +2,7 @@
 
 import { useWindowSize } from '@/hooks/useWindowSize';
 
-import { HelpTopic } from '../../models/helpTopic';
+import { type HelpTopic } from '../../models/helpTopic';
 
 import { TopicsDropdown } from './TopicsDropdown';
 import { TopicsStatic } from './TopicsStatic';

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

@@ -2,7 +2,7 @@
 
 import { useMainHeight } from '@/stores/appLayout';
 
-import { HelpTopic } from '../../models/helpTopic';
+import { type HelpTopic } from '../../models/helpTopic';
 
 import { TopicPage } from './TopicPage';
 

rsconcept/frontend/src/features/library/backend/api.ts

@@ -12,7 +12,7 @@ import { DELAYS, KEYS } from '@/backend/configuration';
 import { infoMsg } from '@/utils/labels';
 
 import {
-  AccessPolicy,
+  type AccessPolicy,
   type ICloneLibraryItemDTO,
   type ICreateLibraryItemDTO,
   type ILibraryItem,

rsconcept/frontend/src/features/library/backend/useSetAccessPolicy.tsx

@@ -6,7 +6,7 @@ import { type IRSFormDTO } from '@/features/rsform/backend/types';
 import { KEYS } from '@/backend/configuration';
 
 import { libraryApi } from './api';
-import { AccessPolicy, type ILibraryItem } from './types';
+import { type AccessPolicy, type ILibraryItem } from './types';
 
 export const useSetAccessPolicy = () => {
   const client = useQueryClient();

rsconcept/frontend/src/features/library/components/EditorLibraryItem.tsx

@@ -16,7 +16,6 @@ import {
   IconOwner
 } from '@/components/Icons';
 import { Loader } from '@/components/Loader';
-import { type EventMouse } from '@/components/props';
 import { ValueIcon } from '@/components/View';
 import { useDialogsStore } from '@/stores/dialogs';
 import { useModificationStore } from '@/stores/modification';
@@ -62,7 +61,7 @@ export function EditorLibraryItem({ schema, isAttachedToOSS }: EditorLibraryItem
     void setOwner({ itemID: schema.id, owner: newValue });
   };
 
-  function handleOpenLibrary(event: EventMouse) {
+  function handleOpenLibrary(event: React.MouseEvent<Element>) {
     setGlobalLocation(schema.location);
     router.push(urls.library, event.ctrlKey || event.metaKey);
   }

rsconcept/frontend/src/features/library/components/MiniSelectorOSS.tsx

@@ -6,20 +6,20 @@ import { MiniButton } from '@/components/Control';
 import { Dropdown, DropdownButton, useDropdown } from '@/components/Dropdown';
 import { IconOSS } from '@/components/Icons';
 import { Label } from '@/components/Input';
-import { type EventMouse, type Styling } from '@/components/props';
+import { type Styling } from '@/components/props';
 import { prefixes } from '@/utils/constants';
 
 import { type ILibraryItemReference } from '../models/library';
 
 interface MiniSelectorOSSProps extends Styling {
   items: ILibraryItemReference[];
-  onSelect: (event: EventMouse, newValue: ILibraryItemReference) => void;
+  onSelect: (event: React.MouseEvent<Element>, newValue: ILibraryItemReference) => void;
 }
 
 export function MiniSelectorOSS({ items, onSelect, className, ...restProps }: MiniSelectorOSSProps) {
   const ossMenu = useDropdown();
 
-  function onToggle(event: EventMouse) {
+  function onToggle(event: React.MouseEvent<Element>) {
     if (items.length > 1) {
       ossMenu.toggle();
     } else {

rsconcept/frontend/src/features/library/components/PickSchema.tsx

@@ -8,11 +8,11 @@ import { createColumnHelper, DataTable, type IConditionalStyle } from '@/compone
 import { Dropdown, useDropdown } from '@/components/Dropdown';
 import { IconClose, IconFolderTree } from '@/components/Icons';
 import { SearchBar } from '@/components/Input';
-import { type EventMouse, type Styling } from '@/components/props';
+import { type Styling } from '@/components/props';
 import { APP_COLORS } from '@/styling/colors';
 import { prefixes } from '@/utils/constants';
 
-import { type ILibraryItem, LibraryItemType } from '../backend/types';
+import { type ILibraryItem, type LibraryItemType } from '../backend/types';
 import { matchLibraryItem } from '../models/libraryAPI';
 
 import { SelectLocation } from './SelectLocation';
@@ -96,7 +96,7 @@ export function PickSchema({
     }
   ];
 
-  function handleLocationClick(event: EventMouse, newValue: string) {
+  function handleLocationClick(event: React.MouseEvent<Element>, newValue: string) {
     event.preventDefault();
     event.stopPropagation();
     locationMenu.hide();

rsconcept/frontend/src/features/library/components/SelectLocation.tsx

@@ -5,15 +5,15 @@ import clsx from 'clsx';
 
 import { MiniButton } from '@/components/Control';
 import { IconFolder, IconFolderClosed, IconFolderEmpty, IconFolderOpened } from '@/components/Icons';
-import { type EventMouse, type Styling } from '@/components/props';
+import { type Styling } from '@/components/props';
 
 import { useFolders } from '../backend/useFolders';
 import { labelFolderNode } from '../labels';
-import { FolderNode } from '../models/FolderTree';
+import { type FolderNode } from '../models/FolderTree';
 
 interface SelectLocationProps extends Styling {
   value: string;
-  onClick: (event: EventMouse, target: FolderNode) => void;
+  onClick: (event: React.MouseEvent<Element>, target: FolderNode) => void;
 
   prefix: string;
   dense?: boolean;
@@ -44,7 +44,7 @@ export function SelectLocation({ value, dense, prefix, onClick, className, style
     );
   }
 
-  function handleClickFold(event: EventMouse, target: FolderNode, showChildren: boolean) {
+  function handleClickFold(event: React.MouseEvent<Element>, target: FolderNode, showChildren: boolean) {
     event.preventDefault();
     event.stopPropagation();
     onFoldItem(target, showChildren);

rsconcept/frontend/src/features/library/components/SelectLocationContext.tsx

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import { MiniButton } from '@/components/Control';
 import { Dropdown, useDropdown } from '@/components/Dropdown';
 import { IconFolderTree } from '@/components/Icons';
-import { type EventMouse, type Styling } from '@/components/props';
+import { type Styling } from '@/components/props';
 import { prefixes } from '@/utils/constants';
 
 import { SelectLocation } from './SelectLocation';
@@ -26,7 +26,7 @@ export function SelectLocationContext({
 }: SelectLocationContextProps) {
   const menu = useDropdown();
 
-  function handleClick(event: EventMouse, newValue: string) {
+  function handleClick(event: React.MouseEvent<Element>, newValue: string) {
     event.preventDefault();
     event.stopPropagation();
     menu.hide();

rsconcept/frontend/src/features/library/components/ToolbarItemAccess.tsx

@@ -8,7 +8,7 @@ import { IconImmutable, IconMutable } from '@/components/Icons';
 import { Label } from '@/components/Input';
 import { PARAMETER } from '@/utils/constants';
 
-import { AccessPolicy, type ILibraryItem } from '../backend/types';
+import { type AccessPolicy, type ILibraryItem } from '../backend/types';
 import { useMutatingLibrary } from '../backend/useMutatingLibrary';
 import { useSetAccessPolicy } from '../backend/useSetAccessPolicy';
 

rsconcept/frontend/src/features/library/labels.ts

@@ -1,5 +1,5 @@
 import { AccessPolicy, LibraryItemType } from './backend/types';
-import { FolderNode } from './models/FolderTree';
+import { type FolderNode } from './models/FolderTree';
 import { LocationHead } from './models/library';
 import { validateLocation } from './models/libraryAPI';
 

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

@@ -11,7 +11,6 @@ import { FlexColumn } from '@/components/Container';
 import { MiniButton, TextURL } from '@/components/Control';
 import { createColumnHelper, DataTable, type IConditionalStyle, type VisibilityState } from '@/components/DataTable';
 import { IconFolderTree } from '@/components/Icons';
-import { type EventMouse } from '@/components/props';
 import { useWindowSize } from '@/hooks/useWindowSize';
 import { useFitHeight } from '@/stores/appLayout';
 import { usePreferencesStore } from '@/stores/preferences';
@@ -39,7 +38,7 @@ export function TableLibraryItems({ items }: TableLibraryItemsProps) {
   const itemsPerPage = usePreferencesStore(state => state.libraryPagination);
   const setItemsPerPage = usePreferencesStore(state => state.setLibraryPagination);
 
-  function handleOpenItem(item: ILibraryItem, event: EventMouse) {
+  function handleOpenItem(item: ILibraryItem, event: React.MouseEvent<Element>) {
     const selection = window.getSelection();
     if (!!selection && selection.toString().length > 0) {
       return;
@@ -61,7 +60,7 @@ export function TableLibraryItems({ items }: TableLibraryItemsProps) {
     });
   }, [windowSize]);
 
-  function handleToggleFolder(event: EventMouse) {
+  function handleToggleFolder(event: React.MouseEvent<Element>) {
     event.preventDefault();
     event.stopPropagation();
     toggleFolderMode();

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

@@ -17,7 +17,6 @@ import {
   IconUserSearch
 } from '@/components/Icons';
 import { SearchBar } from '@/components/Input';
-import { type EventMouse } from '@/components/props';
 import { prefixes } from '@/utils/constants';
 import { tripleToggleColor } from '@/utils/utils';
 
@@ -66,7 +65,7 @@ export function ToolbarSearch({ total, filtered }: ToolbarSearchProps) {
     toggleFolderMode();
   }
 
-  function handleFolderClick(event: EventMouse) {
+  function handleFolderClick(event: React.MouseEvent<Element>) {
     if (event.ctrlKey || event.metaKey) {
       toggleFolderMode();
     } else {

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

@@ -7,7 +7,6 @@ import { BadgeHelp, HelpTopic } from '@/features/help';
 import { MiniButton } from '@/components/Control';
 import { SubfoldersIcon } from '@/components/DomainIcons';
 import { IconFolderEdit, IconFolderTree } from '@/components/Icons';
-import { type EventMouse } from '@/components/props';
 import { useWindowSize } from '@/hooks/useWindowSize';
 import { useFitHeight } from '@/stores/appLayout';
 import { PARAMETER, prefixes } from '@/utils/constants';
@@ -15,7 +14,7 @@ import { infoMsg } from '@/utils/labels';
 
 import { useLibrary } from '../../backend/useLibrary';
 import { SelectLocation } from '../../components/SelectLocation';
-import { FolderNode } from '../../models/FolderTree';
+import { type FolderNode } from '../../models/FolderTree';
 import { useLibrarySearchStore } from '../../stores/librarySearch';
 
 interface ViewSideLocationProps {
@@ -48,7 +47,7 @@ export function ViewSideLocation({ isVisible, onRenameLocation }: ViewSideLocati
 
   const maxHeight = useFitHeight('4.5rem');
 
-  function handleClickFolder(event: EventMouse, target: FolderNode) {
+  function handleClickFolder(event: React.MouseEvent<Element>, target: FolderNode) {
     event.preventDefault();
     event.stopPropagation();
     if (event.ctrlKey || event.metaKey) {

rsconcept/frontend/src/features/library/stores/librarySearch.ts

@@ -3,7 +3,7 @@ import { persist } from 'zustand/middleware';
 
 import { toggleTristateFlag } from '@/utils/utils';
 
-import { type ILibraryFilter, LocationHead } from '../models/library';
+import { type ILibraryFilter, type LocationHead } from '../models/library';
 
 interface LibrarySearchStore {
   folderMode: boolean;

rsconcept/frontend/src/features/oss/models/oss.ts

@@ -2,7 +2,7 @@
  * Module: Schema of Synthesis Operations.
  */
 
-import { Graph } from '@/models/Graph';
+import { type Graph } from '@/models/Graph';
 
 import { type ICstSubstituteInfo, type IOperationDTO, type IOperationSchemaDTO } from '../backend/types';
 

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

@@ -19,7 +19,6 @@ import { urls, useConceptNavigation } from '@/app';
 import { useLibrary } from '@/features/library';
 
 import { Overlay } from '@/components/Container';
-import { type EventMouse } from '@/components/props';
 import { useMainHeight } from '@/stores/appLayout';
 import { useTooltipsStore } from '@/stores/tooltips';
 import { APP_COLORS } from '@/styling/colors';
@@ -236,7 +235,7 @@ export function OssFlow() {
       });
   }
 
-  function handleContextMenu(event: EventMouse, node: OssNode) {
+  function handleContextMenu(event: React.MouseEvent<Element>, node: OssNode) {
     event.preventDefault();
     event.stopPropagation();
 
@@ -257,7 +256,7 @@ export function OssFlow() {
     handleContextMenuHide();
   }
 
-  function handleNodeDoubleClick(event: EventMouse, node: OssNode) {
+  function handleNodeDoubleClick(event: React.MouseEvent<Element>, node: OssNode) {
     event.preventDefault();
     event.stopPropagation();
     if (node.data.operation.result) {

rsconcept/frontend/src/features/rsform/components/InfoConstituenta.tsx

@@ -1,13 +1,12 @@
 import clsx from 'clsx';
 
 import { IconChild } from '@/components/Icons';
-import { type Div } from '@/components/props';
 
 import { labelCstTypification } from '../labels';
 import { type IConstituenta } from '../models/rsform';
 import { isBasicConcept } from '../models/rsformAPI';
 
-interface InfoConstituentaProps extends Div {
+interface InfoConstituentaProps extends React.ComponentProps<'div'> {
   data: IConstituenta;
 }
 

rsconcept/frontend/src/features/rsform/components/RSInput/utils.ts

@@ -1,5 +1,5 @@
 import { syntaxTree } from '@codemirror/language';
-import { EditorState } from '@uiw/react-codemirror';
+import { type EditorState } from '@uiw/react-codemirror';
 
 import { findEnvelopingNodes } from '@/utils/codemirror';
 

rsconcept/frontend/src/features/rsform/components/RefsInput/utils.ts

@@ -1,5 +1,5 @@
 import { syntaxTree } from '@codemirror/language';
-import { EditorState } from '@uiw/react-codemirror';
+import { type EditorState } from '@uiw/react-codemirror';
 
 import { findEnvelopingNodes } from '@/utils/codemirror';
 

rsconcept/frontend/src/features/rsform/components/ToolbarGraphSelection.tsx

@@ -13,7 +13,7 @@ import {
   IconReset
 } from '@/components/Icons';
 import { type Styling } from '@/components/props';
-import { Graph } from '@/models/Graph';
+import { type Graph } from '@/models/Graph';
 
 interface ToolbarGraphSelectionProps extends Styling {
   value: number[];

rsconcept/frontend/src/features/rsform/dialogs/DlgEditWordForms/DlgEditWordForms.tsx

@@ -18,7 +18,7 @@ import { useIsProcessingCctext } from '../../backend/cctext/useIsProcessingCctex
 import { useParseText } from '../../backend/cctext/useParseText';
 import { useCstUpdate } from '../../backend/useCstUpdate';
 import { SelectMultiGrammeme } from '../../components/SelectMultiGrammeme';
-import { Grammeme, type IGrammemeOption, type IWordForm, supportedGrammemes } from '../../models/language';
+import { type Grammeme, type IGrammemeOption, type IWordForm, supportedGrammemes } from '../../models/language';
 import { parseGrammemes, supportedGrammeOptions, wordFormEquals } from '../../models/languageAPI';
 import { type IConstituenta } from '../../models/rsform';
 

rsconcept/frontend/src/features/rsform/dialogs/DlgRenameCst.tsx

@@ -10,7 +10,7 @@ import { TextInput } from '@/components/Input';
 import { ModalForm } from '@/components/Modal';
 import { useDialogsStore } from '@/stores/dialogs';
 
-import { CstType, type ICstRenameDTO, schemaCstRename } from '../backend/types';
+import { type CstType, type ICstRenameDTO, schemaCstRename } from '../backend/types';
 import { useCstRename } from '../backend/useCstRename';
 import { SelectCstType } from '../components/SelectCstType';
 import { type IConstituenta, type IRSForm } from '../models/rsform';

rsconcept/frontend/src/features/rsform/dialogs/DlgShowTypeGraph/MGraphFlow.tsx

@@ -3,7 +3,7 @@
 import { useEffect } from 'react';
 import { type Edge, ReactFlow, useEdgesState, useNodesState } from 'reactflow';
 
-import { TMGraph } from '../../models/TMGraph';
+import { type TMGraph } from '../../models/TMGraph';
 
 import { TMGraphEdgeTypes } from './graph/MGraphEdgeTypes';
 import { applyLayout } from './graph/MGraphLayout';

rsconcept/frontend/src/features/rsform/models/rsform.ts

@@ -5,9 +5,9 @@
 import { type ILibraryItemData, type IVersionInfo } from '@/features/library/backend/types';
 import { type CurrentVersion, type ILibraryItemReference } from '@/features/library/models/library';
 
-import { Graph } from '@/models/Graph';
+import { type Graph } from '@/models/Graph';
 
-import { CstType, ParsingStatus, ValueClass } from '../backend/types';
+import { CstType, type ParsingStatus, type ValueClass } from '../backend/types';
 
 import { type IArgumentInfo } from './rslang';
 

rsconcept/frontend/src/features/rsform/models/rslang.ts

@@ -2,7 +2,7 @@
  * Module: Models for RSLanguage.
  */
 
-import { TokenID } from '../backend/types';
+import { type TokenID } from '../backend/types';
 
 /**
  * Represents alias mapping.

rsconcept/frontend/src/features/rsform/models/rslangAPI.ts

@@ -2,12 +2,12 @@
  * Module: API for RSLanguage.
  */
 
-import { Tree } from '@lezer/common';
+import { type Tree } from '@lezer/common';
 
 import { cursorNode } from '@/utils/codemirror';
 import { PARAMETER } from '@/utils/constants';
 
-import { CstType, type IRSErrorDescription, RSErrorType } from '../backend/types';
+import { CstType, type IRSErrorDescription, type RSErrorType } from '../backend/types';
 
 import { type AliasMapping, type IArgumentValue, RSErrorClass, type SyntaxTree } from './rslang';
 

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

@@ -10,7 +10,6 @@ import { Overlay } from '@/components/Container';
 import { SubmitButton } from '@/components/Control';
 import { IconChild, IconPredecessor, IconSave } from '@/components/Icons';
 import { TextArea } from '@/components/Input';
-import { type EventMouse } from '@/components/props';
 import { Indicator } from '@/components/View';
 import { useDialogsStore } from '@/stores/dialogs';
 import { useModificationStore } from '@/stores/modification';
@@ -106,7 +105,7 @@ export function FormConstituenta({ disabled, id, toggleReset, schema, activeCst,
     return cstUpdate({ itemID: schema.id, data }).then(() => reset({ ...data }));
   }
 
-  function handleTypeGraph(event: EventMouse) {
+  function handleTypeGraph(event: React.MouseEvent<Element>) {
     if ((localParse && !localParse.parseResult) || activeCst.parse.status !== ParsingStatus.VERIFIED) {
       toast.error(errorMsg.typeStructureFailed);
       return;
@@ -145,11 +144,12 @@ export function FormConstituenta({ disabled, id, toggleReset, schema, activeCst,
         dense
         noResize
         noBorder
+        transparent
         noOutline
         readOnly
         label='Типизация'
         value={typification}
-        colors='bg-transparent clr-text-default cursor-default'
+        className='clr-text-default cursor-default'
       />
 
       {!!activeCst.definition_formal || !isElementary ? (

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

@@ -7,7 +7,6 @@ import { type ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import { BadgeHelp, HelpTopic } from '@/features/help';
 
 import { Overlay } from '@/components/Container';
-import { type EventMouse } from '@/components/props';
 import { useDialogsStore } from '@/stores/dialogs';
 import { usePreferencesStore } from '@/stores/preferences';
 import { errorMsg } from '@/utils/labels';
@@ -47,7 +46,7 @@ interface EditorRSExpressionProps {
 
   onChangeLocalParse: (typification: IExpressionParseDTO) => void;
   onOpenEdit: (cstID: number) => void;
-  onShowTypeGraph: (event: EventMouse) => void;
+  onShowTypeGraph: (event: React.MouseEvent<Element>) => void;
 }
 
 export function EditorRSExpression({
@@ -141,7 +140,7 @@ export function EditorRSExpression({
     setIsModified(true);
   }
 
-  function handleShowAST(event: EventMouse) {
+  function handleShowAST(event: React.MouseEvent<Element>) {
     if (event.ctrlKey) {
       const tree = rslangParser.parse(value);
       const ast = transformAST(tree);

rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSExpression/RSTokenButton.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 
 import { globalIDs } from '@/utils/constants';
 
-import { TokenID } from '../../../backend/types';
+import { type TokenID } from '../../../backend/types';
 import { describeToken, labelToken } from '../../../labels';
 
 interface RSTokenButtonProps {

rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSExpression/ToolbarRSExpression.tsx

@@ -1,15 +1,14 @@
 import { Overlay } from '@/components/Container';
 import { MiniButton } from '@/components/Control';
 import { IconControls, IconTree, IconTypeGraph } from '@/components/Icons';
-import { type EventMouse } from '@/components/props';
 import { usePreferencesStore } from '@/stores/preferences';
 
 import { useMutatingRSForm } from '../../../backend/useMutatingRSForm';
 
 interface ToolbarRSExpressionProps {
   disabled?: boolean;
-  showAST: (event: EventMouse) => void;
+  showAST: (event: React.MouseEvent<Element>) => void;
-  showTypeGraph: (event: EventMouse) => void;
+  showTypeGraph: (event: React.MouseEvent<Element>) => void;
 }
 
 export function ToolbarRSExpression({ disabled, showTypeGraph, showAST }: ToolbarRSExpressionProps) {

rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSList/TableRSList.tsx

@@ -5,7 +5,6 @@ import clsx from 'clsx';
 
 import { TextURL } from '@/components/Control';
 import { createColumnHelper, DataTable, type RowSelectionState, type VisibilityState } from '@/components/DataTable';
-import { type EventMouse } from '@/components/props';
 import { NoData, TextContent } from '@/components/View';
 import { useWindowSize } from '@/hooks/useWindowSize';
 import { PARAMETER, prefixes } from '@/utils/constants';
@@ -57,14 +56,14 @@ export function TableRSList({
     });
   }, [windowSize]);
 
-  function handleRowClicked(cst: IConstituenta, event: EventMouse) {
+  function handleRowClicked(cst: IConstituenta, event: React.MouseEvent<Element>) {
     if (event.altKey) {
       event.preventDefault();
       onEdit(cst.id);
     }
   }
 
-  function handleRowDoubleClicked(cst: IConstituenta, event: EventMouse) {
+  function handleRowDoubleClicked(cst: IConstituenta, event: React.MouseEvent<Element>) {
     event.preventDefault();
     onEdit(cst.id);
   }

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

@@ -20,7 +20,6 @@ import { toPng } from 'html-to-image';
 import { useDebounce } from 'use-debounce';
 
 import { Overlay } from '@/components/Container';
-import { type EventMouse } from '@/components/props';
 import { useMainHeight } from '@/stores/appLayout';
 import { useDialogsStore } from '@/stores/dialogs';
 import { APP_COLORS } from '@/styling/colors';
@@ -274,19 +273,19 @@ export function TGFlow() {
     }
   }
 
-  function handleNodeContextMenu(event: EventMouse, cstID: number) {
+  function handleNodeContextMenu(event: React.MouseEvent, cstID: number) {
     event.preventDefault();
     event.stopPropagation();
     handleSetFocus(cstID);
   }
 
-  function handleNodeDoubleClick(event: EventMouse, cstID: number) {
+  function handleNodeDoubleClick(event: React.MouseEvent, cstID: number) {
     event.preventDefault();
     event.stopPropagation();
     navigateCst(cstID);
   }
 
-  function handleNodeEnter(event: EventMouse, cstID: number) {
+  function handleNodeEnter(event: React.MouseEvent, cstID: number) {
     setHoverID(cstID);
     setHoverLeft(
       event.clientX / window.innerWidth >= PARAMETER.graphHoverXLimit ||

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

@@ -5,7 +5,6 @@ import clsx from 'clsx';
 import { Overlay } from '@/components/Container';
 import { MiniButton } from '@/components/Control';
 import { IconDropArrow, IconDropArrowUp } from '@/components/Icons';
-import { type EventMouse } from '@/components/props';
 import { useWindowSize } from '@/hooks/useWindowSize';
 import { useFitHeight } from '@/stores/appLayout';
 import { useTooltipsStore } from '@/stores/tooltips';
@@ -37,7 +36,7 @@ export function ViewHidden({ items, selected, toggleSelection, setFocus, schema,
   const setActiveCst = useTooltipsStore(state => state.setActiveCst);
   const hiddenHeight = useFitHeight(windowSize.isSmall ? '10.4rem + 2px' : '12.5rem + 2px');
 
-  function handleClick(cstID: number, event: EventMouse) {
+  function handleClick(cstID: number, event: React.MouseEvent<Element>) {
     if (event.ctrlKey || event.metaKey) {
       setFocus(cstID);
     } else {

rsconcept/frontend/src/styling/styles.css

@@ -170,10 +170,6 @@
   gap: 0.25rem;
 }
 
-@utility cc-fit-content {
-  field-sizing: content;
-}
-
 @utility cc-scroll-row {
   scroll-snap-align: start;
   scroll-snap-stop: always;
@@ -229,4 +225,4 @@
   transition-property: color, background-color;
   transition-timing-function: var(--transition-bezier);
   transition-duration: var(--duration-select);
-}
+}

rsconcept/frontend/src/utils/codemirror.ts

@@ -2,8 +2,8 @@
  * Module: CodeMirror customizations.
  */
 import { syntaxTree } from '@codemirror/language';
-import { NodeType, Tree, TreeCursor } from '@lezer/common';
+import { type NodeType, type Tree, type TreeCursor } from '@lezer/common';
-import { type ReactCodeMirrorRef, SelectionRange } from '@uiw/react-codemirror';
+import { type ReactCodeMirrorRef, type SelectionRange } from '@uiw/react-codemirror';
 
 /**
  * Represents syntax tree node data.

rsconcept/frontend/src/utils/utils.ts

@@ -3,7 +3,7 @@
  */
 
 import { toast } from 'react-toastify';
-import { AxiosError, type AxiosHeaderValue, type AxiosResponse, isAxiosError } from 'axios';
+import { type AxiosError, type AxiosHeaderValue, type AxiosResponse, isAxiosError } from 'axios';
 
 import { infoMsg, promptText } from './labels';
 

rsconcept/frontend/tests/mocks/auth.ts

@@ -1,4 +1,4 @@
-import { Page } from '@playwright/test';
+import { type Page } from '@playwright/test';
 
 import { BACKEND_URL } from '../constants';
 

rsconcept/frontend/vite.config.ts

@@ -2,7 +2,7 @@ import path from 'path';
 
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
-import { defineConfig, loadEnv, PluginOption } from 'vite';
+import { defineConfig, loadEnv, type PluginOption } from 'vite';
 
 import { dependencies } from './package.json';
 
@@ -27,10 +27,10 @@ export default ({ mode }: { mode: string }) => {
   };
   return defineConfig({
     appType: 'spa',
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+
     plugins: [
       tailwindcss(),
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+
       react({
         babel: {
           plugins: [['babel-plugin-react-compiler', reactCompilerConfig]]