Merge pull request #55 from kris7t/svg-export

Frontend: file management and svg export

38 files changed, 2155 insertions, 597 deletions

diff --git a/LICENSES/OFL-1.1.txt b/LICENSES/OFL-1.1.txt
new file mode 100644
index 00000000..6fe84ee2
--- /dev/null
+++ b/LICENSES/OFL-1.1.txt
@@ -0,0 +1,43 @@
+SIL OPEN FONT LICENSE
+
+Version 1.1 - 26 February 2007
+
+PREAMBLE
+
+The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+
+"Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting, or substituting — in part or in whole — any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission.
+
+5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software.
+
+TERMINATION
+
+This license becomes null and void if any of the above conditions are not met.
+
+DISCLAIMER
+
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index df12d2f1..0ed6470f 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -8,9 +8,9 @@ jetty = "12.0.6"
 jmh = "1.37"
 junit = "5.10.2"
 mockito = "5.10.0"
-mwe2 = "2.17.0.M3"
+mwe2 = "2.17.0"
 slf4j = "2.0.12"
-xtext = "2.34.0.M1"
+xtext = "2.34.0.M2"
 
 [libraries]
 eclipseCollections = { group = "org.eclipse.collections", name = "eclipse-collections", version.ref = "eclipseCollections" }
@@ -37,7 +37,7 @@ junit-engine = { group = "org.junit.jupiter", name = "junit-jupiter-engine", ver
 junit-params = { group = "org.junit.jupiter", name = "junit-jupiter-params", version.ref = "junit" }
 mockito-core = { group = "org.mockito", name = "mockito-core", version.ref = "mockito" }
 mockito-junit = { group = "org.mockito", name = "mockito-junit-jupiter", version.ref = "mockito" }
-mwe-utils = { group = "org.eclipse.emf", name = "org.eclipse.emf.mwe.utils", version = "1.11.0.M3" }
+mwe-utils = { group = "org.eclipse.emf", name = "org.eclipse.emf.mwe.utils", version = "1.11.0" }
 mwe2-launch = { group = "org.eclipse.emf", name = "org.eclipse.emf.mwe2.launch", version.ref = "mwe2" }
 mwe2-lib = { group = "org.eclipse.emf", name = "org.eclipse.emf.mwe2.lib", version.ref = "mwe2" }
 ortools = { group = "com.google.ortools", name = "ortools-java", version = "9.8.3296" }
diff --git a/package.json b/package.json
index 7822bcc1..f7b8bd83 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
   },
   "packageManager": "yarn@4.1.0",
   "devDependencies": {
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "typescript": "5.3.3"
   },
   "resolutions": {
diff --git a/subprojects/frontend/config/graphvizUMDVitePlugin.ts b/subprojects/frontend/config/graphvizUMDVitePlugin.ts
index 0c3c9aa0..8f3511bc 100644
--- a/subprojects/frontend/config/graphvizUMDVitePlugin.ts
+++ b/subprojects/frontend/config/graphvizUMDVitePlugin.ts
@@ -35,7 +35,6 @@ export default function graphvizUMDVitePlugin(): PluginOption {
       if (resolvedPath === undefined) {
         return;
       }
-      console.log(resolvedPath);
       if (command === 'serve') {
         url = `/@fs/${resolvedPath}`;
       } else {
diff --git a/subprojects/frontend/package.json b/subprojects/frontend/package.json
index 7d5e19d1..73bb463d 100644
--- a/subprojects/frontend/package.json
+++ b/subprojects/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "//": [
-    "SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>",
+    "SPDX-FileCopyrightText: 2021-2024 The Refinery Authors <https://refinery.tools/>",
     "",
     "SPDX-License-Identifier: EPL-2.0"
   ],
@@ -33,21 +33,25 @@
     "@codemirror/language": "^6.10.1",
     "@codemirror/lint": "^6.5.0",
     "@codemirror/search": "^6.5.6",
-    "@codemirror/state": "^6.4.0",
-    "@codemirror/view": "^6.24.0",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.24.1",
+    "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.3",
+    "@emotion/serialize": "^1.1.3",
     "@emotion/styled": "^11.11.0",
+    "@emotion/utils": "^1.2.1",
     "@fontsource-variable/jetbrains-mono": "^5.0.19",
     "@fontsource-variable/open-sans": "^5.0.25",
+    "@fontsource/open-sans": "^5.0.24",
     "@hpcc-js/wasm": "^2.16.0",
     "@lezer/common": "^1.2.1",
     "@lezer/highlight": "^1.2.0",
     "@lezer/lr": "^1.4.0",
     "@material-icons/svg": "^1.0.33",
-    "@mui/icons-material": "^5.15.10",
-    "@mui/material": "^5.15.10",
-    "@mui/system": "^5.15.9",
-    "@mui/x-data-grid": "^6.19.4",
+    "@mui/icons-material": "^5.15.11",
+    "@mui/material": "^5.15.11",
+    "@mui/system": "^5.15.11",
+    "@mui/x-data-grid": "^6.19.5",
     "ansi-styles": "^6.2.1",
     "csstype": "^3.1.3",
     "d3": "^7.8.5",
@@ -55,17 +59,19 @@
     "d3-selection": "^3.0.0",
     "d3-zoom": "patch:d3-zoom@npm%3A3.0.0#~/.yarn/patches/d3-zoom-npm-3.0.0-18f706a421.patch",
     "escape-string-regexp": "^5.0.0",
+    "jspdf": "^2.5.1",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.9.1",
     "loglevel-plugin-prefix": "^0.8.4",
     "mobx": "^6.12.0",
     "mobx-react-lite": "^4.0.5",
     "ms": "^2.1.3",
-    "nanoid": "^5.0.5",
+    "nanoid": "^5.0.6",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-resize-detector": "^10.0.1",
+    "svg2pdf.js": "^2.2.3",
     "xstate": "^4.38.3",
     "zod": "^3.22.4"
   },
@@ -75,21 +81,22 @@
     "@types/d3-graphviz": "^2.6.10",
     "@types/d3-selection": "^3.0.10",
     "@types/d3-zoom": "^3.0.8",
-    "@types/eslint": "^8.56.2",
+    "@types/eslint": "^8.56.3",
     "@types/html-minifier-terser": "^7.0.2",
+    "@types/jspdf": "^2.0.0",
     "@types/lodash-es": "^4.17.12",
     "@types/micromatch": "^4.0.6",
     "@types/ms": "^0.7.34",
-    "@types/node": "^20.11.19",
+    "@types/node": "^20.11.20",
     "@types/pnpapi": "^0.0.5",
-    "@types/react": "^18.2.56",
+    "@types/react": "^18.2.58",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "@xstate/cli": "^0.5.17",
     "cross-env": "^7.0.3",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-prettier": "^9.1.0",
@@ -105,7 +112,7 @@
     "pnpapi": "^0.0.0",
     "prettier": "^3.2.5",
     "typescript": "5.3.3",
-    "vite": "^5.1.3",
+    "vite": "^5.1.4",
     "vite-plugin-pwa": "^0.19.0",
     "workbox-window": "^7.0.0"
   }
diff --git a/subprojects/frontend/src/PaneButtons.tsx b/subprojects/frontend/src/PaneButtons.tsx
index 7e884ab0..7c759c36 100644
--- a/subprojects/frontend/src/PaneButtons.tsx
+++ b/subprojects/frontend/src/PaneButtons.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2021-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
@@ -27,6 +27,9 @@ const PaneButtonGroup = styled(ToggleButtonGroup, {
     '.MuiToggleButton-root': {
       fontSize: '1rem',
       lineHeight: '1.5',
+      // Must remove margin along with the border to avoid the button
+      // moving around (into the space of the missing border) when selected.
+      margin: '0',
       border: 'none',
       ...(hideLabel ? {} : { paddingBlock: 6 }),
       '&::before': {
diff --git a/subprojects/frontend/src/RootStore.ts b/subprojects/frontend/src/RootStore.ts
index e277c808..c029f746 100644
--- a/subprojects/frontend/src/RootStore.ts
+++ b/subprojects/frontend/src/RootStore.ts
@@ -5,10 +5,16 @@
  */
 
 import { getLogger } from 'loglevel';
-import { makeAutoObservable, runInAction } from 'mobx';
+import {
+  IReactionDisposer,
+  autorun,
+  makeAutoObservable,
+  runInAction,
+} from 'mobx';
 
 import PWAStore from './PWAStore';
 import type EditorStore from './editor/EditorStore';
+import ExportSettingsScotre from './graph/export/ExportSettingsStore';
 import Compressor from './persistence/Compressor';
 import ThemeStore from './theme/ThemeStore';
 
@@ -29,16 +35,26 @@ export default class RootStore {
 
   readonly themeStore: ThemeStore;
 
+  readonly exportSettingsStore: ExportSettingsScotre;
+
   disposed = false;
 
+  private titleReaction: IReactionDisposer | undefined;
+
   constructor() {
     this.pwaStore = new PWAStore();
     this.themeStore = new ThemeStore();
-    makeAutoObservable<RootStore, 'compressor' | 'editorStoreClass'>(this, {
+    this.exportSettingsStore = new ExportSettingsScotre();
+    makeAutoObservable<
+      RootStore,
+      'compressor' | 'editorStoreClass' | 'titleReaction'
+    >(this, {
       compressor: false,
       editorStoreClass: false,
       pwaStore: false,
       themeStore: false,
+      exportSettingsStore: false,
+      titleReaction: false,
     });
     (async () => {
       const { default: EditorStore } = await import('./editor/EditorStore');
@@ -61,11 +77,21 @@ export default class RootStore {
     this.initialValue = initialValue;
     if (this.editorStoreClass !== undefined) {
       const EditorStore = this.editorStoreClass;
-      this.editorStore = new EditorStore(
+      const editorStore = new EditorStore(
         this.initialValue,
         this.pwaStore,
         (text) => this.compressor.compress(text),
       );
+      this.editorStore = editorStore;
+      this.titleReaction?.();
+      this.titleReaction = autorun(() => {
+        const { simpleName, unsavedChanges } = editorStore;
+        if (simpleName === undefined) {
+          document.title = 'Refinery';
+        } else {
+          document.title = `${unsavedChanges ? '\u25cf ' : ''}${simpleName} - Refinery`;
+        }
+      });
     }
   }
 
@@ -73,6 +99,7 @@ export default class RootStore {
     if (this.disposed) {
       return;
     }
+    this.titleReaction?.();
     this.editorStore?.dispose();
     this.compressor.dispose();
     this.disposed = true;
diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx
index 867a24a0..738052c7 100644
--- a/subprojects/frontend/src/TopBar.tsx
+++ b/subprojects/frontend/src/TopBar.tsx
@@ -55,6 +55,27 @@ function useWindowControlsOverlayVisible(): boolean {
   return windowControlsOverlayVisible;
 }
 
+function RefineryIcon({ size }: { size: number }): JSX.Element {
+  const theme = useTheme();
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 512 515"
+    >
+      <path
+        d="M447.98 179.335c-139.95-9.583-301.272-50.91-384-147.336v46.117C98.45 129.623 209.442 178.137 294.243 199.1c-84.796 20.963-195.791 69.476-230.265 120.985v46.117c82.73-96.422 244.053-137.752 384.002-147.334z"
+        fill={theme.palette.text.primary}
+      />
+      <path
+        d="M447.98 296.729c-113.755 4.192-287.485 40.727-384 136.557v46.716c95.14-103.612 279.898-137.754 384-143.745z"
+        fill={theme.palette.primary.main}
+      />
+    </svg>
+  );
+}
+
 const DevModeBadge = styled('div')(({ theme }) => ({
   ...theme.typography.button,
   display: 'inline-block',
@@ -64,6 +85,16 @@ const DevModeBadge = styled('div')(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
 }));
 
+const FileName = styled('span', {
+  shouldForwardProp: (prop) => prop !== 'unsavedChanges',
+})<{ unsavedChanges: boolean }>(({ theme, unsavedChanges }) => ({
+  marginLeft: theme.spacing(1),
+  fontWeight: theme.typography.fontWeightLight,
+  fontSize: '1.25rem',
+  lineHeight: '1.6rem',
+  fontStyle: unsavedChanges ? 'italic' : 'normal',
+}));
+
 export default observer(function TopBar(): JSX.Element {
   const { editorStore, themeStore } = useRootStore();
   const overlayVisible = useWindowControlsOverlayVisible();
@@ -101,9 +132,15 @@ export default observer(function TopBar(): JSX.Element {
           py: 0.5,
         }}
       >
-        <Typography variant="h6" component="h1">
+        <RefineryIcon size={24} />
+        <Typography variant="h6" component="h1" pl={1}>
           Refinery {import.meta.env.DEV && <DevModeBadge>Dev</DevModeBadge>}
         </Typography>
+        {large && editorStore?.simpleName !== undefined && (
+          <FileName unsavedChanges={editorStore.unsavedChanges}>
+            {editorStore.simpleName}
+          </FileName>
+        )}
         <Stack direction="row" alignItems="center" flexGrow={1} marginLeft={1}>
           {medium && !large && (
             <PaneButtons themeStore={themeStore} hideLabel />
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx
index f4513909..4afba607 100644
--- a/subprojects/frontend/src/editor/EditorButtons.tsx
+++ b/subprojects/frontend/src/editor/EditorButtons.tsx
@@ -7,11 +7,14 @@
 import type { Diagnostic } from '@codemirror/lint';
 import CancelIcon from '@mui/icons-material/Cancel';
 import CheckIcon from '@mui/icons-material/Check';
+import FileOpenIcon from '@mui/icons-material/FileOpen';
 import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
 import FormatPaintIcon from '@mui/icons-material/FormatPaint';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import LooksIcon from '@mui/icons-material/Looks';
 import RedoIcon from '@mui/icons-material/Redo';
+import SaveIcon from '@mui/icons-material/Save';
+import SaveAsIcon from '@mui/icons-material/SaveAs';
 import SearchIcon from '@mui/icons-material/Search';
 import UndoIcon from '@mui/icons-material/Undo';
 import WarningIcon from '@mui/icons-material/Warning';
@@ -47,10 +50,37 @@ export default observer(function EditorButtons({
   return (
     <Stack direction="row" flexGrow={1}>
       <IconButton
+        disabled={editorStore === undefined}
+        onClick={() => editorStore?.openFile()}
+        aria-label="Open"
+        color="inherit"
+      >
+        <FileOpenIcon fontSize="small" />
+      </IconButton>
+      <IconButton
+        disabled={editorStore === undefined || !editorStore.unsavedChanges}
+        onClick={() => editorStore?.saveFile()}
+        aria-label="Save"
+        color="inherit"
+      >
+        <SaveIcon fontSize="small" />
+      </IconButton>
+      {'showSaveFilePicker' in window && (
+        <IconButton
+          disabled={editorStore === undefined}
+          onClick={() => editorStore?.saveFileAs()}
+          aria-label="Save as"
+          color="inherit"
+        >
+          <SaveAsIcon fontSize="small" />
+        </IconButton>
+      )}
+      <IconButton
         disabled={editorStore === undefined || !editorStore.canUndo}
         onClick={() => editorStore?.undo()}
         aria-label="Undo"
         color="inherit"
+        sx={{ ml: 1 }}
       >
         <UndoIcon fontSize="small" />
       </IconButton>
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts
index 5e7d05e1..33bca382 100644
--- a/subprojects/frontend/src/editor/EditorStore.ts
+++ b/subprojects/frontend/src/editor/EditorStore.ts
@@ -27,6 +27,13 @@ import { nanoid } from 'nanoid';
 
 import type PWAStore from '../PWAStore';
 import GraphStore from '../graph/GraphStore';
+import {
+  type OpenResult,
+  type OpenTextFileResult,
+  openTextFile,
+  saveTextFile,
+  saveBlob,
+} from '../utils/fileIO';
 import getLogger from '../utils/getLogger';
 import type XtextClient from '../xtext/XtextClient';
 import type { SemanticsSuccessResult } from '../xtext/xtextServiceResults';
@@ -35,7 +42,10 @@ import EditorErrors from './EditorErrors';
 import GeneratedModelStore from './GeneratedModelStore';
 import LintPanelStore from './LintPanelStore';
 import SearchPanelStore from './SearchPanelStore';
-import createEditorState from './createEditorState';
+import createEditorState, {
+  createHistoryExtension,
+  historyCompartment,
+} from './createEditorState';
 import { countDiagnostics } from './exposeDiagnostics';
 import { type IOccurrence, setOccurrences } from './findOccurrences';
 import {
@@ -45,6 +55,25 @@ import {
 
 const log = getLogger('editor.EditorStore');
 
+const REFINERY_CONTENT_TYPE = 'text/x-refinery';
+
+const FILE_PICKER_OPTIONS: FilePickerOptions = {
+  id: 'problem',
+  types: [
+    {
+      description: 'Refinery files',
+      accept: {
+        [REFINERY_CONTENT_TYPE]: [
+          '.problem',
+          '.PROBLEM',
+          '.refinery',
+          '.REFINERY',
+        ],
+      },
+    },
+  ],
+};
+
 export default class EditorStore {
   readonly id: string;
 
@@ -76,6 +105,12 @@ export default class EditorStore {
 
   selectedGeneratedModel: string | undefined;
 
+  fileName: string | undefined;
+
+  private fileHandle: FileSystemFileHandle | undefined;
+
+  unsavedChanges = false;
+
   constructor(
     initialValue: string,
     pwaStore: PWAStore,
@@ -201,6 +236,9 @@ export default class EditorStore {
     log.trace('Editor transaction', tr);
     this.state = tr.state;
     this.client?.onTransaction(tr);
+    if (tr.docChanged) {
+      this.unsavedChanges = true;
+    }
   }
 
   doCommand(command: Command): boolean {
@@ -403,4 +441,88 @@ export default class EditorStore {
     });
     return generating;
   }
+
+  openFile(): boolean {
+    openTextFile(FILE_PICKER_OPTIONS)
+      .then((result) => this.fileOpened(result))
+      .catch((error) => log.error('Failed to open file', error));
+    return true;
+  }
+
+  private clearUnsavedChanges(): void {
+    this.unsavedChanges = false;
+  }
+
+  private setFile({ name, handle }: OpenResult): void {
+    log.info('Opened file', name);
+    this.fileName = name;
+    this.fileHandle = handle;
+  }
+
+  private fileOpened(result: OpenTextFileResult): void {
+    this.dispatch({
+      changes: [
+        {
+          from: 0,
+          to: this.state.doc.length,
+          insert: result.text,
+        },
+      ],
+      effects: [historyCompartment.reconfigure([])],
+    });
+    // Clear history by removing and re-adding the history extension. See
+    // https://stackoverflow.com/a/77943295 and
+    // https://discuss.codemirror.net/t/codemirror-6-cm-clearhistory-equivalent/2851/10
+    this.dispatch({
+      effects: [historyCompartment.reconfigure([createHistoryExtension()])],
+    });
+    this.setFile(result);
+    this.clearUnsavedChanges();
+  }
+
+  saveFile(): boolean {
+    if (!this.unsavedChanges) {
+      return false;
+    }
+    if (this.fileHandle === undefined) {
+      return this.saveFileAs();
+    }
+    saveTextFile(this.fileHandle, this.state.sliceDoc())
+      .then(() => this.clearUnsavedChanges())
+      .catch((error) => log.error('Failed to save file', error));
+    return true;
+  }
+
+  saveFileAs(): boolean {
+    const blob = new Blob([this.state.sliceDoc()], {
+      type: REFINERY_CONTENT_TYPE,
+    });
+    saveBlob(blob, this.fileName ?? 'graph.problem', FILE_PICKER_OPTIONS)
+      .then((result) => this.fileSavedAs(result))
+      .catch((error) => log.error('Failed to save file', error));
+    return true;
+  }
+
+  private fileSavedAs(result: OpenResult | undefined) {
+    if (result !== undefined) {
+      this.setFile(result);
+    }
+    this.clearUnsavedChanges();
+  }
+
+  get simpleName(): string | undefined {
+    const { fileName } = this;
+    if (fileName === undefined) {
+      return undefined;
+    }
+    const index = fileName.lastIndexOf('.');
+    if (index < 0) {
+      return fileName;
+    }
+    return fileName.substring(0, index);
+  }
+
+  get simpleNameOrFallback(): string {
+    return this.simpleName ?? 'graph';
+  }
 }
diff --git a/subprojects/frontend/src/editor/GeneratedModelStore.ts b/subprojects/frontend/src/editor/GeneratedModelStore.ts
index f2695d9a..4af49e2c 100644
--- a/subprojects/frontend/src/editor/GeneratedModelStore.ts
+++ b/subprojects/frontend/src/editor/GeneratedModelStore.ts
@@ -21,7 +21,7 @@ export default class GeneratedModelStore {
   graph: GraphStore | undefined;
 
   constructor(
-    randomSeed: number,
+    private readonly randomSeed: number,
     private readonly editorStore: EditorStore,
   ) {
     const time = new Date().toLocaleTimeString(undefined, { hour12: false });
@@ -50,7 +50,8 @@ export default class GeneratedModelStore {
 
   setSemantics(semantics: SemanticsSuccessResult): void {
     if (this.running) {
-      this.graph = new GraphStore(this.editorStore);
+      const name = `${this.editorStore.simpleNameOrFallback}_solution_${this.randomSeed}`;
+      this.graph = new GraphStore(this.editorStore, name);
       this.graph.setSemantics(semantics);
     }
   }
diff --git a/subprojects/frontend/src/editor/createEditorState.ts b/subprojects/frontend/src/editor/createEditorState.ts
index 67b8fb9e..9b29228f 100644
--- a/subprojects/frontend/src/editor/createEditorState.ts
+++ b/subprojects/frontend/src/editor/createEditorState.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2021-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
@@ -26,7 +26,7 @@ import {
 } from '@codemirror/language';
 import { lintKeymap, lintGutter } from '@codemirror/lint';
 import { search, searchKeymap } from '@codemirror/search';
-import { EditorState } from '@codemirror/state';
+import { Compartment, EditorState, type Extension } from '@codemirror/state';
 import {
   drawSelection,
   highlightActiveLine,
@@ -46,6 +46,12 @@ import exposeDiagnostics from './exposeDiagnostics';
 import findOccurrences from './findOccurrences';
 import semanticHighlighting from './semanticHighlighting';
 
+export const historyCompartment = new Compartment();
+
+export function createHistoryExtension(): Extension {
+  return history();
+}
+
 export default function createEditorState(
   initialValue: string,
   store: EditorStore,
@@ -66,7 +72,7 @@ export default function createEditorState(
       highlightActiveLine(),
       highlightActiveLineGutter(),
       highlightSpecialChars(),
-      history(),
+      historyCompartment.of([createHistoryExtension()]),
       indentOnInput(),
       rectangularSelection(),
       search({
@@ -103,6 +109,9 @@ export default function createEditorState(
       }),
       keymap.of([
         { key: 'Mod-Shift-f', run: () => store.formatText() },
+        { key: 'Ctrl-o', run: () => store.openFile() },
+        { key: 'Ctrl-s', run: () => store.saveFile() },
+        { key: 'Ctrl-Shift-s', run: () => store.saveFileAs() },
         ...closeBracketsKeymap,
         ...completionKeymap,
         ...foldKeymap,
diff --git a/subprojects/frontend/src/graph/DotGraphVisualizer.tsx b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
index 72ac58fa..cc8b5116 100644
--- a/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
+++ b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
@@ -30,11 +30,13 @@ function DotGraphVisualizer({
   fitZoom,
   transitionTime,
   animateThreshold,
+  setSvgContainer,
 }: {
   graph: GraphStore;
   fitZoom?: FitZoomCallback;
   transitionTime?: number;
   animateThreshold?: number;
+  setSvgContainer?: (container: HTMLElement | undefined) => void;
 }): JSX.Element {
   const transitionTimeOrDefault =
     transitionTime ?? DotGraphVisualizer.defaultProps.transitionTime;
@@ -48,6 +50,7 @@ function DotGraphVisualizer({
 
   const setElement = useCallback(
     (element: HTMLDivElement | null) => {
+      setSvgContainer?.(element ?? undefined);
       if (disposerRef.current !== undefined) {
         disposerRef.current();
         disposerRef.current = undefined;
@@ -147,6 +150,7 @@ function DotGraphVisualizer({
       transitionTimeOrDefault,
       animateThresholdOrDefault,
       animate,
+      setSvgContainer,
     ],
   );
 
@@ -157,6 +161,7 @@ DotGraphVisualizer.defaultProps = {
   fitZoom: undefined,
   transitionTime: 250,
   animateThreshold: 100,
+  setSvgContainer: undefined,
 };
 
 export default observer(DotGraphVisualizer);
diff --git a/subprojects/frontend/src/graph/GraphArea.tsx b/subprojects/frontend/src/graph/GraphArea.tsx
index d5801b9a..b5d93aef 100644
--- a/subprojects/frontend/src/graph/GraphArea.tsx
+++ b/subprojects/frontend/src/graph/GraphArea.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2023-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
@@ -7,18 +7,21 @@
 import Box from '@mui/material/Box';
 import { useTheme } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
 import DotGraphVisualizer from './DotGraphVisualizer';
 import type GraphStore from './GraphStore';
 import VisibilityPanel from './VisibilityPanel';
 import ZoomCanvas from './ZoomCanvas';
+import ExportPanel from './export/ExportPanel';
 
 function GraphArea({ graph }: { graph: GraphStore }): JSX.Element {
   const { breakpoints } = useTheme();
   const { ref, width, height } = useResizeDetector({
     refreshMode: 'debounce',
   });
+  const [svgContainer, setSvgContainer] = useState<HTMLElement | undefined>();
 
   const breakpoint = breakpoints.values.sm;
   const dialog =
@@ -36,9 +39,16 @@ function GraphArea({ graph }: { graph: GraphStore }): JSX.Element {
       ref={ref}
     >
       <ZoomCanvas>
-        {(fitZoom) => <DotGraphVisualizer graph={graph} fitZoom={fitZoom} />}
+        {(fitZoom) => (
+          <DotGraphVisualizer
+            graph={graph}
+            fitZoom={fitZoom}
+            setSvgContainer={setSvgContainer}
+          />
+        )}
       </ZoomCanvas>
       <VisibilityPanel graph={graph} dialog={dialog} />
+      <ExportPanel graph={graph} svgContainer={svgContainer} dialog={dialog} />
     </Box>
   );
 }
diff --git a/subprojects/frontend/src/graph/GraphStore.ts b/subprojects/frontend/src/graph/GraphStore.ts
index 58c4422d..d9282326 100644
--- a/subprojects/frontend/src/graph/GraphStore.ts
+++ b/subprojects/frontend/src/graph/GraphStore.ts
@@ -66,7 +66,10 @@ export default class GraphStore {
 
   selectedSymbol: RelationMetadata | undefined;
 
-  constructor(private readonly editorStore: EditorStore) {
+  constructor(
+    private readonly editorStore: EditorStore,
+    private readonly nameOverride?: string,
+  ) {
     makeAutoObservable<GraphStore, 'editorStore'>(this, {
       editorStore: false,
       semantics: observable.ref,
@@ -190,4 +193,8 @@ export default class GraphStore {
   get colorNodes(): boolean {
     return this.editorStore.colorIdentifiers;
   }
+
+  get name(): string {
+    return this.nameOverride ?? this.editorStore.simpleNameOrFallback;
+  }
 }
diff --git a/subprojects/frontend/src/graph/GraphTheme.tsx b/subprojects/frontend/src/graph/GraphTheme.tsx
index 7334f559..34954345 100644
--- a/subprojects/frontend/src/graph/GraphTheme.tsx
+++ b/subprojects/frontend/src/graph/GraphTheme.tsx
@@ -27,10 +27,10 @@ function createEdgeColor(
       '& text': {
         fill: stroke,
       },
-      '& [stroke="black"]': {
+      '.edge-line': {
         stroke,
       },
-      '& [fill="black"]': {
+      '.edge-arrow': {
         fill: fill ?? stroke,
       },
     },
@@ -43,50 +43,72 @@ function createTypeHashStyles(theme: Theme, colorNodes: boolean): CSSObject {
   }
   const result: CSSObject = {};
   range(theme.palette.highlight.typeHash.length).forEach((i) => {
-    result[`.node-typeHash-${i}`] = {
-      '& [fill="green"]': {
-        fill: theme.palette.highlight.typeHash[i]?.box,
-      },
+    result[`.node-typeHash-${i} .node-header`] = {
+      fill: theme.palette.highlight.typeHash[i]?.box,
     };
   });
   return result;
 }
 
-export default styled('div', {
-  name: 'GraphTheme',
-})<{ colorNodes: boolean }>(({ theme, colorNodes }) => ({
-  '& svg': {
-    userSelect: 'none',
+function iconStyle(
+  svg: string,
+  color: string,
+  noEmbedIcons?: boolean,
+): CSSObject {
+  if (noEmbedIcons) {
+    return {
+      fill: color,
+    };
+  }
+  return {
+    maskImage: svgURL(svg),
+    background: color,
+  };
+}
+
+export function createGraphTheme({
+  theme,
+  colorNodes,
+  noEmbedIcons,
+}: {
+  theme: Theme;
+  colorNodes: boolean;
+  noEmbedIcons?: boolean;
+}): CSSObject {
+  const shadowAlapha = theme.palette.mode === 'dark' ? 0.32 : 0.24;
+
+  return {
     '.node': {
       '& text': {
         fontFamily: theme.typography.fontFamily,
         fill: theme.palette.text.primary,
       },
-      '& [stroke="black"]': {
+      '.node-outline': {
         stroke: theme.palette.text.primary,
       },
-      '& [fill="green"]': {
+      '.node-header': {
         fill:
           theme.palette.mode === 'dark'
             ? theme.palette.primary.dark
             : theme.palette.primary.light,
       },
-      '& [fill="white"]': {
+      '.node-bg': {
         fill: theme.palette.background.default,
       },
     },
-    '.node-INDIVIDUAL': {
-      '& [stroke="black"]': {
-        strokeWidth: 2,
-      },
-    },
-    '.node-shadow[fill="white"]': {
-      fill: alpha(
-        theme.palette.text.primary,
-        theme.palette.mode === 'dark' ? 0.32 : 0.24,
-      ),
+    '.node-INDIVIDUAL .node-outline': {
+      strokeWidth: 2,
     },
-    '.node-exists-UNKNOWN [stroke="black"]': {
+    '.node-shadow.node-bg': noEmbedIcons
+      ? {
+          // Inkscape can't handle opacity in exported SVG.
+          fill: theme.palette.text.primary,
+          opacity: shadowAlapha,
+        }
+      : {
+          fill: alpha(theme.palette.text.primary, shadowAlapha),
+        },
+    '.node-exists-UNKNOWN .node-outline': {
       strokeDasharray: '5 2',
     },
     ...createTypeHashStyles(theme, colorNodes),
@@ -95,39 +117,47 @@ export default styled('div', {
         fontFamily: theme.typography.fontFamily,
         fill: theme.palette.text.primary,
       },
-      '& [stroke="black"]': {
+      '.edge-line': {
         stroke: theme.palette.text.primary,
       },
-      '& [fill="black"]': {
+      '.edge-arrow': {
         fill: theme.palette.text.primary,
       },
     },
     ...createEdgeColor('UNKNOWN', theme.palette.text.secondary, 'none'),
     ...createEdgeColor('ERROR', theme.palette.error.main),
-    '.icon': {
-      maskSize: '12px 12px',
-      maskPosition: '50% 50%',
-      maskRepeat: 'no-repeat',
-      width: '100%',
-      height: '100%',
-    },
-    '.icon-TRUE': {
-      maskImage: svgURL(labelSVG),
-      background: theme.palette.text.primary,
-    },
-    '.icon-UNKNOWN': {
-      maskImage: svgURL(labelOutlinedSVG),
-      background: theme.palette.text.secondary,
-    },
-    '.icon-ERROR': {
-      maskImage: svgURL(cancelSVG),
-      background: theme.palette.error.main,
-    },
+    ...(noEmbedIcons
+      ? {}
+      : {
+          '.icon': {
+            maskSize: '12px 12px',
+            maskPosition: '50% 50%',
+            maskRepeat: 'no-repeat',
+            width: '100%',
+            height: '100%',
+          },
+        }),
+    '.icon-TRUE': iconStyle(labelSVG, theme.palette.text.primary, noEmbedIcons),
+    '.icon-UNKNOWN': iconStyle(
+      labelOutlinedSVG,
+      theme.palette.text.secondary,
+      noEmbedIcons,
+    ),
+    '.icon-ERROR': iconStyle(cancelSVG, theme.palette.error.main, noEmbedIcons),
     'text.label-UNKNOWN': {
       fill: theme.palette.text.secondary,
     },
     'text.label-ERROR': {
       fill: theme.palette.error.main,
     },
+  };
+}
+
+export default styled('div', {
+  name: 'GraphTheme',
+})<{ colorNodes: boolean }>((args) => ({
+  '& svg': {
+    userSelect: 'none',
+    ...createGraphTheme(args),
   },
 }));
diff --git a/subprojects/frontend/src/graph/SlideInDialog.tsx b/subprojects/frontend/src/graph/SlideInDialog.tsx
new file mode 100644
index 00000000..d9060fb0
--- /dev/null
+++ b/subprojects/frontend/src/graph/SlideInDialog.tsx
@@ -0,0 +1,109 @@
+/*
+ * SPDX-FileCopyrightText: 2023-2024 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import CloseIcon from '@mui/icons-material/Close';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import React, { useId } from 'react';
+
+const SlideInDialogRoot = styled('div', {
+  name: 'SlideInDialog-Root',
+  shouldForwardProp: (propName) => propName !== 'dialog',
+})<{ dialog: boolean }>(({ theme, dialog }) => {
+  return {
+    maxHeight: '100%',
+    maxWidth: '100%',
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+    '.SlideInDialog-title': {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: theme.spacing(1),
+      paddingLeft: theme.spacing(2),
+      borderBottom: `1px solid ${theme.palette.divider}`,
+      '& h2': {
+        flexGrow: 1,
+      },
+      '.MuiIconButton-root': {
+        flexGrow: 0,
+        flexShrink: 0,
+        marginLeft: theme.spacing(2),
+      },
+    },
+    '.MuiFormControlLabel-root': {
+      marginLeft: 0,
+      paddingTop: theme.spacing(1),
+      paddingLeft: theme.spacing(1),
+      '& + .MuiFormControlLabel-root': {
+        paddingTop: 0,
+      },
+    },
+    '.SlideInDialog-buttons': {
+      padding: theme.spacing(1),
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      ...(dialog
+        ? {
+            marginTop: theme.spacing(1),
+            borderTop: `1px solid ${theme.palette.divider}`,
+          }
+        : {}),
+    },
+  };
+});
+
+export default function SlideInDialog({
+  close,
+  dialog,
+  title,
+  buttons,
+  children,
+}: {
+  close: () => void;
+  dialog?: boolean;
+  title: string;
+  buttons: React.ReactNode | ((close: () => void) => React.ReactNode);
+  children?: React.ReactNode;
+}): JSX.Element {
+  const titleId = useId();
+
+  return (
+    <SlideInDialogRoot
+      dialog={dialog ?? SlideInDialog.defaultProps.dialog}
+      aria-labelledby={dialog ? titleId : undefined}
+    >
+      {dialog && (
+        <div className="SlideInDialog-title">
+          <Typography variant="h6" component="h2" id={titleId}>
+            {title}
+          </Typography>
+          <IconButton aria-label="Close" onClick={close}>
+            <CloseIcon />
+          </IconButton>
+        </div>
+      )}
+      {children}
+      <div className="SlideInDialog-buttons">
+        {typeof buttons === 'function' ? buttons(close) : buttons}
+        {!dialog && (
+          <Button color="inherit" onClick={close}>
+            Close
+          </Button>
+        )}
+      </div>
+    </SlideInDialogRoot>
+  );
+}
+
+SlideInDialog.defaultProps = {
+  dialog: false,
+  children: undefined,
+};
diff --git a/subprojects/frontend/src/graph/SlideInPanel.tsx b/subprojects/frontend/src/graph/SlideInPanel.tsx
new file mode 100644
index 00000000..2c189b5b
--- /dev/null
+++ b/subprojects/frontend/src/graph/SlideInPanel.tsx
@@ -0,0 +1,97 @@
+/*
+ * SPDX-FileCopyrightText: 2023-2024 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import Dialog from '@mui/material/Dialog';
+import IconButton from '@mui/material/IconButton';
+import Paper from '@mui/material/Paper';
+import Slide from '@mui/material/Slide';
+import { styled } from '@mui/material/styles';
+import React, { useCallback, useId, useState } from 'react';
+
+import SlideInDialog from './SlideInDialog';
+
+const SlideInPanelRoot = styled('div', {
+  name: 'SlideInPanel-Root',
+  shouldForwardProp: (propName) => propName !== 'anchor',
+})<{ anchor: 'left' | 'right' }>(({ theme, anchor }) => ({
+  position: 'absolute',
+  padding: theme.spacing(1),
+  top: 0,
+  [anchor]: 0,
+  maxHeight: '100%',
+  maxWidth: '100%',
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: anchor === 'left' ? 'start' : 'end',
+  '.SlideInPanel-drawer': {
+    overflow: 'hidden',
+    display: 'flex',
+    maxWidth: '100%',
+    margin: theme.spacing(1),
+  },
+}));
+
+export default function SlideInPanel({
+  anchor,
+  dialog,
+  title,
+  icon,
+  iconLabel,
+  buttons,
+  children,
+}: {
+  anchor: 'left' | 'right';
+  dialog: boolean;
+  title: string;
+  icon: (show: boolean) => React.ReactNode;
+  iconLabel: string;
+  buttons: React.ReactNode | ((close: () => void) => React.ReactNode);
+  children?: React.ReactNode;
+}): JSX.Element {
+  const id = useId();
+  const [show, setShow] = useState(false);
+  const close = useCallback(() => setShow(false), []);
+
+  return (
+    <SlideInPanelRoot anchor={anchor}>
+      <IconButton
+        role="switch"
+        aria-checked={show}
+        aria-controls={dialog ? undefined : id}
+        aria-label={iconLabel}
+        onClick={() => setShow(!show)}
+      >
+        {icon(show)}
+      </IconButton>
+      {dialog ? (
+        <Dialog open={show} onClose={close} maxWidth="xl">
+          <SlideInDialog close={close} dialog title={title} buttons={buttons}>
+            {children}
+          </SlideInDialog>
+        </Dialog>
+      ) : (
+        <Slide
+          direction={anchor === 'left' ? 'right' : 'left'}
+          in={show}
+          id={id}
+          mountOnEnter
+          unmountOnExit
+        >
+          <Paper className="SlideInPanel-drawer" elevation={4}>
+            <SlideInDialog close={close} title={title} buttons={buttons}>
+              {children}
+            </SlideInDialog>
+          </Paper>
+        </Slide>
+      )}
+    </SlideInPanelRoot>
+  );
+}
+
+SlideInPanel.defaultProps = {
+  children: undefined,
+};
diff --git a/subprojects/frontend/src/graph/VisibilityDialog.tsx b/subprojects/frontend/src/graph/VisibilityDialog.tsx
deleted file mode 100644
index bfdcd59f..00000000
--- a/subprojects/frontend/src/graph/VisibilityDialog.tsx
+++ /dev/null
@@ -1,318 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
- *
- * SPDX-License-Identifier: EPL-2.0
- */
-
-import CloseIcon from '@mui/icons-material/Close';
-import FilterListIcon from '@mui/icons-material/FilterList';
-import LabelIcon from '@mui/icons-material/Label';
-import LabelOutlinedIcon from '@mui/icons-material/LabelOutlined';
-import SentimentVeryDissatisfiedIcon from '@mui/icons-material/SentimentVeryDissatisfied';
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import Button from '@mui/material/Button';
-import Checkbox from '@mui/material/Checkbox';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import IconButton from '@mui/material/IconButton';
-import Switch from '@mui/material/Switch';
-import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
-import { observer } from 'mobx-react-lite';
-import { useId } from 'react';
-
-import type GraphStore from './GraphStore';
-import { isVisibilityAllowed } from './GraphStore';
-import RelationName from './RelationName';
-
-const VisibilityDialogRoot = styled('div', {
-  name: 'VisibilityDialog-Root',
-  shouldForwardProp: (propName) => propName !== 'dialog',
-})<{ dialog: boolean }>(({ theme, dialog }) => {
-  const overlayOpacity = dialog ? 0.16 : 0.09;
-  return {
-    maxHeight: '100%',
-    maxWidth: '100%',
-    overflow: 'hidden',
-    display: 'flex',
-    flexDirection: 'column',
-    '.VisibilityDialog-title': {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      padding: theme.spacing(1),
-      paddingLeft: theme.spacing(2),
-      borderBottom: `1px solid ${theme.palette.divider}`,
-      '& h2': {
-        flexGrow: 1,
-      },
-      '.MuiIconButton-root': {
-        flexGrow: 0,
-        flexShrink: 0,
-        marginLeft: theme.spacing(2),
-      },
-    },
-    '.MuiFormControlLabel-root': {
-      marginLeft: 0,
-      paddingTop: theme.spacing(1),
-      paddingLeft: theme.spacing(1),
-      '& + .MuiFormControlLabel-root': {
-        paddingTop: 0,
-      },
-    },
-    '.VisibilityDialog-scroll': {
-      display: 'flex',
-      flexDirection: 'column',
-      height: 'auto',
-      overflowX: 'hidden',
-      overflowY: 'auto',
-      margin: `0 ${theme.spacing(2)}`,
-      '& table': {
-        // We use flexbox instead of `display: table` to get proper text-overflow
-        // behavior for overly long relation names.
-        display: 'flex',
-        flexDirection: 'column',
-      },
-      '& thead, & tbody': {
-        display: 'flex',
-        flexDirection: 'column',
-      },
-      '& thead': {
-        position: 'sticky',
-        top: 0,
-        zIndex: 999,
-        backgroundColor: theme.palette.background.paper,
-        ...(theme.palette.mode === 'dark'
-          ? {
-              // In dark mode, MUI Paper gets a lighter overlay.
-              backgroundImage: `linear-gradient(
-                rgba(255, 255, 255, ${overlayOpacity}),
-                rgba(255, 255, 255, ${overlayOpacity})
-              )`,
-            }
-          : {}),
-        '& tr': {
-          height: '44px',
-        },
-      },
-      '& tr': {
-        display: 'flex',
-        flexDirection: 'row',
-        maxWidth: '100%',
-      },
-      '& tbody tr': {
-        transition: theme.transitions.create('background', {
-          duration: theme.transitions.duration.shortest,
-        }),
-        '&:hover': {
-          background: theme.palette.action.hover,
-          '@media (hover: none)': {
-            background: 'transparent',
-          },
-        },
-      },
-      '& th, & td': {
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        // Set width in advance, since we can't rely on `display: table-cell`.
-        width: '44px',
-      },
-      '& th:nth-of-type(3), & td:nth-of-type(3)': {
-        justifyContent: 'start',
-        paddingLeft: theme.spacing(1),
-        paddingRight: theme.spacing(2),
-        // Only let the last column grow or shrink.
-        flexGrow: 1,
-        flexShrink: 1,
-        // Compute the maximum available space in advance to let the text overflow.
-        maxWidth: 'calc(100% - 88px)',
-        width: 'min-content',
-      },
-      '& td:nth-of-type(3)': {
-        cursor: 'pointer',
-        userSelect: 'none',
-        WebkitTapHighlightColor: 'transparent',
-      },
-
-      '& thead th, .VisibilityDialog-custom tr:last-child td': {
-        borderBottom: `1px solid ${theme.palette.divider}`,
-      },
-    },
-    // Hack to apply `text-overflow`.
-    '.VisibilityDialog-nowrap': {
-      maxWidth: '100%',
-      overflow: 'hidden',
-      wordWrap: 'nowrap',
-      textOverflow: 'ellipsis',
-    },
-    '.VisibilityDialog-buttons': {
-      padding: theme.spacing(1),
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'flex-end',
-      ...(dialog
-        ? {
-            marginTop: theme.spacing(1),
-            borderTop: `1px solid ${theme.palette.divider}`,
-          }
-        : {}),
-    },
-    '.VisibilityDialog-empty': {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      color: theme.palette.text.secondary,
-    },
-    '.VisibilityDialog-emptyIcon': {
-      fontSize: '6rem',
-      marginBottom: theme.spacing(1),
-    },
-  };
-});
-
-function VisibilityDialog({
-  graph,
-  close,
-  dialog,
-}: {
-  graph: GraphStore;
-  close: () => void;
-  dialog?: boolean;
-}): JSX.Element {
-  const titleId = useId();
-
-  const builtinRows: JSX.Element[] = [];
-  const rows: JSX.Element[] = [];
-  graph.relationMetadata.forEach((metadata, name) => {
-    if (!isVisibilityAllowed(metadata, 'must')) {
-      return;
-    }
-    const visibility = graph.getVisibility(name);
-    const row = (
-      <tr key={metadata.name}>
-        <td>
-          <Checkbox
-            checked={visibility !== 'none'}
-            aria-label={`Show true and error values of ${metadata.simpleName}`}
-            onClick={() =>
-              graph.setVisibility(name, visibility === 'none' ? 'must' : 'none')
-            }
-          />
-        </td>
-        <td>
-          <Checkbox
-            checked={visibility === 'all'}
-            disabled={!isVisibilityAllowed(metadata, 'all')}
-            aria-label={`Show all values of ${metadata.simpleName}`}
-            onClick={() =>
-              graph.setVisibility(name, visibility === 'all' ? 'must' : 'all')
-            }
-          />
-        </td>
-        <td
-          onClick={() => graph.cycleVisibility(name)}
-          aria-label="Toggle visiblity"
-        >
-          <div className="VisibilityDialog-nowrap">
-            <RelationName metadata={metadata} abbreviate={graph.abbreviate} />
-          </div>
-        </td>
-      </tr>
-    );
-    if (name.startsWith('builtin::')) {
-      builtinRows.push(row);
-    } else {
-      rows.push(row);
-    }
-  });
-
-  const hasRows = rows.length > 0 || builtinRows.length > 0;
-
-  return (
-    <VisibilityDialogRoot
-      dialog={dialog ?? VisibilityDialog.defaultProps.dialog}
-      aria-labelledby={dialog ? titleId : undefined}
-    >
-      {dialog && (
-        <div className="VisibilityDialog-title">
-          <Typography variant="h6" component="h2" id={titleId}>
-            Customize view
-          </Typography>
-          <IconButton aria-label="Close" onClick={close}>
-            <CloseIcon />
-          </IconButton>
-        </div>
-      )}
-      <FormControlLabel
-        control={
-          <Switch
-            checked={!graph.abbreviate}
-            onClick={() => graph.toggleAbbrevaite()}
-          />
-        }
-        label="Fully qualified names"
-      />
-      <FormControlLabel
-        control={
-          <Switch checked={graph.scopes} onClick={() => graph.toggleScopes()} />
-        }
-        label="Object scopes"
-      />
-      <div className="VisibilityDialog-scroll">
-        {hasRows ? (
-          <table cellSpacing={0}>
-            <thead>
-              <tr>
-                <th aria-label="Show true and error values">
-                  <LabelIcon />
-                </th>
-                <th aria-label="Show unknown values">
-                  <LabelOutlinedIcon />
-                </th>
-                <th>Symbol</th>
-              </tr>
-            </thead>
-            <tbody className="VisibilityDialog-custom">{...rows}</tbody>
-            <tbody className="VisibilityDialog-builtin">{...builtinRows}</tbody>
-          </table>
-        ) : (
-          <div className="VisibilityDialog-empty">
-            <SentimentVeryDissatisfiedIcon
-              className="VisibilityDialog-emptyIcon"
-              fontSize="inherit"
-            />
-            <div>Partial model is empty</div>
-          </div>
-        )}
-      </div>
-      <div className="VisibilityDialog-buttons">
-        <Button
-          color="inherit"
-          onClick={() => graph.hideAll()}
-          startIcon={<VisibilityOffIcon />}
-        >
-          Hide all
-        </Button>
-        <Button
-          color="inherit"
-          onClick={() => graph.resetFilter()}
-          startIcon={<FilterListIcon />}
-        >
-          Reset filter
-        </Button>
-        {!dialog && (
-          <Button color="inherit" onClick={close}>
-            Close
-          </Button>
-        )}
-      </div>
-    </VisibilityDialogRoot>
-  );
-}
-
-VisibilityDialog.defaultProps = {
-  dialog: false,
-};
-
-export default observer(VisibilityDialog);
diff --git a/subprojects/frontend/src/graph/VisibilityPanel.tsx b/subprojects/frontend/src/graph/VisibilityPanel.tsx
index 20c4ffca..210ff5d5 100644
--- a/subprojects/frontend/src/graph/VisibilityPanel.tsx
+++ b/subprojects/frontend/src/graph/VisibilityPanel.tsx
@@ -1,43 +1,133 @@
 /*
- * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2023-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
 
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import LabelIcon from '@mui/icons-material/Label';
+import LabelOutlinedIcon from '@mui/icons-material/LabelOutlined';
+import SentimentVeryDissatisfiedIcon from '@mui/icons-material/SentimentVeryDissatisfied';
 import TuneIcon from '@mui/icons-material/Tune';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import Badge from '@mui/material/Badge';
-import Dialog from '@mui/material/Dialog';
-import IconButton from '@mui/material/IconButton';
-import Paper from '@mui/material/Paper';
-import Slide from '@mui/material/Slide';
+import Button from '@mui/material/Button';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
 import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
-import { useCallback, useId, useState } from 'react';
+import { useCallback } from 'react';
 
 import type GraphStore from './GraphStore';
-import VisibilityDialog from './VisibilityDialog';
+import { isVisibilityAllowed } from './GraphStore';
+import RelationName from './RelationName';
+import SlideInPanel from './SlideInPanel';
 
-const VisibilityPanelRoot = styled('div', {
-  name: 'VisibilityPanel-Root',
-})(({ theme }) => ({
-  position: 'absolute',
-  padding: theme.spacing(1),
-  top: 0,
-  left: 0,
-  maxHeight: '100%',
-  maxWidth: '100%',
-  overflow: 'hidden',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'start',
-  '.VisibilityPanel-drawer': {
-    overflow: 'hidden',
+const VisibilityDialogScroll = styled('div', {
+  name: 'VisibilityDialog-Scroll',
+  shouldForwardProp: (propName) => propName !== 'dialog',
+})<{ dialog: boolean }>(({ theme, dialog }) => {
+  const overlayOpacity = dialog ? 0.16 : 0.09;
+  return {
     display: 'flex',
-    maxWidth: '100%',
-    margin: theme.spacing(1),
-  },
-}));
+    flexDirection: 'column',
+    height: 'auto',
+    overflowX: 'hidden',
+    overflowY: 'auto',
+    margin: `0 ${theme.spacing(2)}`,
+    '& table': {
+      // We use flexbox instead of `display: table` to get proper text-overflow
+      // behavior for overly long relation names.
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    '& thead, & tbody': {
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    '& thead': {
+      position: 'sticky',
+      top: 0,
+      zIndex: 999,
+      backgroundColor: theme.palette.background.paper,
+      ...(theme.palette.mode === 'dark'
+        ? {
+            // In dark mode, MUI Paper gets a lighter overlay.
+            backgroundImage: `linear-gradient(
+                rgba(255, 255, 255, ${overlayOpacity}),
+                rgba(255, 255, 255, ${overlayOpacity})
+              )`,
+          }
+        : {}),
+      '& tr': {
+        height: '44px',
+      },
+    },
+    '& tr': {
+      display: 'flex',
+      flexDirection: 'row',
+      maxWidth: '100%',
+    },
+    '& tbody tr': {
+      transition: theme.transitions.create('background', {
+        duration: theme.transitions.duration.shortest,
+      }),
+      '&:hover': {
+        background: theme.palette.action.hover,
+        '@media (hover: none)': {
+          background: 'transparent',
+        },
+      },
+    },
+    '& th, & td': {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      // Set width in advance, since we can't rely on `display: table-cell`.
+      width: '44px',
+    },
+    '& th:nth-of-type(3), & td:nth-of-type(3)': {
+      justifyContent: 'start',
+      paddingLeft: theme.spacing(1),
+      paddingRight: theme.spacing(2),
+      // Only let the last column grow or shrink.
+      flexGrow: 1,
+      flexShrink: 1,
+      // Compute the maximum available space in advance to let the text overflow.
+      maxWidth: 'calc(100% - 88px)',
+      width: 'min-content',
+    },
+    '& td:nth-of-type(3)': {
+      cursor: 'pointer',
+      userSelect: 'none',
+      WebkitTapHighlightColor: 'transparent',
+    },
+
+    '& thead th, .VisibilityDialog-custom tr:last-child td': {
+      borderBottom: `1px solid ${theme.palette.divider}`,
+    },
+    // Hack to apply `text-overflow`.
+    '.VisibilityDialog-nowrap': {
+      maxWidth: '100%',
+      overflow: 'hidden',
+      wordWrap: 'nowrap',
+      textOverflow: 'ellipsis',
+    },
+    '.VisibilityDialog-empty': {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      color: theme.palette.text.secondary,
+    },
+    '.VisibilityDialog-emptyIcon': {
+      fontSize: '6rem',
+      marginBottom: theme.spacing(1),
+    },
+  };
+});
 
 function VisibilityPanel({
   graph,
@@ -46,45 +136,132 @@ function VisibilityPanel({
   graph: GraphStore;
   dialog: boolean;
 }): JSX.Element {
-  const id = useId();
-  const [showFilter, setShowFilter] = useState(false);
-  const close = useCallback(() => setShowFilter(false), []);
+  const builtinRows: JSX.Element[] = [];
+  const rows: JSX.Element[] = [];
+  graph.relationMetadata.forEach((metadata, name) => {
+    if (!isVisibilityAllowed(metadata, 'must')) {
+      return;
+    }
+    const visibility = graph.getVisibility(name);
+    const row = (
+      <tr key={metadata.name}>
+        <td>
+          <Checkbox
+            checked={visibility !== 'none'}
+            aria-label={`Show true and error values of ${metadata.simpleName}`}
+            onClick={() =>
+              graph.setVisibility(name, visibility === 'none' ? 'must' : 'none')
+            }
+          />
+        </td>
+        <td>
+          <Checkbox
+            checked={visibility === 'all'}
+            disabled={!isVisibilityAllowed(metadata, 'all')}
+            aria-label={`Show all values of ${metadata.simpleName}`}
+            onClick={() =>
+              graph.setVisibility(name, visibility === 'all' ? 'must' : 'all')
+            }
+          />
+        </td>
+        <td
+          onClick={() => graph.cycleVisibility(name)}
+          aria-label="Toggle visiblity"
+        >
+          <div className="VisibilityDialog-nowrap">
+            <RelationName metadata={metadata} abbreviate={graph.abbreviate} />
+          </div>
+        </td>
+      </tr>
+    );
+    if (name.startsWith('builtin::')) {
+      builtinRows.push(row);
+    } else {
+      rows.push(row);
+    }
+  });
+
+  const hasRows = rows.length > 0 || builtinRows.length > 0;
+
+  const hideBadge = graph.visibility.size === 0;
+  const icon = useCallback(
+    (show: boolean) => (
+      <Badge color="primary" variant="dot" invisible={hideBadge}>
+        {show && !dialog ? <ChevronLeftIcon /> : <TuneIcon />}
+      </Badge>
+    ),
+    [dialog, hideBadge],
+  );
 
   return (
-    <VisibilityPanelRoot>
-      <IconButton
-        role="switch"
-        aria-checked={showFilter}
-        aria-controls={dialog ? undefined : id}
-        aria-label="Show filter panel"
-        onClick={() => setShowFilter(!showFilter)}
-      >
-        <Badge
-          color="primary"
-          variant="dot"
-          invisible={graph.visibility.size === 0}
-        >
-          {showFilter && !dialog ? <ChevronLeftIcon /> : <TuneIcon />}
-        </Badge>
-      </IconButton>
-      {dialog ? (
-        <Dialog open={showFilter} onClose={close} maxWidth="xl">
-          <VisibilityDialog graph={graph} close={close} dialog />
-        </Dialog>
-      ) : (
-        <Slide
-          direction="right"
-          in={showFilter}
-          id={id}
-          mountOnEnter
-          unmountOnExit
-        >
-          <Paper className="VisibilityPanel-drawer" elevation={4}>
-            <VisibilityDialog graph={graph} close={close} />
-          </Paper>
-        </Slide>
-      )}
-    </VisibilityPanelRoot>
+    <SlideInPanel
+      anchor="left"
+      dialog={dialog}
+      title="Customize view"
+      icon={icon}
+      iconLabel="Show filter panel"
+      buttons={
+        <>
+          <Button
+            color="inherit"
+            onClick={() => graph.hideAll()}
+            startIcon={<VisibilityOffIcon />}
+          >
+            Hide all
+          </Button>
+          <Button
+            color="inherit"
+            onClick={() => graph.resetFilter()}
+            startIcon={<FilterListIcon />}
+          >
+            Reset filter
+          </Button>
+        </>
+      }
+    >
+      <FormControlLabel
+        control={
+          <Switch
+            checked={!graph.abbreviate}
+            onClick={() => graph.toggleAbbrevaite()}
+          />
+        }
+        label="Fully qualified names"
+      />
+      <FormControlLabel
+        control={
+          <Switch checked={graph.scopes} onClick={() => graph.toggleScopes()} />
+        }
+        label="Object scopes"
+      />
+      <VisibilityDialogScroll dialog={dialog}>
+        {hasRows ? (
+          <table cellSpacing={0}>
+            <thead>
+              <tr>
+                <th aria-label="Show true and error values">
+                  <LabelIcon />
+                </th>
+                <th aria-label="Show unknown values">
+                  <LabelOutlinedIcon />
+                </th>
+                <th>Symbol</th>
+              </tr>
+            </thead>
+            <tbody className="VisibilityDialog-custom">{...rows}</tbody>
+            <tbody className="VisibilityDialog-builtin">{...builtinRows}</tbody>
+          </table>
+        ) : (
+          <div className="VisibilityDialog-empty">
+            <SentimentVeryDissatisfiedIcon
+              className="VisibilityDialog-emptyIcon"
+              fontSize="inherit"
+            />
+            <div>Partial model is empty</div>
+          </div>
+        )}
+      </VisibilityDialogScroll>
+    </SlideInPanel>
   );
 }
 
diff --git a/subprojects/frontend/src/graph/export/ExportPanel.tsx b/subprojects/frontend/src/graph/export/ExportPanel.tsx
new file mode 100644
index 00000000..c93fa837
--- /dev/null
+++ b/subprojects/frontend/src/graph/export/ExportPanel.tsx
@@ -0,0 +1,227 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import ImageIcon from '@mui/icons-material/Image';
+import InsertDriveFileOutlinedIcon from '@mui/icons-material/InsertDriveFileOutlined';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import SaveAltIcon from '@mui/icons-material/SaveAlt';
+import ShapeLineIcon from '@mui/icons-material/ShapeLine';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Slider from '@mui/material/Slider';
+import Stack from '@mui/material/Stack';
+import Switch from '@mui/material/Switch';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import { observer } from 'mobx-react-lite';
+import { useCallback } from 'react';
+
+import { useRootStore } from '../../RootStoreProvider';
+import getLogger from '../../utils/getLogger';
+import type GraphStore from '../GraphStore';
+import SlideInPanel from '../SlideInPanel';
+
+import exportDiagram from './exportDiagram';
+
+const log = getLogger('graph.ExportPanel');
+
+const SwitchButtonGroup = styled(ToggleButtonGroup, {
+  name: 'ExportPanel-SwitchButtonGroup',
+})(({ theme }) => ({
+  marginTop: theme.spacing(2),
+  marginInline: theme.spacing(2),
+  minWidth: '260px',
+  '.MuiToggleButton-root': {
+    width: '100%',
+    fontSize: '1rem',
+    lineHeight: '1.5',
+  },
+  '& svg': {
+    margin: '0 6px 0 0',
+  },
+}));
+
+function getLabel(value: number): string {
+  return `${value}%`;
+}
+
+const marks = [100, 200, 300, 400].map((value) => ({
+  value,
+  label: (
+    <Stack direction="column" alignItems="center">
+      <ImageIcon sx={{ width: `${11 + (value / 100) * 3}px` }} />
+      <Typography variant="caption">{getLabel(value)}</Typography>
+    </Stack>
+  ),
+}));
+
+function ExportPanel({
+  graph,
+  svgContainer,
+  dialog,
+}: {
+  graph: GraphStore;
+  svgContainer: HTMLElement | undefined;
+  dialog: boolean;
+}): JSX.Element {
+  const { exportSettingsStore } = useRootStore();
+
+  const icon = useCallback(
+    (show: boolean) =>
+      show && !dialog ? <ChevronRightIcon /> : <SaveAltIcon />,
+    [dialog],
+  );
+
+  const { format } = exportSettingsStore;
+  const emptyGraph = graph.semantics.nodes.length === 0;
+  const buttons = useCallback(
+    (close: () => void) => (
+      <>
+        <Button
+          color="inherit"
+          startIcon={<SaveAltIcon />}
+          disabled={emptyGraph}
+          onClick={() => {
+            exportDiagram(svgContainer, graph, exportSettingsStore, 'download')
+              .then(close)
+              .catch((error) => {
+                log.error('Failed to download diagram', error);
+              });
+          }}
+        >
+          Download
+        </Button>
+        {'write' in navigator.clipboard && format === 'png' && (
+          <Button
+            color="inherit"
+            startIcon={<ContentCopyIcon />}
+            disabled={emptyGraph}
+            onClick={() => {
+              exportDiagram(svgContainer, graph, exportSettingsStore, 'copy')
+                .then(close)
+                .catch((error) => {
+                  log.error('Failed to copy diagram', error);
+                });
+            }}
+          >
+            Copy
+          </Button>
+        )}
+      </>
+    ),
+    [svgContainer, graph, exportSettingsStore, format, emptyGraph],
+  );
+
+  return (
+    <SlideInPanel
+      anchor="right"
+      dialog={dialog}
+      title="Export diagram"
+      icon={icon}
+      iconLabel="Show export panel"
+      buttons={buttons}
+    >
+      <SwitchButtonGroup size="small" className="rounded">
+        <ToggleButton
+          value="svg"
+          selected={exportSettingsStore.format === 'svg'}
+          onClick={() => exportSettingsStore.setFormat('svg')}
+        >
+          <ShapeLineIcon fontSize="small" /> SVG
+        </ToggleButton>
+        <ToggleButton
+          value="pdf"
+          selected={exportSettingsStore.format === 'pdf'}
+          onClick={() => exportSettingsStore.setFormat('pdf')}
+        >
+          <InsertDriveFileOutlinedIcon fontSize="small" /> PDF
+        </ToggleButton>
+        <ToggleButton
+          value="png"
+          selected={exportSettingsStore.format === 'png'}
+          onClick={() => exportSettingsStore.setFormat('png')}
+        >
+          <ImageIcon fontSize="small" /> PNG
+        </ToggleButton>
+      </SwitchButtonGroup>
+      <SwitchButtonGroup size="small" className="rounded">
+        <ToggleButton
+          value="svg"
+          selected={exportSettingsStore.theme === 'light'}
+          onClick={() => exportSettingsStore.setTheme('light')}
+        >
+          <LightModeIcon fontSize="small" /> Light
+        </ToggleButton>
+        <ToggleButton
+          value="png"
+          selected={exportSettingsStore.theme === 'dark'}
+          onClick={() => exportSettingsStore.setTheme('dark')}
+        >
+          <DarkModeIcon fontSize="small" /> Dark
+        </ToggleButton>
+      </SwitchButtonGroup>
+      <FormControlLabel
+        control={
+          <Switch
+            checked={exportSettingsStore.transparent}
+            onClick={() => exportSettingsStore.toggleTransparent()}
+          />
+        }
+        label="Transparent background"
+      />
+      {exportSettingsStore.canEmbedFonts && (
+        <FormControlLabel
+          control={
+            <Switch
+              checked={exportSettingsStore.embedFonts}
+              onClick={() => exportSettingsStore.toggleEmbedFonts()}
+            />
+          }
+          label={
+            <Stack direction="column">
+              <Typography>Embed fonts</Typography>
+              <Typography variant="caption">
+                {exportSettingsStore.format === 'pdf' ? (
+                  <>+20&thinsp;kB fully embedded</>
+                ) : (
+                  <>+75&thinsp;kB, only supported in browsers</>
+                )}
+              </Typography>
+            </Stack>
+          }
+        />
+      )}
+      {exportSettingsStore.canScale && (
+        <Box mx={4} mt={1} mb={2}>
+          <Slider
+            aria-label="Image scale"
+            value={exportSettingsStore.scale}
+            min={100}
+            max={400}
+            valueLabelFormat={getLabel}
+            getAriaValueText={getLabel}
+            step={50}
+            valueLabelDisplay="auto"
+            marks={marks}
+            onChange={(_, value) => {
+              if (typeof value === 'number') {
+                exportSettingsStore.setScale(value);
+              }
+            }}
+          />
+        </Box>
+      )}
+    </SlideInPanel>
+  );
+}
+
+export default observer(ExportPanel);
diff --git a/subprojects/frontend/src/graph/export/ExportSettingsStore.ts b/subprojects/frontend/src/graph/export/ExportSettingsStore.ts
new file mode 100644
index 00000000..53a161ab
--- /dev/null
+++ b/subprojects/frontend/src/graph/export/ExportSettingsStore.ts
@@ -0,0 +1,67 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import { makeAutoObservable } from 'mobx';
+
+export type ExportFormat = 'svg' | 'pdf' | 'png';
+export type ExportTheme = 'light' | 'dark';
+
+export default class ExportSettingsStore {
+  format: ExportFormat = 'svg';
+
+  theme: ExportTheme = 'light';
+
+  transparent = true;
+
+  embedSVGFonts = false;
+
+  embedPDFFonts = true;
+
+  scale = 100;
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  setFormat(format: ExportFormat): void {
+    this.format = format;
+  }
+
+  setTheme(theme: ExportTheme): void {
+    this.theme = theme;
+  }
+
+  toggleTransparent(): void {
+    this.transparent = !this.transparent;
+  }
+
+  toggleEmbedFonts(): void {
+    this.embedFonts = !this.embedFonts;
+  }
+
+  setScale(scale: number): void {
+    this.scale = scale;
+  }
+
+  get embedFonts(): boolean {
+    return this.format === 'pdf' ? this.embedPDFFonts : this.embedSVGFonts;
+  }
+
+  private set embedFonts(embedFonts: boolean) {
+    if (this.format === 'pdf') {
+      this.embedPDFFonts = embedFonts;
+    }
+    this.embedSVGFonts = embedFonts;
+  }
+
+  get canEmbedFonts(): boolean {
+    return this.format === 'svg' || this.format === 'pdf';
+  }
+
+  get canScale(): boolean {
+    return this.format === 'png';
+  }
+}
diff --git a/subprojects/frontend/src/graph/export/exportDiagram.tsx b/subprojects/frontend/src/graph/export/exportDiagram.tsx
new file mode 100644
index 00000000..44489d28
--- /dev/null
+++ b/subprojects/frontend/src/graph/export/exportDiagram.tsx
@@ -0,0 +1,389 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import createCache from '@emotion/cache';
+import { serializeStyles } from '@emotion/serialize';
+import type { StyleSheet } from '@emotion/utils';
+import italicFontURL from '@fontsource/open-sans/files/open-sans-latin-400-italic.woff2?url';
+import normalFontURL from '@fontsource/open-sans/files/open-sans-latin-400-normal.woff2?url';
+import boldFontURL from '@fontsource/open-sans/files/open-sans-latin-700-normal.woff2?url';
+import variableItalicFontURL from '@fontsource-variable/open-sans/files/open-sans-latin-wght-italic.woff2?url';
+import variableFontURL from '@fontsource-variable/open-sans/files/open-sans-latin-wght-normal.woff2?url';
+import cancelSVG from '@material-icons/svg/svg/cancel/baseline.svg?raw';
+import labelSVG from '@material-icons/svg/svg/label/baseline.svg?raw';
+import labelOutlinedSVG from '@material-icons/svg/svg/label/outline.svg?raw';
+import type { Theme } from '@mui/material/styles';
+
+import { darkTheme, lightTheme } from '../../theme/ThemeProvider';
+import { copyBlob, saveBlob } from '../../utils/fileIO';
+import type GraphStore from '../GraphStore';
+import { createGraphTheme } from '../GraphTheme';
+import { SVG_NS } from '../postProcessSVG';
+
+import type ExportSettingsStore from './ExportSettingsStore';
+
+const PROLOG = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>';
+const PNG_CONTENT_TYPE = 'image/png';
+const SVG_CONTENT_TYPE = 'image/svg+xml';
+const EXPORT_ID = 'export-image';
+
+const ICONS: Map<string, Element> = new Map();
+
+function importSVG(svgSource: string, className: string): void {
+  const parser = new DOMParser();
+  const svgDocument = parser.parseFromString(svgSource, SVG_CONTENT_TYPE);
+  const root = svgDocument.children[0];
+  if (root === undefined) {
+    return;
+  }
+  root.id = className;
+  root.classList.add(className);
+  ICONS.set(className, root);
+}
+
+importSVG(labelSVG, 'icon-TRUE');
+importSVG(labelOutlinedSVG, 'icon-UNKNOWN');
+importSVG(cancelSVG, 'icon-ERROR');
+
+function addBackground(
+  svgDocument: XMLDocument,
+  svg: SVGSVGElement,
+  theme: Theme,
+): void {
+  const viewBox = svg.getAttribute('viewBox')?.split(' ');
+  const rect = svgDocument.createElementNS(SVG_NS, 'rect');
+  rect.setAttribute('x', viewBox?.[0] ?? '0');
+  rect.setAttribute('y', viewBox?.[1] ?? '0');
+  rect.setAttribute('width', viewBox?.[2] ?? '0');
+  rect.setAttribute('height', viewBox?.[3] ?? '0');
+  rect.setAttribute('fill', theme.palette.background.default);
+  svg.prepend(rect);
+}
+
+async function fetchAsFontURL(url: string): Promise<string> {
+  const fetchResult = await fetch(url);
+  const buffer = await fetchResult.arrayBuffer();
+  const blob = new Blob([buffer], { type: 'font/woff2' });
+  return new Promise((resolve, reject) => {
+    const fileReader = new FileReader();
+    fileReader.addEventListener('load', () => {
+      resolve(fileReader.result as string);
+    });
+    fileReader.addEventListener('error', () => {
+      reject(fileReader.error);
+    });
+    fileReader.readAsDataURL(blob);
+  });
+}
+
+let fontCSS: string | undefined;
+let variableFontCSS: string | undefined;
+
+async function fetchFontCSS(): Promise<string> {
+  if (fontCSS !== undefined) {
+    return fontCSS;
+  }
+  const [normalDataURL, boldDataURL, italicDataURL] = await Promise.all([
+    fetchAsFontURL(normalFontURL),
+    fetchAsFontURL(boldFontURL),
+    fetchAsFontURL(italicFontURL),
+  ]);
+  fontCSS = `
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(${normalDataURL}) format('woff2');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(${boldDataURL}) format('woff2');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 400;
+  src: url(${italicDataURL}) format('woff2');
+}`;
+  return fontCSS;
+}
+
+async function fetchVariableFontCSS(): Promise<string> {
+  if (variableFontCSS !== undefined) {
+    return variableFontCSS;
+  }
+  const [variableDataURL, variableItalicDataURL] = await Promise.all([
+    fetchAsFontURL(variableFontURL),
+    fetchAsFontURL(variableItalicFontURL),
+  ]);
+  variableFontCSS = `
+@font-face {
+  font-family: 'Open Sans Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 300 800;
+  src: url(${variableDataURL}) format('woff2-variations');
+}
+@font-face {
+  font-family: 'Open Sans Variable';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 300 800;
+  src: url(${variableItalicDataURL}) format('woff2-variations');
+}`;
+  return variableFontCSS;
+}
+
+function appendStyles(
+  svgDocument: XMLDocument,
+  svg: SVGSVGElement,
+  theme: Theme,
+  colorNodes: boolean,
+  fontsCSS: string,
+): void {
+  const cache = createCache({
+    key: 'refinery',
+    container: svg,
+    prepend: true,
+  });
+  // @ts-expect-error `CSSObject` types don't match up between `@mui/material` and
+  // `@emotion/serialize`, but they are compatible in practice.
+  const styles = serializeStyles([createGraphTheme], cache.registered, {
+    theme,
+    colorNodes,
+    noEmbedIcons: true,
+  });
+  const rules: string[] = [fontsCSS];
+  const sheet = {
+    insert(rule) {
+      rules.push(rule);
+    },
+  } as StyleSheet;
+  cache.insert('', styles, sheet, false);
+  const styleElement = svgDocument.createElementNS(SVG_NS, 'style');
+  svg.prepend(styleElement);
+  styleElement.innerHTML = rules.join('');
+}
+
+function fixForeignObjects(svgDocument: XMLDocument, svg: SVGSVGElement): void {
+  const foreignObjects: SVGForeignObjectElement[] = [];
+  svg
+    .querySelectorAll('foreignObject')
+    .forEach((object) => foreignObjects.push(object));
+  foreignObjects.forEach((object) => {
+    const useElement = svgDocument.createElementNS(SVG_NS, 'use');
+    let x = Number(object.getAttribute('x') ?? '0');
+    let y = Number(object.getAttribute('y') ?? '0');
+    const width = Number(object.getAttribute('width') ?? '0');
+    const height = Number(object.getAttribute('height') ?? '0');
+    const size = Math.min(width, height);
+    x += (width - size) / 2;
+    y += (height - size) / 2;
+    useElement.setAttribute('x', String(x));
+    useElement.setAttribute('y', String(y));
+    useElement.setAttribute('width', String(size));
+    useElement.setAttribute('height', String(size));
+    useElement.id = object.id;
+    object.children[0]?.classList?.forEach((className) => {
+      useElement.classList.add(className);
+      if (ICONS.has(className)) {
+        useElement.setAttribute('href', `#${className}`);
+      }
+    });
+    object.replaceWith(useElement);
+  });
+  const defs = svgDocument.createElementNS(SVG_NS, 'defs');
+  svg.prepend(defs);
+  ICONS.forEach((value) => {
+    const importedValue = svgDocument.importNode(value, true);
+    defs.appendChild(importedValue);
+  });
+}
+
+function serializeSVG(svgDocument: XMLDocument): Blob {
+  const serializer = new XMLSerializer();
+  const svgText = `${PROLOG}\n${serializer.serializeToString(svgDocument)}`;
+  return new Blob([svgText], {
+    type: SVG_CONTENT_TYPE,
+  });
+}
+
+async function serializePNG(
+  serializedSVG: Blob,
+  svg: SVGSVGElement,
+  settings: ExportSettingsStore,
+  theme: Theme,
+): Promise<Blob> {
+  const scale = settings.scale / 100;
+  const baseWidth = svg.width.baseVal.value;
+  const baseHeight = svg.height.baseVal.value;
+  const exactWidth = baseWidth * scale;
+  const exactHeight = baseHeight * scale;
+  const width = Math.round(exactWidth);
+  const height = Math.round(exactHeight);
+
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+
+  const image = document.createElement('img');
+  const url = window.URL.createObjectURL(serializedSVG);
+  try {
+    await new Promise((resolve, reject) => {
+      image.addEventListener('load', () => resolve(undefined));
+      image.addEventListener('error', ({ error }) =>
+        reject(
+          error instanceof Error
+            ? error
+            : new Error(`Failed to load image: ${error}`),
+        ),
+      );
+      image.src = url;
+    });
+  } finally {
+    window.URL.revokeObjectURL(url);
+  }
+
+  const context = canvas.getContext('2d');
+  if (context === null) {
+    throw new Error('Failed to get canvas 2D context');
+  }
+  if (!settings.transparent) {
+    context.fillStyle = theme.palette.background.default;
+    context.fillRect(0, 0, width, height);
+  }
+  context.drawImage(
+    image,
+    0,
+    0,
+    baseWidth,
+    baseHeight,
+    0,
+    0,
+    exactWidth,
+    exactHeight,
+  );
+
+  return new Promise<Blob>((resolve, reject) => {
+    canvas.toBlob((exportedBlob) => {
+      if (exportedBlob === null) {
+        reject(new Error('Failed to export PNG blob'));
+      } else {
+        resolve(exportedBlob);
+      }
+    }, PNG_CONTENT_TYPE);
+  });
+}
+
+let serializePDFCached:
+  | ((svg: SVGSVGElement, embedFonts: boolean) => Promise<Blob>)
+  | undefined;
+
+async function serializePDF(
+  svg: SVGSVGElement,
+  settings: ExportSettingsStore,
+): Promise<Blob> {
+  if (serializePDFCached === undefined) {
+    serializePDFCached = (await import('./serializePDF')).default;
+  }
+  return serializePDFCached(svg, settings.embedFonts);
+}
+
+export default async function exportDiagram(
+  svgContainer: HTMLElement | undefined,
+  graph: GraphStore,
+  settings: ExportSettingsStore,
+  mode: 'download' | 'copy',
+): Promise<void> {
+  const svg = svgContainer?.querySelector('svg');
+  if (!svg) {
+    return;
+  }
+  const svgDocument = document.implementation.createDocument(
+    SVG_NS,
+    'svg',
+    null,
+  );
+  const copyOfSVG = svgDocument.importNode(svg, true);
+  const originalRoot = svgDocument.childNodes[0];
+  if (originalRoot === undefined) {
+    svgDocument.appendChild(copyOfSVG);
+  } else {
+    svgDocument.replaceChild(copyOfSVG, originalRoot);
+  }
+
+  const theme = settings.theme === 'light' ? lightTheme : darkTheme;
+  if (!settings.transparent) {
+    addBackground(svgDocument, copyOfSVG, theme);
+  }
+
+  fixForeignObjects(svgDocument, copyOfSVG);
+
+  const { colorNodes } = graph;
+  let fontsCSS = '';
+  if (settings.format === 'png') {
+    // If we are creating a PNG, font file size doesn't matter,
+    // and we can reuse fonts the browser has already downloaded.
+    fontsCSS = await fetchVariableFontCSS();
+  } else if (settings.format === 'svg' && settings.embedFonts) {
+    fontsCSS = await fetchFontCSS();
+  }
+  appendStyles(svgDocument, copyOfSVG, theme, colorNodes, fontsCSS);
+
+  if (settings.format === 'pdf') {
+    const pdf = await serializePDF(copyOfSVG, settings);
+    await saveBlob(pdf, `${graph.name}.pdf`, {
+      id: EXPORT_ID,
+      types: [
+        {
+          description: 'PDF files',
+          accept: {
+            'application/pdf': ['.pdf', '.PDF'],
+          },
+        },
+      ],
+    });
+    return;
+  }
+  const serializedSVG = serializeSVG(svgDocument);
+  if (settings.format === 'png') {
+    const png = await serializePNG(serializedSVG, svg, settings, theme);
+    if (mode === 'copy') {
+      await copyBlob(png);
+    } else {
+      await saveBlob(png, `${graph.name}.png`, {
+        id: EXPORT_ID,
+        types: [
+          {
+            description: 'PNG graphics',
+            accept: {
+              [PNG_CONTENT_TYPE]: ['.png', '.PNG'],
+            },
+          },
+        ],
+      });
+    }
+  } else if (mode === 'copy') {
+    await copyBlob(serializedSVG);
+  } else {
+    await saveBlob(serializedSVG, `${graph.name}.svg`, {
+      id: EXPORT_ID,
+      types: [
+        {
+          description: 'SVG graphics',
+          accept: {
+            [SVG_CONTENT_TYPE]: ['.svg', '.SVG'],
+          },
+        },
+      ],
+    });
+  }
+}
diff --git a/subprojects/frontend/src/graph/export/open-sans-latin-bold.ttf b/subprojects/frontend/src/graph/export/open-sans-latin-bold.ttf
new file mode 100644
index 00000000..7472d192
--- /dev/null
+++ b/subprojects/frontend/src/graph/export/open-sans-latin-bold.ttf
diff --git a/subprojects/frontend/src/graph/export/open-sans-latin-bold.ttf.license b/subprojects/frontend/src/graph/export/open-sans-latin-bold.ttf.license
new file mode 100644
index 00000000..442f1821
--- /dev/null
+++ b/subprojects/frontend/src/graph/export/open-sans-latin-bold.ttf.license
@@ -0,0 +1,8 @@
+Copyright 2020 The Open Sans Project Authors (https://github.com/googlefonts/opensans)
+
+SPDX-License-Identifier: OFL-1.1
+
+This file was derived from Open Sans v3.3
+(https://github.com/googlefonts/opensans/blob/bd7e37632246368c60fdcbd374dbf9bad11969b6/fonts/ttf/OpenSans-Bold.ttf)
+using the Font Squirrel Web Font Generator (https://www.fontsquirrel.com/tools/webfont-generator)
+with the Basic Subsetting setting to reduce the file size by retaining latin characters only.
diff --git a/subprojects/frontend/src/graph/export/open-sans-latin-italic.ttf b/subprojects/frontend/src/graph/export/open-sans-latin-italic.ttf
new file mode 100644
index 00000000..cecb0ce1
--- /dev/null
+++ b/subprojects/frontend/src/graph/export/open-sans-latin-italic.ttf
diff --git a/subprojects/frontend/src/graph/export/open-sans-latin-italic.ttf.license b/subprojects/frontend/src/graph/export/open-sans-latin-italic.ttf.license
new file mode 100644
index 00000000..0657164a
--- /dev/null
+++ b/subprojects/frontend/src/graph/export/open-sans-latin-italic.ttf.license
@@ -0,0 +1,8 @@
+Copyright 2020 The Open Sans Project Authors (https://github.com/googlefonts/opensans)
+
+SPDX-License-Identifier: OFL-1.1
+
+This file was derived from Open Sans v3.3
+(https://github.com/googlefonts/opensans/blob/bd7e37632246368c60fdcbd374dbf9bad11969b6/fonts/ttf/OpenSans-Italic.ttf)
+using the Font Squirrel Web Font Generator (https://www.fontsquirrel.com/tools/webfont-generator)
+with the Basic Subsetting setting to reduce the file size by retaining latin characters only.
diff --git a/subprojects/frontend/src/graph/export/open-sans-latin-regular.ttf b/subprojects/frontend/src/graph/export/open-sans-latin-regular.ttf
new file mode 100644
index 00000000..46c0f716
--- /dev/null
+++ b/subprojects/frontend/src/graph/export/open-sans-latin-regular.ttf
diff --git a/subprojects/frontend/src/graph/export/open-sans-latin-regular.ttf.license b/subprojects/frontend/src/graph/export/open-sans-latin-regular.ttf.license
new file mode 100644
index 00000000..8bc20e51
--- /dev/null
+++ b/subprojects/frontend/src/graph/export/open-sans-latin-regular.ttf.license
@@ -0,0 +1,8 @@
+Copyright 2020 The Open Sans Project Authors (https://github.com/googlefonts/opensans)
+
+SPDX-License-Identifier: OFL-1.1
+
+This file was derived from Open Sans v3.3
+(https://github.com/googlefonts/opensans/blob/bd7e37632246368c60fdcbd374dbf9bad11969b6/fonts/ttf/OpenSans-Regular.ttf)
+using the Font Squirrel Web Font Generator (https://www.fontsquirrel.com/tools/webfont-generator)
+with the Basic Subsetting setting to reduce the file size by retaining latin characters only.
diff --git a/subprojects/frontend/src/graph/export/serializePDF.ts b/subprojects/frontend/src/graph/export/serializePDF.ts
new file mode 100644
index 00000000..75d1a4f4
--- /dev/null
+++ b/subprojects/frontend/src/graph/export/serializePDF.ts
@@ -0,0 +1,37 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import { jsPDF } from 'jspdf';
+import { svg2pdf } from 'svg2pdf.js';
+
+import boldFontURL from './open-sans-latin-bold.ttf?url';
+import italicFontURL from './open-sans-latin-italic.ttf?url';
+import normalFontURL from './open-sans-latin-regular.ttf?url';
+
+export default async function serializePDF(
+  svg: SVGSVGElement,
+  embedFonts: boolean,
+): Promise<Blob> {
+  const width = svg.width.baseVal.value;
+  const height = svg.height.baseVal.value;
+  // eslint-disable-next-line new-cap -- jsPDF uses a lowercase constructor.
+  const document = new jsPDF({
+    orientation: width > height ? 'l' : 'p',
+    unit: 'px',
+    format: [width, height],
+    compress: true,
+  });
+  if (embedFonts) {
+    document.addFont(normalFontURL, 'Open Sans', 'normal', 400);
+    document.addFont(italicFontURL, 'Open Sans', 'italic', 400);
+    document.addFont(boldFontURL, 'Open Sans', 'normal', 700);
+  }
+  const result = await svg2pdf(svg, document, {
+    width,
+    height,
+  });
+  return result.output('blob');
+}
diff --git a/subprojects/frontend/src/graph/postProcessSVG.ts b/subprojects/frontend/src/graph/postProcessSVG.ts
index a580f5c6..bf990f3a 100644
--- a/subprojects/frontend/src/graph/postProcessSVG.ts
+++ b/subprojects/frontend/src/graph/postProcessSVG.ts
@@ -1,13 +1,13 @@
 /*
- * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2023-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
 
 import { type BBox, parsePolygonBBox, parsePathBBox } from './parseBBox';
 
-const SVG_NS = 'http://www.w3.org/2000/svg';
-const XLINK_NS = 'http://www.w3.org/1999/xlink';
+export const SVG_NS = 'http://www.w3.org/2000/svg';
+export const XLINK_NS = 'http://www.w3.org/1999/xlink';
 
 function modifyAttribute(element: Element, attribute: string, change: number) {
   const valueString = element.getAttribute(attribute);
@@ -166,6 +166,32 @@ function replaceImages(node: SVGGElement) {
   });
 }
 
+function markerColorToClass(svg: SVGSVGElement) {
+  svg.querySelectorAll('.node [stroke="black"]').forEach((node) => {
+    node.removeAttribute('stroke');
+    node.classList.add('node-outline');
+  });
+  svg.querySelectorAll('.node [fill="green"]').forEach((node) => {
+    node.removeAttribute('fill');
+    node.classList.add('node-header');
+  });
+  svg.querySelectorAll('.node [fill="white"]').forEach((node) => {
+    node.removeAttribute('fill');
+    node.classList.add('node-bg');
+  });
+  svg.querySelectorAll('.edge [stroke="black"]').forEach((node) => {
+    node.removeAttribute('stroke');
+    node.classList.add('edge-line');
+  });
+  svg.querySelectorAll('.edge [fill="black"]').forEach((node) => {
+    node.removeAttribute('fill');
+    node.classList.add('edge-arrow');
+  });
+  svg.querySelectorAll('[font-family]').forEach((node) => {
+    node.removeAttribute('font-family');
+  });
+}
+
 export default function postProcessSvg(svg: SVGSVGElement) {
   // svg
   //   .querySelectorAll<SVGTitleElement>('title')
@@ -183,4 +209,5 @@ export default function postProcessSvg(svg: SVGSVGElement) {
     svg.viewBox.baseVal.height + 12,
   ];
   svg.setAttribute('viewBox', viewBox.join(' '));
+  markerColorToClass(svg);
 }
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index a996cde8..6905fb4b 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -220,7 +220,7 @@ function createResponsiveTheme(
   return responsiveFontSizes(themeWithOverrides);
 }
 
-const lightTheme = (() => {
+export const lightTheme = (() => {
   const primaryText = '#19202b';
   const disabledText = '#a0a1a7';
   const darkBackground = '#f5f5f5';
@@ -282,7 +282,7 @@ const lightTheme = (() => {
   });
 })();
 
-const darkTheme = (() => {
+export const darkTheme = (() => {
   const primaryText = '#ebebff';
   const secondaryText = '#abb2bf';
   const darkBackground = '#21252b';
diff --git a/subprojects/frontend/src/utils/fileIO.ts b/subprojects/frontend/src/utils/fileIO.ts
new file mode 100644
index 00000000..fe0b1fbb
--- /dev/null
+++ b/subprojects/frontend/src/utils/fileIO.ts
@@ -0,0 +1,105 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+export interface OpenResult {
+  name: string;
+  handle: FileSystemFileHandle | undefined;
+}
+
+export interface OpenTextFileResult extends OpenResult {
+  text: string;
+}
+
+export async function openTextFile(
+  options: FilePickerOptions,
+): Promise<OpenTextFileResult> {
+  let file: File;
+  let handle: FileSystemFileHandle | undefined;
+  if ('showOpenFilePicker' in window) {
+    [handle] = await window.showOpenFilePicker(options);
+    if (handle === undefined) {
+      throw new Error('No file was selected');
+    }
+    file = await handle.getFile();
+  } else {
+    const input = document.createElement('input');
+    input.type = 'file';
+    file = await new Promise((resolve, reject) => {
+      input.addEventListener('change', () => {
+        const { files } = input;
+        const result = files?.item(0);
+        if (result) {
+          resolve(result);
+        } else {
+          reject(new Error('No file was selected'));
+        }
+      });
+      input.click();
+    });
+  }
+  const text = await file.text();
+  return {
+    name: file.name,
+    text,
+    handle,
+  };
+}
+
+export async function saveTextFile(
+  handle: FileSystemFileHandle,
+  text: string,
+): Promise<void> {
+  const writable = await handle.createWritable();
+  try {
+    await writable.write(text);
+  } finally {
+    await writable.close();
+  }
+}
+
+export async function saveBlob(
+  blob: Blob,
+  name: string,
+  options: FilePickerOptions,
+): Promise<OpenResult | undefined> {
+  if ('showSaveFilePicker' in window) {
+    const handle = await window.showSaveFilePicker({
+      ...options,
+      suggestedName: name,
+    });
+    const writable = await handle.createWritable();
+    try {
+      await writable.write(blob);
+    } finally {
+      await writable.close();
+    }
+    return {
+      name: handle.name,
+      handle,
+    };
+  }
+  const link = document.createElement('a');
+  const url = window.URL.createObjectURL(blob);
+  try {
+    link.href = url;
+    link.download = name;
+    link.click();
+  } finally {
+    window.URL.revokeObjectURL(url);
+  }
+  return undefined;
+}
+
+export async function copyBlob(blob: Blob): Promise<void> {
+  const { clipboard } = navigator;
+  if ('write' in clipboard) {
+    await clipboard.write([
+      new ClipboardItem({
+        [blob.type]: blob,
+      }),
+    ]);
+  }
+}
diff --git a/subprojects/frontend/types/filesystemAccess.d.ts b/subprojects/frontend/types/filesystemAccess.d.ts
new file mode 100644
index 00000000..e9accc77
--- /dev/null
+++ b/subprojects/frontend/types/filesystemAccess.d.ts
@@ -0,0 +1,40 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+interface FilePickerOptions {
+  id?: string;
+  types?: {
+    description?: string;
+    accept: Record<string, string[]>;
+  }[];
+}
+
+interface FilePickerSaveOptions extends FilePickerOptions {
+  suggestedName?: string;
+}
+
+interface Window {
+  showOpenFilePicker?: (
+    options?: FilePickerOpenOptions,
+  ) => Promise<FileSystemFileHandle[]>;
+  showSaveFilePicker?: (
+    options?: FilePickerSaveOptions,
+  ) => Promise<FileSystemFileHandle>;
+}
+
+interface FileSystemHandlePermissionDescriptor {
+  mode?: 'read' | 'readwrite';
+}
+
+interface FileSystemHandle {
+  queryPermission?: (
+    options?: FileSystemHandlePermissionDescriptor,
+  ) => Promise<PermissionStatus>;
+
+  requestPermission?: (
+    options?: FileSystemHandlePermissionDescriptor,
+  ) => Promise<PermissionStatus>;
+}
diff --git a/subprojects/frontend/vite.config.ts b/subprojects/frontend/vite.config.ts
index fffaae20..2d066e38 100644
--- a/subprojects/frontend/vite.config.ts
+++ b/subprojects/frontend/vite.config.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2021-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
@@ -30,6 +30,9 @@ const { mode, isDevelopment, devModePlugins, serverOptions } =
 process.env['NODE_ENV'] ??= mode;
 
 const fontsGlob = [
+  'open-sans-latin-*.ttf',
+  'open-sans-latin-400-{normal,italic}-*.woff2',
+  'open-sans-latin-700-*.woff2',
   'open-sans-latin-wdth-{normal,italic}-*.woff2',
   'jetbrains-mono-latin-wght-{normal,italic}-*.woff2',
 ];
diff --git a/subprojects/language-web/src/main/java/tools/refinery/language/web/SecurityHeadersFilter.java b/subprojects/language-web/src/main/java/tools/refinery/language/web/SecurityHeadersFilter.java
index cc87917f..19eeeff3 100644
--- a/subprojects/language-web/src/main/java/tools/refinery/language/web/SecurityHeadersFilter.java
+++ b/subprojects/language-web/src/main/java/tools/refinery/language/web/SecurityHeadersFilter.java
@@ -20,8 +20,8 @@ public class SecurityHeadersFilter implements Filter {
                                         // CodeMirror needs inline styles, see e.g.,
                                         // https://discuss.codemirror.net/t/inline-styles-and-content-security-policy/1311/2
                                         "style-src 'self' 'unsafe-inline'; " +
-                                        // Use 'data:' for displaying inline SVG backgrounds.
-                                        "img-src 'self' data:; " +
+                                        // Use 'data:' for displaying inline SVG backgrounds and blob for rendering SVG.
+                                        "img-src 'self' data: blob:; " +
                                         "font-src 'self'; " +
                                         // Fetch data:application/octet-stream;base64 URIs to unpack compressed URL fragments.
                                         "connect-src 'self' data:; " +
diff --git a/yarn.lock b/yarn.lock
index c55f95d4..13125135 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -36,12 +36,12 @@ __metadata:
   linkType: hard
 
 "@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.22.13, @babel/code-frame@npm:^7.22.5":
-  version: 7.22.13
-  resolution: "@babel/code-frame@npm:7.22.13"
+  version: 7.23.5
+  resolution: "@babel/code-frame@npm:7.23.5"
   dependencies:
-    "@babel/highlight": "npm:^7.22.13"
+    "@babel/highlight": "npm:^7.23.4"
     chalk: "npm:^2.4.2"
-  checksum: 10c0/f4cc8ae1000265677daf4845083b72f88d00d311adb1a93c94eb4b07bf0ed6828a81ae4ac43ee7d476775000b93a28a9cddec18fbdc5796212d8dcccd5de72bd
+  checksum: 10c0/a10e843595ddd9f97faa99917414813c06214f4d9205294013e20c70fbdf4f943760da37dec1d998bf3e6fc20fa2918a47c0e987a7e458663feb7698063ad7c6
   languageName: node
   linkType: hard
 
@@ -211,11 +211,11 @@ __metadata:
   linkType: hard
 
 "@babel/helper-module-imports@npm:^7.10.4, @babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.18.6, @babel/helper-module-imports@npm:^7.22.5":
-  version: 7.22.5
-  resolution: "@babel/helper-module-imports@npm:7.22.5"
+  version: 7.22.15
+  resolution: "@babel/helper-module-imports@npm:7.22.15"
   dependencies:
-    "@babel/types": "npm:^7.22.5"
-  checksum: 10c0/04f8c0586c485c33017c63e0fc5fc16bd33b883cef3c88e4b3a8bf7bc807b3f9a7bcb9372fbcc01c0a539a5d1cdb477e7bdec77e250669edab00f796683b6b07
+    "@babel/types": "npm:^7.22.15"
+  checksum: 10c0/4e0d7fc36d02c1b8c8b3006dfbfeedf7a367d3334a04934255de5128115ea0bafdeb3e5736a2559917f0653e4e437400d54542da0468e08d3cbc86d3bbfa8f30
   languageName: node
   linkType: hard
 
@@ -349,14 +349,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/highlight@npm:^7.22.13":
-  version: 7.22.20
-  resolution: "@babel/highlight@npm:7.22.20"
+"@babel/highlight@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/highlight@npm:7.23.4"
   dependencies:
     "@babel/helper-validator-identifier": "npm:^7.22.20"
     chalk: "npm:^2.4.2"
     js-tokens: "npm:^4.0.0"
-  checksum: 10c0/f3c3a193afad23434297d88e81d1d6c0c2cf02423de2139ada7ce0a7fc62d8559abf4cc996533c1a9beca7fc990010eb8d544097f75e818ac113bf39ed810aa2
+  checksum: 10c0/fbff9fcb2f5539289c3c097d130e852afd10d89a3a08ac0b5ebebbc055cc84a4bcc3dcfed463d488cde12dd0902ef1858279e31d7349b2e8cee43913744bda33
   languageName: node
   linkType: hard
 
@@ -1234,7 +1234,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
+"@babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
   version: 7.23.9
   resolution: "@babel/runtime@npm:7.23.9"
   dependencies:
@@ -1348,21 +1348,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/state@npm:^6.0.0, @codemirror/state@npm:^6.4.0":
-  version: 6.4.0
-  resolution: "@codemirror/state@npm:6.4.0"
-  checksum: 10c0/f1a94ab45dd5ae067d7f273bbe1a02fb118fa3defae012ff8a18711083bc7fb29436e3a7642c2621bb19a0d51546b398595b63dfdd48e5e15dcf6c629ec81ca1
+"@codemirror/state@npm:^6.0.0, @codemirror/state@npm:^6.4.0, @codemirror/state@npm:^6.4.1":
+  version: 6.4.1
+  resolution: "@codemirror/state@npm:6.4.1"
+  checksum: 10c0/cdab74d0ca4e262531a257ac419c9c44124f3ace8b0ca1262598a9218fbb6fd8f0afeb4b5ed2f64552a9573a0fc5d55481d4b9b05e9505ef729f9bd0f9469423
   languageName: node
   linkType: hard
 
-"@codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.24.0":
-  version: 6.24.0
-  resolution: "@codemirror/view@npm:6.24.0"
+"@codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.24.1":
+  version: 6.24.1
+  resolution: "@codemirror/view@npm:6.24.1"
   dependencies:
     "@codemirror/state": "npm:^6.4.0"
     style-mod: "npm:^4.1.0"
     w3c-keyname: "npm:^2.2.4"
-  checksum: 10c0/27ab6fb82093a533b0a1a2f032b4a0f5707ae85513d21350fb05e1e03c3284a8bb278054c1a77317a6ae512f491a466337f7e35a32eadfb4da33f7efa1b6dcde
+  checksum: 10c0/56ec45fa5b064310dd9561cec324633b992c1b918b09c304e8856a4bc22eab0d686c5ab37ed8ccb6e4b19bd0dade5c8a3dd256f056305e7d91b303e847949d23
   languageName: node
   linkType: hard
 
@@ -1701,10 +1701,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/js@npm:8.56.0":
-  version: 8.56.0
-  resolution: "@eslint/js@npm:8.56.0"
-  checksum: 10c0/60b3a1cf240e2479cec9742424224465dc50e46d781da1b7f5ef240501b2d1202c225bd456207faac4b34a64f4765833345bc4ddffd00395e1db40fa8c426f5a
+"@eslint/js@npm:8.57.0":
+  version: 8.57.0
+  resolution: "@eslint/js@npm:8.57.0"
+  checksum: 10c0/9a518bb8625ba3350613903a6d8c622352ab0c6557a59fe6ff6178bf882bf57123f9d92aa826ee8ac3ee74b9c6203fe630e9ee00efb03d753962dcf65ee4bd94
   languageName: node
   linkType: hard
 
@@ -1760,6 +1760,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fontsource/open-sans@npm:^5.0.24":
+  version: 5.0.24
+  resolution: "@fontsource/open-sans@npm:5.0.24"
+  checksum: 10c0/e3306f3ff0b9d85703f5b3114f33e31747dcbdf35a2eff425d0a9afb61bfd69c7eb29a691a5acd4582aa808ec123e51f223b49dad60d2caae9890d72e03feb7d
+  languageName: node
+  linkType: hard
+
 "@hpcc-js/wasm@npm:^2.16.0":
   version: 2.16.0
   resolution: "@hpcc-js/wasm@npm:2.16.0"
@@ -1771,14 +1778,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@humanwhocodes/config-array@npm:^0.11.13":
-  version: 0.11.13
-  resolution: "@humanwhocodes/config-array@npm:0.11.13"
+"@humanwhocodes/config-array@npm:^0.11.14":
+  version: 0.11.14
+  resolution: "@humanwhocodes/config-array@npm:0.11.14"
   dependencies:
-    "@humanwhocodes/object-schema": "npm:^2.0.1"
-    debug: "npm:^4.1.1"
+    "@humanwhocodes/object-schema": "npm:^2.0.2"
+    debug: "npm:^4.3.1"
     minimatch: "npm:^3.0.5"
-  checksum: 10c0/d76ca802d853366094d0e98ff0d0994117fc8eff96649cd357b15e469e428228f597cd2e929d54ab089051684949955f16ee905bb19f7b2f0446fb377157be7a
+  checksum: 10c0/66f725b4ee5fdd8322c737cb5013e19fac72d4d69c8bf4b7feb192fcb83442b035b92186f8e9497c220e58b2d51a080f28a73f7899bc1ab288c3be172c467541
   languageName: node
   linkType: hard
 
@@ -1789,10 +1796,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@humanwhocodes/object-schema@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "@humanwhocodes/object-schema@npm:2.0.1"
-  checksum: 10c0/9dba24e59fdb4041829d92b693aacb778add3b6f612aaa9c0774f3b650c11a378cc64f042a59da85c11dae33df456580a3c36837b953541aed6ff94294f97fac
+"@humanwhocodes/object-schema@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "@humanwhocodes/object-schema@npm:2.0.2"
+  checksum: 10c0/6fd83dc320231d71c4541d0244051df61f301817e9f9da9fd4cb7e44ec8aacbde5958c1665b0c419401ab935114fdf532a6ad5d4e7294b1af2f347dd91a6983f
   languageName: node
   linkType: hard
 
@@ -1906,14 +1913,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/base@npm:5.0.0-beta.36":
-  version: 5.0.0-beta.36
-  resolution: "@mui/base@npm:5.0.0-beta.36"
+"@mui/base@npm:5.0.0-beta.37":
+  version: 5.0.0-beta.37
+  resolution: "@mui/base@npm:5.0.0-beta.37"
   dependencies:
     "@babel/runtime": "npm:^7.23.9"
     "@floating-ui/react-dom": "npm:^2.0.8"
     "@mui/types": "npm:^7.2.13"
-    "@mui/utils": "npm:^5.15.9"
+    "@mui/utils": "npm:^5.15.11"
     "@popperjs/core": "npm:^2.11.8"
     clsx: "npm:^2.1.0"
     prop-types: "npm:^15.8.1"
@@ -1924,20 +1931,20 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/b789cd9e6906d56698bb5536704aefa475283081f1287b8340bb74dea4465565f7958c5e61bbc000f0d2a8e97aaf95a203f35cc737115e3edc7ea389da3d9c9e
+  checksum: 10c0/bcee89198381b1058aa2a7e3122597a34a03fb3b351b1e0776674a996fb633bdeeae0656f14f905df7d4fced2aa6ae0a2b4fb3b462de387668481d8427448ca3
   languageName: node
   linkType: hard
 
-"@mui/core-downloads-tracker@npm:^5.15.10":
-  version: 5.15.10
-  resolution: "@mui/core-downloads-tracker@npm:5.15.10"
-  checksum: 10c0/d05da33eb3532994aa0b71e8131c8c21b4c6256976bfa704b2268c2bd88ae2c6853b0832c2af904507820e56563d373020827310abd626e146e026200b76eacf
+"@mui/core-downloads-tracker@npm:^5.15.11":
+  version: 5.15.11
+  resolution: "@mui/core-downloads-tracker@npm:5.15.11"
+  checksum: 10c0/e7d9fd674c1d71eb428ceffb9bbb36edaa421caa8c438e6977014f283bcae8530d6daa7c4289015576976505c6321ddaec2970b0af4c2d8619da206a025cc033
   languageName: node
   linkType: hard
 
-"@mui/icons-material@npm:^5.15.10":
-  version: 5.15.10
-  resolution: "@mui/icons-material@npm:5.15.10"
+"@mui/icons-material@npm:^5.15.11":
+  version: 5.15.11
+  resolution: "@mui/icons-material@npm:5.15.11"
   dependencies:
     "@babel/runtime": "npm:^7.23.9"
   peerDependencies:
@@ -1947,20 +1954,20 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/d49747d962ad9dec172d498173ee60fe29f3c818d15458fdc21b5d7a1cfa3a5acf8c6f3e6e35c665a3b0f4a088ac6806601c0d408403117f6711740448db4346
+  checksum: 10c0/59cc9e62a82985cd357815df021ab2d4ef3b8528574ca8d67245ef02eb4df290110ba146bf014ece463992906fdb6e08b495800f94644b9c43ef1b3a4cbf6783
   languageName: node
   linkType: hard
 
-"@mui/material@npm:^5.15.10":
-  version: 5.15.10
-  resolution: "@mui/material@npm:5.15.10"
+"@mui/material@npm:^5.15.11":
+  version: 5.15.11
+  resolution: "@mui/material@npm:5.15.11"
   dependencies:
     "@babel/runtime": "npm:^7.23.9"
-    "@mui/base": "npm:5.0.0-beta.36"
-    "@mui/core-downloads-tracker": "npm:^5.15.10"
-    "@mui/system": "npm:^5.15.9"
+    "@mui/base": "npm:5.0.0-beta.37"
+    "@mui/core-downloads-tracker": "npm:^5.15.11"
+    "@mui/system": "npm:^5.15.11"
     "@mui/types": "npm:^7.2.13"
-    "@mui/utils": "npm:^5.15.9"
+    "@mui/utils": "npm:^5.15.11"
     "@types/react-transition-group": "npm:^4.4.10"
     clsx: "npm:^2.1.0"
     csstype: "npm:^3.1.3"
@@ -1980,16 +1987,16 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: 10c0/057147a7f68269641954dd456852a801c71fe10cc1dee7c4d669e8327a792ac2dee4083c4562b918a3696276a9035ba2a5b1b5261dc7f1a385711b938ae508fe
+  checksum: 10c0/21f885a07d3cf1407d21a3f1d1dcd86076585508f912e85c00d8093e181b4dfb2fc8ebf954e06f699f691220eb4a3f1601f7a51b39e90486ae7fcd222f114015
   languageName: node
   linkType: hard
 
-"@mui/private-theming@npm:^5.15.9":
-  version: 5.15.9
-  resolution: "@mui/private-theming@npm:5.15.9"
+"@mui/private-theming@npm:^5.15.11":
+  version: 5.15.11
+  resolution: "@mui/private-theming@npm:5.15.11"
   dependencies:
     "@babel/runtime": "npm:^7.23.9"
-    "@mui/utils": "npm:^5.15.9"
+    "@mui/utils": "npm:^5.15.11"
     prop-types: "npm:^15.8.1"
   peerDependencies:
     "@types/react": ^17.0.0 || ^18.0.0
@@ -1997,13 +2004,13 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/a5c995b7f2faa9aa39ccf258bc2cafde9a8c265dd15bfbaec974650690d81d662eaae0524f0f8e17d16fe7893a6907cc0c388ac5648cce7b502a77d722daa116
+  checksum: 10c0/29763c2df3a18bd5a4772302dc1d734c9101c02f42b7ae1c2c21b048c4fc5b7a12f83c30ac2297087c1499222ebcfcd3e23d72717cc163732f962dfde5260dd3
   languageName: node
   linkType: hard
 
-"@mui/styled-engine@npm:^5.15.9":
-  version: 5.15.9
-  resolution: "@mui/styled-engine@npm:5.15.9"
+"@mui/styled-engine@npm:^5.15.11":
+  version: 5.15.11
+  resolution: "@mui/styled-engine@npm:5.15.11"
   dependencies:
     "@babel/runtime": "npm:^7.23.9"
     "@emotion/cache": "npm:^11.11.0"
@@ -2018,19 +2025,19 @@ __metadata:
       optional: true
     "@emotion/styled":
       optional: true
-  checksum: 10c0/47968ec55a5a36936dc8c245c1d62fe9be82bdaba800aeea08d111702b3aea8388bc3c2a46ee4ee315efe77b1c7ecf63308fc518afa69114b2fc90a203de48e0
+  checksum: 10c0/b168565256c82ed34946f954e9088c339917c980451b5dd3d6dca9d36e6d39b5900ea85ffc5736b66d25f841dc761a8c2c70c111c42bec794309f2cafb3975ce
   languageName: node
   linkType: hard
 
-"@mui/system@npm:^5.15.9":
-  version: 5.15.9
-  resolution: "@mui/system@npm:5.15.9"
+"@mui/system@npm:^5.15.11":
+  version: 5.15.11
+  resolution: "@mui/system@npm:5.15.11"
   dependencies:
     "@babel/runtime": "npm:^7.23.9"
-    "@mui/private-theming": "npm:^5.15.9"
-    "@mui/styled-engine": "npm:^5.15.9"
+    "@mui/private-theming": "npm:^5.15.11"
+    "@mui/styled-engine": "npm:^5.15.11"
     "@mui/types": "npm:^7.2.13"
-    "@mui/utils": "npm:^5.15.9"
+    "@mui/utils": "npm:^5.15.11"
     clsx: "npm:^2.1.0"
     csstype: "npm:^3.1.3"
     prop-types: "npm:^15.8.1"
@@ -2046,7 +2053,7 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: 10c0/187a14e689be1434c7db646f2f0f19c5fe60eb565dd0fa2d0a7b903240fd36ccdd3a5d2318630a9e0186036ef61fbebd58a9ef752f7b9b329660614ddbdf37f1
+  checksum: 10c0/27094ac751ad024bf9e67b26feb94dd09ea3550facb6d3dc1a6e15f1901a1cc03751221826908fa881df1eab5d5c03c8b5e737bfae627e1d5a0fa3033c5decaa
   languageName: node
   linkType: hard
 
@@ -2062,9 +2069,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/utils@npm:^5.14.16, @mui/utils@npm:^5.15.9":
-  version: 5.15.9
-  resolution: "@mui/utils@npm:5.15.9"
+"@mui/utils@npm:^5.14.16, @mui/utils@npm:^5.15.11":
+  version: 5.15.11
+  resolution: "@mui/utils@npm:5.15.11"
   dependencies:
     "@babel/runtime": "npm:^7.23.9"
     "@types/prop-types": "npm:^15.7.11"
@@ -2076,13 +2083,13 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/42d3db7f73f47ad719b8a4769eac2aeaec683166c953e67518f6edb7d14464576daf6566619a384f5f7e48dcb1478053ff3e4ce1be244fd332f7e988da9e1401
+  checksum: 10c0/bbdd0a8cd5bd04021b6e0b7836bd5a5852e54d95392ad786816dd0e5c1942f82f5d645721ac8c716394f74b0628a8c909139fc86103a3aa40d147ab9eb234fb9
   languageName: node
   linkType: hard
 
-"@mui/x-data-grid@npm:^6.19.4":
-  version: 6.19.4
-  resolution: "@mui/x-data-grid@npm:6.19.4"
+"@mui/x-data-grid@npm:^6.19.5":
+  version: 6.19.5
+  resolution: "@mui/x-data-grid@npm:6.19.5"
   dependencies:
     "@babel/runtime": "npm:^7.23.2"
     "@mui/utils": "npm:^5.14.16"
@@ -2094,7 +2101,7 @@ __metadata:
     "@mui/system": ^5.4.1
     react: ^17.0.0 || ^18.0.0
     react-dom: ^17.0.0 || ^18.0.0
-  checksum: 10c0/2de403c7cadb9c34baed609afc500288c927518abf70f362eb8a45ac6161497aebb9f3b13e72e0192a6deb508c0db2ffb13d8ae09cece2e52490bd2b956179ed
+  checksum: 10c0/64fadfab30fc210c5f7f4fff16bc08a4357498c67b8c341106d42189bcda8e17e59115b9b7cdae7af1f0c181ce4afeae9b41d56d455dd2bfad51bb8c5ef3786d
   languageName: node
   linkType: hard
 
@@ -2164,34 +2171,39 @@ __metadata:
     "@codemirror/language": "npm:^6.10.1"
     "@codemirror/lint": "npm:^6.5.0"
     "@codemirror/search": "npm:^6.5.6"
-    "@codemirror/state": "npm:^6.4.0"
-    "@codemirror/view": "npm:^6.24.0"
+    "@codemirror/state": "npm:^6.4.1"
+    "@codemirror/view": "npm:^6.24.1"
+    "@emotion/cache": "npm:^11.11.0"
     "@emotion/react": "npm:^11.11.3"
+    "@emotion/serialize": "npm:^1.1.3"
     "@emotion/styled": "npm:^11.11.0"
+    "@emotion/utils": "npm:^1.2.1"
     "@fontsource-variable/jetbrains-mono": "npm:^5.0.19"
     "@fontsource-variable/open-sans": "npm:^5.0.25"
+    "@fontsource/open-sans": "npm:^5.0.24"
     "@hpcc-js/wasm": "npm:^2.16.0"
     "@lezer/common": "npm:^1.2.1"
     "@lezer/generator": "npm:^1.6.0"
     "@lezer/highlight": "npm:^1.2.0"
     "@lezer/lr": "npm:^1.4.0"
     "@material-icons/svg": "npm:^1.0.33"
-    "@mui/icons-material": "npm:^5.15.10"
-    "@mui/material": "npm:^5.15.10"
-    "@mui/system": "npm:^5.15.9"
-    "@mui/x-data-grid": "npm:^6.19.4"
+    "@mui/icons-material": "npm:^5.15.11"
+    "@mui/material": "npm:^5.15.11"
+    "@mui/system": "npm:^5.15.11"
+    "@mui/x-data-grid": "npm:^6.19.5"
     "@types/d3": "npm:^7.4.3"
     "@types/d3-graphviz": "npm:^2.6.10"
     "@types/d3-selection": "npm:^3.0.10"
     "@types/d3-zoom": "npm:^3.0.8"
-    "@types/eslint": "npm:^8.56.2"
+    "@types/eslint": "npm:^8.56.3"
     "@types/html-minifier-terser": "npm:^7.0.2"
+    "@types/jspdf": "npm:^2.0.0"
     "@types/lodash-es": "npm:^4.17.12"
     "@types/micromatch": "npm:^4.0.6"
     "@types/ms": "npm:^0.7.34"
-    "@types/node": "npm:^20.11.19"
+    "@types/node": "npm:^20.11.20"
     "@types/pnpapi": "npm:^0.0.5"
-    "@types/react": "npm:^18.2.56"
+    "@types/react": "npm:^18.2.58"
     "@types/react-dom": "npm:^18.2.19"
     "@typescript-eslint/eslint-plugin": "npm:^6.21.0"
     "@typescript-eslint/parser": "npm:^6.21.0"
@@ -2205,7 +2217,7 @@ __metadata:
     d3-selection: "npm:^3.0.0"
     d3-zoom: "patch:d3-zoom@npm%3A3.0.0#~/.yarn/patches/d3-zoom-npm-3.0.0-18f706a421.patch"
     escape-string-regexp: "npm:^5.0.0"
-    eslint: "npm:^8.56.0"
+    eslint: "npm:^8.57.0"
     eslint-config-airbnb: "npm:^19.0.4"
     eslint-config-airbnb-typescript: "npm:^17.1.0"
     eslint-config-prettier: "npm:^9.1.0"
@@ -2217,6 +2229,7 @@ __metadata:
     eslint-plugin-react: "npm:^7.33.2"
     eslint-plugin-react-hooks: "npm:^4.6.0"
     html-minifier-terser: "npm:^7.2.0"
+    jspdf: "npm:^2.5.1"
     lodash-es: "npm:^4.17.21"
     loglevel: "npm:^1.9.1"
     loglevel-plugin-prefix: "npm:^0.8.4"
@@ -2224,15 +2237,16 @@ __metadata:
     mobx: "npm:^6.12.0"
     mobx-react-lite: "npm:^4.0.5"
     ms: "npm:^2.1.3"
-    nanoid: "npm:^5.0.5"
+    nanoid: "npm:^5.0.6"
     notistack: "npm:^3.0.1"
     pnpapi: "npm:^0.0.0"
     prettier: "npm:^3.2.5"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     react-resize-detector: "npm:^10.0.1"
+    svg2pdf.js: "npm:^2.2.3"
     typescript: "npm:5.3.3"
-    vite: "npm:^5.1.3"
+    vite: "npm:^5.1.4"
     vite-plugin-pwa: "npm:^0.19.0"
     workbox-window: "npm:^7.0.0"
     xstate: "npm:^4.38.3"
@@ -2244,7 +2258,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@refinery/root@workspace:."
   dependencies:
-    eslint: "npm:^8.56.0"
+    eslint: "npm:^8.57.0"
     typescript: "npm:5.3.3"
   languageName: unknown
   linkType: soft
@@ -2872,13 +2886,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/eslint@npm:^8.56.2":
-  version: 8.56.2
-  resolution: "@types/eslint@npm:8.56.2"
+"@types/eslint@npm:^8.56.3":
+  version: 8.56.3
+  resolution: "@types/eslint@npm:8.56.3"
   dependencies:
     "@types/estree": "npm:*"
     "@types/json-schema": "npm:*"
-  checksum: 10c0/e33ca87a30a9454ba9943e1270ac759996f5fe598a1c1afbaec1d1e7346a339e20bf2a9d81f177067116bbaa6cfa4f748993cb338f57978ae862ad38ffae56fe
+  checksum: 10c0/c5d81d0001fae211451b39d82b2bc8d7224b00d52a514954a33840a3665f36f3bde3be602eec6ad08d1fff59108052cd7746ced4237116bc3d8ac01a7cf5b5fe
   languageName: node
   linkType: hard
 
@@ -2924,6 +2938,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/jspdf@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "@types/jspdf@npm:2.0.0"
+  dependencies:
+    jspdf: "npm:*"
+  checksum: 10c0/69bed9c099c9a0d369c2734fa97862cb67c4d1151ce45b7f9f3c6dfedf7b1bb612cf0561aa5768b7adf5cec207adf2fa82ffbcb7907c716b33b1f5a8f75fe5fc
+  languageName: node
+  linkType: hard
+
 "@types/lodash-es@npm:^4.17.12":
   version: 4.17.12
   resolution: "@types/lodash-es@npm:4.17.12"
@@ -2956,19 +2979,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:*, @types/node@npm:^20.11.19":
-  version: 20.11.19
-  resolution: "@types/node@npm:20.11.19"
+"@types/node@npm:*, @types/node@npm:^20.11.20":
+  version: 20.11.20
+  resolution: "@types/node@npm:20.11.20"
   dependencies:
     undici-types: "npm:~5.26.4"
-  checksum: 10c0/f451ef0a1d78f29c57bad7b77e49ebec945f2a6d0d7a89851d7e185ee9fe7ad94d651c0dfbcb7858c9fa791310c8b40a881e2260f56bd3c1b7e7ae92723373ae
+  checksum: 10c0/8e8de211e6d54425c603388a9b5cc9c434101985d0a1c88aabbf65d10df2b1fccd71855c20e61ae8a75c7aea56cb0f64e722cf7914cff1247d0b62ce21996ac4
   languageName: node
   linkType: hard
 
 "@types/parse-json@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "@types/parse-json@npm:4.0.0"
-  checksum: 10c0/1d3012ab2fcdad1ba313e1d065b737578f6506c8958e2a7a5bdbdef517c7e930796cb1599ee067d5dee942fb3a764df64b5eef7e9ae98548d776e86dcffba985
+  version: 4.0.2
+  resolution: "@types/parse-json@npm:4.0.2"
+  checksum: 10c0/b1b863ac34a2c2172fbe0807a1ec4d5cb684e48d422d15ec95980b81475fac4fdb3768a8b13eef39130203a7c04340fc167bae057c7ebcafd7dec9fe6c36aeb1
   languageName: node
   linkType: hard
 
@@ -2986,6 +3009,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/raf@npm:^3.4.0":
+  version: 3.4.3
+  resolution: "@types/raf@npm:3.4.3"
+  checksum: 10c0/dea835f0daa399c51db9137f5337dc08a2b4a5f61f645658966ecabaebbbd0fd59551f384a1141e14e22a1cc5a591da7d4d88c60a525ad1399108b6dd2641d75
+  languageName: node
+  linkType: hard
+
 "@types/react-dom@npm:^18.2.19":
   version: 18.2.19
   resolution: "@types/react-dom@npm:18.2.19"
@@ -3004,14 +3034,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:^18.2.56":
-  version: 18.2.56
-  resolution: "@types/react@npm:18.2.56"
+"@types/react@npm:*, @types/react@npm:^18.2.58":
+  version: 18.2.58
+  resolution: "@types/react@npm:18.2.58"
   dependencies:
     "@types/prop-types": "npm:*"
     "@types/scheduler": "npm:*"
     csstype: "npm:^3.0.2"
-  checksum: 10c0/a6dab9569799538a9e01d340a721ef1a6f5532bd11cae8d8ab9af00dab2edcafaa00950f7bf2f9ae5bbb1839d890e9ac6eb1ea1186200894b7178dde7b503269
+  checksum: 10c0/80145b707b780d682092b51d520f58a0171c4067ff36cf488d3346d92b715b27fd334acd0fabb8eb21a4eb6c4061f1535e8bfa6642a7f4025e63ebec868fb6d1
   languageName: node
   linkType: hard
 
@@ -3537,6 +3567,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"atob@npm:^2.1.2":
+  version: 2.1.2
+  resolution: "atob@npm:2.1.2"
+  bin:
+    atob: bin/atob.js
+  checksum: 10c0/ada635b519dc0c576bb0b3ca63a73b50eefacf390abb3f062558342a8d68f2db91d0c8db54ce81b0d89de3b0f000de71f3ae7d761fd7d8cc624278fe443d6c7e
+  languageName: node
+  linkType: hard
+
 "available-typed-arrays@npm:^1.0.5":
   version: 1.0.5
   resolution: "available-typed-arrays@npm:1.0.5"
@@ -3623,6 +3662,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"base64-arraybuffer@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "base64-arraybuffer@npm:1.0.2"
+  checksum: 10c0/3acac95c70f9406e87a41073558ba85b6be9dbffb013a3d2a710e3f2d534d506c911847d5d9be4de458af6362c676de0a5c4c2d7bdf4def502d00b313368e72f
+  languageName: node
+  linkType: hard
+
 "binary-extensions@npm:^2.0.0":
   version: 2.2.0
   resolution: "binary-extensions@npm:2.2.0"
@@ -3672,6 +3718,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"btoa@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "btoa@npm:1.2.1"
+  bin:
+    btoa: bin/btoa.js
+  checksum: 10c0/557b9682e40a68ae057af1b377e28884e6ff756ba0f499fe0f8c7b725a5bfb5c0d891604ac09944dbe330c9d43fb3976fef734f9372608d0d8e78a30eda292ae
+  languageName: node
+  linkType: hard
+
 "buffer-from@npm:^1.0.0":
   version: 1.1.2
   resolution: "buffer-from@npm:1.1.2"
@@ -3735,9 +3790,25 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.30001517":
-  version: 1.0.30001588
-  resolution: "caniuse-lite@npm:1.0.30001588"
-  checksum: 10c0/f8333cb52e7ebc169d462763cecc33807530f1e04d22ba1084e05a583907aa801fb3c013d60b38d54cb792440f48efcd2a1a68f22d5fce896b5bd0277392347c
+  version: 1.0.30001589
+  resolution: "caniuse-lite@npm:1.0.30001589"
+  checksum: 10c0/20debfb949413f603011bc7dacaf050010778bc4f8632c86fafd1bd0c43180c95ae7c31f6c82348f6309e5e221934e327c3607a216e3f09640284acf78cd6d4d
+  languageName: node
+  linkType: hard
+
+"canvg@npm:^3.0.6":
+  version: 3.0.10
+  resolution: "canvg@npm:3.0.10"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+    "@types/raf": "npm:^3.4.0"
+    core-js: "npm:^3.8.3"
+    raf: "npm:^3.4.1"
+    regenerator-runtime: "npm:^0.13.7"
+    rgbcolor: "npm:^1.0.1"
+    stackblur-canvas: "npm:^2.0.0"
+    svg-pathdata: "npm:^6.0.3"
+  checksum: 10c0/b6bcd95d60c923c6a4e2be49e1fc1d395790577913a5a68439a2bb5a784ee75533ed7720bef69f2d9d0404203b4d61e89fdf1346f829e5da71e54cc57614153f
   languageName: node
   linkType: hard
 
@@ -3942,6 +4013,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"core-js@npm:^3.6.0, core-js@npm:^3.8.3":
+  version: 3.36.0
+  resolution: "core-js@npm:3.36.0"
+  checksum: 10c0/62dcb41ba79ead581e4c5b2740ae18bfe6ee230e853893736d16edb01b580574d8645ff6c5513d1c75d59620f8451aee45c119d3c4f5ebc66cff5f003a816864
+  languageName: node
+  linkType: hard
+
 "cosmiconfig@npm:^7.0.0":
   version: 7.1.0
   resolution: "cosmiconfig@npm:7.1.0"
@@ -3992,6 +4070,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-line-break@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "css-line-break@npm:2.1.0"
+  dependencies:
+    utrie: "npm:^1.0.2"
+  checksum: 10c0/b2222d99d5daf7861ecddc050244fdce296fad74b000dcff6bdfb1eb16dc2ef0b9ffe2c1c965e3239bd05ebe9eadb6d5438a91592fa8648d27a338e827cf9048
+  languageName: node
+  linkType: hard
+
+"cssesc@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "cssesc@npm:3.0.0"
+  bin:
+    cssesc: bin/cssesc
+  checksum: 10c0/6bcfd898662671be15ae7827120472c5667afb3d7429f1f917737f3bf84c4176003228131b643ae74543f17a394446247df090c597bb9a728cce298606ed0aa7
+  languageName: node
+  linkType: hard
+
 "csstype@npm:^3.0.2, csstype@npm:^3.1.3":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
@@ -4373,7 +4469,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4":
+"debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4":
   version: 4.3.4
   resolution: "debug@npm:4.3.4"
   dependencies:
@@ -4490,6 +4586,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dompurify@npm:^2.2.0":
+  version: 2.4.7
+  resolution: "dompurify@npm:2.4.7"
+  checksum: 10c0/c04fa6a7c7276d0bc80e6330f697cfecd96ec1d3964b17de916f26cb0b5b2c9a98ba343d84e759f2b8339e577e619ef3749f3d128ef18ddb8230b09bd2ff3f29
+  languageName: node
+  linkType: hard
+
 "dot-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "dot-case@npm:3.0.4"
@@ -5039,15 +5142,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint@npm:^8.56.0":
-  version: 8.56.0
-  resolution: "eslint@npm:8.56.0"
+"eslint@npm:^8.57.0":
+  version: 8.57.0
+  resolution: "eslint@npm:8.57.0"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.2.0"
     "@eslint-community/regexpp": "npm:^4.6.1"
     "@eslint/eslintrc": "npm:^2.1.4"
-    "@eslint/js": "npm:8.56.0"
-    "@humanwhocodes/config-array": "npm:^0.11.13"
+    "@eslint/js": "npm:8.57.0"
+    "@humanwhocodes/config-array": "npm:^0.11.14"
     "@humanwhocodes/module-importer": "npm:^1.0.1"
     "@nodelib/fs.walk": "npm:^1.2.8"
     "@ungap/structured-clone": "npm:^1.2.0"
@@ -5083,7 +5186,7 @@ __metadata:
     text-table: "npm:^0.2.0"
   bin:
     eslint: bin/eslint.js
-  checksum: 10c0/2be598f7da1339d045ad933ffd3d4742bee610515cd2b0d9a2b8b729395a01d4e913552fff555b559fccaefd89d7b37632825789d1b06470608737ae69ab43fb
+  checksum: 10c0/00bb96fd2471039a312435a6776fe1fd557c056755eaa2b96093ef3a8508c92c8775d5f754768be6b1dddd09fdd3379ddb231eeb9b6c579ee17ea7d68000a529
   languageName: node
   linkType: hard
 
@@ -5204,6 +5307,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fflate@npm:^0.4.8":
+  version: 0.4.8
+  resolution: "fflate@npm:0.4.8"
+  checksum: 10c0/29d1eddaaa5deab61b1c6b0d21282adacadbc4d2c01e94d8b1ee784398151673b9c563e53f97a801bc410a1ae55e8de5378114a743430e643e7a0644ba8e5a42
+  languageName: node
+  linkType: hard
+
 "file-entry-cache@npm:^6.0.1":
   version: 6.0.1
   resolution: "file-entry-cache@npm:6.0.1"
@@ -5265,6 +5375,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"font-family-papandreou@npm:^0.2.0-patch1":
+  version: 0.2.0-patch2
+  resolution: "font-family-papandreou@npm:0.2.0-patch2"
+  checksum: 10c0/f2028070906b71a648b3aba63e22b4077fa3adf5949749f27fc7b44a41ffd1f017221e0d9bd550b8a1d8fcef7cfc3fc22cf6e3d99c5cc8a00ebfee29a3f26841
+  languageName: node
+  linkType: hard
+
 "for-each@npm:^0.3.3":
   version: 0.3.3
   resolution: "for-each@npm:0.3.3"
@@ -5656,6 +5773,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"html2canvas@npm:^1.0.0-rc.5":
+  version: 1.4.1
+  resolution: "html2canvas@npm:1.4.1"
+  dependencies:
+    css-line-break: "npm:^2.1.0"
+    text-segmentation: "npm:^1.0.3"
+  checksum: 10c0/6de86f75762b00948edf2ea559f16da0a1ec3facc4a8a7d3f35fcec59bb0c5970463478988ae3d9082152e0173690d46ebf4082e7ac803dd4817bae1d355c0db
+  languageName: node
+  linkType: hard
+
 "http-cache-semantics@npm:^4.1.1":
   version: 4.1.1
   resolution: "http-cache-semantics@npm:4.1.1"
@@ -5776,9 +5903,9 @@ __metadata:
   linkType: hard
 
 "ip@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "ip@npm:2.0.0"
-  checksum: 10c0/8d186cc5585f57372847ae29b6eba258c68862055e18a75cc4933327232cb5c107f89800ce29715d542eef2c254fbb68b382e780a7414f9ee7caf60b7a473958
+  version: 2.0.1
+  resolution: "ip@npm:2.0.1"
+  checksum: 10c0/cab8eb3e88d0abe23e4724829621ec4c4c5cb41a7f936a2e626c947128c1be16ed543448d42af7cca95379f9892bfcacc1ccd8d09bc7e8bea0e86d492ce33616
   languageName: node
   linkType: hard
 
@@ -6260,6 +6387,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jspdf@npm:*, jspdf@npm:^2.5.1":
+  version: 2.5.1
+  resolution: "jspdf@npm:2.5.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.14.0"
+    atob: "npm:^2.1.2"
+    btoa: "npm:^1.2.1"
+    canvg: "npm:^3.0.6"
+    core-js: "npm:^3.6.0"
+    dompurify: "npm:^2.2.0"
+    fflate: "npm:^0.4.8"
+    html2canvas: "npm:^1.0.0-rc.5"
+  dependenciesMeta:
+    canvg:
+      optional: true
+    core-js:
+      optional: true
+    dompurify:
+      optional: true
+    html2canvas:
+      optional: true
+  checksum: 10c0/dad15d4f53ead1d2e9d5f6fd9b6e72c7233ba5cbc30d98461eb0ef609aa908b28fd5eaaf2b763b55df945c7ecca2323097d9331f09fee1d6c23c06785520ab5f
+  languageName: node
+  linkType: hard
+
 "jsx-ast-utils@npm:^2.4.1 || ^3.0.0, jsx-ast-utils@npm:^3.3.5":
   version: 3.3.5
   resolution: "jsx-ast-utils@npm:3.3.5"
@@ -6652,12 +6804,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^5.0.5":
-  version: 5.0.5
-  resolution: "nanoid@npm:5.0.5"
+"nanoid@npm:^5.0.6":
+  version: 5.0.6
+  resolution: "nanoid@npm:5.0.6"
   bin:
     nanoid: bin/nanoid.js
-  checksum: 10c0/b1f881b08d6e918bf70d37dece3e59fff8d99cc29b80a956e29d1852e09d3a7bf35a4884f4b9d5ff26963018937d0c91bef83842c15758a668d88c94704d2da7
+  checksum: 10c0/6660f99b7bb3816f04fd9a14126859482e07d1705c02e1a6c1a722545c65186659f6f734eb21329f54e838b6409579bef687e2fb13661b716529dcefc5d86ec6
   languageName: node
   linkType: hard
 
@@ -7004,6 +7156,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"performance-now@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "performance-now@npm:2.1.0"
+  checksum: 10c0/22c54de06f269e29f640e0e075207af57de5052a3d15e360c09b9a8663f393f6f45902006c1e71aa8a5a1cdfb1a47fe268826f8496d6425c362f00f5bc3e85d9
+  languageName: node
+  linkType: hard
+
 "picocolors@npm:^1.0.0":
   version: 1.0.0
   resolution: "picocolors@npm:1.0.0"
@@ -7119,6 +7278,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"raf@npm:^3.4.1":
+  version: 3.4.1
+  resolution: "raf@npm:3.4.1"
+  dependencies:
+    performance-now: "npm:^2.1.0"
+  checksum: 10c0/337f0853c9e6a77647b0f499beedafea5d6facfb9f2d488a624f88b03df2be72b8a0e7f9118a3ff811377d534912039a3311815700d2b6d2313f82f736f9eb6e
+  languageName: node
+  linkType: hard
+
 "randombytes@npm:^2.1.0":
   version: 2.1.0
   resolution: "randombytes@npm:2.1.0"
@@ -7253,6 +7421,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"regenerator-runtime@npm:^0.13.7":
+  version: 0.13.11
+  resolution: "regenerator-runtime@npm:0.13.11"
+  checksum: 10c0/12b069dc774001fbb0014f6a28f11c09ebfe3c0d984d88c9bced77fdb6fedbacbca434d24da9ae9371bfbf23f754869307fb51a4c98a8b8b18e5ef748677ca24
+  languageName: node
+  linkType: hard
+
 "regenerator-runtime@npm:^0.14.0":
   version: 0.14.0
   resolution: "regenerator-runtime@npm:0.14.0"
@@ -7413,6 +7588,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rgbcolor@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "rgbcolor@npm:1.0.1"
+  checksum: 10c0/13af06c523351bac2854b85a22d1dfafd9310efd898e9bd96c8706f9aa09a3ddc8392ab00ae03d12950782164a97677f21834ffd84ffebf76ae106add319f956
+  languageName: node
+  linkType: hard
+
 "rimraf@npm:^3.0.2":
   version: 3.0.2
   resolution: "rimraf@npm:3.0.2"
@@ -7753,6 +7935,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"specificity@npm:^0.4.1":
+  version: 0.4.1
+  resolution: "specificity@npm:0.4.1"
+  bin:
+    specificity: ./bin/specificity
+  checksum: 10c0/5da85a05052b55e344cb0f5bce5d07cbabbbe8945da176a481589db5a13e9fbcfa879ceb075cf564b94e680fae0a2ab14ea55cc87496b86a6d5122545946d7c2
+  languageName: node
+  linkType: hard
+
 "ssri@npm:^10.0.0":
   version: 10.0.5
   resolution: "ssri@npm:10.0.5"
@@ -7762,6 +7953,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stackblur-canvas@npm:^2.0.0":
+  version: 2.7.0
+  resolution: "stackblur-canvas@npm:2.7.0"
+  checksum: 10c0/df290d0629056d5bb43d37548d0b24cb8593c79d742650e68489abf61013db578c9980724c2508bb738d107204f2e2494ab94c3cf69d6b725caa9c63b8c7e272
+  languageName: node
+  linkType: hard
+
 "string-width-cjs@npm:string-width@^4.2.0, string-width@npm:^1.0.2 || 2 || 3 || 4, string-width@npm:^4.1.0, string-width@npm:^4.2.0, string-width@npm:^4.2.3":
   version: 4.2.3
   resolution: "string-width@npm:4.2.3"
@@ -7931,6 +8129,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"svg-pathdata@npm:^6.0.3":
+  version: 6.0.3
+  resolution: "svg-pathdata@npm:6.0.3"
+  checksum: 10c0/1ba4ad2fa81e86df37d6e78d3be9e664bbedf97773b725a863a85db384285be32dc37d9c0d61e477d89594ee95b967d2c53d6bee2d76420aab670ab4124a38b9
+  languageName: node
+  linkType: hard
+
+"svg2pdf.js@npm:^2.2.3":
+  version: 2.2.3
+  resolution: "svg2pdf.js@npm:2.2.3"
+  dependencies:
+    cssesc: "npm:^3.0.0"
+    font-family-papandreou: "npm:^0.2.0-patch1"
+    specificity: "npm:^0.4.1"
+    svgpath: "npm:^2.3.0"
+  peerDependencies:
+    jspdf: ^2.0.0
+  checksum: 10c0/9845b837152b255c94ac6ba12e6376e771b18cb7bbfab6b11b56a19f437bca2e077386e58b5aa3f57ada021797ab784c6379d5be8d1df911eb705402f45d0cb2
+  languageName: node
+  linkType: hard
+
+"svgpath@npm:^2.3.0":
+  version: 2.6.0
+  resolution: "svgpath@npm:2.6.0"
+  checksum: 10c0/aed042d7cc0e2f3b55d618af2bee58faf8820d53f5d45490194e9bd1cd9ae7d57be641fd3692429a133be2ffb75ff43aad2e6b1c297359ffbc808016a106f199
+  languageName: node
+  linkType: hard
+
 "synckit@npm:^0.8.6":
   version: 0.8.8
   resolution: "synckit@npm:0.8.8"
@@ -7995,6 +8221,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"text-segmentation@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "text-segmentation@npm:1.0.3"
+  dependencies:
+    utrie: "npm:^1.0.2"
+  checksum: 10c0/8b9ae8524e3a332371060d0ca62f10ad49a13e954719ea689a6c3a8b8c15c8a56365ede2bb91c322fb0d44b6533785f0da603e066b7554d052999967fb72d600
+  languageName: node
+  linkType: hard
+
 "text-table@npm:^0.2.0":
   version: 0.2.0
   resolution: "text-table@npm:0.2.0"
@@ -8295,6 +8530,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"utrie@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "utrie@npm:1.0.2"
+  dependencies:
+    base64-arraybuffer: "npm:^1.0.2"
+  checksum: 10c0/eaffe645bd81a39e4bc3abb23df5895e9961dbdd49748ef3b173529e8b06ce9dd1163e9705d5309a1c61ee41ffcb825e2043bc0fd1659845ffbdf4b1515dfdb4
+  languageName: node
+  linkType: hard
+
 "vite-plugin-pwa@npm:^0.19.0":
   version: 0.19.0
   resolution: "vite-plugin-pwa@npm:0.19.0"
@@ -8316,9 +8560,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:^5.1.3":
-  version: 5.1.3
-  resolution: "vite@npm:5.1.3"
+"vite@npm:^5.1.4":
+  version: 5.1.4
+  resolution: "vite@npm:5.1.4"
   dependencies:
     esbuild: "npm:^0.19.3"
     fsevents: "npm:~2.3.3"
@@ -8352,7 +8596,7 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: 10c0/d3b19607d736de60b660f7daf4c0f86589edcbbc1fcb09f8aa36630f99518cc8a063062bb952899b8ccaed62f1314fac22c1df492dd035de3c65998ab27e2d2a
+  checksum: 10c0/8f04c8bed33f266bde27f432412456a3b893b51fe1857f0b8cd259100b376c1393a7927db1dd6344a4376baed72ed179ec5b0428aef2ae8508f1f28f95acb908
   languageName: node
   linkType: hard
 
diff --git a/yarn.lock.license b/yarn.lock.license
index 7a5a2a4b..062a2796 100644
--- a/yarn.lock.license
+++ b/yarn.lock.license
@@ -1,3 +1,3 @@
-SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+SPDX-FileCopyrightText: 2021-2024 The Refinery Authors <https://refinery.tools/>
 
 SPDX-License-Identifier: CC0-1.0