feat(frontend): graph export formal selector

10 files changed, 871 insertions, 448 deletions

diff --git a/subprojects/frontend/src/RootStore.ts b/subprojects/frontend/src/RootStore.ts
index e277c808..27bff0de 100644
--- a/subprojects/frontend/src/RootStore.ts
+++ b/subprojects/frontend/src/RootStore.ts
@@ -9,6 +9,7 @@ import { makeAutoObservable, runInAction } from 'mobx';
 
 import PWAStore from './PWAStore';
 import type EditorStore from './editor/EditorStore';
+import ExportSettingsScotre from './graph/ExportSettingsStore';
 import Compressor from './persistence/Compressor';
 import ThemeStore from './theme/ThemeStore';
 
@@ -29,16 +30,20 @@ export default class RootStore {
 
   readonly themeStore: ThemeStore;
 
+  readonly exportSettingsStore: ExportSettingsScotre;
+
   disposed = false;
 
   constructor() {
     this.pwaStore = new PWAStore();
     this.themeStore = new ThemeStore();
+    this.exportSettingsStore = new ExportSettingsScotre();
     makeAutoObservable<RootStore, 'compressor' | 'editorStoreClass'>(this, {
       compressor: false,
       editorStoreClass: false,
       pwaStore: false,
       themeStore: false,
+      exportSettingsStore: false,
     });
     (async () => {
       const { default: EditorStore } = await import('./editor/EditorStore');
diff --git a/subprojects/frontend/src/graph/ExportPanel.tsx b/subprojects/frontend/src/graph/ExportPanel.tsx
new file mode 100644
index 00000000..2621deff
--- /dev/null
+++ b/subprojects/frontend/src/graph/ExportPanel.tsx
@@ -0,0 +1,215 @@
+/*
+ * 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 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="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.format === 'svg' && (
+        <FormControlLabel
+          control={
+            <Switch
+              checked={exportSettingsStore.embedFonts}
+              onClick={() => exportSettingsStore.toggleEmbedFonts()}
+            />
+          }
+          label={
+            <Stack direction="column">
+              <Typography>Embed fonts</Typography>
+              <Typography variant="caption">
+                +75&thinsp;kB, only supported in browsers
+              </Typography>
+            </Stack>
+          }
+        />
+      )}
+      {exportSettingsStore.format === 'png' && (
+        <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/ExportSettingsStore.tsx b/subprojects/frontend/src/graph/ExportSettingsStore.tsx
new file mode 100644
index 00000000..8ee91b73
--- /dev/null
+++ b/subprojects/frontend/src/graph/ExportSettingsStore.tsx
@@ -0,0 +1,46 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import { makeAutoObservable } from 'mobx';
+
+export type ExportFormat = 'svg' | 'png';
+export type ExportTheme = 'light' | 'dark';
+
+export default class ExportSettingsStore {
+  format: ExportFormat = 'svg';
+
+  theme: ExportTheme = 'light';
+
+  transparent = true;
+
+  embedFonts = false;
+
+  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;
+  }
+}
diff --git a/subprojects/frontend/src/graph/GraphArea.tsx b/subprojects/frontend/src/graph/GraphArea.tsx
index 2bf40d1a..1416a259 100644
--- a/subprojects/frontend/src/graph/GraphArea.tsx
+++ b/subprojects/frontend/src/graph/GraphArea.tsx
@@ -11,7 +11,7 @@ import { useState } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
 import DotGraphVisualizer from './DotGraphVisualizer';
-import ExportButton from './ExportButton';
+import ExportPanel from './ExportPanel';
 import type GraphStore from './GraphStore';
 import VisibilityPanel from './VisibilityPanel';
 import ZoomCanvas from './ZoomCanvas';
@@ -48,7 +48,7 @@ function GraphArea({ graph }: { graph: GraphStore }): JSX.Element {
         )}
       </ZoomCanvas>
       <VisibilityPanel graph={graph} dialog={dialog} />
-      <ExportButton svgContainer={svgContainer} />
+      <ExportPanel graph={graph} svgContainer={svgContainer} dialog={dialog} />
     </Box>
   );
 }
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/ExportButton.tsx b/subprojects/frontend/src/graph/exportDiagram.tsx
index 97444c6e..46c7f199 100644
--- a/subprojects/frontend/src/graph/ExportButton.tsx
+++ b/subprojects/frontend/src/graph/exportDiagram.tsx
@@ -15,38 +15,23 @@ import variableFontURL from '@fontsource-variable/open-sans/files/open-sans-lati
 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 SaveAltIcon from '@mui/icons-material/SaveAlt';
-import IconButton from '@mui/material/IconButton';
-import { styled, useTheme, type Theme } from '@mui/material/styles';
-import { useCallback } from 'react';
+import type { Theme } from '@mui/material/styles';
 
-import getLogger from '../utils/getLogger';
+import { darkTheme, lightTheme } from '../theme/ThemeProvider';
 
+import type ExportSettingsStore from './ExportSettingsStore';
+import type GraphStore from './GraphStore';
 import { createGraphTheme } from './GraphTheme';
 import { SVG_NS } from './postProcessSVG';
 
-const log = getLogger('graph.ExportButton');
-
 const PROLOG = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>';
-
-const ExportButtonRoot = styled('div', {
-  name: 'ExportButton-Root',
-})(({ theme }) => ({
-  position: 'absolute',
-  padding: theme.spacing(1),
-  top: 0,
-  right: 0,
-  overflow: 'hidden',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'start',
-}));
+const SVG_CONTENT_TYPE = 'image/svg+xml';
 
 const ICONS: Map<string, Element> = new Map();
 
 function importSVG(svgSource: string, className: string): void {
   const parser = new DOMParser();
-  const svgDocument = parser.parseFromString(svgSource, 'image/svg+xml');
+  const svgDocument = parser.parseFromString(svgSource, SVG_CONTENT_TYPE);
   const root = svgDocument.children[0];
   if (root === undefined) {
     return;
@@ -60,6 +45,21 @@ 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();
@@ -139,12 +139,13 @@ async function fetchVariableFontCSS(): Promise<string> {
   return variableFontCSS;
 }
 
-async function appendStyles(
+function appendStyles(
   svgDocument: XMLDocument,
   svg: SVGSVGElement,
   theme: Theme,
-  embedFonts?: 'woff2' | 'woff2-variations',
-): Promise<void> {
+  colorNodes: boolean,
+  fontsCSS: string,
+): void {
   const cache = createCache({
     key: 'refinery',
     container: svg,
@@ -154,15 +155,10 @@ async function appendStyles(
   // `@emotion/serialize`, but they are compatible in practice.
   const styles = serializeStyles([createGraphTheme], cache.registered, {
     theme,
-    colorNodes: true,
+    colorNodes,
     noEmbedIcons: true,
   });
-  const rules: string[] = [];
-  if (embedFonts === 'woff2') {
-    rules.push(await fetchFontCSS());
-  } else if (embedFonts === 'woff2-variations') {
-    rules.push(await fetchVariableFontCSS());
-  }
+  const rules: string[] = [fontsCSS];
   const sheet = {
     insert(rule) {
       rules.push(rule);
@@ -209,24 +205,112 @@ function fixForeignObjects(svgDocument: XMLDocument, svg: SVGSVGElement): void {
   });
 }
 
-function downloadSVG(svgDocument: XMLDocument): void {
+function serializeSVG(svgDocument: XMLDocument): Blob {
   const serializer = new XMLSerializer();
   const svgText = `${PROLOG}\n${serializer.serializeToString(svgDocument)}`;
-  const blob = new Blob([svgText], {
-    type: 'image/svg+xml',
+  return new Blob([svgText], {
+    type: SVG_CONTENT_TYPE,
   });
+}
+
+function downloadBlob(blob: Blob, name: string): void {
   const link = document.createElement('a');
-  link.href = window.URL.createObjectURL(blob);
-  link.download = 'graph.svg';
-  link.style.display = 'none';
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
+  const url = window.URL.createObjectURL(blob);
+  try {
+    link.href = url;
+    link.download = name;
+    link.style.display = 'none';
+    document.body.appendChild(link);
+    link.click();
+  } finally {
+    window.URL.revokeObjectURL(url);
+    document.body.removeChild(link);
+  }
 }
 
-async function exportSVG(
-  svgContainer: HTMLElement | undefined,
+async function copyBlob(blob: Blob): Promise<void> {
+  const { clipboard } = navigator;
+  if ('write' in clipboard) {
+    await clipboard.write([
+      new ClipboardItem({
+        [blob.type]: blob,
+      }),
+    ]);
+  }
+}
+
+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);
+      }
+    }, 'image/png');
+  });
+}
+
+export default async function exportDiagram(
+  svgContainer: HTMLElement | undefined,
+  graph: GraphStore,
+  settings: ExportSettingsStore,
+  mode: 'download' | 'copy',
 ): Promise<void> {
   const svg = svgContainer?.querySelector('svg');
   if (!svg) {
@@ -244,28 +328,36 @@ async function exportSVG(
   } else {
     svgDocument.replaceChild(copyOfSVG, originalRoot);
   }
+
+  const theme = settings.theme === 'light' ? lightTheme : darkTheme;
+  if (!settings.transparent) {
+    addBackground(svgDocument, copyOfSVG, theme);
+  }
+
   fixForeignObjects(svgDocument, copyOfSVG);
-  await appendStyles(svgDocument, copyOfSVG, theme);
-  downloadSVG(svgDocument);
-}
 
-export default function ExportButton({
-  svgContainer,
-}: {
-  svgContainer: HTMLElement | undefined;
-}): JSX.Element {
-  const theme = useTheme();
-  const saveCallback = useCallback(() => {
-    exportSVG(svgContainer, theme).catch((error) => {
-      log.error('Failed to export SVG', error);
-    });
-  }, [svgContainer, theme]);
+  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.embedFonts) {
+    fontsCSS = await fetchFontCSS();
+  }
+  appendStyles(svgDocument, copyOfSVG, theme, colorNodes, fontsCSS);
 
-  return (
-    <ExportButtonRoot>
-      <IconButton aria-label="Save SVG" onClick={saveCallback}>
-        <SaveAltIcon />
-      </IconButton>
-    </ExportButtonRoot>
-  );
+  const serializedSVG = serializeSVG(svgDocument);
+  if (settings.format === 'png') {
+    const png = await serializePNG(serializedSVG, svg, settings, theme);
+    if (mode === 'copy') {
+      await copyBlob(png);
+    } else {
+      downloadBlob(png, 'graph.png');
+    }
+  } else if (mode === 'copy') {
+    await copyBlob(serializedSVG);
+  } else {
+    downloadBlob(serializedSVG, 'graph.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';