B: Fix tailwind and other minor bug

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

@@ -29,8 +29,9 @@ export function NavigationButton({
       data-tooltip-hidden={hideTitle}
       onClick={onClick}
       className={clsx(
-        'mr-1 h-full', //
+        'mr-1 h-full',
         'flex items-center gap-1',
+        'cursor-pointer',
         'clr-btn-nav cc-animate-color duration-500',
         'rounded-xl',
         'font-controls whitespace-nowrap',

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

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

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

@@ -71,7 +71,7 @@ export function MenuOssTabs() {
   }
 
   return (
-    <div className='flex'>
+    <div className='flex  border-r-2'>
       <div ref={schemaMenu.ref}>
         <Button
           dense

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

@@ -73,10 +73,10 @@ export function PickConstituenta({
   ];
 
   return (
-    <div className={clsx('border divide-y', className)} {...restProps}>
+    <div className={clsx('border', className)} {...restProps}>
       <SearchBar
         id={id ? `${id}__search` : undefined}
-        className='clr-input rounded-t-md'
+        className='clr-input border-b rounded-t-md'
         noBorder
         query={filterText}
         onChangeQuery={newValue => setFilterText(newValue)}

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

@@ -58,9 +58,19 @@ export function PickSubstitutions({
   const [rightArgument, setRightArgument] = useState<ILibraryItem | null>(
     schemas.length === 1 && allowSelfSubstitution ? schemas[0] : null
   );
+  const leftItems = !leftArgument
+    ? []
+    : (leftArgument as IRSForm).items.filter(
+        cst => !value.find(item => item.original === cst.id) && (!filterCst || filterCst(cst))
+      );
 
   const [leftCst, setLeftCst] = useState<IConstituenta | null>(null);
   const [rightCst, setRightCst] = useState<IConstituenta | null>(null);
+  const rightItems = !rightArgument
+    ? []
+    : (rightArgument as IRSForm).items.filter(
+        cst => !value.find(item => item.original === cst.id) && (!filterCst || filterCst(cst))
+      );
 
   const [deleteRight, setDeleteRight] = useState(true);
   const toggleDelete = () => setDeleteRight(prev => !prev);
@@ -228,14 +238,7 @@ export function PickSubstitutions({
             value={leftArgument}
             onChange={setLeftArgument}
           />
-          <SelectConstituenta
+          <SelectConstituenta noBorder items={leftItems} value={leftCst} onChange={setLeftCst} />
-            noBorder
-            items={(leftArgument as IRSForm)?.items.filter(
-              cst => !value.find(item => item.original === cst.id) && (!filterCst || filterCst(cst))
-            )}
-            value={leftCst}
-            onChange={setLeftCst}
-          />
         </div>
         <div className='flex flex-col gap-1'>
           <MiniButton
@@ -266,14 +269,7 @@ export function PickSubstitutions({
             value={rightArgument}
             onChange={setRightArgument}
           />
-          <SelectConstituenta
+          <SelectConstituenta noBorder items={rightItems} value={rightCst} onChange={setRightCst} />
-            noBorder
-            items={(rightArgument as IRSForm)?.items.filter(
-              cst => !value.find(item => item.original === cst.id) && (!filterCst || filterCst(cst))
-            )}
-            value={rightCst}
-            onChange={setRightCst}
-          />
         </div>
       </div>
 

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

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 
-import { Grammeme } from '../models/language';
+import { type Grammeme } from '../models/language';
 
 interface WordformButtonProps {
   text: string;

rsconcept/frontend/src/features/rsform/dialogs/DlgCstTemplate/TabArguments.tsx

@@ -188,7 +188,7 @@ export function TabArguments() {
         noTooltip
         id='result'
         placeholder='Итоговое определение'
-        className='mt-[1.2rem]'
+        className='mt-[1.1rem]'
         height='5.1rem'
         value={definition}
       />

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

@@ -30,7 +30,7 @@ export function TabSubstitutions() {
           allowSelfSubstitution={selfSubstitution}
           rows={10}
           schemas={selfSubstitution ? [source] : [source, receiver]}
-          filterCst={selected.length === 0 ? undefined : cst => selected.includes(cst.id)}
+          filterCst={selected.length === 0 ? undefined : cst => cst.schema !== source.id || selected.includes(cst.id)}
         />
       )}
     />

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

@@ -80,7 +80,7 @@ export 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'
+      position='cc-tab-tools right-1/2 translate-x-0 xs:right-4 xs:-translate-x-1/2 md:right-1/2 md:translate-x-0'
       className='cc-icons cc-animate-position outline-hidden cc-blur px-1 rounded-b-2xl'
     >
       {schema.oss.length > 0 ? (

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

@@ -49,7 +49,7 @@ export function ToolbarRSList() {
 
   return (
     <Overlay
-      position='cc-tab-tools right-4 translate-x-0 md:right-1/2 md:translate-x-1/2'
+      position='cc-tab-tools right-4 md:right-1/2 -translate-x-1/2 md:translate-x-0'
       className='cc-icons cc-animate-position items-start outline-hidden'
     >
       {schema.oss.length > 0 ? (

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

@@ -222,7 +222,7 @@ export function MenuRSTabs() {
   }
 
   return (
-    <div className='flex'>
+    <div className='flex border-r-2'>
       <div ref={schemaMenu.ref}>
         <Button
           dense

rsconcept/frontend/src/index.css

@@ -1,10 +1,8 @@
 @import 'tailwindcss';
 
 @import './styling/setup.css';
-@import './styling/setup.utilities.css';
 @import './styling/overrides.css';
 @import './styling/styles.css';
-@import './styling/styles.utilities.css';
 
 @custom-variant dark (&:is(.dark *));
 

rsconcept/frontend/src/styling/setup.css

@@ -4,21 +4,13 @@
 
 @import './constants.css' layer(base);
 
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
 @layer base {
   *,
   ::after,
   ::before,
   ::backdrop,
   ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
+    border-color: var(--clr-prim-400);
   }
 }
 
@@ -164,3 +156,11 @@
     content: '–\2009';
   }
 }
+
+@utility border {
+  border-radius: 0.25rem;
+}
+
+@utility sticky {
+  z-index: 20;
+}

rsconcept/frontend/src/styling/setup.utilities.css

@@ -1,130 +0,0 @@
-@utility border {
-  border-radius: 0.25rem;
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-x {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-y {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-b {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-t {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-l {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-r {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-2 {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-x-2 {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-y-2 {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-b-2 {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-t-2 {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-l-2 {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-r-2 {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility divide-x {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility divide-y {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility divide-x-2 {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility divide-y-2 {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility sticky {
-  z-index: 20;
-}

rsconcept/frontend/src/styling/styles.css

@@ -1,22 +1,232 @@
-/**
+@utility font-main {
- * Module: Custom styling.
+  font-family: var(--font-main);
- */
+}
-@import './constants.css' layer(base);
 
-/*
+@utility font-controls {
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  font-family: var(--font-ui);
-  so we've added these compatibility styles to make sure everything still
+  font-weight: 600;
-  looks the same as it did with Tailwind CSS v3.
+}
 
-  If we ever want to remove these styles, we need to add an explicit border
+@utility font-math {
-  color utility to any element that depends on these defaults.
+  font-family: var(--font-math);
-*/
+}
-@layer base {
+
-  *,
+@utility clr-input {
-  ::after,
+  background-color: var(--clr-prim-0);
-  ::before,
+  &:disabled {
-  ::backdrop,
+    background-color: var(--clr-prim-100);
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
   }
 }
+
+@utility clr-selected {
+  color: var(--clr-prim-999);
+  background-color: var(--clr-sec-200);
+}
+
+@utility clr-btn-default {
+  color: var(--clr-prim-999);
+  background-color: var(--clr-prim-200);
+
+  &:disabled {
+    color: var(--clr-prim-800);
+    background-color: var(--clr-prim-200);
+  }
+
+  &:hover:not(:disabled) {
+    color: var(--clr-prim-999);
+    background-color: var(--clr-sec-100);
+  }
+}
+
+@utility clr-btn-primary {
+  color: var(--clr-prim-999);
+  background-color: var(--clr-sec-200);
+
+  &:disabled {
+    color: var(--clr-prim-800);
+    background-color: var(--clr-prim-200);
+  }
+
+  &:hover:not(:disabled),
+  &:focus-visible {
+    color: var(--clr-sec-0);
+    background-color: var(--clr-sec-600);
+  }
+
+  &:focus-visible,
+  .focus-frame:has(:focus-visible) {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-color: var(--clr-sec-600);
+  }
+}
+
+@utility clr-btn-nav {
+  color: var(--clr-prim-800);
+
+  &:hover:not(:disabled) {
+    background-color: var(--clr-sec-100);
+  }
+
+  &:disabled {
+    color: var(--clr-prim-600);
+  }
+}
+
+@utility clr-hover {
+  &:hover:not(:disabled) {
+    color: var(--clr-prim-999);
+    background-color: var(--clr-sec-100);
+  }
+}
+
+@utility clr-outline {
+  :is(&, .focus-frame):focus-visible {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-color: var(--clr-sec-600);
+  }
+}
+
+@utility focus-frame {
+  :is(.clr-outline, &):focus-visible {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-color: var(--clr-sec-600);
+  }
+
+  &:has(:focus-visible) {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-color: var(--clr-sec-600);
+  }
+}
+
+@utility clr-text-default {
+  opacity: 1;
+  -webkit-text-fill-color: var(--clr-prim-999);
+  color: var(--clr-prim-999);
+}
+
+@utility clr-text-controls {
+  color: var(--clr-prim-800);
+  background-color: transparent;
+  &:disabled {
+    color: var(--clr-prim-600);
+  }
+}
+
+@utility icon-primary {
+  :not([disabled]) > & {
+    color: var(--clr-sec-800);
+  }
+}
+
+@utility icon-red {
+  :not([disabled]) > & {
+    color: var(--clr-warn-600);
+  }
+}
+
+@utility icon-green {
+  :not([disabled]) > & {
+    color: var(--clr-ok-600);
+  }
+}
+
+@utility inline-icon {
+  display: inline-block;
+  font-size: 1.25rem;
+  margin-left: 0.1rem;
+  margin-right: 0.1rem;
+  transform: translate(0, -0.2rem);
+  color: var(--clr-sec-800);
+}
+
+@utility cc-tab-tools {
+  top: 1.7rem;
+  right: 50%;
+  padding-top: 0.4rem;
+  transform: translate(50%, 0%);
+}
+
+@utility cc-label {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  cursor: default;
+  user-select: text;
+  white-space: nowrap;
+}
+
+@utility cc-column {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+@utility cc-icons {
+  display: flex;
+  gap: 0.25rem;
+}
+
+@utility cc-fit-content {
+  field-sizing: content;
+}
+
+@utility cc-scroll-row {
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+
+@utility cc-scroll-y {
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  scroll-snap-type: y mandatory;
+}
+
+@utility cc-blur {
+  backdrop-filter: blur(3px);
+}
+
+@utility cc-shadow-border {
+  box-shadow: 0 1px 2px 0 var(--clr-prim-400);
+}
+
+@utility cc-fade-in {
+  opacity: 1;
+
+  transition-property: opacity;
+  transition-timing-function: var(--transition-bezier);
+  transition-duration: var(--duration-fade);
+
+  @starting-style {
+    opacity: 0;
+  }
+}
+
+@utility cc-animate-position {
+  transition-property: transform top left bottom right margin padding;
+  transition-timing-function: var(--transition-bezier);
+  transition-duration: var(--duration-move);
+}
+
+@utility cc-animate-modal {
+  clip-path: inset(0% 0% 0% 0%);
+  opacity: 1;
+
+  transition-property: clip-path, opacity;
+  transition-timing-function: var(--transition-bezier);
+  transition-duration: var(--duration-modal);
+
+  @starting-style {
+    clip-path: inset(50% 50% 50% 50%);
+    opacity: 0;
+  }
+}
+
+@utility cc-animate-color {
+  transition-property: color, background-color;
+  transition-timing-function: var(--transition-bezier);
+  transition-duration: var(--duration-select);
+}

rsconcept/frontend/src/styling/styles.utilities.css

@@ -1,232 +0,0 @@
-@utility font-main {
-  font-family: var(--font-main);
-}
-
-@utility font-controls {
-  font-family: var(--font-ui);
-  font-weight: 600;
-}
-
-@utility font-math {
-  font-family: var(--font-math);
-}
-
-@utility clr-input {
-  background-color: var(--clr-prim-0);
-  &:disabled {
-    background-color: var(--clr-prim-100);
-  }
-}
-
-@utility clr-selected {
-  color: var(--clr-prim-999);
-  background-color: var(--clr-sec-200);
-}
-
-@utility clr-btn-default {
-  color: var(--clr-prim-999);
-  background-color: var(--clr-prim-200);
-
-  &:disabled {
-    color: var(--clr-prim-800);
-    background-color: var(--clr-prim-200);
-  }
-
-  &:hover:not(:disabled) {
-    color: var(--clr-prim-999);
-    background-color: var(--clr-sec-100);
-  }
-}
-
-@utility clr-btn-primary {
-  color: var(--clr-prim-999);
-  background-color: var(--clr-sec-200);
-
-  &:disabled {
-    color: var(--clr-prim-800);
-    background-color: var(--clr-prim-200);
-  }
-
-  &:hover:not(:disabled),
-  &:focus-visible {
-    color: var(--clr-sec-0);
-    background-color: var(--clr-sec-600);
-  }
-
-  &:focus-visible,
-  .focus-frame:has(:focus-visible) {
-    outline-width: 2px;
-    outline-style: solid;
-    outline-color: var(--clr-sec-600);
-  }
-}
-
-@utility clr-btn-nav {
-  color: var(--clr-prim-800);
-
-  &:hover:not(:disabled) {
-    background-color: var(--clr-sec-100);
-  }
-
-  &:disabled {
-    color: var(--clr-prim-600);
-  }
-}
-
-@utility clr-hover {
-  &:hover:not(:disabled) {
-    color: var(--clr-prim-999);
-    background-color: var(--clr-sec-100);
-  }
-}
-
-@utility clr-outline {
-  :is(&, .focus-frame):focus-visible {
-    outline-width: 2px;
-    outline-style: solid;
-    outline-color: var(--clr-sec-600);
-  }
-}
-
-@utility focus-frame {
-  :is(.clr-outline, &):focus-visible {
-    outline-width: 2px;
-    outline-style: solid;
-    outline-color: var(--clr-sec-600);
-  }
-
-  &:has(:focus-visible) {
-    outline-width: 2px;
-    outline-style: solid;
-    outline-color: var(--clr-sec-600);
-  }
-}
-
-@utility clr-text-default {
-  opacity: 1;
-  -webkit-text-fill-color: var(--clr-prim-999);
-  color: var(--clr-prim-999);
-}
-
-@utility clr-text-controls {
-  color: var(--clr-prim-800);
-  background-color: transparent;
-  &:disabled {
-    color: var(--clr-prim-600);
-  }
-}
-
-@utility icon-primary {
-  :not([disabled]) > & {
-    color: var(--clr-sec-800);
-  }
-}
-
-@utility icon-red {
-  :not([disabled]) > & {
-    color: var(--clr-warn-600);
-  }
-}
-
-@utility icon-green {
-  :not([disabled]) > & {
-    color: var(--clr-ok-600);
-  }
-}
-
-@utility inline-icon {
-  display: inline-block;
-  font-size: 1.25rem;
-  margin-left: 0.1rem;
-  margin-right: 0.1rem;
-  transform: translate(0, -0.2rem);
-  color: var(--clr-sec-800);
-}
-
-@utility cc-tab-tools {
-  top: 1.7rem;
-  right: 50%;
-  padding-top: 0.4rem;
-  transform: translate(50%, 0%);
-}
-
-@utility cc-label {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-  cursor: default;
-  user-select: text;
-  white-space: nowrap;
-}
-
-@utility cc-column {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-@utility cc-icons {
-  display: flex;
-  gap: 0.25rem;
-}
-
-@utility cc-fit-content {
-  field-sizing: content;
-}
-
-@utility cc-scroll-row {
-  scroll-snap-align: start;
-  scroll-snap-stop: always;
-}
-
-@utility cc-scroll-y {
-  overflow-y: auto;
-  overscroll-behavior-y: contain;
-  scroll-snap-type: y mandatory;
-}
-
-@utility cc-blur {
-  backdrop-filter: blur(3px);
-}
-
-@utility cc-shadow-border {
-  box-shadow: 0 1px 2px 0 var(--clr-prim-400);
-}
-
-@utility cc-fade-in {
-  opacity: 1;
-
-  transition-property: opacity;
-  transition-timing-function: var(--transition-bezier);
-  transition-duration: var(--duration-fade);
-
-  @starting-style {
-    opacity: 0;
-  }
-}
-
-@utility cc-animate-position {
-  transition-property: transform top left bottom right margin padding;
-  transition-timing-function: var(--transition-bezier);
-  transition-duration: var(--duration-move);
-}
-
-@utility cc-animate-modal {
-  clip-path: inset(0% 0% 0% 0%);
-  opacity: 1;
-
-  transition-property: clip-path, opacity;
-  transition-timing-function: var(--transition-bezier);
-  transition-duration: var(--duration-modal);
-
-  @starting-style {
-    clip-path: inset(50% 50% 50% 50%);
-    opacity: 0;
-  }
-}
-
-@utility cc-animate-color {
-  transition-property: color, background-color;
-  transition-timing-function: var(--transition-bezier);
-  transition-duration: var(--duration-select);
-}