Merge pull request #26 from kris7t/query-refactor

Query refactor

60 files changed, 354 insertions, 827 deletions

diff --git a/subprojects/frontend/src/App.tsx b/subprojects/frontend/src/App.tsx
index cd394345..7f242529 100644
--- a/subprojects/frontend/src/App.tsx
+++ b/subprojects/frontend/src/App.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import Box from '@mui/material/Box';
 import CssBaseline from '@mui/material/CssBaseline';
 import { throttle } from 'lodash-es';
diff --git a/subprojects/frontend/src/Loading.tsx b/subprojects/frontend/src/Loading.tsx
index 489563e0..adee4f0e 100644
--- a/subprojects/frontend/src/Loading.tsx
+++ b/subprojects/frontend/src/Loading.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import CircularProgress from '@mui/material/CircularProgress';
 import { styled } from '@mui/material/styles';
 
diff --git a/subprojects/frontend/src/PWAStore.ts b/subprojects/frontend/src/PWAStore.ts
index e9f99e2a..a1b3ffd9 100644
--- a/subprojects/frontend/src/PWAStore.ts
+++ b/subprojects/frontend/src/PWAStore.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { makeAutoObservable, observable } from 'mobx';
 import ms from 'ms';
 // eslint-disable-next-line import/no-unresolved -- Importing virtual module.
diff --git a/subprojects/frontend/src/Refinery.tsx b/subprojects/frontend/src/Refinery.tsx
index f0162349..b5ff94e1 100644
--- a/subprojects/frontend/src/Refinery.tsx
+++ b/subprojects/frontend/src/Refinery.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import Grow from '@mui/material/Grow';
 import Stack from '@mui/material/Stack';
 import { SnackbarProvider } from 'notistack';
diff --git a/subprojects/frontend/src/RootStore.ts b/subprojects/frontend/src/RootStore.ts
index 2e76d66d..b84c0ce0 100644
--- a/subprojects/frontend/src/RootStore.ts
+++ b/subprojects/frontend/src/RootStore.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { getLogger } from 'loglevel';
 import { makeAutoObservable, runInAction } from 'mobx';
 
diff --git a/subprojects/frontend/src/RootStoreProvider.tsx b/subprojects/frontend/src/RootStoreProvider.tsx
index 2c11a0f9..7cb89af1 100644
--- a/subprojects/frontend/src/RootStoreProvider.tsx
+++ b/subprojects/frontend/src/RootStoreProvider.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { type ReactNode, createContext, useContext } from 'react';
 
 import type RootStore from './RootStore';
diff --git a/subprojects/frontend/src/ToggleDarkModeButton.tsx b/subprojects/frontend/src/ToggleDarkModeButton.tsx
index 59714f20..7a835e61 100644
--- a/subprojects/frontend/src/ToggleDarkModeButton.tsx
+++ b/subprojects/frontend/src/ToggleDarkModeButton.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import IconButton from '@mui/material/IconButton';
diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx
index 5a825512..f2542b14 100644
--- a/subprojects/frontend/src/TopBar.tsx
+++ b/subprojects/frontend/src/TopBar.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import GitHubIcon from '@mui/icons-material/GitHub';
 import AppBar from '@mui/material/AppBar';
 import Button from '@mui/material/Button';
diff --git a/subprojects/frontend/src/UpdateNotification.tsx b/subprojects/frontend/src/UpdateNotification.tsx
index 5c8c2d01..d86c0703 100644
--- a/subprojects/frontend/src/UpdateNotification.tsx
+++ b/subprojects/frontend/src/UpdateNotification.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import Button from '@mui/material/Button';
 import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
diff --git a/subprojects/frontend/src/WindowControlsOverlayColor.tsx b/subprojects/frontend/src/WindowControlsOverlayColor.tsx
index 14eda566..cfa468ea 100644
--- a/subprojects/frontend/src/WindowControlsOverlayColor.tsx
+++ b/subprojects/frontend/src/WindowControlsOverlayColor.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { useTheme } from '@mui/material/styles';
 import { useEffect } from 'react';
 
diff --git a/subprojects/frontend/src/editor/AnimatedButton.tsx b/subprojects/frontend/src/editor/AnimatedButton.tsx
index f75d4617..dbbda618 100644
--- a/subprojects/frontend/src/editor/AnimatedButton.tsx
+++ b/subprojects/frontend/src/editor/AnimatedButton.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import { styled, type SxProps, type Theme } from '@mui/material/styles';
diff --git a/subprojects/frontend/src/editor/ConnectButton.tsx b/subprojects/frontend/src/editor/ConnectButton.tsx
index e2d251f3..eed6fbc7 100644
--- a/subprojects/frontend/src/editor/ConnectButton.tsx
+++ b/subprojects/frontend/src/editor/ConnectButton.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import CloudIcon from '@mui/icons-material/Cloud';
 import CloudOffIcon from '@mui/icons-material/CloudOff';
 import SyncIcon from '@mui/icons-material/Sync';
diff --git a/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx b/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx
index 9b27f45c..b7b962ab 100644
--- a/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx
+++ b/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import Button from '@mui/material/Button';
 import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
diff --git a/subprojects/frontend/src/editor/DiagnosticValue.ts b/subprojects/frontend/src/editor/DiagnosticValue.ts
index b4e0b165..20478262 100644
--- a/subprojects/frontend/src/editor/DiagnosticValue.ts
+++ b/subprojects/frontend/src/editor/DiagnosticValue.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type { Diagnostic } from '@codemirror/lint';
 import { RangeValue } from '@codemirror/state';
 
diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx
index cfb988b2..905fa2ec 100644
--- a/subprojects/frontend/src/editor/EditorArea.tsx
+++ b/subprojects/frontend/src/editor/EditorArea.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import Box from '@mui/material/Box';
 import { useTheme } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx
index 53b06e23..9b187e5c 100644
--- a/subprojects/frontend/src/editor/EditorButtons.tsx
+++ b/subprojects/frontend/src/editor/EditorButtons.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type { Diagnostic } from '@codemirror/lint';
 import CheckIcon from '@mui/icons-material/Check';
 import ErrorIcon from '@mui/icons-material/Error';
diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx
index f7f8241a..87f408fe 100644
--- a/subprojects/frontend/src/editor/EditorPane.tsx
+++ b/subprojects/frontend/src/editor/EditorPane.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import Box from '@mui/material/Box';
 import Skeleton from '@mui/material/Skeleton';
 import Stack from '@mui/material/Stack';
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts
index 0a0d885d..b98f085e 100644
--- a/subprojects/frontend/src/editor/EditorStore.ts
+++ b/subprojects/frontend/src/editor/EditorStore.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type {
   CompletionContext,
   CompletionResult,
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts
index 01b65a7e..e057ce18 100644
--- a/subprojects/frontend/src/editor/EditorTheme.ts
+++ b/subprojects/frontend/src/editor/EditorTheme.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import errorSVG from '@material-icons/svg/svg/error/baseline.svg?raw';
 import expandMoreSVG from '@material-icons/svg/svg/expand_more/baseline.svg?raw';
 import infoSVG from '@material-icons/svg/svg/info/baseline.svg?raw';
@@ -8,32 +14,6 @@ function svgURL(svg: string): string {
   return `url('data:image/svg+xml;utf8,${svg}')`;
 }
 
-function radialShadowTheme(
-  origin: string,
-  scaleX: boolean,
-  scaleY: boolean,
-): CSSObject {
-  function radialGradient(opacity: number, scale: string): string {
-    return `radial-gradient(
-        farthest-side at ${origin},
-        rgba(0, 0, 0, ${opacity}),
-        rgba(0, 0, 0, 0)
-      )
-      ${origin} /
-      ${scaleX ? scale : '100%'}
-      ${scaleY ? scale : '100%'}
-      no-repeat`;
-  }
-
-  return {
-    background: `
-      ${radialGradient(0.2, '40%')},
-      ${radialGradient(0.14, '50%')},
-      ${radialGradient(0.12, '100%')}
-    `,
-  };
-}
-
 export default styled('div', {
   name: 'EditorTheme',
   shouldForwardProp: (propName) =>
@@ -52,98 +32,13 @@ export default styled('div', {
     },
   };
 
-  const scrollerThumbOpacity = theme.palette.mode === 'dark' ? 0.16 : 0.28;
-
   const generalStyle: CSSObject = {
     background: theme.palette.background.default,
     '&, .cm-editor': {
       height: '100%',
     },
-    '.cm-scroller-holder': {
-      display: 'flex',
-      position: 'relative',
-      flexDirection: 'column',
-      overflow: 'hidden',
-      flex: '1 1',
-    },
-    '.cm-scroller-spacer': {
-      position: 'sticky',
-      flexShrink: 0,
-      zIndex: 300,
-      width: 1,
-      marginRight: -1,
-      pointerEvents: 'none',
-    },
     '.cm-scroller': {
       color: theme.palette.text.secondary,
-      scrollbarWidth: 'none',
-      MsOverflowStyle: 'none',
-      '&::-webkit-scrollbar': {
-        width: 0,
-        height: 0,
-        background: 'transparent',
-      },
-    },
-    '.cm-scroller-track': {
-      position: 'absolute',
-      zIndex: 300,
-      touchAction: 'none',
-    },
-    '.cm-scroller-thumb': {
-      position: 'absolute',
-      background: theme.palette.text.secondary,
-      opacity: scrollerThumbOpacity,
-      transition: theme.transitions.create('opacity', {
-        duration: theme.transitions.duration.shortest,
-      }),
-      touchAction: 'none',
-      WebkitTapHighlightColor: 'transparent',
-      '&:hover': {
-        opacity: 0.75,
-        '@media (hover: none)': {
-          opacity: scrollerThumbOpacity,
-        },
-      },
-      '&.active': {
-        opacity: 1,
-        pointerEvents: 'none',
-        userSelect: 'none',
-      },
-    },
-    '.cm-scroller-track-y, .cm-scroller-thumb-y': {
-      top: 0,
-      right: 0,
-      width: 12,
-    },
-    '.cm-scroller-track-x, .cm-scroller-thumb-x': {
-      left: 0,
-      bottom: 0,
-      height: 12,
-    },
-    '.cm-scroller-track-x': {
-      right: 12,
-    },
-    '.cm-scroller-gutter-decoration': {
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      left: 0,
-      width: 0,
-      transition: theme.transitions.create('width', {
-        duration: theme.transitions.duration.shortest,
-      }),
-      ...radialShadowTheme('0 50%', true, false),
-    },
-    '.cm-scroller-top-decoration': {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      height: 0,
-      transition: theme.transitions.create('height', {
-        duration: theme.transitions.duration.shortest,
-      }),
-      ...radialShadowTheme('50% 0', false, true),
     },
     '.cm-gutters': {
       background: theme.palette.background.default,
@@ -162,7 +57,6 @@ export default styled('div', {
       background: 'transparent',
     },
     '.cm-cursor, .cm-cursor-primary': {
-      marginLeft: -1,
       borderLeft: `2px solid ${theme.palette.info.main}`,
     },
     '.cm-selectionBackground': {
@@ -175,7 +69,6 @@ export default styled('div', {
       },
     },
     '.cm-line': {
-      position: 'relative', // For indentation highlights
       padding: '0 12px 0 0px',
     },
   };
@@ -265,13 +158,6 @@ export default styled('div', {
     '.cm-searchMatch-selected': {
       background: theme.palette.highlight.search.selected,
     },
-    '.cm-indentation-marker': {
-      display: 'inline-block',
-      boxShadow: `1px 0 0 ${theme.palette.text.disabled} inset`,
-      '&.active': {
-        boxShadow: `1px 0 0 ${theme.palette.text.primary} inset`,
-      },
-    },
     '.cm-scroller-selection': {
       position: 'absolute',
       right: 0,
@@ -452,11 +338,11 @@ export default styled('div', {
 
   const foldStyle = {
     '.cm-foldGutter': {
-      width: 17,
+      width: 16,
     },
     '.problem-editor-foldMarker': {
       display: 'block',
-      margin: '4px 1px 4px 0',
+      margin: '4px 0 4px 0',
       padding: 0,
       maskImage: svgURL(expandMoreSVG),
       maskSize: '16px 16px',
@@ -467,7 +353,7 @@ export default styled('div', {
       cursor: 'pointer',
       WebkitTapHighlightColor: 'transparent',
       [theme.breakpoints.down('sm')]: {
-        margin: '2px 1px 2px 0',
+        margin: '2px 0 2px 0',
       },
     },
     '.problem-editor-foldMarker-open': {
diff --git a/subprojects/frontend/src/editor/GenerateButton.tsx b/subprojects/frontend/src/editor/GenerateButton.tsx
index 2036fc28..3837ef8e 100644
--- a/subprojects/frontend/src/editor/GenerateButton.tsx
+++ b/subprojects/frontend/src/editor/GenerateButton.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import DangerousOutlinedIcon from '@mui/icons-material/DangerousOutlined';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import Button from '@mui/material/Button';
diff --git a/subprojects/frontend/src/editor/LintPanelStore.ts b/subprojects/frontend/src/editor/LintPanelStore.ts
index 502f9c59..f81587fa 100644
--- a/subprojects/frontend/src/editor/LintPanelStore.ts
+++ b/subprojects/frontend/src/editor/LintPanelStore.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { closeLintPanel, openLintPanel } from '@codemirror/lint';
 
 import type EditorStore from './EditorStore';
diff --git a/subprojects/frontend/src/editor/PanelStore.ts b/subprojects/frontend/src/editor/PanelStore.ts
index 4f827280..25ef8b6c 100644
--- a/subprojects/frontend/src/editor/PanelStore.ts
+++ b/subprojects/frontend/src/editor/PanelStore.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type { Command } from '@codemirror/view';
 import { action, makeObservable, observable } from 'mobx';
 
diff --git a/subprojects/frontend/src/editor/SearchPanel.ts b/subprojects/frontend/src/editor/SearchPanel.ts
index c9df41b7..b63d5eed 100644
--- a/subprojects/frontend/src/editor/SearchPanel.ts
+++ b/subprojects/frontend/src/editor/SearchPanel.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import {
   type EditorView,
   type Panel,
diff --git a/subprojects/frontend/src/editor/SearchPanelPortal.tsx b/subprojects/frontend/src/editor/SearchPanelPortal.tsx
index 5cf1c90e..b4b07c74 100644
--- a/subprojects/frontend/src/editor/SearchPanelPortal.tsx
+++ b/subprojects/frontend/src/editor/SearchPanelPortal.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import Portal from '@mui/material/Portal';
 import { observer } from 'mobx-react-lite';
 
diff --git a/subprojects/frontend/src/editor/SearchPanelStore.ts b/subprojects/frontend/src/editor/SearchPanelStore.ts
index 65d595a8..6a97baf1 100644
--- a/subprojects/frontend/src/editor/SearchPanelStore.ts
+++ b/subprojects/frontend/src/editor/SearchPanelStore.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import {
   closeSearchPanel,
   findNext,
diff --git a/subprojects/frontend/src/editor/SearchToolbar.tsx b/subprojects/frontend/src/editor/SearchToolbar.tsx
index 54f3dba7..4ae7e893 100644
--- a/subprojects/frontend/src/editor/SearchToolbar.tsx
+++ b/subprojects/frontend/src/editor/SearchToolbar.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import CloseIcon from '@mui/icons-material/Close';
 import FindReplaceIcon from '@mui/icons-material/FindReplace';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
diff --git a/subprojects/frontend/src/editor/createEditorState.ts b/subprojects/frontend/src/editor/createEditorState.ts
index ce1efa4f..67b8fb9e 100644
--- a/subprojects/frontend/src/editor/createEditorState.ts
+++ b/subprojects/frontend/src/editor/createEditorState.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import {
   closeBrackets,
   closeBracketsKeymap,
@@ -38,8 +44,6 @@ import type EditorStore from './EditorStore';
 import SearchPanel from './SearchPanel';
 import exposeDiagnostics from './exposeDiagnostics';
 import findOccurrences from './findOccurrences';
-import indentationMarkerViewPlugin from './indentationMarkerViewPlugin';
-import scrollbarViewPlugin from './scrollbarViewPlugin';
 import semanticHighlighting from './semanticHighlighting';
 
 export default function createEditorState(
@@ -64,7 +68,6 @@ export default function createEditorState(
       highlightSpecialChars(),
       history(),
       indentOnInput(),
-      indentationMarkerViewPlugin(),
       rectangularSelection(),
       search({
         createPanel(view) {
@@ -123,7 +126,6 @@ export default function createEditorState(
         ...defaultKeymap,
       ]),
       problemLanguageSupport(),
-      scrollbarViewPlugin(store),
     ],
   });
 }
diff --git a/subprojects/frontend/src/editor/defineDecorationSetExtension.ts b/subprojects/frontend/src/editor/defineDecorationSetExtension.ts
index d9c7bc7d..0887c92e 100644
--- a/subprojects/frontend/src/editor/defineDecorationSetExtension.ts
+++ b/subprojects/frontend/src/editor/defineDecorationSetExtension.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { StateEffect, StateField, TransactionSpec } from '@codemirror/state';
 import { EditorView, Decoration, DecorationSet } from '@codemirror/view';
 
diff --git a/subprojects/frontend/src/editor/exposeDiagnostics.ts b/subprojects/frontend/src/editor/exposeDiagnostics.ts
index 82f24c93..c4dcbb87 100644
--- a/subprojects/frontend/src/editor/exposeDiagnostics.ts
+++ b/subprojects/frontend/src/editor/exposeDiagnostics.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { setDiagnosticsEffect } from '@codemirror/lint';
 import {
   StateField,
diff --git a/subprojects/frontend/src/editor/findOccurrences.ts b/subprojects/frontend/src/editor/findOccurrences.ts
index 08c078c2..00dffc96 100644
--- a/subprojects/frontend/src/editor/findOccurrences.ts
+++ b/subprojects/frontend/src/editor/findOccurrences.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import {
   type Range,
   RangeSet,
diff --git a/subprojects/frontend/src/editor/indentationMarkerViewPlugin.ts b/subprojects/frontend/src/editor/indentationMarkerViewPlugin.ts
deleted file mode 100644
index 730fa6e3..00000000
--- a/subprojects/frontend/src/editor/indentationMarkerViewPlugin.ts
+++ /dev/null
@@ -1,341 +0,0 @@
-/**
- * @file CodeMirror plugin to highlight indentation
- *
- * This file is based on the
- * [@replit/codemirror-indentation-markers](https://github.com/replit/codemirror-indentation-markers)
- * package, which is available under the
- * [MIT License](https://github.com/replit/codemirror-indentation-markers/blob/543cc508ca5cef5d8350af23973eb1425e31525c/LICENSE).
- *
- * The highlighting heuristics were adjusted to make them more suitable
- * for logic programming.
- *
- * @see https://github.com/replit/codemirror-indentation-markers/blob/543cc508ca5cef5d8350af23973eb1425e31525c/src/index.ts
- */
-
-import { getIndentUnit } from '@codemirror/language';
-import { Text, RangeSet, EditorState } from '@codemirror/state';
-import {
-  ViewPlugin,
-  Decoration,
-  EditorView,
-  WidgetType,
-  PluginValue,
-} from '@codemirror/view';
-
-export const INDENTATION_MARKER_CLASS = 'cm-indentation-marker';
-
-export const INDENTATION_MARKER_ACTIVE_CLASS = 'active';
-
-const indentationMark = Decoration.mark({
-  class: INDENTATION_MARKER_CLASS,
-  tagName: 'span',
-});
-
-const activeIndentationMark = Decoration.mark({
-  class: `${INDENTATION_MARKER_CLASS} ${INDENTATION_MARKER_ACTIVE_CLASS}`,
-  tagName: 'span',
-});
-
-/**
- * Widget used to simulate N indentation markers on empty lines.
- */
-class IndentationWidget extends WidgetType {
-  constructor(
-    readonly numIndent: number,
-    readonly indentSize: number,
-    readonly activeIndent?: number,
-  ) {
-    super();
-  }
-
-  override eq(other: IndentationWidget) {
-    return (
-      this.numIndent === other.numIndent &&
-      this.indentSize === other.indentSize &&
-      this.activeIndent === other.activeIndent
-    );
-  }
-
-  override toDOM(view: EditorView) {
-    const indentSize = getIndentUnit(view.state);
-
-    const wrapper = document.createElement('span');
-    wrapper.style.top = '0';
-    wrapper.style.left = '0';
-    wrapper.style.position = 'absolute';
-    wrapper.style.pointerEvents = 'none';
-
-    for (let indent = 0; indent < this.numIndent; indent += 1) {
-      const element = document.createElement('span');
-      element.className = INDENTATION_MARKER_CLASS;
-      element.classList.toggle(
-        INDENTATION_MARKER_ACTIVE_CLASS,
-        indent === this.activeIndent,
-      );
-      element.innerHTML = ' '.repeat(indentSize);
-      wrapper.appendChild(element);
-    }
-
-    return wrapper;
-  }
-}
-
-/**
- * Returns the number of indentation markers a non-empty line should have
- * based on the text in the line and the size of the indent.
- */
-function getNumIndentMarkersForNonEmptyLine(
-  text: string,
-  indentSize: number,
-  onIndentMarker?: (pos: number) => void,
-) {
-  let numIndents = 0;
-  let numConsecutiveSpaces = 0;
-  let prevChar: string | undefined;
-
-  for (let char = 0; char < text.length; char += 1) {
-    // Bail if we encounter a non-whitespace character
-    if (text[char] !== ' ' && text[char] !== '\t') {
-      // We still increment the indentation level if we would
-      // have added a marker here had this been a space or tab.
-      if (numConsecutiveSpaces % indentSize === 0 && char !== 0) {
-        numIndents += 1;
-      }
-
-      return numIndents;
-    }
-
-    // Every tab and N space has an indentation marker
-    const shouldAddIndent =
-      prevChar === '\t' || numConsecutiveSpaces % indentSize === 0;
-
-    if (shouldAddIndent) {
-      numIndents += 1;
-
-      if (onIndentMarker) {
-        onIndentMarker(char);
-      }
-    }
-
-    if (text[char] === ' ') {
-      numConsecutiveSpaces += 1;
-    } else {
-      numConsecutiveSpaces = 0;
-    }
-
-    prevChar = text[char];
-  }
-
-  return numIndents;
-}
-
-/**
- * Returns the number of indent markers an empty line should have
- * based on the number of indent markers of the previous
- * and next non-empty lines.
- */
-function getNumIndentMarkersForEmptyLine(prev: number, next: number) {
-  const min = Math.min(prev, next);
-  const max = Math.max(prev, next);
-
-  // If only one side is non-zero, we omit markers,
-  // because in logic programming, a block often ends with an empty line.
-  if (min === 0 && max > 0) {
-    return 0;
-  }
-
-  // Else, default to the minimum of the two
-  return min;
-}
-
-/**
- * Returns the next non-empty line and its indent level.
- */
-function findNextNonEmptyLineAndIndentLevel(
-  doc: Text,
-  startLine: number,
-  indentSize: number,
-): [number, number] {
-  const numLines = doc.lines;
-  let lineNo = startLine;
-
-  while (lineNo <= numLines) {
-    const { text } = doc.line(lineNo);
-
-    if (text.trim().length === 0) {
-      lineNo += 1;
-    } else {
-      const indent = getNumIndentMarkersForNonEmptyLine(text, indentSize);
-      return [lineNo, indent];
-    }
-  }
-
-  // Reached the end of the doc
-  return [numLines + 1, 0];
-}
-
-interface IndentationMarkerDesc {
-  lineNumber: number;
-  from: number;
-  to: number;
-  create(activeIndentIndex?: number): Decoration;
-}
-
-/**
- * Returns a range of lines with an active indent marker.
- */
-function getLinesWithActiveIndentMarker(
-  state: EditorState,
-  indentMap: Map<number, number>,
-): { start: number; end: number; activeIndent: number } {
-  const currentLine = state.doc.lineAt(state.selection.main.head);
-  const currentIndent = indentMap.get(currentLine.number);
-  const currentLineNo = currentLine.number;
-
-  if (!currentIndent) {
-    return { start: -1, end: -1, activeIndent: NaN };
-  }
-
-  let start: number;
-  let end: number;
-
-  for (start = currentLineNo; start >= 0; start -= 1) {
-    const indent = indentMap.get(start - 1);
-    if (!indent || indent < currentIndent) {
-      break;
-    }
-  }
-
-  for (end = currentLineNo; ; end += 1) {
-    const indent = indentMap.get(end + 1);
-    if (!indent || indent < currentIndent) {
-      break;
-    }
-  }
-
-  return { start, end, activeIndent: currentIndent };
-}
-/**
- * Adds indentation markers to all lines within view.
- */
-function addIndentationMarkers(view: EditorView) {
-  const indentSize = getIndentUnit(view.state);
-  const indentSizeMap = new Map</* lineNumber */ number, number>();
-  const decorations: Array<IndentationMarkerDesc> = [];
-
-  view.visibleRanges.forEach(({ from, to }) => {
-    let pos = from;
-
-    let prevIndentMarkers = 0;
-    let nextIndentMarkers = 0;
-    let nextNonEmptyLine = 0;
-
-    while (pos <= to) {
-      const line = view.state.doc.lineAt(pos);
-      const { text } = line;
-
-      // If a line is empty, we match the indentation according
-      // to a heuristic based on the indentations of the
-      // previous and next non-empty lines.
-      if (text.trim().length === 0) {
-        // To retrieve the next non-empty indentation level,
-        // we perform a lookahead and cache the result.
-        if (nextNonEmptyLine < line.number) {
-          const [nextLine, nextIndent] = findNextNonEmptyLineAndIndentLevel(
-            view.state.doc,
-            line.number + 1,
-            indentSize,
-          );
-
-          nextNonEmptyLine = nextLine;
-          nextIndentMarkers = nextIndent;
-        }
-
-        const numIndentMarkers = getNumIndentMarkersForEmptyLine(
-          prevIndentMarkers,
-          nextIndentMarkers,
-        );
-
-        // Add the indent widget and move on to next line
-        indentSizeMap.set(line.number, numIndentMarkers);
-        decorations.push({
-          from: pos,
-          to: pos,
-          lineNumber: line.number,
-          create: (activeIndentIndex) =>
-            Decoration.widget({
-              widget: new IndentationWidget(
-                numIndentMarkers,
-                indentSize,
-                activeIndentIndex,
-              ),
-            }),
-        });
-      } else {
-        const indices: Array<number> = [];
-
-        prevIndentMarkers = getNumIndentMarkersForNonEmptyLine(
-          text,
-          indentSize,
-          (char) => indices.push(char),
-        );
-
-        indentSizeMap.set(line.number, indices.length);
-        decorations.push(
-          ...indices.map(
-            (char, i): IndentationMarkerDesc => ({
-              from: line.from + char,
-              to: line.from + char + 1,
-              lineNumber: line.number,
-              create: (activeIndentIndex) =>
-                activeIndentIndex === i
-                  ? activeIndentationMark
-                  : indentationMark,
-            }),
-          ),
-        );
-      }
-
-      // Move on to the next line
-      pos = line.to + 1;
-    }
-  });
-
-  const activeBlockRange = getLinesWithActiveIndentMarker(
-    view.state,
-    indentSizeMap,
-  );
-
-  return RangeSet.of<Decoration>(
-    Array.from(decorations).map(({ lineNumber, from, to, create }) => {
-      const activeIndent =
-        lineNumber >= activeBlockRange.start &&
-        lineNumber <= activeBlockRange.end
-          ? activeBlockRange.activeIndent - 1
-          : undefined;
-
-      return { from, to, value: create(activeIndent) };
-    }),
-    true,
-  );
-}
-
-export default function indentationMarkerViewPlugin() {
-  return ViewPlugin.define<PluginValue & { decorations: RangeSet<Decoration> }>(
-    (view) => ({
-      decorations: addIndentationMarkers(view),
-      update(update) {
-        if (
-          update.docChanged ||
-          update.viewportChanged ||
-          update.selectionSet
-        ) {
-          this.decorations = addIndentationMarkers(update.view);
-        }
-      },
-    }),
-    {
-      decorations: (v) => v.decorations,
-    },
-  );
-}
diff --git a/subprojects/frontend/src/editor/scrollbarViewPlugin.ts b/subprojects/frontend/src/editor/scrollbarViewPlugin.ts
deleted file mode 100644
index f44034fd..00000000
--- a/subprojects/frontend/src/editor/scrollbarViewPlugin.ts
+++ /dev/null
@@ -1,357 +0,0 @@
-import { EditorSelection } from '@codemirror/state';
-import {
-  type EditorView,
-  type PluginValue,
-  ViewPlugin,
-} from '@codemirror/view';
-import { reaction } from 'mobx';
-
-import type EditorStore from './EditorStore';
-import { getDiagnostics } from './exposeDiagnostics';
-import findOccurrences from './findOccurrences';
-
-export const HOLDER_CLASS = 'cm-scroller-holder';
-export const SPACER_CLASS = 'cm-scroller-spacer';
-export const TRACK_CLASS = 'cm-scroller-track';
-export const THUMB_CLASS = 'cm-scroller-thumb';
-export const THUMB_ACTIVE_CLASS = 'active';
-export const GUTTER_DECORATION_CLASS = 'cm-scroller-gutter-decoration';
-export const TOP_DECORATION_CLASS = 'cm-scroller-top-decoration';
-export const ANNOTATION_SELECTION_CLASS = 'cm-scroller-selection';
-export const ANNOTATION_DIAGNOSTIC_CLASS = 'cm-scroller-diagnostic';
-export const ANNOTATION_OCCURRENCE_CLASS = 'cm-scroller-occurrence';
-export const SHADOW_WIDTH = 10;
-export const SCROLLBAR_WIDTH = 12;
-export const ANNOTATION_WIDTH = SCROLLBAR_WIDTH / 2;
-export const MIN_ANNOTATION_HEIGHT = 1;
-
-function createScrollbar(
-  holder: HTMLElement,
-  direction: 'x' | 'y',
-  touchCallback: (offsetX: number, offsetY: number) => void,
-  moveCallback: (movementX: number, movementY: number) => void,
-): { track: HTMLElement; thumb: HTMLElement } {
-  const track = holder.ownerDocument.createElement('div');
-  track.className = `${TRACK_CLASS} ${TRACK_CLASS}-${direction}`;
-  holder.appendChild(track);
-
-  const thumb = holder.ownerDocument.createElement('div');
-  thumb.className = `${THUMB_CLASS} ${THUMB_CLASS}-${direction}`;
-  track.appendChild(thumb);
-
-  let pointerId: number | undefined;
-  track.addEventListener('pointerdown', (event) => {
-    if (pointerId !== undefined) {
-      event.preventDefault();
-      return;
-    }
-    ({ pointerId } = event);
-    thumb.classList.add(THUMB_ACTIVE_CLASS);
-    if (event.target === thumb) {
-      // Prevent implicit pointer capture on mobile.
-      thumb.releasePointerCapture(pointerId);
-    } else {
-      touchCallback(event.offsetX, event.offsetY);
-    }
-    track.setPointerCapture(pointerId);
-  });
-
-  track.addEventListener('pointermove', (event) => {
-    if (event.pointerId !== pointerId) {
-      return;
-    }
-    moveCallback(event.movementX, event.movementY);
-    event.preventDefault();
-  });
-
-  function scrollEnd(event: PointerEvent) {
-    if (event.pointerId !== pointerId) {
-      return;
-    }
-    pointerId = undefined;
-    thumb.classList.remove(THUMB_ACTIVE_CLASS);
-  }
-
-  track.addEventListener('pointerup', scrollEnd, { passive: true });
-  track.addEventListener('pointercancel', scrollEnd, { passive: true });
-
-  return { track, thumb };
-}
-
-function rebuildAnnotations(
-  view: EditorView,
-  scrollHeight: number,
-  trackYHeight: number,
-  holder: HTMLElement,
-  annotations: HTMLDivElement[],
-) {
-  const { state } = view;
-  const overlayAnnotationsHeight =
-    (view.contentHeight / scrollHeight) * trackYHeight;
-  const lineHeight = overlayAnnotationsHeight / state.doc.lines;
-
-  let i = 0;
-
-  function getOrCreateAnnotation(from: number, to?: number): HTMLDivElement {
-    const startLine = state.doc.lineAt(from).number;
-    const endLine = to === undefined ? startLine : state.doc.lineAt(to).number;
-    const top = (startLine - 1) * lineHeight;
-    const height = Math.max(
-      MIN_ANNOTATION_HEIGHT,
-      Math.max(1, endLine - startLine) * lineHeight,
-    );
-
-    let annotation: HTMLDivElement | undefined;
-    if (i < annotations.length) {
-      annotation = annotations[i];
-    }
-    if (annotation === undefined) {
-      annotation = holder.ownerDocument.createElement('div');
-      annotations.push(annotation);
-      holder.appendChild(annotation);
-    }
-    i += 1;
-
-    annotation.style.top = `${top}px`;
-    annotation.style.height = `${height}px`;
-
-    return annotation;
-  }
-
-  state.selection.ranges.forEach(({ head }) => {
-    const selectionAnnotation = getOrCreateAnnotation(head);
-    selectionAnnotation.className = ANNOTATION_SELECTION_CLASS;
-    selectionAnnotation.style.width = `${SCROLLBAR_WIDTH}px`;
-  });
-
-  const diagnosticsIter = getDiagnostics(state).iter();
-  while (diagnosticsIter.value !== null) {
-    const diagnosticAnnotation = getOrCreateAnnotation(
-      diagnosticsIter.from,
-      diagnosticsIter.to,
-    );
-    diagnosticAnnotation.className = `${ANNOTATION_DIAGNOSTIC_CLASS} ${ANNOTATION_DIAGNOSTIC_CLASS}-${diagnosticsIter.value.severity}`;
-    diagnosticAnnotation.style.width = `${ANNOTATION_WIDTH}px`;
-    diagnosticsIter.next();
-  }
-
-  const occurrences = view.state.field(findOccurrences);
-  const occurrencesIter = occurrences.iter();
-  while (occurrencesIter.value !== null) {
-    const occurrenceAnnotation = getOrCreateAnnotation(
-      occurrencesIter.from,
-      occurrencesIter.to,
-    );
-    occurrenceAnnotation.className = ANNOTATION_OCCURRENCE_CLASS;
-    occurrenceAnnotation.style.width = `${ANNOTATION_WIDTH}px`;
-    occurrenceAnnotation.style.right = `${ANNOTATION_WIDTH}px`;
-    occurrencesIter.next();
-  }
-
-  annotations
-    .splice(i)
-    .forEach((staleAnnotation) => holder.removeChild(staleAnnotation));
-}
-
-export default function scrollbarViewPlugin(
-  editorStore: EditorStore,
-): ViewPlugin<PluginValue> {
-  return ViewPlugin.define((view) => {
-    const { scrollDOM } = view;
-    const { ownerDocument, parentElement: parentDOM } = scrollDOM;
-    if (parentDOM === null) {
-      return {};
-    }
-
-    const holder = ownerDocument.createElement('div');
-    holder.className = HOLDER_CLASS;
-    parentDOM.replaceChild(holder, scrollDOM);
-    holder.appendChild(scrollDOM);
-
-    const spacer = ownerDocument.createElement('div');
-    spacer.className = SPACER_CLASS;
-    scrollDOM.insertBefore(spacer, scrollDOM.firstChild);
-
-    let gutterWidth = 0;
-
-    scrollDOM.addEventListener('click', (event) => {
-      const scrollX = scrollDOM.scrollLeft + event.offsetX;
-      const scrollY = scrollDOM.scrollTop + event.offsetY;
-      if (scrollX > gutterWidth && scrollY > view.contentHeight) {
-        event.preventDefault();
-        view.focus();
-        editorStore.dispatch({
-          scrollIntoView: true,
-          selection: EditorSelection.create([
-            EditorSelection.cursor(view.state.doc.length),
-          ]),
-        });
-      }
-    });
-
-    let factorY = 1;
-    let factorX = 1;
-
-    const { track: trackY, thumb: thumbY } = createScrollbar(
-      holder,
-      'y',
-      (_offsetX, offsetY) => {
-        const scaledOffset = offsetY / factorY;
-        const { height: scrollerHeight } = scrollDOM.getBoundingClientRect();
-        const target = Math.max(0, scaledOffset - scrollerHeight / 2);
-        scrollDOM.scrollTo({ top: target });
-      },
-      (_movementX, movementY) => {
-        scrollDOM.scrollBy({ top: movementY / factorY });
-      },
-    );
-
-    const { track: trackX, thumb: thumbX } = createScrollbar(
-      holder,
-      'x',
-      (offsetX) => {
-        const scaledOffset = offsetX / factorX;
-        const { width: scrollerWidth } = scrollDOM.getBoundingClientRect();
-        const target = Math.max(0, scaledOffset - scrollerWidth / 2);
-        scrollDOM.scrollTo({ left: target });
-      },
-      (movementX) => {
-        scrollDOM.scrollBy({ left: movementX / factorX });
-      },
-    );
-
-    const gutterDecoration = ownerDocument.createElement('div');
-    gutterDecoration.className = GUTTER_DECORATION_CLASS;
-    holder.appendChild(gutterDecoration);
-
-    const topDecoration = ownerDocument.createElement('div');
-    topDecoration.className = TOP_DECORATION_CLASS;
-    holder.appendChild(topDecoration);
-
-    const disposePanelReaction = reaction(
-      () => editorStore.searchPanel.state,
-      (panelOpen) => {
-        topDecoration.style.display = panelOpen ? 'none' : 'block';
-      },
-      { fireImmediately: true },
-    );
-
-    let gutters: Element | undefined;
-
-    let firstRun = true;
-    let firstRunTimeout: number | undefined;
-    let requested = false;
-    let rebuildRequested = false;
-
-    const annotations: HTMLDivElement[] = [];
-
-    let observer: ResizeObserver | undefined;
-
-    function update() {
-      requested = false;
-
-      if (gutters === undefined) {
-        gutters = scrollDOM.querySelector('.cm-gutters') ?? undefined;
-        if (gutters !== undefined && observer !== undefined) {
-          observer.observe(gutters);
-        }
-      }
-
-      const { height: scrollerHeight, width: scrollerWidth } =
-        scrollDOM.getBoundingClientRect();
-      const { scrollTop, scrollLeft, scrollWidth } = scrollDOM;
-      const scrollHeight =
-        view.contentHeight + scrollerHeight - view.defaultLineHeight;
-      if (firstRun) {
-        if (firstRunTimeout !== undefined) {
-          clearTimeout(firstRunTimeout);
-        }
-        firstRunTimeout = setTimeout(() => {
-          spacer.style.minHeight = `${scrollHeight}px`;
-          firstRun = false;
-        }, 0);
-      } else {
-        spacer.style.minHeight = `${scrollHeight}px`;
-      }
-      gutterWidth = gutters?.clientWidth ?? 0;
-      let trackYHeight = scrollerHeight;
-
-      // Prevent spurious horizontal scrollbar by rounding up to the nearest pixel.
-      if (scrollWidth > Math.ceil(scrollerWidth)) {
-        // Leave space for horizontal scrollbar.
-        trackYHeight -= SCROLLBAR_WIDTH;
-        // Alwalys leave space for annotation in the vertical scrollbar.
-        const trackXWidth = scrollerWidth - gutterWidth - SCROLLBAR_WIDTH;
-        const thumbWidth = trackXWidth * (scrollerWidth / scrollWidth);
-        factorX = (trackXWidth - thumbWidth) / (scrollWidth - scrollerWidth);
-        trackY.style.bottom = `${SCROLLBAR_WIDTH}px`;
-        trackX.style.display = 'block';
-        trackX.style.left = `${gutterWidth}px`;
-        thumbX.style.width = `${thumbWidth}px`;
-        thumbX.style.left = `${scrollLeft * factorX}px`;
-        scrollDOM.style.overflowX = 'scroll';
-      } else {
-        trackY.style.bottom = '0px';
-        trackX.style.display = 'none';
-        scrollDOM.style.overflowX = 'hidden';
-      }
-
-      const thumbHeight = trackYHeight * (scrollerHeight / scrollHeight);
-      factorY = (trackYHeight - thumbHeight) / (scrollHeight - scrollerHeight);
-      thumbY.style.display = 'block';
-      thumbY.style.height = `${thumbHeight}px`;
-      thumbY.style.top = `${scrollTop * factorY}px`;
-
-      gutterDecoration.style.left = `${gutterWidth}px`;
-      gutterDecoration.style.width = `${Math.max(
-        0,
-        Math.min(scrollLeft, SHADOW_WIDTH),
-      )}px`;
-
-      topDecoration.style.height = `${Math.max(
-        0,
-        Math.min(scrollTop, SHADOW_WIDTH),
-      )}px`;
-
-      if (rebuildRequested) {
-        rebuildAnnotations(
-          view,
-          scrollHeight,
-          trackYHeight,
-          holder,
-          annotations,
-        );
-        rebuildRequested = false;
-      }
-    }
-
-    function requestUpdate() {
-      if (!requested) {
-        requested = true;
-        view.requestMeasure({ read: update });
-      }
-    }
-
-    function requestRebuild() {
-      requestUpdate();
-      rebuildRequested = true;
-    }
-
-    observer = new ResizeObserver(requestRebuild);
-    observer.observe(holder);
-
-    scrollDOM.addEventListener('scroll', requestUpdate);
-
-    requestRebuild();
-
-    return {
-      update: requestRebuild,
-      destroy() {
-        disposePanelReaction();
-        observer?.disconnect();
-        scrollDOM.removeEventListener('scroll', requestUpdate);
-        parentDOM.replaceChild(holder, holder);
-      },
-    };
-  });
-}
diff --git a/subprojects/frontend/src/editor/semanticHighlighting.ts b/subprojects/frontend/src/editor/semanticHighlighting.ts
index 2c1bd67d..1f2e564c 100644
--- a/subprojects/frontend/src/editor/semanticHighlighting.ts
+++ b/subprojects/frontend/src/editor/semanticHighlighting.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { RangeSet, type TransactionSpec } from '@codemirror/state';
 import { Decoration } from '@codemirror/view';
 
diff --git a/subprojects/frontend/src/index.tsx b/subprojects/frontend/src/index.tsx
index 29b2b196..cb11e6c3 100644
--- a/subprojects/frontend/src/index.tsx
+++ b/subprojects/frontend/src/index.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { configure } from 'mobx';
 import { type Root, createRoot } from 'react-dom/client';
 
diff --git a/subprojects/frontend/src/language/folding.ts b/subprojects/frontend/src/language/folding.ts
index 4dabfa27..b4d4ca22 100644
--- a/subprojects/frontend/src/language/folding.ts
+++ b/subprojects/frontend/src/language/folding.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type { EditorState } from '@codemirror/state';
 import type { SyntaxNode } from '@lezer/common';
 
diff --git a/subprojects/frontend/src/language/indentation.ts b/subprojects/frontend/src/language/indentation.ts
index a0f7032d..8446d7fa 100644
--- a/subprojects/frontend/src/language/indentation.ts
+++ b/subprojects/frontend/src/language/indentation.ts
@@ -1,3 +1,10 @@
+/*
+ * Copyright (C) 2018-2021 by Marijn Haverbeke <marijnh@gmail.com> and others
+ * Copyright (C) 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: MIT OR EPL-2.0
+ */
+
 import type { TreeIndentContext } from '@codemirror/language';
 
 /**
diff --git a/subprojects/frontend/src/language/problem.grammar b/subprojects/frontend/src/language/problem.grammar
index 704badab..a7b1fb0a 100644
--- a/subprojects/frontend/src/language/problem.grammar
+++ b/subprojects/frontend/src/language/problem.grammar
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 @detectDelim
 
 @external prop implicitCompletion from './props'
diff --git a/subprojects/frontend/src/language/problemLanguageSupport.ts b/subprojects/frontend/src/language/problemLanguageSupport.ts
index c3ae7ed9..2121e05f 100644
--- a/subprojects/frontend/src/language/problemLanguageSupport.ts
+++ b/subprojects/frontend/src/language/problemLanguageSupport.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import {
   foldInside,
   foldNodeProp,
diff --git a/subprojects/frontend/src/language/props.ts b/subprojects/frontend/src/language/props.ts
index 65392e75..aa67145a 100644
--- a/subprojects/frontend/src/language/props.ts
+++ b/subprojects/frontend/src/language/props.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 /* eslint-disable import/prefer-default-export -- Lezer needs non-default exports */
 
 import { NodeProp } from '@lezer/common';
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index ff97d524..78146f25 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import {
   alpha,
   createTheme,
@@ -69,7 +75,7 @@ function createResponsiveTheme(
     ...options,
     typography: {
       fontFamily:
-        '"InterVariable", "Inter", "Roboto", "Helvetica", "Arial", sans-serif',
+        '"Inter Variable", "Inter", "Roboto", "Helvetica", "Arial", sans-serif',
       fontWeightMedium: 600,
       fontWeightEditorNormal: 400,
       fontWeightEditorBold: 700,
@@ -79,7 +85,7 @@ function createResponsiveTheme(
       },
       editor: {
         fontFamily:
-          '"JetBrains MonoVariable", "JetBrains Mono", "Cascadia Code", "Fira Code", monospace',
+          '"JetBrains Mono Variable", "JetBrains Mono", "Cascadia Code", "Fira Code", monospace',
         fontFeatureSettings: '"liga", "calt"',
         // `rem` for JetBrains MonoVariable make the text too large in Safari.
         fontSize: '16px',
diff --git a/subprojects/frontend/src/theme/ThemeStore.ts b/subprojects/frontend/src/theme/ThemeStore.ts
index e09d8d99..7c657449 100644
--- a/subprojects/frontend/src/theme/ThemeStore.ts
+++ b/subprojects/frontend/src/theme/ThemeStore.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { makeAutoObservable } from 'mobx';
 
 export enum ThemePreference {
diff --git a/subprojects/frontend/src/utils/CancelledError.ts b/subprojects/frontend/src/utils/CancelledError.ts
index ee23676f..96b67af7 100644
--- a/subprojects/frontend/src/utils/CancelledError.ts
+++ b/subprojects/frontend/src/utils/CancelledError.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 export default class CancelledError extends Error {
   constructor(message = 'Operation cancelled') {
     super(message);
diff --git a/subprojects/frontend/src/utils/PendingTask.ts b/subprojects/frontend/src/utils/PendingTask.ts
index d0b24c1f..80d1a346 100644
--- a/subprojects/frontend/src/utils/PendingTask.ts
+++ b/subprojects/frontend/src/utils/PendingTask.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import TimeoutError from './TimeoutError';
 import getLogger from './getLogger';
 
diff --git a/subprojects/frontend/src/utils/PriorityMutex.ts b/subprojects/frontend/src/utils/PriorityMutex.ts
index 78736141..c1215c76 100644
--- a/subprojects/frontend/src/utils/PriorityMutex.ts
+++ b/subprojects/frontend/src/utils/PriorityMutex.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import CancelledError from './CancelledError';
 import PendingTask from './PendingTask';
 import getLogger from './getLogger';
diff --git a/subprojects/frontend/src/utils/TimeoutError.ts b/subprojects/frontend/src/utils/TimeoutError.ts
index eb800f40..21365502 100644
--- a/subprojects/frontend/src/utils/TimeoutError.ts
+++ b/subprojects/frontend/src/utils/TimeoutError.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 export default class TimeoutError extends Error {
   constructor() {
     super('Operation timed out');
diff --git a/subprojects/frontend/src/utils/getLogger.ts b/subprojects/frontend/src/utils/getLogger.ts
index 301fd76d..09b0b17f 100644
--- a/subprojects/frontend/src/utils/getLogger.ts
+++ b/subprojects/frontend/src/utils/getLogger.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import styles, { type CSPair } from 'ansi-styles';
 import log from 'loglevel';
 import prefix from 'loglevel-plugin-prefix';
diff --git a/subprojects/frontend/src/utils/useDelayedSnackbar.ts b/subprojects/frontend/src/utils/useDelayedSnackbar.ts
index 03ad6caa..3d6df3e3 100644
--- a/subprojects/frontend/src/utils/useDelayedSnackbar.ts
+++ b/subprojects/frontend/src/utils/useDelayedSnackbar.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import {
   useSnackbar,
   type SnackbarKey,
diff --git a/subprojects/frontend/src/xtext/BackendConfig.ts b/subprojects/frontend/src/xtext/BackendConfig.ts
index 41737c0b..4c7eac5f 100644
--- a/subprojects/frontend/src/xtext/BackendConfig.ts
+++ b/subprojects/frontend/src/xtext/BackendConfig.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 /* eslint-disable @typescript-eslint/no-redeclare -- Declare types with their companion objects */
 
 import { z } from 'zod';
diff --git a/subprojects/frontend/src/xtext/ContentAssistService.ts b/subprojects/frontend/src/xtext/ContentAssistService.ts
index 78f61c06..fd30c4f9 100644
--- a/subprojects/frontend/src/xtext/ContentAssistService.ts
+++ b/subprojects/frontend/src/xtext/ContentAssistService.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type {
   Completion,
   CompletionContext,
diff --git a/subprojects/frontend/src/xtext/HighlightingService.ts b/subprojects/frontend/src/xtext/HighlightingService.ts
index a126ee40..447f1401 100644
--- a/subprojects/frontend/src/xtext/HighlightingService.ts
+++ b/subprojects/frontend/src/xtext/HighlightingService.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type EditorStore from '../editor/EditorStore';
 import type { IHighlightRange } from '../editor/semanticHighlighting';
 
diff --git a/subprojects/frontend/src/xtext/OccurrencesService.ts b/subprojects/frontend/src/xtext/OccurrencesService.ts
index fc72ead2..c9c6c699 100644
--- a/subprojects/frontend/src/xtext/OccurrencesService.ts
+++ b/subprojects/frontend/src/xtext/OccurrencesService.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type { Transaction } from '@codemirror/state';
 import { debounce } from 'lodash-es';
 import ms from 'ms';
diff --git a/subprojects/frontend/src/xtext/UpdateService.ts b/subprojects/frontend/src/xtext/UpdateService.ts
index 63e28652..ee5ebde2 100644
--- a/subprojects/frontend/src/xtext/UpdateService.ts
+++ b/subprojects/frontend/src/xtext/UpdateService.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type { ChangeDesc, Transaction } from '@codemirror/state';
 import { debounce } from 'lodash-es';
 import { nanoid } from 'nanoid';
diff --git a/subprojects/frontend/src/xtext/UpdateStateTracker.ts b/subprojects/frontend/src/xtext/UpdateStateTracker.ts
index 5d4ce49e..4ce93ed6 100644
--- a/subprojects/frontend/src/xtext/UpdateStateTracker.ts
+++ b/subprojects/frontend/src/xtext/UpdateStateTracker.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import {
   type ChangeDesc,
   ChangeSet,
diff --git a/subprojects/frontend/src/xtext/ValidationService.ts b/subprojects/frontend/src/xtext/ValidationService.ts
index 72414590..64fb63eb 100644
--- a/subprojects/frontend/src/xtext/ValidationService.ts
+++ b/subprojects/frontend/src/xtext/ValidationService.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type { Diagnostic } from '@codemirror/lint';
 
 import type EditorStore from '../editor/EditorStore';
diff --git a/subprojects/frontend/src/xtext/XtextClient.ts b/subprojects/frontend/src/xtext/XtextClient.ts
index 14fb2430..e8181af0 100644
--- a/subprojects/frontend/src/xtext/XtextClient.ts
+++ b/subprojects/frontend/src/xtext/XtextClient.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type {
   CompletionContext,
   CompletionResult,
diff --git a/subprojects/frontend/src/xtext/XtextWebSocketClient.ts b/subprojects/frontend/src/xtext/XtextWebSocketClient.ts
index 6b734546..6bb7eec8 100644
--- a/subprojects/frontend/src/xtext/XtextWebSocketClient.ts
+++ b/subprojects/frontend/src/xtext/XtextWebSocketClient.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { createAtom, makeAutoObservable, observable } from 'mobx';
 import ms from 'ms';
 import { nanoid } from 'nanoid';
diff --git a/subprojects/frontend/src/xtext/fetchBackendConfig.ts b/subprojects/frontend/src/xtext/fetchBackendConfig.ts
index 15e976d8..71ff2e63 100644
--- a/subprojects/frontend/src/xtext/fetchBackendConfig.ts
+++ b/subprojects/frontend/src/xtext/fetchBackendConfig.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import BackendConfig, { ENDPOINT } from './BackendConfig';
 
 export default async function fetchBackendConfig(): Promise<BackendConfig> {
diff --git a/subprojects/frontend/src/xtext/webSocketMachine.ts b/subprojects/frontend/src/xtext/webSocketMachine.ts
index fc53fef3..2fb1f52f 100644
--- a/subprojects/frontend/src/xtext/webSocketMachine.ts
+++ b/subprojects/frontend/src/xtext/webSocketMachine.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import ms from 'ms';
 import { actions, assign, createMachine } from 'xstate';
 
diff --git a/subprojects/frontend/src/xtext/xtextMessages.ts b/subprojects/frontend/src/xtext/xtextMessages.ts
index ec7a2a31..bbbff064 100644
--- a/subprojects/frontend/src/xtext/xtextMessages.ts
+++ b/subprojects/frontend/src/xtext/xtextMessages.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 /* eslint-disable @typescript-eslint/no-redeclare -- Declare types with their companion objects */
 
 import { z } from 'zod';
diff --git a/subprojects/frontend/src/xtext/xtextServiceResults.ts b/subprojects/frontend/src/xtext/xtextServiceResults.ts
index e93c6714..d3b467ad 100644
--- a/subprojects/frontend/src/xtext/xtextServiceResults.ts
+++ b/subprojects/frontend/src/xtext/xtextServiceResults.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 /* eslint-disable @typescript-eslint/no-redeclare -- Declare types with their companion objects */
 
 import { z } from 'zod';