npm update

README.md

@@ -154,7 +154,7 @@ This is the build for local Development
 
 - Install Python 3.12, NodeJS, VSCode, Docker Desktop
 - copy import wheels from ConceptCore to rsconcept/backend/import
-- run rsconcept/backend/LocalEnvSetup.ps1
+- run scripts/dev/LocalEnvSetup.ps1
 - use VSCode configs in root folder to start development
 - use 'npm run prepare' to regenerate frontend parsers (if you change grammar files)
 

TODO.txt

@@ -1,6 +1,9 @@
 !! This is not complete list of TODOs !!
 For more specific TODOs see comments in code
 
+[Bugs - PENDING]
+- Tab index still selecting background elements when modal is active
+
 [Functionality - PROGRESS]
 - OSS change propagation: Advanced features
 

rsconcept/backend/apps/rsform/views/rsforms.py

@@ -640,8 +640,6 @@ def inline_synthesis(request: Request) -> HttpResponse:
         PropagationFacade.before_substitute(receiver, substitutions)
         receiver.substitute(substitutions)
 
-        receiver.restore_order()
-
     return Response(
         status=c.HTTP_200_OK,
         data=s.RSFormParseSerializer(receiver.model).data

rsconcept/frontend/package.json

@@ -14,8 +14,8 @@
   "dependencies": {
     "@lezer/lr": "^1.4.2",
     "@tanstack/react-table": "^8.20.5",
-    "@uiw/codemirror-themes": "^4.23.3",
-    "@uiw/react-codemirror": "^4.23.3",
+    "@uiw/codemirror-themes": "^4.23.5",
+    "@uiw/react-codemirror": "^4.23.5",
     "axios": "^1.7.7",
     "clsx": "^2.1.1",
     "framer-motion": "^11.5.6",
@@ -25,39 +25,39 @@
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-icons": "^5.3.0",
-    "react-intl": "^6.7.0",
+    "react-intl": "^6.8.0",
     "react-loader-spinner": "^6.1.6",
-    "react-router-dom": "^6.26.2",
+    "react-router-dom": "^6.27.0",
     "react-select": "^5.8.1",
     "react-tabs": "^6.0.2",
-    "react-toastify": "^10.0.5",
+    "react-toastify": "^10.0.6",
     "react-tooltip": "^5.28.0",
     "react-zoom-pan-pinch": "^3.6.1",
     "reactflow": "^11.11.4",
     "reagraph": "^4.19.3",
-    "use-debounce": "^10.0.3"
+    "use-debounce": "^10.0.4"
   },
   "devDependencies": {
     "@lezer/generator": "^1.7.1",
     "@types/jest": "^29.5.13",
-    "@types/node": "^22.5.5",
-    "@types/react": "^18.3.8",
-    "@types/react-dom": "^18.3.0",
+    "@types/node": "^22.7.5",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^8.0.1",
     "@typescript-eslint/parser": "^8.0.1",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.3.2",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.11.0",
-    "eslint-plugin-react": "^7.36.1",
+    "eslint": "^9.12.0",
+    "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "globals": "^15.9.0",
+    "globals": "^15.11.0",
     "jest": "^29.7.0",
     "postcss": "^8.4.47",
-    "tailwindcss": "^3.4.12",
+    "tailwindcss": "^3.4.13",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.6.2",
-    "typescript-eslint": "^8.6.0",
-    "vite": "^5.4.7"
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.8.1",
+    "vite": "^5.4.8"
   },
   "jest": {
     "preset": "ts-jest",

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

@@ -138,9 +138,19 @@ function DataTable<TData extends RowData>({
     }
   }, [rows, dense, noHeader, contentHeight]);
 
+  const columnSizeVars = useMemo(() => {
+    const headers = tableImpl.getFlatHeaders();
+    const colSizes: Record<string, number> = {};
+    for (const header of headers) {
+      colSizes[`--header-${header.id}-size`] = header.getSize();
+      colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
+    }
+    return colSizes;
+  }, [tableImpl.getState().columnSizingInfo, tableImpl.getState().columnSizing]);
+
   return (
     <div tabIndex={-1} id={id} className={className} style={{ minHeight: fixedSize, maxHeight: fixedSize, ...style }}>
-      <table className='w-full'>
+      <table className='w-full' style={{ ...columnSizeVars }}>
         {!noHeader ? (
           <TableHeader
             table={tableImpl}

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

@@ -93,7 +93,8 @@ function TableBody<TData>({
               style={{
                 cursor: onRowClicked || onRowDoubleClicked ? 'pointer' : 'auto',
                 paddingBottom: dense ? '0.25rem' : '0.5rem',
-                paddingTop: dense ? '0.25rem' : '0.5rem'
+                paddingTop: dense ? '0.25rem' : '0.5rem',
+                width: noHeader && index === 0 ? `calc(var(--col-${cell.column.id}-size) * 1px)` : 'auto'
               }}
               onClick={event => handleRowClicked(row, event)}
               onDoubleClick={event => (onRowDoubleClicked ? onRowDoubleClicked(row.original, event) : undefined)}

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

@@ -41,7 +41,7 @@ function TableHeader<TData>({
               style={{
                 paddingRight: enableSorting && header.column.getCanSort() ? '0px' : '2px',
                 textAlign: 'start',
-                width: header.getSize(),
+                width: `calc(var(--header-${header?.id}-size) * 1px)`,
                 cursor: enableSorting && header.column.getCanSort() ? 'pointer' : 'auto'
               }}
               onClick={enableSorting ? header.column.getToggleSortingHandler() : undefined}

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

@@ -35,7 +35,7 @@ function ManualsPage() {
   );
 
   return (
-    <div className='flex mx-auto max-w-[80rem]' style={{ minHeight: mainHeight }}>
+    <div className='flex mx-auto max-w-[80rem]' role='manuals' style={{ minHeight: mainHeight }}>
       <TopicsList activeTopic={activeTopic} onChangeTopic={topic => onSelectTopic(topic)} />
       <ViewTopic topic={activeTopic} />
     </div>

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

@@ -12,7 +12,11 @@ interface ViewTopicProps {
 function ViewTopic({ topic }: ViewTopicProps) {
   const { mainHeight } = useConceptOptions();
   return (
-    <AnimateFade key={topic} className='py-2 px-6 sm:px-12 overflow-y-auto' style={{ maxHeight: mainHeight }}>
+    <AnimateFade
+      key={topic}
+      className='py-2 px-6 mx-auto sm:mx-0 lg:px-12 overflow-y-auto'
+      style={{ maxHeight: mainHeight }}
+    >
       <TopicPage topic={topic} />
     </AnimateFade>
   );

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

@@ -49,7 +49,7 @@ function EditorOssCard({ isModified, onDestroy, setIsModified }: EditorOssCardPr
       />
       <AnimateFade
         onKeyDown={handleInput}
-        className={clsx('md:w-fit md:max-w-fit max-w-[32rem]', 'mx-auto pt-[1.9rem]', 'flex flex-col md:flex-row px-6')}
+        className={clsx('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} />

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

@@ -49,7 +49,7 @@ function EditorRSFormCard({ isModified, onDestroy, setIsModified }: EditorRSForm
       />
       <AnimateFade
         onKeyDown={handleInput}
-        className={clsx('md:w-fit md:max-w-fit max-w-[32rem] mx-auto', 'flex flex-col md:flex-row px-6 pt-[1.9rem]')}
+        className={clsx('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} />

rsconcept/frontend/src/styling/constants.css

@@ -8,6 +8,14 @@
   --font-main: 'Rubik', 'Noto Color Emoji', 'Fira Code', 'Noto Sans Math', 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif;
   --font-math: 'Fira Code', 'Noto Sans Math', 'Noto Sans Symbols 2', 'Rubik', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
   
+  /* Numeric parameters */
+  --font-size-base: 16px;
+  --font-size-sm: 12px;
+  --line-height: 1.5;
+
+  --text-max-width: 75ch;
+  --scroll-padding: 3rem;
+
   /* Light Theme */
   --cl-bg-120:      hsl(000, 000%, 100%);
   --cl-bg-100:      hsl(000, 000%, 098%);

rsconcept/frontend/src/styling/setup.css

@@ -8,22 +8,23 @@
 @tailwind components;
 @tailwind utilities;
 
-html,
-body {
-  -webkit-text-size-adjust: 100%;
+html {
+  -webkit-text-size-adjust: none;
+  -moz-text-size-adjust: none;
+  text-size-adjust: none;
 
-  width: 100%;
-  height: 100%;
+  hanging-punctuation: first last;
+  color-scheme: dark light;
+
+  /* interpolate-size: allow-keywords; */
+}
+
+body {
   margin: 0px;
   padding: 0px;
   overflow-x: hidden;
 }
 
-html {
-  hanging-punctuation: first last;
-  color-scheme: dark light;
-}
-
 [data-color-scheme='dark'] {
   color-scheme: dark;
 }
@@ -36,13 +37,13 @@ html {
 @media (prefers-reduced-motion: no-preference) {
   :has(:target) {
     scroll-behavior: smooth;
-    scroll-padding-top: 3rem;
+    scroll-padding-top: var(--scroll-padding);
   }
 }
 
 :root {
-  font-size: 16px;
-  line-height: 24px;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height);
   font-family: var(--font-main);
 
   color: var(--cl-fg-100);
@@ -58,8 +59,7 @@ html {
 
 @media only screen and (max-width: 639px) {
   :root {
-    font-size: 12px;
-    line-height: 18px;
+    font-size: var(--font-size-sm);
   }
 }
 
@@ -104,7 +104,7 @@ h6 {
 /* Limit text lines and setup wrapping */
 p,
 li {
-  max-width: 75ch;
+  max-width: var(--text-max-width);
   text-wrap: pretty;
 }
 
@@ -119,6 +119,9 @@ div:not(.dense) > p {
 
   h2 {
     @apply [&:not(:first-child)]:mt-2 font-semibold text-center;
+    [role='manuals'] & {
+      @apply [&:not(:first-child)]:mt-3 mb-2;
+    }
   }
 
   b {