From 7c3e31623935133123f1b4062572766e4a78e528 Mon Sep 17 00:00:00 2001
From: Sergei Garin <sergikgarin@gmail.com>
Date: Sat, 23 Mar 2024 22:44:56 +0400
Subject: [PATCH] Diff editor (#9458)

Closes  enso-org/cloud#940
---
 app/ide-desktop/eslint.config.js              |   17 +-
 app/ide-desktop/lib/assets/close.svg          |    2 +-
 app/ide-desktop/lib/assets/close_large.svg    |    4 +-
 app/ide-desktop/lib/assets/dismiss.svg        |    6 +
 app/ide-desktop/lib/dashboard/package.json    |   10 +-
 app/ide-desktop/lib/dashboard/src/App.tsx     |   22 +-
 .../AriaComponents/Button/Button.tsx          |   67 +
 .../AriaComponents/Dialog/Dialog.tsx          |   86 +
 .../AriaComponents/Dialog/DialogTrigger.tsx   |   45 +
 .../components/AriaComponents/Dialog/index.ts |    8 +
 .../components/AriaComponents/Dialog/types.ts |   30 +
 .../AriaComponents/Tooltip/Tooltip.tsx        |   50 +
 .../src/components/AriaComponents/index.ts    |    7 +
 .../dashboard/src/components/MenuEntry.tsx    |    3 +-
 .../src/components/Portal/Portal.tsx          |   44 +
 .../src/components/Portal/PortalProvider.ts   |   42 +
 .../dashboard/src/components/Portal/index.ts  |   12 +
 .../dashboard/src/components/Portal/types.ts  |   27 +
 .../src/components/Portal/usePortal.ts        |   50 +
 .../lib/dashboard/src/components/Root.tsx     |   35 +
 .../src/components/SelectionBrush.tsx         |   23 +-
 .../dashboard/src/components/SubmitButton.tsx |    2 +-
 .../layouts/AssetDiffView/AssetDiffView.tsx   |   74 +
 .../src/layouts/AssetDiffView/index.ts        |    5 +
 .../AssetDiffView/useFetchVersionContent.ts   |   55 +
 .../lib/dashboard/src/layouts/AssetPanel.tsx  |    4 +-
 .../dashboard/src/layouts/AssetVersion.tsx    |   58 +-
 .../dashboard/src/layouts/AssetVersions.tsx   |   63 -
 .../layouts/AssetVersions/AssetVersions.tsx   |   80 +
 .../layouts/AssetVersions/useAssetVersions.ts |   47 +
 .../lib/dashboard/src/layouts/TopBar.tsx      |   54 +-
 .../src/pages/dashboard/Dashboard.tsx         |    9 +-
 .../lib/dashboard/src/services/Backend.ts     |    4 +
 .../dashboard/src/services/RemoteBackend.ts   |   14 +
 .../src/services/remoteBackendPaths.ts        |    8 +
 .../lib/dashboard/src/utilities/event.ts      |   19 +
 .../lib/dashboard/tailwind.config.js          |    2 +
 app/ide-desktop/lib/dashboard/tsconfig.json   |    1 +
 package-lock.json                             | 2036 +++++++++++++++--
 39 files changed, 2738 insertions(+), 387 deletions(-)
 create mode 100644 app/ide-desktop/lib/assets/dismiss.svg
 create mode 100644 app/ide-desktop/lib/dashboard/src/components/AriaComponents/Button/Button.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/DialogTrigger.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/index.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/types.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/components/AriaComponents/Tooltip/Tooltip.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/components/AriaComponents/index.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/components/Portal/Portal.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/components/Portal/PortalProvider.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/components/Portal/index.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/components/Portal/types.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/components/Portal/usePortal.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/components/Root.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/layouts/AssetDiffView/AssetDiffView.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/layouts/AssetDiffView/index.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/layouts/AssetDiffView/useFetchVersionContent.ts
 delete mode 100644 app/ide-desktop/lib/dashboard/src/layouts/AssetVersions.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/layouts/AssetVersions/AssetVersions.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/layouts/AssetVersions/useAssetVersions.ts

diff --git a/app/ide-desktop/eslint.config.js b/app/ide-desktop/eslint.config.js
index 8a171824302..13e5d8c1415 100644
--- a/app/ide-desktop/eslint.config.js
+++ b/app/ide-desktop/eslint.config.js
@@ -30,14 +30,13 @@ const NAME = 'enso'
  * `yargs` is a modules we explicitly want the default imports of.
  * `node:process` is here because `process.on` does not exist on the namespace import. */
 const DEFAULT_IMPORT_ONLY_MODULES =
-    '@vitejs\\u002Fplugin-react|node:process|chalk|string-length|yargs|yargs\\u002Fyargs|sharp|to-ico|connect|morgan|serve-static|create-servers|electron-is-dev|fast-glob|esbuild-plugin-.+|opener|tailwindcss.*|enso-assets.*|@modyfi\\u002Fvite-plugin-yaml|is-network-error|validator.+'
+    '@vitejs\\u002Fplugin-react|node:process|chalk|string-length|yargs|yargs\\u002Fyargs|sharp|to-ico|connect|morgan|serve-static|tiny-invariant|clsx|create-servers|electron-is-dev|fast-glob|esbuild-plugin-.+|opener|tailwindcss.*|enso-assets.*|@modyfi\\u002Fvite-plugin-yaml|is-network-error|validator.+'
 const OUR_MODULES = 'enso-.*'
 const RELATIVE_MODULES =
     'bin\\u002Fproject-manager|bin\\u002Fserver|config\\u002Fparser|authentication|config|debug|detect|file-associations|index|ipc|log|naming|paths|preload|project-management|security|url-associations|#\\u002F.*'
 const ALLOWED_DEFAULT_IMPORT_MODULES = `${DEFAULT_IMPORT_ONLY_MODULES}|postcss|ajv\\u002Fdist\\u002F2020|${RELATIVE_MODULES}`
 const STRING_LITERAL = ':matches(Literal[raw=/^["\']/], TemplateLiteral)'
 const JSX = ':matches(JSXElement, JSXFragment)'
-const NOT_PASCAL_CASE = '/^(?!do[A-Z])(?!_?([A-Z][a-z0-9]*)+$)/'
 const NOT_CAMEL_CASE = '/^(?!_?[a-z][a-z0-9*]*([A-Z0-9][a-z0-9]*)*$)(?!React$)/'
 const WHITELISTED_CONSTANTS = 'logger|.+Context|interpolationFunction.+'
 const NOT_CONSTANT_CASE = `/^(?!${WHITELISTED_CONSTANTS}$|_?[A-Z][A-Z0-9]*(_[A-Z0-9]+)*$)/`
@@ -117,11 +116,6 @@ const RESTRICTED_SYNTAXES = [
         message:
             'No aliases to primitives - consider using brands instead: `string & { _brand: "BrandName"; }`',
     },
-    {
-        // Matches functions and arrow functions, but not methods.
-        selector: `:matches(FunctionDeclaration[id.name=${NOT_PASCAL_CASE}]:has(${JSX}), VariableDeclarator[id.name=${NOT_PASCAL_CASE}]:has(:matches(ArrowFunctionExpression.init ${JSX})))`,
-        message: 'Use `PascalCase` for React components',
-    },
     {
         // Matches other functions, non-consts, and consts not at the top level.
         selector: `:matches(FunctionDeclaration[id.name=${NOT_CAMEL_CASE}]:not(:has(${JSX})), VariableDeclarator[id.name=${NOT_CAMEL_CASE}]:has(ArrowFunctionExpression.init:not(:has(${JSX}))), :matches(VariableDeclaration[kind^=const], Program :not(ExportNamedDeclaration, TSModuleBlock) > VariableDeclaration[kind=const], ExportNamedDeclaration > * VariableDeclaration[kind=const]) > VariableDeclarator[id.name=${NOT_CAMEL_CASE}]:not(:has(ArrowFunctionExpression)))`,
@@ -228,11 +222,6 @@ const RESTRICTED_SYNTAXES = [
         selector: 'CallExpression[callee.name=toastAndLog][arguments.0.value=/\\.$/]',
         message: '`toastAndLog` already includes a trailing `.`',
     },
-    {
-        selector:
-            'JSXElement[closingElement!=null]:not(:has(.children:matches(JSXText[raw=/\\S/], :not(JSXText))))',
-        message: 'Use self-closing tags (`<tag />`) for tags without children',
-    },
 ]
 
 // ============================
@@ -275,7 +264,7 @@ export default [
             ...tsEslint.configs.recommended?.rules,
             ...tsEslint.configs['recommended-requiring-type-checking']?.rules,
             ...tsEslint.configs.strict?.rules,
-            ...react.configs.recommended.rules,
+            ...react.configs['jsx-runtime'].rules,
             eqeqeq: ['error', 'always', { null: 'never' }],
             'jsdoc/require-jsdoc': [
                 'error',
@@ -303,8 +292,10 @@ export default [
             'prefer-const': 'error',
             // Not relevant because TypeScript checks types.
             'react/prop-types': 'off',
+            'react/self-closing-comp': 'error',
             'react-hooks/rules-of-hooks': 'error',
             'react-hooks/exhaustive-deps': 'error',
+            'react/jsx-pascal-case': ['error', { allowNamespace: true }],
             // Prefer `interface` over `type`.
             '@typescript-eslint/consistent-type-definitions': 'error',
             '@typescript-eslint/consistent-type-imports': 'error',
diff --git a/app/ide-desktop/lib/assets/close.svg b/app/ide-desktop/lib/assets/close.svg
index 85289e5b655..ed00b95ac7c 100644
--- a/app/ide-desktop/lib/assets/close.svg
+++ b/app/ide-desktop/lib/assets/close.svg
@@ -3,4 +3,4 @@
         d="M10.7031 5.29813C10.3126 4.90761 9.67944 4.90761 9.28892 5.29813L7.99609 6.59096L6.70718 5.30204C6.31665 4.91151 5.68349 4.91151 5.29296 5.30204C4.90244 5.69256 4.90244 6.32573 5.29296 6.71625L6.58188 8.00517L5.29298 9.29408C4.90245 9.6846 4.90245 10.3178 5.29298 10.7083C5.6835 11.0988 6.31666 11.0988 6.70719 10.7083L7.99609 9.41938L9.28695 10.7102C9.67748 11.1008 10.3106 11.1008 10.7012 10.7102C11.0917 10.3197 11.0917 9.68655 10.7012 9.29603L9.41031 8.00517L10.7031 6.71235C11.0937 6.32182 11.0937 5.68866 10.7031 5.29813Z"
         fill="black" />
     <circle cx="8" cy="8" r="7" stroke="black" stroke-width="2" />
-</svg>
\ No newline at end of file
+</svg>
diff --git a/app/ide-desktop/lib/assets/close_large.svg b/app/ide-desktop/lib/assets/close_large.svg
index 03e9a809df1..fd0f0fbaf2a 100644
--- a/app/ide-desktop/lib/assets/close_large.svg
+++ b/app/ide-desktop/lib/assets/close_large.svg
@@ -1,7 +1,7 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <circle cx="12" cy="12" r="12" fill="black" fill-opacity="0.22" />
     <g opacity="0.66">
         <rect x="16.2426" y="17.6569" width="14" height="2" transform="rotate(-135 16.2426 17.6569)" fill="white" />
         <rect x="6.34302" y="16.2426" width="14" height="2" transform="rotate(-45 6.34302 16.2426)" fill="white" />
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/app/ide-desktop/lib/assets/dismiss.svg b/app/ide-desktop/lib/assets/dismiss.svg
new file mode 100644
index 00000000000..6bc990eaa4c
--- /dev/null
+++ b/app/ide-desktop/lib/assets/dismiss.svg
@@ -0,0 +1,6 @@
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g>
+        <rect x="16.2426" y="17.6569" width="14" height="2" transform="rotate(-135 16.2426 17.6569)" fill="white" />
+        <rect x="6.34302" y="16.2426" width="14" height="2" transform="rotate(-45 6.34302 16.2426)" fill="white" />
+    </g>
+</svg>
diff --git a/app/ide-desktop/lib/dashboard/package.json b/app/ide-desktop/lib/dashboard/package.json
index 56e9978b132..be4f64822dd 100644
--- a/app/ide-desktop/lib/dashboard/package.json
+++ b/app/ide-desktop/lib/dashboard/package.json
@@ -43,7 +43,14 @@
     "react-router-dom": "^6.8.1",
     "react-toastify": "^9.1.3",
     "ts-results": "^3.3.0",
-    "validator": "^13.11.0"
+    "validator": "^13.11.0",
+    "monaco-editor": "0.47.0",
+    "@monaco-editor/react": "4.6.0",
+    "@tanstack/react-query": "^5.27.5",
+    "clsx": "^1.1.1",
+    "tiny-invariant": "^1.3.3",
+    "tailwind-merge": "^2.2.1",
+    "react-aria-components": "^1.1.1"
   },
   "devDependencies": {
     "@babel/plugin-syntax-import-assertions": "^7.23.3",
@@ -76,6 +83,7 @@
     "prettier-plugin-tailwindcss": "^0.5.11",
     "react-toastify": "^9.1.3",
     "tailwindcss": "^3.4.1",
+    "tailwindcss-react-aria-components": "^1.1.1",
     "ts-plugin-namespace-auto-import": "^1.0.0",
     "typescript": "~5.2.2",
     "vite": "^4.4.9",
diff --git a/app/ide-desktop/lib/dashboard/src/App.tsx b/app/ide-desktop/lib/dashboard/src/App.tsx
index be4a3631826..1f7296e7a10 100644
--- a/app/ide-desktop/lib/dashboard/src/App.tsx
+++ b/app/ide-desktop/lib/dashboard/src/App.tsx
@@ -35,6 +35,7 @@
  * {@link authProvider.FullUserSession}). */
 import * as React from 'react'
 
+import * as reactQuery from '@tanstack/react-query'
 import * as router from 'react-router-dom'
 import * as toastify from 'react-toastify'
 
@@ -63,6 +64,8 @@ import SetUsername from '#/pages/authentication/SetUsername'
 import Dashboard from '#/pages/dashboard/Dashboard'
 import Subscribe from '#/pages/subscribe/Subscribe'
 
+import * as rootComponent from '#/components/Root'
+
 import type Backend from '#/services/Backend'
 import LocalBackend from '#/services/LocalBackend'
 
@@ -141,11 +144,12 @@ export default function App(props: AppProps) {
   // This is a React component even though it does not contain JSX.
   // eslint-disable-next-line no-restricted-syntax
   const Router = detect.isOnElectron() ? router.HashRouter : router.BrowserRouter
+  const queryClient = React.useMemo(() => new reactQuery.QueryClient(), [])
   // Both `BackendProvider` and `InputBindingsProvider` depend on `LocalStorageProvider`.
   // Note that the `Router` must be the parent of the `AuthProvider`, because the `AuthProvider`
   // will redirect the user between the login/register pages and the dashboard.
   return (
-    <>
+    <reactQuery.QueryClientProvider client={queryClient}>
       <toastify.ToastContainer
         position="top-center"
         theme="light"
@@ -160,7 +164,7 @@ export default function App(props: AppProps) {
           <AppRouter {...props} />
         </LocalStorageProvider>
       </Router>
-    </>
+    </reactQuery.QueryClientProvider>
   )
 }
 
@@ -186,6 +190,9 @@ function AppRouter(props: AppProps) {
     window.navigate = navigate
   }
   const [inputBindingsRaw] = React.useState(() => inputBindingsModule.createBindings())
+  const [root] = React.useState<React.RefObject<HTMLElement>>(() => ({
+    current: document.getElementById('enso-dashboard'),
+  }))
 
   React.useEffect(() => {
     const savedInputBindings = localStorage.get('inputBindings')
@@ -274,7 +281,11 @@ function AppRouter(props: AppProps) {
       isClick = true
     }
     const onMouseUp = (event: MouseEvent) => {
-      if (isClick && !eventModule.isElementTextInput(event.target)) {
+      if (
+        isClick &&
+        !eventModule.isElementTextInput(event.target) &&
+        !eventModule.isElementPartOfMonaco(event.target)
+      ) {
         const selection = document.getSelection()
         const app = document.getElementById('app')
         const appContainsSelection =
@@ -359,5 +370,10 @@ function AppRouter(props: AppProps) {
     </SessionProvider>
   )
   result = <LoggerProvider logger={logger}>{result}</LoggerProvider>
+  result = (
+    <rootComponent.Root rootRef={root} navigate={navigate}>
+      {result}
+    </rootComponent.Root>
+  )
   return result
 }
diff --git a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Button/Button.tsx b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Button/Button.tsx
new file mode 100644
index 00000000000..5697cd8fff9
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Button/Button.tsx
@@ -0,0 +1,67 @@
+/**
+ * @file Button.tsx
+ *
+ * Button component
+ */
+import clsx from 'clsx'
+import * as reactAriaComponents from 'react-aria-components'
+import * as tailwindMerge from 'tailwind-merge'
+
+import SvgMask from '#/components/SvgMask'
+
+/**
+ * Props for the Button component
+ */
+export interface ButtonProps extends reactAriaComponents.ButtonProps {
+  readonly variant: 'icon'
+  readonly icon?: string
+  /**
+   * FIXME: This is not yet implemented
+   * The position of the icon in the button
+   * @default 'start'
+   */
+  readonly iconPosition?: 'end' | 'start'
+}
+
+const DEFAULT_CLASSES =
+  'flex cursor-pointer rounded-sm border border-transparent transition-opacity duration-200 ease-in-out'
+const FOCUS_CLASSES =
+  'focus-visible:outline-offset-2 focus:outline-none focus-visible:outline focus-visible:outline-primary'
+const ICON_CLASSES = 'opacity-50 hover:opacity-100'
+const EXTRA_CLICK_ZONE_CLASSES = 'flex relative before:inset-[-12px] before:absolute before:z-10'
+const DISABLED_CLASSES = 'disabled:opacity-50 disabled:cursor-not-allowed'
+
+/**
+ * A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
+ */
+export function Button(props: ButtonProps) {
+  const { className, children, icon, ...ariaButtonProps } = props
+
+  const classes = clsx(DEFAULT_CLASSES, DISABLED_CLASSES, FOCUS_CLASSES, ICON_CLASSES)
+
+  const childrenFactory = () => {
+    return icon != null ? (
+      <>
+        <div className={EXTRA_CLICK_ZONE_CLASSES}>
+          <SvgMask src={icon} />
+        </div>
+      </>
+    ) : (
+      children
+    )
+  }
+
+  return (
+    <reactAriaComponents.Button
+      className={values =>
+        tailwindMerge.twMerge(
+          classes,
+          typeof className === 'function' ? className(values) : className
+        )
+      }
+      {...ariaButtonProps}
+    >
+      {childrenFactory()}
+    </reactAriaComponents.Button>
+  )
+}
diff --git a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx
new file mode 100644
index 00000000000..ce72bc1d116
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx
@@ -0,0 +1,86 @@
+/**
+ * @file
+ * A dialog is an overlay shown above other content in an application.
+ * Can be used to display alerts, confirmations, or other content.
+ */
+import * as React from 'react'
+
+import * as reactAriaComponents from 'react-aria-components'
+import * as tailwindMerge from 'tailwind-merge'
+
+import Dismiss from 'enso-assets/dismiss.svg'
+
+import * as ariaComponents from '#/components/AriaComponents'
+import * as portal from '#/components/Portal'
+
+import type * as types from './types'
+
+const MODAL_CLASSES =
+  'fixed z-1 top-0 left-0 right-0 bottom-0 bg-black/[15%] flex items-center justify-center text-center'
+const DIALOG_CLASSES =
+  'relative flex flex-col overflow-hidden rounded-xl text-left align-middle text-slate-700 shadow-2xl bg-clip-padding border border-black/10 before:absolute before:inset before:h-full before:w-full before:rounded-default before:bg-selected-frame before:backdrop-blur-default'
+
+const MODAL_CLASSES_BY_TYPE = {
+  modal: 'p-4',
+  popover: '',
+  fullscreen: 'p-4',
+} satisfies Record<types.DialogType, string>
+
+const DIALOG_CLASSES_BY_TYPE = {
+  modal: 'w-full max-w-md min-h-[200px] h-[90vh] max-h-[90vh]',
+  popover: 'rounded-lg',
+  fullscreen: 'w-full h-full max-w-full max-h-full bg-clip-border',
+} satisfies Record<types.DialogType, string>
+
+/**
+ * A dialog is an overlay shown above other content in an application.
+ * Can be used to display alerts, confirmations, or other content.
+ */
+export function Dialog(props: types.DialogProps) {
+  const {
+    children,
+    title,
+    type = 'modal',
+    isDismissible = true,
+    isKeyboardDismissDisabled = false,
+    className,
+    ...ariaDialogProps
+  } = props
+
+  const root = portal.useStrictPortalContext()
+
+  return (
+    <reactAriaComponents.Modal
+      className={tailwindMerge.twMerge(MODAL_CLASSES, [MODAL_CLASSES_BY_TYPE[type]])}
+      isDismissable={isDismissible}
+      isKeyboardDismissDisabled={isKeyboardDismissDisabled}
+      UNSTABLE_portalContainer={root.current}
+    >
+      <reactAriaComponents.Dialog
+        className={tailwindMerge.twMerge(DIALOG_CLASSES, [DIALOG_CLASSES_BY_TYPE[type]], className)}
+        {...ariaDialogProps}
+      >
+        {opts => (
+          <>
+            {typeof title === 'string' && (
+              <reactAriaComponents.Header className="center sticky flex flex-none border-b px-3.5 py-2.5 text-primary shadow">
+                <h2 className="text-l my-0 font-semibold leading-6">{title}</h2>
+
+                <ariaComponents.Button
+                  variant="icon"
+                  className="my-auto ml-auto"
+                  onPress={opts.close}
+                  icon={Dismiss}
+                />
+              </reactAriaComponents.Header>
+            )}
+
+            <div className="flex-1 shrink-0">
+              {typeof children === 'function' ? children(opts) : children}
+            </div>
+          </>
+        )}
+      </reactAriaComponents.Dialog>
+    </reactAriaComponents.Modal>
+  )
+}
diff --git a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/DialogTrigger.tsx b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/DialogTrigger.tsx
new file mode 100644
index 00000000000..ebf20dfb9c7
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/DialogTrigger.tsx
@@ -0,0 +1,45 @@
+/**
+ * @file
+ *
+ * A DialogTrigger opens a dialog when a trigger element is pressed.
+ */
+import * as React from 'react'
+
+import * as reactAriaComponents from 'react-aria-components'
+
+import * as modalProvider from '#/providers/ModalProvider'
+
+import type * as types from './types'
+
+const PLACEHOLDER = <div />
+
+/**
+ * A DialogTrigger opens a dialog when a trigger element is pressed.
+ */
+export function DialogTrigger(props: types.DialogTriggerProps) {
+  const { children, onOpenChange, ...triggerProps } = props
+
+  const { setModal, unsetModal } = modalProvider.useSetModal()
+
+  const onOpenChangeInternal = React.useCallback(
+    (isOpened: boolean) => {
+      if (isOpened) {
+        // we're using a placeholder here just to let the rest of the code know that the modal is open
+        setModal(PLACEHOLDER)
+      } else {
+        unsetModal()
+      }
+
+      onOpenChange?.(isOpened)
+    },
+    [setModal, unsetModal, onOpenChange]
+  )
+
+  return (
+    <reactAriaComponents.DialogTrigger
+      children={children}
+      onOpenChange={onOpenChangeInternal}
+      {...triggerProps}
+    />
+  )
+}
diff --git a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/index.ts b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/index.ts
new file mode 100644
index 00000000000..3bdf7458e80
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/index.ts
@@ -0,0 +1,8 @@
+/**
+ * @file
+ *
+ * Re-exports the Dialog component.
+ */
+export * from './Dialog'
+export * from './types'
+export * from './DialogTrigger'
diff --git a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/types.ts b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/types.ts
new file mode 100644
index 00000000000..7c60eb33a7c
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/types.ts
@@ -0,0 +1,30 @@
+/**
+ * @file
+ * Contains the types for the Dialog component.
+ */
+import type * as reactAriaComponents from 'react-aria-components'
+
+/**
+ *
+ */
+export type DialogType = 'fullscreen' | 'modal' | 'popover'
+
+/**
+ * The props for the Dialog component.
+ */
+export interface DialogProps extends reactAriaComponents.DialogProps {
+  /**
+   * The type of dialog to render.
+   * @default 'modal'
+   */
+  readonly type?: DialogType
+  readonly title?: string
+  readonly isDismissible?: boolean
+  readonly onOpenChange?: (isOpen: boolean) => void
+  readonly isKeyboardDismissDisabled?: boolean
+}
+
+/**
+ * The props for the DialogTrigger component.
+ */
+export interface DialogTriggerProps extends reactAriaComponents.DialogTriggerProps {}
diff --git a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Tooltip/Tooltip.tsx b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Tooltip/Tooltip.tsx
new file mode 100644
index 00000000000..c1936e8a92b
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Tooltip/Tooltip.tsx
@@ -0,0 +1,50 @@
+/**
+ * @file
+ *
+ * A tooltip displays a description of an element on hover or focus.
+ */
+import * as reactAriaComponents from 'react-aria-components'
+import * as tailwindMerge from 'tailwind-merge'
+
+import * as portal from '#/components/Portal'
+
+/**
+ *
+ */
+export interface TooltipProps
+  extends Omit<reactAriaComponents.TooltipProps, 'offset' | 'UNSTABLE_portalContainer'> {}
+
+const DEFAULT_CLASSES = 'z-1 flex bg-neutral-800 text-white p-2 rounded-md shadow-lg text-xs'
+
+const DEFAULT_CONTAINER_PADDING = 4
+const DEFAULT_OFFSET = 4
+
+/**
+ * A tooltip displays a description of an element on hover or focus.
+ */
+export function Tooltip(props: TooltipProps) {
+  const { className, containerPadding = DEFAULT_CONTAINER_PADDING, ...ariaTooltipProps } = props
+
+  const root = portal.useStrictPortalContext()
+
+  const classes = tailwindMerge.twJoin(DEFAULT_CLASSES)
+
+  return (
+    <reactAriaComponents.Tooltip
+      offset={DEFAULT_OFFSET}
+      containerPadding={containerPadding}
+      UNSTABLE_portalContainer={root.current}
+      className={values =>
+        tailwindMerge.twMerge(
+          classes,
+          typeof className === 'function' ? className(values) : className
+        )
+      }
+      {...ariaTooltipProps}
+    />
+  )
+}
+
+// Re-export the TooltipTrigger component from react-aria-components
+// eslint-disable-next-line no-restricted-syntax
+export { TooltipTrigger } from 'react-aria-components'
diff --git a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/index.ts b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/index.ts
new file mode 100644
index 00000000000..8c6aab10d41
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/index.ts
@@ -0,0 +1,7 @@
+/**
+ * @file index.ts
+ * Index file for Aria Components
+ */
+export * from './Button/Button'
+export * from './Tooltip/Tooltip'
+export * from './Dialog'
diff --git a/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx b/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx
index 37a6cd7df21..1afbc8f8f29 100644
--- a/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx
@@ -58,7 +58,8 @@ export default function MenuEntry(props: MenuEntryProps) {
     <button
       disabled={disabled}
       title={title}
-      className={`flex h-row place-content-between items-center rounded-menu-entry p-menu-entry text-left selectable hover:bg-hover-bg enabled:active disabled:bg-transparent ${
+      className={`items -center flex h-row
+      place-content-between rounded-menu-entry p-menu-entry text-left selectable enabled:active hover:bg-hover-bg disabled:bg-transparent ${
         isContextMenuEntry ? 'px-context-menu-entry-x' : ''
       }`}
       onClick={event => {
diff --git a/app/ide-desktop/lib/dashboard/src/components/Portal/Portal.tsx b/app/ide-desktop/lib/dashboard/src/components/Portal/Portal.tsx
new file mode 100644
index 00000000000..75dcf1dff4e
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/components/Portal/Portal.tsx
@@ -0,0 +1,44 @@
+/**
+ * @file Portal component
+ * Renders its children outside the current DOM hierarchy
+ */
+
+import * as React from 'react'
+
+import * as reactDom from 'react-dom'
+
+import type * as types from './types'
+import * as usePortal from './usePortal'
+
+/**
+ * This component renders its children outside the current DOM hierarchy.
+ *
+ * React [doesn't support](https://github.com/facebook/react/issues/13097) portal API in SSR, so, if you want to
+ * render a Portal in SSR, use prop `disabled`.
+ *
+ * By default, Portal's children render under the `<Root />` component.
+ *
+ * ***Important***: Since React doesn't support portals on SSR, `<Portal />` children render in the next tick.
+ * If you need to make some computations, use the `onMount` callback
+ * @see https://reactjs.org/docs/portals.html
+ * @example ```jsx
+ *  <div>
+ *    Portal will be rendered outside me!
+ *
+ *    <Portal>
+ *      <div>some content will be showed outside of parent container</div>
+ *    </Portal>
+ *  </div>
+ * ```
+ */
+export default function Portal(props: types.PortalProps): React.JSX.Element | null {
+  const { children, mountRoot, isDisabled } = usePortal.usePortal(props)
+
+  if (isDisabled) {
+    return <>{children}</>
+  } else if (mountRoot) {
+    return reactDom.createPortal(children, mountRoot)
+  } else {
+    return null
+  }
+}
diff --git a/app/ide-desktop/lib/dashboard/src/components/Portal/PortalProvider.ts b/app/ide-desktop/lib/dashboard/src/components/Portal/PortalProvider.ts
new file mode 100644
index 00000000000..f7397d6d0ee
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/components/Portal/PortalProvider.ts
@@ -0,0 +1,42 @@
+/**
+ * @file
+ * Provides the context for the Portal component
+ */
+import * as React from 'react'
+
+import invariant from 'tiny-invariant'
+
+const PortalContext = React.createContext<React.RefObject<Element | null> | null>(null)
+
+/**
+ * Allows to access the root element for the Portal component
+ */
+export function usePortalContext() {
+  const root = React.useContext(PortalContext)
+
+  return { root } as const
+}
+
+/**
+ * Allows to access the root element for the Portal component
+ * @throws invariant the `PortalProvider` is not in the component tree
+ */
+export function useStrictPortalContext() {
+  const root = React.useContext(PortalContext)
+
+  invariant(
+    root != null && root.current != null,
+    'You should use `PortalProvider` to access the `Portal` component'
+  )
+
+  // This is safe because we are using `invariant` to check if the `PortalProvider` is in the component tree
+  // and the root element is not `null`
+  // eslint-disable-next-line no-restricted-syntax
+  return root as { current: Element }
+}
+
+/**
+ * Specifies the root element for the Portal component
+ */
+// eslint-disable-next-line no-restricted-syntax
+export const PortalProvider = PortalContext.Provider
diff --git a/app/ide-desktop/lib/dashboard/src/components/Portal/index.ts b/app/ide-desktop/lib/dashboard/src/components/Portal/index.ts
new file mode 100644
index 00000000000..f1def109351
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/components/Portal/index.ts
@@ -0,0 +1,12 @@
+/**
+ * @file
+ *
+ * Re-exports the Portal component and its related types and hooks.
+ */
+import Portal from './Portal'
+
+export * from './PortalProvider'
+export * from './types'
+
+// eslint-disable-next-line no-restricted-syntax
+export default Portal
diff --git a/app/ide-desktop/lib/dashboard/src/components/Portal/types.ts b/app/ide-desktop/lib/dashboard/src/components/Portal/types.ts
new file mode 100644
index 00000000000..3d8bea2be92
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/components/Portal/types.ts
@@ -0,0 +1,27 @@
+/**
+ * @file
+ * Types for the Portal component
+ */
+import type * as React from 'react'
+
+/**
+ * The props for the Portal component
+ */
+export interface PortalProps {
+  /**
+   * Ref, where `<Portal />` should render its children
+   * By default it renders under `<Root />`
+   * @default null
+   */
+  readonly root?: React.MutableRefObject<HTMLElement | null> | React.RefObject<HTMLElement | null>
+  /**
+   * Disables portal's API
+   * @default false
+   */
+  readonly isDisabled?: boolean
+  /**
+   * Callback, will be called after portal's children mounted
+   */
+  readonly onMount?: () => void
+  readonly children?: React.ReactNode
+}
diff --git a/app/ide-desktop/lib/dashboard/src/components/Portal/usePortal.ts b/app/ide-desktop/lib/dashboard/src/components/Portal/usePortal.ts
new file mode 100644
index 00000000000..906b75c70ec
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/components/Portal/usePortal.ts
@@ -0,0 +1,50 @@
+/**
+ * @file
+ * The hook contains the logic for mounting the children into the portal.
+ */
+import * as React from 'react'
+
+import invariant from 'tiny-invariant'
+
+import * as portalProvider from './PortalProvider'
+import type * as types from './types'
+
+/**
+ * The hook contains the logic for mounting the children into the portal.
+ * @internal
+ */
+export function usePortal(props: types.PortalProps) {
+  const { children, isDisabled = false, root = null, onMount } = props
+
+  const onMountRef = React.useRef(onMount)
+  const portalContext = portalProvider.usePortalContext()
+  const [mountRoot, setMountRoot] = React.useState<Element | null>(null)
+  onMountRef.current = onMount
+
+  React.useEffect(() => {
+    if (!isDisabled) {
+      const contextRoot = portalContext.root
+      const currentRoot = root?.current ?? null
+      const currentContextRoot = contextRoot?.current ?? null
+
+      invariant(
+        !(contextRoot == null && currentRoot == null),
+        'Before using Portal, you need to specify a root, where the component should be mounted or put the component under the <Root /> component'
+      )
+
+      setMountRoot(currentRoot ?? currentContextRoot)
+    }
+  }, [root, portalContext.root, isDisabled])
+
+  React.useEffect(() => {
+    if (isDisabled || mountRoot) {
+      onMountRef.current?.()
+    }
+  }, [isDisabled, mountRoot])
+
+  return {
+    isDisabled,
+    children,
+    mountRoot,
+  }
+}
diff --git a/app/ide-desktop/lib/dashboard/src/components/Root.tsx b/app/ide-desktop/lib/dashboard/src/components/Root.tsx
new file mode 100644
index 00000000000..aed4f15277a
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/components/Root.tsx
@@ -0,0 +1,35 @@
+/**
+ * @file
+ * The root component with required providers
+ */
+import * as React from 'react'
+
+import * as reactAriaComponents from 'react-aria-components'
+
+import * as portal from '#/components/Portal'
+
+/**
+ * Props for the root component
+ */
+export interface RootProps extends React.PropsWithChildren {
+  readonly rootRef: React.RefObject<HTMLElement>
+  readonly navigate: (path: string) => void
+  readonly locale?: string
+}
+
+/**
+ * The root component with required providers
+ */
+export function Root(props: RootProps) {
+  const { children, rootRef, navigate, locale = 'en-US' } = props
+
+  return (
+    <portal.PortalProvider value={rootRef}>
+      <reactAriaComponents.RouterProvider navigate={navigate}>
+        <reactAriaComponents.I18nProvider locale={locale}>
+          {children}
+        </reactAriaComponents.I18nProvider>
+      </reactAriaComponents.RouterProvider>
+    </portal.PortalProvider>
+  )
+}
diff --git a/app/ide-desktop/lib/dashboard/src/components/SelectionBrush.tsx b/app/ide-desktop/lib/dashboard/src/components/SelectionBrush.tsx
index 072fdad122f..0cb8c56c7f3 100644
--- a/app/ide-desktop/lib/dashboard/src/components/SelectionBrush.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/SelectionBrush.tsx
@@ -1,12 +1,12 @@
 /** @file A selection brush to indicate the area being selected by the mouse drag action. */
 import * as React from 'react'
 
-import * as reactDom from 'react-dom'
-
 import * as animationHooks from '#/hooks/animationHooks'
 
 import * as modalProvider from '#/providers/ModalProvider'
 
+import Portal from '#/components/Portal'
+
 import * as eventModule from '#/utilities/event'
 import type * as geometry from '#/utilities/geometry'
 
@@ -169,15 +169,14 @@ export default function SelectionBrush(props: SelectionBrushProps) {
           width: `${rectangle.width}px`,
           height: `${rectangle.height}px`,
         }
-
-  return reactDom.createPortal(
-    <div
-      className={`pointer-events-none fixed z-1 box-content rounded-selection-brush border-transparent bg-selection-brush transition-border-margin ${
-        hidden ? 'm border-0' : '-m-selection-brush-border border-selection-brush'
-      }`}
-      style={brushStyle}
-    />,
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    document.getElementById('enso-dashboard')!
+  return (
+    <Portal>
+      <div
+        className={`pointer-events-none fixed z-1 box-content rounded-selection-brush border-transparent bg-selection-brush transition-border-margin ${
+          hidden ? 'm border-0' : '-m-selection-brush-border border-selection-brush'
+        }`}
+        style={brushStyle}
+      />
+    </Portal>
   )
 }
diff --git a/app/ide-desktop/lib/dashboard/src/components/SubmitButton.tsx b/app/ide-desktop/lib/dashboard/src/components/SubmitButton.tsx
index fc79012d803..311994b784f 100644
--- a/app/ide-desktop/lib/dashboard/src/components/SubmitButton.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/SubmitButton.tsx
@@ -21,7 +21,7 @@ export default function SubmitButton(props: SubmitButtonProps) {
     <button
       disabled={disabled}
       type="submit"
-      className={`flex items-center justify-center gap-icon-with-text rounded-full bg-blue-600 py-auth-input-y text-white transition-all duration-auth selectable hover:bg-blue-700 focus:bg-blue-700 focus:outline-none enabled:active`}
+      className={`flex items-center justify-center gap-icon-with-text rounded-full bg-blue-600 py-auth-input-y text-white transition-all duration-auth selectable enabled:active hover:bg-blue-700 focus:bg-blue-700 focus:outline-none`}
     >
       {text}
       <SvgMask src={icon} />
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/AssetDiffView/AssetDiffView.tsx b/app/ide-desktop/lib/dashboard/src/layouts/AssetDiffView/AssetDiffView.tsx
new file mode 100644
index 00000000000..8b6dbcb7ecf
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/layouts/AssetDiffView/AssetDiffView.tsx
@@ -0,0 +1,74 @@
+/**
+ * @file
+ *
+ * Diff view for 2 asset versions for a specific project
+ */
+import * as react from '@monaco-editor/react'
+
+import Spinner, * as spinnerModule from '#/components/Spinner'
+
+import type * as backendService from '#/services/Backend'
+import type RemoteBackend from '#/services/RemoteBackend'
+
+import * as useFetchVersionContent from './useFetchVersionContent'
+
+/**
+ * Props for the AssetDiffView component
+ */
+export interface AssetDiffViewProps {
+  readonly versionId: string
+  readonly latestVersionId: string
+  readonly projectId: backendService.ProjectId
+  readonly backend: RemoteBackend
+}
+
+/**
+ * Diff view for asset versions
+ */
+export function AssetDiffView(props: AssetDiffViewProps) {
+  const { versionId, projectId, backend, latestVersionId } = props
+
+  const versionContent = useFetchVersionContent.useFetchVersionContent({
+    versionId,
+    projectId,
+    backend,
+  })
+  const headContent = useFetchVersionContent.useFetchVersionContent({
+    versionId: latestVersionId,
+    projectId,
+    backend,
+  })
+
+  const loader = (
+    <div className="flex h-full w-full items-center justify-center">
+      <Spinner size={32} state={spinnerModule.SpinnerState.loadingMedium} />
+    </div>
+  )
+
+  if (versionContent.isError || headContent.isError) {
+    return <div className="p-indent-8 text-center">Failed to load content</div>
+  } else if (versionContent.isPending || headContent.isPending) {
+    return loader
+  } else {
+    return (
+      <react.DiffEditor
+        beforeMount={monaco => {
+          monaco.editor.defineTheme('myTheme', {
+            base: 'vs',
+            inherit: true,
+            rules: [],
+            // This comes from third-party code and we can't change it
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            colors: { 'editor.background': '#00000000' },
+          })
+        }}
+        original={versionContent.data}
+        modified={headContent.data}
+        language="enso"
+        options={{ readOnly: true }}
+        loading={loader}
+        theme={'myTheme'}
+      />
+    )
+  }
+}
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/AssetDiffView/index.ts b/app/ide-desktop/lib/dashboard/src/layouts/AssetDiffView/index.ts
new file mode 100644
index 00000000000..7a6d1f5e43c
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/layouts/AssetDiffView/index.ts
@@ -0,0 +1,5 @@
+/**
+ * @file
+ * Re-exports the AssetDiffView component.
+ */
+export * from './AssetDiffView'
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/AssetDiffView/useFetchVersionContent.ts b/app/ide-desktop/lib/dashboard/src/layouts/AssetDiffView/useFetchVersionContent.ts
new file mode 100644
index 00000000000..6e2822e02fc
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/layouts/AssetDiffView/useFetchVersionContent.ts
@@ -0,0 +1,55 @@
+/**
+ * @file
+ *
+ * Fetches the content of a project’s Main.enso file with specified version.
+ */
+
+import * as reactQuery from '@tanstack/react-query'
+
+import type * as backendService from '#/services/Backend'
+import type RemoteBackend from '#/services/RemoteBackend'
+
+/**
+ *
+ */
+export interface FetchVersionContentProps {
+  readonly projectId: backendService.ProjectId
+  readonly versionId: string
+  readonly backend: RemoteBackend
+  readonly omitMetadataFromContent?: boolean
+}
+
+const MS_IN_SECOND = 1000
+const HUNDRED = 100
+const HUNDRED_SECONDS = HUNDRED * MS_IN_SECOND
+
+/**
+ * Fetches the content of a version.
+ */
+export function useFetchVersionContent(params: FetchVersionContentProps) {
+  const { versionId, backend, projectId, omitMetadataFromContent = true } = params
+
+  return reactQuery.useQuery({
+    queryKey: ['versionContent', versionId],
+    queryFn: () => backend.getFileContent(projectId, versionId),
+    select: data => (omitMetadataFromContent ? omitMetadata(data) : data),
+    staleTime: HUNDRED_SECONDS,
+  })
+}
+
+/**
+ * Removes the metadata from the content of a version.
+ */
+function omitMetadata(file: string): string {
+  let [withoutMetadata] = file.split('#### METADATA ####')
+
+  if (withoutMetadata == null) {
+    return file
+  } else {
+    while (withoutMetadata[withoutMetadata.length - 1] === '\n') {
+      withoutMetadata = withoutMetadata.slice(0, -1)
+    }
+
+    return withoutMetadata
+  }
+}
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/AssetPanel.tsx b/app/ide-desktop/lib/dashboard/src/layouts/AssetPanel.tsx
index bec59ac081d..1bc34947e50 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/AssetPanel.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/AssetPanel.tsx
@@ -6,7 +6,7 @@ import * as localStorageProvider from '#/providers/LocalStorageProvider'
 import type * as assetEvent from '#/events/assetEvent'
 
 import AssetProperties from '#/layouts/AssetProperties'
-import AssetVersions from '#/layouts/AssetVersions'
+import AssetVersions from '#/layouts/AssetVersions/AssetVersions'
 import type Category from '#/layouts/CategorySwitcher/Category'
 
 import * as backend from '#/services/Backend'
@@ -139,7 +139,7 @@ export default function AssetPanel(props: AssetPanelProps) {
               dispatchAssetEvent={dispatchAssetEvent}
             />
           )}
-          <AssetVersions hidden={tab !== AssetPanelTab.versions} item={item} />
+          {tab === AssetPanelTab.versions && <AssetVersions item={item} />}
         </>
       )}
     </div>
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/AssetVersion.tsx b/app/ide-desktop/lib/dashboard/src/layouts/AssetVersion.tsx
index 1ef5f347b7e..eddcf7f9a42 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/AssetVersion.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/AssetVersion.tsx
@@ -1,29 +1,71 @@
 /** @file Displays information describing a specific version of an asset. */
-import * as React from 'react'
+import Duplicate from 'enso-assets/duplicate.svg'
 
-import type * as backend from '#/services/Backend'
+import * as ariaComponents from '#/components/AriaComponents'
+
+import * as backendService from '#/services/Backend'
+import type RemoteBackend from '#/services/RemoteBackend'
 
 import * as dateTime from '#/utilities/dateTime'
 
+import * as assetDiffView from './AssetDiffView'
+
 // ====================
 // === AssetVersion ===
 // ====================
 
 /** Props for a {@link AssetVersion}. */
 export interface AssetVersionProps {
+  readonly item: backendService.AnyAsset
   readonly number: number
-  readonly version: backend.S3ObjectVersion
+  readonly version: backendService.S3ObjectVersion
+  readonly latestVersion: backendService.S3ObjectVersion
+  readonly backend: RemoteBackend
 }
 
 /** Displays information describing a specific version of an asset. */
 export default function AssetVersion(props: AssetVersionProps) {
-  const { number, version } = props
+  const { number, version, item, backend, latestVersion } = props
+
+  const isProject = item.type === backendService.AssetType.project
+  const versionName = `Version ${number}`
 
   return (
-    <div className="flex cursor-pointer select-none flex-col overflow-y-auto rounded-default p-version transition-colors hover:bg-frame">
-      <div>version {number}</div>
-      <div className="text-xs text-not-selected">
-        on {dateTime.formatDateTime(new Date(version.lastModified))}
+    <div className="flex w-full flex-shrink-0 basis-0 select-none flex-row gap-4 rounded-2xl p-2">
+      <div className="flex flex-1 flex-col">
+        <div>
+          {versionName} {version.isLatest && `(Latest)`}
+        </div>
+
+        <time className="text-xs text-not-selected">
+          on {dateTime.formatDateTime(new Date(version.lastModified))}
+        </time>
+      </div>
+
+      <div className="flex items-center gap-1">
+        {isProject && (
+          <ariaComponents.DialogTrigger>
+            <ariaComponents.TooltipTrigger>
+              <ariaComponents.Button
+                variant="icon"
+                aria-label="Compare with latest"
+                icon={Duplicate}
+                isDisabled={version.isLatest}
+              />
+
+              <ariaComponents.Tooltip>Compare with latest</ariaComponents.Tooltip>
+            </ariaComponents.TooltipTrigger>
+
+            <ariaComponents.Dialog type="fullscreen" title={`Compare ${versionName} with latest`}>
+              <assetDiffView.AssetDiffView
+                latestVersionId={latestVersion.versionId}
+                versionId={version.versionId}
+                projectId={item.id}
+                backend={backend}
+              />
+            </ariaComponents.Dialog>
+          </ariaComponents.DialogTrigger>
+        )}
       </div>
     </div>
   )
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/AssetVersions.tsx b/app/ide-desktop/lib/dashboard/src/layouts/AssetVersions.tsx
deleted file mode 100644
index 21d28d1fd09..00000000000
--- a/app/ide-desktop/lib/dashboard/src/layouts/AssetVersions.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-/** @file A list of previous versions of an asset. */
-import * as React from 'react'
-
-import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
-
-import * as backendProvider from '#/providers/BackendProvider'
-
-import AssetVersion from '#/layouts/AssetVersion'
-
-import type * as backend from '#/services/Backend'
-
-import type AssetTreeNode from '#/utilities/AssetTreeNode'
-
-// =====================
-// === AssetVersions ===
-// =====================
-
-/** Props for a {@link AssetVersions}. */
-export interface AssetVersionsProps {
-  readonly hidden: boolean
-  readonly item: AssetTreeNode
-}
-
-/** A list of previous versions of an asset. */
-export default function AssetVersions(props: AssetVersionsProps) {
-  const { hidden, item } = props
-  const { backend } = backendProvider.useBackend()
-  const toastAndLog = toastAndLogHooks.useToastAndLog()
-  const [initialized, setInitialized] = React.useState(false)
-  const [versions, setVersions] = React.useState<backend.S3ObjectVersion[]>([])
-
-  React.useEffect(() => {
-    if (!hidden && !initialized) {
-      setInitialized(true)
-      void (async () => {
-        try {
-          const assetVersions = await backend.listAssetVersions(item.item.id, item.item.title)
-          setVersions([...assetVersions.versions].reverse())
-        } catch (error) {
-          setInitialized(false)
-          toastAndLog('Could not list versions', error)
-        }
-      })()
-    }
-  }, [
-    hidden,
-    initialized,
-    backend,
-    item.item.id,
-    item.item.title,
-    /* should never change */ toastAndLog,
-  ])
-
-  return hidden ? (
-    <></>
-  ) : (
-    <div className="flex flex-col">
-      {versions.map((version, i) => (
-        <AssetVersion key={version.versionId} number={versions.length - i} version={version} />
-      ))}
-    </div>
-  )
-}
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/AssetVersions/AssetVersions.tsx b/app/ide-desktop/lib/dashboard/src/layouts/AssetVersions/AssetVersions.tsx
new file mode 100644
index 00000000000..bab4d2d271e
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/layouts/AssetVersions/AssetVersions.tsx
@@ -0,0 +1,80 @@
+/** @file A list of previous versions of an asset. */
+import * as React from 'react'
+
+import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
+
+import * as backendProvider from '#/providers/BackendProvider'
+
+import AssetVersion from '#/layouts/AssetVersion'
+
+import Spinner from '#/components/Spinner'
+import * as spinnerModule from '#/components/Spinner'
+
+import RemoteBackend from '#/services/RemoteBackend'
+
+import type AssetTreeNode from '#/utilities/AssetTreeNode'
+
+import * as assetVersions from './useAssetVersions'
+
+// =====================
+// === AssetVersions ===
+// =====================
+
+/** Props for a {@link AssetVersions}. */
+export interface AssetVersionsProps {
+  readonly item: AssetTreeNode
+}
+
+/** A list of previous versions of an asset. */
+export default function AssetVersions(props: AssetVersionsProps) {
+  const { item } = props
+
+  const { backend } = backendProvider.useBackend()
+  const toastAndLog = toastAndLogHooks.useToastAndLog()
+
+  const isRemote = backend instanceof RemoteBackend
+
+  const {
+    status,
+    error,
+    data: versions,
+    isPending,
+  } = assetVersions.useAssetVersions({
+    backend,
+    assetId: item.item.id,
+    title: item.item.title,
+    onError: backendError => toastAndLog('Could not list versions', backendError),
+    enabled: isRemote,
+  })
+
+  const latestVersion = versions?.find(version => version.isLatest)
+
+  return (
+    <div className="flex flex-1 shrink-0 flex-col items-center overflow-y-auto overflow-x-hidden">
+      {(() => {
+        if (!isRemote) {
+          return <div>Local assets do not have versions</div>
+        } else if (isPending) {
+          return <Spinner size={32} state={spinnerModule.SpinnerState.loadingMedium} />
+        } else if (status === 'error') {
+          return <div>Error: {error.message}</div>
+        } else if (versions.length === 0) {
+          return <div>No versions found</div>
+        } else if (!latestVersion) {
+          return <div>Could not fetch the latest version of the file</div>
+        } else {
+          return versions.map((version, i) => (
+            <AssetVersion
+              key={version.versionId}
+              number={versions.length - i}
+              version={version}
+              item={item.item}
+              backend={backend}
+              latestVersion={latestVersion}
+            />
+          ))
+        }
+      })()}
+    </div>
+  )
+}
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/AssetVersions/useAssetVersions.ts b/app/ide-desktop/lib/dashboard/src/layouts/AssetVersions/useAssetVersions.ts
new file mode 100644
index 00000000000..642eaaf6cbe
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/layouts/AssetVersions/useAssetVersions.ts
@@ -0,0 +1,47 @@
+/**
+ * @file
+ * Fetches the versions of the selected project asset
+ */
+import * as reactQuery from '@tanstack/react-query'
+
+import type Backend from '#/services/Backend'
+import type * as backendService from '#/services/Backend'
+
+/**
+ * Parameters for the useAssetVersions hook
+ */
+export interface UseAssetVersionsParams {
+  readonly assetId: backendService.AssetId
+  readonly title: string
+  readonly backend: Backend
+  readonly queryKey?: reactQuery.QueryKey
+  readonly enabled?: boolean
+  readonly onError?: (error: unknown) => void
+}
+
+/**
+ * Fetches the versions of the selected project asset
+ */
+export function useAssetVersions(params: UseAssetVersionsParams) {
+  const {
+    enabled = true,
+    title,
+    assetId,
+    backend,
+    onError,
+    queryKey = ['assetVersions', assetId, title],
+  } = params
+
+  return reactQuery.useQuery({
+    queryKey,
+    enabled,
+    queryFn: () =>
+      backend
+        .listAssetVersions(assetId, title)
+        .then(assetVersions => assetVersions.versions)
+        .catch(backendError => {
+          onError?.(backendError)
+          throw backendError
+        }),
+  })
+}
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/TopBar.tsx b/app/ide-desktop/lib/dashboard/src/layouts/TopBar.tsx
index 6420e03ec96..d9b20846c7f 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/TopBar.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/TopBar.tsx
@@ -1,8 +1,6 @@
 /** @file The top-bar of dashboard. */
 import * as React from 'react'
 
-import * as reactDom from 'react-dom'
-
 import type * as assetSearchBar from '#/layouts/AssetSearchBar'
 import AssetSearchBar from '#/layouts/AssetSearchBar'
 import BackendSwitcher from '#/layouts/BackendSwitcher'
@@ -10,6 +8,7 @@ import PageSwitcher, * as pageSwitcher from '#/layouts/PageSwitcher'
 import UserBar from '#/layouts/UserBar'
 
 import AssetInfoBar from '#/components/dashboard/AssetInfoBar'
+import Portal from '#/components/Portal'
 
 import type * as backendModule from '#/services/Backend'
 
@@ -50,7 +49,6 @@ export default function TopBar(props: TopBarProps) {
   const { isEditorDisabled, setBackendType, isHelpChatOpen, setIsHelpChatOpen } = props
   const { query, setQuery, labels, suggestions, isAssetPanelEnabled } = props
   const { isAssetPanelVisible, setIsAssetPanelEnabled, doRemoveSelf, onSignOut } = props
-  const [root] = React.useState(() => document.getElementById('enso-dashboard'))
   const supportsCloudBackend = process.env.ENSO_CLOUD_API_URL != null
   const shouldMakeSpaceForExtendedEditorMenu = page === pageSwitcher.Page.editor
 
@@ -98,33 +96,31 @@ export default function TopBar(props: TopBarProps) {
           )}
         </div>
       </div>
-      {root &&
-        reactDom.createPortal(
-          <div
-            className={`fixed right top z-1 m-top-bar text-xs text-primary ${shouldMakeSpaceForExtendedEditorMenu ? 'mr-extended-editor-menu' : ''}`}
-          >
-            <div className="flex gap-top-bar-right">
-              {page === pageSwitcher.Page.drive && (
-                <AssetInfoBar
-                  isAssetPanelEnabled={isAssetPanelEnabled}
-                  setIsAssetPanelEnabled={setIsAssetPanelEnabled}
-                />
-              )}
-              <UserBar
-                supportsLocalBackend={supportsLocalBackend}
-                page={page}
-                setPage={setPage}
-                isHelpChatOpen={isHelpChatOpen}
-                setIsHelpChatOpen={setIsHelpChatOpen}
-                projectAsset={projectAsset}
-                setProjectAsset={setProjectAsset}
-                doRemoveSelf={doRemoveSelf}
-                onSignOut={onSignOut}
+      <Portal>
+        <div
+          className={`fixed right top z-1 m-top-bar text-xs text-primary ${shouldMakeSpaceForExtendedEditorMenu ? 'mr-extended-editor-menu' : ''}`}
+        >
+          <div className="flex gap-top-bar-right">
+            {page === pageSwitcher.Page.drive && (
+              <AssetInfoBar
+                isAssetPanelEnabled={isAssetPanelEnabled}
+                setIsAssetPanelEnabled={setIsAssetPanelEnabled}
               />
-            </div>
-          </div>,
-          root
-        )}
+            )}
+            <UserBar
+              supportsLocalBackend={supportsLocalBackend}
+              page={page}
+              setPage={setPage}
+              isHelpChatOpen={isHelpChatOpen}
+              setIsHelpChatOpen={setIsHelpChatOpen}
+              projectAsset={projectAsset}
+              setProjectAsset={setProjectAsset}
+              doRemoveSelf={doRemoveSelf}
+              onSignOut={onSignOut}
+            />
+          </div>
+        </div>
+      </Portal>
     </div>
   )
 }
diff --git a/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx b/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx
index 9db17cd334e..9ac5ea2b692 100644
--- a/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx
+++ b/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx
@@ -33,6 +33,7 @@ import Settings from '#/layouts/Settings'
 import TopBar from '#/layouts/TopBar'
 
 import TheModal from '#/components/dashboard/TheModal'
+import Portal from '#/components/Portal'
 import type * as spinner from '#/components/Spinner'
 
 import * as backendModule from '#/services/Backend'
@@ -545,9 +546,11 @@ export default function Dashboard(props: DashboardProps) {
           )}
         </div>
       </div>
-      <div className="select-none text-xs text-primary">
-        <TheModal />
-      </div>
+      <Portal>
+        <div className="select-none text-xs text-primary">
+          <TheModal />
+        </div>
+      </Portal>
     </>
   )
 }
diff --git a/app/ide-desktop/lib/dashboard/src/services/Backend.ts b/app/ide-desktop/lib/dashboard/src/services/Backend.ts
index c08c189114e..39cec6b2e7f 100644
--- a/app/ide-desktop/lib/dashboard/src/services/Backend.ts
+++ b/app/ide-desktop/lib/dashboard/src/services/Backend.ts
@@ -836,6 +836,10 @@ export interface S3ObjectVersion {
   versionId: string
   lastModified: dateTime.Rfc3339DateTime
   isLatest: boolean
+  /**
+   * The field points to an archive containing the all the project files object in the S3 bucket,
+   */
+  key: string
 }
 
 /** A list of asset versions. */
diff --git a/app/ide-desktop/lib/dashboard/src/services/RemoteBackend.ts b/app/ide-desktop/lib/dashboard/src/services/RemoteBackend.ts
index 9104479b7d3..0926502702a 100644
--- a/app/ide-desktop/lib/dashboard/src/services/RemoteBackend.ts
+++ b/app/ide-desktop/lib/dashboard/src/services/RemoteBackend.ts
@@ -420,6 +420,20 @@ export default class RemoteBackend extends Backend {
     }
   }
 
+  /**
+   * Fetches the content of Main.enso file for a given project.
+   */
+  async getFileContent(projectId: backendModule.ProjectId, version: string): Promise<string> {
+    const path = remoteBackendPaths.getProjectContentPath(projectId, version)
+    const response = await this.get<string>(path)
+
+    if (!responseIsSuccessful(response)) {
+      return this.throw(`Could not get content of file with ProjectID '${projectId}'`, response)
+    } else {
+      return await response.text()
+    }
+  }
+
   /** Change the parent directory of an asset.
    * @throws An error if a non-successful status code (not 200-299) was received. */
   override async updateAsset(
diff --git a/app/ide-desktop/lib/dashboard/src/services/remoteBackendPaths.ts b/app/ide-desktop/lib/dashboard/src/services/remoteBackendPaths.ts
index 38c08748f95..bead0f716dd 100644
--- a/app/ide-desktop/lib/dashboard/src/services/remoteBackendPaths.ts
+++ b/app/ide-desktop/lib/dashboard/src/services/remoteBackendPaths.ts
@@ -65,6 +65,14 @@ export const GET_LOG_EVENTS_PATH = 'log_events'
 export function listAssetVersionsPath(assetId: backend.AssetId) {
   return `assets/${assetId}/versions`
 }
+
+/**
+ * Relative HTTP path to the "get Main.enso file" endpoint of the Cloud backend API.
+ */
+export function getProjectContentPath(projectId: backend.ProjectId, version: string) {
+  return `projects/${projectId}/files?versionId=${version}`
+}
+
 /** Relative HTTP path to the "update asset" endpoint of the Cloud backend API. */
 export function updateAssetPath(assetId: backend.AssetId) {
   return `assets/${assetId}`
diff --git a/app/ide-desktop/lib/dashboard/src/utilities/event.ts b/app/ide-desktop/lib/dashboard/src/utilities/event.ts
index a32e7e9ff16..0269791e6ff 100644
--- a/app/ide-desktop/lib/dashboard/src/utilities/event.ts
+++ b/app/ide-desktop/lib/dashboard/src/utilities/event.ts
@@ -60,3 +60,22 @@ export function isElementTextInput(element: EventTarget | null) {
       (element instanceof HTMLElement && element.isContentEditable))
   )
 }
+
+/**
+ * Whether the element is part of a Monaco editor.
+ */
+export function isElementPartOfMonaco(element: EventTarget | null) {
+  const recursiveCheck = (htmlElement: HTMLElement | null): boolean => {
+    if (htmlElement == null || htmlElement === document.body) {
+      return false
+    } else if (
+      htmlElement instanceof HTMLElement &&
+      htmlElement.classList.contains('monaco-editor')
+    ) {
+      return true
+    } else {
+      return recursiveCheck(htmlElement.parentElement)
+    }
+  }
+  return element != null && element instanceof HTMLElement && recursiveCheck(element)
+}
diff --git a/app/ide-desktop/lib/dashboard/tailwind.config.js b/app/ide-desktop/lib/dashboard/tailwind.config.js
index 9c621ee622e..55d39239fe9 100644
--- a/app/ide-desktop/lib/dashboard/tailwind.config.js
+++ b/app/ide-desktop/lib/dashboard/tailwind.config.js
@@ -1,4 +1,5 @@
 /** @file Configuration for Tailwind. */
+import reactAriaComponents from 'tailwindcss-react-aria-components'
 import plugin from 'tailwindcss/plugin.js'
 
 // The names come from a third-party API and cannot be changed.
@@ -409,6 +410,7 @@ export default /** @satisfies {import('tailwindcss').Config} */ ({
     },
   },
   plugins: [
+    reactAriaComponents,
     plugin(({ addUtilities, matchUtilities, addComponents, theme }) => {
       addUtilities(
         {
diff --git a/app/ide-desktop/lib/dashboard/tsconfig.json b/app/ide-desktop/lib/dashboard/tsconfig.json
index 096d5a7d695..335315b747a 100644
--- a/app/ide-desktop/lib/dashboard/tsconfig.json
+++ b/app/ide-desktop/lib/dashboard/tsconfig.json
@@ -16,6 +16,7 @@
     "noEmit": false,
     "outDir": "../../../../node_modules/.cache/tsc",
     "paths": { "#/*": ["./src/*"] },
+
     "plugins": [
       {
         "name": "ts-plugin-namespace-auto-import"
diff --git a/package-lock.json b/package-lock.json
index 531d0d658fb..69956ab24cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -257,14 +257,21 @@
         "@fortawesome/fontawesome-svg-core": "^6.4.2",
         "@fortawesome/free-brands-svg-icons": "^6.4.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
+        "@monaco-editor/react": "4.6.0",
         "@sentry/react": "^7.74.0",
+        "@tanstack/react-query": "^5.27.5",
         "ajv": "^8.12.0",
+        "clsx": "^1.1.1",
         "enso-common": "^1.0.0",
         "is-network-error": "^1.0.1",
+        "monaco-editor": "0.47.0",
         "react": "^18.2.0",
+        "react-aria-components": "^1.1.1",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.8.1",
         "react-toastify": "^9.1.3",
+        "tailwind-merge": "^2.2.1",
+        "tiny-invariant": "^1.3.3",
         "ts-results": "^3.3.0",
         "validator": "^13.11.0"
       },
@@ -299,6 +306,7 @@
         "prettier-plugin-tailwindcss": "^0.5.11",
         "react-toastify": "^9.1.3",
         "tailwindcss": "^3.4.1",
+        "tailwindcss-react-aria-components": "^1.1.1",
         "ts-plugin-namespace-auto-import": "^1.0.0",
         "typescript": "~5.2.2",
         "vite": "^4.4.9",
@@ -326,50 +334,6 @@
         "to-ico": "^1.1.5"
       }
     },
-    "app/ide-desktop/lib/js": {
-      "name": "enso-runner",
-      "version": "1.0.0",
-      "extraneous": true,
-      "dependencies": {
-        "spectorjs": "^0.9.27"
-      },
-      "devDependencies": {
-        "@typescript-eslint/eslint-plugin": "^6.7.2",
-        "@typescript-eslint/parser": "^6.7.2",
-        "esbuild": "^0.19.3",
-        "eslint": "^8.49.0",
-        "eslint-plugin-jsdoc": "^46.8.1",
-        "tsup": "^7.2.0",
-        "typescript": "~5.2.2"
-      },
-      "optionalDependencies": {
-        "esbuild-darwin-64": "^0.15.18",
-        "esbuild-linux-64": "^0.15.18",
-        "esbuild-windows-64": "^0.15.18"
-      }
-    },
-    "app/ide-desktop/lib/runner": {
-      "name": "enso-runner",
-      "version": "1.0.0",
-      "extraneous": true,
-      "dependencies": {
-        "spectorjs": "^0.9.27"
-      },
-      "devDependencies": {
-        "@typescript-eslint/eslint-plugin": "^6.7.2",
-        "@typescript-eslint/parser": "^6.7.2",
-        "esbuild": "^0.19.3",
-        "eslint": "^8.49.0",
-        "eslint-plugin-jsdoc": "^46.8.1",
-        "tsup": "^7.2.0",
-        "typescript": "~5.2.2"
-      },
-      "optionalDependencies": {
-        "esbuild-darwin-64": "^0.15.18",
-        "esbuild-linux-64": "^0.15.18",
-        "esbuild-windows-64": "^0.15.18"
-      }
-    },
     "app/ide-desktop/lib/ts-plugin-namespace-auto-import": {
       "version": "1.0.0",
       "devDependencies": {
@@ -418,69 +382,6 @@
         "zen-observable-ts": "0.8.19"
       }
     },
-    "app/ide-desktop/node_modules/@eslint/eslintrc": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
-      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
-      "dev": true,
-      "dependencies": {
-        "ajv": "^6.12.4",
-        "debug": "^4.3.2",
-        "espree": "^9.6.0",
-        "globals": "^13.19.0",
-        "ignore": "^5.2.0",
-        "import-fresh": "^3.2.1",
-        "js-yaml": "^4.1.0",
-        "minimatch": "^3.1.2",
-        "strip-json-comments": "^3.1.1"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "app/ide-desktop/node_modules/@eslint/eslintrc/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "app/ide-desktop/node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
-    },
-    "app/ide-desktop/node_modules/@eslint/js": {
-      "version": "8.49.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.49.0.tgz",
-      "integrity": "sha512-1S8uAY/MTJqVx0SC4epBq+N2yhuwtNwLbJYNZyhL2pO1ZVKn5HFXav5T41Ryzy9K9V7ZId2JB2oy/W4aCd9/2w==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      }
-    },
-    "app/ide-desktop/node_modules/@types/sharp": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/@types/sharp/-/sharp-0.31.1.tgz",
-      "integrity": "sha512-5nWwamN9ZFHXaYEincMSuza8nNfOof8nmO+mcI+Agx1uMUk4/pQnNIcix+9rLPXzKrm1pS34+6WRDbDV0Jn7ag==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "app/ide-desktop/node_modules/ajv": {
       "version": "8.12.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
@@ -508,143 +409,6 @@
         "js-cookie": "^2.2.1"
       }
     },
-    "app/ide-desktop/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "app/ide-desktop/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "app/ide-desktop/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "app/ide-desktop/node_modules/eslint": {
-      "version": "8.49.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.49.0.tgz",
-      "integrity": "sha512-jw03ENfm6VJI0jA9U+8H5zfl5b+FvuU3YYvZRdZHOlU2ggJkxrlkJH4HcDrZpj6YwD8kuYqvQM8LyesoazrSOQ==",
-      "dev": true,
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.2",
-        "@eslint/js": "8.49.0",
-        "@humanwhocodes/config-array": "^0.11.11",
-        "@humanwhocodes/module-importer": "^1.0.1",
-        "@nodelib/fs.walk": "^1.2.8",
-        "ajv": "^6.12.4",
-        "chalk": "^4.0.0",
-        "cross-spawn": "^7.0.2",
-        "debug": "^4.3.2",
-        "doctrine": "^3.0.0",
-        "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.2.2",
-        "eslint-visitor-keys": "^3.4.3",
-        "espree": "^9.6.1",
-        "esquery": "^1.4.2",
-        "esutils": "^2.0.2",
-        "fast-deep-equal": "^3.1.3",
-        "file-entry-cache": "^6.0.1",
-        "find-up": "^5.0.0",
-        "glob-parent": "^6.0.2",
-        "globals": "^13.19.0",
-        "graphemer": "^1.4.0",
-        "ignore": "^5.2.0",
-        "imurmurhash": "^0.1.4",
-        "is-glob": "^4.0.0",
-        "is-path-inside": "^3.0.3",
-        "js-yaml": "^4.1.0",
-        "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.4.1",
-        "lodash.merge": "^4.6.2",
-        "minimatch": "^3.1.2",
-        "natural-compare": "^1.4.0",
-        "optionator": "^0.9.3",
-        "strip-ansi": "^6.0.1",
-        "text-table": "^0.2.0"
-      },
-      "bin": {
-        "eslint": "bin/eslint.js"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "app/ide-desktop/node_modules/eslint/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "app/ide-desktop/node_modules/eslint/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "app/ide-desktop/node_modules/eslint/node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
-    },
-    "app/ide-desktop/node_modules/glob-parent": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "app/ide-desktop/node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
@@ -1813,6 +1577,17 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz",
+      "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.23.9",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz",
@@ -2727,6 +2502,50 @@
       "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==",
       "dev": true
     },
+    "node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.18.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.18.2.tgz",
+      "integrity": "sha512-+QoPW4csYALsQIl8GbN14igZzDbuwzcpWrku9nyMXlaqAlwRBgl5V+p0vWMGFqHOw37czNXaP/lEk4wbLgcmtA==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.5.4",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/fast-memoize": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz",
+      "integrity": "sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.7.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.6.tgz",
+      "integrity": "sha512-etVau26po9+eewJKYoiBKP6743I1br0/Ie00Pb/S/PtmYfmjTcOn2YCh2yNkSZI12h6Rg+BOgQYborXk46BvkA==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.18.2",
+        "@formatjs/icu-skeleton-parser": "1.8.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.0.tgz",
+      "integrity": "sha512-QWLAYvM0n8hv7Nq5BEs4LKIjevpVpbGLAJgOaYzg9wABEoX1j0JO1q2/jVkO6CVlq0dbsxZCngS5aXbysYueqA==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.18.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/intl-localematcher": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz",
+      "integrity": "sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@fortawesome/fontawesome-common-types": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz",
@@ -2932,6 +2751,39 @@
         }
       }
     },
+    "node_modules/@internationalized/date": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.2.tgz",
+      "integrity": "sha512-vo1yOMUt2hzp63IutEaTUxROdvQg1qlMRsbCvbay2AK2Gai7wIgCyK5weEX3nHkiLgo4qCXHijFNC/ILhlRpOQ==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/message": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@internationalized/message/-/message-3.1.2.tgz",
+      "integrity": "sha512-MHAWsZWz8jf6jFPZqpTudcCM361YMtPIRu9CXkYmKjJ/0R3pQRScV5C0zS+Qi50O5UAm8ecKhkXx6mWDDcF6/g==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0",
+        "intl-messageformat": "^10.1.0"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.5.1.tgz",
+      "integrity": "sha512-N0fPU/nz15SwR9IbfJ5xaS9Ss/O5h1sVXMZf43vc9mxEG48ovglvvzBjF53aHlq20uoR6c+88CrIXipU/LSzwg==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/string": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@internationalized/string/-/string-3.2.1.tgz",
+      "integrity": "sha512-vWQOvRIauvFMzOO+h7QrdsJmtN1AXAFVcaLWP9AseRN2o7iHceZ6bIXhBD4teZl8i91A3gxKnWBlGgjCwU6MFQ==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -3159,6 +3011,30 @@
         "vite": "^3.2.7 || ^4.0.5 || ^5.0.5"
       }
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.4.0.tgz",
+      "integrity": "sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.21.0 < 1"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.6.0.tgz",
+      "integrity": "sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.4.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@noble/hashes": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.3.tgz",
@@ -3368,6 +3244,1441 @@
       "integrity": "sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==",
       "dev": true
     },
+    "node_modules/@react-aria/breadcrumbs": {
+      "version": "3.5.11",
+      "resolved": "https://registry.npmjs.org/@react-aria/breadcrumbs/-/breadcrumbs-3.5.11.tgz",
+      "integrity": "sha512-bQz4g2tKvcWxeqPGj9O0RQf++Ka8f2o/pJMJB+QQ27DVQWhxpQpND//oFku2aFYkxHB/fyD9qVoiqpQR25bidw==",
+      "dependencies": {
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/link": "^3.6.5",
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/breadcrumbs": "^3.7.3",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/button": {
+      "version": "3.9.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/button/-/button-3.9.3.tgz",
+      "integrity": "sha512-ZXo2VGTxfbaTEnfeIlm5ym4vYpGAy8sGrad8Scv+EyDAJWLMKokqctfaN6YSWbqUApC3FN63IvMqASflbmnYig==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/toggle": "^3.7.2",
+        "@react-types/button": "^3.9.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/calendar": {
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@react-aria/calendar/-/calendar-3.5.6.tgz",
+      "integrity": "sha512-PA0Ur5WcODMn7t2gCUvq61YktkB+WlSZjzDr5kcY3sdl53ZjiyqCa2hYgrb6R0J859LVJXAp+5Qaproz8g1oLA==",
+      "dependencies": {
+        "@internationalized/date": "^3.5.2",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/live-announcer": "^3.3.2",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/calendar": "^3.4.4",
+        "@react-types/button": "^3.9.2",
+        "@react-types/calendar": "^3.4.4",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/checkbox": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/checkbox/-/checkbox-3.14.1.tgz",
+      "integrity": "sha512-b4rtrg5SpRSa9jBOqzJMmprJ+jDi3KyVvUh+DsvISe5Ti7gVAhMBgnca1D0xBp22w2jhk/o4gyu1bYxGLum0GA==",
+      "dependencies": {
+        "@react-aria/form": "^3.0.3",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/label": "^3.7.6",
+        "@react-aria/toggle": "^3.10.2",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/checkbox": "^3.6.3",
+        "@react-stately/form": "^3.0.1",
+        "@react-stately/toggle": "^3.7.2",
+        "@react-types/checkbox": "^3.7.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/combobox": {
+      "version": "3.8.4",
+      "resolved": "https://registry.npmjs.org/@react-aria/combobox/-/combobox-3.8.4.tgz",
+      "integrity": "sha512-HyTWIo2B/0xq0Of+sDEZCfJyf4BvCvDYIWG4UhjqL1kHIHIGQyyr+SldbVUjXVYnk8pP1eGB3ttiREujjjALPQ==",
+      "dependencies": {
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/listbox": "^3.11.5",
+        "@react-aria/live-announcer": "^3.3.2",
+        "@react-aria/menu": "^3.13.1",
+        "@react-aria/overlays": "^3.21.1",
+        "@react-aria/selection": "^3.17.5",
+        "@react-aria/textfield": "^3.14.3",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/combobox": "^3.8.2",
+        "@react-stately/form": "^3.0.1",
+        "@react-types/button": "^3.9.2",
+        "@react-types/combobox": "^3.10.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/datepicker": {
+      "version": "3.9.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/datepicker/-/datepicker-3.9.3.tgz",
+      "integrity": "sha512-1AjCAizd88ACKjVNhFazX4HZZFwWi2rsSlGCTm66Nx6wm5N/Cpbm466dpYEFyQUsKSOG4CC65G1zfYoMPe48MQ==",
+      "dependencies": {
+        "@internationalized/date": "^3.5.2",
+        "@internationalized/number": "^3.5.1",
+        "@internationalized/string": "^3.2.1",
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/form": "^3.0.3",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/label": "^3.7.6",
+        "@react-aria/spinbutton": "^3.6.3",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/datepicker": "^3.9.2",
+        "@react-stately/form": "^3.0.1",
+        "@react-types/button": "^3.9.2",
+        "@react-types/calendar": "^3.4.4",
+        "@react-types/datepicker": "^3.7.2",
+        "@react-types/dialog": "^3.5.8",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/dialog": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@react-aria/dialog/-/dialog-3.5.12.tgz",
+      "integrity": "sha512-7UJR/h/Y364u6Ltpw0bT51B48FybTuIBacGpEJN5IxZlpxvQt0KQcBDiOWfAa/GQogw4B5hH6agaOO0nJcP49Q==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/overlays": "^3.21.1",
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/dialog": "^3.5.8",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/dnd": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/dnd/-/dnd-3.5.3.tgz",
+      "integrity": "sha512-0gi6sRnr97fSQnGy+CMt+99/+vVqr+qv2T9Ts8X9TAzxHNokz5QfSL88QSlTU36EnAVLxPY18iZQWCExSjKpEQ==",
+      "dependencies": {
+        "@internationalized/string": "^3.2.1",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/live-announcer": "^3.3.2",
+        "@react-aria/overlays": "^3.21.1",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/dnd": "^3.2.8",
+        "@react-types/button": "^3.9.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/focus": {
+      "version": "3.16.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.16.2.tgz",
+      "integrity": "sha512-Rqo9ummmgotESfypzFjI3uh58yMpL+E+lJBbQuXkBM0u0cU2YYzu0uOrFrq3zcHk997udZvq1pGK/R+2xk9B7g==",
+      "dependencies": {
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/focus/node_modules/clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@react-aria/form": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/form/-/form-3.0.3.tgz",
+      "integrity": "sha512-5Q2BHE4TTPDzGY2npCzpRRYshwWUb3SMUA/Cbz7QfEtBk+NYuVaq3KjvqLqgUUdyKtqLZ9Far0kIAexloOC4jw==",
+      "dependencies": {
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/form": "^3.0.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/grid": {
+      "version": "3.8.8",
+      "resolved": "https://registry.npmjs.org/@react-aria/grid/-/grid-3.8.8.tgz",
+      "integrity": "sha512-7Bzbya4tO0oIgqexwRb8D6ZdC0GASYq9f/pnkrqocgvG9e1SCld4zOioKbYQDvAK/NnbCgXmmdqFAcLM/iazaA==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/live-announcer": "^3.3.2",
+        "@react-aria/selection": "^3.17.5",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/grid": "^3.8.5",
+        "@react-stately/selection": "^3.14.3",
+        "@react-stately/virtualizer": "^3.6.8",
+        "@react-types/checkbox": "^3.7.1",
+        "@react-types/grid": "^3.2.4",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/gridlist": {
+      "version": "3.7.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/gridlist/-/gridlist-3.7.5.tgz",
+      "integrity": "sha512-RmHEJ++vngHYEWbUCtLLmGh7H3vNd2Y9S0q/9SgHFPbqPZycT5mxDZ2arqpOXeHRVRvPBaW9ZlMxI2bPOePrYw==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/grid": "^3.8.8",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/selection": "^3.17.5",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/list": "^3.10.3",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/i18n": {
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/i18n/-/i18n-3.10.2.tgz",
+      "integrity": "sha512-Z1ormoIvMOI4mEdcFLYsoJy9w/EzBdBmgfLP+S/Ah+1xwQOXpgwZxiKOhYHpWa0lf6hkKJL34N9MHJvCJ5Crvw==",
+      "dependencies": {
+        "@internationalized/date": "^3.5.2",
+        "@internationalized/message": "^3.1.2",
+        "@internationalized/number": "^3.5.1",
+        "@internationalized/string": "^3.2.1",
+        "@react-aria/ssr": "^3.9.2",
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/interactions": {
+      "version": "3.21.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.21.1.tgz",
+      "integrity": "sha512-AlHf5SOzsShkHfV8GLLk3v9lEmYqYHURKcXWue0JdYbmquMRkUsf/+Tjl1+zHVAQ8lKqRnPYbTmc4AcZbqxltw==",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.2",
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/label": {
+      "version": "3.7.6",
+      "resolved": "https://registry.npmjs.org/@react-aria/label/-/label-3.7.6.tgz",
+      "integrity": "sha512-ap9iFS+6RUOqeW/F2JoNpERqMn1PvVIo3tTMrJ1TY1tIwyJOxdCBRgx9yjnPBnr+Ywguep+fkPNNi/m74+tXVQ==",
+      "dependencies": {
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/link": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/link/-/link-3.6.5.tgz",
+      "integrity": "sha512-kg8CxKqkciQFzODvLAfxEs8gbqNXFZCW/ISOE2LHYKbh9pA144LVo71qO3SPeYVVzIjmZeW4vEMdZwqkNozecw==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/link": "^3.5.3",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/listbox": {
+      "version": "3.11.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/listbox/-/listbox-3.11.5.tgz",
+      "integrity": "sha512-y3a3zQYjT+JKgugCMMKS7K9sRoCoP1Z6Fiiyfd77OHXWzh9RlnvWGsseljynmbxLzSuPwFtCYkU1Jz4QwsPUIg==",
+      "dependencies": {
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/label": "^3.7.6",
+        "@react-aria/selection": "^3.17.5",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/list": "^3.10.3",
+        "@react-types/listbox": "^3.4.7",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/live-announcer": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/live-announcer/-/live-announcer-3.3.2.tgz",
+      "integrity": "sha512-aOyPcsfyY9tLCBhuUaYCruwcd1IrYLc47Ou+J7wMzjeN9v4lsaEfiN12WFl8pDqOwfy6/7It2wmlm5hOuZY8wQ==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@react-aria/menu": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/menu/-/menu-3.13.1.tgz",
+      "integrity": "sha512-jF80YIcvD16Fgwm5pj7ViUE3Dj7z5iewQixLaFVdvpgfyE58SD/ZVU9/JkK5g/03DYM0sjpUKZGkdFxxw8eKnw==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/overlays": "^3.21.1",
+        "@react-aria/selection": "^3.17.5",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/menu": "^3.6.1",
+        "@react-stately/tree": "^3.7.6",
+        "@react-types/button": "^3.9.2",
+        "@react-types/menu": "^3.9.7",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/meter": {
+      "version": "3.4.11",
+      "resolved": "https://registry.npmjs.org/@react-aria/meter/-/meter-3.4.11.tgz",
+      "integrity": "sha512-P1G3Jdh0f/uieUDqvc3Ee4wzqBJa7H077BVSC3KPRqEp6YY7JimZGWjOwbFlO2PXhryXm/dI8EzUmh+4ZXjq/g==",
+      "dependencies": {
+        "@react-aria/progress": "^3.4.11",
+        "@react-types/meter": "^3.3.7",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/numberfield": {
+      "version": "3.11.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/numberfield/-/numberfield-3.11.1.tgz",
+      "integrity": "sha512-JQ1Z+Ho5H+jeav7jt9A4vBsIQR/Dd2CFbObrULjGkqSrnWjARFZBv3gZwmfGCtplEPeAv9buYKHAqebPtJNUww==",
+      "dependencies": {
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/spinbutton": "^3.6.3",
+        "@react-aria/textfield": "^3.14.3",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/form": "^3.0.1",
+        "@react-stately/numberfield": "^3.9.1",
+        "@react-types/button": "^3.9.2",
+        "@react-types/numberfield": "^3.8.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/overlays": {
+      "version": "3.21.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/overlays/-/overlays-3.21.1.tgz",
+      "integrity": "sha512-djEBDF+TbIIOHWWNpdm19+z8xtY8U+T+wKVQg/UZ6oWnclSqSWeGl70vu73Cg4HVBJ4hKf1SRx4Z/RN6VvH4Yw==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/ssr": "^3.9.2",
+        "@react-aria/utils": "^3.23.2",
+        "@react-aria/visually-hidden": "^3.8.10",
+        "@react-stately/overlays": "^3.6.5",
+        "@react-types/button": "^3.9.2",
+        "@react-types/overlays": "^3.8.5",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/progress": {
+      "version": "3.4.11",
+      "resolved": "https://registry.npmjs.org/@react-aria/progress/-/progress-3.4.11.tgz",
+      "integrity": "sha512-RePHbS15/KYFiApYLdwazwvWKsB9q0Kn5DGCSb0hqCC+k2Eui8iVVOsegswiP+xqkk/TiUCIkBEw22W3Az4kTg==",
+      "dependencies": {
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/label": "^3.7.6",
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/progress": "^3.5.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/radio": {
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/radio/-/radio-3.10.2.tgz",
+      "integrity": "sha512-CTUTR+qt3BLjmyQvKHZuVm+1kyvT72ZptOty++sowKXgJApTLdjq8so1IpaLAr8JIfzqD5I4tovsYwIQOX8log==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/form": "^3.0.3",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/label": "^3.7.6",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/radio": "^3.10.2",
+        "@react-types/radio": "^3.7.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/searchfield": {
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/searchfield/-/searchfield-3.7.3.tgz",
+      "integrity": "sha512-mnYI969R7tU3yMRIGmY1+peq7tmEW0W3MB/J2ImK36Obz/91tTtspHHEeFtPlQDLIyvVPB0Ucam4LIxCKPJm/Q==",
+      "dependencies": {
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/textfield": "^3.14.3",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/searchfield": "^3.5.1",
+        "@react-types/button": "^3.9.2",
+        "@react-types/searchfield": "^3.5.3",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/select": {
+      "version": "3.14.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/select/-/select-3.14.3.tgz",
+      "integrity": "sha512-9KCxI41FI+jTxEfUzRsMdJsZvjkCuuhL4UHig8MZXtXs0nsi7Ir3ezUDQ9m5MSG+ooBYM/CA9DyLDvo5Ioef+g==",
+      "dependencies": {
+        "@react-aria/form": "^3.0.3",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/label": "^3.7.6",
+        "@react-aria/listbox": "^3.11.5",
+        "@react-aria/menu": "^3.13.1",
+        "@react-aria/selection": "^3.17.5",
+        "@react-aria/utils": "^3.23.2",
+        "@react-aria/visually-hidden": "^3.8.10",
+        "@react-stately/select": "^3.6.2",
+        "@react-types/button": "^3.9.2",
+        "@react-types/select": "^3.9.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/selection": {
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/selection/-/selection-3.17.5.tgz",
+      "integrity": "sha512-gO5jBUkc7WdkiFMlWt3x9pTSuj3Yeegsxfo44qU5NPlKrnGtPRZDWrlACNgkDHu645RNNPhlyoX0C+G8mUg1xA==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/selection": "^3.14.3",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/separator": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/@react-aria/separator/-/separator-3.3.11.tgz",
+      "integrity": "sha512-UTla+3P2pELpP73WSfbwZgP1y1wODFBQbEOHnUxxO8ocyaUyQLJdvc07bBLLpPoyutlggRG0v9ACo0Rui7AjOg==",
+      "dependencies": {
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/slider": {
+      "version": "3.7.6",
+      "resolved": "https://registry.npmjs.org/@react-aria/slider/-/slider-3.7.6.tgz",
+      "integrity": "sha512-ZeZhyHzhk9gxGuThPKgX2K3RKsxPxsFig1iYoJvqP8485NtHYQIPht2YcpEKA9siLxGF0DR9VCfouVhSoW0AEA==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/label": "^3.7.6",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/slider": "^3.5.2",
+        "@react-types/shared": "^3.22.1",
+        "@react-types/slider": "^3.7.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/spinbutton": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/spinbutton/-/spinbutton-3.6.3.tgz",
+      "integrity": "sha512-IlfhRu/pc9zOt2C5zSEB7NmmzddvWisGx2iGzw8BwIKMD+cN3uy+Qwp+sG6Z/JzFEBN0F6Mxm3l5lhbiqjpICQ==",
+      "dependencies": {
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/live-announcer": "^3.3.2",
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/button": "^3.9.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.2.tgz",
+      "integrity": "sha512-0gKkgDYdnq1w+ey8KzG9l+H5Z821qh9vVjztk55rUg71vTk/Eaebeir+WtzcLLwTjw3m/asIjx8Y59y1lJZhBw==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/switch": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/switch/-/switch-3.6.2.tgz",
+      "integrity": "sha512-X5m/omyhXK+V/vhJFsHuRs2zmt9Asa/RuzlldbXnWohLdeuHMPgQnV8C9hg3f+sRi3sh9UUZ64H61pCtRoZNwg==",
+      "dependencies": {
+        "@react-aria/toggle": "^3.10.2",
+        "@react-stately/toggle": "^3.7.2",
+        "@react-types/switch": "^3.5.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/table": {
+      "version": "3.13.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/table/-/table-3.13.5.tgz",
+      "integrity": "sha512-P2nHEDk2CCoEbMFKNCyBC9qvmv7F/IXARDt/7z/J4mKFgU2iNSK+/zw6yrb38q33Zlk8hDaqSYNxHlMrh+/1MQ==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/grid": "^3.8.8",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/live-announcer": "^3.3.2",
+        "@react-aria/utils": "^3.23.2",
+        "@react-aria/visually-hidden": "^3.8.10",
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/flags": "^3.0.1",
+        "@react-stately/table": "^3.11.6",
+        "@react-stately/virtualizer": "^3.6.8",
+        "@react-types/checkbox": "^3.7.1",
+        "@react-types/grid": "^3.2.4",
+        "@react-types/shared": "^3.22.1",
+        "@react-types/table": "^3.9.3",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/tabs": {
+      "version": "3.8.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/tabs/-/tabs-3.8.5.tgz",
+      "integrity": "sha512-Jvt33/W+66n5oCxVwHAYarJ3Fit61vULiPcG7uTez0Mf11cq/C72wOrj+ZuNz6PTLTi2veBNQ7MauY72SnOjRg==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/selection": "^3.17.5",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/tabs": "^3.6.4",
+        "@react-types/shared": "^3.22.1",
+        "@react-types/tabs": "^3.3.5",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/tag": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/tag/-/tag-3.3.3.tgz",
+      "integrity": "sha512-tlJD9qj1XcsPIZD7DVJ6tWv8t7Z87/8qkbRDx7ugNqeHso9z0WqH9ZkSt17OFUWE2IQIk3V8D3iBSOtmhXcZGQ==",
+      "dependencies": {
+        "@react-aria/gridlist": "^3.7.5",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/label": "^3.7.6",
+        "@react-aria/selection": "^3.17.5",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/list": "^3.10.3",
+        "@react-types/button": "^3.9.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/textfield": {
+      "version": "3.14.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/textfield/-/textfield-3.14.3.tgz",
+      "integrity": "sha512-wPSjj/mTABspYQdahg+l5YMtEQ3m5iPCTtb5g6nR1U1rzJkvS4i5Pug6PUXeLeMz2H3ToflPWGlNOqBioAFaOQ==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/form": "^3.0.3",
+        "@react-aria/label": "^3.7.6",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/form": "^3.0.1",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/shared": "^3.22.1",
+        "@react-types/textfield": "^3.9.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/toggle": {
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/toggle/-/toggle-3.10.2.tgz",
+      "integrity": "sha512-DgitscHWgI6IFgnvp2HcMpLGX/cAn+XX9kF5RJQbRQ9NqUgruU5cEEGSOLMrEJ6zXDa2xmOiQ+kINcyNhA+JLg==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/toggle": "^3.7.2",
+        "@react-types/checkbox": "^3.7.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/toolbar": {
+      "version": "3.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/toolbar/-/toolbar-3.0.0-beta.3.tgz",
+      "integrity": "sha512-tPIEPRsZI/6Mb0tAW/GBTt3wBk7dfJg/eUnTloY8NHialvDa+cMUQyUVzPyLWGpErhYeBeutBmw1e2seMjmu+A==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/tooltip": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/tooltip/-/tooltip-3.7.2.tgz",
+      "integrity": "sha512-6jXOSGPao3gPgUQWLbH2r/jxGMqIaIKrJgfwu9TQrh+UkwwiTYW20EpEDCYY2nRFlcoi7EYAiPDSEbHCwXS7Lg==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/tooltip": "^3.4.7",
+        "@react-types/shared": "^3.22.1",
+        "@react-types/tooltip": "^3.4.7",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/utils": {
+      "version": "3.23.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.23.2.tgz",
+      "integrity": "sha512-yznR9jJ0GG+YJvTMZxijQwVp+ahP66DY0apZf7X+dllyN+ByEDW+yaL1ewYPIpugxVzH5P8jhnBXsIyHKN411g==",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.2",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/utils/node_modules/clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@react-aria/visually-hidden": {
+      "version": "3.8.10",
+      "resolved": "https://registry.npmjs.org/@react-aria/visually-hidden/-/visually-hidden-3.8.10.tgz",
+      "integrity": "sha512-np8c4wxdbE7ZrMv/bnjwEfpX0/nkWy9sELEb0sK8n4+HJ+WycoXXrVxBUb9tXgL/GCx5ReeDQChjQWwajm/z3A==",
+      "dependencies": {
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/calendar": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/@react-stately/calendar/-/calendar-3.4.4.tgz",
+      "integrity": "sha512-f9ZOd096gGGD+3LmU1gkmfqytGyQtrgi+Qjn+70GbM2Jy65pwOR4I9YrobbmeAFov5Tff13mQEa0yqWvbcDLZQ==",
+      "dependencies": {
+        "@internationalized/date": "^3.5.2",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/calendar": "^3.4.4",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/checkbox": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/@react-stately/checkbox/-/checkbox-3.6.3.tgz",
+      "integrity": "sha512-hWp0GXVbMI4sS2NbBjWgOnHNrRqSV4jeftP8zc5JsIYRmrWBUZitxluB34QuVPzrBO29bGsF0GTArSiQZt6BWw==",
+      "dependencies": {
+        "@react-stately/form": "^3.0.1",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/checkbox": "^3.7.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/collections": {
+      "version": "3.10.5",
+      "resolved": "https://registry.npmjs.org/@react-stately/collections/-/collections-3.10.5.tgz",
+      "integrity": "sha512-k8Q29Nnvb7iAia1QvTanZsrWP2aqVNBy/1SlE6kLL6vDqtKZC+Esd1SDLHRmIcYIp5aTdfwIGd0NuiRQA7a81Q==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/combobox": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/combobox/-/combobox-3.8.2.tgz",
+      "integrity": "sha512-f+IHuFW848VoMbvTfSakn2WIh2urDxO355LrKxnisXPCkpQHpq3lvT2mJtKJwkPxjAy7xPjpV8ejgga2R6p53Q==",
+      "dependencies": {
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/form": "^3.0.1",
+        "@react-stately/list": "^3.10.3",
+        "@react-stately/overlays": "^3.6.5",
+        "@react-stately/select": "^3.6.2",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/combobox": "^3.10.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/data": {
+      "version": "3.11.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/data/-/data-3.11.2.tgz",
+      "integrity": "sha512-yhK2upk2WbJeiLBRWHrh/4G2CvmmozCzoivLaRAPYu53m1J3MyzVGCLJgnZMbMZvAbNcYWZK6IzO6VqZ2y1fOw==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/datepicker": {
+      "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/datepicker/-/datepicker-3.9.2.tgz",
+      "integrity": "sha512-Z6FrK6Af7R5BizqHhJFCj3Hn32mg5iLSDdEgFQAuO043guOXUKFUAnbxfbQUjL6PGE6QwWMfQD7PPGebHn9Ifw==",
+      "dependencies": {
+        "@internationalized/date": "^3.5.2",
+        "@internationalized/string": "^3.2.1",
+        "@react-stately/form": "^3.0.1",
+        "@react-stately/overlays": "^3.6.5",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/datepicker": "^3.7.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/dnd": {
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@react-stately/dnd/-/dnd-3.2.8.tgz",
+      "integrity": "sha512-oSo+2Bzum3Q1/d+3FuaDmpVHqqBB004tycuQDDFtad3N1BKm+fNfmslRK1ioLkPLK4sm1130V+BZBY3JXLe80A==",
+      "dependencies": {
+        "@react-stately/selection": "^3.14.3",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/flags": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/flags/-/flags-3.0.1.tgz",
+      "integrity": "sha512-h5PcDMj54aipQNO18ig/IMI1kzPwcvSwVq5M6Ib6XE1WIkOH0dIuW2eADdAOhcGi3KXJtXVdD29zh0Eox1TKgQ==",
+      "dependencies": {
+        "@swc/helpers": "^0.4.14"
+      }
+    },
+    "node_modules/@react-stately/flags/node_modules/@swc/helpers": {
+      "version": "0.4.36",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.36.tgz",
+      "integrity": "sha512-5lxnyLEYFskErRPenYItLRSge5DjrJngYKdVjRSrWfza9G6KkgHEXi0vUZiyUeMU5JfXH1YnvXZzSp8ul88o2Q==",
+      "dependencies": {
+        "legacy-swc-helpers": "npm:@swc/helpers@=0.4.14",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@react-stately/form": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/form/-/form-3.0.1.tgz",
+      "integrity": "sha512-T1Ul2Ou0uE/S4ECLcGKa0OfXjffdjEHfUFZAk7OZl0Mqq/F7dl5WpoLWJ4d4IyvZzGO6anFNenP+vODWbrF3NA==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/grid": {
+      "version": "3.8.5",
+      "resolved": "https://registry.npmjs.org/@react-stately/grid/-/grid-3.8.5.tgz",
+      "integrity": "sha512-KCzi0x0p1ZKK+OptonvJqMbn6Vlgo6GfOIlgcDd0dNYDP8TJ+3QFJAFre5mCr7Fubx7LcAOio4Rij0l/R8fkXQ==",
+      "dependencies": {
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/selection": "^3.14.3",
+        "@react-types/grid": "^3.2.4",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/list": {
+      "version": "3.10.3",
+      "resolved": "https://registry.npmjs.org/@react-stately/list/-/list-3.10.3.tgz",
+      "integrity": "sha512-Ul8el0tQy2Ucl3qMQ0fiqdJ874W1ZNjURVSgSxN+pGwVLNBVRjd6Fl7YwZFCXER2YOlzkwg+Zqozf/ZlS0EdXA==",
+      "dependencies": {
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/selection": "^3.14.3",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/menu": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/menu/-/menu-3.6.1.tgz",
+      "integrity": "sha512-3v0vkTm/kInuuG8jG7jbxXDBnMQcoDZKWvYsBQq7+POt0LmijbLdbdZPBoz9TkZ3eo/OoP194LLHOaFTQyHhlw==",
+      "dependencies": {
+        "@react-stately/overlays": "^3.6.5",
+        "@react-types/menu": "^3.9.7",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/numberfield": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/numberfield/-/numberfield-3.9.1.tgz",
+      "integrity": "sha512-btBIcBEfSVCUm6NwJrMrMygoIu/fQGazzD0RhF7PNsfvkFiWn+TSOyQqSXcsUJVOnBfoS/dVWj6r57KA7zl3FA==",
+      "dependencies": {
+        "@internationalized/number": "^3.5.1",
+        "@react-stately/form": "^3.0.1",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/numberfield": "^3.8.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/overlays": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmjs.org/@react-stately/overlays/-/overlays-3.6.5.tgz",
+      "integrity": "sha512-U4rCFj6TPJPXLUvYXAcvh+yP/CO2W+7f0IuqP7ZZGE+Osk9qFkT+zRK5/6ayhBDFpmueNfjIEAzT9gYPQwNHFw==",
+      "dependencies": {
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/overlays": "^3.8.5",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/radio": {
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/radio/-/radio-3.10.2.tgz",
+      "integrity": "sha512-JW5ZWiNMKcZvMTsuPeWJQLHXD5rlqy7Qk6fwUx/ZgeibvMBW/NnW19mm2+IMinzmbtERXvR6nsiA837qI+4dew==",
+      "dependencies": {
+        "@react-stately/form": "^3.0.1",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/radio": "^3.7.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/searchfield": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/searchfield/-/searchfield-3.5.1.tgz",
+      "integrity": "sha512-9A8Wghx1avRHhMpNH1Nj+jFfiF1bhsff2GEC5PZgWYzhCykw3G5bywn3JAuUS4kh7Vpqhbu4KpHAhmWPSv4B/Q==",
+      "dependencies": {
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/searchfield": "^3.5.3",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/select": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/select/-/select-3.6.2.tgz",
+      "integrity": "sha512-duOxdHKol93h6Ew6fap6Amz+zngoERKZLSKVm/8I8uaBgkoBhEeTFv7mlpHTgINxymMw3mMrvy6GL/gfKFwkqg==",
+      "dependencies": {
+        "@react-stately/form": "^3.0.1",
+        "@react-stately/list": "^3.10.3",
+        "@react-stately/overlays": "^3.6.5",
+        "@react-types/select": "^3.9.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/selection": {
+      "version": "3.14.3",
+      "resolved": "https://registry.npmjs.org/@react-stately/selection/-/selection-3.14.3.tgz",
+      "integrity": "sha512-d/t0rIWieqQ7wjLoMoWnuHEUSMoVXxkPBFuSlJF3F16289FiQ+b8aeKFDzFTYN7fFD8rkZTnpuE4Tcxg3TmA+w==",
+      "dependencies": {
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/slider": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/slider/-/slider-3.5.2.tgz",
+      "integrity": "sha512-ntH3NLRG+AwVC7q4Dx9DcmMkMh9vmHjHNXAgaoqNjhvwfSIae7sQ69CkVe6XeJjIBy6LlH81Kgapz+ABe5a1ZA==",
+      "dependencies": {
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/shared": "^3.22.1",
+        "@react-types/slider": "^3.7.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/table": {
+      "version": "3.11.6",
+      "resolved": "https://registry.npmjs.org/@react-stately/table/-/table-3.11.6.tgz",
+      "integrity": "sha512-34YsfOILXusj3p6QNcKEaDWVORhM6WEhwPSLCZlkwAJvkxuRQFdih5rQKoIDc0uV5aZsB6bYBqiFhnjY0VERhw==",
+      "dependencies": {
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/flags": "^3.0.1",
+        "@react-stately/grid": "^3.8.5",
+        "@react-stately/selection": "^3.14.3",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/grid": "^3.2.4",
+        "@react-types/shared": "^3.22.1",
+        "@react-types/table": "^3.9.3",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/tabs": {
+      "version": "3.6.4",
+      "resolved": "https://registry.npmjs.org/@react-stately/tabs/-/tabs-3.6.4.tgz",
+      "integrity": "sha512-WZJgMBqzLgN88RN8AxhY4aH1+I+4w1qQA0Lh3LRSDegaytd+NHixCWaP3IPjePgCB5N1UsPe96Xglw75zjHmDg==",
+      "dependencies": {
+        "@react-stately/list": "^3.10.3",
+        "@react-types/shared": "^3.22.1",
+        "@react-types/tabs": "^3.3.5",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/toggle": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/toggle/-/toggle-3.7.2.tgz",
+      "integrity": "sha512-SHCF2btcoK57c4lyhucRbyPBAFpp0Pdp0vcPdn3hUgqbu6e5gE0CwG/mgFmZRAQoc7PRc7XifL0uNw8diJJI0Q==",
+      "dependencies": {
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/checkbox": "^3.7.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/tooltip": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@react-stately/tooltip/-/tooltip-3.4.7.tgz",
+      "integrity": "sha512-ACtRgBQ8rphBtsUaaxvEAM0HHN9PvMuyvL0vUHd7jvBDCVZJ6it1BKu9SBKjekBkoBOw9nemtkplh9R2CA6V8Q==",
+      "dependencies": {
+        "@react-stately/overlays": "^3.6.5",
+        "@react-types/tooltip": "^3.4.7",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/tree": {
+      "version": "3.7.6",
+      "resolved": "https://registry.npmjs.org/@react-stately/tree/-/tree-3.7.6.tgz",
+      "integrity": "sha512-y8KvEoZX6+YvqjNCVGS3zA/BKw4D3XrUtUKIDme3gu5Mn6z97u+hUXKdXVCniZR7yvV3fHAIXwE5V2K8Oit4aw==",
+      "dependencies": {
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/selection": "^3.14.3",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/utils": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.9.1.tgz",
+      "integrity": "sha512-yzw75GE0iUWiyps02BOAPTrybcsMIxEJlzXqtvllAb01O9uX5n0i3X+u2eCpj2UoDF4zS08Ps0jPgWxg8xEYtA==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/virtualizer": {
+      "version": "3.6.8",
+      "resolved": "https://registry.npmjs.org/@react-stately/virtualizer/-/virtualizer-3.6.8.tgz",
+      "integrity": "sha512-Pf06ihTwExRJltGhi72tmLIo0pcjkL55nu7ifMafAAdxZK4ONxRLSuUjjpvYf/0Rs92xRZy2t/XmHREnfirdkQ==",
+      "dependencies": {
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/breadcrumbs": {
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/@react-types/breadcrumbs/-/breadcrumbs-3.7.3.tgz",
+      "integrity": "sha512-eFto/+6J+JR58vThNcALZRA1OlqlG3GzQ/bq3q8IrrkOZcrfbEJJCWit/+53Ia98siJKuF4OJHnotxIVIz5I3w==",
+      "dependencies": {
+        "@react-types/link": "^3.5.3",
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/button": {
+      "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/@react-types/button/-/button-3.9.2.tgz",
+      "integrity": "sha512-EnPTkGHZRtiwAoJy5q9lDjoG30bEzA/qnvKG29VVXKYAGeqY2IlFs1ypmU+z1X/CpJgPcG3I5cakM7yTVm3pSg==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/calendar": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/@react-types/calendar/-/calendar-3.4.4.tgz",
+      "integrity": "sha512-hV1Thmb/AES5OmfPvvmyjSkmsEULjiDfA7Yyy70L/YKuSNKb7Su+Bf2VnZuDW3ec+GxO4JJNlpJ0AkbphWBvcg==",
+      "dependencies": {
+        "@internationalized/date": "^3.5.2",
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/checkbox": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@react-types/checkbox/-/checkbox-3.7.1.tgz",
+      "integrity": "sha512-kuGqjQFex0As/3gfWyk+e9njCcad/ZdnYLLiNvhlk15730xfa0MmnOdpqo9jfuFSXBjOcpxoofvEhvrRMtEdUA==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/combobox": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/@react-types/combobox/-/combobox-3.10.1.tgz",
+      "integrity": "sha512-XMno1rgVRNta49vf5nV7VJpVSVAV20tt79t618gG1qRKH5Kt2Cy8lz2fQ5vHG6UTv/6jUOvU8g5Pc93sLaTmoA==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/datepicker": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/@react-types/datepicker/-/datepicker-3.7.2.tgz",
+      "integrity": "sha512-zThqFAdhQL1dqyVDsDSSTdfCjoD6634eyg/B0ZJfQxcLUR/5pch3v/gxBhbyCVDGMNHRWUWIJvY9DVOepuoSug==",
+      "dependencies": {
+        "@internationalized/date": "^3.5.2",
+        "@react-types/calendar": "^3.4.4",
+        "@react-types/overlays": "^3.8.5",
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/dialog": {
+      "version": "3.5.8",
+      "resolved": "https://registry.npmjs.org/@react-types/dialog/-/dialog-3.5.8.tgz",
+      "integrity": "sha512-RX8JsMvty8ADHRqVEkppoynXLtN4IzUh8d5z88UEBbcvWKlHfd6bOBQjQcBH3AUue5wjfpPIt6brw2VzgBY/3Q==",
+      "dependencies": {
+        "@react-types/overlays": "^3.8.5",
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/form": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/@react-types/form/-/form-3.7.2.tgz",
+      "integrity": "sha512-6/isEJY4PsYoHdMaGQtqQyquXGTwB1FqCBOPKQjI/vBGWG3fL7FGfWm4Z62eTbCH4Xyv3FZuNywlT8UjPMQyKA==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/grid": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@react-types/grid/-/grid-3.2.4.tgz",
+      "integrity": "sha512-sDVoyQcH7MoGdx5nBi5ZOU/mVFBt9YTxhvr0PZ97dMdEHZtJC1w9SuezwWS34f50yb8YAXQRTICbZYcK4bAlDA==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/link": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@react-types/link/-/link-3.5.3.tgz",
+      "integrity": "sha512-yVafjW3IejyVnK3oMBNjFABCGG6J27EUG8rvkaGaI1uB6srGUEhpJ97XLv11aj1QkXHBy3VGXqxEV3S7wn4HTw==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/listbox": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@react-types/listbox/-/listbox-3.4.7.tgz",
+      "integrity": "sha512-68y5H9CVSPFiwO6MOFxTbry9JQMK/Lb1M9i3M8TDyq1AbJxBPpgAvJ9RaqIMCucsnqCzpY/zA3D/X417zByL1w==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/menu": {
+      "version": "3.9.7",
+      "resolved": "https://registry.npmjs.org/@react-types/menu/-/menu-3.9.7.tgz",
+      "integrity": "sha512-K6KhloJVoGsqwkdeez72fkNI9dfrmLI/sNrB4XuOKo2crDQ/eyZYWyJmzz8giz/tHME9w774k487rVoefoFh5w==",
+      "dependencies": {
+        "@react-types/overlays": "^3.8.5",
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/meter": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@react-types/meter/-/meter-3.3.7.tgz",
+      "integrity": "sha512-p+YJ0+Lpn5MLmlbFZbDH1P0ILv1+AuMcUbxLcXMIVMGn7o0FO7eVZnFuq76D+qTDm9all+TRLJix7bctOrP+5Q==",
+      "dependencies": {
+        "@react-types/progress": "^3.5.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/numberfield": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@react-types/numberfield/-/numberfield-3.8.1.tgz",
+      "integrity": "sha512-GaCjLQgXUGCt40SLjKk3/COMWFlN2vV/3Xs3VSLAEdFZpk99b+Ik1oR21+7ZP5/iMHuQDc1MJRWdFfIjxCvVDQ==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/overlays": {
+      "version": "3.8.5",
+      "resolved": "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.8.5.tgz",
+      "integrity": "sha512-4D7EEBQigD/m8hE68Ys8eloyyZFHHduqykSIgINJ0edmo0jygRbWlTwuhWFR9USgSP4dK54duN0Mvq0m4HEVEw==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/progress": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@react-types/progress/-/progress-3.5.2.tgz",
+      "integrity": "sha512-aQql22kusEudsHwDEzq6y/Mh29AM+ftRDKdS5E5g4MkCY5J4FMbOYco1T5So83NIvvG9+eKcxPoJUMjQQACAyA==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/radio": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@react-types/radio/-/radio-3.7.1.tgz",
+      "integrity": "sha512-Zut3rN1odIUBLZdijeyou+UqsLeRE76d9A+npykYGu29ndqmo3w4sLn8QeQcdj1IR71ZnG0pW2Y2BazhK5XrrQ==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/searchfield": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@react-types/searchfield/-/searchfield-3.5.3.tgz",
+      "integrity": "sha512-gBfsT1WpY8UIb74yyYmnjiHpVasph2mdmGj9i8cGF2HUYwx5p+Fr85mtCGDph0uirvRoM5ExMp4snD+ueNAVCg==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1",
+        "@react-types/textfield": "^3.9.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/select": {
+      "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/@react-types/select/-/select-3.9.2.tgz",
+      "integrity": "sha512-fGFrunednY3Pq/BBwVOf87Fsuyo/SlevL0wFIE9OOl2V5NXVaTY7/7RYA8hIOHPzmvsMbndy419BEudiNGhv4A==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/shared": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.22.1.tgz",
+      "integrity": "sha512-PCpa+Vo6BKnRMuOEzy5zAZ3/H5tnQg1e80khMhK2xys0j6ZqzkgQC+fHMNZ7VDFNLqqNMj/o0eVeSBDh2POjkw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/slider": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@react-types/slider/-/slider-3.7.1.tgz",
+      "integrity": "sha512-FKO3YZYdrBs00XbBW5acP+0L1cCdevl/uRJiXbnLpGysO5PrSFIRS7Wlv4M7ztf6gT7b1Ao4FNC9crbxBr6BzA==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/switch": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@react-types/switch/-/switch-3.5.1.tgz",
+      "integrity": "sha512-2LFEKMGeufqyYmeN/5dtkDkCPG6x9O4eu6aaBaJmPGon7C/l3yiFEgRue6oCUYc1HixR7Qlp0sPxk0tQeWzrSg==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/table": {
+      "version": "3.9.3",
+      "resolved": "https://registry.npmjs.org/@react-types/table/-/table-3.9.3.tgz",
+      "integrity": "sha512-Hs/pMbxJdga2zBol4H5pV1FVIiRjCuSTXst6idJjkctanTexR4xkyrtBwl+rdLNoGwQ2pGii49vgklc5bFK7zA==",
+      "dependencies": {
+        "@react-types/grid": "^3.2.4",
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/tabs": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@react-types/tabs/-/tabs-3.3.5.tgz",
+      "integrity": "sha512-6NTSZBOWekCtApdZrhu5tHhE/8q52oVohQN+J5T7shAXd6ZAtu8PABVR/nH4BWucc8FL0OUajRqunqzQMU13gA==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/textfield": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@react-types/textfield/-/textfield-3.9.1.tgz",
+      "integrity": "sha512-JBHY9M2CkL6xFaGSfWmUJVu3tEK09FaeB1dU3IEh6P41xxbFnPakYHSSAdnwMXBtXPoSHIVsUBickW/pjgfe5g==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/tooltip": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@react-types/tooltip/-/tooltip-3.4.7.tgz",
+      "integrity": "sha512-rV4HZRQxLRNhe24yATOxnFQtGRUmsR7mqxMupXCmd1vrw8h+rdKlQv1zW2q8nALAKNmnRXZJHxYQ1SFzb98fgg==",
+      "dependencies": {
+        "@react-types/overlays": "^3.8.5",
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.15.1",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.1.tgz",
@@ -3770,6 +5081,14 @@
       "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-2.4.0.tgz",
       "integrity": "sha512-WFkQx1mbs2b5+7looI9IV1BLa3bIApuN3ehp9FP58xGg7KL9hCHDECgW3BwO9l9L+xBPVAD7Yjn1EhGe6EDTeA=="
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.6.tgz",
+      "integrity": "sha512-aYX01Ke9hunpoCexYAgQucEpARGQ5w/cqHFrIR+e9gdKb1QWTsVJuTJ2ozQzIAxLyRQe/m+2RqzkyOOGiMKRQA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@szmarczak/http-timer": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
@@ -3782,6 +5101,30 @@
         "node": ">=10"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.27.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.27.5.tgz",
+      "integrity": "sha512-HuYOo46NhzNX1SwXCmLf/Skr8B7T56cDHUN+iOhnu7+GOkUMThda64GwZpAqQzBT8TOTBQo6RQaNe0gi3Gi2fw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.27.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.27.5.tgz",
+      "integrity": "sha512-VcuQo4CYRGsPsD8/rj9e4WnXN6eU4GKmAs0Yd9a1hLSx6DxAzRaBdrwu6P9lfjpz8bxaYkZRyb5NI+YtLipoYA==",
+      "dependencies": {
+        "@tanstack/query-core": "5.27.5"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
     "node_modules/@testim/chrome-version": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@testim/chrome-version/-/chrome-version-1.1.4.tgz",
@@ -4366,6 +5709,15 @@
       "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
       "dev": true
     },
+    "node_modules/@types/sharp": {
+      "version": "0.31.1",
+      "resolved": "https://registry.npmjs.org/@types/sharp/-/sharp-0.31.1.tgz",
+      "integrity": "sha512-5nWwamN9ZFHXaYEincMSuza8nNfOof8nmO+mcI+Agx1uMUk4/pQnNIcix+9rLPXzKrm1pS34+6WRDbDV0Jn7ag==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/shuffle-seed": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@types/shuffle-seed/-/shuffle-seed-1.1.3.tgz",
@@ -6668,6 +8020,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
+    },
     "node_modules/cliui": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -6770,7 +8127,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
       "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -11106,6 +12462,17 @@
         "node": ">=12"
       }
     },
+    "node_modules/intl-messageformat": {
+      "version": "10.5.11",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.5.11.tgz",
+      "integrity": "sha512-eYq5fkFBVxc7GIFDzpFQkDOZgNayNTQn4Oufe8jw6YY6OHVw70/4pA3FyCsQ0Gb2DnvEJEMmN2tOaXUGByM+kg==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.18.2",
+        "@formatjs/fast-memoize": "2.2.0",
+        "@formatjs/icu-messageformat-parser": "2.7.6",
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/ip-regex": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.3.0.tgz",
@@ -12316,6 +13683,15 @@
       "integrity": "sha512-0/BnGCCfyUMkBpeDgWihanIAF9JmZhHBgUhEqzvf+adhNGLoP6TaiI5oF8oyb3I45P+PcnrqihSf01M0l0G5+Q==",
       "dev": true
     },
+    "node_modules/legacy-swc-helpers": {
+      "name": "@swc/helpers",
+      "version": "0.4.14",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz",
+      "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/level": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/level/-/level-6.0.1.tgz",
@@ -13018,6 +14394,11 @@
         "ufo": "^1.3.2"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.47.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.47.0.tgz",
+      "integrity": "sha512-VabVvHvQ9QmMwXu4du008ZDuyLnHs9j7ThVFsiJoXSOQk18+LF89N4ADzPbFenm0W4V2bGHnFBztIRQTgBfxzw=="
+    },
     "node_modules/moo": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
@@ -14694,9 +16075,9 @@
       }
     },
     "node_modules/prettier-plugin-tailwindcss": {
-      "version": "0.5.11",
-      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.11.tgz",
-      "integrity": "sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==",
+      "version": "0.5.12",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.12.tgz",
+      "integrity": "sha512-o74kiDBVE73oHW+pdkFSluHBL3cYEvru5YgEqNkBMFF7Cjv+w1vI565lTlfoJT4VLWDe0FMtZ7FkE/7a4pMXSQ==",
       "dev": true,
       "engines": {
         "node": ">=14.21.3"
@@ -14714,6 +16095,7 @@
         "prettier-plugin-marko": "*",
         "prettier-plugin-organize-attributes": "*",
         "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
         "prettier-plugin-style-order": "*",
         "prettier-plugin-svelte": "*"
       },
@@ -14751,6 +16133,9 @@
         "prettier-plugin-organize-imports": {
           "optional": true
         },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
         "prettier-plugin-style-order": {
           "optional": true
         },
@@ -15032,6 +16417,84 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-aria": {
+      "version": "3.32.1",
+      "resolved": "https://registry.npmjs.org/react-aria/-/react-aria-3.32.1.tgz",
+      "integrity": "sha512-7KCJg4K5vlRqiXdGjgCT05Du8RhGBYC+2ok4GOh/Znmg8aMwOk7t0YwxaT5i1z30+fmDcJS/pk/ipUPUg28CXg==",
+      "dependencies": {
+        "@internationalized/string": "^3.2.1",
+        "@react-aria/breadcrumbs": "^3.5.11",
+        "@react-aria/button": "^3.9.3",
+        "@react-aria/calendar": "^3.5.6",
+        "@react-aria/checkbox": "^3.14.1",
+        "@react-aria/combobox": "^3.8.4",
+        "@react-aria/datepicker": "^3.9.3",
+        "@react-aria/dialog": "^3.5.12",
+        "@react-aria/dnd": "^3.5.3",
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/gridlist": "^3.7.5",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/label": "^3.7.6",
+        "@react-aria/link": "^3.6.5",
+        "@react-aria/listbox": "^3.11.5",
+        "@react-aria/menu": "^3.13.1",
+        "@react-aria/meter": "^3.4.11",
+        "@react-aria/numberfield": "^3.11.1",
+        "@react-aria/overlays": "^3.21.1",
+        "@react-aria/progress": "^3.4.11",
+        "@react-aria/radio": "^3.10.2",
+        "@react-aria/searchfield": "^3.7.3",
+        "@react-aria/select": "^3.14.3",
+        "@react-aria/selection": "^3.17.5",
+        "@react-aria/separator": "^3.3.11",
+        "@react-aria/slider": "^3.7.6",
+        "@react-aria/ssr": "^3.9.2",
+        "@react-aria/switch": "^3.6.2",
+        "@react-aria/table": "^3.13.5",
+        "@react-aria/tabs": "^3.8.5",
+        "@react-aria/tag": "^3.3.3",
+        "@react-aria/textfield": "^3.14.3",
+        "@react-aria/tooltip": "^3.7.2",
+        "@react-aria/utils": "^3.23.2",
+        "@react-aria/visually-hidden": "^3.8.10",
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/react-aria-components": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/react-aria-components/-/react-aria-components-1.1.1.tgz",
+      "integrity": "sha512-XdgqSbrlh9V1vJEvTwrnr+YGndQWYcVEAbN+Rx104o9g88cAAabclgetU2OUJ9Gbht6+gwnvnA0ksgXzVZog2Q==",
+      "dependencies": {
+        "@internationalized/date": "^3.5.2",
+        "@internationalized/string": "^3.2.1",
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/menu": "^3.13.1",
+        "@react-aria/toolbar": "3.0.0-beta.3",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/menu": "^3.6.1",
+        "@react-stately/table": "^3.11.6",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/form": "^3.7.2",
+        "@react-types/grid": "^3.2.4",
+        "@react-types/shared": "^3.22.1",
+        "@react-types/table": "^3.9.3",
+        "@swc/helpers": "^0.5.0",
+        "client-only": "^0.0.1",
+        "react-aria": "^3.32.1",
+        "react-stately": "^3.30.1",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -15110,6 +16573,39 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-stately": {
+      "version": "3.30.1",
+      "resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.30.1.tgz",
+      "integrity": "sha512-IEhKHMT7wijtczA5vtw/kdq9CZuOIF+ReoSimydTFiABRQxWO9ESAl/fToXOUM9qmCdhdqjGJgMAhqTnmheh8g==",
+      "dependencies": {
+        "@react-stately/calendar": "^3.4.4",
+        "@react-stately/checkbox": "^3.6.3",
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/combobox": "^3.8.2",
+        "@react-stately/data": "^3.11.2",
+        "@react-stately/datepicker": "^3.9.2",
+        "@react-stately/dnd": "^3.2.8",
+        "@react-stately/form": "^3.0.1",
+        "@react-stately/list": "^3.10.3",
+        "@react-stately/menu": "^3.6.1",
+        "@react-stately/numberfield": "^3.9.1",
+        "@react-stately/overlays": "^3.6.5",
+        "@react-stately/radio": "^3.10.2",
+        "@react-stately/searchfield": "^3.5.1",
+        "@react-stately/select": "^3.6.2",
+        "@react-stately/selection": "^3.14.3",
+        "@react-stately/slider": "^3.5.2",
+        "@react-stately/table": "^3.11.6",
+        "@react-stately/tabs": "^3.6.4",
+        "@react-stately/toggle": "^3.7.2",
+        "@react-stately/tooltip": "^3.4.7",
+        "@react-stately/tree": "^3.7.6",
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
     "node_modules/react-toastify": {
       "version": "9.1.3",
       "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz",
@@ -15239,6 +16735,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
@@ -16447,6 +17948,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "node_modules/statuses": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
@@ -16836,6 +18342,18 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.2.1.tgz",
+      "integrity": "sha512-o+2GTLkthfa5YUt4JxPfzMIpQzZ3adD1vLVkvKE1Twl9UAhGsEbIZhHHZVRttyW177S8PDJI3bTQNaebyofK3Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.7"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
@@ -16873,6 +18391,15 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss-react-aria-components": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss-react-aria-components/-/tailwindcss-react-aria-components-1.1.1.tgz",
+      "integrity": "sha512-ig2pJOz4Gb10uYbGrFiIb5Fs3hUlZ5fTaNfDmLMofVhwXLpyOY+swaSBNg3XzS0ccQHgag3vXxIuHQXVetKYQg==",
+      "dev": true,
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
     "node_modules/tailwindcss/node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -17079,6 +18606,11 @@
       "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
       "dev": true
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
+    },
     "node_modules/tinybench": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.6.0.tgz",
@@ -18401,6 +19933,14 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
       "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw=="
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/utf8-byte-length": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz",