UI improvements and fixes

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

@@ -10,9 +10,7 @@ function Logo() {
   return (
     <img
       alt='Логотип КонцептПортал'
-      className={clsx('max-h-[1.6rem] w-fit', {
+      className={clsx('max-h-[1.6rem] w-fit')}
-        'min-w-[11.5rem]': size.isSmall
-      })}
       src={size.isSmall ? '/logo_sign.svg' : !darkMode ? '/logo_full.svg' : '/logo_full_dark.svg'}
     />
   );

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

@@ -49,6 +49,7 @@ function Checkbox({
       className={clsx(
         'flex items-center gap-2', // prettier: split lines
         'outline-none',
+        'focus-frame',
         cursor,
         className
       )}

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

@@ -53,6 +53,7 @@ function CheckboxTristate({
       className={clsx(
         'flex items-center gap-2', // prettier: split lines
         'outline-none',
+        'focus-frame',
         cursor,
         className
       )}

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

@@ -21,7 +21,7 @@ function SearchBar({ id, value, onChange, noBorder, ...restProps }: SearchBarPro
         noOutline
         placeholder='Поиск'
         type='search'
-        className='w-full pl-10'
+        className='w-full pl-10 outline-none'
         noBorder={noBorder}
         value={value}
         onChange={event => (onChange ? onChange(event.target.value) : undefined)}

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

@@ -55,6 +55,10 @@ function SelectMulti<Option, Group extends GroupBase<Option> = GroupBase<Option>
 
   const adjustedStyles: StylesConfig<Option, true, Group> = useMemo(
     () => ({
+      container: defaultStyles => ({
+        ...defaultStyles,
+        borderRadius: '0.25rem'
+      }),
       control: (styles, { isDisabled }) => ({
         ...styles,
         borderRadius: '0.25rem',
@@ -118,6 +122,7 @@ function SelectMulti<Option, Group extends GroupBase<Option> = GroupBase<Option>
       })}
       menuPortalTarget={!noPortal ? document.body : null}
       styles={adjustedStyles}
+      classNames={{ container: () => 'focus-frame' }}
       {...restProps}
     />
   );

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

@@ -57,6 +57,10 @@ function SelectSingle<Option, Group extends GroupBase<Option> = GroupBase<Option
 
   const adjustedStyles: StylesConfig<Option, false, Group> = useMemo(
     () => ({
+      container: defaultStyles => ({
+        ...defaultStyles,
+        borderRadius: '0.25rem'
+      }),
       control: (defaultStyles, { isDisabled }) => ({
         ...defaultStyles,
         borderRadius: '0.25rem',
@@ -116,6 +120,7 @@ function SelectSingle<Option, Group extends GroupBase<Option> = GroupBase<Option
       })}
       menuPortalTarget={!noPortal ? document.body : null}
       styles={adjustedStyles}
+      classNames={{ container: () => 'focus-frame' }}
       {...restProps}
     />
   );

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

@@ -19,8 +19,10 @@ function TabLabel({ label, title, titleHtml, hideTitle, className, ...otherProps
         'clr-tab',
         'text-sm whitespace-nowrap font-controls',
         'select-none hover:cursor-pointer',
+        'outline-none',
         className
       )}
+      tabIndex='-1'
       data-tooltip-id={!!title || !!titleHtml ? globals.tooltip : undefined}
       data-tooltip-html={titleHtml}
       data-tooltip-content={title}

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

@@ -5,6 +5,7 @@ import Label from './Label';
 
 export interface TextAreaProps extends CProps.Editor, CProps.Colors, CProps.TextArea {
   dense?: boolean;
+  noResize?: boolean;
 }
 
 function TextArea({
@@ -15,6 +16,7 @@ function TextArea({
   dense,
   noBorder,
   noOutline,
+  noResize,
   className,
   colors = 'clr-input',
   ...restProps
@@ -35,7 +37,9 @@ function TextArea({
         className={clsx(
           'px-3 py-2',
           'leading-tight',
+          'overflow-x-hidden overflow-y-auto',
           {
+            'resize-none': noResize,
             'border': !noBorder,
             'flex-grow max-w-full': dense,
             'clr-outline': !noOutline

rsconcept/frontend/src/models/rslang.ts

@@ -208,6 +208,7 @@ export enum RSErrorType {
   missingParenthesis = 33798,
   missingCurlyBrace = 33799,
   invalidQuantifier = 33800,
+  invalidImperative = 33801,
   expectedArgDeclaration = 33812,
   expectedLocal = 33813,
   localDoubleDeclare = 10241,

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

@@ -9,7 +9,6 @@ import { IconSave } from '@/components/Icons';
 import RefsInput from '@/components/RefsInput';
 import SubmitButton from '@/components/ui/SubmitButton';
 import TextArea from '@/components/ui/TextArea';
-import TextInput from '@/components/ui/TextInput';
 import AnimateFade from '@/components/wrap/AnimateFade';
 import { useRSForm } from '@/context/RSFormContext';
 import { CstType, IConstituenta, ICstUpdateData } from '@/models/rsform';
@@ -155,9 +154,11 @@ function FormConstituenta({
           disabled={disabled}
           onChange={newValue => setTerm(newValue)}
         />
-        <TextInput
+        <TextArea
           id='cst_typification'
+          rows={typification.length > ROW_SIZE_IN_CHARACTERS ? 2 : 1}
           dense
+          noResize
           noBorder
           disabled={true}
           label='Типизация'

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

@@ -50,11 +50,7 @@ function EditorRSForm({ isModified, onDestroy, setIsModified }: EditorRSFormProp
         onSubmit={initiateSubmit}
         onDestroy={onDestroy}
       />
-      <AnimateFade
+      <AnimateFade onKeyDown={handleInput} className={clsx('sm:w-fit w-full', 'flex flex-col sm:flex-row')}>
-        tabIndex={-1}
-        onKeyDown={handleInput}
-        className={clsx('flex flex-col sm:flex-row', 'sm:w-fit w-full')}
-      >
         <FlexColumn className='px-4 pb-2'>
           <FormRSForm id={globals.library_item_editor} isModified={isModified} setIsModified={setIsModified} />
 

rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx

@@ -154,7 +154,6 @@ function FormRSForm({ id, isModified, setIsModified }: FormRSFormProps) {
       />
       <div className='flex justify-between whitespace-nowrap'>
         <Checkbox
-          tabIndex={-1}
           id='schema_common'
           label='Общедоступная схема'
           title='Общедоступные схемы видны всем пользователям и могут быть изменены'
@@ -163,7 +162,6 @@ function FormRSForm({ id, isModified, setIsModified }: FormRSFormProps) {
           setValue={value => setCommon(value)}
         />
         <Checkbox
-          tabIndex={-1}
           id='schema_immutable'
           label='Неизменная схема'
           title='Только администраторы могут присваивать схемам неизменный статус'

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

@@ -18,7 +18,7 @@ interface GraphSelectorsProps {
 
 function GraphSelectors({ coloring, setColoring, layout, setLayout, sizing, setSizing }: GraphSelectorsProps) {
   return (
-    <div className='select-none border rounded-t-md rounded-b-none divide-y'>
+    <div className='border rounded-b-none select-none clr-input rounded-t-md'>
       <SelectSingle
         noBorder
         placeholder='Способ расположения'
@@ -27,11 +27,12 @@ function GraphSelectors({ coloring, setColoring, layout, setLayout, sizing, setS
         value={layout ? { value: layout, label: mapLabelLayout.get(layout) } : null}
         onChange={data => setLayout(data?.value ?? SelectorGraphLayout[0].value)}
       />
-      <Overlay position='right-[2.5rem] top-[0.3rem]'>
+      <Overlay position='right-[2.5rem] top-[0.5rem]'>
         {coloring === 'status' ? <BadgeHelp topic={HelpTopic.CST_STATUS} className='min-w-[25rem]' /> : null}
         {coloring === 'type' ? <BadgeHelp topic={HelpTopic.CST_CLASS} className='min-w-[25rem]' /> : null}
       </Overlay>
       <SelectSingle
+        className='my-1'
         noBorder
         placeholder='Цветовая схема'
         options={SelectorGraphColoring}

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

@@ -43,10 +43,10 @@ function ViewConstituents({ expression, schema, activeID, isBottom, onOpenEdit }
   return (
     <motion.div
       className={clsx(
-        'border', // prettier: split-lines
+        'border overflow-hidden', // prettier: split-lines
         {
-          'mt-[2.25rem]': !isBottom, // prettier: split-lines
+          'mt-[2.2rem] rounded-l-md rounded-r-none': !isBottom, // prettier: split-lines
-          'mt-3 mx-6': isBottom
+          'mt-3 mx-6 rounded-md': isBottom
         }
       )}
       initial={{ ...animateSideView.initial }}

rsconcept/frontend/src/styling/setup.css

@@ -62,16 +62,14 @@ html {
   }
 }
 
-:focus {
+:focus,
+:focus-visible,
+:focus-within {
   outline-width: 2px;
   outline-style: solid;
   outline-color: transparent;
 }
 
-:focus-visible {
-  outline: 0;
-}
-
 ::selection {
   background: var(--cl-prim-bg-60);
   .dark & {

rsconcept/frontend/src/styling/styles.css

@@ -16,6 +16,11 @@
     font-weight: 600;
     font-variant: small-caps;
   }
+  @supports (-moz-appearance: none) {
+    .font-controls {
+      font-size: 0.85rem;
+    }
+  }
   .font-math {
     font-family: var(--font-math);
   }
@@ -113,7 +118,8 @@
     }
   }
 
-  :is(.clr-outline, .clr-btn-primary):focus-visible {
+  :is(.clr-outline, .clr-btn-primary, .focus-frame):focus-visible,
+  .focus-frame:has(:focus-visible) {
     outline-width: 2px;
     outline-style: solid;
     outline-color: var(--cl-prim-bg-100);

rsconcept/frontend/src/utils/labels.ts

@@ -665,6 +665,8 @@ export function describeRSError(error: IRSErrorDescription): string {
       return "Пропущен символ '}'";
     case RSErrorType.invalidQuantifier:
       return 'Некорректная кванторная декларация';
+    case RSErrorType.invalidImperative:
+      return 'Использование императивного синтаксиса вне императивного блока';
     case RSErrorType.expectedArgDeclaration:
       return 'Ожидалось объявление аргументов терм-функции';
     case RSErrorType.expectedLocal: