stepper: add breakpoint navigation

.gitattributes

@@ -0,0 +1,3 @@
+# Ensure all TS/TSX files are treated as text and normalized with LF line endings
+*.ts text eol=lf
+*.tsx text eol=lf

eslint.config.mjs

@@ -3,9 +3,9 @@
 import eslint from '@eslint/js';
 import reactPlugin from 'eslint-plugin-react';
 import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
 import simpleImportSort from 'eslint-plugin-simple-import-sort';
 import tseslint from 'typescript-eslint';
-import reactRefresh from 'eslint-plugin-react-refresh';
 
 export default tseslint.config(
   { ignores: ['eslint.config.mjs', '**/*.snap'] },
@@ -20,15 +20,21 @@ export default tseslint.config(
       'react-refresh/only-export-components': 'warn'
     }
   },
+  reactHooksPlugin.configs.flat['recommended-latest'],
   {
     files: ['**/*.ts*'],
     plugins: {
-      'react-hooks': reactHooksPlugin,
       react: reactPlugin,
       'simple-import-sort': simpleImportSort
     },
     rules: {
-      ...reactHooksPlugin.configs['recommended-latest'].rules,
+      'react-hooks/globals': 'warn', // TODO: Fix and delete (default is error)
+      'react-hooks/immutability': 'warn', // TODO: Fix and delete (default is error)
+      'react-hooks/purity': 'warn', // TODO: Fix and delete (default is error)
+      'react-hooks/set-state-in-effect': 'warn', // TODO: Fix and delete (default is error)
+      'react-hooks/static-components': 'warn', // TODO: Fix and delete (default is error)
+      'react-hooks/refs': 'warn', // TODO: Fix and delete (default is error)
+      'react-hooks/use-memo': 'warn', // TODO: Fix and delete (default is error)
       'no-empty': 'warn',
       'no-restricted-imports': [
         'error',

package.json

@@ -36,6 +36,9 @@
     "@blueprintjs/icons": "^6.0.0",
     "@blueprintjs/select": "^6.0.0",
     "@convergencelabs/ace-collab-ext": "^0.6.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@mantine/hooks": "^7.11.2",
     "@octokit/rest": "^22.0.0",
     "@reduxjs/toolkit": "^1.9.7",
@@ -77,15 +80,15 @@
     "phaser": "~3.90.0",
     "query-string": "^9.0.0",
     "re-resizable": "^6.9.9",
-    "react": "^18.3.1",
+    "react": "^19.2.4",
     "react-ace": "^14.0.0",
     "react-debounce-render": "^8.0.2",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.2.4",
     "react-drag-drop-files": "^3.0.0",
     "react-draggable": "^4.4.5",
     "react-dropzone": "^15.0.0",
     "react-i18next": "^16.0.0",
-    "react-konva": "^18.2.10",
+    "react-konva": "^19.0.7",
     "react-latex-next": "^3.0.0",
     "react-mde": "^11.5.0",
     "react-papaparse": "^4.0.2",
@@ -94,7 +97,6 @@
     "react-router": "^7.6.2",
     "react-select": "^5.7.3",
     "react-simple-keyboard": "^3.6.27",
-    "react-sortable-hoc": "^2.0.0",
     "react-syntax-highlighter": "^16.0.0",
     "react-textarea-autosize": "^8.5.2",
     "redux-mock-store": "^1.5.4",
@@ -139,32 +141,31 @@
     "@types/js-cookie": "^3.0.6",
     "@types/js-yaml": "^4.0.5",
     "@types/lodash": "^4.14.195",
-    "@types/react": "^18.3.3",
+    "@types/react": "^19.1.8",
     "@types/react-copy-to-clipboard": "^5.0.4",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^19.1.6",
     "@types/react-redux": "^7.1.24",
     "@types/react-syntax-highlighter": "^15.5.7",
-    "@types/react-test-renderer": "^18.0.0",
     "@types/redux-mock-store": "^1.0.3",
     "@types/showdown": "^2.0.1",
     "@types/xml2js": "^0.4.11",
-    "@vitejs/plugin-react-swc": "^4.0.0",
-    "@vitest/coverage-v8": "4.0.18",
-    "@vitest/ui": "^4.0.0",
+    "@vitejs/plugin-react": "6.0.1",
+    "@vitest/coverage-v8": "4.1.0",
+    "@vitest/ui": "4.1.0",
     "buffer": "^6.0.3",
     "canvas": "^3.1.0",
     "constants-browserify": "^1.0.0",
     "coveralls": "^3.1.1",
     "cross-env": "^10.0.0",
     "eslint": "^9.9.0",
     "eslint-plugin-react": "^7.35.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^7.0.0",
     "eslint-plugin-react-refresh": "^0.5.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "https-browserify": "^1.0.0",
     "husky": "^9.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jsdom": "^28.0.0",
+    "jsdom": "^29.0.0",
     "npm-run-all2": "^8.0.0",
     "os-browserify": "^0.3.0",
     "path": "^0.12.7",
@@ -173,7 +174,6 @@
     "prettier": "^3.3.3",
     "process": "^0.11.10",
     "react-error-overlay": "^6.0.11",
-    "react-test-renderer": "^18.2.0",
     "redux-saga-test-plan": "^4.0.6",
     "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.63.6",
@@ -183,7 +183,7 @@
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.1.0",
     "url": "^0.11.1",
-    "vitest": "^4.0.0",
+    "vitest": "4.1.0",
     "webpack-bundle-analyzer": "^5.0.0"
   },
   "browserslist": {
@@ -199,7 +199,7 @@
     ]
   },
   "resolutions": {
-    "cssstyle": "^4.6.0",
-    "@types/estree": "1.0.8"
+    "@types/estree": "1.0.8",
+    "vite": "^8.0.0"
   }
 }

renovate.json

@@ -1,15 +1,16 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:recommended",
-    ":dependencyDashboard",
-    ":label(dependencies)"
-  ],
+  "extends": ["config:recommended", ":dependencyDashboard", ":label(dependencies)"],
   "packageRules": [
+    // Non-dev dependencies are updated individually
     {
       "rangeStrategy": "update-lockfile",
       "matchPackageNames": ["*"],
       "minimumReleaseAge": "5 days"
+    },
+    {
+      "matchPackageNames": ["/^@blueprintjs.*/"],
+      "groupName": "blueprintjs"
     }
   ],
   "enabledManagers": ["npm"]

rsbuild.config.ts

@@ -38,13 +38,6 @@ export default defineConfig({
       //   inlineProcessEnv.REACT_APP_SW_EXCLUDE_REGEXES = undefined;
       // }
 
-      // const injectManifestPlugin = config.plugins.find(
-      //   plugin => plugin.constructor.name === 'InjectManifest'
-      // );
-      // if (injectManifestPlugin) {
-      //   injectManifestPlugin.config.maximumFileSizeToCacheInBytes = 20 * 1024 * 1024;
-      // }
-
       // // add rules to pack WASM (for Sourceror)
       // const wasmExtensionRegExp = /\.wasm$/;
       // config.resolve.extensions.push('.wasm');
@@ -61,22 +54,6 @@ export default defineConfig({
       // };
       // config.output.webassemblyModuleFilename = 'static/[hash].module.wasm';
 
-      // // Polyfill Node.js core modules.
-      // // An empty implementation (false) is provided when there is no browser equivalent.
-      // config.resolve.fallback = {
-      //   child_process: false,
-      //   constants: require.resolve('constants-browserify'),
-      //   fs: false,
-      //   http: require.resolve('stream-http'),
-      //   https: require.resolve('https-browserify'),
-      //   os: require.resolve('os-browserify/browser'),
-      //   'path/posix': require.resolve('path-browserify'),
-      //   'process/browser': require.resolve('process/browser'),
-      //   stream: require.resolve('stream-browserify'),
-      //   timers: require.resolve('timers-browserify'),
-      //   url: require.resolve('url/')
-      // };
-
       // // workaround .mjs files by Acorn
       // config.module.rules.push({
       //   test: /\.mjs$/,

src/commons/ContentDisplay.tsx

@@ -1,5 +1,5 @@
 import { Card, Elevation } from '@blueprintjs/core';
-import React, { useEffect } from 'react';
+import React, { type JSX, useEffect } from 'react';
 
 export type ContentDisplayProps = {
   fullWidth?: boolean;

src/commons/__tests__/__snapshots__/ContentDisplay.test.tsx.snap

@@ -1,19 +1,21 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ContentDisplay page renders correctly 1`] = `
-<div
-  className="ContentDisplay row center-xs"
->
+<DocumentFragment>
   <div
-    className="col-md-10 col-xs-11 contentdisplay-content-parent"
+    class="ContentDisplay row center-xs"
   >
     <div
-      className="contentdisplay-content bp6-card bp6-elevation-3"
+      class="col-md-10 col-xs-11 contentdisplay-content-parent"
     >
-      <div>
-         Test Content 
+      <div
+        class="contentdisplay-content bp6-card bp6-elevation-3"
+      >
+        <div>
+           Test Content 
+        </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;