feat: venus for affine

.github/workflows/venus.yml

@@ -0,0 +1,66 @@
+name: Build Venus
+
+on:
+    push:
+        branches: [master]
+        paths:
+            - 'apps/venus/**'
+            - '.github/workflows/venus.yml'
+    pull_request:
+        branches: [master]
+        paths:
+            - 'apps/venus/**'
+            - '.github/workflows/venus.yml'
+
+# Cancels all previous workflow runs for pull requests that have not completed.
+# See https://docs.github.com/en/actions/using-jobs/using-concurrency
+concurrency:
+    # The concurrency group contains the workflow name and the branch name for
+    # pull requests or the commit hash for any other events.
+    group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
+    cancel-in-progress: true
+
+env:
+    REGISTRY: ghcr.io
+    NAMESPACE: toeverything
+    VENUS_IMAGE_NAME: venus
+    IMAGE_TAG: canary-${{ github.sha }}
+    IMAGE_TAG_LATEST: nightly-latest
+
+jobs:
+    ligo-virgo:
+        runs-on: self-hosted
+        environment: development
+        permissions:
+            contents: read
+            packages: write
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v2
+
+            - name: Log in to the Container registry
+              uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
+              with:
+                  registry: ${{ env.REGISTRY }}
+                  username: ${{ github.actor }}
+                  password: ${{ secrets.GITHUB_TOKEN }}
+
+            - name: Extract metadata (tags, labels) for Docker (venus)
+              id: meta_venus
+              uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+              with:
+                  images: ${{ env.REGISTRY }}/${{ env.NAMESPACE }}/${{ env.VENUS_IMAGE_NAME }}
+                  tags: |
+                      ${{ env.IMAGE_TAG }}
+                      ${{ env.IMAGE_TAG_LATEST }}
+
+            - name: Build and push Docker image (venus)
+              uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
+              with:
+                  context: .
+                  file: ./Dockerfile-venus
+                  push: ${{ github.ref == 'refs/heads/master' && true || false }}
+                  tags: ${{ steps.meta_venus.outputs.tags }}
+                  labels: ${{ steps.meta_venus.outputs.labels }}
+                  target: venus

Caddyfile-venus

@@ -0,0 +1,28 @@
+:80 {
+        root /* ./dist
+
+        file_server {
+                precompressed br
+        }
+
+        encode {
+                zstd
+                gzip 9
+        }
+
+        @notStatic {
+                not path /*.css
+                not path /*.js
+                not path /*.png
+                not path /*.jpg
+                not path /*.svg
+                not path /*.ttf
+                not path /*.eot
+                not path /*.woff
+                not path /*.woff2
+        }
+
+        handle @notStatic {
+                try_files {path} /index.html
+        }
+}

Dockerfile-venus

@@ -0,0 +1,21 @@
+FROM node:16-alpine as builder
+WORKDIR /app
+COPY . .
+RUN apk add g++ make python3 git
+RUN npm i -g pnpm@7 && pnpm i --frozen-lockfile --store=node_modules/.pnpm-store && pnpm run build:venus
+
+FROM node:16-alpine as relocate
+WORKDIR /app
+COPY --from=builder /app/dist/apps/venus ./dist
+COPY --from=builder /app/Caddyfile-venus ./Caddyfile
+RUN rm ./dist/*.txt
+
+# =============
+# venus image
+# =============
+FROM caddy:2.4.6-alpine as venus
+WORKDIR /app
+COPY --from=relocate /app .
+
+EXPOSE 80
+CMD ["caddy", "run"]

apps/ligo-virgo/src/index.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable filename-rules/match */
-import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 

apps/venus/.babelrc

@@ -0,0 +1,11 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic"
+            }
+        ]
+    ],
+    "plugins": []
+}

apps/venus/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by:
+# 1. autoprefixer to adjust CSS to support the below specified browsers
+# 2. babel preset-env to adjust included polyfills
+#
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+#
+# If you need to support different browsers in production, you may tweak the list below.
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major version
+last 2 iOS major versions
+Firefox ESR
+not IE 9-11 # For IE 9-11 support, remove 'not'.

apps/venus/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+    "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
+    "ignorePatterns": ["!**/*"],
+    "overrides": [
+        {
+            "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+            "rules": {}
+        },
+        {
+            "files": ["*.ts", "*.tsx"],
+            "rules": {}
+        },
+        {
+            "files": ["*.js", "*.jsx"],
+            "rules": {}
+        }
+    ]
+}

apps/venus/package.json

@@ -0,0 +1,19 @@
+{
+    "name": "venus",
+    "version": "1.0.0",
+    "license": "MIT",
+    "description": "",
+    "scripts": {},
+    "keywords": [],
+    "author": "DarkSky <darksky2048@gmail.com>",
+    "dependencies": {
+        "@mui/joy": "^5.0.0-alpha.39",
+        "@emotion/react": "^11.10.0",
+        "@emotion/styled": "^11.10.0",
+        "lozad": "^1.16.0"
+    },
+    "devDependencies": {
+        "mini-css-extract-plugin": "^2.6.1",
+        "webpack": "^5.73.0"
+    }
+}

apps/venus/project.json

@@ -0,0 +1,76 @@
+{
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "apps/venus/src",
+    "projectType": "application",
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:webpack",
+            "outputs": ["{options.outputPath}"],
+            "defaultConfiguration": "production",
+            "options": {
+                "compiler": "babel",
+                "outputPath": "dist/apps/venus",
+                "index": "apps/venus/src/index.html",
+                "baseHref": "/",
+                "main": "apps/venus/src/index.tsx",
+                "polyfills": "apps/venus/src/polyfills.ts",
+                "tsConfig": "apps/venus/tsconfig.app.json",
+                "assets": ["apps/venus/src/assets"],
+                "styles": [],
+                "scripts": [],
+                "webpackConfig": "apps/venus/webpack.config.js"
+            },
+            "configurations": {
+                "production": {
+                    "fileReplacements": [
+                        {
+                            "replace": "apps/venus/src/environments/environment.ts",
+                            "with": "apps/venus/src/environments/environment.prod.ts"
+                        }
+                    ],
+                    "optimization": true,
+                    "outputHashing": "all",
+                    "sourceMap": false,
+                    "namedChunks": true,
+                    "extractLicenses": false,
+                    "vendorChunk": false,
+                    "generateIndexHtml": false
+                }
+            }
+        },
+        "serve": {
+            "executor": "@nrwl/web:dev-server",
+            "defaultConfiguration": "development",
+            "options": {
+                "buildTarget": "venus:build",
+                "hmr": true,
+                "open": true
+            },
+            "configurations": {
+                "development": {
+                    "buildTarget": "venus:build:development"
+                },
+                "production": {
+                    "buildTarget": "venus:build:production",
+                    "hmr": false
+                }
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": ["apps/venus/**/*.{ts,tsx,js,jsx}"]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/apps/venus"],
+            "options": {
+                "jestConfig": "apps/venus/jest.config.ts",
+                "passWithNoTests": true
+            }
+        }
+    },
+    "tags": ["app:venus"]
+}

apps/venus/src/app/index.tsx

@@ -0,0 +1,938 @@
+/* eslint-disable max-lines */
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable filename-rules/match */
+import { useEffect, useMemo, useState } from 'react';
+import clsx from 'clsx';
+
+import { CssVarsProvider, styled } from '@mui/joy/styles';
+import { Box, Button, Container, Grid, SvgIcon, Typography } from '@mui/joy';
+import Card from '@mui/joy/Card';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import RedditIcon from '@mui/icons-material/Reddit';
+import TelegramIcon from '@mui/icons-material/Telegram';
+// eslint-disable-next-line no-restricted-imports
+import { useMediaQuery } from '@mui/material';
+
+const DiscordIcon = (props: any) => {
+    return (
+        <SvgIcon
+            {...props}
+            width="71"
+            height="55"
+            viewBox="0 0 71 55"
+            fill="none"
+        >
+            <g clip-path="url(#clip0)">
+                <path
+                    d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z"
+                    fill="#23272A"
+                />
+            </g>
+            <defs>
+                <clipPath id="clip0">
+                    <rect width="71" height="55" fill="white" />
+                </clipPath>
+            </defs>
+        </SvgIcon>
+    );
+};
+
+const VenusContainer = styled(Container)({
+    margin: '1em auto',
+});
+
+const Alternatives = styled(Box)<{ width: string }>(({ width }) => ({
+    position: 'relative',
+    width: '24em',
+    height: '128px',
+    transform: 'translateY(-8px)',
+    overflowY: 'hidden',
+    '@media (max-width: 768px)': {
+        width,
+        height: '48px',
+        transform: 'translateY(0)',
+    },
+    '& .scroll-element': {
+        width: 'inherit',
+        height: 'inherit',
+        position: 'absolute',
+        left: '0%',
+        top: '0%',
+        lineHeight: '96px',
+        '@media (max-width: 768px)': {
+            lineHeight: '32px',
+        },
+    },
+    '& .scroll-element.active': {
+        animation: 'primary 500ms linear infinite',
+    },
+    '.primary.active': {
+        animation: 'primary 500ms linear infinite',
+    },
+    '.secondary.active': {
+        animation: 'secondary 500ms linear infinite',
+    },
+    '@keyframes primary': {
+        from: {
+            top: '0%',
+        },
+        to: {
+            top: '-100%',
+        },
+    },
+    '@keyframes secondary': {
+        from: {
+            top: '100%',
+        },
+        to: {
+            top: '0%',
+        },
+    },
+}));
+
+const _alternatives = ['Notion', 'Miro', 'Monday'];
+const _alternativesSize = [8, 6, 10];
+
+const Product = () => {
+    const [idx, setIdx] = useState(0);
+    const [last, current] = useMemo(
+        () => [
+            _alternatives[idx],
+            _alternatives[idx + 1] ? _alternatives[idx + 1] : _alternatives[0],
+        ],
+        [idx]
+    );
+    const maxWidth = useMemo(() => _alternativesSize[idx], [idx]);
+    const [active, setActive] = useState(false);
+    const matches = useMediaQuery('(max-width: 768px)');
+
+    useEffect(() => {
+        const handle = setInterval(() => {
+            setActive(true);
+            setTimeout(
+                () => {
+                    setIdx(idx => (_alternatives[idx + 1] ? idx + 1 : 0));
+                    setActive(false);
+                },
+                matches ? 450 : 380
+            );
+        }, 2000);
+        return () => clearInterval(handle);
+    }, [matches]);
+
+    return (
+        <Alternatives
+            width={`${maxWidth}em`}
+            sx={{ margin: 'auto', marginRight: '1em', transition: 'width .5s' }}
+        >
+            <Box
+                className={clsx(
+                    'scroll-element',
+                    'primary',
+                    active && 'active'
+                )}
+            >
+                <Typography
+                    fontSize="96px"
+                    fontWeight={900}
+                    sx={{
+                        color: '#06449d',
+                        textAlign: 'right',
+                        overflow: 'hidden',
+                        '@media (max-width: 768px)': {
+                            fontSize: '32px',
+                        },
+                    }}
+                >
+                    {last}
+                </Typography>
+            </Box>
+            <Box
+                className={clsx(
+                    'scroll-element',
+                    'primary',
+                    active && 'active'
+                )}
+                sx={{
+                    marginTop: '96px',
+                    textAlign: 'right',
+                    overflow: 'hidden',
+                    '@media (max-width: 768px)': {
+                        marginTop: '48px',
+                    },
+                }}
+            >
+                <Typography
+                    fontSize="96px"
+                    fontWeight={900}
+                    sx={{
+                        color: '#06449d',
+                        overflow: 'hidden',
+                        '@media (max-width: 768px)': {
+                            fontSize: '32px',
+                        },
+                    }}
+                >
+                    {current}
+                </Typography>
+            </Box>
+        </Alternatives>
+    );
+};
+
+const AffineImage = styled('img')({
+    maxWidth: '100%',
+    objectFit: 'contain',
+});
+
+const GitHub = (props: { center?: boolean; flat?: boolean }) => {
+    const matches = useMediaQuery('(max-width: 768px)');
+
+    return (
+        <Button
+            onClick={() => {
+                window.location.replace(
+                    'https://github.com/toeverything/AFFiNE'
+                );
+            }}
+            {...(props.flat ? { variant: 'plain' } : {})}
+            {...{
+                sx: {
+                    margin: 'auto 1em',
+                    ...(props.flat
+                        ? {
+                              padding: matches ? '0' : '0 0.5em',
+                              ':hover': { backgroundColor: 'unset' },
+                          }
+                        : {}),
+                    ...(props.center
+                        ? {
+                              padding: '0.5em 1em',
+                              fontSize: '2em',
+                              ':hover': {
+                                  backgroundColor: '#0c60d9',
+                                  boxShadow: '2px 2px 20px #08f4',
+                              },
+                          }
+                        : {}),
+                },
+            }}
+            startIcon={<GitHubIcon />}
+            size="lg"
+        >
+            GitHub
+        </Button>
+    );
+};
+
+export function App() {
+    const matches = useMediaQuery('(max-width: 768px)');
+
+    return (
+        <CssVarsProvider>
+            <VenusContainer
+                fixed
+                sx={{
+                    maxWidth: '1440px !important',
+                    '&>div': {
+                        marginTop: '1em',
+                    },
+                }}
+            >
+                <Grid
+                    container
+                    spacing={2}
+                    sx={{ maxWidth: '1280px', margin: 'auto' }}
+                >
+                    <Grid xs={6}>
+                        <Button
+                            size="lg"
+                            variant="plain"
+                            sx={{
+                                padding: matches ? '0' : '0 0.5em',
+                                ':hover': { backgroundColor: 'unset' },
+                            }}
+                        >
+                            AFFiNE
+                        </Button>
+                    </Grid>
+                    <Grid
+                        xs={6}
+                        sx={{ display: 'flex', justifyContent: 'right' }}
+                    >
+                        <GitHub flat />
+                        <Button
+                            onClick={() => {
+                                window.location.replace(
+                                    'https://blog.affine.pro'
+                                );
+                            }}
+                            variant="plain"
+                            sx={{
+                                padding: matches ? '0' : '0 0.5em',
+                                ':hover': { backgroundColor: 'unset' },
+                            }}
+                            size="lg"
+                        >
+                            Blog
+                        </Button>
+                    </Grid>
+                </Grid>
+                <Grid
+                    xs={12}
+                    sx={{ display: 'flex', marginTop: '12vh!important' }}
+                >
+                    <Box
+                        sx={{
+                            display: 'inline-flex',
+                            flexWrap: 'wrap',
+                            justifyContent: 'center',
+                            margin: 'auto',
+                            fontWeight: 'bold',
+                            textAlign: 'center',
+                        }}
+                    >
+                        <Typography
+                            fontSize="96px"
+                            fontWeight={900}
+                            sx={{
+                                marginRight: '0.25em',
+                                '@media (max-width: 768px)': {
+                                    fontSize: '32px',
+                                    marginRight: 0,
+                                },
+                            }}
+                        >
+                            Open Source,
+                        </Typography>
+                        <Typography
+                            fontSize="96px"
+                            fontWeight={900}
+                            sx={{
+                                '@media (max-width: 768px)': {
+                                    fontSize: '32px',
+                                },
+                            }}
+                        >
+                            Privacy First
+                        </Typography>
+                    </Box>
+                </Grid>
+                <Grid
+                    xs={12}
+                    sx={{
+                        display: 'flex',
+                        flexFlow: 'wrap',
+                        overflow: 'auto',
+                    }}
+                >
+                    <Box
+                        sx={{
+                            display: 'inline-flex',
+                            flexFlow: 'wrap',
+                            margin: 'auto',
+                            fontWeight: 'bold',
+                            textAlign: 'center',
+                        }}
+                    >
+                        <Product />
+                        <Typography
+                            fontSize="96px"
+                            fontWeight={900}
+                            sx={{
+                                color: '#06449d',
+                                margin: 'auto',
+                                '@media (max-width: 768px)': {
+                                    fontSize: '32px',
+                                },
+                            }}
+                        >
+                            Alternative
+                        </Typography>
+                    </Box>
+                </Grid>
+                <Grid xs={12} sx={{ display: 'flex' }}>
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            justifyContent: 'center',
+                            margin: 'auto',
+                            textAlign: 'center',
+                        }}
+                    >
+                        <Typography
+                            level="h3"
+                            fontWeight={'400'}
+                            sx={{ color: '#888' }}
+                        >
+                            Affine is the next-generation collaborative
+                            knowledge base for professionals.
+                        </Typography>
+                    </Box>
+                </Grid>
+                <Grid xs={12} sx={{ display: 'flex' }}>
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            justifyContent: 'center',
+                            margin: 'auto',
+                            textAlign: 'center',
+                            marginTop: '1.5em',
+                            marginBottom: '12vh!important',
+                        }}
+                    >
+                        <Typography level="h2" sx={{ alignSelf: 'center' }}>
+                            Try it on
+                        </Typography>
+                        <GitHub center />
+                    </Box>
+                </Grid>
+                <Grid
+                    xs={12}
+                    sx={{ display: 'flex', maxWidth: '1200px', margin: 'auto' }}
+                >
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            margin: 'auto',
+                            transition: 'all .5s',
+                            transform: 'scale(0.98)',
+                            boxShadow: '2px 2px 40px #0002',
+                            ':hover': {
+                                transform: 'scale(1)',
+                                boxShadow: '2px 2px 40px #0004',
+                            },
+                        }}
+                    >
+                        <AffineImage
+                            src="/assets/page.png"
+                            alt="AFFiNE main ui"
+                        />
+                    </Box>
+                </Grid>
+                <Grid xs={12} sx={{ display: 'flex' }}>
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            margin: 'auto',
+                            marginTop: '12em',
+                        }}
+                    >
+                        <Typography
+                            level={matches ? 'h2' : 'h1'}
+                            fontWeight={'bold'}
+                        >
+                            It’s not just add-up of Docs, whiteboard, and
+                            tables.
+                        </Typography>
+                    </Box>
+                </Grid>
+                <Grid xs={12} sx={{ display: 'flex' }}>
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            flexWrap: 'wrap',
+                            margin: 'auto',
+                            justifyContent: 'center',
+                            textAlign: 'center',
+                            marginBottom: '12em',
+                        }}
+                    >
+                        <Typography fontSize="1.2em">
+                            Transform any building blocks as you like.
+                        </Typography>
+                        <Typography fontSize="1.2em">
+                            Say goodbye to redundancy, and keep all your
+                            knowledge minimal, in your way.
+                        </Typography>
+                    </Box>
+                </Grid>
+                <Grid
+                    xs={12}
+                    sx={{
+                        display: 'flex',
+                        flexDirection: matches ? 'column' : 'row',
+                        marginBottom: '12em',
+                    }}
+                >
+                    <Grid
+                        xs={matches ? 12 : 3}
+                        sx={{
+                            display: 'flex',
+                            ...(matches
+                                ? {}
+                                : { marginLeft: '4em', marginRight: '2em' }),
+                        }}
+                    >
+                        <Box
+                            sx={{
+                                display: 'flex',
+                                flexDirection: 'column',
+                                flexWrap: 'wrap',
+                                justifyContent: 'left',
+                                alignSelf: 'center',
+                                textAlign: 'left',
+                                width: '100%',
+                            }}
+                        >
+                            <Typography
+                                level="h2"
+                                fontWeight={'bold'}
+                                style={{ marginBottom: '0.5em' }}
+                            >
+                                Shape Your Page
+                            </Typography>
+                            <Typography
+                                fontSize="1.2em"
+                                style={{ marginBottom: '0.25em' }}
+                            >
+                                Docs, kanban, and databases are all fully
+                                functional at any place. You always keep
+                                what-you-see-is-what-you-get.
+                            </Typography>
+                            <Typography
+                                fontSize="1.2em"
+                                style={{ marginBottom: '0.25em' }}
+                            >
+                                All pages come with docs and whiteboard mode.
+                            </Typography>
+                        </Box>
+                    </Grid>
+                    <Grid
+                        xs={matches ? 12 : 9}
+                        sx={{ display: 'flex', width: '100%' }}
+                    >
+                        <Box
+                            sx={{
+                                display: 'flex',
+                                flexDirection: 'column',
+                                flexWrap: 'wrap',
+                                justifyContent: 'left',
+                                textAlign: 'left',
+                                transition: 'all .5s',
+                                // boxShadow: '2px 2px 40px #08f2',
+                                // ':hover': {
+                                //     boxShadow: '2px 2px 40px #08f4',
+                                // },
+                            }}
+                        >
+                            <AffineImage
+                                src="/assets/shape.png"
+                                alt="AFFiNE Shape Your Page"
+                            />
+                        </Box>
+                    </Grid>
+                </Grid>
+                <Grid
+                    xs={12}
+                    sx={{
+                        display: 'flex',
+                        flexDirection: matches ? 'column' : 'row-reverse',
+                        marginBottom: '12em',
+                    }}
+                >
+                    <Grid
+                        xs={matches ? 12 : 4}
+                        sx={{
+                            display: 'flex',
+                            ...(matches ? {} : { marginRight: '4em' }),
+                        }}
+                    >
+                        <Box
+                            sx={{
+                                display: 'flex',
+                                flexDirection: 'column',
+                                flexWrap: 'wrap',
+                                justifyContent: 'left',
+                                alignSelf: 'center',
+                                textAlign: 'left',
+                                width: '100%',
+                            }}
+                        >
+                            <Typography
+                                level="h2"
+                                fontWeight={'bold'}
+                                style={{ marginBottom: '0.5em' }}
+                            >
+                                Plan Your Task
+                            </Typography>
+                            <Typography
+                                fontSize="1.2em"
+                                style={{ marginBottom: '0.25em' }}
+                            >
+                                No more chaos between so many views.
+                            </Typography>
+                            <Typography
+                                fontSize="1.2em"
+                                style={{ marginBottom: '0.25em' }}
+                            >
+                                Set a TODO with Markdown, and manage it in
+                                Kanban.
+                            </Typography>
+                            <Typography
+                                fontSize="1.2em"
+                                style={{ marginBottom: '0.25em' }}
+                            >
+                                Managing multi-dimensional tables should be
+                                simple as that.
+                            </Typography>
+                        </Box>
+                    </Grid>
+                    <Grid
+                        xs={matches ? 12 : 8}
+                        sx={{ display: 'flex', width: '100%' }}
+                    >
+                        <Box
+                            sx={{
+                                display: 'flex',
+                                flexDirection: 'column',
+                                flexWrap: 'wrap',
+                                justifyContent: 'left',
+                                textAlign: 'left',
+                                transition: 'all .5s',
+                                // boxShadow: '2px 2px 40px #08f2',
+                                // ':hover': {
+                                //     boxShadow: '2px 2px 40px #08f4',
+                                // },
+                            }}
+                        >
+                            <AffineImage
+                                src="/assets/task.png"
+                                alt="AFFiNE Plan Your Task"
+                            />
+                        </Box>
+                    </Grid>
+                </Grid>
+                <Grid
+                    xs={12}
+                    sx={{
+                        display: 'flex',
+                    }}
+                >
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            flexWrap: 'wrap',
+                            margin: 'auto',
+                            textAlign: 'center',
+                            marginBottom: '4em',
+                        }}
+                    >
+                        <Typography
+                            level="h2"
+                            fontWeight={'bold'}
+                            style={{ marginBottom: '0.5em' }}
+                        >
+                            Privacy-first, and collaborative. No compromises
+                            whatsoever.
+                        </Typography>
+                        <Typography
+                            fontSize="1.2em"
+                            style={{ marginBottom: '0.25em' }}
+                        >
+                            We don’t like cloud lock-in. Your data is always
+                            locally stored and secured, while you can still
+                            collaborate in real-time with others.
+                        </Typography>
+                        <Typography
+                            fontSize="1.2em"
+                            style={{ marginBottom: '0.25em' }}
+                        >
+                            Privacy is the foundation of everything we do. But
+                            it is no excuse for the bad experience.
+                        </Typography>
+                    </Box>
+                </Grid>
+                <Grid xs={12} sx={{ display: 'flex', marginBottom: '12em' }}>
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            margin: 'auto',
+                            transition: 'all .5s',
+                            // boxShadow: '2px 2px 40px #08f2',
+                            // ':hover': {
+                            //     boxShadow: '2px 2px 40px #08f4',
+                            // },
+                        }}
+                    >
+                        <AffineImage
+                            src="/assets/collaboration.png"
+                            alt="AFFiNE Privacy-first, and collaborative"
+                        />
+                    </Box>
+                </Grid>
+                <Grid xs={12} sx={{ display: 'flex' }}>
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            margin: 'auto',
+                        }}
+                    >
+                        <AffineImage src="/assets/logo.png" alt="AFFiNE Logo" />
+                    </Box>
+                </Grid>
+                <Grid xs={12} sx={{ display: 'flex' }}>
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            justifyContent: 'center',
+                            margin: 'auto',
+                            textAlign: 'center',
+                        }}
+                    >
+                        <Typography fontSize={'1.5em'}>
+                            Build for an open and semantic future
+                        </Typography>
+                    </Box>
+                </Grid>
+                <Grid xs={12} sx={{ display: 'flex', marginBottom: '8em' }}>
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            justifyContent: 'center',
+                            margin: 'auto',
+                            textAlign: 'center',
+                        }}
+                    >
+                        <Typography level="h3" sx={{ display: 'flex' }}>
+                            <span style={{ alignSelf: 'center' }}>
+                                Keep Updated on
+                            </span>
+                            <GitHub />
+                        </Typography>
+                    </Box>
+                </Grid>
+                <Grid xs={12} sx={{ display: 'flex', marginBottom: '2em' }}>
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            justifyContent: 'center',
+                            margin: 'auto',
+                            textAlign: 'center',
+                        }}
+                    >
+                        <Typography level="h2" sx={{ display: 'flex' }}>
+                            Join Our Community
+                        </Typography>
+                    </Box>
+                </Grid>
+                <Box
+                    sx={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                        maxWidth: '400px',
+                        margin: 'auto',
+                        marginBottom: '2em',
+                        '--joy-shadow-sm': 0,
+                    }}
+                >
+                    <Box sx={{ display: 'flex', width: '100%' }}>
+                        <Card
+                            sx={{
+                                margin: 'auto',
+                                minWidth: '4em',
+                                '--Card-padding': '4px',
+                                '--Card-radius': '0',
+                            }}
+                        >
+                            <Grid
+                                xs={12}
+                                sx={{
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                }}
+                            >
+                                <GitHubIcon
+                                    sx={{ width: '36px', height: '36px' }}
+                                />
+                            </Grid>
+
+                            <Grid
+                                xs={12}
+                                sx={{
+                                    display: 'flex',
+                                    margin: 'auto',
+                                    marginTop: '1em',
+                                }}
+                            >
+                                <Typography
+                                    sx={{ display: 'flex', color: '#888' }}
+                                >
+                                    GitHub
+                                </Typography>
+                            </Grid>
+                        </Card>
+                    </Box>
+                    <Box sx={{ display: 'flex', width: '100%' }}>
+                        <Card
+                            sx={{
+                                margin: 'auto',
+                                minWidth: '4em',
+                                '--Card-padding': '4px',
+                                '--Card-radius': '0',
+                            }}
+                        >
+                            <Grid
+                                xs={12}
+                                sx={{
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                }}
+                            >
+                                <RedditIcon
+                                    sx={{ width: '36px', height: '36px' }}
+                                />
+                            </Grid>
+
+                            <Grid
+                                xs={12}
+                                sx={{
+                                    display: 'flex',
+                                    margin: 'auto',
+                                    marginTop: '1em',
+                                }}
+                            >
+                                <Typography
+                                    sx={{ display: 'flex', color: '#888' }}
+                                >
+                                    Reddit
+                                </Typography>
+                            </Grid>
+                        </Card>
+                    </Box>
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            width: '100%',
+                        }}
+                    >
+                        <Card
+                            sx={{
+                                margin: 'auto',
+                                minWidth: '4em',
+                                '--Card-padding': '4px',
+                                '--Card-radius': '0',
+                            }}
+                        >
+                            <Grid
+                                xs={12}
+                                sx={{
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                }}
+                            >
+                                <TelegramIcon
+                                    sx={{ width: '36px', height: '36px' }}
+                                />
+                            </Grid>
+
+                            <Grid
+                                xs={12}
+                                sx={{
+                                    display: 'flex',
+                                    margin: 'auto',
+                                    marginTop: '1em',
+                                }}
+                            >
+                                <Typography
+                                    sx={{ display: 'flex', color: '#888' }}
+                                >
+                                    Telegram
+                                </Typography>
+                            </Grid>
+                        </Card>
+                    </Box>
+                    <Box sx={{ display: 'flex', width: '100%' }}>
+                        <Card
+                            sx={{
+                                margin: 'auto',
+                                minWidth: '4em',
+                                '--Card-padding': '4px',
+                                '--Card-radius': '0',
+                            }}
+                        >
+                            <Grid
+                                xs={12}
+                                sx={{
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                }}
+                            >
+                                <DiscordIcon
+                                    sx={{ width: '36px', height: '36px' }}
+                                />
+                            </Grid>
+
+                            <Grid
+                                xs={12}
+                                sx={{
+                                    display: 'flex',
+                                    margin: 'auto',
+                                    marginTop: '1em',
+                                }}
+                            >
+                                <Typography
+                                    sx={{ display: 'flex', color: '#888' }}
+                                >
+                                    Discord
+                                </Typography>
+                            </Grid>
+                        </Card>
+                    </Box>
+                </Box>
+                <Grid xs={12} sx={{ display: 'flex', marginBottom: '2em' }}>
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            justifyContent: 'center',
+                            margin: 'auto',
+                            textAlign: 'center',
+                        }}
+                    >
+                        <Typography sx={{ display: 'flex', color: '#888' }}>
+                            AFFiNE is an
+                            <span
+                                style={{
+                                    color: '#5085f6cc',
+                                    margin: 'auto 0.25em',
+                                }}
+                            >
+                                #OpenSource
+                            </span>
+                            company
+                        </Typography>
+                    </Box>
+                </Grid>
+                <Grid xs={12} sx={{ display: 'flex', marginBottom: '2em' }}>
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            justifyContent: 'center',
+                            margin: 'auto',
+                            textAlign: 'center',
+                        }}
+                    >
+                        <Typography sx={{ display: 'flex', color: '#888' }}>
+                            Copyright © 2022 AFFiNE.
+                        </Typography>
+                    </Box>
+                </Grid>
+            </VenusContainer>
+        </CssVarsProvider>
+    );
+}
+
+export default App;

apps/venus/src/assets/discord.svg

@@ -0,0 +1,10 @@
+<svg width="71" height="55" viewBox="0 0 71 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" fill="#23272A"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="71" height="55" fill="white"/>
+</clipPath>
+</defs>
+</svg>

apps/venus/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+    production: true,
+};

apps/venus/src/environments/environment.ts

@@ -0,0 +1,6 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// When building for production, this file is replaced with `environment.prod.ts`.
+
+export const environment = {
+    production: false,
+};

apps/venus/src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <title>Venus</title>
+        <base href="/" />
+
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>

apps/venus/src/index.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable filename-rules/match */
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+
+import App from './app';
+
+const container = document.getElementById('root');
+if (!container) {
+    throw new Error('No root container found');
+}
+const root = createRoot(container);
+root.render(
+    <StrictMode>
+        <BrowserRouter>
+            <App />
+        </BrowserRouter>
+    </StrictMode>
+);

apps/venus/src/polyfills.ts

@@ -0,0 +1,7 @@
+/**
+ * Polyfill stable language features. These imports will be optimized by `@babel/preset-env`.
+ *
+ * See: https://github.com/zloirock/core-js#babel
+ */
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';

apps/venus/src/template.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title><%= htmlWebpackPlugin.options.title %></title>
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>

apps/venus/tsconfig.app.json

@@ -0,0 +1,23 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../dist/out-tsc",
+        "types": ["node"]
+    },
+    "files": [
+        "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+        "../../node_modules/@nrwl/react/typings/image.d.ts"
+    ],
+    "exclude": [
+        "jest.config.ts",
+        "**/*.spec.ts",
+        "**/*.test.ts",
+        "**/*.spec.tsx",
+        "**/*.test.tsx",
+        "**/*.spec.js",
+        "**/*.test.js",
+        "**/*.spec.jsx",
+        "**/*.test.jsx"
+    ],
+    "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

apps/venus/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "strictNullChecks": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.app.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}

apps/venus/tsconfig.spec.json

@@ -0,0 +1,24 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../dist/out-tsc",
+        "module": "commonjs",
+        "types": ["jest", "node"]
+    },
+    "include": [
+        "jest.config.ts",
+        "**/*.test.ts",
+        "**/*.spec.ts",
+        "**/*.test.tsx",
+        "**/*.spec.tsx",
+        "**/*.test.js",
+        "**/*.spec.js",
+        "**/*.test.jsx",
+        "**/*.spec.jsx",
+        "**/*.d.ts"
+    ],
+    "files": [
+        "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+        "../../node_modules/@nrwl/react/typings/image.d.ts"
+    ]
+}

apps/venus/webpack.config.js

@@ -0,0 +1,237 @@
+const path = require('path');
+const zlib = require('zlib');
+const webpack = require('webpack');
+const getNxWebpackConfig = require('@nrwl/react/plugins/webpack');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const CompressionPlugin = require('compression-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const Style9Plugin = require('style9/webpack');
+
+const enableBundleAnalyzer = process.env.BUNDLE_ANALYZER;
+
+module.exports = function (webpackConfig) {
+    const config = getNxWebpackConfig(webpackConfig);
+
+    const isProd = config.mode === 'production';
+
+    const style9 = {
+        test: /\.(tsx|ts|js|mjs|jsx)$/,
+        use: [
+            {
+                loader: Style9Plugin.loader,
+                options: {
+                    minifyProperties: isProd,
+                    incrementalClassnames: isProd,
+                },
+            },
+        ],
+    };
+
+    config.experiments.topLevelAwait = true;
+
+    if (isProd) {
+        config.module.rules.unshift(style9);
+    } else {
+        config.module.rules.push(style9);
+    }
+
+    if (isProd) {
+        config.entry = {
+            main: [...config.entry.main, ...config.entry.polyfills],
+        };
+        config.devtool = false;
+        config.output = {
+            ...config.output,
+            filename: '[name].[contenthash:8].js',
+            chunkFilename: '[name].[chunkhash:8].js',
+            hashFunction: undefined,
+        };
+        config.optimization = {
+            nodeEnv: 'production',
+            minimize: true,
+            minimizer: [
+                new TerserPlugin({
+                    terserOptions: {
+                        ecma: 2020,
+                    },
+                    extractComments: true,
+                    parallel: true,
+                }),
+                new CssMinimizerPlugin(),
+            ],
+            splitChunks: {
+                chunks: 'all',
+                cacheGroups: {
+                    styles: {
+                        name: 'styles',
+                        type: 'css/mini-extract',
+                        chunks: 'all',
+                        enforce: true,
+                    },
+                    ui: {
+                        test: /[\\/]node_modules[\\/](@mui|@emotion|react|katex)/,
+                        name: 'ui',
+                        priority: -9,
+                        chunks: 'all',
+                    },
+                    vender: {
+                        test: /([\\/]node_modules[\\/]|polyfills|@nrwl)/,
+                        name: 'vender',
+                        priority: -10,
+                        chunks: 'all',
+                    },
+                },
+            },
+        };
+        config.module.rules.unshift({
+            test: /\.css$/i,
+            use: [
+                MiniCssExtractPlugin.loader,
+                {
+                    loader: 'css-loader',
+                    options: {
+                        sourceMap: false,
+                    },
+                },
+            ],
+        });
+        config.module.rules.unshift({
+            test: /\.scss$/i,
+            use: [
+                'style-loader',
+                {
+                    loader: 'css-loader',
+                    options: {
+                        sourceMap: false,
+                    },
+                },
+                {
+                    loader: 'postcss-loader',
+                },
+            ],
+        });
+        config.module.rules.splice(6);
+    } else {
+        config.output = {
+            ...config.output,
+            publicPath: '/',
+        };
+
+        const babelLoader = config.module.rules.find(
+            rule =>
+                typeof rule !== 'string' &&
+                rule.loader?.toString().includes('babel-loader')
+        );
+        if (babelLoader && typeof babelLoader !== 'string') {
+            babelLoader.options['plugins'] = [
+                ...(babelLoader.options['plugins'] || []),
+                [require.resolve('babel-plugin-open-source')],
+            ];
+        }
+    }
+
+    addEmotionBabelPlugin(config);
+
+    config.plugins = [
+        ...config.plugins.filter(
+            p => !(isProd && p instanceof MiniCssExtractPlugin)
+        ),
+        new webpack.DefinePlugin({
+            JWT_DEV: !isProd,
+            global: {},
+        }),
+        isProd &&
+            new HtmlWebpackPlugin({
+                title: 'AFFiNE - All In One Workos',
+                favicon: path.resolve(
+                    __dirname,
+                    './src/assets/images/favicon.ico'
+                ), //favicon path
+                template: path.resolve(__dirname, './src/template.html'),
+                publicPath: '/',
+            }),
+        new Style9Plugin(),
+        isProd && new MiniCssExtractPlugin(),
+        isProd &&
+            new CompressionPlugin({
+                test: /\.(js|css|html|svg|ttf|woff)$/,
+                algorithm: 'brotliCompress',
+                filename: '[path][base].br',
+                compressionOptions: {
+                    params: {
+                        [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
+                    },
+                },
+            }),
+        isProd &&
+            enableBundleAnalyzer &&
+            new BundleAnalyzerPlugin({ analyzerMode: 'static' }),
+    ].filter(Boolean);
+
+    // Workaround for webpack infinite recompile errors
+    config.watchOptions = {
+        // followSymlinks: false,
+        ignored: ['**/*.css'],
+    };
+
+    return config;
+};
+
+// TODO handle nx issue
+// see https://github.com/nrwl/nx/issues/8870
+// see https://github.com/nrwl/nx/issues/4520#issuecomment-787473383
+const addEmotionBabelPlugin = config => {
+    const babelLoader = config.module.rules.find(
+        rule =>
+            typeof rule !== 'string' &&
+            rule.loader?.toString().includes('babel-loader')
+    );
+    if (!babelLoader) {
+        return;
+    }
+
+    babelLoader.options.plugins = [
+        [
+            require.resolve('@emotion/babel-plugin'),
+            {
+                // See https://github.com/mui/material-ui/issues/27380#issuecomment-928973157
+                // See https://github.com/emotion-js/emotion/tree/main/packages/babel-plugin#importmap
+                importMap: {
+                    '@toeverything/components/ui': {
+                        styled: {
+                            canonicalImport: ['@emotion/styled', 'default'],
+                            styledBaseImport: [
+                                '@toeverything/components/ui',
+                                'styled',
+                            ],
+                        },
+                    },
+                    '@mui/material': {
+                        styled: {
+                            canonicalImport: ['@emotion/styled', 'default'],
+                            styledBaseImport: ['@mui/material', 'styled'],
+                        },
+                    },
+                    '@mui/material/styles': {
+                        styled: {
+                            canonicalImport: ['@emotion/styled', 'default'],
+                            styledBaseImport: [
+                                '@mui/material/styles',
+                                'styled',
+                            ],
+                        },
+                    },
+                },
+                // sourceMap is on by default but source maps are dead code eliminated in production
+                sourceMap: true,
+                autoLabel: 'dev-only',
+                labelFormat: '[filename]-[local]',
+                cssPropOptimization: true,
+            },
+        ],
+        ...(babelLoader.options.plugins ?? []),
+    ];
+};

package.json

@@ -7,9 +7,11 @@
         "start": "env-cmd -f .env.local-dev nx serve ligo-virgo",
         "start:affine": "nx serve ligo-virgo",
         "start:keck": "nx serve keck",
+        "start:venus": "nx serve venus",
         "build": "nx build ligo-virgo",
         "build:local": "env-cmd -f .env.local nx build ligo-virgo",
         "build:keck": "nx build keck",
+        "build:venus": "nx build venus",
         "build:analytic": "cross-env BUNDLE_ANALYZER=true nx build --skip-nx-cache",
         "test": "nx run-many --target test --all",
         "check": "nx run-many --target check --all",

pnpm-lock.yaml

@@ -213,6 +213,23 @@ importers:
       mini-css-extract-plugin: 2.6.1_webpack@5.73.0
       webpack: 5.73.0
 
+  apps/venus:
+    specifiers:
+      '@emotion/react': ^11.10.0
+      '@emotion/styled': ^11.10.0
+      '@mui/joy': ^5.0.0-alpha.39
+      lozad: ^1.16.0
+      mini-css-extract-plugin: ^2.6.1
+      webpack: ^5.73.0
+    dependencies:
+      '@emotion/react': 11.10.0
+      '@emotion/styled': 11.10.0_@emotion+react@11.10.0
+      '@mui/joy': 5.0.0-alpha.39_72v32ofbtgpmxm7mhvtx474vfu
+      lozad: 1.16.0
+    devDependencies:
+      mini-css-extract-plugin: 2.6.1_webpack@5.73.0
+      webpack: 5.73.0
+
   libs/components/account:
     specifiers:
       '@authing/react-ui-components': ^3.1.23
@@ -334,7 +351,7 @@ importers:
       '@emotion/styled': 11.9.3_@emotion+react@11.9.3
       '@mui/icons-material': 5.8.4_@mui+material@5.8.7
       '@mui/material': 5.8.7_d6menda4vqwq6peqnkbe7mkj4i
-      '@mui/x-data-grid': 5.12.3_lc5g5arqxncq7hlh6olwtqg42u
+      '@mui/x-data-grid': 5.12.3_7ff6pt5vb3e5jymp4h3bl3mztq
       is-hotkey: 0.2.0
       is-url: 1.2.4
       slate: 0.81.1
@@ -2688,6 +2705,28 @@ packages:
       tslib: 2.4.0
     dev: false
 
+  /@emotion/babel-plugin/11.10.0:
+    resolution: {integrity: sha512-xVnpDAAbtxL1dsuSelU5A7BnY/lftws0wUexNJZTPsvX/1tM4GZJbclgODhvW4E+NH7E5VFcH0bBn30NvniPJA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/plugin-syntax-jsx': 7.18.6
+      '@babel/runtime': 7.18.6
+      '@emotion/hash': 0.9.0
+      '@emotion/memoize': 0.8.0
+      '@emotion/serialize': 1.1.0
+      babel-plugin-macros: 3.1.0
+      convert-source-map: 1.8.0
+      escape-string-regexp: 4.0.0
+      find-root: 1.1.0
+      source-map: 0.5.7
+      stylis: 4.0.13
+    dev: false
+
   /@emotion/babel-plugin/11.9.2:
     resolution: {integrity: sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==}
     peerDependencies:
@@ -2733,6 +2772,16 @@ packages:
       stylis: 4.0.13
     dev: false
 
+  /@emotion/cache/11.10.1:
+    resolution: {integrity: sha512-uZTj3Yz5D69GE25iFZcIQtibnVCFsc/6+XIozyL3ycgWvEdif2uEw9wlUt6umjLr4Keg9K6xRPHmD8LGi+6p1A==}
+    dependencies:
+      '@emotion/memoize': 0.8.0
+      '@emotion/sheet': 1.2.0
+      '@emotion/utils': 1.2.0
+      '@emotion/weak-memoize': 0.3.0
+      stylis: 4.0.13
+    dev: false
+
   /@emotion/cache/11.9.3:
     resolution: {integrity: sha512-0dgkI/JKlCXa+lEXviaMtGBL0ynpx4osh7rjOXE71q9bIF8G+XhJgvi+wDu0B0IdCVx37BffiwXlN9I3UuzFvg==}
     dependencies:
@@ -2747,16 +2796,53 @@ packages:
     resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
     dev: false
 
+  /@emotion/hash/0.9.0:
+    resolution: {integrity: sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==}
+    dev: false
+
   /@emotion/is-prop-valid/1.1.3:
     resolution: {integrity: sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA==}
     dependencies:
       '@emotion/memoize': 0.7.5
     dev: false
 
+  /@emotion/is-prop-valid/1.2.0:
+    resolution: {integrity: sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==}
+    dependencies:
+      '@emotion/memoize': 0.8.0
+    dev: false
+
   /@emotion/memoize/0.7.5:
     resolution: {integrity: sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==}
     dev: false
 
+  /@emotion/memoize/0.8.0:
+    resolution: {integrity: sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==}
+    dev: false
+
+  /@emotion/react/11.10.0:
+    resolution: {integrity: sha512-K6z9zlHxxBXwN8TcpwBKcEsBsOw4JWCCmR+BeeOWgqp8GIU1yA2Odd41bwdAAr0ssbQrbJbVnndvv7oiv1bZeQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+      '@types/react': '*'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      '@emotion/babel-plugin': 11.10.0
+      '@emotion/cache': 11.10.1
+      '@emotion/serialize': 1.1.0
+      '@emotion/utils': 1.2.0
+      '@emotion/weak-memoize': 0.3.0
+      hoist-non-react-statics: 3.3.2
+    dev: false
+
   /@emotion/react/11.9.3:
     resolution: {integrity: sha512-g9Q1GcTOlzOEjqwuLF/Zd9LC+4FljjPjDfxSM7KmEakm+hsHXk+bYZ2q+/hTJzr0OUNkujo72pXLQvXj6H+GJQ==}
     peerDependencies:
@@ -2840,10 +2926,49 @@ packages:
       csstype: 3.1.0
     dev: false
 
+  /@emotion/serialize/1.1.0:
+    resolution: {integrity: sha512-F1ZZZW51T/fx+wKbVlwsfchr5q97iW8brAnXmsskz4d0hVB4O3M/SiA3SaeH06x02lSNzkkQv+n3AX3kCXKSFA==}
+    dependencies:
+      '@emotion/hash': 0.9.0
+      '@emotion/memoize': 0.8.0
+      '@emotion/unitless': 0.8.0
+      '@emotion/utils': 1.2.0
+      csstype: 3.1.0
+    dev: false
+
   /@emotion/sheet/1.1.1:
     resolution: {integrity: sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA==}
     dev: false
 
+  /@emotion/sheet/1.2.0:
+    resolution: {integrity: sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w==}
+    dev: false
+
+  /@emotion/styled/11.10.0_@emotion+react@11.10.0:
+    resolution: {integrity: sha512-V9oaEH6V4KePeQpgUE83i8ht+4Ri3E8Djp/ZPJ4DQlqWhSKITvgzlR3/YQE2hdfP4Jw3qVRkANJz01LLqK9/TA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+      '@emotion/react': ^11.0.0-rc.0
+      '@types/react': '*'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      '@emotion/react':
+        optional: true
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      '@emotion/babel-plugin': 11.10.0
+      '@emotion/is-prop-valid': 1.2.0
+      '@emotion/react': 11.10.0
+      '@emotion/serialize': 1.1.0
+      '@emotion/utils': 1.2.0
+    dev: false
+
   /@emotion/styled/11.9.3:
     resolution: {integrity: sha512-o3sBNwbtoVz9v7WB1/Y/AmXl69YHmei2mrVnK7JgyBJ//Rst5yqPZCecEJlMlJrFeWHp+ki/54uN265V2pEcXA==}
     peerDependencies:
@@ -2951,14 +3076,26 @@ packages:
     resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==}
     dev: false
 
+  /@emotion/unitless/0.8.0:
+    resolution: {integrity: sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==}
+    dev: false
+
   /@emotion/utils/1.1.0:
     resolution: {integrity: sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==}
     dev: false
 
+  /@emotion/utils/1.2.0:
+    resolution: {integrity: sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==}
+    dev: false
+
   /@emotion/weak-memoize/0.2.5:
     resolution: {integrity: sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==}
     dev: false
 
+  /@emotion/weak-memoize/0.3.0:
+    resolution: {integrity: sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==}
+    dev: false
+
   /@eslint/eslintrc/1.3.0:
     resolution: {integrity: sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -4186,6 +4323,31 @@ packages:
       react-is: 17.0.2
     dev: false
 
+  /@mui/base/5.0.0-alpha.92:
+    resolution: {integrity: sha512-ZgnSLrTXL4iUdLQhjp01dAOTQPQlnwrqjZRwDT3E6LZXEYn6cMv1MY6LZkWcF/zxrUnyasnsyMAgZ5d8AXS7bA==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+      react-dom: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      '@emotion/is-prop-valid': 1.2.0
+      '@mui/types': 7.1.5
+      '@mui/utils': 5.9.3
+      '@popperjs/core': 2.11.5
+      clsx: 1.2.1
+      prop-types: 15.8.1
+      react-is: 18.2.0
+    dev: false
+
   /@mui/icons-material/5.8.4:
     resolution: {integrity: sha512-9Z/vyj2szvEhGWDvb+gG875bOGm8b8rlHBKOD1+nA3PcgC3fV6W1AU6pfOorPeBfH2X4mb9Boe97vHvaSndQvA==}
     engines: {node: '>=12.0.0'}
@@ -4244,6 +4406,40 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@mui/joy/5.0.0-alpha.39_72v32ofbtgpmxm7mhvtx474vfu:
+    resolution: {integrity: sha512-F/cjEwvH9UFxIRJ30P8fuGOEDtgDBJCd++yTq8JYXARGCSlUMtbpijkPvnYFz69j3BtHCDhSaz3JA0cxcwVjaQ==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.5.0
+      '@emotion/styled': ^11.3.0
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+      react-dom: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      '@emotion/react': 11.10.0
+      '@emotion/styled': 11.10.0_@emotion+react@11.10.0
+      '@mui/base': 5.0.0-alpha.92
+      '@mui/system': 5.9.3_72v32ofbtgpmxm7mhvtx474vfu
+      '@mui/types': 7.1.5
+      '@mui/utils': 5.9.3
+      clsx: 1.2.1
+      csstype: 3.1.0
+      prop-types: 15.8.1
+      react-is: 18.2.0
+    dev: false
+
   /@mui/material/5.8.7_d6menda4vqwq6peqnkbe7mkj4i:
     resolution: {integrity: sha512-Oo62UhrgEi+BMLr3nUEASJgScE2/hhq14CbBUmrVV3GQlEGtqMZsy26Vb0AqEmphFeN3TXlsbM9aeW5yq8ZFlw==}
     engines: {node: '>=12.0.0'}
@@ -4355,6 +4551,46 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@mui/private-theming/5.9.3:
+    resolution: {integrity: sha512-Ys3WO39WqoGciGX9k5AIi/k2zJhlydv4FzlEEwtw9OqdMaV0ydK/TdZekKzjP9sTI/JcdAP3H5DWtUaPLQJjWg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      '@mui/utils': 5.9.3
+      prop-types: 15.8.1
+    dev: false
+
+  /@mui/styled-engine/5.8.7_72v32ofbtgpmxm7mhvtx474vfu:
+    resolution: {integrity: sha512-tVqtowjbYmiRq+qcqXK731L9eWoL9H8xTRhuTgaDGKdch1zlt4I2UwInUe1w2N9N/u3/jHsFbLcl1Un3uOwpQg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.4.1
+      '@emotion/styled': ^11.3.0
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      '@emotion/cache': 11.9.3
+      '@emotion/react': 11.10.0
+      '@emotion/styled': 11.10.0_@emotion+react@11.10.0
+      csstype: 3.1.0
+      prop-types: 15.8.1
+    dev: false
+
   /@mui/styled-engine/5.8.7_d6menda4vqwq6peqnkbe7mkj4i:
     resolution: {integrity: sha512-tVqtowjbYmiRq+qcqXK731L9eWoL9H8xTRhuTgaDGKdch1zlt4I2UwInUe1w2N9N/u3/jHsFbLcl1Un3uOwpQg==}
     engines: {node: '>=12.0.0'}
@@ -4372,8 +4608,8 @@ packages:
     dependencies:
       '@babel/runtime': 7.18.6
       '@emotion/cache': 11.9.3
-      '@emotion/react': 11.9.3_@babel+core@7.18.6
+      '@emotion/react': 11.9.3
-      '@emotion/styled': 11.9.3_dc5dh2wp562rsjxvguwi2i3yzq
+      '@emotion/styled': 11.9.3_@emotion+react@11.9.3
       csstype: 3.1.0
       prop-types: 15.8.1
     dev: false
@@ -4453,8 +4689,8 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.18.6
-      '@emotion/react': 11.9.3
+      '@emotion/react': 11.9.3_@babel+core@7.18.6
-      '@emotion/styled': 11.9.3_@emotion+react@11.9.3
+      '@emotion/styled': 11.9.3_dc5dh2wp562rsjxvguwi2i3yzq
       '@mui/private-theming': 5.8.6
       '@mui/styled-engine': 5.8.7_d6menda4vqwq6peqnkbe7mkj4i
       '@mui/types': 7.1.4
@@ -4464,6 +4700,66 @@ packages:
       prop-types: 15.8.1
     dev: false
 
+  /@mui/system/5.9.3_72v32ofbtgpmxm7mhvtx474vfu:
+    resolution: {integrity: sha512-EXQV2POwncstHLYII+G4VSYdEFun1TjBbQSBDK76DbIkug8nPjtjAZ+3Kgk3/NoFIigW+vQ9cDVUZtlbRH6YMQ==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.5.0
+      '@emotion/styled': ^11.3.0
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      '@emotion/react': 11.10.0
+      '@emotion/styled': 11.10.0_@emotion+react@11.10.0
+      '@mui/private-theming': 5.9.3
+      '@mui/styled-engine': 5.8.7_72v32ofbtgpmxm7mhvtx474vfu
+      '@mui/types': 7.1.5
+      '@mui/utils': 5.9.3
+      clsx: 1.2.1
+      csstype: 3.1.0
+      prop-types: 15.8.1
+    dev: false
+
+  /@mui/system/5.9.3_d6menda4vqwq6peqnkbe7mkj4i:
+    resolution: {integrity: sha512-EXQV2POwncstHLYII+G4VSYdEFun1TjBbQSBDK76DbIkug8nPjtjAZ+3Kgk3/NoFIigW+vQ9cDVUZtlbRH6YMQ==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.5.0
+      '@emotion/styled': ^11.3.0
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      '@emotion/react': 11.9.3
+      '@emotion/styled': 11.9.3_@emotion+react@11.9.3
+      '@mui/private-theming': 5.9.3
+      '@mui/styled-engine': 5.8.7_d6menda4vqwq6peqnkbe7mkj4i
+      '@mui/types': 7.1.5
+      '@mui/utils': 5.9.3
+      clsx: 1.2.1
+      csstype: 3.1.0
+      prop-types: 15.8.1
+    dev: false
+
   /@mui/types/7.1.4:
     resolution: {integrity: sha512-uveM3byMbthO+6tXZ1n2zm0W3uJCQYtwt/v5zV5I77v2v18u0ITkb8xwhsDD2i3V2Kye7SaNR6FFJ6lMuY/WqQ==}
     peerDependencies:
@@ -4484,6 +4780,15 @@ packages:
       '@types/react': 18.0.14
     dev: false
 
+  /@mui/types/7.1.5:
+    resolution: {integrity: sha512-HnRXrxgHJYJcT8ZDdDCQIlqk0s0skOKD7eWs9mJgBUu70hyW4iA6Kiv3yspJR474RFH8hysKR65VVSzUSzkuwA==}
+    peerDependencies:
+      '@types/react': '*'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dev: false
+
   /@mui/utils/5.8.6:
     resolution: {integrity: sha512-QM2Sd1xZo2jOt2Vz5Rmro+pi2FLJyiv4+OjxkUwXR3oUM65KSMAMLl/KNYU55s3W3DLRFP5MVwE4FhAbHseHAg==}
     engines: {node: '>=12.0.0'}
@@ -4517,7 +4822,23 @@ packages:
       react-is: 17.0.2
     dev: false
 
-  /@mui/x-data-grid/5.12.3_lc5g5arqxncq7hlh6olwtqg42u:
+  /@mui/utils/5.9.3:
+    resolution: {integrity: sha512-l0N5bcrenE9hnwZ/jPecpIRqsDFHkPXoFUcmkgysaJwVZzJ3yQkGXB47eqmXX5yyGrSc6HksbbqXEaUya+siew==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      '@types/prop-types': 15.7.5
+      '@types/react-is': 17.0.3
+      prop-types: 15.8.1
+      react-is: 18.2.0
+    dev: false
+
+  /@mui/x-data-grid/5.12.3_7ff6pt5vb3e5jymp4h3bl3mztq:
     resolution: {integrity: sha512-57A2MkRR/uUNC/dECFV0YDJvi1Q+gQgmgw1OHmZ1uSnKh29PcHpswkdapO0LueLpxAy8tfH+fTtnnPDmYgJeUg==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -4535,7 +4856,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.18.6
       '@mui/material': 5.8.7_d6menda4vqwq6peqnkbe7mkj4i
-      '@mui/system': 5.8.7_d6menda4vqwq6peqnkbe7mkj4i
+      '@mui/system': 5.9.3_d6menda4vqwq6peqnkbe7mkj4i
       '@mui/utils': 5.8.6
       clsx: 1.2.0
       prop-types: 15.8.1
@@ -7537,6 +7858,15 @@ packages:
       cosmiconfig: 6.0.0
       resolve: 1.22.1
 
+  /babel-plugin-macros/3.1.0:
+    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
+    engines: {node: '>=10', npm: '>=6'}
+    dependencies:
+      '@babel/runtime': 7.18.6
+      cosmiconfig: 7.0.1
+      resolve: 1.22.1
+    dev: false
+
   /babel-plugin-open-source/1.3.4:
     resolution: {integrity: sha512-7lsfY30y/XYYbK4vYHfPyC/aF2KM0vz2OFaz6+tDuAg6A3223is7vqzFYd0va7n/YTw5osScevR0bQ4hO8gPQg==}
     dependencies:
@@ -8362,7 +8692,6 @@ packages:
       parse-json: 5.2.0
       path-type: 4.0.0
       yaml: 1.10.2
-    dev: true
 
   /create-require/1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
@@ -12777,6 +13106,10 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dev: false
 
+  /lozad/1.16.0:
+    resolution: {integrity: sha512-JBr9WjvEFeKoyim3svo/gsQPTkgG/mOHJmDctZ/+U9H3ymUuvEkqpn8bdQMFsvTMcyRJrdJkLv0bXqGm0sP72w==}
+    dev: false
+
   /lru-cache/4.0.2:
     resolution: {integrity: sha512-uQw9OqphAGiZhkuPlpFGmdTU2tEuhxTourM/19qGJrxBPHAr/f8BT1a0i/lOclESnGatdJG/UCkP9kZB/Lh1iw==}
     dependencies:
@@ -15204,7 +15537,6 @@ packages:
 
   /react-is/18.2.0:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
-    dev: true
 
   /react-list/0.8.17:
     resolution: {integrity: sha512-pgmzGi0G5uGrdHzMhgO7KR1wx5ZXVvI3SsJUmkblSAKtewIhMwbQiMuQiTE83ozo04BQJbe0r3WIWzSO0dR1xg==}

workspace.json

@@ -28,6 +28,7 @@
         "framework-virgo": "libs/framework/virgo",
         "keck": "apps/keck",
         "ligo-virgo": "apps/ligo-virgo",
-        "utils": "libs/utils"
+        "utils": "libs/utils",
+        "venus": "apps/venus"
     }
 }