commit e3e37413930eb0a52f1b030f2d04d049152d003f
Author: DarkSky <darksky2048@gmail.com>
Date:   Fri Jul 22 15:49:21 2022 +0800

    init: the first public commit for AFFiNE

diff --git a/.all-contributorsrc b/.all-contributorsrc
new file mode 100644
index 000000000..0340f41c9
--- /dev/null
+++ b/.all-contributorsrc
@@ -0,0 +1,125 @@
+{
+    "projectName": "Ligo-Virgo",
+    "projectOwner": "toeverything",
+    "repoType": "github",
+    "repoHost": "https://github.com",
+    "files": [
+        "README.md"
+    ],
+    "imageSize": 100,
+    "commit": false,
+    "commitConvention": "angular",
+    "contributorsPerLine": 7,
+    "contributors": [
+        {
+            "login": "darkskygit",
+            "name": "DarkSky",
+            "avatar_url": "https://avatars.githubusercontent.com/u/25152247?v=4",
+            "profile": "https://darksky.eu.org/",
+            "contributions": [
+                "code",
+                "doc"
+            ]
+        },
+        {
+            "login": "tzhangchi",
+            "name": "Chi Zhang",
+            "avatar_url": "https://avatars.githubusercontent.com/u/5910926?v=4",
+            "profile": "https://zhangchi.blog.csdn.net/",
+            "contributions": [
+                "code",
+                "doc"
+            ]
+        },
+        {
+            "login": "alt1o",
+            "name": "alt1o",
+            "avatar_url": "https://avatars.githubusercontent.com/u/21084335?v=4",
+            "profile": "https://github.com/alt1o",
+            "contributions": [
+                "code",
+                "doc"
+            ]
+        },
+        {
+            "login": "DiamondThree",
+            "name": "Diamond",
+            "avatar_url": "https://avatars.githubusercontent.com/u/24630517?v=4",
+            "profile": "https://github.com/DiamondThree",
+            "contributions": [
+                "code",
+                "doc"
+            ]
+        },
+        {
+            "login": "lawvs",
+            "name": "Whitewater",
+            "avatar_url": "https://avatars.githubusercontent.com/u/18554747?v=4",
+            "profile": "https://lawvs.github.io/profile/",
+            "contributions": [
+                "code",
+                "doc"
+            ]
+        },
+        {
+            "login": "zuoxiaodong0815",
+            "name": "zuoxiaodong0815",
+            "avatar_url": "https://avatars.githubusercontent.com/u/53252747?v=4",
+            "profile": "https://github.com/zuoxiaodong0815",
+            "contributions": [
+                "code",
+                "doc"
+            ]
+        },
+        {
+            "login": "SaikaSakura",
+            "name": "SaikaSakura",
+            "avatar_url": "https://avatars.githubusercontent.com/u/11530942?v=4",
+            "profile": "https://github.com/SaikaSakura",
+            "contributions": [
+                "code",
+                "doc"
+            ]
+        },
+        {
+            "login": "QiShaoXuan",
+            "name": "Qi",
+            "avatar_url": "https://avatars.githubusercontent.com/u/22772830?v=4",
+            "profile": "https://github.com/QiShaoXuan",
+            "contributions": [
+                "code",
+                "doc"
+            ]
+        },
+        {
+            "login": "tuluffy",
+            "name": "tuluffy",
+            "avatar_url": "https://avatars.githubusercontent.com/u/26808339?v=4",
+            "profile": "https://tuluffy.github.io/angular.github.io/",
+            "contributions": [
+                "code",
+                "doc"
+            ]
+        },
+        {
+            "login": "Austaras",
+            "name": "Austaras",
+            "avatar_url": "https://avatars.githubusercontent.com/u/15013925?v=4",
+            "profile": "https://shockwave.me/",
+            "contributions": [
+                "code",
+                "doc"
+            ]
+        },
+        {
+            "login": "uptonking",
+            "name": "Jin Yao",
+            "avatar_url": "https://avatars.githubusercontent.com/u/11391549?v=4",
+            "profile": "https://github.com/uptonking?tab=repositories&type=source",
+            "contributions": [
+                "code",
+                "doc"
+            ]
+        }
+    ]
+}
diff --git a/.cz-config.js b/.cz-config.js
new file mode 100644
index 000000000..e282d831e
--- /dev/null
+++ b/.cz-config.js
@@ -0,0 +1,66 @@
+module.exports = {
+    types: [
+        { value: 'feat', name: 'feat 🍄: add new features' },
+        { value: 'fix', name: 'fix 🐛: fix bug' },
+        { value: 'docs', name: 'docs 📄: modify documentation, comments' },
+        {
+            value: 'refactor',
+            name: 'refactor 🎸: code refactoring, pay attention to distinguish it from features and fixes',
+        },
+        { value: 'perf', name: 'perf ⚡: improve performance' },
+        { value: 'test', name: 'test 👀: add a test' },
+        {
+            value: 'tool',
+            name: 'tool 🚗: Development tool changes (build, scaffolding tools, etc.)',
+        },
+        {
+            value: 'style',
+            name: 'style ✂: Modifications to code formatting do not affect logic',
+        },
+        { value: 'revert', name: 'revert 🌝: version rollback' },
+        {
+            value: 'editor',
+            name: 'editor 🔧: editor configuration modification',
+        },
+        { value: 'update', name: 'update ⬆: third-party library upgrade' },
+    ],
+    scopes: [
+        { name: 'selection' },
+        { name: 'whiteboard' },
+        { name: 'point' },
+        { name: 'group' },
+        { name: 'page' },
+        { name: 'component' },
+        { name: 'config' },
+        { name: 'others' },
+    ],
+
+    // it needs to match the value for field type. Eg.: 'fix'
+    /*
+scopeOverrides: {
+  fix: [
+    {name: 'merge'},
+    {name: 'style'}
+  ]
+
+},
+*/
+    // override the messages, de faults are as follows
+    messages: {
+        type: 'Choose a type of your submission:',
+        scope: 'Choose a scope (optional):',
+        // used if allowCustomScopes is true
+        customScope: 'Denote the SCOPE of this change:',
+        subject: 'Brief description:\n',
+        body: 'Detailed description, use "|" newline (optional):\n',
+        breaking: 'Incompatibility specification (optional):\n',
+        footer: 'Associate closed issues, for example: #31, #34 (optional):\n',
+        confirmCommit: 'Are you sure to commit?',
+    },
+
+    allowCustomScopes: true,
+    allowBreakingChanges: ['Added', 'Repair'],
+
+    // limit subject length
+    subjectLimit: 100,
+};
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 000000000..9b7352176
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/.env b/.env
new file mode 100644
index 000000000..35f39c15b
--- /dev/null
+++ b/.env
@@ -0,0 +1,4 @@
+# use for download icon from figma
+FIGMA_TOKEN
+NODE_ENV
+AFFINE_FEATURE_FLAG_TOKEN
\ No newline at end of file
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 000000000..9809316cc
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,4 @@
+**/webpack.config.js
+**/jest.config.js
+**/node_modules/**
+.github/**
\ No newline at end of file
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 000000000..a277c50dc
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,287 @@
+{
+    "root": true,
+    "ignorePatterns": ["**/*"],
+    "plugins": ["@nrwl/nx", "react", "filename-rules", "import", "prettier"],
+    "parserOptions": {
+        "project": ["./tsconfig.base.json"]
+    },
+    "overrides": [
+        {
+            "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+            "rules": {
+                "prettier/prettier": "warn",
+                "@nrwl/nx/enforce-module-boundaries": [
+                    "error",
+                    {
+                        "enforceBuildableLibDependency": true,
+                        "allow": [],
+                        "depConstraints": [
+                            {
+                                "sourceTag": "library:utils",
+                                "onlyDependOnLibsWithTags": ["library:utils"]
+                            },
+                            {
+                                "sourceTag": "datasource:jwt",
+                                "onlyDependOnLibsWithTags": [
+                                    "library:utils",
+                                    "datasource:remote-kv",
+                                    "datasource:jwt-rpc"
+                                ]
+                            },
+                            {
+                                "sourceTag": "datasource:db-services",
+                                "onlyDependOnLibsWithTags": [
+                                    "library:utils",
+                                    "datasource:jwt"
+                                ]
+                            },
+                            {
+                                "sourceTag": "datasource:hooks",
+                                "onlyDependOnLibsWithTags": [
+                                    "library:utils",
+                                    "datasource:jwt",
+                                    "datasource:db-services"
+                                ]
+                            },
+                            {
+                                "sourceTag": "datasource:http",
+                                "onlyDependOnLibsWithTags": ["library:utils"]
+                            },
+                            {
+                                "sourceTag": "datasource:state",
+                                "onlyDependOnLibsWithTags": [
+                                    "library:utils",
+                                    "library:feature-flags",
+                                    "datasource:http",
+                                    "datasource:jwt"
+                                ]
+                            },
+                            {
+                                "sourceTag": "components:common",
+                                "onlyDependOnLibsWithTags": [
+                                    "library:utils",
+                                    "components:icons",
+                                    "components:ui"
+                                ]
+                            },
+                            {
+                                "sourceTag": "components:editor-core",
+                                "onlyDependOnLibsWithTags": [
+                                    "library:utils",
+                                    "library:feature-flags",
+                                    "datasource:db-services",
+                                    "datasource:state",
+                                    "datasource:commands",
+                                    "datasource:jwt",
+                                    "components:ui",
+                                    "components:common",
+                                    "components:icons"
+                                ]
+                            },
+                            {
+                                "sourceTag": "components:editor-blocks",
+                                "onlyDependOnLibsWithTags": [
+                                    "library:utils",
+                                    "library:feature-flags",
+                                    "components:common",
+                                    "components:editor-core",
+                                    "framework:editor",
+                                    "datasource:db-services",
+                                    "components:ui",
+                                    "components:icons"
+                                ]
+                            },
+                            {
+                                "sourceTag": "components:editor-plugins",
+                                "onlyDependOnLibsWithTags": [
+                                    "library:utils",
+                                    "components:common",
+                                    "components:editor-core",
+                                    "framework:editor",
+                                    "components:editor-blocks",
+                                    "datasource:db-services",
+                                    "components:ui",
+                                    "components:icons",
+                                    "library:feature-flags"
+                                ]
+                            },
+                            {
+                                "sourceTag": "components:ui",
+                                "onlyDependOnLibsWithTags": [
+                                    "components:icons",
+                                    "library:utils"
+                                ]
+                            },
+                            {
+                                "sourceTag": "framework:editor",
+                                "onlyDependOnLibsWithTags": [
+                                    "components:editor-core"
+                                ]
+                            },
+                            {
+                                "sourceTag": "*",
+                                "onlyDependOnLibsWithTags": ["*"]
+                            }
+                        ],
+                        "allowCircularSelfDependency": false
+                    }
+                ],
+                "filename-rules/match": [
+                    "warn",
+                    {
+                        ".tsx": "PascalCase",
+                        ".ts": "kebab-case",
+                        ".json": "kebab-case",
+                        "": "kebab-case"
+                    }
+                ],
+                "no-restricted-imports": [
+                    "error",
+                    {
+                        "patterns": [
+                            {
+                                "group": ["lodash"],
+                                "message": "Forbid direct import of lodash, use @toeverything/utils"
+                            },
+                            {
+                                "group": ["lodash-es"],
+                                "message": "Forbid direct import of lodash-es, use @toeverything/utils"
+                            },
+                            {
+                                "group": ["@mui/material", "@mui/material/*"],
+                                "message": "Forbid direct import of @mui/material, use @toeverything/components/ui"
+                            }
+                        ]
+                    }
+                ],
+                "@typescript-eslint/naming-convention": [
+                    "warn",
+                    {
+                        "selector": [
+                            "property",
+                            "parameterProperty",
+                            "accessor",
+                            "enumMember"
+                        ],
+                        "format": ["strictCamelCase"]
+                    },
+                    {
+                        "selector": ["property", "accessor"],
+                        "modifiers": ["private"],
+                        "format": ["strictCamelCase"],
+                        "leadingUnderscore": "require"
+                    },
+                    {
+                        "selector": ["method"],
+                        "modifiers": ["public"],
+                        "format": ["strictCamelCase"]
+                    },
+                    // Private methods
+                    {
+                        "selector": ["method"],
+                        "modifiers": ["private"],
+                        "format": ["strictCamelCase"],
+                        "leadingUnderscore": "require"
+                    },
+                    {
+                        "selector": ["method"],
+                        "modifiers": ["protected"],
+                        "format": ["strictCamelCase"],
+                        "leadingUnderscore": "require"
+                    },
+                    // Top Level Methods
+                    // const func: Function
+                    // allow PascalCase for react components
+                    {
+                        "selector": ["variable"],
+                        "modifiers": ["global"],
+                        "types": ["function"],
+                        "format": ["strictCamelCase", "StrictPascalCase"],
+                        "leadingUnderscore": "allow"
+                    },
+                    // function something() { }
+                    {
+                        "selector": ["function"],
+                        "modifiers": ["global"],
+                        "format": ["strictCamelCase"],
+                        "leadingUnderscore": "require"
+                    },
+                    // export const func: Function
+                    {
+                        "selector": ["variable"],
+                        "modifiers": ["exported"],
+                        "types": ["function"],
+                        "format": ["strictCamelCase", "StrictPascalCase"],
+                        "leadingUnderscore": "forbid"
+                    },
+                    // export function something() { }
+                    {
+                        "selector": ["function"],
+                        "modifiers": ["exported"],
+                        "format": ["strictCamelCase", "StrictPascalCase"],
+                        "leadingUnderscore": "forbid"
+                    },
+                    // Top Level Variables
+                    {
+                        "selector": ["variable"],
+                        "modifiers": ["global", "const"],
+                        "types": ["boolean", "string", "number"],
+                        "format": ["UPPER_CASE"]
+                    },
+                    {
+                        "selector": ["variable"],
+                        "modifiers": ["global"],
+                        "format": ["strictCamelCase"],
+                        "leadingUnderscore": "require"
+                    },
+                    {
+                        "selector": ["variable"],
+                        "modifiers": ["exported"],
+                        "format": ["strictCamelCase"]
+                    },
+                    // types, enums
+                    {
+                        "selector": "typeLike",
+                        "format": ["PascalCase"]
+                    },
+                    {
+                        "selector": "variableLike",
+                        "format": ["strictCamelCase"]
+                    }
+                ],
+                "react/self-closing-comp": "warn",
+                "no-restricted-syntax": [
+                    "warn",
+                    {
+                        "selector": ":matches(PropertyDefinition)[accessibility!='private'][accessibility!='protected'][key.name!='constructor']",
+                        "message": "Use private instead, please implement getter or setXxx for external read and write requirements"
+                    }
+                ]
+            }
+        },
+        {
+            "files": ["*.ts", "*.tsx"],
+            "extends": ["plugin:@nrwl/nx/typescript"],
+            "rules": {
+                "prefer-const": "warn",
+                "no-console": ["warn", { "allow": ["warn", "error"] }],
+                "@typescript-eslint/ban-ts-comment": "warn",
+                "@typescript-eslint/no-empty-interface": "warn",
+                "@typescript-eslint/no-empty-function": "warn",
+                // https://github.com/nrwl/nx/issues/10445
+                "react/jsx-key": "error",
+                "import/no-default-export": "warn",
+                "import/no-duplicates": "warn",
+                "max-lines": [
+                    "warn",
+                    { "max": 300, "skipComments": true, "skipBlankLines": true }
+                ]
+            }
+        },
+        {
+            "files": ["*.js", "*.jsx"],
+            "extends": ["plugin:@nrwl/nx/javascript"],
+            "rules": {}
+        }
+    ]
+}
diff --git a/.free.env b/.free.env
new file mode 100644
index 000000000..24b1b20ec
--- /dev/null
+++ b/.free.env
@@ -0,0 +1 @@
+NX_FREE_LOGIN=true
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
new file mode 100644
index 000000000..22f66396d
--- /dev/null
+++ b/.github/CODEOWNERS
@@ -0,0 +1,47 @@
+# About code owners
+
+# You can use a CODEOWNERS file to define individuals or teams that are responsible for code in a repository.
+
+# See https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners
+
+
+# =================
+# configs
+# =================
+
+.* @darkskygit
+babel.config.json @darkskygit
+nx.json @darkskygit
+tsconfig.base.json @darkskygit
+**/project.json @darkskygit
+**/tsconfig.json @darkskygit
+**/tsconfig.*.json @darkskygit
+**/.babelrc @darkskygit
+**/babel.config.js @darkskygit
+**/.* @darkskygit
+
+# =================
+# components
+# =================
+
+# editor-core
+libs/components/editor-core @lawvs
+
+# editor-blocks
+
+# group block
+libs/components/editor-blocks/src/blocks/group @lawvs
+# todo block
+libs/components/editor-blocks/src/blocks/todo @lawvs
+
+libs/framework/virgo @SaikaSakura
+
+# =================
+# datasource
+# =================
+
+# feature flags
+libs/datasource/feature-flags @lawvs
+
+# jwt
+libs/datasource/jwt @darkskygit
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
new file mode 100644
index 000000000..8266d460d
--- /dev/null
+++ b/.github/workflows/lint.yml
@@ -0,0 +1,62 @@
+name: Lint
+
+on:
+    push:
+        branches: [master]
+    pull_request:
+        branches: [master]
+
+# 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
+
+jobs:
+    main:
+        strategy:
+            matrix:
+                node-version: [16]
+                os: [ubuntu-latest]
+        runs-on: ${{ matrix.os }}
+        # TODO Remove the next line after cleaning all errors
+        continue-on-error: true
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+
+            - name: Use pnpm
+              uses: pnpm/action-setup@v2
+              with:
+                  version: 7
+
+            - name: Use Node.js ${{ matrix.node-version }}
+              # https://github.com/actions/setup-node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: ${{ matrix.node-version }}
+                  cache: 'pnpm'
+
+            - name: Install node modules
+              run: pnpm install
+
+            - name: Lint
+              if: always()
+              run: pnpm run lint:with-cache
+
+            # - name: Check
+            #   if: always()
+            #   run: pnpm run check
+
+            # - name: Format Check
+            #   if: always()
+            #   run: pnpm run format:ci
+
+            # - name: Build
+            #  run: pnpm run build
+
+            # - name: Test
+            #   run: pnpm run test
diff --git a/.github/workflows/lisa.yml b/.github/workflows/lisa.yml
new file mode 100644
index 000000000..878fad627
--- /dev/null
+++ b/.github/workflows/lisa.yml
@@ -0,0 +1,59 @@
+name: Build Lisa
+
+on:
+    push:
+        branches: [master]
+    pull_request:
+        branches: [master]
+
+# 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
+    LISA_IMAGE_NAME: lisa
+    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 (lisa)
+              id: meta_lisa
+              uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+              with:
+                  images: ${{ env.REGISTRY }}/${{ env.NAMESPACE }}/${{ env.LISA_IMAGE_NAME }}
+                  tags: |
+                      ${{ env.IMAGE_TAG }}
+                      ${{ env.IMAGE_TAG_LATEST }}
+
+            - name: Build and push Docker image (lisa)
+              uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
+              with:
+                  context: .
+                  push: ${{ github.ref == 'refs/heads/master' && true || false }}
+                  tags: ${{ steps.meta_lisa.outputs.tags }}
+                  labels: ${{ steps.meta_lisa.outputs.labels }}
+                  target: lisa
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..7b5e08b2c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,45 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+*dist
+/tmp
+/out-tsc
+
+# dependencies
+node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+.pnpm-debug.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+
+# env
+*.env.local
+*.local.env
+.history
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 000000000..deb953a84
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,8 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+# npx lint-staged
+
+pnpm run lint:with-cache
+pnpm run check
+pnpm run format:ci
diff --git a/.husky/pre-push b/.husky/pre-push
new file mode 100755
index 000000000..741e9183e
--- /dev/null
+++ b/.husky/pre-push
@@ -0,0 +1,14 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+# Show just the current branch in Git
+# See https://stackoverflow.com/questions/1417957/show-just-the-current-branch-in-git/1418022#1418022
+current_branch=$(git rev-parse --abbrev-ref HEAD)
+
+default_branch="master"
+
+if test $current_branch != $default_branch; then
+  exit 0
+fi
+
+npm run type:check
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 000000000..c74aa6aa6
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,3 @@
+registry=https://registry.npmjs.org
+engine-strict=true
+auto-install-peers=true
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..07db99c70
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,15 @@
+# Add files here to ignore them from prettier formatting
+
+/dist
+/coverage
+pnpm-lock.yaml
+
+# Editoe assets
+apps/editoe/src/app/assets/svg
+
+# Automatically generated from Figma
+libs/components/icons/src/auto-icons
+libs/components/common/src/lib/icon
+
+# DevOps
+.github/**
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 000000000..babd1d0f7
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "arrowParens": "avoid"
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 000000000..1a9637994
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,11 @@
+{
+    "recommendations": [
+        "mikestead.dotenv",
+        "esbenp.prettier-vscode",
+        "visualstudioexptteam.vscodeintellicode",
+        "nrwl.angular-console",
+        "firsttris.vscode-jest-runner",
+        "dbaeumer.vscode-eslint",
+        "streetsidesoftware.code-spell-checker"
+    ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..2c3dd39eb
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,41 @@
+{
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "editor.formatOnSaveMode": "file",
+    "prettier.prettierPath": "./node_modules/prettier",
+    "cSpell.words": [
+        "Backlinks",
+        "blockdb",
+        "booktitle",
+        "Cascader",
+        "clsx",
+        "cssmodule",
+        "datasource",
+        "fflate",
+        "groq",
+        "howpublished",
+        "immer",
+        "inbook",
+        "incollection",
+        "inproceedings",
+        "Kanban",
+        "keyval",
+        "ligo",
+        "lozad",
+        "mastersthesis",
+        "nrwl",
+        "phdthesis",
+        "pnpm",
+        "reindex",
+        "ROOTNODE",
+        "techreport",
+        "tldr",
+        "tldraw",
+        "tldtaw",
+        "toeverything",
+        "Unstyled",
+        "unversioned",
+        "uuidv",
+        "webm"
+    ]
+}
diff --git a/Caddyfile b/Caddyfile
new file mode 100644
index 000000000..172d92f0a
--- /dev/null
+++ b/Caddyfile
@@ -0,0 +1,39 @@
+:80 {
+	reverse_proxy /api/* keck:3001
+	@websockets {
+		path /collaboration/*
+	}
+	reverse_proxy @websockets keck:3000
+        reverse_proxy /* lisa:3001 {
+                header_up Host lisa:3001
+        }
+}
+
+http://lisa:3001 {
+        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
+        }
+}
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 000000000..f6e2249fa
--- /dev/null
+++ b/Dockerfile
@@ -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
+
+FROM node:16-alpine as relocate
+WORKDIR /app
+COPY --from=builder /app/dist/apps/ligo-virgo ./dist
+COPY --from=builder /app/Caddyfile ./
+RUN rm ./dist/*.txt
+
+# =============
+# lisa image
+# =============
+FROM caddy:2.4.6-alpine as lisa
+WORKDIR /app
+COPY --from=relocate /app .
+
+EXPOSE 3000
+CMD ["caddy", "run"]
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 000000000..296f81d87
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Toeverything Technology (Hangzhou) Co., Ltd. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 000000000..147ed616e
--- /dev/null
+++ b/README.md
@@ -0,0 +1,109 @@
+# AFFiNE
+
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
+[![All Contributors](https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square)](#contributors-)
+
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
+
+Workspace for AFFiNE
+
+## Installation
+
+```sh
+# Clone the repo
+git clone git@github.com:toeverything/AFFiNE.git
+```
+
+Once cloned, switch to the master branch and navigate to the folder by typing `cd AFFiNE` and then running the following commands:
+
+```sh
+# Install all project dependencies
+npm i -g pnpm
+pnpm i
+
+# Start the project
+pnpm start
+open http://localhost:4200/
+```
+
+This project uses pnpm for package management and is built based on nx. It is recommended to install the [nx console](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console) plugin to create dependencies
+
+**If it is development, you can add environment variables in the project directory .env.local file**
+
+```
+NODE_ENV=development
+```
+
+## Scripts
+
+1. Create react dependency library: `pnpm run add:library`
+2. Create react components: `pnpm run add:components`
+3. Create a data source: `pnpm run add:datasource`
+4. Unit testing: `pnpm test`
+5. Compile specific components
+    - `pnpm build/test/lint `project name
+    - Project name reference workspace.json
+6. Create react/node program: use nx console
+7. If you need to use the git cz function, please install it globally first commitizen `npm install -g commitizen conventional-changelog conventional-changelog-cli`
+
+## Examples
+
+Have a look at [the examples to see AFFiNE in action](https://app.affine.pro/).
+
+## Contributing
+
+-   Generic functional components (such as ui components) are placed in `libs/components/common`
+    -   components within common are not allowed to reference _components_ except utils and dependencies
+    -   Common components can reference each other
+-   Business components are placed in `libs/components`
+-   The data source component is placed in `libs/datasource` - api request code, schema, etc. belong to the data source
+    Please see [CONTRIBUTING](/docs/CONTRIBUTING.md)
+
+## Documentation
+
+-   [how-to-write-css-in-affine.md](/docs/how-to-write-css-in-affine.md)
+-   [how-to-add-ui-component-in-affine.md](/docs/how-to-add-ui-component-in-affine.md)
+-   [how-to-customize-rollup-config.md](docs/how-to-customize-rollup-config.md)
+-   [how-to-auto-download-figma-assets-in-affine.md](docs/how-to-auto-download-figma-assets-in-affine.md)
+-   [affine-icons-user-guide.md](docs/affine-icons-user-guide.md)
+
+## Community
+
+For help, discussion about best practices, or any other conversation that would benefit from being searchable:
+
+[Discuss AFFiNE on GitHub](https://github.com/toeverything/AFFiNE/discussions)
+
+## Contributors
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://darksky.eu.org/"><img src="https://avatars.githubusercontent.com/u/25152247?v=4?s=100" width="100px;" alt=""/><br /><sub><b>DarkSky</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=darkskygit" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=darkskygit" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/tzhangchi"><img src="https://avatars.githubusercontent.com/u/5910926?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Chi Zhang</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=tzhangchi" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=tzhangchi" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/alt1o"><img src="https://avatars.githubusercontent.com/u/21084335?v=4?s=100" width="100px;" alt=""/><br /><sub><b>alt1o</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=alt1o" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=alt1o" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/DiamondThree"><img src="https://avatars.githubusercontent.com/u/24630517?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Diamond</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=DiamondThree" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=DiamondThree" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://lawvs.github.io/profile/"><img src="https://avatars.githubusercontent.com/u/18554747?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Whitewater</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=lawvs" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=lawvs" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/zuoxiaodong0815"><img src="https://avatars.githubusercontent.com/u/53252747?v=4?s=100" width="100px;" alt=""/><br /><sub><b>zuoxiaodong0815</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=zuoxiaodong0815" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=zuoxiaodong0815" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/SaikaSakura"><img src="https://avatars.githubusercontent.com/u/11530942?v=4?s=100" width="100px;" alt=""/><br /><sub><b>SaikaSakura</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=SaikaSakura" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=SaikaSakura" title="Documentation">📖</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/QiShaoXuan"><img src="https://avatars.githubusercontent.com/u/22772830?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Qi</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=QiShaoXuan" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=QiShaoXuan" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://tuluffy.github.io/angular.github.io/"><img src="https://avatars.githubusercontent.com/u/26808339?v=4?s=100" width="100px;" alt=""/><br /><sub><b>tuluffy</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=tuluffy" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=tuluffy" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://shockwave.me/"><img src="https://avatars.githubusercontent.com/u/15013925?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Austaras</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=Austaras" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=Austaras" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/uptonking?tab=repositories&type=source"><img src="https://avatars.githubusercontent.com/u/11391549?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jin Yao</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=uptonking" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=uptonking" title="Documentation">📖</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+## License
+
+AFFiNE is distributed under the terms of MIT license.
+
+See LICENSE for details.
diff --git a/apps/.gitkeep b/apps/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/ligo-virgo/.babelrc b/apps/ligo-virgo/.babelrc
new file mode 100644
index 000000000..f0aa1cb96
--- /dev/null
+++ b/apps/ligo-virgo/.babelrc
@@ -0,0 +1,11 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/apps/ligo-virgo/.browserslistrc b/apps/ligo-virgo/.browserslistrc
new file mode 100644
index 000000000..f1d12df4f
--- /dev/null
+++ b/apps/ligo-virgo/.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'.
\ No newline at end of file
diff --git a/apps/ligo-virgo/.eslintrc.json b/apps/ligo-virgo/.eslintrc.json
new file mode 100644
index 000000000..1f5ec76fb
--- /dev/null
+++ b/apps/ligo-virgo/.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": {}
+        }
+    ]
+}
diff --git a/apps/ligo-virgo/jest.config.js b/apps/ligo-virgo/jest.config.js
new file mode 100644
index 000000000..5b49bd23d
--- /dev/null
+++ b/apps/ligo-virgo/jest.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+    displayName: 'ligo-virgo',
+    preset: '../../jest.preset.js',
+    transform: {
+        'node_modules\\/.+\\.js$': 'jest-esm-transformer',
+        '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../coverage/apps/ligo-virgo',
+    transformIgnorePatterns: [],
+};
diff --git a/apps/ligo-virgo/package.json b/apps/ligo-virgo/package.json
new file mode 100644
index 000000000..54c68924c
--- /dev/null
+++ b/apps/ligo-virgo/package.json
@@ -0,0 +1,20 @@
+{
+    "name": "ligo-virgo",
+    "version": "1.0.0",
+    "license": "MIT",
+    "description": "",
+    "main": "jest.config.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "keywords": [],
+    "author": "AFFiNE <developer@affine.pro>",
+    "dependencies": {
+        "@mui/icons-material": "^5.8.4"
+    },
+    "devDependencies": {
+        "firebase": "^9.8.4",
+        "mini-css-extract-plugin": "^2.6.1",
+        "webpack": "^5.73.0"
+    }
+}
diff --git a/apps/ligo-virgo/project.json b/apps/ligo-virgo/project.json
new file mode 100644
index 000000000..ad3444c4a
--- /dev/null
+++ b/apps/ligo-virgo/project.json
@@ -0,0 +1,75 @@
+{
+    "sourceRoot": "apps/ligo-virgo/src",
+    "projectType": "application",
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:webpack",
+            "outputs": ["{options.outputPath}"],
+            "defaultConfiguration": "production",
+            "options": {
+                "compiler": "babel",
+                "outputPath": "dist/apps/ligo-virgo",
+                "index": "apps/ligo-virgo/src/index.html",
+                "baseHref": "/",
+                "main": "apps/ligo-virgo/src/index.tsx",
+                "polyfills": "apps/ligo-virgo/src/polyfills.ts",
+                "tsConfig": "apps/ligo-virgo/tsconfig.app.json",
+                "assets": ["apps/ligo-virgo/src/assets"],
+                "styles": [],
+                "scripts": [],
+                "webpackConfig": "apps/ligo-virgo/webpack.config.js"
+            },
+            "configurations": {
+                "production": {
+                    "fileReplacements": [
+                        {
+                            "replace": "apps/ligo-virgo/src/environments/environment.ts",
+                            "with": "apps/ligo-virgo/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",
+            "options": {
+                "buildTarget": "ligo-virgo:build:development",
+                "hmr": true,
+                "proxyConfig": "apps/ligo-virgo/proxy.conf.json",
+                "open": true
+            },
+            "configurations": {
+                "production": {
+                    "buildTarget": "ligo-virgo:build:production",
+                    "hmr": false
+                }
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": ["apps/ligo-virgo/**/*.{ts,tsx,js,jsx}"]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/apps/ligo-virgo"],
+            "options": {
+                "jestConfig": "apps/ligo-virgo/jest.config.js",
+                "passWithNoTests": true
+            }
+        },
+        "check": {
+            "executor": "./tools/executors/tsCheck:tsCheck"
+        }
+    },
+    "tags": ["app:ligo-virgo"]
+}
diff --git a/apps/ligo-virgo/proxy.conf.json b/apps/ligo-virgo/proxy.conf.json
new file mode 100644
index 000000000..8dc733b87
--- /dev/null
+++ b/apps/ligo-virgo/proxy.conf.json
@@ -0,0 +1,13 @@
+{
+    "/api": {
+        "target": "https://nightly.affine.pro/",
+        "secure": false,
+        "changeOrigin": true
+    },
+    "/collaboration": {
+        "target": "https://canary.affine.pro",
+        "ws": true,
+        "changeOrigin": true,
+        "secure": false
+    }
+}
diff --git a/apps/ligo-virgo/src/assets/.gitkeep b/apps/ligo-virgo/src/assets/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/ligo-virgo/src/assets/images/favicon.ico b/apps/ligo-virgo/src/assets/images/favicon.ico
new file mode 100644
index 000000000..b972ff61c
Binary files /dev/null and b/apps/ligo-virgo/src/assets/images/favicon.ico differ
diff --git a/apps/ligo-virgo/src/custom-formatter.ts b/apps/ligo-virgo/src/custom-formatter.ts
new file mode 100644
index 000000000..18bb39a22
--- /dev/null
+++ b/apps/ligo-virgo/src/custom-formatter.ts
@@ -0,0 +1,60 @@
+import { AsyncBlock } from '@toeverything/framework/virgo';
+import { isDev } from '@toeverything/utils';
+
+/**
+ * Ported from https://github.com/vuejs/core/blob/main/packages/runtime-core/src/customFormatter.ts
+ * See [Custom Object Formatters in Chrome DevTools](https://docs.google.com/document/d/1FTascZXT9cxfetuPRT2eXPQKXui4nWFivUnS_335T3U)
+ */
+
+const isAsyncBlock = (x: unknown): x is AsyncBlock => {
+    return x instanceof AsyncBlock;
+};
+
+export function initCustomFormatter() {
+    if (!isDev || typeof window === 'undefined') {
+        return;
+    }
+
+    const bannerStyle = {
+        style: 'color: #eee; background: #3F6FDB; margin-right: 5px; padding: 2px; border-radius: 4px',
+    };
+    const typeStyle = {
+        style: 'color: #eee; background: #DB6D56; margin-right: 5px; padding: 2px; border-radius: 4px',
+    };
+
+    // custom formatter for Chrome
+    // https://www.mattzeunert.com/2016/02/19/custom-chrome-devtools-object-formatters.html
+    const formatter = {
+        header(obj: unknown, config = { expand: false }) {
+            if (!isAsyncBlock(obj) || config.expand) {
+                return null;
+            }
+
+            return [
+                'div',
+                {},
+                ['span', bannerStyle, 'AsyncBlock'],
+                ['span', typeStyle, obj.type],
+                // @ts-expect-error Debug at development environment
+                `${JSON.stringify(obj.raw_data.properties)}`,
+            ];
+        },
+        hasBody(obj: unknown) {
+            return true;
+        },
+        body(obj: unknown) {
+            return ['object', { object: obj, config: { expand: true } }];
+        },
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if ((window as any).devtoolsFormatters) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (window as any).devtoolsFormatters.push(formatter);
+    } else {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (window as any).devtoolsFormatters = [formatter];
+    }
+}
+
+initCustomFormatter();
diff --git a/apps/ligo-virgo/src/environments/environment.prod.ts b/apps/ligo-virgo/src/environments/environment.prod.ts
new file mode 100644
index 000000000..da7c84f63
--- /dev/null
+++ b/apps/ligo-virgo/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+    production: true,
+};
diff --git a/apps/ligo-virgo/src/environments/environment.ts b/apps/ligo-virgo/src/environments/environment.ts
new file mode 100644
index 000000000..855830c23
--- /dev/null
+++ b/apps/ligo-virgo/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,
+};
diff --git a/apps/ligo-virgo/src/index.html b/apps/ligo-virgo/src/index.html
new file mode 100644
index 000000000..1291a1091
--- /dev/null
+++ b/apps/ligo-virgo/src/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <!-- local dev index.html -->
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="https://app.affine.pro/favicon.ico" />
+        <title>Affine | Local Dev Environment</title>
+        <script>
+            window.global = window;
+        </script>
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>
diff --git a/apps/ligo-virgo/src/index.tsx b/apps/ligo-virgo/src/index.tsx
new file mode 100644
index 000000000..9380c370b
--- /dev/null
+++ b/apps/ligo-virgo/src/index.tsx
@@ -0,0 +1,28 @@
+/* eslint-disable filename-rules/match */
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+
+import { ThemeProvider } from '@toeverything/components/ui';
+import { FeatureFlagsProvider } from '@toeverything/datasource/feature-flags';
+
+import './custom-formatter';
+import { LigoVirgoRoutes } from './pages';
+import './styles.css';
+
+const container = document.getElementById('root');
+if (!container) {
+    throw new Error('No root container found');
+}
+const root = createRoot(container);
+root.render(
+    <StrictMode>
+        <BrowserRouter>
+            <ThemeProvider>
+                <FeatureFlagsProvider>
+                    <LigoVirgoRoutes />
+                </FeatureFlagsProvider>
+            </ThemeProvider>
+        </BrowserRouter>
+    </StrictMode>
+);
diff --git a/apps/ligo-virgo/src/pages/AppContainer.tsx b/apps/ligo-virgo/src/pages/AppContainer.tsx
new file mode 100644
index 000000000..b554cd0fa
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/AppContainer.tsx
@@ -0,0 +1,36 @@
+import { Outlet } from 'react-router-dom';
+
+import { styled } from '@toeverything/components/ui';
+import { SettingsSidebar, LayoutHeader } from '@toeverything/components/layout';
+
+export function LigoVirgoRootContainer() {
+    return (
+        <StyledRootContainer id="idAppRoot">
+            <StyledContentContainer>
+                <LayoutHeader />
+                <StyledMainContainer>
+                    <Outlet />
+                </StyledMainContainer>
+            </StyledContentContainer>
+            <SettingsSidebar />
+        </StyledRootContainer>
+    );
+}
+
+const StyledMainContainer = styled('div')({
+    flex: 'auto',
+    display: 'flex',
+});
+
+const StyledRootContainer = styled('div')({
+    display: 'flex',
+    flexDirection: 'row',
+    height: '100vh',
+});
+
+const StyledContentContainer = styled('div')({
+    flex: 'auto',
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+});
diff --git a/apps/ligo-virgo/src/pages/AppRoutes.tsx b/apps/ligo-virgo/src/pages/AppRoutes.tsx
new file mode 100644
index 000000000..8014a86a6
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/AppRoutes.tsx
@@ -0,0 +1,64 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+
+import Agenda from './agenda';
+import { WorkspaceContainer } from './workspace';
+import Recent from './recent';
+import Search from './search';
+import Settings from './settings';
+import Shared from './shared';
+import Starred from './starred';
+import { Login } from './account';
+import { PageNotFound } from './status/page-not-found';
+import { WorkspaceNotFound } from './status/workspace-not-found';
+import { RoutePrivate } from './RoutePrivate';
+import { RoutePublicAutoLogin } from './RoutePublicAutoLogin';
+import { Tools } from './tools';
+import { Templates } from './templates';
+import { LigoVirgoRootContainer } from './AppContainer';
+import { UIPage } from './ui';
+
+export function LigoVirgoRoutes() {
+    return (
+        <Routes>
+            <Route path="/" element={<LigoVirgoRootContainer />}>
+                <Route path="/error/404" element={<PageNotFound />} />
+                <Route
+                    path="/error/workspace"
+                    element={<WorkspaceNotFound />}
+                />
+
+                <Route path="/agenda/*" element={<Agenda />} />
+                <Route path="/recent" element={<Recent />} />
+                <Route path="/search" element={<Search />} />
+                <Route path="/settings" element={<Settings />} />
+                <Route path="/shared" element={<Shared />} />
+                <Route path="/started" element={<Starred />} />
+                <Route path="/templates" element={<Templates />} />
+                <Route path="/ui" element={<UIPage />} />
+                <Route
+                    path="/:workspace_id/*"
+                    element={
+                        <RoutePrivate>
+                            <WorkspaceContainer />
+                        </RoutePrivate>
+                    }
+                />
+                <Route path="/" element={<Navigate to="/login" replace />} />
+            </Route>
+
+            {/* put public routes here; header and sidebar are disabled here */}
+            <Route>
+                <Route path="/tools/*" element={<Tools />} />
+                <Route
+                    path="/login"
+                    element={
+                        <RoutePublicAutoLogin>
+                            <Login />
+                        </RoutePublicAutoLogin>
+                    }
+                />
+                <Route path="/" element={<Navigate to="/login" replace />} />
+            </Route>
+        </Routes>
+    );
+}
diff --git a/apps/ligo-virgo/src/pages/RoutePrivate.tsx b/apps/ligo-virgo/src/pages/RoutePrivate.tsx
new file mode 100644
index 000000000..58dcbe3db
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/RoutePrivate.tsx
@@ -0,0 +1,37 @@
+import { Navigate, useLocation } from 'react-router-dom';
+
+import { PageLoading, Error } from '@toeverything/components/account';
+import { useUserAndSpaces } from '@toeverything/datasource/state';
+
+export type RoutePrivateProps = {
+    children: JSX.Element;
+    unauthorizedRedirectTo?: string;
+};
+
+/**
+ * A routing component that cannot be accessed without logging in, and can only be accessed after logging in.
+ */
+export function RoutePrivate({
+    children,
+    unauthorizedRedirectTo = '/login',
+}: RoutePrivateProps) {
+    const { pathname } = useLocation();
+
+    const { user, loading } = useUserAndSpaces();
+
+    if (user == null && loading) {
+        return <PageLoading />;
+    }
+
+    if (!user) {
+        return (
+            <Navigate
+                to={unauthorizedRedirectTo}
+                state={{ from: pathname }}
+                replace={true}
+            />
+        );
+    }
+
+    return children;
+}
diff --git a/apps/ligo-virgo/src/pages/RoutePublicAutoLogin.tsx b/apps/ligo-virgo/src/pages/RoutePublicAutoLogin.tsx
new file mode 100644
index 000000000..c200455ea
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/RoutePublicAutoLogin.tsx
@@ -0,0 +1,33 @@
+import { Navigate, useLocation } from 'react-router-dom';
+
+import { PageLoading } from '@toeverything/components/account';
+import { useUserAndSpaces } from '@toeverything/datasource/state';
+
+export type RouteUnauthorizedOnlyProps = {
+    children: JSX.Element;
+};
+
+/**
+ * Routing components that are accessible without logging in and inaccessible after logging in will automatically jump to the specified route authorizedRedirectTo
+ */
+export function RoutePublicAutoLogin({ children }: RouteUnauthorizedOnlyProps) {
+    const { pathname } = useLocation();
+
+    const { user, loading, currentSpaceId } = useUserAndSpaces();
+
+    if (user == null && loading) {
+        return <PageLoading />;
+    }
+
+    if (currentSpaceId) {
+        return (
+            <Navigate
+                to={`/${currentSpaceId}`}
+                state={{ from: pathname }}
+                replace={true}
+            />
+        );
+    }
+
+    return children;
+}
diff --git a/apps/ligo-virgo/src/pages/account/index.ts b/apps/ligo-virgo/src/pages/account/index.ts
new file mode 100644
index 000000000..42f6bc2be
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/account/index.ts
@@ -0,0 +1,3 @@
+import { Login } from '@toeverything/components/account';
+
+export { Login };
diff --git a/apps/ligo-virgo/src/pages/agenda/calendar/index.tsx b/apps/ligo-virgo/src/pages/agenda/calendar/index.tsx
new file mode 100644
index 000000000..e7b3d6f7a
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/agenda/calendar/index.tsx
@@ -0,0 +1,3 @@
+export default function AgendaCalendar() {
+    return <span>AgendaCalendar</span>;
+}
diff --git a/apps/ligo-virgo/src/pages/agenda/container/index.tsx b/apps/ligo-virgo/src/pages/agenda/container/index.tsx
new file mode 100644
index 000000000..02d8378b6
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/agenda/container/index.tsx
@@ -0,0 +1,18 @@
+import { Outlet } from 'react-router-dom';
+import style9 from 'style9';
+
+import { MuiBox as Box } from '@toeverything/components/ui';
+
+const styles = style9.create({
+    container: {
+        display: 'flex',
+    },
+});
+
+export default function AgendaRootContainer() {
+    return (
+        <Box className={styles('container')}>
+            <Outlet />
+        </Box>
+    );
+}
diff --git a/apps/ligo-virgo/src/pages/agenda/home/index.tsx b/apps/ligo-virgo/src/pages/agenda/home/index.tsx
new file mode 100644
index 000000000..62b446f56
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/agenda/home/index.tsx
@@ -0,0 +1,3 @@
+export default function AgendaHome() {
+    return <span>AgendaHome</span>;
+}
diff --git a/apps/ligo-virgo/src/pages/agenda/index.tsx b/apps/ligo-virgo/src/pages/agenda/index.tsx
new file mode 100644
index 000000000..23f478ad5
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/agenda/index.tsx
@@ -0,0 +1,20 @@
+import { Routes, Route } from 'react-router-dom';
+
+import Container from './container';
+import Calendar from './calendar';
+import Tasks from './tasks';
+import Today from './today';
+import Home from './home';
+
+export default function AgendaContainer() {
+    return (
+        <Routes>
+            <Route path="/" element={<Container />}>
+                <Route path="/calendar" element={<Calendar />} />
+                <Route path="/tasks" element={<Tasks />} />
+                <Route path="/today" element={<Today />} />
+                <Route path="/" element={<Home />} />
+            </Route>
+        </Routes>
+    );
+}
diff --git a/apps/ligo-virgo/src/pages/agenda/tasks/index.tsx b/apps/ligo-virgo/src/pages/agenda/tasks/index.tsx
new file mode 100644
index 000000000..b51d40197
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/agenda/tasks/index.tsx
@@ -0,0 +1,3 @@
+export default function AgendaTasks() {
+    return <span>AgendaTasks</span>;
+}
diff --git a/apps/ligo-virgo/src/pages/agenda/today/index.tsx b/apps/ligo-virgo/src/pages/agenda/today/index.tsx
new file mode 100644
index 000000000..fa0f454e4
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/agenda/today/index.tsx
@@ -0,0 +1,3 @@
+export default function AgendaToday() {
+    return <span>AgendaToday</span>;
+}
diff --git a/apps/ligo-virgo/src/pages/index.ts b/apps/ligo-virgo/src/pages/index.ts
new file mode 100644
index 000000000..c5bf888a8
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/index.ts
@@ -0,0 +1 @@
+export { LigoVirgoRoutes } from './AppRoutes';
diff --git a/apps/ligo-virgo/src/pages/recent/index.tsx b/apps/ligo-virgo/src/pages/recent/index.tsx
new file mode 100644
index 000000000..9cf390d1e
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/recent/index.tsx
@@ -0,0 +1,3 @@
+export default function Recent() {
+    return <span>Recent</span>;
+}
diff --git a/apps/ligo-virgo/src/pages/search/index.tsx b/apps/ligo-virgo/src/pages/search/index.tsx
new file mode 100644
index 000000000..135fd5818
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/search/index.tsx
@@ -0,0 +1,3 @@
+export default function Search() {
+    return <span>Search</span>;
+}
diff --git a/apps/ligo-virgo/src/pages/settings/index.tsx b/apps/ligo-virgo/src/pages/settings/index.tsx
new file mode 100644
index 000000000..803a6e29c
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/settings/index.tsx
@@ -0,0 +1,3 @@
+export default function Settings() {
+    return <span>Settings</span>;
+}
diff --git a/apps/ligo-virgo/src/pages/shared/index.tsx b/apps/ligo-virgo/src/pages/shared/index.tsx
new file mode 100644
index 000000000..051e879ca
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/shared/index.tsx
@@ -0,0 +1,3 @@
+export default function Shared() {
+    return <span>Shared</span>;
+}
diff --git a/apps/ligo-virgo/src/pages/starred/index.tsx b/apps/ligo-virgo/src/pages/starred/index.tsx
new file mode 100644
index 000000000..d2f36fe76
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/starred/index.tsx
@@ -0,0 +1,3 @@
+export default function Starred() {
+    return <span>Starred</span>;
+}
diff --git a/apps/ligo-virgo/src/pages/status/page-not-found.tsx b/apps/ligo-virgo/src/pages/status/page-not-found.tsx
new file mode 100644
index 000000000..940961070
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/status/page-not-found.tsx
@@ -0,0 +1,7 @@
+import { Error } from '@toeverything/components/account';
+
+export function PageNotFound() {
+    return <Error clearOnClick={true} />;
+}
+
+export default PageNotFound;
diff --git a/apps/ligo-virgo/src/pages/status/workspace-not-found.tsx b/apps/ligo-virgo/src/pages/status/workspace-not-found.tsx
new file mode 100644
index 000000000..b2a8f7334
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/status/workspace-not-found.tsx
@@ -0,0 +1,13 @@
+import { Error } from '@toeverything/components/account';
+
+export function WorkspaceNotFound() {
+    return (
+        <Error
+            subTitle="No workspace is found, please contact the admin"
+            action1Text="Login or Register"
+            clearOnClick={true}
+        />
+    );
+}
+
+export default WorkspaceNotFound;
diff --git a/apps/ligo-virgo/src/pages/templates/index.tsx b/apps/ligo-virgo/src/pages/templates/index.tsx
new file mode 100644
index 000000000..523091c3e
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/templates/index.tsx
@@ -0,0 +1,98 @@
+import { styled, ListButton } from '@toeverything/components/ui';
+import { TemplateData } from './template-data';
+import { useParams } from 'react-router-dom';
+import { AffineEditor } from '@toeverything/components/affine-editor';
+const TemplatesContainer = styled('div')({
+    display: 'flex',
+    flexDirection: 'row',
+    backgroundColor: '#fff',
+    border: '1px solid #E2E7ED',
+    borderRadius: '5px',
+    margin: '0 auto',
+    '.sidebar': {
+        width: '240px',
+        display: 'flex',
+        borderRight: '1px solid #E2E7ED',
+        flexDirection: 'column',
+        color: 'rgba(55, 53, 47, 0.65)',
+        background: 'rgb(247, 246, 243)',
+        padding: '12px',
+    },
+    '.preview-template': {
+        display: 'flex',
+    },
+    '.sidebar-title': {
+        borderBottom: '1px solid #E2E7ED',
+    },
+    '.sidebar-template-type': {
+        height: '600px',
+        overflowY: 'scroll',
+        ul: {},
+        'ul li': {
+            paddingLeft: '10px',
+            height: '32px',
+            lineHeight: '32px',
+            listStyle: 'none',
+            fontWeight: 600,
+            fontSize: '14px',
+            cursor: 'pointer',
+            '&:hover': {
+                background: '#eee',
+            },
+        },
+    },
+    '.btn-use-this-template': {
+        background: '#eee',
+        color: '#fff',
+        ':hover': {
+            background: '#ccc',
+        },
+    },
+});
+
+interface ITemplateProps {
+    handleClickUseThisTemplate?: () => void;
+}
+function Templates(props: ITemplateProps) {
+    const handle_click_use_this_template = () => {
+        props.handleClickUseThisTemplate();
+    };
+    const { workspace_id, page_id } = useParams();
+    return (
+        <TemplatesContainer>
+            <div className="sidebar">
+                <div className="sidebar-title">
+                    <ListButton
+                        className="btn-use-this-template"
+                        content="Use this template"
+                        onClick={handle_click_use_this_template}
+                    />
+                </div>
+                <div className="sidebar-template-type">
+                    {TemplateData.map((item, index) => {
+                        return (
+                            <div key={index}>
+                                {item.name}
+                                <ul>
+                                    {item.subList.map((item, index) => {
+                                        return <li key={index}>{item.name}</li>;
+                                    })}
+                                </ul>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+            <div className="preview-template">
+                {page_id && (
+                    <AffineEditor
+                        workspace={workspace_id}
+                        rootBlockId={page_id}
+                    />
+                )}
+            </div>
+        </TemplatesContainer>
+    );
+}
+
+export { Templates };
diff --git a/apps/ligo-virgo/src/pages/templates/template-data.ts b/apps/ligo-virgo/src/pages/templates/template-data.ts
new file mode 100644
index 000000000..7ca159a02
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/templates/template-data.ts
@@ -0,0 +1,125 @@
+export const TemplateData = [
+    {
+        name: 'Design',
+        subList: [
+            { name: '🚘 Roadmap' },
+            { name: '🔬 User Research Database' },
+            { name: '🎒 Design Tasks' },
+            { name: '✏️ Meeting Notes' },
+            { name: '🖋️ Design System' },
+            { name: '🎯 Company goals' },
+        ],
+    },
+    {
+        name: 'Student',
+        subList: [
+            { name: '✏️ Class Notes' },
+            { name: '🏗 Job Applications' },
+            { name: '⚖️ Grade Calculator' },
+            { name: '🏡 Club Homepage' },
+            { name: '📚 Reading List' },
+            { name: '📜 Thesis Planning' },
+            { name: '📍 Cornell Notes System' },
+            { name: '📇 Personal CRM' },
+            { name: '✌️ Roommate Space' },
+            { name: '💸 Simple Budget' },
+            { name: '📄 Syllabus' },
+            { name: '🏠 Classroom Home' },
+            { name: '📋 Lesson Plans' },
+            { name: '🗓 Course Schedule' },
+            { name: '👋 Class Directory' },
+        ],
+    },
+    {
+        name: 'Engineering',
+        subList: [
+            { name: '🎒 To-Do' },
+            { name: '🚘 Roadmap' },
+            { name: '📓 Engineering Wiki' },
+            { name: '📎 Docs' },
+            { name: '✏️ Meeting Notes' },
+            { name: '🎯 Company goals' },
+        ],
+    },
+    {
+        name: 'Human resources',
+        subList: [
+            { name: '💼 Job Board' },
+            { name: '✏️ Meeting Notes' },
+            { name: '🚂 New Hire Onboarding' },
+            { name: '📮 Applicant Tracker' },
+            { name: '🏠 Company Home' },
+        ],
+    },
+    {
+        name: 'Marketing',
+        subList: [
+            { name: '🎨 Brand Assets' },
+            { name: '✏️ Meeting Notes' },
+            { name: '🎤 Media List' },
+            { name: '📆 Content Calendar' },
+            { name: '🎟️ Mood Board' },
+        ],
+    },
+    {
+        name: 'Personal',
+        subList: [
+            { name: '📌 Quick Note' },
+            { name: '🏠 Personal Home' },
+            { name: '✔️ Task List' },
+            { name: '🖊️ Journal' },
+            { name: '📚 Reading List' },
+            { name: '🏔️ Goals' },
+            { name: '✈️ Travel Planner' },
+            { name: '✏️ Blog Post' },
+            { name: '📔 Simple Notebook' },
+            { name: '👟 Habit Tracker' },
+            { name: '🧭 Life Wiki' },
+            { name: '👔 Resume' },
+            { name: '📥 Job Applications' },
+            { name: '📕 Weekly Agenda' },
+        ],
+    },
+    {
+        name: 'Other',
+        subList: [
+            { name: '️📝 Meeting Notes' },
+            { name: '📄 Docs' },
+            { name: '🏠 Team Home' },
+            { name: '☑️ Team Tasks' },
+            { name: '✔️ Task List' },
+        ],
+    },
+    {
+        name: 'Product management',
+        subList: [
+            { name: '🚘 Roadmap' },
+            { name: ' User Research Database' },
+            { name: '📎 Docs' },
+            { name: '✏️ Meeting Notes' },
+            { name: '🏗 Product Wiki' },
+            { name: '🎯 Company goals' },
+        ],
+    },
+    {
+        name: 'Sales',
+        subList: [
+            { name: '✏️ Meeting Notes' },
+            { name: '👟 Sales CRM' },
+            { name: '📕 Sales Wiki' },
+            { name: '🎯 Competitive Analysis' },
+            { name: '✌️ Sales Assets' },
+        ],
+    },
+    {
+        name: 'Support',
+        subList: [
+            { name: '✌️ Team Directory' },
+            { name: '❓ Product FAQs' },
+            { name: '✏️ Meeting Notes' },
+            { name: '🎒 Task List' },
+            { name: '🚨 Help Center' },
+            { name: '📎 Process Docs' },
+        ],
+    },
+];
diff --git a/apps/ligo-virgo/src/pages/tools/container.tsx b/apps/ligo-virgo/src/pages/tools/container.tsx
new file mode 100644
index 000000000..11005e9fe
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/tools/container.tsx
@@ -0,0 +1,9 @@
+import { Outlet } from 'react-router-dom';
+
+export function Container() {
+    return (
+        <div>
+            <Outlet />
+        </div>
+    );
+}
diff --git a/apps/ligo-virgo/src/pages/tools/icons/Icons.tsx b/apps/ligo-virgo/src/pages/tools/icons/Icons.tsx
new file mode 100644
index 000000000..55b66c5eb
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/tools/icons/Icons.tsx
@@ -0,0 +1,85 @@
+import { type FC, useRef } from 'react';
+import * as uiIcons from '@toeverything/components/icons';
+import { message, styled } from '@toeverything/components/ui';
+import { copy } from './copy';
+
+const IconBooth: FC<{ name: string; Icon: FC<any> }> = ({ name, Icon }) => {
+    const on_click = () => {
+        copy(`<${name} />`);
+        message.success({
+            content: 'Copied.',
+        });
+    };
+    return (
+        <IconContainer title={name} onClick={on_click}>
+            <Icon />
+            <IconName>{name}</IconName>
+        </IconContainer>
+    );
+};
+
+const _icons = Object.entries(uiIcons).filter(([key]) => key !== 'timestamp');
+
+export const Icons: FC = () => {
+    const ref = useRef<HTMLHeadingElement>(null);
+    return (
+        <Container>
+            <h3 ref={ref}>Example:</h3>
+            <div>
+                <code>
+                    {`import { TextIcon } from '@toeverything/components/ui'`};
+                </code>
+            </div>
+            <h3>{`Total: ${_icons.length}`}</h3>
+            <blockquote>Click to copy.</blockquote>
+            <p>{`Last Updated: ${new Date(
+                uiIcons.timestamp
+            ).toLocaleString()}`}</p>
+            <hr />
+            <IconsContainer>
+                {_icons.map(([key, icon]) => {
+                    return <IconBooth key={key} name={key} Icon={icon as FC} />;
+                })}
+            </IconsContainer>
+        </Container>
+    );
+};
+
+const Container = styled('div')({
+    color: '#98ACBD',
+    padding: '20px',
+});
+
+const IconName = styled('div')({
+    width: '100%',
+    marginTop: '8px',
+    wordBreak: 'break-all',
+});
+
+const IconContainer = styled('div')(({ theme }) => ({
+    width: '112px',
+    borderRadius: '4px',
+    padding: '4px',
+    cursor: 'pointer',
+    textAlign: 'center',
+    '--color-0': theme.affine.palette.hover,
+    '--color-1': theme.affine.palette.icons,
+
+    '& svg:first-of-type': {
+        boxShadow: '0 0 6px #e0e6eb',
+    },
+
+    '&:hover': {
+        backgroundColor: '#F5F7F8',
+    },
+}));
+
+const IconsContainer = styled('div')({
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill,112px)',
+    justifyContent: 'justify',
+    alignContent: 'start',
+    columnGap: '16px',
+    rowGap: '24px',
+    marginTop: '24px',
+});
diff --git a/apps/ligo-virgo/src/pages/tools/icons/copy.ts b/apps/ligo-virgo/src/pages/tools/icons/copy.ts
new file mode 100644
index 000000000..ed9e1b0b9
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/tools/icons/copy.ts
@@ -0,0 +1,18 @@
+const create_fake_element = (value: string) => {
+    const fake_element = document.createElement('textarea');
+    fake_element.style.position = 'fixed';
+    fake_element.style.top = '0';
+    fake_element.style.clipPath = "path('M0,0 L0,0')";
+    fake_element.setAttribute('readonly', '');
+    fake_element.value = value;
+    return fake_element;
+};
+
+export const copy = (value: string) => {
+    const fake_element = create_fake_element(value);
+    document.body.appendChild(fake_element);
+    fake_element.select();
+    fake_element.setSelectionRange(0, fake_element.value.length);
+    document.execCommand('copy');
+    fake_element.remove();
+};
diff --git a/apps/ligo-virgo/src/pages/tools/icons/index.ts b/apps/ligo-virgo/src/pages/tools/icons/index.ts
new file mode 100644
index 000000000..9d2a7b7b2
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/tools/icons/index.ts
@@ -0,0 +1 @@
+export { Icons } from './Icons';
diff --git a/apps/ligo-virgo/src/pages/tools/index.tsx b/apps/ligo-virgo/src/pages/tools/index.tsx
new file mode 100644
index 000000000..984fae407
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/tools/index.tsx
@@ -0,0 +1,14 @@
+import { Routes, Route } from 'react-router-dom';
+
+import { Container } from './container';
+import { Icons } from './icons';
+
+export function Tools() {
+    return (
+        <Routes>
+            <Route path="/" element={<Container />}>
+                <Route path="/icons" element={<Icons />} />
+            </Route>
+        </Routes>
+    );
+}
diff --git a/apps/ligo-virgo/src/pages/ui/index.tsx b/apps/ligo-virgo/src/pages/ui/index.tsx
new file mode 100644
index 000000000..cc8273dbe
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/ui/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const UIPage = () => {
+    return (
+        <div className="">
+            This page is used to show ui components of Affine ~
+        </div>
+    );
+};
diff --git a/apps/ligo-virgo/src/pages/workspace/Container.tsx b/apps/ligo-virgo/src/pages/workspace/Container.tsx
new file mode 100644
index 000000000..92afc2248
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/workspace/Container.tsx
@@ -0,0 +1,19 @@
+import { Outlet } from 'react-router-dom';
+import style9 from 'style9';
+
+import { MuiBox as Box } from '@toeverything/components/ui';
+
+const styles = style9.create({
+    container: {
+        display: 'flex',
+        overflow: 'hidden',
+    },
+});
+
+export function WorkspaceRootContainer() {
+    return (
+        <Box className={styles('container')}>
+            <Outlet />
+        </Box>
+    );
+}
diff --git a/apps/ligo-virgo/src/pages/workspace/Home.tsx b/apps/ligo-virgo/src/pages/workspace/Home.tsx
new file mode 100644
index 000000000..c8ce89b6d
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/workspace/Home.tsx
@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useUserAndSpaces } from '@toeverything/datasource/state';
+import { services, TemplateFactory } from '@toeverything/datasource/db-service';
+
+export function WorkspaceHome() {
+    const navigate = useNavigate();
+    const { workspace_id } = useParams();
+    const { user } = useUserAndSpaces();
+
+    useEffect(() => {
+        const navigate_to_user_initial_page = async () => {
+            const recent_pages = await services.api.userConfig.getRecentPages(
+                workspace_id,
+                user.id
+            );
+
+            const user_initial_page_id =
+                await services.api.userConfig.getUserInitialPage(
+                    workspace_id,
+                    user.id
+                );
+            if (recent_pages.length === 0) {
+                await services.api.editorBlock.copyTemplateToPage(
+                    workspace_id,
+                    user_initial_page_id,
+                    TemplateFactory.generatePageTemplateByGroupKeys({
+                        name: null,
+                        groupKeys: ['todolist'],
+                    })
+                );
+            }
+            navigate(`/${workspace_id}/${user_initial_page_id}`);
+        };
+        navigate_to_user_initial_page();
+    }, [navigate, user.id, workspace_id]);
+
+    return null;
+}
diff --git a/apps/ligo-virgo/src/pages/workspace/Whiteboard.tsx b/apps/ligo-virgo/src/pages/workspace/Whiteboard.tsx
new file mode 100644
index 000000000..16bdf814f
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/workspace/Whiteboard.tsx
@@ -0,0 +1,37 @@
+import { memo, useEffect } from 'react';
+import { useParams } from 'react-router';
+
+import { AffineBoard } from '@toeverything/components/affine-board';
+import { useUserAndSpaces } from '@toeverything/datasource/state';
+import { services } from '@toeverything/datasource/db-service';
+
+const MemoAffineBoard = memo(AffineBoard, (prev, next) => {
+    return prev.rootBlockId === next.rootBlockId;
+});
+
+type WhiteboardProps = {
+    workspace: string;
+};
+
+export const Whiteboard = (props: WhiteboardProps) => {
+    const { page_id } = useParams();
+    const { user } = useUserAndSpaces();
+
+    useEffect(() => {
+        if (!user?.id || !props.workspace) return;
+        const update_recent_pages = async () => {
+            // TODO: deal with it temporarily
+            await services.api.editorBlock.getWorkspaceDbBlock(
+                props.workspace,
+                {
+                    userId: user.id,
+                }
+            );
+        };
+        update_recent_pages();
+    }, [user, props.workspace]);
+
+    return (
+        <MemoAffineBoard workspace={props.workspace} rootBlockId={page_id} />
+    );
+};
diff --git a/apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx b/apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx
new file mode 100644
index 000000000..069bc4885
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx
@@ -0,0 +1,112 @@
+import { useCallback, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import clsx from 'clsx';
+import style9 from 'style9';
+import {
+    MuiBox as Box,
+    MuiButton as Button,
+    MuiCollapse as Collapse,
+    MuiIconButton as IconButton,
+} from '@toeverything/components/ui';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+
+import { services } from '@toeverything/datasource/db-service';
+import { NewpageIcon } from '@toeverything/components/common';
+import {
+    usePageTree,
+    useCalendarHeatmap,
+} from '@toeverything/components/layout';
+
+const styles = style9.create({
+    ligoButton: {
+        textTransform: 'none',
+    },
+    newPage: {
+        color: '#B6C7D3',
+        width: '26px',
+        fontSize: '18px',
+        textAlign: 'center',
+        cursor: 'pointer',
+    },
+});
+
+export type CollapsiblePageTreeProps = {
+    title?: string;
+    initialOpen?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+
+export function CollapsiblePageTree(props: CollapsiblePageTreeProps) {
+    const { className, style, children, title, initialOpen = true } = props;
+    const navigate = useNavigate();
+    const { workspace_id, page_id } = useParams();
+
+    const { handleAddPage } = usePageTree();
+    const { addPageToday } = useCalendarHeatmap();
+
+    const [open, setOpen] = useState(initialOpen);
+
+    const create_page = useCallback(async () => {
+        if (page_id) {
+            const newPage = await services.api.editorBlock.create({
+                workspace: workspace_id,
+                type: 'page' as const,
+            });
+
+            await handleAddPage(newPage.id);
+            addPageToday();
+
+            navigate(`/${workspace_id}/${newPage.id}`);
+        }
+    }, [addPageToday, handleAddPage, navigate, page_id, workspace_id]);
+
+    const [newPageBtnVisible, setNewPageBtnVisible] = useState<boolean>(false);
+
+    return (
+        <>
+            <Box
+                sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    paddingRight: 1,
+                }}
+                onMouseEnter={() => setNewPageBtnVisible(true)}
+                onMouseLeave={() => setNewPageBtnVisible(false)}
+            >
+                <Button
+                    startIcon={
+                        open ? <ArrowDropDownIcon /> : <ArrowRightIcon />
+                    }
+                    onClick={() => setOpen(prev => !prev)}
+                    sx={{ color: '#566B7D', textTransform: 'none' }}
+                    className={clsx(styles('ligoButton'), className)}
+                    style={style}
+                    disableElevation
+                    disableRipple
+                >
+                    {title}
+                </Button>
+
+                {newPageBtnVisible && (
+                    <div
+                        onClick={create_page}
+                        className={clsx(styles('newPage'), className)}
+                    >
+                        +
+                    </div>
+                )}
+            </Box>
+            {children ? (
+                <Collapse in={open} timeout="auto" unmountOnExit>
+                    {children}
+                </Collapse>
+            ) : null}
+        </>
+    );
+}
+
+export default CollapsiblePageTree;
diff --git a/apps/ligo-virgo/src/pages/workspace/docs/index.spec.tsx b/apps/ligo-virgo/src/pages/workspace/docs/index.spec.tsx
new file mode 100644
index 000000000..e17c51392
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/workspace/docs/index.spec.tsx
@@ -0,0 +1,18 @@
+/* eslint-disable filename-rules/match */
+import { render } from '@testing-library/react';
+
+import { Page } from './index';
+
+describe('App', () => {
+    it('should render successfully', () => {
+        const { baseElement } = render(<Page workspace="default" />);
+
+        expect(baseElement).toBeTruthy();
+    });
+
+    it('should have a greeting as the title', () => {
+        const { getByText } = render(<Page workspace="default" />);
+
+        expect(getByText(/Welcome ligo-virgo/gi)).toBeTruthy();
+    });
+});
diff --git a/apps/ligo-virgo/src/pages/workspace/docs/index.tsx b/apps/ligo-virgo/src/pages/workspace/docs/index.tsx
new file mode 100644
index 000000000..b24816952
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/workspace/docs/index.tsx
@@ -0,0 +1,176 @@
+/* eslint-disable filename-rules/match */
+import { useEffect } from 'react';
+import { useParams } from 'react-router';
+import {
+    MuiBox as Box,
+    MuiCircularProgress as CircularProgress,
+    MuiDivider as Divider,
+    styled,
+} from '@toeverything/components/ui';
+import { AffineEditor } from '@toeverything/components/affine-editor';
+import {
+    CalendarHeatmap,
+    PageTree,
+    Activities,
+} from '@toeverything/components/layout';
+import { CollapsibleTitle } from '@toeverything/components/common';
+import {
+    useShowSpaceSidebar,
+    useUserAndSpaces,
+} from '@toeverything/datasource/state';
+import { services } from '@toeverything/datasource/db-service';
+
+import { WorkspaceName } from './workspace-name';
+import { CollapsiblePageTree } from './collapsible-page-tree';
+import TemplatesPortal from './templates-portal';
+import { useFlag } from '@toeverything/datasource/feature-flags';
+
+type PageProps = {
+    workspace: string;
+};
+
+export function Page(props: PageProps) {
+    const { page_id } = useParams();
+    const { showSpaceSidebar, fixedDisplay, setSpaceSidebarVisible } =
+        useShowSpaceSidebar();
+    const { user } = useUserAndSpaces();
+    const templatesPortalFlag = useFlag('BooleanTemplatesPortal', false);
+    const dailyNotesFlag = useFlag('BooleanDailyNotes', false);
+
+    useEffect(() => {
+        if (!user?.id || !page_id) return;
+        const updateRecentPages = async () => {
+            // TODO: deal with it temporarily
+            await services.api.editorBlock.getWorkspaceDbBlock(
+                props.workspace,
+                {
+                    userId: user.id,
+                }
+            );
+
+            await services.api.userConfig.addRecentPage(
+                props.workspace,
+                user.id,
+                page_id
+            );
+            await services.api.editorBlock.clearUndoRedo(props.workspace);
+        };
+        update_recent_pages();
+    }, [user, props.workspace, page_id]);
+
+    return (
+        <LigoApp>
+            <LigoLeftContainer style={{ width: fixedDisplay ? '300px' : 0 }}>
+                <WorkspaceSidebar
+                    style={{
+                        opacity: !showSpaceSidebar && !fixedDisplay ? 0 : 1,
+                        transform:
+                            !showSpaceSidebar && !fixedDisplay
+                                ? 'translateX(-270px)'
+                                : 'translateX(0px)',
+                    }}
+                    onMouseEnter={() => setSpaceSidebarVisible(true)}
+                    onMouseLeave={() => setSpaceSidebarVisible(false)}
+                >
+                    <WorkspaceName />
+                    <Divider light={true} sx={{ my: 1, margin: '6px 0px' }} />
+                    <WorkspaceSidebarContent>
+                        <div>
+                            {templatesPortalFlag && <TemplatesPortal />}
+                            {dailyNotesFlag && (
+                                <div>
+                                    <CollapsibleTitle title="Daily Notes">
+                                        <CalendarHeatmap />
+                                    </CollapsibleTitle>
+                                </div>
+                            )}
+                            <div>
+                                <CollapsibleTitle
+                                    title="Activities"
+                                    initialOpen={false}
+                                >
+                                    <Activities></Activities>
+                                </CollapsibleTitle>
+                            </div>
+                            <div>
+                                <CollapsiblePageTree title="Page Tree">
+                                    {page_id ? <PageTree /> : null}
+                                </CollapsiblePageTree>
+                            </div>
+                        </div>
+                    </WorkspaceSidebarContent>
+                </WorkspaceSidebar>
+            </LigoLeftContainer>
+            <LigoRightContainer>
+                <LigoEditorOuterContainer>
+                    {page_id ? (
+                        <AffineEditor
+                            workspace={props.workspace}
+                            rootBlockId={page_id}
+                        />
+                    ) : (
+                        <Box
+                            sx={{
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                width: '100%',
+                            }}
+                        >
+                            <CircularProgress />
+                        </Box>
+                    )}
+                </LigoEditorOuterContainer>
+            </LigoRightContainer>
+        </LigoApp>
+    );
+}
+
+const LigoApp = styled('div')({
+    width: '100vw',
+    position: 'relative',
+    display: 'flex',
+    flex: '1 1 0%',
+    backgroundColor: 'white',
+    margin: '10px 0',
+});
+
+const LigoRightContainer = styled('div')({
+    position: 'relative',
+    width: '100%',
+    flex: 'auto',
+});
+
+const LigoEditorOuterContainer = styled('div')({
+    position: 'absolute',
+    height: '100%',
+    width: '100%',
+    overflowX: 'hidden',
+    overflowY: 'hidden',
+});
+
+const LigoLeftContainer = styled('div')({
+    flex: '0 0 auto',
+});
+
+const WorkspaceSidebar = styled('div')(({ hidden }) => ({
+    position: 'absolute',
+    zIndex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    width: 300,
+    minWidth: 300,
+    height: '100%',
+    borderRadius: '0px 10px 10px 0px',
+    boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    backgroundColor: '#FFFFFF',
+    transitionProperty: 'left',
+    transitionDuration: '0.35s',
+    transitionTimingFunction: 'ease',
+    padding: '16px 12px',
+}));
+
+const WorkspaceSidebarContent = styled('div')({
+    flex: 'auto',
+    overflow: 'hidden auto',
+});
diff --git a/apps/ligo-virgo/src/pages/workspace/docs/quick-find-portal.tsx b/apps/ligo-virgo/src/pages/workspace/docs/quick-find-portal.tsx
new file mode 100644
index 000000000..cb7f85f6d
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/workspace/docs/quick-find-portal.tsx
@@ -0,0 +1,39 @@
+import { styled } from '@toeverything/components/ui';
+
+import SearchIcon from '@mui/icons-material/Search';
+
+const handle_search = () => {
+    //@ts-ignore
+    virgo.plugins.plugins['search'].renderSearch();
+};
+const QuickFindPortalContainer = styled('div')({
+    position: 'relative',
+    marginLeft: '10px',
+    height: '22px',
+    lineHeight: '22px',
+    width: '220px',
+    borderRadius: '8px',
+    color: '#4c6275',
+    fontSize: '14px',
+    paddingLeft: '20px',
+    cursor: 'pointer',
+    ':hover': {
+        backgroundColor: '#ccc',
+    },
+    '.shortcutIcon': {
+        position: 'absolute',
+        top: '3px',
+        left: '0px',
+        fontSize: '16px!important',
+    },
+});
+
+function QuickFindPortal() {
+    return (
+        <QuickFindPortalContainer onClick={handle_search}>
+            <SearchIcon className="shortcutIcon" /> Quick Find
+        </QuickFindPortalContainer>
+    );
+}
+
+export default QuickFindPortal;
diff --git a/apps/ligo-virgo/src/pages/workspace/docs/templates-portal.tsx b/apps/ligo-virgo/src/pages/workspace/docs/templates-portal.tsx
new file mode 100644
index 000000000..237f47758
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/workspace/docs/templates-portal.tsx
@@ -0,0 +1,90 @@
+import {
+    styled,
+    MuiBox as Box,
+    MuiModal as Modal,
+} from '@toeverything/components/ui';
+
+import * as React from 'react';
+import { Templates } from '../../templates';
+import StarIcon from '@mui/icons-material/Star';
+import { useNavigate } from 'react-router';
+import { AsyncBlock } from '@toeverything/framework/virgo';
+import { createEditor } from '@toeverything/components/affine-editor';
+const TemplatePortalContainer = styled('div')({
+    position: 'relative',
+    marginLeft: '10px',
+    height: '22px',
+    lineHeight: '22px',
+    width: '220px',
+    borderRadius: '8px',
+    color: '#4c6275',
+    fontSize: '14px',
+    paddingLeft: '20px',
+    cursor: 'pointer',
+    ':hover': {
+        backgroundColor: '#ccc',
+    },
+    '.shortcutIcon': {
+        position: 'absolute',
+        top: '3px',
+        left: '0px',
+        fontSize: '16px!important',
+    },
+});
+
+const style = {
+    position: 'absolute',
+    top: '40%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '80%',
+    height: '70%',
+    boxShadow: 0,
+    p: 0,
+};
+const maskStyle = {
+    background: 'rgba(0,0,0,0.5)',
+    width: '100%',
+    height: '100%',
+    position: 'fixed',
+};
+function TemplatesPortal() {
+    const [open, set_open] = React.useState(false);
+    const handle_open = () => set_open(true);
+    const handle_close = () => set_open(false);
+    const navigate = useNavigate();
+
+    const get_default_workspace_id = () => {
+        return window.location.pathname.split('/')[1];
+    };
+    const handleClickUseThisTemplate = () => {
+        const block_editor = createEditor(get_default_workspace_id());
+        //@ts-ignore
+        block_editor.plugins
+            .getPlugin('page-toolbar')
+            //@ts-ignore 泛型处理
+            .addDailyNote()
+            .then((new_page: AsyncBlock) => {
+                handle_close();
+                const new_state =
+                    `/${get_default_workspace_id()}/` + new_page.id;
+                navigate(new_state);
+            });
+    };
+    return (
+        <>
+            <TemplatePortalContainer onClick={handle_open}>
+                <StarIcon className="shortcutIcon" /> Templates
+            </TemplatePortalContainer>
+            <Modal open={open} onClose={handle_close}>
+                <Box sx={style}>
+                    <Templates
+                        handleClickUseThisTemplate={handleClickUseThisTemplate}
+                    />
+                </Box>
+            </Modal>
+        </>
+    );
+}
+
+export default TemplatesPortal;
diff --git a/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx b/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx
new file mode 100644
index 000000000..dd898a860
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx
@@ -0,0 +1,168 @@
+import {
+    MuiButton as Button,
+    MuiSwitch as Switch,
+    styled,
+    MuiOutlinedInput as OutlinedInput,
+} from '@toeverything/components/ui';
+import { LogoIcon } from '@toeverything/components/icons';
+import {
+    useUserAndSpaces,
+    useShowSpaceSidebar,
+} from '@toeverything/datasource/state';
+import { useCallback, useEffect, useState } from 'react';
+import { services } from '@toeverything/datasource/db-service';
+
+const WorkspaceContainer = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    minHeight: 60,
+    padding: '12px 0px',
+    color: '#566B7D',
+});
+const LeftContainer = styled('div')({
+    flex: 'auto',
+    display: 'flex',
+});
+
+const LogoContainer = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 24,
+    minWidth: 24,
+});
+
+const StyledLogoIcon = styled(LogoIcon)(({ theme }) => {
+    return {
+        color: theme.affine.palette.primary,
+        width: '16px !important',
+        height: '16px !important',
+    };
+});
+
+const WorkspaceNameContainer = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    flex: 'auto',
+    width: '100px',
+    marginRight: '10px',
+    input: {
+        padding: '5px 10px',
+    },
+    span: {
+        width: '100%',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    },
+});
+
+const WorkspaceReNameContainer = styled('div')({
+    marginRight: '10px',
+    input: {
+        padding: '5px 10px',
+    },
+});
+
+const ToggleDisplayContainer = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: 12,
+    color: '#3E6FDB',
+    padding: 6,
+    minWidth: 64,
+});
+
+export const WorkspaceName = () => {
+    const { currentSpaceId } = useUserAndSpaces();
+    const { fixedDisplay, toggleSpaceSidebar } = useShowSpaceSidebar();
+    const [inRename, setInRename] = useState(false);
+    const [workspaceName, setWorkspaceName] = useState('');
+
+    const fetchWorkspaceName = useCallback(async () => {
+        if (!currentSpaceId) {
+            return;
+        }
+
+        const name = await services.api.userConfig.getWorkspaceName(
+            currentSpaceId
+        );
+        setWorkspaceName(name);
+    }, [currentSpaceId]);
+
+    useEffect(() => {
+        fetchWorkspaceName();
+    }, [currentSpaceId]);
+
+    useEffect(() => {
+        let unobserve: () => void;
+        const observe = async () => {
+            unobserve = await services.api.userConfig.observe(
+                { workspace: currentSpaceId },
+                () => {
+                    fetchWorkspaceName();
+                }
+            );
+        };
+        observe();
+
+        return () => {
+            unobserve?.();
+        };
+    }, [currentSpaceId, fetchWorkspaceName]);
+
+    const handleKeyDown = useCallback(
+        (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+            if (e.key === 'Enter') {
+                e.stopPropagation();
+                e.preventDefault();
+                setInRename(false);
+            }
+        },
+        []
+    );
+    const handleChange = useCallback(
+        (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+            services.api.userConfig.setWorkspaceName(
+                currentSpaceId,
+                e.currentTarget.value
+            );
+        },
+        []
+    );
+
+    return (
+        <WorkspaceContainer>
+            <LeftContainer>
+                <LogoContainer>
+                    <StyledLogoIcon />
+                </LogoContainer>
+
+                {inRename ? (
+                    <WorkspaceReNameContainer>
+                        <OutlinedInput
+                            value={workspaceName}
+                            onChange={handleChange}
+                            onKeyDown={handleKeyDown}
+                            onMouseLeave={() => setInRename(false)}
+                        />
+                    </WorkspaceReNameContainer>
+                ) : (
+                    <WorkspaceNameContainer>
+                        <span onClick={() => setInRename(true)}>
+                            {workspaceName}
+                        </span>
+                    </WorkspaceNameContainer>
+                )}
+            </LeftContainer>
+            <ToggleDisplayContainer>
+                <span>{fixedDisplay ? 'ON' : 'OFF'}</span>
+                <Switch
+                    checked={fixedDisplay}
+                    onChange={toggleSpaceSidebar}
+                    size="small"
+                />
+            </ToggleDisplayContainer>
+        </WorkspaceContainer>
+    );
+};
diff --git a/apps/ligo-virgo/src/pages/workspace/index.tsx b/apps/ligo-virgo/src/pages/workspace/index.tsx
new file mode 100644
index 000000000..a2e5c9297
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/workspace/index.tsx
@@ -0,0 +1,41 @@
+/* eslint-disable filename-rules/match */
+import { Routes, Route, useParams, Navigate } from 'react-router';
+
+import { useUserAndSpaces } from '@toeverything/datasource/state';
+
+import { WorkspaceRootContainer } from './Container';
+import { Page } from './docs';
+import { WorkspaceHome } from './Home';
+import Labels from './labels';
+import Pages from './pages';
+import { Whiteboard } from './Whiteboard';
+
+export function WorkspaceContainer() {
+    const { workspace_id } = useParams();
+    const { user, currentSpaceId } = useUserAndSpaces();
+
+    if (
+        user &&
+        ![currentSpaceId, 'affine2vin277tcmafwq'].includes(workspace_id)
+    ) {
+        // return <Navigate to={`/${currentSpaceId}`} replace={true} />;
+    }
+
+    return (
+        <Routes>
+            <Route path="/" element={<WorkspaceRootContainer />}>
+                <Route path="/labels" element={<Labels />} />
+                <Route path="/pages" element={<Pages />} />
+                <Route
+                    path="/:page_id/whiteboard"
+                    element={<Whiteboard workspace={workspace_id} />}
+                />
+                <Route
+                    path="/:page_id"
+                    element={<Page workspace={workspace_id} />}
+                />
+                <Route path="/" element={<WorkspaceHome />} />
+            </Route>
+        </Routes>
+    );
+}
diff --git a/apps/ligo-virgo/src/pages/workspace/labels/index.tsx b/apps/ligo-virgo/src/pages/workspace/labels/index.tsx
new file mode 100644
index 000000000..aad88dc3e
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/workspace/labels/index.tsx
@@ -0,0 +1,3 @@
+export default function WorkspaceLabels() {
+    return <span>WorkspaceLabels</span>;
+}
diff --git a/apps/ligo-virgo/src/pages/workspace/pages/index.tsx b/apps/ligo-virgo/src/pages/workspace/pages/index.tsx
new file mode 100644
index 000000000..b1ee12e53
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/workspace/pages/index.tsx
@@ -0,0 +1,3 @@
+export default function WorkspacePages() {
+    return <span>WorkspacePages</span>;
+}
diff --git a/apps/ligo-virgo/src/pages/workspace/whiteboard/index.bak.tsx b/apps/ligo-virgo/src/pages/workspace/whiteboard/index.bak.tsx
new file mode 100644
index 000000000..fed971448
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/workspace/whiteboard/index.bak.tsx
@@ -0,0 +1,53 @@
+// import { FC, useMemo, useState } from 'react';
+// import { useParams } from 'react-router-dom';
+// import { TDPage } from '@toeverything/framework/whiteboard';
+// import {
+//     AffineWhiteboard,
+//     WhiteboardMeta,
+//     AffineEditorShape
+// } from '@toeverything/components/affine-whiteboard';
+
+// interface EditorShapeProps {
+//     blockIds: string | string[];
+//     point: [number, number];
+// }
+
+// const createEditorShape = (props: EditorShapeProps): AffineEditorShape => {
+//     const block_ids = Array.isArray(props.blockIds)
+//         ? props.blockIds
+//         : [props.blockIds];
+//     return {
+//         id: block_ids.join('_'),
+//         label: '',
+//         childIndex: 1,
+//         name: 'affine_editor',
+//         parentId: 'page',
+//         point: props.point,
+//         rotation: 0,
+//         size: [400, 200],
+//         style: {
+//             color: 'black',
+//             size: 'small',
+//             isFilled: false,
+//             dash: 'draw',
+//             scale: 1
+//         } as any,
+//         type: 'affineEditor',
+//         blockIds: block_ids
+//     };
+// };
+
+// const Whiteboard: FC = () => {
+//     const { workspace_id, page_id } = useParams();
+//     const [shapes, set_shapes] = useState<TDPage['shapes']>({});
+//     const meta = useMemo<WhiteboardMeta>(() => {
+//         return {
+//             workspace: workspace_id,
+//             rootBlockId: page_id
+//         };
+//     }, [workspace_id, page_id]);
+
+//     return page_id ? <AffineWhiteboard meta={meta} shapes={shapes} /> : null;
+// };
+
+// export default Whiteboard;
diff --git a/apps/ligo-virgo/src/polyfills.ts b/apps/ligo-virgo/src/polyfills.ts
new file mode 100644
index 000000000..2adf3d05b
--- /dev/null
+++ b/apps/ligo-virgo/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';
diff --git a/apps/ligo-virgo/src/styles.css b/apps/ligo-virgo/src/styles.css
new file mode 100644
index 000000000..aaf71841a
--- /dev/null
+++ b/apps/ligo-virgo/src/styles.css
@@ -0,0 +1,285 @@
+/* resset.dev • v5.0.2 */
+
+/* # =================================================================
+   # Global selectors
+   # ================================================================= */
+
+html {
+    box-sizing: border-box;
+    -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
+    word-break: normal;
+    -moz-tab-size: 4;
+    tab-size: 4;
+    overflow: hidden;
+    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Tahoma,
+        PingFang SC, Microsoft Yahei, Arial, Hiragino Sans GB, sans-serif,
+        Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+*,
+::before,
+::after {
+    background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
+    box-sizing: inherit;
+}
+
+::before,
+::after {
+    text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
+    vertical-align: inherit;
+}
+
+* {
+    padding: 0; /* Reset `padding` and `margin` of all elements */
+    margin: 0;
+}
+
+/* # =================================================================
+     # General elements
+     # ================================================================= */
+
+hr {
+    overflow: visible; /* Show the overflow in Edge and IE */
+    height: 0; /* Add the correct box sizing in Firefox */
+    color: inherit; /* Correct border color in Firefox. */
+}
+
+details,
+main {
+    display: block; /* Render the `main` element consistently in IE. */
+}
+
+summary {
+    display: list-item; /* Add the correct display in all browsers */
+}
+
+small {
+    font-size: 80%; /* Set font-size to 80% in `small` elements */
+}
+
+[hidden] {
+    display: none; /* Add the correct display in IE */
+}
+
+abbr[title] {
+    border-bottom: none; /* Remove the bottom border in Chrome 57 */
+    /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
+    text-decoration: underline;
+    text-decoration: underline dotted;
+}
+
+a {
+    background-color: transparent; /* Remove the gray background on active links in IE 10 */
+}
+
+a:active,
+a:hover {
+    outline-width: 0; /* Remove the outline when hovering in all browsers */
+}
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, monospace; /* Specify the font family of code elements */
+}
+
+pre {
+    font-size: 1em; /* Correct the odd `em` font sizing in all browsers */
+}
+
+b,
+strong {
+    font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */
+}
+
+/* https://gist.github.com/unruthless/413930 */
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+table {
+    border-color: inherit; /* Correct border color in all Chrome, Edge, and Safari. */
+    text-indent: 0; /* Remove text indentation in Chrome, Edge, and Safari */
+}
+
+iframe {
+    border-style: none;
+}
+
+/* # =================================================================
+     # Forms
+     # ================================================================= */
+
+input {
+    border-radius: 0;
+}
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+    height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */
+}
+
+[type='search'] {
+    -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
+    outline-offset: -2px; /* Correct the outline style in Safari */
+}
+
+[type='search']::-webkit-search-decoration {
+    -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS */
+}
+
+textarea {
+    overflow: auto; /* Internet Explorer 11+ */
+    resize: vertical; /* Specify textarea resizability */
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    font: inherit; /* Specify font inheritance of form elements */
+}
+
+optgroup {
+    font-weight: bold; /* Restore the font weight unset by the previous rule */
+}
+
+button {
+    overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
+}
+
+button,
+select {
+    text-transform: none; /* Firefox 40+, Internet Explorer 11- */
+}
+
+/* Apply cursor pointer to button elements */
+button,
+[type='button'],
+[type='reset'],
+[type='submit'],
+[role='button'] {
+    cursor: pointer;
+}
+
+/* Remove inner padding and border in Firefox 4+ */
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
+
+/* Replace focus style removed in the border reset above */
+button:-moz-focusring,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+    outline: 1px dotted ButtonText;
+}
+
+button,
+  html [type='button'], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
+  [type='reset'],
+  [type='submit'] {
+    -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
+}
+
+/* Remove the default button styling in all browsers */
+button,
+input,
+select,
+textarea {
+    background-color: transparent;
+    border-style: none;
+}
+
+a:focus,
+button:focus,
+input:focus,
+select:focus,
+textarea:focus {
+    outline-width: 0;
+}
+
+/* Style select like a standard input */
+select {
+    -moz-appearance: none; /* Firefox 36+ */
+    -webkit-appearance: none; /* Chrome 41+ */
+}
+
+select::-ms-expand {
+    display: none; /* Internet Explorer 11+ */
+}
+
+select::-ms-value {
+    color: currentColor; /* Internet Explorer 11+ */
+}
+
+legend {
+    border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
+    color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
+    display: table; /* Correct the text wrapping in Edge and IE */
+    max-width: 100%; /* Correct the text wrapping in Edge and IE */
+    white-space: normal; /* Correct the text wrapping in Edge and IE */
+    max-width: 100%; /* Correct the text wrapping in Edge 18- and IE */
+}
+
+::-webkit-file-upload-button {
+    /* Correct the inability to style clickable types in iOS and Safari */
+    -webkit-appearance: button;
+    color: inherit;
+    font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
+}
+
+/* Replace pointer cursor in disabled elements */
+[disabled] {
+    cursor: default;
+}
+
+/* # =================================================================
+     # Specify media element style
+     # ================================================================= */
+
+img {
+    border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
+}
+
+/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
+progress {
+    vertical-align: baseline;
+}
+
+/* # =================================================================
+     # Accessibility
+     # ================================================================= */
+
+/* Specify the progress cursor of updating elements */
+[aria-busy='true'] {
+    cursor: progress;
+}
+
+/* Specify the pointer cursor of trigger elements */
+[aria-controls] {
+    cursor: pointer;
+}
+
+/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
+[aria-disabled='true'] {
+    cursor: default;
+}
diff --git a/apps/ligo-virgo/src/template.html b/apps/ligo-virgo/src/template.html
new file mode 100644
index 000000000..d0c4a84e0
--- /dev/null
+++ b/apps/ligo-virgo/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>
diff --git a/apps/ligo-virgo/tsconfig.app.json b/apps/ligo-virgo/tsconfig.app.json
new file mode 100644
index 000000000..6d3f1cc6f
--- /dev/null
+++ b/apps/ligo-virgo/tsconfig.app.json
@@ -0,0 +1,22 @@
+{
+    "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": [
+        "**/*.spec.ts",
+        "**/*.test.ts",
+        "**/*.spec.tsx",
+        "**/*.test.tsx",
+        "**/*.spec.js",
+        "**/*.test.js",
+        "**/*.spec.jsx",
+        "**/*.test.jsx"
+    ],
+    "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/apps/ligo-virgo/tsconfig.json b/apps/ligo-virgo/tsconfig.json
new file mode 100644
index 000000000..2105d4475
--- /dev/null
+++ b/apps/ligo-virgo/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        // "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "noImplicitAny": false
+        // "strictNullChecks": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.app.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/apps/ligo-virgo/tsconfig.spec.json b/apps/ligo-virgo/tsconfig.spec.json
new file mode 100644
index 000000000..c37f7eb08
--- /dev/null
+++ b/apps/ligo-virgo/tsconfig.spec.json
@@ -0,0 +1,23 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../dist/out-tsc",
+        "module": "commonjs",
+        "types": ["jest", "node"]
+    },
+    "include": [
+        "**/*.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"
+    ]
+}
diff --git a/apps/ligo-virgo/webpack.config.js b/apps/ligo-virgo/webpack.config.js
new file mode 100644
index 000000000..4d7500c60
--- /dev/null
+++ b/apps/ligo-virgo/webpack.config.js
@@ -0,0 +1,197 @@
+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,
+                    },
+                    auth: {
+                        test: /[\\/]node_modules[\\/](@authing|@?firebase)/,
+                        name: 'auth',
+                        priority: -5,
+                        chunks: 'all',
+                    },
+                    whiteboard: {
+                        test: /(libs\/components\/board-|[\\/]node_modules[\\/]@tldraw)/,
+                        name: 'whiteboard',
+                        priority: -7,
+                        chunks: 'all',
+                    },
+                    editor: {
+                        test: /(libs\/framework\/(ligo|virgo|editor)|[\\/]node_modules[\\/](@codemirror|@lezer|slate))/,
+                        name: 'editor',
+                        priority: -8,
+                        chunks: 'all',
+                    },
+                    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')],
+            ];
+        }
+    }
+
+    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;
+};
diff --git a/babel.config.json b/babel.config.json
new file mode 100644
index 000000000..af8aa6b9d
--- /dev/null
+++ b/babel.config.json
@@ -0,0 +1,3 @@
+{
+    "babelrcRoots": ["*"]
+}
diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md
new file mode 100644
index 000000000..dbf692845
--- /dev/null
+++ b/docs/CONTRIBUTING.md
@@ -0,0 +1,13 @@
+# AFFiNE CONTRIBUTING
+
+Contributions are **welcome** and will be fully **credited**.
+
+## **Requirements**
+
+If the project maintainer has any additional requirements, you will find them listed here.
+
+-   Code Style [AFFiNE Code Guideline](./affine-code-guideline.md)
+-   Git Rules [AFFiNE Git Guideline ](./affine-git-guideline.md)
+-   • **One pull request per feature** - If you want to do more than one thing, send multiple pull requests.
+
+**Happy coding**!
diff --git a/docs/affine-code-guideline.md b/docs/affine-code-guideline.md
new file mode 100644
index 000000000..d98ba3cb5
--- /dev/null
+++ b/docs/affine-code-guideline.md
@@ -0,0 +1,22 @@
+# AFFiNE Code Guideline
+
+| Item                                            | Specification                                       | Example                                                                               |
+| ----------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| [Packages/Paths]()                              | aaa-bbb-ccc                                         | ligo-virgo, editor-todo                                                               |
+| [.tsx]()                                        | PascalCase                                          | AddPage.tsx                                                                           |
+| [.ts]()                                         | kebab-case                                          | file-export.ts                                                                        |
+| [.json]()                                       | kebab-case                                          | file-export.ts                                                                        |
+| [Domain File]()                                 | OpenRules                                           | xx._d.ts_ &#124; _tsconfig.xx_.json &#124; xx.spec .ts &#124; .env.xx &#124; yy-ds.ts |
+| [Types]()                                       | UpperCamelCase                                      | WebEvent                                                                              |
+| [Enum variants]()                               | UpperCamelCase                                      | Status{ Todo,Completed }                                                              |
+| [Functions]()                                   | lowerCamelCase                                      |                                                                                       |
+| [React Funciton Compoment]()                    | UpperCamelCase                                      | function DocShare(){}                                                                 |
+| [React HOC]()                                   | UpperCamelCase                                      | function BussinessText(){}                                                            |
+| [Function Parameter]()                          | lowerCamelCase                                      | function searchByIdOrName(idOrname){ }                                                |
+| [Methods for external access]()                 | lowerCamelCase                                      | public sayHello(){ };                                                                 |
+| [Externally Accessible Variables (Variables)]() | lowerCamelCase                                      | animal.sleepCount                                                                     |
+| [General constructors]()                        | constructor or with_more_details                    |                                                                                       |
+| [Local variables]()                             | lowerCamelCase                                      | const tableCollection = [];                                                           |
+| [Statics]()                                     | SCREAMING_SNAKE_CASE                                | GLOBAL_MESSAGES                                                                       |
+| [Constants](b)                                  | SCREAMING_SNAKE_CASE                                | GLOBAL_CONFIG                                                                         |
+| [Type parameters]()                             | UpperCamelCase , usually a single capital letter: T | let a: Animal = new Animal()                                                          |
diff --git a/docs/affine-git-guideline.md b/docs/affine-git-guideline.md
new file mode 100644
index 000000000..adbc3b94c
--- /dev/null
+++ b/docs/affine-git-guideline.md
@@ -0,0 +1,91 @@
+# AFFiNE Git Guideline
+
+# 1. Git Branch Name
+
+-   fix/
+-   feat/
+
+# 2. **Commit message guidelines**
+
+Affine uses [semantic-release](https://github.com/semantic-release/semantic-release) for automated version management and package publishing. For that to work, commitmessages need to be in the right format.
+
+### **Atomic commits**
+
+If possible, make [atomic commits](https://en.wikipedia.org/wiki/Atomic_commit), which means:
+
+-   a commit should contain exactly one self-contained functional change
+-   a functional change should be contained in exactly one commit
+-   a commit should not create an inconsistent state (such as test errors, linting errors, partial fix, feature with documentation etc...)
+
+A complex feature can be broken down into multiple commits as long as each one keep a consistent state and consist of a self-contained change.
+
+### **Commit message format**
+
+Each commit message consists of a **header**, a **body** and a **footer**. The header has a special format that includes a **type**, a **scope** and a **subject**:
+
+`<type>(<scope>): <subject>
+<BLANK LINE>
+
+<body>
+<BLANK LINE>
+<footer>`
+
+The **header** is mandatory and the **scope** of the header is optional.
+
+The **footer** can contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages).
+
+### **Revert**
+
+If the commit reverts a previous commit, it should begin with `revert:` , followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
+
+### **Type**
+
+The type must be one of the following:
+| Type | Description |
+| ----------- | ----------- |
+| build | Changes that affect the build system or external | dependencies (example scopes: gulp, broccoli, npm) |
+| ci | Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs) |
+| docs | Documentation only changes |
+| feat | A new feature |
+| fix | A bug fix |
+| perf | A code change that improves performance |
+| refactor | A code change that neither fixes a bug nor adds a feature |
+| style | Changes that do not affect the meaning of the code(white-space, formatting, missing semi-colons, etc) |
+| test | Adding missing tests or correcting existing tests |
+| chore | Changes to the build process or auxiliary tools | |
+
+### **Subject**
+
+The subject contains succinct description of the change:
+
+-   use the imperative, present tense: "change" not "changed" nor "changes"
+-   don't capitalize first letter
+-   no dot (.) at the end
+
+### **Body**
+
+Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes". The body should include the motivation for the change and contrast this with previous behavior.
+
+### **Footer**
+
+The footer should contain any information about **Breaking Changes** and is also the place to reference GitHub issues that this commit **Closes**.
+
+**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
+
+### **Examples**
+
+`fix(pencil): stop graphite breaking when too much pressure applied`
+
+``feat(pencil): add 'graphiteWidth' option`
+
+Fix #42`
+
+`perf(pencil): remove graphiteWidth option`
+
+BREAKING CHANGE: The graphiteWidth option has been removed.
+
+The default graphite width of 10mm is always used for performance reasons.`
+
+# 3. tracking-your-work-with-issues
+
+[https://docs.github.com/en/issues/tracking-your-work-with-issues/about-issues](https://docs.github.com/en/issues/tracking-your-work-with-issues/about-issues)
diff --git a/docs/affine-icons-user-guide.md b/docs/affine-icons-user-guide.md
new file mode 100644
index 000000000..70e9742af
--- /dev/null
+++ b/docs/affine-icons-user-guide.md
@@ -0,0 +1,7 @@
+## Affine Icons
+
+> Abundant and colorful icon resource for free free use
+
+Website: [http://localhost:4200/tools/icons](http://localhost:4200/tools/icons)
+
+Figma: [Figma Affine Icons](https://www.figma.com/file/7pyx5gMz6CN0qSRADmScQ7/AFFINE?node-id=665%3A1734)
diff --git a/docs/how-to-add-ui-component-in-affine.md b/docs/how-to-add-ui-component-in-affine.md
new file mode 100644
index 000000000..dc7ea52c5
--- /dev/null
+++ b/docs/how-to-add-ui-component-in-affine.md
@@ -0,0 +1,53 @@
+# Tutorial
+
+Affine defines a new component development specification in Figma, extends Affine UI Components based on MUI BASE and MUI SYSTEM, and supplements as needed https://github.com/toeverything/AFFiNE/tree/master/libs/components/ui , eg `src/libs/components/ui/src/button/base-button.ts`
+
+```jsx
+import ButtonUnstyled, {
+    buttonUnstyledClasses,
+} from '@mui/base/ButtonUnstyled';
+import { styled } from '../styled';
+
+/* eslint-disable @typescript-eslint/naming-convention */
+const blue = {
+    500: '#007FFF',
+    600: '#0072E5',
+    700: '#0059B2',
+};
+/* eslint-enable @typescript-eslint/naming-convention */
+
+export const BaseButton = styled(ButtonUnstyled)`
+    font-family: IBM Plex Sans, sans-serif;
+    font-weight: bold;
+    font-size: 0.875rem;
+    background-color: ${blue[500]};
+    border-radius: 8px;
+    padding: 4px 8px;
+    color: white;
+    transition: all 150ms ease;
+    cursor: pointer;
+    border: none;
+
+    &:hover {
+        background-color: ${blue[600]};
+    }
+
+    &.${buttonUnstyledClasses.active} {
+        background-color: ${blue[700]};
+    }
+
+    &.${buttonUnstyledClasses.focusVisible} {
+        box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+        outline: none;
+    }
+
+    &.${buttonUnstyledClasses.disabled} {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+`;
+```
+
+```jsx
+export { BaseButton } from './base-button';
+```
diff --git a/docs/how-to-auto-download-figma-assets-in-affine.md b/docs/how-to-auto-download-figma-assets-in-affine.md
new file mode 100644
index 000000000..be0794b66
--- /dev/null
+++ b/docs/how-to-auto-download-figma-assets-in-affine.md
@@ -0,0 +1,13 @@
+Create or edit the `.env.local` file in the project root directory, add `FIGMA_TOKEN`, you can refer to Generate ACCESS_TOKEN: https://www.figma.com/developers/api#access-tokens
+
+```
+FIGMA_TOKEN=your-figma-token
+```
+
+Execute the command `nx run components-icons:figmaRes` to synchronize figma resources
+
+figma icon resource address: https://www.figma.com/file/7pyx5gMz6CN0qSRADmScQ7/AFFINE?node-id=665%3A1734
+
+### Icon Supplementary Style
+
+Some icons downloaded directly have incorrect styles. You can add supplementary styles in `tools/executors/figmaRes/patch-styles.js`. The key is the name of the icon kebab-case.
diff --git a/docs/how-to-customize-rollup-config.md b/docs/how-to-customize-rollup-config.md
new file mode 100644
index 000000000..f9362afb6
--- /dev/null
+++ b/docs/how-to-customize-rollup-config.md
@@ -0,0 +1,3 @@
+## Single Component Rollup Config
+
+If styles are used in a Component, `rollupConfig` under `project.json` needs to be modified to `libs/rollup.config.cjs`
diff --git a/docs/how-to-write-css-in-affine.md b/docs/how-to-write-css-in-affine.md
new file mode 100644
index 000000000..bf84ef99c
--- /dev/null
+++ b/docs/how-to-write-css-in-affine.md
@@ -0,0 +1,103 @@
+[toc]
+
+# Tutorial
+
+1. MUI styled
+
+```jsx
+import type { MouseEventHandler, ReactNode } from 'react';
+import { styled } from '@toeverything/components/ui';
+
+const CardContainer = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: '#fff',
+    border: '1px solid #E2E7ED',
+    borderRadius: '5px',
+});
+
+const CardContent = styled('div')({
+    margin: '23px 52px 24px 19px',
+});
+
+const CardActions = styled('div')({
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    height: '29px',
+    background: 'rgba(152, 172, 189, 0.1)',
+    borderRadius: '0px 0px 5px 5px',
+    padding: '6px 0 6px 19px',
+    fontSize: '12px',
+    fontWeight: '300',
+    color: '#98ACBD',
+});
+
+const PlusIcon = styled('div')({
+    marginRight: '9px',
+    fontWeight: '500',
+    lineHeight: 0,
+    '::before': {
+        content: '"+"',
+    },
+});
+
+export const Card = ({
+    children,
+    onAddItem,
+}: {
+    children?: ReactNode,
+    onAddItem?: MouseEventHandler<HTMLDivElement>,
+}) => {
+    return (
+        <CardContainer>
+            <CardContent>{children}</CardContent>
+            <CardActions onClick={onAddItem}>
+                <PlusIcon />
+                Add item
+            </CardActions>
+        </CardContainer>
+    );
+};
+```
+
+## 2. import `*.scss`
+
+```jsx
+import styles from './tree-item.module.scss';
+
+export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
+    () => {
+
+        return (
+            <li
+                ref={wrapperRef}
+                className={cx(
+                    styles['Wrapper'],
+                    clone && styles['clone'],
+                    ghost && styles['ghost'],
+                    indicator && styles['indicator']
+                )}
+                style={
+                    {
+                        '--spacing': `${indentationWidth * depth}px`
+                    } as CSSProperties
+                }
+                {...props}
+            >
+
+            </li>
+        );
+    }
+);
+
+
+```
+
+## 3. import `*.css`,
+
+```js
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/lib/codemirror';
+```
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 000000000..5d3b9ff97
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,5 @@
+const { getJestProjects } = require('@nrwl/jest');
+
+module.exports = {
+    projects: getJestProjects(),
+};
diff --git a/jest.preset.js b/jest.preset.js
new file mode 100644
index 000000000..c93ed9dc7
--- /dev/null
+++ b/jest.preset.js
@@ -0,0 +1,3 @@
+const nxPreset = require('@nrwl/jest/preset');
+
+module.exports = { ...nxPreset };
diff --git a/libs/.gitkeep b/libs/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/libs/components/account/.babelrc b/libs/components/account/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/components/account/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/components/account/.eslintrc.json b/libs/components/account/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/components/account/.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": {}
+        }
+    ]
+}
diff --git a/libs/components/account/README.md b/libs/components/account/README.md
new file mode 100644
index 000000000..ca22ad566
--- /dev/null
+++ b/libs/components/account/README.md
@@ -0,0 +1,7 @@
+# components-account
+
+-   components about user accounts
+
+## Running unit tests
+
+Run `nx test components-account` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/components/account/jest.config.js b/libs/components/account/jest.config.js
new file mode 100644
index 000000000..1007e552a
--- /dev/null
+++ b/libs/components/account/jest.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+    displayName: 'components-account',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/components/account',
+};
diff --git a/libs/components/account/package.json b/libs/components/account/package.json
new file mode 100644
index 000000000..a2d828937
--- /dev/null
+++ b/libs/components/account/package.json
@@ -0,0 +1,12 @@
+{
+    "name": "@toeverything/components/account",
+    "version": "0.0.1",
+    "license": "MIT",
+    "dependencies": {
+        "@authing/react-ui-components": "^3.1.23",
+        "@emotion/styled": "^11.9.3"
+    },
+    "devDependencies": {
+        "authing-js-sdk": "^4.23.33"
+    }
+}
diff --git a/libs/components/account/project.json b/libs/components/account/project.json
new file mode 100644
index 000000000..4913d6649
--- /dev/null
+++ b/libs/components/account/project.json
@@ -0,0 +1,44 @@
+{
+    "sourceRoot": "libs/components/account/src",
+    "projectType": "library",
+    "tags": ["components"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/components/account",
+                "tsConfig": "libs/components/account/tsconfig.lib.json",
+                "project": "libs/components/account/package.json",
+                "entryFile": "libs/components/account/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "libs/rollup.config.cjs",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/components/account/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/components/account/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/components/account"],
+            "options": {
+                "jestConfig": "libs/components/account/jest.config.js",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/components/account/src/error.tsx b/libs/components/account/src/error.tsx
new file mode 100644
index 000000000..615901632
--- /dev/null
+++ b/libs/components/account/src/error.tsx
@@ -0,0 +1,221 @@
+import { Link } from 'react-router-dom';
+import style9 from 'style9';
+import { getAuth, signOut } from 'firebase/auth';
+
+import { MuiBox as Box } from '@toeverything/components/ui';
+import { keyframes } from '@emotion/react';
+import { LOGOUT_LOCAL_STORAGE, LOGOUT_COOKIES } from '@toeverything/utils';
+
+const styles = style9.create({
+    container: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+        height: 'calc( 100vh - 64px )',
+    },
+});
+
+type ErrorProps = {
+    title?: string;
+    subTitle?: string;
+    action1Text?: string;
+    action1Route?: string;
+    action2Text?: string;
+    action2Route?: string;
+    clearOnClick?: boolean;
+};
+
+const floatAnimation = keyframes`
+100% { transform: translateY(20px) }
+`;
+
+/**
+ * Exception related pages
+ */
+export function Error({
+    title = 'Page Not Found',
+    subTitle,
+    action1Text,
+    action1Route,
+    action2Text,
+    action2Route,
+    clearOnClick = false,
+}: ErrorProps) {
+    return (
+        <Box
+            sx={{
+                height: '100vh',
+                backgroundColor: '#2F3242',
+                position: 'relative',
+                '& svg': {
+                    position: 'absolute',
+                    top: '50%',
+                    left: '45%',
+                    marginTop: '-250px',
+                    marginLeft: '-400px',
+                },
+                '& .message-box': {
+                    height: '200px',
+                    minWidth: '380px',
+                    position: 'absolute',
+                    top: '50%',
+                    left: '45%',
+                    marginTop: '-100px',
+                    marginLeft: '0',
+                    color: '#FFF',
+                    // font-family: Roboto;
+                    // font-weight: 300;
+                },
+                '& .message-box h1': {
+                    fontSize: '60px',
+                    lineHeight: '46px',
+                    marginBottom: '40px',
+                    color: '#FFF',
+                },
+                '& .message-box h3': {
+                    fontSize: '32px',
+                    fontWeight: 400,
+                    lineHeight: '32px',
+                    color: '#FFF',
+                },
+                '& .buttons-con .action-link-wrap': {
+                    marginTop: '40px',
+                },
+                '& .buttons-con .action-link-wrap a': {
+                    backgroundColor: '#3E6FDB',
+                    padding: ' 8px 25px',
+                    borderRadius: '4px',
+                    color: '#FFF',
+                    fontWeight: 'bold',
+                    // font-size: 14px;
+                    transition: 'all 0.3s linear',
+                    cursor: 'pointer',
+                    textDecoration: 'none',
+                    marginRight: '10px',
+                },
+                '& .buttons-con .action-link-wrap a:hover': {
+                    backgroundColor: '#5A5C6C',
+                    color: '#fff',
+                },
+                '& #Polygon-1': {
+                    animation: 'float 1s infinite ease-in-out alternate',
+                },
+                '& #Polygon-2': {
+                    animation: `${floatAnimation} 1s infinite ease-in-out alternate`,
+                    animationDelay: '0.2s',
+                },
+                '& #Polygon-3': {
+                    animation: `${floatAnimation} 1s infinite ease-in-out alternate`,
+                    animationDelay: '0.4s',
+                },
+                '& #Polygon-4': {
+                    animation: `${floatAnimation} 1s infinite ease-in-out alternate`,
+                    animationDelay: '0.6s',
+                },
+                '& #Polygon-5': {
+                    animation: `${floatAnimation} 1s infinite ease-in-out alternate`,
+                    animationDelay: '0.8s',
+                },
+            }}
+        >
+            <div className="root">
+                <svg
+                    width="380px"
+                    height="500px"
+                    viewBox="0 0 837 1045"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <g
+                        id="Page-1"
+                        stroke="none"
+                        strokeWidth="1"
+                        fill="none"
+                        fillRule="evenodd"
+                        // sketch:type="MSPage"
+                    >
+                        <path
+                            d="M353,9 L626.664028,170 L626.664028,487 L353,642 L79.3359724,487 L79.3359724,170 L353,9 Z"
+                            id="Polygon-1"
+                            stroke="#007FB2"
+                            strokeWidth="6"
+                            // sketch:type="MSShapeGroup"
+                        />
+                        <path
+                            d="M78.5,529 L147,569.186414 L147,648.311216 L78.5,687 L10,648.311216 L10,569.186414 L78.5,529 Z"
+                            id="Polygon-2"
+                            stroke="#EF4A5B"
+                            strokeWidth="6"
+                            // sketch:type="MSShapeGroup"
+                        />
+                        <path
+                            d="M773,186 L827,217.538705 L827,279.636651 L773,310 L719,279.636651 L719,217.538705 L773,186 Z"
+                            id="Polygon-3"
+                            stroke="#795D9C"
+                            strokeWidth="6"
+                            // sketch:type="MSShapeGroup"
+                        />
+                        <path
+                            d="M639,529 L773,607.846761 L773,763.091627 L639,839 L505,763.091627 L505,607.846761 L639,529 Z"
+                            id="Polygon-4"
+                            stroke="#F2773F"
+                            strokeWidth="6"
+                            // sketch:type="MSShapeGroup"
+                        />
+                        <path
+                            d="M281,801 L383,861.025276 L383,979.21169 L281,1037 L179,979.21169 L179,861.025276 L281,801 Z"
+                            id="Polygon-5"
+                            stroke="#36B455"
+                            strokeWidth="6"
+                            // sketch:type="MSShapeGroup"
+                        />
+                    </g>
+                </svg>
+                <div className="message-box">
+                    <h1>{title}</h1>
+                    {subTitle ? <h3>{subTitle}</h3> : null}
+                    <div className="buttons-con">
+                        <div className="action-link-wrap">
+                            {/* {action1Text ? (
+                                <Link
+                                    to={action1Route || '/login'}
+                                    className="link-button link-back-button"
+                                    onClick={event => {
+                                        if (clearOnClick) {
+                                            event.preventDefault();
+                                            LOGOUT_LOCAL_STORAGE.forEach(name =>
+                                                localStorage.removeItem(name)
+                                            );
+                                            document.cookie =
+                                                LOGOUT_COOKIES.map(
+                                                    name =>
+                                                        name +
+                                                        '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'
+                                                ).join(' ');
+
+                                            signOut(getAuth());
+
+                                            window.location.href =
+                                                action1Route || '/login';
+                                        }
+                                    }}
+                                >
+                                    {action1Text}
+                                </Link>
+                            ) : null} */}
+                            {/* {action2Text ? (
+                                <Link
+                                    to={action2Route || '/login'}
+                                    className="link-button link-back-button"
+                                >
+                                    {action2Text}
+                                </Link>
+                            ) : null} */}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Box>
+    );
+}
diff --git a/libs/components/account/src/index.ts b/libs/components/account/src/index.ts
new file mode 100644
index 000000000..5a69b2964
--- /dev/null
+++ b/libs/components/account/src/index.ts
@@ -0,0 +1,3 @@
+export { Login } from './login';
+export { Error } from './error';
+export { PageLoading } from './loading';
diff --git a/libs/components/account/src/loading.tsx b/libs/components/account/src/loading.tsx
new file mode 100644
index 000000000..095d82d9d
--- /dev/null
+++ b/libs/components/account/src/loading.tsx
@@ -0,0 +1,23 @@
+import style9 from 'style9';
+import { MuiCircularProgress as CircularProgress } from '@toeverything/components/ui';
+
+const styles = style9.create({
+    container: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+        height: 'calc( 100vh - 64px )',
+    },
+});
+
+/**
+ * Loading components occupy the entire page
+ */
+export function PageLoading() {
+    return (
+        <div className={styles('container')}>
+            <CircularProgress />
+        </div>
+    );
+}
diff --git a/libs/components/account/src/login/authing.tsx b/libs/components/account/src/login/authing.tsx
new file mode 100644
index 000000000..e4a1b01ce
--- /dev/null
+++ b/libs/components/account/src/login/authing.tsx
@@ -0,0 +1,78 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import style9 from 'style9';
+import { MuiBox as Box } from '@toeverything/components/ui';
+import { Guard as AuthingGuard } from '@authing/react-ui-components';
+import type { User as AuthingUser } from 'authing-js-sdk';
+
+import {
+    AUTHING_APP_ID_US,
+    AUTHING_APP_ID_CN,
+    AUTHING_APP_HOST_US,
+} from '@toeverything/utils';
+import { useUserAndSpaces } from '@toeverything/datasource/state';
+
+import '@authing/react-ui-components/lib/index.min.css';
+
+export function Authing() {
+    const navigate = useNavigate();
+    const { handleUserLoginSuccess, currentSpaceId } = useUserAndSpaces();
+
+    /**
+     * Refer to Authing documentation https://docs.authing.cn/v2/reference/guard/react.html
+     */
+    const handle_login_success = useCallback(
+        async (authingUser: AuthingUser) => {
+            handleUserLoginSuccess(authingUser);
+        },
+        [handleUserLoginSuccess]
+    );
+
+    const authing_config = useMemo(() => {
+        return {
+            host: AUTHING_APP_HOST_US,
+        };
+    }, []);
+
+    useEffect(() => {
+        if (currentSpaceId) {
+            const targetRoute = `/${currentSpaceId}`;
+            navigate(targetRoute);
+        }
+    }, [currentSpaceId, navigate]);
+
+    return (
+        <div className={styles('loginContainer')}>
+            <Box
+                sx={{
+                    '.g2-view-header': {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    },
+                    '.authing-g2-render-module': {
+                        boxShadow: '0 2px 10px 0 rgb(57 106 255 / 20%)',
+                    },
+                }}
+            >
+                <AuthingGuard
+                    onLogin={handle_login_success}
+                    appId={AUTHING_APP_ID_US}
+                    config={authing_config}
+                />
+                <Box sx={{ height: '56px' }} />
+            </Box>
+        </div>
+    );
+}
+
+const styles = style9.create({
+    loginContainer: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+        height: 'calc( 100vh - 64px )',
+    },
+});
diff --git a/libs/components/account/src/login/firebase.tsx b/libs/components/account/src/login/firebase.tsx
new file mode 100644
index 000000000..3637757dc
--- /dev/null
+++ b/libs/components/account/src/login/firebase.tsx
@@ -0,0 +1,135 @@
+/* eslint-disable filename-rules/match */
+import { useCallback, useMemo } from 'react';
+import { initializeApp } from 'firebase/app';
+import { Error } from './../error';
+import {
+    GoogleAuthProvider,
+    getAuth,
+    signInWithPopup,
+    browserLocalPersistence,
+} from 'firebase/auth';
+
+import { LogoImg } from '@toeverything/components/common';
+import {
+    MuiButton,
+    MuiBox,
+    MuiTypography,
+    MuiContainer,
+    MuiGrid,
+} from '@toeverything/components/ui';
+
+const _firebaseConfig = {
+    apiKey: 'AIzaSyD7A_VyGaKTXsPqtga9IbwrEsbWWc4rH3Y',
+    authDomain: 'login.affine.pro',
+    projectId: 'affine-346417',
+    storageBucket: 'affine-346417.appspot.com',
+    messagingSenderId: '690608236388',
+    appId: '1:690608236388:web:ccc7ee97b59a4cf2677c71',
+};
+
+const _app = initializeApp(_firebaseConfig);
+
+const GoogleIcon = () => (
+    <svg width="24px" height="24px" viewBox="0 0 118 120">
+        <g
+            id="Page-1"
+            stroke="none"
+            stroke-width="1"
+            fill="none"
+            fill-rule="evenodd"
+        >
+            <g id="Artboard-1" transform="translate(-332.000000, -639.000000)">
+                <g
+                    id="google_buttn"
+                    transform="translate(332.000000, 639.000000)"
+                >
+                    <g id="logo_googleg_48dp">
+                        <path
+                            d="M117.6,61.3636364 C117.6,57.1090909 117.218182,53.0181818 116.509091,49.0909091 L60,49.0909091 L60,72.3 L92.2909091,72.3 C90.9,79.8 86.6727273,86.1545455 80.3181818,90.4090909 L80.3181818,105.463636 L99.7090909,105.463636 C111.054545,95.0181818 117.6,79.6363636 117.6,61.3636364 L117.6,61.3636364 Z"
+                            id="Shape"
+                            fill="#4285F4"
+                        />
+                        <path
+                            d="M60,120 C76.2,120 89.7818182,114.627273 99.7090909,105.463636 L80.3181818,90.4090909 C74.9454545,94.0090909 68.0727273,96.1363636 60,96.1363636 C44.3727273,96.1363636 31.1454545,85.5818182 26.4272727,71.4 L6.38181818,71.4 L6.38181818,86.9454545 C16.2545455,106.554545 36.5454545,120 60,120 L60,120 Z"
+                            id="Shape"
+                            fill="#34A853"
+                        />
+                        <path
+                            d="M26.4272727,71.4 C25.2272727,67.8 24.5454545,63.9545455 24.5454545,60 C24.5454545,56.0454545 25.2272727,52.2 26.4272727,48.6 L26.4272727,33.0545455 L6.38181818,33.0545455 C2.31818182,41.1545455 0,50.3181818 0,60 C0,69.6818182 2.31818182,78.8454545 6.38181818,86.9454545 L26.4272727,71.4 L26.4272727,71.4 Z"
+                            id="Shape"
+                            fill="#FBBC05"
+                        />
+                        <path
+                            d="M60,23.8636364 C68.8090909,23.8636364 76.7181818,26.8909091 82.9363636,32.8363636 L100.145455,15.6272727 C89.7545455,5.94545455 76.1727273,0 60,0 C36.5454545,0 16.2545455,13.4454545 6.38181818,33.0545455 L26.4272727,48.6 C31.1454545,34.4181818 44.3727273,23.8636364 60,23.8636364 L60,23.8636364 Z"
+                            id="Shape"
+                            fill="#EA4335"
+                        />
+                        <path
+                            d="M0,0 L120,0 L120,120 L0,120 L0,0 Z"
+                            id="Shape"
+                        />
+                    </g>
+                </g>
+            </g>
+        </g>
+    </svg>
+);
+
+export const Firebase = () => {
+    const [auth, provider] = useMemo(() => {
+        const auth = getAuth(_app);
+        auth.setPersistence(browserLocalPersistence);
+        const provider = new GoogleAuthProvider();
+        return [auth, provider];
+    }, []);
+
+    const handleAuth = useCallback(() => {
+        signInWithPopup(auth, provider).catch(error => {
+            const errorCode = error.code;
+            const errorMessage = error.message;
+            const email = error.customData.email;
+            const credential = GoogleAuthProvider.credentialFromError(error);
+            console.log(errorCode, errorMessage, email, credential);
+        });
+    }, [auth, provider]);
+
+    return (
+        <MuiGrid container>
+            <MuiGrid item xs={8}>
+                <Error
+                    title="Welcome to Affine"
+                    subTitle="blocks of knowledge to power your team"
+                    action1Text="Login &nbsp; or &nbsp; Register"
+                />
+            </MuiGrid>
+
+            <MuiGrid item xs={4}>
+                <MuiBox
+                    onSubmit={handleAuth}
+                    onClick={handleAuth}
+                    style={{
+                        textAlign: 'center',
+                        width: '300px',
+                        margin: '300px  auto 20px auto',
+                    }}
+                    sx={{ mt: 1 }}
+                >
+                    <LogoImg
+                        style={{
+                            width: '100px',
+                        }}
+                    />
+
+                    <MuiButton
+                        variant="outlined"
+                        fullWidth
+                        style={{ textTransform: 'none' }}
+                        startIcon={<GoogleIcon />}
+                    >
+                        Continue with Google
+                    </MuiButton>
+                </MuiBox>
+            </MuiGrid>
+        </MuiGrid>
+    );
+};
diff --git a/libs/components/account/src/login/index.tsx b/libs/components/account/src/login/index.tsx
new file mode 100644
index 000000000..3601d97b9
--- /dev/null
+++ b/libs/components/account/src/login/index.tsx
@@ -0,0 +1,11 @@
+// import { Authing } from './authing';
+import { Firebase } from './firebase';
+
+export function Login() {
+    return (
+        <>
+            {/* <Authing /> */}
+            <Firebase />
+        </>
+    );
+}
diff --git a/libs/components/account/tsconfig.json b/libs/components/account/tsconfig.json
new file mode 100644
index 000000000..dce3dae9a
--- /dev/null
+++ b/libs/components/account/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/components/account/tsconfig.lib.json b/libs/components/account/tsconfig.lib.json
new file mode 100644
index 000000000..0dda33329
--- /dev/null
+++ b/libs/components/account/tsconfig.lib.json
@@ -0,0 +1,22 @@
+{
+    "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": [
+        "**/*.spec.ts",
+        "**/*.test.ts",
+        "**/*.spec.tsx",
+        "**/*.test.tsx",
+        "**/*.spec.js",
+        "**/*.test.js",
+        "**/*.spec.jsx",
+        "**/*.test.jsx"
+    ],
+    "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/libs/components/account/tsconfig.spec.json b/libs/components/account/tsconfig.spec.json
new file mode 100644
index 000000000..ee70363dc
--- /dev/null
+++ b/libs/components/account/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "module": "commonjs",
+        "types": ["jest", "node"]
+    },
+    "include": [
+        "**/*.test.ts",
+        "**/*.spec.ts",
+        "**/*.test.tsx",
+        "**/*.spec.tsx",
+        "**/*.test.js",
+        "**/*.spec.js",
+        "**/*.test.jsx",
+        "**/*.spec.jsx",
+        "**/*.d.ts"
+    ]
+}
diff --git a/libs/components/affine-board/.babelrc b/libs/components/affine-board/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/components/affine-board/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/components/affine-board/.eslintrc.json b/libs/components/affine-board/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/components/affine-board/.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": {}
+        }
+    ]
+}
diff --git a/libs/components/affine-board/README.md b/libs/components/affine-board/README.md
new file mode 100644
index 000000000..ee741cabf
--- /dev/null
+++ b/libs/components/affine-board/README.md
@@ -0,0 +1,7 @@
+# components-affine-board
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test components-affine-board` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/components/affine-board/jest.config.ts b/libs/components/affine-board/jest.config.ts
new file mode 100644
index 000000000..596406b47
--- /dev/null
+++ b/libs/components/affine-board/jest.config.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+    displayName: 'components-affine-board',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/components/affine-board',
+};
diff --git a/libs/components/affine-board/package.json b/libs/components/affine-board/package.json
new file mode 100644
index 000000000..0e542aaef
--- /dev/null
+++ b/libs/components/affine-board/package.json
@@ -0,0 +1,5 @@
+{
+    "name": "@toeverything/components/affine-board",
+    "version": "0.0.1",
+    "license": "MIT"
+}
diff --git a/libs/components/affine-board/project.json b/libs/components/affine-board/project.json
new file mode 100644
index 000000000..850e9803e
--- /dev/null
+++ b/libs/components/affine-board/project.json
@@ -0,0 +1,45 @@
+{
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/components/affine-board/src",
+    "projectType": "library",
+    "tags": ["components"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/components/affine-board",
+                "tsConfig": "libs/components/affine-board/tsconfig.lib.json",
+                "project": "libs/components/affine-board/package.json",
+                "entryFile": "libs/components/affine-board/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "libs/rollup.config.cjs",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/components/affine-board/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/components/affine-board/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/components/affine-board"],
+            "options": {
+                "jestConfig": "libs/components/affine-board/jest.config.ts",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/components/affine-board/src/Board.tsx b/libs/components/affine-board/src/Board.tsx
new file mode 100644
index 000000000..acd3a94f9
--- /dev/null
+++ b/libs/components/affine-board/src/Board.tsx
@@ -0,0 +1,136 @@
+import { useEffect, useState } from 'react';
+import { Tldraw } from '@toeverything/components/board-draw';
+import { tools } from '@toeverything/components/board-tools';
+import { getSession } from '@toeverything/components/board-sessions';
+import * as commands from '@toeverything/components/board-commands';
+import { TldrawApp, deepCopy } from '@toeverything/components/board-state';
+import { TDShapeType } from '@toeverything/components/board-types';
+import { services } from '@toeverything/datasource/db-service';
+import { useShapes } from './hooks';
+import { RecastBlockProvider } from '@toeverything/components/editor-core';
+import { createEditor } from '@toeverything/components/affine-editor';
+import { AsyncBlock, BlockEditor } from '@toeverything/framework/virgo';
+
+interface AffineBoardProps {
+    workspace: string;
+    rootBlockId: string;
+}
+
+const AffineBoard = ({ workspace, rootBlockId }: AffineBoardProps) => {
+    const [app, set_app] = useState<TldrawApp>();
+
+    const [document] = useState(() => {
+        return {
+            ...deepCopy(TldrawApp.default_document),
+            id: workspace,
+            pages: {
+                [rootBlockId]: {
+                    id: rootBlockId,
+                    name: `Page ${rootBlockId}`,
+                    childIndex: 1,
+                    shapes: {},
+                    bindings: {},
+                },
+            },
+            pageStates: {
+                [rootBlockId]: {
+                    id: rootBlockId,
+                    camera: {
+                        point: [0, 0],
+                        zoom: 1,
+                    },
+                    selectedIds: [],
+                },
+            },
+        };
+    });
+
+    const shapes = useShapes(workspace, rootBlockId);
+    useEffect(() => {
+        if (app) {
+            app.replacePageContent(shapes || {}, {}, {});
+        }
+    }, [app, shapes]);
+
+    return (
+        <Tldraw
+            document={document}
+            commands={commands}
+            tools={tools}
+            getSession={getSession}
+            callbacks={{
+                onMount(app) {
+                    set_app(app);
+                },
+                onChangePage(app, shapes, bindings, assets) {
+                    Promise.all(
+                        Object.entries(shapes).map(async ([id, shape]) => {
+                            if (shape === undefined) {
+                                return services.api.editorBlock.delete({
+                                    workspace: workspace,
+                                    id,
+                                });
+                            } else {
+                                let block = (
+                                    await services.api.editorBlock.get({
+                                        workspace: workspace,
+                                        ids: [shape.affineId],
+                                    })
+                                )?.[0];
+                                if (!block) {
+                                    block =
+                                        await services.api.editorBlock.create({
+                                            workspace: workspace,
+                                            parentId:
+                                                app.appState.currentPageId,
+                                            type:
+                                                shape.type ===
+                                                TDShapeType.Editor
+                                                    ? 'group'
+                                                    : 'shape',
+                                        });
+                                }
+                                shape.affineId = block.id;
+                                return services.api.editorBlock.update({
+                                    workspace: shape.workspace,
+                                    id: block.id,
+                                    properties: {
+                                        shapeProps: {
+                                            value: JSON.stringify(shape),
+                                        },
+                                    },
+                                });
+                            }
+                        })
+                    );
+                },
+            }}
+        />
+    );
+};
+
+export const AffineBoardWitchContext = ({
+    workspace,
+    rootBlockId,
+}: AffineBoardProps) => {
+    const [editor, set_editor] = useState<BlockEditor>();
+    useEffect(() => {
+        const inner_editor = createEditor(workspace, true);
+        set_editor(inner_editor);
+        return () => {
+            inner_editor.dispose();
+        };
+    }, [workspace]);
+
+    const [page, set_page] = useState<AsyncBlock>();
+    useEffect(() => {
+        editor?.getBlockById(rootBlockId).then(block => {
+            set_page(block);
+        });
+    }, [editor, rootBlockId]);
+    return page ? (
+        <RecastBlockProvider block={page}>
+            <AffineBoard workspace={workspace} rootBlockId={rootBlockId} />
+        </RecastBlockProvider>
+    ) : null;
+};
diff --git a/libs/components/affine-board/src/hooks/index.ts b/libs/components/affine-board/src/hooks/index.ts
new file mode 100644
index 000000000..cda5da3de
--- /dev/null
+++ b/libs/components/affine-board/src/hooks/index.ts
@@ -0,0 +1 @@
+export * from './use-shapes';
diff --git a/libs/components/affine-board/src/hooks/use-shapes.ts b/libs/components/affine-board/src/hooks/use-shapes.ts
new file mode 100644
index 000000000..8cbca07cc
--- /dev/null
+++ b/libs/components/affine-board/src/hooks/use-shapes.ts
@@ -0,0 +1,73 @@
+import { useEffect, useState } from 'react';
+import { services } from '@toeverything/datasource/db-service';
+import type { ReturnEditorBlock } from '@toeverything/datasource/db-service';
+import type { TDShape } from '@toeverything/components/board-types';
+import { Editor } from '@toeverything/components/board-shapes';
+
+export const useShapes = (workspace: string, rootBlockId: string) => {
+    const [blocks, setBlocks] = useState<ReturnEditorBlock[]>();
+    useEffect(() => {
+        services.api.editorBlock
+            .get({ workspace, ids: [rootBlockId] })
+            .then(async blockData => {
+                const shapes = await Promise.all(
+                    (blockData?.[0]?.children || []).map(async childId => {
+                        const childBlock = (
+                            await services.api.editorBlock.get({
+                                workspace,
+                                ids: [childId],
+                            })
+                        )?.[0];
+                        return childBlock;
+                    })
+                );
+                setBlocks(shapes);
+            });
+        let unobserve: () => void;
+        services.api.editorBlock
+            .observe({ workspace, id: rootBlockId }, async blockData => {
+                const shapes = await Promise.all(
+                    (blockData?.children || []).map(async childId => {
+                        const childBlock = (
+                            await services.api.editorBlock.get({
+                                workspace,
+                                ids: [childId],
+                            })
+                        )?.[0];
+                        return childBlock;
+                    })
+                );
+                setBlocks(shapes);
+            })
+            .then(cb => {
+                unobserve = cb;
+            });
+
+        return () => {
+            unobserve?.();
+        };
+    }, [workspace, rootBlockId]);
+
+    let groupCount = 0;
+
+    return blocks?.reduce((acc, block) => {
+        const shapeProps = block.properties.shapeProps?.value
+            ? JSON.parse(block.properties.shapeProps.value)
+            : {};
+        if (block.type === 'shape') {
+            acc[block.id] = { ...shapeProps, id: block.id };
+        } else {
+            acc[block.id] = Editor.getShape({
+                point: [groupCount * 740, 200],
+                id: block.id,
+                ...shapeProps,
+                affineId: shapeProps.affineId ?? block.id,
+                workspace: block.workspace,
+                rootBlockId: block.id,
+            });
+            groupCount = groupCount + 1;
+        }
+
+        return acc;
+    }, {} as Record<string, TDShape>);
+};
diff --git a/libs/components/affine-board/src/index.ts b/libs/components/affine-board/src/index.ts
new file mode 100644
index 000000000..f50e49fea
--- /dev/null
+++ b/libs/components/affine-board/src/index.ts
@@ -0,0 +1 @@
+export { AffineBoardWitchContext as AffineBoard } from './Board';
diff --git a/libs/components/affine-board/tsconfig.json b/libs/components/affine-board/tsconfig.json
new file mode 100644
index 000000000..dce3dae9a
--- /dev/null
+++ b/libs/components/affine-board/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/components/affine-board/tsconfig.lib.json b/libs/components/affine-board/tsconfig.lib.json
new file mode 100644
index 000000000..6a4378740
--- /dev/null
+++ b/libs/components/affine-board/tsconfig.lib.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"]
+}
diff --git a/libs/components/affine-board/tsconfig.spec.json b/libs/components/affine-board/tsconfig.spec.json
new file mode 100644
index 000000000..24b3ac659
--- /dev/null
+++ b/libs/components/affine-board/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+    "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"
+    ]
+}
diff --git a/libs/components/affine-editor/.babelrc b/libs/components/affine-editor/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/components/affine-editor/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/components/affine-editor/.eslintrc.json b/libs/components/affine-editor/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/components/affine-editor/.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": {}
+        }
+    ]
+}
diff --git a/libs/components/affine-editor/jest.config.js b/libs/components/affine-editor/jest.config.js
new file mode 100644
index 000000000..b3a90e131
--- /dev/null
+++ b/libs/components/affine-editor/jest.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+    displayName: 'components-affine-editor',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/components/affine-editor',
+};
diff --git a/libs/components/affine-editor/package.json b/libs/components/affine-editor/package.json
new file mode 100644
index 000000000..1d2db5b28
--- /dev/null
+++ b/libs/components/affine-editor/package.json
@@ -0,0 +1,5 @@
+{
+    "name": "@toeverything/components/affine-editor",
+    "version": "0.0.1",
+    "license": "MIT"
+}
diff --git a/libs/components/affine-editor/project.json b/libs/components/affine-editor/project.json
new file mode 100644
index 000000000..c47bcd21a
--- /dev/null
+++ b/libs/components/affine-editor/project.json
@@ -0,0 +1,44 @@
+{
+    "sourceRoot": "libs/components/affine-editor/src",
+    "projectType": "library",
+    "tags": ["components:affine-editor"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/components/affine-editor",
+                "tsConfig": "libs/components/affine-editor/tsconfig.lib.json",
+                "project": "libs/components/affine-editor/package.json",
+                "entryFile": "libs/components/affine-editor/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "libs/rollup.config.cjs",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/components/affine-editor/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/components/affine-editor/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/components/affine-editor"],
+            "options": {
+                "jestConfig": "libs/components/affine-editor/jest.config.js",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/components/affine-editor/src/Editor.tsx b/libs/components/affine-editor/src/Editor.tsx
new file mode 100644
index 000000000..0f0136493
--- /dev/null
+++ b/libs/components/affine-editor/src/Editor.tsx
@@ -0,0 +1,63 @@
+import { useEffect, useRef } from 'react';
+
+import { RenderRoot, RenderBlock } from '@toeverything/components/editor-core';
+import { useCurrentEditors } from '@toeverything/datasource/state';
+
+import { createEditor } from './create-editor';
+
+interface AffineEditorProps {
+    workspace: string;
+    rootBlockId: string;
+    /**
+     * Whether to show the visual blank at the bottom of the article
+     */
+    scrollBlank?: boolean;
+
+    isWhiteboard?: boolean;
+}
+
+function useConstant<T>(init: () => T): T {
+    const ref = useRef<T>(null);
+    ref.current ??= init();
+
+    return ref.current;
+}
+
+export const AffineEditor = ({
+    workspace,
+    rootBlockId,
+    scrollBlank = true,
+    isWhiteboard,
+}: AffineEditorProps) => {
+    const { setCurrentEditors } = useCurrentEditors();
+    const editor = useConstant(() => {
+        const editor = createEditor(workspace, isWhiteboard);
+
+        // @ts-ignore
+        globalThis.virgo = editor;
+        return editor;
+    });
+
+    useEffect(() => {
+        if (rootBlockId) {
+            editor.setRootBlockId(rootBlockId);
+        } else {
+            console.error('rootBlockId for page is required. ');
+        }
+    }, [editor, rootBlockId]);
+
+    useEffect(() => {
+        if (!rootBlockId) return;
+        setCurrentEditors(prev => ({ ...prev, [rootBlockId]: editor }));
+    }, [editor, rootBlockId, setCurrentEditors]);
+
+    return (
+        <RenderRoot
+            editor={editor}
+            editorElement={AffineEditor as any}
+            scrollBlank={scrollBlank}
+        >
+            <RenderBlock blockId={rootBlockId} />
+        </RenderRoot>
+    );
+};
diff --git a/libs/components/affine-editor/src/create-editor.ts b/libs/components/affine-editor/src/create-editor.ts
new file mode 100644
index 000000000..74e8e458a
--- /dev/null
+++ b/libs/components/affine-editor/src/create-editor.ts
@@ -0,0 +1,63 @@
+import { BlockEditor } from '@toeverything/framework/virgo';
+import {
+    PageBlock,
+    RefLinkBlock,
+    TextBlock,
+    Heading1Block,
+    Heading2Block,
+    Heading3Block,
+    QuoteBlock,
+    TodoBlock,
+    CodeBlock,
+    // TocBlock,
+    FileBlock,
+    ImageBlock,
+    DividerBlock,
+    CalloutBlock,
+    YoutubeBlock,
+    FigmaBlock,
+    GroupBlock,
+    EmbedLinkBlock,
+    BulletBlock,
+    NumberedBlock,
+    GridBlock,
+    GridItemBlock,
+    GroupDividerBlock,
+} from '@toeverything/components/editor-blocks';
+import { Protocol } from '@toeverything/datasource/db-service';
+import { plugins } from '@toeverything/components/editor-plugins';
+
+export const createEditor = (workspace: string, isWhiteboard?: boolean) => {
+    const blockEditor = new BlockEditor({
+        workspace,
+        views: {
+            [Protocol.Block.Type.page]: new PageBlock(),
+            [Protocol.Block.Type.reference]: new RefLinkBlock(),
+            [Protocol.Block.Type.text]: new TextBlock(),
+            [Protocol.Block.Type.heading1]: new Heading1Block(),
+            [Protocol.Block.Type.heading2]: new Heading2Block(),
+            [Protocol.Block.Type.heading3]: new Heading3Block(),
+            [Protocol.Block.Type.quote]: new QuoteBlock(),
+            [Protocol.Block.Type.todo]: new TodoBlock(),
+            [Protocol.Block.Type.code]: new CodeBlock(),
+            // [Protocol.Block.Type.toc]: new TocBlock(),
+            [Protocol.Block.Type.file]: new FileBlock(),
+            [Protocol.Block.Type.image]: new ImageBlock(),
+            [Protocol.Block.Type.divider]: new DividerBlock(),
+            [Protocol.Block.Type.callout]: new CalloutBlock(),
+            [Protocol.Block.Type.youtube]: new YoutubeBlock(),
+            [Protocol.Block.Type.figma]: new FigmaBlock(),
+            [Protocol.Block.Type.group]: new GroupBlock(),
+            [Protocol.Block.Type.embedLink]: new EmbedLinkBlock(),
+            [Protocol.Block.Type.numbered]: new NumberedBlock(),
+            [Protocol.Block.Type.bullet]: new BulletBlock(),
+            [Protocol.Block.Type.grid]: new GridBlock(),
+            [Protocol.Block.Type.gridItem]: new GridItemBlock(),
+            [Protocol.Block.Type.groupDivider]: new GroupDividerBlock(),
+        },
+        plugins,
+        isWhiteboard,
+    });
+
+    return blockEditor;
+};
diff --git a/libs/components/affine-editor/src/index.ts b/libs/components/affine-editor/src/index.ts
new file mode 100644
index 000000000..728c60c41
--- /dev/null
+++ b/libs/components/affine-editor/src/index.ts
@@ -0,0 +1,2 @@
+export { AffineEditor } from './Editor';
+export { createEditor } from './create-editor';
diff --git a/libs/components/affine-editor/tsconfig.json b/libs/components/affine-editor/tsconfig.json
new file mode 100644
index 000000000..dce3dae9a
--- /dev/null
+++ b/libs/components/affine-editor/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/components/affine-editor/tsconfig.lib.json b/libs/components/affine-editor/tsconfig.lib.json
new file mode 100644
index 000000000..0dda33329
--- /dev/null
+++ b/libs/components/affine-editor/tsconfig.lib.json
@@ -0,0 +1,22 @@
+{
+    "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": [
+        "**/*.spec.ts",
+        "**/*.test.ts",
+        "**/*.spec.tsx",
+        "**/*.test.tsx",
+        "**/*.spec.js",
+        "**/*.test.js",
+        "**/*.spec.jsx",
+        "**/*.test.jsx"
+    ],
+    "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/libs/components/affine-editor/tsconfig.spec.json b/libs/components/affine-editor/tsconfig.spec.json
new file mode 100644
index 000000000..ee70363dc
--- /dev/null
+++ b/libs/components/affine-editor/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "module": "commonjs",
+        "types": ["jest", "node"]
+    },
+    "include": [
+        "**/*.test.ts",
+        "**/*.spec.ts",
+        "**/*.test.tsx",
+        "**/*.spec.tsx",
+        "**/*.test.js",
+        "**/*.spec.js",
+        "**/*.test.jsx",
+        "**/*.spec.jsx",
+        "**/*.d.ts"
+    ]
+}
diff --git a/libs/components/board-commands/.babelrc b/libs/components/board-commands/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/components/board-commands/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/components/board-commands/.eslintrc.json b/libs/components/board-commands/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/components/board-commands/.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": {}
+        }
+    ]
+}
diff --git a/libs/components/board-commands/README.md b/libs/components/board-commands/README.md
new file mode 100644
index 000000000..4b4c75d72
--- /dev/null
+++ b/libs/components/board-commands/README.md
@@ -0,0 +1,7 @@
+# components-board-commands
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test components-board-commands` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/components/board-commands/jest.config.ts b/libs/components/board-commands/jest.config.ts
new file mode 100644
index 000000000..124fa9d90
--- /dev/null
+++ b/libs/components/board-commands/jest.config.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+    displayName: 'components-board-commands',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/components/board-commands',
+};
diff --git a/libs/components/board-commands/package.json b/libs/components/board-commands/package.json
new file mode 100644
index 000000000..bc5c66d45
--- /dev/null
+++ b/libs/components/board-commands/package.json
@@ -0,0 +1,10 @@
+{
+    "name": "@toeverything/components/board-commands",
+    "version": "0.0.1",
+    "license": "MIT",
+    "dependencies": {
+        "@tldraw/core": "^1.12.0",
+        "@tldraw/intersect": "^1.7.1",
+        "@tldraw/vec": "^1.7.0"
+    }
+}
diff --git a/libs/components/board-commands/project.json b/libs/components/board-commands/project.json
new file mode 100644
index 000000000..111c84137
--- /dev/null
+++ b/libs/components/board-commands/project.json
@@ -0,0 +1,45 @@
+{
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/components/board-commands/src",
+    "projectType": "library",
+    "tags": ["components"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/components/board-commands",
+                "tsConfig": "libs/components/board-commands/tsconfig.lib.json",
+                "project": "libs/components/board-commands/package.json",
+                "entryFile": "libs/components/board-commands/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "libs/rollup.config.cjs",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/components/board-commands/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/components/board-commands/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/components/board-commands"],
+            "options": {
+                "jestConfig": "libs/components/board-commands/jest.config.ts",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/components/board-commands/src/align-shapes.ts b/libs/components/board-commands/src/align-shapes.ts
new file mode 100644
index 000000000..046f0974b
--- /dev/null
+++ b/libs/components/board-commands/src/align-shapes.ts
@@ -0,0 +1,126 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { Vec } from '@tldraw/vec';
+import { Utils } from '@tldraw/core';
+import {
+    AlignType,
+    TldrawCommand,
+    TDShapeType,
+} from '@toeverything/components/board-types';
+import { TLDR } from '@toeverything/components/board-state';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export function alignShapes(
+    app: TldrawApp,
+    ids: string[],
+    type: AlignType
+): TldrawCommand {
+    const { currentPageId } = app;
+
+    const initialShapes = ids.map(id => app.getShape(id));
+
+    const boundsForShapes = initialShapes.map(shape => {
+        return {
+            id: shape.id,
+            point: [...shape.point],
+            bounds: TLDR.get_bounds(shape),
+        };
+    });
+
+    const commonBounds = Utils.getCommonBounds(
+        boundsForShapes.map(({ bounds }) => bounds)
+    );
+
+    const midX = commonBounds.minX + commonBounds.width / 2;
+    const midY = commonBounds.minY + commonBounds.height / 2;
+
+    const deltaMap = Object.fromEntries(
+        boundsForShapes.map(({ id, point, bounds }) => {
+            return [
+                id,
+                {
+                    prev: point,
+                    next: {
+                        [AlignType.CenterVertical]: [
+                            point[0],
+                            midY - bounds.height / 2,
+                        ],
+                        [AlignType.CenterHorizontal]: [
+                            midX - bounds.width / 2,
+                            point[1],
+                        ],
+                        [AlignType.Top]: [point[0], commonBounds.minY],
+                        [AlignType.Bottom]: [
+                            point[0],
+                            commonBounds.maxY - bounds.height,
+                        ],
+                        [AlignType.Left]: [commonBounds.minX, point[1]],
+                        [AlignType.Right]: [
+                            commonBounds.maxX - bounds.width,
+                            point[1],
+                        ],
+                    }[type],
+                },
+            ];
+        })
+    );
+
+    const { before, after } = TLDR.mutate_shapes(
+        app.state,
+        ids,
+        shape => {
+            if (!deltaMap[shape.id]) return shape;
+            return { point: deltaMap[shape.id].next };
+        },
+        currentPageId
+    );
+
+    initialShapes.forEach(shape => {
+        if (shape.type === TDShapeType.Group) {
+            const delta = Vec.sub(
+                after[shape.id].point!,
+                before[shape.id].point!
+            );
+
+            shape.children.forEach(id => {
+                const child = app.getShape(id);
+                before[child.id] = { point: child.point };
+                after[child.id] = { point: Vec.add(child.point, delta) };
+            });
+
+            delete before[shape.id];
+            delete after[shape.id];
+        }
+    });
+
+    return {
+        id: 'align',
+        before: {
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes: before,
+                    },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: ids,
+                    },
+                },
+            },
+        },
+        after: {
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes: after,
+                    },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: ids,
+                    },
+                },
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/change-page.ts b/libs/components/board-commands/src/change-page.ts
new file mode 100644
index 000000000..1ebeac50d
--- /dev/null
+++ b/libs/components/board-commands/src/change-page.ts
@@ -0,0 +1,18 @@
+import type { TldrawCommand } from '@toeverything/components/board-types';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export function changePage(app: TldrawApp, pageId: string): TldrawCommand {
+    return {
+        id: 'change_page',
+        before: {
+            appState: {
+                currentPageId: app.currentPageId,
+            },
+        },
+        after: {
+            appState: {
+                currentPageId: pageId,
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/create-page.ts b/libs/components/board-commands/src/create-page.ts
new file mode 100644
index 000000000..97bd47108
--- /dev/null
+++ b/libs/components/board-commands/src/create-page.ts
@@ -0,0 +1,71 @@
+import type {
+    TldrawCommand,
+    TDPage,
+} from '@toeverything/components/board-types';
+import { Utils, TLPageState } from '@tldraw/core';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export function createPage(
+    app: TldrawApp,
+    center: number[],
+    pageId = Utils.uniqueId()
+): TldrawCommand {
+    const { currentPageId } = app;
+
+    const topPage = Object.values(app.state.document.pages).sort(
+        (a, b) => (b.childIndex || 0) - (a.childIndex || 0)
+    )[0];
+
+    const nextChildIndex = topPage?.childIndex ? topPage?.childIndex + 1 : 1;
+
+    // TODO: Iterate the name better
+    const nextName = `New Page`;
+
+    const page: TDPage = {
+        id: pageId,
+        name: nextName,
+        childIndex: nextChildIndex,
+        shapes: {},
+        bindings: {},
+    };
+
+    const pageState: TLPageState = {
+        id: pageId,
+        selectedIds: [],
+        camera: { point: center, zoom: 1 },
+        editingId: undefined,
+        bindingId: undefined,
+        hoveredId: undefined,
+        pointedId: undefined,
+    };
+
+    return {
+        id: 'create_page',
+        before: {
+            appState: {
+                currentPageId,
+            },
+            document: {
+                pages: {
+                    [pageId]: undefined,
+                },
+                pageStates: {
+                    [pageId]: undefined,
+                },
+            },
+        },
+        after: {
+            appState: {
+                currentPageId: page.id,
+            },
+            document: {
+                pages: {
+                    [pageId]: page,
+                },
+                pageStates: {
+                    [pageId]: pageState,
+                },
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/create-shapes.ts b/libs/components/board-commands/src/create-shapes.ts
new file mode 100644
index 000000000..eaa5b9de6
--- /dev/null
+++ b/libs/components/board-commands/src/create-shapes.ts
@@ -0,0 +1,65 @@
+import type {
+    Patch,
+    TDShape,
+    TldrawCommand,
+    TDBinding,
+} from '@toeverything/components/board-types';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export function createShapes(
+    app: TldrawApp,
+    shapes: TDShape[],
+    bindings: TDBinding[] = []
+): TldrawCommand {
+    const { currentPageId } = app;
+
+    const beforeShapes: Record<string, Patch<TDShape> | undefined> = {};
+    const afterShapes: Record<string, Patch<TDShape> | undefined> = {};
+
+    shapes.forEach(shape => {
+        beforeShapes[shape.id] = undefined;
+        afterShapes[shape.id] = shape;
+    });
+
+    const beforeBindings: Record<string, Patch<TDBinding> | undefined> = {};
+    const afterBindings: Record<string, Patch<TDBinding> | undefined> = {};
+
+    bindings.forEach(binding => {
+        beforeBindings[binding.id] = undefined;
+        afterBindings[binding.id] = binding;
+    });
+
+    return {
+        id: 'create',
+        before: {
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes: beforeShapes,
+                        bindings: beforeBindings,
+                    },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: [...app.selectedIds],
+                    },
+                },
+            },
+        },
+        after: {
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes: afterShapes,
+                        bindings: afterBindings,
+                    },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: shapes.map(shape => shape.id),
+                    },
+                },
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/delete-page.ts b/libs/components/board-commands/src/delete-page.ts
new file mode 100644
index 000000000..ed0b6969d
--- /dev/null
+++ b/libs/components/board-commands/src/delete-page.ts
@@ -0,0 +1,57 @@
+import type { TldrawCommand } from '@toeverything/components/board-types';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export function deletePage(app: TldrawApp, pageId: string): TldrawCommand {
+    const {
+        currentPageId,
+        document: { pages, pageStates },
+    } = app;
+
+    const pagesArr = Object.values(pages).sort(
+        (a, b) => (a.childIndex || 0) - (b.childIndex || 0)
+    );
+
+    const currentIndex = pagesArr.findIndex(page => page.id === pageId);
+
+    let nextCurrentPageId: string;
+
+    if (pageId === currentPageId) {
+        if (currentIndex === pagesArr.length - 1) {
+            nextCurrentPageId = pagesArr[pagesArr.length - 2].id;
+        } else {
+            nextCurrentPageId = pagesArr[currentIndex + 1].id;
+        }
+    } else {
+        nextCurrentPageId = currentPageId;
+    }
+
+    return {
+        id: 'delete_page',
+        before: {
+            appState: {
+                currentPageId: pageId,
+            },
+            document: {
+                pages: {
+                    [pageId]: { ...pages[pageId] },
+                },
+                pageStates: {
+                    [pageId]: { ...pageStates[pageId] },
+                },
+            },
+        },
+        after: {
+            appState: {
+                currentPageId: nextCurrentPageId,
+            },
+            document: {
+                pages: {
+                    [pageId]: undefined,
+                },
+                pageStates: {
+                    [pageId]: undefined,
+                },
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/delete-shapes.ts b/libs/components/board-commands/src/delete-shapes.ts
new file mode 100644
index 000000000..2c5daec09
--- /dev/null
+++ b/libs/components/board-commands/src/delete-shapes.ts
@@ -0,0 +1,66 @@
+import type {
+    TDAsset,
+    TDAssets,
+    TldrawCommand,
+} from '@toeverything/components/board-types';
+import type { TldrawApp } from '@toeverything/components/board-state';
+import { removeShapesFromPage } from './shared/remove-shapes-from-page';
+
+const removeAssetsFromDocument = (assets: TDAssets, idsToRemove: string[]) => {
+    const afterAssets: Record<string, TDAsset | undefined> = { ...assets };
+    idsToRemove.forEach(id => (afterAssets[id] = undefined));
+    return afterAssets;
+};
+
+export function deleteShapes(
+    app: TldrawApp,
+    ids: string[],
+    pageId = app.currentPageId
+): TldrawCommand {
+    const {
+        pageState,
+        selectedIds,
+        document: { assets: beforeAssets },
+    } = app;
+    const { before, after, assetsToRemove } = removeShapesFromPage(
+        app.state,
+        ids,
+        pageId
+    );
+    const afterAssets = removeAssetsFromDocument(beforeAssets, assetsToRemove);
+
+    return {
+        id: 'delete',
+        before: {
+            document: {
+                assets: beforeAssets,
+                pages: {
+                    [pageId]: before,
+                },
+                pageStates: {
+                    [pageId]: { selectedIds: [...app.selectedIds] },
+                },
+            },
+        },
+        after: {
+            document: {
+                assets: afterAssets,
+                pages: {
+                    [pageId]: after,
+                },
+                pageStates: {
+                    [pageId]: {
+                        selectedIds: selectedIds.filter(
+                            id => !ids.includes(id)
+                        ),
+                        hoveredId:
+                            pageState.hoveredId &&
+                            ids.includes(pageState.hoveredId)
+                                ? undefined
+                                : pageState.hoveredId,
+                    },
+                },
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/distribute-shapes.ts b/libs/components/board-commands/src/distribute-shapes.ts
new file mode 100644
index 000000000..7840ed3cf
--- /dev/null
+++ b/libs/components/board-commands/src/distribute-shapes.ts
@@ -0,0 +1,187 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { Utils } from '@tldraw/core';
+import {
+    DistributeType,
+    TDShape,
+    TldrawCommand,
+    TDShapeType,
+} from '@toeverything/components/board-types';
+import { TLDR } from '@toeverything/components/board-state';
+import Vec from '@tldraw/vec';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export function distributeShapes(
+    app: TldrawApp,
+    ids: string[],
+    type: DistributeType
+): TldrawCommand {
+    const { currentPageId } = app;
+
+    const initialShapes = ids.map(id => app.getShape(id));
+
+    const deltaMap = Object.fromEntries(
+        getDistributions(initialShapes, type).map(d => [d.id, d])
+    );
+
+    const { before, after } = TLDR.mutate_shapes(
+        app.state,
+        ids.filter(id => deltaMap[id] !== undefined),
+        shape => ({ point: deltaMap[shape.id].next }),
+        currentPageId
+    );
+
+    initialShapes.forEach(shape => {
+        if (shape.type === TDShapeType.Group) {
+            const delta = Vec.sub(
+                after[shape.id].point!,
+                before[shape.id].point!
+            );
+
+            shape.children.forEach(id => {
+                const child = app.getShape(id);
+                before[child.id] = { point: child.point };
+                after[child.id] = { point: Vec.add(child.point, delta) };
+            });
+
+            delete before[shape.id];
+            delete after[shape.id];
+        }
+    });
+
+    return {
+        id: 'distribute',
+        before: {
+            document: {
+                pages: {
+                    [currentPageId]: { shapes: before },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: ids,
+                    },
+                },
+            },
+        },
+        after: {
+            document: {
+                pages: {
+                    [currentPageId]: { shapes: after },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: ids,
+                    },
+                },
+            },
+        },
+    };
+}
+
+function getDistributions(initialShapes: TDShape[], type: DistributeType) {
+    const entries = initialShapes.map(shape => {
+        const utils = TLDR.get_shape_util(shape);
+        return {
+            id: shape.id,
+            point: [...shape.point],
+            bounds: utils.getBounds(shape),
+            center: utils.getCenter(shape),
+        };
+    });
+
+    const len = entries.length;
+    const commonBounds = Utils.getCommonBounds(
+        entries.map(({ bounds }) => bounds)
+    );
+
+    const results: { id: string; prev: number[]; next: number[] }[] = [];
+
+    switch (type) {
+        case DistributeType.Horizontal: {
+            const span = entries.reduce((a, c) => a + c.bounds.width, 0);
+
+            if (span > commonBounds.width) {
+                const left = entries.sort(
+                    (a, b) => a.bounds.minX - b.bounds.minX
+                )[0];
+
+                const right = entries.sort(
+                    (a, b) => b.bounds.maxX - a.bounds.maxX
+                )[0];
+
+                const entriesToMove = entries
+                    .filter(a => a !== left && a !== right)
+                    .sort((a, b) => a.center[0] - b.center[0]);
+
+                const step = (right.center[0] - left.center[0]) / (len - 1);
+
+                const x = left.center[0] + step;
+
+                entriesToMove.forEach(({ id, point, bounds }, i) => {
+                    results.push({
+                        id,
+                        prev: point,
+                        next: [x + step * i - bounds.width / 2, bounds.minY],
+                    });
+                });
+            } else {
+                const entriesToMove = entries.sort(
+                    (a, b) => a.center[0] - b.center[0]
+                );
+
+                let x = commonBounds.minX;
+                const step = (commonBounds.width - span) / (len - 1);
+
+                entriesToMove.forEach(({ id, point, bounds }) => {
+                    results.push({ id, prev: point, next: [x, bounds.minY] });
+                    x += bounds.width + step;
+                });
+            }
+            break;
+        }
+        case DistributeType.Vertical: {
+            const span = entries.reduce((a, c) => a + c.bounds.height, 0);
+
+            if (span > commonBounds.height) {
+                const top = entries.sort(
+                    (a, b) => a.bounds.minY - b.bounds.minY
+                )[0];
+
+                const bottom = entries.sort(
+                    (a, b) => b.bounds.maxY - a.bounds.maxY
+                )[0];
+
+                const entriesToMove = entries
+                    .filter(a => a !== top && a !== bottom)
+                    .sort((a, b) => a.center[1] - b.center[1]);
+
+                const step = (bottom.center[1] - top.center[1]) / (len - 1);
+
+                const y = top.center[1] + step;
+
+                entriesToMove.forEach(({ id, point, bounds }, i) => {
+                    results.push({
+                        id,
+                        prev: point,
+                        next: [bounds.minX, y + step * i - bounds.height / 2],
+                    });
+                });
+            } else {
+                const entriesToMove = entries.sort(
+                    (a, b) => a.center[1] - b.center[1]
+                );
+
+                let y = commonBounds.minY;
+                const step = (commonBounds.height - span) / (len - 1);
+
+                entriesToMove.forEach(({ id, point, bounds }) => {
+                    results.push({ id, prev: point, next: [bounds.minX, y] });
+                    y += bounds.height + step;
+                });
+            }
+
+            break;
+        }
+    }
+
+    return results;
+}
diff --git a/libs/components/board-commands/src/duplicate-page.ts b/libs/components/board-commands/src/duplicate-page.ts
new file mode 100644
index 000000000..b8a461c8d
--- /dev/null
+++ b/libs/components/board-commands/src/duplicate-page.ts
@@ -0,0 +1,69 @@
+import type { TldrawCommand } from '@toeverything/components/board-types';
+import { Utils } from '@tldraw/core';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export function duplicatePage(app: TldrawApp, pageId: string): TldrawCommand {
+    const newId = Utils.uniqueId();
+    const {
+        currentPageId,
+        page,
+        pageState: { camera },
+    } = app;
+
+    const nextPage = {
+        ...page,
+        id: newId,
+        name: page.name + ' Copy',
+        shapes: Object.fromEntries(
+            Object.entries(page.shapes).map(([id, shape]) => {
+                return [
+                    id,
+                    {
+                        ...shape,
+                        parentId:
+                            shape.parentId === pageId ? newId : shape.parentId,
+                    },
+                ];
+            })
+        ),
+    };
+
+    return {
+        id: 'duplicate_page',
+        before: {
+            appState: {
+                currentPageId,
+            },
+            document: {
+                pages: {
+                    [newId]: undefined,
+                },
+                pageStates: {
+                    [newId]: undefined,
+                },
+            },
+        },
+        after: {
+            appState: {
+                currentPageId: newId,
+            },
+            document: {
+                pages: {
+                    [newId]: nextPage,
+                },
+                pageStates: {
+                    [newId]: {
+                        ...page,
+                        id: newId,
+                        selectedIds: [],
+                        camera: { ...camera },
+                        editingId: undefined,
+                        bindingId: undefined,
+                        hoveredId: undefined,
+                        pointedId: undefined,
+                    },
+                },
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/duplicate-shapes.ts b/libs/components/board-commands/src/duplicate-shapes.ts
new file mode 100644
index 000000000..55a44f382
--- /dev/null
+++ b/libs/components/board-commands/src/duplicate-shapes.ts
@@ -0,0 +1,206 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { Utils } from '@tldraw/core';
+import { Vec } from '@tldraw/vec';
+import { TLDR } from '@toeverything/components/board-state';
+import type {
+    PagePartial,
+    TldrawCommand,
+    TDShape,
+} from '@toeverything/components/board-types';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export function duplicateShapes(
+    app: TldrawApp,
+    ids: string[],
+    point?: number[]
+): TldrawCommand {
+    const { selectedIds, currentPageId, page, shapes } = app;
+
+    const before: PagePartial = {
+        shapes: {},
+        bindings: {},
+    };
+
+    const after: PagePartial = {
+        shapes: {},
+        bindings: {},
+    };
+
+    const duplicateMap: Record<string, string> = {};
+
+    const shapesToDuplicate = ids
+        .map(id => app.getShape(id))
+        .filter(shape => !ids.includes(shape.parentId));
+
+    // Create duplicates
+    shapesToDuplicate.forEach(shape => {
+        const duplicatedId = Utils.uniqueId();
+        before.shapes[duplicatedId] = undefined;
+
+        after.shapes[duplicatedId] = {
+            ...Utils.deepClone(shape),
+            id: duplicatedId,
+            childIndex: TLDR.get_child_index_above(
+                app.state,
+                shape.id,
+                currentPageId
+            ),
+        };
+
+        if (shape.children) {
+            after.shapes[duplicatedId]!.children = [];
+        }
+
+        if (shape.parentId !== currentPageId) {
+            const parent = app.getShape(shape.parentId);
+
+            before.shapes[parent.id] = {
+                ...before.shapes[parent.id],
+                children: parent.children,
+            };
+
+            after.shapes[parent.id] = {
+                ...after.shapes[parent.id],
+                children: [
+                    ...(after.shapes[parent.id] || parent).children!,
+                    duplicatedId,
+                ],
+            };
+        }
+
+        duplicateMap[shape.id] = duplicatedId;
+    });
+
+    // If the shapes have children, then duplicate those too
+    shapesToDuplicate.forEach(shape => {
+        if (shape.children) {
+            shape.children.forEach(childId => {
+                const child = app.getShape(childId);
+                const duplicatedId = Utils.uniqueId();
+                const duplicatedParentId = duplicateMap[shape.id];
+                before.shapes[duplicatedId] = undefined;
+                after.shapes[duplicatedId] = {
+                    ...Utils.deepClone(child),
+                    id: duplicatedId,
+                    parentId: duplicatedParentId,
+                    childIndex: TLDR.get_child_index_above(
+                        app.state,
+                        child.id,
+                        currentPageId
+                    ),
+                };
+                duplicateMap[childId] = duplicatedId;
+                after.shapes[duplicateMap[shape.id]]?.children?.push(
+                    duplicatedId
+                );
+            });
+        }
+    });
+
+    // Which ids did we end up duplicating?
+    const dupedShapeIds = new Set(Object.keys(duplicateMap));
+
+    // Handle bindings that effect duplicated shapes
+    Object.values(page.bindings)
+        .filter(
+            binding =>
+                dupedShapeIds.has(binding.fromId) ||
+                dupedShapeIds.has(binding.toId)
+        )
+        .forEach(binding => {
+            if (dupedShapeIds.has(binding.fromId)) {
+                if (dupedShapeIds.has(binding.toId)) {
+                    // If the binding is between two duplicating shapes then
+                    // duplicate the binding, too
+                    const duplicatedBindingId = Utils.uniqueId();
+
+                    const duplicatedBinding = {
+                        ...Utils.deepClone(binding),
+                        id: duplicatedBindingId,
+                        fromId: duplicateMap[binding.fromId],
+                        toId: duplicateMap[binding.toId],
+                    };
+
+                    before.bindings[duplicatedBindingId] = undefined;
+                    after.bindings[duplicatedBindingId] = duplicatedBinding;
+
+                    // Change the duplicated shape's handle so that it reference
+                    // the duplicated binding
+                    const boundShape = after.shapes[duplicatedBinding.fromId];
+                    Object.values(boundShape!.handles!).forEach(handle => {
+                        if (handle!.bindingId === binding.id) {
+                            handle!.bindingId = duplicatedBindingId;
+                        }
+                    });
+                } else {
+                    // If only the fromId is selected, delete the binding on
+                    // the duplicated shape's handles
+                    const boundShape =
+                        after.shapes[duplicateMap[binding.fromId]];
+                    Object.values(boundShape!.handles!).forEach(handle => {
+                        if (handle!.bindingId === binding.id) {
+                            handle!.bindingId = undefined;
+                        }
+                    });
+                }
+            }
+        });
+
+    // Now move the shapes
+
+    const shapesToMove = Object.values(after.shapes) as TDShape[];
+
+    if (point) {
+        const commonBounds = Utils.getCommonBounds(
+            shapesToMove.map(shape => TLDR.get_bounds(shape))
+        );
+        const center = Utils.getBoundsCenter(commonBounds);
+        shapesToMove.forEach(shape => {
+            // Could be a group
+            if (!shape.point) return;
+            shape.point = Vec.sub(point, Vec.sub(center, shape.point));
+        });
+    } else {
+        const offset = [16, 16];
+        shapesToMove.forEach(shape => {
+            // Could be a group
+            if (!shape.point) return;
+            shape.point = Vec.add(shape.point, offset);
+        });
+    }
+
+    // Unlock any locked shapes
+    shapesToMove.forEach(shape => {
+        if (shape.isLocked) {
+            shape.isLocked = false;
+        }
+    });
+
+    return {
+        id: 'duplicate',
+        before: {
+            document: {
+                pages: {
+                    [currentPageId]: before,
+                },
+                pageStates: {
+                    [currentPageId]: { selectedIds },
+                },
+            },
+        },
+        after: {
+            document: {
+                pages: {
+                    [currentPageId]: after,
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: Array.from(dupedShapeIds.values()).map(
+                            id => duplicateMap[id]
+                        ),
+                    },
+                },
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/flip-shapes.ts b/libs/components/board-commands/src/flip-shapes.ts
new file mode 100644
index 000000000..53302753f
--- /dev/null
+++ b/libs/components/board-commands/src/flip-shapes.ts
@@ -0,0 +1,101 @@
+import { FlipType } from '@toeverything/components/board-types';
+import { TLBoundsCorner, Utils } from '@tldraw/core';
+import type { TldrawCommand } from '@toeverything/components/board-types';
+import type { TldrawApp } from '@toeverything/components/board-state';
+import { TLDR } from '@toeverything/components/board-state';
+
+export function flipShapes(
+    app: TldrawApp,
+    ids: string[],
+    type: FlipType
+): TldrawCommand {
+    const { selectedIds, currentPageId, shapes } = app;
+
+    const boundsForShapes = shapes.map(shape => TLDR.get_bounds(shape));
+
+    const commonBounds = Utils.getCommonBounds(boundsForShapes);
+
+    const { before, after } = TLDR.mutate_shapes(
+        app.state,
+        ids,
+        shape => {
+            const shapeBounds = TLDR.get_bounds(shape);
+
+            switch (type) {
+                case FlipType.Horizontal: {
+                    const newShapeBounds =
+                        Utils.getRelativeTransformedBoundingBox(
+                            commonBounds,
+                            commonBounds,
+                            shapeBounds,
+                            true,
+                            false
+                        );
+
+                    return TLDR.get_shape_util(shape).transform(
+                        shape,
+                        newShapeBounds,
+                        {
+                            type: TLBoundsCorner.TopLeft,
+                            scaleX: -1,
+                            scaleY: 1,
+                            initialShape: shape,
+                            transformOrigin: [0.5, 0.5],
+                        }
+                    );
+                }
+                case FlipType.Vertical: {
+                    const newShapeBounds =
+                        Utils.getRelativeTransformedBoundingBox(
+                            commonBounds,
+                            commonBounds,
+                            shapeBounds,
+                            false,
+                            true
+                        );
+
+                    return TLDR.get_shape_util(shape).transform(
+                        shape,
+                        newShapeBounds,
+                        {
+                            type: TLBoundsCorner.TopLeft,
+                            scaleX: 1,
+                            scaleY: -1,
+                            initialShape: shape,
+                            transformOrigin: [0.5, 0.5],
+                        }
+                    );
+                }
+            }
+        },
+        currentPageId
+    );
+
+    return {
+        id: 'flip',
+        before: {
+            document: {
+                pages: {
+                    [currentPageId]: { shapes: before },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds,
+                    },
+                },
+            },
+        },
+        after: {
+            document: {
+                pages: {
+                    [currentPageId]: { shapes: after },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: ids,
+                    },
+                },
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/group-shapes.ts b/libs/components/board-commands/src/group-shapes.ts
new file mode 100644
index 000000000..5f0273174
--- /dev/null
+++ b/libs/components/board-commands/src/group-shapes.ts
@@ -0,0 +1,254 @@
+import { TDShape, TDShapeType } from '@toeverything/components/board-types';
+import { Utils } from '@tldraw/core';
+import type {
+    Patch,
+    TldrawCommand,
+    TDBinding,
+} from '@toeverything/components/board-types';
+import type { TldrawApp } from '@toeverything/components/board-state';
+import { TLDR } from '@toeverything/components/board-state';
+
+export function groupShapes(
+    app: TldrawApp,
+    ids: string[],
+    groupId: string,
+    pageId: string
+): TldrawCommand | undefined {
+    if (ids.length < 2) return;
+
+    const beforeShapes: Record<string, Patch<TDShape | undefined>> = {};
+    const afterShapes: Record<string, Patch<TDShape | undefined>> = {};
+
+    const beforeBindings: Record<string, Patch<TDBinding | undefined>> = {};
+    const afterBindings: Record<string, Patch<TDBinding | undefined>> = {};
+
+    const idsToGroup = [...ids];
+    const shapesToGroup: TDShape[] = [];
+    const deletedGroupIds: string[] = [];
+    const otherEffectedGroups: TDShape[] = [];
+
+    // Collect all of the shapes to group (and their ids)
+    for (const id of ids) {
+        const shape = app.getShape(id);
+        if (shape.isLocked) continue;
+
+        if (shape.children === undefined) {
+            shapesToGroup.push(shape);
+        } else {
+            const childIds = shape.children.filter(
+                id => !app.getShape(id).isLocked
+            );
+            otherEffectedGroups.push(shape);
+            idsToGroup.push(...childIds);
+            shapesToGroup.push(
+                ...childIds.map(id => app.getShape(id)).filter(Boolean)
+            );
+        }
+    }
+
+    // 1. Can we create this group?
+
+    // Do the shapes have the same parent?
+    if (
+        shapesToGroup.every(
+            shape => shape.parentId === shapesToGroup[0].parentId
+        )
+    ) {
+        // Is the common parent a shape (not the page)?
+        if (shapesToGroup[0].parentId !== pageId) {
+            const commonParent = app.getShape(shapesToGroup[0].parentId);
+            // Are all of the common parent's shapes selected?
+            if (commonParent.children?.length === idsToGroup.length) {
+                // Don't create a group if that group would be the same as the
+                // existing group.
+                return;
+            }
+        }
+    }
+
+    // A flattened array of shapes from the page
+    const flattenedShapes = TLDR.flatten_page(app.state, pageId);
+
+    // A map of shapes to their index in flattendShapes
+    const shapeIndexMap = Object.fromEntries(
+        shapesToGroup.map(shape => [shape.id, flattenedShapes.indexOf(shape)])
+    );
+
+    // An array of shapes in order by their index in flattendShapes
+    const sortedShapes = shapesToGroup.sort(
+        (a, b) => shapeIndexMap[a.id] - shapeIndexMap[b.id]
+    );
+
+    // The parentId is always the current page
+    const groupParentId = pageId; // sortedShapes[0].parentId
+
+    // The childIndex should be the lowest index of the selected shapes
+    // with a parent that is the current page; or else the child index
+    // of the lowest selected shape.
+    const groupChildIndex = (
+        sortedShapes.filter(shape => shape.parentId === pageId)[0] ||
+        sortedShapes[0]
+    ).childIndex;
+
+    // The shape's point is the min point of its childrens' common bounds
+    const groupBounds = Utils.getCommonBounds(
+        shapesToGroup.map(shape => TLDR.get_bounds(shape))
+    );
+
+    // Create the group
+    beforeShapes[groupId] = undefined;
+
+    afterShapes[groupId] = TLDR.get_shape_util(TDShapeType.Group).create({
+        id: groupId,
+        childIndex: groupChildIndex,
+        parentId: groupParentId,
+        point: [groupBounds.minX, groupBounds.minY],
+        size: [groupBounds.width, groupBounds.height],
+        children: sortedShapes.map(shape => shape.id),
+        workspace: app.document.id,
+    });
+
+    // Reparent shapes to the new group
+    sortedShapes.forEach((shape, index) => {
+        // If the shape is part of a different group, mark the parent shape for cleanup
+        if (shape.parentId !== pageId) {
+            const parentShape = app.getShape(shape.parentId);
+            otherEffectedGroups.push(parentShape);
+        }
+
+        beforeShapes[shape.id] = {
+            ...beforeShapes[shape.id],
+            parentId: shape.parentId,
+            childIndex: shape.childIndex,
+        };
+
+        afterShapes[shape.id] = {
+            ...afterShapes[shape.id],
+            parentId: groupId,
+            childIndex: index + 1,
+        };
+    });
+
+    // Clean up effected parents
+    while (otherEffectedGroups.length > 0) {
+        const shape = otherEffectedGroups.pop();
+        if (!shape) break;
+
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const nextChildren = (beforeShapes[shape.id]?.children ||
+            shape.children)!.filter(
+            childId =>
+                childId &&
+                !(
+                    idsToGroup.includes(childId) ||
+                    deletedGroupIds.includes(childId)
+                )
+        );
+
+        // If the parent has no children, remove it
+        if (nextChildren.length === 0) {
+            beforeShapes[shape.id] = shape;
+            afterShapes[shape.id] = undefined;
+
+            // And if that parent is part of a different group, mark it for cleanup
+            // (This is necessary only when we implement nested groups.)
+            if (shape.parentId !== pageId) {
+                deletedGroupIds.push(shape.id);
+                otherEffectedGroups.push(app.getShape(shape.parentId));
+            }
+        } else {
+            beforeShapes[shape.id] = {
+                ...beforeShapes[shape.id],
+                children: shape.children,
+            };
+
+            afterShapes[shape.id] = {
+                ...afterShapes[shape.id],
+                children: nextChildren,
+            };
+        }
+    }
+
+    // TODO: This code is copied from delete.command. Create a shared helper!
+
+    const { bindings } = app;
+
+    const deletedGroupIdsSet = new Set(deletedGroupIds);
+
+    // We also need to delete bindings that reference the deleted shapes
+    bindings.forEach(binding => {
+        for (const id of [binding.toId, binding.fromId]) {
+            // If the binding references a deleted shape...
+            if (deletedGroupIdsSet.has(id)) {
+                // Delete this binding
+                beforeBindings[binding.id] = binding;
+                afterBindings[binding.id] = undefined;
+
+                // Let's also look each the bound shape...
+                const shape = app.getShape(id);
+
+                // If the bound shape has a handle that references the deleted binding...
+                if (shape.handles) {
+                    Object.values(shape.handles)
+                        .filter(handle => handle.bindingId === binding.id)
+                        .forEach(handle => {
+                            // Save the binding reference in the before patch
+                            beforeShapes[id] = {
+                                ...beforeShapes[id],
+                                handles: {
+                                    ...beforeShapes[id]?.handles,
+                                    [handle.id]: { bindingId: binding.id },
+                                },
+                            };
+
+                            // Unless we're currently deleting the shape, remove the
+                            // binding reference from the after patch
+                            if (!deletedGroupIds.includes(id)) {
+                                afterShapes[id] = {
+                                    ...afterShapes[id],
+                                    handles: {
+                                        ...afterShapes[id]?.handles,
+                                        [handle.id]: { bindingId: undefined },
+                                    },
+                                };
+                            }
+                        });
+                }
+            }
+        }
+    });
+
+    return {
+        id: 'group',
+        before: {
+            document: {
+                pages: {
+                    [pageId]: {
+                        shapes: beforeShapes,
+                        bindings: beforeBindings,
+                    },
+                },
+                pageStates: {
+                    [pageId]: {
+                        selectedIds: ids,
+                    },
+                },
+            },
+        },
+        after: {
+            document: {
+                pages: {
+                    [pageId]: {
+                        shapes: afterShapes,
+                        bindings: beforeBindings,
+                    },
+                },
+                pageStates: {
+                    [pageId]: {
+                        selectedIds: [groupId],
+                    },
+                },
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/index.ts b/libs/components/board-commands/src/index.ts
new file mode 100644
index 000000000..b10d3f2f9
--- /dev/null
+++ b/libs/components/board-commands/src/index.ts
@@ -0,0 +1,24 @@
+export * from './align-shapes';
+export * from './change-page';
+export * from './create-page';
+export * from './create-shapes';
+export * from './delete-page';
+export * from './delete-shapes';
+export * from './distribute-shapes';
+export * from './duplicate-page';
+export * from './duplicate-shapes';
+export * from './flip-shapes';
+export * from './group-shapes';
+export * from './move-shapes-to-page';
+export * from './reorder-shapes';
+export * from './rename-page';
+export * from './reset-bounds';
+export * from './rotate-shapes';
+export * from './stretch-shapes';
+export * from './style-shapes';
+export * from './toggle-shapes-decoration';
+export * from './toggle-shapes-prop';
+export * from './translate-shapes';
+export * from './ungroup-shapes';
+export * from './update-shapes';
+export * from './set-shapes-props';
diff --git a/libs/components/board-commands/src/move-shapes-to-page.ts b/libs/components/board-commands/src/move-shapes-to-page.ts
new file mode 100644
index 000000000..f8d7c64ea
--- /dev/null
+++ b/libs/components/board-commands/src/move-shapes-to-page.ts
@@ -0,0 +1,231 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type {
+    ArrowShape,
+    PagePartial,
+    TldrawCommand,
+    TDShape,
+} from '@toeverything/components/board-types';
+import type { TldrawApp } from '@toeverything/components/board-state';
+import { TLDR } from '@toeverything/components/board-state';
+import { Utils, TLBounds } from '@tldraw/core';
+import { Vec } from '@tldraw/vec';
+
+export function moveShapesToPage(
+    app: TldrawApp,
+    ids: string[],
+    viewportBounds: TLBounds,
+    fromPageId: string,
+    toPageId: string
+): TldrawCommand {
+    const { page } = app;
+
+    const fromPage: Record<string, PagePartial> = {
+        before: {
+            shapes: {},
+            bindings: {},
+        },
+        after: {
+            shapes: {},
+            bindings: {},
+        },
+    };
+
+    const toPage: Record<string, PagePartial> = {
+        before: {
+            shapes: {},
+            bindings: {},
+        },
+        after: {
+            shapes: {},
+            bindings: {},
+        },
+    };
+
+    // Collect all the shapes to move and their keys.
+    const movingShapeIds = new Set<string>();
+    const shapesToMove = new Set<TDShape>();
+
+    ids.map(id => app.getShape(id, fromPageId))
+        .filter(shape => !shape.isLocked)
+        .forEach(shape => {
+            movingShapeIds.add(shape.id);
+            shapesToMove.add(shape);
+            if (shape.children !== undefined) {
+                shape.children.forEach(childId => {
+                    movingShapeIds.add(childId);
+                    shapesToMove.add(app.getShape(childId, fromPageId));
+                });
+            }
+        });
+
+    // Where should we put start putting shapes on the "to" page?
+    const startingChildIndex = TLDR.get_top_child_index(app.state, toPageId);
+
+    // Which shapes are we moving?
+    const movingShapes = Array.from(shapesToMove.values());
+
+    movingShapes.forEach((shape, i) => {
+        // Remove the shape from the fromPage
+        fromPage['before'].shapes[shape.id] = shape;
+        fromPage['after'].shapes[shape.id] = undefined;
+
+        // But the moved shape on the "to" page
+        toPage['before'].shapes[shape.id] = undefined;
+        toPage['after'].shapes[shape.id] = shape;
+
+        // If the shape's parent isn't moving too, reparent the shape to
+        // the "to" page, at the top of the z stack
+        if (!movingShapeIds.has(shape.parentId)) {
+            toPage['after'].shapes[shape.id] = {
+                ...shape,
+                parentId: toPageId,
+                childIndex: startingChildIndex + i,
+            };
+
+            // If the shape was in a group, then pull the shape from the
+            // parent's children array.
+            if (shape.parentId !== fromPageId) {
+                const parent = app.getShape(shape.parentId, fromPageId);
+                fromPage['before'].shapes[parent.id] = {
+                    children: parent.children,
+                };
+
+                fromPage['after'].shapes[parent.id] = {
+                    children: parent.children!.filter(
+                        childId => childId !== shape.id
+                    ),
+                };
+            }
+        }
+    });
+
+    // Handle bindings that effect duplicated shapes
+    Object.values(page.bindings)
+        .filter(
+            binding =>
+                movingShapeIds.has(binding.fromId) ||
+                movingShapeIds.has(binding.toId)
+        )
+        .forEach(binding => {
+            // Always delete the binding from the from page
+
+            fromPage['before'].bindings[binding.id] = binding;
+            fromPage['after'].bindings[binding.id] = undefined;
+
+            // Delete the reference from the binding's fromShape
+
+            const fromBoundShape = app.getShape(binding.fromId, fromPageId);
+
+            // Will we be copying this binding to the new page?
+
+            const shouldCopy =
+                movingShapeIds.has(binding.fromId) &&
+                movingShapeIds.has(binding.toId);
+
+            if (shouldCopy) {
+                // Just move the binding to the new page
+                toPage['before'].bindings[binding.id] = undefined;
+                toPage['after'].bindings[binding.id] = binding;
+            } else {
+                if (movingShapeIds.has(binding.fromId)) {
+                    // If we are only moving the "from" shape, we need to delete
+                    // the binding reference from the "from" shapes handles
+                    const fromShape = app.getShape(binding.fromId, fromPageId);
+                    const handle = Object.values(fromBoundShape.handles!).find(
+                        handle => handle.bindingId === binding.id
+                    )!;
+
+                    // Remove the handle from the shape on the toPage
+
+                    const handleId = handle.id as keyof ArrowShape['handles'];
+
+                    const toPageShape = toPage['after'].shapes[fromShape.id]!;
+
+                    toPageShape.handles = {
+                        ...toPageShape.handles,
+                        [handleId]: {
+                            ...toPageShape.handles![handleId],
+                            bindingId: undefined,
+                        },
+                    };
+                } else {
+                    // If we are only moving the "to" shape, we need to delete
+                    // the binding reference from the "from" shape's handles
+                    const fromShape = app.getShape(binding.fromId, fromPageId);
+                    const handle = Object.values(fromBoundShape.handles!).find(
+                        handle => handle.bindingId === binding.id
+                    )!;
+
+                    fromPage['before'].shapes[fromShape.id] = {
+                        handles: { [handle.id]: { bindingId: binding.id } },
+                    };
+
+                    fromPage['after'].shapes[fromShape.id] = {
+                        handles: { [handle.id]: { bindingId: undefined } },
+                    };
+                }
+            }
+        });
+
+    // Finally, center camera on selection
+
+    const toPageState = app.state.document.pageStates[toPageId];
+
+    const bounds = Utils.getCommonBounds(
+        movingShapes.map(shape => TLDR.get_bounds(shape))
+    );
+
+    const zoom = TLDR.get_camera_zoom(
+        viewportBounds.width < viewportBounds.height
+            ? (viewportBounds.width - 128) / bounds.width
+            : (viewportBounds.height - 128) / bounds.height
+    );
+
+    const mx = (viewportBounds.width - bounds.width * zoom) / 2 / zoom;
+    const my = (viewportBounds.height - bounds.height * zoom) / 2 / zoom;
+
+    const point = Vec.toFixed(Vec.add([-bounds.minX, -bounds.minY], [mx, my]));
+
+    return {
+        id: 'move_to_page',
+        before: {
+            appState: {
+                currentPageId: fromPageId,
+            },
+            document: {
+                pages: {
+                    [fromPageId]: fromPage['before'],
+                    [toPageId]: toPage['before'],
+                },
+                pageStates: {
+                    [fromPageId]: { selectedIds: ids },
+                    [toPageId]: {
+                        selectedIds: toPageState.selectedIds,
+                        camera: toPageState.camera,
+                    },
+                },
+            },
+        },
+        after: {
+            appState: {
+                currentPageId: toPageId,
+            },
+            document: {
+                pages: {
+                    [fromPageId]: fromPage['after'],
+                    [toPageId]: toPage['after'],
+                },
+                pageStates: {
+                    [fromPageId]: { selectedIds: [] },
+                    [toPageId]: {
+                        selectedIds: ids,
+                        camera: {
+                            zoom,
+                            point,
+                        },
+                    },
+                },
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/rename-page.ts b/libs/components/board-commands/src/rename-page.ts
new file mode 100644
index 000000000..27062ded3
--- /dev/null
+++ b/libs/components/board-commands/src/rename-page.ts
@@ -0,0 +1,28 @@
+import type { TldrawCommand } from '@toeverything/components/board-types';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export function renamePage(
+    app: TldrawApp,
+    pageId: string,
+    name: string
+): TldrawCommand {
+    const { page } = app;
+
+    return {
+        id: 'rename_page',
+        before: {
+            document: {
+                pages: {
+                    [pageId]: { name: page.name },
+                },
+            },
+        },
+        after: {
+            document: {
+                pages: {
+                    [pageId]: { name: name },
+                },
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/reorder-shapes.ts b/libs/components/board-commands/src/reorder-shapes.ts
new file mode 100644
index 000000000..30a96a188
--- /dev/null
+++ b/libs/components/board-commands/src/reorder-shapes.ts
@@ -0,0 +1,265 @@
+import {
+    MoveType,
+    TDShape,
+    TldrawCommand,
+} from '@toeverything/components/board-types';
+import { TLDR } from '@toeverything/components/board-state';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export function reorderShapes(
+    app: TldrawApp,
+    ids: string[],
+    type: MoveType
+): TldrawCommand {
+    const { currentPageId, page } = app;
+
+    // Get the unique parent ids for the selected elements
+    const parentIds = new Set(ids.map(id => app.getShape(id).parentId));
+
+    let result: {
+        before: Record<string, Partial<TDShape>>;
+        after: Record<string, Partial<TDShape>>;
+    } = { before: {}, after: {} };
+
+    let startIndex: number;
+    let startChildIndex: number;
+    let step: number;
+
+    // Collect shapes with common parents into a table under their parent id
+    Array.from(parentIds.values()).forEach(parentId => {
+        let sortedChildren: TDShape[] = [];
+        if (parentId === page.id) {
+            sortedChildren = Object.values(page.shapes).sort(
+                (a, b) => a.childIndex - b.childIndex
+            );
+        } else {
+            const parent = app.getShape(parentId);
+            if (!parent.children) throw Error('No children in parent!');
+
+            sortedChildren = parent.children
+                .map(childId => app.getShape(childId))
+                .sort((a, b) => a.childIndex - b.childIndex);
+        }
+
+        const sortedChildIds = sortedChildren.map(shape => shape.id);
+
+        const sortedIndicesToMove = ids
+            .filter(id => sortedChildIds.includes(id))
+            .map(id => sortedChildIds.indexOf(id))
+            .sort((a, b) => a - b);
+
+        if (sortedIndicesToMove.length === sortedChildIds.length) return;
+
+        switch (type) {
+            case MoveType.ToBack: {
+                //               a       b  c
+                // Initial   1   2    3  4  5  6  7
+                // Final   .25  .5  .75  1  3  6  7
+                //           a   b    c
+
+                // Find the lowest "open" index
+                for (let i = 0; i < sortedChildIds.length; i++) {
+                    if (sortedIndicesToMove.includes(i)) continue;
+                    startIndex = i;
+                    break;
+                }
+
+                // Find the lowest child index that isn't in sortedIndicesToMove
+                startChildIndex = sortedChildren[startIndex].childIndex;
+
+                // Find the step for each additional child
+                step = startChildIndex / (sortedIndicesToMove.length + 1);
+
+                // Get the results of moving the selected shapes below the first open index's shape
+                result = TLDR.mutate_shapes(
+                    app.state,
+                    sortedIndicesToMove
+                        .map(i => sortedChildren[i].id)
+                        .reverse(),
+                    (shape, i) => ({
+                        childIndex: startChildIndex - (i + 1) * step,
+                    }),
+                    currentPageId
+                );
+
+                break;
+            }
+            case MoveType.ToFront: {
+                //              a     b  c
+                // Initial   1  2  3  4  5  6   7
+                // Final     1  3  6  7  8  9  10
+                //                       a  b   c
+
+                // Find the highest "open" index
+                for (let i = sortedChildIds.length - 1; i >= 0; i--) {
+                    if (sortedIndicesToMove.includes(i)) continue;
+                    startIndex = i;
+                    break;
+                }
+
+                // Find the lowest child index that isn't in sortedIndicesToMove
+                startChildIndex = sortedChildren[startIndex].childIndex;
+
+                // Find the step for each additional child
+                step = 1;
+
+                // Get the results of moving the selected shapes below the first open index's shape
+                result = TLDR.mutate_shapes(
+                    app.state,
+                    sortedIndicesToMove.map(i => sortedChildren[i].id),
+                    (shape, i) => ({
+                        childIndex: startChildIndex + (i + 1),
+                    }),
+                    currentPageId
+                );
+
+                break;
+            }
+            case MoveType.Backward: {
+                //               a           b  c
+                // Initial    1  2     3     4  5  6  7
+                // Final     .5  1  1.66  2.33  3  6  7
+                //           a         b     c
+
+                const indexMap: Record<string, number> = {};
+
+                // Starting from the top...
+                for (let i = sortedChildIds.length - 1; i >= 0; i--) {
+                    // If we found a moving index...
+                    if (sortedIndicesToMove.includes(i)) {
+                        for (let j = i; j >= 0; j--) {
+                            // iterate downward until we find an open spot
+                            if (!sortedIndicesToMove.includes(j)) {
+                                // i = the index of the first closed spot
+                                // j = the index of the first open spot
+
+                                const endChildIndex =
+                                    sortedChildren[j].childIndex;
+                                let startChildIndex: number;
+                                let step: number;
+
+                                if (j === 0) {
+                                    // We're moving below the first child, start from
+                                    // half of its child index.
+
+                                    startChildIndex = endChildIndex / 2;
+                                    step = endChildIndex / 2 / (i - j + 1);
+                                } else {
+                                    // Start from the child index of the child below the
+                                    // child above.
+                                    startChildIndex =
+                                        sortedChildren[j - 1].childIndex;
+                                    step =
+                                        (endChildIndex - startChildIndex) /
+                                        (i - j + 1);
+                                    startChildIndex += step;
+                                }
+
+                                for (let k = 0; k < i - j; k++) {
+                                    indexMap[sortedChildren[j + k + 1].id] =
+                                        startChildIndex + step * k;
+                                }
+
+                                break;
+                            }
+                        }
+                    }
+                }
+
+                if (Object.values(indexMap).length > 0) {
+                    // Get the results of moving the selected shapes below the first open index's shape
+                    result = TLDR.mutate_shapes(
+                        app.state,
+                        sortedIndicesToMove.map(i => sortedChildren[i].id),
+                        shape => ({
+                            childIndex: indexMap[shape.id],
+                        }),
+                        currentPageId
+                    );
+                }
+
+                break;
+            }
+            case MoveType.Forward: {
+                //             a     b c
+                // Initial   1 2   3 4 5 6 7
+                // Final     1 3 3.5 6 7 8 9
+                //                 a     b c
+
+                const indexMap: Record<string, number> = {};
+
+                // Starting from the top...
+                for (let i = 0; i < sortedChildIds.length; i++) {
+                    // If we found a moving index...
+                    if (sortedIndicesToMove.includes(i)) {
+                        // Search for the first open spot above this one
+                        for (let j = i; j < sortedChildIds.length; j++) {
+                            if (!sortedIndicesToMove.includes(j)) {
+                                // i = the low index of the first closed spot
+                                // j = the high index of the first open spot
+
+                                startChildIndex = sortedChildren[j].childIndex;
+
+                                const step =
+                                    j === sortedChildIds.length - 1
+                                        ? 1
+                                        : (sortedChildren[j + 1].childIndex -
+                                              startChildIndex) /
+                                          (j - i + 1);
+
+                                for (let k = 0; k < j - i; k++) {
+                                    indexMap[sortedChildren[i + k].id] =
+                                        startChildIndex + step * (k + 1);
+                                }
+
+                                break;
+                            }
+                        }
+                    }
+                }
+
+                if (Object.values(indexMap).length > 0) {
+                    // Get the results of moving the selected shapes below the first open index's shape
+                    result = TLDR.mutate_shapes(
+                        app.state,
+                        sortedIndicesToMove.map(i => sortedChildren[i].id),
+                        shape => ({
+                            childIndex: indexMap[shape.id],
+                        }),
+                        currentPageId
+                    );
+                }
+
+                break;
+            }
+        }
+    });
+
+    return {
+        id: 'move',
+        before: {
+            document: {
+                pages: {
+                    [currentPageId]: { shapes: result.before },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: ids,
+                    },
+                },
+            },
+        },
+        after: {
+            document: {
+                pages: {
+                    [currentPageId]: { shapes: result.after },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: ids,
+                    },
+                },
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/reset-bounds.ts b/libs/components/board-commands/src/reset-bounds.ts
new file mode 100644
index 000000000..f231c494c
--- /dev/null
+++ b/libs/components/board-commands/src/reset-bounds.ts
@@ -0,0 +1,46 @@
+import type { TldrawCommand } from '@toeverything/components/board-types';
+import { TLDR } from '@toeverything/components/board-state';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export function resetBounds(
+    app: TldrawApp,
+    ids: string[],
+    pageId: string
+): TldrawCommand {
+    const { currentPageId } = app;
+
+    const { before, after } = TLDR.mutate_shapes(
+        app.state,
+        ids,
+        shape => app.getShapeUtil(shape).onDoubleClickBoundsHandle?.(shape),
+        pageId
+    );
+
+    return {
+        id: 'reset_bounds',
+        before: {
+            document: {
+                pages: {
+                    [currentPageId]: { shapes: before },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: ids,
+                    },
+                },
+            },
+        },
+        after: {
+            document: {
+                pages: {
+                    [currentPageId]: { shapes: after },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: ids,
+                    },
+                },
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/rotate-shapes.ts b/libs/components/board-commands/src/rotate-shapes.ts
new file mode 100644
index 000000000..073744a9a
--- /dev/null
+++ b/libs/components/board-commands/src/rotate-shapes.ts
@@ -0,0 +1,83 @@
+import { Utils } from '@tldraw/core';
+import type {
+    TldrawCommand,
+    TDShape,
+} from '@toeverything/components/board-types';
+import { TLDR } from '@toeverything/components/board-state';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+const PI2 = Math.PI * 2;
+
+export function rotateShapes(
+    app: TldrawApp,
+    ids: string[],
+    delta = -PI2 / 4
+): TldrawCommand | void {
+    const { currentPageId } = app;
+
+    // The shapes for the before patch
+    const before: Record<string, Partial<TDShape>> = {};
+
+    // The shapes for the after patch
+    const after: Record<string, Partial<TDShape>> = {};
+
+    // Find the shapes that we want to rotate.
+    // We don't rotate groups: we rotate their children instead.
+    const shapesToRotate = ids
+        .flatMap(id => {
+            const shape = app.getShape(id);
+            return shape.children
+                ? shape.children.map(childId => app.getShape(childId))
+                : shape;
+        })
+        .filter(shape => !shape.isLocked);
+
+    // Find the common center to all shapes
+    // This is the point that we'll rotate around
+    const origin = Utils.getBoundsCenter(
+        Utils.getCommonBounds(
+            shapesToRotate.map(shape => TLDR.get_bounds(shape))
+        )
+    );
+
+    // Find the rotate mutations for each shape
+    shapesToRotate.forEach(shape => {
+        const change = TLDR.get_rotated_shape_mutation(
+            shape,
+            TLDR.get_center(shape),
+            origin,
+            delta
+        );
+        if (!change) return;
+        before[shape.id] = TLDR.get_before_shape(shape, change);
+        after[shape.id] = change;
+    });
+
+    return {
+        id: 'rotate',
+        before: {
+            document: {
+                pages: {
+                    [currentPageId]: { shapes: before },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: ids,
+                    },
+                },
+            },
+        },
+        after: {
+            document: {
+                pages: {
+                    [currentPageId]: { shapes: after },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: ids,
+                    },
+                },
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/set-shapes-props.ts b/libs/components/board-commands/src/set-shapes-props.ts
new file mode 100644
index 000000000..39f559658
--- /dev/null
+++ b/libs/components/board-commands/src/set-shapes-props.ts
@@ -0,0 +1,61 @@
+import type {
+    TDShape,
+    TldrawCommand,
+} from '@toeverything/components/board-types';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export function setShapesProps<T extends TDShape>(
+    app: TldrawApp,
+    ids: string[],
+    partial: Partial<T>
+): TldrawCommand {
+    const { currentPageId, selectedIds } = app;
+
+    const initialShapes = ids
+        .map(id => app.getShape<T>(id))
+        .filter(shape => (partial['isLocked'] ? true : !shape.isLocked));
+
+    const before: Record<string, Partial<TDShape>> = {};
+    const after: Record<string, Partial<TDShape>> = {};
+
+    const keys = Object.keys(partial) as (keyof T)[];
+
+    initialShapes.forEach(shape => {
+        before[shape.id] = Object.fromEntries(
+            keys.map(key => [key, shape[key]])
+        );
+        after[shape.id] = partial;
+    });
+
+    return {
+        id: 'set_props',
+        before: {
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes: before,
+                    },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds,
+                    },
+                },
+            },
+        },
+        after: {
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes: after,
+                    },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds,
+                    },
+                },
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/shared/remove-shapes-from-page.ts b/libs/components/board-commands/src/shared/remove-shapes-from-page.ts
new file mode 100644
index 000000000..557d653e1
--- /dev/null
+++ b/libs/components/board-commands/src/shared/remove-shapes-from-page.ts
@@ -0,0 +1,146 @@
+import { TLDR } from '@toeverything/components/board-state';
+import type {
+    ArrowShape,
+    GroupShape,
+    PagePartial,
+    TDSnapshot,
+} from '@toeverything/components/board-types';
+
+export function removeShapesFromPage(
+    data: TDSnapshot,
+    ids: string[],
+    pageId: string
+) {
+    const before: PagePartial = {
+        shapes: {},
+        bindings: {},
+    };
+
+    const after: PagePartial = {
+        shapes: {},
+        bindings: {},
+    };
+
+    const parentsToUpdate: GroupShape[] = [];
+    const deletedIds = new Set();
+    const assetsToRemove = new Set<string>();
+
+    // These are the shapes we're definitely going to delete
+
+    ids.filter(id => !TLDR.get_shape(data, id, pageId).isLocked).forEach(id => {
+        deletedIds.add(id);
+        const shape = TLDR.get_shape(data, id, pageId);
+        before.shapes[id] = shape;
+        after.shapes[id] = undefined;
+
+        // Also delete the shape's children
+
+        if (shape.children !== undefined) {
+            shape.children.forEach(childId => {
+                deletedIds.add(childId);
+                const child = TLDR.get_shape(data, childId, pageId);
+                before.shapes[childId] = child;
+                after.shapes[childId] = undefined;
+            });
+        }
+
+        if (shape.parentId !== pageId) {
+            parentsToUpdate.push(TLDR.get_shape(data, shape.parentId, pageId));
+        }
+
+        if (shape.assetId) {
+            assetsToRemove.add(shape.assetId);
+        }
+    });
+
+    parentsToUpdate.forEach(parent => {
+        if (ids.includes(parent.id)) return;
+        deletedIds.add(parent.id);
+        before.shapes[parent.id] = { children: parent.children };
+        after.shapes[parent.id] = {
+            children: parent.children.filter(id => !ids.includes(id)),
+        };
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        if (after.shapes[parent.id]?.children!.length === 0) {
+            after.shapes[parent.id] = undefined;
+            before.shapes[parent.id] = TLDR.get_shape(data, parent.id, pageId);
+        }
+    });
+
+    // Recursively check for empty parents?
+
+    const page = TLDR.get_page(data, pageId);
+
+    // We also need to delete bindings that reference the deleted shapes
+    Object.values(page.bindings)
+        .filter(
+            binding =>
+                deletedIds.has(binding.fromId) || deletedIds.has(binding.toId)
+        )
+        .forEach(binding => {
+            for (const id of [binding.toId, binding.fromId]) {
+                // If the binding references a deleted shape...
+                if (after.shapes[id] === undefined) {
+                    // Delete this binding
+                    before.bindings[binding.id] = binding;
+                    after.bindings[binding.id] = undefined;
+
+                    // Let's also look each the bound shape...
+                    const shape = page.shapes[id];
+
+                    // If the bound shape has a handle that references the deleted binding...
+                    if (shape && shape.handles) {
+                        Object.values(shape.handles)
+                            .filter(handle => handle.bindingId === binding.id)
+                            .forEach(handle => {
+                                // Save the binding reference in the before patch
+                                before.shapes[id] = {
+                                    ...before.shapes[id],
+                                    handles: {
+                                        ...before.shapes[id]?.handles,
+                                        [handle.id]: {
+                                            ...before.shapes[id]?.handles?.[
+                                                handle.id as keyof ArrowShape['handles']
+                                            ],
+                                            bindingId: binding.id,
+                                        },
+                                    },
+                                };
+
+                                // Unless we're currently deleting the shape, remove the
+                                // binding reference from the after patch
+                                if (!deletedIds.has(id)) {
+                                    after.shapes[id] = {
+                                        ...after.shapes[id],
+                                        handles: {
+                                            ...after.shapes[id]?.handles,
+                                            [handle.id]: {
+                                                ...after.shapes[id]?.handles?.[
+                                                    handle.id as keyof ArrowShape['handles']
+                                                ],
+                                                bindingId: undefined,
+                                            },
+                                        },
+                                    };
+                                }
+                            });
+                    }
+                }
+            }
+        });
+
+    // If any other shapes are using the deleted assets, don't remove them
+    Object.values(data.document.pages)
+        .flatMap(page => Object.values(page.shapes))
+        .forEach(shape => {
+            if (
+                'assetId' in shape &&
+                shape.assetId &&
+                !deletedIds.has(shape.id)
+            ) {
+                assetsToRemove.delete(shape.assetId);
+            }
+        });
+
+    return { before, after, assetsToRemove: Array.from(assetsToRemove) };
+}
diff --git a/libs/components/board-commands/src/stretch-shapes.ts b/libs/components/board-commands/src/stretch-shapes.ts
new file mode 100644
index 000000000..cc44699d2
--- /dev/null
+++ b/libs/components/board-commands/src/stretch-shapes.ts
@@ -0,0 +1,114 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { TLBoundsCorner, Utils } from '@tldraw/core';
+import { StretchType, TDShapeType } from '@toeverything/components/board-types';
+import type { TldrawCommand } from '@toeverything/components/board-types';
+import { TLDR } from '@toeverything/components/board-state';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export function stretchShapes(
+    app: TldrawApp,
+    ids: string[],
+    type: StretchType
+): TldrawCommand {
+    const { currentPageId, selectedIds } = app;
+
+    const initialShapes = ids.map(id => app.getShape(id));
+
+    const boundsForShapes = initialShapes.map(shape => TLDR.get_bounds(shape));
+
+    const commonBounds = Utils.getCommonBounds(boundsForShapes);
+
+    const idsToMutate = ids
+        .flatMap(id => {
+            const shape = app.getShape(id);
+            return shape.children ? shape.children : shape.id;
+        })
+        .filter(id => !app.getShape(id).isLocked);
+
+    const { before, after } = TLDR.mutate_shapes(
+        app.state,
+        idsToMutate,
+        shape => {
+            const bounds = TLDR.get_bounds(shape);
+
+            switch (type) {
+                case StretchType.Horizontal: {
+                    const newBounds = {
+                        ...bounds,
+                        minX: commonBounds.minX,
+                        maxX: commonBounds.maxX,
+                        width: commonBounds.width,
+                    };
+
+                    return TLDR.get_shape_util(shape).transformSingle(
+                        shape,
+                        newBounds,
+                        {
+                            type: TLBoundsCorner.TopLeft,
+                            scaleX: newBounds.width / bounds.width,
+                            scaleY: 1,
+                            initialShape: shape,
+                            transformOrigin: [0.5, 0.5],
+                        }
+                    );
+                }
+                case StretchType.Vertical: {
+                    const newBounds = {
+                        ...bounds,
+                        minY: commonBounds.minY,
+                        maxY: commonBounds.maxY,
+                        height: commonBounds.height,
+                    };
+
+                    return TLDR.get_shape_util(shape).transformSingle(
+                        shape,
+                        newBounds,
+                        {
+                            type: TLBoundsCorner.TopLeft,
+                            scaleX: 1,
+                            scaleY: newBounds.height / bounds.height,
+                            initialShape: shape,
+                            transformOrigin: [0.5, 0.5],
+                        }
+                    );
+                }
+            }
+        },
+        currentPageId
+    );
+
+    initialShapes.forEach(shape => {
+        if (shape.type === TDShapeType.Group) {
+            delete before[shape.id];
+            delete after[shape.id];
+        }
+    });
+
+    return {
+        id: 'stretch',
+        before: {
+            document: {
+                pages: {
+                    [currentPageId]: { shapes: before },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds,
+                    },
+                },
+            },
+        },
+        after: {
+            document: {
+                pages: {
+                    [currentPageId]: { shapes: after },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: ids,
+                    },
+                },
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/style-shapes.ts b/libs/components/board-commands/src/style-shapes.ts
new file mode 100644
index 000000000..08e611897
--- /dev/null
+++ b/libs/components/board-commands/src/style-shapes.ts
@@ -0,0 +1,100 @@
+import {
+    Patch,
+    ShapeStyles,
+    TldrawCommand,
+    TDShape,
+    // TDShapeType,
+    // TextShape
+} from '@toeverything/components/board-types';
+import { TLDR } from '@toeverything/components/board-state';
+import { Vec } from '@tldraw/vec';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export function styleShapes(
+    app: TldrawApp,
+    ids: string[],
+    changes: Partial<ShapeStyles>
+): TldrawCommand {
+    const { currentPageId, selectedIds } = app;
+
+    const shapeIdsToMutate = ids
+        .flatMap(id => TLDR.get_document_branch(app.state, id, currentPageId))
+        .filter(id => !app.getShape(id).isLocked);
+
+    const beforeShapes: Record<string, Patch<TDShape>> = {};
+    const afterShapes: Record<string, Patch<TDShape>> = {};
+
+    shapeIdsToMutate
+        .map(id => app.getShape(id))
+        .filter(shape => !shape.isLocked)
+        .forEach(shape => {
+            beforeShapes[shape.id] = {
+                style: {
+                    ...Object.fromEntries(
+                        Object.keys(changes).map(key => [
+                            key,
+                            shape.style[key as keyof typeof shape.style],
+                        ])
+                    ),
+                },
+            };
+
+            afterShapes[shape.id] = {
+                style: changes,
+            };
+
+            // if (shape.type === TDShapeType.Text) {
+            //     beforeShapes[shape.id].point = shape.point;
+            //     afterShapes[shape.id].point = Vec.toFixed(
+            //         Vec.add(
+            //             shape.point,
+            //             Vec.sub(
+            //                 app.getShapeUtil(shape).getCenter(shape),
+            //                 app.getShapeUtil(shape).getCenter({
+            //                     ...shape,
+            //                     style: { ...shape.style, ...changes }
+            //                 } as TextShape)
+            //             )
+            //         )
+            //     );
+            // }
+        });
+
+    return {
+        id: 'style',
+        before: {
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes: beforeShapes,
+                    },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: selectedIds,
+                    },
+                },
+            },
+            appState: {
+                currentStyle: { ...app.appState.currentStyle },
+            },
+        },
+        after: {
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes: afterShapes,
+                    },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: ids,
+                    },
+                },
+            },
+            appState: {
+                currentStyle: changes,
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/toggle-shapes-decoration.ts b/libs/components/board-commands/src/toggle-shapes-decoration.ts
new file mode 100644
index 000000000..38bde3638
--- /dev/null
+++ b/libs/components/board-commands/src/toggle-shapes-decoration.ts
@@ -0,0 +1,73 @@
+import { Decoration } from '@toeverything/components/board-types';
+import type {
+    Patch,
+    ArrowShape,
+    TldrawCommand,
+} from '@toeverything/components/board-types';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export function toggleShapesDecoration(
+    app: TldrawApp,
+    ids: string[],
+    decorationId: 'start' | 'end'
+): TldrawCommand {
+    const { currentPageId, selectedIds } = app;
+
+    const beforeShapes: Record<string, Patch<ArrowShape>> = Object.fromEntries(
+        ids.map(id => [
+            id,
+            {
+                decorations: {
+                    [decorationId]:
+                        app.getShape<ArrowShape>(id).decorations?.[
+                            decorationId
+                        ],
+                },
+            },
+        ])
+    );
+
+    const afterShapes: Record<string, Patch<ArrowShape>> = Object.fromEntries(
+        ids
+            .filter(id => !app.getShape(id).isLocked)
+            .map(id => [
+                id,
+                {
+                    decorations: {
+                        [decorationId]: app.getShape<ArrowShape>(id)
+                            .decorations?.[decorationId]
+                            ? undefined
+                            : Decoration.Arrow,
+                    },
+                },
+            ])
+    );
+
+    return {
+        id: 'toggle_decorations',
+        before: {
+            document: {
+                pages: {
+                    [currentPageId]: { shapes: beforeShapes },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds,
+                    },
+                },
+            },
+        },
+        after: {
+            document: {
+                pages: {
+                    [currentPageId]: { shapes: afterShapes },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: ids,
+                    },
+                },
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/toggle-shapes-prop.ts b/libs/components/board-commands/src/toggle-shapes-prop.ts
new file mode 100644
index 000000000..374c47cc8
--- /dev/null
+++ b/libs/components/board-commands/src/toggle-shapes-prop.ts
@@ -0,0 +1,59 @@
+import type {
+    TDShape,
+    TldrawCommand,
+} from '@toeverything/components/board-types';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export function toggleShapesProp(
+    app: TldrawApp,
+    ids: string[],
+    prop: keyof TDShape
+): TldrawCommand {
+    const { currentPageId } = app;
+
+    const initialShapes = ids
+        .map(id => app.getShape(id))
+        .filter(shape => (prop === 'isLocked' ? true : !shape.isLocked));
+
+    const isAllToggled = initialShapes.every(shape => shape[prop]);
+
+    const before: Record<string, Partial<TDShape>> = {};
+    const after: Record<string, Partial<TDShape>> = {};
+
+    initialShapes.forEach(shape => {
+        before[shape.id] = { [prop]: shape[prop] };
+        after[shape.id] = { [prop]: !isAllToggled };
+    });
+
+    return {
+        id: 'toggle',
+        before: {
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes: before,
+                    },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: ids,
+                    },
+                },
+            },
+        },
+        after: {
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes: after,
+                    },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: ids,
+                    },
+                },
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/translate-shapes.ts b/libs/components/board-commands/src/translate-shapes.ts
new file mode 100644
index 000000000..d0dbe28c5
--- /dev/null
+++ b/libs/components/board-commands/src/translate-shapes.ts
@@ -0,0 +1,113 @@
+import { Vec } from '@tldraw/vec';
+import { TLDR } from '@toeverything/components/board-state';
+import type {
+    TldrawCommand,
+    PagePartial,
+} from '@toeverything/components/board-types';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export function translateShapes(
+    app: TldrawApp,
+    ids: string[],
+    delta: number[]
+): TldrawCommand {
+    const { currentPageId, selectedIds } = app;
+
+    // Clear session cache
+    app.rotationInfo.selectedIds = [...selectedIds];
+
+    const before: PagePartial = {
+        shapes: {},
+        bindings: {},
+    };
+
+    const after: PagePartial = {
+        shapes: {},
+        bindings: {},
+    };
+
+    const idsToMutate = ids
+        .flatMap(id => {
+            const shape = app.getShape(id);
+            return shape.children ? shape.children : shape.id;
+        })
+        .filter(id => !app.getShape(id).isLocked);
+
+    const change = TLDR.mutate_shapes(
+        app.state,
+        idsToMutate,
+        shape => ({
+            point: Vec.toFixed(Vec.add(shape.point, delta)),
+        }),
+        currentPageId
+    );
+
+    before.shapes = change.before;
+    after.shapes = change.after;
+
+    // Delete bindings from nudged shapes, unless both bound and bound-to shapes are selected
+    const bindingsToDelete = TLDR.get_bindings(app.state, currentPageId).filter(
+        binding => ids.includes(binding.fromId) && !ids.includes(binding.toId)
+    );
+
+    bindingsToDelete.forEach(binding => {
+        before.bindings[binding.id] = binding;
+        after.bindings[binding.id] = undefined;
+
+        for (const id of [binding.toId, binding.fromId]) {
+            // Let's also look at the bound shape...
+            const shape = app.getShape(id);
+
+            if (!shape.handles) continue;
+
+            // If the bound shape has a handle that references the deleted binding, delete that reference
+
+            Object.values(shape.handles)
+                .filter(handle => handle.bindingId === binding.id)
+                .forEach(handle => {
+                    before.shapes[id] = {
+                        ...before.shapes[id],
+                        handles: {
+                            ...before.shapes[id]?.handles,
+                            [handle.id]: { bindingId: binding.id },
+                        },
+                    };
+                    after.shapes[id] = {
+                        ...after.shapes[id],
+                        handles: {
+                            ...after.shapes[id]?.handles,
+                            [handle.id]: { bindingId: undefined },
+                        },
+                    };
+                });
+        }
+    });
+
+    return {
+        id: 'translate',
+        before: {
+            document: {
+                pages: {
+                    [currentPageId]: before,
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: ids,
+                    },
+                },
+            },
+        },
+        after: {
+            document: {
+                pages: {
+                    [currentPageId]: after,
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: ids,
+                    },
+                },
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/ungroup-shapes.ts b/libs/components/board-commands/src/ungroup-shapes.ts
new file mode 100644
index 000000000..bbf1ee0a1
--- /dev/null
+++ b/libs/components/board-commands/src/ungroup-shapes.ts
@@ -0,0 +1,170 @@
+import { TLDR } from '@toeverything/components/board-state';
+import type {
+    Patch,
+    GroupShape,
+    TDBinding,
+    TDShape,
+    TldrawCommand,
+} from '@toeverything/components/board-types';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export function ungroupShapes(
+    app: TldrawApp,
+    selectedIds: string[],
+    groupShapes: GroupShape[],
+    pageId: string
+): TldrawCommand | undefined {
+    const { bindings } = app;
+
+    const beforeShapes: Record<string, Patch<TDShape | undefined>> = {};
+    const afterShapes: Record<string, Patch<TDShape | undefined>> = {};
+
+    const beforeBindings: Record<string, Patch<TDBinding | undefined>> = {};
+    const afterBindings: Record<string, Patch<TDBinding | undefined>> = {};
+
+    const beforeSelectedIds = selectedIds;
+    const afterSelectedIds = selectedIds.filter(
+        id => !groupShapes.find(shape => shape.id === id)
+    );
+
+    // The group shape
+    groupShapes
+        .filter(shape => !shape.isLocked)
+        .forEach(groupShape => {
+            const shapesToReparent: TDShape[] = [];
+            const deletedGroupIds: string[] = [];
+
+            // Remove the group shape in the next state
+            beforeShapes[groupShape.id] = groupShape;
+            afterShapes[groupShape.id] = undefined;
+
+            // Select its children in the next state
+            groupShape.children.forEach(id => {
+                afterSelectedIds.push(id);
+                const shape = app.getShape(id, pageId);
+                shapesToReparent.push(shape);
+            });
+
+            // We'll start placing the shapes at this childIndex
+            const startingChildIndex = groupShape.childIndex;
+
+            // And we'll need to fit them under this child index
+            const endingChildIndex = TLDR.get_child_index_above(
+                app.state,
+                groupShape.id,
+                pageId
+            );
+
+            const step =
+                (endingChildIndex - startingChildIndex) /
+                shapesToReparent.length;
+
+            // An array of shapes in order by their child index
+            const sortedShapes = shapesToReparent.sort(
+                (a, b) => a.childIndex - b.childIndex
+            );
+
+            // Reparent shapes to the page
+            sortedShapes.forEach((shape, index) => {
+                beforeShapes[shape.id] = {
+                    parentId: shape.parentId,
+                    childIndex: shape.childIndex,
+                };
+
+                afterShapes[shape.id] = {
+                    parentId: pageId,
+                    childIndex: startingChildIndex + step * index,
+                };
+            });
+
+            // We also need to delete bindings that reference the deleted shapes
+            bindings
+                .filter(
+                    binding =>
+                        binding.toId === groupShape.id ||
+                        binding.fromId === groupShape.id
+                )
+                .forEach(binding => {
+                    for (const id of [binding.toId, binding.fromId]) {
+                        // If the binding references the deleted group...
+                        if (afterShapes[id] === undefined) {
+                            // Delete the binding
+                            beforeBindings[binding.id] = binding;
+                            afterBindings[binding.id] = undefined;
+
+                            // Let's also look each the bound shape...
+                            const shape = app.getShape(id, pageId);
+
+                            // If the bound shape has a handle that references the deleted binding...
+                            if (shape.handles) {
+                                Object.values(shape.handles)
+                                    .filter(
+                                        handle =>
+                                            handle.bindingId === binding.id
+                                    )
+                                    .forEach(handle => {
+                                        // Save the binding reference in the before patch
+                                        beforeShapes[id] = {
+                                            ...beforeShapes[id],
+                                            handles: {
+                                                ...beforeShapes[id]?.handles,
+                                                [handle.id]: {
+                                                    bindingId: binding.id,
+                                                },
+                                            },
+                                        };
+
+                                        // Unless we're currently deleting the shape, remove the
+                                        // binding reference from the after patch
+                                        if (!deletedGroupIds.includes(id)) {
+                                            afterShapes[id] = {
+                                                ...afterShapes[id],
+                                                handles: {
+                                                    ...afterShapes[id]?.handles,
+                                                    [handle.id]: {
+                                                        bindingId: undefined,
+                                                    },
+                                                },
+                                            };
+                                        }
+                                    });
+                            }
+                        }
+                    }
+                });
+        });
+
+    return {
+        id: 'ungroup',
+        before: {
+            document: {
+                pages: {
+                    [pageId]: {
+                        shapes: beforeShapes,
+                        bindings: beforeBindings,
+                    },
+                },
+                pageStates: {
+                    [pageId]: {
+                        selectedIds: beforeSelectedIds,
+                    },
+                },
+            },
+        },
+        after: {
+            document: {
+                pages: {
+                    [pageId]: {
+                        shapes: afterShapes,
+                        bindings: beforeBindings,
+                    },
+                },
+                pageStates: {
+                    [pageId]: {
+                        selectedIds: afterSelectedIds,
+                    },
+                },
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/src/update-shapes.ts b/libs/components/board-commands/src/update-shapes.ts
new file mode 100644
index 000000000..d5317b4c3
--- /dev/null
+++ b/libs/components/board-commands/src/update-shapes.ts
@@ -0,0 +1,43 @@
+import type {
+    TldrawCommand,
+    TDShape,
+} from '@toeverything/components/board-types';
+import { TLDR } from '@toeverything/components/board-state';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export function updateShapes(
+    app: TldrawApp,
+    updates: ({ id: string } & Partial<TDShape>)[],
+    pageId: string
+): TldrawCommand {
+    const ids = updates.map(update => update.id);
+
+    const change = TLDR.mutate_shapes(
+        app.state,
+        ids.filter(id => !app.getShape(id, pageId).isLocked),
+        (shape, i) => updates[i],
+        pageId
+    );
+
+    return {
+        id: 'update',
+        before: {
+            document: {
+                pages: {
+                    [pageId]: {
+                        shapes: change.before,
+                    },
+                },
+            },
+        },
+        after: {
+            document: {
+                pages: {
+                    [pageId]: {
+                        shapes: change.after,
+                    },
+                },
+            },
+        },
+    };
+}
diff --git a/libs/components/board-commands/tsconfig.json b/libs/components/board-commands/tsconfig.json
new file mode 100644
index 000000000..dce3dae9a
--- /dev/null
+++ b/libs/components/board-commands/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/components/board-commands/tsconfig.lib.json b/libs/components/board-commands/tsconfig.lib.json
new file mode 100644
index 000000000..6a4378740
--- /dev/null
+++ b/libs/components/board-commands/tsconfig.lib.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"]
+}
diff --git a/libs/components/board-commands/tsconfig.spec.json b/libs/components/board-commands/tsconfig.spec.json
new file mode 100644
index 000000000..24b3ac659
--- /dev/null
+++ b/libs/components/board-commands/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+    "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"
+    ]
+}
diff --git a/libs/components/board-draw/.babelrc b/libs/components/board-draw/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/components/board-draw/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/components/board-draw/.eslintrc.json b/libs/components/board-draw/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/components/board-draw/.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": {}
+        }
+    ]
+}
diff --git a/libs/components/board-draw/README.md b/libs/components/board-draw/README.md
new file mode 100644
index 000000000..946854736
--- /dev/null
+++ b/libs/components/board-draw/README.md
@@ -0,0 +1,7 @@
+# components-board-draw
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test components-board-draw` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/components/board-draw/jest.config.ts b/libs/components/board-draw/jest.config.ts
new file mode 100644
index 000000000..c689c4139
--- /dev/null
+++ b/libs/components/board-draw/jest.config.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+    displayName: 'components-board-draw',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/components/board-draw',
+};
diff --git a/libs/components/board-draw/package.json b/libs/components/board-draw/package.json
new file mode 100644
index 000000000..d8cd3a1e9
--- /dev/null
+++ b/libs/components/board-draw/package.json
@@ -0,0 +1,14 @@
+{
+    "name": "@toeverything/components/board-draw",
+    "version": "0.0.1",
+    "license": "MIT",
+    "dependencies": {
+        "@mui/icons-material": "^5.8.0",
+        "@tldraw/core": "^1.12.0",
+        "@tldraw/intersect": "^1.7.1",
+        "@tldraw/vec": "^1.7.0",
+        "mobx": "^6.6.0",
+        "react-error-boundary": "^3.1.4",
+        "react-hotkeys-hook": "^3.4.6"
+    }
+}
diff --git a/libs/components/board-draw/project.json b/libs/components/board-draw/project.json
new file mode 100644
index 000000000..7e7f851fa
--- /dev/null
+++ b/libs/components/board-draw/project.json
@@ -0,0 +1,45 @@
+{
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/components/board-draw/src",
+    "projectType": "library",
+    "tags": ["components"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/components/board-draw",
+                "tsConfig": "libs/components/board-draw/tsconfig.lib.json",
+                "project": "libs/components/board-draw/package.json",
+                "entryFile": "libs/components/board-draw/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "libs/rollup.config.cjs",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/components/board-draw/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/components/board-draw/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/components/board-draw"],
+            "options": {
+                "jestConfig": "libs/components/board-draw/jest.config.ts",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/components/board-draw/src/TlDraw.tsx b/libs/components/board-draw/src/TlDraw.tsx
new file mode 100644
index 000000000..5ade114f4
--- /dev/null
+++ b/libs/components/board-draw/src/TlDraw.tsx
@@ -0,0 +1,550 @@
+/* eslint-disable max-lines */
+import * as React from 'react';
+import { Renderer } from '@tldraw/core';
+import { styled } from '@toeverything/components/ui';
+import {
+    TDDocument,
+    TDStatus,
+    GRID_SIZE,
+    TDMeta,
+} from '@toeverything/components/board-types';
+import {
+    TldrawApp,
+    TldrawAppCtorProps,
+    TLDR,
+} from '@toeverything/components/board-state';
+import {
+    TldrawContext,
+    useStylesheet,
+    useKeyboardShortcuts,
+    useTldrawApp,
+} from './hooks';
+import { shapeUtils } from '@toeverything/components/board-shapes';
+import { ToolsPanel } from './components/tools-panel';
+// import { TopPanel } from '~components/TopPanel';
+import { ContextMenu } from './components/context-menu';
+// import { FocusButton } from '~components/FocusButton';
+import { Loading } from './components/loading';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ErrorFallback } from './components/error-fallback';
+import { ZoomBar } from './components/zoom-bar';
+import { CommandPanel } from './components/command-panel';
+
+export interface TldrawProps extends TldrawAppCtorProps {
+    /**
+     * (optional) If provided, the component will load / persist state under this key.
+     */
+    id?: string;
+
+    /**
+     * (optional) The document to load or update from.
+     */
+    document?: TDDocument;
+
+    /**
+     * (optional) The current page id.
+     */
+    currentPageId?: string;
+
+    /**
+     * (optional) Whether the editor should immediately receive focus. Defaults to true.
+     */
+    autofocus?: boolean;
+
+    /**
+     * (optional) Whether to show the menu UI.
+     */
+    showMenu?: boolean;
+
+    /**
+     * (optional) Whether to show the multiplayer menu.
+     */
+    showMultiplayerMenu?: boolean;
+    /**
+     * (optional) Whether to show the pages UI.
+     */
+    showPages?: boolean;
+
+    /**
+     * (optional) Whether to show the styles UI.
+     */
+    showStyles?: boolean;
+
+    /**
+     * (optional) Whether to show the zoom UI.
+     */
+    showZoom?: boolean;
+
+    /**
+     * (optional) Whether to show the tools UI.
+     */
+    showTools?: boolean;
+
+    /**
+     * (optional) Whether to show a sponsor link for Tldraw.
+     */
+    showSponsorLink?: boolean;
+
+    /**
+     * (optional) Whether to show the UI.
+     */
+    showUI?: boolean;
+
+    /**
+     * (optional) Whether to the document should be read only.
+     */
+    readOnly?: boolean;
+
+    /**
+     * (optional) Whether to to show the app's dark mode UI.
+     */
+    darkMode?: boolean;
+
+    /**
+     * (optional) If provided, image/video componnets will be disabled.
+     *
+     * Warning: Keeping this enabled for multiplayer applications without provifing a storage
+     * bucket based solution will cause massive base64 string to be written to the liveblocks room.
+     */
+    disableAssets?: boolean;
+}
+
+export function Tldraw({
+    id,
+    document,
+    currentPageId,
+    autofocus = true,
+    showMenu = true,
+    showMultiplayerMenu = true,
+    showPages = true,
+    showTools = true,
+    showZoom = true,
+    showStyles = true,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    showUI = true,
+    readOnly = false,
+    disableAssets = false,
+    darkMode = false,
+    showSponsorLink,
+    callbacks,
+    commands,
+    getSession,
+    tools,
+}: TldrawProps) {
+    const [sId, set_sid] = React.useState(id);
+
+    // Create a new app when the component mounts.
+    const [app, setApp] = React.useState(() => {
+        const app = new TldrawApp({
+            id,
+            callbacks,
+            commands,
+            getSession,
+            tools,
+        });
+        return app;
+    });
+
+    // Create a new app if the `id` prop changes.
+    React.useLayoutEffect(() => {
+        if (id === sId) return;
+        const newApp = new TldrawApp({
+            id,
+            callbacks,
+            commands,
+            getSession,
+            tools,
+        });
+
+        set_sid(id);
+
+        setApp(newApp);
+    }, [sId, id]);
+
+    // Update the document if the `document` prop changes but the ids,
+    // are the same, or else load a new document if the ids are different.
+    React.useEffect(() => {
+        if (!document) return;
+
+        if (document.id === app.document.id) {
+            app.updateDocument(document);
+        } else {
+            app.loadDocument(document);
+        }
+    }, [document, app]);
+
+    // Disable assets when the `disableAssets` prop changes.
+    React.useEffect(() => {
+        app.setDisableAssets(disableAssets);
+    }, [app, disableAssets]);
+
+    // Change the page when the `currentPageId` prop changes.
+    React.useEffect(() => {
+        if (!currentPageId) return;
+        app.changePage(currentPageId);
+    }, [currentPageId, app]);
+
+    // Toggle the app's readOnly mode when the `readOnly` prop changes.
+    React.useEffect(() => {
+        app.readOnly = readOnly;
+    }, [app, readOnly]);
+
+    // Toggle the app's darkMode when the `darkMode` prop changes.
+    React.useEffect(() => {
+        if (darkMode !== app.settings.isDarkMode) {
+            app.toggleDarkMode();
+        }
+    }, [app, darkMode]);
+
+    // Update the app's callbacks when any callback changes.
+    React.useEffect(() => {
+        app.callbacks = callbacks || {};
+    }, [app, callbacks]);
+
+    React.useLayoutEffect(() => {
+        if (typeof window === 'undefined') return;
+        if (!window.document?.fonts) return;
+
+        function refreshBoundingBoxes() {
+            app.refreshBoundingBoxes();
+        }
+        window.document.fonts.addEventListener(
+            'loadingdone',
+            refreshBoundingBoxes
+        );
+        return () => {
+            window.document.fonts.removeEventListener(
+                'loadingdone',
+                refreshBoundingBoxes
+            );
+        };
+    }, [app]);
+
+    // Use the `key` to ensure that new selector hooks are made when the id changes
+    return (
+        <TldrawContext.Provider value={app}>
+            <InnerTldraw
+                key={sId || 'Tldraw'}
+                id={sId}
+                autofocus={autofocus}
+                showPages={showPages}
+                showMenu={showMenu}
+                showMultiplayerMenu={showMultiplayerMenu}
+                showStyles={showStyles}
+                showZoom={showZoom}
+                showTools={showTools}
+                showUI={showUI}
+                showSponsorLink={showSponsorLink}
+                readOnly={readOnly}
+            />
+        </TldrawContext.Provider>
+    );
+}
+
+interface InnerTldrawProps {
+    id?: string;
+    autofocus: boolean;
+    readOnly: boolean;
+    showPages: boolean;
+    showMenu: boolean;
+    showMultiplayerMenu: boolean;
+    showZoom: boolean;
+    showStyles: boolean;
+    showUI: boolean;
+    showTools: boolean;
+    showSponsorLink?: boolean;
+}
+
+const InnerTldraw = React.memo(function InnerTldraw({
+    id,
+    autofocus,
+    showPages,
+    showMenu,
+    showMultiplayerMenu,
+    showZoom,
+    showStyles,
+    showTools,
+    showSponsorLink,
+    readOnly,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    showUI,
+}: InnerTldrawProps) {
+    const app = useTldrawApp();
+
+    const rWrapper = React.useRef<HTMLDivElement>(null);
+
+    const state = app.useStore();
+
+    const { document, settings, appState, room } = state;
+    const isSelecting = state.appState.activeTool === 'select';
+
+    const page = document.pages[appState.currentPageId];
+    const pageState = document.pageStates[page.id];
+    const assets = document.assets;
+    const { selectedIds } = pageState;
+
+    const isHideBoundsShape =
+        selectedIds.length === 1 &&
+        page.shapes[selectedIds[0]] &&
+        TLDR.get_shape_util(page.shapes[selectedIds[0]].type).hideBounds;
+
+    const isHideResizeHandlesShape =
+        selectedIds.length === 1 &&
+        page.shapes[selectedIds[0]] &&
+        TLDR.get_shape_util(page.shapes[selectedIds[0]].type).hideResizeHandles;
+
+    // Custom rendering meta, with dark mode for shapes
+    const meta: TDMeta = React.useMemo(() => {
+        return { isDarkMode: settings.isDarkMode, app };
+    }, [settings.isDarkMode, app]);
+
+    const showDashedBrush = settings.isCadSelectMode
+        ? !appState.selectByContain
+        : appState.selectByContain;
+
+    // Custom theme, based on darkmode
+    const theme = React.useMemo(() => {
+        const { selectByContain } = appState;
+        const { isDarkMode, isCadSelectMode } = settings;
+
+        if (isDarkMode) {
+            const brushBase = isCadSelectMode
+                ? selectByContain
+                    ? '69, 155, 255'
+                    : '105, 209, 73'
+                : '180, 180, 180';
+            return {
+                brushFill: `rgba(${brushBase}, ${
+                    isCadSelectMode ? 0.08 : 0.05
+                })`,
+                brushStroke: `rgba(${brushBase}, ${
+                    isCadSelectMode ? 0.5 : 0.25
+                })`,
+                brushDashStroke: `rgba(${brushBase}, .6)`,
+                selected: 'rgba(38, 150, 255, 1.000)',
+                selectFill: 'rgba(38, 150, 255, 0.05)',
+                background: '#212529',
+                foreground: '#49555f',
+            };
+        }
+
+        const brushBase = isCadSelectMode
+            ? selectByContain
+                ? '0, 89, 242'
+                : '51, 163, 23'
+            : '0,0,0';
+
+        return {
+            brushFill: `rgba(${brushBase}, ${isCadSelectMode ? 0.08 : 0.05})`,
+            brushStroke: `rgba(${brushBase}, ${isCadSelectMode ? 0.4 : 0.25})`,
+            brushDashStroke: `rgba(${brushBase}, .6)`,
+            background: '#fff',
+        };
+    }, [
+        settings.isDarkMode,
+        settings.isCadSelectMode,
+        appState.selectByContain,
+    ]);
+
+    const isInSession = app.session !== undefined;
+
+    // Hide bounds when not using the select tool, or when the only selected shape has handles
+    const hideBounds =
+        (isInSession && app.session?.constructor.name !== 'BrushSession') ||
+        !isSelecting ||
+        isHideBoundsShape ||
+        !!pageState.editingId;
+
+    // Hide bounds when not using the select tool, or when in session
+    const hideHandles = isInSession || !isSelecting;
+
+    // Hide indicators when not using the select tool, or when in session
+    const hideIndicators =
+        (isInSession && state.appState.status !== TDStatus.Brushing) ||
+        !isSelecting;
+
+    const hideCloneHandles =
+        isInSession ||
+        !isSelecting ||
+        !settings.showCloneHandles ||
+        pageState.camera.zoom < 0.2;
+    return (
+        <StyledLayout
+            ref={rWrapper}
+            tabIndex={-0}
+            penColor={app?.appState?.currentStyle?.stroke}
+        >
+            <Loading />
+            <OneOff focusableRef={rWrapper} autofocus={autofocus} />
+            <ContextMenu>
+                <ErrorBoundary FallbackComponent={ErrorFallback}>
+                    <Renderer
+                        id={id}
+                        containerRef={rWrapper}
+                        shapeUtils={shapeUtils}
+                        page={page}
+                        pageState={pageState}
+                        assets={assets}
+                        snapLines={appState.snapLines}
+                        eraseLine={appState.laserLine}
+                        grid={GRID_SIZE}
+                        users={room?.users}
+                        userId={room?.userId}
+                        theme={theme}
+                        meta={meta as unknown as Record<string, unknown>}
+                        hideBounds={hideBounds}
+                        hideHandles={hideHandles}
+                        hideResizeHandles={isHideResizeHandlesShape}
+                        hideIndicators={hideIndicators}
+                        hideBindingHandles={!settings.showBindingHandles}
+                        hideCloneHandles={hideCloneHandles}
+                        hideRotateHandles={!settings.showRotateHandles}
+                        hideGrid={!settings.showGrid}
+                        showDashedBrush={showDashedBrush}
+                        performanceMode={app.session?.performanceMode}
+                        onPinchStart={app.onPinchStart}
+                        onPinchEnd={app.onPinchEnd}
+                        onPinch={app.onPinch}
+                        onPan={app.onPan}
+                        onZoom={app.onZoom}
+                        onPointerDown={app.onPointerDown}
+                        onPointerMove={app.onPointerMove}
+                        onPointerUp={app.onPointerUp}
+                        onPointCanvas={app.onPointCanvas}
+                        onDoubleClickCanvas={app.onDoubleClickCanvas}
+                        onRightPointCanvas={app.onRightPointCanvas}
+                        onDragCanvas={app.onDragCanvas}
+                        onReleaseCanvas={app.onReleaseCanvas}
+                        onPointShape={app.onPointShape}
+                        onDoubleClickShape={app.onDoubleClickShape}
+                        onRightPointShape={app.onRightPointShape}
+                        onDragShape={app.onDragShape}
+                        onHoverShape={app.onHoverShape}
+                        onUnhoverShape={app.onUnhoverShape}
+                        onReleaseShape={app.onReleaseShape}
+                        onPointBounds={app.onPointBounds}
+                        onDoubleClickBounds={app.onDoubleClickBounds}
+                        onRightPointBounds={app.onRightPointBounds}
+                        onDragBounds={app.onDragBounds}
+                        onHoverBounds={app.onHoverBounds}
+                        onUnhoverBounds={app.onUnhoverBounds}
+                        onReleaseBounds={app.onReleaseBounds}
+                        onPointBoundsHandle={app.onPointBoundsHandle}
+                        onDoubleClickBoundsHandle={
+                            app.onDoubleClickBoundsHandle
+                        }
+                        onRightPointBoundsHandle={app.onRightPointBoundsHandle}
+                        onDragBoundsHandle={app.onDragBoundsHandle}
+                        onHoverBoundsHandle={app.onHoverBoundsHandle}
+                        onUnhoverBoundsHandle={app.onUnhoverBoundsHandle}
+                        onReleaseBoundsHandle={app.onReleaseBoundsHandle}
+                        onPointHandle={app.onPointHandle}
+                        onDoubleClickHandle={app.onDoubleClickHandle}
+                        onRightPointHandle={app.onRightPointHandle}
+                        onDragHandle={app.onDragHandle}
+                        onHoverHandle={app.onHoverHandle}
+                        onUnhoverHandle={app.onUnhoverHandle}
+                        onReleaseHandle={app.onReleaseHandle}
+                        onError={app.onError}
+                        onRenderCountChange={app.onRenderCountChange}
+                        onShapeChange={app.onShapeChange}
+                        onShapeBlur={app.onShapeBlur}
+                        onShapeClone={app.onShapeClone}
+                        onBoundsChange={app.updateBounds}
+                        onKeyDown={app.onKeyDown}
+                        onKeyUp={app.onKeyUp}
+                        onDragOver={app.onDragOver}
+                        onDrop={app.onDrop}
+                    />
+                </ErrorBoundary>
+            </ContextMenu>
+            {showUI && (
+                <StyledUI>
+                    <>
+                        <StyledSpacer />
+                        {showTools && !readOnly && <ToolsPanel app={app} />}
+                        <CommandPanel app={app} />
+                    </>
+                </StyledUI>
+            )}
+            <ZoomBar />
+        </StyledLayout>
+    );
+});
+
+const OneOff = React.memo(function OneOff({
+    focusableRef,
+    autofocus,
+}: {
+    autofocus?: boolean;
+    focusableRef: React.RefObject<HTMLDivElement>;
+}) {
+    useKeyboardShortcuts(focusableRef);
+    useStylesheet();
+
+    React.useEffect(() => {
+        if (autofocus) {
+            focusableRef.current?.focus();
+        }
+    }, [autofocus]);
+
+    return null;
+});
+
+const StyledLayout = styled('div')<{ penColor: string }>(
+    ({ theme, penColor }) => {
+        return {
+            position: 'relative',
+            height: '100%',
+            width: '100vw',
+            minHeight: 0,
+            minWidth: 0,
+            maxHeight: '100%',
+            maxWidth: '100%',
+            overflow: 'hidden',
+            boxSizing: 'border-box',
+            outline: 'none',
+
+            '& .tl-container': {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                height: '100%',
+                width: '100%',
+                zIndex: 1,
+                '.tl-erase-line': {
+                    fill: penColor,
+                },
+            },
+
+            '& input, textarea, button, select, label, button': {
+                webkitTouchCallout: 'none',
+                webkitUserSelect: 'none',
+                WebkitTapHighlightColor: 'transparent',
+                tapHighlightColor: 'transparent',
+            },
+        };
+    }
+);
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const StyledUI = styled('div')({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    height: '100%',
+    width: '100%',
+    padding: '8px 8px 0 8px',
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    pointerEvents: 'none',
+    zIndex: 2,
+    '& > *': {
+        pointerEvents: 'all',
+    },
+});
+
+const StyledSpacer = styled('div')({
+    flexGrow: 2,
+});
diff --git a/libs/components/board-draw/src/components/command-panel/BorderColorConfig.tsx b/libs/components/board-draw/src/components/command-panel/BorderColorConfig.tsx
new file mode 100644
index 000000000..9810dcaf3
--- /dev/null
+++ b/libs/components/board-draw/src/components/command-panel/BorderColorConfig.tsx
@@ -0,0 +1,70 @@
+import type { FC } from 'react';
+import type { TldrawApp } from '@toeverything/components/board-state';
+import type { TDShape } from '@toeverything/components/board-types';
+import { Popover, Tooltip, IconButton } from '@toeverything/components/ui';
+import {
+    BorderColorNoneIcon,
+    BorderColorDuotoneIcon,
+} from '@toeverything/components/icons';
+import { countBy, maxBy } from '@toeverything/utils';
+import { getShapeIds } from './utils';
+import { Palette } from '../palette';
+
+interface BorderColorConfigProps {
+    app: TldrawApp;
+    shapes: TDShape[];
+}
+
+const _colors = [
+    'none',
+    '#F1675E',
+    '#FF7F22',
+    '#FFCB45',
+    '#40DF9B',
+    '#13D9E3',
+    '#3E6FDB',
+    '#7352F1',
+    '#3A4C5C',
+    '#FFFFFF',
+];
+
+const _getIconRenderColor = (shapes: TDShape[]) => {
+    const counted = countBy(shapes, shape => shape.style.stroke);
+    const max = maxBy(Object.entries(counted), ([c, n]) => n);
+    return max[0];
+};
+
+export const BorderColorConfig: FC<BorderColorConfigProps> = ({
+    app,
+    shapes,
+}) => {
+    const setBorderColor = (color: string) => {
+        app.style({ stroke: color }, getShapeIds(shapes));
+    };
+
+    const iconColor = _getIconRenderColor(shapes);
+
+    return (
+        <Popover
+            trigger="hover"
+            placement="bottom-start"
+            content={
+                <Palette
+                    colors={_colors}
+                    selected={iconColor}
+                    onSelect={setBorderColor}
+                />
+            }
+        >
+            <Tooltip content="Border Color" placement="top-start">
+                <IconButton>
+                    {iconColor === 'none' ? (
+                        <BorderColorNoneIcon />
+                    ) : (
+                        <BorderColorDuotoneIcon style={{ color: iconColor }} />
+                    )}
+                </IconButton>
+            </Tooltip>
+        </Popover>
+    );
+};
diff --git a/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx b/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx
new file mode 100644
index 000000000..3fc6e98f8
--- /dev/null
+++ b/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx
@@ -0,0 +1,105 @@
+import type { FC } from 'react';
+import { Fragment } from 'react';
+import { TldrawApp, TLDR } from '@toeverything/components/board-state';
+import { Popover, styled, Divider } from '@toeverything/components/ui';
+import { getAnchor, useConfig } from './utils';
+import { BorderColorConfig } from './BorderColorConfig';
+import { FillColorConfig } from './FillColorConfig';
+import { FontSizeConfig } from './FontSizeConfig';
+import { StrokeLineStyleConfig } from './stroke-line-style-config';
+import { Group, UnGroup } from './GroupOperation';
+import { DeleteShapes } from './DeleteOperation';
+
+export const CommandPanel: FC<{ app: TldrawApp }> = ({ app }) => {
+    const state = app.useStore();
+    const bounds = TLDR.get_selected_bounds(state);
+    const point = bounds
+        ? app.getScreenPoint([bounds.minX, bounds.minY])
+        : undefined;
+
+    const anchor = getAnchor({
+        x: point?.[0] || 0,
+        y: (point?.[1] || 0) + 40,
+        width: bounds?.width || 0,
+        height: bounds?.height || 0,
+    });
+
+    const config = useConfig(app);
+
+    const configNodes = {
+        stroke: config.stroke.selectedShapes.length ? (
+            <Fragment key="stroke">
+                <StrokeLineStyleConfig
+                    app={app}
+                    shapes={config.stroke.selectedShapes}
+                />
+                <BorderColorConfig
+                    app={app}
+                    shapes={config.stroke.selectedShapes}
+                />
+            </Fragment>
+        ) : null,
+        fill: config.fill.selectedShapes.length ? (
+            <FillColorConfig
+                key="fill"
+                app={app}
+                shapes={config.fill.selectedShapes}
+            />
+        ) : null,
+        font: config.font.selectedShapes.length ? (
+            <FontSizeConfig
+                key="font"
+                app={app}
+                shapes={config.font.selectedShapes}
+            />
+        ) : null,
+        group: config.group.selectedShapes.length ? (
+            <Group key="group" app={app} shapes={config.group.selectedShapes} />
+        ) : null,
+        ungroup: config.ungroup.selectedShapes.length ? (
+            <UnGroup
+                key="ungroup"
+                app={app}
+                shapes={config.ungroup.selectedShapes}
+            />
+        ) : null,
+        delete: (
+            <DeleteShapes
+                key="deleteShapes"
+                app={app}
+                shapes={config.deleteShapes.selectedShapes}
+            />
+        ),
+    };
+
+    const nodes = Object.entries(configNodes).filter(([key, node]) => !!node);
+
+    return nodes.length ? (
+        <Popover
+            trigger="click"
+            visible={!!point}
+            anchor={anchor}
+            popoverDirection="none"
+            content={
+                <PopoverContainer>
+                    {nodes.map(([key, node], idx, arr) => {
+                        return (
+                            <Fragment key={key}>
+                                {node}
+                                {idx < arr.length - 1 ? (
+                                    <div>
+                                        <Divider orientation="vertical" />
+                                    </div>
+                                ) : null}
+                            </Fragment>
+                        );
+                    })}
+                </PopoverContainer>
+            }
+        />
+    ) : null;
+};
+
+const PopoverContainer = styled('div')({
+    display: 'flex',
+});
diff --git a/libs/components/board-draw/src/components/command-panel/DeleteOperation.tsx b/libs/components/board-draw/src/components/command-panel/DeleteOperation.tsx
new file mode 100644
index 000000000..c93d02254
--- /dev/null
+++ b/libs/components/board-draw/src/components/command-panel/DeleteOperation.tsx
@@ -0,0 +1,24 @@
+import type { FC } from 'react';
+import type { TldrawApp } from '@toeverything/components/board-state';
+import type { TDShape } from '@toeverything/components/board-types';
+import { IconButton, Tooltip } from '@toeverything/components/ui';
+import { DeleteCashBinIcon } from '@toeverything/components/icons';
+import { getShapeIds } from './utils';
+
+interface DeleteShapesProps {
+    app: TldrawApp;
+    shapes: TDShape[];
+}
+
+export const DeleteShapes: FC<DeleteShapesProps> = ({ app, shapes }) => {
+    const deleteShapes = () => {
+        app.delete(getShapeIds(shapes));
+    };
+    return (
+        <Tooltip content="Delete">
+            <IconButton onClick={deleteShapes}>
+                <DeleteCashBinIcon />
+            </IconButton>
+        </Tooltip>
+    );
+};
diff --git a/libs/components/board-draw/src/components/command-panel/FillColorConfig.tsx b/libs/components/board-draw/src/components/command-panel/FillColorConfig.tsx
new file mode 100644
index 000000000..1c8ce3660
--- /dev/null
+++ b/libs/components/board-draw/src/components/command-panel/FillColorConfig.tsx
@@ -0,0 +1,90 @@
+import type { FC } from 'react';
+import type { TldrawApp } from '@toeverything/components/board-state';
+import type { TDShape } from '@toeverything/components/board-types';
+import {
+    Popover,
+    Tooltip,
+    IconButton,
+    useTheme,
+} from '@toeverything/components/ui';
+import {
+    ShapeColorNoneIcon,
+    ShapeColorDuotoneIcon,
+} from '@toeverything/components/icons';
+import { countBy, maxBy } from '@toeverything/utils';
+import { getShapeIds } from './utils';
+import { Palette } from '../palette';
+
+interface BorderColorConfigProps {
+    app: TldrawApp;
+    shapes: TDShape[];
+}
+
+type ColorType = 'none' | string;
+
+const _colors: ColorType[] = [
+    'none',
+    '#F1675E',
+    '#FF7F22',
+    '#FFCB45',
+    '#40DF9B',
+    '#13D9E3',
+    '#3E6FDB',
+    '#7352F1',
+    '#3A4C5C',
+    '#FFFFFF',
+];
+
+const _getIconRenderColor = (shapes: TDShape[]) => {
+    const counted = countBy(shapes, shape => shape.style.fill);
+    const max = maxBy(Object.entries(counted), ([c, n]) => n);
+    return max[0];
+};
+
+export const FillColorConfig: FC<BorderColorConfigProps> = ({
+    app,
+    shapes,
+}) => {
+    const theme = useTheme();
+    const setFillColor = (color: ColorType) => {
+        app.style(
+            { fill: color, isFilled: color !== 'none' },
+            getShapeIds(shapes)
+        );
+    };
+
+    const iconColor = _getIconRenderColor(shapes);
+
+    return (
+        <Popover
+            trigger="hover"
+            placement="bottom-start"
+            content={
+                <Palette
+                    colors={_colors}
+                    selected={iconColor}
+                    onSelect={setFillColor}
+                />
+            }
+        >
+            <Tooltip content="Fill Color" placement="top-start">
+                <IconButton>
+                    {iconColor === 'none' ? (
+                        <ShapeColorNoneIcon />
+                    ) : (
+                        <ShapeColorDuotoneIcon
+                            style={{
+                                color: iconColor,
+                                border:
+                                    iconColor === '#FFFFFF'
+                                        ? `1px solid ${theme.affine.palette.tagHover}`
+                                        : 0,
+                                borderRadius: '5px',
+                            }}
+                        />
+                    )}
+                </IconButton>
+            </Tooltip>
+        </Popover>
+    );
+};
diff --git a/libs/components/board-draw/src/components/command-panel/FontSizeConfig.tsx b/libs/components/board-draw/src/components/command-panel/FontSizeConfig.tsx
new file mode 100644
index 000000000..86d23a433
--- /dev/null
+++ b/libs/components/board-draw/src/components/command-panel/FontSizeConfig.tsx
@@ -0,0 +1,107 @@
+import type { FC } from 'react';
+import type { TldrawApp } from '@toeverything/components/board-state';
+import type { TDShape } from '@toeverything/components/board-types';
+import { FontSizeStyle } from '@toeverything/components/board-types';
+import {
+    Popover,
+    Tooltip,
+    IconButton,
+    styled,
+} from '@toeverything/components/ui';
+import {
+    TextFontIcon,
+    HeadingOneIcon,
+    HeadingTwoIcon,
+    HeadingThreeIcon,
+} from '@toeverything/components/icons';
+import { countBy, maxBy } from '@toeverything/utils';
+import { getShapeIds } from './utils';
+
+interface FontSizeConfigProps {
+    app: TldrawApp;
+    shapes: TDShape[];
+}
+
+const _fontSizes = [
+    {
+        name: 'Heading 1',
+        value: FontSizeStyle.h1,
+        icon: <HeadingOneIcon />,
+    },
+    {
+        name: 'Heading 2',
+        value: FontSizeStyle.h2,
+        icon: <HeadingTwoIcon />,
+    },
+    {
+        name: 'Heading 3',
+        value: FontSizeStyle.h3,
+        icon: <HeadingThreeIcon />,
+    },
+    {
+        name: 'Text',
+        value: FontSizeStyle.body,
+        icon: <TextFontIcon />,
+    },
+];
+
+const _getFontSize = (shapes: TDShape[]): FontSizeStyle => {
+    const counted = countBy(shapes, shape => shape.style.fill);
+    const max = maxBy(Object.entries(counted), ([c, n]) => n);
+    return max[0] as unknown as FontSizeStyle;
+};
+
+export const FontSizeConfig: FC<FontSizeConfigProps> = ({ app, shapes }) => {
+    const setFontSize = (size: FontSizeStyle) => {
+        app.style({ fontSize: size }, getShapeIds(shapes));
+    };
+
+    const fontSize = _getFontSize(shapes);
+    const selected =
+        _fontSizes.find(f => f.value === fontSize) || _fontSizes[3];
+
+    return (
+        <Popover
+            trigger="hover"
+            placement="bottom-start"
+            content={
+                <div>
+                    {_fontSizes.map(fontSize => {
+                        return (
+                            <ListItemContainer
+                                key={fontSize.value}
+                                onClick={() => setFontSize(fontSize.value)}
+                            >
+                                {fontSize.icon}
+                                <ListItemTitle>{fontSize.name}</ListItemTitle>
+                            </ListItemContainer>
+                        );
+                    })}
+                </div>
+            }
+        >
+            <Tooltip content="Font Size" placement="top-start">
+                <IconButton>{selected.icon}</IconButton>
+            </Tooltip>
+        </Popover>
+    );
+};
+
+const ListItemContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    height: '32px',
+    padding: '4px 12px',
+    color: theme.affine.palette.icons,
+
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    '&:hover': {
+        backgroundColor: theme.affine.palette.hover,
+    },
+}));
+
+const ListItemTitle = styled('span')(({ theme }) => ({
+    marginLeft: '12px',
+    color: theme.affine.palette.primaryText,
+}));
diff --git a/libs/components/board-draw/src/components/command-panel/GroupOperation.tsx b/libs/components/board-draw/src/components/command-panel/GroupOperation.tsx
new file mode 100644
index 000000000..8a9b3f3ac
--- /dev/null
+++ b/libs/components/board-draw/src/components/command-panel/GroupOperation.tsx
@@ -0,0 +1,38 @@
+import type { FC } from 'react';
+import type { TldrawApp } from '@toeverything/components/board-state';
+import type { TDShape } from '@toeverything/components/board-types';
+import { IconButton, Tooltip } from '@toeverything/components/ui';
+import { GroupIcon, UngroupIcon } from '@toeverything/components/icons';
+import { getShapeIds } from './utils';
+
+interface GroupAndUnGroupProps {
+    app: TldrawApp;
+    shapes: TDShape[];
+}
+
+export const Group: FC<GroupAndUnGroupProps> = ({ app, shapes }) => {
+    const group = () => {
+        app.group(getShapeIds(shapes));
+    };
+    return (
+        <Tooltip content="Group">
+            <IconButton onClick={group}>
+                <GroupIcon />
+            </IconButton>
+        </Tooltip>
+    );
+};
+
+export const UnGroup: FC<GroupAndUnGroupProps> = ({ app, shapes }) => {
+    const ungroup = () => {
+        app.ungroup(getShapeIds(shapes));
+    };
+
+    return (
+        <Tooltip content="Ungroup">
+            <IconButton onClick={ungroup}>
+                <UngroupIcon />
+            </IconButton>
+        </Tooltip>
+    );
+};
diff --git a/libs/components/board-draw/src/components/command-panel/index.ts b/libs/components/board-draw/src/components/command-panel/index.ts
new file mode 100644
index 000000000..5f46a20f6
--- /dev/null
+++ b/libs/components/board-draw/src/components/command-panel/index.ts
@@ -0,0 +1 @@
+export { CommandPanel } from './CommandPanel';
diff --git a/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/LineStyle.tsx b/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/LineStyle.tsx
new file mode 100644
index 000000000..ee54446d0
--- /dev/null
+++ b/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/LineStyle.tsx
@@ -0,0 +1,110 @@
+import type { FC } from 'react';
+import { DashStyle, StrokeWidth } from '@toeverything/components/board-types';
+import {
+    LineNoneIcon,
+    DashLineIcon,
+    SolidLineIcon,
+    BrushIcon,
+} from '@toeverything/components/icons';
+import {
+    IconButton,
+    styled,
+    Tooltip,
+    Slider,
+} from '@toeverything/components/ui';
+
+export const lineStyles = [
+    {
+        name: 'None',
+        value: DashStyle.None,
+        icon: <LineNoneIcon />,
+    },
+    {
+        name: 'Draw',
+        value: DashStyle.Draw,
+        icon: <BrushIcon />,
+    },
+    {
+        name: 'Solid',
+        value: DashStyle.Solid,
+        icon: <SolidLineIcon />,
+    },
+    {
+        name: 'Dash',
+        value: DashStyle.Dashed,
+        icon: <DashLineIcon />,
+    },
+];
+
+interface LineStyleProps {
+    strokeStyle: DashStyle;
+    onStrokeStyleChange: (style: DashStyle) => void;
+
+    strokeWidth: StrokeWidth;
+    onStrokeWidthChange: (width: StrokeWidth) => void;
+}
+
+export const LineStyle: FC<LineStyleProps> = ({
+    strokeStyle,
+    onStrokeStyleChange,
+    strokeWidth,
+    onStrokeWidthChange,
+}) => {
+    return (
+        <Container>
+            <Title>Stroke Style</Title>
+            <StrokeStyleContainer>
+                {lineStyles.map(lineStyle => {
+                    const active = lineStyle.value === strokeStyle;
+                    return (
+                        <Tooltip key={lineStyle.value} content={lineStyle.name}>
+                            <IconButton
+                                className={active ? 'hover' : ''}
+                                onClick={() => {
+                                    onStrokeStyleChange(lineStyle.value);
+                                }}
+                            >
+                                {lineStyle.icon}
+                            </IconButton>
+                        </Tooltip>
+                    );
+                })}
+            </StrokeStyleContainer>
+            <Title>Thickness</Title>
+            <SliderContainer>
+                <Slider
+                    value={strokeWidth}
+                    marks
+                    min={StrokeWidth.s1}
+                    max={StrokeWidth.s6}
+                    step={2}
+                    onChange={(event, value) => {
+                        onStrokeWidthChange(value as StrokeWidth);
+                    }}
+                />
+            </SliderContainer>
+        </Container>
+    );
+};
+
+const Container = styled('div')({
+    width: '132px',
+    margin: '0 10px',
+});
+
+const Title = styled('div')(({ theme }) => ({
+    fontSize: '12px',
+    lineHeight: '14px',
+    color: theme.affine.palette.menu,
+    margin: '6px 0',
+}));
+
+const StrokeStyleContainer = styled('div')({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+});
+
+const SliderContainer = styled('div')({
+    padding: '0 6px',
+});
diff --git a/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/StrokeLineStyleConfig.tsx b/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/StrokeLineStyleConfig.tsx
new file mode 100644
index 000000000..5a47534d5
--- /dev/null
+++ b/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/StrokeLineStyleConfig.tsx
@@ -0,0 +1,71 @@
+import type { FC } from 'react';
+import type { TldrawApp } from '@toeverything/components/board-state';
+import { DashStyle, StrokeWidth } from '@toeverything/components/board-types';
+import type { TDShape } from '@toeverything/components/board-types';
+import { Popover, IconButton, Tooltip } from '@toeverything/components/ui';
+import { BrushIcon } from '@toeverything/components/icons';
+import { countBy, maxBy } from '@toeverything/utils';
+import { getShapeIds } from '../utils';
+import { LineStyle, lineStyles } from './LineStyle';
+
+const _getStrokeStyle = (shapes: TDShape[]): DashStyle => {
+    const counted = countBy(shapes, shape => shape.style.dash);
+    const max = maxBy(Object.entries(counted), ([c, n]) => n);
+    return max[0] as DashStyle;
+};
+
+const _getStrokeWidth = (shapes: TDShape[]): StrokeWidth => {
+    const counted = countBy(shapes, shape => shape.style.strokeWidth);
+    const max = maxBy(Object.entries(counted), ([c, n]) => n);
+    return Number(max[0]) as StrokeWidth;
+};
+interface BorderColorConfigProps {
+    app: TldrawApp;
+    shapes: TDShape[];
+}
+
+export const StrokeLineStyleConfig: FC<BorderColorConfigProps> = ({
+    app,
+    shapes,
+}) => {
+    const strokeStyle = _getStrokeStyle(shapes);
+    const strokeWidth = _getStrokeWidth(shapes);
+    const setStrokeLineStyle = (style: DashStyle) => {
+        app.style(
+            {
+                dash: style,
+            },
+            getShapeIds(shapes)
+        );
+    };
+    const setStrokeLineWidth = (width: StrokeWidth) => {
+        app.style(
+            {
+                strokeWidth: width,
+            },
+            getShapeIds(shapes)
+        );
+    };
+
+    const icon = lineStyles.find(style => style.value === strokeStyle)
+        ?.icon || <BrushIcon />;
+
+    return (
+        <Popover
+            trigger="hover"
+            placement="bottom-start"
+            content={
+                <LineStyle
+                    strokeStyle={strokeStyle}
+                    onStrokeStyleChange={setStrokeLineStyle}
+                    strokeWidth={strokeWidth}
+                    onStrokeWidthChange={setStrokeLineWidth}
+                />
+            }
+        >
+            <Tooltip placement="top-start" content="Stroke Style">
+                <IconButton>{icon}</IconButton>
+            </Tooltip>
+        </Popover>
+    );
+};
diff --git a/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/index.ts b/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/index.ts
new file mode 100644
index 000000000..d80d4df23
--- /dev/null
+++ b/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/index.ts
@@ -0,0 +1 @@
+export { StrokeLineStyleConfig } from './StrokeLineStyleConfig';
diff --git a/libs/components/board-draw/src/components/command-panel/utils/get-anchor.ts b/libs/components/board-draw/src/components/command-panel/utils/get-anchor.ts
new file mode 100644
index 000000000..52f10b9b7
--- /dev/null
+++ b/libs/components/board-draw/src/components/command-panel/utils/get-anchor.ts
@@ -0,0 +1,36 @@
+interface ShapeRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
+export const getAnchor = (rect: ShapeRect) => {
+    return {
+        getBoundingClientRect(): DOMRect {
+            const x = rect.x;
+            const y = rect.y;
+            const width = rect.width;
+            const height = rect.height;
+
+            const calcRect = {
+                x,
+                y,
+                top: y,
+                left: x,
+                width,
+                height,
+                bottom: y + height,
+                right: x + width,
+            };
+            const jsonStr = JSON.stringify(rect);
+
+            return {
+                ...calcRect,
+                toJSON() {
+                    return jsonStr;
+                },
+            };
+        },
+    };
+};
diff --git a/libs/components/board-draw/src/components/command-panel/utils/index.ts b/libs/components/board-draw/src/components/command-panel/utils/index.ts
new file mode 100644
index 000000000..ce623cad5
--- /dev/null
+++ b/libs/components/board-draw/src/components/command-panel/utils/index.ts
@@ -0,0 +1,2 @@
+export { getAnchor } from './get-anchor';
+export { useConfig, getShapeIds } from './use-config';
diff --git a/libs/components/board-draw/src/components/command-panel/utils/use-config.ts b/libs/components/board-draw/src/components/command-panel/utils/use-config.ts
new file mode 100644
index 000000000..4378ba346
--- /dev/null
+++ b/libs/components/board-draw/src/components/command-panel/utils/use-config.ts
@@ -0,0 +1,101 @@
+import type { TldrawApp } from '@toeverything/components/board-state';
+import type { TDShape } from '@toeverything/components/board-types';
+import { TDShapeType } from '@toeverything/components/board-types';
+import { TLDR } from '@toeverything/components/board-state';
+
+interface Config {
+    type: 'stroke' | 'fill' | 'font' | 'group' | 'ungroup' | 'deleteShapes';
+    selectedShapes: TDShape[];
+}
+
+const _createInitConfig = (): Record<Config['type'], Config> => {
+    return {
+        fill: {
+            type: 'fill',
+            selectedShapes: [],
+        },
+        stroke: {
+            type: 'stroke',
+            selectedShapes: [],
+        },
+        font: {
+            type: 'font',
+            selectedShapes: [],
+        },
+        group: {
+            type: 'group',
+            selectedShapes: [],
+        },
+        ungroup: {
+            type: 'ungroup',
+            selectedShapes: [],
+        },
+        deleteShapes: {
+            type: 'deleteShapes',
+            selectedShapes: [],
+        },
+    };
+};
+
+const _isSupportStroke = (shape: TDShape): boolean => {
+    return [
+        TDShapeType.Rectangle,
+        TDShapeType.Ellipse,
+        TDShapeType.Hexagon,
+        TDShapeType.Triangle,
+        TDShapeType.WhiteArrow,
+        TDShapeType.Pentagram,
+        TDShapeType.Pencil,
+        TDShapeType.Laser,
+        TDShapeType.Highlight,
+        TDShapeType.Arrow,
+        TDShapeType.Line,
+    ].some(type => type === shape.type);
+};
+
+const _isSupportFill = (shape: TDShape): boolean => {
+    return [
+        TDShapeType.Rectangle,
+        TDShapeType.Ellipse,
+        TDShapeType.Hexagon,
+        TDShapeType.Triangle,
+        TDShapeType.WhiteArrow,
+        TDShapeType.Pentagram,
+    ].some(type => type === shape.type);
+};
+
+export const useConfig = (app: TldrawApp): Record<Config['type'], Config> => {
+    const state = app.useStore();
+    const selectedShapes = TLDR.get_selected_shapes(state, app.currentPageId);
+    const config = selectedShapes.reduce<Record<Config['type'], Config>>(
+        (acc, cur) => {
+            if (_isSupportStroke(cur)) {
+                acc.stroke.selectedShapes.push(cur);
+            }
+            if (_isSupportFill(cur)) {
+                acc.fill.selectedShapes.push(cur);
+                acc.font.selectedShapes.push(cur);
+            }
+            return acc;
+        },
+        _createInitConfig()
+    );
+
+    if (
+        selectedShapes.length === 1 &&
+        selectedShapes[0].type === TDShapeType.Group
+    ) {
+        config.ungroup.selectedShapes = selectedShapes;
+    }
+    if (selectedShapes.length > 1) {
+        config.group.selectedShapes = selectedShapes;
+    }
+
+    config.deleteShapes.selectedShapes = selectedShapes;
+
+    return config;
+};
+
+export const getShapeIds = (shapes?: TDShape[]): string[] => {
+    return (shapes || []).map(shape => shape.id).filter(id => !!id);
+};
diff --git a/libs/components/board-draw/src/components/context-menu/context-menu.tsx b/libs/components/board-draw/src/components/context-menu/context-menu.tsx
new file mode 100644
index 000000000..82f1c37ce
--- /dev/null
+++ b/libs/components/board-draw/src/components/context-menu/context-menu.tsx
@@ -0,0 +1,5 @@
+import type { FC, ReactNode } from 'react';
+
+export const ContextMenu: FC<{ children: ReactNode }> = ({ children }) => {
+    return <div>{children}</div>;
+};
diff --git a/libs/components/board-draw/src/components/context-menu/index.ts b/libs/components/board-draw/src/components/context-menu/index.ts
new file mode 100644
index 000000000..48de5b78d
--- /dev/null
+++ b/libs/components/board-draw/src/components/context-menu/index.ts
@@ -0,0 +1 @@
+export * from './context-menu';
diff --git a/libs/components/board-draw/src/components/error-fallback/error-fallback.tsx b/libs/components/board-draw/src/components/error-fallback/error-fallback.tsx
new file mode 100644
index 000000000..ff7e5c493
--- /dev/null
+++ b/libs/components/board-draw/src/components/error-fallback/error-fallback.tsx
@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { FallbackProps } from 'react-error-boundary';
+import { useTldrawApp } from '../../hooks';
+import { styled } from '@toeverything/components/ui';
+
+export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
+    const app = useTldrawApp();
+
+    const refreshPage = () => {
+        window.location.reload();
+        resetErrorBoundary();
+    };
+
+    const copyError = () => {
+        const textarea = document.createElement('textarea');
+        textarea.value = error.message;
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand('copy');
+        textarea.remove();
+    };
+
+    const downloadBackup = () => {
+        app.saveProjectAs();
+    };
+
+    const resetDocument = () => {
+        app.resetDocument();
+        resetErrorBoundary();
+    };
+
+    return (
+        <Container>
+            <InnerContainer>
+                <div>We've encountered an error!</div>
+                <pre>
+                    <code>{error.message}</code>
+                </pre>
+                <div>
+                    <button onClick={copyError}>Copy Error</button>
+                    <button onClick={refreshPage}>Refresh Page</button>
+                </div>
+                <hr />
+                <p>
+                    Keep getting this error?{' '}
+                    <a onClick={downloadBackup} title="Download your project">
+                        Download your project
+                    </a>{' '}
+                    as a backup and then{' '}
+                    <a onClick={resetDocument} title="Reset the document">
+                        reset the document
+                    </a>
+                    .
+                </p>
+            </InnerContainer>
+        </Container>
+    );
+}
+
+const Container = styled('div')({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '$canvas',
+});
+
+const InnerContainer = styled('div')({
+    backgroundColor: '$panel',
+    border: '1px solid $panelContrast',
+    padding: '$5',
+    borderRadius: 8,
+    boxShadow: '$panel',
+    maxWidth: 320,
+    color: '$text',
+    fontFamily: '$ui',
+    fontSize: '$2',
+    textAlign: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '$3',
+    '& > pre': {
+        marginTop: '$3',
+        marginBottom: '$3',
+        textAlign: 'left',
+        whiteSpace: 'pre-wrap',
+        backgroundColor: '$hover',
+        padding: '$4',
+        borderRadius: '$2',
+        fontFamily: '"Menlo", "Monaco", monospace',
+        fontWeight: 500,
+    },
+    '& p': {
+        fontFamily: '$body',
+        lineHeight: 1.7,
+        padding: '$5',
+        margin: 0,
+    },
+    '& a': {
+        color: '$text',
+        cursor: 'pointer',
+        textDecoration: 'underline',
+    },
+    '& hr': {
+        marginLeft: '-$5',
+        marginRight: '-$5',
+    },
+});
diff --git a/libs/components/board-draw/src/components/error-fallback/index.ts b/libs/components/board-draw/src/components/error-fallback/index.ts
new file mode 100644
index 000000000..053407e13
--- /dev/null
+++ b/libs/components/board-draw/src/components/error-fallback/index.ts
@@ -0,0 +1 @@
+export * from './error-fallback';
diff --git a/libs/components/board-draw/src/components/loading/index.ts b/libs/components/board-draw/src/components/loading/index.ts
new file mode 100644
index 000000000..22652ccf3
--- /dev/null
+++ b/libs/components/board-draw/src/components/loading/index.ts
@@ -0,0 +1 @@
+export * from './loading';
diff --git a/libs/components/board-draw/src/components/loading/loading.tsx b/libs/components/board-draw/src/components/loading/loading.tsx
new file mode 100644
index 000000000..8fb872426
--- /dev/null
+++ b/libs/components/board-draw/src/components/loading/loading.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { useTldrawApp } from '../../hooks';
+import { styled } from '@toeverything/components/ui';
+import type { TDSnapshot } from '@toeverything/components/board-types';
+
+const loadingSelector = (s: TDSnapshot) => s.appState.isLoading;
+
+export function Loading() {
+    const app = useTldrawApp();
+    const isLoading = app.useStore(loadingSelector);
+
+    return (
+        <StyledLoadingPanelContainer hidden={!isLoading}>
+            Loading...
+        </StyledLoadingPanelContainer>
+    );
+}
+
+const StyledLoadingPanelContainer = styled('div')({
+    position: 'absolute',
+    top: 0,
+    left: '50%',
+    transform: `translate(-50%, 0)`,
+    borderBottomLeftRadius: '12px',
+    borderBottomRightRadius: '12px',
+    padding: '8px 16px',
+    fontFamily: 'var(--fonts-ui)',
+    fontSize: 'var(--fontSizes-1)',
+    boxShadow: 'var(--shadows-panel)',
+    backgroundColor: 'white',
+    zIndex: 200,
+    pointerEvents: 'none',
+    '& > div > *': {
+        pointerEvents: 'all',
+    },
+    variants: {
+        transform: {
+            hidden: {
+                transform: `translate(-50%, 100%)`,
+            },
+            visible: {
+                transform: `translate(-50%, 0%)`,
+            },
+        },
+    },
+});
diff --git a/libs/components/board-draw/src/components/palette/Palette.tsx b/libs/components/board-draw/src/components/palette/Palette.tsx
new file mode 100644
index 000000000..34021444a
--- /dev/null
+++ b/libs/components/board-draw/src/components/palette/Palette.tsx
@@ -0,0 +1,95 @@
+import type { FC, PropsWithChildren } from 'react';
+import { useMemo } from 'react';
+import { styled, Tooltip } from '@toeverything/components/ui';
+import { ShapeColorNoneIcon } from '@toeverything/components/icons';
+
+interface ColorObject {
+    name?: string;
+    /**
+     * color: none means no color
+     */
+    color: string;
+}
+/**
+ * ColorValue : none means no color
+ */
+type ColorValue = string | ColorObject;
+interface PaletteProps {
+    colors: ColorValue[];
+    selected?: string;
+    onSelect?: (color: string) => void;
+}
+
+const formatColors = (colors: ColorValue[]): ColorObject[] => {
+    return colors.map(color => {
+        return typeof color === 'string' ? { color } : color;
+    });
+};
+
+export const Palette: FC<PaletteProps> = ({
+    colors: propColors,
+    selected,
+    onSelect,
+}) => {
+    const colorObjects = useMemo(() => formatColors(propColors), [propColors]);
+    return (
+        <Container>
+            {colorObjects.map(colorObject => {
+                const color = colorObject.color;
+                const selectedThisColor = selected === color;
+                return (
+                    <Tooltip key={color} content={colorObject.name}>
+                        <SelectableContainer
+                            selected={selectedThisColor}
+                            onClick={() => {
+                                onSelect?.(color);
+                            }}
+                        >
+                            {color === 'none' ? (
+                                <StyledShapeColorNoneIcon />
+                            ) : (
+                                <Color style={{ backgroundColor: color }} />
+                            )}
+                        </SelectableContainer>
+                    </Tooltip>
+                );
+            })}
+        </Container>
+    );
+};
+
+const Container = styled('div')({
+    width: '120px',
+    display: 'flex',
+    flexWrap: 'wrap',
+});
+
+const SelectableContainer = styled('div')<{ selected?: boolean }>(
+    ({ selected, theme }) => ({
+        width: '20px',
+        height: '20px',
+        border: `1px solid ${
+            selected ? theme.affine.palette.primary : 'rgba(0,0,0,0)'
+        }`,
+        borderRadius: '5px',
+        overflow: 'hidden',
+        margin: '10px',
+        padding: '1px',
+        cursor: 'pointer',
+        boxSizing: 'border-box',
+    })
+);
+
+const Color = styled('div')({
+    width: '16px',
+    height: '16px',
+    borderRadius: '5px',
+    boxShadow: '0px 0px 2px rgba(0, 0, 0, 0.25)',
+});
+
+const StyledShapeColorNoneIcon = styled(ShapeColorNoneIcon)(({ theme }) => ({
+    position: 'relative',
+    left: '-4px',
+    top: '-4px',
+    color: theme.affine.palette.icons,
+}));
diff --git a/libs/components/board-draw/src/components/palette/index.ts b/libs/components/board-draw/src/components/palette/index.ts
new file mode 100644
index 000000000..54d45c974
--- /dev/null
+++ b/libs/components/board-draw/src/components/palette/index.ts
@@ -0,0 +1 @@
+export { Palette } from './Palette';
diff --git a/libs/components/board-draw/src/components/tools-panel/LineTools.tsx b/libs/components/board-draw/src/components/tools-panel/LineTools.tsx
new file mode 100644
index 000000000..3959e3629
--- /dev/null
+++ b/libs/components/board-draw/src/components/tools-panel/LineTools.tsx
@@ -0,0 +1,86 @@
+import { FC, useState, useEffect } from 'react';
+import {
+    ConnectorIcon,
+    ConectorLineIcon,
+    ConectorArrowIcon,
+} from '@toeverything/components/icons';
+import {
+    Tooltip,
+    Popover,
+    IconButton,
+    styled,
+} from '@toeverything/components/ui';
+
+import { TDSnapshot, TDShapeType } from '@toeverything/components/board-types';
+import { TldrawApp } from '@toeverything/components/board-state';
+
+export type ShapeTypes = TDShapeType.Line | TDShapeType.Arrow;
+
+const shapes = [
+    {
+        type: TDShapeType.Line,
+        label: 'Line',
+        tooltip: 'Line',
+        icon: ConectorLineIcon,
+    },
+    {
+        type: TDShapeType.Arrow,
+        label: 'Arrow',
+        tooltip: 'Arrow',
+        icon: ConectorArrowIcon,
+    },
+] as const;
+
+const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool;
+
+export const LineTools: FC<{ app: TldrawApp }> = ({ app }) => {
+    const activeTool = app.useStore(activeToolSelector);
+
+    const [lastActiveTool, setLastActiveTool] = useState<ShapeTypes>(
+        TDShapeType.Line
+    );
+
+    useEffect(() => {
+        if (
+            shapes.find(s => s.type === activeTool) &&
+            lastActiveTool !== activeTool
+        ) {
+            setLastActiveTool(activeTool as ShapeTypes);
+        }
+    }, [activeTool, lastActiveTool]);
+
+    return (
+        <Popover
+            placement="right-start"
+            trigger="click"
+            content={
+                <ShapesContainer>
+                    {shapes.map(({ type, label, tooltip, icon: Icon }) => (
+                        <Tooltip content={tooltip} key={type} placement="right">
+                            <IconButton
+                                onClick={() => {
+                                    app.selectTool(type);
+                                    setLastActiveTool(type);
+                                }}
+                            >
+                                <Icon />
+                            </IconButton>
+                        </Tooltip>
+                    ))}
+                </ShapesContainer>
+            }
+        >
+            <Tooltip content="Connector" placement="right" trigger="hover">
+                <IconButton aria-label="Connector">
+                    <ConnectorIcon />
+                </IconButton>
+            </Tooltip>
+        </Popover>
+    );
+};
+
+const ShapesContainer = styled('div')({
+    width: '64px',
+    display: 'flex',
+    flexWrap: 'wrap',
+});
diff --git a/libs/components/board-draw/src/components/tools-panel/ShapeTools.tsx b/libs/components/board-draw/src/components/tools-panel/ShapeTools.tsx
new file mode 100644
index 000000000..c042d860f
--- /dev/null
+++ b/libs/components/board-draw/src/components/tools-panel/ShapeTools.tsx
@@ -0,0 +1,122 @@
+import { FC, useState, useEffect } from 'react';
+import {
+    ShapeIcon,
+    RectangleIcon,
+    EllipseIcon,
+    TriangleIcon,
+    PolygonIcon,
+    StarIcon,
+    ArrowIcon,
+} from '@toeverything/components/icons';
+import {
+    Tooltip,
+    Popover,
+    IconButton,
+    styled,
+} from '@toeverything/components/ui';
+
+import { TDSnapshot, TDShapeType } from '@toeverything/components/board-types';
+import { TldrawApp } from '@toeverything/components/board-state';
+
+export type ShapeTypes =
+    | TDShapeType.Rectangle
+    | TDShapeType.Ellipse
+    | TDShapeType.Triangle
+    | TDShapeType.Line
+    | TDShapeType.Hexagon
+    | TDShapeType.Pentagram
+    | TDShapeType.WhiteArrow
+    | TDShapeType.Arrow;
+
+const shapes = [
+    {
+        type: TDShapeType.Rectangle,
+        label: 'Rectangle',
+        tooltip: 'Rectangle',
+        icon: RectangleIcon,
+    },
+    {
+        type: TDShapeType.WhiteArrow,
+        label: 'WhiteArrow',
+        tooltip: 'WhiteArrow',
+        icon: ArrowIcon,
+    },
+    {
+        type: TDShapeType.Triangle,
+        label: 'Triangle',
+        tooltip: 'Triangle',
+        icon: TriangleIcon,
+    },
+    {
+        type: TDShapeType.Hexagon,
+        label: 'InvertedTranslate',
+        tooltip: 'InvertedTranslate',
+        icon: PolygonIcon,
+    },
+    {
+        type: TDShapeType.Pentagram,
+        label: 'Pentagram',
+        tooltip: 'Pentagram',
+        icon: StarIcon,
+    },
+    {
+        type: TDShapeType.Ellipse,
+        label: 'Ellipse',
+        tooltip: 'Ellipse',
+        icon: EllipseIcon,
+    },
+] as const;
+
+const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool;
+
+export const ShapeTools: FC<{ app: TldrawApp }> = ({ app }) => {
+    const activeTool = app.useStore(activeToolSelector);
+
+    const [lastActiveTool, setLastActiveTool] = useState<ShapeTypes>(
+        TDShapeType.Rectangle
+    );
+
+    useEffect(() => {
+        if (
+            shapes.find(s => s.type === activeTool) &&
+            lastActiveTool !== activeTool
+        ) {
+            setLastActiveTool(activeTool as ShapeTypes);
+        }
+    }, [activeTool, lastActiveTool]);
+
+    return (
+        <Popover
+            placement="right-start"
+            trigger="click"
+            content={
+                <ShapesContainer>
+                    {shapes.map(({ type, label, tooltip, icon: Icon }) => (
+                        <Tooltip content={tooltip} key={type} placement="right">
+                            <IconButton
+                                onClick={() => {
+                                    app.selectTool(type);
+                                    setLastActiveTool(type);
+                                }}
+                            >
+                                <Icon />
+                            </IconButton>
+                        </Tooltip>
+                    ))}
+                </ShapesContainer>
+            }
+        >
+            <Tooltip content="Shapes" placement="right" trigger="hover">
+                <IconButton aria-label="Shapes">
+                    <ShapeIcon />
+                </IconButton>
+            </Tooltip>
+        </Popover>
+    );
+};
+
+const ShapesContainer = styled('div')({
+    width: '64px',
+    display: 'flex',
+    flexWrap: 'wrap',
+});
diff --git a/libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx b/libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx
new file mode 100644
index 000000000..48550054e
--- /dev/null
+++ b/libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx
@@ -0,0 +1,141 @@
+import { FC } from 'react';
+import style9 from 'style9';
+import {
+    // MuiIconButton as IconButton,
+    // MuiTooltip as Tooltip,
+    Tooltip,
+    PopoverContainer,
+    IconButton,
+} from '@toeverything/components/ui';
+import {
+    FrameIcon,
+    HandToolIcon,
+    SelectIcon,
+    TextIcon,
+    EraserIcon,
+} from '@toeverything/components/icons';
+
+import {
+    TDSnapshot,
+    TDShapeType,
+    TDToolType,
+} from '@toeverything/components/board-types';
+import { TldrawApp } from '@toeverything/components/board-state';
+
+import { ShapeTools } from './ShapeTools';
+import { PenTools } from './pen-tools';
+import { LineTools } from './LineTools';
+
+const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool;
+const toolLockedSelector = (s: TDSnapshot) => s.appState.isToolLocked;
+
+const tools: Array<{
+    type: string;
+    label?: string;
+    tooltip?: string;
+    icon?: FC;
+    component?: FC<{ app: TldrawApp }>;
+}> = [
+    {
+        type: 'select',
+        label: 'Select',
+        tooltip: 'Select',
+        icon: SelectIcon,
+    },
+    { type: 'frame', label: 'Frame', tooltip: 'Frame', icon: FrameIcon },
+    {
+        type: TDShapeType.Editor,
+        label: 'Text',
+        tooltip: 'Text',
+        icon: TextIcon,
+    },
+    { type: 'shapes', component: ShapeTools },
+    { type: 'draw', component: PenTools },
+    { type: 'Connector', component: LineTools },
+    // { type: 'erase', label: 'Erase', tooltip: 'Erase', icon: EraseIcon },
+    {
+        type: TDShapeType.HandDraw,
+        label: 'HandDraw',
+        tooltip: 'HandDraw',
+        icon: HandToolIcon,
+    },
+    {
+        type: 'erase',
+        label: 'Eraser',
+        tooltip: 'Eraser',
+        icon: EraserIcon,
+    },
+];
+
+export const ToolsPanel: FC<{ app: TldrawApp }> = ({ app }) => {
+    const activeTool = app.useStore(activeToolSelector);
+
+    const isToolLocked = app.useStore(toolLockedSelector);
+
+    return (
+        <PopoverContainer
+            style={{
+                position: 'absolute',
+                left: '10px',
+                top: '40%',
+                transform: 'translateY(-50%)',
+            }}
+            direction="none"
+        >
+            <div className={styles('container')}>
+                <div className={styles('toolBar')}>
+                    {tools.map(
+                        ({
+                            type,
+                            label,
+                            tooltip,
+                            icon: Icon,
+                            component: Component,
+                        }) =>
+                            Component ? (
+                                <Component key={type} app={app} />
+                            ) : (
+                                <Tooltip
+                                    content={tooltip}
+                                    key={type}
+                                    placement="right"
+                                >
+                                    <IconButton
+                                        aria-label={label}
+                                        style={{
+                                            color:
+                                                activeTool === type
+                                                    ? 'blue'
+                                                    : '',
+                                        }}
+                                        onClick={() => {
+                                            app.selectTool(type as TDToolType);
+                                        }}
+                                        disabled={isToolLocked}
+                                    >
+                                        <Icon />
+                                    </IconButton>
+                                </Tooltip>
+                            )
+                    )}
+                </div>
+            </div>
+        </PopoverContainer>
+    );
+};
+
+const styles = style9.create({
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        height: '100%',
+    },
+    toolBar: {
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: '#ffffff',
+        borderRadius: '10px',
+        padding: '4px 4px',
+    },
+});
diff --git a/libs/components/board-draw/src/components/tools-panel/index.ts b/libs/components/board-draw/src/components/tools-panel/index.ts
new file mode 100644
index 000000000..daf89a7e0
--- /dev/null
+++ b/libs/components/board-draw/src/components/tools-panel/index.ts
@@ -0,0 +1 @@
+export { ToolsPanel } from './ToolsPanel';
diff --git a/libs/components/board-draw/src/components/tools-panel/pen-tools/Pen.tsx b/libs/components/board-draw/src/components/tools-panel/pen-tools/Pen.tsx
new file mode 100644
index 000000000..94d83774f
--- /dev/null
+++ b/libs/components/board-draw/src/components/tools-panel/pen-tools/Pen.tsx
@@ -0,0 +1,44 @@
+import type { FC, ReactNode } from 'react';
+import { Tooltip, styled, IconButton } from '@toeverything/components/ui';
+
+interface PenProps {
+    name: string;
+    icon: ReactNode;
+    primaryColor: string;
+    secondaryColor: string;
+    onClick: () => void;
+}
+
+export const Pen: FC<PenProps> = ({
+    name,
+    icon,
+    primaryColor,
+    secondaryColor,
+    onClick,
+}) => {
+    return (
+        <Tooltip content={name}>
+            <StyledIconButton
+                primaryColor={primaryColor}
+                secondaryColor={secondaryColor}
+                onClick={onClick}
+            >
+                {icon}
+            </StyledIconButton>
+        </Tooltip>
+    );
+};
+
+const StyledIconButton = styled(IconButton, {
+    shouldForwardProp: propName =>
+        !['primaryColor', 'secondaryColor'].some(name => name === propName),
+})<Pick<PenProps, 'primaryColor' | 'secondaryColor'>>(
+    ({ primaryColor, secondaryColor }) => {
+        return {
+            '--color-0': primaryColor,
+            '--color-1': secondaryColor,
+            width: '40px',
+            height: '40px',
+        };
+    }
+);
diff --git a/libs/components/board-draw/src/components/tools-panel/pen-tools/PenTools.tsx b/libs/components/board-draw/src/components/tools-panel/pen-tools/PenTools.tsx
new file mode 100644
index 000000000..f951f1269
--- /dev/null
+++ b/libs/components/board-draw/src/components/tools-panel/pen-tools/PenTools.tsx
@@ -0,0 +1,200 @@
+import { FC, ReactElement, type CSSProperties } from 'react';
+import style9 from 'style9';
+import {
+    MuiDivider as Divider,
+    Popover,
+    Tooltip,
+    IconButton,
+    styled,
+} from '@toeverything/components/ui';
+import { TDShapeType, TDToolType } from '@toeverything/components/board-types';
+import { TldrawApp } from '@toeverything/components/board-state';
+import {
+    PencilDuotoneIcon,
+    HighlighterDuotoneIcon,
+    LaserPenDuotoneIcon,
+} from '@toeverything/components/icons';
+import { Palette } from '../../palette';
+import { Pen } from './Pen';
+
+type PenType = TDShapeType.Pencil | TDShapeType.Highlight | TDShapeType.Laser;
+
+interface PencilConfig {
+    key: PenType;
+    title: string;
+    icon: ReactElement<any, any>;
+    colors: string[];
+    getColorVars: (
+        primaryColor: string,
+        secondaryColor: string
+    ) => { '--color-0': string; '--color-1': string };
+}
+
+const PENCIL_CONFIGS: PencilConfig[] = [
+    {
+        key: TDShapeType.Pencil,
+        title: 'Pencil',
+        icon: <PencilDuotoneIcon />,
+        colors: [
+            '#F1675E',
+            '#FF7F22',
+            '#FFCB45',
+            '#40DF9B',
+            '#13D9E3',
+            '#3E6FDB',
+            '#7352F1',
+            '#3A4C5C',
+            '#FFFFFF',
+        ],
+        getColorVars: (primaryColor: string, secondaryColor: string) => {
+            return {
+                '--color-0': secondaryColor,
+                '--color-1': primaryColor,
+            };
+        },
+    },
+    {
+        key: TDShapeType.Highlight,
+        title: 'Highlighter',
+        icon: <HighlighterDuotoneIcon />,
+        colors: [
+            'rgba(255, 133, 137, 0.5)',
+            'rgba(255, 159, 101, 0.5)',
+            'rgba(255, 251, 69, 0.5)',
+            'rgba(64, 255, 138, 0.5)',
+            'rgba(26, 252, 255, 0.5)',
+            'rgba(198, 156, 255, 0.5)',
+            'rgba(255, 143, 224, 0.5)',
+            'rgba(152, 172, 189, 0.5)',
+            'rgba(216, 226, 248, 0.5)',
+        ],
+        getColorVars: (primaryColor: string, secondaryColor: string) => {
+            return {
+                '--color-0': secondaryColor,
+                '--color-1': primaryColor,
+            };
+        },
+    },
+    {
+        key: TDShapeType.Laser,
+        title: 'Laser',
+        icon: <LaserPenDuotoneIcon />,
+        colors: [
+            '#DB3E3E',
+            '#FF5F1A',
+            '#FFA800',
+            '#13D9E3',
+            '#00ADCE',
+            '#3E6FDB',
+            '#2F5DC2',
+            '#153C7A',
+        ],
+        getColorVars: (primaryColor: string, secondaryColor: string) => {
+            return {
+                '--color-0': primaryColor,
+                '--color-1': secondaryColor,
+            };
+        },
+    },
+];
+
+const PENCIL_CONFIGS_MAP = PENCIL_CONFIGS.reduce<
+    Record<TDToolType, PencilConfig>
+>((acc, cur) => {
+    acc[cur.key] = cur;
+    return acc;
+}, {} as Record<TDToolType, PencilConfig>);
+
+export const PenTools: FC<{ app: TldrawApp }> = ({ app }) => {
+    const appCurrentTool = app.useStore(state => state.appState.activeTool);
+    const chosenPen =
+        PENCIL_CONFIGS.find(config => config.key === appCurrentTool) ||
+        PENCIL_CONFIGS[0];
+    const chosenPenKey = chosenPen.key;
+    const currentColor = app.useStore(
+        state => state.appState.currentStyle.stroke
+    );
+    const chosenColor = chosenPen.colors.includes(currentColor)
+        ? currentColor
+        : chosenPen.colors[0];
+    const isActiveTool = appCurrentTool === chosenPenKey;
+
+    const setPen = (pen: PenType) => {
+        app.selectTool(pen);
+        const penConfig = PENCIL_CONFIGS_MAP[pen];
+        if (!penConfig.colors.includes(currentColor)) {
+            setPenColor(penConfig.colors[0]);
+        }
+    };
+
+    const setPenColor = (color: string) => {
+        app.style({
+            stroke: color,
+        });
+    };
+
+    return (
+        <Popover
+            placement="right-start"
+            trigger="click"
+            content={
+                <Container>
+                    <PensContainer>
+                        {PENCIL_CONFIGS.map(
+                            ({ title, icon, key, getColorVars }) => {
+                                const active = chosenPenKey === key;
+                                const color_vars = getColorVars(
+                                    active ? '#3A4C5C' : '#98ACBD',
+                                    active ? chosenColor : '#D8E2F8'
+                                );
+                                return (
+                                    <Pen
+                                        key={key}
+                                        icon={icon}
+                                        name={title}
+                                        primaryColor={color_vars['--color-0']}
+                                        secondaryColor={color_vars['--color-1']}
+                                        onClick={() => setPen(key)}
+                                    />
+                                );
+                            }
+                        )}
+                    </PensContainer>
+                    <Divider sx={{ marginBottom: '8px' }} />
+                    <Palette
+                        selected={chosenColor}
+                        colors={PENCIL_CONFIGS_MAP[chosenPenKey].colors}
+                        onSelect={color => setPenColor(color)}
+                    />
+                    <div />
+                </Container>
+            }
+        >
+            <Tooltip content="Pencil" placement="right">
+                <IconButton
+                    aria-label="Pencil"
+                    onClick={() => {
+                        setPen(chosenPen.key);
+                    }}
+                    style={{
+                        ...(chosenPen.getColorVars(
+                            isActiveTool ? '#3A4C5C' : '#98ACBD',
+                            isActiveTool ? chosenColor : '#D8E2F8'
+                        ) as CSSProperties),
+                    }}
+                >
+                    {chosenPen.icon}
+                </IconButton>
+            </Tooltip>
+        </Popover>
+    );
+};
+
+const Container = styled('div')({
+    padding: 0,
+});
+
+const PensContainer = styled('div')({
+    display: 'flex',
+    justifyContent: 'space-between',
+});
diff --git a/libs/components/board-draw/src/components/tools-panel/pen-tools/index.ts b/libs/components/board-draw/src/components/tools-panel/pen-tools/index.ts
new file mode 100644
index 000000000..1bf4bd192
--- /dev/null
+++ b/libs/components/board-draw/src/components/tools-panel/pen-tools/index.ts
@@ -0,0 +1 @@
+export { PenTools } from './PenTools';
diff --git a/libs/components/board-draw/src/components/zoom-bar/ZoomBar.tsx b/libs/components/board-draw/src/components/zoom-bar/ZoomBar.tsx
new file mode 100644
index 000000000..97a82f382
--- /dev/null
+++ b/libs/components/board-draw/src/components/zoom-bar/ZoomBar.tsx
@@ -0,0 +1,62 @@
+import { FC } from 'react';
+import {
+    MuiIconButton as IconButton,
+    MuiButton as Button,
+    styled,
+} from '@toeverything/components/ui';
+import RemoveIcon from '@mui/icons-material/Remove';
+import AddIcon from '@mui/icons-material/Add';
+import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
+
+import { useTldrawApp } from '../../hooks';
+import { TDSnapshot } from '@toeverything/components/board-types';
+
+import { MiniMap } from './mini-map';
+
+const zoomSelector = (s: TDSnapshot) =>
+    s.document.pageStates[s.appState.currentPageId].camera.zoom;
+
+export const ZoomBar: FC = () => {
+    const app = useTldrawApp();
+    const zoom = app.useStore(zoomSelector);
+
+    return (
+        <div
+            style={{ position: 'absolute', right: 10, bottom: 10, zIndex: 200 }}
+        >
+            <MiniMapContainer>
+                <MiniMap />
+            </MiniMapContainer>
+
+            <div
+                style={{
+                    padding: '0 10px',
+                    background: '#ffffff',
+                    borderRadius: '8px',
+                }}
+            >
+                <Button
+                    variant="text"
+                    style={{ color: 'rgba(0,0,0,0.5)' }}
+                    onClick={app.resetZoom}
+                >
+                    {Math.round(zoom * 100)}%
+                </Button>
+                <IconButton onClick={app.zoomOut}>
+                    <RemoveIcon />
+                </IconButton>
+                <IconButton onClick={app.zoomIn}>
+                    <AddIcon />
+                </IconButton>
+                <IconButton onClick={app.zoomToFit}>
+                    <UnfoldMoreIcon style={{ transform: 'rotateZ(90deg)' }} />
+                </IconButton>
+            </div>
+        </div>
+    );
+};
+
+const MiniMapContainer = styled('div')({
+    display: 'flex',
+    justifyContent: 'flex-end',
+});
diff --git a/libs/components/board-draw/src/components/zoom-bar/index.ts b/libs/components/board-draw/src/components/zoom-bar/index.ts
new file mode 100644
index 000000000..1c3eb6b43
--- /dev/null
+++ b/libs/components/board-draw/src/components/zoom-bar/index.ts
@@ -0,0 +1 @@
+export { ZoomBar } from './ZoomBar';
diff --git a/libs/components/board-draw/src/components/zoom-bar/mini-map/MiniMap.tsx b/libs/components/board-draw/src/components/zoom-bar/mini-map/MiniMap.tsx
new file mode 100644
index 000000000..f3ad75843
--- /dev/null
+++ b/libs/components/board-draw/src/components/zoom-bar/mini-map/MiniMap.tsx
@@ -0,0 +1,88 @@
+import type { FC } from 'react';
+import { Utils } from '@tldraw/core';
+import Vec from '@tldraw/vec';
+import { TLDR } from '@toeverything/components/board-state';
+import { styled } from '@toeverything/components/ui';
+import { useTldrawApp } from '../../../hooks';
+
+import { SimplifiedShape } from './SimplifiedShape';
+import { Viewport } from './Viewport';
+import { processBound, getViewportBound } from './bounds';
+
+const MINI_MAP_WIDTH = 150;
+const MINI_MAP_HEIGHT = 100;
+
+const getScaleToMap = (width: number, height: number) => {
+    const scaleWidth = width / MINI_MAP_WIDTH;
+    const scaleHeight = height / MINI_MAP_HEIGHT;
+    return scaleWidth > scaleHeight ? scaleWidth : scaleHeight;
+};
+
+export const MiniMap: FC = () => {
+    const app = useTldrawApp();
+    const page = app.useStore(s => s.document.pages[s.appState.currentPageId]);
+    const pageState = app.useStore(
+        s => s.document.pageStates[s.appState.currentPageId]
+    );
+    const viewportBound = getViewportBound(
+        app.rendererBounds,
+        pageState.camera
+    );
+
+    const shapes = Object.values(page.shapes);
+    const bounds = shapes.map(shape => TLDR.get_bounds(shape));
+    const commonBound = Utils.getCommonBounds(bounds.concat(viewportBound));
+    const scaleToMap = commonBound
+        ? getScaleToMap(commonBound.width, commonBound.height)
+        : 1;
+    const processedViewportBound = processBound({
+        bound: viewportBound,
+        scale: scaleToMap,
+        commonBound,
+    });
+
+    return (
+        <Container>
+            <ShapesContainer>
+                {shapes.map((shape, index) => {
+                    const bound = processBound({
+                        bound: bounds[index],
+                        scale: scaleToMap,
+                        commonBound,
+                    });
+                    return (
+                        <SimplifiedShape
+                            key={shape.id}
+                            {...bound}
+                            onClick={() => {
+                                app.zoomToShapes([shape]);
+                            }}
+                        />
+                    );
+                })}
+                <Viewport
+                    {...processedViewportBound}
+                    onPan={delta => {
+                        app.pan(Vec.mul(delta, scaleToMap));
+                    }}
+                />
+            </ShapesContainer>
+        </Container>
+    );
+};
+
+const Container = styled('div')(({ theme }) => ({
+    display: 'inline-block',
+    padding: '10px',
+    borderColor: theme.affine.palette.borderColor,
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderRadius: '4px',
+    backgroundColor: theme.affine.palette.white,
+}));
+
+const ShapesContainer = styled('div')({
+    position: 'relative',
+    width: `${MINI_MAP_WIDTH}px`,
+    height: `${MINI_MAP_HEIGHT}px`,
+});
diff --git a/libs/components/board-draw/src/components/zoom-bar/mini-map/SimplifiedShape.tsx b/libs/components/board-draw/src/components/zoom-bar/mini-map/SimplifiedShape.tsx
new file mode 100644
index 000000000..e64cf18f7
--- /dev/null
+++ b/libs/components/board-draw/src/components/zoom-bar/mini-map/SimplifiedShape.tsx
@@ -0,0 +1,35 @@
+import type { FC, CSSProperties } from 'react';
+import type { TLBounds } from '@tldraw/core';
+import { styled } from '@toeverything/components/ui';
+
+interface SimplifiedShapeProps extends TLBounds {
+    onClick?: () => void;
+}
+
+export const SimplifiedShape: FC<SimplifiedShapeProps> = ({
+    onClick,
+    width,
+    height,
+    minX,
+    minY,
+}) => {
+    const style: CSSProperties = {
+        width: `${width}px`,
+        height: `${height}px`,
+        left: `${minX}px`,
+        top: `${minY}px`,
+    };
+    return <Container style={style} onClick={onClick} />;
+};
+
+const Container = styled('div')(({ theme }) => ({
+    position: 'absolute',
+    backgroundColor: theme.affine.palette.icons,
+    opacity: 0.2,
+    cursor: 'pointer',
+
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    '&:hover': {
+        opacity: 0.8,
+    },
+}));
diff --git a/libs/components/board-draw/src/components/zoom-bar/mini-map/Viewport.tsx b/libs/components/board-draw/src/components/zoom-bar/mini-map/Viewport.tsx
new file mode 100644
index 000000000..de923a6af
--- /dev/null
+++ b/libs/components/board-draw/src/components/zoom-bar/mini-map/Viewport.tsx
@@ -0,0 +1,69 @@
+import type { FC, CSSProperties, PointerEventHandler } from 'react';
+import { useState, useRef } from 'react';
+import type { TLBounds } from '@tldraw/core';
+import Vec from '@tldraw/vec';
+import { styled, alpha } from '@toeverything/components/ui';
+
+interface ViewportProps extends TLBounds {
+    onPan?: (delta: [number, number]) => void;
+}
+
+export const Viewport: FC<ViewportProps> = ({
+    onPan,
+    width,
+    height,
+    minX,
+    minY,
+}) => {
+    const style: CSSProperties = {
+        width: `${width}px`,
+        height: `${height}px`,
+        left: `${minX}px`,
+        top: `${minY}px`,
+    };
+    const [dragging, setDragging] = useState(false);
+    const lastPosition = useRef<[number, number]>([0, 0]);
+    const onPointerDown: PointerEventHandler<HTMLDivElement> = e => {
+        setDragging(true);
+        lastPosition.current = [e.clientX, e.clientY];
+        const onPointerMove = (ev: PointerEvent) => {
+            const newPosition = [ev.clientX, ev.clientY];
+            const delta = Vec.sub(newPosition, lastPosition.current);
+            lastPosition.current = newPosition as [number, number];
+            onPan?.(delta as [number, number]);
+        };
+        const onPointerUp = () => {
+            lastPosition.current = [0, 0];
+            setDragging(false);
+            document.removeEventListener('pointermove', onPointerMove);
+            document.removeEventListener('pointerup', onPointerUp);
+        };
+        document.addEventListener('pointermove', onPointerMove);
+        document.addEventListener('pointerup', onPointerUp);
+    };
+    return (
+        <Container
+            style={style}
+            onPointerDown={onPointerDown}
+            dragging={dragging}
+        />
+    );
+};
+
+const Container = styled('div')<{ dragging?: boolean }>(
+    ({ theme, dragging }) => ({
+        position: 'absolute',
+        borderColor: theme.affine.palette.primary,
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        cursor: 'pointer',
+        backgroundColor: dragging
+            ? alpha(theme.affine.palette.icons, 0.2)
+            : 'unset',
+
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        '&:hover': {
+            backgroundColor: alpha(theme.affine.palette.icons, 0.2),
+        },
+    })
+);
diff --git a/libs/components/board-draw/src/components/zoom-bar/mini-map/bounds.ts b/libs/components/board-draw/src/components/zoom-bar/mini-map/bounds.ts
new file mode 100644
index 000000000..786b4dd09
--- /dev/null
+++ b/libs/components/board-draw/src/components/zoom-bar/mini-map/bounds.ts
@@ -0,0 +1,60 @@
+import type { TLBounds, TLPageState } from '@tldraw/core';
+
+const getOffsetBound = (bound: TLBounds, commonBound: TLBounds): TLBounds => {
+    return {
+        width: bound.width,
+        height: bound.height,
+        minX: bound.minX - commonBound.minX,
+        maxX: bound.maxX - commonBound.maxX,
+        minY: bound.minY - commonBound.minY,
+        maxY: bound.maxY - commonBound.maxY,
+    };
+};
+
+const getScaledBound = (bound: TLBounds, scale: number): TLBounds => {
+    return {
+        width: bound.width / scale,
+        height: bound.height / scale,
+        minX: bound.minX / scale,
+        maxX: bound.maxX / scale,
+        minY: bound.minY / scale,
+        maxY: bound.maxY / scale,
+    };
+};
+
+interface ProcessBoundProps {
+    bound: TLBounds;
+    scale: number;
+    commonBound: TLBounds;
+}
+
+export const processBound = ({
+    bound,
+    scale,
+    commonBound,
+}: ProcessBoundProps) => {
+    let boundResult = bound;
+    boundResult = getOffsetBound(boundResult, commonBound);
+    boundResult = getScaledBound(boundResult, scale);
+    return boundResult;
+};
+
+export const getViewportBound = (
+    rendererBounds: TLBounds,
+    camera: TLPageState['camera']
+): TLBounds => {
+    const [cameraX, cameraY] = camera.point;
+    const zoom = camera.zoom;
+    const minX = 0 - cameraX;
+    const minY = 0 - cameraY;
+    const width = rendererBounds.width / zoom;
+    const height = rendererBounds.height / zoom;
+    return {
+        width,
+        height,
+        minX,
+        maxX: minX + width,
+        minY,
+        maxY: minY + height,
+    };
+};
diff --git a/libs/components/board-draw/src/components/zoom-bar/mini-map/index.ts b/libs/components/board-draw/src/components/zoom-bar/mini-map/index.ts
new file mode 100644
index 000000000..b0392e643
--- /dev/null
+++ b/libs/components/board-draw/src/components/zoom-bar/mini-map/index.ts
@@ -0,0 +1 @@
+export { MiniMap } from './MiniMap';
diff --git a/libs/components/board-draw/src/constants.ts b/libs/components/board-draw/src/constants.ts
new file mode 100644
index 000000000..ffb5be480
--- /dev/null
+++ b/libs/components/board-draw/src/constants.ts
@@ -0,0 +1,97 @@
+import type { Easing } from '@toeverything/components/board-types';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const LETTER_SPACING = '-0.03em';
+export const LINE_HEIGHT = 1;
+export const GRID_SIZE = 8;
+export const SVG_EXPORT_PADDING = 16;
+export const BINDING_DISTANCE = 16;
+export const CLONING_DISTANCE = 32;
+export const FIT_TO_SCREEN_PADDING = 128;
+export const SNAP_DISTANCE = 5;
+export const EMPTY_ARRAY = [] as any[];
+export const SLOW_SPEED = 10;
+export const VERY_SLOW_SPEED = 2.5;
+export const GHOSTED_OPACITY = 0.3;
+export const DEAD_ZONE = 3;
+export const LABEL_POINT = [0.5, 0.5];
+
+export const PI2 = Math.PI * 2;
+
+export const EASINGS: Record<Easing, (t: number) => number> = {
+    linear: t => t,
+    easeInQuad: t => t * t,
+    easeOutQuad: t => t * (2 - t),
+    easeInOutQuad: t => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
+    easeInCubic: t => t * t * t,
+    easeOutCubic: t => --t * t * t + 1,
+    easeInOutCubic: t =>
+        t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+    easeInQuart: t => t * t * t * t,
+    easeOutQuart: t => 1 - --t * t * t * t,
+    easeInOutQuart: t =>
+        t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t,
+    easeInQuint: t => t * t * t * t * t,
+    easeOutQuint: t => 1 + --t * t * t * t * t,
+    easeInOutQuint: t =>
+        t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t,
+    easeInSine: t => 1 - Math.cos((t * Math.PI) / 2),
+    easeOutSine: t => Math.sin((t * Math.PI) / 2),
+    easeInOutSine: t => -(Math.cos(Math.PI * t) - 1) / 2,
+    easeInExpo: t => (t <= 0 ? 0 : Math.pow(2, 10 * t - 10)),
+    easeOutExpo: t => (t >= 1 ? 1 : 1 - Math.pow(2, -10 * t)),
+    easeInOutExpo: t =>
+        t <= 0
+            ? 0
+            : t >= 1
+            ? 1
+            : t < 0.5
+            ? Math.pow(2, 20 * t - 10) / 2
+            : (2 - Math.pow(2, -20 * t + 10)) / 2,
+};
+
+export const EASING_STRINGS: Record<Easing, string> = {
+    linear: `(t) => t`,
+    easeInQuad: `(t) => t * t`,
+    easeOutQuad: `(t) => t * (2 - t)`,
+    easeInOutQuad: `(t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t)`,
+    easeInCubic: `(t) => t * t * t`,
+    easeOutCubic: `(t) => --t * t * t + 1`,
+    easeInOutCubic: `(t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1`,
+    easeInQuart: `(t) => t * t * t * t`,
+    easeOutQuart: `(t) => 1 - --t * t * t * t`,
+    easeInOutQuart: `(t) => t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t`,
+    easeInQuint: `(t) => t * t * t * t * t`,
+    easeOutQuint: `(t) => 1 + --t * t * t * t * t`,
+    easeInOutQuint: `(t) => t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t`,
+    easeInSine: `(t) => 1 - Math.cos((t * Math.PI) / 2)`,
+    easeOutSine: `(t) => Math.sin((t * Math.PI) / 2)`,
+    easeInOutSine: `(t) => -(Math.cos(Math.PI * t) - 1) / 2`,
+    easeInExpo: `(t) => (t <= 0 ? 0 : Math.pow(2, 10 * t - 10))`,
+    easeOutExpo: `(t) => (t >= 1 ? 1 : 1 - Math.pow(2, -10 * t))`,
+    easeInOutExpo: `(t) => t <= 0 ? 0 : t >= 1 ? 1 : t < 0.5 ? Math.pow(2, 20 * t - 10) / 2 : (2 - Math.pow(2, -20 * t + 10)) / 2`,
+};
+
+export const USER_COLORS = [
+    '#EC5E41',
+    '#F2555A',
+    '#F04F88',
+    '#E34BA9',
+    '#BD54C6',
+    '#9D5BD2',
+    '#7B66DC',
+    '#02B1CC',
+    '#11B3A3',
+    '#39B178',
+    '#55B467',
+    '#FF802B',
+];
+
+export const isSafari =
+    typeof Window === 'undefined'
+        ? false
+        : /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+export const IMAGE_EXTENSIONS = ['.png', '.svg', '.jpg', '.jpeg', '.gif'];
+
+export const VIDEO_EXTENSIONS = isSafari ? [] : ['.mp4', '.webm'];
diff --git a/libs/components/board-draw/src/hooks/index.ts b/libs/components/board-draw/src/hooks/index.ts
new file mode 100644
index 000000000..26a3f2ad7
--- /dev/null
+++ b/libs/components/board-draw/src/hooks/index.ts
@@ -0,0 +1,6 @@
+export * from './use-keyboard-shortcuts';
+export * from './use-tldraw-app';
+// export * from './useTheme';
+export * from './use-stylesheet';
+export * from './use-file-system-handlers';
+// export * from './useFileSystem';
diff --git a/libs/components/board-draw/src/hooks/use-file-system-handlers.ts b/libs/components/board-draw/src/hooks/use-file-system-handlers.ts
new file mode 100644
index 000000000..ad4febda3
--- /dev/null
+++ b/libs/components/board-draw/src/hooks/use-file-system-handlers.ts
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { useTldrawApp } from './use-tldraw-app';
+
+export function useFileSystemHandlers() {
+    const app = useTldrawApp();
+
+    const onNewProject = React.useCallback(
+        async (e?: React.MouseEvent | React.KeyboardEvent | KeyboardEvent) => {
+            if (e && app.callbacks.onOpenProject) e.preventDefault();
+            app.callbacks.onNewProject?.(app);
+        },
+        [app]
+    );
+
+    const onSaveProject = React.useCallback(
+        (e?: React.MouseEvent | React.KeyboardEvent | KeyboardEvent) => {
+            if (e && app.callbacks.onOpenProject) e.preventDefault();
+            app.callbacks.onSaveProject?.(app);
+        },
+        [app]
+    );
+
+    const onSaveProjectAs = React.useCallback(
+        (e?: React.MouseEvent | React.KeyboardEvent | KeyboardEvent) => {
+            if (e && app.callbacks.onOpenProject) e.preventDefault();
+            app.callbacks.onSaveProjectAs?.(app);
+        },
+        [app]
+    );
+
+    const onOpenProject = React.useCallback(
+        async (e?: React.MouseEvent | React.KeyboardEvent | KeyboardEvent) => {
+            if (e && app.callbacks.onOpenProject) e.preventDefault();
+            app.callbacks.onOpenProject?.(app);
+        },
+        [app]
+    );
+
+    const onOpenMedia = React.useCallback(
+        async (e?: React.MouseEvent | React.KeyboardEvent | KeyboardEvent) => {
+            if (e && app.callbacks.onOpenMedia) e.preventDefault();
+            app.callbacks.onOpenMedia?.(app);
+        },
+        [app]
+    );
+
+    return {
+        onNewProject,
+        onSaveProject,
+        onSaveProjectAs,
+        onOpenProject,
+        onOpenMedia,
+    };
+}
diff --git a/libs/components/board-draw/src/hooks/use-keyboard-shortcuts.tsx b/libs/components/board-draw/src/hooks/use-keyboard-shortcuts.tsx
new file mode 100644
index 000000000..e553bc3d5
--- /dev/null
+++ b/libs/components/board-draw/src/hooks/use-keyboard-shortcuts.tsx
@@ -0,0 +1,679 @@
+import * as React from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { AlignStyle, TDShapeType } from '@toeverything/components/board-types';
+import { useTldrawApp } from './use-tldraw-app';
+import { useFileSystemHandlers } from './use-file-system-handlers';
+
+export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
+    const app = useTldrawApp();
+
+    const canHandleEvent = React.useCallback(
+        (ignoreMenus = false) => {
+            const elm = ref.current;
+            if (
+                ignoreMenus &&
+                (app.isMenuOpen || app.settings.keepStyleMenuOpen)
+            )
+                return true;
+            return (
+                elm &&
+                (document.activeElement === elm ||
+                    elm.contains(document.activeElement))
+            );
+        },
+        [ref]
+    );
+
+    React.useEffect(() => {
+        if (!app) return;
+
+        const handleCut = (e: ClipboardEvent) => {
+            if (!canHandleEvent(true)) return;
+
+            if (app.readOnly) {
+                app.copy(undefined, undefined, e);
+                return;
+            }
+
+            app.cut(undefined, undefined, e);
+        };
+
+        const handleCopy = (e: ClipboardEvent) => {
+            if (!canHandleEvent(true)) return;
+
+            app.copy(undefined, undefined, e);
+        };
+
+        const handlePaste = (e: ClipboardEvent) => {
+            if (!canHandleEvent(true)) return;
+            if (app.readOnly) return;
+
+            app.paste(undefined, e);
+        };
+
+        document.addEventListener('cut', handleCut);
+        document.addEventListener('copy', handleCopy);
+        document.addEventListener('paste', handlePaste);
+        return () => {
+            document.removeEventListener('cut', handleCut);
+            document.removeEventListener('copy', handleCopy);
+            document.removeEventListener('paste', handlePaste);
+        };
+    }, [app]);
+
+    /* ---------------------- Tools --------------------- */
+
+    useHotkeys(
+        'v,1',
+        () => {
+            if (!canHandleEvent(true)) return;
+            app.selectTool('select');
+        },
+        [app, ref.current]
+    );
+
+    useHotkeys(
+        'd,p,2',
+        () => {
+            if (!canHandleEvent(true)) return;
+            app.selectTool(TDShapeType.Draw);
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'e,3',
+        () => {
+            if (!canHandleEvent(true)) return;
+            app.selectTool('erase');
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'r,4',
+        () => {
+            if (!canHandleEvent(true)) return;
+            app.selectTool(TDShapeType.Rectangle);
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'o,5',
+        () => {
+            if (!canHandleEvent(true)) return;
+            app.selectTool(TDShapeType.Ellipse);
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'g,6',
+        () => {
+            if (!canHandleEvent()) return;
+            app.selectTool(TDShapeType.Triangle);
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'l,7',
+        () => {
+            if (!canHandleEvent(true)) return;
+            app.selectTool(TDShapeType.Line);
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'a,8',
+        () => {
+            if (!canHandleEvent(true)) return;
+            app.selectTool(TDShapeType.Arrow);
+        },
+        undefined,
+        [app]
+    );
+
+    /* ---------------------- Misc ---------------------- */
+
+    // Dark Mode
+
+    useHotkeys(
+        'ctrl+shift+d,⌘+shift+d',
+        e => {
+            if (!canHandleEvent(true)) return;
+            app.toggleDarkMode();
+            e.preventDefault();
+        },
+        undefined,
+        [app]
+    );
+
+    // Focus Mode
+
+    useHotkeys(
+        'ctrl+.,⌘+.',
+        () => {
+            if (!canHandleEvent(true)) return;
+            app.toggleFocusMode();
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'ctrl+shift+g,⌘+shift+g',
+        () => {
+            if (!canHandleEvent(true)) return;
+            app.toggleGrid();
+        },
+        undefined,
+        [app]
+    );
+
+    // File System
+
+    const {
+        onNewProject,
+        onOpenProject,
+        onSaveProject,
+        onSaveProjectAs,
+        onOpenMedia,
+    } = useFileSystemHandlers();
+
+    useHotkeys(
+        'ctrl+n,⌘+n',
+        e => {
+            if (!canHandleEvent()) return;
+
+            onNewProject(e);
+        },
+        undefined,
+        [app]
+    );
+    useHotkeys(
+        'ctrl+s,⌘+s',
+        e => {
+            if (!canHandleEvent()) return;
+
+            onSaveProject(e);
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'ctrl+shift+s,⌘+shift+s',
+        e => {
+            if (!canHandleEvent()) return;
+
+            onSaveProjectAs(e);
+        },
+        undefined,
+        [app]
+    );
+    useHotkeys(
+        'ctrl+o,⌘+o',
+        e => {
+            if (!canHandleEvent()) return;
+
+            onOpenProject(e);
+        },
+        undefined,
+        [app]
+    );
+    useHotkeys(
+        'ctrl+u,⌘+u',
+        e => {
+            if (!canHandleEvent()) return;
+            onOpenMedia(e);
+        },
+        undefined,
+        [app]
+    );
+
+    // Undo Redo
+
+    useHotkeys(
+        '⌘+z,ctrl+z',
+        () => {
+            if (!canHandleEvent(true)) return;
+
+            if (app.session) {
+                app.cancelSession();
+            } else {
+                app.undo();
+            }
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'ctrl+shift+z,⌘+shift+z',
+        () => {
+            if (!canHandleEvent(true)) return;
+
+            if (app.session) {
+                app.cancelSession();
+            } else {
+                app.redo();
+            }
+        },
+        undefined,
+        [app]
+    );
+
+    // Undo Redo
+
+    useHotkeys(
+        '⌘+u,ctrl+u',
+        () => {
+            if (!canHandleEvent()) return;
+            app.undoSelect();
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'ctrl+shift-u,⌘+shift+u',
+        () => {
+            if (!canHandleEvent()) return;
+            app.redoSelect();
+        },
+        undefined,
+        [app]
+    );
+
+    /* -------------------- Commands -------------------- */
+
+    // Camera
+
+    useHotkeys(
+        'ctrl+=,⌘+=,ctrl+num_subtract,⌘+num_subtract',
+        e => {
+            if (!canHandleEvent(true)) return;
+            app.zoomIn();
+            e.preventDefault();
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'ctrl+-,⌘+-,ctrl+num_add,⌘+num_add',
+        e => {
+            if (!canHandleEvent(true)) return;
+
+            app.zoomOut();
+            e.preventDefault();
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'shift+0,ctrl+numpad_0,⌘+numpad_0',
+        () => {
+            if (!canHandleEvent(true)) return;
+            app.resetZoom();
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'shift+1',
+        () => {
+            if (!canHandleEvent(true)) return;
+            app.zoomToFit();
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'shift+2',
+        () => {
+            if (!canHandleEvent(true)) return;
+            app.zoomToSelection();
+        },
+        undefined,
+        [app]
+    );
+
+    // Duplicate
+
+    useHotkeys(
+        'ctrl+d,⌘+d',
+        e => {
+            if (!canHandleEvent()) return;
+
+            app.duplicate();
+            e.preventDefault();
+        },
+        undefined,
+        [app]
+    );
+
+    // Flip
+
+    useHotkeys(
+        'shift+h',
+        () => {
+            if (!canHandleEvent(true)) return;
+            app.flipHorizontal();
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'shift+v',
+        () => {
+            if (!canHandleEvent(true)) return;
+            app.flipVertical();
+        },
+        undefined,
+        [app]
+    );
+
+    // Cancel
+
+    useHotkeys(
+        'escape',
+        () => {
+            if (!canHandleEvent(true)) return;
+
+            app.cancel();
+        },
+        undefined,
+        [app]
+    );
+
+    // Delete
+
+    useHotkeys(
+        'backspace,del',
+        () => {
+            if (!canHandleEvent()) return;
+            app.delete();
+        },
+        undefined,
+        [app]
+    );
+
+    // Select All
+
+    useHotkeys(
+        '⌘+a,ctrl+a',
+        () => {
+            if (!canHandleEvent(true)) return;
+            app.selectAll();
+        },
+        undefined,
+        [app]
+    );
+
+    // Nudge
+
+    useHotkeys(
+        'up',
+        () => {
+            if (!canHandleEvent()) return;
+            app.nudge([0, -1], false);
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'right',
+        () => {
+            if (!canHandleEvent()) return;
+            app.nudge([1, 0], false);
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'down',
+        () => {
+            if (!canHandleEvent()) return;
+            app.nudge([0, 1], false);
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'left',
+        () => {
+            if (!canHandleEvent()) return;
+            app.nudge([-1, 0], false);
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'shift+up',
+        () => {
+            if (!canHandleEvent()) return;
+            app.nudge([0, -1], true);
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'shift+right',
+        () => {
+            if (!canHandleEvent()) return;
+            app.nudge([1, 0], true);
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'shift+down',
+        () => {
+            if (!canHandleEvent()) return;
+            app.nudge([0, 1], true);
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'shift+left',
+        () => {
+            if (!canHandleEvent()) return;
+            app.nudge([-1, 0], true);
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        '⌘+shift+l,ctrl+shift+l',
+        () => {
+            if (!canHandleEvent()) return;
+            app.toggleLocked();
+        },
+        undefined,
+        [app]
+    );
+
+    // Copy, Cut & Paste
+
+    // useHotkeys(
+    //   '⌘+c,ctrl+c',
+    //   () => {
+    //     if (!canHandleEvent()) return
+    //     app.copy()
+    //   },
+    //   undefined,
+    //   [app]
+    // )
+
+    useHotkeys(
+        '⌘+shift+c,ctrl+shift+c',
+        e => {
+            if (!canHandleEvent()) return;
+
+            app.copySvg();
+            e.preventDefault();
+        },
+        undefined,
+        [app]
+    );
+
+    // useHotkeys(
+    //   '⌘+x,ctrl+x',
+    //   () => {
+    //     if (!canHandleEvent()) return
+    //     app.cut()
+    //   },
+    //   undefined,
+    //   [app]
+    // )
+
+    // useHotkeys(
+    //   '⌘+v,ctrl+v',
+    //   () => {
+    //     if (!canHandleEvent()) return
+
+    //     app.paste()
+    //   },
+    //   undefined,
+    //   [app]
+    // )
+
+    // Group & Ungroup
+
+    useHotkeys(
+        '⌘+g,ctrl+g',
+        e => {
+            if (!canHandleEvent()) return;
+
+            app.group();
+            e.preventDefault();
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        '⌘+shift+g,ctrl+shift+g',
+        e => {
+            if (!canHandleEvent()) return;
+
+            app.ungroup();
+            e.preventDefault();
+        },
+        undefined,
+        [app]
+    );
+
+    // Move
+
+    useHotkeys(
+        '[',
+        () => {
+            if (!canHandleEvent(true)) return;
+            app.moveBackward();
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        ']',
+        () => {
+            if (!canHandleEvent(true)) return;
+            app.moveForward();
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'shift+[',
+        () => {
+            if (!canHandleEvent(true)) return;
+            app.moveToBack();
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'shift+]',
+        () => {
+            if (!canHandleEvent(true)) return;
+            app.moveToFront();
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'ctrl+shift+backspace,⌘+shift+backspace',
+        e => {
+            if (!canHandleEvent()) return;
+            if (app.settings.isDebugMode) {
+                app.resetDocument();
+            }
+            e.preventDefault();
+        },
+        undefined,
+        [app]
+    );
+
+    // Text Align
+
+    useHotkeys(
+        'alt+command+l,alt+ctrl+l',
+        e => {
+            if (!canHandleEvent(true)) return;
+            app.style({ textAlign: AlignStyle.Start });
+            e.preventDefault();
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'alt+command+t,alt+ctrl+t',
+        e => {
+            if (!canHandleEvent(true)) return;
+            app.style({ textAlign: AlignStyle.Middle });
+            e.preventDefault();
+        },
+        undefined,
+        [app]
+    );
+
+    useHotkeys(
+        'alt+command+r,alt+ctrl+r',
+        e => {
+            if (!canHandleEvent(true)) return;
+            app.style({ textAlign: AlignStyle.End });
+            e.preventDefault();
+        },
+        undefined,
+        [app]
+    );
+}
diff --git a/libs/components/board-draw/src/hooks/use-stylesheet.ts b/libs/components/board-draw/src/hooks/use-stylesheet.ts
new file mode 100644
index 000000000..b611e6a64
--- /dev/null
+++ b/libs/components/board-draw/src/hooks/use-stylesheet.ts
@@ -0,0 +1,60 @@
+import * as React from 'react';
+
+const styles = new Map<string, HTMLStyleElement>();
+
+const UID = `tldraw-fonts`;
+
+const CSS = `
+@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Source+Code+Pro&family=Source+Sans+Pro&family=Crimson+Pro&display=block');
+
+@font-face {
+  font-family: 'Recursive';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/recursive/v23/8vI-7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImKsvxvU-MXGX2fSqasNfUlTGZnI14ZeY.woff2)
+    format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Recursive';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/recursive/v23/8vI-7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImKsvxvU-MXGX2fSqasNfUlTGZnI14ZeY.woff2)
+    format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Recursive Mono';
+  font-style: normal;
+  font-weight: 420;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/recursive/v23/8vI-7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImqvTxvU-MXGX2fSqasNfUlTGZnI14ZeY.woff2)
+    format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+`;
+
+export function useStylesheet() {
+    React.useLayoutEffect(() => {
+        if (styles.get(UID)) return;
+        const style = document.createElement('style');
+        style.innerHTML = CSS;
+        style.setAttribute('id', UID);
+        document.head.appendChild(style);
+        styles.set(UID, style);
+
+        return () => {
+            if (style && document.head.contains(style)) {
+                document.head.removeChild(style);
+                styles.delete(UID);
+            }
+        };
+    }, []);
+}
diff --git a/libs/components/board-draw/src/hooks/use-tldraw-app.ts b/libs/components/board-draw/src/hooks/use-tldraw-app.ts
new file mode 100644
index 000000000..b82547803
--- /dev/null
+++ b/libs/components/board-draw/src/hooks/use-tldraw-app.ts
@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export const TldrawContext = React.createContext<TldrawApp>({} as TldrawApp);
+
+export function useTldrawApp() {
+    const context = React.useContext(TldrawContext);
+    return context;
+}
diff --git a/libs/components/board-draw/src/index.ts b/libs/components/board-draw/src/index.ts
new file mode 100644
index 000000000..69704e7d8
--- /dev/null
+++ b/libs/components/board-draw/src/index.ts
@@ -0,0 +1,2 @@
+export { Tldraw } from './TlDraw';
+export { useTldrawApp } from './hooks';
diff --git a/libs/components/board-draw/tsconfig.json b/libs/components/board-draw/tsconfig.json
new file mode 100644
index 000000000..dce3dae9a
--- /dev/null
+++ b/libs/components/board-draw/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/components/board-draw/tsconfig.lib.json b/libs/components/board-draw/tsconfig.lib.json
new file mode 100644
index 000000000..6a4378740
--- /dev/null
+++ b/libs/components/board-draw/tsconfig.lib.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"]
+}
diff --git a/libs/components/board-draw/tsconfig.spec.json b/libs/components/board-draw/tsconfig.spec.json
new file mode 100644
index 000000000..24b3ac659
--- /dev/null
+++ b/libs/components/board-draw/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+    "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"
+    ]
+}
diff --git a/libs/components/board-sessions/.babelrc b/libs/components/board-sessions/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/components/board-sessions/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/components/board-sessions/.eslintrc.json b/libs/components/board-sessions/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/components/board-sessions/.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": {}
+        }
+    ]
+}
diff --git a/libs/components/board-sessions/README.md b/libs/components/board-sessions/README.md
new file mode 100644
index 000000000..dcee10cad
--- /dev/null
+++ b/libs/components/board-sessions/README.md
@@ -0,0 +1,7 @@
+# components-board-sessions
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test components-board-sessions` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/components/board-sessions/jest.config.ts b/libs/components/board-sessions/jest.config.ts
new file mode 100644
index 000000000..e1555360b
--- /dev/null
+++ b/libs/components/board-sessions/jest.config.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+    displayName: 'components-board-sessions',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/components/board-sessions',
+};
diff --git a/libs/components/board-sessions/package.json b/libs/components/board-sessions/package.json
new file mode 100644
index 000000000..b4e062da0
--- /dev/null
+++ b/libs/components/board-sessions/package.json
@@ -0,0 +1,10 @@
+{
+    "name": "@toeverything/components/board-sessions",
+    "version": "0.0.1",
+    "license": "MIT",
+    "dependencies": {
+        "@tldraw/core": "^1.12.0",
+        "@tldraw/intersect": "^1.7.1",
+        "@tldraw/vec": "^1.7.0"
+    }
+}
diff --git a/libs/components/board-sessions/project.json b/libs/components/board-sessions/project.json
new file mode 100644
index 000000000..69affe040
--- /dev/null
+++ b/libs/components/board-sessions/project.json
@@ -0,0 +1,45 @@
+{
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/components/board-sessions/src",
+    "projectType": "library",
+    "tags": ["components"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/components/board-sessions",
+                "tsConfig": "libs/components/board-sessions/tsconfig.lib.json",
+                "project": "libs/components/board-sessions/package.json",
+                "entryFile": "libs/components/board-sessions/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "libs/rollup.config.cjs",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/components/board-sessions/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/components/board-sessions/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/components/board-sessions"],
+            "options": {
+                "jestConfig": "libs/components/board-sessions/jest.config.ts",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/components/board-sessions/src/arrow-session.ts b/libs/components/board-sessions/src/arrow-session.ts
new file mode 100644
index 000000000..7c2277df0
--- /dev/null
+++ b/libs/components/board-sessions/src/arrow-session.ts
@@ -0,0 +1,581 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import {
+    ArrowBinding,
+    ArrowShape,
+    TDShape,
+    TDBinding,
+    TDStatus,
+    SessionType,
+    TDShapeType,
+    TldrawPatch,
+    TldrawCommand,
+} from '@toeverything/components/board-types';
+import { Vec } from '@tldraw/vec';
+import { TLDR, deepCopy } from '@toeverything/components/board-state';
+import { shapeUtils } from '@toeverything/components/board-shapes';
+import { BaseSession } from './base-session';
+import type { TldrawApp } from '@toeverything/components/board-state';
+import { Utils } from '@tldraw/core';
+
+export class ArrowSession extends BaseSession {
+    type = SessionType.Arrow;
+    performanceMode: undefined;
+    status = TDStatus.TranslatingHandle;
+    newStartBindingId = Utils.uniqueId();
+    draggedBindingId = Utils.uniqueId();
+    didBind = false;
+    initialShape: ArrowShape;
+    handleId: 'start' | 'end';
+    bindableShapeIds: string[];
+    initialBinding?: TDBinding;
+    startBindingShapeId?: string;
+    isCreate: boolean;
+
+    constructor(
+        app: TldrawApp,
+        shapeId: string,
+        handleId: 'start' | 'end',
+        isCreate = false
+    ) {
+        super(app);
+
+        this.isCreate = isCreate;
+
+        const { currentPageId } = app.state.appState;
+
+        const page = app.state.document.pages[currentPageId];
+
+        this.handleId = handleId;
+
+        this.initialShape = deepCopy(page.shapes[shapeId] as ArrowShape);
+
+        this.bindableShapeIds = TLDR.get_bindable_shape_ids(app.state).filter(
+            id =>
+                !(
+                    id === this.initialShape.id ||
+                    id === this.initialShape.parentId
+                )
+        );
+
+        // TODO: find out why this the oppositeHandleBindingId is sometimes missing
+        const oppositeHandleBindingId =
+            this.initialShape.handles[handleId === 'start' ? 'end' : 'start']
+                ?.bindingId;
+
+        if (oppositeHandleBindingId) {
+            const oppositeToId = page.bindings[oppositeHandleBindingId]?.toId;
+            if (oppositeToId) {
+                this.bindableShapeIds = this.bindableShapeIds.filter(
+                    id => id !== oppositeToId
+                );
+            }
+        }
+
+        const { originPoint } = this.app;
+
+        if (this.isCreate) {
+            // If we're creating a new shape, should we bind its first point?
+            // The method may return undefined, which is correct if there is no
+            // bindable shape under the pointer.
+            this.startBindingShapeId = this.bindableShapeIds
+                .map(id => page.shapes[id])
+                .filter(shape =>
+                    Utils.pointInBounds(
+                        originPoint,
+                        TLDR.get_shape_util(shape).getBounds(shape)
+                    )
+                )
+                .sort((a, b) => {
+                    // TODO - We should be smarter here, what's the right logic?
+                    return b.childIndex - a.childIndex;
+                })[0]?.id;
+
+            if (this.startBindingShapeId) {
+                this.bindableShapeIds.splice(
+                    this.bindableShapeIds.indexOf(this.startBindingShapeId),
+                    1
+                );
+            }
+        } else {
+            // If we're editing an existing line, is there a binding already
+            // for the dragging handle?
+            const initialBindingId =
+                this.initialShape.handles[this.handleId].bindingId;
+
+            if (initialBindingId) {
+                this.initialBinding = page.bindings[initialBindingId];
+            } else {
+                // If not, explicitly set this handle to undefined, so that it gets deleted on undo
+                this.initialShape.handles[this.handleId].bindingId = undefined;
+            }
+        }
+    }
+
+    start = (): TldrawPatch | undefined => void null;
+
+    update = (): TldrawPatch | undefined => {
+        const { initialShape } = this;
+        const {
+            currentPoint,
+            shiftKey,
+            altKey,
+            metaKey,
+            currentGrid,
+            settings: { showGrid },
+        } = this.app;
+
+        const shape = this.app.getShape<ArrowShape>(initialShape.id);
+
+        if (shape.isLocked) return;
+
+        const { handles } = initialShape;
+
+        const handleId = this.handleId as keyof typeof handles;
+        // If the handle can bind, then we need to search bindable shapes for
+        // a binding.
+        if (!handles[handleId].canBind) return;
+
+        // Find the delta (in shape space)
+        let delta = Vec.sub(
+            currentPoint,
+            Vec.add(handles[handleId].point, initialShape.point)
+        );
+
+        if (shiftKey) {
+            const A = altKey
+                ? Vec.med(handles.start.point, handles.end.point)
+                : handles[handleId === 'start' ? 'end' : 'start'].point;
+            const B = handles[handleId].point;
+            const C = Vec.add(B, delta);
+
+            const angle = Vec.angle(A, C);
+
+            const adjusted = Vec.rotWith(
+                C,
+                A,
+                Utils.snapAngleToSegments(angle, 24) - angle
+            );
+
+            delta = Vec.add(delta, Vec.sub(adjusted, C));
+        }
+
+        const nextPoint = Vec.add(handles[handleId].point, delta);
+
+        const handleChanges: Partial<any> = {
+            [handleId]: {
+                ...handles[handleId],
+                point: showGrid
+                    ? Vec.snap(nextPoint, currentGrid)
+                    : Vec.toFixed(nextPoint),
+                bindingId: undefined,
+            },
+        };
+
+        if (altKey) {
+            // If the user is holding alt key, apply the inverse delta
+            // to the oppoosite handle.
+            const oppositeHandleId = handleId === 'start' ? 'end' : 'start';
+
+            const nextPoint = Vec.sub(handles[oppositeHandleId].point, delta);
+
+            handleChanges[oppositeHandleId] = {
+                ...handles[oppositeHandleId],
+                point: showGrid
+                    ? Vec.snap(nextPoint, currentGrid)
+                    : Vec.toFixed(nextPoint),
+                bindingId: undefined,
+            };
+        }
+
+        const utils = shapeUtils[TDShapeType.Arrow];
+        const handleChange = utils.onHandleChange?.(
+            initialShape,
+            handleChanges
+        );
+
+        // If the handle changed produced no change, bail here
+        if (!handleChange) return;
+
+        // If nothing changes, we want these to be the same object reference as
+        // before. If it does change, we'll redefine this later on. And if we've
+        // made it this far, the shape should be a new object reference that
+        // incorporates the changes we've made due to the handle movement.
+        const next: {
+            shape: ArrowShape;
+            bindings: Record<string, TDBinding | undefined>;
+        } = {
+            shape: Utils.deepMerge(shape, handleChange),
+            bindings: {},
+        };
+
+        let draggedBinding: ArrowBinding | undefined;
+
+        const draggingHandle = next.shape.handles[this.handleId];
+
+        const oppositeHandle =
+            next.shape.handles[this.handleId === 'start' ? 'end' : 'start'];
+
+        // START BINDING
+        // If we have a start binding shape id, the recompute the binding
+        // point based on the current end handle position
+        if (this.startBindingShapeId) {
+            let nextStartBinding: ArrowBinding | undefined;
+
+            const startTarget = this.app.page.shapes[this.startBindingShapeId];
+
+            const startTargetUtils = TLDR.get_shape_util(startTarget);
+
+            const center = startTargetUtils.getCenter(startTarget);
+
+            const startHandle = next.shape.handles.start;
+
+            const endHandle = next.shape.handles.end;
+
+            const rayPoint = Vec.add(startHandle.point, next.shape.point);
+
+            if (Vec.isEqual(rayPoint, center)) rayPoint[1]++; // Fix bug where ray and center are identical
+
+            const rayOrigin = center;
+
+            const isInsideShape = startTargetUtils.hitTestPoint(
+                startTarget,
+                currentPoint
+            );
+
+            const rayDirection = Vec.uni(Vec.sub(rayPoint, rayOrigin));
+
+            const hasStartBinding =
+                this.app.getBinding(this.newStartBindingId) !== undefined;
+
+            // Don't bind the start handle if both handles are inside of the target shape.
+            if (
+                !metaKey &&
+                !startTargetUtils.hitTestPoint(
+                    startTarget,
+                    Vec.add(next.shape.point, endHandle.point)
+                )
+            ) {
+                nextStartBinding = this.find_binding_point(
+                    shape,
+                    startTarget,
+                    'start',
+                    this.newStartBindingId,
+                    center,
+                    rayOrigin,
+                    rayDirection,
+                    isInsideShape
+                );
+            }
+
+            if (nextStartBinding && !hasStartBinding) {
+                // Bind the arrow's start handle to the start target
+                this.didBind = true;
+
+                next.bindings[this.newStartBindingId] = nextStartBinding;
+
+                next.shape = Utils.deepMerge(next.shape, {
+                    handles: {
+                        start: {
+                            bindingId: nextStartBinding.id,
+                        },
+                    },
+                });
+            } else if (!nextStartBinding && hasStartBinding) {
+                // Remove the start binding
+                this.didBind = false;
+
+                next.bindings[this.newStartBindingId] = undefined;
+
+                next.shape = Utils.deepMerge(initialShape, {
+                    handles: {
+                        start: {
+                            bindingId: undefined,
+                        },
+                    },
+                });
+            }
+        }
+
+        // DRAGGED POINT BINDING
+        if (!metaKey) {
+            const rayOrigin = Vec.add(oppositeHandle.point, next.shape.point);
+
+            const rayPoint = Vec.add(draggingHandle.point, next.shape.point);
+
+            const rayDirection = Vec.uni(Vec.sub(rayPoint, rayOrigin));
+
+            const startPoint = Vec.add(
+                next.shape.point!,
+                next.shape.handles!.start.point!
+            );
+
+            const endPoint = Vec.add(
+                next.shape.point!,
+                next.shape.handles!.end.point!
+            );
+
+            const targets = this.bindableShapeIds
+                .map(id => this.app.page.shapes[id])
+                .sort((a, b) => b.childIndex - a.childIndex)
+                .filter(shape => {
+                    const utils = TLDR.get_shape_util(shape);
+                    return ![startPoint, endPoint].every(point =>
+                        utils.hitTestPoint(shape, point)
+                    );
+                });
+
+            for (const target of targets) {
+                draggedBinding = this.find_binding_point(
+                    shape,
+                    target,
+                    this.handleId,
+                    this.draggedBindingId,
+                    rayPoint,
+                    rayOrigin,
+                    rayDirection,
+                    altKey
+                );
+
+                if (draggedBinding) break;
+            }
+        }
+        if (draggedBinding) {
+            // Create the dragged point binding
+            this.didBind = true;
+
+            next.bindings[this.draggedBindingId] = draggedBinding;
+
+            next.shape = Utils.deepMerge(next.shape, {
+                handles: {
+                    [this.handleId]: {
+                        bindingId: this.draggedBindingId,
+                    },
+                },
+            });
+        } else {
+            // Remove the dragging point binding
+            this.didBind = this.didBind || false;
+
+            const currentBindingId = shape.handles[this.handleId].bindingId;
+
+            if (currentBindingId !== undefined) {
+                next.bindings[currentBindingId] = undefined;
+
+                next.shape = Utils.deepMerge(next.shape, {
+                    handles: {
+                        [this.handleId]: {
+                            bindingId: undefined,
+                        },
+                    },
+                });
+            }
+        }
+
+        const change = TLDR.get_shape_util<ArrowShape>(
+            next.shape
+        ).onHandleChange?.(next.shape, next.shape.handles);
+
+        return {
+            document: {
+                pages: {
+                    [this.app.currentPageId]: {
+                        shapes: {
+                            [shape.id]: { ...next.shape, ...(change ?? {}) },
+                        },
+                        bindings: next.bindings,
+                    },
+                },
+                pageStates: {
+                    [this.app.currentPageId]: {
+                        bindingId: next.shape.handles[handleId].bindingId,
+                    },
+                },
+            },
+        };
+    };
+
+    cancel = (): TldrawPatch | undefined => {
+        const {
+            initialShape,
+            initialBinding,
+            newStartBindingId,
+            draggedBindingId,
+        } = this;
+
+        const currentShape = TLDR.on_session_complete(
+            this.app.page.shapes[initialShape.id]
+        ) as ArrowShape;
+
+        const isDeleting =
+            this.isCreate ||
+            Vec.dist(
+                currentShape.handles.start.point,
+                currentShape.handles.end.point
+            ) < 4;
+
+        const afterBindings: Record<string, TDBinding | undefined> = {};
+
+        afterBindings[draggedBindingId] = undefined;
+
+        if (initialBinding) {
+            afterBindings[initialBinding.id] = isDeleting
+                ? undefined
+                : initialBinding;
+        }
+
+        if (newStartBindingId) {
+            afterBindings[newStartBindingId] = undefined;
+        }
+
+        return {
+            document: {
+                pages: {
+                    [this.app.currentPageId]: {
+                        shapes: {
+                            [initialShape.id]: isDeleting
+                                ? undefined
+                                : initialShape,
+                        },
+                        bindings: afterBindings,
+                    },
+                },
+                pageStates: {
+                    [this.app.currentPageId]: {
+                        selectedIds: isDeleting ? [] : [initialShape.id],
+                        bindingId: undefined,
+                        hoveredId: undefined,
+                        editingId: undefined,
+                    },
+                },
+            },
+        };
+    };
+
+    complete = (): TldrawPatch | TldrawCommand | undefined => {
+        const {
+            initialShape,
+            initialBinding,
+            newStartBindingId,
+            startBindingShapeId,
+            handleId,
+        } = this;
+
+        const currentShape = TLDR.on_session_complete(
+            this.app.page.shapes[initialShape.id]
+        ) as ArrowShape;
+
+        const currentBindingId = currentShape.handles[handleId].bindingId;
+
+        const length = Vec.dist(
+            currentShape.handles.start.point,
+            currentShape.handles.end.point
+        );
+
+        if (!(currentBindingId || initialBinding) && length < 4)
+            return this.cancel();
+
+        const beforeBindings: Partial<Record<string, TDBinding>> = {};
+
+        const afterBindings: Partial<Record<string, TDBinding>> = {};
+
+        if (initialBinding) {
+            beforeBindings[initialBinding.id] = this.isCreate
+                ? undefined
+                : initialBinding;
+            afterBindings[initialBinding.id] = undefined;
+        }
+
+        if (currentBindingId) {
+            beforeBindings[currentBindingId] = undefined;
+            afterBindings[currentBindingId] =
+                this.app.page.bindings[currentBindingId];
+        }
+
+        if (startBindingShapeId) {
+            beforeBindings[newStartBindingId] = undefined;
+            afterBindings[newStartBindingId] =
+                this.app.page.bindings[newStartBindingId];
+        }
+
+        return {
+            id: 'arrow',
+            before: {
+                document: {
+                    pages: {
+                        [this.app.currentPageId]: {
+                            shapes: {
+                                [initialShape.id]: this.isCreate
+                                    ? undefined
+                                    : initialShape,
+                            },
+                            bindings: beforeBindings,
+                        },
+                    },
+                    pageStates: {
+                        [this.app.currentPageId]: {
+                            selectedIds: this.isCreate ? [] : [initialShape.id],
+                            bindingId: undefined,
+                            hoveredId: undefined,
+                            editingId: undefined,
+                        },
+                    },
+                },
+            },
+            after: {
+                document: {
+                    pages: {
+                        [this.app.currentPageId]: {
+                            shapes: {
+                                [initialShape.id]: currentShape,
+                            },
+                            bindings: afterBindings,
+                        },
+                    },
+                    pageStates: {
+                        [this.app.currentPageId]: {
+                            selectedIds: [initialShape.id],
+                            bindingId: undefined,
+                            hoveredId: undefined,
+                            editingId: undefined,
+                        },
+                    },
+                },
+            },
+        };
+    };
+
+    private find_binding_point = (
+        shape: ArrowShape,
+        target: TDShape,
+        handleId: 'start' | 'end',
+        bindingId: string,
+        point: number[],
+        origin: number[],
+        direction: number[],
+        bindAnywhere: boolean
+    ) => {
+        const util = TLDR.get_shape_util<TDShape>(target.type);
+
+        const bindingPoint = util.getBindingPoint(
+            target,
+            shape,
+            point, // fix dead center bug
+            origin,
+            direction,
+            bindAnywhere
+        );
+
+        // Not all shapes will produce a binding point
+        if (!bindingPoint) return;
+
+        return {
+            id: bindingId,
+            type: 'arrow',
+            fromId: shape.id,
+            toId: target.id,
+            handleId: handleId,
+            point: Vec.toFixed(bindingPoint.point),
+            distance: bindingPoint.distance,
+        };
+    };
+}
diff --git a/libs/components/board-sessions/src/base-session.ts b/libs/components/board-sessions/src/base-session.ts
new file mode 100644
index 000000000..397b8587a
--- /dev/null
+++ b/libs/components/board-sessions/src/base-session.ts
@@ -0,0 +1,10 @@
+import { BaseSessionType } from '@toeverything/components/board-types';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export abstract class BaseSession extends BaseSessionType {
+    app: TldrawApp;
+    constructor(app: TldrawApp) {
+        super();
+        this.app = app;
+    }
+}
diff --git a/libs/components/board-sessions/src/brush-session.ts b/libs/components/board-sessions/src/brush-session.ts
new file mode 100644
index 000000000..dfb10a6a9
--- /dev/null
+++ b/libs/components/board-sessions/src/brush-session.ts
@@ -0,0 +1,149 @@
+import { TLBounds, Utils } from '@tldraw/core';
+import {
+    SessionType,
+    TldrawPatch,
+    TDStatus,
+    TldrawCommand,
+} from '@toeverything/components/board-types';
+import type { TldrawApp } from '@toeverything/components/board-state';
+import { BaseSession } from './base-session';
+
+export class BrushSession extends BaseSession {
+    type = SessionType.Brush;
+    performanceMode: undefined;
+    status = TDStatus.Brushing;
+    initialSelectedIds: Set<string>;
+    shapesToTest: {
+        id: string;
+        bounds: TLBounds;
+        selectId: string;
+    }[];
+
+    constructor(app: TldrawApp) {
+        super(app);
+        const { currentPageId } = app;
+        this.initialSelectedIds = new Set(this.app.selectedIds);
+        this.shapesToTest = this.app.shapes
+            .filter(
+                shape =>
+                    !(
+                        shape.isLocked ||
+                        shape.isHidden ||
+                        shape.parentId !== currentPageId ||
+                        this.initialSelectedIds.has(shape.id) ||
+                        this.initialSelectedIds.has(shape.parentId)
+                    )
+            )
+            .map(shape => ({
+                id: shape.id,
+                bounds: this.app.getShapeUtil(shape).getBounds(shape),
+                selectId: shape.id, //TLDR.getTopParentId(data, shape.id, currentPageId),
+            }));
+
+        this.update();
+    }
+
+    start = (): TldrawPatch | undefined => void null;
+
+    update = (): TldrawPatch | undefined => {
+        const {
+            initialSelectedIds,
+            shapesToTest,
+            app: { metaKey, settings, originPoint, currentPoint },
+        } = this;
+
+        // Create a bounding box between the origin and the new point
+        const brush = Utils.getBoundsFromPoints([originPoint, currentPoint]);
+
+        // Decide weather to select by intersecting or by overlapping
+        // Using a xor to revers the behaviour if the ctrl key is pressed
+        // Do it only if the user choose to enable cad like selection
+        const selectByContain = settings.isCadSelectMode
+            ? !metaKey && originPoint[0] < currentPoint[0]
+            : metaKey;
+
+        // Find ids of brushed shapes
+        const hits = new Set<string>();
+
+        const selectedIds = new Set(initialSelectedIds);
+
+        shapesToTest.forEach(({ id, selectId }) => {
+            const shape = this.app.getShape(id);
+            if (!hits.has(selectId)) {
+                const util = this.app.getShapeUtil(shape);
+                if (
+                    selectByContain
+                        ? Utils.boundsContain(brush, util.getBounds(shape))
+                        : util.hitTestBounds(shape, brush)
+                ) {
+                    hits.add(selectId);
+
+                    // When brushing a shape, select its top group parent.
+                    if (!selectedIds.has(selectId)) {
+                        selectedIds.add(selectId);
+                    }
+                } else if (selectedIds.has(selectId)) {
+                    selectedIds.delete(selectId);
+                }
+            }
+        });
+
+        const currentSelectedIds = this.app.selectedIds;
+
+        const didChange =
+            selectedIds.size !== currentSelectedIds.length ||
+            currentSelectedIds.some(id => !selectedIds.has(id));
+
+        const afterSelectedIds = didChange
+            ? Array.from(selectedIds.values())
+            : currentSelectedIds;
+
+        return {
+            appState: {
+                selectByContain,
+            },
+            document: {
+                pageStates: {
+                    [this.app.currentPageId]: {
+                        brush,
+                        selectedIds: afterSelectedIds,
+                    },
+                },
+            },
+        };
+    };
+
+    cancel = (): TldrawPatch | undefined => {
+        return {
+            appState: {
+                selectByContain: false,
+            },
+            document: {
+                pageStates: {
+                    [this.app.currentPageId]: {
+                        brush: null,
+                        selectedIds: Array.from(
+                            this.initialSelectedIds.values()
+                        ),
+                    },
+                },
+            },
+        };
+    };
+
+    complete = (): TldrawPatch | TldrawCommand | undefined => {
+        return {
+            appState: {
+                selectByContain: false,
+            },
+            document: {
+                pageStates: {
+                    [this.app.currentPageId]: {
+                        brush: null,
+                        selectedIds: [...this.app.selectedIds],
+                    },
+                },
+            },
+        };
+    };
+}
diff --git a/libs/components/board-sessions/src/draw-session.ts b/libs/components/board-sessions/src/draw-session.ts
new file mode 100644
index 000000000..c932ae3de
--- /dev/null
+++ b/libs/components/board-sessions/src/draw-session.ts
@@ -0,0 +1,305 @@
+import { Utils } from '@tldraw/core';
+import { Vec } from '@tldraw/vec';
+import {
+    SessionType,
+    TDStatus,
+    TldrawPatch,
+    TldrawCommand,
+    DrawShape,
+} from '@toeverything/components/board-types';
+import type { TldrawApp } from '@toeverything/components/board-state';
+import { BaseSession } from './base-session';
+
+export class DrawSession extends BaseSession {
+    type = SessionType.Draw;
+    performanceMode: undefined;
+    status = TDStatus.Creating;
+    topLeft: number[];
+    points: number[][];
+    initialShape: DrawShape;
+    lastAdjustedPoint: number[];
+    shiftedPoints: number[][] = [];
+    shapeId: string;
+    isLocked?: boolean;
+    isExtending: boolean;
+    lockedDirection?: 'horizontal' | 'vertical';
+
+    constructor(app: TldrawApp, id: string) {
+        super(app);
+        const { originPoint } = this.app;
+        this.shapeId = id;
+        this.initialShape = this.app.getShape<DrawShape>(id);
+        this.topLeft = [...this.initialShape.point];
+        const currentPoint = [0, 0, originPoint[2] ?? 0.5];
+        const delta = Vec.sub(originPoint, this.topLeft);
+        const initialPoints = this.initialShape.points.map(pt =>
+            Vec.sub(pt, delta).concat(pt[2])
+        );
+        this.isExtending = initialPoints.length > 0;
+        const newPoints: number[][] = [];
+        if (this.isExtending) {
+            const prevPoint = initialPoints[initialPoints.length - 1];
+            newPoints.push(prevPoint, prevPoint);
+            // Continuing with shift
+            const len = Math.ceil(Vec.dist(prevPoint, currentPoint) / 16);
+            for (let i = 0; i < len; i++) {
+                const t = i / (len - 1);
+                newPoints.push(
+                    Vec.lrp(prevPoint, currentPoint, t).concat(prevPoint[2])
+                );
+            }
+        } else {
+            newPoints.push(currentPoint);
+        }
+        // Add a first point but don't update the shape yet. We'll update
+        // when the draw session ends; if the user hasn't added additional
+        // points, this single point will be interpreted as a "dot" shape.
+        this.points = [...initialPoints, ...newPoints];
+        this.shiftedPoints = this.points.map(pt =>
+            Vec.add(pt, delta).concat(pt[2])
+        );
+        this.lastAdjustedPoint = this.points[this.points.length - 1];
+    }
+
+    start = () => {
+        const currentPoint = this.app.originPoint;
+        const newAdjustedPoint = [0, 0, currentPoint[2] ?? 0.5];
+        // Add the new adjusted point to the points array
+        this.points.push(newAdjustedPoint);
+        const topLeft = [
+            Math.min(this.topLeft[0], currentPoint[0]),
+            Math.min(this.topLeft[1], currentPoint[1]),
+        ];
+        const delta = Vec.sub(topLeft, currentPoint);
+        this.topLeft = topLeft;
+        this.shiftedPoints = this.points.map(pt =>
+            Vec.toFixed(Vec.sub(pt, delta)).concat(pt[2])
+        );
+
+        return {
+            document: {
+                pages: {
+                    [this.app.currentPageId]: {
+                        shapes: {
+                            [this.shapeId]: {
+                                point: this.topLeft,
+                                points: this.shiftedPoints,
+                            },
+                        },
+                    },
+                },
+                pageStates: {
+                    [this.app.currentPageId]: {
+                        selectedIds: [this.shapeId],
+                    },
+                },
+            },
+        };
+    };
+
+    update = (): TldrawPatch | undefined => {
+        const { shapeId } = this;
+        const { currentPoint, originPoint, shiftKey } = this.app;
+
+        // Even if we're not locked yet, we base the future locking direction
+        // on the first dimension to reach a threshold, or the bigger dimension
+        // once one or both dimensions have reached the threshold.
+        if (!this.lockedDirection && this.points.length > 1) {
+            const bounds = Utils.getBoundsFromPoints(this.points);
+            if (bounds.width > 8 || bounds.height > 8) {
+                this.lockedDirection =
+                    bounds.width > bounds.height ? 'horizontal' : 'vertical';
+            }
+        }
+
+        // Drawing while holding shift will "lock" the pen to either the
+        // x or y axis, depending on the locking direction.
+        if (shiftKey) {
+            if (!this.isLocked && this.points.length > 2) {
+                // If we're locking before knowing what direction we're in, set it
+                // early based on the bigger dimension.
+                if (!this.lockedDirection) {
+                    const bounds = Utils.getBoundsFromPoints(this.points);
+                    this.lockedDirection =
+                        bounds.width > bounds.height
+                            ? 'horizontal'
+                            : 'vertical';
+                }
+
+                this.isLocked = true;
+                // Start locking
+                const returning = [...this.lastAdjustedPoint];
+
+                if (this.lockedDirection === 'vertical') {
+                    returning[0] = 0;
+                } else {
+                    returning[1] = 0;
+                }
+
+                this.points.push(returning.concat(currentPoint[2]));
+            }
+        } else if (this.isLocked) {
+            this.isLocked = false;
+        }
+
+        if (this.isLocked) {
+            if (this.lockedDirection === 'vertical') {
+                currentPoint[0] = originPoint[0];
+            } else {
+                currentPoint[1] = originPoint[1];
+            }
+        }
+
+        const change = this.addPoint(currentPoint);
+
+        if (!change) {
+            return;
+        }
+
+        return {
+            document: {
+                pages: {
+                    [this.app.currentPageId]: {
+                        shapes: {
+                            [shapeId]: change,
+                        },
+                    },
+                },
+                pageStates: {
+                    [this.app.currentPageId]: {
+                        selectedIds: [shapeId],
+                    },
+                },
+            },
+        };
+    };
+
+    cancel = (): TldrawPatch | undefined => {
+        const { shapeId } = this;
+        const pageId = this.app.currentPageId;
+
+        return {
+            document: {
+                pages: {
+                    [pageId]: {
+                        shapes: {
+                            [shapeId]: this.isExtending
+                                ? this.initialShape
+                                : undefined,
+                        },
+                    },
+                },
+                pageStates: {
+                    [pageId]: {
+                        selectedIds: [],
+                    },
+                },
+            },
+        };
+    };
+
+    complete = (): TldrawPatch | TldrawCommand | undefined => {
+        const { shapeId } = this;
+        const pageId = this.app.currentPageId;
+        const shape = this.app.getShape<DrawShape>(shapeId);
+        return {
+            id: 'create_draw',
+            before: {
+                document: {
+                    pages: {
+                        [pageId]: {
+                            shapes: {
+                                [shapeId]: this.isExtending
+                                    ? this.initialShape
+                                    : undefined,
+                            },
+                        },
+                    },
+                    pageStates: {
+                        [pageId]: {
+                            selectedIds: [],
+                        },
+                    },
+                },
+            },
+            after: {
+                document: {
+                    pages: {
+                        [pageId]: {
+                            shapes: {
+                                [shapeId]: {
+                                    ...shape,
+                                    point: Vec.toFixed(shape.point),
+                                    points: shape.points.map(pt =>
+                                        Vec.toFixed(pt)
+                                    ),
+                                    isComplete: true,
+                                },
+                            },
+                        },
+                    },
+                    pageStates: {
+                        [this.app.currentPageId]: {
+                            selectedIds: [],
+                        },
+                    },
+                },
+            },
+        };
+    };
+
+    addPoint = (currentPoint: number[]) => {
+        const { originPoint } = this.app;
+        // The new adjusted point
+        const newAdjustedPoint = Vec.toFixed(
+            Vec.sub(currentPoint, originPoint)
+        ).concat(currentPoint[2]);
+
+        // Don't add duplicate points.
+        if (Vec.isEqual(this.lastAdjustedPoint, newAdjustedPoint)) return;
+
+        // Add the new adjusted point to the points array
+        this.points.push(newAdjustedPoint);
+
+        // The new adjusted point is now the previous adjusted point.
+        this.lastAdjustedPoint = newAdjustedPoint;
+
+        // Does the input point create a new top left?
+        const prevTopLeft = [...this.topLeft];
+
+        const topLeft = [
+            Math.min(this.topLeft[0], currentPoint[0]),
+            Math.min(this.topLeft[1], currentPoint[1]),
+        ];
+
+        const delta = Vec.sub(topLeft, originPoint);
+
+        // Time to shift some points!
+        let points: number[][];
+
+        if (prevTopLeft[0] !== topLeft[0] || prevTopLeft[1] !== topLeft[1]) {
+            this.topLeft = topLeft;
+            // If we have a new top left, then we need to iterate through
+            // the "unshifted" points array and shift them based on the
+            // offset between the new top left and the original top left.
+            points = this.points.map(pt =>
+                Vec.toFixed(Vec.sub(pt, delta)).concat(pt[2])
+            );
+        } else {
+            // If the new top left is the same as the previous top left,
+            // we don't need to shift anything: we just shift the new point
+            // and add it to the shifted points array.
+            points = [
+                ...this.shiftedPoints,
+                Vec.sub(newAdjustedPoint, delta).concat(newAdjustedPoint[2]),
+            ];
+        }
+
+        this.shiftedPoints = points;
+
+        return {
+            point: this.topLeft,
+            points,
+        };
+    };
+}
diff --git a/libs/components/board-sessions/src/erase-session.ts b/libs/components/board-sessions/src/erase-session.ts
new file mode 100644
index 000000000..41040d430
--- /dev/null
+++ b/libs/components/board-sessions/src/erase-session.ts
@@ -0,0 +1,274 @@
+import { Vec } from '@tldraw/vec';
+import {
+    SessionType,
+    TDStatus,
+    TDShape,
+    PagePartial,
+    TDBinding,
+    TldrawPatch,
+    TldrawCommand,
+} from '@toeverything/components/board-types';
+import type { TldrawApp } from '@toeverything/components/board-state';
+import { BaseSession } from './base-session';
+
+export class EraseSession extends BaseSession {
+    type = SessionType.Draw;
+    performanceMode: undefined;
+    status = TDStatus.Creating;
+    isLocked?: boolean;
+    lockedDirection?: 'horizontal' | 'vertical';
+    erasedShapes = new Set<TDShape>();
+    erasedBindings = new Set<TDBinding>();
+    initialSelectedShapes: TDShape[];
+    erasableShapes: Set<TDShape>;
+    prevPoint: number[];
+
+    constructor(app: TldrawApp) {
+        super(app);
+        this.prevPoint = [...app.originPoint];
+        this.initialSelectedShapes = this.app.selectedIds.map(id =>
+            this.app.getShape(id)
+        );
+        this.erasableShapes = new Set(
+            this.app.shapes.filter(shape => !shape.isLocked)
+        );
+    }
+
+    start = (): TldrawPatch | undefined => void null;
+
+    update = (): TldrawPatch | undefined => {
+        const { page, shiftKey, originPoint, currentPoint } = this.app;
+
+        if (shiftKey) {
+            if (!this.isLocked && Vec.dist(originPoint, currentPoint) > 4) {
+                // If we're locking before knowing what direction we're in, set it
+                // early based on the bigger dimension.
+                if (!this.lockedDirection) {
+                    const delta = Vec.sub(currentPoint, originPoint);
+                    this.lockedDirection =
+                        delta[0] > delta[1] ? 'horizontal' : 'vertical';
+                }
+
+                this.isLocked = true;
+            }
+        } else if (this.isLocked) {
+            this.isLocked = false;
+        }
+
+        if (this.isLocked) {
+            if (this.lockedDirection === 'vertical') {
+                currentPoint[0] = originPoint[0];
+            } else {
+                currentPoint[1] = originPoint[1];
+            }
+        }
+
+        const newPoint = Vec.toFixed(
+            Vec.add(originPoint, Vec.sub(currentPoint, originPoint))
+        );
+
+        const deletedShapeIds = new Set<string>([]);
+
+        this.erasableShapes.forEach(shape => {
+            if (this.erasedShapes.has(shape)) return;
+            if (
+                this.app
+                    .getShapeUtil(shape)
+                    .hitTestLineSegment(shape, this.prevPoint, newPoint)
+            ) {
+                this.erasedShapes.add(shape);
+                deletedShapeIds.add(shape.id);
+
+                if (shape.children !== undefined) {
+                    for (const childId of shape.children) {
+                        this.erasedShapes.add(this.app.getShape(childId));
+                        deletedShapeIds.add(childId);
+                    }
+                }
+            }
+        });
+
+        // Erase bindings that reference deleted shapes
+
+        Object.values(page.bindings).forEach(binding => {
+            for (const id of [binding.toId, binding.fromId]) {
+                if (deletedShapeIds.has(id)) {
+                    this.erasedBindings.add(binding);
+                }
+            }
+        });
+
+        this.erasedShapes.forEach(shape => {
+            // Has the shape been deleted? If so, pull it from the list.
+            if (!this.app.getShape(shape.id)) {
+                this.erasedShapes.delete(shape);
+                this.erasableShapes.delete(shape);
+                deletedShapeIds.delete(shape.id);
+            }
+        });
+
+        const erasedShapes = Array.from(this.erasedShapes.values());
+
+        this.prevPoint = newPoint;
+
+        return {
+            document: {
+                pages: {
+                    [page.id]: {
+                        shapes: Object.fromEntries(
+                            erasedShapes.map(shape => [
+                                shape.id,
+                                { isGhost: true },
+                            ])
+                        ),
+                    },
+                },
+            },
+        };
+    };
+
+    cancel = (): TldrawPatch | undefined => {
+        const { page } = this.app;
+
+        this.erasedShapes.forEach(shape => {
+            if (!this.app.getShape(shape.id)) {
+                this.erasedShapes.delete(shape);
+                this.erasableShapes.delete(shape);
+            }
+        });
+
+        const erasedShapes = Array.from(this.erasedShapes.values());
+
+        return {
+            document: {
+                pages: {
+                    [page.id]: {
+                        shapes: Object.fromEntries(
+                            erasedShapes.map(shape => [
+                                shape.id,
+                                { isGhost: false },
+                            ])
+                        ),
+                    },
+                },
+                pageStates: {
+                    [page.id]: {
+                        selectedIds: this.initialSelectedShapes.map(
+                            shape => shape.id
+                        ),
+                    },
+                },
+            },
+        };
+    };
+
+    complete = (): TldrawPatch | TldrawCommand | undefined => {
+        const { page } = this.app;
+
+        this.erasedShapes.forEach(shape => {
+            if (!this.app.getShape(shape.id)) {
+                this.erasedShapes.delete(shape);
+                this.erasableShapes.delete(shape);
+            }
+        });
+
+        this.erasedBindings.forEach(binding => {
+            if (!this.app.getBinding(binding.id)) {
+                this.erasedBindings.delete(binding);
+            }
+        });
+
+        const erasedShapes = Array.from(this.erasedShapes.values());
+        const erasedBindings = Array.from(this.erasedBindings.values());
+        const erasedShapeIds = erasedShapes.map(shape => shape.id);
+        const erasedBindingIds = erasedBindings.map(binding => binding.id);
+
+        const before: PagePartial = {
+            shapes: Object.fromEntries(
+                erasedShapes.map(shape => [shape.id, shape])
+            ),
+            bindings: Object.fromEntries(
+                erasedBindings.map(binding => [binding.id, binding])
+            ),
+        };
+
+        const after: PagePartial = {
+            shapes: Object.fromEntries(
+                erasedShapes.map(shape => [shape.id, undefined])
+            ),
+            bindings: Object.fromEntries(
+                erasedBindings.map(binding => [binding.id, undefined])
+            ),
+        };
+
+        // Remove references on any shape's handles to any deleted bindings
+        this.app.shapes.forEach(shape => {
+            if (shape.handles && !after.shapes[shape.id]) {
+                Object.values(shape.handles).forEach(handle => {
+                    if (
+                        handle.bindingId &&
+                        erasedBindingIds.includes(handle.bindingId)
+                    ) {
+                        // Save the binding reference in the before patch
+                        before.shapes[shape.id] = {
+                            ...before.shapes[shape.id],
+                            handles: {
+                                ...before.shapes[shape.id]?.handles,
+                                [handle.id]: handle,
+                            },
+                        };
+
+                        // Save the binding reference in the before patch
+                        if (!erasedShapeIds.includes(shape.id)) {
+                            after.shapes[shape.id] = {
+                                ...after.shapes[shape.id],
+                                handles: {
+                                    ...after.shapes[shape.id]?.handles,
+                                    [handle.id]: {
+                                        ...handle,
+                                        bindingId: undefined,
+                                    },
+                                },
+                            };
+                        }
+                    }
+                });
+            }
+        });
+
+        return {
+            id: 'erase',
+            before: {
+                document: {
+                    pages: {
+                        [page.id]: before,
+                    },
+                    pageStates: {
+                        [page.id]: {
+                            selectedIds: this.initialSelectedShapes
+                                .filter(shape => !!this.app.getShape(shape.id))
+                                .map(shape => shape.id),
+                        },
+                    },
+                },
+            },
+            after: {
+                document: {
+                    pages: {
+                        [page.id]: after,
+                    },
+                    pageStates: {
+                        [page.id]: {
+                            selectedIds: this.initialSelectedShapes
+                                .filter(shape => !!this.app.getShape(shape.id))
+                                .filter(
+                                    shape => !erasedShapeIds.includes(shape.id)
+                                )
+                                .map(shape => shape.id),
+                        },
+                    },
+                },
+            },
+        };
+    };
+}
diff --git a/libs/components/board-sessions/src/grid-session.ts b/libs/components/board-sessions/src/grid-session.ts
new file mode 100644
index 000000000..6460d087d
--- /dev/null
+++ b/libs/components/board-sessions/src/grid-session.ts
@@ -0,0 +1,270 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { TLPageState, TLBounds, Utils } from '@tldraw/core';
+import { Vec } from '@tldraw/vec';
+import {
+    Patch,
+    TDShape,
+    TDStatus,
+    SessionType,
+    TDShapeType,
+    TldrawPatch,
+    TldrawCommand,
+} from '@toeverything/components/board-types';
+import { BaseSession } from './base-session';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export class GridSession extends BaseSession {
+    type = SessionType.Grid;
+    performanceMode: undefined;
+    status = TDStatus.Translating;
+    shape: TDShape;
+    bounds: TLBounds;
+    initialSelectedIds: string[];
+    initialSiblings?: string[];
+    grid: Record<string, string> = {};
+    columns = 1;
+    rows = 1;
+    isCopying = false;
+
+    constructor(app: TldrawApp, id: string) {
+        super(app);
+        this.shape = this.app.getShape(id);
+        this.grid['0_0'] = this.shape.id;
+        this.bounds = this.app.getShapeBounds(id);
+        this.initialSelectedIds = [...this.app.selectedIds];
+        if (this.shape.parentId !== this.app.currentPageId) {
+            this.initialSiblings = this.app
+                .getShape(this.shape.parentId)
+                .children?.filter(id => id !== this.shape.id);
+        }
+    }
+
+    start = (): TldrawPatch | undefined => void null;
+
+    update = (): TldrawPatch | undefined => {
+        const { currentPageId, altKey, shiftKey, currentPoint } = this.app;
+
+        const nextShapes: Patch<Record<string, TDShape>> = {};
+
+        const nextPageState: Patch<TLPageState> = {};
+
+        const center = Utils.getBoundsCenter(this.bounds);
+
+        const offset = Vec.sub(currentPoint, center);
+
+        if (shiftKey) {
+            if (Math.abs(offset[0]) < Math.abs(offset[1])) {
+                offset[0] = 0;
+            } else {
+                offset[1] = 0;
+            }
+        }
+        // use the distance from center to determine the grid
+
+        const gapX = this.bounds.width + 32;
+        const gapY = this.bounds.height + 32;
+
+        const columns = Math.ceil(offset[0] / gapX);
+        const rows = Math.ceil(offset[1] / gapY);
+
+        const minX = Math.min(columns, 0);
+        const minY = Math.min(rows, 0);
+        const maxX = Math.max(columns, 1);
+        const maxY = Math.max(rows, 1);
+
+        const inGrid = new Set<string>();
+
+        const isCopying = altKey;
+
+        if (isCopying !== this.isCopying) {
+            // Recreate shapes copying
+            Object.values(this.grid)
+                .filter(id => id !== this.shape.id)
+                .forEach(id => (nextShapes[id] = undefined));
+
+            this.grid = { '0_0': this.shape.id };
+
+            this.isCopying = isCopying;
+        }
+
+        // Go through grid, adding items in positions
+        // that aren't already filled.
+        for (let x = minX; x < maxX; x++) {
+            for (let y = minY; y < maxY; y++) {
+                const position = `${x}_${y}`;
+
+                inGrid.add(position);
+
+                if (this.grid[position]) continue;
+
+                if (x === 0 && y === 0) continue;
+
+                const clone = this.get_clone(
+                    Vec.add(this.shape.point, [x * gapX, y * gapY]),
+                    isCopying
+                );
+
+                nextShapes[clone.id] = clone;
+
+                this.grid[position] = clone.id;
+            }
+        }
+
+        // Remove any other items from the grid
+        Object.entries(this.grid).forEach(([position, id]) => {
+            if (!inGrid.has(position)) {
+                nextShapes[id] = undefined;
+                delete this.grid[position];
+            }
+        });
+
+        if (Object.values(nextShapes).length === 0) return;
+
+        // Add shapes to parent id
+        if (this.initialSiblings) {
+            nextShapes[this.shape.parentId] = {
+                children: [
+                    ...this.initialSiblings,
+                    ...Object.values(this.grid),
+                ],
+            };
+        }
+
+        return {
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes: nextShapes,
+                    },
+                },
+                pageStates: {
+                    [currentPageId]: nextPageState,
+                },
+            },
+        };
+    };
+
+    cancel = (): TldrawPatch | undefined => {
+        const { currentPageId } = this.app;
+        const nextShapes: Record<string, Partial<TDShape> | undefined> = {};
+
+        // Delete clones
+        Object.values(this.grid).forEach(id => {
+            nextShapes[id] = undefined;
+            // TODO: Remove from parent if grouped
+        });
+
+        // Put back the initial shape
+        nextShapes[this.shape.id] = {
+            ...nextShapes[this.shape.id],
+            point: this.shape.point,
+        };
+
+        if (this.initialSiblings) {
+            nextShapes[this.shape.parentId] = {
+                children: [...this.initialSiblings, this.shape.id],
+            };
+        }
+
+        return {
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes: nextShapes,
+                    },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: [this.shape.id],
+                    },
+                },
+            },
+        };
+    };
+
+    complete = (): TldrawPatch | TldrawCommand | undefined => {
+        const { currentPageId } = this.app;
+
+        const beforeShapes: Patch<Record<string, TDShape>> = {};
+
+        const afterShapes: Patch<Record<string, TDShape>> = {};
+
+        const afterSelectedIds: string[] = [];
+
+        Object.values(this.grid).forEach(id => {
+            beforeShapes[id] = undefined;
+            afterShapes[id] = this.app.getShape(id);
+            afterSelectedIds.push(id);
+            // TODO: Add shape to parent if grouped
+        });
+
+        beforeShapes[this.shape.id] = this.shape;
+
+        // Add shapes to parent id
+        if (this.initialSiblings) {
+            beforeShapes[this.shape.parentId] = {
+                children: [...this.initialSiblings, this.shape.id],
+            };
+
+            afterShapes[this.shape.parentId] = {
+                children: [
+                    ...this.initialSiblings,
+                    ...Object.values(this.grid),
+                ],
+            };
+        }
+
+        // If no new shapes have been created, bail
+        if (afterSelectedIds.length === 1) return;
+
+        return {
+            id: 'grid',
+            before: {
+                document: {
+                    pages: {
+                        [currentPageId]: {
+                            shapes: beforeShapes,
+                        },
+                    },
+                    pageStates: {
+                        [currentPageId]: {
+                            selectedIds: [],
+                            hoveredId: undefined,
+                        },
+                    },
+                },
+            },
+            after: {
+                document: {
+                    pages: {
+                        [currentPageId]: {
+                            shapes: afterShapes,
+                        },
+                    },
+                    pageStates: {
+                        [currentPageId]: {
+                            selectedIds: afterSelectedIds,
+                            hoveredId: undefined,
+                        },
+                    },
+                },
+            },
+        };
+    };
+
+    private get_clone = (point: number[], copy: boolean) => {
+        const clone = {
+            ...this.shape,
+            id: Utils.uniqueId(),
+            point,
+        };
+
+        // if (!copy) {
+        //     if (clone.type === TDShapeType.Sticky) {
+        //         clone.text = '';
+        //     }
+        // }
+
+        return clone;
+    };
+}
diff --git a/libs/components/board-sessions/src/handle-session.ts b/libs/components/board-sessions/src/handle-session.ts
new file mode 100644
index 000000000..72af0591f
--- /dev/null
+++ b/libs/components/board-sessions/src/handle-session.ts
@@ -0,0 +1,141 @@
+import { Vec } from '@tldraw/vec';
+import {
+    SessionType,
+    ShapesWithProp,
+    TldrawCommand,
+    TldrawPatch,
+    TDStatus,
+} from '@toeverything/components/board-types';
+import { TLDR } from '@toeverything/components/board-state';
+import { BaseSession } from './base-session';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export class HandleSession extends BaseSession {
+    type = SessionType.Handle;
+    performanceMode: undefined;
+    status = TDStatus.TranslatingHandle;
+    commandId: string;
+    topLeft: number[];
+    shiftKey = false;
+    initialShape: ShapesWithProp<'handles'>;
+    handleId: string;
+
+    constructor(
+        app: TldrawApp,
+        shapeId: string,
+        handleId: string,
+        commandId = 'move_handle'
+    ) {
+        super(app);
+        const { originPoint } = app;
+        this.topLeft = [...originPoint];
+        this.handleId = handleId;
+        this.initialShape = this.app.getShape(shapeId);
+        this.commandId = commandId;
+    }
+
+    start = (): TldrawPatch | undefined => void null;
+
+    update = (): TldrawPatch | undefined => {
+        const {
+            initialShape,
+            app: { currentPageId, currentPoint },
+        } = this;
+
+        const shape = this.app.getShape<ShapesWithProp<'handles'>>(
+            initialShape.id
+        );
+
+        if (shape.isLocked) return void null;
+
+        const handles = shape.handles;
+
+        const handleId = this.handleId as keyof typeof handles;
+
+        const delta = Vec.sub(currentPoint, handles[handleId].point);
+
+        const handleChanges = {
+            [handleId]: {
+                ...handles[handleId],
+                point: Vec.sub(
+                    Vec.add(handles[handleId].point, delta),
+                    shape.point
+                ),
+            },
+        };
+
+        // First update the handle's next point
+        const change = TLDR.get_shape_util(shape).onHandleChange?.(
+            shape,
+            handleChanges
+        );
+
+        if (!change) return;
+
+        return {
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes: {
+                            [shape.id]: change,
+                        },
+                    },
+                },
+            },
+        };
+    };
+
+    cancel = (): TldrawPatch | undefined => {
+        const {
+            initialShape,
+            app: { currentPageId },
+        } = this;
+
+        return {
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes: {
+                            [initialShape.id]: initialShape,
+                        },
+                    },
+                },
+            },
+        };
+    };
+
+    complete = (): TldrawPatch | TldrawCommand | undefined => {
+        const {
+            initialShape,
+            app: { currentPageId },
+        } = this;
+
+        return {
+            id: this.commandId,
+            before: {
+                document: {
+                    pages: {
+                        [currentPageId]: {
+                            shapes: {
+                                [initialShape.id]: initialShape,
+                            },
+                        },
+                    },
+                },
+            },
+            after: {
+                document: {
+                    pages: {
+                        [currentPageId]: {
+                            shapes: {
+                                [initialShape.id]: TLDR.on_session_complete(
+                                    this.app.getShape(this.initialShape.id)
+                                ),
+                            },
+                        },
+                    },
+                },
+            },
+        };
+    };
+}
diff --git a/libs/components/board-sessions/src/index.ts b/libs/components/board-sessions/src/index.ts
new file mode 100644
index 000000000..6d6d94fa8
--- /dev/null
+++ b/libs/components/board-sessions/src/index.ts
@@ -0,0 +1,64 @@
+import { ExceptFirst, SessionType } from '@toeverything/components/board-types';
+import { ArrowSession } from './arrow-session';
+import { BrushSession } from './brush-session';
+import { DrawSession } from './draw-session';
+import { HandleSession } from './handle-session';
+import { RotateSession } from './rotate-session';
+import { TransformSession } from './transform-session';
+import { TransformSingleSession } from './transform-single-session';
+import { TranslateSession } from './translate-session';
+import { EraseSession } from './erase-session';
+import { GridSession } from './grid-session';
+import { LaserSession } from './laser-session';
+
+export type TldrawSession =
+    | ArrowSession
+    | BrushSession
+    | DrawSession
+    | HandleSession
+    | RotateSession
+    | TransformSession
+    | TransformSingleSession
+    | TranslateSession
+    | EraseSession
+    | GridSession;
+
+export interface SessionsMap {
+    [SessionType.Arrow]: typeof ArrowSession;
+    [SessionType.Brush]: typeof BrushSession;
+    [SessionType.Draw]: typeof DrawSession;
+    [SessionType.Laser]: typeof LaserSession;
+    [SessionType.Erase]: typeof EraseSession;
+    [SessionType.Handle]: typeof HandleSession;
+    [SessionType.Rotate]: typeof RotateSession;
+    [SessionType.Transform]: typeof TransformSession;
+    [SessionType.TransformSingle]: typeof TransformSingleSession;
+    [SessionType.Translate]: typeof TranslateSession;
+    [SessionType.Grid]: typeof GridSession;
+}
+
+export type SessionOfType<K extends SessionType> = SessionsMap[K];
+
+export type SessionArgsOfType<K extends SessionType> = ExceptFirst<
+    ConstructorParameters<SessionOfType<K>>
+>;
+
+export const sessions: { [K in SessionType]: SessionsMap[K] } = {
+    [SessionType.Arrow]: ArrowSession,
+    [SessionType.Brush]: BrushSession,
+    [SessionType.Draw]: DrawSession,
+    [SessionType.Laser]: LaserSession,
+    [SessionType.Erase]: EraseSession,
+    [SessionType.Handle]: HandleSession,
+    [SessionType.Rotate]: RotateSession,
+    [SessionType.Transform]: TransformSession,
+    [SessionType.TransformSingle]: TransformSingleSession,
+    [SessionType.Translate]: TranslateSession,
+    [SessionType.Grid]: GridSession,
+};
+
+export const getSession = <K extends SessionType>(
+    type: K
+): SessionOfType<K> => {
+    return sessions[type];
+};
diff --git a/libs/components/board-sessions/src/laser-session.ts b/libs/components/board-sessions/src/laser-session.ts
new file mode 100644
index 000000000..8e2b5c62d
--- /dev/null
+++ b/libs/components/board-sessions/src/laser-session.ts
@@ -0,0 +1,106 @@
+import { Vec } from '@tldraw/vec';
+import {
+    SessionType,
+    TDStatus,
+    TldrawPatch,
+    TldrawCommand,
+} from '@toeverything/components/board-types';
+import type { TldrawApp } from '@toeverything/components/board-state';
+import { BaseSession } from './base-session';
+export class LaserSession extends BaseSession {
+    type = SessionType.Draw;
+    performanceMode: any = undefined;
+    status = TDStatus.Creating;
+    prevPoint: number[];
+    prevEraseShapesSize = 0;
+
+    constructor(app: TldrawApp) {
+        super(app);
+        this.prevPoint = [...app.originPoint];
+        this.interval = this.loop();
+    }
+
+    interval: any;
+    timestamp1 = 0;
+    timestamp2 = 0;
+    prevErasePoint: number[] = [];
+
+    loop = () => {
+        const now = Date.now();
+        const elapsed1 = now - this.timestamp1;
+        const elapsed2 = now - this.timestamp2;
+        const { laserLine } = this.app.appState;
+
+        let next = [...laserLine];
+        let didUpdate = false;
+
+        if (elapsed1 > 16 && this.prevErasePoint !== this.prevPoint) {
+            didUpdate = true;
+            next = [...laserLine, this.prevPoint];
+            this.prevErasePoint = this.prevPoint;
+        }
+
+        if (elapsed2 > 32) {
+            if (next.length > 1) {
+                didUpdate = true;
+                next.splice(0, Math.ceil(next.length * 0.1));
+                this.timestamp2 = now;
+            }
+        }
+
+        if (didUpdate) {
+            this.app.patchState(
+                {
+                    appState: {
+                        laserLine: next,
+                    },
+                },
+                'eraseline'
+            );
+        }
+
+        this.interval = requestAnimationFrame(this.loop);
+    };
+
+    start = (): TldrawPatch | undefined => void null;
+
+    update = (): TldrawPatch | undefined => {
+        const { originPoint, currentPoint } = this.app;
+
+        const newPoint = Vec.toFixed(
+            Vec.add(originPoint, Vec.sub(currentPoint, originPoint))
+        );
+
+        this.prevPoint = newPoint;
+
+        return {};
+    };
+
+    cancel = (): TldrawPatch | undefined => {
+        cancelAnimationFrame(this.interval);
+        return {
+            appState: {
+                laserLine: [],
+            },
+        };
+    };
+
+    complete = (): TldrawPatch | TldrawCommand | undefined => {
+        const { page } = this.app;
+
+        cancelAnimationFrame(this.interval);
+
+        return {
+            before: {
+                appState: {
+                    laserLine: [],
+                },
+            },
+            after: {
+                appState: {
+                    laserLine: [],
+                },
+            },
+        };
+    };
+}
diff --git a/libs/components/board-sessions/src/rotate-session.ts b/libs/components/board-sessions/src/rotate-session.ts
new file mode 100644
index 000000000..e9da6b6bc
--- /dev/null
+++ b/libs/components/board-sessions/src/rotate-session.ts
@@ -0,0 +1,177 @@
+import { Utils } from '@tldraw/core';
+import { Vec } from '@tldraw/vec';
+import {
+    SessionType,
+    TldrawCommand,
+    TldrawPatch,
+    TDShape,
+    TDStatus,
+} from '@toeverything/components/board-types';
+import { TLDR } from '@toeverything/components/board-state';
+import { BaseSession } from './base-session';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+export class RotateSession extends BaseSession {
+    type = SessionType.Rotate;
+    status = TDStatus.Transforming;
+    performanceMode: undefined;
+    delta = [0, 0];
+    commonBoundsCenter: number[];
+    initialAngle: number;
+    initialShapes: {
+        shape: TDShape;
+        center: number[];
+    }[];
+    changes: Record<string, Partial<TDShape>> = {};
+
+    constructor(app: TldrawApp) {
+        super(app);
+
+        const {
+            app: { currentPageId, pageState, originPoint },
+        } = this;
+
+        const initialShapes = TLDR.get_selected_branch_snapshot(
+            app.state,
+            currentPageId
+        ).filter(shape => !shape.isLocked);
+
+        if (initialShapes.length === 0) {
+            throw Error('No selected shapes!');
+        }
+
+        if (app.rotationInfo.selectedIds === pageState.selectedIds) {
+            if (app.rotationInfo.center === undefined) {
+                throw Error('We should have a center for rotation!');
+            }
+
+            this.commonBoundsCenter = app.rotationInfo.center;
+        } else {
+            this.commonBoundsCenter = Utils.getBoundsCenter(
+                Utils.getCommonBounds(initialShapes.map(TLDR.get_bounds))
+            );
+            app.rotationInfo.selectedIds = pageState.selectedIds;
+            app.rotationInfo.center = this.commonBoundsCenter;
+        }
+
+        this.initialShapes = initialShapes
+            .filter(shape => shape.children === undefined)
+            .map(shape => {
+                return {
+                    shape,
+                    center: this.app.getShapeUtil(shape).getCenter(shape),
+                };
+            });
+
+        this.initialAngle = Vec.angle(this.commonBoundsCenter, originPoint);
+    }
+
+    start = (): TldrawPatch | undefined => void null;
+
+    update = (): TldrawPatch | undefined => {
+        const {
+            commonBoundsCenter,
+            initialShapes,
+            app: { currentPageId, currentPoint, shiftKey },
+        } = this;
+
+        const shapes: Record<string, Partial<TDShape>> = {};
+
+        let directionDelta =
+            Vec.angle(commonBoundsCenter, currentPoint) - this.initialAngle;
+
+        if (shiftKey) {
+            directionDelta = Utils.snapAngleToSegments(directionDelta, 24); // 15 degrees
+        }
+
+        // Update the shapes
+        initialShapes.forEach(({ center, shape }) => {
+            const { rotation = 0 } = shape;
+            let shapeDelta = 0;
+
+            if (shiftKey) {
+                const snappedRotation = Utils.snapAngleToSegments(rotation, 24);
+                shapeDelta = snappedRotation - rotation;
+            }
+
+            const change = TLDR.get_rotated_shape_mutation(
+                shape,
+                center,
+                commonBoundsCenter,
+                shiftKey ? directionDelta + shapeDelta : directionDelta
+            );
+
+            if (change) {
+                shapes[shape.id] = change;
+            }
+        });
+
+        this.changes = shapes;
+
+        return {
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes,
+                    },
+                },
+            },
+        };
+    };
+
+    cancel = (): TldrawPatch | undefined => {
+        const {
+            initialShapes,
+            app: { currentPageId },
+        } = this;
+
+        const shapes: Record<string, TDShape> = {};
+        initialShapes.forEach(({ shape }) => (shapes[shape.id] = shape));
+
+        return {
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes,
+                    },
+                },
+            },
+        };
+    };
+
+    complete = (): TldrawPatch | TldrawCommand | undefined => {
+        const {
+            initialShapes,
+            app: { currentPageId },
+        } = this;
+
+        const beforeShapes = {} as Record<string, Partial<TDShape>>;
+        const afterShapes = this.changes;
+
+        initialShapes.forEach(({ shape: { id, point, rotation, handles } }) => {
+            beforeShapes[id] = { point, rotation, handles };
+        });
+
+        return {
+            id: 'rotate',
+            before: {
+                document: {
+                    pages: {
+                        [currentPageId]: {
+                            shapes: beforeShapes,
+                        },
+                    },
+                },
+            },
+            after: {
+                document: {
+                    pages: {
+                        [currentPageId]: {
+                            shapes: afterShapes,
+                        },
+                    },
+                },
+            },
+        };
+    };
+}
diff --git a/libs/components/board-sessions/src/transform-session.ts b/libs/components/board-sessions/src/transform-session.ts
new file mode 100644
index 000000000..2caab1409
--- /dev/null
+++ b/libs/components/board-sessions/src/transform-session.ts
@@ -0,0 +1,384 @@
+import { TLBounds, TLBoundsCorner, TLBoundsEdge, Utils } from '@tldraw/core';
+import { Vec } from '@tldraw/vec';
+import type { TLSnapLine, TLBoundsWithCenter } from '@tldraw/core';
+import {
+    SessionType,
+    TldrawCommand,
+    TldrawPatch,
+    TDShape,
+    TDStatus,
+    SLOW_SPEED,
+    SNAP_DISTANCE,
+} from '@toeverything/components/board-types';
+import { TLDR } from '@toeverything/components/board-state';
+import { BaseSession } from './base-session';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+type SnapInfo =
+    | {
+          state: 'empty';
+      }
+    | {
+          state: 'ready';
+          bounds: TLBoundsWithCenter[];
+      };
+
+export class TransformSession extends BaseSession {
+    type = SessionType.Transform;
+    performanceMode: undefined;
+    status = TDStatus.Transforming;
+    scaleX = 1;
+    scaleY = 1;
+    initialShapes: TDShape[];
+    initialShapeIds: string[];
+    initialSelectedIds: string[];
+    shapeBounds: {
+        initialShape: TDShape;
+        initialShapeBounds: TLBounds;
+        transformOrigin: number[];
+    }[];
+    hasUnlockedShapes: boolean;
+    isAllAspectRatioLocked: boolean;
+    initialCommonBounds: TLBounds;
+    snapInfo: SnapInfo = { state: 'empty' };
+    prevPoint = [0, 0];
+    speed = 1;
+
+    constructor(
+        app: TldrawApp,
+        public transformType:
+            | TLBoundsEdge
+            | TLBoundsCorner = TLBoundsCorner.BottomRight,
+        public isCreate = false
+    ) {
+        super(app);
+        this.initialSelectedIds = [...this.app.selectedIds];
+        this.app.rotationInfo.selectedIds = [...this.initialSelectedIds];
+
+        this.initialShapes = TLDR.get_selected_branch_snapshot(
+            this.app.state,
+            this.app.currentPageId
+        ).filter(shape => !shape.isLocked);
+
+        this.initialShapeIds = this.initialShapes.map(shape => shape.id);
+
+        this.hasUnlockedShapes = this.initialShapes.length > 0;
+
+        this.isAllAspectRatioLocked = this.initialShapes.every(
+            shape =>
+                shape.isAspectRatioLocked ||
+                TLDR.get_shape_util(shape).isAspectRatioLocked
+        );
+
+        const shapesBounds = Object.fromEntries(
+            this.initialShapes.map(shape => [shape.id, TLDR.get_bounds(shape)])
+        );
+
+        const boundsArr = Object.values(shapesBounds);
+
+        this.initialCommonBounds = Utils.getCommonBounds(boundsArr);
+
+        const initialInnerBounds = Utils.getBoundsFromPoints(
+            boundsArr.map(Utils.getBoundsCenter)
+        );
+
+        // Return a mapping of shapes to bounds together with the relative
+        // positions of the shape's bounds within the common bounds shape.
+        this.shapeBounds = this.initialShapes.map(shape => {
+            const initialShapeBounds = shapesBounds[shape.id];
+            const ic = Utils.getBoundsCenter(initialShapeBounds);
+
+            const ix =
+                (ic[0] - initialInnerBounds.minX) / initialInnerBounds.width;
+            const iy =
+                (ic[1] - initialInnerBounds.minY) / initialInnerBounds.height;
+
+            return {
+                initialShape: shape,
+                initialShapeBounds,
+                transformOrigin: [ix, iy],
+            };
+        });
+    }
+
+    start = (): TldrawPatch | undefined => {
+        this.snapInfo = {
+            state: 'ready',
+            bounds: this.app.shapes
+                .filter(shape => !this.initialShapeIds.includes(shape.id))
+                .map(shape =>
+                    Utils.getBoundsWithCenter(TLDR.get_rotated_bounds(shape))
+                ),
+        };
+
+        return void null;
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    update = (): TldrawPatch | undefined => {
+        const {
+            transformType,
+            shapeBounds,
+            initialCommonBounds,
+            isAllAspectRatioLocked,
+            app: {
+                currentPageId,
+                pageState: { camera },
+                viewport,
+                currentPoint,
+                previousPoint,
+                originPoint,
+                shiftKey,
+                altKey,
+                metaKey,
+                currentGrid,
+                settings: { isSnapping, showGrid },
+            },
+        } = this;
+
+        const shapes = {} as Record<string, TDShape>;
+
+        const delta = altKey
+            ? Vec.mul(Vec.sub(currentPoint, originPoint), 2)
+            : Vec.sub(currentPoint, originPoint);
+
+        let newBounds = Utils.getTransformedBoundingBox(
+            initialCommonBounds,
+            transformType,
+            delta,
+            0,
+            shiftKey || isAllAspectRatioLocked
+        );
+
+        if (altKey) {
+            newBounds = {
+                ...newBounds,
+                ...Utils.centerBounds(
+                    newBounds,
+                    Utils.getBoundsCenter(initialCommonBounds)
+                ),
+            };
+        }
+
+        if (showGrid) {
+            newBounds = {
+                ...newBounds,
+                ...Utils.snapBoundsToGrid(newBounds, currentGrid),
+            };
+        }
+
+        // Should we snap?
+
+        const speed = Vec.dist(currentPoint, previousPoint);
+
+        const speedChange = speed - this.speed;
+
+        this.speed = this.speed + speedChange * (speedChange > 1 ? 0.5 : 0.15);
+
+        let snapLines: TLSnapLine[] = [];
+
+        if (
+            ((isSnapping && !metaKey) || (!isSnapping && metaKey)) &&
+            this.speed * camera.zoom < SLOW_SPEED &&
+            this.snapInfo.state === 'ready'
+        ) {
+            const snapResult = Utils.getSnapPoints(
+                Utils.getBoundsWithCenter(newBounds),
+                this.snapInfo.bounds.filter(
+                    bounds =>
+                        Utils.boundsContain(viewport, bounds) ||
+                        Utils.boundsCollide(viewport, bounds)
+                ),
+                SNAP_DISTANCE / camera.zoom
+            );
+
+            if (snapResult) {
+                snapLines = snapResult.snapLines;
+
+                newBounds = Utils.getTransformedBoundingBox(
+                    initialCommonBounds,
+                    transformType,
+                    Vec.sub(delta, snapResult.offset),
+                    0,
+                    shiftKey || isAllAspectRatioLocked
+                );
+            }
+        }
+
+        // Now work backward to calculate a new bounding box for each of the shapes.
+
+        this.scaleX = newBounds.scaleX;
+        this.scaleY = newBounds.scaleY;
+
+        shapeBounds.forEach(
+            ({ initialShape, initialShapeBounds, transformOrigin }) => {
+                let newShapeBounds = Utils.getRelativeTransformedBoundingBox(
+                    newBounds,
+                    initialCommonBounds,
+                    initialShapeBounds,
+                    this.scaleX < 0,
+                    this.scaleY < 0
+                );
+
+                if (showGrid) {
+                    newShapeBounds = Utils.snapBoundsToGrid(
+                        newShapeBounds,
+                        currentGrid
+                    );
+                }
+
+                const afterShape = TLDR.transform(
+                    this.app.getShape(initialShape.id),
+                    newShapeBounds,
+                    {
+                        type: this.transformType,
+                        initialShape,
+                        scaleX: this.scaleX,
+                        scaleY: this.scaleY,
+                        transformOrigin,
+                    }
+                );
+
+                shapes[initialShape.id] = afterShape;
+            }
+        );
+
+        return {
+            appState: {
+                snapLines,
+            },
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes,
+                    },
+                },
+            },
+        };
+    };
+
+    cancel = (): TldrawPatch | undefined => {
+        const {
+            shapeBounds,
+            app: { currentPageId },
+        } = this;
+
+        const shapes = {} as Record<string, TDShape | undefined>;
+
+        if (this.isCreate) {
+            shapeBounds.forEach(
+                shape => (shapes[shape.initialShape.id] = undefined)
+            );
+        } else {
+            shapeBounds.forEach(
+                shape => (shapes[shape.initialShape.id] = shape.initialShape)
+            );
+        }
+
+        return {
+            appState: {
+                snapLines: [],
+            },
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes,
+                    },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: this.isCreate
+                            ? []
+                            : shapeBounds.map(shape => shape.initialShape.id),
+                    },
+                },
+            },
+        };
+    };
+
+    complete = (): TldrawPatch | TldrawCommand | undefined => {
+        const {
+            isCreate,
+            shapeBounds,
+            hasUnlockedShapes,
+            app: { currentPageId },
+        } = this;
+
+        if (!hasUnlockedShapes) return;
+
+        if (
+            this.isCreate &&
+            Vec.dist(this.app.originPoint, this.app.currentPoint) < 2
+        ) {
+            return this.cancel();
+        }
+
+        const beforeShapes: Record<string, TDShape | undefined> = {};
+        const afterShapes: Record<string, TDShape> = {};
+
+        let beforeSelectedIds: string[];
+        let afterSelectedIds: string[];
+
+        if (isCreate) {
+            beforeSelectedIds = [];
+            afterSelectedIds = [];
+            shapeBounds.forEach(({ initialShape }) => {
+                beforeShapes[initialShape.id] = undefined;
+                afterShapes[initialShape.id] = this.app.getShape(
+                    initialShape.id
+                );
+            });
+        } else {
+            beforeSelectedIds = this.initialSelectedIds;
+            afterSelectedIds = this.initialSelectedIds;
+            shapeBounds.forEach(({ initialShape }) => {
+                beforeShapes[initialShape.id] = initialShape;
+                afterShapes[initialShape.id] = this.app.getShape(
+                    initialShape.id
+                );
+            });
+        }
+
+        return {
+            id: 'transform',
+            before: {
+                appState: {
+                    snapLines: [],
+                },
+                document: {
+                    pages: {
+                        [currentPageId]: {
+                            shapes: beforeShapes,
+                        },
+                    },
+                    pageStates: {
+                        [currentPageId]: {
+                            selectedIds: beforeSelectedIds,
+                            hoveredId: undefined,
+                            editingId: undefined,
+                        },
+                    },
+                },
+            },
+            after: {
+                appState: {
+                    snapLines: [],
+                },
+                document: {
+                    pages: {
+                        [currentPageId]: {
+                            shapes: afterShapes,
+                        },
+                    },
+                    pageStates: {
+                        [currentPageId]: {
+                            selectedIds: afterSelectedIds,
+                            hoveredId: undefined,
+                            editingId: undefined,
+                        },
+                    },
+                },
+            },
+        };
+    };
+}
diff --git a/libs/components/board-sessions/src/transform-single-session.ts b/libs/components/board-sessions/src/transform-single-session.ts
new file mode 100644
index 000000000..8f7711b3e
--- /dev/null
+++ b/libs/components/board-sessions/src/transform-single-session.ts
@@ -0,0 +1,310 @@
+import {
+    TLBoundsCorner,
+    TLSnapLine,
+    TLBoundsEdge,
+    Utils,
+    TLBoundsWithCenter,
+    TLBounds,
+} from '@tldraw/core';
+import { Vec } from '@tldraw/vec';
+import {
+    SessionType,
+    TldrawCommand,
+    TldrawPatch,
+    TDShape,
+    TDStatus,
+    SLOW_SPEED,
+    SNAP_DISTANCE,
+} from '@toeverything/components/board-types';
+import { TLDR } from '@toeverything/components/board-state';
+import { BaseSession } from './base-session';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+type SnapInfo =
+    | {
+          state: 'empty';
+      }
+    | {
+          state: 'ready';
+          bounds: TLBoundsWithCenter[];
+      };
+
+export class TransformSingleSession extends BaseSession {
+    type = SessionType.TransformSingle;
+    status = TDStatus.Transforming;
+    performanceMode: undefined;
+    transformType: TLBoundsEdge | TLBoundsCorner;
+    scaleX = 1;
+    scaleY = 1;
+    isCreate: boolean;
+    initialShape: TDShape;
+    initialShapeBounds: TLBounds;
+    initialCommonBounds: TLBounds;
+    snapInfo: SnapInfo = { state: 'empty' };
+    prevPoint = [0, 0];
+    speed = 1;
+
+    constructor(
+        app: TldrawApp,
+        id: string,
+        transformType: TLBoundsEdge | TLBoundsCorner,
+        isCreate = false
+    ) {
+        super(app);
+        this.isCreate = isCreate;
+        this.transformType = transformType;
+
+        const shape = this.app.getShape(id);
+        this.initialShape = shape;
+        this.initialShapeBounds = TLDR.get_bounds(shape);
+        this.initialCommonBounds = TLDR.get_rotated_bounds(shape);
+        this.app.rotationInfo.selectedIds = [shape.id];
+    }
+
+    start = (): TldrawPatch | undefined => {
+        this.snapInfo = {
+            state: 'ready',
+            bounds: this.app.shapes
+                .filter(shape => shape.id !== this.initialShape.id)
+                .map(shape =>
+                    Utils.getBoundsWithCenter(TLDR.get_rotated_bounds(shape))
+                ),
+        };
+
+        return void null;
+    };
+
+    update = (): TldrawPatch | undefined => {
+        const {
+            transformType,
+            initialShape,
+            initialShapeBounds,
+            app: {
+                settings: { isSnapping, showGrid },
+                currentPageId,
+                pageState: { camera },
+                viewport,
+                currentPoint,
+                previousPoint,
+                originPoint,
+                currentGrid,
+                shiftKey,
+                altKey,
+                metaKey,
+            },
+        } = this;
+
+        if (initialShape.isLocked) return void null;
+
+        const shapes = {} as Record<string, Partial<TDShape>>;
+
+        const delta = altKey
+            ? Vec.mul(Vec.sub(currentPoint, originPoint), 2)
+            : Vec.sub(currentPoint, originPoint);
+
+        const shape = this.app.getShape(initialShape.id);
+
+        const utils = TLDR.get_shape_util(shape);
+
+        let newBounds = Utils.getTransformedBoundingBox(
+            initialShapeBounds,
+            transformType,
+            delta,
+            shape.rotation,
+            shiftKey || shape.isAspectRatioLocked || utils.isAspectRatioLocked
+        );
+
+        if (altKey) {
+            newBounds = {
+                ...newBounds,
+                ...Utils.centerBounds(
+                    newBounds,
+                    Utils.getBoundsCenter(initialShapeBounds)
+                ),
+            };
+        }
+
+        if (showGrid) {
+            newBounds = {
+                ...newBounds,
+                ...Utils.snapBoundsToGrid(newBounds, currentGrid),
+            };
+        }
+
+        // Should we snap?
+
+        const speed = Vec.dist(currentPoint, previousPoint);
+
+        const speedChange = speed - this.speed;
+
+        this.speed = this.speed + speedChange * (speedChange > 1 ? 0.5 : 0.15);
+
+        let snapLines: TLSnapLine[] = [];
+
+        if (
+            ((isSnapping && !metaKey) || (!isSnapping && metaKey)) &&
+            !initialShape.rotation && // not now anyway
+            this.speed * camera.zoom < SLOW_SPEED &&
+            this.snapInfo.state === 'ready'
+        ) {
+            const snapResult = Utils.getSnapPoints(
+                Utils.getBoundsWithCenter(newBounds),
+                this.snapInfo.bounds.filter(
+                    bounds =>
+                        Utils.boundsContain(viewport, bounds) ||
+                        Utils.boundsCollide(viewport, bounds)
+                ),
+                SNAP_DISTANCE / camera.zoom
+            );
+
+            if (snapResult) {
+                snapLines = snapResult.snapLines;
+
+                newBounds = Utils.getTransformedBoundingBox(
+                    initialShapeBounds,
+                    transformType,
+                    Vec.sub(delta, snapResult.offset),
+                    shape.rotation,
+                    shiftKey ||
+                        shape.isAspectRatioLocked ||
+                        utils.isAspectRatioLocked
+                );
+            }
+        }
+
+        const afterShape = TLDR.get_shape_util(shape).transformSingle(
+            shape,
+            newBounds,
+            {
+                initialShape,
+                type: this.transformType,
+                scaleX: newBounds.scaleX,
+                scaleY: newBounds.scaleY,
+                transformOrigin: [0.5, 0.5],
+            }
+        );
+
+        if (afterShape) {
+            shapes[shape.id] = afterShape;
+        }
+
+        if (showGrid && afterShape && afterShape.point) {
+            afterShape.point = Vec.snap(afterShape.point, currentGrid);
+        }
+
+        return {
+            appState: {
+                snapLines,
+            },
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes,
+                    },
+                },
+            },
+        };
+    };
+
+    cancel = (): TldrawPatch | undefined => {
+        const {
+            initialShape,
+            app: { currentPageId },
+        } = this;
+
+        const shapes = {} as Record<string, TDShape | undefined>;
+
+        if (this.isCreate) {
+            shapes[initialShape.id] = undefined;
+        } else {
+            shapes[initialShape.id] = initialShape;
+        }
+
+        return {
+            appState: {
+                snapLines: [],
+            },
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes,
+                    },
+                },
+                pageStates: {
+                    [currentPageId]: {
+                        selectedIds: this.isCreate ? [] : [initialShape.id],
+                    },
+                },
+            },
+        };
+    };
+
+    complete = (): TldrawPatch | TldrawCommand | undefined => {
+        const {
+            initialShape,
+            app: { currentPageId },
+        } = this;
+
+        if (initialShape.isLocked) return;
+
+        if (
+            this.isCreate &&
+            Vec.dist(this.app.originPoint, this.app.currentPoint) < 2
+        ) {
+            return this.cancel();
+        }
+
+        const beforeShapes = {} as Record<string, Partial<TDShape> | undefined>;
+        const afterShapes = {} as Record<string, Partial<TDShape>>;
+
+        beforeShapes[initialShape.id] = this.isCreate
+            ? undefined
+            : initialShape;
+
+        afterShapes[initialShape.id] = TLDR.on_session_complete(
+            this.app.getShape(initialShape.id)
+        );
+
+        return {
+            id: 'transform_single',
+            before: {
+                appState: {
+                    snapLines: [],
+                },
+                document: {
+                    pages: {
+                        [currentPageId]: {
+                            shapes: beforeShapes,
+                        },
+                    },
+                    pageStates: {
+                        [currentPageId]: {
+                            selectedIds: this.isCreate ? [] : [initialShape.id],
+                            editingId: undefined,
+                            hoveredId: undefined,
+                        },
+                    },
+                },
+            },
+            after: {
+                appState: {
+                    snapLines: [],
+                },
+                document: {
+                    pages: {
+                        [currentPageId]: {
+                            shapes: afterShapes,
+                        },
+                    },
+                    pageStates: {
+                        [currentPageId]: {
+                            selectedIds: [initialShape.id],
+                            editingId: undefined,
+                            hoveredId: undefined,
+                        },
+                    },
+                },
+            },
+        };
+    };
+}
diff --git a/libs/components/board-sessions/src/translate-label-session.ts b/libs/components/board-sessions/src/translate-label-session.ts
new file mode 100644
index 000000000..0fea7ed92
--- /dev/null
+++ b/libs/components/board-sessions/src/translate-label-session.ts
@@ -0,0 +1,122 @@
+import {
+    SessionType,
+    TldrawCommand,
+    TldrawPatch,
+    TDStatus,
+    RectangleShape,
+    TriangleShape,
+    EllipseShape,
+    ArrowShape,
+} from '@toeverything/components/board-types';
+import { TLDR } from '@toeverything/components/board-state';
+import { BaseSession } from './base-session';
+import type { TldrawApp } from '@toeverything/components/board-state';
+import type { TLBounds } from '@tldraw/core';
+
+export class TranslateLabelSession extends BaseSession {
+    type = SessionType.Handle;
+    performanceMode: undefined;
+    status = TDStatus.TranslatingHandle;
+    initialShape: RectangleShape | TriangleShape | EllipseShape | ArrowShape;
+    initialShapeBounds: TLBounds;
+
+    constructor(app: TldrawApp, shapeId: string) {
+        super(app);
+        this.initialShape = this.app.getShape<
+            RectangleShape | TriangleShape | EllipseShape | ArrowShape
+        >(shapeId);
+        this.initialShapeBounds = this.app.getShapeBounds(shapeId);
+    }
+
+    start = (): TldrawPatch | undefined => void null;
+
+    update = (): TldrawPatch | undefined => {
+        const {
+            initialShapeBounds,
+            app: { currentPageId, currentPoint },
+        } = this;
+
+        const newHandlePoint = [
+            Math.max(
+                0,
+                Math.min(1, currentPoint[0] / initialShapeBounds.width)
+            ),
+            Math.max(
+                0,
+                Math.min(1, currentPoint[1] / initialShapeBounds.height)
+            ),
+        ];
+
+        // First update the handle's next point
+        const change = {
+            handlePoint: newHandlePoint,
+        } as Partial<
+            RectangleShape | TriangleShape | EllipseShape | ArrowShape
+        >;
+
+        return {
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes: {
+                            [this.initialShape.id]: change,
+                        },
+                    },
+                },
+            },
+        };
+    };
+
+    cancel = (): TldrawPatch | undefined => {
+        const {
+            initialShape,
+            app: { currentPageId },
+        } = this;
+
+        return {
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes: {
+                            [initialShape.id]: initialShape,
+                        },
+                    },
+                },
+            },
+        };
+    };
+
+    complete = (): TldrawPatch | TldrawCommand | undefined => {
+        const {
+            initialShape,
+            app: { currentPageId },
+        } = this;
+
+        return {
+            before: {
+                document: {
+                    pages: {
+                        [currentPageId]: {
+                            shapes: {
+                                [initialShape.id]: initialShape,
+                            },
+                        },
+                    },
+                },
+            },
+            after: {
+                document: {
+                    pages: {
+                        [currentPageId]: {
+                            shapes: {
+                                [initialShape.id]: TLDR.on_session_complete(
+                                    this.app.getShape(this.initialShape.id)
+                                ),
+                            },
+                        },
+                    },
+                },
+            },
+        };
+    };
+}
diff --git a/libs/components/board-sessions/src/translate-session.ts b/libs/components/board-sessions/src/translate-session.ts
new file mode 100644
index 000000000..6019e0559
--- /dev/null
+++ b/libs/components/board-sessions/src/translate-session.ts
@@ -0,0 +1,822 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import {
+    TLPageState,
+    Utils,
+    TLBoundsWithCenter,
+    TLSnapLine,
+    TLBounds,
+} from '@tldraw/core';
+import { Vec } from '@tldraw/vec';
+import {
+    TDShape,
+    TDBinding,
+    TldrawCommand,
+    TDStatus,
+    ArrowShape,
+    Patch,
+    GroupShape,
+    SessionType,
+    ArrowBinding,
+    TldrawPatch,
+    TDShapeType,
+    SLOW_SPEED,
+    SNAP_DISTANCE,
+} from '@toeverything/components/board-types';
+import { TLDR } from '@toeverything/components/board-state';
+import { BaseSession } from './base-session';
+import type { TldrawApp } from '@toeverything/components/board-state';
+
+type CloneInfo =
+    | {
+          state: 'empty';
+      }
+    | {
+          state: 'ready';
+          cloneMap: Record<string, string>;
+          clones: TDShape[];
+          clonedBindings: ArrowBinding[];
+      };
+
+type SnapInfo =
+    | {
+          state: 'empty';
+      }
+    | {
+          state: 'ready';
+          others: TLBoundsWithCenter[];
+          bounds: TLBoundsWithCenter[];
+      };
+
+export class TranslateSession extends BaseSession {
+    performanceMode: undefined;
+    type = SessionType.Translate;
+    status = TDStatus.Translating;
+    delta = [0, 0];
+    prev = [0, 0];
+    prevPoint = [0, 0];
+    speed = 1;
+    cloneInfo: CloneInfo = {
+        state: 'empty',
+    };
+    snapInfo: SnapInfo = {
+        state: 'empty',
+    };
+    snapLines: TLSnapLine[] = [];
+    isCloning = false;
+    isCreate: boolean;
+    link: 'left' | 'right' | 'center' | false;
+
+    initialIds: Set<string>;
+    hasUnlockedShapes: boolean;
+    initialSelectedIds: string[];
+    initialCommonBounds: TLBounds;
+    initialShapes: TDShape[];
+    initialParentChildren: Record<string, string[]>;
+    bindingsToDelete: ArrowBinding[];
+
+    constructor(
+        app: TldrawApp,
+        isCreate = false,
+        link: 'left' | 'right' | 'center' | false = false
+    ) {
+        super(app);
+        this.isCreate = isCreate;
+        this.link = link;
+
+        const { currentPageId, selectedIds, page } = this.app;
+        this.initialSelectedIds = [...selectedIds];
+
+        const selectedShapes = (
+            link
+                ? TLDR.get_linked_shape_ids(
+                      this.app.state,
+                      currentPageId,
+                      link,
+                      false
+                  )
+                : selectedIds
+        )
+            .map(id => this.app.getShape(id))
+            .filter(shape => !shape.isLocked);
+
+        const selectedShapeIds = new Set(selectedShapes.map(shape => shape.id));
+
+        selectedIds.forEach(item => {
+            // let shap = this.app.page.shapes[selectedIds[]];
+            const shap = this.app.getShape(item);
+            if (shap.type === TDShapeType.Frame) {
+                Object.entries(this.app.page.shapes).map(([id, shapItem]) => {
+                    if (id !== shap.id) {
+                        if (
+                            Utils.boundsContain(
+                                TLDR.get_bounds(shap),
+                                TLDR.get_bounds(shapItem)
+                            )
+                        ) {
+                            selectedShapes.push(shapItem);
+                        }
+                    }
+                });
+            }
+        });
+
+        // }
+        this.hasUnlockedShapes = selectedShapes.length > 0;
+        this.initialShapes = Array.from(
+            new Set(
+                selectedShapes
+                    .filter(shape => !selectedShapeIds.has(shape.parentId))
+                    .flatMap(shape => {
+                        return shape.children
+                            ? [
+                                  shape,
+                                  ...shape.children.map(childId =>
+                                      this.app.getShape(childId)
+                                  ),
+                              ]
+                            : [shape];
+                    })
+            ).values()
+        );
+
+        this.initialIds = new Set(this.initialShapes.map(shape => shape.id));
+
+        this.bindingsToDelete = [];
+
+        Object.values(page.bindings)
+            .filter(
+                binding =>
+                    this.initialIds.has(binding.fromId) ||
+                    this.initialIds.has(binding.toId)
+            )
+            .forEach(binding => {
+                if (this.initialIds.has(binding.fromId)) {
+                    if (!this.initialIds.has(binding.toId)) {
+                        this.bindingsToDelete.push(binding);
+                    }
+                }
+            });
+
+        this.initialParentChildren = {};
+
+        this.initialShapes
+            .map(s => s.parentId)
+            .filter(id => id !== page.id)
+            .forEach(id => {
+                this.initialParentChildren[id] =
+                    this.app.getShape(id).children!;
+            });
+
+        this.initialCommonBounds = Utils.getCommonBounds(
+            this.initialShapes.map(TLDR.get_rotated_bounds)
+        );
+
+        this.app.rotationInfo.selectedIds = [...this.app.selectedIds];
+    }
+
+    start = (): TldrawPatch | undefined => {
+        const {
+            bindingsToDelete,
+            initialIds,
+            app: { currentPageId, page },
+        } = this;
+
+        const allBounds: TLBoundsWithCenter[] = [];
+        const otherBounds: TLBoundsWithCenter[] = [];
+
+        Object.values(page.shapes).forEach(shape => {
+            const bounds = Utils.getBoundsWithCenter(
+                TLDR.get_rotated_bounds(shape)
+            );
+            allBounds.push(bounds);
+            if (!initialIds.has(shape.id)) {
+                otherBounds.push(bounds);
+            }
+        });
+
+        this.snapInfo = {
+            state: 'ready',
+            bounds: allBounds,
+            others: otherBounds,
+        };
+
+        if (bindingsToDelete.length === 0) return;
+
+        const nextBindings: Patch<Record<string, TDBinding>> = {};
+
+        bindingsToDelete.forEach(
+            binding => (nextBindings[binding.id] = undefined)
+        );
+
+        return {
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        bindings: nextBindings,
+                    },
+                },
+            },
+        };
+    };
+
+    update = (): TldrawPatch | undefined => {
+        const {
+            initialParentChildren,
+            initialShapes,
+            initialCommonBounds,
+            bindingsToDelete,
+            app: {
+                pageState: { camera },
+                settings: { isSnapping, showGrid },
+                currentPageId,
+                viewport,
+                selectedIds,
+                currentPoint,
+                previousPoint,
+                originPoint,
+                altKey,
+                shiftKey,
+                metaKey,
+                currentGrid,
+            },
+        } = this;
+
+        const nextBindings: Patch<Record<string, TDBinding>> = {};
+        const nextShapes: Patch<Record<string, TDShape>> = {};
+        const nextPageState: Patch<TLPageState> = {};
+
+        let delta = Vec.sub(currentPoint, originPoint);
+
+        let didChangeCloning = false;
+
+        if (!this.isCreate) {
+            if (altKey && !this.isCloning) {
+                this.isCloning = true;
+                didChangeCloning = true;
+            } else if (!altKey && this.isCloning) {
+                this.isCloning = false;
+                didChangeCloning = true;
+            }
+        }
+
+        if (shiftKey) {
+            if (Math.abs(delta[0]) < Math.abs(delta[1])) {
+                delta[0] = 0;
+            } else {
+                delta[1] = 0;
+            }
+        }
+
+        // Should we snap?
+
+        // Speed is used to decide which snap points to use. At a high
+        // speed, we don't use any snap points. At a low speed, we only
+        // allow center-to-center snap points. At very low speed, we
+        // enable all snap points (still preferring middle snaps). We're
+        // using an acceleration function here to smooth the changes in
+        // speed, but we also want the speed to accelerate faster than
+        // it decelerates.
+
+        const speed = Vec.dist(currentPoint, previousPoint);
+
+        const change = speed - this.speed;
+
+        this.speed = this.speed + change * (change > 1 ? 0.5 : 0.15);
+
+        this.snapLines = [];
+
+        if (
+            ((isSnapping && !metaKey) || (!isSnapping && metaKey)) &&
+            this.speed * camera.zoom < SLOW_SPEED &&
+            this.snapInfo.state === 'ready'
+        ) {
+            const snapResult = Utils.getSnapPoints(
+                Utils.getBoundsWithCenter(
+                    showGrid
+                        ? Utils.snapBoundsToGrid(
+                              Utils.translateBounds(initialCommonBounds, delta),
+                              currentGrid
+                          )
+                        : Utils.translateBounds(initialCommonBounds, delta)
+                ),
+                (this.isCloning
+                    ? this.snapInfo.bounds
+                    : this.snapInfo.others
+                ).filter(bounds => {
+                    return (
+                        Utils.boundsContain(viewport, bounds) ||
+                        Utils.boundsCollide(viewport, bounds)
+                    );
+                }),
+                SNAP_DISTANCE / camera.zoom
+            );
+
+            if (snapResult) {
+                this.snapLines = snapResult.snapLines;
+                delta = Vec.sub(delta, snapResult.offset);
+            }
+        }
+
+        // We've now calculated the "delta", or difference between the
+        // cursor's position (real or adjusted by snaps or axis locking)
+        // and the cursor's original position ("origin").
+
+        // The "movement" is the actual change of position between this
+        // computed position and the previous computed position.
+
+        this.prev = delta;
+
+        // If cloning...
+        if (this.isCloning) {
+            // Not Cloning -> Cloning
+            if (didChangeCloning) {
+                if (this.cloneInfo.state === 'empty') {
+                    this.create_clone_info();
+                }
+
+                if (this.cloneInfo.state === 'empty') {
+                    throw Error;
+                }
+
+                const { clones, clonedBindings } = this.cloneInfo;
+
+                this.isCloning = true;
+
+                // Put back any bindings we deleted
+                bindingsToDelete.forEach(
+                    binding => (nextBindings[binding.id] = binding)
+                );
+
+                // Move original shapes back to start
+                initialShapes.forEach(
+                    shape => (nextShapes[shape.id] = { point: shape.point })
+                );
+
+                // Add the clones to the page
+                clones.forEach(clone => {
+                    nextShapes[clone.id] = { ...clone };
+
+                    // Add clones to non-selected parents
+                    if (
+                        clone.parentId !== currentPageId &&
+                        !selectedIds.includes(clone.parentId)
+                    ) {
+                        const children =
+                            nextShapes[clone.parentId]?.children ||
+                            initialParentChildren[clone.parentId];
+
+                        if (!children.includes(clone.id)) {
+                            nextShapes[clone.parentId] = {
+                                ...nextShapes[clone.parentId],
+                                children: [...children, clone.id],
+                            };
+                        }
+                    }
+                });
+
+                // Add the cloned bindings
+                for (const binding of clonedBindings) {
+                    nextBindings[binding.id] = binding;
+                }
+
+                // Set the selected ids to the clones
+                nextPageState.selectedIds = clones.map(clone => clone.id);
+
+                // Either way, move the clones
+                clones.forEach(clone => {
+                    nextShapes[clone.id] = {
+                        ...clone,
+                        point: showGrid
+                            ? Vec.snap(
+                                  Vec.toFixed(Vec.add(clone.point, delta)),
+                                  currentGrid
+                              )
+                            : Vec.toFixed(Vec.add(clone.point, delta)),
+                    };
+                });
+            } else {
+                if (this.cloneInfo.state === 'empty') throw Error;
+
+                const { clones } = this.cloneInfo;
+
+                clones.forEach(clone => {
+                    nextShapes[clone.id] = {
+                        point: showGrid
+                            ? Vec.snap(
+                                  Vec.toFixed(Vec.add(clone.point, delta)),
+                                  currentGrid
+                              )
+                            : Vec.toFixed(Vec.add(clone.point, delta)),
+                    };
+                });
+            }
+        } else {
+            // If not cloning...
+
+            // Cloning -> Not Cloning
+            if (didChangeCloning) {
+                if (this.cloneInfo.state === 'empty') throw Error;
+
+                const { clones, clonedBindings } = this.cloneInfo;
+
+                this.isCloning = false;
+
+                // Delete the bindings
+                bindingsToDelete.forEach(
+                    binding => (nextBindings[binding.id] = undefined)
+                );
+
+                // Remove the clones from parents
+                clones.forEach(clone => {
+                    if (clone.parentId !== currentPageId) {
+                        nextShapes[clone.parentId] = {
+                            ...nextShapes[clone.parentId],
+                            children: initialParentChildren[clone.parentId],
+                        };
+                    }
+                });
+
+                // Delete the clones (including any parent clones)
+                clones.forEach(clone => (nextShapes[clone.id] = undefined));
+
+                // Move the original shapes back to the cursor position
+                initialShapes.forEach(shape => {
+                    nextShapes[shape.id] = {
+                        point: showGrid
+                            ? Vec.snap(
+                                  Vec.toFixed(Vec.add(shape.point, delta)),
+                                  currentGrid
+                              )
+                            : Vec.toFixed(Vec.add(shape.point, delta)),
+                    };
+                });
+
+                // Delete the cloned bindings
+                for (const binding of clonedBindings) {
+                    nextBindings[binding.id] = undefined;
+                }
+
+                // Set selected ids
+                nextPageState.selectedIds = initialShapes.map(
+                    shape => shape.id
+                );
+            } else {
+                // Move the shapes by the delta
+                initialShapes.forEach(shape => {
+                    // const current = (nextShapes[shape.id] || this.app.getShape(shape.id)) as TDShape
+
+                    nextShapes[shape.id] = {
+                        point: showGrid
+                            ? Vec.snap(
+                                  Vec.toFixed(Vec.add(shape.point, delta)),
+                                  currentGrid
+                              )
+                            : Vec.toFixed(Vec.add(shape.point, delta)),
+                    };
+                });
+            }
+        }
+
+        return {
+            appState: {
+                snapLines: this.snapLines,
+            },
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes: nextShapes,
+                        bindings: nextBindings,
+                    },
+                },
+                pageStates: {
+                    [currentPageId]: nextPageState,
+                },
+            },
+        };
+    };
+
+    cancel = (): TldrawPatch | undefined => {
+        const {
+            initialShapes,
+            initialSelectedIds,
+            bindingsToDelete,
+            app: { currentPageId },
+        } = this;
+
+        const nextBindings: Record<string, Partial<TDBinding> | undefined> = {};
+        const nextShapes: Record<string, Partial<TDShape> | undefined> = {};
+        const nextPageState: Partial<TLPageState> = {
+            editingId: undefined,
+            hoveredId: undefined,
+        };
+
+        // Put back any deleted bindings
+        bindingsToDelete.forEach(
+            binding => (nextBindings[binding.id] = binding)
+        );
+
+        if (this.isCreate) {
+            initialShapes.forEach(({ id }) => (nextShapes[id] = undefined));
+            nextPageState.selectedIds = [];
+        } else {
+            // Put initial shapes back to where they started
+            initialShapes.forEach(
+                ({ id, point }) =>
+                    (nextShapes[id] = { ...nextShapes[id], point })
+            );
+            nextPageState.selectedIds = initialSelectedIds;
+        }
+
+        if (this.cloneInfo.state === 'ready') {
+            const { clones, clonedBindings } = this.cloneInfo;
+            // Delete clones
+            clones.forEach(clone => (nextShapes[clone.id] = undefined));
+
+            // Delete cloned bindings
+            clonedBindings.forEach(
+                binding => (nextBindings[binding.id] = undefined)
+            );
+        }
+
+        return {
+            appState: {
+                snapLines: [],
+            },
+            document: {
+                pages: {
+                    [currentPageId]: {
+                        shapes: nextShapes,
+                        bindings: nextBindings,
+                    },
+                },
+                pageStates: {
+                    [currentPageId]: nextPageState,
+                },
+            },
+        };
+    };
+
+    complete = (): TldrawPatch | TldrawCommand | undefined => {
+        const {
+            initialShapes,
+            initialParentChildren,
+            bindingsToDelete,
+            app: { currentPageId },
+        } = this;
+
+        const beforeBindings: Patch<Record<string, TDBinding>> = {};
+        const beforeShapes: Patch<Record<string, TDShape>> = {};
+
+        const afterBindings: Patch<Record<string, TDBinding>> = {};
+        const afterShapes: Patch<Record<string, TDShape>> = {};
+
+        if (this.isCloning) {
+            if (this.cloneInfo.state === 'empty') {
+                this.create_clone_info();
+            }
+
+            if (this.cloneInfo.state !== 'ready') throw Error;
+            const { clones, clonedBindings } = this.cloneInfo;
+
+            // Update the clones
+            clones.forEach(clone => {
+                beforeShapes[clone.id] = undefined;
+
+                afterShapes[clone.id] = this.app.getShape(clone.id);
+
+                if (clone.parentId !== currentPageId) {
+                    beforeShapes[clone.parentId] = {
+                        ...beforeShapes[clone.parentId],
+                        children: initialParentChildren[clone.parentId],
+                    };
+
+                    afterShapes[clone.parentId] = {
+                        ...afterShapes[clone.parentId],
+                        children: this.app.getShape<GroupShape>(clone.parentId)
+                            .children,
+                    };
+                }
+            });
+
+            // Update the cloned bindings
+            clonedBindings.forEach(binding => {
+                beforeBindings[binding.id] = undefined;
+                afterBindings[binding.id] = this.app.getBinding(binding.id);
+            });
+        } else {
+            // If we aren't cloning, then update the initial shapes
+            initialShapes.forEach(shape => {
+                beforeShapes[shape.id] = this.isCreate
+                    ? undefined
+                    : {
+                          ...beforeShapes[shape.id],
+                          point: shape.point,
+                      };
+
+                afterShapes[shape.id] = {
+                    ...afterShapes[shape.id],
+                    ...(this.isCreate
+                        ? this.app.getShape(shape.id)
+                        : { point: this.app.getShape(shape.id).point }),
+                };
+            });
+        }
+
+        // Update the deleted bindings and any associated shapes
+        bindingsToDelete.forEach(binding => {
+            beforeBindings[binding.id] = binding;
+
+            for (const id of [binding.toId, binding.fromId]) {
+                // Let's also look at the bound shape...
+                const shape = this.app.getShape(id);
+
+                // If the bound shape has a handle that references the deleted binding, delete that reference
+                if (!shape.handles) continue;
+
+                Object.values(shape.handles)
+                    .filter(handle => handle.bindingId === binding.id)
+                    .forEach(handle => {
+                        beforeShapes[id] = { ...beforeShapes[id], handles: {} };
+
+                        afterShapes[id] = { ...afterShapes[id], handles: {} };
+
+                        // There should be before and after shapes
+
+                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                        beforeShapes[id]!.handles![
+                            handle.id as keyof ArrowShape['handles']
+                        ] = {
+                            bindingId: binding.id,
+                        };
+
+                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                        afterShapes[id]!.handles![
+                            handle.id as keyof ArrowShape['handles']
+                        ] = {
+                            bindingId: undefined,
+                        };
+                    });
+            }
+        });
+
+        return {
+            id: 'translate',
+            before: {
+                appState: {
+                    snapLines: [],
+                },
+                document: {
+                    pages: {
+                        [currentPageId]: {
+                            shapes: beforeShapes,
+                            bindings: beforeBindings,
+                        },
+                    },
+                    pageStates: {
+                        [currentPageId]: {
+                            selectedIds: this.isCreate
+                                ? []
+                                : [...this.initialSelectedIds],
+                        },
+                    },
+                },
+            },
+            after: {
+                appState: {
+                    snapLines: [],
+                },
+                document: {
+                    pages: {
+                        [currentPageId]: {
+                            shapes: afterShapes,
+                            bindings: afterBindings,
+                        },
+                    },
+                    pageStates: {
+                        [currentPageId]: {
+                            selectedIds: [...this.app.selectedIds],
+                        },
+                    },
+                },
+            },
+        };
+    };
+
+    private create_clone_info = () => {
+        // Create clones when as they're needed.
+        // Consider doing this work in a worker.
+
+        const {
+            initialShapes,
+            initialParentChildren,
+            app: { selectedIds, currentPageId, page },
+        } = this;
+
+        const cloneMap: Record<string, string> = {};
+        const clonedBindingsMap: Record<string, string> = {};
+        const clonedBindings: TDBinding[] = [];
+
+        // Create clones of selected shapes
+        const clones: TDShape[] = [];
+
+        initialShapes.forEach(shape => {
+            const newId = Utils.uniqueId();
+
+            initialParentChildren[newId] = initialParentChildren[shape.id];
+
+            cloneMap[shape.id] = newId;
+
+            const clone = {
+                ...Utils.deepClone(shape),
+                id: newId,
+                parentId: shape.parentId,
+                childIndex: TLDR.get_child_index_above(
+                    this.app.state,
+                    shape.id,
+                    currentPageId
+                ),
+            };
+
+            if (clone.type === TDShapeType.Video) {
+                const element = document.getElementById(
+                    shape.id + '_video'
+                ) as HTMLVideoElement;
+                if (element)
+                    clone.currentTime =
+                        (element.currentTime + 16) % element.duration;
+            }
+
+            clones.push(clone);
+        });
+
+        clones.forEach(clone => {
+            if (clone.children !== undefined) {
+                clone.children = clone.children.map(
+                    childId => cloneMap[childId]
+                );
+            }
+        });
+
+        clones.forEach(clone => {
+            if (selectedIds.includes(clone.parentId)) {
+                clone.parentId = cloneMap[clone.parentId];
+            }
+        });
+
+        // Potentially confusing name here: these are the ids of the
+        // original shapes that were cloned, not their clones' ids.
+        const clonedShapeIds = new Set(Object.keys(cloneMap));
+
+        // Create cloned bindings for shapes where both to and from shapes are selected
+        // (if the user clones, then we will create a new binding for the clones)
+        Object.values(page.bindings)
+            .filter(
+                binding =>
+                    clonedShapeIds.has(binding.fromId) ||
+                    clonedShapeIds.has(binding.toId)
+            )
+            .forEach(binding => {
+                if (clonedShapeIds.has(binding.fromId)) {
+                    if (clonedShapeIds.has(binding.toId)) {
+                        const cloneId = Utils.uniqueId();
+                        const cloneBinding = {
+                            ...Utils.deepClone(binding),
+                            id: cloneId,
+                            fromId: cloneMap[binding.fromId] || binding.fromId,
+                            toId: cloneMap[binding.toId] || binding.toId,
+                        };
+                        clonedBindingsMap[binding.id] = cloneId;
+                        clonedBindings.push(cloneBinding);
+                    }
+                }
+            });
+
+        // Assign new binding ids to clones (or delete them!)
+        clones.forEach(clone => {
+            if (clone.handles) {
+                if (clone.handles) {
+                    for (const id in clone.handles) {
+                        const handle =
+                            clone.handles[id as keyof ArrowShape['handles']];
+                        handle.bindingId = handle.bindingId
+                            ? clonedBindingsMap[handle.bindingId]
+                            : undefined;
+                    }
+                }
+            }
+        });
+
+        clones.forEach(clone => {
+            if (page.shapes[clone.id]) {
+                throw Error("uh oh, we didn't clone correctly");
+            }
+        });
+
+        this.cloneInfo = {
+            state: 'ready',
+            clones,
+            cloneMap,
+            clonedBindings,
+        };
+    };
+}
diff --git a/libs/components/board-sessions/tsconfig.json b/libs/components/board-sessions/tsconfig.json
new file mode 100644
index 000000000..dce3dae9a
--- /dev/null
+++ b/libs/components/board-sessions/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/components/board-sessions/tsconfig.lib.json b/libs/components/board-sessions/tsconfig.lib.json
new file mode 100644
index 000000000..6a4378740
--- /dev/null
+++ b/libs/components/board-sessions/tsconfig.lib.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"]
+}
diff --git a/libs/components/board-sessions/tsconfig.spec.json b/libs/components/board-sessions/tsconfig.spec.json
new file mode 100644
index 000000000..24b3ac659
--- /dev/null
+++ b/libs/components/board-sessions/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+    "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"
+    ]
+}
diff --git a/libs/components/board-shapes/.babelrc b/libs/components/board-shapes/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/components/board-shapes/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/components/board-shapes/.eslintrc.json b/libs/components/board-shapes/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/components/board-shapes/.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": {}
+        }
+    ]
+}
diff --git a/libs/components/board-shapes/README.md b/libs/components/board-shapes/README.md
new file mode 100644
index 000000000..deb7f3af1
--- /dev/null
+++ b/libs/components/board-shapes/README.md
@@ -0,0 +1,7 @@
+# components-board-shapes
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test components-board-shapes` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/components/board-shapes/jest.config.ts b/libs/components/board-shapes/jest.config.ts
new file mode 100644
index 000000000..ec03e8dcd
--- /dev/null
+++ b/libs/components/board-shapes/jest.config.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+    displayName: 'components-board-shapes',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/components/board-shapes',
+};
diff --git a/libs/components/board-shapes/package.json b/libs/components/board-shapes/package.json
new file mode 100644
index 000000000..20faf255e
--- /dev/null
+++ b/libs/components/board-shapes/package.json
@@ -0,0 +1,11 @@
+{
+    "name": "@toeverything/components/board-shapes",
+    "version": "0.0.1",
+    "license": "MIT",
+    "dependencies": {
+        "@tldraw/core": "^1.12.0",
+        "@tldraw/intersect": "^1.7.1",
+        "@tldraw/vec": "^1.7.0",
+        "perfect-freehand": "^1.0.16"
+    }
+}
diff --git a/libs/components/board-shapes/project.json b/libs/components/board-shapes/project.json
new file mode 100644
index 000000000..bf2f7fb32
--- /dev/null
+++ b/libs/components/board-shapes/project.json
@@ -0,0 +1,45 @@
+{
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/components/board-shapes/src",
+    "projectType": "library",
+    "tags": ["components"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/components/board-shapes",
+                "tsConfig": "libs/components/board-shapes/tsconfig.lib.json",
+                "project": "libs/components/board-shapes/package.json",
+                "entryFile": "libs/components/board-shapes/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "libs/rollup.config.cjs",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/components/board-shapes/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/components/board-shapes/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/components/board-shapes"],
+            "options": {
+                "jestConfig": "libs/components/board-shapes/jest.config.ts",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/components/board-shapes/src/TDShapeUtil.tsx b/libs/components/board-shapes/src/TDShapeUtil.tsx
new file mode 100644
index 000000000..2c7afe480
--- /dev/null
+++ b/libs/components/board-shapes/src/TDShapeUtil.tsx
@@ -0,0 +1,251 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { Utils, TLShapeUtil } from '@tldraw/core';
+import type { TLPointerInfo, TLBounds } from '@tldraw/core';
+import {
+    intersectLineSegmentBounds,
+    intersectLineSegmentPolyline,
+    intersectRayBounds,
+} from '@tldraw/intersect';
+import { Vec } from '@tldraw/vec';
+import type {
+    TDMeta,
+    TDShape,
+    TransformInfo,
+} from '@toeverything/components/board-types';
+import { BINDING_DISTANCE } from '@toeverything/components/board-types';
+import { createRef } from 'react';
+import { getTextSvgElement } from './shared/get-text-svg-element';
+import { getTextLabelSize } from './shared/get-text-size';
+import { getFontStyle, getShapeStyle } from './shared';
+
+export abstract class TDShapeUtil<
+    T extends TDShape,
+    E extends Element = any
+> extends TLShapeUtil<T, E, TDMeta> {
+    abstract type: T['type'];
+
+    canBind = false;
+
+    canEdit = false;
+
+    canClone = false;
+
+    isAspectRatioLocked = false;
+
+    hideResizeHandles = false;
+
+    bindingDistance = BINDING_DISTANCE;
+
+    abstract getShape: (props: Partial<T>) => T;
+
+    hitTestPoint = (shape: T, point: number[]): boolean => {
+        return Utils.pointInBounds(point, this.getRotatedBounds(shape));
+    };
+
+    hitTestLineSegment = (shape: T, A: number[], B: number[]): boolean => {
+        const box = Utils.getBoundsFromPoints([A, B]);
+        const bounds = this.getBounds(shape);
+
+        return Utils.boundsContain(bounds, box) || shape.rotation
+            ? intersectLineSegmentPolyline(
+                  A,
+                  B,
+                  Utils.getRotatedCorners(this.getBounds(shape))
+              ).didIntersect
+            : intersectLineSegmentBounds(A, B, this.getBounds(shape)).length >
+                  0;
+    };
+
+    create = (props: { id: string; workspace: string } & Partial<T>) => {
+        this.refMap.set(props.id, createRef());
+        return this.getShape(props);
+    };
+
+    getCenter = (shape: T) => {
+        return Utils.getBoundsCenter(this.getBounds(shape));
+    };
+
+    getExpandedBounds = (shape: T) => {
+        return Utils.expandBounds(this.getBounds(shape), this.bindingDistance);
+    };
+
+    getBindingPoint = <K extends TDShape>(
+        shape: T,
+        fromShape: K,
+        point: number[],
+        origin: number[],
+        direction: number[],
+        bindAnywhere: boolean
+    ) => {
+        // Algorithm time! We need to find the binding point (a normalized point inside of the shape, or around the shape, where the arrow will point to) and the distance from the binding shape to the anchor.
+
+        const bounds = this.getBounds(shape);
+        const expandedBounds = this.getExpandedBounds(shape);
+
+        // The point must be inside of the expanded bounding box
+        if (!Utils.pointInBounds(point, expandedBounds)) return;
+
+        const intersections = intersectRayBounds(
+            origin,
+            direction,
+            expandedBounds
+        )
+            .filter(int => int.didIntersect)
+            .map(int => int.points[0]);
+
+        if (!intersections.length) return;
+
+        // The center of the shape
+        const center = this.getCenter(shape);
+
+        // Find furthest intersection between ray from origin through point and expanded bounds. TODO: What if the shape has a curve? In that case, should we intersect the circle-from-three-points instead?
+        const intersection = intersections.sort(
+            (a, b) => Vec.dist(b, origin) - Vec.dist(a, origin)
+        )[0];
+
+        // The point between the handle and the intersection
+        const middlePoint = Vec.med(point, intersection);
+
+        // The anchor is the point in the shape where the arrow will be pointing
+        let anchor: number[];
+
+        // The distance is the distance from the anchor to the handle
+        let distance: number;
+
+        if (bindAnywhere) {
+            // If the user is indicating that they want to bind inside of the shape, we just use the handle's point
+            anchor =
+                Vec.dist(point, center) < BINDING_DISTANCE / 2 ? center : point;
+            distance = 0;
+        } else {
+            if (
+                Vec.distanceToLineSegment(point, middlePoint, center) <
+                BINDING_DISTANCE / 2
+            ) {
+                // If the line segment would pass near to the center, snap the anchor the center point
+                anchor = center;
+            } else {
+                // Otherwise, the anchor is the middle point between the handle and the intersection
+                anchor = middlePoint;
+            }
+
+            if (Utils.pointInBounds(point, bounds)) {
+                // If the point is inside of the shape, use the shape's binding distance
+
+                distance = this.bindingDistance;
+            } else {
+                // Otherwise, use the actual distance from the handle point to nearest edge
+                distance = Math.max(
+                    this.bindingDistance,
+                    Utils.getBoundsSides(bounds)
+                        .map(side =>
+                            Vec.distanceToLineSegment(
+                                side[1][0],
+                                side[1][1],
+                                point
+                            )
+                        )
+                        .sort((a, b) => a - b)[0]
+                );
+            }
+        }
+
+        // The binding point is a normalized point indicating the position of the anchor.
+        // An anchor at the middle of the shape would be (0.5, 0.5). When the shape's bounds
+        // changes, we will re-recalculate the actual anchor point by multiplying the
+        // normalized point by the shape's new bounds.
+        const bindingPoint = Vec.divV(
+            Vec.sub(anchor, [expandedBounds.minX, expandedBounds.minY]),
+            [expandedBounds.width, expandedBounds.height]
+        );
+
+        return {
+            point: Vec.clampV(bindingPoint, 0, 1),
+            distance,
+        };
+    };
+
+    mutate = (shape: T, props: Partial<T>): Partial<T> => {
+        return props;
+    };
+
+    transform = (
+        shape: T,
+        bounds: TLBounds,
+        info: TransformInfo<T>
+    ): Partial<T> => {
+        return { ...shape, point: [bounds.minX, bounds.minY] };
+    };
+
+    transformSingle = (
+        shape: T,
+        bounds: TLBounds,
+        info: TransformInfo<T>
+    ): Partial<T> | void => {
+        return this.transform(shape, bounds, info);
+    };
+
+    updateChildren?: <K extends TDShape>(
+        shape: T,
+        children: K[]
+    ) => Partial<K>[] | void;
+
+    onChildrenChange?: (shape: T, children: TDShape[]) => Partial<T> | void;
+
+    onHandleChange?: (
+        shape: T,
+        handles: Partial<T['handles']>
+    ) => Partial<T> | void;
+
+    onRightPointHandle?: (
+        shape: T,
+        handles: Partial<T['handles']>,
+        info: Partial<TLPointerInfo>
+    ) => Partial<T> | void;
+
+    onDoubleClickHandle?: (
+        shape: T,
+        handles: Partial<T['handles']>,
+        info: Partial<TLPointerInfo>
+    ) => Partial<T> | void;
+
+    onDoubleClickBoundsHandle?: (shape: T) => Partial<T> | void;
+
+    onSessionComplete?: (shape: T) => Partial<T> | void;
+
+    getSvgElement = (shape: T, isDarkMode: boolean): SVGElement | void => {
+        const elm = document
+            .getElementById(shape.id + '_svg')
+            ?.cloneNode(true) as SVGElement;
+        if (!elm) return; // possibly in test mode
+        if ('label' in shape && (shape as any).label) {
+            const s = shape as TDShape & { label: string };
+            const g = document.createElementNS(
+                'http://www.w3.org/2000/svg',
+                'g'
+            );
+            const bounds = this.getBounds(shape);
+            const labelElm = getTextSvgElement(s['label'], shape.style, bounds);
+            labelElm.setAttribute(
+                'fill',
+                getShapeStyle(shape.style, isDarkMode).stroke
+            );
+            const font = getFontStyle(shape.style);
+            const size = getTextLabelSize(s['label'], font);
+            labelElm.setAttribute('transform-origin', 'top left');
+            labelElm.setAttribute(
+                'transform',
+                `translate(${bounds.width / 2}, ${
+                    (bounds.height - size[1]) / 2
+                })`
+            );
+            g.setAttribute('text-align', 'center');
+            g.setAttribute('text-anchor', 'middle');
+            g.appendChild(elm);
+            g.appendChild(labelElm);
+            return g;
+        }
+        return elm;
+    };
+}
diff --git a/libs/components/board-shapes/src/arrow-util/arrow-helpers.ts b/libs/components/board-shapes/src/arrow-util/arrow-helpers.ts
new file mode 100644
index 000000000..9b3b74787
--- /dev/null
+++ b/libs/components/board-shapes/src/arrow-util/arrow-helpers.ts
@@ -0,0 +1,268 @@
+import { Utils } from '@tldraw/core';
+import {
+    intersectCircleCircle,
+    intersectCircleLineSegment,
+} from '@tldraw/intersect';
+import Vec from '@tldraw/vec';
+import getStroke from 'perfect-freehand';
+import { EASINGS } from '@toeverything/components/board-types';
+import { getShapeStyle } from '../shared/shape-styles';
+import type {
+    ArrowShape,
+    Decoration,
+    ShapeStyles,
+} from '@toeverything/components/board-types';
+
+export function getArrowArcPath(
+    start: number[],
+    end: number[],
+    circle: number[],
+    bend: number
+) {
+    return [
+        'M',
+        start[0],
+        start[1],
+        'A',
+        circle[2],
+        circle[2],
+        0,
+        0,
+        bend < 0 ? 0 : 1,
+        end[0],
+        end[1],
+    ].join(' ');
+}
+
+export function getBendPoint(handles: ArrowShape['handles'], bend: number) {
+    const { start, end } = handles;
+
+    const dist = Vec.dist(start.point, end.point);
+
+    const midPoint = Vec.med(start.point, end.point);
+
+    const bendDist = (dist / 2) * bend;
+
+    const u = Vec.uni(Vec.vec(start.point, end.point));
+
+    const point = Vec.toFixed(
+        Math.abs(bendDist) < 10
+            ? midPoint
+            : Vec.add(midPoint, Vec.mul(Vec.per(u), bendDist))
+    );
+
+    return point;
+}
+
+export function renderFreehandArrowShaft(
+    id: string,
+    style: ShapeStyles,
+    start: number[],
+    end: number[],
+    decorationStart: Decoration | undefined,
+    decorationEnd: Decoration | undefined
+) {
+    const getRandom = Utils.rng(id);
+    const strokeWidth = getShapeStyle(style).strokeWidth;
+    const startPoint = decorationStart
+        ? Vec.nudge(start, end, strokeWidth)
+        : start;
+    const endPoint = decorationEnd ? Vec.nudge(end, start, strokeWidth) : end;
+    const stroke = getStroke([startPoint, endPoint], {
+        size: strokeWidth,
+        thinning: 0.618 + getRandom() * 0.2,
+        easing: EASINGS.easeOutQuad,
+        simulatePressure: true,
+        streamline: 0,
+        last: true,
+    });
+    return Utils.getSvgPathFromStroke(stroke);
+}
+
+export function renderCurvedFreehandArrowShaft(
+    id: string,
+    style: ShapeStyles,
+    start: number[],
+    end: number[],
+    decorationStart: Decoration | undefined,
+    decorationEnd: Decoration | undefined,
+    center: number[],
+    radius: number,
+    length: number,
+    easing: (t: number) => number
+) {
+    const getRandom = Utils.rng(id);
+    const strokeWidth = getShapeStyle(style).strokeWidth;
+    const startPoint = decorationStart
+        ? Vec.rotWith(start, center, strokeWidth / length)
+        : start;
+    const endPoint = decorationEnd
+        ? Vec.rotWith(end, center, -(strokeWidth / length))
+        : end;
+    const startAngle = Vec.angle(center, startPoint);
+    const endAngle = Vec.angle(center, endPoint);
+    const points: number[][] = [];
+    const count = 8 + Math.floor((Math.abs(length) / 20) * 1 + getRandom() / 2);
+    for (let i = 0; i < count; i++) {
+        const t = easing(i / count);
+        const angle = Utils.lerpAngles(startAngle, endAngle, t);
+        points.push(Vec.toFixed(Vec.nudgeAtAngle(center, angle, radius)));
+    }
+    const stroke = getStroke([startPoint, ...points, endPoint], {
+        size: 1 + strokeWidth,
+        thinning: 0.618 + getRandom() * 0.2,
+        easing: EASINGS.easeOutQuad,
+        simulatePressure: false,
+        streamline: 0,
+        last: true,
+    });
+    return Utils.getSvgPathFromStroke(stroke);
+}
+
+export function getCtp(start: number[], bend: number[], end: number[]) {
+    return Utils.circleFromThreePoints(start, end, bend);
+}
+
+export function getCurvedArrowHeadPoints(
+    A: number[],
+    r1: number,
+    C: number[],
+    r2: number,
+    sweep: boolean
+) {
+    const ints = intersectCircleCircle(A, r1 * 0.618, C, r2).points;
+    if (!ints) {
+        console.warn('Could not find an intersection for the arrow head.');
+        return { left: A, right: A };
+    }
+    const int = sweep ? ints[0] : ints[1];
+    const left = int
+        ? Vec.nudge(Vec.rotWith(int, A, Math.PI / 6), A, r1 * -0.382)
+        : A;
+    const right = int
+        ? Vec.nudge(Vec.rotWith(int, A, -Math.PI / 6), A, r1 * -0.382)
+        : A;
+    return { left, right };
+}
+
+export function getStraightArrowHeadPoints(
+    A: number[],
+    B: number[],
+    r: number
+) {
+    const ints = intersectCircleLineSegment(A, r, A, B).points;
+    if (!ints) {
+        console.warn('Could not find an intersection for the arrow head.');
+        return { left: A, right: A };
+    }
+    const int = ints[0];
+    const left = int ? Vec.rotWith(int, A, Math.PI / 6) : A;
+    const right = int ? Vec.rotWith(int, A, -Math.PI / 6) : A;
+    return { left, right };
+}
+
+export function getCurvedArrowHeadPath(
+    A: number[],
+    r1: number,
+    C: number[],
+    r2: number,
+    sweep: boolean
+) {
+    const { left, right } = getCurvedArrowHeadPoints(A, r1, C, r2, sweep);
+    return `M ${left} L ${A} ${right}`;
+}
+
+export function getStraightArrowHeadPath(A: number[], B: number[], r: number) {
+    const { left, right } = getStraightArrowHeadPoints(A, B, r);
+    return `M ${left} L ${A} ${right}`;
+}
+
+export function getArrowPath(
+    style: ShapeStyles,
+    start: number[],
+    bend: number[],
+    end: number[],
+    decorationStart: Decoration | undefined,
+    decorationEnd: Decoration | undefined
+) {
+    const { strokeWidth } = getShapeStyle(style, false);
+    const arrowDist = Vec.dist(start, end);
+    const arrowHeadLength = Math.min(arrowDist / 3, strokeWidth * 8);
+    const path: (string | number)[] = [];
+    const isStraightLine = Vec.dist(bend, Vec.toFixed(Vec.med(start, end))) < 1;
+    if (isStraightLine) {
+        path.push(`M ${start} L ${end}`);
+        if (decorationStart) {
+            path.push(getStraightArrowHeadPath(start, end, arrowHeadLength));
+        }
+        if (decorationEnd) {
+            path.push(getStraightArrowHeadPath(end, start, arrowHeadLength));
+        }
+    } else {
+        const circle = getCtp(start, bend, end);
+        const center = [circle[0], circle[1]];
+        const radius = circle[2];
+        const length = getArcLength(center, radius, start, end);
+        path.push(
+            `M ${start} A ${radius} ${radius} 0 0 ${
+                length > 0 ? '1' : '0'
+            } ${end}`
+        );
+        if (decorationStart)
+            path.push(
+                getCurvedArrowHeadPath(
+                    start,
+                    arrowHeadLength,
+                    center,
+                    radius,
+                    length < 0
+                )
+            );
+        if (decorationEnd) {
+            path.push(
+                getCurvedArrowHeadPath(
+                    end,
+                    arrowHeadLength,
+                    center,
+                    radius,
+                    length >= 0
+                )
+            );
+        }
+    }
+    return path.join(' ');
+}
+
+export function getArcPoints(start: number[], bend: number[], end: number[]) {
+    if (Vec.dist2(bend, Vec.med(start, end)) <= 4) return [start, end];
+    // The arc is curved; calculate twenty points along the arc
+    const points: number[][] = [];
+    const circle = getCtp(start, bend, end);
+    const center = [circle[0], circle[1]];
+    const radius = circle[2];
+    const startAngle = Vec.angle(center, start);
+    const endAngle = Vec.angle(center, end);
+    for (let i = 1 / 20; i < 1; i += 1 / 20) {
+        const angle = Utils.lerpAngles(startAngle, endAngle, i);
+        points.push(Vec.nudgeAtAngle(center, angle, radius));
+    }
+    return points;
+}
+
+export function isAngleBetween(a: number, b: number, c: number): boolean {
+    if (c === a || c === b) return true;
+    const PI2 = Math.PI * 2;
+    const AB = (b - a + PI2) % PI2;
+    const AC = (c - a + PI2) % PI2;
+    return AB <= Math.PI !== AC > AB;
+}
+
+export function getArcLength(
+    C: number[],
+    r: number,
+    A: number[],
+    B: number[]
+): number {
+    const sweep = Utils.getSweep(C, A, B);
+    return r * (2 * Math.PI) * (sweep / (2 * Math.PI));
+}
diff --git a/libs/components/board-shapes/src/arrow-util/arrow-util.tsx b/libs/components/board-shapes/src/arrow-util/arrow-util.tsx
new file mode 100644
index 000000000..321ef27d2
--- /dev/null
+++ b/libs/components/board-shapes/src/arrow-util/arrow-util.tsx
@@ -0,0 +1,604 @@
+import * as React from 'react';
+import { Utils, TLBounds, SVGContainer } from '@tldraw/core';
+import { Vec } from '@tldraw/vec';
+import { defaultStyle } from '../shared/shape-styles';
+import {
+    ArrowShape,
+    TransformInfo,
+    Decoration,
+    TDShapeType,
+    DashStyle,
+    TDMeta,
+    GHOSTED_OPACITY,
+} from '@toeverything/components/board-types';
+import { TDShapeUtil } from '../TDShapeUtil';
+import {
+    intersectArcBounds,
+    intersectLineSegmentBounds,
+    intersectLineSegmentLineSegment,
+} from '@tldraw/intersect';
+import {
+    getArcLength,
+    getArcPoints,
+    getArrowPath,
+    getBendPoint,
+    getCtp,
+    isAngleBetween,
+} from './arrow-helpers';
+import { styled } from '@toeverything/components/ui';
+import {
+    TextLabel,
+    getFontStyle,
+    getShapeStyle,
+    getTextLabelSize,
+    LabelMask,
+} from '../shared';
+import { StraightArrow } from './components/straight-arrow';
+import { CurvedArrow } from './components/curved-arrow';
+
+type T = ArrowShape;
+type E = HTMLDivElement;
+
+export class ArrowUtil extends TDShapeUtil<T, E> {
+    type = TDShapeType.Arrow as const;
+
+    override hideBounds = true;
+
+    override canEdit = true;
+
+    pathCache = new WeakMap<T, string>();
+
+    getShape = (props: Partial<T>): T => {
+        return {
+            id: 'id',
+            type: TDShapeType.Arrow,
+            name: 'Arrow',
+            parentId: 'page',
+            childIndex: 1,
+            point: [0, 0],
+            rotation: 0,
+            bend: 0,
+            handles: {
+                start: {
+                    id: 'start',
+                    index: 0,
+                    point: [0, 0],
+                    canBind: true,
+                    ...props.handles?.start,
+                },
+                end: {
+                    id: 'end',
+                    index: 1,
+                    point: [1, 1],
+                    canBind: true,
+                    ...props.handles?.end,
+                },
+                bend: {
+                    id: 'bend',
+                    index: 2,
+                    point: [0.5, 0.5],
+                    ...props.handles?.bend,
+                },
+            },
+            decorations: props.decorations ?? {
+                end: Decoration.Arrow,
+            },
+            style: {
+                ...defaultStyle,
+                isFilled: false,
+                ...props.style,
+            },
+            label: '',
+            labelPoint: [0.5, 0.5],
+            workspace: props.workspace,
+            ...props,
+        };
+    };
+
+    Component = TDShapeUtil.Component<T, E, TDMeta>(
+        (
+            {
+                shape,
+                isEditing,
+                isGhost,
+                meta,
+                events,
+                onShapeChange,
+                onShapeBlur,
+            },
+            ref
+        ) => {
+            const {
+                id,
+                label = '',
+                handles: { start, bend, end },
+                decorations = {},
+                style,
+            } = shape;
+            const isStraightLine =
+                Vec.dist(
+                    bend.point,
+                    Vec.toFixed(Vec.med(start.point, end.point))
+                ) < 1;
+            const font = getFontStyle(style);
+            const styles = getShapeStyle(style, meta.isDarkMode);
+            const labelSize =
+                label || isEditing ? getTextLabelSize(label, font) : [0, 0];
+            const bounds = this.getBounds(shape);
+            const dist = React.useMemo(() => {
+                const { start, bend, end } = shape.handles;
+                if (isStraightLine) return Vec.dist(start.point, end.point);
+                const circle = getCtp(start.point, bend.point, end.point);
+                const center = circle.slice(0, 2);
+                const radius = circle[2];
+                const length = getArcLength(
+                    center,
+                    radius,
+                    start.point,
+                    end.point
+                );
+                return Math.abs(length);
+            }, [shape.handles]);
+            const scale = Math.max(
+                0.5,
+                Math.min(
+                    1,
+                    Math.max(
+                        dist / (labelSize[1] + 128),
+                        dist / (labelSize[0] + 128)
+                    )
+                )
+            );
+            const offset = React.useMemo(() => {
+                const bounds = this.getBounds(shape);
+                const offset = Vec.sub(
+                    shape.handles.bend.point,
+                    Vec.toFixed([bounds.width / 2, bounds.height / 2])
+                );
+                return offset;
+            }, [shape, scale]);
+            const handleLabelChange = React.useCallback(
+                (label: string) => {
+                    onShapeChange?.({ id, label });
+                },
+                [onShapeChange]
+            );
+            const Component = isStraightLine ? StraightArrow : CurvedArrow;
+            return (
+                <FullWrapper ref={ref} {...events}>
+                    <TextLabel
+                        font={font}
+                        text={label}
+                        color={styles.stroke}
+                        offsetX={offset[0]}
+                        offsetY={offset[1]}
+                        scale={scale}
+                        isEditing={isEditing}
+                        onChange={handleLabelChange}
+                        onBlur={onShapeBlur}
+                    />
+                    <SVGContainer id={shape.id + '_svg'}>
+                        <defs>
+                            <mask id={shape.id + '_clip'}>
+                                <rect
+                                    x={-100}
+                                    y={-100}
+                                    width={bounds.width + 200}
+                                    height={bounds.height + 200}
+                                    fill="white"
+                                />
+                                <rect
+                                    x={
+                                        bounds.width / 2 -
+                                        (labelSize[0] / 2) * scale +
+                                        offset[0]
+                                    }
+                                    y={
+                                        bounds.height / 2 -
+                                        (labelSize[1] / 2) * scale +
+                                        offset[1]
+                                    }
+                                    width={labelSize[0] * scale}
+                                    height={labelSize[1] * scale}
+                                    rx={4 * scale}
+                                    ry={4 * scale}
+                                    fill="black"
+                                    opacity={1}
+                                />
+                            </mask>
+                        </defs>
+                        <g
+                            pointerEvents="none"
+                            opacity={isGhost ? GHOSTED_OPACITY : 1}
+                            mask={
+                                label || isEditing
+                                    ? `url(#${shape.id}_clip)`
+                                    : ``
+                            }
+                        >
+                            <Component
+                                id={id}
+                                style={style}
+                                start={start.point}
+                                end={end.point}
+                                bend={bend.point}
+                                arrowBend={shape.bend}
+                                decorationStart={decorations?.start}
+                                decorationEnd={decorations?.end}
+                                isDraw={style.dash === DashStyle.Draw}
+                                isDarkMode={meta.isDarkMode}
+                            />
+                        </g>
+                    </SVGContainer>
+                </FullWrapper>
+            );
+        }
+    );
+
+    Indicator = TDShapeUtil.Indicator<ArrowShape>(({ shape, bounds }) => {
+        const {
+            style,
+            decorations,
+            label,
+            handles: { start, bend, end },
+        } = shape;
+        const font = getFontStyle(style);
+        const labelSize = label ? getTextLabelSize(label, font) : [0, 0];
+        const isStraightLine =
+            Vec.dist(bend.point, Vec.toFixed(Vec.med(start.point, end.point))) <
+            1;
+        const dist = React.useMemo(() => {
+            const { start, bend, end } = shape.handles;
+            if (isStraightLine) return Vec.dist(start.point, end.point);
+            const circle = getCtp(start.point, bend.point, end.point);
+            const center = circle.slice(0, 2);
+            const radius = circle[2];
+            const length = getArcLength(center, radius, start.point, end.point);
+            return Math.abs(length);
+        }, [shape.handles]);
+        const scale = Math.max(
+            0.5,
+            Math.min(
+                1,
+                Math.max(
+                    dist / (labelSize[1] + 128),
+                    dist / (labelSize[0] + 128)
+                )
+            )
+        );
+        const offset = React.useMemo(() => {
+            const bounds = this.getBounds(shape);
+            const offset = Vec.sub(shape.handles.bend.point, [
+                bounds.width / 2,
+                bounds.height / 2,
+            ]);
+            return offset;
+        }, [shape, scale]);
+        return (
+            <>
+                <LabelMask
+                    id={shape.id}
+                    scale={scale}
+                    offset={offset}
+                    bounds={bounds}
+                    labelSize={labelSize}
+                />
+                <path
+                    d={getArrowPath(
+                        style,
+                        start.point,
+                        bend.point,
+                        end.point,
+                        decorations?.start,
+                        decorations?.end
+                    )}
+                    mask={label ? `url(#${shape.id}_clip)` : ``}
+                />
+                {label && (
+                    <rect
+                        x={
+                            bounds.width / 2 -
+                            (labelSize[0] / 2) * scale +
+                            offset[0]
+                        }
+                        y={
+                            bounds.height / 2 -
+                            (labelSize[1] / 2) * scale +
+                            offset[1]
+                        }
+                        width={labelSize[0] * scale}
+                        height={labelSize[1] * scale}
+                        rx={4 * scale}
+                        ry={4 * scale}
+                        fill="transparent"
+                    />
+                )}
+            </>
+        );
+    });
+
+    getBounds = (shape: T) => {
+        const bounds = Utils.getFromCache(this.boundsCache, shape, () => {
+            const {
+                handles: { start, bend, end },
+            } = shape;
+            return Utils.getBoundsFromPoints(
+                getArcPoints(start.point, bend.point, end.point)
+            );
+        });
+        return Utils.translateBounds(bounds, shape.point);
+    };
+
+    override getRotatedBounds = (shape: T) => {
+        const {
+            handles: { start, bend, end },
+        } = shape;
+        let points = getArcPoints(start.point, bend.point, end.point);
+        const { minX, minY, maxX, maxY } = Utils.getBoundsFromPoints(points);
+        if (shape.rotation !== 0) {
+            points = points.map(pt =>
+                Vec.rotWith(
+                    pt,
+                    [(minX + maxX) / 2, (minY + maxY) / 2],
+                    shape.rotation || 0
+                )
+            );
+        }
+
+        return Utils.translateBounds(
+            Utils.getBoundsFromPoints(points),
+            shape.point
+        );
+    };
+
+    override getCenter = (shape: T) => {
+        const { start, end } = shape.handles;
+        return Vec.add(shape.point, Vec.med(start.point, end.point));
+    };
+
+    override shouldRender = (prev: T, next: T) => {
+        return (
+            next.decorations !== prev.decorations ||
+            next.handles !== prev.handles ||
+            next.style !== prev.style ||
+            next.label !== prev.label
+        );
+    };
+
+    override hitTestPoint = (shape: T, point: number[]): boolean => {
+        const {
+            handles: { start, bend, end },
+        } = shape;
+        const pt = Vec.sub(point, shape.point);
+        const points = getArcPoints(start.point, bend.point, end.point);
+        for (let i = 1; i < points.length; i++) {
+            if (Vec.distanceToLineSegment(points[i - 1], points[i], pt) < 1) {
+                return true;
+            }
+        }
+        return false;
+    };
+
+    override hitTestLineSegment = (
+        shape: T,
+        A: number[],
+        B: number[]
+    ): boolean => {
+        const {
+            handles: { start, bend, end },
+        } = shape;
+        const ptA = Vec.sub(A, shape.point);
+        const ptB = Vec.sub(B, shape.point);
+        const points = getArcPoints(start.point, bend.point, end.point);
+        for (let i = 1; i < points.length; i++) {
+            if (
+                intersectLineSegmentLineSegment(
+                    points[i - 1],
+                    points[i],
+                    ptA,
+                    ptB
+                ).didIntersect
+            ) {
+                return true;
+            }
+        }
+        return false;
+    };
+
+    override hitTestBounds = (shape: T, bounds: TLBounds) => {
+        const { start, end, bend } = shape.handles;
+        const sp = Vec.add(shape.point, start.point);
+        const ep = Vec.add(shape.point, end.point);
+        if (
+            Utils.pointInBounds(sp, bounds) ||
+            Utils.pointInBounds(ep, bounds)
+        ) {
+            return true;
+        }
+        if (Vec.isEqual(Vec.med(start.point, end.point), bend.point)) {
+            return intersectLineSegmentBounds(sp, ep, bounds).length > 0;
+        } else {
+            const [cx, cy, r] = getCtp(start.point, bend.point, end.point);
+            const cp = Vec.add(shape.point, [cx, cy]);
+            return intersectArcBounds(cp, r, sp, ep, bounds).length > 0;
+        }
+    };
+
+    override transform = (
+        shape: T,
+        bounds: TLBounds,
+        { initialShape, scaleX, scaleY }: TransformInfo<T>
+    ): Partial<T> => {
+        const initialShapeBounds = this.getBounds(initialShape);
+        const handles: (keyof T['handles'])[] = ['start', 'end'];
+        const nextHandles = { ...initialShape.handles };
+        handles.forEach(handle => {
+            const [x, y] = nextHandles[handle].point;
+            const nw = x / initialShapeBounds.width;
+            const nh = y / initialShapeBounds.height;
+            nextHandles[handle] = {
+                ...nextHandles[handle],
+                point: [
+                    bounds.width * (scaleX < 0 ? 1 - nw : nw),
+                    bounds.height * (scaleY < 0 ? 1 - nh : nh),
+                ],
+            };
+        });
+        const { start, bend, end } = nextHandles;
+        const dist = Vec.dist(start.point, end.point);
+        const midPoint = Vec.med(start.point, end.point);
+        const bendDist = (dist / 2) * initialShape.bend;
+        const u = Vec.uni(Vec.vec(start.point, end.point));
+        const point = Vec.add(midPoint, Vec.mul(Vec.per(u), bendDist));
+        nextHandles['bend'] = {
+            ...bend,
+            point: Vec.toFixed(Math.abs(bendDist) < 10 ? midPoint : point),
+        };
+        return {
+            point: Vec.toFixed([bounds.minX, bounds.minY]),
+            handles: nextHandles,
+        };
+    };
+
+    override onDoubleClickHandle = (
+        shape: T,
+        handle: Partial<T['handles']>
+    ): Partial<T> | void => {
+        switch (handle) {
+            case 'bend': {
+                return {
+                    bend: 0,
+                    handles: {
+                        ...shape.handles,
+                        bend: {
+                            ...shape.handles.bend,
+                            point: getBendPoint(shape.handles, shape.bend),
+                        },
+                    },
+                };
+            }
+            case 'start': {
+                return {
+                    decorations: {
+                        ...shape.decorations,
+                        start: shape.decorations?.start
+                            ? undefined
+                            : Decoration.Arrow,
+                    },
+                };
+            }
+            case 'end': {
+                return {
+                    decorations: {
+                        ...shape.decorations,
+                        end: shape.decorations?.end
+                            ? undefined
+                            : Decoration.Arrow,
+                    },
+                };
+            }
+        }
+
+        return this;
+    };
+
+    override onHandleChange = (
+        shape: T,
+        handles: Partial<T['handles']>
+    ): Partial<T> | void => {
+        let nextHandles = Utils.deepMerge<ArrowShape['handles']>(
+            shape.handles,
+            handles
+        );
+        let nextBend = shape.bend;
+
+        nextHandles = Utils.deepMerge(nextHandles, {
+            start: {
+                point: Vec.toFixed(nextHandles.start.point),
+            },
+            end: {
+                point: Vec.toFixed(nextHandles.end.point),
+            },
+        });
+
+        // This will produce NaN values
+        if (Vec.isEqual(nextHandles.start.point, nextHandles.end.point)) return;
+
+        // If the user is moving the bend handle, we want to move the bend point
+        if ('bend' in handles) {
+            const { start, end, bend } = nextHandles;
+
+            const distance = Vec.dist(start.point, end.point);
+            const midPoint = Vec.med(start.point, end.point);
+            const angle = Vec.angle(start.point, end.point);
+            const u = Vec.uni(Vec.vec(start.point, end.point));
+
+            // Create a line segment perendicular to the line between the start and end points
+            const ap = Vec.add(midPoint, Vec.mul(Vec.per(u), distance));
+            const bp = Vec.sub(midPoint, Vec.mul(Vec.per(u), distance));
+
+            const bendPoint = Vec.nearestPointOnLineSegment(
+                ap,
+                bp,
+                bend.point,
+                true
+            );
+
+            // Find the distance between the midpoint and the nearest point on the
+            // line segment to the bend handle's dragged point
+            const bendDist = Vec.dist(midPoint, bendPoint);
+
+            // The shape's "bend" is the ratio of the bend to the distance between
+            // the start and end points. If the bend is below a certain amount, the
+            // bend should be zero.
+            const realBend = bendDist / (distance / 2);
+
+            nextBend = Utils.clamp(realBend, -0.99, 0.99);
+
+            // If the point is to the left of the line segment, we make the bend
+            // negative, otherwise it's positive.
+            const angleToBend = Vec.angle(start.point, bendPoint);
+
+            // If resulting bend is low enough that the handle will snap to center,
+            // then also snap the bend to center
+
+            if (Vec.isEqual(midPoint, getBendPoint(nextHandles, nextBend))) {
+                nextBend = 0;
+            } else if (isAngleBetween(angle, angle + Math.PI, angleToBend)) {
+                // Otherwise, fix the bend direction
+                nextBend *= -1;
+            }
+        }
+
+        const nextShape = {
+            point: shape.point,
+            bend: nextBend,
+            handles: {
+                ...nextHandles,
+                bend: {
+                    ...nextHandles.bend,
+                    point: getBendPoint(nextHandles, nextBend),
+                },
+            },
+        };
+
+        // Zero out the handles to prevent handles with negative points. If a handle's x or y
+        // is below zero, we need to move the shape left or up to make it zero.
+        const topLeft = shape.point;
+
+        const nextBounds = this.getBounds({ ...nextShape } as ArrowShape);
+
+        const offset = Vec.sub([nextBounds.minX, nextBounds.minY], topLeft);
+
+        if (!Vec.isEqual(offset, [0, 0])) {
+            Object.values(nextShape.handles).forEach(handle => {
+                handle.point = Vec.toFixed(Vec.sub(handle.point, offset));
+            });
+            nextShape.point = Vec.toFixed(Vec.add(nextShape.point, offset));
+        }
+
+        return nextShape;
+    };
+}
+
+const FullWrapper = styled('div')({ width: '100%', height: '100%' });
diff --git a/libs/components/board-shapes/src/arrow-util/components/arrow-head.tsx b/libs/components/board-shapes/src/arrow-util/components/arrow-head.tsx
new file mode 100644
index 000000000..18fa47fec
--- /dev/null
+++ b/libs/components/board-shapes/src/arrow-util/components/arrow-head.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+export interface ArrowheadProps {
+    left: number[];
+    middle: number[];
+    right: number[];
+    stroke: string;
+    strokeWidth: number;
+}
+
+export function Arrowhead({
+    left,
+    middle,
+    right,
+    stroke,
+    strokeWidth,
+}: ArrowheadProps) {
+    return (
+        <g>
+            <path
+                className="tl-stroke-hitarea"
+                d={`M ${left} L ${middle} ${right}`}
+            />
+            <path
+                d={`M ${left} L ${middle} ${right}`}
+                fill="none"
+                stroke={stroke}
+                strokeWidth={strokeWidth}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                pointerEvents="none"
+            />
+        </g>
+    );
+}
diff --git a/libs/components/board-shapes/src/arrow-util/components/curved-arrow.tsx b/libs/components/board-shapes/src/arrow-util/components/curved-arrow.tsx
new file mode 100644
index 000000000..5fc8056cf
--- /dev/null
+++ b/libs/components/board-shapes/src/arrow-util/components/curved-arrow.tsx
@@ -0,0 +1,132 @@
+import { Utils } from '@tldraw/core';
+import Vec from '@tldraw/vec';
+import * as React from 'react';
+import { EASINGS } from '@toeverything/components/board-types';
+import { getShapeStyle } from '../../shared';
+import type {
+    Decoration,
+    ShapeStyles,
+} from '@toeverything/components/board-types';
+import {
+    getArcLength,
+    getArrowArcPath,
+    getCtp,
+    getCurvedArrowHeadPoints,
+    renderCurvedFreehandArrowShaft,
+} from '../arrow-helpers';
+import { Arrowhead } from './arrow-head';
+
+interface ArrowSvgProps {
+    id: string;
+    style: ShapeStyles;
+    start: number[];
+    bend: number[];
+    end: number[];
+    arrowBend: number;
+    decorationStart: Decoration | undefined;
+    decorationEnd: Decoration | undefined;
+    isDarkMode: boolean;
+    isDraw: boolean;
+}
+
+export const CurvedArrow = React.memo(function CurvedArrow({
+    id,
+    style,
+    start,
+    bend,
+    end,
+    arrowBend,
+    decorationStart,
+    decorationEnd,
+    isDraw,
+    isDarkMode,
+}: ArrowSvgProps) {
+    const arrowDist = Vec.dist(start, end);
+    if (arrowDist < 2) return null;
+    const styles = getShapeStyle(style, isDarkMode);
+    const { strokeWidth } = styles;
+    const sw = 1 + strokeWidth * 1.618;
+    // Calculate a path as a segment of a circle passing through the three points start, bend, and end
+    const circle = getCtp(start, bend, end);
+    const center = [circle[0], circle[1]];
+    const radius = circle[2];
+    const length = getArcLength(center, radius, start, end);
+    const getRandom = Utils.rng(id);
+    const easing =
+        EASINGS[getRandom() > 0 ? 'easeInOutSine' : 'easeInOutCubic'];
+    const path = isDraw
+        ? renderCurvedFreehandArrowShaft(
+              id,
+              style,
+              start,
+              end,
+              decorationStart,
+              decorationEnd,
+              center,
+              radius,
+              length,
+              easing
+          )
+        : getArrowArcPath(start, end, circle, arrowBend);
+    const { strokeDasharray, strokeDashoffset } = Utils.getPerfectDashProps(
+        Math.abs(length),
+        sw,
+        style.dash,
+        2,
+        false
+    );
+    // Arrowheads
+    const arrowHeadLength = Math.min(arrowDist / 3, strokeWidth * 8);
+    const startArrowHead = decorationStart
+        ? getCurvedArrowHeadPoints(
+              start,
+              arrowHeadLength,
+              center,
+              radius,
+              length < 0
+          )
+        : null;
+    const endArrowHead = decorationEnd
+        ? getCurvedArrowHeadPoints(
+              end,
+              arrowHeadLength,
+              center,
+              radius,
+              length >= 0
+          )
+        : null;
+    return (
+        <>
+            <path className="tl-stroke-hitarea" d={path} />
+            <path
+                d={path}
+                fill={isDraw ? styles.stroke : 'none'}
+                stroke={styles.stroke}
+                strokeWidth={isDraw ? 0 : sw}
+                strokeDasharray={strokeDasharray}
+                strokeDashoffset={strokeDashoffset}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                pointerEvents="none"
+            />
+            {startArrowHead && (
+                <Arrowhead
+                    left={startArrowHead.left}
+                    middle={start}
+                    right={startArrowHead.right}
+                    stroke={styles.stroke}
+                    strokeWidth={sw}
+                />
+            )}
+            {endArrowHead && (
+                <Arrowhead
+                    left={endArrowHead.left}
+                    middle={end}
+                    right={endArrowHead.right}
+                    stroke={styles.stroke}
+                    strokeWidth={sw}
+                />
+            )}
+        </>
+    );
+});
diff --git a/libs/components/board-shapes/src/arrow-util/components/straight-arrow.tsx b/libs/components/board-shapes/src/arrow-util/components/straight-arrow.tsx
new file mode 100644
index 000000000..5414574a9
--- /dev/null
+++ b/libs/components/board-shapes/src/arrow-util/components/straight-arrow.tsx
@@ -0,0 +1,103 @@
+import { Utils } from '@tldraw/core';
+import Vec from '@tldraw/vec';
+import * as React from 'react';
+import { getShapeStyle } from '../../shared';
+import type {
+    Decoration,
+    ShapeStyles,
+} from '@toeverything/components/board-types';
+import {
+    getStraightArrowHeadPoints,
+    renderFreehandArrowShaft,
+} from '../arrow-helpers';
+import { Arrowhead } from './arrow-head';
+
+interface ArrowSvgProps {
+    id: string;
+    style: ShapeStyles;
+    start: number[];
+    bend: number[];
+    end: number[];
+    arrowBend: number;
+    decorationStart: Decoration | undefined;
+    decorationEnd: Decoration | undefined;
+    isDarkMode: boolean;
+    isDraw: boolean;
+}
+
+export const StraightArrow = React.memo(function StraightArrow({
+    id,
+    style,
+    start,
+    end,
+    decorationStart,
+    decorationEnd,
+    isDraw,
+    isDarkMode,
+}: ArrowSvgProps) {
+    const arrowDist = Vec.dist(start, end);
+    if (arrowDist < 2) return null;
+    const styles = getShapeStyle(style, isDarkMode);
+    const { strokeWidth } = styles;
+    const sw = 1 + strokeWidth * 1.618;
+    // Path between start and end points
+    const path = isDraw
+        ? renderFreehandArrowShaft(
+              id,
+              style,
+              start,
+              end,
+              decorationStart,
+              decorationEnd
+          )
+        : 'M' + Vec.toFixed(start) + 'L' + Vec.toFixed(end);
+    const { strokeDasharray, strokeDashoffset } = Utils.getPerfectDashProps(
+        arrowDist,
+        strokeWidth * 1.618,
+        style.dash,
+        2,
+        false
+    );
+    // Arrowheads
+    const arrowHeadLength = Math.min(arrowDist / 3, strokeWidth * 8);
+    const startArrowHead = decorationStart
+        ? getStraightArrowHeadPoints(start, end, arrowHeadLength)
+        : null;
+    const endArrowHead = decorationEnd
+        ? getStraightArrowHeadPoints(end, start, arrowHeadLength)
+        : null;
+    return (
+        <>
+            <path className="tl-stroke-hitarea" d={path} />
+            <path
+                d={path}
+                fill={styles.stroke}
+                stroke={styles.stroke}
+                strokeWidth={isDraw ? sw / 2 : sw}
+                strokeDasharray={strokeDasharray}
+                strokeDashoffset={strokeDashoffset}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                pointerEvents="stroke"
+            />
+            {startArrowHead && (
+                <Arrowhead
+                    left={startArrowHead.left}
+                    middle={start}
+                    right={startArrowHead.right}
+                    stroke={styles.stroke}
+                    strokeWidth={sw}
+                />
+            )}
+            {endArrowHead && (
+                <Arrowhead
+                    left={endArrowHead.left}
+                    middle={end}
+                    right={endArrowHead.right}
+                    stroke={styles.stroke}
+                    strokeWidth={sw}
+                />
+            )}
+        </>
+    );
+});
diff --git a/libs/components/board-shapes/src/arrow-util/index.ts b/libs/components/board-shapes/src/arrow-util/index.ts
new file mode 100644
index 000000000..356c20b37
--- /dev/null
+++ b/libs/components/board-shapes/src/arrow-util/index.ts
@@ -0,0 +1 @@
+export * from './arrow-util';
diff --git a/libs/components/board-shapes/src/draw-util/DrawUtil.tsx b/libs/components/board-shapes/src/draw-util/DrawUtil.tsx
new file mode 100644
index 000000000..9f78d0aa2
--- /dev/null
+++ b/libs/components/board-shapes/src/draw-util/DrawUtil.tsx
@@ -0,0 +1,376 @@
+import * as React from 'react';
+import { Utils, SVGContainer, TLBounds } from '@tldraw/core';
+import { Vec } from '@tldraw/vec';
+import { defaultStyle, getShapeStyle } from '../shared/shape-styles';
+import {
+    DrawShape,
+    DashStyle,
+    TDShapeType,
+    TransformInfo,
+    TDMeta,
+    GHOSTED_OPACITY,
+} from '@toeverything/components/board-types';
+import { TDShapeUtil } from '../TDShapeUtil';
+import {
+    intersectBoundsBounds,
+    intersectBoundsPolyline,
+    intersectLineSegmentBounds,
+    intersectLineSegmentLineSegment,
+} from '@tldraw/intersect';
+import {
+    getDrawStrokePathTDSnapshot,
+    getFillPath,
+    getSolidStrokePathTDSnapshot,
+} from './draw-helpers';
+
+type T = DrawShape;
+type E = SVGSVGElement;
+
+export class DrawUtil extends TDShapeUtil<T, E> {
+    type = TDShapeType.Draw as const;
+
+    pointsBoundsCache = new WeakMap<T['points'], TLBounds>([]);
+
+    shapeBoundsCache = new Map<string, TLBounds>();
+
+    rotatedCache = new WeakMap<T, number[][]>([]);
+
+    pointCache: Record<string, number[]> = {};
+
+    override canClone = true;
+
+    getShape = (props: Partial<T>): T => {
+        return Utils.deepMerge<T>(
+            {
+                id: 'id',
+                type: TDShapeType.Draw,
+                name: 'Draw',
+                parentId: 'page',
+                childIndex: 1,
+                point: [0, 0],
+                rotation: 0,
+                style: defaultStyle,
+                points: [],
+                isComplete: false,
+                workspace: props.workspace,
+            },
+            props
+        );
+    };
+
+    Component = TDShapeUtil.Component<T, E, TDMeta>(
+        ({ shape, meta, isSelected, isGhost, events }, ref) => {
+            const { points, style, isComplete } = shape;
+
+            const polygon_path_td_snapshot = React.useMemo(() => {
+                return getFillPath(shape);
+            }, [points, style.strokeWidth]);
+
+            const path_td_snapshot = React.useMemo(() => {
+                return style.dash === DashStyle.Draw
+                    ? getDrawStrokePathTDSnapshot(shape)
+                    : getSolidStrokePathTDSnapshot(shape);
+            }, [points, style.strokeWidth, style.dash, isComplete]);
+
+            const styles = getShapeStyle(style, meta.isDarkMode);
+            const { stroke, fill, strokeWidth } = styles;
+
+            // For very short lines, draw a point instead of a line
+            const bounds = this.getBounds(shape);
+
+            const verySmall =
+                bounds.width <= strokeWidth / 2 &&
+                bounds.height <= strokeWidth / 2;
+
+            if (verySmall) {
+                const sw = 1 + strokeWidth;
+
+                return (
+                    <SVGContainer ref={ref} id={shape.id + '_svg'} {...events}>
+                        <circle
+                            r={sw}
+                            fill={stroke}
+                            stroke={stroke}
+                            pointerEvents="all"
+                            opacity={isGhost ? GHOSTED_OPACITY : 1}
+                        />
+                    </SVGContainer>
+                );
+            }
+
+            const shouldFill =
+                style.isFilled &&
+                points.length > 3 &&
+                Vec.dist(points[0], points[points.length - 1]) <
+                    strokeWidth * 2;
+
+            if (shape.style.dash === DashStyle.Draw) {
+                return (
+                    <SVGContainer ref={ref} id={shape.id + '_svg'} {...events}>
+                        <g opacity={isGhost ? GHOSTED_OPACITY : 1}>
+                            <path
+                                className={
+                                    shouldFill || isSelected
+                                        ? 'tl-fill-hitarea'
+                                        : 'tl-stroke-hitarea'
+                                }
+                                d={path_td_snapshot}
+                            />
+                            {shouldFill && (
+                                <path
+                                    d={polygon_path_td_snapshot}
+                                    stroke="none"
+                                    fill={fill}
+                                    strokeLinejoin="round"
+                                    strokeLinecap="round"
+                                    pointerEvents="none"
+                                />
+                            )}
+                            <path
+                                d={path_td_snapshot}
+                                fill={stroke}
+                                stroke={stroke}
+                                strokeWidth={strokeWidth / 2}
+                                strokeLinejoin="round"
+                                strokeLinecap="round"
+                                pointerEvents="none"
+                            />
+                        </g>
+                    </SVGContainer>
+                );
+            }
+
+            // For solid, dash and dotted lines, draw a regular stroke path
+
+            const strokeDasharray = {
+                [DashStyle.None]: 'none',
+                [DashStyle.Draw]: 'none',
+                [DashStyle.Solid]: `none`,
+                [DashStyle.Dotted]: `0.1 ${strokeWidth * 4}`,
+                [DashStyle.Dashed]: `${strokeWidth * 4} ${strokeWidth * 4}`,
+            }[style.dash];
+
+            const strokeDashoffset = {
+                [DashStyle.None]: 'none',
+                [DashStyle.Draw]: 'none',
+                [DashStyle.Solid]: `none`,
+                [DashStyle.Dotted]: `0`,
+                [DashStyle.Dashed]: `0`,
+            }[style.dash];
+
+            const sw = 1 + strokeWidth * 1.5;
+
+            return (
+                <SVGContainer ref={ref} id={shape.id + '_svg'} {...events}>
+                    <g opacity={isGhost ? GHOSTED_OPACITY : 1}>
+                        <path
+                            className={
+                                shouldFill && isSelected
+                                    ? 'tl-fill-hitarea'
+                                    : 'tl-stroke-hitarea'
+                            }
+                            d={path_td_snapshot}
+                        />
+                        <path
+                            d={path_td_snapshot}
+                            fill={shouldFill ? fill : 'none'}
+                            stroke="none"
+                            strokeWidth={Math.min(4, strokeWidth * 2)}
+                            strokeLinejoin="round"
+                            strokeLinecap="round"
+                            pointerEvents="none"
+                        />
+                        <path
+                            d={path_td_snapshot}
+                            fill="none"
+                            stroke={stroke}
+                            strokeWidth={sw}
+                            strokeDasharray={strokeDasharray}
+                            strokeDashoffset={strokeDashoffset}
+                            strokeLinejoin="round"
+                            strokeLinecap="round"
+                            pointerEvents="none"
+                        />
+                    </g>
+                </SVGContainer>
+            );
+        }
+    );
+
+    Indicator = TDShapeUtil.Indicator<T>(({ shape }) => {
+        const { points } = shape;
+
+        const path_td_snapshot = React.useMemo(() => {
+            return getSolidStrokePathTDSnapshot(shape);
+        }, [points]);
+
+        const bounds = this.getBounds(shape);
+
+        const verySmall = bounds.width < 4 && bounds.height < 4;
+
+        if (verySmall) {
+            return <circle x={bounds.width / 2} y={bounds.height / 2} r={1} />;
+        }
+
+        return <path d={path_td_snapshot} />;
+    });
+
+    override transform = (
+        shape: T,
+        bounds: TLBounds,
+        { initialShape, scaleX, scaleY }: TransformInfo<T>
+    ): Partial<T> => {
+        const initialShapeBounds = Utils.getFromCache(
+            this.boundsCache,
+            initialShape,
+            () => Utils.getBoundsFromPoints(initialShape.points)
+        );
+
+        const points = initialShape.points.map(([x, y, r]) => {
+            return [
+                bounds.width *
+                    (scaleX < 0 // * sin?
+                        ? 1 - x / initialShapeBounds.width
+                        : x / initialShapeBounds.width),
+                bounds.height *
+                    (scaleY < 0 // * cos?
+                        ? 1 - y / initialShapeBounds.height
+                        : y / initialShapeBounds.height),
+                r,
+            ];
+        });
+
+        const newBounds = Utils.getBoundsFromPoints(shape.points);
+
+        const point = Vec.sub(
+            [bounds.minX, bounds.minY],
+            [newBounds.minX, newBounds.minY]
+        );
+
+        return {
+            points,
+            point,
+        };
+    };
+
+    getBounds = (shape: T) => {
+        // The goal here is to avoid recalculating the bounds from the
+        // points array, which is expensive. However, we still need a
+        // new bounds if the point has changed, but we will reuse the
+        // previous bounds-from-points result if we can.
+
+        const pointsHaveChanged = !this.pointsBoundsCache.has(shape.points);
+        const pointHasChanged = !(this.pointCache[shape.id] === shape.point);
+
+        if (pointsHaveChanged) {
+            // If the points have changed, then bust the points cache
+            const bounds = Utils.getBoundsFromPoints(shape.points);
+            this.pointsBoundsCache.set(shape.points, bounds);
+            this.shapeBoundsCache.set(
+                shape.id,
+                Utils.translateBounds(bounds, shape.point)
+            );
+            this.pointCache[shape.id] = shape.point;
+        } else if (pointHasChanged && !pointsHaveChanged) {
+            // If the point have has changed, then bust the point cache
+            this.pointCache[shape.id] = shape.point;
+            this.shapeBoundsCache.set(
+                shape.id,
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                Utils.translateBounds(
+                    this.pointsBoundsCache.get(shape.points)!,
+                    shape.point
+                )
+            );
+        }
+
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return this.shapeBoundsCache.get(shape.id)!;
+    };
+
+    override shouldRender = (prev: T, next: T) => {
+        return (
+            next.points !== prev.points ||
+            next.style !== prev.style ||
+            next.isComplete !== prev.isComplete
+        );
+    };
+
+    override hitTestPoint = (shape: T, point: number[]) => {
+        const ptA = Vec.sub(point, shape.point);
+        return Utils.pointInPolyline(ptA, shape.points);
+    };
+
+    override hitTestLineSegment = (
+        shape: T,
+        A: number[],
+        B: number[]
+    ): boolean => {
+        const { points, point } = shape;
+        const ptA = Vec.sub(A, point);
+        const ptB = Vec.sub(B, point);
+        const bounds = this.getBounds(shape);
+
+        if (points.length <= 2) {
+            return Vec.distanceToLineSegment(A, B, shape.point) < 4;
+        }
+
+        if (intersectLineSegmentBounds(ptA, ptB, bounds)) {
+            for (let i = 1; i < points.length; i++) {
+                if (
+                    intersectLineSegmentLineSegment(
+                        points[i - 1],
+                        points[i],
+                        ptA,
+                        ptB
+                    ).didIntersect
+                ) {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    };
+
+    override hitTestBounds = (shape: T, bounds: TLBounds) => {
+        // Test axis-aligned shape
+        if (!shape.rotation) {
+            const shapeBounds = this.getBounds(shape);
+
+            return (
+                Utils.boundsContain(bounds, shapeBounds) ||
+                ((Utils.boundsContain(shapeBounds, bounds) ||
+                    intersectBoundsBounds(shapeBounds, bounds).length > 0) &&
+                    intersectBoundsPolyline(
+                        Utils.translateBounds(bounds, Vec.neg(shape.point)),
+                        shape.points
+                    ).length > 0)
+            );
+        }
+
+        // Test rotated shape
+        const rBounds = this.getRotatedBounds(shape);
+
+        const rotatedBounds = Utils.getFromCache(
+            this.rotatedCache,
+            shape,
+            () => {
+                const c = Utils.getBoundsCenter(
+                    Utils.getBoundsFromPoints(shape.points)
+                );
+                return shape.points.map(pt =>
+                    Vec.rotWith(pt, c, shape.rotation || 0)
+                );
+            }
+        );
+
+        return (
+            Utils.boundsContain(bounds, rBounds) ||
+            intersectBoundsPolyline(
+                Utils.translateBounds(bounds, Vec.neg(shape.point)),
+                rotatedBounds
+            ).length > 0
+        );
+    };
+}
diff --git a/libs/components/board-shapes/src/draw-util/draw-helpers.ts b/libs/components/board-shapes/src/draw-util/draw-helpers.ts
new file mode 100644
index 000000000..58a59db02
--- /dev/null
+++ b/libs/components/board-shapes/src/draw-util/draw-helpers.ts
@@ -0,0 +1,81 @@
+import { Utils } from '@tldraw/core';
+import Vec from '@tldraw/vec';
+import {
+    getStrokeOutlinePoints,
+    getStrokePoints,
+    StrokeOptions,
+} from 'perfect-freehand';
+import type { DrawShape } from '@toeverything/components/board-types';
+import { getShapeStyle } from '../shared/shape-styles';
+
+const simulatePressureSettings: StrokeOptions = {
+    easing: t => Math.sin((t * Math.PI) / 2),
+    simulatePressure: true,
+};
+
+const realPressureSettings: StrokeOptions = {
+    easing: t => t * t,
+    simulatePressure: false,
+};
+
+export function getFreehandOptions(shape: DrawShape) {
+    const styles = getShapeStyle(shape.style);
+
+    const options: StrokeOptions = {
+        size: 1 + styles.strokeWidth * 1.5,
+        thinning: 0.65,
+        streamline: 0.65,
+        smoothing: 0.65,
+        ...(shape.points[1][2] === 0.5
+            ? simulatePressureSettings
+            : realPressureSettings),
+        last: shape.isComplete,
+    };
+
+    return options;
+}
+
+export function getFillPath(shape: DrawShape) {
+    if (shape.points.length < 2) return '';
+
+    return Utils.getSvgPathFromStroke(
+        getStrokePoints(shape.points, getFreehandOptions(shape)).map(
+            pt => pt.point
+        )
+    );
+}
+
+export function getDrawStrokePoints(shape: DrawShape, options: StrokeOptions) {
+    return getStrokePoints(shape.points, options);
+}
+
+/**
+ * Get path data for a stroke with the DashStyle.Draw dash style.
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function getDrawStrokePathTDSnapshot(shape: DrawShape) {
+    if (shape.points.length < 2) return '';
+    const options = getFreehandOptions(shape);
+    const strokePoints = getDrawStrokePoints(shape, options);
+    const path = Utils.getSvgPathFromStroke(
+        getStrokeOutlinePoints(strokePoints, options)
+    );
+    return path;
+}
+
+/**
+ * Get SVG path data for a shape that has a DashStyle other than DashStyles.Draw.
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function getSolidStrokePathTDSnapshot(shape: DrawShape) {
+    const { points } = shape;
+    if (points.length < 2) return 'M 0 0 L 0 0';
+    const options = getFreehandOptions(shape);
+    const strokePoints = getDrawStrokePoints(shape, options).map(pt =>
+        pt.point.slice(0, 2)
+    );
+    const last = points[points.length - 1].slice(0, 2);
+    if (!Vec.isEqual(strokePoints[0], last)) strokePoints.push(last);
+    const path = Utils.getSvgPathFromStroke(strokePoints, false);
+    return path;
+}
diff --git a/libs/components/board-shapes/src/draw-util/index.ts b/libs/components/board-shapes/src/draw-util/index.ts
new file mode 100644
index 000000000..f41fc7b42
--- /dev/null
+++ b/libs/components/board-shapes/src/draw-util/index.ts
@@ -0,0 +1 @@
+export * from './DrawUtil';
diff --git a/libs/components/board-shapes/src/editor-util/EditorUtil.tsx b/libs/components/board-shapes/src/editor-util/EditorUtil.tsx
new file mode 100644
index 000000000..5d5d15c1a
--- /dev/null
+++ b/libs/components/board-shapes/src/editor-util/EditorUtil.tsx
@@ -0,0 +1,267 @@
+/* eslint-disable no-restricted-syntax */
+import { useRef, useCallback, useEffect, memo } from 'react';
+import type { SyntheticEvent } from 'react';
+import { Utils, HTMLContainer, TLBounds } from '@tldraw/core';
+import {
+    EditorShape,
+    TDMeta,
+    TDShapeType,
+    TransformInfo,
+} from '@toeverything/components/board-types';
+import {
+    defaultTextStyle,
+    getBoundsRectangle,
+    getTextSvgElement,
+} from '../shared';
+import { TDShapeUtil } from '../TDShapeUtil';
+import { getShapeStyle } from '../shared/shape-styles';
+import { styled } from '@toeverything/components/ui';
+import { Vec } from '@tldraw/vec';
+import { AffineEditor } from '@toeverything/components/affine-editor';
+import { MIN_PAGE_WIDTH } from '@toeverything/components/editor-core';
+const MemoAffineEditor = memo(AffineEditor, (prev, next) => {
+    return (
+        prev.workspace === next.workspace &&
+        prev.rootBlockId === next.rootBlockId
+    );
+});
+
+type T = EditorShape;
+type E = HTMLDivElement;
+
+export class EditorUtil extends TDShapeUtil<T, E> {
+    type = TDShapeType.Editor as const;
+
+    override canBind = true;
+
+    override canEdit = true;
+
+    override canClone = true;
+
+    override showCloneHandles = true;
+    /**
+     * Prevent editor from being destroyed when moving out of viewport
+     */
+    override isStateful = true;
+
+    getShape = (props: Partial<T>): T => {
+        return Utils.deepMerge<T>(
+            {
+                id: props.id,
+                type: TDShapeType.Editor,
+                name: 'Editor',
+                parentId: 'page',
+                childIndex: 1,
+                point: [0, 0],
+                size: [MIN_PAGE_WIDTH, 200],
+                rotation: 0,
+                style: defaultTextStyle,
+                rootBlockId: props.rootBlockId,
+                workspace: props.workspace,
+            },
+            props
+        );
+    };
+
+    Component = TDShapeUtil.Component<T, E, TDMeta>(
+        (
+            {
+                shape,
+                meta: {
+                    app: { useStore },
+                },
+                events,
+                isEditing,
+                onShapeChange,
+            },
+            ref
+        ) => {
+            const containerRef = useRef<HTMLDivElement>();
+            const {
+                workspace,
+                rootBlockId,
+                size: [width, height],
+            } = shape;
+
+            const state = useStore();
+            const { currentPageId } = state.appState;
+            const { editingId } = state.document.pageStates[currentPageId];
+            const { shapes } = state.document.pages[currentPageId];
+            const editingText =
+                editingId != null &&
+                shapes[editingId].type === TDShapeType.Editor;
+
+            const zoomLevel =
+                state.document.pageStates[state.appState.currentPageId].camera
+                    .zoom;
+
+            // TODO: useEvent
+            const onResize = useRef((_: ResizeObserverEntry[]) => {});
+
+            useEffect(() => {
+                onResize.current = e => {
+                    const first = e[0];
+                    const bounds = first.contentRect;
+                    const realHeight = bounds.height / zoomLevel;
+                    if (
+                        bounds.height !== 0 &&
+                        Math.abs(realHeight - height) > 1
+                    ) {
+                        onShapeChange({
+                            id: shape.id,
+                            size: [width, realHeight],
+                        });
+                    }
+                };
+            }, [height, onShapeChange, shape.id, width, zoomLevel]);
+
+            useEffect(() => {
+                if (containerRef.current) {
+                    const obv = new ResizeObserver(e => onResize.current(e));
+
+                    obv.observe(containerRef.current);
+
+                    return () => obv.disconnect();
+                }
+            }, [onShapeChange]);
+
+            const stopPropagation = useCallback(
+                (e: SyntheticEvent) => {
+                    if (isEditing) {
+                        e.stopPropagation();
+                    }
+                },
+                [isEditing]
+            );
+
+            return (
+                <HTMLContainer ref={ref} {...events}>
+                    <Container
+                        ref={containerRef}
+                        onPointerDown={stopPropagation}
+                    >
+                        <MemoAffineEditor
+                            workspace={workspace}
+                            rootBlockId={rootBlockId}
+                            scrollBlank={false}
+                            isWhiteboard
+                        />
+                        {editingText ? null : <Mask />}
+                    </Container>
+                </HTMLContainer>
+            );
+        }
+    );
+
+    Indicator = TDShapeUtil.Indicator<T>(({ shape }) => {
+        const {
+            size: [width, height],
+        } = shape;
+
+        return (
+            <rect
+                x={0}
+                y={0}
+                rx={3}
+                ry={3}
+                width={Math.max(1, width)}
+                height={Math.max(1, height)}
+            />
+        );
+    });
+
+    getBounds = (shape: T) => {
+        return getBoundsRectangle(shape, this.boundsCache);
+    };
+
+    override shouldRender = (prev: T, next: T) => {
+        return (
+            next.size !== prev.size ||
+            next.style !== prev.style ||
+            next.rootBlockId !== prev.rootBlockId ||
+            next.workspace !== prev.workspace
+        );
+    };
+
+    override transform = (
+        shape: T,
+        bounds: TLBounds,
+        { scaleX, scaleY, transformOrigin }: TransformInfo<T>
+    ): Partial<T> => {
+        const point = Vec.toFixed([
+            bounds.minX +
+                (bounds.width - shape.size[0]) *
+                    (scaleX < 0 ? 1 - transformOrigin[0] : transformOrigin[0]),
+            bounds.minY +
+                (bounds.height - shape.size[1]) *
+                    (scaleY < 0 ? 1 - transformOrigin[1] : transformOrigin[1]),
+        ]);
+
+        return {
+            point,
+        };
+    };
+
+    override transformSingle = (shape: T, bounds: TLBounds): Partial<T> => {
+        return {
+            size: Vec.toFixed([
+                bounds.width > MIN_PAGE_WIDTH ? MIN_PAGE_WIDTH : bounds.width,
+                shape.size[1],
+            ]),
+        };
+    };
+
+    override getSvgElement = (
+        shape: T,
+        isDarkMode: boolean
+    ): SVGElement | void => {
+        const bounds = this.getBounds(shape);
+        const textBounds = Utils.expandBounds(bounds, -PADDING);
+        const textElm = getTextSvgElement(
+            'This feature is currently not supported',
+            shape.style,
+            textBounds
+        );
+        const style = getShapeStyle(shape.style, isDarkMode);
+        textElm.setAttribute('fill', style.fill);
+        textElm.setAttribute('transform', `translate(${PADDING}, ${PADDING})`);
+
+        const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        const rect = document.createElementNS(
+            'http://www.w3.org/2000/svg',
+            'rect'
+        );
+        rect.setAttribute('width', bounds.width + '');
+        rect.setAttribute('height', bounds.height + '');
+        rect.setAttribute('fill', style.fill);
+        rect.setAttribute('rx', '3');
+        rect.setAttribute('ry', '3');
+
+        g.appendChild(rect);
+        g.appendChild(textElm);
+
+        return g;
+    };
+}
+
+/* -------------------------------------------------- */
+/*                       Helpers                      */
+/* -------------------------------------------------- */
+
+const PADDING = 16;
+// const MIN_CONTAINER_HEIGHT = 200;
+
+const Container = styled('div')({
+    pointerEvents: 'all',
+    position: 'relative',
+    width: '100%',
+});
+
+const Mask = styled('div')({
+    position: 'absolute',
+    userSelect: 'none',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+});
diff --git a/libs/components/board-shapes/src/editor-util/index.ts b/libs/components/board-shapes/src/editor-util/index.ts
new file mode 100644
index 000000000..bd16c33ed
--- /dev/null
+++ b/libs/components/board-shapes/src/editor-util/index.ts
@@ -0,0 +1 @@
+export { EditorUtil } from './EditorUtil';
diff --git a/libs/components/board-shapes/src/ellipse-util/EllipseUtil.tsx b/libs/components/board-shapes/src/ellipse-util/EllipseUtil.tsx
new file mode 100644
index 000000000..4cbd2cd89
--- /dev/null
+++ b/libs/components/board-shapes/src/ellipse-util/EllipseUtil.tsx
@@ -0,0 +1,363 @@
+import * as React from 'react';
+import { Utils, SVGContainer, TLBounds } from '@tldraw/core';
+import { Vec } from '@tldraw/vec';
+import {
+    defaultStyle,
+    getShapeStyle,
+    getFontStyle,
+    TextLabel,
+} from '../shared';
+import {
+    EllipseShape,
+    DashStyle,
+    TDShapeType,
+    TDShape,
+    TransformInfo,
+    TDMeta,
+    GHOSTED_OPACITY,
+    LABEL_POINT,
+} from '@toeverything/components/board-types';
+import { TDShapeUtil } from '../TDShapeUtil';
+import {
+    intersectEllipseBounds,
+    intersectLineSegmentEllipse,
+    intersectRayEllipse,
+} from '@tldraw/intersect';
+import { getEllipseIndicatorPath } from './ellipse-helpers';
+import { DrawEllipse } from './components/DrawEllipse';
+import { DashedEllipse } from './components/DashedEllipse';
+import { styled } from '@toeverything/components/ui';
+
+type T = EllipseShape;
+type E = HTMLDivElement;
+type M = TDMeta;
+
+export class EllipseUtil extends TDShapeUtil<T, E> {
+    type = TDShapeType.Ellipse as const;
+
+    override canBind = true;
+
+    override canClone = true;
+
+    override canEdit = true;
+
+    getShape = (props: Partial<T>): T => {
+        return Utils.deepMerge<T>(
+            {
+                id: 'id',
+                type: TDShapeType.Ellipse,
+                name: 'Ellipse',
+                parentId: 'page',
+                childIndex: 1,
+                point: [0, 0],
+                radius: [1, 1],
+                rotation: 0,
+                style: defaultStyle,
+                label: '',
+                labelPoint: [0.5, 0.5],
+                workspace: props.workspace,
+            },
+            props
+        );
+    };
+
+    Component = TDShapeUtil.Component<T, E, TDMeta>(
+        (
+            {
+                shape,
+                isGhost,
+                isSelected,
+                isBinding,
+                isEditing,
+                meta,
+                bounds,
+                events,
+                onShapeChange,
+                onShapeBlur,
+            },
+            ref
+        ) => {
+            const {
+                id,
+                radius,
+                style,
+                label = '',
+                labelPoint = LABEL_POINT,
+            } = shape;
+            const font = getFontStyle(shape.style);
+            const styles = getShapeStyle(style, meta.isDarkMode);
+            const strokeWidth = styles.strokeWidth;
+            const sw = 1 + strokeWidth * 1.618;
+            const rx = Math.max(0, radius[0] - sw / 2);
+            const ry = Math.max(0, radius[1] - sw / 2);
+            const Component =
+                style.dash === DashStyle.Draw ? DrawEllipse : DashedEllipse;
+            const handleLabelChange = React.useCallback(
+                (label: string) => onShapeChange?.({ id, label }),
+                [onShapeChange]
+            );
+            return (
+                <FullWrapper ref={ref} {...events}>
+                    <TextLabel
+                        isEditing={isEditing}
+                        onChange={handleLabelChange}
+                        onBlur={onShapeBlur}
+                        font={font}
+                        text={label}
+                        color={styles.stroke}
+                        offsetX={(labelPoint[0] - 0.5) * bounds.width}
+                        offsetY={(labelPoint[1] - 0.5) * bounds.height}
+                    />
+                    <SVGContainer
+                        id={shape.id + '_svg'}
+                        opacity={isGhost ? GHOSTED_OPACITY : 1}
+                    >
+                        {isBinding && (
+                            <ellipse
+                                className="tl-binding-indicator"
+                                cx={radius[0]}
+                                cy={radius[1]}
+                                rx={rx}
+                                ry={ry}
+                                strokeWidth={this.bindingDistance}
+                            />
+                        )}
+                        <Component
+                            id={id}
+                            radius={radius}
+                            style={style}
+                            isSelected={isSelected}
+                            isDarkMode={meta.isDarkMode}
+                        />
+                    </SVGContainer>
+                </FullWrapper>
+            );
+        }
+    );
+
+    Indicator = TDShapeUtil.Indicator<T, M>(({ shape }) => {
+        const { id, radius, style } = shape;
+        const styles = getShapeStyle(style);
+        const strokeWidth = styles.strokeWidth;
+        const sw = 1 + strokeWidth * 1.618;
+        const rx = Math.max(0, radius[0] - sw / 2);
+        const ry = Math.max(0, radius[1] - sw / 2);
+        return style.dash === DashStyle.Draw ? (
+            <path d={getEllipseIndicatorPath(id, radius, style)} />
+        ) : (
+            <ellipse cx={radius[0]} cy={radius[1]} rx={rx} ry={ry} />
+        );
+    });
+
+    override hitTestPoint = (shape: T, point: number[]): boolean => {
+        return (
+            Utils.pointInBounds(point, this.getRotatedBounds(shape)) &&
+            Utils.pointInEllipse(
+                point,
+                this.getCenter(shape),
+                shape.radius[0],
+                shape.radius[1],
+                shape.rotation || 0
+            )
+        );
+    };
+
+    override hitTestLineSegment = (
+        shape: T,
+        A: number[],
+        B: number[]
+    ): boolean => {
+        return intersectLineSegmentEllipse(
+            A,
+            B,
+            this.getCenter(shape),
+            shape.radius[0],
+            shape.radius[1],
+            shape.rotation || 0
+        ).didIntersect;
+    };
+
+    getBounds = (shape: T) => {
+        return Utils.getFromCache(this.boundsCache, shape, () => {
+            return Utils.getRotatedEllipseBounds(
+                shape.point[0],
+                shape.point[1],
+                shape.radius[0],
+                shape.radius[1],
+                0
+            );
+        });
+    };
+
+    override getRotatedBounds = (shape: T): TLBounds => {
+        return Utils.getRotatedEllipseBounds(
+            shape.point[0],
+            shape.point[1],
+            shape.radius[0],
+            shape.radius[1],
+            shape.rotation
+        );
+    };
+
+    override hitTestBounds = (shape: T, bounds: TLBounds): boolean => {
+        const shapeBounds = this.getBounds(shape);
+
+        return (
+            Utils.boundsContained(shapeBounds, bounds) ||
+            intersectEllipseBounds(
+                this.getCenter(shape),
+                shape.radius[0],
+                shape.radius[1],
+                shape.rotation || 0,
+                bounds
+            ).length > 0
+        );
+    };
+
+    override shouldRender = (prev: T, next: T): boolean => {
+        return (
+            next.radius !== prev.radius ||
+            next.style !== prev.style ||
+            next.label !== prev.label
+        );
+    };
+
+    override getCenter = (shape: T): number[] => {
+        return Vec.add(shape.point, shape.radius);
+    };
+
+    override getBindingPoint = <K extends TDShape>(
+        shape: T,
+        fromShape: K,
+        point: number[],
+        origin: number[],
+        direction: number[],
+        bindAnywhere: boolean
+    ) => {
+        const expandedBounds = this.getExpandedBounds(shape);
+        const center = this.getCenter(shape);
+        let bindingPoint: number[];
+        let distance: number;
+        if (
+            !Utils.pointInEllipse(
+                point,
+                center,
+                shape.radius[0] + this.bindingDistance,
+                shape.radius[1] + this.bindingDistance
+            )
+        ) {
+            return;
+        }
+        if (bindAnywhere) {
+            if (Vec.dist(point, this.getCenter(shape)) < 12) {
+                bindingPoint = [0.5, 0.5];
+            } else {
+                bindingPoint = Vec.divV(
+                    Vec.sub(point, [expandedBounds.minX, expandedBounds.minY]),
+                    [expandedBounds.width, expandedBounds.height]
+                );
+            }
+            distance = 0;
+        } else {
+            let intersection = intersectRayEllipse(
+                origin,
+                direction,
+                center,
+                shape.radius[0],
+                shape.radius[1],
+                shape.rotation || 0
+            ).points.sort(
+                (a, b) => Vec.dist(a, origin) - Vec.dist(b, origin)
+            )[0];
+            if (!intersection) {
+                intersection = intersectLineSegmentEllipse(
+                    point,
+                    center,
+                    center,
+                    shape.radius[0],
+                    shape.radius[1],
+                    shape.rotation || 0
+                ).points.sort(
+                    (a, b) => Vec.dist(a, point) - Vec.dist(b, point)
+                )[0];
+            }
+            if (!intersection) {
+                return undefined;
+            }
+            // The anchor is a point between the handle and the intersection
+            const anchor = Vec.med(point, intersection);
+            if (
+                Vec.distanceToLineSegment(
+                    point,
+                    anchor,
+                    this.getCenter(shape)
+                ) < 12
+            ) {
+                // If we're close to the center, snap to the center
+                bindingPoint = [0.5, 0.5];
+            } else {
+                // Or else calculate a normalized point
+                bindingPoint = Vec.divV(
+                    Vec.sub(anchor, [expandedBounds.minX, expandedBounds.minY]),
+                    [expandedBounds.width, expandedBounds.height]
+                );
+            }
+            if (
+                Utils.pointInEllipse(
+                    point,
+                    center,
+                    shape.radius[0],
+                    shape.radius[1],
+                    shape.rotation || 0
+                )
+            ) {
+                // Pad the arrow out by 16 points
+                distance = this.bindingDistance / 2;
+            } else {
+                // Find the distance between the point and the ellipse
+                const innerIntersection = intersectLineSegmentEllipse(
+                    point,
+                    center,
+                    center,
+                    shape.radius[0],
+                    shape.radius[1],
+                    shape.rotation || 0
+                ).points[0];
+                if (!innerIntersection) return undefined;
+                distance = Math.max(
+                    this.bindingDistance / 2,
+                    Vec.dist(point, innerIntersection)
+                );
+            }
+        }
+        return {
+            point: bindingPoint,
+            distance,
+        };
+    };
+
+    override transform = (
+        shape: T,
+        bounds: TLBounds,
+        { scaleX, scaleY, initialShape }: TransformInfo<T>
+    ): Partial<T> => {
+        const { rotation = 0 } = initialShape;
+        return {
+            point: [bounds.minX, bounds.minY],
+            radius: [bounds.width / 2, bounds.height / 2],
+            rotation:
+                (scaleX < 0 && scaleY >= 0) || (scaleY < 0 && scaleX >= 0)
+                    ? -(rotation || 0)
+                    : rotation || 0,
+        };
+    };
+
+    override transformSingle = (shape: T, bounds: TLBounds): Partial<T> => {
+        return {
+            point: Vec.toFixed([bounds.minX, bounds.minY]),
+            radius: Vec.div([bounds.width, bounds.height], 2),
+        };
+    };
+}
+
+const FullWrapper = styled('div')({ width: '100%', height: '100%' });
diff --git a/libs/components/board-shapes/src/ellipse-util/components/DashedEllipse.tsx b/libs/components/board-shapes/src/ellipse-util/components/DashedEllipse.tsx
new file mode 100644
index 000000000..23dbaf524
--- /dev/null
+++ b/libs/components/board-shapes/src/ellipse-util/components/DashedEllipse.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Utils } from '@tldraw/core';
+import type { ShapeStyles } from '@toeverything/components/board-types';
+import { getShapeStyle } from '../../shared';
+
+interface EllipseSvgProps {
+    radius: number[];
+    style: ShapeStyles;
+    isSelected: boolean;
+    isDarkMode: boolean;
+}
+
+export const DashedEllipse = React.memo(function DashedEllipse({
+    radius,
+    style,
+    isSelected,
+    isDarkMode,
+}: EllipseSvgProps) {
+    const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode);
+    const sw = 1 + strokeWidth * 1.618;
+    const rx = Math.max(0, radius[0] - sw / 2);
+    const ry = Math.max(0, radius[1] - sw / 2);
+    const perimeter = Utils.perimeterOfEllipse(rx, ry);
+    const { strokeDasharray, strokeDashoffset } = Utils.getPerfectDashProps(
+        perimeter < 64 ? perimeter * 2 : perimeter,
+        strokeWidth * 1.618,
+        style.dash,
+        4
+    );
+
+    return (
+        <>
+            <ellipse
+                className={
+                    style.isFilled || isSelected
+                        ? 'tl-fill-hitarea'
+                        : 'tl-stroke-hitarea'
+                }
+                cx={radius[0]}
+                cy={radius[1]}
+                rx={radius[0]}
+                ry={radius[1]}
+            />
+            <ellipse
+                cx={radius[0]}
+                cy={radius[1]}
+                rx={rx}
+                ry={ry}
+                fill={fill}
+                stroke={stroke}
+                strokeWidth={sw}
+                strokeDasharray={strokeDasharray}
+                strokeDashoffset={strokeDashoffset}
+                pointerEvents="none"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </>
+    );
+});
diff --git a/libs/components/board-shapes/src/ellipse-util/components/DrawEllipse.tsx b/libs/components/board-shapes/src/ellipse-util/components/DrawEllipse.tsx
new file mode 100644
index 000000000..e76867951
--- /dev/null
+++ b/libs/components/board-shapes/src/ellipse-util/components/DrawEllipse.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { getShapeStyle } from '../../shared';
+import type { ShapeStyles } from '@toeverything/components/board-types';
+import { getEllipseIndicatorPath, getEllipsePath } from '../ellipse-helpers';
+
+interface EllipseSvgProps {
+    id: string;
+    radius: number[];
+    style: ShapeStyles;
+    isSelected: boolean;
+    isDarkMode: boolean;
+}
+
+export const DrawEllipse = React.memo(function DrawEllipse({
+    id,
+    radius,
+    style,
+    isSelected,
+    isDarkMode,
+}: EllipseSvgProps) {
+    const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode);
+    const innerPath = getEllipsePath(id, radius, style);
+
+    return (
+        <>
+            <ellipse
+                className={
+                    style.isFilled || isSelected
+                        ? 'tl-fill-hitarea'
+                        : 'tl-stroke-hitarea'
+                }
+                cx={radius[0]}
+                cy={radius[1]}
+                rx={radius[0]}
+                ry={radius[1]}
+            />
+            {style.isFilled && (
+                <path
+                    d={getEllipseIndicatorPath(id, radius, style)}
+                    stroke="none"
+                    fill={fill}
+                    pointerEvents="none"
+                />
+            )}
+            <path
+                d={innerPath}
+                fill={stroke}
+                stroke={stroke}
+                strokeWidth={strokeWidth}
+                pointerEvents="none"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </>
+    );
+});
diff --git a/libs/components/board-shapes/src/ellipse-util/ellipse-helpers.ts b/libs/components/board-shapes/src/ellipse-util/ellipse-helpers.ts
new file mode 100644
index 000000000..be85174b2
--- /dev/null
+++ b/libs/components/board-shapes/src/ellipse-util/ellipse-helpers.ts
@@ -0,0 +1,75 @@
+import { Utils } from '@tldraw/core';
+import { getStrokeOutlinePoints, getStrokePoints } from 'perfect-freehand';
+import { EASINGS } from '@toeverything/components/board-types';
+import type { ShapeStyles } from '@toeverything/components/board-types';
+import { getShapeStyle } from '../shared/shape-styles';
+
+export function getEllipseStrokePoints(
+    id: string,
+    radius: number[],
+    style: ShapeStyles
+) {
+    const { strokeWidth } = getShapeStyle(style);
+    const getRandom = Utils.rng(id);
+    const rx = radius[0] + getRandom() * strokeWidth * 2;
+    const ry = radius[1] + getRandom() * strokeWidth * 2;
+    const perimeter = Utils.perimeterOfEllipse(rx, ry);
+    const points: number[][] = [];
+    const start = Math.PI + Math.PI * getRandom();
+    const extra = Math.abs(getRandom());
+    const count = Math.max(16, perimeter / 10);
+    for (let i = 0; i < count; i++) {
+        const t = EASINGS.easeInOutSine(i / (count + 1));
+        const rads = start * 2 + Math.PI * (2 + extra) * t;
+        const c = Math.cos(rads);
+        const s = Math.sin(rads);
+        points.push([
+            rx * c + radius[0],
+            ry * s + radius[1],
+            t + 0.5 + getRandom() / 2,
+        ]);
+    }
+    return getStrokePoints(points, {
+        size: 1 + strokeWidth * 2,
+        thinning: 0.618,
+        end: { taper: perimeter / 8 },
+        start: { taper: perimeter / 12 },
+        streamline: 0,
+        simulatePressure: true,
+    });
+}
+
+export function getEllipsePath(
+    id: string,
+    radius: number[],
+    style: ShapeStyles
+) {
+    const { strokeWidth } = getShapeStyle(style);
+    const getRandom = Utils.rng(id);
+    const rx = radius[0] + getRandom() * strokeWidth * 2;
+    const ry = radius[1] + getRandom() * strokeWidth * 2;
+    const perimeter = Utils.perimeterOfEllipse(rx, ry);
+    return Utils.getSvgPathFromStroke(
+        getStrokeOutlinePoints(getEllipseStrokePoints(id, radius, style), {
+            size: 2 + strokeWidth * 2,
+            thinning: 0.618,
+            end: { taper: perimeter / 8 },
+            start: { taper: perimeter / 12 },
+            streamline: 0,
+            simulatePressure: true,
+        })
+    );
+}
+
+export function getEllipseIndicatorPath(
+    id: string,
+    radius: number[],
+    style: ShapeStyles
+) {
+    return Utils.getSvgPathFromStroke(
+        getEllipseStrokePoints(id, radius, style).map(pt =>
+            pt.point.slice(0, 2)
+        ),
+        false
+    );
+}
diff --git a/libs/components/board-shapes/src/ellipse-util/index.ts b/libs/components/board-shapes/src/ellipse-util/index.ts
new file mode 100644
index 000000000..d13d1a8e4
--- /dev/null
+++ b/libs/components/board-shapes/src/ellipse-util/index.ts
@@ -0,0 +1 @@
+export * from './EllipseUtil';
diff --git a/libs/components/board-shapes/src/frame-util/components/draw-frame.tsx b/libs/components/board-shapes/src/frame-util/components/draw-frame.tsx
new file mode 100644
index 000000000..4074f76b1
--- /dev/null
+++ b/libs/components/board-shapes/src/frame-util/components/draw-frame.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { BINDING_DISTANCE } from '@toeverything/components/board-types';
+import type { ShapeStyles } from '@toeverything/components/board-types';
+import { getShapeStyle } from '../../shared';
+
+interface RectangleSvgProps {
+    id: string;
+    style: ShapeStyles;
+    isSelected: boolean;
+    size: number[];
+    isDarkMode: boolean;
+}
+
+export const DrawFrame = React.memo(function DashedRectangle({
+    id,
+    style,
+    size,
+    isSelected,
+    isDarkMode,
+}: RectangleSvgProps) {
+    const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode);
+
+    const sw = 1 + strokeWidth * 1.618;
+
+    const w = Math.max(0, size[0] - sw / 2);
+    const h = Math.max(0, size[1] - sw / 2);
+
+    return (
+        <rect
+            className={
+                isSelected || style.isFilled
+                    ? 'tl-fill-hitarea'
+                    : 'tl-stroke-hitarea'
+            }
+            x={sw / 2}
+            y={sw / 2}
+            width={w}
+            height={h}
+            strokeWidth={BINDING_DISTANCE}
+        />
+    );
+});
diff --git a/libs/components/board-shapes/src/frame-util/components/frame-binding-indicator.tsx b/libs/components/board-shapes/src/frame-util/components/frame-binding-indicator.tsx
new file mode 100644
index 000000000..3fab0bfd7
--- /dev/null
+++ b/libs/components/board-shapes/src/frame-util/components/frame-binding-indicator.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { BINDING_DISTANCE } from '@toeverything/components/board-types';
+
+interface BindingIndicatorProps {
+    strokeWidth: number;
+    size: number[];
+}
+export function BindingIndicator({ strokeWidth, size }: BindingIndicatorProps) {
+    return (
+        <rect
+            className="tl-binding-indicator"
+            x={strokeWidth}
+            y={strokeWidth}
+            width={Math.max(0, size[0] - strokeWidth / 2)}
+            height={Math.max(0, size[1] - strokeWidth / 2)}
+            strokeWidth={BINDING_DISTANCE * 2}
+        />
+    );
+}
diff --git a/libs/components/board-shapes/src/frame-util/frame-util.tsx b/libs/components/board-shapes/src/frame-util/frame-util.tsx
new file mode 100644
index 000000000..f8db4d09f
--- /dev/null
+++ b/libs/components/board-shapes/src/frame-util/frame-util.tsx
@@ -0,0 +1,147 @@
+import * as React from 'react';
+import { Utils, SVGContainer } from '@tldraw/core';
+import {
+    FrameShape,
+    DashStyle,
+    TDShapeType,
+    TDMeta,
+    GHOSTED_OPACITY,
+    LABEL_POINT,
+} from '@toeverything/components/board-types';
+import { TDShapeUtil } from '../TDShapeUtil';
+import {
+    defaultStyle,
+    getShapeStyle,
+    getBoundsRectangle,
+    transformRectangle,
+    getFontStyle,
+    transformSingleRectangle,
+} from '../shared';
+import { DrawFrame } from './components/draw-frame';
+import { styled } from '@toeverything/components/ui';
+
+type T = FrameShape;
+type E = HTMLDivElement;
+
+export class FrameUtil extends TDShapeUtil<T, E> {
+    type = TDShapeType.Frame as const;
+
+    override canBind = true;
+
+    override canClone = true;
+
+    override canEdit = true;
+
+    getShape = (props: Partial<T>): T => {
+        return Utils.deepMerge<T>(
+            {
+                id: 'id',
+                type: TDShapeType.Frame,
+                name: 'Frame',
+                parentId: 'page',
+                childIndex: 0,
+                point: [0, 0],
+                size: [1, 1],
+                rotation: 0,
+                style: defaultStyle,
+                label: '',
+                labelPoint: [0.5, 0.5],
+                workspace: props.workspace,
+            },
+            props
+        );
+    };
+
+    Component = TDShapeUtil.Component<T, E, TDMeta>(
+        (
+            {
+                shape,
+                isEditing,
+                isBinding,
+                isSelected,
+                isGhost,
+                meta,
+                bounds,
+                events,
+                onShapeBlur,
+                onShapeChange,
+            },
+            ref
+        ) => {
+            const { id, size, style } = shape;
+            return (
+                <FullWrapper ref={ref} {...events}>
+                    <SVGContainer
+                        id={shape.id + '_svg'}
+                        opacity={1}
+                        fill={'#fff'}
+                    >
+                        <DrawFrame
+                            id={id}
+                            style={style}
+                            size={size}
+                            isSelected={isSelected}
+                            isDarkMode={meta.isDarkMode}
+                        />
+                    </SVGContainer>
+                </FullWrapper>
+            );
+        }
+    );
+
+    Indicator = TDShapeUtil.Indicator<T>(({ shape }) => {
+        const { id, style, size } = shape;
+
+        const styles = getShapeStyle(style, false);
+        const sw = styles.strokeWidth;
+        return (
+            <rect
+                x={sw}
+                y={sw}
+                rx={1}
+                ry={1}
+                width={Math.max(1, size[0] - sw * 2)}
+                height={Math.max(1, size[1] - sw * 2)}
+            />
+        );
+    });
+
+    getBounds = (shape: T) => {
+        return getBoundsRectangle(shape, this.boundsCache);
+    };
+
+    override shouldRender = (prev: T, next: T) => {
+        return (
+            next.size !== prev.size ||
+            next.style !== prev.style ||
+            next.label !== prev.label
+        );
+    };
+
+    override transform = transformRectangle;
+
+    override transformSingle = transformSingleRectangle;
+
+    override hitTestPoint = (shape: T, point: number[]): boolean => {
+        return false;
+    };
+
+    override hitTestLineSegment = (
+        shape: T,
+        A: number[],
+        B: number[]
+    ): boolean => {
+        return false;
+    };
+}
+
+const FullWrapper = styled('div')({
+    width: '100%',
+    height: '100%',
+    '.tl-fill-hitarea': {
+        fill: '#F7F9FF',
+    },
+    '.tl-stroke-hitarea': {
+        fill: '#F7F9FF',
+    },
+});
diff --git a/libs/components/board-shapes/src/frame-util/index.ts b/libs/components/board-shapes/src/frame-util/index.ts
new file mode 100644
index 000000000..bda0014cd
--- /dev/null
+++ b/libs/components/board-shapes/src/frame-util/index.ts
@@ -0,0 +1 @@
+export * from './frame-util';
diff --git a/libs/components/board-shapes/src/group-util/group-util.tsx b/libs/components/board-shapes/src/group-util/group-util.tsx
new file mode 100644
index 000000000..f19792d34
--- /dev/null
+++ b/libs/components/board-shapes/src/group-util/group-util.tsx
@@ -0,0 +1,144 @@
+import * as React from 'react';
+import { styled } from '@toeverything/components/ui';
+import { Utils, SVGContainer } from '@tldraw/core';
+import { defaultStyle } from '../shared/shape-styles';
+import {
+    TDShapeType,
+    GroupShape,
+    TDMeta,
+    GHOSTED_OPACITY,
+} from '@toeverything/components/board-types';
+import { TDShapeUtil } from '../TDShapeUtil';
+import { getBoundsRectangle, commonColors } from '../shared';
+
+type T = GroupShape;
+type E = SVGSVGElement;
+
+export class GroupUtil extends TDShapeUtil<T, E> {
+    type = TDShapeType.Group as const;
+
+    override canBind = true;
+
+    getShape = (props: Partial<T>): T => {
+        return Utils.deepMerge<T>(
+            {
+                id: 'id',
+                type: TDShapeType.Group,
+                name: 'Group',
+                parentId: 'page',
+                childIndex: 1,
+                point: [0, 0],
+                size: [100, 100],
+                rotation: 0,
+                children: [],
+                style: defaultStyle,
+                workspace: props.workspace,
+            },
+            props
+        );
+    };
+
+    Component = TDShapeUtil.Component<T, E, TDMeta>(
+        ({ shape, isBinding, isGhost, isHovered, isSelected, events }, ref) => {
+            const { id, size } = shape;
+
+            const sw = 2;
+            const w = Math.max(0, size[0] - sw / 2);
+            const h = Math.max(0, size[1] - sw / 2);
+
+            const strokes: [number[], number[], number][] = [
+                [[sw / 2, sw / 2], [w, sw / 2], w - sw / 2],
+                [[w, sw / 2], [w, h], h - sw / 2],
+                [[w, h], [sw / 2, h], w - sw / 2],
+                [[sw / 2, h], [sw / 2, sw / 2], h - sw / 2],
+            ];
+
+            const paths = strokes.map(([start, end], i) => {
+                return (
+                    <line
+                        key={id + '_' + i}
+                        x1={start[0]}
+                        y1={start[1]}
+                        x2={end[0]}
+                        y2={end[1]}
+                    />
+                );
+            });
+
+            return (
+                <SVGContainer ref={ref} {...events}>
+                    {isBinding && (
+                        <rect
+                            className="tl-binding-indicator"
+                            strokeWidth={this.bindingDistance}
+                        />
+                    )}
+                    <g opacity={isGhost ? GHOSTED_OPACITY : 1}>
+                        <rect
+                            x={0}
+                            y={0}
+                            width={size[0]}
+                            height={size[1]}
+                            fill="transparent"
+                            pointerEvents="all"
+                        />
+                        <ScaledLines
+                            stroke={commonColors.black}
+                            opacity={isHovered || isSelected ? 1 : 0}
+                            strokeLinecap="round"
+                            pointerEvents="stroke"
+                        >
+                            {paths}
+                        </ScaledLines>
+                    </g>
+                </SVGContainer>
+            );
+        }
+    );
+
+    Indicator = TDShapeUtil.Indicator<T>(({ shape }) => {
+        const { id, size } = shape;
+
+        const sw = 2;
+        const w = Math.max(0, size[0] - sw / 2);
+        const h = Math.max(0, size[1] - sw / 2);
+
+        const strokes: [number[], number[], number][] = [
+            [[sw / 2, sw / 2], [w, sw / 2], w - sw / 2],
+            [[w, sw / 2], [w, h], h - sw / 2],
+            [[w, h], [sw / 2, h], w - sw / 2],
+            [[sw / 2, h], [sw / 2, sw / 2], h - sw / 2],
+        ];
+
+        const paths = strokes.map(([start, end], i) => {
+            return (
+                <line
+                    key={id + '_' + i}
+                    x1={start[0]}
+                    y1={start[1]}
+                    x2={end[0]}
+                    y2={end[1]}
+                />
+            );
+        });
+
+        return (
+            <ScaledLines strokeLinecap="round" pointerEvents="stroke">
+                {paths}
+            </ScaledLines>
+        );
+    });
+
+    getBounds = (shape: T) => {
+        return getBoundsRectangle(shape, this.boundsCache);
+    };
+
+    override shouldRender = (prev: T, next: T) => {
+        return next.size !== prev.size || next.style !== prev.style;
+    };
+}
+
+const ScaledLines = styled('g')({
+    strokeWidth: 'calc(1.5px * var(--tl-scale))',
+    strokeDasharray: `calc(1px * var(--tl-scale)), calc(3px * var(--tl-scale))`,
+});
diff --git a/libs/components/board-shapes/src/group-util/index.ts b/libs/components/board-shapes/src/group-util/index.ts
new file mode 100644
index 000000000..bc1bf8a44
--- /dev/null
+++ b/libs/components/board-shapes/src/group-util/index.ts
@@ -0,0 +1 @@
+export * from './group-util';
diff --git a/libs/components/board-shapes/src/hexagon-util/HexagonUtil.tsx b/libs/components/board-shapes/src/hexagon-util/HexagonUtil.tsx
new file mode 100644
index 000000000..2b0ba9921
--- /dev/null
+++ b/libs/components/board-shapes/src/hexagon-util/HexagonUtil.tsx
@@ -0,0 +1,294 @@
+import * as React from 'react';
+import { Utils, SVGContainer, TLBounds } from '@tldraw/core';
+import {
+    HexagonShape,
+    TDShapeType,
+    TDMeta,
+    TDShape,
+    DashStyle,
+    BINDING_DISTANCE,
+    GHOSTED_OPACITY,
+    LABEL_POINT,
+} from '@toeverything/components/board-types';
+import { TDShapeUtil } from '../TDShapeUtil';
+import {
+    defaultStyle,
+    getBoundsRectangle,
+    transformRectangle,
+    transformSingleRectangle,
+    getFontStyle,
+    TextLabel,
+    getShapeStyle,
+} from '../shared';
+import {
+    intersectBoundsPolygon,
+    intersectLineSegmentPolyline,
+    intersectRayLineSegment,
+} from '@tldraw/intersect';
+import Vec from '@tldraw/vec';
+import { getHexagonCentroid, getHexagonPoints } from './hexagon-helpers';
+import { styled } from '@toeverything/components/ui';
+import { DrawHexagon } from './components/DrawHexagon';
+import { DashedHexagon } from './components/DashedHexagon';
+import { HexagonBindingIndicator } from './components/HexagonBindingIndicator';
+
+type T = HexagonShape;
+type E = HTMLDivElement;
+
+export class HexagonUtil extends TDShapeUtil<T, E> {
+    type = TDShapeType.Hexagon as const;
+
+    override canBind = true;
+
+    override canClone = true;
+
+    override canEdit = true;
+
+    getShape = (props: Partial<T>): T => {
+        return Utils.deepMerge<T>(
+            {
+                id: 'id',
+                type: TDShapeType.Hexagon,
+                name: 'Triangle',
+                parentId: 'page',
+                childIndex: 1,
+                point: [0, 0],
+                size: [1, 1],
+                rotation: 0,
+                style: defaultStyle,
+                label: '',
+                labelPoint: [0.5, 0.5],
+                workspace: props.workspace,
+            },
+            props
+        );
+    };
+
+    Component = TDShapeUtil.Component<T, E, TDMeta>(
+        (
+            {
+                shape,
+                bounds,
+                isBinding,
+                isEditing,
+                isSelected,
+                isGhost,
+                meta,
+                events,
+                onShapeChange,
+                onShapeBlur,
+            },
+            ref
+        ) => {
+            const {
+                id,
+                label = '',
+                size,
+                style,
+                labelPoint = LABEL_POINT,
+            } = shape;
+            const font = getFontStyle(style);
+            const styles = getShapeStyle(style, meta.isDarkMode);
+            const Component =
+                style.dash === DashStyle.Draw ? DrawHexagon : DashedHexagon;
+            const handleLabelChange = React.useCallback(
+                (label: string) => onShapeChange?.({ id, label }),
+                [onShapeChange]
+            );
+            const offsetY = React.useMemo(() => {
+                const center = Vec.div(size, 2);
+                const centroid = getHexagonCentroid(size);
+                return (centroid[1] - center[1]) * 0.72;
+            }, [size]);
+            return (
+                <FullWrapper ref={ref} {...events}>
+                    <TextLabel
+                        font={font}
+                        text={label}
+                        color={styles.stroke}
+                        offsetX={(labelPoint[0] - 0.5) * bounds.width}
+                        offsetY={
+                            offsetY + (labelPoint[1] - 0.5) * bounds.height
+                        }
+                        isEditing={isEditing}
+                        onChange={handleLabelChange}
+                        onBlur={onShapeBlur}
+                    />
+                    <SVGContainer
+                        id={shape.id + '_svg'}
+                        opacity={isGhost ? GHOSTED_OPACITY : 1}
+                    >
+                        {isBinding && <HexagonBindingIndicator size={size} />}
+                        <Component
+                            id={id}
+                            style={style}
+                            size={size}
+                            isSelected={isSelected}
+                            isDarkMode={meta.isDarkMode}
+                        />
+                    </SVGContainer>
+                </FullWrapper>
+            );
+        }
+    );
+
+    Indicator = TDShapeUtil.Indicator<T>(({ shape }) => {
+        const { size } = shape;
+        return <polygon points={getHexagonPoints(size).join()} />;
+    });
+
+    private get_points(shape: T) {
+        const {
+            rotation = 0,
+            point: [x, y],
+            size: [w, h],
+        } = shape;
+        return [
+            [x + w / 2, y],
+            [x, y + h],
+            [x + w, y + h],
+        ].map(pt => Vec.rotWith(pt, this.getCenter(shape), rotation));
+    }
+
+    override shouldRender = (prev: T, next: T) => {
+        return (
+            next.size !== prev.size ||
+            next.style !== prev.style ||
+            next.label !== prev.label
+        );
+    };
+
+    getBounds = (shape: T) => {
+        return getBoundsRectangle(shape, this.boundsCache);
+    };
+
+    override getExpandedBounds = (shape: T) => {
+        return Utils.getBoundsFromPoints(
+            getHexagonPoints(shape.size, this.bindingDistance).map(pt =>
+                Vec.add(pt, shape.point)
+            )
+        );
+    };
+
+    override hitTestLineSegment = (
+        shape: T,
+        A: number[],
+        B: number[]
+    ): boolean => {
+        return intersectLineSegmentPolyline(A, B, this.get_points(shape))
+            .didIntersect;
+    };
+
+    override hitTestBounds = (shape: T, bounds: TLBounds): boolean => {
+        return (
+            Utils.boundsContained(this.getBounds(shape), bounds) ||
+            intersectBoundsPolygon(bounds, this.get_points(shape)).length > 0
+        );
+    };
+
+    override getBindingPoint = <K extends TDShape>(
+        shape: T,
+        fromShape: K,
+        point: number[],
+        origin: number[],
+        direction: number[],
+        bindAnywhere: boolean
+    ) => {
+        // Algorithm time! We need to find the binding point (a normalized point inside of the shape, or around the shape, where the arrow will point to) and the distance from the binding shape to the anchor.
+
+        const expandedBounds = this.getExpandedBounds(shape);
+
+        if (!Utils.pointInBounds(point, expandedBounds)) return;
+
+        const points = getHexagonPoints(shape.size).map(pt =>
+            Vec.add(pt, shape.point)
+        );
+
+        const expandedPoints = getHexagonPoints(
+            shape.size,
+            this.bindingDistance
+        ).map(pt => Vec.add(pt, shape.point));
+
+        const closestDistanceToEdge = Utils.pointsToLineSegments(points, true)
+            .map(([a, b]) => Vec.distanceToLineSegment(a, b, point))
+            .sort((a, b) => a - b)[0];
+
+        if (
+            !(
+                Utils.pointInPolygon(point, expandedPoints) ||
+                closestDistanceToEdge < this.bindingDistance
+            )
+        )
+            return;
+
+        const intersections = Utils.pointsToLineSegments(
+            expandedPoints.concat([expandedPoints[0]])
+        )
+            .map(segment =>
+                intersectRayLineSegment(
+                    origin,
+                    direction,
+                    segment[0],
+                    segment[1]
+                )
+            )
+            .filter(intersection => intersection.didIntersect)
+            .flatMap(intersection => intersection.points);
+
+        if (!intersections.length) return;
+
+        // The center of the triangle
+        const center = Vec.add(getHexagonCentroid(shape.size), shape.point);
+
+        // Find furthest intersection between ray from origin through point and expanded bounds. TODO: What if the shape has a curve? In that case, should we intersect the circle-from-three-points instead?
+        const intersection = intersections.sort(
+            (a, b) => Vec.dist(b, origin) - Vec.dist(a, origin)
+        )[0];
+
+        // The point between the handle and the intersection
+        const middlePoint = Vec.med(point, intersection);
+
+        let anchor: number[];
+        let distance: number;
+
+        if (bindAnywhere) {
+            anchor =
+                Vec.dist(point, center) < BINDING_DISTANCE / 2 ? center : point;
+            distance = 0;
+        } else {
+            if (
+                Vec.distanceToLineSegment(point, middlePoint, center) <
+                BINDING_DISTANCE / 2
+            ) {
+                anchor = center;
+            } else {
+                anchor = middlePoint;
+            }
+
+            if (Utils.pointInPolygon(point, points)) {
+                distance = this.bindingDistance;
+            } else {
+                distance = Math.max(
+                    this.bindingDistance,
+                    closestDistanceToEdge
+                );
+            }
+        }
+
+        const bindingPoint = Vec.divV(
+            Vec.sub(anchor, [expandedBounds.minX, expandedBounds.minY]),
+            [expandedBounds.width, expandedBounds.height]
+        );
+
+        return {
+            point: Vec.clampV(bindingPoint, 0, 1),
+            distance,
+        };
+    };
+
+    override transform = transformRectangle;
+
+    override transformSingle = transformSingleRectangle;
+}
+
+const FullWrapper = styled('div')({ width: '100%', height: '100%' });
diff --git a/libs/components/board-shapes/src/hexagon-util/components/DashedHexagon.tsx b/libs/components/board-shapes/src/hexagon-util/components/DashedHexagon.tsx
new file mode 100644
index 000000000..6a93e2ff3
--- /dev/null
+++ b/libs/components/board-shapes/src/hexagon-util/components/DashedHexagon.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { Utils } from '@tldraw/core';
+import type { ShapeStyles } from '@toeverything/components/board-types';
+import { getShapeStyle } from '../../shared';
+import { getHexagonPoints } from '../hexagon-helpers';
+import Vec from '@tldraw/vec';
+
+interface HexagonSvgProps {
+    id: string;
+    size: number[];
+    style: ShapeStyles;
+    isSelected: boolean;
+    isDarkMode: boolean;
+}
+
+export const DashedHexagon = React.memo(function DashedHexagon({
+    id,
+    size,
+    style,
+    isSelected,
+    isDarkMode,
+}: HexagonSvgProps) {
+    const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode);
+    const sw = 1 + strokeWidth * 1.618;
+    const points = getHexagonPoints(size);
+    const sides = Utils.pointsToLineSegments(points, true);
+    const paths = sides.map(([start, end], i) => {
+        const { strokeDasharray, strokeDashoffset } = Utils.getPerfectDashProps(
+            Vec.dist(start, end),
+            strokeWidth * 1.618,
+            style.dash
+        );
+
+        return (
+            <line
+                key={id + '_' + i}
+                x1={start[0]}
+                y1={start[1]}
+                x2={end[0]}
+                y2={end[1]}
+                stroke={stroke}
+                strokeWidth={sw}
+                strokeLinecap="round"
+                strokeDasharray={strokeDasharray}
+                strokeDashoffset={strokeDashoffset}
+            />
+        );
+    });
+
+    const bgPath = points.join();
+
+    return (
+        <>
+            <polygon
+                className={
+                    style.isFilled || isSelected
+                        ? 'tl-fill-hitarea'
+                        : 'tl-stroke-hitarea'
+                }
+                points={bgPath}
+            />
+            {style.isFilled && (
+                <polygon fill={fill} points={bgPath} pointerEvents="none" />
+            )}
+            <g pointerEvents="stroke">{paths}</g>
+        </>
+    );
+});
diff --git a/libs/components/board-shapes/src/hexagon-util/components/DrawHexagon.tsx b/libs/components/board-shapes/src/hexagon-util/components/DrawHexagon.tsx
new file mode 100644
index 000000000..5d94b05b4
--- /dev/null
+++ b/libs/components/board-shapes/src/hexagon-util/components/DrawHexagon.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { getShapeStyle } from '../../shared';
+import type { ShapeStyles } from '@toeverything/components/board-types';
+import {
+    getHexagonIndicatorPathTDSnapshot,
+    getHexagonPath,
+} from '../hexagon-helpers';
+
+interface HexagonSvgProps {
+    id: string;
+    size: number[];
+    style: ShapeStyles;
+    isSelected: boolean;
+    isDarkMode: boolean;
+}
+
+export const DrawHexagon = React.memo(function DrawTriangle({
+    id,
+    size,
+    style,
+    isSelected,
+    isDarkMode,
+}: HexagonSvgProps) {
+    const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode);
+    const path_td_snapshot = getHexagonPath(id, size, style);
+    const indicatorPath = getHexagonIndicatorPathTDSnapshot(id, size, style);
+    return (
+        <>
+            <path
+                className={
+                    style.isFilled || isSelected
+                        ? 'tl-fill-hitarea'
+                        : 'tl-stroke-hitarea'
+                }
+                d={indicatorPath}
+            />
+            {style.isFilled && (
+                <path d={indicatorPath} fill={fill} pointerEvents="none" />
+            )}
+            <path
+                d={path_td_snapshot}
+                fill={stroke}
+                stroke={stroke}
+                strokeWidth={strokeWidth}
+                pointerEvents="none"
+            />
+        </>
+    );
+});
diff --git a/libs/components/board-shapes/src/hexagon-util/components/HexagonBindingIndicator.tsx b/libs/components/board-shapes/src/hexagon-util/components/HexagonBindingIndicator.tsx
new file mode 100644
index 000000000..20cc6c791
--- /dev/null
+++ b/libs/components/board-shapes/src/hexagon-util/components/HexagonBindingIndicator.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { BINDING_DISTANCE } from '@toeverything/components/board-types';
+import { getHexagonPoints } from '../hexagon-helpers';
+
+interface TriangleBindingIndicatorProps {
+    size: number[];
+}
+
+export function HexagonBindingIndicator({
+    size,
+}: TriangleBindingIndicatorProps) {
+    const trianglePoints = getHexagonPoints(size).join();
+    return (
+        <polygon
+            className="tl-binding-indicator"
+            points={trianglePoints}
+            strokeWidth={BINDING_DISTANCE * 2}
+        />
+    );
+}
diff --git a/libs/components/board-shapes/src/hexagon-util/hexagon-helpers.ts b/libs/components/board-shapes/src/hexagon-util/hexagon-helpers.ts
new file mode 100644
index 000000000..ea8497a3d
--- /dev/null
+++ b/libs/components/board-shapes/src/hexagon-util/hexagon-helpers.ts
@@ -0,0 +1,115 @@
+import { Utils } from '@tldraw/core';
+import Vec from '@tldraw/vec';
+import getStroke, { getStrokePoints } from 'perfect-freehand';
+import type { ShapeStyles } from '@toeverything/components/board-types';
+import { getShapeStyle, getOffsetPolygon } from '../shared';
+function getPonits(w: number, h: number) {
+    return [
+        [w / 5, 0],
+        [(w / 5) * 4, 0],
+        [w, h / 2],
+        [(w / 5) * 4, h],
+        [w / 5, h],
+        [0, h / 2],
+    ];
+}
+
+export function getHexagonPoints(size: number[], offset = 0, rotation = 0) {
+    const [w, h] = size;
+    let points = getPonits(w, h);
+    if (offset) points = getOffsetPolygon(points, offset);
+    if (rotation)
+        points = points.map(pt => Vec.rotWith(pt, [w / 2, h / 2], rotation));
+
+    return points;
+}
+
+export function getHexagonCentroid(size: number[]) {
+    const [w, h] = size;
+    const points = getPonits(w, h);
+    return [
+        (points[0][0] + points[1][0] + points[2][0]) / 3,
+        (points[0][1] + points[1][1] + points[2][1]) / 3,
+    ];
+}
+
+function getHexagonDrawPoints(id: string, size: number[], strokeWidth: number) {
+    const [w, h] = size;
+    const getRandom = Utils.rng(id);
+    // Random corner offsets
+    const offsets = Array.from(Array(6)).map(() => {
+        return [
+            getRandom() * strokeWidth * 0.75,
+            getRandom() * strokeWidth * 0.75,
+        ];
+    });
+    // Corners
+    const point = getPonits(w, h);
+    const corners = [
+        Vec.add(point[0], offsets[0]),
+        Vec.add(point[1], offsets[1]),
+        Vec.add(point[2], offsets[2]),
+        Vec.add(point[3], offsets[3]),
+        Vec.add(point[4], offsets[4]),
+        Vec.add(point[5], offsets[5]),
+    ];
+
+    // Which side to start drawing first
+    const rm = Math.round(Math.abs(getRandom() * 2 * 3));
+    // Number of points per side
+    // Inset each line by the corner radii and let the freehand algo
+    // interpolate points for the corners.
+    const lines = Utils.rotateArray(
+        [
+            Vec.pointsBetween(corners[0], corners[1], 32),
+            Vec.pointsBetween(corners[1], corners[2], 32),
+            Vec.pointsBetween(corners[2], corners[3], 32),
+            Vec.pointsBetween(corners[3], corners[4], 32),
+            Vec.pointsBetween(corners[4], corners[5], 32),
+            Vec.pointsBetween(corners[5], corners[0], 32),
+        ],
+        rm
+    );
+    // For the final points, include the first half of the first line again,
+    // so that the line wraps around and avoids ending on a sharp corner.
+    // This has a bit of finesse and magic—if you change the points between
+    // function, then you'll likely need to change this one too.
+    const points = [...lines.flat(), ...lines[0]];
+    return {
+        points,
+    };
+}
+
+function getDrawStrokeInfo(id: string, size: number[], style: ShapeStyles) {
+    const { strokeWidth } = getShapeStyle(style);
+    const { points } = getHexagonDrawPoints(id, size, strokeWidth);
+    const options = {
+        size: strokeWidth,
+        thinning: 0.65,
+        streamline: 0.3,
+        smoothing: 1,
+        simulatePressure: false,
+        last: true,
+    };
+    return { points, options };
+}
+
+export function getHexagonPath(id: string, size: number[], style: ShapeStyles) {
+    const { points, options } = getDrawStrokeInfo(id, size, style);
+    const stroke = getStroke(points, options);
+    return Utils.getSvgPathFromStroke(stroke);
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function getHexagonIndicatorPathTDSnapshot(
+    id: string,
+    size: number[],
+    style: ShapeStyles
+) {
+    const { points, options } = getDrawStrokeInfo(id, size, style);
+    const strokePoints = getStrokePoints(points, options);
+    return Utils.getSvgPathFromStroke(
+        strokePoints.map(pt => pt.point.slice(0, 2)),
+        false
+    );
+}
diff --git a/libs/components/board-shapes/src/hexagon-util/index.ts b/libs/components/board-shapes/src/hexagon-util/index.ts
new file mode 100644
index 000000000..344f7cf84
--- /dev/null
+++ b/libs/components/board-shapes/src/hexagon-util/index.ts
@@ -0,0 +1 @@
+export * from './HexagonUtil';
diff --git a/libs/components/board-shapes/src/image-util/image-util.tsx b/libs/components/board-shapes/src/image-util/image-util.tsx
new file mode 100644
index 000000000..95515fd23
--- /dev/null
+++ b/libs/components/board-shapes/src/image-util/image-util.tsx
@@ -0,0 +1,227 @@
+import * as React from 'react';
+import { Utils, HTMLContainer } from '@tldraw/core';
+import {
+    TDShapeType,
+    TDMeta,
+    ImageShape,
+    TDImageAsset,
+    GHOSTED_OPACITY,
+} from '@toeverything/components/board-types';
+import { TDShapeUtil } from '../TDShapeUtil';
+import {
+    defaultStyle,
+    getBoundsRectangle,
+    transformRectangle,
+    transformSingleRectangle,
+} from '../shared';
+import { styled } from '@toeverything/components/ui';
+
+type T = ImageShape;
+type E = HTMLDivElement;
+
+export class ImageUtil extends TDShapeUtil<T, E> {
+    type = TDShapeType.Image as const;
+
+    override canBind = true;
+
+    override canClone = true;
+
+    override isAspectRatioLocked = true;
+
+    override showCloneHandles = true;
+
+    getShape = (props: Partial<T>): T => {
+        return Utils.deepMerge<T>(
+            {
+                id: 'image',
+                type: TDShapeType.Image,
+                name: 'Image',
+                parentId: 'page',
+                childIndex: 1,
+                point: [0, 0],
+                size: [1, 1],
+                rotation: 0,
+                style: { ...defaultStyle, isFilled: true },
+                assetId: 'assetId',
+                workspace: props.workspace,
+            },
+            props
+        );
+    };
+
+    Component = TDShapeUtil.Component<T, E, TDMeta>(
+        (
+            {
+                shape,
+                asset = { src: '' },
+                isBinding,
+                isGhost,
+                meta,
+                events,
+                onShapeChange,
+            },
+            ref
+        ) => {
+            const { size, style } = shape;
+
+            const rImage = React.useRef<HTMLImageElement>(null);
+            const rWrapper = React.useRef<HTMLDivElement>(null);
+
+            React.useLayoutEffect(() => {
+                const wrapper = rWrapper.current;
+                if (!wrapper) return;
+                const [width, height] = size;
+                wrapper.style.width = `${width}px`;
+                wrapper.style.height = `${height}px`;
+            }, [size]);
+
+            return (
+                <HTMLContainer ref={ref} {...events}>
+                    {isBinding && (
+                        <div
+                            className="tl-binding-indicator"
+                            style={{
+                                position: 'absolute',
+                                top: `calc(${-this
+                                    .bindingDistance}px * var(--tl-zoom))`,
+                                left: `calc(${-this
+                                    .bindingDistance}px * var(--tl-zoom))`,
+                                width: `calc(100% + ${
+                                    this.bindingDistance * 2
+                                }px * var(--tl-zoom))`,
+                                height: `calc(100% + ${
+                                    this.bindingDistance * 2
+                                }px * var(--tl-zoom))`,
+                                backgroundColor: 'var(--tl-selectFill)',
+                            }}
+                        />
+                    )}
+                    <Wrapper
+                        ref={rWrapper}
+                        isDarkMode={meta.isDarkMode} //
+                        isFilled={style.isFilled}
+                        isGhost={isGhost}
+                    >
+                        <ImageElement
+                            id={shape.id + '_image'}
+                            ref={rImage}
+                            src={(asset as TDImageAsset).src}
+                            alt="tl_image_asset"
+                            draggable={false}
+                            // onLoad={onImageLoad}
+                        />
+                    </Wrapper>
+                </HTMLContainer>
+            );
+        }
+    );
+
+    Indicator = TDShapeUtil.Indicator<T>(({ shape }) => {
+        const {
+            size: [width, height],
+        } = shape;
+
+        return (
+            <rect
+                x={0}
+                y={0}
+                rx={2}
+                ry={2}
+                width={Math.max(1, width)}
+                height={Math.max(1, height)}
+            />
+        );
+    });
+
+    getBounds = (shape: T) => {
+        return getBoundsRectangle(shape, this.boundsCache);
+    };
+
+    override shouldRender = (prev: T, next: T) => {
+        return next.size !== prev.size || next.style !== prev.style;
+    };
+
+    override transform = transformRectangle;
+
+    override transformSingle = transformSingleRectangle;
+
+    override getSvgElement = (shape: ImageShape) => {
+        const bounds = this.getBounds(shape);
+        const elm = document.createElementNS(
+            'http://www.w3.org/2000/svg',
+            'image'
+        );
+        elm.setAttribute('width', `${bounds.width}`);
+        elm.setAttribute('height', `${bounds.height}`);
+        elm.setAttribute('xmlns:xlink', `http://www.w3.org/1999/xlink`);
+        return elm;
+    };
+}
+
+const Wrapper = styled('div')<{
+    isDarkMode: boolean;
+    isFilled: boolean;
+    isGhost: boolean;
+}>({
+    pointerEvents: 'all',
+    position: 'relative',
+    fontFamily: 'sans-serif',
+    fontSize: '2em',
+    height: '100%',
+    width: '100%',
+    borderRadius: '3px',
+    perspective: '800px',
+    overflow: 'hidden',
+    p: {
+        userSelect: 'none',
+    },
+    img: {
+        userSelect: 'none',
+    },
+    variants: {
+        isGhost: {
+            false: { opacity: 1 },
+            true: { transition: 'opacity .2s', opacity: GHOSTED_OPACITY },
+        },
+        isFilled: {
+            true: {},
+            false: {},
+        },
+        isDarkMode: {
+            true: {},
+            false: {},
+        },
+    },
+    compoundVariants: [
+        {
+            isFilled: true,
+            isDarkMode: true,
+            css: {
+                boxShadow:
+                    '2px 3px 12px -2px rgba(0,0,0,.3), 1px 1px 4px rgba(0,0,0,.3), 1px 1px 2px rgba(0,0,0,.3)',
+            },
+        },
+        {
+            isFilled: true,
+            isDarkMode: false,
+            css: {
+                boxShadow:
+                    '2px 3px 12px -2px rgba(0,0,0,.2), 1px 1px 4px rgba(0,0,0,.16),  1px 1px 2px rgba(0,0,0,.16)',
+            },
+        },
+    ],
+});
+
+const ImageElement = styled('img')({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    maxWidth: '100%',
+    minWidth: '100%',
+    pointerEvents: 'none',
+    objectFit: 'cover',
+    userSelect: 'none',
+    borderRadius: 2,
+});
diff --git a/libs/components/board-shapes/src/image-util/index.ts b/libs/components/board-shapes/src/image-util/index.ts
new file mode 100644
index 000000000..512c90ac1
--- /dev/null
+++ b/libs/components/board-shapes/src/image-util/index.ts
@@ -0,0 +1 @@
+export * from './image-util';
diff --git a/libs/components/board-shapes/src/index.ts b/libs/components/board-shapes/src/index.ts
new file mode 100644
index 000000000..1c7fd3be3
--- /dev/null
+++ b/libs/components/board-shapes/src/index.ts
@@ -0,0 +1,60 @@
+import { TDShape, TDShapeType } from '@toeverything/components/board-types';
+import type { TDShapeUtil } from './TDShapeUtil';
+import { RectangleUtil } from './rectangle-util';
+import { TriangleUtil } from './triangle-util';
+import { HexagonUtil } from './hexagon-util';
+import { ArrowUtil } from './arrow-util';
+import { DrawUtil } from './draw-util';
+import { EllipseUtil } from './ellipse-util';
+import { GroupUtil } from './group-util';
+import { ImageUtil } from './image-util';
+import { VideoUtil } from './video-util';
+import { EditorUtil } from './editor-util';
+import { PentagramUtil } from './pentagram-util';
+import { WhiteArrowUtil } from './white-arrow-util';
+import { FrameUtil } from './frame-util';
+
+export { TDShapeUtil } from './TDShapeUtil';
+
+export const Rectangle = new RectangleUtil();
+export const Triangle = new TriangleUtil();
+export const Hexagon = new HexagonUtil();
+export const Pentagram = new PentagramUtil();
+export const WhiteArrow = new WhiteArrowUtil();
+export const Arrow = new ArrowUtil();
+export const Draw = new DrawUtil();
+export const Ellipse = new EllipseUtil();
+const Group = new GroupUtil();
+const Image = new ImageUtil();
+const Video = new VideoUtil();
+export const Frame = new FrameUtil();
+
+export const Editor = new EditorUtil();
+
+export const shapeUtils = {
+    [TDShapeType.Rectangle]: Rectangle,
+    [TDShapeType.Frame]: Frame,
+    [TDShapeType.Triangle]: Triangle,
+    [TDShapeType.Pentagram]: Pentagram,
+    [TDShapeType.Hexagon]: Hexagon,
+    [TDShapeType.WhiteArrow]: WhiteArrow,
+    [TDShapeType.Arrow]: Arrow,
+    [TDShapeType.Draw]: Draw,
+    [TDShapeType.Ellipse]: Ellipse,
+    [TDShapeType.Group]: Group,
+    [TDShapeType.Image]: Image,
+    [TDShapeType.Video]: Video,
+    [TDShapeType.Editor]: Editor,
+};
+
+export const getShapeUtil = <T extends TDShape>(
+    shape: T | T['type']
+): TDShapeUtil<T> | undefined => {
+    if (typeof shape === 'string')
+        return shapeUtils[shape] as unknown as TDShapeUtil<T>;
+    return shapeUtils[shape.type] as unknown as TDShapeUtil<T>;
+};
+
+export { getTrianglePoints } from './triangle-util/triangle-helpers';
+export { defaultStyle } from './shared/shape-styles';
+export { clearPrevSize } from './shared/get-text-size';
diff --git a/libs/components/board-shapes/src/pentagram-util/PentagramUtil.tsx b/libs/components/board-shapes/src/pentagram-util/PentagramUtil.tsx
new file mode 100644
index 000000000..74eb074c3
--- /dev/null
+++ b/libs/components/board-shapes/src/pentagram-util/PentagramUtil.tsx
@@ -0,0 +1,294 @@
+import * as React from 'react';
+import { Utils, SVGContainer, TLBounds } from '@tldraw/core';
+import {
+    PentagramShape,
+    TDShapeType,
+    TDMeta,
+    TDShape,
+    DashStyle,
+    BINDING_DISTANCE,
+    GHOSTED_OPACITY,
+    LABEL_POINT,
+} from '@toeverything/components/board-types';
+import { TDShapeUtil } from '../TDShapeUtil';
+import {
+    defaultStyle,
+    getBoundsRectangle,
+    transformRectangle,
+    transformSingleRectangle,
+    getFontStyle,
+    TextLabel,
+    getShapeStyle,
+} from '../shared';
+import {
+    intersectBoundsPolygon,
+    intersectLineSegmentPolyline,
+    intersectRayLineSegment,
+} from '@tldraw/intersect';
+import Vec from '@tldraw/vec';
+import { getPentagramCentroid, getPentagramPoints } from './pentagram-helpers';
+import { styled } from '@toeverything/components/ui';
+import { DrawPentagram } from './components/DrawPentagram';
+import { DashedPentagram } from './components/DashedPentagram';
+import { PentagramBindingIndicator } from './components/PentagramBindingIndicator';
+
+type T = PentagramShape;
+type E = HTMLDivElement;
+
+export class PentagramUtil extends TDShapeUtil<T, E> {
+    type = TDShapeType.Pentagram as const;
+
+    override canBind = true;
+
+    override canClone = true;
+
+    override canEdit = true;
+
+    getShape = (props: Partial<T>): T => {
+        return Utils.deepMerge<T>(
+            {
+                id: 'id',
+                type: TDShapeType.Pentagram,
+                name: 'Triangle',
+                parentId: 'page',
+                childIndex: 1,
+                point: [0, 0],
+                size: [1, 1],
+                rotation: 0,
+                style: defaultStyle,
+                label: '',
+                labelPoint: [0.5, 0.5],
+                workspace: props.workspace,
+            },
+            props
+        );
+    };
+
+    Component = TDShapeUtil.Component<T, E, TDMeta>(
+        (
+            {
+                shape,
+                bounds,
+                isBinding,
+                isEditing,
+                isSelected,
+                isGhost,
+                meta,
+                events,
+                onShapeChange,
+                onShapeBlur,
+            },
+            ref
+        ) => {
+            const {
+                id,
+                label = '',
+                size,
+                style,
+                labelPoint = LABEL_POINT,
+            } = shape;
+            const font = getFontStyle(style);
+            const styles = getShapeStyle(style, meta.isDarkMode);
+            const Component =
+                style.dash === DashStyle.Draw ? DrawPentagram : DashedPentagram;
+            const handleLabelChange = React.useCallback(
+                (label: string) => onShapeChange?.({ id, label }),
+                [onShapeChange]
+            );
+            const offsetY = React.useMemo(() => {
+                const center = Vec.div(size, 2);
+                const centroid = getPentagramCentroid(size);
+                return (centroid[1] - center[1]) * 0.72;
+            }, [size]);
+            return (
+                <FullWrapper ref={ref} {...events}>
+                    <TextLabel
+                        font={font}
+                        text={label}
+                        color={styles.stroke}
+                        offsetX={(labelPoint[0] - 0.5) * bounds.width}
+                        offsetY={
+                            offsetY + (labelPoint[1] - 0.5) * bounds.height
+                        }
+                        isEditing={isEditing}
+                        onChange={handleLabelChange}
+                        onBlur={onShapeBlur}
+                    />
+                    <SVGContainer
+                        id={shape.id + '_svg'}
+                        opacity={isGhost ? GHOSTED_OPACITY : 1}
+                    >
+                        {isBinding && <PentagramBindingIndicator size={size} />}
+                        <Component
+                            id={id}
+                            style={style}
+                            size={size}
+                            isSelected={isSelected}
+                            isDarkMode={meta.isDarkMode}
+                        />
+                    </SVGContainer>
+                </FullWrapper>
+            );
+        }
+    );
+
+    Indicator = TDShapeUtil.Indicator<T>(({ shape }) => {
+        const { size } = shape;
+        return <polygon points={getPentagramPoints(size).join()} />;
+    });
+
+    private get_points(shape: T) {
+        const {
+            rotation = 0,
+            point: [x, y],
+            size: [w, h],
+        } = shape;
+        return [
+            [x + w / 2, y],
+            [x, y + h],
+            [x + w, y + h],
+        ].map(pt => Vec.rotWith(pt, this.getCenter(shape), rotation));
+    }
+
+    override shouldRender = (prev: T, next: T) => {
+        return (
+            next.size !== prev.size ||
+            next.style !== prev.style ||
+            next.label !== prev.label
+        );
+    };
+
+    getBounds = (shape: T) => {
+        return getBoundsRectangle(shape, this.boundsCache);
+    };
+
+    override getExpandedBounds = (shape: T) => {
+        return Utils.getBoundsFromPoints(
+            getPentagramPoints(shape.size, this.bindingDistance).map(pt =>
+                Vec.add(pt, shape.point)
+            )
+        );
+    };
+
+    override hitTestLineSegment = (
+        shape: T,
+        A: number[],
+        B: number[]
+    ): boolean => {
+        return intersectLineSegmentPolyline(A, B, this.get_points(shape))
+            .didIntersect;
+    };
+
+    override hitTestBounds = (shape: T, bounds: TLBounds): boolean => {
+        return (
+            Utils.boundsContained(this.getBounds(shape), bounds) ||
+            intersectBoundsPolygon(bounds, this.get_points(shape)).length > 0
+        );
+    };
+
+    override getBindingPoint = <K extends TDShape>(
+        shape: T,
+        fromShape: K,
+        point: number[],
+        origin: number[],
+        direction: number[],
+        bindAnywhere: boolean
+    ) => {
+        // Algorithm time! We need to find the binding point (a normalized point inside of the shape, or around the shape, where the arrow will point to) and the distance from the binding shape to the anchor.
+
+        const expandedBounds = this.getExpandedBounds(shape);
+
+        if (!Utils.pointInBounds(point, expandedBounds)) return;
+
+        const points = getPentagramPoints(shape.size).map(pt =>
+            Vec.add(pt, shape.point)
+        );
+
+        const expandedPoints = getPentagramPoints(
+            shape.size,
+            this.bindingDistance
+        ).map(pt => Vec.add(pt, shape.point));
+
+        const closestDistanceToEdge = Utils.pointsToLineSegments(points, true)
+            .map(([a, b]) => Vec.distanceToLineSegment(a, b, point))
+            .sort((a, b) => a - b)[0];
+
+        if (
+            !(
+                Utils.pointInPolygon(point, expandedPoints) ||
+                closestDistanceToEdge < this.bindingDistance
+            )
+        )
+            return;
+
+        const intersections = Utils.pointsToLineSegments(
+            expandedPoints.concat([expandedPoints[0]])
+        )
+            .map(segment =>
+                intersectRayLineSegment(
+                    origin,
+                    direction,
+                    segment[0],
+                    segment[1]
+                )
+            )
+            .filter(intersection => intersection.didIntersect)
+            .flatMap(intersection => intersection.points);
+
+        if (!intersections.length) return;
+
+        // The center of the triangle
+        const center = Vec.add(getPentagramCentroid(shape.size), shape.point);
+
+        // Find furthest intersection between ray from origin through point and expanded bounds. TODO: What if the shape has a curve? In that case, should we intersect the circle-from-three-points instead?
+        const intersection = intersections.sort(
+            (a, b) => Vec.dist(b, origin) - Vec.dist(a, origin)
+        )[0];
+
+        // The point between the handle and the intersection
+        const middlePoint = Vec.med(point, intersection);
+
+        let anchor: number[];
+        let distance: number;
+
+        if (bindAnywhere) {
+            anchor =
+                Vec.dist(point, center) < BINDING_DISTANCE / 2 ? center : point;
+            distance = 0;
+        } else {
+            if (
+                Vec.distanceToLineSegment(point, middlePoint, center) <
+                BINDING_DISTANCE / 2
+            ) {
+                anchor = center;
+            } else {
+                anchor = middlePoint;
+            }
+
+            if (Utils.pointInPolygon(point, points)) {
+                distance = this.bindingDistance;
+            } else {
+                distance = Math.max(
+                    this.bindingDistance,
+                    closestDistanceToEdge
+                );
+            }
+        }
+
+        const bindingPoint = Vec.divV(
+            Vec.sub(anchor, [expandedBounds.minX, expandedBounds.minY]),
+            [expandedBounds.width, expandedBounds.height]
+        );
+
+        return {
+            point: Vec.clampV(bindingPoint, 0, 1),
+            distance,
+        };
+    };
+
+    override transform = transformRectangle;
+
+    override transformSingle = transformSingleRectangle;
+}
+
+const FullWrapper = styled('div')({ width: '100%', height: '100%' });
diff --git a/libs/components/board-shapes/src/pentagram-util/components/DashedPentagram.tsx b/libs/components/board-shapes/src/pentagram-util/components/DashedPentagram.tsx
new file mode 100644
index 000000000..42c0189e4
--- /dev/null
+++ b/libs/components/board-shapes/src/pentagram-util/components/DashedPentagram.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { Utils } from '@tldraw/core';
+import type { ShapeStyles } from '@toeverything/components/board-types';
+import { getShapeStyle } from '../../shared';
+import { getPentagramPoints } from '../pentagram-helpers';
+import Vec from '@tldraw/vec';
+
+interface PentagramSvgProps {
+    id: string;
+    size: number[];
+    style: ShapeStyles;
+    isSelected: boolean;
+    isDarkMode: boolean;
+}
+
+export const DashedPentagram = React.memo(function DashedPentagram({
+    id,
+    size,
+    style,
+    isSelected,
+    isDarkMode,
+}: PentagramSvgProps) {
+    const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode);
+    const sw = 1 + strokeWidth * 1.618;
+    const points = getPentagramPoints(size);
+    const sides = Utils.pointsToLineSegments(points, true);
+    const paths = sides.map(([start, end], i) => {
+        const { strokeDasharray, strokeDashoffset } = Utils.getPerfectDashProps(
+            Vec.dist(start, end),
+            strokeWidth * 1.618,
+            style.dash
+        );
+
+        return (
+            <line
+                key={id + '_' + i}
+                x1={start[0]}
+                y1={start[1]}
+                x2={end[0]}
+                y2={end[1]}
+                stroke={stroke}
+                strokeWidth={sw}
+                strokeLinecap="round"
+                strokeDasharray={strokeDasharray}
+                strokeDashoffset={strokeDashoffset}
+            />
+        );
+    });
+
+    const bgPath = points.join();
+
+    return (
+        <>
+            <polygon
+                className={
+                    style.isFilled || isSelected
+                        ? 'tl-fill-hitarea'
+                        : 'tl-stroke-hitarea'
+                }
+                points={bgPath}
+            />
+            {style.isFilled && (
+                <polygon fill={fill} points={bgPath} pointerEvents="none" />
+            )}
+            <g pointerEvents="stroke">{paths}</g>
+        </>
+    );
+});
diff --git a/libs/components/board-shapes/src/pentagram-util/components/DrawPentagram.tsx b/libs/components/board-shapes/src/pentagram-util/components/DrawPentagram.tsx
new file mode 100644
index 000000000..9d2e1b99b
--- /dev/null
+++ b/libs/components/board-shapes/src/pentagram-util/components/DrawPentagram.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { getShapeStyle } from '../../shared';
+import type { ShapeStyles } from '@toeverything/components/board-types';
+import {
+    getPentagramIndicatorPathTDSnapshot,
+    getPentagramPath,
+} from '../pentagram-helpers';
+
+interface PentagramSvgProps {
+    id: string;
+    size: number[];
+    style: ShapeStyles;
+    isSelected: boolean;
+    isDarkMode: boolean;
+}
+
+export const DrawPentagram = React.memo(function DrawTriangle({
+    id,
+    size,
+    style,
+    isSelected,
+    isDarkMode,
+}: PentagramSvgProps) {
+    const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode);
+    const path_td_snapshot = getPentagramPath(id, size, style);
+    const indicatorPath = getPentagramIndicatorPathTDSnapshot(id, size, style);
+    return (
+        <>
+            <path
+                className={
+                    style.isFilled || isSelected
+                        ? 'tl-fill-hitarea'
+                        : 'tl-stroke-hitarea'
+                }
+                d={indicatorPath}
+            />
+            {style.isFilled && (
+                <path d={indicatorPath} fill={fill} pointerEvents="none" />
+            )}
+            <path
+                d={path_td_snapshot}
+                fill={stroke}
+                stroke={stroke}
+                strokeWidth={strokeWidth}
+                pointerEvents="none"
+            />
+        </>
+    );
+});
diff --git a/libs/components/board-shapes/src/pentagram-util/components/PentagramBindingIndicator.tsx b/libs/components/board-shapes/src/pentagram-util/components/PentagramBindingIndicator.tsx
new file mode 100644
index 000000000..27981cbe3
--- /dev/null
+++ b/libs/components/board-shapes/src/pentagram-util/components/PentagramBindingIndicator.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { BINDING_DISTANCE } from '@toeverything/components/board-types';
+import { getPentagramPoints } from '../pentagram-helpers';
+
+interface TriangleBindingIndicatorProps {
+    size: number[];
+}
+
+export function PentagramBindingIndicator({
+    size,
+}: TriangleBindingIndicatorProps) {
+    const trianglePoints = getPentagramPoints(size).join();
+    return (
+        <polygon
+            className="tl-binding-indicator"
+            points={trianglePoints}
+            strokeWidth={BINDING_DISTANCE * 2}
+        />
+    );
+}
diff --git a/libs/components/board-shapes/src/pentagram-util/index.ts b/libs/components/board-shapes/src/pentagram-util/index.ts
new file mode 100644
index 000000000..8ecf54f7c
--- /dev/null
+++ b/libs/components/board-shapes/src/pentagram-util/index.ts
@@ -0,0 +1 @@
+export * from './PentagramUtil';
diff --git a/libs/components/board-shapes/src/pentagram-util/pentagram-helpers.ts b/libs/components/board-shapes/src/pentagram-util/pentagram-helpers.ts
new file mode 100644
index 000000000..addd55a5c
--- /dev/null
+++ b/libs/components/board-shapes/src/pentagram-util/pentagram-helpers.ts
@@ -0,0 +1,135 @@
+import { Utils } from '@tldraw/core';
+import Vec from '@tldraw/vec';
+import getStroke, { getStrokePoints } from 'perfect-freehand';
+import type { ShapeStyles } from '@toeverything/components/board-types';
+import { getShapeStyle, getOffsetPolygon } from '../shared';
+function getPonits(w: number, h: number) {
+    return [
+        [0, (76 / 200) * h],
+        [(76 / 200) * w, (76 / 200) * h],
+        [(100 / 200) * w, 0],
+        [(124 / 200) * w, (76 / 200) * h],
+        [(200 / 200) * w, (76 / 200) * h],
+        [(138 / 200) * w, (124 / 200) * h],
+        [(162 / 200) * w, (200 / 200) * h],
+        [(100 / 200) * w, (153 / 200) * h],
+        [(38 / 200) * w, (200 / 200) * h],
+        [(62 / 200) * w, (124 / 200) * h],
+    ];
+}
+
+export function getPentagramPoints(size: number[], offset = 0, rotation = 0) {
+    const [w, h] = size;
+    let points = getPonits(w, h);
+    if (offset) points = getOffsetPolygon(points, offset);
+    if (rotation)
+        points = points.map(pt => Vec.rotWith(pt, [w / 2, h / 2], rotation));
+
+    return points;
+}
+
+export function getPentagramCentroid(size: number[]) {
+    const [w, h] = size;
+    const points = getPonits(w, h);
+    return [
+        (points[0][0] + points[1][0] + points[2][0]) / 3,
+        (points[0][1] + points[1][1] + points[2][1]) / 3,
+    ];
+}
+
+function getPentagramDrawPoints(
+    id: string,
+    size: number[],
+    strokeWidth: number
+) {
+    const [w, h] = size;
+    const getRandom = Utils.rng(id);
+    // Random corner offsets
+    const offsets = Array.from(Array(10)).map(() => {
+        return [
+            getRandom() * strokeWidth * 0.75,
+            getRandom() * strokeWidth * 0.75,
+        ];
+    });
+    // Corners
+    const point = getPonits(w, h);
+    const corners = [
+        Vec.add(point[0], offsets[0]),
+        Vec.add(point[1], offsets[1]),
+        Vec.add(point[2], offsets[2]),
+        Vec.add(point[3], offsets[3]),
+        Vec.add(point[4], offsets[4]),
+        Vec.add(point[5], offsets[5]),
+        Vec.add(point[6], offsets[6]),
+        Vec.add(point[7], offsets[7]),
+        Vec.add(point[8], offsets[8]),
+        Vec.add(point[9], offsets[9]),
+    ];
+
+    // Which side to start drawing first
+    const rm = Math.round(Math.abs(getRandom() * 2 * 3));
+    // Number of points per side
+    // Inset each line by the corner radii and let the freehand algo
+    // interpolate points for the corners.
+    const lines = Utils.rotateArray(
+        [
+            Vec.pointsBetween(corners[0], corners[1], 32),
+            Vec.pointsBetween(corners[1], corners[2], 32),
+            Vec.pointsBetween(corners[2], corners[3], 32),
+            Vec.pointsBetween(corners[3], corners[4], 32),
+            Vec.pointsBetween(corners[4], corners[5], 32),
+            Vec.pointsBetween(corners[5], corners[6], 32),
+            Vec.pointsBetween(corners[6], corners[7], 32),
+            Vec.pointsBetween(corners[7], corners[8], 32),
+            Vec.pointsBetween(corners[8], corners[9], 32),
+            Vec.pointsBetween(corners[9], corners[0], 32),
+        ],
+        rm
+    );
+    // For the final points, include the first half of the first line again,
+    // so that the line wraps around and avoids ending on a sharp corner.
+    // This has a bit of finesse and magic—if you change the points between
+    // function, then you'll likely need to change this one too.
+    const points = [...lines.flat(), ...lines[0]];
+    return {
+        points,
+    };
+}
+
+function getDrawStrokeInfo(id: string, size: number[], style: ShapeStyles) {
+    const { strokeWidth } = getShapeStyle(style);
+    const { points } = getPentagramDrawPoints(id, size, strokeWidth);
+    const options = {
+        size: strokeWidth,
+        thinning: 0.65,
+        streamline: 0.3,
+        smoothing: 1,
+        simulatePressure: false,
+        last: true,
+    };
+    return { points, options };
+}
+
+export function getPentagramPath(
+    id: string,
+    size: number[],
+    style: ShapeStyles
+) {
+    const { points, options } = getDrawStrokeInfo(id, size, style);
+    const stroke = getStroke(points, options);
+    return Utils.getSvgPathFromStroke(stroke);
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function getPentagramIndicatorPathTDSnapshot(
+    id: string,
+    size: number[],
+    style: ShapeStyles
+) {
+    const { points, options } = getDrawStrokeInfo(id, size, style);
+    const strokePoints = getStrokePoints(points, options);
+    return Utils.getSvgPathFromStroke(
+        strokePoints.map(pt => pt.point.slice(0, 2)),
+        false
+    );
+}
diff --git a/libs/components/board-shapes/src/rectangle-util/RectangleUtil.tsx b/libs/components/board-shapes/src/rectangle-util/RectangleUtil.tsx
new file mode 100644
index 000000000..ec6cebb2f
--- /dev/null
+++ b/libs/components/board-shapes/src/rectangle-util/RectangleUtil.tsx
@@ -0,0 +1,168 @@
+import * as React from 'react';
+import { Utils, SVGContainer } from '@tldraw/core';
+import {
+    RectangleShape,
+    DashStyle,
+    TDShapeType,
+    TDMeta,
+    GHOSTED_OPACITY,
+    LABEL_POINT,
+} from '@toeverything/components/board-types';
+import { TDShapeUtil } from '../TDShapeUtil';
+import {
+    defaultStyle,
+    getShapeStyle,
+    getBoundsRectangle,
+    transformRectangle,
+    getFontStyle,
+    transformSingleRectangle,
+} from '../shared';
+import { TextLabel } from '../shared/text-label';
+import { getRectangleIndicatorPathTDSnapshot } from './rectangle-helpers';
+import { DrawRectangle } from './components/DrawRectangle';
+import { DashedRectangle } from './components/DashedRectangle';
+import { BindingIndicator } from './components/BindingIndicator';
+import { styled } from '@toeverything/components/ui';
+
+type T = RectangleShape;
+type E = HTMLDivElement;
+
+export class RectangleUtil extends TDShapeUtil<T, E> {
+    type = TDShapeType.Rectangle as const;
+
+    override canBind = true;
+
+    override canClone = true;
+
+    override canEdit = true;
+
+    getShape = (props: Partial<T>): T => {
+        return Utils.deepMerge<T>(
+            {
+                id: 'id',
+                type: TDShapeType.Rectangle,
+                name: 'Rectangle',
+                parentId: 'page',
+                childIndex: 1,
+                point: [0, 0],
+                size: [1, 1],
+                rotation: 0,
+                style: defaultStyle,
+                label: '',
+                labelPoint: [0.5, 0.5],
+                workspace: props.workspace,
+            },
+            props
+        );
+    };
+
+    Component = TDShapeUtil.Component<T, E, TDMeta>(
+        (
+            {
+                shape,
+                isEditing,
+                isBinding,
+                isSelected,
+                isGhost,
+                meta,
+                bounds,
+                events,
+                onShapeBlur,
+                onShapeChange,
+            },
+            ref
+        ) => {
+            const {
+                id,
+                size,
+                style,
+                label = '',
+                labelPoint = LABEL_POINT,
+            } = shape;
+            const font = getFontStyle(style);
+            const styles = getShapeStyle(style, meta.isDarkMode);
+            const Component =
+                style.dash === DashStyle.Draw ? DrawRectangle : DashedRectangle;
+            const handleLabelChange = React.useCallback(
+                (label: string) => onShapeChange?.({ id, label }),
+                [onShapeChange]
+            );
+            return (
+                <FullWrapper ref={ref} {...events}>
+                    <TextLabel
+                        isEditing={isEditing}
+                        onChange={handleLabelChange}
+                        onBlur={onShapeBlur}
+                        font={font}
+                        text={label}
+                        color={styles.stroke}
+                        offsetX={(labelPoint[0] - 0.5) * bounds.width}
+                        offsetY={(labelPoint[1] - 0.5) * bounds.height}
+                    />
+                    <SVGContainer
+                        id={shape.id + '_svg'}
+                        opacity={isGhost ? GHOSTED_OPACITY : 1}
+                    >
+                        {isBinding && (
+                            <BindingIndicator
+                                strokeWidth={styles.strokeWidth}
+                                size={size}
+                            />
+                        )}
+                        <Component
+                            id={id}
+                            style={style}
+                            size={size}
+                            isSelected={isSelected}
+                            isDarkMode={meta.isDarkMode}
+                        />
+                    </SVGContainer>
+                </FullWrapper>
+            );
+        }
+    );
+
+    Indicator = TDShapeUtil.Indicator<T>(({ shape }) => {
+        const { id, style, size } = shape;
+
+        const styles = getShapeStyle(style, false);
+        const sw = styles.strokeWidth;
+
+        if (style.dash === DashStyle.Draw) {
+            return (
+                <path
+                    d={getRectangleIndicatorPathTDSnapshot(id, style, size)}
+                />
+            );
+        }
+
+        return (
+            <rect
+                x={sw}
+                y={sw}
+                rx={1}
+                ry={1}
+                width={Math.max(1, size[0] - sw * 2)}
+                height={Math.max(1, size[1] - sw * 2)}
+            />
+        );
+    });
+
+    getBounds = (shape: T) => {
+        return getBoundsRectangle(shape, this.boundsCache);
+    };
+
+    override shouldRender = (prev: T, next: T) => {
+        return (
+            next.size !== prev.size ||
+            next.style !== prev.style ||
+            next.label !== prev.label
+        );
+    };
+
+    override transform = transformRectangle;
+
+    override transformSingle = transformSingleRectangle;
+}
+
+const FullWrapper = styled('div')({ width: '100%', height: '100%' });
diff --git a/libs/components/board-shapes/src/rectangle-util/components/BindingIndicator.tsx b/libs/components/board-shapes/src/rectangle-util/components/BindingIndicator.tsx
new file mode 100644
index 000000000..3fab0bfd7
--- /dev/null
+++ b/libs/components/board-shapes/src/rectangle-util/components/BindingIndicator.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { BINDING_DISTANCE } from '@toeverything/components/board-types';
+
+interface BindingIndicatorProps {
+    strokeWidth: number;
+    size: number[];
+}
+export function BindingIndicator({ strokeWidth, size }: BindingIndicatorProps) {
+    return (
+        <rect
+            className="tl-binding-indicator"
+            x={strokeWidth}
+            y={strokeWidth}
+            width={Math.max(0, size[0] - strokeWidth / 2)}
+            height={Math.max(0, size[1] - strokeWidth / 2)}
+            strokeWidth={BINDING_DISTANCE * 2}
+        />
+    );
+}
diff --git a/libs/components/board-shapes/src/rectangle-util/components/DashedRectangle.tsx b/libs/components/board-shapes/src/rectangle-util/components/DashedRectangle.tsx
new file mode 100644
index 000000000..6b5289cac
--- /dev/null
+++ b/libs/components/board-shapes/src/rectangle-util/components/DashedRectangle.tsx
@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { Utils } from '@tldraw/core';
+import { BINDING_DISTANCE } from '@toeverything/components/board-types';
+import type { ShapeStyles } from '@toeverything/components/board-types';
+import { getShapeStyle } from '../../shared';
+
+interface RectangleSvgProps {
+    id: string;
+    style: ShapeStyles;
+    isSelected: boolean;
+    size: number[];
+    isDarkMode: boolean;
+}
+
+export const DashedRectangle = React.memo(function DashedRectangle({
+    id,
+    style,
+    size,
+    isSelected,
+    isDarkMode,
+}: RectangleSvgProps) {
+    const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode);
+
+    const sw = 1 + strokeWidth * 1.618;
+
+    const w = Math.max(0, size[0] - sw / 2);
+    const h = Math.max(0, size[1] - sw / 2);
+
+    const strokes: [number[], number[], number][] = [
+        [[sw / 2, sw / 2], [w, sw / 2], w - sw / 2],
+        [[w, sw / 2], [w, h], h - sw / 2],
+        [[w, h], [sw / 2, h], w - sw / 2],
+        [[sw / 2, h], [sw / 2, sw / 2], h - sw / 2],
+    ];
+
+    const paths = strokes.map(([start, end, length], i) => {
+        const { strokeDasharray, strokeDashoffset } = Utils.getPerfectDashProps(
+            length,
+            strokeWidth * 1.618,
+            style.dash
+        );
+
+        return (
+            <line
+                key={id + '_' + i}
+                x1={start[0]}
+                y1={start[1]}
+                x2={end[0]}
+                y2={end[1]}
+                strokeDasharray={strokeDasharray}
+                strokeDashoffset={strokeDashoffset}
+            />
+        );
+    });
+
+    return (
+        <>
+            <rect
+                className={
+                    isSelected || style.isFilled
+                        ? 'tl-fill-hitarea'
+                        : 'tl-stroke-hitarea'
+                }
+                x={sw / 2}
+                y={sw / 2}
+                width={w}
+                height={h}
+                strokeWidth={BINDING_DISTANCE}
+            />
+            {style.isFilled && (
+                <rect
+                    x={sw / 2}
+                    y={sw / 2}
+                    width={w}
+                    height={h}
+                    fill={fill}
+                    pointerEvents="none"
+                />
+            )}
+            <g
+                pointerEvents="none"
+                stroke={stroke}
+                strokeWidth={sw}
+                strokeLinecap="round"
+            >
+                {paths}
+            </g>
+        </>
+    );
+});
diff --git a/libs/components/board-shapes/src/rectangle-util/components/DrawRectangle.tsx b/libs/components/board-shapes/src/rectangle-util/components/DrawRectangle.tsx
new file mode 100644
index 000000000..291c7fea1
--- /dev/null
+++ b/libs/components/board-shapes/src/rectangle-util/components/DrawRectangle.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { getShapeStyle } from '../../shared';
+import type { ShapeStyles } from '@toeverything/components/board-types';
+import {
+    getRectangleIndicatorPathTDSnapshot,
+    getRectanglePath,
+} from '../rectangle-helpers';
+
+interface RectangleSvgProps {
+    id: string;
+    style: ShapeStyles;
+    isSelected: boolean;
+    isDarkMode: boolean;
+    size: number[];
+}
+
+export const DrawRectangle = React.memo(function DrawRectangle({
+    id,
+    style,
+    size,
+    isSelected,
+    isDarkMode,
+}: RectangleSvgProps) {
+    const { isFilled } = style;
+    const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode);
+    const path_td_snapshot = getRectanglePath(id, style, size);
+    const innerPath = getRectangleIndicatorPathTDSnapshot(id, style, size);
+
+    return (
+        <>
+            <path
+                className={
+                    style.isFilled || isSelected
+                        ? 'tl-fill-hitarea'
+                        : 'tl-stroke-hitarea'
+                }
+                d={innerPath}
+            />
+            {isFilled && (
+                <path d={innerPath} fill={fill} pointerEvents="none" />
+            )}
+            <path
+                d={path_td_snapshot}
+                fill={stroke}
+                stroke={stroke}
+                strokeWidth={strokeWidth}
+                pointerEvents="none"
+            />
+        </>
+    );
+});
diff --git a/libs/components/board-shapes/src/rectangle-util/index.ts b/libs/components/board-shapes/src/rectangle-util/index.ts
new file mode 100644
index 000000000..8026a008a
--- /dev/null
+++ b/libs/components/board-shapes/src/rectangle-util/index.ts
@@ -0,0 +1 @@
+export * from './RectangleUtil';
diff --git a/libs/components/board-shapes/src/rectangle-util/rectangle-helpers.ts b/libs/components/board-shapes/src/rectangle-util/rectangle-helpers.ts
new file mode 100644
index 000000000..a815c6d55
--- /dev/null
+++ b/libs/components/board-shapes/src/rectangle-util/rectangle-helpers.ts
@@ -0,0 +1,107 @@
+import { Utils } from '@tldraw/core';
+import Vec from '@tldraw/vec';
+import getStroke, { getStrokePoints } from 'perfect-freehand';
+import type { ShapeStyles } from '@toeverything/components/board-types';
+import { getShapeStyle } from '../shared';
+
+function getRectangleDrawPoints(
+    id: string,
+    style: ShapeStyles,
+    size: number[]
+) {
+    const styles = getShapeStyle(style);
+
+    const getRandom = Utils.rng(id);
+
+    const sw = styles.strokeWidth;
+
+    // Dimensions
+    const w = Math.max(0, size[0]);
+    const h = Math.max(0, size[1]);
+
+    // Random corner offsets
+    const offsets = Array.from(Array(4)).map(() => {
+        return [getRandom() * sw * 0.75, getRandom() * sw * 0.75];
+    });
+
+    // Corners
+    const tl = Vec.add([sw / 2, sw / 2], offsets[0]);
+    const tr = Vec.add([w - sw / 2, sw / 2], offsets[1]);
+    const br = Vec.add([w - sw / 2, h - sw / 2], offsets[2]);
+    const bl = Vec.add([sw / 2, h - sw / 2], offsets[3]);
+
+    // Which side to start drawing first
+    const rm = Math.round(Math.abs(getRandom() * 2 * 4));
+
+    // Corner radii
+    const rx = Math.min(w / 4, sw * 2);
+    const ry = Math.min(h / 4, sw * 2);
+
+    // Number of points per side
+    const px = Math.max(8, Math.floor(w / 16));
+    const py = Math.max(8, Math.floor(h / 16));
+
+    // Inset each line by the corner radii and let the freehand algo
+    // interpolate points for the corners.
+    const lines = Utils.rotateArray(
+        [
+            Vec.pointsBetween(Vec.add(tl, [rx, 0]), Vec.sub(tr, [rx, 0]), px),
+            Vec.pointsBetween(Vec.add(tr, [0, ry]), Vec.sub(br, [0, ry]), py),
+            Vec.pointsBetween(Vec.sub(br, [rx, 0]), Vec.add(bl, [rx, 0]), px),
+            Vec.pointsBetween(Vec.sub(bl, [0, ry]), Vec.add(tl, [0, ry]), py),
+        ],
+        rm
+    );
+
+    // For the final points, include the first half of the first line again,
+    // so that the line wraps around and avoids ending on a sharp corner.
+    // This has a bit of finesse and magic—if you change the points between
+    // function, then you'll likely need to change this one too.
+
+    const points = [...lines.flat(), ...lines[0]].slice(
+        5,
+        Math.floor((rm % 2 === 0 ? px : py) / -2) + 3
+    );
+
+    return {
+        points,
+    };
+}
+
+function getDrawStrokeInfo(id: string, style: ShapeStyles, size: number[]) {
+    const { points } = getRectangleDrawPoints(id, style, size);
+    const { strokeWidth } = getShapeStyle(style);
+    const options = {
+        size: strokeWidth,
+        thinning: 0.65,
+        streamline: 0.3,
+        smoothing: 1,
+        simulatePressure: false,
+        last: true,
+    };
+    return { points, options };
+}
+
+export function getRectanglePath(
+    id: string,
+    style: ShapeStyles,
+    size: number[]
+) {
+    const { points, options } = getDrawStrokeInfo(id, style, size);
+    const stroke = getStroke(points, options);
+    return Utils.getSvgPathFromStroke(stroke);
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function getRectangleIndicatorPathTDSnapshot(
+    id: string,
+    style: ShapeStyles,
+    size: number[]
+) {
+    const { points, options } = getDrawStrokeInfo(id, style, size);
+    const strokePoints = getStrokePoints(points, options);
+    return Utils.getSvgPathFromStroke(
+        strokePoints.map(pt => pt.point.slice(0, 2)),
+        false
+    );
+}
diff --git a/libs/components/board-shapes/src/shared/get-bounds-rectangle.ts b/libs/components/board-shapes/src/shared/get-bounds-rectangle.ts
new file mode 100644
index 000000000..f216a9b27
--- /dev/null
+++ b/libs/components/board-shapes/src/shared/get-bounds-rectangle.ts
@@ -0,0 +1,25 @@
+import { TLBounds, TLShape, Utils } from '@tldraw/core';
+
+/**
+ * Find the bounds of a rectangular shape.
+ * @param shape
+ * @param boundsCache
+ */
+export function getBoundsRectangle<T extends TLShape & { size: number[] }>(
+    shape: T,
+    boundsCache: WeakMap<T, TLBounds>
+) {
+    const bounds = Utils.getFromCache(boundsCache, shape, () => {
+        const [width, height] = shape.size;
+        return {
+            minX: 0,
+            maxX: width,
+            minY: 0,
+            maxY: height,
+            width,
+            height,
+        };
+    });
+
+    return Utils.translateBounds(bounds, shape.point);
+}
diff --git a/libs/components/board-shapes/src/shared/get-text-align.ts b/libs/components/board-shapes/src/shared/get-text-align.ts
new file mode 100644
index 000000000..83f75be7f
--- /dev/null
+++ b/libs/components/board-shapes/src/shared/get-text-align.ts
@@ -0,0 +1,12 @@
+import { AlignStyle } from '@toeverything/components/board-types';
+
+const ALIGN_VALUES = {
+    [AlignStyle.Start]: 'left',
+    [AlignStyle.Middle]: 'center',
+    [AlignStyle.End]: 'right',
+    [AlignStyle.Justify]: 'justify',
+} as const;
+
+export function getTextAlign(alignStyle: AlignStyle = AlignStyle.Start) {
+    return ALIGN_VALUES[alignStyle];
+}
diff --git a/libs/components/board-shapes/src/shared/get-text-size.ts b/libs/components/board-shapes/src/shared/get-text-size.ts
new file mode 100644
index 000000000..cee76faa2
--- /dev/null
+++ b/libs/components/board-shapes/src/shared/get-text-size.ts
@@ -0,0 +1,77 @@
+import { LETTER_SPACING } from '@toeverything/components/board-types';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let melm: any;
+
+function getMeasurementDiv() {
+    // A div used for measurement
+    document.getElementById('__textLabelMeasure')?.remove();
+
+    const pre = document.createElement('pre');
+    pre.id = '__textLabelMeasure';
+
+    Object.assign(pre.style, {
+        whiteSpace: 'pre',
+        width: 'auto',
+        border: '1px solid transparent',
+        padding: '4px',
+        margin: '0px',
+        letterSpacing: LETTER_SPACING,
+        opacity: '0',
+        position: 'absolute',
+        top: '-500px',
+        left: '0px',
+        zIndex: '9999',
+        pointerEvents: 'none',
+        userSelect: 'none',
+        alignmentBaseline: 'mathematical',
+        dominantBaseline: 'mathematical',
+    });
+
+    pre.tabIndex = -1;
+
+    document.body.appendChild(pre);
+    return pre;
+}
+
+if (typeof window !== 'undefined') {
+    melm = getMeasurementDiv();
+}
+
+let prevText = '';
+let prevFont = '';
+let prevSize = [0, 0];
+
+export function clearPrevSize() {
+    prevText = '';
+}
+
+export function getTextLabelSize(text: string, font: string) {
+    if (!text) {
+        return [16, 32];
+    }
+
+    if (!melm) {
+        // We're in SSR
+        return [10, 10];
+    }
+
+    if (!melm.parent) document.body.appendChild(melm);
+
+    if (text === prevText && font === prevFont) {
+        return prevSize;
+    }
+
+    prevText = text;
+    prevFont = font;
+
+    melm.textContent = text;
+    melm.style.font = font;
+
+    // In tests, offsetWidth and offsetHeight will be 0
+    const width = melm.offsetWidth || 1;
+    const height = melm.offsetHeight || 1;
+
+    prevSize = [width, height];
+    return prevSize;
+}
diff --git a/libs/components/board-shapes/src/shared/get-text-svg-element.ts b/libs/components/board-shapes/src/shared/get-text-svg-element.ts
new file mode 100644
index 000000000..f6584e9a4
--- /dev/null
+++ b/libs/components/board-shapes/src/shared/get-text-svg-element.ts
@@ -0,0 +1,67 @@
+import type { TLBounds } from '@tldraw/core';
+import { getFontFace, getFontSize } from './shape-styles';
+import { getTextAlign } from './get-text-align';
+import {
+    LINE_HEIGHT,
+    AlignStyle,
+    ShapeStyles,
+} from '@toeverything/components/board-types';
+
+export function getTextSvgElement(
+    text: string,
+    style: ShapeStyles,
+    bounds: TLBounds
+) {
+    const fontSize = getFontSize(style.fontSize, style.font);
+    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    const scale = style.scale ?? 1;
+
+    const textLines = text.split('\n').map((line, i) => {
+        const textElm = document.createElementNS(
+            'http://www.w3.org/2000/svg',
+            'text'
+        );
+        textElm.textContent = line;
+        textElm.setAttribute('y', fontSize * (0.5 + i * LINE_HEIGHT) + '');
+        textElm.setAttribute('letter-spacing', fontSize * -0.03 + '');
+        textElm.setAttribute('font-size', fontSize + 'px');
+        textElm.setAttribute(
+            'font-family',
+            getFontFace(style.font).slice(1, -1)
+        );
+        textElm.setAttribute('text-align', getTextAlign(style.textAlign));
+        textElm.setAttribute('text-align', getTextAlign(style.textAlign));
+        textElm.setAttribute('alignment-baseline', 'central');
+        if (style.scale !== 1) {
+            textElm.setAttribute('transform', `scale(${style.scale})`);
+        }
+        g.appendChild(textElm);
+
+        return textElm;
+    });
+
+    switch (style.textAlign) {
+        case AlignStyle.Middle: {
+            g.setAttribute('text-align', 'center');
+            g.setAttribute('text-anchor', 'middle');
+            textLines.forEach(textElm => {
+                textElm.setAttribute('x', bounds.width / 2 / scale + '');
+            });
+            break;
+        }
+        case AlignStyle.End: {
+            g.setAttribute('text-align', 'right');
+            g.setAttribute('text-anchor', 'end');
+            textLines.forEach(textElm =>
+                textElm.setAttribute('x', bounds.width / scale + '')
+            );
+            break;
+        }
+        case AlignStyle.Start: {
+            g.setAttribute('text-align', 'left');
+            g.setAttribute('text-anchor', 'start');
+        }
+    }
+
+    return g;
+}
diff --git a/libs/components/board-shapes/src/shared/index.ts b/libs/components/board-shapes/src/shared/index.ts
new file mode 100644
index 000000000..b2a3abd31
--- /dev/null
+++ b/libs/components/board-shapes/src/shared/index.ts
@@ -0,0 +1,12 @@
+export * from './get-text-align';
+export * from './get-text-size';
+export * from './get-text-svg-element';
+export * from './shape-styles';
+export * from './get-bounds-rectangle';
+export * from './transform-rectangle';
+export * from './transform-single-rectangle';
+export * from './text-label';
+export * from './polygon-utils';
+export * from './label-mask';
+export * from './normalize-text';
+export * from './stop-propagation';
diff --git a/libs/components/board-shapes/src/shared/label-mask.tsx b/libs/components/board-shapes/src/shared/label-mask.tsx
new file mode 100644
index 000000000..fe61b0e92
--- /dev/null
+++ b/libs/components/board-shapes/src/shared/label-mask.tsx
@@ -0,0 +1,50 @@
+import type { TLBounds } from '@tldraw/core';
+import * as React from 'react';
+
+interface WithLabelMaskProps {
+    id: string;
+    bounds: TLBounds;
+    labelSize: number[];
+    offset?: number[];
+    scale?: number;
+}
+
+export function LabelMask({
+    id,
+    bounds,
+    labelSize,
+    offset,
+    scale = 1,
+}: WithLabelMaskProps) {
+    return (
+        <defs>
+            <mask id={id + '_clip'}>
+                <rect
+                    x={-100}
+                    y={-100}
+                    width={bounds.width + 200}
+                    height={bounds.height + 200}
+                    fill="white"
+                />
+                <rect
+                    x={
+                        bounds.width / 2 -
+                        (labelSize[0] / 2) * scale +
+                        (offset?.[0] || 0)
+                    }
+                    y={
+                        bounds.height / 2 -
+                        (labelSize[1] / 2) * scale +
+                        (offset?.[1] || 0)
+                    }
+                    width={labelSize[0] * scale}
+                    height={labelSize[1] * scale}
+                    rx={4 * scale}
+                    ry={4 * scale}
+                    fill="black"
+                    opacity={Math.max(scale, 0.8)}
+                />
+            </mask>
+        </defs>
+    );
+}
diff --git a/libs/components/board-shapes/src/shared/normalize-text.ts b/libs/components/board-shapes/src/shared/normalize-text.ts
new file mode 100644
index 000000000..1b4f30a26
--- /dev/null
+++ b/libs/components/board-shapes/src/shared/normalize-text.ts
@@ -0,0 +1,9 @@
+const fixNewLines = /\r?\n|\r/g;
+
+export function normalizeText(text: string) {
+    return text
+        .replace(fixNewLines, '\n')
+        .split('\n')
+        .map(x => x || ' ')
+        .join('\n');
+}
diff --git a/libs/components/board-shapes/src/shared/polygon-utils.ts b/libs/components/board-shapes/src/shared/polygon-utils.ts
new file mode 100644
index 000000000..ff1640411
--- /dev/null
+++ b/libs/components/board-shapes/src/shared/polygon-utils.ts
@@ -0,0 +1,198 @@
+import { intersectLineLine } from '@tldraw/intersect';
+import Vec from '@tldraw/vec';
+
+const PI2 = Math.PI * 2;
+
+type Vert = number[];
+type Edge = Vert[];
+type Polygon = Vert[];
+
+export class PolygonUtils {
+    static inward_edge_normal(edge: Edge) {
+        // Assuming that polygon vertices are in clockwise order
+        const delta = Vec.sub(edge[1], edge[0]);
+        const len = Vec.len2(delta);
+        return [-delta[0] / len, delta[1] / len];
+    }
+
+    static outward_edge_normal(edge: Edge) {
+        return Vec.neg(PolygonUtils.inward_edge_normal(edge));
+    }
+
+    // If the slope of line v1,v2 greater than the slope of v1,p then p is on the left side of v1,v2 and the return value is > 0.
+    // If p is colinear with v1,v2 then return 0, otherwise return a value < 0.
+
+    static left_side = Vec.isLeft;
+
+    static is_reflex_vertex(polygon: Polygon, index: number) {
+        const len = polygon.length;
+        // Assuming that polygon vertices are in clockwise order
+        const v0 = polygon[(index + len - 1) % len];
+        const v1 = polygon[index];
+        const v2 = polygon[(index + 1) % len];
+        if (PolygonUtils.left_side(v0, v2, v1) < 0) return true;
+        return false;
+    }
+
+    static get_edges(vertices: Vert[]) {
+        return vertices.map((vert, i) => [
+            vert,
+            vertices[(i + 1) % vertices.length],
+        ]);
+    }
+
+    // based on http://local.wasp.uwa.edu.au/~pbourke/geometry/lineline2d/, A => "line a", B => "line b"
+    static edges_intersection([A1, A2]: number[][], [B1, B2]: number[][]) {
+        const den =
+            (B2[1] - B1[1]) * (A2[0] - A1[0]) -
+            (B2[0] - B1[0]) * (A2[1] - A1[1]);
+
+        if (den == 0) return null; // lines are parallel or conincident
+
+        const ua =
+            ((B2[0] - B1[0]) * (A1[1] - B1[1]) -
+                (B2[1] - B1[1]) * (A1[0] - B1[0])) /
+            den;
+
+        const ub =
+            ((A2[0] - A1[0]) * (A1[1] - B1[1]) -
+                (A2[1] - A1[1]) * (A1[0] - B1[0])) /
+            den;
+
+        if (ua < 0 || ub < 0 || ua > 1 || ub > 1) return null;
+
+        return [A1[0] + ua * (A2[0] - A1[0]), A1[1] + ua * (A2[1] - A1[1])];
+    }
+
+    static append_arc(
+        polygon: number[][],
+        center: number[],
+        radius: number,
+        startVertex: number[],
+        endVertex: number[],
+        isPaddingBoundary = false
+    ) {
+        const vertices = [...polygon];
+        let startAngle = Math.atan2(
+            startVertex[1] - center[1],
+            startVertex[0] - center[0]
+        );
+        let endAngle = Math.atan2(
+            endVertex[1] - center[1],
+            endVertex[0] - center[0]
+        );
+        if (startAngle < 0) startAngle += PI2;
+        if (endAngle < 0) endAngle += PI2;
+        const arcSegmentCount = 5; // An odd number so that one arc vertex will be eactly arcRadius from center.
+        const angle =
+            startAngle > endAngle
+                ? startAngle - endAngle
+                : startAngle + PI2 - endAngle;
+        const angle5 =
+            (isPaddingBoundary ? -angle : PI2 - angle) / arcSegmentCount;
+
+        vertices.push(startVertex);
+        for (let i = 1; i < arcSegmentCount; ++i) {
+            const angle = startAngle + angle5 * i;
+            vertices.push([
+                center[0] + Math.cos(angle) * radius,
+                center[1] + Math.sin(angle) * radius,
+            ]);
+        }
+        vertices.push(endVertex);
+
+        return vertices;
+    }
+
+    static create_offset_edge(edge: Edge, offset: number[]) {
+        return edge.map(vert => Vec.add(vert, offset));
+    }
+
+    static get_offset_polygon(polygon: Polygon, offset = 0) {
+        const edges = PolygonUtils.get_edges(polygon);
+
+        const offsetEdges = edges.map(edge =>
+            PolygonUtils.create_offset_edge(
+                edge,
+                Vec.mul(PolygonUtils.outward_edge_normal(edge), offset)
+            )
+        );
+
+        const vertices = [];
+
+        for (let i = 0; i < offsetEdges.length; i++) {
+            const thisEdge = offsetEdges[i];
+            const prevEdge =
+                offsetEdges[(i + offsetEdges.length - 1) % offsetEdges.length];
+            const vertex = PolygonUtils.edges_intersection(prevEdge, thisEdge);
+            if (vertex) vertices.push(vertex);
+            else {
+                PolygonUtils.append_arc(
+                    vertices,
+                    edges[i][0],
+                    offset,
+                    prevEdge[1],
+                    thisEdge[0],
+                    false
+                );
+            }
+        }
+
+        // var marginPolygon = PolygonUtils.createPolygon(vertices)
+        // marginPolygon.offsetEdges = offsetEdges
+        return vertices;
+    }
+
+    static create_padding_polygon(polygon: number[][][], shapePadding = 0) {
+        const offsetEdges = polygon.map(edge =>
+            PolygonUtils.create_offset_edge(
+                edge,
+                PolygonUtils.inward_edge_normal(edge)
+            )
+        );
+
+        const vertices = [];
+        for (let i = 0; i < offsetEdges.length; i++) {
+            const thisEdge = offsetEdges[i];
+            const prevEdge =
+                offsetEdges[(i + offsetEdges.length - 1) % offsetEdges.length];
+            const vertex = PolygonUtils.edges_intersection(prevEdge, thisEdge);
+            if (vertex) vertices.push(vertex);
+            else {
+                PolygonUtils.append_arc(
+                    vertices,
+                    polygon[i][0],
+                    shapePadding,
+                    prevEdge[1],
+                    thisEdge[0],
+                    true
+                );
+            }
+        }
+
+        return vertices;
+    }
+}
+
+export function getOffsetPolygon(points: number[][], offset: number) {
+    if (points.length < 3) throw Error('Polygon must have at least 3 points');
+    const len = points.length;
+    return points
+        .map((point, i) => [point, points[(i + 1) % len]])
+        .map(([A, B]) => {
+            const offsetVector = Vec.mul(
+                Vec.per(Vec.uni(Vec.sub(B, A))),
+                offset
+            );
+            return [Vec.add(A, offsetVector), Vec.add(B, offsetVector)];
+        })
+        .map((edge, i, edges) => {
+            const intersection = intersectLineLine(
+                edge,
+                edges[(i + 1) % edges.length]
+            );
+            if (intersection === undefined)
+                throw Error('Expected an intersection');
+            return intersection;
+        });
+}
diff --git a/libs/components/board-shapes/src/shared/shape-styles.ts b/libs/components/board-shapes/src/shared/shape-styles.ts
new file mode 100644
index 000000000..9d0cc4fe2
--- /dev/null
+++ b/libs/components/board-shapes/src/shared/shape-styles.ts
@@ -0,0 +1,149 @@
+import { Utils } from '@tldraw/core';
+import {
+    Theme,
+    ColorStyle,
+    DashStyle,
+    ShapeStyles,
+    FontSizeStyle,
+    FontStyle,
+    AlignStyle,
+    StrokeWidth,
+} from '@toeverything/components/board-types';
+
+const canvasLight = '#fafafa';
+
+const canvasDark = '#343d45';
+
+export const commonColors = {
+    black: '#3A4C5C',
+    white: '#FFFFFF',
+};
+
+export const strokes: Record<Theme, Record<ColorStyle, string>> = {
+    light: {
+        ...commonColors,
+        white: '#1d1d1d',
+    },
+    dark: {
+        ...(Object.fromEntries(
+            Object.entries(commonColors).map(([k, v]) => [
+                k,
+                Utils.lerpColor(v, canvasDark, 0.1),
+            ])
+        ) as Record<ColorStyle, string>),
+        white: '#cecece',
+        black: '#cecece',
+    },
+};
+
+export const fills: Record<Theme, Record<ColorStyle, string>> = {
+    light: {
+        ...(Object.fromEntries(
+            Object.entries(commonColors).map(([k, v]) => [
+                k,
+                Utils.lerpColor(v, canvasLight, 0.82),
+            ])
+        ) as Record<ColorStyle, string>),
+        white: '#fefefe',
+    },
+    dark: {
+        ...(Object.fromEntries(
+            Object.entries(commonColors).map(([k, v]) => [
+                k,
+                Utils.lerpColor(v, canvasDark, 0.82),
+            ])
+        ) as Record<ColorStyle, string>),
+        white: 'rgb(30,33,37)',
+        black: '#1e1e1f',
+    },
+};
+
+const fontFaces = {
+    [FontStyle.Script]: '"Caveat Brush"',
+    [FontStyle.Sans]: '"Source Sans Pro"',
+    [FontStyle.Serif]: '"Crimson Pro"',
+    [FontStyle.Mono]: '"Source Code Pro"',
+};
+
+const fontSizeModifiers = {
+    [FontStyle.Script]: 1,
+    [FontStyle.Sans]: 1,
+    [FontStyle.Serif]: 1,
+    [FontStyle.Mono]: 1,
+};
+
+const _lineHeights = {
+    [FontSizeStyle.h1]: 40,
+    [FontSizeStyle.h2]: 34,
+    [FontSizeStyle.h3]: 28,
+    [FontSizeStyle.body]: 22,
+};
+
+export function getFontSize(
+    size: FontSizeStyle,
+    fontStyle: FontStyle = FontStyle.Script
+): number {
+    return size * fontSizeModifiers[fontStyle];
+}
+
+function getLineHeight(size: FontSizeStyle): number {
+    return _lineHeights[size];
+}
+
+export function getFontFace(font: FontStyle = FontStyle.Script): string {
+    return fontFaces[font];
+}
+
+export function getStickyFontSize(size: FontSizeStyle): number {
+    return size;
+}
+
+export function getFontStyle(style: ShapeStyles): string {
+    const fontSize = getFontSize(style.fontSize, style.font);
+    const fontFace = getFontFace(style.font);
+    const lineHeight = getLineHeight(style.fontSize);
+    const { scale = 1 } = style;
+
+    return `${fontSize * scale}px/${lineHeight}px ${fontFace}`;
+}
+
+export function getStickyFontStyle(style: ShapeStyles): string {
+    const fontSize = getStickyFontSize(style.fontSize);
+    const fontFace = getFontFace(style.font);
+    const { scale = 1 } = style;
+
+    return `${fontSize * scale}px/1 ${fontFace}`;
+}
+
+export function getShapeStyle(
+    style: ShapeStyles,
+    isDarkMode?: boolean
+): {
+    stroke: string;
+    fill: string;
+    strokeWidth: number;
+} {
+    const { stroke, strokeWidth, fill, isFilled, dash } = style;
+
+    return {
+        stroke: dash === DashStyle.None ? 'none' : stroke,
+        fill: isFilled ? fill : 'none',
+        strokeWidth,
+    };
+}
+
+export const defaultStyle: ShapeStyles = {
+    stroke: commonColors.black,
+    strokeWidth: StrokeWidth.s1,
+    fill: 'none',
+    fontSize: FontSizeStyle.body,
+    isFilled: false,
+    dash: DashStyle.Draw,
+    scale: 1,
+};
+
+export const defaultTextStyle: ShapeStyles = {
+    ...defaultStyle,
+    font: FontStyle.Script,
+    textAlign: AlignStyle.Middle,
+};
diff --git a/libs/components/board-shapes/src/shared/stop-propagation.ts b/libs/components/board-shapes/src/shared/stop-propagation.ts
new file mode 100644
index 000000000..a2ed6e19f
--- /dev/null
+++ b/libs/components/board-shapes/src/shared/stop-propagation.ts
@@ -0,0 +1,5 @@
+import type React from 'react';
+
+export const stopPropagation = (
+    e: KeyboardEvent | React.SyntheticEvent<any, Event>
+) => e.stopPropagation();
diff --git a/libs/components/board-shapes/src/shared/text-area-utils.ts b/libs/components/board-shapes/src/shared/text-area-utils.ts
new file mode 100644
index 000000000..d5050fb57
--- /dev/null
+++ b/libs/components/board-shapes/src/shared/text-area-utils.ts
@@ -0,0 +1,203 @@
+// Adapted (mostly copied) the work of https://github.com/fregante
+// Copyright (c) Federico Brigante <opensource@bfred.it> (bfred.it)
+
+type ReplacerCallback = (substring: string, ...args: unknown[]) => string;
+
+const INDENT = '  ';
+
+export class TextAreaUtils {
+    static insert_text_firefox(
+        field: HTMLTextAreaElement | HTMLInputElement,
+        text: string
+    ): void {
+        // Found on https://www.everythingfrontend.com/posts/insert-text-into-textarea-at-cursor-position.html 🎈
+        field.setRangeText(
+            text,
+            field.selectionStart || 0,
+            field.selectionEnd || 0,
+            'end' // Without this, the cursor is either at the beginning or `text` remains selected
+        );
+
+        field.dispatchEvent(
+            new InputEvent('input', {
+                data: text,
+                inputType: 'insertText',
+                isComposing: false, // TODO: fix @types/jsdom, this shouldn't be required
+            })
+        );
+    }
+
+    /** Inserts `text` at the cursor’s position, replacing any selection, with **undo** support and by firing the `input` event. */
+    static insert(
+        field: HTMLTextAreaElement | HTMLInputElement,
+        text: string
+    ): void {
+        const document = field.ownerDocument;
+        const initialFocus = document.activeElement;
+        if (initialFocus !== field) {
+            field.focus();
+        }
+
+        if (!document.execCommand('insertText', false, text)) {
+            TextAreaUtils.insert_text_firefox(field, text);
+        }
+
+        if (initialFocus === document.body) {
+            field.blur();
+        } else if (
+            initialFocus instanceof HTMLElement &&
+            initialFocus !== field
+        ) {
+            initialFocus.focus();
+        }
+    }
+
+    /** Replaces the entire content, equivalent to `field.value = text` but with **undo** support and by firing the `input` event. */
+    static set(
+        field: HTMLTextAreaElement | HTMLInputElement,
+        text: string
+    ): void {
+        field.select();
+        TextAreaUtils.insert(field, text);
+    }
+
+    /** Get the selected text in a field or an empty string if nothing is selected. */
+    static get_selection(
+        field: HTMLTextAreaElement | HTMLInputElement
+    ): string {
+        const { selectionStart, selectionEnd } = field;
+        return field.value.slice(
+            selectionStart ? selectionStart : undefined,
+            selectionEnd ? selectionEnd : undefined
+        );
+    }
+
+    /** Adds the `wrappingText` before and after field’s selection (or cursor). If `endWrappingText` is provided, it will be used instead of `wrappingText` at on the right. */
+    static wrap_selection(
+        field: HTMLTextAreaElement | HTMLInputElement,
+        wrap: string,
+        wrapEnd?: string
+    ): void {
+        const { selectionStart, selectionEnd } = field;
+        const selection = TextAreaUtils.get_selection(field);
+        TextAreaUtils.insert(field, wrap + selection + (wrapEnd ?? wrap));
+
+        // Restore the selection around the previously-selected text
+        field.selectionStart = (selectionStart || 0) + wrap.length;
+        field.selectionEnd = (selectionEnd || 0) + wrap.length;
+    }
+
+    /** Finds and replaces strings and regex in the field’s value, like `field.value = field.value.replace()` but better */
+    static replace(
+        field: HTMLTextAreaElement | HTMLInputElement,
+        searchValue: string | RegExp,
+        replacer: string | ReplacerCallback
+    ): void {
+        /** Remembers how much each match offset should be adjusted */
+        let drift = 0;
+
+        field.value.replace(searchValue, (...args): string => {
+            // Select current match to replace it later
+            const matchStart = drift + (args[args.length - 2] as number);
+            const matchLength = args[0].length;
+            field.selectionStart = matchStart;
+            field.selectionEnd = matchStart + matchLength;
+
+            const replacement =
+                typeof replacer === 'string' ? replacer : replacer(...args);
+            TextAreaUtils.insert(field, replacement);
+
+            // Select replacement. Without this, the cursor would be after the replacement
+            field.selectionStart = matchStart;
+            drift += replacement.length - matchLength;
+            return replacement;
+        });
+    }
+
+    static find_line_end(value: string, currentEnd: number): number {
+        // Go to the beginning of the last line
+        const lastLineStart = value.lastIndexOf('\n', currentEnd - 1) + 1;
+
+        // There's nothing to unindent after the last cursor, so leave it as is
+        if (value.charAt(lastLineStart) !== '\t') {
+            return currentEnd;
+        }
+
+        return lastLineStart + 1; // Include the first character, which will be a tab
+    }
+
+    static indent(element: HTMLTextAreaElement): void {
+        const { selectionStart, selectionEnd, value } = element;
+        const selectedContrast = value.slice(selectionStart, selectionEnd);
+        // The first line should be indented, even if it starts with `\n`
+        // The last line should only be indented if includes any character after `\n`
+        const lineBreakCount = /\n/g.exec(selectedContrast)?.length;
+
+        if (lineBreakCount && lineBreakCount > 0) {
+            // Select full first line to replace everything at once
+            const firstLineStart =
+                value.lastIndexOf('\n', selectionStart - 1) + 1;
+
+            const newSelection = element.value.slice(
+                firstLineStart,
+                selectionEnd - 1
+            );
+            const indentedText = newSelection.replace(
+                /^|\n/g, // Match all line starts
+                `$&${INDENT}`
+            );
+            const replacementsCount = indentedText.length - newSelection.length;
+
+            // Replace newSelection with indentedText
+            element.setSelectionRange(firstLineStart, selectionEnd - 1);
+            TextAreaUtils.insert(element, indentedText);
+
+            // Restore selection position, including the indentation
+            element.setSelectionRange(
+                selectionStart + 1,
+                selectionEnd + replacementsCount
+            );
+        } else {
+            TextAreaUtils.insert(element, INDENT);
+        }
+    }
+
+    // The first line should always be unindented
+    // The last line should only be unindented if the selection includes any characters after `\n`
+    static unindent(element: HTMLTextAreaElement): void {
+        const { selectionStart, selectionEnd, value } = element;
+
+        // Select the whole first line because it might contain \t
+        const firstLineStart = value.lastIndexOf('\n', selectionStart - 1) + 1;
+        const minimumSelectionEnd = TextAreaUtils.find_line_end(
+            value,
+            selectionEnd
+        );
+
+        const newSelection = element.value.slice(
+            firstLineStart,
+            minimumSelectionEnd
+        );
+        const indentedText = newSelection.replace(/(^|\n)(\t| {1,2})/g, '$1');
+        const replacementsCount = newSelection.length - indentedText.length;
+
+        // Replace newSelection with indentedText
+        element.setSelectionRange(firstLineStart, minimumSelectionEnd);
+        TextAreaUtils.insert(element, indentedText);
+
+        // Restore selection position, including the indentation
+        const firstLineIndentation = /\t| {1,2}/.exec(
+            value.slice(firstLineStart, selectionStart)
+        );
+
+        const difference = firstLineIndentation
+            ? firstLineIndentation[0].length
+            : 0;
+
+        const newSelectionStart = selectionStart - difference;
+        element.setSelectionRange(
+            selectionStart - difference,
+            Math.max(newSelectionStart, selectionEnd - replacementsCount)
+        );
+    }
+}
diff --git a/libs/components/board-shapes/src/shared/text-label.tsx b/libs/components/board-shapes/src/shared/text-label.tsx
new file mode 100644
index 000000000..02dc0056d
--- /dev/null
+++ b/libs/components/board-shapes/src/shared/text-label.tsx
@@ -0,0 +1,281 @@
+import * as React from 'react';
+import { stopPropagation } from './stop-propagation';
+import {
+    GHOSTED_OPACITY,
+    LETTER_SPACING,
+} from '@toeverything/components/board-types';
+import { normalizeText } from './normalize-text';
+import { styled } from '@toeverything/components/ui';
+import { getTextLabelSize } from './get-text-size';
+import { TextAreaUtils } from './text-area-utils';
+
+export interface TextLabelProps {
+    font: string;
+    text: string;
+    color: string;
+    onBlur?: () => void;
+    onChange: (text: string) => void;
+    offsetY?: number;
+    offsetX?: number;
+    scale?: number;
+    isEditing?: boolean;
+}
+
+export const TextLabel = React.memo(function TextLabel({
+    font,
+    text,
+    color,
+    offsetX = 0,
+    offsetY = 0,
+    scale = 1,
+    isEditing = false,
+    onBlur,
+    onChange,
+}: TextLabelProps) {
+    const rInput = React.useRef<HTMLTextAreaElement>(null);
+    const rIsMounted = React.useRef(false);
+
+    const handleChange = React.useCallback(
+        (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+            onChange(normalizeText(e.currentTarget.value));
+        },
+        [onChange]
+    );
+    const handleKeyDown = React.useCallback(
+        (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+            if (e.key === 'Escape') return;
+
+            if (e.key === 'Tab' && text.length === 0) {
+                e.preventDefault();
+                return;
+            }
+
+            if (!(e.key === 'Meta' || e.metaKey)) {
+                e.stopPropagation();
+            } else if (e.key === 'z' && e.metaKey) {
+                if (e.shiftKey) {
+                    document.execCommand('redo', false);
+                } else {
+                    document.execCommand('undo', false);
+                }
+                e.stopPropagation();
+                e.preventDefault();
+                return;
+            }
+
+            if (e.key === 'Tab') {
+                e.preventDefault();
+                if (e.shiftKey) {
+                    TextAreaUtils.unindent(e.currentTarget);
+                } else {
+                    TextAreaUtils.indent(e.currentTarget);
+                }
+
+                onChange?.(normalizeText(e.currentTarget.value));
+            }
+        },
+        [onChange]
+    );
+
+    const handleBlur = React.useCallback(
+        (e: React.FocusEvent<HTMLTextAreaElement>) => {
+            e.currentTarget.setSelectionRange(0, 0);
+            onBlur?.();
+        },
+        [onBlur]
+    );
+
+    const handleFocus = React.useCallback(
+        (e: React.FocusEvent<HTMLTextAreaElement>) => {
+            if (!isEditing) return;
+            if (!rIsMounted.current) return;
+
+            if (document.activeElement === e.currentTarget) {
+                e.currentTarget.select();
+            }
+        },
+        [isEditing]
+    );
+
+    const handlePointerDown = React.useCallback<
+        React.PointerEventHandler<HTMLTextAreaElement>
+    >(
+        e => {
+            if (isEditing) {
+                e.stopPropagation();
+            }
+        },
+        [isEditing]
+    );
+
+    React.useEffect(() => {
+        if (isEditing) {
+            requestAnimationFrame(() => {
+                rIsMounted.current = true;
+                const elm = rInput.current;
+                if (elm) {
+                    elm.focus();
+                    elm.select();
+                }
+            });
+        } else {
+            onBlur?.();
+        }
+    }, [isEditing, onBlur]);
+
+    const rInnerWrapper = React.useRef<HTMLDivElement>(null);
+
+    React.useLayoutEffect(() => {
+        const elm = rInnerWrapper.current;
+        if (!elm) return;
+        const size = getTextLabelSize(text, font);
+        elm.style.transform = `scale(${scale}, ${scale}) translate(${offsetX}px, ${offsetY}px)`;
+        elm.style.width = size[0] + 1 + 'px';
+        elm.style.height = size[1] + 1 + 'px';
+    }, [text, font, offsetY, offsetX, scale]);
+
+    return (
+        <TextWrapper>
+            <InnerWrapper
+                ref={rInnerWrapper}
+                hasText={!!text}
+                isEditing={isEditing}
+                style={{
+                    font,
+                    color,
+                }}
+            >
+                {isEditing ? (
+                    <TextArea
+                        ref={rInput}
+                        style={{
+                            font,
+                            color,
+                        }}
+                        name="text"
+                        tabIndex={-1}
+                        autoComplete="false"
+                        autoCapitalize="false"
+                        autoCorrect="false"
+                        autoSave="false"
+                        autoFocus
+                        placeholder=""
+                        spellCheck="true"
+                        wrap="off"
+                        dir="auto"
+                        datatype="wysiwyg"
+                        defaultValue={text}
+                        color={color}
+                        onFocus={handleFocus}
+                        onChange={handleChange}
+                        onKeyDown={handleKeyDown}
+                        onBlur={handleBlur}
+                        onPointerDown={handlePointerDown}
+                        onContextMenu={stopPropagation}
+                        onCopy={stopPropagation}
+                        onPaste={stopPropagation}
+                        onCut={stopPropagation}
+                    />
+                ) : (
+                    text
+                )}
+                &#8203;
+            </InnerWrapper>
+        </TextWrapper>
+    );
+});
+
+const TextWrapper = styled('div')({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    pointerEvents: 'none',
+    userSelect: 'none',
+    variants: {
+        isGhost: {
+            false: { opacity: 1 },
+            true: { transition: 'opacity .2s', opacity: GHOSTED_OPACITY },
+        },
+    },
+});
+
+const InnerWrapper = styled('div')<{ hasText: boolean; isEditing: boolean }>({
+    position: 'absolute',
+    padding: '4px',
+    zIndex: 1,
+    minHeight: 1,
+    minWidth: 1,
+    lineHeight: 1,
+    letterSpacing: LETTER_SPACING,
+    outline: 0,
+    fontWeight: '500',
+    textAlign: 'center',
+    backfaceVisibility: 'hidden',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+    WebkitTouchCallout: 'none',
+    whiteSpace: 'pre-wrap',
+    overflowWrap: 'break-word',
+
+    variants: {
+        hasText: {
+            false: {
+                pointerEvents: 'none',
+            },
+            true: {
+                pointerEvents: 'all',
+            },
+        },
+        isEditing: {
+            false: {
+                userSelect: 'none',
+            },
+            true: {
+                background: '$boundsBg',
+                userSelect: 'text',
+                WebkitUserSelect: 'text',
+            },
+        },
+    },
+});
+
+const TextArea = styled('textarea')({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    zIndex: 1,
+    width: '100%',
+    height: '100%',
+    border: 'none',
+    padding: '4px',
+    resize: 'none',
+    textAlign: 'inherit',
+    minHeight: 'inherit',
+    minWidth: 'inherit',
+    lineHeight: 'inherit',
+    letterSpacing: 'inherit',
+    outline: 0,
+    fontWeight: 'inherit',
+    overflow: 'hidden',
+    backfaceVisibility: 'hidden',
+    display: 'inline-block',
+    pointerEvents: 'all',
+    background: '$boundsBg',
+    userSelect: 'text',
+    WebkitUserSelect: 'text',
+    fontSmooth: 'always',
+    WebkitFontSmoothing: 'subpixel-antialiased',
+    MozOsxFontSmoothing: 'auto',
+    whiteSpace: 'pre-wrap',
+    overflowWrap: 'break-word',
+
+    '&:focus': {
+        outline: 'none',
+        border: 'none',
+    },
+});
diff --git a/libs/components/board-shapes/src/shared/transform-rectangle.ts b/libs/components/board-shapes/src/shared/transform-rectangle.ts
new file mode 100644
index 000000000..802a857ae
--- /dev/null
+++ b/libs/components/board-shapes/src/shared/transform-rectangle.ts
@@ -0,0 +1,47 @@
+import type { TLBounds, TLShape, TLTransformInfo } from '@tldraw/core';
+import Vec from '@tldraw/vec';
+
+/**
+ * Transform a rectangular shape.
+ * @param shape
+ * @param bounds
+ * @param param2
+ */
+export function transformRectangle<T extends TLShape & { size: number[] }>(
+    shape: T,
+    bounds: TLBounds,
+    { initialShape, transformOrigin, scaleX, scaleY }: TLTransformInfo<T>
+) {
+    if (shape.rotation || initialShape.isAspectRatioLocked) {
+        const size = Vec.toFixed(
+            Vec.mul(
+                initialShape.size,
+                Math.min(Math.abs(scaleX), Math.abs(scaleY))
+            )
+        );
+        const point = Vec.toFixed([
+            bounds.minX +
+                (bounds.width - shape.size[0]) *
+                    (scaleX < 0 ? 1 - transformOrigin[0] : transformOrigin[0]),
+            bounds.minY +
+                (bounds.height - shape.size[1]) *
+                    (scaleY < 0 ? 1 - transformOrigin[1] : transformOrigin[1]),
+        ]);
+        const rotation =
+            (scaleX < 0 && scaleY >= 0) || (scaleY < 0 && scaleX >= 0)
+                ? initialShape.rotation
+                    ? -initialShape.rotation
+                    : 0
+                : initialShape.rotation;
+        return {
+            size,
+            point,
+            rotation,
+        };
+    } else {
+        return {
+            point: Vec.toFixed([bounds.minX, bounds.minY]),
+            size: Vec.toFixed([bounds.width, bounds.height]),
+        };
+    }
+}
diff --git a/libs/components/board-shapes/src/shared/transform-single-rectangle.ts b/libs/components/board-shapes/src/shared/transform-single-rectangle.ts
new file mode 100644
index 000000000..10849b4d9
--- /dev/null
+++ b/libs/components/board-shapes/src/shared/transform-single-rectangle.ts
@@ -0,0 +1,16 @@
+import type { TLBounds, TLShape } from '@tldraw/core';
+import Vec from '@tldraw/vec';
+
+/**
+ * Transform a single rectangular shape.
+ * @param shape
+ * @param bounds
+ */
+export function transformSingleRectangle<
+    T extends TLShape & { size: number[] }
+>(shape: T, bounds: TLBounds) {
+    return {
+        size: Vec.toFixed([bounds.width, bounds.height]),
+        point: Vec.toFixed([bounds.minX, bounds.minY]),
+    };
+}
diff --git a/libs/components/board-shapes/src/triangle-util/TriangleUtil.tsx b/libs/components/board-shapes/src/triangle-util/TriangleUtil.tsx
new file mode 100644
index 000000000..7a5fc6963
--- /dev/null
+++ b/libs/components/board-shapes/src/triangle-util/TriangleUtil.tsx
@@ -0,0 +1,294 @@
+import * as React from 'react';
+import { Utils, SVGContainer, TLBounds } from '@tldraw/core';
+import {
+    TriangleShape,
+    TDShapeType,
+    TDMeta,
+    TDShape,
+    DashStyle,
+    BINDING_DISTANCE,
+    GHOSTED_OPACITY,
+    LABEL_POINT,
+} from '@toeverything/components/board-types';
+import { TDShapeUtil } from '../TDShapeUtil';
+import {
+    defaultStyle,
+    getBoundsRectangle,
+    transformRectangle,
+    transformSingleRectangle,
+    getFontStyle,
+    TextLabel,
+    getShapeStyle,
+} from '../shared';
+import {
+    intersectBoundsPolygon,
+    intersectLineSegmentPolyline,
+    intersectRayLineSegment,
+} from '@tldraw/intersect';
+import Vec from '@tldraw/vec';
+import { getTriangleCentroid, getTrianglePoints } from './triangle-helpers';
+import { styled } from '@toeverything/components/ui';
+import { DrawTriangle } from './components/DrawTriangle';
+import { DashedTriangle } from './components/DashedTriangle';
+import { TriangleBindingIndicator } from './components/TriangleBindingIndicator';
+
+type T = TriangleShape;
+type E = HTMLDivElement;
+
+export class TriangleUtil extends TDShapeUtil<T, E> {
+    type = TDShapeType.Triangle as const;
+
+    override canBind = true;
+
+    override canClone = true;
+
+    override canEdit = true;
+
+    getShape = (props: Partial<T>): T => {
+        return Utils.deepMerge<T>(
+            {
+                id: 'id',
+                type: TDShapeType.Triangle,
+                name: 'Triangle',
+                parentId: 'page',
+                childIndex: 1,
+                point: [0, 0],
+                size: [1, 1],
+                rotation: 0,
+                style: defaultStyle,
+                label: '',
+                labelPoint: [0.5, 0.5],
+                workspace: props.workspace,
+            },
+            props
+        );
+    };
+
+    Component = TDShapeUtil.Component<T, E, TDMeta>(
+        (
+            {
+                shape,
+                bounds,
+                isBinding,
+                isEditing,
+                isSelected,
+                isGhost,
+                meta,
+                events,
+                onShapeChange,
+                onShapeBlur,
+            },
+            ref
+        ) => {
+            const {
+                id,
+                label = '',
+                size,
+                style,
+                labelPoint = LABEL_POINT,
+            } = shape;
+            const font = getFontStyle(style);
+            const styles = getShapeStyle(style, meta.isDarkMode);
+            const Component =
+                style.dash === DashStyle.Draw ? DrawTriangle : DashedTriangle;
+            const handleLabelChange = React.useCallback(
+                (label: string) => onShapeChange?.({ id, label }),
+                [onShapeChange]
+            );
+            const offsetY = React.useMemo(() => {
+                const center = Vec.div(size, 2);
+                const centroid = getTriangleCentroid(size);
+                return (centroid[1] - center[1]) * 0.72;
+            }, [size]);
+            return (
+                <FullWrapper ref={ref} {...events}>
+                    <TextLabel
+                        font={font}
+                        text={label}
+                        color={styles.stroke}
+                        offsetX={(labelPoint[0] - 0.5) * bounds.width}
+                        offsetY={
+                            offsetY + (labelPoint[1] - 0.5) * bounds.height
+                        }
+                        isEditing={isEditing}
+                        onChange={handleLabelChange}
+                        onBlur={onShapeBlur}
+                    />
+                    <SVGContainer
+                        id={shape.id + '_svg'}
+                        opacity={isGhost ? GHOSTED_OPACITY : 1}
+                    >
+                        {isBinding && <TriangleBindingIndicator size={size} />}
+                        <Component
+                            id={id}
+                            style={style}
+                            size={size}
+                            isSelected={isSelected}
+                            isDarkMode={meta.isDarkMode}
+                        />
+                    </SVGContainer>
+                </FullWrapper>
+            );
+        }
+    );
+
+    Indicator = TDShapeUtil.Indicator<T>(({ shape }) => {
+        const { size } = shape;
+        return <polygon points={getTrianglePoints(size).join()} />;
+    });
+
+    private get_points(shape: T) {
+        const {
+            rotation = 0,
+            point: [x, y],
+            size: [w, h],
+        } = shape;
+        return [
+            [x + w / 2, y],
+            [x, y + h],
+            [x + w, y + h],
+        ].map(pt => Vec.rotWith(pt, this.getCenter(shape), rotation));
+    }
+
+    override shouldRender = (prev: T, next: T) => {
+        return (
+            next.size !== prev.size ||
+            next.style !== prev.style ||
+            next.label !== prev.label
+        );
+    };
+
+    getBounds = (shape: T) => {
+        return getBoundsRectangle(shape, this.boundsCache);
+    };
+
+    override getExpandedBounds = (shape: T) => {
+        return Utils.getBoundsFromPoints(
+            getTrianglePoints(shape.size, this.bindingDistance).map(pt =>
+                Vec.add(pt, shape.point)
+            )
+        );
+    };
+
+    override hitTestLineSegment = (
+        shape: T,
+        A: number[],
+        B: number[]
+    ): boolean => {
+        return intersectLineSegmentPolyline(A, B, this.get_points(shape))
+            .didIntersect;
+    };
+
+    override hitTestBounds = (shape: T, bounds: TLBounds): boolean => {
+        return (
+            Utils.boundsContained(this.getBounds(shape), bounds) ||
+            intersectBoundsPolygon(bounds, this.get_points(shape)).length > 0
+        );
+    };
+
+    override getBindingPoint = <K extends TDShape>(
+        shape: T,
+        fromShape: K,
+        point: number[],
+        origin: number[],
+        direction: number[],
+        bindAnywhere: boolean
+    ) => {
+        // Algorithm time! We need to find the binding point (a normalized point inside of the shape, or around the shape, where the arrow will point to) and the distance from the binding shape to the anchor.
+
+        const expandedBounds = this.getExpandedBounds(shape);
+
+        if (!Utils.pointInBounds(point, expandedBounds)) return;
+
+        const points = getTrianglePoints(shape.size).map(pt =>
+            Vec.add(pt, shape.point)
+        );
+
+        const expandedPoints = getTrianglePoints(
+            shape.size,
+            this.bindingDistance
+        ).map(pt => Vec.add(pt, shape.point));
+
+        const closestDistanceToEdge = Utils.pointsToLineSegments(points, true)
+            .map(([a, b]) => Vec.distanceToLineSegment(a, b, point))
+            .sort((a, b) => a - b)[0];
+
+        if (
+            !(
+                Utils.pointInPolygon(point, expandedPoints) ||
+                closestDistanceToEdge < this.bindingDistance
+            )
+        )
+            return;
+
+        const intersections = Utils.pointsToLineSegments(
+            expandedPoints.concat([expandedPoints[0]])
+        )
+            .map(segment =>
+                intersectRayLineSegment(
+                    origin,
+                    direction,
+                    segment[0],
+                    segment[1]
+                )
+            )
+            .filter(intersection => intersection.didIntersect)
+            .flatMap(intersection => intersection.points);
+
+        if (!intersections.length) return;
+
+        // The center of the triangle
+        const center = Vec.add(getTriangleCentroid(shape.size), shape.point);
+
+        // Find furthest intersection between ray from origin through point and expanded bounds. TODO: What if the shape has a curve? In that case, should we intersect the circle-from-three-points instead?
+        const intersection = intersections.sort(
+            (a, b) => Vec.dist(b, origin) - Vec.dist(a, origin)
+        )[0];
+
+        // The point between the handle and the intersection
+        const middlePoint = Vec.med(point, intersection);
+
+        let anchor: number[];
+        let distance: number;
+
+        if (bindAnywhere) {
+            anchor =
+                Vec.dist(point, center) < BINDING_DISTANCE / 2 ? center : point;
+            distance = 0;
+        } else {
+            if (
+                Vec.distanceToLineSegment(point, middlePoint, center) <
+                BINDING_DISTANCE / 2
+            ) {
+                anchor = center;
+            } else {
+                anchor = middlePoint;
+            }
+
+            if (Utils.pointInPolygon(point, points)) {
+                distance = this.bindingDistance;
+            } else {
+                distance = Math.max(
+                    this.bindingDistance,
+                    closestDistanceToEdge
+                );
+            }
+        }
+
+        const bindingPoint = Vec.divV(
+            Vec.sub(anchor, [expandedBounds.minX, expandedBounds.minY]),
+            [expandedBounds.width, expandedBounds.height]
+        );
+
+        return {
+            point: Vec.clampV(bindingPoint, 0, 1),
+            distance,
+        };
+    };
+
+    override transform = transformRectangle;
+
+    override transformSingle = transformSingleRectangle;
+}
+
+const FullWrapper = styled('div')({ width: '100%', height: '100%' });
diff --git a/libs/components/board-shapes/src/triangle-util/components/DashedTriangle.tsx b/libs/components/board-shapes/src/triangle-util/components/DashedTriangle.tsx
new file mode 100644
index 000000000..71b49b626
--- /dev/null
+++ b/libs/components/board-shapes/src/triangle-util/components/DashedTriangle.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { Utils } from '@tldraw/core';
+import type { ShapeStyles } from '@toeverything/components/board-types';
+import { getShapeStyle } from '../../shared';
+import { getTrianglePoints } from '../triangle-helpers';
+import Vec from '@tldraw/vec';
+
+interface TriangleSvgProps {
+    id: string;
+    size: number[];
+    style: ShapeStyles;
+    isSelected: boolean;
+    isDarkMode: boolean;
+}
+
+export const DashedTriangle = React.memo(function DashedTriangle({
+    id,
+    size,
+    style,
+    isSelected,
+    isDarkMode,
+}: TriangleSvgProps) {
+    const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode);
+    const sw = 1 + strokeWidth * 1.618;
+    const points = getTrianglePoints(size);
+    const sides = Utils.pointsToLineSegments(points, true);
+    const paths = sides.map(([start, end], i) => {
+        const { strokeDasharray, strokeDashoffset } = Utils.getPerfectDashProps(
+            Vec.dist(start, end),
+            strokeWidth * 1.618,
+            style.dash
+        );
+
+        return (
+            <line
+                key={id + '_' + i}
+                x1={start[0]}
+                y1={start[1]}
+                x2={end[0]}
+                y2={end[1]}
+                stroke={stroke}
+                strokeWidth={sw}
+                strokeLinecap="round"
+                strokeDasharray={strokeDasharray}
+                strokeDashoffset={strokeDashoffset}
+            />
+        );
+    });
+
+    const bgPath = points.join();
+
+    return (
+        <>
+            <polygon
+                className={
+                    style.isFilled || isSelected
+                        ? 'tl-fill-hitarea'
+                        : 'tl-stroke-hitarea'
+                }
+                points={bgPath}
+            />
+            {style.isFilled && (
+                <polygon fill={fill} points={bgPath} pointerEvents="none" />
+            )}
+            <g pointerEvents="stroke">{paths}</g>
+        </>
+    );
+});
diff --git a/libs/components/board-shapes/src/triangle-util/components/DrawTriangle.tsx b/libs/components/board-shapes/src/triangle-util/components/DrawTriangle.tsx
new file mode 100644
index 000000000..b6a21cc44
--- /dev/null
+++ b/libs/components/board-shapes/src/triangle-util/components/DrawTriangle.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { getShapeStyle } from '../../shared';
+import type { ShapeStyles } from '@toeverything/components/board-types';
+import {
+    getTriangleIndicatorPathTDSnapshot,
+    getTrianglePath,
+} from '../triangle-helpers';
+
+interface TriangleSvgProps {
+    id: string;
+    size: number[];
+    style: ShapeStyles;
+    isSelected: boolean;
+    isDarkMode: boolean;
+}
+
+export const DrawTriangle = React.memo(function DrawTriangle({
+    id,
+    size,
+    style,
+    isSelected,
+    isDarkMode,
+}: TriangleSvgProps) {
+    const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode);
+    const path_td_snapshot = getTrianglePath(id, size, style);
+    const indicatorPath = getTriangleIndicatorPathTDSnapshot(id, size, style);
+    return (
+        <>
+            <path
+                className={
+                    style.isFilled || isSelected
+                        ? 'tl-fill-hitarea'
+                        : 'tl-stroke-hitarea'
+                }
+                d={indicatorPath}
+            />
+            {style.isFilled && (
+                <path d={indicatorPath} fill={fill} pointerEvents="none" />
+            )}
+            <path
+                d={path_td_snapshot}
+                fill={stroke}
+                stroke={stroke}
+                strokeWidth={strokeWidth}
+                pointerEvents="none"
+            />
+        </>
+    );
+});
diff --git a/libs/components/board-shapes/src/triangle-util/components/TriangleBindingIndicator.tsx b/libs/components/board-shapes/src/triangle-util/components/TriangleBindingIndicator.tsx
new file mode 100644
index 000000000..3953d705e
--- /dev/null
+++ b/libs/components/board-shapes/src/triangle-util/components/TriangleBindingIndicator.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { BINDING_DISTANCE } from '@toeverything/components/board-types';
+import { getTrianglePoints } from '../triangle-helpers';
+
+interface TriangleBindingIndicatorProps {
+    size: number[];
+}
+
+export function TriangleBindingIndicator({
+    size,
+}: TriangleBindingIndicatorProps) {
+    const trianglePoints = getTrianglePoints(size).join();
+    return (
+        <polygon
+            className="tl-binding-indicator"
+            points={trianglePoints}
+            strokeWidth={BINDING_DISTANCE * 2}
+        />
+    );
+}
diff --git a/libs/components/board-shapes/src/triangle-util/index.ts b/libs/components/board-shapes/src/triangle-util/index.ts
new file mode 100644
index 000000000..b5e9d8015
--- /dev/null
+++ b/libs/components/board-shapes/src/triangle-util/index.ts
@@ -0,0 +1 @@
+export * from './TriangleUtil';
diff --git a/libs/components/board-shapes/src/triangle-util/triangle-helpers.ts b/libs/components/board-shapes/src/triangle-util/triangle-helpers.ts
new file mode 100644
index 000000000..d1475364d
--- /dev/null
+++ b/libs/components/board-shapes/src/triangle-util/triangle-helpers.ts
@@ -0,0 +1,113 @@
+import { Utils } from '@tldraw/core';
+import Vec from '@tldraw/vec';
+import getStroke, { getStrokePoints } from 'perfect-freehand';
+import type { ShapeStyles } from '@toeverything/components/board-types';
+import { getShapeStyle, getOffsetPolygon } from '../shared';
+
+export function getTrianglePoints(size: number[], offset = 0, rotation = 0) {
+    const [w, h] = size;
+    let points = [
+        [w / 2, 0],
+        [w, h],
+        [0, h],
+    ];
+    if (offset) points = getOffsetPolygon(points, offset);
+    if (rotation)
+        points = points.map(pt => Vec.rotWith(pt, [w / 2, h / 2], rotation));
+
+    return points;
+}
+
+export function getTriangleCentroid(size: number[]) {
+    const [w, h] = size;
+    const points = [
+        [w / 2, 0],
+        [w, h],
+        [0, h],
+    ];
+    return [
+        (points[0][0] + points[1][0] + points[2][0]) / 3,
+        (points[0][1] + points[1][1] + points[2][1]) / 3,
+    ];
+}
+
+function getTriangleDrawPoints(
+    id: string,
+    size: number[],
+    strokeWidth: number
+) {
+    const [w, h] = size;
+    const getRandom = Utils.rng(id);
+    // Random corner offsets
+    const offsets = Array.from(Array(3)).map(() => {
+        return [
+            getRandom() * strokeWidth * 0.75,
+            getRandom() * strokeWidth * 0.75,
+        ];
+    });
+    // Corners
+    const corners = [
+        Vec.add([w / 2, 0], offsets[0]),
+        Vec.add([w, h], offsets[1]),
+        Vec.add([0, h], offsets[2]),
+    ];
+    // Which side to start drawing first
+    const rm = Math.round(Math.abs(getRandom() * 2 * 3));
+    // Number of points per side
+    // Inset each line by the corner radii and let the freehand algo
+    // interpolate points for the corners.
+    const lines = Utils.rotateArray(
+        [
+            Vec.pointsBetween(corners[0], corners[1], 32),
+            Vec.pointsBetween(corners[1], corners[2], 32),
+            Vec.pointsBetween(corners[2], corners[0], 32),
+        ],
+        rm
+    );
+    // For the final points, include the first half of the first line again,
+    // so that the line wraps around and avoids ending on a sharp corner.
+    // This has a bit of finesse and magic—if you change the points between
+    // function, then you'll likely need to change this one too.
+    const points = [...lines.flat(), ...lines[0]];
+    return {
+        points,
+    };
+}
+
+function getDrawStrokeInfo(id: string, size: number[], style: ShapeStyles) {
+    const { strokeWidth } = getShapeStyle(style);
+    const { points } = getTriangleDrawPoints(id, size, strokeWidth);
+    const options = {
+        size: strokeWidth,
+        thinning: 0.65,
+        streamline: 0.3,
+        smoothing: 1,
+        simulatePressure: false,
+        last: true,
+    };
+    return { points, options };
+}
+
+export function getTrianglePath(
+    id: string,
+    size: number[],
+    style: ShapeStyles
+) {
+    const { points, options } = getDrawStrokeInfo(id, size, style);
+    const stroke = getStroke(points, options);
+    return Utils.getSvgPathFromStroke(stroke);
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function getTriangleIndicatorPathTDSnapshot(
+    id: string,
+    size: number[],
+    style: ShapeStyles
+) {
+    const { points, options } = getDrawStrokeInfo(id, size, style);
+    const strokePoints = getStrokePoints(points, options);
+    return Utils.getSvgPathFromStroke(
+        strokePoints.map(pt => pt.point.slice(0, 2)),
+        false
+    );
+}
diff --git a/libs/components/board-shapes/src/video-util/index.ts b/libs/components/board-shapes/src/video-util/index.ts
new file mode 100644
index 000000000..25fabeece
--- /dev/null
+++ b/libs/components/board-shapes/src/video-util/index.ts
@@ -0,0 +1 @@
+export * from './video-util';
diff --git a/libs/components/board-shapes/src/video-util/video-util.tsx b/libs/components/board-shapes/src/video-util/video-util.tsx
new file mode 100644
index 000000000..1e00d830a
--- /dev/null
+++ b/libs/components/board-shapes/src/video-util/video-util.tsx
@@ -0,0 +1,272 @@
+import * as React from 'react';
+import { Utils, HTMLContainer } from '@tldraw/core';
+import {
+    TDShapeType,
+    TDMeta,
+    VideoShape,
+    TDVideoAsset,
+    GHOSTED_OPACITY,
+} from '@toeverything/components/board-types';
+import { TDShapeUtil } from '../TDShapeUtil';
+import {
+    defaultStyle,
+    getBoundsRectangle,
+    transformRectangle,
+    transformSingleRectangle,
+} from '../shared';
+import { styled } from '@toeverything/components/ui';
+
+type T = VideoShape;
+type E = HTMLDivElement;
+
+export class VideoUtil extends TDShapeUtil<T, E> {
+    type = TDShapeType.Video as const;
+    override canBind = true;
+    override canEdit = true;
+    override canClone = true;
+    override isAspectRatioLocked = true;
+    override showCloneHandles = true;
+    override isStateful = true; // don't unmount
+
+    getShape = (props: Partial<T>): T => {
+        return Utils.deepMerge<T>(
+            {
+                id: 'video',
+                type: TDShapeType.Video,
+                name: 'Video',
+                parentId: 'page',
+                childIndex: 1,
+                point: [0, 0],
+                size: [1, 1],
+                rotation: 0,
+                style: defaultStyle,
+                assetId: 'assetId',
+                isPlaying: true,
+                currentTime: 0,
+                workspace: props.workspace,
+            },
+            props
+        );
+    };
+
+    Component = TDShapeUtil.Component<T, E, TDMeta>(
+        (
+            {
+                shape,
+                asset = { src: '' },
+                isBinding,
+                isEditing,
+                isGhost,
+                meta,
+                events,
+                onShapeChange,
+            },
+            ref
+        ) => {
+            const rVideo = React.useRef<HTMLVideoElement>(null);
+            const rWrapper = React.useRef<HTMLDivElement>(null);
+
+            const { currentTime = 0, size, isPlaying, style } = shape;
+
+            React.useLayoutEffect(() => {
+                const wrapper = rWrapper.current;
+                if (!wrapper) return;
+                const [width, height] = size;
+                wrapper.style.width = `${width}px`;
+                wrapper.style.height = `${height}px`;
+            }, [size]);
+
+            React.useLayoutEffect(() => {
+                const video = rVideo.current;
+                if (!video) return;
+                if (isPlaying) video.play();
+                // throws error on safari
+                else video.pause();
+            }, [isPlaying]);
+
+            React.useLayoutEffect(() => {
+                const video = rVideo.current;
+                if (!video) return;
+                if (currentTime !== video.currentTime) {
+                    video.currentTime = currentTime;
+                }
+            }, [currentTime]);
+
+            const handlePlay = React.useCallback(() => {
+                onShapeChange?.({ id: shape.id, isPlaying: true });
+            }, []);
+
+            const handlePause = React.useCallback(() => {
+                onShapeChange?.({ id: shape.id, isPlaying: false });
+            }, []);
+
+            const handleSetCurrentTime = React.useCallback(() => {
+                const video = rVideo.current;
+                if (!video) return;
+                if (!isEditing) return;
+                onShapeChange?.({
+                    id: shape.id,
+                    currentTime: video.currentTime,
+                });
+            }, [isEditing]);
+
+            return (
+                <HTMLContainer ref={ref} {...events}>
+                    {isBinding && (
+                        <div
+                            className="tl-binding-indicator"
+                            style={{
+                                position: 'absolute',
+                                top: -this.bindingDistance,
+                                left: -this.bindingDistance,
+                                width: `calc(100% + ${
+                                    this.bindingDistance * 2
+                                }px)`,
+                                height: `calc(100% + ${
+                                    this.bindingDistance * 2
+                                }px)`,
+                                backgroundColor: 'var(--tl-selectFill)',
+                            }}
+                        />
+                    )}
+                    <Wrapper
+                        ref={rWrapper}
+                        isDarkMode={meta.isDarkMode}
+                        isGhost={isGhost}
+                        isFilled={style.isFilled}
+                    >
+                        <VideoElement
+                            ref={rVideo}
+                            id={shape.id + '_video'}
+                            muted
+                            loop
+                            playsInline
+                            disableRemotePlayback
+                            disablePictureInPicture
+                            controls={isEditing}
+                            autoPlay={isPlaying}
+                            onPlay={handlePlay}
+                            onPause={handlePause}
+                            onTimeUpdate={handleSetCurrentTime}
+                        >
+                            <source src={(asset as TDVideoAsset).src} />
+                        </VideoElement>
+                    </Wrapper>
+                </HTMLContainer>
+            );
+        }
+    );
+
+    Indicator = TDShapeUtil.Indicator<T>(({ shape }) => {
+        const {
+            size: [width, height],
+        } = shape;
+
+        return (
+            <rect
+                x={0}
+                y={0}
+                rx={2}
+                ry={2}
+                width={Math.max(1, width)}
+                height={Math.max(1, height)}
+            />
+        );
+    });
+
+    getBounds = (shape: T) => {
+        return getBoundsRectangle(shape, this.boundsCache);
+    };
+
+    override shouldRender = (prev: T, next: T) => {
+        return (
+            next.size !== prev.size ||
+            next.style !== prev.style ||
+            next.isPlaying !== prev.isPlaying
+        );
+    };
+
+    override getSvgElement = (shape: VideoShape) => {
+        const bounds = this.getBounds(shape);
+        const elm = document.createElementNS(
+            'http://www.w3.org/2000/svg',
+            'image'
+        );
+        elm.setAttribute('width', `${bounds.width}`);
+        elm.setAttribute('height', `${bounds.height}`);
+        elm.setAttribute('xmlns:xlink', `http://www.w3.org/1999/xlink`);
+        return elm;
+    };
+
+    override transform = transformRectangle;
+
+    override transformSingle = transformSingleRectangle;
+}
+
+const Wrapper = styled('div')<{
+    isDarkMode: boolean;
+    isFilled: boolean;
+    isGhost: boolean;
+}>({
+    pointerEvents: 'all',
+    position: 'relative',
+    fontFamily: 'sans-serif',
+    fontSize: '2em',
+    height: '100%',
+    width: '100%',
+    borderRadius: '3px',
+    perspective: '800px',
+    overflow: 'hidden',
+    p: {
+        userSelect: 'none',
+    },
+    img: {
+        userSelect: 'none',
+    },
+    variants: {
+        isGhost: {
+            false: { opacity: 1 },
+            true: { transition: 'opacity .2s', opacity: GHOSTED_OPACITY },
+        },
+        isFilled: {
+            true: {},
+            false: {},
+        },
+        isDarkMode: {
+            true: {},
+            false: {},
+        },
+    },
+    compoundVariants: [
+        {
+            isFilled: true,
+            isDarkMode: true,
+            css: {
+                boxShadow:
+                    '2px 3px 12px -2px rgba(0,0,0,.3), 1px 1px 4px rgba(0,0,0,.3), 1px 1px 2px rgba(0,0,0,.3)',
+            },
+        },
+        {
+            isFilled: true,
+            isDarkMode: false,
+            css: {
+                boxShadow:
+                    '2px 3px 12px -2px rgba(0,0,0,.2), 1px 1px 4px rgba(0,0,0,.16),  1px 1px 2px rgba(0,0,0,.16)',
+            },
+        },
+    ],
+});
+
+const VideoElement = styled('video')({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    maxWidth: '100%',
+    minWidth: '100%',
+    pointerEvents: 'none',
+    objectFit: 'cover',
+    userSelect: 'none',
+    borderRadius: 2,
+});
diff --git a/libs/components/board-shapes/src/white-arrow-util/WhiteArrowUtil.tsx b/libs/components/board-shapes/src/white-arrow-util/WhiteArrowUtil.tsx
new file mode 100644
index 000000000..877fe60f4
--- /dev/null
+++ b/libs/components/board-shapes/src/white-arrow-util/WhiteArrowUtil.tsx
@@ -0,0 +1,301 @@
+import * as React from 'react';
+import { Utils, SVGContainer, TLBounds } from '@tldraw/core';
+import {
+    WhiteArrowShape,
+    TDShapeType,
+    TDMeta,
+    TDShape,
+    DashStyle,
+    BINDING_DISTANCE,
+    GHOSTED_OPACITY,
+    LABEL_POINT,
+} from '@toeverything/components/board-types';
+import { TDShapeUtil } from '../TDShapeUtil';
+import {
+    defaultStyle,
+    getBoundsRectangle,
+    transformRectangle,
+    transformSingleRectangle,
+    getFontStyle,
+    TextLabel,
+    getShapeStyle,
+} from '../shared';
+import {
+    intersectBoundsPolygon,
+    intersectLineSegmentPolyline,
+    intersectRayLineSegment,
+} from '@tldraw/intersect';
+import Vec from '@tldraw/vec';
+import {
+    getWhiteArrowCentroid,
+    getWhiteArrowPoints,
+} from './white-arrow-helpers';
+import { styled } from '@toeverything/components/ui';
+import { DrawWhiteArrow } from './components/DrawWhiteArrow';
+import { DashedWhiteArrow } from './components/DashedWhiteArrow';
+import { WhiteArrowBindingIndicator } from './components/WhiteArrowBindingIndicator';
+
+type T = WhiteArrowShape;
+type E = HTMLDivElement;
+
+export class WhiteArrowUtil extends TDShapeUtil<T, E> {
+    type = TDShapeType.WhiteArrow as const;
+
+    override canBind = true;
+
+    override canClone = true;
+
+    override canEdit = true;
+
+    getShape = (props: Partial<T>): T => {
+        return Utils.deepMerge<T>(
+            {
+                id: 'id',
+                type: TDShapeType.WhiteArrow,
+                name: 'Triangle',
+                parentId: 'page',
+                childIndex: 1,
+                point: [0, 0],
+                size: [1, 1],
+                rotation: 0,
+                style: defaultStyle,
+                label: '',
+                labelPoint: [0.5, 0.5],
+                workspace: props.workspace,
+            },
+            props
+        );
+    };
+
+    Component = TDShapeUtil.Component<T, E, TDMeta>(
+        (
+            {
+                shape,
+                bounds,
+                isBinding,
+                isEditing,
+                isSelected,
+                isGhost,
+                meta,
+                events,
+                onShapeChange,
+                onShapeBlur,
+            },
+            ref
+        ) => {
+            const {
+                id,
+                label = '',
+                size,
+                style,
+                labelPoint = LABEL_POINT,
+            } = shape;
+            const font = getFontStyle(style);
+            const styles = getShapeStyle(style, meta.isDarkMode);
+            const Component =
+                style.dash === DashStyle.Draw
+                    ? DrawWhiteArrow
+                    : DashedWhiteArrow;
+            const handleLabelChange = React.useCallback(
+                (label: string) => onShapeChange?.({ id, label }),
+                [onShapeChange]
+            );
+            const offsetY = React.useMemo(() => {
+                const center = Vec.div(size, 2);
+                const centroid = getWhiteArrowCentroid(size);
+                return (centroid[1] - center[1]) * 0.72;
+            }, [size]);
+            return (
+                <FullWrapper ref={ref} {...events}>
+                    <TextLabel
+                        font={font}
+                        text={label}
+                        color={styles.stroke}
+                        offsetX={(labelPoint[0] - 0.5) * bounds.width}
+                        offsetY={
+                            offsetY + (labelPoint[1] - 0.5) * bounds.height
+                        }
+                        isEditing={isEditing}
+                        onChange={handleLabelChange}
+                        onBlur={onShapeBlur}
+                    />
+                    <SVGContainer
+                        id={shape.id + '_svg'}
+                        opacity={isGhost ? GHOSTED_OPACITY : 1}
+                    >
+                        {isBinding && (
+                            <WhiteArrowBindingIndicator size={size} />
+                        )}
+                        <Component
+                            id={id}
+                            style={style}
+                            size={size}
+                            isSelected={isSelected}
+                            isDarkMode={meta.isDarkMode}
+                        />
+                    </SVGContainer>
+                </FullWrapper>
+            );
+        }
+    );
+
+    Indicator = TDShapeUtil.Indicator<T>(({ shape }) => {
+        const { size } = shape;
+        return <polygon points={getWhiteArrowPoints(size).join()} />;
+    });
+
+    private get_points(shape: T) {
+        const {
+            rotation = 0,
+            point: [x, y],
+            size: [w, h],
+        } = shape;
+        return [
+            [x + w / 2, y],
+            [x, y + h],
+            [x + w, y + h],
+        ].map(pt => Vec.rotWith(pt, this.getCenter(shape), rotation));
+    }
+
+    override shouldRender = (prev: T, next: T) => {
+        return (
+            next.size !== prev.size ||
+            next.style !== prev.style ||
+            next.label !== prev.label
+        );
+    };
+
+    getBounds = (shape: T) => {
+        return getBoundsRectangle(shape, this.boundsCache);
+    };
+
+    override getExpandedBounds = (shape: T) => {
+        return Utils.getBoundsFromPoints(
+            getWhiteArrowPoints(shape.size, this.bindingDistance).map(pt =>
+                Vec.add(pt, shape.point)
+            )
+        );
+    };
+
+    override hitTestLineSegment = (
+        shape: T,
+        A: number[],
+        B: number[]
+    ): boolean => {
+        return intersectLineSegmentPolyline(A, B, this.get_points(shape))
+            .didIntersect;
+    };
+
+    override hitTestBounds = (shape: T, bounds: TLBounds): boolean => {
+        return (
+            Utils.boundsContained(this.getBounds(shape), bounds) ||
+            intersectBoundsPolygon(bounds, this.get_points(shape)).length > 0
+        );
+    };
+
+    override getBindingPoint = <K extends TDShape>(
+        shape: T,
+        fromShape: K,
+        point: number[],
+        origin: number[],
+        direction: number[],
+        bindAnywhere: boolean
+    ) => {
+        // Algorithm time! We need to find the binding point (a normalized point inside of the shape, or around the shape, where the arrow will point to) and the distance from the binding shape to the anchor.
+
+        const expandedBounds = this.getExpandedBounds(shape);
+
+        if (!Utils.pointInBounds(point, expandedBounds)) return;
+
+        const points = getWhiteArrowPoints(shape.size).map(pt =>
+            Vec.add(pt, shape.point)
+        );
+
+        const expandedPoints = getWhiteArrowPoints(
+            shape.size,
+            this.bindingDistance
+        ).map(pt => Vec.add(pt, shape.point));
+
+        const closestDistanceToEdge = Utils.pointsToLineSegments(points, true)
+            .map(([a, b]) => Vec.distanceToLineSegment(a, b, point))
+            .sort((a, b) => a - b)[0];
+
+        if (
+            !(
+                Utils.pointInPolygon(point, expandedPoints) ||
+                closestDistanceToEdge < this.bindingDistance
+            )
+        )
+            return;
+
+        const intersections = Utils.pointsToLineSegments(
+            expandedPoints.concat([expandedPoints[0]])
+        )
+            .map(segment =>
+                intersectRayLineSegment(
+                    origin,
+                    direction,
+                    segment[0],
+                    segment[1]
+                )
+            )
+            .filter(intersection => intersection.didIntersect)
+            .flatMap(intersection => intersection.points);
+
+        if (!intersections.length) return;
+
+        // The center of the triangle
+        const center = Vec.add(getWhiteArrowCentroid(shape.size), shape.point);
+
+        // Find furthest intersection between ray from origin through point and expanded bounds. TODO: What if the shape has a curve? In that case, should we intersect the circle-from-three-points instead?
+        const intersection = intersections.sort(
+            (a, b) => Vec.dist(b, origin) - Vec.dist(a, origin)
+        )[0];
+
+        // The point between the handle and the intersection
+        const middlePoint = Vec.med(point, intersection);
+
+        let anchor: number[];
+        let distance: number;
+
+        if (bindAnywhere) {
+            anchor =
+                Vec.dist(point, center) < BINDING_DISTANCE / 2 ? center : point;
+            distance = 0;
+        } else {
+            if (
+                Vec.distanceToLineSegment(point, middlePoint, center) <
+                BINDING_DISTANCE / 2
+            ) {
+                anchor = center;
+            } else {
+                anchor = middlePoint;
+            }
+
+            if (Utils.pointInPolygon(point, points)) {
+                distance = this.bindingDistance;
+            } else {
+                distance = Math.max(
+                    this.bindingDistance,
+                    closestDistanceToEdge
+                );
+            }
+        }
+
+        const bindingPoint = Vec.divV(
+            Vec.sub(anchor, [expandedBounds.minX, expandedBounds.minY]),
+            [expandedBounds.width, expandedBounds.height]
+        );
+
+        return {
+            point: Vec.clampV(bindingPoint, 0, 1),
+            distance,
+        };
+    };
+
+    override transform = transformRectangle;
+
+    override transformSingle = transformSingleRectangle;
+}
+
+const FullWrapper = styled('div')({ width: '100%', height: '100%' });
diff --git a/libs/components/board-shapes/src/white-arrow-util/components/DashedWhiteArrow.tsx b/libs/components/board-shapes/src/white-arrow-util/components/DashedWhiteArrow.tsx
new file mode 100644
index 000000000..7ad535e69
--- /dev/null
+++ b/libs/components/board-shapes/src/white-arrow-util/components/DashedWhiteArrow.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { Utils } from '@tldraw/core';
+import type { ShapeStyles } from '@toeverything/components/board-types';
+import { getShapeStyle } from '../../shared';
+import { getWhiteArrowPoints } from '../white-arrow-helpers';
+import Vec from '@tldraw/vec';
+
+interface WhiteArrowSvgProps {
+    id: string;
+    size: number[];
+    style: ShapeStyles;
+    isSelected: boolean;
+    isDarkMode: boolean;
+}
+
+export const DashedWhiteArrow = React.memo(function DashedWhiteArrow({
+    id,
+    size,
+    style,
+    isSelected,
+    isDarkMode,
+}: WhiteArrowSvgProps) {
+    const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode);
+    const sw = 1 + strokeWidth * 1.618;
+    const points = getWhiteArrowPoints(size);
+    const sides = Utils.pointsToLineSegments(points, true);
+    const paths = sides.map(([start, end], i) => {
+        const { strokeDasharray, strokeDashoffset } = Utils.getPerfectDashProps(
+            Vec.dist(start, end),
+            strokeWidth * 1.618,
+            style.dash
+        );
+
+        return (
+            <line
+                key={id + '_' + i}
+                x1={start[0]}
+                y1={start[1]}
+                x2={end[0]}
+                y2={end[1]}
+                stroke={stroke}
+                strokeWidth={sw}
+                strokeLinecap="round"
+                strokeDasharray={strokeDasharray}
+                strokeDashoffset={strokeDashoffset}
+            />
+        );
+    });
+
+    const bgPath = points.join();
+
+    return (
+        <>
+            <polygon
+                className={
+                    style.isFilled || isSelected
+                        ? 'tl-fill-hitarea'
+                        : 'tl-stroke-hitarea'
+                }
+                points={bgPath}
+            />
+            {style.isFilled && (
+                <polygon fill={fill} points={bgPath} pointerEvents="none" />
+            )}
+            <g pointerEvents="stroke">{paths}</g>
+        </>
+    );
+});
diff --git a/libs/components/board-shapes/src/white-arrow-util/components/DrawWhiteArrow.tsx b/libs/components/board-shapes/src/white-arrow-util/components/DrawWhiteArrow.tsx
new file mode 100644
index 000000000..352d75683
--- /dev/null
+++ b/libs/components/board-shapes/src/white-arrow-util/components/DrawWhiteArrow.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { getShapeStyle } from '../../shared';
+import type { ShapeStyles } from '@toeverything/components/board-types';
+import {
+    getWhiteArrowIndicatorPathTDSnapshot,
+    getWhiteArrowPath,
+} from '../white-arrow-helpers';
+
+interface WhiteArrowSvgProps {
+    id: string;
+    size: number[];
+    style: ShapeStyles;
+    isSelected: boolean;
+    isDarkMode: boolean;
+}
+
+export const DrawWhiteArrow = React.memo(function DrawTriangle({
+    id,
+    size,
+    style,
+    isSelected,
+    isDarkMode,
+}: WhiteArrowSvgProps) {
+    const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode);
+    const path_td_snapshot = getWhiteArrowPath(id, size, style);
+    const indicatorPath = getWhiteArrowIndicatorPathTDSnapshot(id, size, style);
+    return (
+        <>
+            <path
+                className={
+                    style.isFilled || isSelected
+                        ? 'tl-fill-hitarea'
+                        : 'tl-stroke-hitarea'
+                }
+                d={indicatorPath}
+            />
+            {style.isFilled && (
+                <path d={indicatorPath} fill={fill} pointerEvents="none" />
+            )}
+            <path
+                d={path_td_snapshot}
+                fill={stroke}
+                stroke={stroke}
+                strokeWidth={strokeWidth}
+                pointerEvents="none"
+            />
+        </>
+    );
+});
diff --git a/libs/components/board-shapes/src/white-arrow-util/components/WhiteArrowBindingIndicator.tsx b/libs/components/board-shapes/src/white-arrow-util/components/WhiteArrowBindingIndicator.tsx
new file mode 100644
index 000000000..e5196cf77
--- /dev/null
+++ b/libs/components/board-shapes/src/white-arrow-util/components/WhiteArrowBindingIndicator.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { BINDING_DISTANCE } from '@toeverything/components/board-types';
+import { getWhiteArrowPoints } from '../white-arrow-helpers';
+
+interface TriangleBindingIndicatorProps {
+    size: number[];
+}
+
+export function WhiteArrowBindingIndicator({
+    size,
+}: TriangleBindingIndicatorProps) {
+    const trianglePoints = getWhiteArrowPoints(size).join();
+    return (
+        <polygon
+            className="tl-binding-indicator"
+            points={trianglePoints}
+            strokeWidth={BINDING_DISTANCE * 2}
+        />
+    );
+}
diff --git a/libs/components/board-shapes/src/white-arrow-util/index.ts b/libs/components/board-shapes/src/white-arrow-util/index.ts
new file mode 100644
index 000000000..b9985e168
--- /dev/null
+++ b/libs/components/board-shapes/src/white-arrow-util/index.ts
@@ -0,0 +1 @@
+export * from './WhiteArrowUtil';
diff --git a/libs/components/board-shapes/src/white-arrow-util/white-arrow-helpers.ts b/libs/components/board-shapes/src/white-arrow-util/white-arrow-helpers.ts
new file mode 100644
index 000000000..f05f5b42b
--- /dev/null
+++ b/libs/components/board-shapes/src/white-arrow-util/white-arrow-helpers.ts
@@ -0,0 +1,126 @@
+import { Utils } from '@tldraw/core';
+import Vec from '@tldraw/vec';
+import getStroke, { getStrokePoints } from 'perfect-freehand';
+import type { ShapeStyles } from '@toeverything/components/board-types';
+import { getShapeStyle, getOffsetPolygon } from '../shared';
+function getPonits(w: number, h: number) {
+    return [
+        [w / 2, 0],
+        [w, h / 2],
+        [(w / 4) * 3, h / 2],
+        [(w / 4) * 3, h],
+        [w / 4, h],
+        [w / 4, h / 2],
+        [0, h / 2],
+    ];
+}
+
+export function getWhiteArrowPoints(size: number[], offset = 0, rotation = 0) {
+    const [w, h] = size;
+    let points = getPonits(w, h);
+    if (offset) points = getOffsetPolygon(points, offset);
+    if (rotation)
+        points = points.map(pt => Vec.rotWith(pt, [w / 2, h / 2], rotation));
+
+    return points;
+}
+
+export function getWhiteArrowCentroid(size: number[]) {
+    const [w, h] = size;
+    const points = getPonits(w, h);
+    return [
+        (points[0][0] + points[1][0] + points[2][0]) / 3,
+        (points[0][1] + points[1][1] + points[2][1]) / 3,
+    ];
+}
+
+function getWhiteArrowDrawPoints(
+    id: string,
+    size: number[],
+    strokeWidth: number
+) {
+    const [w, h] = size;
+    const getRandom = Utils.rng(id);
+    // Random corner offsets
+    const offsets = Array.from(Array(7)).map(() => {
+        return [
+            getRandom() * strokeWidth * 0.75,
+            getRandom() * strokeWidth * 0.75,
+        ];
+    });
+    // Corners
+    const point = getPonits(w, h);
+    const corners = [
+        Vec.add(point[0], offsets[0]),
+        Vec.add(point[1], offsets[1]),
+        Vec.add(point[2], offsets[2]),
+        Vec.add(point[3], offsets[3]),
+        Vec.add(point[4], offsets[4]),
+        Vec.add(point[5], offsets[5]),
+        Vec.add(point[6], offsets[6]),
+    ];
+
+    // Which side to start drawing first
+    const rm = Math.round(Math.abs(getRandom() * 2 * 3));
+    // Number of points per side
+    // Inset each line by the corner radii and let the freehand algo
+    // interpolate points for the corners.
+    const lines = Utils.rotateArray(
+        [
+            Vec.pointsBetween(corners[0], corners[1], 32),
+            Vec.pointsBetween(corners[1], corners[2], 32),
+            Vec.pointsBetween(corners[2], corners[3], 32),
+            Vec.pointsBetween(corners[3], corners[4], 32),
+            Vec.pointsBetween(corners[4], corners[5], 32),
+            Vec.pointsBetween(corners[5], corners[6], 32),
+            Vec.pointsBetween(corners[6], corners[0], 32),
+        ],
+        rm
+    );
+    // For the final points, include the first half of the first line again,
+    // so that the line wraps around and avoids ending on a sharp corner.
+    // This has a bit of finesse and magic—if you change the points between
+    // function, then you'll likely need to change this one too.
+    const points = [...lines.flat(), ...lines[0]];
+    return {
+        points,
+    };
+}
+
+function getDrawStrokeInfo(id: string, size: number[], style: ShapeStyles) {
+    const { strokeWidth } = getShapeStyle(style);
+    const { points } = getWhiteArrowDrawPoints(id, size, strokeWidth);
+    const options = {
+        size: strokeWidth,
+        thinning: 0.65,
+        streamline: 0.3,
+        smoothing: 1,
+        simulatePressure: false,
+        last: true,
+    };
+    return { points, options };
+}
+
+export function getWhiteArrowPath(
+    id: string,
+    size: number[],
+    style: ShapeStyles
+) {
+    const { points, options } = getDrawStrokeInfo(id, size, style);
+    const stroke = getStroke(points, options);
+    return Utils.getSvgPathFromStroke(stroke);
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function getWhiteArrowIndicatorPathTDSnapshot(
+    id: string,
+    size: number[],
+    style: ShapeStyles
+) {
+    const { points, options } = getDrawStrokeInfo(id, size, style);
+    const strokePoints = getStrokePoints(points, options);
+    return Utils.getSvgPathFromStroke(
+        strokePoints.map(pt => pt.point.slice(0, 2)),
+        false
+    );
+}
diff --git a/libs/components/board-shapes/tsconfig.json b/libs/components/board-shapes/tsconfig.json
new file mode 100644
index 000000000..dce3dae9a
--- /dev/null
+++ b/libs/components/board-shapes/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/components/board-shapes/tsconfig.lib.json b/libs/components/board-shapes/tsconfig.lib.json
new file mode 100644
index 000000000..6a4378740
--- /dev/null
+++ b/libs/components/board-shapes/tsconfig.lib.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"]
+}
diff --git a/libs/components/board-shapes/tsconfig.spec.json b/libs/components/board-shapes/tsconfig.spec.json
new file mode 100644
index 000000000..24b3ac659
--- /dev/null
+++ b/libs/components/board-shapes/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+    "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"
+    ]
+}
diff --git a/libs/components/board-state/.babelrc b/libs/components/board-state/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/components/board-state/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/components/board-state/.eslintrc.json b/libs/components/board-state/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/components/board-state/.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": {}
+        }
+    ]
+}
diff --git a/libs/components/board-state/README.md b/libs/components/board-state/README.md
new file mode 100644
index 000000000..76b25970f
--- /dev/null
+++ b/libs/components/board-state/README.md
@@ -0,0 +1,7 @@
+# components-board-state
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test components-board-state` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/components/board-state/jest.config.ts b/libs/components/board-state/jest.config.ts
new file mode 100644
index 000000000..5a1ce0621
--- /dev/null
+++ b/libs/components/board-state/jest.config.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+    displayName: 'components-board-state',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/components/board-state',
+};
diff --git a/libs/components/board-state/package.json b/libs/components/board-state/package.json
new file mode 100644
index 000000000..62dc7aeef
--- /dev/null
+++ b/libs/components/board-state/package.json
@@ -0,0 +1,12 @@
+{
+    "name": "@toeverything/components/board-state",
+    "version": "0.0.1",
+    "license": "MIT",
+    "dependencies": {
+        "@tldraw/core": "^1.12.0",
+        "@tldraw/intersect": "^1.7.1",
+        "@tldraw/vec": "^1.7.0",
+        "idb-keyval": "^6.2.0",
+        "zustand": "^3.7.2"
+    }
+}
diff --git a/libs/components/board-state/project.json b/libs/components/board-state/project.json
new file mode 100644
index 000000000..ffd6ab13c
--- /dev/null
+++ b/libs/components/board-state/project.json
@@ -0,0 +1,45 @@
+{
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/components/board-state/src",
+    "projectType": "library",
+    "tags": ["components"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/components/board-state",
+                "tsConfig": "libs/components/board-state/tsconfig.lib.json",
+                "project": "libs/components/board-state/package.json",
+                "entryFile": "libs/components/board-state/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "libs/rollup.config.cjs",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/components/board-state/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/components/board-state/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/components/board-state"],
+            "options": {
+                "jestConfig": "libs/components/board-state/jest.config.ts",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/components/board-state/src/data/browser-fs-access/directory-open.js b/libs/components/board-state/src/data/browser-fs-access/directory-open.js
new file mode 100644
index 000000000..81262c27d
--- /dev/null
+++ b/libs/components/board-state/src/data/browser-fs-access/directory-open.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// @license © 2020 Google LLC. Licensed under the Apache License, Version 2.0.
+
+import supported from './supported.js';
+
+const implementation = !supported
+    ? import('./legacy/directory-open.js')
+    : import('./fs-access/directory-open.js');
+
+/**
+ * For opening directories, dynamically either loads the File System Access API
+ * module or the legacy method.
+ */
+export async function directoryOpen(...args) {
+    return (await implementation).default(...args);
+}
diff --git a/libs/components/board-state/src/data/browser-fs-access/file-open.js b/libs/components/board-state/src/data/browser-fs-access/file-open.js
new file mode 100644
index 000000000..0b5ccd377
--- /dev/null
+++ b/libs/components/board-state/src/data/browser-fs-access/file-open.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// @license © 2020 Google LLC. Licensed under the Apache License, Version 2.0.
+
+import supported from './supported.js';
+
+const implementation = !supported
+    ? import('./legacy/file-open.js')
+    : import('./fs-access/file-open.js');
+
+/**
+ * For opening files, dynamically either loads the File System Access API module
+ * or the legacy method.
+ */
+export async function fileOpen(...args) {
+    return (await implementation).default(...args);
+}
diff --git a/libs/components/board-state/src/data/browser-fs-access/file-save.js b/libs/components/board-state/src/data/browser-fs-access/file-save.js
new file mode 100644
index 000000000..54cfe6545
--- /dev/null
+++ b/libs/components/board-state/src/data/browser-fs-access/file-save.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// @license © 2020 Google LLC. Licensed under the Apache License, Version 2.0.
+
+import supported from './supported.js';
+
+const implementation = !supported
+    ? import('./legacy/file-save.js')
+    : import('./fs-access/file-save.js');
+
+/**
+ * For saving files, dynamically either loads the File System Access API module
+ * or the legacy method.
+ */
+export async function fileSave(...args) {
+    return (await implementation).default(...args);
+}
diff --git a/libs/components/board-state/src/data/browser-fs-access/fs-access/directory-open.js b/libs/components/board-state/src/data/browser-fs-access/fs-access/directory-open.js
new file mode 100644
index 000000000..3f6a3b62e
--- /dev/null
+++ b/libs/components/board-state/src/data/browser-fs-access/fs-access/directory-open.js
@@ -0,0 +1,68 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// @license © 2020 Google LLC. Licensed under the Apache License, Version 2.0.
+
+const getFiles = async (
+    dirHandle,
+    recursive,
+    path = dirHandle.name,
+    skipDirectory
+) => {
+    const dirs = [];
+    const files = [];
+    for (const entry of dirHandle.values()) {
+        const nestedPath = `${path}/${entry.name}`;
+        if (entry.kind === 'file') {
+            files.push(
+                await entry.getFile().then(file => {
+                    file.directoryHandle = dirHandle;
+                    return Object.defineProperty(file, 'webkitRelativePath', {
+                        configurable: true,
+                        enumerable: true,
+                        get: () => nestedPath,
+                    });
+                })
+            );
+        } else if (
+            entry.kind === 'directory' &&
+            recursive &&
+            (!skipDirectory || !skipDirectory(entry))
+        ) {
+            dirs.push(
+                await getFiles(entry, recursive, nestedPath, skipDirectory)
+            );
+        }
+    }
+    return [...(await Promise.all(dirs)).flat(), ...(await Promise.all(files))];
+};
+
+/**
+ * Opens a directory from disk using the File System Access API.
+ * @type { typeof import("../../index").directoryOpen }
+ */
+export default async (options = {}) => {
+    options.recursive = options.recursive || false;
+    const handle = await window.showDirectoryPicker({
+        id: options.id,
+        startIn: options.startIn,
+    });
+    return getFiles(
+        handle,
+        options.recursive,
+        undefined,
+        options.skipDirectory
+    );
+};
diff --git a/libs/components/board-state/src/data/browser-fs-access/fs-access/file-open.js b/libs/components/board-state/src/data/browser-fs-access/fs-access/file-open.js
new file mode 100644
index 000000000..14d082be6
--- /dev/null
+++ b/libs/components/board-state/src/data/browser-fs-access/fs-access/file-open.js
@@ -0,0 +1,58 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// @license © 2020 Google LLC. Licensed under the Apache License, Version 2.0.
+
+const getFileWithHandle = async handle => {
+    const file = await handle.getFile();
+    file.handle = handle;
+    return file;
+};
+
+/**
+ * Opens a file from disk using the File System Access API.
+ * @type { typeof import("../../index").fileOpen }
+ */
+export default async (options = [{}]) => {
+    if (!Array.isArray(options)) {
+        options = [options];
+    }
+    const types = [];
+    options.forEach((option, i) => {
+        types[i] = {
+            description: option.description || '',
+            accept: {},
+        };
+        if (option.mimeTypes) {
+            option.mimeTypes.map(mimeType => {
+                types[i].accept[mimeType] = option.extensions || [];
+            });
+        } else {
+            types[i].accept['*/*'] = option.extensions || [];
+        }
+    });
+    const handleOrHandles = await window.showOpenFilePicker({
+        id: options[0].id,
+        startIn: options[0].startIn,
+        types,
+        multiple: options[0].multiple || false,
+        excludeAcceptAllOption: options[0].excludeAcceptAllOption || false,
+    });
+    const files = await Promise.all(handleOrHandles.map(getFileWithHandle));
+    if (options[0].multiple) {
+        return files;
+    }
+    return files[0];
+};
diff --git a/libs/components/board-state/src/data/browser-fs-access/fs-access/file-save.js b/libs/components/board-state/src/data/browser-fs-access/fs-access/file-save.js
new file mode 100644
index 000000000..44eb8e782
--- /dev/null
+++ b/libs/components/board-state/src/data/browser-fs-access/fs-access/file-save.js
@@ -0,0 +1,93 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// @license © 2020 Google LLC. Licensed under the Apache License, Version 2.0.
+
+/**
+ * Saves a file to disk using the File System Access API.
+ * @type { typeof import("../../index").fileSave }
+ */
+export default async (
+    blobOrResponse,
+    options = [{}],
+    existingHandle = null,
+    throwIfExistingHandleNotGood = false
+) => {
+    if (!Array.isArray(options)) {
+        options = [options];
+    }
+    options[0].fileName = options[0].fileName || 'Untitled';
+    const types = [];
+    options.forEach((option, i) => {
+        types[i] = {
+            description: option.description || '',
+            accept: {},
+        };
+        if (option.mimeTypes) {
+            if (i === 0) {
+                if (blobOrResponse.type) {
+                    option.mimeTypes.push(blobOrResponse.type);
+                } else if (
+                    blobOrResponse.headers &&
+                    blobOrResponse.headers.get('content-type')
+                ) {
+                    option.mimeTypes.push(
+                        blobOrResponse.headers.get('content-type')
+                    );
+                }
+            }
+            option.mimeTypes.map(mimeType => {
+                types[i].accept[mimeType] = option.extensions || [];
+            });
+        } else if (blobOrResponse.type) {
+            types[i].accept[blobOrResponse.type] = option.extensions || [];
+        }
+    });
+    if (existingHandle) {
+        try {
+            // Check if the file still exists.
+            await existingHandle.getFile();
+        } catch (err) {
+            existingHandle = null;
+            if (throwIfExistingHandleNotGood) {
+                throw err;
+            }
+        }
+    }
+    const handle =
+        existingHandle ||
+        (await window.showSaveFilePicker({
+            suggestedName: options[0].fileName,
+            id: options[0].id,
+            startIn: options[0].startIn,
+            types,
+            excludeAcceptAllOption: options[0].excludeAcceptAllOption || false,
+        }));
+    const writable = await handle.createWritable();
+    // Use streaming on the `Blob` if the browser supports it.
+    if ('stream' in blobOrResponse) {
+        const stream = blobOrResponse.stream();
+        await stream.pipeTo(writable);
+        return handle;
+        // Handle passed `ReadableStream`.
+    } else if ('body' in blobOrResponse) {
+        await blobOrResponse.body.pipeTo(writable);
+        return handle;
+    }
+    // Default case of `Blob` passed and `Blob.stream()` not supported.
+    await writable.write(blobOrResponse);
+    await writable.close();
+    return handle;
+};
diff --git a/libs/components/board-state/src/data/browser-fs-access/index.d.ts b/libs/components/board-state/src/data/browser-fs-access/index.d.ts
new file mode 100644
index 000000000..505406859
--- /dev/null
+++ b/libs/components/board-state/src/data/browser-fs-access/index.d.ts
@@ -0,0 +1,242 @@
+/**
+ * Properties shared by all `options` provided to file save and open operations
+ */
+export interface CoreFileOptions {
+    /** Acceptable file extensions. Defaults to [""]. */
+    extensions?: string[];
+    /** Suggested file description. Defaults to "". */
+    description?: string;
+    /** Acceptable MIME types. [] */
+    mimeTypes?: string[];
+}
+
+/**
+ * Properties shared by the _first_ `options` object provided to file save and
+ * open operations (any additional options objects provided to those operations
+ * cannot have these properties)
+ */
+export interface FirstCoreFileOptions extends CoreFileOptions {
+    startIn?: WellKnownDirectory | FileSystemHandle;
+    /** By specifying an ID, the user agent can remember different directories for different IDs. */
+    id?: string;
+    excludeAcceptAllOption?: boolean | false;
+}
+
+/**
+ * The first `options` object passed to file save operations can also specify
+ * a filename
+ */
+export interface FirstFileSaveOptions extends FirstCoreFileOptions {
+    /** Suggested file name. Defaults to "Untitled". */
+    fileName?: string;
+    /**
+     * Configurable cleanup and `Promise` rejector usable with legacy API for
+     * determining when (and reacting if) a user cancels the operation. The
+     * method will be passed a reference to the internal `rejectionHandler` that
+     * can, e.g., be attached to/removed from the window or called after a
+     * timeout. The method should return a function that will be called when
+     * either the user chooses to open a file or the `rejectionHandler` is
+     * called. In the latter case, the returned function will also be passed a
+     * reference to the `reject` callback for the `Promise` returned by
+     * `fileOpen`, so that developers may reject the `Promise` when desired at
+     * that time.
+     * Example rejector:
+     *
+     * const file = await fileOpen({
+     *   legacySetup: (rejectionHandler) => {
+     *     const timeoutId = setTimeout(rejectionHandler, 10_000);
+     *     return (reject) => {
+     *       clearTimeout(timeoutId);
+     *       if (reject) {
+     *         reject('My error message here.');
+     *       }
+     *     };
+     *   },
+     * });
+     *
+     * ToDo: Remove this workaround once
+     *   https://github.com/whatwg/html/issues/6376 is specified and supported.
+     */
+    legacySetup?: (
+        resolve: (value: Blob) => void,
+        rejectionHandler: () => void,
+        anchor: HTMLAnchorElement
+    ) => (reject?: (reason?: any) => void) => void;
+}
+
+/**
+ * The first `options` object passed to file open operations can specify
+ * whether multiple files can be selected (the return type of the operation
+ * will be updated appropriately) and a way of handling cleanup and rejection
+ * for legacy open operations.
+ */
+export interface FirstFileOpenOptions<M extends boolean | undefined>
+    extends FirstCoreFileOptions {
+    /** Allow multiple files to be selected. Defaults to false. */
+    multiple?: M;
+    /**
+     * Configurable cleanup and `Promise` rejector usable with legacy API for
+     * determining when (and reacting if) a user cancels the operation. The
+     * method will be passed a reference to the internal `rejectionHandler` that
+     * can, e.g., be attached to/removed from the window or called after a
+     * timeout. The method should return a function that will be called when
+     * either the user chooses to open a file or the `rejectionHandler` is
+     * called. In the latter case, the returned function will also be passed a
+     * reference to the `reject` callback for the `Promise` returned by
+     * `fileOpen`, so that developers may reject the `Promise` when desired at
+     * that time.
+     * Example rejector:
+     *
+     * const file = await fileOpen({
+     *   legacySetup: (rejectionHandler) => {
+     *     const timeoutId = setTimeout(rejectionHandler, 10_000);
+     *     return (reject) => {
+     *       clearTimeout(timeoutId);
+     *       if (reject) {
+     *         reject('My error message here.');
+     *       }
+     *     };
+     *   },
+     * });
+     *
+     * ToDo: Remove this workaround once
+     *   https://github.com/whatwg/html/issues/6376 is specified and supported.
+     */
+    legacySetup?: (
+        resolve: (
+            value: M extends false | undefined
+                ? FileWithHandle
+                : FileWithHandle[]
+        ) => void,
+        rejectionHandler: () => void,
+        input: HTMLInputElement
+    ) => (reject?: (reason?: any) => void) => void;
+}
+
+/**
+ * Opens file(s) from disk.
+ */
+export function fileOpen<M extends boolean | undefined = false>(
+    options?:
+        | [FirstFileOpenOptions<M>, ...CoreFileOptions[]]
+        | FirstFileOpenOptions<M>
+): M extends false | undefined
+    ? Promise<FileWithHandle>
+    : Promise<FileWithHandle[]>;
+
+export type WellKnownDirectory =
+    | 'desktop'
+    | 'documents'
+    | 'downloads'
+    | 'music'
+    | 'pictures'
+    | 'videos';
+
+/**
+ * Saves a file to disk.
+ * @returns Optional file handle to save in place.
+ */
+export function fileSave(
+    /** To-be-saved `Blob` or `Response` */
+    blobOrResponse: Blob | Response,
+    options?:
+        | [FirstFileSaveOptions, ...CoreFileOptions[]]
+        | FirstFileSaveOptions,
+    /**
+     * A potentially existing file handle for a file to save to. Defaults to
+     * null.
+     */
+    existingHandle?: FileSystemHandle | null,
+    /**
+     * Determines whether to throw (rather than open a new file save dialog)
+     * when existingHandle is no longer good. Defaults to false.
+     */
+    throwIfExistingHandleNotGood?: boolean | false
+): Promise<FileSystemHandle | null>;
+
+/**
+ * Opens a directory from disk using the File System Access API.
+ * @returns Contained files.
+ */
+export function directoryOpen(options?: {
+    /** Whether to recursively get subdirectories. */
+    recursive: boolean;
+    /** Suggested directory in which the file picker opens. */
+    startIn?: WellKnownDirectory | FileSystemHandle;
+    /** By specifying an ID, the user agent can remember different directories for different IDs. */
+    id?: string;
+    /** Callback to determine whether a directory should be entered, return `true` to skip. */
+    skipDirectory?: (
+        fileSystemDirectoryEntry: FileSystemDirectoryEntry
+    ) => boolean;
+    /**
+     * Configurable setup, cleanup and `Promise` rejector usable with legacy API
+     * for determining when (and reacting if) a user cancels the operation. The
+     * method will be passed a reference to the internal `rejectionHandler` that
+     * can, e.g., be attached to/removed from the window or called after a
+     * timeout. The method should return a function that will be called when
+     * either the user chooses to open a file or the `rejectionHandler` is
+     * called. In the latter case, the returned function will also be passed a
+     * reference to the `reject` callback for the `Promise` returned by
+     * `fileOpen`, so that developers may reject the `Promise` when desired at
+     * that time.
+     * Example rejector:
+     *
+     * const file = await directoryOpen({
+     *   legacySetup: (rejectionHandler) => {
+     *     const timeoutId = setTimeout(rejectionHandler, 10_000);
+     *     return (reject) => {
+     *       clearTimeout(timeoutId);
+     *       if (reject) {
+     *         reject('My error message here.');
+     *       }
+     *     };
+     *   },
+     * });
+     *
+     * ToDo: Remove this workaround once
+     *   https://github.com/whatwg/html/issues/6376 is specified and supported.
+     */
+    legacySetup?: (
+        resolve: (value: FileWithDirectoryHandle) => void,
+        rejectionHandler: () => void,
+        input: HTMLInputElement
+    ) => (reject?: (reason?: any) => void) => void;
+}): Promise<FileWithDirectoryHandle[]>;
+
+/**
+ * Whether the File System Access API is supported.
+ */
+export const supported: boolean;
+
+export function imageToBlob(img: HTMLImageElement): Promise<Blob>;
+
+export interface FileWithHandle extends File {
+    handle?: FileSystemHandle;
+}
+
+export interface FileWithDirectoryHandle extends File {
+    directoryHandle?: FileSystemHandle;
+}
+
+// The following typings implement the relevant parts of the File System Access
+// API. This can be removed once the specification reaches the Candidate phase
+// and is implemented as part of microsoft/TSJS-lib-generator.
+
+export interface FileSystemHandlePermissionDescriptor {
+    mode?: 'read' | 'readwrite';
+}
+
+export interface FileSystemHandle {
+    readonly kind: 'file' | 'directory';
+    readonly name: string;
+
+    isSameEntry: (other: FileSystemHandle) => Promise<boolean>;
+
+    queryPermission: (
+        descriptor?: FileSystemHandlePermissionDescriptor
+    ) => Promise<PermissionState>;
+    requestPermission: (
+        descriptor?: FileSystemHandlePermissionDescriptor
+    ) => Promise<PermissionState>;
+}
diff --git a/libs/components/board-state/src/data/browser-fs-access/index.js b/libs/components/board-state/src/data/browser-fs-access/index.js
new file mode 100644
index 000000000..a2f2506fa
--- /dev/null
+++ b/libs/components/board-state/src/data/browser-fs-access/index.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// @license © 2020 Google LLC. Licensed under the Apache License, Version 2.0.
+
+/**
+ * @module browser-fs-access
+ */
+export { fileOpen } from './file-open.js';
+export { directoryOpen } from './directory-open.js';
+export { fileSave } from './file-save.js';
+export { default as supported } from './supported.js';
diff --git a/libs/components/board-state/src/data/browser-fs-access/legacy/directory-open.js b/libs/components/board-state/src/data/browser-fs-access/legacy/directory-open.js
new file mode 100644
index 000000000..c751c654e
--- /dev/null
+++ b/libs/components/board-state/src/data/browser-fs-access/legacy/directory-open.js
@@ -0,0 +1,71 @@
+/* eslint-disable */
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// @license © 2020 Google LLC. Licensed under the Apache License, Version 2.0.
+
+/**
+ * Opens a directory from disk using the legacy
+ * `<input type="file" webkitdirectory>` method.
+ * @type { typeof import("../../index").directoryOpen }
+ */
+export default async (options = [{}]) => {
+    if (!Array.isArray(options)) {
+        options = [options];
+    }
+    options[0].recursive = options[0].recursive || false;
+    return new Promise((resolve, reject) => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.webkitdirectory = true;
+
+        const _reject = () => cleanupListenersAndMaybeReject(reject);
+        const _resolve = value => {
+            if (typeof cleanupListenersAndMaybeReject === 'function') {
+                cleanupListenersAndMaybeReject();
+            }
+            resolve(value);
+        };
+        // ToDo: Remove this workaround once
+        // https://github.com/whatwg/html/issues/6376 is specified and supported.
+        const cleanupListenersAndMaybeReject =
+            options[0].legacySetup &&
+            options[0].legacySetup(_resolve, _reject, input);
+
+        input.addEventListener('change', () => {
+            let files = Array.from(input.files);
+            if (!options[0].recursive) {
+                files = files.filter(file => {
+                    return file.webkitRelativePath.split('/').length === 2;
+                });
+            } else if (options[0].recursive && options[0].skipDirectory) {
+                files = files.filter(file => {
+                    const directoriesName = file.webkitRelativePath.split('/');
+                    return directoriesName.every(
+                        directoryName =>
+                            !options[0].skipDirectory({
+                                name: directoryName,
+                                kind: 'directory',
+                            })
+                    );
+                });
+            }
+
+            _resolve(files);
+        });
+
+        input.click();
+    });
+};
diff --git a/libs/components/board-state/src/data/browser-fs-access/legacy/file-open.js b/libs/components/board-state/src/data/browser-fs-access/legacy/file-open.js
new file mode 100644
index 000000000..325f9484f
--- /dev/null
+++ b/libs/components/board-state/src/data/browser-fs-access/legacy/file-open.js
@@ -0,0 +1,55 @@
+/* eslint-disable */
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// @license © 2020 Google LLC. Licensed under the Apache License, Version 2.0.
+
+/**
+ * Opens a file from disk using the legacy `<input type="file">` method.
+ * @type { typeof import("../../index").fileOpen }
+ */
+export default async (options = [{}]) => {
+    if (!Array.isArray(options)) {
+        options = [options];
+    }
+    return new Promise((resolve, reject) => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        const accept = [
+            ...options.map(option => option.mimeTypes || []).join(),
+            options.map(option => option.extensions || []).join(),
+        ].join();
+        input.multiple = options[0].multiple || false;
+        // Empty string allows everything.
+        input.accept = accept || '';
+        const _reject = () => cleanupListenersAndMaybeReject(reject);
+        const _resolve = value => {
+            if (typeof cleanupListenersAndMaybeReject === 'function') {
+                cleanupListenersAndMaybeReject();
+            }
+            resolve(value);
+        };
+        // ToDo: Remove this workaround once
+        // https://github.com/whatwg/html/issues/6376 is specified and supported.
+        const cleanupListenersAndMaybeReject =
+            options[0].legacySetup &&
+            options[0].legacySetup(_resolve, _reject, input);
+        input.addEventListener('change', () => {
+            _resolve(input.multiple ? Array.from(input.files) : input.files[0]);
+        });
+
+        input.click();
+    });
+};
diff --git a/libs/components/board-state/src/data/browser-fs-access/legacy/file-save.js b/libs/components/board-state/src/data/browser-fs-access/legacy/file-save.js
new file mode 100644
index 000000000..639841f70
--- /dev/null
+++ b/libs/components/board-state/src/data/browser-fs-access/legacy/file-save.js
@@ -0,0 +1,91 @@
+/* eslint-disable */
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// @license © 2020 Google LLC. Licensed under the Apache License, Version 2.0.
+
+/**
+ * Saves a file to disk using the legacy `<a download>` method.
+ * @type { typeof import("../../index").fileSave }
+ */
+export default async (blobOrResponse, options = {}) => {
+    if (Array.isArray(options)) {
+        options = options[0];
+    }
+    const a = document.createElement('a');
+    let data = blobOrResponse;
+    // Handle the case where input is a `ReadableStream`.
+    if ('body' in blobOrResponse) {
+        data = await streamToBlob(
+            blobOrResponse.body,
+            blobOrResponse.headers.get('content-type')
+        );
+    }
+    a.download = options.fileName || 'Untitled';
+    a.href = URL.createObjectURL(data);
+
+    const _reject = () => cleanupListenersAndMaybeReject(reject);
+    const _resolve = () => {
+        if (typeof cleanupListenersAndMaybeReject === 'function') {
+            cleanupListenersAndMaybeReject();
+        }
+    };
+    // ToDo: Remove this workaround once
+    // https://github.com/whatwg/html/issues/6376 is specified and supported.
+    const cleanupListenersAndMaybeReject =
+        options.legacySetup && options.legacySetup(_resolve, _reject, a);
+
+    a.addEventListener('click', () => {
+        // `setTimeout()` due to
+        // https://github.com/LLK/scratch-gui/issues/1783#issuecomment-426286393
+        setTimeout(() => URL.revokeObjectURL(a.href), 30 * 1000);
+        _resolve(null);
+    });
+    a.click();
+    return null;
+};
+
+/**
+ * Converts a passed `ReadableStream` to a `Blob`.
+ * @param {ReadableStream} stream
+ * @param {string} type
+ * @returns {Promise<Blob>}
+ */
+async function streamToBlob(stream, type) {
+    const reader = stream.getReader();
+    const pumpedStream = new ReadableStream({
+        start(controller) {
+            return pump();
+            /**
+             * Recursively pumps data chunks out of the `ReadableStream`.
+             * @type { () => Promise<void> }
+             */
+            async function pump() {
+                return reader.read().then(({ done, value }) => {
+                    if (done) {
+                        controller.close();
+                        return;
+                    }
+                    controller.enqueue(value);
+                    return pump();
+                });
+            }
+        },
+    });
+
+    const res = new Response(pumpedStream);
+    reader.releaseLock();
+    return new Blob([await res.blob()], { type });
+}
diff --git a/libs/components/board-state/src/data/browser-fs-access/supported.js b/libs/components/board-state/src/data/browser-fs-access/supported.js
new file mode 100644
index 000000000..06a34ebdd
--- /dev/null
+++ b/libs/components/board-state/src/data/browser-fs-access/supported.js
@@ -0,0 +1,46 @@
+/* eslint-disable */
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// @license © 2020 Google LLC. Licensed under the Apache License, Version 2.0.
+
+/**
+ * Returns whether the File System Access API is supported and usable in the
+ * current context (for example cross-origin iframes).
+ * @returns {boolean} Returns `true` if the File System Access API is supported and usable, else returns `false`.
+ */
+const supported = (() => {
+    // When running in an SSR environment return `false`.
+    if (typeof self === 'undefined') {
+        return false;
+    }
+    // ToDo: Remove this check once Permissions Policy integration
+    // has happened, tracked in
+    // https://github.com/WICG/file-system-access/issues/245.
+    if ('top' in self && self !== top) {
+        try {
+            // This will succeed on same-origin iframes,
+            // but fail on cross-origin iframes.
+            top.location + '';
+        } catch {
+            return false;
+        }
+    } else if ('showOpenFilePicker' in self) {
+        return 'showOpenFilePicker';
+    }
+    return false;
+})();
+
+export default supported;
diff --git a/libs/components/board-state/src/data/filesystem.spec.ts b/libs/components/board-state/src/data/filesystem.spec.ts
new file mode 100644
index 000000000..c91fdfff9
--- /dev/null
+++ b/libs/components/board-state/src/data/filesystem.spec.ts
@@ -0,0 +1,12 @@
+describe('when saving data to the file system', () => {
+    it.todo('saves a new file in the filesystem');
+    it.todo('saves a new file in the filesystem');
+});
+
+describe('when opening files from file system', () => {
+    it.todo('opens a file and loads it into the document');
+    it.todo('opens an older file, migrates it, and loads it into the document');
+    it.todo(
+        'opens a corrupt file, tries to fix it, and fails without crashing'
+    );
+});
diff --git a/libs/components/board-state/src/data/filesystem.ts b/libs/components/board-state/src/data/filesystem.ts
new file mode 100644
index 000000000..79b6ba6c4
--- /dev/null
+++ b/libs/components/board-state/src/data/filesystem.ts
@@ -0,0 +1,169 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import type { TDDocument, TDFile } from '@toeverything/components/board-types';
+import type { FileSystemHandle } from './browser-fs-access';
+import { get as getFromIdb, set as setToIdb } from 'idb-keyval';
+import {
+    IMAGE_EXTENSIONS,
+    VIDEO_EXTENSIONS,
+} from '@toeverything/components/board-types';
+
+const options = { mode: 'readwrite' as const };
+
+const checkPermissions = async (handle: FileSystemHandle) => {
+    return (
+        (await handle.queryPermission(options)) === 'granted' ||
+        (await handle.requestPermission(options)) === 'granted'
+    );
+};
+
+export async function loadFileHandle() {
+    if (typeof Window === 'undefined' || !('_location' in Window)) return;
+    const fileHandle = await getFromIdb(
+        `Tldraw_file_handle_${window.location.origin}`
+    );
+    if (!fileHandle) return null;
+    return fileHandle;
+}
+
+export async function saveFileHandle(fileHandle: FileSystemHandle | null) {
+    return setToIdb(`Tldraw_file_handle_${window.location.origin}`, fileHandle);
+}
+
+export async function saveToFileSystem(
+    document: TDDocument,
+    fileHandle: FileSystemHandle | null
+) {
+    // Create the saved file data
+    const file: TDFile = {
+        name: document.name || 'New Document',
+        fileHandle: fileHandle ?? null,
+        document,
+        assets: {},
+    };
+
+    // Serialize to JSON
+    const json = JSON.stringify(file, null, 2);
+
+    // Create blob
+    const blob = new Blob([json], {
+        type: 'application/vnd.Tldraw+json',
+    });
+
+    if (fileHandle) {
+        const hasPermissions = await checkPermissions(fileHandle);
+        if (!hasPermissions) return null;
+    }
+
+    // Save to file system
+    // @ts-ignore
+    const browser_fs = await import('./browser-fs-access');
+    const fileSave = browser_fs.fileSave;
+    const newFileHandle = await fileSave(
+        blob,
+        {
+            fileName: `${file.name}.tldr`,
+            description: 'Tldraw File',
+            extensions: [`.tldr`],
+        },
+        fileHandle
+    );
+
+    await saveFileHandle(newFileHandle);
+
+    // Return true
+    return newFileHandle;
+}
+
+export async function openFromFileSystem(): Promise<null | {
+    fileHandle: FileSystemHandle | null;
+    document: TDDocument;
+}> {
+    // Get the blob
+    // @ts-ignore
+    const browser_fs = await import('./browser-fs-access');
+    const fileOpen = browser_fs.fileOpen;
+    const blob = await fileOpen({
+        description: 'Tldraw File',
+        extensions: [`.tldr`],
+        multiple: false,
+    });
+
+    if (!blob) return null;
+
+    // Get JSON from blob
+    const json: string = await new Promise(resolve => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            if (reader.readyState === FileReader.DONE) {
+                resolve(reader.result as string);
+            }
+        };
+        reader.readAsText(blob, 'utf8');
+    });
+
+    // Parse
+    const file: TDFile = JSON.parse(json);
+
+    const fileHandle = blob.handle ?? null;
+
+    await saveFileHandle(fileHandle);
+
+    return {
+        fileHandle,
+        document: file.document,
+    };
+}
+
+export async function openAssetFromFileSystem() {
+    // @ts-ignore
+    const browser_fs = await import('./browser-fs-access');
+    const fileOpen = browser_fs.fileOpen;
+    return fileOpen({
+        description: 'Image or Video',
+        extensions: [...IMAGE_EXTENSIONS, ...VIDEO_EXTENSIONS],
+        multiple: false,
+    });
+}
+
+export function fileToBase64(file: Blob): Promise<string | ArrayBuffer | null> {
+    return new Promise((resolve, reject) => {
+        if (file) {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = error => reject(error);
+            reader.onabort = error => reject(error);
+        }
+    });
+}
+
+export function fileToText(file: Blob): Promise<string | ArrayBuffer | null> {
+    return new Promise((resolve, reject) => {
+        if (file) {
+            const reader = new FileReader();
+            reader.readAsText(file);
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = error => reject(error);
+            reader.onabort = error => reject(error);
+        }
+    });
+}
+
+export function getImageSizeFromSrc(src: string): Promise<number[]> {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve([img.width, img.height]);
+        img.onerror = () => reject(new Error('Could not get image size'));
+        img.src = src;
+    });
+}
+
+export function getVideoSizeFromSrc(src: string): Promise<number[]> {
+    return new Promise((resolve, reject) => {
+        const video = document.createElement('video');
+        video.onloadedmetadata = () =>
+            resolve([video.videoWidth, video.videoHeight]);
+        video.onerror = () => reject(new Error('Could not get video size'));
+        video.src = src;
+    });
+}
diff --git a/libs/components/board-state/src/data/index.ts b/libs/components/board-state/src/data/index.ts
new file mode 100644
index 000000000..6d9a5d19e
--- /dev/null
+++ b/libs/components/board-state/src/data/index.ts
@@ -0,0 +1,3 @@
+export * from './migrate';
+export * from './filesystem';
+export * from './browser-fs-access';
diff --git a/libs/components/board-state/src/data/migrate.spec.ts b/libs/components/board-state/src/data/migrate.spec.ts
new file mode 100644
index 000000000..d26024f1b
--- /dev/null
+++ b/libs/components/board-state/src/data/migrate.spec.ts
@@ -0,0 +1,19 @@
+import type { TDDocument } from '~types';
+import { TldrawApp } from '~state';
+import oldDoc from '~test/documents/old-doc';
+import oldDoc2 from '~test/documents/old-doc-2';
+
+describe('When migrating bindings', () => {
+    it('migrates a document without a version', () => {
+        new TldrawApp().loadDocument(oldDoc as unknown as TDDocument);
+    });
+
+    it('migrates a document with an older version', () => {
+        const app = new TldrawApp().loadDocument(
+            oldDoc2 as unknown as TDDocument
+        );
+        expect(
+            app.getShape('d7ab0a49-3cb3-43ae-3d83-f5cf2f4a510a').style.color
+        ).toBe('black');
+    });
+});
diff --git a/libs/components/board-state/src/data/migrate.ts b/libs/components/board-state/src/data/migrate.ts
new file mode 100644
index 000000000..98eb1dd33
--- /dev/null
+++ b/libs/components/board-state/src/data/migrate.ts
@@ -0,0 +1,152 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import {
+    Decoration,
+    FontStyle,
+    TDDocument,
+    TDShapeType,
+    // TextShape
+} from '@toeverything/components/board-types';
+
+export function migrate(document: TDDocument, newVersion: number): TDDocument {
+    const { version = 0 } = document;
+
+    if (!('assets' in document)) {
+        document.assets = {};
+    }
+
+    // Remove unused assets when loading a document
+    const assetIdsInUse = new Set<string>();
+
+    Object.values(document.pages).forEach(page =>
+        Object.values(page.shapes).forEach(shape => {
+            const { parentId, children, assetId } = shape;
+
+            if (assetId) {
+                assetIdsInUse.add(assetId);
+            }
+
+            // Fix missing parent bug
+            if (parentId !== page.id && !page.shapes[parentId]) {
+                console.warn('Encountered a shape with a missing parent!');
+                shape.parentId = page.id;
+            }
+
+            if (shape.type === TDShapeType.Group && children) {
+                children.forEach(childId => {
+                    if (!page.shapes[childId]) {
+                        console.warn(
+                            'Encountered a parent with a missing child!',
+                            shape.id,
+                            childId
+                        );
+                        children?.splice(children.indexOf(childId), 1);
+                    }
+                });
+
+                // TODO: Remove the shape if it has no children
+            }
+        })
+    );
+
+    Object.keys(document.assets).forEach(assetId => {
+        if (!assetIdsInUse.has(assetId)) {
+            delete document.assets[assetId];
+        }
+    });
+
+    if (version === newVersion) return document;
+
+    // if (version < 14) {
+    //     Object.values(document.pages).forEach(page => {
+    //         Object.values(page.shapes)
+    //             // .filter(shape => shape.type === TDShapeType.Text)
+    //             .forEach(
+    //                 shape =>
+    //                     (shape as TextShape).style.font === FontStyle.Script
+    //             );
+    //     });
+    // }
+
+    // Lowercase styles, move binding meta to binding
+    if (version <= 13) {
+        Object.values(document.pages).forEach(page => {
+            Object.values(page.bindings).forEach(binding => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                Object.assign(binding, (binding as any).meta);
+            });
+
+            Object.values(page.shapes).forEach(shape => {
+                Object.entries(shape.style).forEach(([id, style]) => {
+                    if (typeof style === 'string') {
+                        // @ts-ignore
+                        shape.style[id] = style.toLowerCase();
+                    }
+                });
+
+                if (shape.type === TDShapeType.Arrow) {
+                    if (shape.decorations) {
+                        Object.entries(shape.decorations).forEach(
+                            ([id, decoration]) => {
+                                if ((decoration as unknown) === 'Arrow') {
+                                    shape.decorations = {
+                                        ...shape.decorations,
+                                        [id]: Decoration.Arrow,
+                                    };
+                                }
+                            }
+                        );
+                    }
+                }
+            });
+        });
+    }
+
+    // Add document name and file system handle
+    if (version <= 13.1) {
+        document.name = 'New Document';
+    }
+
+    if (version < 15) {
+        document.assets = {};
+    }
+
+    Object.values(document.pages).forEach(page => {
+        Object.values(page.shapes).forEach(shape => {
+            if (version < 15.2) {
+                if (
+                    shape.type === TDShapeType.Image ||
+                    shape.type === TDShapeType.Video
+                ) {
+                    shape.style.isFilled = true;
+                }
+            }
+
+            if (version < 15.3) {
+                if (
+                    shape.type === TDShapeType.Rectangle ||
+                    shape.type === TDShapeType.Triangle ||
+                    shape.type === TDShapeType.Ellipse ||
+                    shape.type === TDShapeType.Arrow
+                ) {
+                    shape.label = (shape as any).text || '';
+                    shape.labelPoint = [0.5, 0.5];
+                }
+            }
+        });
+    });
+
+    // Cleanup
+    Object.values(document.pageStates).forEach(pageState => {
+        pageState.selectedIds = pageState.selectedIds.filter(id => {
+            return document.pages[pageState.id].shapes[id] !== undefined;
+        });
+        pageState.bindingId = undefined;
+        pageState.editingId = undefined;
+        pageState.hoveredId = undefined;
+        pageState.pointedId = undefined;
+    });
+
+    document.version = newVersion;
+
+    return document;
+}
diff --git a/libs/components/board-state/src/idb-clipboard.ts b/libs/components/board-state/src/idb-clipboard.ts
new file mode 100644
index 000000000..d7f47cc4a
--- /dev/null
+++ b/libs/components/board-state/src/idb-clipboard.ts
@@ -0,0 +1,17 @@
+import { get, set, del } from 'idb-keyval';
+
+// Used for clipboard
+
+const ID = 'tldraw_clipboard';
+
+export async function getClipboard(): Promise<string | undefined> {
+    return get(ID);
+}
+
+export async function setClipboard(item: string): Promise<void> {
+    return set(ID, item);
+}
+
+export function clearClipboard(): Promise<void> {
+    return del(ID);
+}
diff --git a/libs/components/board-state/src/index.ts b/libs/components/board-state/src/index.ts
new file mode 100644
index 000000000..11dcb37c9
--- /dev/null
+++ b/libs/components/board-state/src/index.ts
@@ -0,0 +1,5 @@
+export { TldrawApp } from './tldraw-app';
+export type { TldrawAppCtorProps } from './tldraw-app';
+export { TLDR } from './tldr';
+export { deepCopy } from './manager/deep-copy';
+export { BaseTool, Status as BaseToolStatus } from './types/tool';
diff --git a/libs/components/board-state/src/manager/deep-copy.ts b/libs/components/board-state/src/manager/deep-copy.ts
new file mode 100644
index 000000000..0c6f8186e
--- /dev/null
+++ b/libs/components/board-state/src/manager/deep-copy.ts
@@ -0,0 +1,41 @@
+/**
+ * Deep copy function for TypeScript.
+ * @param T Generic type of target/copied value.
+ * @param target Target value to be copied.
+ * @see Source project, ts-deeply https://github.com/ykdr2017/ts-deepcopy
+ * @see Code pen https://codepen.io/erikvullings/pen/ejyBYg
+ */
+export function deepCopy<T>(target: T): T {
+    if (target === null) {
+        return target;
+    }
+    if (target instanceof Date) {
+        return new Date(target.getTime()) as any;
+    }
+
+    // First part is for array and second part is for Realm.Collection
+    // if (target instanceof Array || typeof (target as any).type === 'string') {
+    if (typeof target === 'object') {
+        if (typeof target[Symbol.iterator as keyof T] === 'function') {
+            const cp = [] as any[];
+            if ((target as any as any[]).length > 0) {
+                for (const arrayMember of target as any as any[]) {
+                    cp.push(deepCopy(arrayMember));
+                }
+            }
+            return cp as any as T;
+        } else {
+            const targetKeys = Object.keys(target);
+            const cp = {} as T;
+            if (targetKeys.length > 0) {
+                for (const key of targetKeys) {
+                    cp[key as keyof T] = deepCopy(target[key as keyof T]);
+                }
+            }
+            return cp;
+        }
+    }
+
+    // Means that object is atomic
+    return target;
+}
diff --git a/libs/components/board-state/src/manager/state-manager.ts b/libs/components/board-state/src/manager/state-manager.ts
new file mode 100644
index 000000000..ae3c757da
--- /dev/null
+++ b/libs/components/board-state/src/manager/state-manager.ts
@@ -0,0 +1,450 @@
+import createVanilla, { StoreApi } from 'zustand/vanilla';
+import create, { UseBoundStore } from 'zustand';
+import * as idb from 'idb-keyval';
+import { deepCopy } from './deep-copy';
+import type { Patch, Command } from '@toeverything/components/board-types';
+import { Utils } from '@tldraw/core';
+
+export class StateManager<T extends Record<string, any>> {
+    /**
+     * An ID used to persist state in indexdb.
+     */
+    protected idb_id?: string;
+
+    /**
+     * The initial state.
+     */
+    private initial_state: T;
+
+    /**
+     * A zustand store that also holds the state.
+     */
+    private store: StoreApi<T>;
+
+    /**
+     * The index of the current command.
+     */
+    protected pointer = -1;
+
+    /**
+     * The current state.
+     */
+    private _state: T;
+
+    /**
+     * The state manager's current status, with regard to restoring persisted state.
+     */
+    private _status: 'loading' | 'ready' = 'loading';
+
+    /**
+     * A stack of commands used for history (undo and redo).
+     */
+    protected stack: Command<T>[] = [];
+
+    /**
+     * A snapshot of the current state.
+     */
+    protected _snapshot: T;
+
+    /* eslint-disable @typescript-eslint/naming-convention */
+    /**
+     * A React hook for accessing the zustand store.
+     */
+    public readonly useStore: UseBoundStore<T>;
+    /* eslint-enable @typescript-eslint/naming-convention */
+
+    /**
+     * A promise that will resolve when the state manager has loaded any peristed state.
+     */
+    public ready: Promise<'none' | 'restored' | 'migrated'>;
+
+    public isPaused = false;
+
+    constructor(
+        initialState: T,
+        id?: string,
+        version?: number,
+        update?: (prev: T, next: T, prevVersion: number) => T
+    ) {
+        this.idb_id = id;
+        this._state = deepCopy(initialState);
+        this._snapshot = deepCopy(initialState);
+        this.initial_state = deepCopy(initialState);
+        this.store = createVanilla(() => this._state);
+        this.useStore = create(this.store);
+
+        this.ready = new Promise<'none' | 'restored' | 'migrated'>(resolve => {
+            let message: 'none' | 'restored' | 'migrated' = 'none';
+
+            if (this.idb_id) {
+                message = 'restored';
+
+                idb.get(this.idb_id)
+                    .then(async saved => {
+                        if (saved) {
+                            let next = saved;
+
+                            if (version) {
+                                const savedVersion = await idb.get<number>(
+                                    id + '_version'
+                                );
+
+                                if (savedVersion && savedVersion < version) {
+                                    next = update
+                                        ? update(
+                                              saved,
+                                              initialState,
+                                              savedVersion
+                                          )
+                                        : initialState;
+
+                                    message = 'migrated';
+                                }
+                            }
+
+                            await idb.set(id + '_version', version || -1);
+
+                            // why is this necessary? but it is...
+                            const prevEmpty =
+                                this._state['appState'].isEmptyCanvas;
+
+                            next = this.migrate(next);
+
+                            this._state = deepCopy(next);
+                            this._snapshot = deepCopy(next);
+
+                            this._state['appState'].isEmptyCanvas = prevEmpty;
+                            this.store.setState(this._state, true);
+                        } else {
+                            await idb.set(id + '_version', version || -1);
+                        }
+                        this._status = 'ready';
+                        resolve(message);
+                    })
+                    .catch(e => console.error(e));
+            } else {
+                // We need to wait for any override to `onReady` to take effect.
+                this._status = 'ready';
+                resolve(message);
+            }
+        }).then(message => {
+            if (this.on_ready) this.on_ready(message);
+            return message;
+        });
+    }
+
+    /**
+     * Save the current state to indexdb.
+     */
+    protected persist = (id?: string): void | Promise<void> => {
+        if (this._status !== 'ready') return;
+
+        if (this.onPersist) {
+            this.onPersist(this._state, id);
+        }
+
+        if (this.idb_id) {
+            return idb
+                .set(this.idb_id, this._state)
+                .catch(e => console.error(e));
+        }
+    };
+
+    /**
+     * Apply a patch to the current state.
+     * This does not effect the undo/redo stack.
+     * This does not persist the state.
+     * @param patch The patch to apply.
+     * @param id (optional) An id for the patch.
+     */
+    private apply_patch = (patch: Patch<T>, id?: string) => {
+        const prev = this._state;
+        const next = Utils.deepMerge(this._state, patch as any);
+        const final = this.cleanup(next, prev, patch, id);
+        if (this.on_state_will_change) {
+            this.on_state_will_change(final, id);
+        }
+        this._state = final;
+        this.store.setState(this._state, true);
+        if (this.on_state_did_change) {
+            this.on_state_did_change(this._state, id);
+        }
+        return this;
+    };
+
+    // Internal API ---------------------------------
+
+    protected migrate = (next: T): T => {
+        return next;
+    };
+
+    /**
+     * Perform any last changes to the state before updating.
+     * Override this on your extending class.
+     * @param nextState The next state.
+     * @param prevState The previous state.
+     * @param patch The patch that was just applied.
+     * @param id (optional) An id for the just-applied patch.
+     * @returns The final new state to apply.
+     */
+    protected cleanup = (
+        nextState: T,
+        prevState: T,
+        patch: Patch<T>,
+        id?: string
+    ): T => nextState;
+
+    /**
+     * A life-cycle method called when the state is about to change.
+     * @param state The next state.
+     * @param id An id for the change.
+     */
+    protected on_state_will_change?: (state: T, id?: string) => void;
+
+    /**
+     * A life-cycle method called when the state has changed.
+     * @param state The next state.
+     * @param id An id for the change.
+     */
+    protected on_state_did_change?: (state: T, id?: string) => void;
+
+    /**
+     * Apply a patch to the current state.
+     * This does not effect the undo/redo stack.
+     * This does not persist the state.
+     * @param patch The patch to apply.
+     * @param id (optional) An id for this patch.
+     */
+    patchState = (patch: Patch<T>, id?: string): this => {
+        this.apply_patch(patch, id);
+        if (this.onPatch) {
+            this.onPatch(this._state, id);
+        }
+        return this;
+    };
+
+    /**
+     * Replace the current state.
+     * This does not effect the undo/redo stack.
+     * This does not persist the state.
+     * @param state The new state.
+     * @param id An id for this change.
+     */
+    protected replace_state = (state: T, id?: string): this => {
+        const final = this.cleanup(state, this._state, state, id);
+        if (this.on_state_will_change) {
+            this.on_state_will_change(final, 'replace');
+        }
+        this._state = final;
+        this.store.setState(this._state, true);
+        if (this.on_state_did_change) {
+            this.on_state_did_change(this._state, 'replace');
+        }
+        return this;
+    };
+
+    /**
+     * Update the state using a Command.
+     * This effects the undo/redo stack.
+     * This persists the state.
+     * @param command The command to apply and add to the undo/redo stack.
+     * @param id (optional) An id for this command.
+     */
+    protected set_state = (command: Command<T>, id = command.id) => {
+        if (this.pointer < this.stack.length - 1) {
+            this.stack = this.stack.slice(0, this.pointer + 1);
+        }
+        this.stack.push({ ...command, id });
+        this.pointer = this.stack.length - 1;
+        this.apply_patch(command.after, id);
+        if (this.onCommand) this.onCommand(this._state, id);
+        this.persist(id);
+        return this;
+    };
+
+    // Public API ---------------------------------
+
+    public pause() {
+        this.isPaused = true;
+    }
+
+    public resume() {
+        this.isPaused = false;
+    }
+
+    /**
+     * A callback fired when the constructor finishes loading any
+     * persisted data.
+     */
+    protected on_ready?: (message: 'none' | 'restored' | 'migrated') => void;
+
+    /**
+     * A callback fired when a patch is applied.
+     */
+    public onPatch?: (state: T, id?: string) => void;
+
+    /**
+     * A callback fired when a patch is applied.
+     */
+    public onCommand?: (state: T, id?: string) => void;
+
+    /**
+     * A callback fired when the state is persisted.
+     */
+    public onPersist?: (state: T, id?: string) => void;
+
+    /**
+     * A callback fired when the state is replaced.
+     */
+    public onReplace?: (state: T) => void;
+
+    /**
+     * A callback fired when the state is reset.
+     */
+    public onReset?: (state: T) => void;
+
+    /**
+     * A callback fired when the history is reset.
+     */
+    public onResetHistory?: (state: T) => void;
+
+    /**
+     * A callback fired when a command is undone.
+     */
+    public onUndo?: (state: T) => void;
+
+    /**
+     * A callback fired when a command is redone.
+     */
+    public onRedo?: (state: T) => void;
+
+    /**
+     * Reset the state to the initial state and reset history.
+     */
+    public reset = () => {
+        if (this.on_state_will_change) {
+            this.on_state_will_change(this.initial_state, 'reset');
+        }
+        this._state = this.initial_state;
+        this.store.setState(this._state, true);
+        this.resetHistory();
+        this.persist('reset');
+        if (this.on_state_did_change) {
+            this.on_state_did_change(this._state, 'reset');
+        }
+        if (this.onReset) {
+            this.onReset(this._state);
+        }
+        return this;
+    };
+
+    /**
+     * Force replace a new undo/redo history. It's your responsibility
+     * to make sure that this is compatible with the current state!
+     * @param history The new array of commands.
+     * @param pointer (optional) The new pointer position.
+     */
+    public replaceHistory = (
+        history: Command<T>[],
+        pointer = history.length - 1
+    ): this => {
+        this.stack = history;
+        this.pointer = pointer;
+        if (this.onReplace) {
+            this.onReplace(this._state);
+        }
+        return this;
+    };
+
+    /**
+     * Reset the history stack (without resetting the state).
+     */
+    public resetHistory = (): this => {
+        this.stack = [];
+        this.pointer = -1;
+        if (this.onResetHistory) {
+            this.onResetHistory(this._state);
+        }
+        return this;
+    };
+
+    /**
+     * Move backward in the undo/redo stack.
+     */
+    public undo = (): this => {
+        if (!this.isPaused) {
+            if (!this.canUndo) return this;
+            const command = this.stack[this.pointer];
+            this.pointer--;
+            this.apply_patch(command.before, `undo`);
+            this.persist('undo');
+        }
+        if (this.onUndo) this.onUndo(this._state);
+        return this;
+    };
+
+    /**
+     * Move forward in the undo/redo stack.
+     */
+    public redo = (): this => {
+        if (!this.isPaused) {
+            if (!this.canRedo) return this;
+            this.pointer++;
+            const command = this.stack[this.pointer];
+            this.apply_patch(command.after, 'redo');
+            this.persist('undo');
+        }
+        if (this.onRedo) this.onRedo(this._state);
+        return this;
+    };
+
+    /**
+     * Save a snapshot of the current state, accessible at `this.snapshot`.
+     */
+    public setSnapshot = (): this => {
+        this._snapshot = { ...this._state };
+        return this;
+    };
+
+    /**
+     * Force the zustand state to update.
+     */
+    public forceUpdate = () => {
+        this.store.setState(this._state, true);
+    };
+
+    /**
+     * Get whether the state manager can undo.
+     */
+    public get canUndo(): boolean {
+        return this.pointer > -1;
+    }
+
+    /**
+     * Get whether the state manager can redo.
+     */
+    public get canRedo(): boolean {
+        return this.pointer < this.stack.length - 1;
+    }
+
+    /**
+     * The current state.
+     */
+    public get state(): T {
+        return this._state;
+    }
+
+    /**
+     * The current status.
+     */
+    public get status(): string {
+        return this._status;
+    }
+
+    /**
+     * The most-recent snapshot.
+     */
+    protected get snapshot(): T {
+        return this._snapshot;
+    }
+}
diff --git a/libs/components/board-state/src/tldr.ts b/libs/components/board-state/src/tldr.ts
new file mode 100644
index 000000000..a96f33317
--- /dev/null
+++ b/libs/components/board-state/src/tldr.ts
@@ -0,0 +1,1425 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { TLBounds, TLTransformInfo, Utils, TLPageState } from '@tldraw/core';
+import {
+    TDSnapshot,
+    ShapesWithProp,
+    TDShape,
+    TDBinding,
+    TDPage,
+    TldrawCommand,
+    TldrawPatch,
+    TDShapeType,
+    ArrowShape,
+    TDHandle,
+    TDExportType,
+    BINDING_DISTANCE,
+} from '@toeverything/components/board-types';
+import { Vec } from '@tldraw/vec';
+import type { TDShapeUtil } from '@toeverything/components/board-shapes';
+import {
+    getShapeUtil,
+    getTrianglePoints,
+} from '@toeverything/components/board-shapes';
+import { deepCopy } from './manager/deep-copy';
+import {
+    intersectRayBounds,
+    intersectRayEllipse,
+    intersectRayLineSegment,
+} from '@tldraw/intersect';
+
+const isDev = process.env['NODE_ENV'] === 'development';
+
+export class TLDR {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    static get_shape_util<T extends TDShape>(type: T['type']): TDShapeUtil<T>;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    static get_shape_util<T extends TDShape>(shape: T): TDShapeUtil<T>;
+    static get_shape_util<T extends TDShape>(shape: T | T['type']) {
+        return getShapeUtil<T>(shape);
+    }
+
+    static get_selected_shapes(data: TDSnapshot, pageId: string) {
+        const page = TLDR.get_page(data, pageId);
+        const selectedIds = TLDR.get_selected_ids(data, pageId);
+        return selectedIds.map(id => page.shapes[id]);
+    }
+
+    static screen_to_world(data: TDSnapshot, point: number[]) {
+        const camera = TLDR.get_page_state(
+            data,
+            data.appState.currentPageId
+        ).camera;
+        return Vec.sub(Vec.div(point, camera.zoom), camera.point);
+    }
+
+    static get_camera_zoom(zoom: number) {
+        return Utils.clamp(zoom, 0.1, 5);
+    }
+
+    static get_page(data: TDSnapshot, pageId: string): TDPage {
+        return data.document.pages[pageId];
+    }
+
+    static get_page_state(data: TDSnapshot, pageId: string): TLPageState {
+        return data.document.pageStates[pageId];
+    }
+
+    static get_selected_ids(data: TDSnapshot, pageId: string): string[] {
+        return TLDR.get_page_state(data, pageId).selectedIds;
+    }
+
+    static get_shapes(data: TDSnapshot, pageId: string): TDShape[] {
+        return Object.values(TLDR.get_page(data, pageId).shapes);
+    }
+
+    static get_camera(data: TDSnapshot, pageId: string): TLPageState['camera'] {
+        return TLDR.get_page_state(data, pageId).camera;
+    }
+
+    static get_shape<T extends TDShape = TDShape>(
+        data: TDSnapshot,
+        shapeId: string,
+        pageId: string
+    ): T {
+        return TLDR.get_page(data, pageId).shapes[shapeId] as T;
+    }
+
+    static get_center<T extends TDShape>(shape: T) {
+        return TLDR.get_shape_util(shape).getCenter(shape);
+    }
+
+    static get_bounds<T extends TDShape>(shape: T) {
+        return TLDR.get_shape_util(shape).getBounds(shape);
+    }
+
+    static get_rotated_bounds<T extends TDShape>(shape: T) {
+        return TLDR.get_shape_util(shape).getRotatedBounds(shape);
+    }
+
+    static get_selected_bounds(data: TDSnapshot): TLBounds {
+        return Utils.getCommonBounds(
+            TLDR.get_selected_shapes(data, data.appState.currentPageId).map(
+                shape => TLDR.get_shape_util(shape).getBounds(shape)
+            )
+        );
+    }
+
+    static get_parent_id(data: TDSnapshot, id: string, pageId: string) {
+        return TLDR.get_shape(data, id, pageId).parentId;
+    }
+
+    // static getPointedId(data: TDSnapshot, id: string, pageId: string): string {
+    //   const page = TLDR.getPage(data, pageId)
+    //   const pageState = TLDR.getPageState(data, data.appState.currentPageId)
+    //   const shape = TLDR.getShape(data, id, pageId)
+    //   if (!shape) return id
+
+    //   return shape.parentId === pageState.currentParentId || shape.parentId === page.id
+    //     ? id
+    //     : TLDR.getPointedId(data, shape.parentId, pageId)
+    // }
+
+    // static getDrilledPointedId(data: TDSnapshot, id: string, pageId: string): string {
+    //   const shape = TLDR.getShape(data, id, pageId)
+    //   const { currentPageId } = data.appState
+    //   const { currentParentId, pointedId } = TLDR.getPageState(data, data.appState.currentPageId)
+
+    //   return shape.parentId === currentPageId ||
+    //     shape.parentId === pointedId ||
+    //     shape.parentId === currentParentId
+    //     ? id
+    //     : TLDR.getDrilledPointedId(data, shape.parentId, pageId)
+    // }
+
+    // static getTopParentId(data: TDSnapshot, id: string, pageId: string): string {
+    //   const page = TLDR.getPage(data, pageId)
+    //   const pageState = TLDR.getPageState(data, pageId)
+    //   const shape = TLDR.getShape(data, id, pageId)
+
+    //   if (shape.parentId === shape.id) {
+    //     throw Error(`Shape has the same id as its parent! ${shape.id}`)
+    //   }
+
+    //   return shape.parentId === page.id || shape.parentId === pageState.currentParentId
+    //     ? id
+    //     : TLDR.getTopParentId(data, shape.parentId, pageId)
+    // }
+
+    // Get an array of a shape id and its descendant shapes' ids
+    static get_document_branch(
+        data: TDSnapshot,
+        id: string,
+        pageId: string
+    ): string[] {
+        const shape = TLDR.get_shape(data, id, pageId);
+
+        if (shape.children === undefined) return [id];
+
+        return [
+            id,
+            ...shape.children.flatMap(childId =>
+                TLDR.get_document_branch(data, childId, pageId)
+            ),
+        ];
+    }
+
+    // Get a deep array of unproxied shapes and their descendants
+    static get_selected_branch_snapshot<K>(
+        data: TDSnapshot,
+        pageId: string,
+        fn: (shape: TDShape) => K
+    ): ({ id: string } & K)[];
+    static get_selected_branch_snapshot(
+        data: TDSnapshot,
+        pageId: string
+    ): TDShape[];
+    static get_selected_branch_snapshot<K>(
+        data: TDSnapshot,
+        pageId: string,
+        fn?: (shape: TDShape) => K
+    ): (TDShape | K)[] {
+        const page = TLDR.get_page(data, pageId);
+
+        const copies = TLDR.get_selected_ids(data, pageId)
+            .flatMap(id =>
+                TLDR.get_document_branch(data, id, pageId).map(
+                    id => page.shapes[id]
+                )
+            )
+            .filter(shape => !shape.isLocked)
+            .map(Utils.deepClone);
+
+        if (fn !== undefined) {
+            return copies.map(shape => ({ id: shape.id, ...fn(shape) }));
+        }
+
+        return copies;
+    }
+
+    // Get a shallow array of unproxied shapes
+    static get_selected_shape_snapshot(
+        data: TDSnapshot,
+        pageId: string
+    ): TDShape[];
+    static get_selected_shape_snapshot<K>(
+        data: TDSnapshot,
+        pageId: string,
+        fn?: (shape: TDShape) => K
+    ): ({ id: string } & K)[];
+    static get_selected_shape_snapshot<K>(
+        data: TDSnapshot,
+        pageId: string,
+        fn?: (shape: TDShape) => K
+    ): (TDShape | K)[] {
+        const copies = TLDR.get_selected_shapes(data, pageId)
+            .filter(shape => !shape.isLocked)
+            .map(Utils.deepClone);
+
+        if (fn !== undefined) {
+            return copies.map(shape => ({ id: shape.id, ...fn(shape) }));
+        }
+
+        return copies;
+    }
+
+    // For a given array of shape ids, an array of all other shapes that may be affected by a mutation to it.
+    // Use this to decide which shapes to clone as before / after for a command.
+    static get_all_effected_shape_ids(
+        data: TDSnapshot,
+        ids: string[],
+        pageId: string
+    ): string[] {
+        const page = TLDR.get_page(data, pageId);
+
+        const visited = new Set(ids);
+
+        ids.forEach(id => {
+            const shape = page.shapes[id];
+
+            // Add descendant shapes
+            function collectDescendants(shape: TDShape): void {
+                if (shape.children === undefined) return;
+                shape.children
+                    .filter(childId => !visited.has(childId))
+                    .forEach(childId => {
+                        visited.add(childId);
+                        collectDescendants(page.shapes[childId]);
+                    });
+            }
+
+            collectDescendants(shape);
+
+            // Add asecendant shapes
+            function collectAscendants(shape: TDShape): void {
+                const parentId = shape.parentId;
+                if (parentId === page.id) return;
+                if (visited.has(parentId)) return;
+                visited.add(parentId);
+                collectAscendants(page.shapes[parentId]);
+            }
+
+            collectAscendants(shape);
+
+            // Add bindings that are to or from any of the visited shapes (this does not have to be recursive)
+            visited.forEach(id => {
+                Object.values(page.bindings)
+                    .filter(
+                        binding => binding.fromId === id || binding.toId === id
+                    )
+                    .forEach(binding =>
+                        visited.add(
+                            binding.fromId === id
+                                ? binding.toId
+                                : binding.fromId
+                        )
+                    );
+            });
+        });
+
+        // Return the unique array of visited shapes
+        return Array.from(visited.values());
+    }
+
+    static get_linked_shape_ids(
+        data: TDSnapshot,
+        pageId: string,
+        direction: 'center' | 'left' | 'right',
+        includeArrows = true
+    ) {
+        const selectedIds = TLDR.get_selected_ids(data, pageId);
+
+        const page = TLDR.get_page(data, pageId);
+
+        const linkedIds = new Set<string>(selectedIds);
+
+        const checkedIds = new Set<string>();
+
+        const idsToCheck = [...selectedIds];
+
+        const arrows = new Set(
+            Object.values(page.shapes).filter(shape => {
+                return (
+                    shape.type === TDShapeType.Arrow &&
+                    (shape.handles.start.bindingId ||
+                        shape.handles?.end.bindingId)
+                );
+            }) as ArrowShape[]
+        );
+
+        while (idsToCheck.length) {
+            const id = idsToCheck.pop();
+
+            if (!(id && arrows.size)) break;
+
+            if (checkedIds.has(id)) continue;
+
+            checkedIds.add(id);
+
+            arrows.forEach(arrow => {
+                const {
+                    handles: {
+                        start: { bindingId: startBindingId },
+                        end: { bindingId: endBindingId },
+                    },
+                } = arrow;
+
+                const startBinding = startBindingId
+                    ? page.bindings[startBindingId]
+                    : null;
+                const endBinding = endBindingId
+                    ? page.bindings[endBindingId]
+                    : null;
+
+                let hit = false;
+
+                if (startBinding && startBinding.toId === id) {
+                    if (direction === 'center') {
+                        hit = true;
+                    } else if (arrow.decorations?.start && endBinding) {
+                        // The arrow is pointing to this shape at its start
+                        hit = direction === 'left';
+                    } else {
+                        // The arrow is pointing away from this shape
+                        hit = direction === 'right';
+                    }
+
+                    if (hit) {
+                        // This arrow is bound to this shape
+                        if (includeArrows) linkedIds.add(arrow.id);
+                        linkedIds.add(id);
+
+                        if (endBinding) {
+                            linkedIds.add(endBinding.toId);
+                            idsToCheck.push(endBinding.toId);
+                        }
+                    }
+                } else if (endBinding && endBinding.toId === id) {
+                    // This arrow is bound to this shape at its end
+                    if (direction === 'center') {
+                        hit = true;
+                    } else if (arrow.decorations?.end && startBinding) {
+                        // The arrow is pointing to this shape
+                        hit = direction === 'left';
+                    } else {
+                        // The arrow is pointing away from this shape
+                        hit = direction === 'right';
+                    }
+
+                    if (hit) {
+                        if (includeArrows) linkedIds.add(arrow.id);
+                        linkedIds.add(id);
+
+                        if (startBinding) {
+                            linkedIds.add(startBinding.toId);
+                            idsToCheck.push(startBinding.toId);
+                        }
+                    }
+                }
+
+                if (
+                    (!startBinding || linkedIds.has(startBinding.toId)) &&
+                    (!endBinding || linkedIds.has(endBinding.toId))
+                ) {
+                    arrows.delete(arrow);
+                }
+            });
+        }
+
+        return Array.from(linkedIds.values());
+    }
+
+    static get_child_index_above(
+        data: TDSnapshot,
+        id: string,
+        pageId: string
+    ): number {
+        const page = data.document.pages[pageId];
+        const shape = page.shapes[id];
+
+        let siblings: TDShape[];
+
+        if (shape.parentId === page.id) {
+            siblings = Object.values(page.shapes)
+                .filter(shape => shape.parentId === page.id)
+                .sort((a, b) => a.childIndex - b.childIndex);
+        } else {
+            const parent = page.shapes[shape.parentId];
+            if (!parent.children) throw Error('No children in parent!');
+            siblings = parent.children
+                .map(childId => page.shapes[childId])
+                .sort((a, b) => a.childIndex - b.childIndex);
+        }
+
+        const index = siblings.indexOf(shape);
+
+        const nextSibling = siblings[index + 1];
+
+        if (!nextSibling) return shape.childIndex + 1;
+
+        return nextSibling.childIndex;
+    }
+
+    /* -------------------------------------------------- */
+    /*                      Mutations                     */
+    /* -------------------------------------------------- */
+
+    static get_before_shape<T extends TDShape>(
+        shape: T,
+        change: Partial<T>
+    ): Partial<T> {
+        return Object.fromEntries(
+            Object.keys(change).map(k => [k, shape[k as keyof T]])
+        ) as Partial<T>;
+    }
+
+    static mutate_shapes<T extends TDShape>(
+        data: TDSnapshot,
+        ids: string[],
+        fn: (shape: T, i: number) => Partial<T> | void,
+        pageId: string
+    ): {
+        before: Record<string, Partial<T>>;
+        after: Record<string, Partial<T>>;
+        data: TDSnapshot;
+    } {
+        const beforeShapes: Record<string, Partial<T>> = {};
+        const afterShapes: Record<string, Partial<T>> = {};
+
+        ids.forEach((id, i) => {
+            const shape = TLDR.get_shape<T>(data, id, pageId);
+            if (shape.isLocked) return;
+
+            const change = fn(shape, i);
+            if (change) {
+                beforeShapes[id] = TLDR.get_before_shape(shape, change);
+                afterShapes[id] = change;
+            }
+        });
+
+        const dataWithMutations = Utils.deepMerge(data, {
+            document: {
+                pages: {
+                    [data.appState.currentPageId]: {
+                        shapes: afterShapes,
+                    },
+                },
+            },
+        });
+
+        return {
+            before: beforeShapes,
+            after: afterShapes,
+            data: dataWithMutations,
+        };
+    }
+
+    static create_shapes(
+        data: TDSnapshot,
+        shapes: TDShape[],
+        pageId: string
+    ): TldrawCommand {
+        const before: TldrawPatch = {
+            document: {
+                pages: {
+                    [pageId]: {
+                        shapes: {
+                            ...Object.fromEntries(
+                                shapes.flatMap(shape => {
+                                    const results: [
+                                        string,
+                                        Partial<TDShape> | undefined
+                                    ][] = [[shape.id, undefined]];
+
+                                    // If the shape is a child of another shape, also save that shape
+                                    if (shape.parentId !== pageId) {
+                                        const parent = TLDR.get_shape(
+                                            data,
+                                            shape.parentId,
+                                            pageId
+                                        );
+                                        if (!parent.children)
+                                            throw Error(
+                                                'No children in parent!'
+                                            );
+                                        results.push([
+                                            parent.id,
+                                            { children: parent.children },
+                                        ]);
+                                    }
+
+                                    return results;
+                                })
+                            ),
+                        },
+                    },
+                },
+            },
+        };
+
+        const after: TldrawPatch = {
+            document: {
+                pages: {
+                    [pageId]: {
+                        shapes: {
+                            shapes: {
+                                ...Object.fromEntries(
+                                    shapes.flatMap(shape => {
+                                        const results: [
+                                            string,
+                                            Partial<TDShape> | undefined
+                                        ][] = [[shape.id, shape]];
+
+                                        // If the shape is a child of a different shape, update its parent
+                                        if (shape.parentId !== pageId) {
+                                            const parent = TLDR.get_shape(
+                                                data,
+                                                shape.parentId,
+                                                pageId
+                                            );
+                                            if (!parent.children)
+                                                throw Error(
+                                                    'No children in parent!'
+                                                );
+                                            results.push([
+                                                parent.id,
+                                                {
+                                                    children: [
+                                                        ...parent.children,
+                                                        shape.id,
+                                                    ],
+                                                },
+                                            ]);
+                                        }
+
+                                        return results;
+                                    })
+                                ),
+                            },
+                        },
+                    },
+                },
+            },
+        };
+
+        return {
+            before,
+            after,
+        };
+    }
+
+    static delete_shapes(
+        data: TDSnapshot,
+        shapes: TDShape[] | string[],
+        pageId?: string
+    ): TldrawCommand {
+        pageId = pageId ? pageId : data.appState.currentPageId;
+
+        const page = TLDR.get_page(data, pageId);
+
+        const shapeIds =
+            typeof shapes[0] === 'string'
+                ? (shapes as string[])
+                : (shapes as TDShape[]).map(shape => shape.id);
+
+        const before: TldrawPatch = {
+            document: {
+                pages: {
+                    [pageId]: {
+                        shapes: {
+                            // These are the shapes that we're going to delete
+                            ...Object.fromEntries(
+                                shapeIds.flatMap(id => {
+                                    const shape = page.shapes[id];
+                                    const results: [
+                                        string,
+                                        Partial<TDShape> | undefined
+                                    ][] = [[shape.id, shape]];
+
+                                    // If the shape is a child of another shape, also add that shape
+                                    if (shape.parentId !== pageId) {
+                                        const parent =
+                                            page.shapes[shape.parentId];
+                                        if (!parent.children)
+                                            throw Error(
+                                                'No children in parent!'
+                                            );
+                                        results.push([
+                                            parent.id,
+                                            { children: parent.children },
+                                        ]);
+                                    }
+
+                                    return results;
+                                })
+                            ),
+                        },
+                        bindings: {
+                            // These are the bindings that we're going to delete
+                            ...Object.fromEntries(
+                                Object.values(page.bindings)
+                                    .filter(binding => {
+                                        return (
+                                            shapeIds.includes(binding.fromId) ||
+                                            shapeIds.includes(binding.toId)
+                                        );
+                                    })
+                                    .map(binding => {
+                                        return [binding.id, binding];
+                                    })
+                            ),
+                        },
+                    },
+                },
+            },
+        };
+
+        const after: TldrawPatch = {
+            document: {
+                pages: {
+                    [pageId]: {
+                        shapes: {
+                            ...Object.fromEntries(
+                                shapeIds.flatMap(id => {
+                                    const shape = page.shapes[id];
+                                    const results: [
+                                        string,
+                                        Partial<TDShape> | undefined
+                                    ][] = [[shape.id, undefined]];
+
+                                    // If the shape is a child of a different shape, update its parent
+                                    if (shape.parentId !== page.id) {
+                                        const parent =
+                                            page.shapes[shape.parentId];
+
+                                        if (!parent.children)
+                                            throw Error(
+                                                'No children in parent!'
+                                            );
+
+                                        results.push([
+                                            parent.id,
+                                            {
+                                                children:
+                                                    parent.children.filter(
+                                                        id => id !== shape.id
+                                                    ),
+                                            },
+                                        ]);
+                                    }
+
+                                    return results;
+                                })
+                            ),
+                        },
+                    },
+                },
+            },
+        };
+
+        return {
+            before,
+            after,
+        };
+    }
+
+    static on_session_complete<T extends TDShape>(shape: T) {
+        const delta = TLDR.get_shape_util(shape).onSessionComplete?.(shape);
+        if (!delta) return shape;
+        return { ...shape, ...delta };
+    }
+
+    static on_children_change<T extends TDShape>(
+        data: TDSnapshot,
+        shape: T,
+        pageId: string
+    ) {
+        if (!shape.children) return;
+
+        const delta = TLDR.get_shape_util(shape).onChildrenChange?.(
+            shape,
+            shape.children.map(id => TLDR.get_shape(data, id, pageId))
+        );
+
+        if (!delta) return shape;
+
+        return { ...shape, ...delta };
+    }
+
+    static update_arrow_bindings(page: TDPage, arrowShape: ArrowShape) {
+        const result = {
+            start: deepCopy(arrowShape.handles.start),
+            end: deepCopy(arrowShape.handles.end),
+        };
+        type HandleInfo = {
+            handle: TDHandle;
+            point: number[]; // in page space
+        } & (
+            | {
+                  isBound: false;
+              }
+            | {
+                  isBound: true;
+                  hasDecoration: boolean;
+                  binding: TDBinding;
+                  util: TDShapeUtil<TDShape, any>;
+                  target: TDShape;
+                  bounds: TLBounds;
+                  expandedBounds: TLBounds;
+                  intersectBounds: TLBounds;
+                  center: number[];
+              }
+        );
+        let start: HandleInfo = {
+            isBound: false,
+            handle: arrowShape.handles.start,
+            point: Vec.add(arrowShape.handles.start.point, arrowShape.point),
+        };
+        let end: HandleInfo = {
+            isBound: false,
+            handle: arrowShape.handles.end,
+            point: Vec.add(arrowShape.handles.end.point, arrowShape.point),
+        };
+        if (arrowShape.handles.start.bindingId) {
+            const hasDecoration = arrowShape.decorations?.start !== undefined;
+            const handle = arrowShape.handles.start;
+            const binding = page.bindings[arrowShape.handles.start.bindingId];
+            if (!binding)
+                throw Error(
+                    "Could not find a binding to match the start handle's bindingId"
+                );
+            const target = page.shapes[binding.toId];
+            const util = TLDR.get_shape_util(target);
+            const bounds = util.getBounds(target);
+            const expandedBounds = util.getExpandedBounds(target);
+            const intersectBounds = hasDecoration
+                ? Utils.expandBounds(bounds, binding.distance)
+                : bounds;
+            const { minX, minY, width, height } = expandedBounds;
+            const anchorPoint = Vec.add(
+                [minX, minY],
+                Vec.mulV(
+                    [width, height],
+                    Vec.rotWith(binding.point, [0.5, 0.5], target.rotation || 0)
+                )
+            );
+            start = {
+                isBound: true,
+                hasDecoration,
+                binding,
+                handle,
+                point: anchorPoint,
+                util,
+                target,
+                bounds,
+                expandedBounds,
+                intersectBounds,
+                center: util.getCenter(target),
+            };
+        }
+        if (arrowShape.handles.end.bindingId) {
+            const hasDecoration = arrowShape.decorations?.end !== undefined;
+            const handle = arrowShape.handles.end;
+            const binding = page.bindings[arrowShape.handles.end.bindingId];
+            if (!binding)
+                throw Error(
+                    "Could not find a binding to match the end handle's bindingId"
+                );
+            const target = page.shapes[binding.toId];
+            const util = TLDR.get_shape_util(target);
+            const bounds = util.getBounds(target);
+            const expandedBounds = util.getExpandedBounds(target);
+            const intersectBounds = hasDecoration
+                ? Utils.expandBounds(bounds, binding.distance)
+                : bounds;
+            const { minX, minY, width, height } = expandedBounds;
+            const anchorPoint = Vec.add(
+                [minX, minY],
+                Vec.mulV(
+                    [width, height],
+                    Vec.rotWith(binding.point, [0.5, 0.5], target.rotation || 0)
+                )
+            );
+            end = {
+                isBound: true,
+                hasDecoration,
+                binding,
+                handle,
+                point: anchorPoint,
+                util,
+                target,
+                bounds,
+                expandedBounds,
+                intersectBounds,
+                center: util.getCenter(target),
+            };
+        }
+
+        for (const ID of ['end', 'start'] as const) {
+            const A = ID === 'start' ? start : end;
+            const B = ID === 'start' ? end : start;
+            if (A.isBound) {
+                if (!A.binding.distance) {
+                    // If the binding distance is zero, then the arrow is bound to a specific point
+                    // in the target shape. The resulting handle should be exactly at that point.
+                    result[ID].point = Vec.sub(A.point, arrowShape.point);
+                } else {
+                    // We'll need to figure out the handle's true point based on some intersections
+                    // between the opposite handle point and this handle point. This is different
+                    // for each type of shape.
+                    const direction = Vec.uni(Vec.sub(A.point, B.point));
+                    switch (A.target.type) {
+                        case TDShapeType.Ellipse: {
+                            const hits = intersectRayEllipse(
+                                B.point,
+                                direction,
+                                A.center,
+                                A.target.radius[0] +
+                                    (A.hasDecoration ? A.binding.distance : 0),
+                                A.target.radius[1] +
+                                    (A.hasDecoration ? A.binding.distance : 0),
+                                A.target.rotation || 0
+                            ).points.sort(
+                                (a, b) =>
+                                    Vec.dist(a, B.point) - Vec.dist(b, B.point)
+                            );
+                            if (hits[0] !== undefined) {
+                                result[ID].point = Vec.toFixed(
+                                    Vec.sub(hits[0], arrowShape.point)
+                                );
+                            }
+                            break;
+                        }
+                        case TDShapeType.Triangle: {
+                            const targetPoint = A.target.point;
+                            const points = getTrianglePoints(
+                                A.target.size,
+                                A.hasDecoration ? BINDING_DISTANCE : 0,
+                                A.target.rotation
+                            ).map(pt => Vec.add(pt, targetPoint));
+                            const hits = Utils.pointsToLineSegments(
+                                points,
+                                true
+                            )
+                                .map(([p0, p1]) =>
+                                    intersectRayLineSegment(
+                                        B.point,
+                                        direction,
+                                        p0,
+                                        p1
+                                    )
+                                )
+                                .filter(
+                                    intersection => intersection.didIntersect
+                                )
+                                .flatMap(intersection => intersection.points)
+                                .sort(
+                                    (a, b) =>
+                                        Vec.dist(a, B.point) -
+                                        Vec.dist(b, B.point)
+                                );
+                            if (hits[0] !== undefined) {
+                                result[ID].point = Vec.toFixed(
+                                    Vec.sub(hits[0], arrowShape.point)
+                                );
+                            }
+                            break;
+                        }
+                        default: {
+                            const hits = intersectRayBounds(
+                                B.point,
+                                direction,
+                                A.intersectBounds,
+                                A.target.rotation
+                            )
+                                .filter(int => int.didIntersect)
+                                .map(int => int.points[0])
+                                .sort(
+                                    (a, b) =>
+                                        Vec.dist(a, B.point) -
+                                        Vec.dist(b, B.point)
+                                );
+                            if (!hits[0]) continue;
+                            let bHit: number[] | undefined = undefined;
+                            if (B.isBound) {
+                                const bHits = intersectRayBounds(
+                                    B.point,
+                                    direction,
+                                    B.intersectBounds,
+                                    B.target.rotation
+                                )
+                                    .filter(int => int.didIntersect)
+                                    .map(int => int.points[0])
+                                    .sort(
+                                        (a, b) =>
+                                            Vec.dist(a, B.point) -
+                                            Vec.dist(b, B.point)
+                                    );
+                                bHit = bHits[0];
+                            }
+                            if (
+                                B.isBound &&
+                                (hits.length < 2 ||
+                                    (bHit &&
+                                        hits[0] &&
+                                        Math.ceil(Vec.dist(hits[0], bHit)) <
+                                            BINDING_DISTANCE * 2.5) ||
+                                    Utils.boundsContain(
+                                        A.expandedBounds,
+                                        B.expandedBounds
+                                    ) ||
+                                    Utils.boundsCollide(
+                                        A.expandedBounds,
+                                        B.expandedBounds
+                                    ))
+                            ) {
+                                // If the other handle is bound, and if we need to fallback to the short arrow method...
+                                const shortArrowDirection = Vec.uni(
+                                    Vec.sub(B.point, A.point)
+                                );
+                                const shortArrowHits = intersectRayBounds(
+                                    A.point,
+                                    shortArrowDirection,
+                                    A.bounds,
+                                    A.target.rotation
+                                )
+                                    .filter(int => int.didIntersect)
+                                    .map(int => int.points[0]);
+                                if (!shortArrowHits[0]) continue;
+                                result[ID].point = Vec.toFixed(
+                                    Vec.sub(shortArrowHits[0], arrowShape.point)
+                                );
+                                result[ID === 'start' ? 'end' : 'start'].point =
+                                    Vec.toFixed(
+                                        Vec.add(
+                                            Vec.sub(
+                                                shortArrowHits[0],
+                                                arrowShape.point
+                                            ),
+                                            Vec.mul(
+                                                shortArrowDirection,
+                                                Math.min(
+                                                    Vec.dist(
+                                                        shortArrowHits[0],
+                                                        B.point
+                                                    ),
+                                                    BINDING_DISTANCE *
+                                                        2.5 *
+                                                        (Utils.boundsContain(
+                                                            B.bounds,
+                                                            A.intersectBounds
+                                                        )
+                                                            ? -1
+                                                            : 1)
+                                                )
+                                            )
+                                        )
+                                    );
+                            } else if (
+                                !B.isBound &&
+                                ((hits[0] &&
+                                    Vec.dist(hits[0], B.point) <
+                                        BINDING_DISTANCE * 2.5) ||
+                                    Utils.pointInBounds(
+                                        B.point,
+                                        A.intersectBounds
+                                    ))
+                            ) {
+                                // Short arrow time!
+                                const shortArrowDirection = Vec.uni(
+                                    Vec.sub(A.center, B.point)
+                                );
+                                return TLDR.get_shape_util<ArrowShape>(
+                                    arrowShape
+                                ).onHandleChange?.(arrowShape, {
+                                    [ID]: {
+                                        ...arrowShape.handles[ID],
+                                        point: Vec.toFixed(
+                                            Vec.add(
+                                                Vec.sub(
+                                                    B.point,
+                                                    arrowShape.point
+                                                ),
+                                                Vec.mul(
+                                                    shortArrowDirection,
+                                                    BINDING_DISTANCE * 2.5
+                                                )
+                                            )
+                                        ),
+                                    },
+                                });
+                            } else if (hits[0]) {
+                                result[ID].point = Vec.toFixed(
+                                    Vec.sub(hits[0], arrowShape.point)
+                                );
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        return TLDR.get_shape_util<ArrowShape>(arrowShape).onHandleChange?.(
+            arrowShape,
+            result
+        );
+    }
+
+    static transform<T extends TDShape>(
+        shape: T,
+        bounds: TLBounds,
+        info: TLTransformInfo<T>
+    ) {
+        const delta = TLDR.get_shape_util(shape).transform(shape, bounds, info);
+        if (!delta) return shape;
+        return { ...shape, ...delta };
+    }
+
+    static transform_single<T extends TDShape>(
+        shape: T,
+        bounds: TLBounds,
+        info: TLTransformInfo<T>
+    ) {
+        const delta = TLDR.get_shape_util(shape).transformSingle(
+            shape,
+            bounds,
+            info
+        );
+        if (!delta) return shape;
+        return { ...shape, ...delta };
+    }
+
+    /**
+     * Rotate a shape around an origin point.
+     * @param shape a shape.
+     * @param center the shape's center in page space.
+     * @param origin the page point to rotate around.
+     * @param rotation the amount to rotate the shape.
+     */
+    static get_rotated_shape_mutation<T extends TDShape>(
+        shape: T, // in page space
+        center: number[], // in page space
+        origin: number[], // in page space (probably the center of common bounds)
+        delta: number // The shape's rotation delta
+    ): Partial<T> | void {
+        // The shape's center relative to the shape's point
+        const relativeCenter = Vec.sub(center, shape.point);
+
+        // Rotate the center around the origin
+        const rotatedCenter = Vec.rotWith(center, origin, delta);
+
+        // Get the top left point relative to the rotated center
+        const nextPoint = Vec.toFixed(Vec.sub(rotatedCenter, relativeCenter));
+
+        // If the shape has handles, we need to rotate the handles instead
+        // of rotating the shape. Shapes with handles should never be rotated,
+        // because that makes a lot of other things incredible difficult.
+        if (shape.handles !== undefined) {
+            const change = this.get_shape_util(shape).onHandleChange?.(
+                // Base the change on a shape with the next point
+                { ...shape, point: nextPoint },
+                Object.fromEntries(
+                    Object.entries(shape.handles).map(([handleId, handle]) => {
+                        // Rotate each handle's point around the shape's center
+                        // (in relative shape space, as the handle's point will be).
+                        const point = Vec.toFixed(
+                            Vec.rotWith(handle.point, relativeCenter, delta)
+                        );
+                        return [handleId, { ...handle, point }];
+                    })
+                ) as T['handles']
+            );
+
+            return change;
+        }
+
+        // If the shape has no handles, move the shape to the new point
+        // and set the rotation.
+
+        // Clamp the next rotation between 0 and PI2
+        const nextRotation = Utils.clampRadians((shape.rotation || 0) + delta);
+
+        return {
+            point: nextPoint,
+            rotation: nextRotation,
+        } as Partial<T>;
+    }
+
+    /* -------------------------------------------------- */
+    /*                       Parents                      */
+    /* -------------------------------------------------- */
+
+    static update_parents(
+        data: TDSnapshot,
+        pageId: string,
+        changedShapeIds: string[]
+    ): void {
+        const page = TLDR.get_page(data, pageId);
+
+        if (changedShapeIds.length === 0) return;
+
+        const { shapes } = TLDR.get_page(data, pageId);
+
+        const parentToUpdateIds = Array.from(
+            new Set(changedShapeIds.map(id => shapes[id].parentId).values())
+        ).filter(id => id !== page.id);
+
+        for (const parentId of parentToUpdateIds) {
+            const parent = shapes[parentId];
+
+            if (!parent.children) {
+                throw Error(
+                    'A shape is parented to a shape without a children array.'
+                );
+            }
+
+            TLDR.on_children_change(data, parent, pageId);
+        }
+
+        TLDR.update_parents(data, pageId, parentToUpdateIds);
+    }
+
+    /* -------------------------------------------------- */
+    /*                      Bindings                      */
+    /* -------------------------------------------------- */
+
+    static get_binding(
+        data: TDSnapshot,
+        id: string,
+        pageId: string
+    ): TDBinding {
+        return TLDR.get_page(data, pageId).bindings[id];
+    }
+
+    static get_bindings(data: TDSnapshot, pageId: string): TDBinding[] {
+        const page = TLDR.get_page(data, pageId);
+        return Object.values(page.bindings);
+    }
+
+    static get_bindable_shape_ids(data: TDSnapshot) {
+        return TLDR.get_shapes(data, data.appState.currentPageId)
+            .filter(shape => TLDR.get_shape_util(shape).canBind)
+            .sort((a, b) => b.childIndex - a.childIndex)
+            .map(shape => shape.id);
+    }
+
+    static get_bindings_with_shape_ids(
+        data: TDSnapshot,
+        ids: string[],
+        pageId: string
+    ): TDBinding[] {
+        return Array.from(
+            new Set(
+                TLDR.get_bindings(data, pageId).filter(binding => {
+                    return (
+                        ids.includes(binding.toId) ||
+                        ids.includes(binding.fromId)
+                    );
+                })
+            ).values()
+        );
+    }
+
+    static get_related_bindings(
+        data: TDSnapshot,
+        ids: string[],
+        pageId: string
+    ): TDBinding[] {
+        const changedShapeIds = new Set(ids);
+
+        const page = TLDR.get_page(data, pageId);
+
+        // Find all bindings that we need to update
+        const bindingsArr = Object.values(page.bindings);
+
+        // Start with bindings that are directly bound to our changed shapes
+        const bindingsToUpdate = new Set(
+            bindingsArr.filter(
+                binding =>
+                    changedShapeIds.has(binding.toId) ||
+                    changedShapeIds.has(binding.fromId)
+            )
+        );
+
+        // Next, look for other bindings that effect the same shapes
+        let prevSize = bindingsToUpdate.size;
+        let delta = -1;
+
+        while (delta !== 0) {
+            bindingsToUpdate.forEach(binding => {
+                const fromId = binding.fromId;
+
+                for (const otherBinding of bindingsArr) {
+                    if (otherBinding.fromId === fromId) {
+                        bindingsToUpdate.add(otherBinding);
+                    }
+
+                    if (otherBinding.toId === fromId) {
+                        bindingsToUpdate.add(otherBinding);
+                    }
+                }
+            });
+
+            // Continue until we stop finding new bindings to update
+            delta = bindingsToUpdate.size - prevSize;
+
+            prevSize = bindingsToUpdate.size;
+        }
+
+        return Array.from(bindingsToUpdate.values());
+    }
+
+    static copy_string_to_clipboard = (string: string) => {
+        try {
+            if (navigator.clipboard) {
+                navigator.clipboard.write([
+                    new ClipboardItem({
+                        'text/plain': new Blob([string], {
+                            type: 'text/plain',
+                        }),
+                    }),
+                ]);
+            }
+        } catch (e) {
+            const textarea = document.createElement('textarea');
+            textarea.setAttribute('position', 'fixed');
+            textarea.setAttribute('top', '0');
+            textarea.setAttribute('readonly', 'true');
+            textarea.setAttribute('contenteditable', 'true');
+            textarea.style.position = 'fixed';
+            textarea.value = string;
+            document.body.appendChild(textarea);
+            textarea.focus();
+            textarea.select();
+
+            try {
+                const range = document.createRange();
+                range.selectNodeContents(textarea);
+                const sel = window.getSelection();
+                if (sel) {
+                    sel.removeAllRanges();
+                    sel.addRange(range);
+                    textarea.setSelectionRange(0, textarea.value.length);
+                }
+            } catch (err) {
+                console.error(err); // Could not copy to clipboard
+            } finally {
+                document.body.removeChild(textarea);
+            }
+        }
+    };
+
+    /* -------------------------------------------------- */
+    /*                       Groups                       */
+    /* -------------------------------------------------- */
+
+    static flatten_shape = (data: TDSnapshot, shape: TDShape): TDShape[] => {
+        return [
+            shape,
+            ...(shape.children ?? [])
+                .map(childId =>
+                    TLDR.get_shape(data, childId, data.appState.currentPageId)
+                )
+                .sort((a, b) => a.childIndex - b.childIndex)
+                .flatMap(shape => TLDR.flatten_shape(data, shape)),
+        ];
+    };
+
+    static flatten_page = (data: TDSnapshot, pageId: string): TDShape[] => {
+        return Object.values(data.document.pages[pageId].shapes)
+            .sort((a, b) => a.childIndex - b.childIndex)
+            .reduce<TDShape[]>(
+                (acc, shape) => [...acc, ...TLDR.flatten_shape(data, shape)],
+                []
+            );
+    };
+
+    static get_top_child_index = (data: TDSnapshot, pageId: string): number => {
+        const shapes = TLDR.get_shapes(data, pageId);
+        return shapes.length === 0
+            ? 1
+            : shapes
+                  .filter(shape => shape.parentId === pageId)
+                  .sort((a, b) => b.childIndex - a.childIndex)[0].childIndex +
+                  1;
+    };
+
+    /* -------------------------------------------------- */
+    /*                        Text                        */
+    /* -------------------------------------------------- */
+
+    static fix_new_lines = /\r?\n|\r/g;
+
+    static normalize_text(text: string) {
+        return text
+            .replace(TLDR.fix_new_lines, '\n')
+            .split('\n')
+            .map(x => x || ' ')
+            .join('\n');
+    }
+
+    /* -------------------------------------------------- */
+    /*                     Assertions                     */
+    /* -------------------------------------------------- */
+
+    static assert_shape_has_property<P extends keyof TDShape>(
+        shape: TDShape,
+        prop: P
+    ): asserts shape is ShapesWithProp<P> {
+        if (shape[prop] === undefined) {
+            throw new Error();
+        }
+    }
+
+    static warn(e: any) {
+        if (isDev) {
+            console.warn(e);
+        }
+    }
+    static error(e: any) {
+        if (isDev) {
+            console.error(e);
+        }
+    }
+
+    /* -------------------------------------------------- */
+    /*                       Export                       */
+    /* -------------------------------------------------- */
+
+    static get_svg_string(svg: SVGElement, scale = 1) {
+        const clone = svg.cloneNode(true) as SVGGraphicsElement;
+
+        svg.setAttribute('width', +svg.getAttribute('width')! * scale + '');
+        svg.setAttribute('height', +svg.getAttribute('height')! * scale + '');
+
+        return new XMLSerializer()
+            .serializeToString(clone)
+            .replaceAll('&#10;      ', '')
+            .replaceAll(/((\s|")[0-9]*\.[0-9]{2})([0-9]*)(\b|"|\))/g, '$1');
+    }
+
+    static get_svg_as_data_url(svg: SVGElement, scale = 1) {
+        const svgString = TLDR.get_svg_string(svg, scale);
+
+        const base64svg = window.btoa(unescape(svgString));
+
+        return `data:image/svg+xml;base64,${base64svg}`;
+    }
+
+    static async get_image_for_svg(
+        svg: SVGElement,
+        type: Exclude<TDExportType, TDExportType.JSON> = TDExportType.PNG,
+        opts = {} as Partial<{
+            scale: number;
+            quality: number;
+        }>
+    ) {
+        const { scale = 2, quality = 1 } = opts;
+
+        const svgString = TLDR.get_svg_string(svg, scale);
+
+        const width = +svg.getAttribute('width')!;
+        const height = +svg.getAttribute('height')!;
+
+        if (!svgString) return;
+
+        const canvas = await new Promise<HTMLCanvasElement>(resolve => {
+            const image = new Image();
+
+            image.crossOrigin = 'anonymous';
+
+            const base64svg = window.btoa(
+                unescape(encodeURIComponent(svgString))
+            );
+
+            const dataUrl = `data:image/svg+xml;base64,${base64svg}`;
+
+            image.onload = () => {
+                const canvas = document.createElement(
+                    'canvas'
+                ) as HTMLCanvasElement;
+                const context = canvas.getContext('2d')!;
+
+                canvas.width = width;
+                canvas.height = height;
+
+                context.drawImage(image, 0, 0, width, height);
+
+                URL.revokeObjectURL(dataUrl);
+
+                resolve(canvas);
+            };
+
+            image.onerror = () => {
+                console.warn('Could not convert that SVG to an image.');
+            };
+
+            image.src = dataUrl;
+        });
+
+        const blob = await new Promise<Blob>(resolve =>
+            canvas.toBlob(blob => resolve(blob!), 'image/' + type, quality)
+        );
+
+        return blob;
+    }
+}
diff --git a/libs/components/board-state/src/tldraw-app.ts b/libs/components/board-state/src/tldraw-app.ts
new file mode 100644
index 000000000..35b41bd45
--- /dev/null
+++ b/libs/components/board-state/src/tldraw-app.ts
@@ -0,0 +1,4567 @@
+/* eslint-disable max-lines */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable no-restricted-syntax */
+import { Vec } from '@tldraw/vec';
+import {
+    TLBoundsEventHandler,
+    TLBoundsHandleEventHandler,
+    TLKeyboardEventHandler,
+    TLShapeCloneHandler,
+    TLCanvasEventHandler,
+    TLPageState,
+    TLPinchEventHandler,
+    TLPointerEventHandler,
+    TLWheelEventHandler,
+    Utils,
+    TLBounds,
+    TLDropEventHandler,
+} from '@tldraw/core';
+import {
+    FlipType,
+    TDDocument,
+    MoveType,
+    AlignType,
+    StretchType,
+    DistributeType,
+    ShapeStyles,
+    TDShape,
+    TDShapeType,
+    TDSnapshot,
+    TDStatus,
+    TDPage,
+    TDBinding,
+    GroupShape,
+    TldrawCommand,
+    TDUser,
+    SessionType,
+    TDToolType,
+    TDAssetType,
+    TDAsset,
+    TDAssets,
+    TDExport,
+    ArrowShape,
+    TDExportType,
+    USER_COLORS,
+    FIT_TO_SCREEN_PADDING,
+    GRID_SIZE,
+    IMAGE_EXTENSIONS,
+    VIDEO_EXTENSIONS,
+    SVG_EXPORT_PADDING,
+    BaseSessionType,
+} from '@toeverything/components/board-types';
+import {
+    migrate,
+    FileSystemHandle,
+    loadFileHandle,
+    openFromFileSystem,
+    saveToFileSystem,
+    openAssetFromFileSystem,
+    fileToBase64,
+    fileToText,
+    getImageSizeFromSrc,
+    getVideoSizeFromSrc,
+} from './data';
+import { TLDR } from './tldr';
+import {
+    shapeUtils,
+    defaultStyle,
+    clearPrevSize,
+} from '@toeverything/components/board-shapes';
+import { StateManager } from './manager/state-manager';
+import { getClipboard, setClipboard } from './idb-clipboard';
+import type { Commands } from './types/commands';
+import type { BaseTool } from './types/tool';
+
+const uuid = Utils.uniqueId();
+
+interface TDCallbacks {
+    /**
+     * (optional) A callback to run when the component mounts.
+     */
+    onMount?: (app: TldrawApp) => void;
+    /**
+     * (optional) A callback to run when the component's state changes.
+     */
+    onChange?: (app: TldrawApp, reason?: string) => void;
+    /**
+     * (optional) A callback to run when the user creates a new project through the menu or through a keyboard shortcut.
+     */
+    onNewProject?: (app: TldrawApp, e?: KeyboardEvent) => void;
+    /**
+     * (optional) A callback to run when the user saves a project through the menu or through a keyboard shortcut.
+     */
+    onSaveProject?: (app: TldrawApp, e?: KeyboardEvent) => void;
+    /**
+     * (optional) A callback to run when the user saves a project as a new project through the menu or through a keyboard shortcut.
+     */
+    onSaveProjectAs?: (app: TldrawApp, e?: KeyboardEvent) => void;
+    /**
+     * (optional) A callback to run when the user opens new project through the menu or through a keyboard shortcut.
+     */
+    onOpenProject?: (app: TldrawApp, e?: KeyboardEvent) => void;
+    /**
+     * (optional) A callback to run when the opens a file to upload.
+     */
+    onOpenMedia?: (app: TldrawApp) => void;
+    /**
+     * (optional) A callback to run when the user signs in via the menu.
+     */
+    onSignIn?: (app: TldrawApp) => void;
+    /**
+     * (optional) A callback to run when the user signs out via the menu.
+     */
+    onSignOut?: (app: TldrawApp) => void;
+    /**
+     * (optional) A callback to run when the state is patched.
+     */
+    onPatch?: (app: TldrawApp, reason?: string) => void;
+    /**
+     * (optional) A callback to run when the state is changed with a command.
+     */
+    onCommand?: (app: TldrawApp, reason?: string) => void;
+    /**
+     * (optional) A callback to run when the state is persisted.
+     */
+    onPersist?: (app: TldrawApp) => void;
+    /**
+     * (optional) A callback to run when the user undos.
+     */
+    onUndo?: (app: TldrawApp) => void;
+    /**
+     * (optional) A callback to run when the user redos.
+     */
+    onRedo?: (app: TldrawApp) => void;
+    /**
+     * (optional) A callback to run when the user changes the current page's shapes.
+     */
+    onChangePage?: (
+        app: TldrawApp,
+        shapes: Record<string, TDShape | undefined>,
+        bindings: Record<string, TDBinding | undefined>,
+        assets: Record<string, TDAsset | undefined>
+    ) => void;
+    /**
+     * (optional) A callback to run when the user creates a new project.
+     */
+    onChangePresence?: (app: TldrawApp, user: TDUser) => void;
+    /**
+     * (optional) A callback to run when an asset will be deleted.
+     */
+    onAssetDelete?: (app: TldrawApp, assetId: string) => void;
+    /**
+     * (optional) A callback to run when an asset will be created. Should return the value for the image/video's `src` property.
+     */
+    onAssetCreate?: (
+        app: TldrawApp,
+        file: File,
+        id: string
+    ) => Promise<string | false>;
+    /**
+     * (optional) A callback to run when an asset will be uploaded. Should return the value for the image/video's `src` property.
+     */
+    onAssetUpload?: (
+        app: TldrawApp,
+        file: File,
+        id: string
+    ) => Promise<string | false>;
+    /**
+     * (optional) A callback to run when the user exports their page or selection.
+     */
+    onExport?: (app: TldrawApp, info: TDExport) => Promise<void>;
+}
+
+export interface TldrawAppCtorProps {
+    id?: string;
+    callbacks?: TDCallbacks;
+    getSession: (type: SessionType) => {
+        new (app: TldrawApp, ...args: any[]): BaseSessionType;
+    };
+    commands: Commands;
+    tools: Record<string, { new (app: TldrawApp): BaseTool }>;
+}
+
+export class TldrawApp extends StateManager<TDSnapshot> {
+    callbacks: TDCallbacks = {};
+
+    tools: Record<string, BaseTool> = {};
+
+    commands: Commands;
+
+    currentTool: BaseTool = this.tools['select'];
+
+    session?: BaseSessionType;
+
+    readOnly = false;
+
+    isDirty = false;
+
+    isCreating = false;
+
+    originPoint = [0, 0];
+
+    currentPoint = [0, 0];
+
+    previousPoint = [0, 0];
+
+    shiftKey = false;
+
+    altKey = false;
+
+    metaKey = false;
+
+    ctrlKey = false;
+
+    spaceKey = false;
+
+    isPointing = false;
+
+    isForcePanning = false;
+
+    editingStartTime = -1;
+
+    fileSystemHandle: FileSystemHandle | null = null;
+
+    viewport = Utils.getBoundsFromPoints([
+        [0, 0],
+        [100, 100],
+    ]);
+
+    rendererBounds = Utils.getBoundsFromPoints([
+        [0, 0],
+        [100, 100],
+    ]);
+
+    selectHistory = {
+        stack: [[]] as string[][],
+        pointer: 0,
+    };
+
+    clipboard?: {
+        shapes: TDShape[];
+        bindings: TDBinding[];
+        assets: TDAsset[];
+    };
+
+    rotationInfo = {
+        selectedIds: [] as string[],
+        center: [0, 0],
+    };
+
+    pasteInfo = {
+        center: [0, 0],
+        offset: [0, 0],
+    };
+
+    getSession: TldrawAppCtorProps['getSession'];
+
+    constructor(props: TldrawAppCtorProps) {
+        super(
+            TldrawApp.default_state,
+            props.id,
+            TldrawApp.version,
+            (prev, next, prevVersion) => {
+                return {
+                    ...next,
+                    document: migrate(
+                        {
+                            ...next.document,
+                            ...prev.document,
+                            version: prevVersion,
+                        },
+                        TldrawApp.version
+                    ),
+                };
+            }
+        );
+
+        this.callbacks = props.callbacks || {};
+        this.getSession = props.getSession;
+        this.commands = props.commands;
+
+        this.tools = Object.entries(props.tools).reduce((acc, [key, Tool]) => {
+            acc[key] = new Tool(this);
+            return acc;
+        }, {} as Record<string, BaseTool>);
+        this.currentTool = this.tools['select'];
+    }
+
+    /* -------------------- Internal -------------------- */
+
+    protected override migrate = (state: TDSnapshot): TDSnapshot => {
+        return {
+            ...state,
+            document: migrate(state.document, TldrawApp.version),
+        };
+    };
+
+    protected override on_ready = () => {
+        this.loadDocument(this.document);
+
+        loadFileHandle().then(fileHandle => {
+            this.fileSystemHandle = fileHandle;
+        });
+
+        try {
+            this.patchState({
+                appState: {
+                    status: TDStatus.Idle,
+                },
+                document: migrate(this.document, TldrawApp.version),
+            });
+        } catch (e) {
+            console.error('The data appears to be corrupted. Resetting!', e);
+            localStorage.setItem(
+                this.document.id + '_corrupted',
+                JSON.stringify(this.document)
+            );
+
+            this.patchState({
+                ...TldrawApp.default_state,
+                appState: {
+                    ...TldrawApp.default_state.appState,
+                    status: TDStatus.Idle,
+                },
+            });
+        }
+
+        this.callbacks.onMount?.(this);
+    };
+
+    /**
+     * Cleanup the state after each state change.
+     * @param state The new state
+     * @param prev The previous state
+     * @protected
+     * @returns The final state
+     */
+    protected override cleanup = (
+        state: TDSnapshot,
+        prev: TDSnapshot
+    ): TDSnapshot => {
+        const next: TDSnapshot = { ...state };
+
+        // Remove deleted shapes and bindings (in Commands, these will be set to undefined)
+        if (next.document !== prev.document) {
+            Object.entries(next.document.pages).forEach(([pageId, page]) => {
+                if (page === undefined) {
+                    // If page is undefined, delete the page and pagestate
+                    delete next.document.pages[pageId];
+                    delete next.document.pageStates[pageId];
+                    return;
+                }
+
+                const prevPage = prev.document.pages[pageId];
+
+                const changedShapes: Record<string, TDShape | undefined> = {};
+
+                if (
+                    !prevPage ||
+                    page.shapes !== prevPage.shapes ||
+                    page.bindings !== prevPage.bindings
+                ) {
+                    page.shapes = { ...page.shapes };
+                    page.bindings = { ...page.bindings };
+
+                    const groupsToUpdate = new Set<GroupShape>();
+
+                    // If shape is undefined, delete the shape
+                    Object.entries(page.shapes).forEach(([id, shape]) => {
+                        let parentId: string;
+
+                        if (!shape) {
+                            parentId = prevPage?.shapes[id]?.parentId;
+                            delete page.shapes[id];
+                        } else {
+                            parentId = shape.parentId;
+                        }
+
+                        if (page.id === next.appState.currentPageId) {
+                            if (prevPage?.shapes[id] !== shape) {
+                                changedShapes[id] = shape;
+                            }
+                        }
+
+                        // If the shape is the child of a group, then update the group
+                        // (unless the group is being deleted too)
+                        if (parentId && parentId !== pageId) {
+                            const group = page.shapes[parentId];
+                            if (group !== undefined) {
+                                groupsToUpdate.add(
+                                    page.shapes[parentId] as GroupShape
+                                );
+                            }
+                        }
+                    });
+
+                    // If binding is undefined, delete the binding
+                    Object.keys(page.bindings).forEach(id => {
+                        if (!page.bindings[id]) {
+                            delete page.bindings[id];
+                        }
+                    });
+
+                    next.document.pages[pageId] = page;
+
+                    // Get bindings related to the changed shapes
+                    const bindingsToUpdate = TLDR.get_related_bindings(
+                        next,
+                        Object.keys(changedShapes),
+                        pageId
+                    );
+
+                    const visitedShapes = new Set<ArrowShape>();
+
+                    // Update all of the bindings we've just collected
+                    bindingsToUpdate.forEach(binding => {
+                        if (!page.bindings[binding.id]) {
+                            return;
+                        }
+
+                        const toShape = page.shapes[binding.toId];
+                        const fromShape = page.shapes[
+                            binding.fromId
+                        ] as ArrowShape;
+
+                        if (!(toShape && fromShape)) {
+                            delete next.document.pages[pageId].bindings[
+                                binding.id
+                            ];
+                            return;
+                        }
+
+                        if (visitedShapes.has(fromShape)) {
+                            return;
+                        }
+
+                        // We only need to update the binding's "from" shape (an arrow)
+                        const fromDelta = TLDR.update_arrow_bindings(
+                            page,
+                            fromShape
+                        );
+                        visitedShapes.add(fromShape);
+
+                        if (fromDelta) {
+                            const nextShape = {
+                                ...fromShape,
+                                ...fromDelta,
+                            } as ArrowShape;
+                            page.shapes[fromShape.id] = nextShape;
+                        }
+                    });
+
+                    groupsToUpdate.forEach(group => {
+                        if (!group) throw Error('no group!');
+                        const children = group.children.filter(
+                            id => page.shapes[id] !== undefined
+                        );
+
+                        const commonBounds = Utils.getCommonBounds(
+                            children
+                                .map(id => page.shapes[id])
+                                .filter(Boolean)
+                                .map(shape => TLDR.get_rotated_bounds(shape))
+                        );
+
+                        page.shapes[group.id] = {
+                            ...group,
+                            point: [commonBounds.minX, commonBounds.minY],
+                            size: [commonBounds.width, commonBounds.height],
+                            children,
+                        };
+                    });
+                }
+
+                // Clean up page state, preventing hovers on deleted shapes
+
+                const nextPageState: TLPageState = {
+                    ...next.document.pageStates[pageId],
+                };
+
+                if (!nextPageState.brush) {
+                    delete nextPageState.brush;
+                }
+
+                if (
+                    nextPageState.hoveredId &&
+                    !page.shapes[nextPageState.hoveredId]
+                ) {
+                    delete nextPageState.hoveredId;
+                }
+
+                if (
+                    nextPageState.bindingId &&
+                    !page.bindings[nextPageState.bindingId]
+                ) {
+                    TLDR.warn(`Could not find the binding of ${pageId}`);
+                    delete nextPageState.bindingId;
+                }
+
+                if (
+                    nextPageState.editingId &&
+                    !page.shapes[nextPageState.editingId]
+                ) {
+                    TLDR.warn('Could not find the editing shape!');
+                    delete nextPageState.editingId;
+                }
+
+                next.document.pageStates[pageId] = nextPageState;
+            });
+        }
+
+        Object.keys(next.document.assets ?? {}).forEach(id => {
+            if (!next.document.assets?.[id]) {
+                delete next.document.assets?.[id];
+            }
+        });
+
+        const currentPageId = next.appState.currentPageId;
+
+        const currentPageState = next.document.pageStates[currentPageId];
+
+        if (next.room && next.room !== prev.room) {
+            const room = { ...next.room, users: { ...next.room.users } };
+
+            // Remove any exited users
+            if (prev.room) {
+                Object.values(prev.room.users)
+                    .filter(Boolean)
+                    .forEach(user => {
+                        if (room.users[user.id] === undefined) {
+                            delete room.users[user.id];
+                        }
+                    });
+            }
+
+            next.room = room;
+        }
+
+        if (next.room) {
+            next.room.users[next.room.userId] = {
+                ...next.room.users[next.room.userId],
+                point: this.currentPoint,
+                selectedIds: currentPageState.selectedIds,
+            };
+        }
+
+        // Temporary block on editing pages while in readonly mode.
+        // This is a broad solution but not a very good one: the UX
+        // for interacting with a readOnly document will be more nuanced.
+        if (this.readOnly) {
+            next.document.pages = prev.document.pages;
+        }
+
+        return next;
+    };
+
+    override onPatch = (app: TDSnapshot, id?: string) => {
+        this.callbacks.onPatch?.(this, id);
+    };
+
+    override onCommand = (app: TDSnapshot, id?: string) => {
+        this.clear_select_history();
+        this.isDirty = true;
+        this.callbacks.onCommand?.(this, id);
+    };
+
+    override onReplace = () => {
+        this.clear_select_history();
+        this.isDirty = false;
+    };
+
+    override onUndo = () => {
+        this.rotationInfo.selectedIds = [...this.selectedIds];
+        this.callbacks.onUndo?.(this);
+    };
+
+    override onRedo = () => {
+        this.rotationInfo.selectedIds = [...this.selectedIds];
+        this.callbacks.onRedo?.(this);
+    };
+
+    override onPersist = () => {
+        // If we are part of a room, send our changes to the server
+        if (this.callbacks.onChangePage) {
+            this._broadcastPageChanges();
+        }
+        this.callbacks.onPersist?.(this);
+    };
+
+    private prev_selected_ids = this.selectedIds;
+
+    /**
+     * Clear the selection history after each new command, undo or redo.
+     * @param state
+     * @param id
+     */
+    protected override on_state_did_change = (
+        app: TDSnapshot,
+        id?: string
+    ): void => {
+        this.callbacks.onChange?.(this, id);
+
+        if (this.room && this.selectedIds !== this.prev_selected_ids) {
+            this.callbacks.onChangePresence?.(this, {
+                ...this.room.users[this.room.userId],
+                selectedIds: this.selectedIds,
+            });
+            this.prev_selected_ids = this.selectedIds;
+        }
+    };
+
+    /* ----------- Managing Multiplayer State ----------- */
+
+    private just_sent = false;
+    private prev_shapes = this.page.shapes;
+    private prev_bindings = this.page.bindings;
+    private prev_assets = this.document.assets;
+
+    private _broadcastPageChanges = () => {
+        const visited = new Set<string>();
+
+        const changedShapes: Record<string, TDShape | undefined> = {};
+        const changedBindings: Record<string, TDBinding | undefined> = {};
+        const changedAssets: Record<string, TDAsset | undefined> = {};
+
+        this.shapes.forEach(shape => {
+            visited.add(shape.id);
+            if (this.prev_shapes[shape.id] !== shape) {
+                changedShapes[shape.id] = shape;
+            }
+        });
+
+        Object.keys(this.prev_shapes)
+            .filter(id => !visited.has(id))
+            .forEach(id => {
+                // After visiting all the current shapes, if we haven't visited a
+                // previously present shape, then it was deleted
+                changedShapes[id] = undefined;
+            });
+
+        this.bindings.forEach(binding => {
+            visited.add(binding.id);
+            if (this.prev_bindings[binding.id] !== binding) {
+                changedBindings[binding.id] = binding;
+            }
+        });
+
+        Object.keys(this.prev_bindings)
+            .filter(id => !visited.has(id))
+            .forEach(id => {
+                // After visiting all the current bindings, if we haven't visited a
+                // previously present shape, then it was deleted
+                changedBindings[id] = undefined;
+            });
+
+        this.assets.forEach(asset => {
+            visited.add(asset.id);
+            if (this.prev_assets[asset.id] !== asset) {
+                changedAssets[asset.id] = asset;
+            }
+        });
+
+        Object.keys(this.prev_assets)
+            .filter(id => !visited.has(id))
+            .forEach(id => {
+                changedAssets[id] = undefined;
+            });
+
+        // Only trigger update if shapes or bindings have changed
+        if (
+            Object.keys(changedBindings).length > 0 ||
+            Object.keys(changedShapes).length > 0 ||
+            Object.keys(changedAssets).length > 0
+        ) {
+            this.just_sent = true;
+            this.callbacks.onChangePage?.(
+                this,
+                changedShapes,
+                changedBindings,
+                changedAssets
+            );
+            this.prev_shapes = this.page.shapes;
+            this.prev_bindings = this.page.bindings;
+            this.prev_assets = this.document.assets;
+        }
+    };
+
+    getReservedContent = (
+        coreReservedIds: string[],
+        pageId = this.currentPageId
+    ) => {
+        const { bindings } = this.document.pages[pageId];
+
+        // We want to know which shapes we need to
+        const reservedShapes: Record<string, TDShape> = {};
+        const reservedBindings: Record<string, TDBinding> = {};
+
+        // Quick lookup maps for bindings
+        const bindingsArr = Object.values(bindings);
+        const boundTos = new Map(
+            bindingsArr.map(binding => [binding.toId, binding])
+        );
+        const boundFroms = new Map(
+            bindingsArr.map(binding => [binding.fromId, binding])
+        );
+        const bindingMaps = [boundTos, boundFroms];
+
+        // Unique set of shape ids that are going to be reserved
+        const reservedShapeIds: string[] = [];
+
+        if (this.session)
+            coreReservedIds.forEach(id => reservedShapeIds.push(id));
+        if (this.pageState.editingId)
+            reservedShapeIds.push(this.pageState.editingId);
+
+        const strongReservedShapeIds = new Set(reservedShapeIds);
+
+        // Which shape ids have we already visited?
+        const visited = new Set<string>();
+
+        // Time to visit every reserved shape and every related shape and binding.
+        while (reservedShapeIds.length > 0) {
+            const id = reservedShapeIds.pop();
+            if (!id) break;
+            if (visited.has(id)) continue;
+
+            // Add to set so that we don't process this id a second time
+            visited.add(id);
+
+            // Get the shape and reserve it
+            const shape = this.getShape(id);
+            reservedShapes[id] = shape;
+
+            if (shape.parentId !== pageId)
+                reservedShapeIds.push(shape.parentId);
+
+            // If the shape has children, add the shape's children to the list of ids to process
+            if (shape.children) reservedShapeIds.push(...shape.children);
+
+            // If there are binding for this shape, reserve the bindings and
+            // add its related shapes to the list of ids to process
+            bindingMaps
+                .map(map => map.get(shape.id)!)
+                .filter(Boolean)
+                .forEach(binding => {
+                    reservedBindings[binding.id] = binding;
+                    reservedShapeIds.push(binding.toId, binding.fromId);
+                });
+        }
+
+        return { reservedShapes, reservedBindings, strongReservedShapeIds };
+    };
+
+    /**
+     * Manually patch in page content.
+     */
+    public replacePageContent = (
+        shapes: Record<string, TDShape>,
+        bindings: Record<string, TDBinding>,
+        assets: Record<string, TDAsset>,
+        pageId = this.currentPageId
+    ): this => {
+        if (this.just_sent) {
+            // The incoming update was caused by an update that the client sent, noop.
+            this.just_sent = false;
+            return this;
+        }
+
+        const page = this.document.pages[this.currentPageId];
+
+        Object.values(shapes).forEach(shape => {
+            if (
+                shape.parentId !== pageId &&
+                !(page.shapes[shape.parentId] || shapes[shape.parentId])
+            ) {
+                console.warn('Added a shape without a parent on the page');
+                shape.parentId = pageId;
+            }
+        });
+
+        this.useStore.setState(current => {
+            const { hoveredId, editingId, bindingId, selectedIds } =
+                current.document.pageStates[pageId];
+
+            const coreReservedIds = [...selectedIds];
+
+            const editingShape =
+                editingId &&
+                current.document.pages[this.currentPageId].shapes[editingId];
+            if (editingShape) coreReservedIds.push(editingShape.id);
+
+            const { reservedShapes, reservedBindings, strongReservedShapeIds } =
+                this.getReservedContent(coreReservedIds, this.currentPageId);
+
+            // Merge in certain changes to reserved shapes
+            Object.values(reservedShapes)
+                // Don't merge updates to shapes with text (Text or Sticky)
+                .filter(reservedShape => !('text' in reservedShape))
+                .forEach(reservedShape => {
+                    const incomingShape = shapes[reservedShape.id];
+                    if (!incomingShape) return;
+
+                    // If the shape isn't "strongly reserved", then use the incoming shape;
+                    // note that this is only if the incoming shape exists! If the shape was
+                    // deleted in the incoming shapes, then we'll keep out reserved shape.
+                    // This logic would need more work for arrows, because the incoming shape
+                    // include a binding change that we'll need to resolve with our reserved bindings.
+                    if (
+                        !(
+                            reservedShape.type === TDShapeType.Arrow ||
+                            strongReservedShapeIds.has(reservedShape.id)
+                        )
+                    ) {
+                        shapes[reservedShape.id] = incomingShape;
+                        return;
+                    }
+
+                    // Only allow certain merges.
+
+                    // Allow decorations (of an arrow) to be changed
+                    if (
+                        'decorations' in incomingShape &&
+                        'decorations' in reservedShape
+                    ) {
+                        shapes[reservedShape.id] = {
+                            ...reservedShape,
+                            decorations: incomingShape.decorations,
+                        };
+                    }
+
+                    // Allow the shape's style to be changed
+                    reservedShape.style = incomingShape.style;
+                });
+
+            // Use the incoming shapes / bindings as comparisons for what
+            // will have changed. This is important because we want to restore
+            // related shapes that may not have changed on our side, but which
+            // were deleted on the server.
+            this.prev_shapes = shapes;
+            this.prev_bindings = bindings;
+            this.prev_assets = assets;
+
+            const nextShapes = {
+                ...shapes,
+                ...reservedShapes,
+            };
+
+            if (editingShape) {
+                nextShapes[editingShape.id] = editingShape;
+            }
+
+            const nextBindings = {
+                ...bindings,
+                ...reservedBindings,
+            };
+            const nextAssets = {
+                ...assets,
+            };
+
+            const next: TDSnapshot = {
+                ...current,
+                document: {
+                    ...current.document,
+                    pages: {
+                        [pageId]: {
+                            ...current.document.pages[pageId],
+                            shapes: nextShapes,
+                            bindings: nextBindings,
+                        },
+                    },
+                    assets: nextAssets,
+                    pageStates: {
+                        ...current.document.pageStates,
+                        [pageId]: {
+                            ...current.document.pageStates[pageId],
+                            selectedIds: selectedIds.filter(
+                                id => nextShapes[id] !== undefined
+                            ),
+                            hoveredId: hoveredId
+                                ? nextShapes[hoveredId] === undefined
+                                    ? undefined
+                                    : hoveredId
+                                : undefined,
+                            editingId,
+                            bindingId: bindingId
+                                ? nextBindings[bindingId] === undefined
+                                    ? undefined
+                                    : bindingId
+                                : undefined,
+                        },
+                    },
+                },
+            };
+            const page = next.document.pages[pageId];
+
+            // Get bindings related to the changed shapes
+            const bindingsToUpdate = TLDR.get_related_bindings(
+                next,
+                Object.keys(nextShapes),
+                pageId
+            );
+
+            const visitedShapes = new Set<ArrowShape>();
+
+            // Update all of the bindings we've just collected
+            bindingsToUpdate.forEach(binding => {
+                if (!page.bindings[binding.id]) {
+                    return;
+                }
+
+                const fromShape = page.shapes[binding.fromId] as ArrowShape;
+
+                if (visitedShapes.has(fromShape)) {
+                    return;
+                }
+
+                // We only need to update the binding's "from" shape (an arrow)
+                const fromDelta = TLDR.update_arrow_bindings(page, fromShape);
+                visitedShapes.add(fromShape);
+
+                if (fromDelta) {
+                    const nextShape = {
+                        ...fromShape,
+                        ...fromDelta,
+                    } as TDShape;
+
+                    page.shapes[fromShape.id] = nextShape;
+                }
+            });
+
+            Object.values(nextShapes).forEach(shape => {
+                if (shape.type !== TDShapeType.Group) return;
+
+                const children = shape.children.filter(
+                    id => page.shapes[id] !== undefined
+                );
+
+                const commonBounds = Utils.getCommonBounds(
+                    children
+                        .map(id => page.shapes[id])
+                        .filter(Boolean)
+                        .map(shape => TLDR.get_rotated_bounds(shape))
+                );
+
+                page.shapes[shape.id] = {
+                    ...shape,
+                    point: [commonBounds.minX, commonBounds.minY],
+                    size: [commonBounds.width, commonBounds.height],
+                    children,
+                };
+            });
+
+            this.state.document = next.document;
+            // this.prevShapes = nextShapes
+            // this.prevBindings = nextBindings
+
+            return next;
+        }, true);
+
+        return this;
+    };
+
+    /**
+     * Set the current status.
+     * @param status The new status to set.
+     * @private
+     * @returns
+     */
+    setStatus(status: string) {
+        return this.patchState(
+            {
+                appState: { status },
+            },
+            `set_status:${status}`
+        );
+    }
+
+    /**
+     * Update the bounding box when the renderer's bounds change.
+     * @param bounds
+     */
+    updateBounds = (bounds: TLBounds) => {
+        this.rendererBounds = bounds;
+        const { point, zoom } = this.camera;
+        this.updateViewport(point, zoom);
+
+        if (!this.readOnly && this.session) {
+            this.session.update();
+        }
+    };
+
+    updateViewport = (point: number[], zoom: number) => {
+        const { width, height } = this.rendererBounds;
+        const [minX, minY] = Vec.sub(Vec.div([0, 0], zoom), point);
+        const [maxX, maxY] = Vec.sub(Vec.div([width, height], zoom), point);
+
+        this.viewport = {
+            minX,
+            minY,
+            maxX,
+            maxY,
+            height: maxX - minX,
+            width: maxY - minY,
+        };
+    };
+
+    /**
+     * Set or clear the editing id
+     * @param id [string]
+     */
+    setEditingId = (id?: string) => {
+        if (this.readOnly) return;
+
+        this.editingStartTime = performance.now();
+        this.patchState(
+            {
+                document: {
+                    pageStates: {
+                        [this.currentPageId]: {
+                            editingId: id,
+                        },
+                    },
+                },
+            },
+            `set_editing_id`
+        );
+    };
+
+    /**
+     * Set or clear the hovered id
+     * @param id [string]
+     */
+    setHoveredId = (id?: string) => {
+        this.patchState(
+            {
+                document: {
+                    pageStates: {
+                        [this.currentPageId]: {
+                            hoveredId: id,
+                        },
+                    },
+                },
+            },
+            `set_hovered_id`
+        );
+    };
+
+    /* -------------------------------------------------- */
+    /*                    Settings & UI                   */
+    /* -------------------------------------------------- */
+
+    /**
+     * Set a setting.
+     */
+    setSetting = <
+        T extends keyof TDSnapshot['settings'],
+        V extends TDSnapshot['settings'][T]
+    >(
+        name: T,
+        value: V | ((value: V) => V)
+    ): this => {
+        if (this.session) return this;
+
+        this.patchState(
+            {
+                settings: {
+                    [name]:
+                        typeof value === 'function'
+                            ? value(this.settings[name] as V)
+                            : value,
+                },
+            },
+            `settings:${name}`
+        );
+        this.persist();
+        return this;
+    };
+
+    /**
+     * Toggle pen mode.
+     */
+    toggleFocusMode = (): this => {
+        if (this.session) return this;
+        this.patchState(
+            {
+                settings: {
+                    isFocusMode: !this.settings.isFocusMode,
+                },
+            },
+            `settings:toggled_focus_mode`
+        );
+        this.persist();
+        return this;
+    };
+
+    /**
+     * Toggle pen mode.
+     */
+    togglePenMode = (): this => {
+        if (this.session) return this;
+        this.patchState(
+            {
+                settings: {
+                    isPenMode: !this.settings.isPenMode,
+                },
+            },
+            `settings:toggled_pen_mode`
+        );
+        this.persist();
+        return this;
+    };
+
+    /**
+     * Toggle dark mode.
+     */
+    toggleDarkMode = (): this => {
+        if (this.session) return this;
+        this.patchState(
+            { settings: { isDarkMode: !this.settings.isDarkMode } },
+            `settings:toggled_dark_mode`
+        );
+        this.persist();
+        return this;
+    };
+
+    /**
+     * Toggle zoom snap.
+     */
+    toggleZoomSnap = () => {
+        if (this.session) return this;
+        this.patchState(
+            { settings: { isZoomSnap: !this.settings.isZoomSnap } },
+            `settings:toggled_zoom_snap`
+        );
+        this.persist();
+        return this;
+    };
+
+    /**
+     * Toggle debug mode.
+     */
+    toggleDebugMode = () => {
+        if (this.session) return this;
+        this.patchState(
+            { settings: { isDebugMode: !this.settings.isDebugMode } },
+            `settings:toggled_debug`
+        );
+        this.persist();
+        return this;
+    };
+
+    /**
+     * Toggles the state if menu is opened
+     */
+    setMenuOpen = (isOpen: boolean): this => {
+        this.patchState(
+            { appState: { isMenuOpen: isOpen } },
+            'ui:toggled_menu_opened'
+        );
+        this.persist();
+        return this;
+    };
+
+    /**
+     * Toggles the state if something is loading
+     */
+    setIsLoading = (isLoading: boolean): this => {
+        this.patchState({ appState: { isLoading } }, 'ui:toggled_is_loading');
+        this.persist();
+        return this;
+    };
+
+    setDisableAssets = (disableAssets: boolean): this => {
+        this.patchState(
+            { appState: { disableAssets } },
+            'ui:toggled_disable_images'
+        );
+        return this;
+    };
+
+    get isMenuOpen(): boolean {
+        return this.appState.isMenuOpen;
+    }
+
+    get isLoading(): boolean {
+        return this.appState.isLoading;
+    }
+
+    get disableAssets(): boolean {
+        return this.appState.disableAssets;
+    }
+
+    /**
+     * Toggle grids.
+     */
+    toggleGrid = (): this => {
+        if (this.session) return this;
+        this.patchState(
+            { settings: { showGrid: !this.settings.showGrid } },
+            'settings:toggled_grid'
+        );
+        this.persist();
+        return this;
+    };
+
+    /**
+     * Select a tool.
+     * @param tool The tool to select, or "select".
+     */
+    selectTool = (type: TDToolType): this => {
+        if (this.readOnly || this.session) return this;
+
+        this.isPointing = false; // reset pointer state, in case something weird happened
+
+        const tool = this.tools[type];
+
+        if (tool === this.currentTool) {
+            this.patchState({
+                appState: {
+                    isToolLocked: false,
+                },
+            });
+            return this;
+        }
+
+        this.currentTool.onExit();
+        tool.previous = this.currentTool.type;
+        this.currentTool = tool;
+        this.currentTool.onEnter();
+
+        return this.patchState(
+            {
+                appState: {
+                    activeTool: type,
+                    isToolLocked: false,
+                },
+            },
+            `selected_tool:${type}`
+        );
+    };
+
+    /**
+     * Toggle the tool lock option.
+     */
+    toggleToolLock = (): this => {
+        if (this.session) return this;
+        return this.patchState(
+            {
+                appState: {
+                    isToolLocked: !this.appState.isToolLocked,
+                },
+            },
+            `toggled_tool_lock`
+        );
+    };
+
+    /* -------------------------------------------------- */
+    /*                      Document                      */
+    /* -------------------------------------------------- */
+
+    /**
+     * Reset the document to a blank state.
+     */
+    resetDocument = (): this => {
+        if (this.session) return this;
+        this.session = undefined;
+        this.pasteInfo.offset = [0, 0];
+        this.currentTool = this.tools['select'];
+
+        this.resetHistory()
+            .clear_select_history()
+            .loadDocument(
+                migrate(TldrawApp.default_document, TldrawApp.version)
+            )
+            .persist();
+
+        return this;
+    };
+
+    /**
+     *
+     * @param document
+     */
+    updateUsers = (users: TDUser[], isOwnUpdate = false): void => {
+        this.patchState(
+            {
+                room: {
+                    users: Object.fromEntries(
+                        users.map(user => [user.id, user])
+                    ),
+                },
+            },
+            isOwnUpdate ? 'room:self:update' : 'room:user:update'
+        );
+    };
+
+    removeUser = (userId: string) => {
+        this.patchState({
+            room: {
+                users: {
+                    [userId]: undefined,
+                },
+            },
+        });
+    };
+
+    /**
+     * Merge a new document patch into the current document.
+     * @param document
+     */
+    mergeDocument = (document: TDDocument): this => {
+        // If it's a new document, do a full change.
+        if (this.document.id !== document.id) {
+            this.replace_state({
+                ...this.state,
+                appState: {
+                    ...this.appState,
+                    currentPageId: Object.keys(document.pages)[0],
+                },
+                document: migrate(document, TldrawApp.version),
+            });
+            return this;
+        }
+
+        // Have we deleted any pages? If so, drop everything and change
+        // to the first page. This is an edge case.
+        const currentPageStates = { ...this.document.pageStates };
+
+        // Update the app state's current page id if needed
+        const nextAppState = {
+            ...this.appState,
+            currentPageId: document.pages[this.currentPageId]
+                ? this.currentPageId
+                : Object.keys(document.pages)[0],
+            pages: Object.values(document.pages).map((page, i) => ({
+                id: page.id,
+                name: page.name,
+                childIndex: page.childIndex || i,
+            })),
+        };
+
+        // Reset the history (for now)
+        this.resetHistory();
+
+        Object.keys(this.document.pages).forEach(pageId => {
+            if (!document.pages[pageId]) {
+                if (pageId === this.appState.currentPageId) {
+                    this.cancelSession();
+                    this.selectNone();
+                }
+
+                currentPageStates[pageId] = undefined as unknown as TLPageState;
+            }
+        });
+
+        // Don't allow the selected ids to be deleted during a session—if
+        // they've been removed, put them back in the client's document.
+        if (this.session) {
+            this.selectedIds
+                .filter(id => !document.pages[this.currentPageId].shapes[id])
+                .forEach(
+                    id =>
+                        (document.pages[this.currentPageId].shapes[id] =
+                            this.page.shapes[id])
+                );
+        }
+
+        // For other pages, remove any selected ids that were deleted.
+        Object.entries(currentPageStates).forEach(([pageId, pageState]) => {
+            pageState.selectedIds = pageState.selectedIds.filter(
+                id => !!document.pages[pageId].shapes[id]
+            );
+        });
+
+        // If the user is currently creating a shape (ie drawing), then put that
+        // shape back onto the page for the client.
+        const { editingId } = this.pageState;
+
+        if (editingId) {
+            document.pages[this.currentPageId].shapes[editingId] =
+                this.page.shapes[editingId];
+            currentPageStates[this.currentPageId].selectedIds = [editingId];
+        }
+
+        return this.replace_state(
+            {
+                ...this.state,
+                appState: nextAppState,
+                document: {
+                    ...migrate(document, TldrawApp.version),
+                    pageStates: currentPageStates,
+                },
+            },
+            'merge'
+        );
+    };
+
+    /**
+     * Update the current document.
+     * @param document
+     */
+    updateDocument = (
+        document: TDDocument,
+        reason = 'updated_document'
+    ): this => {
+        const prevState = this.state;
+
+        const nextState = { ...prevState, document: { ...prevState.document } };
+
+        if (!document.pages[this.currentPageId]) {
+            nextState.appState = {
+                ...prevState.appState,
+                currentPageId: Object.keys(document.pages)[0],
+            };
+        }
+
+        let i = 1;
+
+        for (const nextPage of Object.values(document.pages)) {
+            if (nextPage !== prevState.document.pages[nextPage.id]) {
+                nextState.document.pages[nextPage.id] = nextPage;
+
+                if (!nextPage.name) {
+                    nextState.document.pages[nextPage.id].name = `Page ${
+                        i + 1
+                    }`;
+                    i++;
+                }
+            }
+        }
+
+        for (const nextPageState of Object.values(document.pageStates)) {
+            if (
+                nextPageState !==
+                prevState.document.pageStates[nextPageState.id]
+            ) {
+                nextState.document.pageStates[nextPageState.id] = nextPageState;
+
+                const nextPage = document.pages[nextPageState.id];
+                const keysToCheck = [
+                    'bindingId',
+                    'editingId',
+                    'hoveredId',
+                    'pointedId',
+                ] as const;
+
+                for (const key of keysToCheck) {
+                    if (!nextPage.shapes[key]) {
+                        nextPageState[key] = undefined;
+                    }
+                }
+
+                nextPageState.selectedIds = nextPageState.selectedIds.filter(
+                    id => !!document.pages[nextPage.id].shapes[id]
+                );
+            }
+        }
+
+        nextState.document = migrate(
+            nextState.document,
+            nextState.document.version || 0
+        );
+
+        return this.replace_state(nextState, `${reason}:${document.id}`);
+    };
+
+    /**
+     * Load a fresh room into the state.
+     * @param roomId
+     */
+    loadRoom = (roomId: string): this => {
+        this.patchState({
+            room: {
+                id: roomId,
+                userId: uuid,
+                users: {
+                    [uuid]: {
+                        id: uuid,
+                        color: USER_COLORS[
+                            Math.floor(Math.random() * USER_COLORS.length)
+                        ],
+                        point: [100, 100],
+                        selectedIds: [],
+                        activeShapes: [],
+                    },
+                },
+            },
+        });
+        return this;
+    };
+
+    /**
+     * Load a new document.
+     * @param document The document to load
+     */
+    loadDocument = (document: TDDocument): this => {
+        this.selectNone();
+        this.resetHistory();
+        this.clear_select_history();
+        this.session = undefined;
+
+        this.replace_state(
+            {
+                ...TldrawApp.default_state,
+                settings: {
+                    ...this.state.settings,
+                },
+                document: migrate(document, TldrawApp.version),
+                appState: {
+                    ...TldrawApp.default_state.appState,
+                    ...this.state.appState,
+                    currentPageId: Object.keys(document.pages)[0],
+                    disableAssets: this.disableAssets,
+                },
+            },
+            'loaded_document'
+        );
+        const { point, zoom } = this.camera;
+        this.updateViewport(point, zoom);
+        return this;
+    };
+
+    // Should we move this to the app layer? onSave, onSaveAs, etc?
+
+    /**
+     * Create a new project.
+     */
+    newProject = () => {
+        if (!this.isLocal) return;
+        this.fileSystemHandle = null;
+        this.resetDocument();
+    };
+
+    /**
+     * Save the current project.
+     */
+    saveProject = async () => {
+        if (this.readOnly) return;
+        try {
+            const fileHandle = await saveToFileSystem(
+                migrate(this.document, TldrawApp.version),
+                this.fileSystemHandle
+            );
+            this.fileSystemHandle = fileHandle;
+            this.persist();
+            this.isDirty = false;
+        } catch (e: any) {
+            // Likely cancelled
+            console.error(e.message);
+        }
+        return this;
+    };
+
+    /**
+     * Save the current project as a new file.
+     */
+    saveProjectAs = async () => {
+        try {
+            const fileHandle = await saveToFileSystem(this.document, null);
+            this.fileSystemHandle = fileHandle;
+            this.persist();
+            this.isDirty = false;
+        } catch (e: any) {
+            // Likely cancelled
+            console.error(e.message);
+        }
+        return this;
+    };
+
+    /**
+     * Load a project from the filesystem.
+     * @todo
+     */
+    openProject = async () => {
+        if (!this.isLocal) return;
+
+        try {
+            const result = await openFromFileSystem();
+            if (!result) {
+                throw Error();
+            }
+
+            const { fileHandle, document } = result;
+            this.loadDocument(document);
+            this.fileSystemHandle = fileHandle;
+            this.zoomToFit();
+            this.persist();
+        } catch (e) {
+            console.error(e);
+        } finally {
+            this.persist();
+        }
+    };
+
+    /**
+     * Upload media from file
+     */
+    openAsset = async () => {
+        if (!this.disableAssets)
+            try {
+                const file = await openAssetFromFileSystem();
+                if (!file) return;
+                this.addMediaFromFile(file);
+            } catch (e) {
+                console.error(e);
+            } finally {
+                this.persist();
+            }
+    };
+
+    /**
+     * Sign out of the current account.
+     * Should move to the www layer.
+     * @todo
+     */
+    signOut = () => {
+        // TODO:
+    };
+    /* -------------------- Getters --------------------- */
+
+    /**
+     * Get the current app state.
+     */
+    getAppState = (): TDSnapshot['appState'] => {
+        return this.appState;
+    };
+
+    /**
+     * Get a page.
+     * @param pageId (optional) The page's id.
+     */
+    getPage = (pageId = this.currentPageId): TDPage => {
+        return TLDR.get_page(this.state, pageId || this.currentPageId);
+    };
+
+    /**
+     * Get the shapes (as an array) from a given page.
+     * @param pageId (optional) The page's id.
+     */
+    getShapes = (pageId = this.currentPageId): TDShape[] => {
+        return TLDR.get_shapes(this.state, pageId || this.currentPageId);
+    };
+
+    /**
+     * Get the bindings from a given page.
+     * @param pageId (optional) The page's id.
+     */
+    getBindings = (pageId = this.currentPageId): TDBinding[] => {
+        return TLDR.get_bindings(this.state, pageId || this.currentPageId);
+    };
+
+    /**
+     * Get a shape from a given page.
+     * @param id The shape's id.
+     * @param pageId (optional) The page's id.
+     */
+    getShape = <T extends TDShape = TDShape>(
+        id: string,
+        pageId = this.currentPageId
+    ): T => {
+        return TLDR.get_shape<T>(this.state, id, pageId);
+    };
+
+    /**
+     * Get the bounds of a shape on a given page.
+     * @param id The shape's id.
+     * @param pageId (optional) The page's id.
+     */
+    getShapeBounds = (id: string, pageId = this.currentPageId): TLBounds => {
+        return TLDR.get_bounds(this.getShape(id, pageId));
+    };
+
+    /**
+     * Get a binding from a given page.
+     * @param id The binding's id.
+     * @param pageId (optional) The page's id.
+     */
+    getBinding = (id: string, pageId = this.currentPageId): TDBinding => {
+        return TLDR.get_binding(this.state, id, pageId);
+    };
+
+    /**
+     * Get the page state for a given page.
+     * @param pageId (optional) The page's id.
+     */
+    getPageState = (pageId = this.currentPageId): TLPageState => {
+        return TLDR.get_page_state(this.state, pageId || this.currentPageId);
+    };
+
+    /**
+     * Turn a screen point into a point on the page.
+     * @param point The screen point
+     * @param pageId (optional) The page to use
+     */
+    getPagePoint = (point: number[], pageId = this.currentPageId): number[] => {
+        const { camera } = this.getPageState(pageId);
+        return Vec.sub(Vec.div(point, camera.zoom), camera.point);
+    };
+
+    /**
+     * Turn a page point into a point on the screen.
+     * @param pagePoint The page point
+     * @param pageId (optional) The page to use
+     */
+    getScreenPoint = (
+        pagePoint: number[],
+        pageId = this.currentPageId
+    ): number[] => {
+        const { camera } = this.getPageState(pageId);
+        return Vec.mul(Vec.add(pagePoint, camera.point), camera.zoom);
+    };
+
+    /**
+     * Get the current undo/redo stack.
+     */
+    get history() {
+        return this.stack.slice(0, this.pointer + 1);
+    }
+
+    /**
+     * Replace the current history stack.
+     */
+    set history(commands: TldrawCommand[]) {
+        this.replaceHistory(commands);
+    }
+
+    /**
+     * The current document.
+     */
+    get document(): TDDocument {
+        return this.state.document;
+    }
+
+    /**
+     * The current app state.
+     */
+    get settings(): TDSnapshot['settings'] {
+        return this.state.settings;
+    }
+
+    /**
+     * The current app state.
+     */
+    get appState(): TDSnapshot['appState'] {
+        return this.state.appState;
+    }
+
+    /**
+     * The current page id.
+     */
+    get currentPageId(): string {
+        return this.state.appState.currentPageId;
+    }
+
+    /**
+     * The current page.
+     */
+    get page(): TDPage {
+        return this.state.document.pages[this.currentPageId];
+    }
+
+    /**
+     * The current page's shapes (as an array).
+     */
+    get shapes(): TDShape[] {
+        return Object.values(this.page.shapes);
+    }
+
+    /**
+     * The current page's bindings.
+     */
+    get bindings(): TDBinding[] {
+        return Object.values(this.page.bindings);
+    }
+
+    /**
+     * The document's assets (as an array).
+     */
+    get assets(): TDAsset[] {
+        return Object.values(this.document.assets);
+    }
+
+    /**
+     * The current page's state.
+     */
+    get pageState(): TLPageState {
+        return this.state.document.pageStates[this.currentPageId];
+    }
+
+    get camera(): {
+        point: number[];
+        zoom: number;
+    } {
+        return this.pageState.camera;
+    }
+
+    get zoom(): number {
+        return this.pageState.camera.zoom;
+    }
+
+    /**
+     * The page's current selected ids.
+     */
+    get selectedIds(): string[] {
+        return this.pageState.selectedIds;
+    }
+
+    /* -------------------------------------------------- */
+    /*                        Pages                       */
+    /* -------------------------------------------------- */
+
+    /**
+     * Create a new page.
+     * @param pageId (optional) The new page's id.
+     */
+    createPage = (id?: string): this => {
+        if (this.readOnly) return this;
+        const { width, height } = this.rendererBounds;
+        return this.set_state(
+            this.commands.createPage(this, [-width / 2, -height / 2], id)
+        );
+    };
+
+    /**
+     * Change the current page.
+     * @param pageId The new current page's id.
+     */
+    changePage = (pageId: string): this => {
+        return this.set_state(this.commands.changePage(this, pageId));
+    };
+
+    /**
+     * Rename a page.
+     * @param pageId The id of the page to rename.
+     * @param name The page's new name
+     */
+    renamePage = (pageId: string, name: string): this => {
+        if (this.readOnly) return this;
+        return this.set_state(this.commands.renamePage(this, pageId, name));
+    };
+
+    /**
+     * Duplicate a page.
+     * @param pageId The id of the page to duplicate.
+     */
+    duplicatePage = (pageId: string): this => {
+        if (this.readOnly) return this;
+        return this.set_state(this.commands.duplicatePage(this, pageId));
+    };
+
+    /**
+     * Delete a page.
+     * @param pageId The id of the page to delete.
+     */
+    deletePage = (pageId?: string): this => {
+        if (this.readOnly) return this;
+        if (Object.values(this.document.pages).length <= 1) return this;
+        return this.set_state(
+            this.commands.deletePage(this, pageId ? pageId : this.currentPageId)
+        );
+    };
+
+    /* -------------------------------------------------- */
+    /*                      Clipboard                     */
+    /* -------------------------------------------------- */
+
+    private get_clipboard(
+        ids = this.selectedIds,
+        pageId = this.currentPageId
+    ):
+        | {
+              shapes: TDShape[];
+              bindings: TDBinding[];
+              assets: TDAsset[];
+          }
+        | undefined {
+        const copyingShapeIds = ids.flatMap(id =>
+            TLDR.get_document_branch(this.state, id, this.currentPageId)
+        );
+
+        const copyingShapes = copyingShapeIds.map(id =>
+            Utils.deepClone(this.getShape(id, this.currentPageId))
+        );
+
+        if (copyingShapes.length === 0) return;
+
+        const copyingBindings: TDBinding[] = Object.values(
+            this.page.bindings
+        ).filter(
+            binding =>
+                copyingShapeIds.includes(binding.fromId) &&
+                copyingShapeIds.includes(binding.toId)
+        );
+
+        const copyingAssets = copyingShapes
+            .map(shape => {
+                if (!shape.assetId) return;
+
+                return this.document.assets[shape.assetId];
+            })
+            .filter(Boolean) as TDAsset[];
+
+        return {
+            shapes: copyingShapes,
+            bindings: copyingBindings,
+            assets: copyingAssets,
+        };
+    }
+
+    /**
+     * Cut (copy and delete) one or more shapes to the clipboard.
+     * @param ids The ids of the shapes to cut.
+     */
+    cut = (
+        ids = this.selectedIds,
+        pageId = this.currentPageId,
+        e?: ClipboardEvent
+    ): this => {
+        e?.preventDefault();
+
+        this.copy(ids, pageId, e);
+        if (!this.readOnly) {
+            this.delete(ids);
+        }
+        return this;
+    };
+
+    /**
+     * Copy one or more shapes to the clipboard.
+     * @param ids The ids of the shapes to copy.
+     */
+    copy = (
+        ids = this.selectedIds,
+        pageId = this.currentPageId,
+        e?: ClipboardEvent
+    ): this => {
+        e?.preventDefault();
+
+        this.clipboard = this.get_clipboard(ids, pageId);
+
+        const jsonString = JSON.stringify({
+            type: 'tldr/clipboard',
+            ...this.clipboard,
+        });
+
+        const tldrawString = `<tldraw>${jsonString}</tldraw>`;
+
+        setClipboard(tldrawString);
+
+        if (e) {
+            e.clipboardData?.setData('text/html', tldrawString);
+        }
+
+        if (navigator.clipboard && window.ClipboardItem) {
+            navigator.clipboard.write([
+                new ClipboardItem({
+                    'text/html': new Blob([tldrawString], {
+                        type: 'text/html',
+                    }),
+                }),
+            ]);
+        }
+
+        this.pasteInfo.offset = [0, 0];
+        this.pasteInfo.center = [0, 0];
+
+        return this;
+    };
+
+    /**
+     * Paste shapes (or text) from clipboard to a certain point.
+     * @param point
+     */
+    paste = async (point?: number[], e?: ClipboardEvent) => {
+        if (this.readOnly) return;
+
+        const pasteInCurrentPage = (
+            shapes: TDShape[],
+            bindings: TDBinding[],
+            assets: TDAsset[]
+        ) => {
+            const idsMap: Record<string, string> = {};
+
+            const newAssets = assets.filter(
+                asset => this.document.assets[asset.id] === undefined
+            );
+
+            if (newAssets.length) {
+                this.patchState({
+                    document: {
+                        assets: Object.fromEntries(
+                            newAssets.map(asset => [asset.id, asset])
+                        ),
+                    },
+                });
+            }
+
+            shapes.forEach(shape => (idsMap[shape.id] = Utils.uniqueId()));
+
+            bindings.forEach(
+                binding => (idsMap[binding.id] = Utils.uniqueId())
+            );
+
+            let startIndex = TLDR.get_top_child_index(
+                this.state,
+                this.currentPageId
+            );
+
+            const shapesToPaste = shapes
+                .sort((a, b) => a.childIndex - b.childIndex)
+                .map(shape => {
+                    const parentShapeId = idsMap[shape.parentId];
+
+                    const copy = {
+                        ...shape,
+                        id: idsMap[shape.id],
+                        parentId: parentShapeId || this.currentPageId,
+                    };
+
+                    if (shape.children) {
+                        copy.children = shape.children.map(id => idsMap[id]);
+                    }
+
+                    if (!parentShapeId) {
+                        copy.childIndex = startIndex;
+                        startIndex++;
+                    }
+
+                    if (copy.handles) {
+                        Object.values(copy.handles).forEach(handle => {
+                            if (handle.bindingId) {
+                                handle.bindingId = idsMap[handle.bindingId];
+                            }
+                        });
+                    }
+
+                    return copy;
+                });
+
+            const bindingsToPaste = bindings.map(binding => ({
+                ...binding,
+                id: idsMap[binding.id],
+                toId: idsMap[binding.toId],
+                fromId: idsMap[binding.fromId],
+            }));
+
+            const commonBounds = Utils.getCommonBounds(
+                shapesToPaste.map(TLDR.get_bounds)
+            );
+
+            let center = Vec.toFixed(
+                this.getPagePoint(point || this.centerPoint)
+            );
+
+            if (
+                Vec.dist(center, this.pasteInfo.center) < 2 ||
+                Vec.dist(
+                    center,
+                    Vec.toFixed(Utils.getBoundsCenter(commonBounds))
+                ) < 2
+            ) {
+                center = Vec.add(center, this.pasteInfo.offset);
+                this.pasteInfo.offset = Vec.add(this.pasteInfo.offset, [
+                    GRID_SIZE,
+                    GRID_SIZE,
+                ]);
+            } else {
+                this.pasteInfo.center = center;
+                this.pasteInfo.offset = [0, 0];
+            }
+
+            const centeredBounds = Utils.centerBounds(commonBounds, center);
+
+            const delta = Vec.sub(
+                Utils.getBoundsCenter(centeredBounds),
+                Utils.getBoundsCenter(commonBounds)
+            );
+
+            this.create(
+                shapesToPaste.map(shape =>
+                    TLDR.get_shape_util(shape.type).create({
+                        ...shape,
+                        point: Vec.toFixed(Vec.add(shape.point, delta)),
+                        parentId: shape.parentId || this.currentPageId,
+                    })
+                ),
+                bindingsToPaste
+            );
+        };
+
+        const pasteTextAsSvg = async (text: string) => {
+            const div = document.createElement('div');
+            div.innerHTML = text;
+            const svg = div.firstChild as SVGSVGElement;
+
+            svg.style.setProperty('background-color', 'transparent');
+
+            const imageBlob = await TLDR.get_image_for_svg(
+                svg,
+                TDExportType.SVG,
+                {
+                    scale: 1,
+                    quality: 1,
+                }
+            );
+
+            if (imageBlob) {
+                const file = new File([imageBlob], 'image.svg');
+                this.addMediaFromFile(file);
+            } else {
+                pasteTextAsShape(text);
+            }
+        };
+
+        const pasteTextAsShape = (text: string) => {
+            // const shapeId = Utils.uniqueId();
+            // this.createShapes({
+            //     id: shapeId,
+            //     type: TDShapeType.Text,
+            //     parentId: this.appState.currentPageId,
+            //     text: TLDR.normalize_text(text.trim()),
+            //     point: this.getPagePoint(this.centerPoint, this.currentPageId),
+            //     style: { ...this.appState.currentStyle }
+            // });
+            // this.select(shapeId);
+        };
+
+        const paste_as_html = (html: string) => {
+            try {
+                const maybeJson = html.match(/<tldraw>(.*)<\/tldraw>/)?.[1];
+
+                if (!maybeJson) return;
+
+                const json: {
+                    type: string;
+                    shapes: TDShape[];
+                    bindings: TDBinding[];
+                    assets: TDAsset[];
+                } = JSON.parse(maybeJson);
+
+                if (json.type === 'tldr/clipboard') {
+                    pasteInCurrentPage(json.shapes, json.bindings, json.assets);
+                    return;
+                } else {
+                    throw Error('Not tldraw data!');
+                }
+            } catch (e) {
+                pasteTextAsShape(html);
+                return;
+            }
+        };
+
+        if (e !== undefined) {
+            const items: DataTransferItemList =
+                e.clipboardData?.items ?? ({} as DataTransferItemList);
+            for (const index in items) {
+                const item = items[index];
+
+                // TODO:
+                // We could eventually support pasting multiple files / images,
+                // and tiling them out on the canvas. At the moment, let's just
+                // support pasting one file / image.
+
+                if (item.type === 'text/html') {
+                    item.getAsString(async (text: string) => {
+                        paste_as_html(text);
+                    });
+                    return;
+                } else {
+                    switch (item.kind) {
+                        case 'string': {
+                            item.getAsString(async (text: string) => {
+                                if (text.startsWith('<svg')) {
+                                    pasteTextAsSvg(text);
+                                } else {
+                                    pasteTextAsShape(text);
+                                }
+                            });
+                            return;
+                        }
+                        case 'file': {
+                            const file = item.getAsFile();
+                            if (file) {
+                                this.addMediaFromFile(file);
+                                return;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        getClipboard().then(clipboard => {
+            if (clipboard) {
+                paste_as_html(clipboard);
+            }
+        });
+
+        if (navigator.clipboard) {
+            const items = await navigator.clipboard.read();
+
+            if (items.length === 0) return;
+
+            try {
+                for (const item of items) {
+                    // look for png data.
+
+                    const pngData = await item.getType('text/png');
+
+                    if (pngData) {
+                        const file = new File([pngData], 'image.png');
+                        this.addMediaFromFile(file);
+                        return;
+                    }
+
+                    // look for svg data.
+
+                    const svgData = await item.getType('image/svg+xml');
+
+                    if (svgData) {
+                        const file = new File([svgData], 'image.svg');
+                        this.addMediaFromFile(file);
+                        return;
+                    }
+
+                    // look for plain text data.
+
+                    const textData = await item.getType('text/plain');
+
+                    if (textData) {
+                        // TODO: Paste as an SVG image if the incoming data is an SVG.
+                        const text = await textData.text();
+                        text.trim();
+
+                        if (text.startsWith('<svg')) {
+                            pasteTextAsSvg(text);
+                        } else {
+                            pasteTextAsShape(text);
+                        }
+
+                        return;
+                    }
+                }
+            } catch (e) {
+                // noop
+            }
+        } else {
+            TLDR.warn('This browser does not support the Clipboard API!');
+            if (this.clipboard) {
+                pasteInCurrentPage(
+                    this.clipboard.shapes,
+                    this.clipboard.bindings,
+                    this.clipboard.assets
+                );
+            }
+        }
+
+        return this;
+    };
+
+    getSvg = async (
+        ids = this.selectedIds.length
+            ? this.selectedIds
+            : Object.keys(this.page.shapes),
+        opts = {} as Partial<{
+            transparentBackground: boolean;
+            includeFonts: boolean;
+        }>
+    ): Promise<SVGElement | undefined> => {
+        if (ids.length === 0) return;
+
+        // Embed our custom fonts
+        const svg = document.createElementNS(
+            'http://www.w3.org/2000/svg',
+            'svg'
+        );
+        const defs = document.createElementNS(
+            'http://www.w3.org/2000/svg',
+            'defs'
+        );
+        const style = document.createElementNS(
+            'http://www.w3.org/2000/svg',
+            'style'
+        );
+
+        window.focus(); // weird but necessary
+
+        if (opts.includeFonts) {
+            try {
+                const { fonts } = await fetch(TldrawApp.asset_src, {
+                    mode: 'no-cors',
+                }).then(d => d.json());
+
+                style.textContent = `
+          @font-face {
+            font-family: 'Caveat Brush';
+            src: url(data:application/x-font-woff;charset=utf-8;base64,${fonts.caveat}) format('woff');
+            font-weight: 500;
+            font-style: normal;
+          }
+
+          @font-face {
+            font-family: 'Source Code Pro';
+            src: url(data:application/x-font-woff;charset=utf-8;base64,${fonts.source_code_pro}) format('woff');
+            font-weight: 500;
+            font-style: normal;
+          }
+
+          @font-face {
+            font-family: 'Source Sans Pro';
+            src: url(data:application/x-font-woff;charset=utf-8;base64,${fonts.source_sans_pro}) format('woff');
+            font-weight: 500;
+            font-style: normal;
+          }
+
+          @font-face {
+            font-family: 'Crimson Pro';
+            src: url(data:application/x-font-woff;charset=utf-8;base64,${fonts.crimson_pro}) format('woff');
+            font-weight: 500;
+            font-style: normal;
+          }
+          `;
+            } catch (e) {
+                TLDR.warn('Could not find tldraw-assets.json file.');
+            }
+        } else {
+            style.textContent = `@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Source+Code+Pro&family=Source+Sans+Pro&family=Crimson+Pro&display=block');`;
+        }
+
+        defs.append(style);
+        svg.append(defs);
+
+        // Get the shapes in order
+        const shapes = ids
+            .map(id => this.getShape(id, this.currentPageId))
+            .sort((a, b) => a.childIndex - b.childIndex);
+
+        // Find their common bounding box. Shapes will be positioned relative to this box
+        const commonBounds = Utils.getCommonBounds(
+            shapes.map(TLDR.get_rotated_bounds)
+        );
+
+        // A quick routine to get an SVG element for each shape
+        const getSvgElementForShape = (shape: TDShape) => {
+            const util = TLDR.get_shape_util(shape);
+            const bounds = util.getBounds(shape);
+            const elm = util.getSvgElement(shape, this.settings.isDarkMode);
+
+            if (!elm) return;
+
+            // If the element is an image, set the asset src as the xlinkhref
+            if (shape.type === TDShapeType.Image) {
+                elm.setAttribute(
+                    'xlink:href',
+                    this.document.assets[shape.assetId].src
+                );
+            } else if (shape.type === TDShapeType.Video) {
+                elm.setAttribute('xlink:href', this.serializeVideo(shape.id));
+            }
+
+            // Put the element in the correct position relative to the common bounds
+            elm.setAttribute(
+                'transform',
+                `translate(${(
+                    SVG_EXPORT_PADDING +
+                    shape.point[0] -
+                    commonBounds.minX
+                ).toFixed(2)}, ${(
+                    SVG_EXPORT_PADDING +
+                    shape.point[1] -
+                    commonBounds.minY
+                ).toFixed(2)}) rotate(${(
+                    ((shape.rotation || 0) * 180) /
+                    Math.PI
+                ).toFixed(2)}, ${(bounds.width / 2).toFixed(2)}, ${(
+                    bounds.height / 2
+                ).toFixed(2)})`
+            );
+
+            return elm;
+        };
+
+        // Assemble the final SVG by iterating through each shape and its children
+        shapes.forEach(shape => {
+            // The shape is a group! Just add the children.
+            if (shape.children?.length) {
+                // Create a group <g> elm for shape
+                const g = document.createElementNS(
+                    'http://www.w3.org/2000/svg',
+                    'g'
+                );
+
+                // Get the shape's children as elms and add them to the group
+                shape.children.forEach(childId => {
+                    const shape = this.getShape(childId, this.currentPageId);
+                    const elm = getSvgElementForShape(shape);
+
+                    if (elm) {
+                        g.append(elm);
+                    }
+                });
+
+                // Add the group elm to the SVG
+                svg.append(g);
+
+                return;
+            }
+
+            // Just add the shape's element to the
+            const elm = getSvgElementForShape(shape);
+
+            if (elm) {
+                svg.append(elm);
+            }
+        });
+
+        // Resize the elm to the bounding box
+        svg.setAttribute(
+            'viewBox',
+            [
+                0,
+                0,
+                commonBounds.width + SVG_EXPORT_PADDING * 2,
+                commonBounds.height + SVG_EXPORT_PADDING * 2,
+            ].join(' ')
+        );
+
+        // Clean up the SVG by removing any hidden elements
+        svg.setAttribute('width', commonBounds.width.toString());
+        svg.setAttribute('height', commonBounds.height.toString());
+
+        if (opts.transparentBackground) {
+            svg.style.setProperty('background-color', 'transparent');
+        } else {
+            svg.style.setProperty(
+                'background-color',
+                this.settings.isDarkMode ? '#212529' : 'rgb(248, 249, 250)'
+            );
+        }
+
+        svg.querySelectorAll(
+            '.tl-fill-hitarea, .tl-stroke-hitarea, .tl-binding-indicator'
+        ).forEach(elm => elm.remove());
+
+        return svg;
+    };
+
+    /**
+     * Copy one or more shapes as SVG.
+     * @param ids The ids of the shapes to copy.
+     * @param pageId The page from which to copy the shapes.
+     * @returns A string containing the JSON.
+     */
+    copySvg = async (
+        ids = this.selectedIds.length
+            ? this.selectedIds
+            : Object.keys(this.page.shapes)
+    ) => {
+        if (ids.length === 0) return;
+
+        const svg = await this.getSvg(ids);
+
+        if (!svg) return;
+
+        const svgString = TLDR.get_svg_string(svg, 1);
+
+        this.clipboard = this.get_clipboard(ids);
+
+        const tldrawString = JSON.stringify({
+            type: 'tldr/clipboard',
+            ...this.clipboard,
+        });
+
+        if (navigator.clipboard && window.ClipboardItem) {
+            navigator.clipboard.write([
+                new ClipboardItem({
+                    'text/html': new Blob([tldrawString], {
+                        type: 'text/html',
+                    }),
+                    'text/plain': new Blob([svgString], { type: 'text/plain' }),
+                }),
+            ]);
+        }
+
+        return svgString;
+    };
+
+    /**
+     * Copy one or more shapes as JSON.
+     * @param ids The ids of the shapes to copy.
+     * @param pageId The page from which to copy the shapes.
+     * @returns A string containing the JSON.
+     */
+    copyJson = (ids = this.selectedIds, pageId = this.currentPageId) => {
+        if (ids.length === 0) ids = Object.keys(this.page.shapes);
+
+        if (ids.length === 0) return;
+
+        const shapes = ids.map(id => this.getShape(id, pageId));
+        const json = JSON.stringify(shapes, null, 2);
+
+        TLDR.copy_string_to_clipboard(json);
+
+        return json;
+    };
+
+    /**
+     * Export one or more shapes as JSON.
+     * @param ids The ids of the shapes to copy from the current page.
+     * @returns A string containing the JSON.
+     */
+    exportJson = (
+        ids = this.selectedIds.length
+            ? this.selectedIds
+            : Object.keys(this.page.shapes)
+    ) => {
+        if (ids.length === 0) return;
+
+        const shapes = ids.map(id => this.getShape(id, this.currentPageId));
+        const json = JSON.stringify(shapes, null, 2);
+        const blob = new Blob([json], { type: 'application/json' });
+
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `export.json`;
+        link.click();
+    };
+
+    /**
+     * Get an image of the selected shapes.
+     *
+     * @param format The format to export the image as.
+     * @param opts (optional) An object containing options for the image.
+     * @param opts.ids (optional) The ids of the shapes (on the current page) to get an image for.
+     * @param opts.scale (optional) The id of the page from which to get an image.
+     * @param opts.quality (optional) The quality (between 0 and 1) for the image if lossy format.
+     */
+    getImage = async (
+        format: Exclude<TDExportType, TDExportType.JSON> = TDExportType.PNG,
+        opts = {} as Partial<{
+            ids: string[];
+            scale: number;
+            quality: number;
+            transparentBackground: boolean;
+        }>
+    ): Promise<Blob | undefined> => {
+        const {
+            ids = this.selectedIds.length
+                ? this.selectedIds
+                : Object.keys(this.page.shapes),
+        } = opts;
+
+        const svg = await this.getSvg(ids, {
+            includeFonts: format !== TDExportType.SVG,
+            transparentBackground: format === TDExportType.PNG,
+        });
+
+        if (!svg) return;
+
+        if (format === TDExportType.SVG) {
+            const svgString = TLDR.get_svg_string(svg, 1);
+            const blob = new Blob([svgString], { type: 'image/svg+xml' });
+            return blob;
+        }
+
+        const imageBlob = await TLDR.get_image_for_svg(svg, format, opts);
+
+        if (!imageBlob) return;
+
+        return imageBlob;
+    };
+
+    /**
+     * Copy an image of the selected shapes.
+     *
+     * @param format The format to export the image as.
+     * @param opts (optional) An object containing options for the image.
+     * @param opts.ids (optional) The ids of the shapes (on the current page) to get an image for.
+     * @param opts.scale (optional) The id of the page from which to get an image.
+     * @param opts.quality (optional) The quality (between 0 and 1) for the image if lossy format.
+     */
+    copyImage = async (
+        format: TDExportType.PNG | TDExportType.SVG = TDExportType.PNG,
+        opts = {} as Partial<{
+            ids: string[];
+            scale: number;
+            quality: number;
+            transparentBackground: boolean;
+        }>
+    ) => {
+        if (format === TDExportType.SVG) {
+            this.copySvg(opts.ids);
+            return;
+        }
+
+        if (!(navigator.clipboard && window.ClipboardItem)) {
+            console.warn(
+                'Sorry, your browser does not support copying images.'
+            );
+            return;
+        }
+
+        const blob = await this.getImage(format, opts);
+
+        if (!blob) return;
+
+        navigator.clipboard.write([
+            new ClipboardItem({
+                [blob.type]: blob,
+            }),
+        ]);
+    };
+
+    exportImage = async (
+        format: Exclude<TDExportType, TDExportType.JSON> = TDExportType.PNG,
+        opts = {} as Partial<{
+            ids: string[];
+            pageId: string;
+            scale: number;
+            quality: number;
+            transparentBackground: boolean;
+        }>
+    ) => {
+        const {
+            scale = 2,
+            quality = 1,
+            ids = this.selectedIds,
+            pageId = this.currentPageId,
+        } = opts;
+
+        const blob = await this.getImage(format, opts);
+
+        if (!blob) return;
+
+        const name = this.document.pages[pageId].name ?? 'export';
+
+        if (this.callbacks.onExport) {
+            this.callbacks.onExport(this, {
+                name,
+                type: format,
+                blob,
+            });
+        } else {
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = `${name}.${format}`;
+            link.click();
+        }
+    };
+
+    /* -------------------------------------------------- */
+    /*                       Camera                       */
+    /* -------------------------------------------------- */
+
+    /**
+     * Set the camera to a specific point and zoom.
+     * @param point The camera point (top left of the viewport).
+     * @param zoom The zoom level.
+     * @param reason Why did the camera change?
+     */
+    setCamera = (point: number[], zoom: number, reason: string): this => {
+        this.updateViewport(point, zoom);
+        this.patchState(
+            {
+                document: {
+                    pageStates: {
+                        [this.currentPageId]: { camera: { point, zoom } },
+                    },
+                },
+            },
+            reason
+        );
+        return this;
+    };
+
+    /**
+     * Reset the camera to the default position
+     */
+    resetCamera = (): this => {
+        return this.setCamera(this.centerPoint, 1, `reset_camera`);
+    };
+
+    /**
+     * Pan the camera
+     * @param delta
+     */
+    pan = (delta: number[]): this => {
+        const { camera } = this.pageState;
+        return this.setCamera(
+            Vec.toFixed(Vec.sub(camera.point, delta)),
+            camera.zoom,
+            `panned`
+        );
+    };
+
+    /**
+     * Pinch to a new zoom level, possibly together with a pan.
+     * @param point The current point under the cursor.
+     * @param delta The movement delta.
+     * @param zoomDelta The zoom detal
+     */
+    pinchZoom = (point: number[], delta: number[], zoom: number): this => {
+        const { camera } = this.pageState;
+        const nextPoint = Vec.sub(camera.point, Vec.div(delta, camera.zoom));
+        const nextZoom = zoom;
+        const p0 = Vec.sub(Vec.div(point, camera.zoom), nextPoint);
+        const p1 = Vec.sub(Vec.div(point, nextZoom), nextPoint);
+        return this.setCamera(
+            Vec.toFixed(Vec.add(nextPoint, Vec.sub(p1, p0))),
+            nextZoom,
+            `pinch_zoomed`
+        );
+    };
+
+    /**
+     * Zoom to a new zoom level, keeping the point under the cursor in the same position
+     * @param next The new zoom level.
+     * @param center The point to zoom towards (defaults to screen center).
+     */
+    zoomTo = (next: number, center = this.centerPoint): this => {
+        const { zoom, point } = this.camera;
+        const p0 = Vec.sub(Vec.div(center, zoom), point);
+        const p1 = Vec.sub(Vec.div(center, next), point);
+        return this.setCamera(
+            Vec.toFixed(Vec.add(point, Vec.sub(p1, p0))),
+            next,
+            `zoomed_camera`
+        );
+    };
+
+    /**
+     * Zoom out by 25%
+     */
+    zoomIn = (): this => {
+        const i = Math.round((this.camera.zoom * 100) / 25);
+        const nextZoom = TLDR.get_camera_zoom((i + 1) * 0.25);
+        return this.zoomTo(nextZoom);
+    };
+
+    /**
+     * Zoom in by 25%.
+     */
+    zoomOut = (): this => {
+        const i = Math.round((this.camera.zoom * 100) / 25);
+        const nextZoom = TLDR.get_camera_zoom((i - 1) * 0.25);
+        return this.zoomTo(nextZoom);
+    };
+
+    /**
+     * Zoom to fit the page's shapes.
+     */
+    zoomToFit = (): this => {
+        const {
+            shapes,
+            pageState: { camera },
+        } = this;
+        if (shapes.length === 0) return this;
+        const { rendererBounds } = this;
+        const commonBounds = Utils.getCommonBounds(shapes.map(TLDR.get_bounds));
+        let zoom = TLDR.get_camera_zoom(
+            Math.min(
+                (rendererBounds.width - FIT_TO_SCREEN_PADDING) /
+                    commonBounds.width,
+                (rendererBounds.height - FIT_TO_SCREEN_PADDING) /
+                    commonBounds.height
+            )
+        );
+        zoom =
+            camera.zoom === zoom || camera.zoom < 1 ? Math.min(1, zoom) : zoom;
+        const mx =
+            (rendererBounds.width - commonBounds.width * zoom) / 2 / zoom;
+        const my =
+            (rendererBounds.height - commonBounds.height * zoom) / 2 / zoom;
+        return this.setCamera(
+            Vec.toFixed(
+                Vec.sub([mx, my], [commonBounds.minX, commonBounds.minY])
+            ),
+            zoom,
+            `zoomed_to_fit`
+        );
+    };
+
+    /**
+     * Zoom to the selected shapes.
+     */
+    zoomToSelection = (): this => {
+        if (this.selectedIds.length === 0) return this;
+
+        const { rendererBounds } = this;
+        const selectedBounds = TLDR.get_selected_bounds(this.state);
+
+        let zoom = TLDR.get_camera_zoom(
+            Math.min(
+                (rendererBounds.width - FIT_TO_SCREEN_PADDING) /
+                    selectedBounds.width,
+                (rendererBounds.height - FIT_TO_SCREEN_PADDING) /
+                    selectedBounds.height
+            )
+        );
+
+        zoom =
+            this.camera.zoom === zoom || this.camera.zoom < 1
+                ? Math.min(1, zoom)
+                : zoom;
+
+        const mx =
+            (rendererBounds.width - selectedBounds.width * zoom) / 2 / zoom;
+        const my =
+            (rendererBounds.height - selectedBounds.height * zoom) / 2 / zoom;
+
+        return this.setCamera(
+            Vec.toFixed(
+                Vec.sub([mx, my], [selectedBounds.minX, selectedBounds.minY])
+            ),
+            zoom,
+            `zoomed_to_selection`
+        );
+    };
+
+    /**
+     * Zoom back to content when the canvas is empty.
+     */
+    zoomToContent = (): this => {
+        const shapes = this.shapes;
+        const pageState = this.pageState;
+
+        if (shapes.length === 0) return this;
+
+        const { rendererBounds } = this;
+        const { zoom } = pageState.camera;
+        const commonBounds = Utils.getCommonBounds(shapes.map(TLDR.get_bounds));
+
+        const mx =
+            (rendererBounds.width - commonBounds.width * zoom) / 2 / zoom;
+        const my =
+            (rendererBounds.height - commonBounds.height * zoom) / 2 / zoom;
+
+        return this.setCamera(
+            Vec.toFixed(
+                Vec.sub([mx, my], [commonBounds.minX, commonBounds.minY])
+            ),
+            this.camera.zoom,
+            `zoomed_to_content`
+        );
+    };
+
+    zoomToShapes = (shapes: TDShape[]): this => {
+        const pageState = this.pageState;
+
+        if (shapes.length === 0) {
+            return this;
+        }
+
+        const { rendererBounds } = this;
+        const { zoom } = pageState.camera;
+        const commonBounds = Utils.getCommonBounds(shapes.map(TLDR.get_bounds));
+
+        const mx =
+            (rendererBounds.width - commonBounds.width * zoom) / 2 / zoom;
+        const my =
+            (rendererBounds.height - commonBounds.height * zoom) / 2 / zoom;
+
+        return this.setCamera(
+            Vec.toFixed(
+                Vec.sub([mx, my], [commonBounds.minX, commonBounds.minY])
+            ),
+            this.camera.zoom,
+            `zoomed_to_shapes`
+        );
+    };
+
+    /**
+     * Zoom the camera to 100%.
+     */
+    resetZoom = (): this => {
+        return this.zoomTo(1);
+    };
+
+    /**
+     * Zoom the camera by a certain delta.
+     * @param delta The zoom delta.
+     * @param center The point to zoom toward.
+     */
+    zoomBy = Utils.throttle((delta: number, center?: number[]): this => {
+        const { zoom } = this.camera;
+        const nextZoom = TLDR.get_camera_zoom(zoom - delta * zoom);
+        return this.zoomTo(nextZoom, center);
+    }, 16);
+
+    /* -------------------------------------------------- */
+    /*                      Selection                     */
+    /* -------------------------------------------------- */
+
+    /**
+     * Clear the selection history (undo/redo stack for selection).
+     */
+    private clear_select_history = (): this => {
+        this.selectHistory.pointer = 0;
+        this.selectHistory.stack = [this.selectedIds];
+        return this;
+    };
+
+    /**
+     * Adds a selection to the selection history (undo/redo stack for selection).
+     */
+    private add_to_select_history = (ids: string[]): this => {
+        if (this.selectHistory.pointer < this.selectHistory.stack.length) {
+            this.selectHistory.stack = this.selectHistory.stack.slice(
+                0,
+                this.selectHistory.pointer + 1
+            );
+        }
+        this.selectHistory.pointer++;
+        this.selectHistory.stack.push(ids);
+        return this;
+    };
+
+    /**
+     * Set the current selection.
+     * @param ids The ids to select
+     * @param push Whether to add the ids to the current selection instead.
+     */
+    private set_selected_ids = (ids: string[], push = false): this => {
+        const nextIds = push
+            ? [...this.pageState.selectedIds, ...ids]
+            : [...ids];
+        return this.patchState(
+            {
+                appState: {
+                    activeTool: 'select',
+                },
+                document: {
+                    pageStates: {
+                        [this.currentPageId]: {
+                            selectedIds: nextIds,
+                        },
+                    },
+                },
+            },
+            `selected`
+        );
+    };
+
+    /**
+     * Undo the most recent selection.
+     */
+    undoSelect = (): this => {
+        if (this.selectHistory.pointer > 0) {
+            this.selectHistory.pointer--;
+            this.set_selected_ids(
+                this.selectHistory.stack[this.selectHistory.pointer]
+            );
+        }
+        return this;
+    };
+
+    /**
+     * Redo the previous selection.
+     */
+    redoSelect = (): this => {
+        if (this.selectHistory.pointer < this.selectHistory.stack.length - 1) {
+            this.selectHistory.pointer++;
+            this.set_selected_ids(
+                this.selectHistory.stack[this.selectHistory.pointer]
+            );
+        }
+        return this;
+    };
+
+    /**
+     * Select one or more shapes.
+     * @param ids The shape ids to select.
+     */
+    select = (...ids: string[]): this => {
+        ids.forEach(id => {
+            if (!this.page.shapes[id]) {
+                throw Error(
+                    `That shape does not exist on page ${this.currentPageId}`
+                );
+            }
+        });
+        this.set_selected_ids(ids);
+        this.add_to_select_history(ids);
+        return this;
+    };
+
+    /**
+     * Select all shapes on the page.
+     */
+    selectAll = (pageId = this.currentPageId): this => {
+        if (this.session) return this;
+
+        // Select only shapes that are the direct child of the page
+        this.set_selected_ids(
+            Object.values(this.document.pages[pageId].shapes)
+                .filter(shape => shape.parentId === pageId)
+                .map(shape => shape.id)
+        );
+
+        this.add_to_select_history(this.selectedIds);
+
+        this.selectTool('select');
+
+        return this;
+    };
+
+    /**
+     * Deselect any selected shapes.
+     */
+    selectNone = (): this => {
+        this.set_selected_ids([]);
+        this.add_to_select_history(this.selectedIds);
+        return this;
+    };
+
+    /* -------------------------------------------------- */
+    /*                      Sessions                 p      */
+    /* -------------------------------------------------- */
+
+    /**
+     * Start a new session.
+     * @param session The new session
+     * @param args arguments of the session's start method.
+     */
+    startSession = <T extends SessionType, A extends any[] = any[]>(
+        type: T,
+        ...args: A
+    ): this => {
+        if (this.readOnly && type !== SessionType.Brush) return this;
+        if (this.session) {
+            TLDR.warn(
+                `Already in a session! (${this.session.constructor.name})`
+            );
+            this.cancelSession();
+        }
+
+        const Session = this.getSession(type);
+
+        // @ts-ignore
+        this.session = new Session(this, ...args);
+
+        const result = this.session.start();
+
+        if (result) {
+            this.patchState(
+                result,
+                `session:start_${this.session.constructor.name}`
+            );
+        }
+
+        return this;
+        // return this.setStatus(this.session.status)
+    };
+
+    /**
+     * updateSession.
+     * @param args The arguments of the current session's update method.
+     */
+    updateSession = (): this => {
+        const { session } = this;
+        if (!session) return this;
+
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const patch = session.update();
+        if (!patch) return this;
+        return this.patchState(patch, `session:${session?.constructor.name}`);
+    };
+
+    /**
+     * Cancel the current session.
+     * @param args The arguments of the current session's cancel method.
+     */
+    cancelSession = (): this => {
+        const { session } = this;
+        if (!session) return this;
+        this.session = undefined;
+
+        const result = session.cancel();
+
+        if (result) {
+            this.patchState(
+                result,
+                `session:cancel:${session.constructor.name}`
+            );
+        }
+
+        return this;
+    };
+
+    /**
+     * Complete the current session.
+     * @param args The arguments of the current session's complete method.
+     */
+    completeSession = (): this => {
+        const { session } = this;
+
+        if (!session) return this;
+        this.session = undefined;
+        const result = session.complete();
+
+        if (result === undefined) {
+            this.isCreating = false;
+
+            return this.patchState(
+                {
+                    appState: {
+                        status: TDStatus.Idle,
+                    },
+                    document: {
+                        pageStates: {
+                            [this.currentPageId]: {
+                                editingId: undefined,
+                                bindingId: undefined,
+                                hoveredId: undefined,
+                            },
+                        },
+                    },
+                },
+                `session:complete:${session.constructor.name}`
+            );
+        } else if ('after' in result) {
+            // Session ended with a command
+
+            if (this.isCreating) {
+                // We're currently creating a shape. Override the command's
+                // before state so that when we undo the command, we remove
+                // the shape we just created.
+                result.before = {
+                    appState: {
+                        ...result.before.appState,
+                        status: TDStatus.Idle,
+                    },
+                    document: {
+                        pages: {
+                            [this.currentPageId]: {
+                                shapes: Object.fromEntries(
+                                    this.selectedIds.map(id => [id, undefined])
+                                ),
+                            },
+                        },
+                        pageStates: {
+                            [this.currentPageId]: {
+                                selectedIds: [],
+                                editingId: null,
+                                bindingId: null,
+                                hoveredId: null,
+                            },
+                        },
+                    },
+                };
+
+                if (this.appState.isToolLocked) {
+                    const pageState =
+                        result.after?.document?.pageStates?.[
+                            this.currentPageId
+                        ] || {};
+                    pageState.selectedIds = [];
+                }
+
+                this.isCreating = false;
+            }
+
+            result.after.appState = {
+                ...result.after.appState,
+                status: TDStatus.Idle,
+            };
+
+            result.after.document = {
+                ...result.after.document,
+                pageStates: {
+                    ...result.after.document?.pageStates,
+                    [this.currentPageId]: {
+                        ...(result.after.document?.pageStates || {})[
+                            this.currentPageId
+                        ],
+                        editingId: null,
+                    },
+                },
+            };
+
+            this.set_state(
+                result,
+                `session:complete:${session.constructor.name}`
+            );
+        } else {
+            this.patchState(
+                {
+                    ...result,
+                    appState: {
+                        ...result.appState,
+                        status: TDStatus.Idle,
+                    },
+                    document: {
+                        ...result.document,
+                        pageStates: {
+                            [this.currentPageId]: {
+                                ...result.document?.pageStates?.[
+                                    this.currentPageId
+                                ],
+                                editingId: null,
+                            },
+                        },
+                    },
+                },
+                `session:complete:${session.constructor.name}`
+            );
+        }
+
+        return this;
+    };
+
+    /* -------------------------------------------------- */
+    /*                   Shape Functions                  */
+    /* -------------------------------------------------- */
+
+    /**
+     * Manually create shapes on the page.
+     * @param shapes An array of shape partials, containing the initial props for the shapes.
+     * @command
+     */
+    createShapes = (
+        ...shapes: ({ id: string; type: TDShapeType } & Partial<TDShape>)[]
+    ): this => {
+        if (shapes.length === 0) return this;
+
+        return this.create(
+            shapes.map(shape => {
+                return TLDR.get_shape_util(shape.type).create({
+                    parentId: this.currentPageId,
+                    workspace: this.document.id,
+                    ...shape,
+                });
+            })
+        );
+    };
+
+    /**
+     * Manually update a set of shapes.
+     * @param shapes An array of shape partials, containing the changes to be made to each shape.
+     * @command
+     */
+    updateShapes = (...shapes: ({ id: string } & Partial<TDShape>)[]): this => {
+        const pageShapes = this.document.pages[this.currentPageId].shapes;
+        const shapesToUpdate = shapes.filter(shape => pageShapes[shape.id]);
+        if (shapesToUpdate.length === 0) return this;
+        return this.set_state(
+            this.commands.updateShapes(
+                this,
+                shapesToUpdate,
+                this.currentPageId
+            ),
+            'updated_shapes'
+        );
+    };
+
+    // createTextShapeAtPoint(point: number[], id?: string): this {
+    //     const {
+    //         shapes,
+    //         appState: { currentPageId, currentStyle }
+    //     } = this;
+
+    //     const childIndex =
+    //         shapes.length === 0
+    //             ? 1
+    //             : shapes
+    //                   .filter(shape => shape.parentId === currentPageId)
+    //                   .sort((a, b) => b.childIndex - a.childIndex)[0]
+    //                   .childIndex + 1;
+
+    //     const Text = shapeUtils[TDShapeType.Text];
+
+    //     const newShape = Text.create({
+    //         id: id || Utils.uniqueId(),
+    //         parentId: currentPageId,
+    //         childIndex,
+    //         point,
+    //         style: { ...currentStyle }
+    //     });
+
+    //     const bounds = Text.getBounds(newShape);
+    //     newShape.point = Vec.sub(newShape.point, [
+    //         bounds.width / 2,
+    //         bounds.height / 2
+    //     ]);
+    //     this.createShapes(newShape);
+    //     this.setEditingId(newShape.id);
+
+    //     return this;
+    // }
+
+    createImageOrVideoShapeAtPoint(
+        id: string,
+        type: TDShapeType.Image | TDShapeType.Video,
+        point: number[],
+        size: number[],
+        assetId: string
+    ): this {
+        const {
+            shapes,
+            appState: { currentPageId, currentStyle },
+            document: { id: workspace },
+        } = this;
+
+        const childIndex =
+            shapes.length === 0
+                ? 1
+                : shapes
+                      .filter(shape => shape.parentId === currentPageId)
+                      .sort((a, b) => b.childIndex - a.childIndex)[0]
+                      .childIndex + 1;
+
+        const Shape = shapeUtils[type];
+
+        // Ensure that the pasted shape fits inside of the current viewport
+
+        if (size[0] > this.viewport.width) {
+            const r = size[1] / size[0];
+            size[0] =
+                this.viewport.width -
+                (FIT_TO_SCREEN_PADDING / this.camera.zoom) * 2;
+            size[1] = size[0] * r;
+            if (size[1] < 32 || size[1] < 32) {
+                size[1] = 32;
+                size[0] = size[1] / r;
+            }
+        } else if (size[1] > this.viewport.height) {
+            const r = size[0] / size[1];
+            size[1] =
+                this.viewport.height -
+                (FIT_TO_SCREEN_PADDING / this.camera.zoom) * 2;
+            size[0] = size[1] * r;
+            if (size[1] < 32 || size[1] < 32) {
+                size[0] = 32;
+                size[1] = size[0] / r;
+            }
+        }
+
+        const newShape = Shape.create({
+            id,
+            parentId: currentPageId,
+            childIndex,
+            point,
+            size,
+            style: { ...currentStyle },
+            assetId,
+            workspace,
+        });
+
+        const bounds = Shape.getBounds(newShape as never);
+
+        newShape.point = Vec.sub(newShape.point, [
+            bounds.width / 2,
+            bounds.height / 2,
+        ]);
+
+        this.createShapes(newShape);
+
+        return this;
+    }
+
+    /**
+     * Create one or more shapes.
+     * @param shapes An array of shapes.
+     * @command
+     */
+    create = (shapes: TDShape[] = [], bindings: TDBinding[] = []): this => {
+        if (shapes.length === 0) return this;
+        return this.set_state(
+            this.commands.createShapes(this, shapes, bindings)
+        );
+    };
+
+    /**
+     * Patch in a new set of shapes
+     * @param shapes
+     * @param bindings
+     */
+    patchCreate = (
+        shapes: TDShape[] = [],
+        bindings: TDBinding[] = []
+    ): this => {
+        if (shapes.length === 0) return this;
+        return this.patchState(
+            this.commands.createShapes(this, shapes, bindings).after
+        );
+    };
+
+    /**
+     * Delete one or more shapes.
+     * @param ids The ids of the shapes to delete.
+     * @command
+     */
+    delete = (ids = this.selectedIds): this => {
+        if (ids.length === 0) return this;
+        const drawCommand = this.commands.deleteShapes(this, ids);
+
+        if (
+            this.callbacks.onAssetDelete &&
+            drawCommand.before.document?.assets &&
+            drawCommand.after.document?.assets
+        ) {
+            const beforeAssetIds = Object.keys(
+                drawCommand.before.document.assets
+            ).filter(k => !!drawCommand.before.document!.assets![k]);
+            const afterAssetIds = Object.keys(
+                drawCommand.after.document.assets
+            ).filter(k => !!drawCommand.after.document!.assets![k]);
+
+            const intersection = beforeAssetIds.filter(
+                x => !afterAssetIds.includes(x)
+            );
+            intersection.forEach(id => this.callbacks.onAssetDelete!(this, id));
+        }
+
+        return this.set_state(drawCommand);
+    };
+
+    /**
+     * Delete all shapes on the page.
+     */
+    deleteAll = (): this => {
+        this.selectAll();
+        this.delete();
+        return this;
+    };
+
+    /**
+     * Change the style for one or more shapes.
+     * @param style A style partial to apply to the shapes.
+     * @param ids The ids of the shapes to change (defaults to selection).
+     */
+    style = (style: Partial<ShapeStyles>, ids = this.selectedIds): this => {
+        return this.set_state(this.commands.styleShapes(this, ids, style));
+    };
+
+    /**
+     * Align one or more shapes.
+     * @param direction Whether to align horizontally or vertically.
+     * @param ids The ids of the shapes to change (defaults to selection).
+     */
+    align = (type: AlignType, ids = this.selectedIds): this => {
+        if (ids.length < 2) return this;
+        return this.set_state(this.commands.alignShapes(this, ids, type));
+    };
+
+    /**
+     * Distribute one or more shapes.
+     * @param direction Whether to distribute horizontally or vertically..
+     * @param ids The ids of the shapes to change (defaults to selection).
+     */
+    distribute = (direction: DistributeType, ids = this.selectedIds): this => {
+        if (ids.length < 3) return this;
+        return this.set_state(
+            this.commands.distributeShapes(this, ids, direction)
+        );
+    };
+
+    /**
+     * Stretch one or more shapes to their common bounds.
+     * @param direction Whether to stretch horizontally or vertically.
+     * @param ids The ids of the shapes to change (defaults to selection).
+     */
+    stretch = (direction: StretchType, ids = this.selectedIds): this => {
+        if (ids.length < 2) return this;
+        return this.set_state(
+            this.commands.stretchShapes(this, ids, direction)
+        );
+    };
+
+    /**
+     * Flip one or more shapes horizontally.
+     * @param ids The ids of the shapes to change (defaults to selection).
+     */
+    flipHorizontal = (ids = this.selectedIds): this => {
+        if (ids.length === 0) return this;
+        return this.set_state(
+            this.commands.flipShapes(this, ids, FlipType.Horizontal)
+        );
+    };
+
+    /**
+     * Flip one or more shapes vertically.
+     * @param ids The ids of the shapes to change (defaults to selection).
+     */
+    flipVertical = (ids = this.selectedIds): this => {
+        if (ids.length === 0) return this;
+        return this.set_state(
+            this.commands.flipShapes(this, ids, FlipType.Vertical)
+        );
+    };
+
+    /**
+     * Move one or more shapes to a new page. Will also break or move bindings.
+     * @param toPageId The id of the page to move the shapes to.
+     * @param fromPageId The id of the page to move the shapes from (defaults to current page).
+     * @param ids The ids of the shapes to move (defaults to selection).
+     */
+    moveToPage = (
+        toPageId: string,
+        fromPageId = this.currentPageId,
+        ids = this.selectedIds
+    ): this => {
+        if (ids.length === 0) return this;
+        const { rendererBounds } = this;
+        this.set_state(
+            this.commands.moveShapesToPage(
+                this,
+                ids,
+                rendererBounds,
+                fromPageId,
+                toPageId
+            )
+        );
+        return this;
+    };
+
+    /**
+     * Move one or more shapes to the back of the page.
+     * @param ids The ids of the shapes to change (defaults to selection).
+     */
+    moveToBack = (ids = this.selectedIds): this => {
+        if (ids.length === 0) return this;
+        return this.set_state(
+            this.commands.reorderShapes(this, ids, MoveType.ToBack)
+        );
+    };
+
+    /**
+     * Move one or more shapes backward on of the page.
+     * @param ids The ids of the shapes to change (defaults to selection).
+     */
+    moveBackward = (ids = this.selectedIds): this => {
+        if (ids.length === 0) return this;
+        return this.set_state(
+            this.commands.reorderShapes(this, ids, MoveType.Backward)
+        );
+    };
+
+    /**
+     * Move one or more shapes forward on the page.
+     * @param ids The ids of the shapes to change (defaults to selection).
+     */
+    moveForward = (ids = this.selectedIds): this => {
+        if (ids.length === 0) return this;
+        return this.set_state(
+            this.commands.reorderShapes(this, ids, MoveType.Forward)
+        );
+    };
+
+    /**
+     * Move one or more shapes to the front of the page.
+     * @param ids The ids of the shapes to change (defaults to selection).
+     */
+    moveToFront = (ids = this.selectedIds): this => {
+        if (ids.length === 0) return this;
+        return this.set_state(
+            this.commands.reorderShapes(this, ids, MoveType.ToFront)
+        );
+    };
+
+    /**
+     * Nudge one or more shapes in a direction.
+     * @param delta The direction to nudge the shapes.
+     * @param isMajor Whether this is a major (i.e. shift) nudge.
+     * @param ids The ids to change (defaults to selection).
+     */
+    nudge = (
+        delta: number[],
+        isMajor = false,
+        ids = this.selectedIds
+    ): this => {
+        if (ids.length === 0) return this;
+        const size = isMajor
+            ? this.settings.showGrid
+                ? this.currentGrid * 4
+                : 10
+            : this.settings.showGrid
+            ? this.currentGrid
+            : 1;
+
+        return this.set_state(
+            this.commands.translateShapes(this, ids, Vec.mul(delta, size))
+        );
+    };
+
+    /**
+     * Duplicate one or more shapes.
+     * @param ids The ids to duplicate (defaults to selection).
+     */
+    duplicate = (ids = this.selectedIds, point?: number[]): this => {
+        if (this.readOnly) return this;
+        if (ids.length === 0) return this;
+        return this.set_state(this.commands.duplicateShapes(this, ids, point));
+    };
+
+    /**
+     * Reset the bounds for one or more shapes. Usually when the
+     * bounding box of a shape is double-clicked. Different shapes may
+     * handle this differently.
+     * @param ids The ids to change (defaults to selection).
+     */
+    resetBounds = (ids = this.selectedIds): this => {
+        const command = this.commands.resetBounds(
+            this,
+            ids,
+            this.currentPageId
+        );
+        return this.set_state(
+            this.commands.resetBounds(this, ids, this.currentPageId),
+            command.id
+        );
+    };
+
+    /**
+     * Toggle the hidden property of one or more shapes.
+     * @param ids The ids to change (defaults to selection).
+     */
+    toggleHidden = (ids = this.selectedIds): this => {
+        if (ids.length === 0) return this;
+        return this.set_state(
+            this.commands.toggleShapesProp(this, ids, 'isHidden')
+        );
+    };
+
+    /**
+     * Toggle the locked property of one or more shapes.
+     * @param ids The ids to change (defaults to selection).
+     */
+    toggleLocked = (ids = this.selectedIds): this => {
+        if (ids.length === 0) return this;
+        return this.set_state(
+            this.commands.toggleShapesProp(this, ids, 'isLocked')
+        );
+    };
+
+    /**
+     * Toggle the fixed-aspect-ratio property of one or more shapes.
+     * @param ids The ids to change (defaults to selection).
+     */
+    toggleAspectRatioLocked = (ids = this.selectedIds): this => {
+        if (ids.length === 0) return this;
+        return this.set_state(
+            this.commands.toggleShapesProp(this, ids, 'isAspectRatioLocked')
+        );
+    };
+
+    /**
+     * Toggle the decoration at a handle of one or more shapes.
+     * @param handleId The handle to toggle.
+     * @param ids The ids of the shapes to toggle the decoration on.
+     */
+    toggleDecoration = (handleId: string, ids = this.selectedIds): this => {
+        if (ids.length === 0 || !(handleId === 'start' || handleId === 'end'))
+            return this;
+        return this.set_state(
+            this.commands.toggleShapesDecoration(this, ids, handleId)
+        );
+    };
+
+    /**
+     * Set the props of one or more shapes
+     * @param props The props to set on the shapes.
+     * @param ids The ids of the shapes to set props on.
+     */
+    setShapeProps = <T extends TDShape>(
+        props: Partial<T>,
+        ids = this.selectedIds
+    ) => {
+        return this.set_state(this.commands.setShapesProps(this, ids, props));
+    };
+
+    /**
+     * Rotate one or more shapes by a delta.
+     * @param delta The delta in radians.
+     * @param ids The ids to rotate (defaults to selection).
+     */
+    rotate = (delta = Math.PI * -0.5, ids = this.selectedIds): this => {
+        if (ids.length === 0) return this;
+        const change = this.commands.rotateShapes(this, ids, delta);
+        if (!change) return this;
+        return this.set_state(change);
+    };
+
+    /**
+     * Group the selected shapes.
+     * @param ids The ids to group (defaults to selection).
+     * @param groupId The new group's id.
+     */
+    group = (
+        ids = this.selectedIds,
+        groupId = Utils.uniqueId(),
+        pageId = this.currentPageId
+    ): this => {
+        if (this.readOnly) return this;
+
+        if (
+            ids.length === 1 &&
+            this.getShape(ids[0], pageId).type === TDShapeType.Group
+        ) {
+            return this.ungroup(ids, pageId);
+        }
+
+        if (ids.length < 2) return this;
+
+        const command = this.commands.groupShapes(this, ids, groupId, pageId);
+        if (!command) return this;
+        return this.set_state(command);
+    };
+
+    /**
+     * Ungroup the selected groups.
+     * @todo
+     */
+    ungroup = (ids = this.selectedIds, pageId = this.currentPageId): this => {
+        if (this.readOnly) return this;
+
+        const groups = ids
+            .map(id => this.getShape(id, pageId))
+            .filter(shape => shape.type === TDShapeType.Group);
+
+        if (groups.length === 0) return this;
+
+        const command = this.commands.ungroupShapes(
+            this,
+            ids,
+            groups as GroupShape[],
+            pageId
+        );
+
+        if (!command) {
+            return this;
+        }
+
+        return this.set_state(command);
+    };
+
+    /**
+     * Cancel the current session.
+     */
+    cancel = (): this => {
+        this.currentTool.onCancel?.();
+
+        return this;
+    };
+
+    addMediaFromFile = async (file: File, point = this.centerPoint) => {
+        this.setIsLoading(true);
+
+        const id = Utils.uniqueId();
+        const pagePoint = this.getPagePoint(point);
+        const extension = file.name.match(/\.[0-9a-z]+$/i);
+
+        if (!extension) throw Error('No extension');
+
+        const isImage = IMAGE_EXTENSIONS.includes(extension[0].toLowerCase());
+        const isVideo = VIDEO_EXTENSIONS.includes(extension[0].toLowerCase());
+
+        if (!(isImage || isVideo)) throw Error('Wrong extension');
+
+        const shapeType = isImage ? TDShapeType.Image : TDShapeType.Video;
+        const assetType = isImage ? TDAssetType.Image : TDAssetType.Video;
+
+        let src: string | ArrayBuffer | null;
+
+        try {
+            if (this.callbacks.onAssetCreate) {
+                const result = await this.callbacks.onAssetCreate(
+                    this,
+                    file,
+                    id
+                );
+
+                if (!result)
+                    throw Error('Asset creation callback returned false');
+
+                src = result;
+            } else {
+                src = await fileToBase64(file);
+            }
+
+            if (typeof src === 'string') {
+                let size = [0, 0];
+
+                if (isImage) {
+                    // attempt to get actual svg size from viewBox attribute as
+                    if (extension[0] == '.svg') {
+                        let viewBox: string[];
+                        const svgString = await fileToText(file);
+                        const viewBoxAttribute =
+                            this.get_viewbox_from_svg(svgString);
+
+                        if (viewBoxAttribute) {
+                            viewBox = viewBoxAttribute.split(' ');
+                            size[0] = parseFloat(viewBox[2]);
+                            size[1] = parseFloat(viewBox[3]);
+                        }
+                    }
+                    if (Vec.isEqual(size, [0, 0])) {
+                        size = await getImageSizeFromSrc(src);
+                    }
+                } else {
+                    size = await getVideoSizeFromSrc(src);
+                }
+
+                const match = Object.values(this.document.assets).find(
+                    asset => asset.type === assetType && asset.src === src
+                );
+
+                let assetId: string;
+
+                if (!match) {
+                    assetId = Utils.uniqueId();
+
+                    const asset = {
+                        id: assetId,
+                        type: assetType,
+                        name: file.name,
+                        src,
+                        size,
+                    };
+
+                    this.patchState({
+                        document: {
+                            assets: {
+                                [assetId]: asset,
+                            },
+                        },
+                    });
+                } else {
+                    assetId = match.id;
+                }
+
+                this.createImageOrVideoShapeAtPoint(
+                    id,
+                    shapeType,
+                    pagePoint,
+                    size,
+                    assetId
+                );
+            }
+        } catch (error) {
+            console.warn(error);
+            this.setIsLoading(false);
+            return this;
+        }
+
+        this.setIsLoading(false);
+        return this;
+    };
+
+    private get_viewbox_from_svg = (svgStr: string | ArrayBuffer | null) => {
+        const viewBoxRegex =
+            /.*?viewBox=["'](-?[\d.]+[, ]+-?[\d.]+[, ][\d.]+[, ][\d.]+)["']/;
+
+        if (typeof svgStr === 'string') {
+            const matches = svgStr.match(viewBoxRegex);
+            return matches && matches.length >= 2 ? matches[1] : null;
+        }
+
+        console.warn('could not get viewbox from svg string');
+
+        this.setIsLoading(false);
+
+        return null;
+    };
+
+    /* -------------------------------------------------- */
+    /*                   Event Handlers                   */
+    /* -------------------------------------------------- */
+
+    /* ----------------- Keyboard Events ---------------- */
+
+    onKeyDown: TLKeyboardEventHandler = (key, info, e) => {
+        switch (e.key) {
+            case '/': {
+                if (this.status === 'idle' && !this.pageState.editingId) {
+                    const { shiftKey, metaKey, altKey, ctrlKey, spaceKey } =
+                        this;
+
+                    this.onPointerDown(
+                        {
+                            target: 'canvas',
+                            pointerId: 0,
+                            origin: info.point,
+                            point: info.point,
+                            delta: [0, 0],
+                            pressure: 0.5,
+                            shiftKey,
+                            ctrlKey,
+                            metaKey,
+                            altKey,
+                            spaceKey,
+                        },
+                        {
+                            shiftKey,
+                            altKey,
+                            ctrlKey,
+                            pointerId: 0,
+                            clientX: info.point[0],
+                            clientY: info.point[1],
+                        } as unknown as React.PointerEvent<HTMLDivElement>
+                    );
+                }
+                break;
+            }
+            case 'Escape': {
+                this.cancel();
+                break;
+            }
+            case 'Meta': {
+                this.metaKey = true;
+                break;
+            }
+            case 'Alt': {
+                this.altKey = true;
+                break;
+            }
+            case 'Control': {
+                this.ctrlKey = true;
+                break;
+            }
+            case ' ': {
+                this.isForcePanning = true;
+                this.spaceKey = true;
+                break;
+            }
+        }
+
+        this.currentTool.onKeyDown?.(key, info, e);
+
+        return this;
+    };
+
+    onKeyUp: TLKeyboardEventHandler = (key, info, e) => {
+        if (!info) return;
+
+        switch (e.key) {
+            case '/': {
+                const {
+                    currentPoint,
+                    shiftKey,
+                    metaKey,
+                    altKey,
+                    ctrlKey,
+                    spaceKey,
+                } = this;
+
+                this.onPointerUp(
+                    {
+                        target: 'canvas',
+                        pointerId: 0,
+                        origin: currentPoint,
+                        point: currentPoint,
+                        delta: [0, 0],
+                        pressure: 0.5,
+                        shiftKey,
+                        ctrlKey,
+                        metaKey,
+                        altKey,
+                        spaceKey,
+                    },
+                    {
+                        shiftKey,
+                        altKey,
+                        ctrlKey,
+                        pointerId: 0,
+                        clientX: currentPoint[0],
+                        clientY: currentPoint[1],
+                    } as unknown as React.PointerEvent<HTMLDivElement>
+                );
+                break;
+            }
+            case 'Meta': {
+                this.metaKey = false;
+                break;
+            }
+            case 'Alt': {
+                this.altKey = false;
+                break;
+            }
+            case 'Control': {
+                this.ctrlKey = false;
+                break;
+            }
+            case ' ': {
+                this.isForcePanning = false;
+                this.spaceKey = false;
+                break;
+            }
+        }
+
+        this.currentTool.onKeyUp?.(key, info, e);
+    };
+
+    /** Force bounding boxes to reset when the document loads. */
+    refreshBoundingBoxes = () => {
+        // force a change to every text shape
+        const force = this.shapes.map(shape => {
+            return [
+                shape.id,
+                {
+                    point: [...shape.point],
+                    ...('label' in shape && { label: '' }),
+                },
+            ];
+        });
+
+        const restore = this.shapes.map(shape => {
+            return [
+                shape.id,
+                {
+                    point: [...shape.point],
+                    ...('label' in shape && { label: shape.label }),
+                },
+            ];
+        });
+
+        clearPrevSize();
+
+        this.patchState({
+            document: {
+                pages: {
+                    [this.currentPageId]: {
+                        shapes: Object.fromEntries(force),
+                    },
+                },
+            },
+        });
+        this.patchState({
+            document: {
+                pages: {
+                    [this.currentPageId]: {
+                        shapes: Object.fromEntries(restore),
+                    },
+                },
+            },
+        });
+    };
+
+    /* ------------- Renderer Event Handlers ------------ */
+
+    onDragOver: TLDropEventHandler = e => {
+        e.preventDefault();
+    };
+
+    onDrop: TLDropEventHandler = async e => {
+        e.preventDefault();
+        if (this.disableAssets) return this;
+        if (e.dataTransfer.files?.length) {
+            const file = e.dataTransfer.files[0];
+            this.addMediaFromFile(file, [e.clientX, e.clientY]);
+        }
+        return this;
+    };
+
+    onPinchStart: TLPinchEventHandler = (info, e) => {
+        this.currentTool.onPinchStart?.(info, e);
+    };
+
+    onPinchEnd: TLPinchEventHandler = (info, e) =>
+        this.currentTool.onPinchEnd?.(info, e);
+
+    onPinch: TLPinchEventHandler = (info, e) =>
+        this.currentTool.onPinch?.(info, e);
+
+    onPan: TLWheelEventHandler = (info, e) => {
+        if (this.appState.status === 'pinching') return;
+        // TODO: Pan and pinchzoom are firing at the same time. Considering turning one of them off!
+
+        const delta = Vec.div(info.delta, this.camera.zoom);
+        const prev = this.camera.point;
+        const next = Vec.sub(prev, delta);
+
+        if (Vec.isEqual(next, prev)) return;
+
+        this.pan(delta);
+
+        // When panning, we also want to call onPointerMove, except when "force panning" via spacebar / middle wheel button (it's called elsewhere in that case)
+        if (!this.isForcePanning)
+            this.onPointerMove(info, e as unknown as React.PointerEvent);
+    };
+
+    onZoom: TLWheelEventHandler = (info, e) => {
+        if (this.state.appState.status !== TDStatus.Idle) return;
+        const delta = info.delta[2] / 50;
+        this.zoomBy(delta, info.point);
+        this.onPointerMove(info, e as unknown as React.PointerEvent);
+    };
+
+    /* ----------------- Pointer Events ----------------- */
+
+    updateInputs: TLPointerEventHandler = info => {
+        this.currentPoint = this.getPagePoint(info.point).concat(info.pressure);
+        this.shiftKey = info.shiftKey;
+        this.altKey = info.altKey;
+        this.ctrlKey = info.ctrlKey;
+        this.metaKey = info.metaKey;
+    };
+
+    onPointerMove: TLPointerEventHandler = (info, e) => {
+        this.previousPoint = this.currentPoint;
+        this.updateInputs(info, e);
+        if (this.isForcePanning && this.isPointing) {
+            this.onPan?.(
+                { ...info, delta: Vec.neg(info.delta) },
+                e as unknown as WheelEvent
+            );
+            return;
+        }
+
+        // Several events (e.g. pan) can trigger the same "pointer move" behavior
+        this.currentTool.onPointerMove?.(info, e);
+
+        // Move this to an emitted event
+        if (this.state.room) {
+            const { users, userId } = this.state.room;
+
+            this.callbacks.onChangePresence?.(this, {
+                ...users[userId],
+                point: this.getPagePoint(info.point),
+            });
+        }
+    };
+
+    onPointerDown: TLPointerEventHandler = (info, e) => {
+        if (e.buttons === 4) {
+            this.isForcePanning = true;
+        } else if (this.isPointing) {
+            return;
+        }
+        this.isPointing = true;
+        this.originPoint = this.getPagePoint(info.point).concat(info.pressure);
+        this.updateInputs(info, e);
+        if (this.isForcePanning) return;
+        this.currentTool.onPointerDown?.(info, e);
+    };
+
+    onPointerUp: TLPointerEventHandler = (info, e) => {
+        this.isPointing = false;
+        if (!this.shiftKey) this.isForcePanning = false;
+        this.updateInputs(info, e);
+        this.currentTool.onPointerUp?.(info, e);
+    };
+
+    // Canvas (background)
+    onPointCanvas: TLCanvasEventHandler = (info, e) => {
+        this.updateInputs(info, e);
+        this.currentTool.onPointCanvas?.(info, e);
+    };
+
+    onDoubleClickCanvas: TLCanvasEventHandler = (info, e) => {
+        this.updateInputs(info, e);
+        this.currentTool.onDoubleClickCanvas?.(info, e);
+    };
+
+    onRightPointCanvas: TLCanvasEventHandler = (info, e) => {
+        this.updateInputs(info, e);
+        this.currentTool.onRightPointCanvas?.(info, e);
+    };
+
+    onDragCanvas: TLCanvasEventHandler = (info, e) => {
+        this.updateInputs(info, e);
+        this.currentTool.onDragCanvas?.(info, e);
+    };
+
+    onReleaseCanvas: TLCanvasEventHandler = (info, e) => {
+        this.updateInputs(info, e);
+        this.currentTool.onReleaseCanvas?.(info, e);
+    };
+
+    // Shape
+    onPointShape: TLPointerEventHandler = (info, e) => {
+        this.originPoint = this.getPagePoint(info.point).concat(info.pressure);
+        this.updateInputs(info, e);
+        this.currentTool.onPointShape?.(info, e);
+    };
+
+    onReleaseShape: TLPointerEventHandler = (info, e) => {
+        this.updateInputs(info, e);
+        this.currentTool.onReleaseShape?.(info, e);
+    };
+
+    onDoubleClickShape: TLPointerEventHandler = (info, e) => {
+        this.originPoint = this.getPagePoint(info.point).concat(info.pressure);
+        this.updateInputs(info, e);
+        this.currentTool.onDoubleClickShape?.(info, e);
+    };
+
+    onRightPointShape: TLPointerEventHandler = (info, e) => {
+        this.originPoint = this.getPagePoint(info.point).concat(info.pressure);
+        this.updateInputs(info, e);
+        this.currentTool.onRightPointShape?.(info, e);
+    };
+
+    onDragShape: TLPointerEventHandler = (info, e) => {
+        this.updateInputs(info, e);
+        this.currentTool.onDragShape?.(info, e);
+    };
+
+    onHoverShape: TLPointerEventHandler = (info, e) => {
+        this.updateInputs(info, e);
+        this.currentTool.onHoverShape?.(info, e);
+    };
+
+    onUnhoverShape: TLPointerEventHandler = (info, e) => {
+        this.updateInputs(info, e);
+        this.currentTool.onUnhoverShape?.(info, e);
+    };
+
+    // Bounds (bounding box background)
+    onPointBounds: TLBoundsEventHandler = (info, e) => {
+        this.originPoint = this.getPagePoint(info.point).concat(info.pressure);
+        this.updateInputs(info, e);
+        this.currentTool.onPointBounds?.(info, e);
+    };
+
+    onDoubleClickBounds: TLBoundsEventHandler = (info, e) => {
+        this.originPoint = this.getPagePoint(info.point).concat(info.pressure);
+        this.updateInputs(info, e);
+        this.currentTool.onDoubleClickBounds?.(info, e);
+    };
+
+    onRightPointBounds: TLBoundsEventHandler = (info, e) => {
+        this.originPoint = this.getPagePoint(info.point).concat(info.pressure);
+        this.updateInputs(info, e);
+        this.currentTool.onRightPointBounds?.(info, e);
+    };
+
+    onDragBounds: TLBoundsEventHandler = (info, e) => {
+        this.updateInputs(info, e);
+        this.currentTool.onDragBounds?.(info, e);
+    };
+
+    onHoverBounds: TLBoundsEventHandler = (info, e) => {
+        this.updateInputs(info, e);
+        this.currentTool.onHoverBounds?.(info, e);
+    };
+
+    onUnhoverBounds: TLBoundsEventHandler = (info, e) => {
+        this.updateInputs(info, e);
+        this.currentTool.onUnhoverBounds?.(info, e);
+    };
+
+    onReleaseBounds: TLBoundsEventHandler = (info, e) => {
+        this.updateInputs(info, e);
+        this.currentTool.onReleaseBounds?.(info, e);
+    };
+
+    // Bounds handles (corners, edges)
+    onPointBoundsHandle: TLBoundsHandleEventHandler = (info, e) => {
+        this.originPoint = this.getPagePoint(info.point).concat(info.pressure);
+        this.updateInputs(info, e);
+        this.currentTool.onPointBoundsHandle?.(info, e);
+    };
+
+    onDoubleClickBoundsHandle: TLBoundsHandleEventHandler = (info, e) => {
+        this.originPoint = this.getPagePoint(info.point).concat(info.pressure);
+        this.updateInputs(info, e);
+        this.currentTool.onDoubleClickBoundsHandle?.(info, e);
+
+        // hack time to reset the size / clipping of an image
+        if (this.selectedIds.length !== 1) return;
+
+        const shape = this.getShape(this.selectedIds[0]);
+
+        if (
+            shape.type === TDShapeType.Image ||
+            shape.type === TDShapeType.Video
+        ) {
+            const asset = this.document.assets[shape.assetId];
+            const util = TLDR.get_shape_util(shape);
+            const centerA = util.getCenter(shape);
+            const centerB = util.getCenter({ ...shape, size: asset.size });
+            const delta = Vec.sub(centerB, centerA);
+
+            this.updateShapes({
+                id: shape.id,
+                point: Vec.sub(shape.point, delta),
+                size: asset.size,
+            });
+        }
+    };
+
+    onRightPointBoundsHandle: TLBoundsHandleEventHandler = (info, e) => {
+        this.originPoint = this.getPagePoint(info.point).concat(info.pressure);
+        this.updateInputs(info, e);
+        this.currentTool.onRightPointBoundsHandle?.(info, e);
+    };
+
+    onDragBoundsHandle: TLBoundsHandleEventHandler = (info, e) => {
+        this.updateInputs(info, e);
+        this.currentTool.onDragBoundsHandle?.(info, e);
+    };
+
+    onHoverBoundsHandle: TLBoundsHandleEventHandler = (info, e) => {
+        this.updateInputs(info, e);
+        this.currentTool.onHoverBoundsHandle?.(info, e);
+    };
+
+    onUnhoverBoundsHandle: TLBoundsHandleEventHandler = (info, e) => {
+        this.updateInputs(info, e);
+        this.currentTool.onUnhoverBoundsHandle?.(info, e);
+    };
+
+    onReleaseBoundsHandle: TLBoundsHandleEventHandler = (info, e) => {
+        this.updateInputs(info, e);
+        this.currentTool.onReleaseBoundsHandle?.(info, e);
+    };
+
+    // Handles (ie the handles of a selected arrow)
+    onPointHandle: TLPointerEventHandler = (info, e) => {
+        this.originPoint = this.getPagePoint(info.point).concat(info.pressure);
+        this.updateInputs(info, e);
+        this.currentTool.onPointHandle?.(info, e);
+    };
+
+    onDoubleClickHandle: TLPointerEventHandler = (info, e) => {
+        this.originPoint = this.getPagePoint(info.point).concat(info.pressure);
+        this.updateInputs(info, e);
+        this.currentTool.onDoubleClickHandle?.(info, e);
+    };
+
+    onRightPointHandle: TLPointerEventHandler = (info, e) => {
+        this.originPoint = this.getPagePoint(info.point).concat(info.pressure);
+        this.updateInputs(info, e);
+        this.currentTool.onRightPointHandle?.(info, e);
+    };
+
+    onDragHandle: TLPointerEventHandler = (info, e) => {
+        this.updateInputs(info, e);
+        this.currentTool.onDragHandle?.(info, e);
+    };
+
+    onHoverHandle: TLPointerEventHandler = (info, e) => {
+        this.updateInputs(info, e);
+        this.currentTool.onHoverHandle?.(info, e);
+    };
+
+    onUnhoverHandle: TLPointerEventHandler = (info, e) => {
+        this.updateInputs(info, e);
+        this.currentTool.onUnhoverHandle?.(info, e);
+    };
+
+    onReleaseHandle: TLPointerEventHandler = (info, e) => {
+        this.updateInputs(info, e);
+        this.currentTool.onReleaseHandle?.(info, e);
+    };
+
+    onShapeChange = (shape: { id: string } & Partial<TDShape>) => {
+        this.updateShapes(shape);
+    };
+
+    onShapeBlur = () => {
+        // This prevents an auto-blur event from Safari
+        if (performance.now() - this.editingStartTime < 50) return;
+
+        const { editingId } = this.pageState;
+        const { isToolLocked } = this.getAppState();
+
+        if (editingId) {
+            // If we're editing text, then delete the text if it's empty
+            const shape = this.getShape(editingId);
+            this.setEditingId();
+            // if (shape.type === TDShapeType.Text) {
+            //     if (shape.text.trim().length <= 0) {
+            //         this.patchState(
+            //             this.commands.deleteShapes(this, [editingId]).after,
+            //             'delete_empty_text'
+            //         );
+            //     } else if (!isToolLocked) {
+            //         this.select(editingId);
+            //     }
+            // }
+        }
+
+        this.currentTool.onShapeBlur?.();
+    };
+
+    onShapeClone: TLShapeCloneHandler = (info, e) => {
+        this.originPoint = this.getPagePoint(info.point).concat(info.pressure);
+        this.updateInputs(info, e);
+        this.currentTool.onShapeClone?.(info, e);
+    };
+
+    onRenderCountChange = (ids: string[]) => {
+        const appState = this.getAppState();
+        if (appState.isEmptyCanvas && ids.length > 0) {
+            this.patchState(
+                {
+                    appState: {
+                        isEmptyCanvas: false,
+                    },
+                },
+                'empty_canvas:false'
+            );
+        } else if (!appState.isEmptyCanvas && ids.length <= 0) {
+            this.patchState(
+                {
+                    appState: {
+                        isEmptyCanvas: true,
+                    },
+                },
+                'empty_canvas:true'
+            );
+        }
+    };
+
+    onError = () => {
+        // TODO:
+    };
+
+    isSelected(id: string) {
+        return this.selectedIds.includes(id);
+    }
+
+    /* ----------------- Export ----------------- */
+
+    /**
+     * Get a snapshot of a video at current frame as base64 encoded image
+     * @param id ID of video shape
+     * @returns base64 encoded frame
+     * @throws Error if video shape with given ID does not exist
+     */
+    serializeVideo(id: string): string {
+        const video = document.getElementById(
+            id + '_video'
+        ) as HTMLVideoElement;
+        if (video) {
+            const canvas = document.createElement('canvas');
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            canvas.getContext('2d')!.drawImage(video, 0, 0);
+            return canvas.toDataURL('image/png');
+        } else throw new Error('Video with id ' + id + ' not found');
+    }
+
+    /**
+     * Get a snapshot of a image (e.g. a GIF) as base64 encoded image
+     * @param id ID of image shape
+     * @returns base64 encoded frame
+     * @throws Error if image shape with given ID does not exist
+     */
+    serializeImage(id: string): string {
+        const image = document.getElementById(
+            id + '_image'
+        ) as HTMLImageElement;
+        if (image) {
+            const canvas = document.createElement('canvas');
+            canvas.width = image.width;
+            canvas.height = image.height;
+            canvas.getContext('2d')!.drawImage(image, 0, 0);
+            return canvas.toDataURL('image/png');
+        } else throw new Error('Image with id ' + id + ' not found');
+    }
+
+    patchAssets(assets: TDAssets) {
+        this.document.assets = {
+            ...this.document.assets,
+            ...assets,
+        };
+    }
+
+    get room() {
+        return this.state.room;
+    }
+
+    get isLocal() {
+        return this.state.room === undefined || this.state.room.id === 'local';
+    }
+
+    override get status() {
+        return this.appState.status;
+    }
+
+    get currentUser() {
+        if (!this.state.room) return;
+        return this.state.room.users[this.state.room.userId];
+    }
+
+    // The center of the component (in screen space)
+    get centerPoint() {
+        const { width, height } = this.rendererBounds;
+        return Vec.toFixed([width / 2, height / 2]);
+    }
+
+    get currentGrid() {
+        const { zoom } = this.camera;
+        if (zoom < 0.15) {
+            return GRID_SIZE * 16;
+        } else if (zoom < 1) {
+            return GRID_SIZE * 4;
+        } else {
+            return GRID_SIZE * 1;
+        }
+    }
+
+    getShapeUtil = TLDR.get_shape_util;
+
+    static version = 15.3;
+
+    static default_document: TDDocument = {
+        id: 'doc',
+        name: 'New Document',
+        version: TldrawApp.version,
+        pages: {
+            page: {
+                id: 'page',
+                name: 'Page 1',
+                childIndex: 1,
+                shapes: {},
+                bindings: {},
+            },
+        },
+        pageStates: {
+            page: {
+                id: 'page',
+                selectedIds: [],
+                camera: {
+                    point: [0, 0],
+                    zoom: 1,
+                },
+            },
+        },
+        assets: {},
+    };
+
+    static default_state: TDSnapshot = {
+        settings: {
+            isCadSelectMode: false,
+            isPenMode: false,
+            isDarkMode: false,
+            isZoomSnap: false,
+            isFocusMode: false,
+            isSnapping: false,
+            isDebugMode: false,
+            isReadonlyMode: false,
+            keepStyleMenuOpen: false,
+            nudgeDistanceLarge: 16,
+            nudgeDistanceSmall: 1,
+            showRotateHandles: true,
+            showBindingHandles: true,
+            showCloneHandles: false,
+            showGrid: false,
+        },
+        appState: {
+            status: TDStatus.Idle,
+            activeTool: 'select',
+            hoveredId: undefined,
+            currentPageId: 'page',
+            currentStyle: defaultStyle,
+            isToolLocked: false,
+            isMenuOpen: false,
+            isEmptyCanvas: false,
+            snapLines: [],
+            laserLine: [],
+            isLoading: false,
+            disableAssets: false,
+        },
+        document: TldrawApp.default_document,
+    };
+
+    static asset_src = 'tldraw-assets.json';
+}
diff --git a/libs/components/board-state/src/types/commands.ts b/libs/components/board-state/src/types/commands.ts
new file mode 100644
index 000000000..718108cc5
--- /dev/null
+++ b/libs/components/board-state/src/types/commands.ts
@@ -0,0 +1,105 @@
+import type { TLBounds } from '@tldraw/core';
+import type { TldrawApp } from '../tldraw-app';
+import type {
+    TldrawCommand,
+    AlignType,
+    TDShape,
+    TDBinding,
+    DistributeType,
+    FlipType,
+    MoveType,
+    StretchType,
+    ShapeStyles,
+    GroupShape,
+} from '@toeverything/components/board-types';
+
+export interface Commands {
+    alignShapes(app: TldrawApp, ids: string[], type: AlignType): TldrawCommand;
+    changePage(app: TldrawApp, pageId: string): TldrawCommand;
+    createPage(
+        app: TldrawApp,
+        center: number[],
+        pageId?: string
+    ): TldrawCommand;
+    createShapes(
+        app: TldrawApp,
+        shapes: TDShape[],
+        bindings: TDBinding[]
+    ): TldrawCommand;
+    deletePage(app: TldrawApp, pageId: string): TldrawCommand;
+    deleteShapes(app: TldrawApp, ids: string[], pageId?: string): TldrawCommand;
+    distributeShapes(
+        app: TldrawApp,
+        ids: string[],
+        type: DistributeType
+    ): TldrawCommand;
+    duplicatePage(app: TldrawApp, pageId: string): TldrawCommand;
+    duplicateShapes(
+        app: TldrawApp,
+        ids: string[],
+        point?: number[]
+    ): TldrawCommand;
+    flipShapes(app: TldrawApp, ids: string[], type: FlipType): TldrawCommand;
+    groupShapes(
+        app: TldrawApp,
+        ids: string[],
+        groupId: string,
+        pageId: string
+    ): TldrawCommand | undefined;
+    moveShapesToPage(
+        app: TldrawApp,
+        ids: string[],
+        viewportBounds: TLBounds,
+        fromPageId: string,
+        toPageId: string
+    ): TldrawCommand;
+    renamePage(app: TldrawApp, pageId: string, name: string): TldrawCommand;
+    reorderShapes(app: TldrawApp, ids: string[], type: MoveType): TldrawCommand;
+    resetBounds(app: TldrawApp, ids: string[], pageId: string): TldrawCommand;
+    rotateShapes(
+        app: TldrawApp,
+        ids: string[],
+        delta: number
+    ): TldrawCommand | void;
+    setShapesProps<T extends TDShape>(
+        app: TldrawApp,
+        ids: string[],
+        partial: Partial<T>
+    ): TldrawCommand;
+    stretchShapes(
+        app: TldrawApp,
+        ids: string[],
+        type: StretchType
+    ): TldrawCommand;
+    styleShapes(
+        app: TldrawApp,
+        ids: string[],
+        changes: Partial<ShapeStyles>
+    ): TldrawCommand;
+    toggleShapesDecoration(
+        app: TldrawApp,
+        ids: string[],
+        decorationId: 'start' | 'end'
+    ): TldrawCommand;
+    toggleShapesProp(
+        app: TldrawApp,
+        ids: string[],
+        prop: keyof TDShape
+    ): TldrawCommand;
+    translateShapes(
+        app: TldrawApp,
+        ids: string[],
+        delta: number[]
+    ): TldrawCommand;
+    ungroupShapes(
+        app: TldrawApp,
+        selectedIds: string[],
+        groupShapes: GroupShape[],
+        pageId: string
+    ): TldrawCommand | undefined;
+    updateShapes(
+        app: TldrawApp,
+        updates: ({ id: string } & Partial<TDShape>)[],
+        pageId: string
+    ): TldrawCommand;
+}
diff --git a/libs/components/board-state/src/types/tool.ts b/libs/components/board-state/src/types/tool.ts
new file mode 100644
index 000000000..d318a8b67
--- /dev/null
+++ b/libs/components/board-state/src/types/tool.ts
@@ -0,0 +1,131 @@
+import {
+    TLKeyboardEventHandler,
+    TLPinchEventHandler,
+    TLPointerEventHandler,
+    Utils,
+} from '@tldraw/core';
+import type { TldrawApp } from '../tldraw-app';
+import {
+    TDEventHandler,
+    TDToolType,
+} from '@toeverything/components/board-types';
+
+export enum Status {
+    Idle = 'idle',
+    Creating = 'creating',
+    Pinching = 'pinching',
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export abstract class BaseTool<T extends string = any> extends TDEventHandler {
+    type: TDToolType = 'select' as const;
+
+    previous?: TDToolType;
+
+    status: Status | T = Status.Idle;
+
+    constructor(public app: TldrawApp) {
+        super();
+    }
+
+    protected readonly set_status = (status: Status | T) => {
+        this.status = status as Status | T;
+        this.app.setStatus(this.status as string);
+    };
+
+    onEnter = () => {
+        this.set_status(Status.Idle);
+    };
+
+    onExit = () => {
+        this.set_status(Status.Idle);
+    };
+
+    onCancel = () => {
+        if (this.status === Status.Idle) {
+            this.app.selectTool('select');
+        } else {
+            this.set_status(Status.Idle);
+        }
+
+        this.app.cancelSession();
+    };
+
+    getNextChildIndex = () => {
+        const {
+            shapes,
+            appState: { currentPageId },
+        } = this.app;
+
+        return shapes.length === 0
+            ? 1
+            : shapes
+                  .filter(shape => shape.parentId === currentPageId)
+                  .sort((a, b) => b.childIndex - a.childIndex)[0].childIndex +
+                  1;
+    };
+
+    /* --------------------- Camera --------------------- */
+
+    override onPinchStart: TLPinchEventHandler = () => {
+        this.app.cancelSession();
+        this.set_status(Status.Pinching);
+    };
+
+    override onPinchEnd: TLPinchEventHandler = () => {
+        if (Utils.isMobileSafari()) {
+            this.app.undoSelect();
+        }
+        this.set_status(Status.Idle);
+    };
+
+    override onPinch: TLPinchEventHandler = (info, e) => {
+        if (this.status !== 'pinching') return;
+        if (isNaN(info.delta[0]) || isNaN(info.delta[1])) return;
+        this.app.pinchZoom(info.point, info.delta, info.delta[2]);
+        this.onPointerMove?.(info, e as unknown as React.PointerEvent);
+    };
+
+    /* ---------------------- Keys ---------------------- */
+
+    override onKeyDown: TLKeyboardEventHandler = key => {
+        if (key === 'Escape') {
+            this.onCancel();
+            return;
+        }
+
+        if (key === 'Meta' || key === 'Control' || key === 'Alt') {
+            this.app.updateSession();
+            return;
+        }
+    };
+
+    override onKeyUp: TLKeyboardEventHandler = key => {
+        if (key === 'Meta' || key === 'Control' || key === 'Alt') {
+            this.app.updateSession();
+            return;
+        }
+    };
+
+    /* --------------------- Pointer -------------------- */
+
+    override onPointerMove: TLPointerEventHandler = () => {
+        if (this.status === Status.Creating) {
+            this.app.updateSession();
+        }
+    };
+
+    override onPointerUp: TLPointerEventHandler = () => {
+        if (this.status === Status.Creating) {
+            this.app.completeSession();
+
+            const { isToolLocked } = this.app.appState;
+
+            if (!isToolLocked) {
+                this.app.selectTool('select');
+            }
+        }
+
+        this.set_status(Status.Idle);
+    };
+}
diff --git a/libs/components/board-state/tsconfig.json b/libs/components/board-state/tsconfig.json
new file mode 100644
index 000000000..dce3dae9a
--- /dev/null
+++ b/libs/components/board-state/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/components/board-state/tsconfig.lib.json b/libs/components/board-state/tsconfig.lib.json
new file mode 100644
index 000000000..6a4378740
--- /dev/null
+++ b/libs/components/board-state/tsconfig.lib.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"]
+}
diff --git a/libs/components/board-state/tsconfig.spec.json b/libs/components/board-state/tsconfig.spec.json
new file mode 100644
index 000000000..24b3ac659
--- /dev/null
+++ b/libs/components/board-state/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+    "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"
+    ]
+}
diff --git a/libs/components/board-tools/.babelrc b/libs/components/board-tools/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/components/board-tools/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/components/board-tools/.eslintrc.json b/libs/components/board-tools/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/components/board-tools/.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": {}
+        }
+    ]
+}
diff --git a/libs/components/board-tools/README.md b/libs/components/board-tools/README.md
new file mode 100644
index 000000000..02c91fb39
--- /dev/null
+++ b/libs/components/board-tools/README.md
@@ -0,0 +1,7 @@
+# components-board-tools
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test components-board-tools` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/components/board-tools/jest.config.ts b/libs/components/board-tools/jest.config.ts
new file mode 100644
index 000000000..acd77f612
--- /dev/null
+++ b/libs/components/board-tools/jest.config.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+    displayName: 'components-board-tools',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/components/board-tools',
+};
diff --git a/libs/components/board-tools/package.json b/libs/components/board-tools/package.json
new file mode 100644
index 000000000..6c955afd2
--- /dev/null
+++ b/libs/components/board-tools/package.json
@@ -0,0 +1,10 @@
+{
+    "name": "@toeverything/components/board-tools",
+    "version": "0.0.1",
+    "license": "MIT",
+    "dependencies": {
+        "@tldraw/core": "^1.12.0",
+        "@tldraw/intersect": "^1.7.1",
+        "@tldraw/vec": "^1.7.0"
+    }
+}
diff --git a/libs/components/board-tools/project.json b/libs/components/board-tools/project.json
new file mode 100644
index 000000000..acae74e1b
--- /dev/null
+++ b/libs/components/board-tools/project.json
@@ -0,0 +1,45 @@
+{
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/components/board-tools/src",
+    "projectType": "library",
+    "tags": ["components"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/components/board-tools",
+                "tsConfig": "libs/components/board-tools/tsconfig.lib.json",
+                "project": "libs/components/board-tools/package.json",
+                "entryFile": "libs/components/board-tools/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "libs/rollup.config.cjs",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/components/board-tools/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/components/board-tools/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/components/board-tools"],
+            "options": {
+                "jestConfig": "libs/components/board-tools/jest.config.ts",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/components/board-tools/src/arrow-tool/arrow-tool.ts b/libs/components/board-tools/src/arrow-tool/arrow-tool.ts
new file mode 100644
index 000000000..8ad9f4255
--- /dev/null
+++ b/libs/components/board-tools/src/arrow-tool/arrow-tool.ts
@@ -0,0 +1,45 @@
+import { Utils, TLPointerEventHandler } from '@tldraw/core';
+import Vec from '@tldraw/vec';
+import { Arrow } from '@toeverything/components/board-shapes';
+import { SessionType, TDShapeType } from '@toeverything/components/board-types';
+import { BaseTool, BaseToolStatus } from '@toeverything/components/board-state';
+import { services } from '@toeverything/datasource/db-service';
+
+export class ArrowTool extends BaseTool {
+    override type = TDShapeType.Arrow as const;
+
+    /* ----------------- Event Handlers ----------------- */
+
+    override onPointerDown: TLPointerEventHandler = () => {
+        if (this.status !== BaseToolStatus.Idle) return;
+
+        const {
+            currentPoint,
+            currentGrid,
+            settings: { showGrid },
+            appState: { currentPageId, currentStyle },
+            document: { id: workspace },
+        } = this.app;
+
+        const childIndex = this.getNextChildIndex();
+
+        const id = Utils.uniqueId();
+
+        const newShape = Arrow.create({
+            id,
+            parentId: currentPageId,
+            childIndex,
+            point: showGrid
+                ? Vec.snap(currentPoint, currentGrid)
+                : currentPoint,
+            style: { ...currentStyle },
+            workspace,
+        });
+
+        this.app.patchCreate([newShape]);
+
+        this.app.startSession(SessionType.Arrow, newShape.id, 'end', true);
+
+        this.set_status(BaseToolStatus.Creating);
+    };
+}
diff --git a/libs/components/board-tools/src/arrow-tool/index.ts b/libs/components/board-tools/src/arrow-tool/index.ts
new file mode 100644
index 000000000..fdda403fb
--- /dev/null
+++ b/libs/components/board-tools/src/arrow-tool/index.ts
@@ -0,0 +1 @@
+export * from './arrow-tool';
diff --git a/libs/components/board-tools/src/draw-tool/draw-tool.ts b/libs/components/board-tools/src/draw-tool/draw-tool.ts
new file mode 100644
index 000000000..a82eabfe4
--- /dev/null
+++ b/libs/components/board-tools/src/draw-tool/draw-tool.ts
@@ -0,0 +1,86 @@
+import { Utils, TLPointerEventHandler } from '@tldraw/core';
+import { Draw } from '@toeverything/components/board-shapes';
+import { SessionType, TDShapeType } from '@toeverything/components/board-types';
+import { BaseTool } from '@toeverything/components/board-state';
+
+enum Status {
+    Idle = 'idle',
+    Creating = 'creating',
+    Extending = 'extending',
+    Pinching = 'pinching',
+}
+
+export class DrawTool extends BaseTool {
+    override type = TDShapeType.Draw as const;
+
+    private last_shape_id?: string;
+
+    override onEnter = () => {
+        this.last_shape_id = undefined;
+    };
+
+    override onCancel = () => {
+        switch (this.status) {
+            case Status.Idle: {
+                this.app.selectTool('select');
+                break;
+            }
+            default: {
+                this.set_status(Status.Idle);
+                break;
+            }
+        }
+
+        this.app.cancelSession();
+    };
+
+    /* ----------------- Event Handlers ----------------- */
+
+    override onPointerDown: TLPointerEventHandler = info => {
+        if (this.status !== Status.Idle) return;
+        const {
+            currentPoint,
+            appState: { currentPageId, currentStyle },
+            document: { id: workspace },
+        } = this.app;
+        const previous =
+            this.last_shape_id && this.app.getShape(this.last_shape_id);
+        if (info.shiftKey && previous) {
+            // Extend the previous shape
+            this.app.startSession(SessionType.Draw, previous.id);
+            this.set_status(Status.Extending);
+        } else {
+            // Create a new shape
+
+            const childIndex = this.getNextChildIndex();
+            const id = Utils.uniqueId();
+
+            const newShape = Draw.create({
+                id,
+                parentId: currentPageId,
+                childIndex,
+                point: currentPoint,
+                style: { ...currentStyle },
+                workspace,
+            });
+            this.last_shape_id = id;
+            this.app.patchCreate([newShape]);
+            this.app.startSession(SessionType.Draw, id);
+            this.set_status(Status.Creating);
+        }
+    };
+
+    override onPointerMove: TLPointerEventHandler = () => {
+        switch (this.status) {
+            case Status.Extending:
+            case Status.Creating: {
+                this.app.updateSession();
+            }
+        }
+    };
+
+    override onPointerUp: TLPointerEventHandler = () => {
+        this.app.completeSession();
+        this.set_status(Status.Idle);
+    };
+}
diff --git a/libs/components/board-tools/src/draw-tool/index.ts b/libs/components/board-tools/src/draw-tool/index.ts
new file mode 100644
index 000000000..6e007ca3b
--- /dev/null
+++ b/libs/components/board-tools/src/draw-tool/index.ts
@@ -0,0 +1 @@
+export * from './draw-tool';
diff --git a/libs/components/board-tools/src/editor-tool/editor-tool.ts b/libs/components/board-tools/src/editor-tool/editor-tool.ts
new file mode 100644
index 000000000..4f1d20a2d
--- /dev/null
+++ b/libs/components/board-tools/src/editor-tool/editor-tool.ts
@@ -0,0 +1,61 @@
+/* eslint-disable no-restricted-syntax */
+import { TLPointerEventHandler } from '@tldraw/core';
+import Vec from '@tldraw/vec';
+import { Editor } from '@toeverything/components/board-shapes';
+import { TDShapeType } from '@toeverything/components/board-types';
+import { BaseTool, BaseToolStatus } from '@toeverything/components/board-state';
+import { services } from '@toeverything/datasource/db-service';
+
+export class EditorTool extends BaseTool {
+    override type = TDShapeType.Editor as const;
+
+    /* ----------------- Event Handlers ----------------- */
+
+    // It is not allowed to drag and drop the size when it is created, it is directly treated as a click event, and the Group is created asynchronously
+    override onPointerDown: TLPointerEventHandler = () => {
+        if (this.status !== BaseToolStatus.Idle) return;
+
+        const {
+            currentPoint,
+            currentGrid,
+            settings: { showGrid },
+            appState: { currentPageId, currentStyle },
+            document: { id: workspace },
+        } = this.app;
+
+        const childIndex = this.getNextChildIndex();
+
+        const createGroup = async () => {
+            this.set_status(BaseToolStatus.Creating);
+            const group = await services.api.editorBlock.create({
+                workspace,
+                type: 'group',
+                parentId: currentPageId,
+            });
+            await services.api.editorBlock.create({
+                workspace,
+                type: 'text',
+                parentId: group.id,
+            });
+            const newShape = Editor.create({
+                id: group.id,
+                rootBlockId: group.id,
+                affineId: group.id,
+                parentId: currentPageId,
+                childIndex,
+                point: showGrid
+                    ? Vec.snap(currentPoint, currentGrid)
+                    : currentPoint,
+                style: { ...currentStyle },
+                workspace,
+            });
+            // In order to make the cursor just positioned at the beginning of the first line, it needs to be adjusted according to the padding            newShape.point = Vec.sub(newShape.point, [50, 30]);
+            this.app.patchCreate([newShape]);
+            this.app.select(group.id);
+            this.app.setEditingId(group.id);
+            this.set_status(BaseToolStatus.Idle);
+            this.app.selectTool('select');
+        };
+        createGroup();
+    };
+}
diff --git a/libs/components/board-tools/src/editor-tool/index.ts b/libs/components/board-tools/src/editor-tool/index.ts
new file mode 100644
index 000000000..d431dac97
--- /dev/null
+++ b/libs/components/board-tools/src/editor-tool/index.ts
@@ -0,0 +1 @@
+export * from './editor-tool';
diff --git a/libs/components/board-tools/src/ellipse-tool/ellipse-tool.ts b/libs/components/board-tools/src/ellipse-tool/ellipse-tool.ts
new file mode 100644
index 000000000..d0b8edfdb
--- /dev/null
+++ b/libs/components/board-tools/src/ellipse-tool/ellipse-tool.ts
@@ -0,0 +1,49 @@
+import { Utils, TLPointerEventHandler, TLBoundsCorner } from '@tldraw/core';
+import Vec from '@tldraw/vec';
+import { Ellipse } from '@toeverything/components/board-shapes';
+import { SessionType, TDShapeType } from '@toeverything/components/board-types';
+import { BaseTool, BaseToolStatus } from '@toeverything/components/board-state';
+
+export class EllipseTool extends BaseTool {
+    override type = TDShapeType.Ellipse as const;
+
+    /* ----------------- Event Handlers ----------------- */
+
+    override onPointerDown: TLPointerEventHandler = () => {
+        if (this.status !== BaseToolStatus.Idle) return;
+
+        const {
+            currentPoint,
+            currentGrid,
+            settings: { showGrid },
+            appState: { currentPageId, currentStyle },
+            document: { id: workspace },
+        } = this.app;
+
+        const childIndex = this.getNextChildIndex();
+
+        const id = Utils.uniqueId();
+
+        const newShape = Ellipse.create({
+            id,
+            parentId: currentPageId,
+            childIndex,
+            point: showGrid
+                ? Vec.snap(currentPoint, currentGrid)
+                : currentPoint,
+            style: { ...currentStyle },
+            workspace,
+        });
+
+        this.app.patchCreate([newShape]);
+
+        this.app.startSession(
+            SessionType.TransformSingle,
+            newShape.id,
+            TLBoundsCorner.BottomRight,
+            true
+        );
+
+        this.set_status(BaseToolStatus.Creating);
+    };
+}
diff --git a/libs/components/board-tools/src/ellipse-tool/index.ts b/libs/components/board-tools/src/ellipse-tool/index.ts
new file mode 100644
index 000000000..7f402b566
--- /dev/null
+++ b/libs/components/board-tools/src/ellipse-tool/index.ts
@@ -0,0 +1 @@
+export * from './ellipse-tool';
diff --git a/libs/components/board-tools/src/erase-tool/erase-tool.ts b/libs/components/board-tools/src/erase-tool/erase-tool.ts
new file mode 100644
index 000000000..a5b68aea0
--- /dev/null
+++ b/libs/components/board-tools/src/erase-tool/erase-tool.ts
@@ -0,0 +1,91 @@
+import Vec from '@tldraw/vec';
+import type { TLPointerEventHandler } from '@tldraw/core';
+import { SessionType, DEAD_ZONE } from '@toeverything/components/board-types';
+import { BaseTool } from '@toeverything/components/board-state';
+
+enum Status {
+    Idle = 'idle',
+    Pointing = 'pointing',
+    Erasing = 'erasing',
+}
+
+export class EraseTool extends BaseTool {
+    override type = 'erase' as const;
+
+    override status: Status = Status.Idle;
+
+    /* ----------------- Event Handlers ----------------- */
+
+    override onPointerDown: TLPointerEventHandler = () => {
+        if (this.status !== Status.Idle) return;
+
+        this.set_status(Status.Pointing);
+    };
+
+    override onPointerMove: TLPointerEventHandler = info => {
+        switch (this.status) {
+            case Status.Pointing: {
+                if (Vec.dist(info.origin, info.point) > DEAD_ZONE) {
+                    this.app.startSession(SessionType.Erase);
+                    this.app.updateSession();
+                    this.set_status(Status.Erasing);
+                }
+                break;
+            }
+            case Status.Erasing: {
+                this.app.updateSession();
+            }
+        }
+    };
+
+    override onPointerUp: TLPointerEventHandler = () => {
+        switch (this.status) {
+            case Status.Pointing: {
+                const shapeIdsAtPoint = this.app.shapes
+                    .filter(shape => !shape.isLocked)
+                    .filter(shape =>
+                        this.app
+                            .getShapeUtil(shape)
+                            .hitTestPoint(shape, this.app.currentPoint)
+                    )
+                    .flatMap(shape =>
+                        shape.children
+                            ? [shape.id, ...shape.children]
+                            : shape.id
+                    );
+
+                this.app.delete(shapeIdsAtPoint);
+
+                break;
+            }
+            case Status.Erasing: {
+                this.app.completeSession();
+
+                // Should the app go back to the previous state, the select
+                // state, or stay in the eraser state?
+
+                // if (this.previous) {
+                //   this.app.selectTool(this.previous)
+                // } else {
+                //   this.app.selectTool('select')
+                // }
+            }
+        }
+
+        this.set_status(Status.Idle);
+    };
+
+    override onCancel = () => {
+        if (this.status === Status.Idle) {
+            if (this.previous) {
+                this.app.selectTool(this.previous);
+            } else {
+                this.app.selectTool('select');
+            }
+        } else {
+            this.set_status(Status.Idle);
+        }
+
+        this.app.cancelSession();
+    };
+}
diff --git a/libs/components/board-tools/src/erase-tool/index.ts b/libs/components/board-tools/src/erase-tool/index.ts
new file mode 100644
index 000000000..9c5ce872f
--- /dev/null
+++ b/libs/components/board-tools/src/erase-tool/index.ts
@@ -0,0 +1 @@
+export * from './erase-tool';
diff --git a/libs/components/board-tools/src/frame-tool/frame-tool.ts b/libs/components/board-tools/src/frame-tool/frame-tool.ts
new file mode 100644
index 000000000..7e9b34ec3
--- /dev/null
+++ b/libs/components/board-tools/src/frame-tool/frame-tool.ts
@@ -0,0 +1,52 @@
+import {
+    Utils,
+    TLPointerEventHandler,
+    TLBoundsCorner,
+    TLBoundsHandleEventHandler,
+} from '@tldraw/core';
+import Vec from '@tldraw/vec';
+import { Frame } from '@toeverything/components/board-shapes';
+import { SessionType, TDShapeType } from '@toeverything/components/board-types';
+import { BaseTool, BaseToolStatus } from '@toeverything/components/board-state';
+
+export class FrameTool extends BaseTool {
+    override type = TDShapeType.Frame as const;
+    /* ----------------- Event Handlers ----------------- */
+
+    override onPointerDown: TLPointerEventHandler = () => {
+        if (this.status !== BaseToolStatus.Idle) return;
+        const {
+            currentPoint,
+            currentGrid,
+            settings: { showGrid },
+            appState: { currentPageId, currentStyle },
+            document: { id: workspace },
+        } = this.app;
+
+        const childIndex = 0;
+
+        const id = Utils.uniqueId();
+
+        const newShape = Frame.create({
+            id,
+            parentId: currentPageId,
+            childIndex,
+            point: showGrid
+                ? Vec.snap(currentPoint, currentGrid)
+                : currentPoint,
+            style: { ...currentStyle },
+            workspace,
+        });
+
+        this.app.patchCreate([newShape]);
+
+        this.app.startSession(
+            SessionType.TransformSingle,
+            newShape.id,
+            TLBoundsCorner.BottomRight,
+            true
+        );
+
+        this.set_status(BaseToolStatus.Creating);
+    };
+}
diff --git a/libs/components/board-tools/src/frame-tool/index.ts b/libs/components/board-tools/src/frame-tool/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/libs/components/board-tools/src/hand-draw/hand-draw-tool.ts b/libs/components/board-tools/src/hand-draw/hand-draw-tool.ts
new file mode 100644
index 000000000..c579c8e7e
--- /dev/null
+++ b/libs/components/board-tools/src/hand-draw/hand-draw-tool.ts
@@ -0,0 +1,51 @@
+import { TLPointerEventHandler } from '@tldraw/core';
+// import { Draw } from '@toeverything/components/board-shapes';
+import { Vec } from '@tldraw/vec';
+
+import { TDShapeType } from '@toeverything/components/board-types';
+import { BaseTool } from '@toeverything/components/board-state';
+
+enum Status {
+    Idle = 'idle',
+    Pointing = 'pointing',
+    Draw = 'draw',
+}
+
+export class HandDrawTool extends BaseTool {
+    override type = TDShapeType.HandDraw as const;
+
+    override status: Status = Status.Idle;
+
+    /* ----------------- Event Handlers ----------------- */
+
+    override onPointerDown: TLPointerEventHandler = () => {
+        if (this.app.readOnly) return;
+        if (this.status !== Status.Idle) return;
+
+        this.set_status(Status.Pointing);
+    };
+
+    override onPointerMove: TLPointerEventHandler = (info, e) => {
+        if (this.app.readOnly) return;
+        const delta = Vec.div(info.delta, this.app.camera.zoom);
+        const prev = this.app.camera.point;
+        const next = Vec.sub(prev, delta);
+        if (Vec.isEqual(next, prev)) return;
+
+        switch (this.status) {
+            case Status.Pointing: {
+                this.app.pan(Vec.neg(delta));
+
+                break;
+            }
+        }
+    };
+
+    override onPointerUp: TLPointerEventHandler = () => {
+        this.set_status(Status.Idle);
+    };
+
+    override onCancel = () => {
+        this.set_status(Status.Idle);
+    };
+}
diff --git a/libs/components/board-tools/src/hand-draw/index.ts b/libs/components/board-tools/src/hand-draw/index.ts
new file mode 100644
index 000000000..cc6c154d0
--- /dev/null
+++ b/libs/components/board-tools/src/hand-draw/index.ts
@@ -0,0 +1 @@
+export * from './hand-draw-tool';
diff --git a/libs/components/board-tools/src/hexagon-tool/hexagon-tool.ts b/libs/components/board-tools/src/hexagon-tool/hexagon-tool.ts
new file mode 100644
index 000000000..60b2269a4
--- /dev/null
+++ b/libs/components/board-tools/src/hexagon-tool/hexagon-tool.ts
@@ -0,0 +1,49 @@
+import { Utils, TLPointerEventHandler, TLBoundsCorner } from '@tldraw/core';
+import Vec from '@tldraw/vec';
+import { Hexagon } from '@toeverything/components/board-shapes';
+import { SessionType, TDShapeType } from '@toeverything/components/board-types';
+import { BaseTool, BaseToolStatus } from '@toeverything/components/board-state';
+
+export class HexagonTool extends BaseTool {
+    override type = TDShapeType.Triangle as const;
+
+    /* ----------------- Event Handlers ----------------- */
+
+    override onPointerDown: TLPointerEventHandler = () => {
+        if (this.status !== BaseToolStatus.Idle) return;
+
+        const {
+            currentPoint,
+            currentGrid,
+            settings: { showGrid },
+            appState: { currentPageId, currentStyle },
+            document: { id: workspace },
+        } = this.app;
+
+        const childIndex = this.getNextChildIndex();
+
+        const id = Utils.uniqueId();
+
+        const newShape = Hexagon.create({
+            id,
+            parentId: currentPageId,
+            childIndex,
+            point: showGrid
+                ? Vec.snap(currentPoint, currentGrid)
+                : currentPoint,
+            style: { ...currentStyle },
+            workspace,
+        });
+
+        this.app.patchCreate([newShape]);
+
+        this.app.startSession(
+            SessionType.TransformSingle,
+            newShape.id,
+            TLBoundsCorner.BottomRight,
+            true
+        );
+
+        this.set_status(BaseToolStatus.Creating);
+    };
+}
diff --git a/libs/components/board-tools/src/hexagon-tool/index.ts b/libs/components/board-tools/src/hexagon-tool/index.ts
new file mode 100644
index 000000000..114a7b891
--- /dev/null
+++ b/libs/components/board-tools/src/hexagon-tool/index.ts
@@ -0,0 +1 @@
+export * from './hexagon-tool';
diff --git a/libs/components/board-tools/src/highlight-tool/highlight-tool.ts b/libs/components/board-tools/src/highlight-tool/highlight-tool.ts
new file mode 100644
index 000000000..9e7096d2e
--- /dev/null
+++ b/libs/components/board-tools/src/highlight-tool/highlight-tool.ts
@@ -0,0 +1,95 @@
+import { Utils, TLPointerEventHandler } from '@tldraw/core';
+import { Draw } from '@toeverything/components/board-shapes';
+import {
+    SessionType,
+    TDShapeType,
+    DashStyle,
+    StrokeWidth,
+} from '@toeverything/components/board-types';
+import { BaseTool } from '@toeverything/components/board-state';
+
+enum Status {
+    Idle = 'idle',
+    Creating = 'creating',
+    Extending = 'extending',
+    Pinching = 'pinching',
+}
+
+export class HighlightTool extends BaseTool {
+    override type = TDShapeType.Highlight as const;
+
+    private last_shape_id?: string;
+
+    override onEnter = () => {
+        this.last_shape_id = undefined;
+    };
+
+    override onCancel = () => {
+        switch (this.status) {
+            case Status.Idle: {
+                this.app.selectTool('select');
+                break;
+            }
+            default: {
+                this.set_status(Status.Idle);
+                break;
+            }
+        }
+
+        this.app.cancelSession();
+    };
+
+    /* ----------------- Event Handlers ----------------- */
+
+    override onPointerDown: TLPointerEventHandler = info => {
+        if (this.status !== Status.Idle) return;
+        const {
+            currentPoint,
+            appState: { currentPageId, currentStyle },
+            document: { id: workspace },
+        } = this.app;
+        const previous =
+            this.last_shape_id && this.app.getShape(this.last_shape_id);
+        if (info.shiftKey && previous) {
+            // Extend the previous shape
+            this.app.startSession(SessionType.Draw, previous.id);
+            this.set_status(Status.Extending);
+        } else {
+            // Create a new shape
+            const id = Utils.uniqueId();
+
+            const childIndex = this.getNextChildIndex();
+
+            const newShape = Draw.create({
+                id,
+                parentId: currentPageId,
+                childIndex,
+                point: currentPoint,
+                style: {
+                    ...currentStyle,
+                    strokeWidth: StrokeWidth.s4,
+                    dash: DashStyle.Solid,
+                },
+                workspace,
+            });
+            this.last_shape_id = id;
+            this.app.patchCreate([newShape]);
+            this.app.startSession(SessionType.Draw, id);
+            this.set_status(Status.Creating);
+        }
+    };
+
+    override onPointerMove: TLPointerEventHandler = () => {
+        switch (this.status) {
+            case Status.Extending:
+            case Status.Creating: {
+                this.app.updateSession();
+            }
+        }
+    };
+
+    override onPointerUp: TLPointerEventHandler = () => {
+        this.app.completeSession();
+        this.set_status(Status.Idle);
+    };
+}
diff --git a/libs/components/board-tools/src/highlight-tool/index.ts b/libs/components/board-tools/src/highlight-tool/index.ts
new file mode 100644
index 000000000..32c60e97a
--- /dev/null
+++ b/libs/components/board-tools/src/highlight-tool/index.ts
@@ -0,0 +1 @@
+export * from './highlight-tool';
diff --git a/libs/components/board-tools/src/index.ts b/libs/components/board-tools/src/index.ts
new file mode 100644
index 000000000..1bc068a07
--- /dev/null
+++ b/libs/components/board-tools/src/index.ts
@@ -0,0 +1,64 @@
+import { TDShapeType, TDToolType } from '@toeverything/components/board-types';
+import { ArrowTool } from './arrow-tool';
+import { LineTool } from './line-tool';
+import { DrawTool } from './draw-tool';
+import { PencilTool } from './pencil-tool';
+import { HighlightTool } from './highlight-tool';
+import { EllipseTool } from './ellipse-tool';
+import { RectangleTool } from './rectangle-tool';
+import { TriangleTool } from './triangle-tool';
+import { SelectTool } from './select-tool';
+import { EraseTool } from './erase-tool';
+import { EditorTool } from './editor-tool';
+import { HexagonTool } from './hexagon-tool';
+import { PentagramTool } from './pentagram-tool';
+import { WhiteArrowTool } from './white-arrow-tool';
+import { LaserTool } from './laser-tool';
+import { HandDrawTool } from './hand-draw';
+import { FrameTool } from './frame-tool/frame-tool';
+
+export interface ToolsMap {
+    select: typeof SelectTool;
+    erase: typeof EraseTool;
+    [TDShapeType.Draw]: typeof DrawTool;
+    [TDShapeType.Ellipse]: typeof EllipseTool;
+    [TDShapeType.Rectangle]: typeof RectangleTool;
+    [TDShapeType.Triangle]: typeof TriangleTool;
+    [TDShapeType.Hexagon]: typeof HexagonTool;
+    [TDShapeType.Pentagram]: typeof PentagramTool;
+    [TDShapeType.Line]: typeof LineTool;
+    [TDShapeType.Arrow]: typeof ArrowTool;
+    [TDShapeType.Pencil]: typeof PencilTool;
+    [TDShapeType.Highlight]: typeof HighlightTool;
+    [TDShapeType.Editor]: typeof EditorTool;
+    [TDShapeType.WhiteArrow]: typeof WhiteArrowTool;
+    [TDShapeType.HandDraw]: typeof HandDrawTool;
+    [TDShapeType.Laser]: typeof LaserTool;
+    [TDShapeType.Frame]: typeof FrameTool;
+}
+
+export type ToolOfType<K extends TDToolType> = ToolsMap[K];
+
+export type ArgsOfType<K extends TDToolType> = ConstructorParameters<
+    ToolOfType<K>
+>;
+
+export const tools: { [K in TDToolType]: ToolsMap[K] } = {
+    select: SelectTool,
+    erase: EraseTool,
+    [TDShapeType.Draw]: DrawTool,
+    [TDShapeType.Pencil]: PencilTool,
+    [TDShapeType.Highlight]: HighlightTool,
+    [TDShapeType.Ellipse]: EllipseTool,
+    [TDShapeType.Rectangle]: RectangleTool,
+    [TDShapeType.Triangle]: TriangleTool,
+    [TDShapeType.Pentagram]: PentagramTool,
+    [TDShapeType.Line]: LineTool,
+    [TDShapeType.Arrow]: ArrowTool,
+    [TDShapeType.Editor]: EditorTool,
+    [TDShapeType.Hexagon]: HexagonTool,
+    [TDShapeType.WhiteArrow]: WhiteArrowTool,
+    [TDShapeType.Laser]: LaserTool,
+    [TDShapeType.HandDraw]: HandDrawTool,
+    [TDShapeType.Frame]: FrameTool,
+};
diff --git a/libs/components/board-tools/src/laser-tool/index.ts b/libs/components/board-tools/src/laser-tool/index.ts
new file mode 100644
index 000000000..1e5614bf8
--- /dev/null
+++ b/libs/components/board-tools/src/laser-tool/index.ts
@@ -0,0 +1 @@
+export * from './laser-tool';
diff --git a/libs/components/board-tools/src/laser-tool/laser-tool.ts b/libs/components/board-tools/src/laser-tool/laser-tool.ts
new file mode 100644
index 000000000..2f0d75411
--- /dev/null
+++ b/libs/components/board-tools/src/laser-tool/laser-tool.ts
@@ -0,0 +1,69 @@
+import { TLPointerEventHandler } from '@tldraw/core';
+// import { Draw } from '@toeverything/components/board-shapes';
+import { Vec } from '@tldraw/vec';
+
+import { SessionType, TDShapeType } from '@toeverything/components/board-types';
+import { BaseTool } from '@toeverything/components/board-state';
+
+enum Status {
+    Idle = 'idle',
+    Pointing = 'pointing',
+    Laser = 'laser',
+}
+
+export class LaserTool extends BaseTool {
+    override type = TDShapeType.Laser as const;
+
+    override status: Status = Status.Idle;
+
+    /* ----------------- Event Handlers ----------------- */
+
+    override onPointerDown: TLPointerEventHandler = () => {
+        if (this.app.readOnly) return;
+        if (this.status !== Status.Idle) return;
+
+        this.set_status(Status.Pointing);
+    };
+
+    override onPointerMove: TLPointerEventHandler = info => {
+        if (this.app.readOnly) return;
+        switch (this.status) {
+            case Status.Pointing: {
+                if (Vec.dist(info.origin, info.point) > 3) {
+                    this.app.startSession(SessionType.Laser);
+                    this.app.updateSession();
+                    this.set_status(Status.Laser);
+                }
+                break;
+            }
+            case Status.Laser: {
+                this.app.updateSession();
+            }
+        }
+    };
+
+    override onPointerUp: TLPointerEventHandler = () => {
+        if (this.app.readOnly) return;
+        switch (this.status) {
+            case Status.Laser: {
+                this.app.completeSession();
+            }
+        }
+
+        this.set_status(Status.Idle);
+    };
+
+    override onCancel = () => {
+        if (this.status === Status.Idle) {
+            if (this.previous) {
+                this.app.selectTool(this.previous);
+            } else {
+                this.app.selectTool('select');
+            }
+        } else {
+            this.set_status(Status.Idle);
+        }
+
+        this.app.cancelSession();
+    };
+}
diff --git a/libs/components/board-tools/src/line-tool/index.ts b/libs/components/board-tools/src/line-tool/index.ts
new file mode 100644
index 000000000..3c78daa13
--- /dev/null
+++ b/libs/components/board-tools/src/line-tool/index.ts
@@ -0,0 +1 @@
+export * from './line-tool';
diff --git a/libs/components/board-tools/src/line-tool/line-tool.ts b/libs/components/board-tools/src/line-tool/line-tool.ts
new file mode 100644
index 000000000..48e27cc5f
--- /dev/null
+++ b/libs/components/board-tools/src/line-tool/line-tool.ts
@@ -0,0 +1,47 @@
+import { Utils, TLPointerEventHandler } from '@tldraw/core';
+import Vec from '@tldraw/vec';
+import { Arrow } from '@toeverything/components/board-shapes';
+import { SessionType, TDShapeType } from '@toeverything/components/board-types';
+import { BaseTool, BaseToolStatus } from '@toeverything/components/board-state';
+
+export class LineTool extends BaseTool {
+    override type = TDShapeType.Line as const;
+
+    /* ----------------- Event Handlers ----------------- */
+
+    override onPointerDown: TLPointerEventHandler = () => {
+        if (this.status !== BaseToolStatus.Idle) return;
+
+        const {
+            currentPoint,
+            currentGrid,
+            settings: { showGrid },
+            appState: { currentPageId, currentStyle },
+            document: { id: workspace },
+        } = this.app;
+
+        const childIndex = this.getNextChildIndex();
+        const id = Utils.uniqueId();
+
+        const newShape = Arrow.create({
+            id,
+            parentId: currentPageId,
+            childIndex,
+            point: showGrid
+                ? Vec.snap(currentPoint, currentGrid)
+                : currentPoint,
+            decorations: {
+                start: undefined,
+                end: undefined,
+            },
+            style: { ...currentStyle },
+            workspace,
+        });
+
+        this.app.patchCreate([newShape]);
+
+        this.app.startSession(SessionType.Arrow, newShape.id, 'end', true);
+
+        this.set_status(BaseToolStatus.Creating);
+    };
+}
diff --git a/libs/components/board-tools/src/pencil-tool/index.ts b/libs/components/board-tools/src/pencil-tool/index.ts
new file mode 100644
index 000000000..ce2b64677
--- /dev/null
+++ b/libs/components/board-tools/src/pencil-tool/index.ts
@@ -0,0 +1 @@
+export * from './pencil-tool';
diff --git a/libs/components/board-tools/src/pencil-tool/pencil-tool.ts b/libs/components/board-tools/src/pencil-tool/pencil-tool.ts
new file mode 100644
index 000000000..d174dab6f
--- /dev/null
+++ b/libs/components/board-tools/src/pencil-tool/pencil-tool.ts
@@ -0,0 +1,90 @@
+import { Utils, TLPointerEventHandler } from '@tldraw/core';
+import { Draw } from '@toeverything/components/board-shapes';
+import {
+    DashStyle,
+    SessionType,
+    TDShapeType,
+} from '@toeverything/components/board-types';
+import { BaseTool } from '@toeverything/components/board-state';
+
+enum Status {
+    Idle = 'idle',
+    Creating = 'creating',
+    Extending = 'extending',
+    Pinching = 'pinching',
+}
+
+export class PencilTool extends BaseTool {
+    override type = TDShapeType.Pencil as const;
+
+    private last_shape_id?: string;
+
+    override onEnter = () => {
+        this.last_shape_id = undefined;
+    };
+
+    override onCancel = () => {
+        switch (this.status) {
+            case Status.Idle: {
+                this.app.selectTool('select');
+                break;
+            }
+            default: {
+                this.set_status(Status.Idle);
+                break;
+            }
+        }
+
+        this.app.cancelSession();
+    };
+
+    /* ----------------- Event Handlers ----------------- */
+
+    override onPointerDown: TLPointerEventHandler = info => {
+        if (this.status !== Status.Idle) return;
+        const {
+            currentPoint,
+            appState: { currentPageId, currentStyle },
+            document: { id: workspace },
+        } = this.app;
+        const previous =
+            this.last_shape_id && this.app.getShape(this.last_shape_id);
+        if (info.shiftKey && previous) {
+            // Extend the previous shape
+            this.app.startSession(SessionType.Draw, previous.id);
+            this.set_status(Status.Extending);
+        } else {
+            // Create a new shape
+            const id = Utils.uniqueId();
+
+            const childIndex = this.getNextChildIndex();
+
+            const newShape = Draw.create({
+                id,
+                parentId: currentPageId,
+                childIndex,
+                point: currentPoint,
+                style: { ...currentStyle, dash: DashStyle.Solid },
+                workspace,
+            });
+            this.last_shape_id = id;
+            this.app.patchCreate([newShape]);
+            this.app.startSession(SessionType.Draw, id);
+            this.set_status(Status.Creating);
+        }
+    };
+
+    override onPointerMove: TLPointerEventHandler = () => {
+        switch (this.status) {
+            case Status.Extending:
+            case Status.Creating: {
+                this.app.updateSession();
+            }
+        }
+    };
+
+    override onPointerUp: TLPointerEventHandler = () => {
+        this.app.completeSession();
+        this.set_status(Status.Idle);
+    };
+}
diff --git a/libs/components/board-tools/src/pentagram-tool/index.ts b/libs/components/board-tools/src/pentagram-tool/index.ts
new file mode 100644
index 000000000..2c2c02b1e
--- /dev/null
+++ b/libs/components/board-tools/src/pentagram-tool/index.ts
@@ -0,0 +1 @@
+export * from './pentagram-tool';
diff --git a/libs/components/board-tools/src/pentagram-tool/pentagram-tool.ts b/libs/components/board-tools/src/pentagram-tool/pentagram-tool.ts
new file mode 100644
index 000000000..98c8fd474
--- /dev/null
+++ b/libs/components/board-tools/src/pentagram-tool/pentagram-tool.ts
@@ -0,0 +1,49 @@
+import { Utils, TLPointerEventHandler, TLBoundsCorner } from '@tldraw/core';
+import Vec from '@tldraw/vec';
+import { Pentagram } from '@toeverything/components/board-shapes';
+import { SessionType, TDShapeType } from '@toeverything/components/board-types';
+import { BaseTool, BaseToolStatus } from '@toeverything/components/board-state';
+
+export class PentagramTool extends BaseTool {
+    override type = TDShapeType.Pentagram as const;
+
+    /* ----------------- Event Handlers ----------------- */
+
+    override onPointerDown: TLPointerEventHandler = () => {
+        if (this.status !== BaseToolStatus.Idle) return;
+
+        const {
+            currentPoint,
+            currentGrid,
+            settings: { showGrid },
+            appState: { currentPageId, currentStyle },
+            document: { id: workspace },
+        } = this.app;
+
+        const childIndex = this.getNextChildIndex();
+
+        const id = Utils.uniqueId();
+
+        const newShape = Pentagram.create({
+            id,
+            parentId: currentPageId,
+            childIndex,
+            point: showGrid
+                ? Vec.snap(currentPoint, currentGrid)
+                : currentPoint,
+            style: { ...currentStyle },
+            workspace,
+        });
+
+        this.app.patchCreate([newShape]);
+
+        this.app.startSession(
+            SessionType.TransformSingle,
+            newShape.id,
+            TLBoundsCorner.BottomRight,
+            true
+        );
+
+        this.set_status(BaseToolStatus.Creating);
+    };
+}
diff --git a/libs/components/board-tools/src/rectangle-tool/index.ts b/libs/components/board-tools/src/rectangle-tool/index.ts
new file mode 100644
index 000000000..125fc4c9f
--- /dev/null
+++ b/libs/components/board-tools/src/rectangle-tool/index.ts
@@ -0,0 +1 @@
+export * from './rectangle-tool';
diff --git a/libs/components/board-tools/src/rectangle-tool/rectangle-tool.ts b/libs/components/board-tools/src/rectangle-tool/rectangle-tool.ts
new file mode 100644
index 000000000..2bbd3dec2
--- /dev/null
+++ b/libs/components/board-tools/src/rectangle-tool/rectangle-tool.ts
@@ -0,0 +1,49 @@
+import { Utils, TLPointerEventHandler, TLBoundsCorner } from '@tldraw/core';
+import Vec from '@tldraw/vec';
+import { Rectangle } from '@toeverything/components/board-shapes';
+import { SessionType, TDShapeType } from '@toeverything/components/board-types';
+import { BaseTool, BaseToolStatus } from '@toeverything/components/board-state';
+
+export class RectangleTool extends BaseTool {
+    override type = TDShapeType.Rectangle as const;
+
+    /* ----------------- Event Handlers ----------------- */
+
+    override onPointerDown: TLPointerEventHandler = () => {
+        if (this.status !== BaseToolStatus.Idle) return;
+
+        const {
+            currentPoint,
+            currentGrid,
+            settings: { showGrid },
+            appState: { currentPageId, currentStyle },
+            document: { id: workspace },
+        } = this.app;
+
+        const childIndex = this.getNextChildIndex();
+
+        const id = Utils.uniqueId();
+
+        const newShape = Rectangle.create({
+            id,
+            parentId: currentPageId,
+            childIndex,
+            point: showGrid
+                ? Vec.snap(currentPoint, currentGrid)
+                : currentPoint,
+            style: { ...currentStyle },
+            workspace,
+        });
+
+        this.app.patchCreate([newShape]);
+
+        this.app.startSession(
+            SessionType.TransformSingle,
+            newShape.id,
+            TLBoundsCorner.BottomRight,
+            true
+        );
+
+        this.set_status(BaseToolStatus.Creating);
+    };
+}
diff --git a/libs/components/board-tools/src/select-tool/index.ts b/libs/components/board-tools/src/select-tool/index.ts
new file mode 100644
index 000000000..ab0aa93d0
--- /dev/null
+++ b/libs/components/board-tools/src/select-tool/index.ts
@@ -0,0 +1 @@
+export * from './select-tool';
diff --git a/libs/components/board-tools/src/select-tool/select-tool.ts b/libs/components/board-tools/src/select-tool/select-tool.ts
new file mode 100644
index 000000000..3c96d0fa5
--- /dev/null
+++ b/libs/components/board-tools/src/select-tool/select-tool.ts
@@ -0,0 +1,768 @@
+import {
+    TLBoundsCorner,
+    TLBoundsEdge,
+    TLBoundsEventHandler,
+    TLBoundsHandleEventHandler,
+    TLCanvasEventHandler,
+    TLPointerEventHandler,
+    TLKeyboardEventHandler,
+    TLShapeCloneHandler,
+    Utils,
+} from '@tldraw/core';
+import {
+    SessionType,
+    TDShapeType,
+    CLONING_DISTANCE,
+    DEAD_ZONE,
+} from '@toeverything/components/board-types';
+import { BaseTool, TLDR } from '@toeverything/components/board-state';
+import Vec from '@tldraw/vec';
+
+enum Status {
+    Idle = 'idle',
+    Creating = 'creating',
+    Pinching = 'pinching',
+    PointingCanvas = 'pointingCanvas',
+    PointingHandle = 'pointingHandle',
+    PointingBounds = 'pointingBounds',
+    PointingClone = 'pointingClone',
+    TranslatingClone = 'translatingClone',
+    PointingBoundsHandle = 'pointingBoundsHandle',
+    TranslatingHandle = 'translatingHandle',
+    Translating = 'translating',
+    Transforming = 'transforming',
+    Rotating = 'rotating',
+    Brushing = 'brushing',
+    GridCloning = 'gridCloning',
+    ClonePainting = 'clonePainting',
+}
+
+export class SelectTool extends BaseTool<Status> {
+    override type = 'select' as const;
+
+    pointedId?: string;
+
+    selectedGroupId?: string;
+
+    pointedHandleId?: 'start' | 'end' | 'bend';
+
+    pointedBoundsHandle?:
+        | TLBoundsCorner
+        | TLBoundsEdge
+        | 'rotate'
+        | 'center'
+        | 'left'
+        | 'right';
+
+    pointedLinkHandleId?: 'left' | 'center' | 'right';
+
+    /* --------------------- Methods -------------------- */
+
+    private deselect(id: string) {
+        this.app.select(...this.app.selectedIds.filter(oid => oid !== id));
+    }
+
+    private select(id: string) {
+        this.app.select(id);
+    }
+
+    private push_select(id: string) {
+        const shape = this.app.getShape(id);
+        this.app.select(
+            ...this.app.selectedIds.filter(oid => oid !== shape.parentId),
+            id
+        );
+    }
+
+    private select_none() {
+        this.app.selectNone();
+    }
+
+    override onEnter = () => {
+        this.set_status(Status.Idle);
+    };
+
+    override onExit = () => {
+        this.set_status(Status.Idle);
+    };
+
+    clonePaint = (point: number[]) => {
+        if (this.app.selectedIds.length === 0) return;
+
+        const shapes = this.app.selectedIds.map(id => this.app.getShape(id));
+
+        const bounds = Utils.expandBounds(
+            Utils.getCommonBounds(shapes.map(TLDR.get_bounds)),
+            16
+        );
+
+        const center = Utils.getBoundsCenter(bounds);
+
+        const size = [bounds.width, bounds.height];
+
+        const gridPoint = [
+            center[0] +
+                size[0] *
+                    Math.floor((point[0] + size[0] / 2 - center[0]) / size[0]),
+            center[1] +
+                size[1] *
+                    Math.floor((point[1] + size[1] / 2 - center[1]) / size[1]),
+        ];
+
+        const centeredBounds = Utils.centerBounds(bounds, gridPoint);
+
+        const hit = this.app.shapes.some(shape =>
+            TLDR.get_shape_util(shape).hitTestBounds(shape, centeredBounds)
+        );
+
+        if (!hit) {
+            this.app.duplicate(this.app.selectedIds, gridPoint);
+        }
+    };
+
+    getShapeClone = (
+        id: string,
+        side:
+            | 'top'
+            | 'right'
+            | 'bottom'
+            | 'left'
+            | 'topLeft'
+            | 'topRight'
+            | 'bottomRight'
+            | 'bottomLeft'
+    ) => {
+        const shape = this.app.getShape(id);
+        const utils = TLDR.get_shape_util(shape);
+
+        if (utils.canClone) {
+            const bounds = utils.getBounds(shape);
+
+            const center = utils.getCenter(shape);
+
+            let point = {
+                top: [
+                    bounds.minX,
+                    bounds.minY - (bounds.height + CLONING_DISTANCE),
+                ],
+                right: [bounds.maxX + CLONING_DISTANCE, bounds.minY],
+                bottom: [bounds.minX, bounds.maxY + CLONING_DISTANCE],
+                left: [
+                    bounds.minX - (bounds.width + CLONING_DISTANCE),
+                    bounds.minY,
+                ],
+                topLeft: [
+                    bounds.minX - (bounds.width + CLONING_DISTANCE),
+                    bounds.minY - (bounds.height + CLONING_DISTANCE),
+                ],
+                topRight: [
+                    bounds.maxX + CLONING_DISTANCE,
+                    bounds.minY - (bounds.height + CLONING_DISTANCE),
+                ],
+                bottomLeft: [
+                    bounds.minX - (bounds.width + CLONING_DISTANCE),
+                    bounds.maxY + CLONING_DISTANCE,
+                ],
+                bottomRight: [
+                    bounds.maxX + CLONING_DISTANCE,
+                    bounds.maxY + CLONING_DISTANCE,
+                ],
+            }[side];
+
+            if (shape.rotation !== 0) {
+                const newCenter = Vec.add(point, [
+                    bounds.width / 2,
+                    bounds.height / 2,
+                ]);
+
+                const rotatedCenter = Vec.rotWith(
+                    newCenter,
+                    center,
+                    shape.rotation || 0
+                );
+
+                point = Vec.sub(rotatedCenter, [
+                    bounds.width / 2,
+                    bounds.height / 2,
+                ]);
+            }
+
+            const id = Utils.uniqueId();
+
+            const clone = {
+                ...shape,
+                id,
+                point,
+            };
+
+            // if (clone.type === TDShapeType.Sticky) {
+            //     clone.text = '';
+            // }
+
+            return clone;
+        }
+
+        return;
+    };
+
+    /* ----------------- Event Handlers ----------------- */
+
+    override onCancel = () => {
+        if (this.app.pageState.editingId) {
+            this.app.setEditingId();
+        } else {
+            this.select_none();
+        }
+        this.app.cancelSession();
+        this.set_status(Status.Idle);
+    };
+
+    override onKeyDown: TLKeyboardEventHandler = (key, info, e) => {
+        switch (key) {
+            case 'Escape': {
+                this.onCancel();
+                break;
+            }
+            case 'Tab': {
+                if (
+                    !this.app.pageState.editingId &&
+                    this.status === Status.Idle &&
+                    this.app.selectedIds.length === 1
+                ) {
+                    const [selectedId] = this.app.selectedIds;
+                    const clonedShape = this.getShapeClone(selectedId, 'right');
+
+                    if (clonedShape) {
+                        this.app.createShapes(clonedShape);
+                        this.set_status(Status.Idle);
+                        // if (clonedShape.type === TDShapeType.Sticky) {
+                        //     this.app.select(clonedShape.id);
+                        //     this.app.setEditingId(clonedShape.id);
+                        // }
+                    }
+                }
+                break;
+            }
+            case 'Meta':
+            case 'Control':
+            case 'Alt': {
+                this.app.updateSession();
+                break;
+            }
+            case 'Enter': {
+                const { pageState } = this.app;
+                if (
+                    pageState.selectedIds.length === 1 &&
+                    !pageState.editingId
+                ) {
+                    this.app.setEditingId(pageState.selectedIds[0]);
+                    e.preventDefault();
+                }
+            }
+        }
+    };
+
+    override onKeyUp: TLKeyboardEventHandler = (key, info) => {
+        if (
+            this.status === Status.ClonePainting &&
+            !(info.altKey && info.shiftKey)
+        ) {
+            this.set_status(Status.Idle);
+            return;
+        }
+
+        /* noop */
+        if (key === 'Meta' || key === 'Control' || key === 'Alt') {
+            this.app.updateSession();
+            return;
+        }
+    };
+
+    // Keyup is handled on BaseTool
+
+    // Pointer Events (generic)
+
+    override onPointerMove: TLPointerEventHandler = (info, e) => {
+        const { originPoint, currentPoint } = this.app;
+
+        switch (this.status) {
+            case Status.PointingBoundsHandle: {
+                if (!this.pointedBoundsHandle)
+                    throw Error('No pointed bounds handle');
+                if (Vec.dist(originPoint, currentPoint) > DEAD_ZONE) {
+                    if (this.pointedBoundsHandle === 'rotate') {
+                        // Stat a rotate session
+                        this.set_status(Status.Rotating);
+                        this.app.startSession(SessionType.Rotate);
+                    } else if (
+                        this.pointedBoundsHandle === 'center' ||
+                        this.pointedBoundsHandle === 'left' ||
+                        this.pointedBoundsHandle === 'right'
+                    ) {
+                        this.set_status(Status.Translating);
+                        this.app.startSession(
+                            SessionType.Translate,
+                            false,
+                            this.pointedBoundsHandle
+                        );
+                    } else {
+                        // Stat a transform session
+                        this.set_status(Status.Transforming);
+                        const idsToTransform = this.app.selectedIds.flatMap(
+                            id =>
+                                TLDR.get_document_branch(
+                                    this.app.state,
+                                    id,
+                                    this.app.currentPageId
+                                )
+                        );
+                        if (idsToTransform.length === 1) {
+                            // if only one shape is selected, transform single
+                            this.app.startSession(
+                                SessionType.TransformSingle,
+                                idsToTransform[0],
+                                this.pointedBoundsHandle
+                            );
+                        } else {
+                            // otherwise, transform
+                            this.app.startSession(
+                                SessionType.Transform,
+                                this.pointedBoundsHandle
+                            );
+                        }
+                    }
+
+                    // Also update the session with the current point
+                    this.app.updateSession();
+                }
+                break;
+            }
+            case Status.PointingCanvas: {
+                if (Vec.dist(originPoint, currentPoint) > DEAD_ZONE) {
+                    this.app.startSession(SessionType.Brush);
+                    this.set_status(Status.Brushing);
+                }
+                break;
+            }
+            case Status.PointingClone: {
+                if (Vec.dist(originPoint, currentPoint) > DEAD_ZONE) {
+                    this.set_status(Status.TranslatingClone);
+                    this.app.startSession(SessionType.Translate);
+                    this.app.updateSession();
+                }
+                break;
+            }
+            case Status.PointingBounds: {
+                if (Vec.dist(originPoint, currentPoint) > DEAD_ZONE) {
+                    this.set_status(Status.Translating);
+                    this.app.startSession(SessionType.Translate);
+                    this.app.updateSession();
+                }
+                break;
+            }
+            case Status.PointingHandle: {
+                if (Vec.dist(originPoint, currentPoint) > DEAD_ZONE) {
+                    this.set_status(Status.TranslatingHandle);
+                    const selectedShape = this.app.getShape(
+                        this.app.selectedIds[0]
+                    );
+                    if (selectedShape) {
+                        if (this.pointedHandleId === 'bend') {
+                            this.app.startSession(
+                                SessionType.Handle,
+                                selectedShape.id,
+                                this.pointedHandleId
+                            );
+                            this.app.updateSession();
+                        } else {
+                            this.app.startSession(
+                                SessionType.Arrow,
+                                selectedShape.id,
+                                this.pointedHandleId,
+                                false
+                            );
+                            this.app.updateSession();
+                        }
+                    }
+                }
+                break;
+            }
+            case Status.ClonePainting: {
+                this.clonePaint(currentPoint);
+                break;
+            }
+            default: {
+                if (this.app.session) {
+                    this.app.updateSession();
+                    break;
+                }
+            }
+        }
+    };
+
+    override onPointerDown: TLPointerEventHandler = (info, e) => {
+        if (info.target === 'canvas' && this.status === Status.Idle) {
+            const { currentPoint } = this.app;
+
+            if (info.spaceKey && e.buttons === 1) return;
+
+            if (this.status === Status.Idle && info.altKey && info.shiftKey) {
+                this.set_status(Status.ClonePainting);
+                this.clonePaint(currentPoint);
+                return;
+            }
+
+            // Unless the user is holding shift or meta, clear the current selection
+            if (!info.shiftKey) {
+                this.app.onShapeBlur();
+
+                if (info.altKey && this.app.selectedIds.length > 0) {
+                    this.app.duplicate(this.app.selectedIds, currentPoint);
+                    return;
+                }
+
+                this.select_none();
+            }
+
+            this.set_status(Status.PointingCanvas);
+        }
+    };
+
+    override onPointerUp: TLPointerEventHandler = info => {
+        if (
+            this.status === Status.TranslatingClone ||
+            this.status === Status.PointingClone
+        ) {
+            if (this.pointedId) {
+                this.app.completeSession();
+                this.app.setEditingId(this.pointedId);
+            }
+            this.set_status(Status.Idle);
+            this.pointedId = undefined;
+            return;
+        }
+
+        if (this.status === Status.PointingBounds) {
+            if (info.target === 'bounds') {
+                // If we just clicked the selecting bounds's background,
+                // clear the selection
+                this.select_none();
+            } else if (this.app.isSelected(info.target)) {
+                // If we're holding shift...
+                if (info.shiftKey) {
+                    // unless we just shift-selected the shape, remove it from
+                    // the selected shapes
+                    if (this.pointedId !== info.target) {
+                        this.deselect(info.target);
+                    }
+                } else {
+                    // If we have other selected shapes, select this one instead
+                    if (
+                        this.pointedId !== info.target &&
+                        this.app.selectedIds.length > 1
+                    ) {
+                        this.select(info.target);
+                    }
+                }
+            } else if (this.pointedId === info.target) {
+                if (this.app.getShape(info.target).isLocked) return;
+                // If the target is not selected and was just pointed
+                // on pointer down...
+                if (info.shiftKey) {
+                    this.push_select(info.target);
+                } else {
+                    this.select(info.target);
+                }
+            }
+        }
+
+        // Complete the current session, if any; and reset the status
+        this.app.completeSession();
+        this.set_status(Status.Idle);
+        this.pointedBoundsHandle = undefined;
+        this.pointedHandleId = undefined;
+        this.pointedId = undefined;
+    };
+
+    // Canvas
+
+    override onDoubleClickCanvas: TLCanvasEventHandler = () => {
+        // Needs debugging
+        // const { currentPoint } = this.app
+        // this.app.selectTool(TDShapeType.Text)
+        // this.setStatus(Status.Idle)
+        // this.app.createTextShapeAtPoint(currentPoint)
+    };
+
+    // Shape
+    override onPointShape: TLPointerEventHandler = (info, e) => {
+        if (info.spaceKey && e.buttons === 1) return;
+
+        if (this.app.getShape(info.target).isLocked) return;
+
+        const { editingId, hoveredId } = this.app.pageState;
+
+        if (editingId && info.target !== editingId) {
+            this.app.onShapeBlur();
+        }
+
+        // While holding command and shift, select or deselect
+        // the shape, ignoring any group that may contain it. Yikes!
+        if (
+            (this.status === Status.Idle ||
+                this.status === Status.PointingBounds) &&
+            info.metaKey &&
+            info.shiftKey &&
+            hoveredId
+        ) {
+            this.pointedId = hoveredId;
+
+            if (this.app.isSelected(hoveredId)) {
+                this.deselect(hoveredId);
+            } else {
+                this.push_select(hoveredId);
+                this.set_status(Status.PointingBounds);
+            }
+
+            return;
+        }
+
+        if (this.status === Status.PointingBounds) {
+            // The pointed id should be the shape's group, if it belongs
+            // to a group, or else the shape itself, if it is on the page.
+            const { parentId } = this.app.getShape(info.target);
+            this.pointedId =
+                parentId === this.app.currentPageId ? info.target : parentId;
+            return;
+        }
+
+        if (this.status === Status.Idle) {
+            this.set_status(Status.PointingBounds);
+            if (info.metaKey) {
+                if (!info.shiftKey) {
+                    this.select_none();
+                }
+
+                this.app.startSession(SessionType.Brush);
+
+                this.set_status(Status.Brushing);
+                return;
+            }
+
+            // If we've clicked on a shape that is inside of a group,
+            // then select the group rather than the shape.
+            let shapeIdToSelect: string;
+            const { parentId } = this.app.getShape(info.target);
+
+            // If the pointed shape is a child of the page, select the
+            // target shape and clear the selected group id.
+            if (parentId === this.app.currentPageId) {
+                shapeIdToSelect = info.target;
+                this.selectedGroupId = undefined;
+            } else {
+                // If the parent is some other group...
+                if (parentId === this.selectedGroupId) {
+                    // If that group is the selected group, then select
+                    // the target shape.
+                    shapeIdToSelect = info.target;
+                } else {
+                    // Otherwise, select the group and clear the selected
+                    // group id.
+                    shapeIdToSelect = parentId;
+
+                    this.selectedGroupId = undefined;
+                }
+            }
+
+            if (!this.app.isSelected(shapeIdToSelect)) {
+                // Set the pointed ID to the shape that was clicked.
+                this.pointedId = shapeIdToSelect;
+
+                // If the shape is not selected: then if the user is pressing shift,
+                // add the shape to the current selection; otherwise, set the shape as
+                // the only selected shape.
+                if (info.shiftKey) {
+                    this.push_select(shapeIdToSelect);
+                } else {
+                    this.select(shapeIdToSelect);
+                }
+            }
+        }
+    };
+
+    override onDoubleClickShape: TLPointerEventHandler = info => {
+        const shape = this.app.getShape(info.target);
+
+        if (shape.isLocked) {
+            this.app.select(info.target);
+            return;
+        }
+
+        // If we can edit the shape (and if we can select the shape) then
+        // start editing
+        if (
+            TLDR.get_shape_util(shape.type).canEdit &&
+            (shape.parentId === this.app.currentPageId ||
+                shape.parentId === this.selectedGroupId)
+        ) {
+            this.app.setEditingId(info.target);
+        }
+
+        // If the shape is the child of a group, then drill into the group?
+        if (shape.parentId !== this.app.currentPageId) {
+            this.selectedGroupId = shape.parentId;
+        }
+        this.app.select(info.target);
+    };
+
+    override onRightPointShape: TLPointerEventHandler = info => {
+        if (!this.app.isSelected(info.target)) {
+            this.app.select(info.target);
+        }
+    };
+
+    override onHoverShape: TLPointerEventHandler = info => {
+        this.app.setHoveredId(info.target);
+    };
+
+    override onUnhoverShape: TLPointerEventHandler = info => {
+        const { currentPageId: oldCurrentPageId } = this.app;
+
+        // Wait a frame; and if we haven't changed the hovered id,
+        // clear the current hovered id
+        requestAnimationFrame(() => {
+            if (
+                oldCurrentPageId === this.app.currentPageId &&
+                this.app.pageState.hoveredId === info.target
+            ) {
+                this.app.setHoveredId(undefined);
+            }
+        });
+    };
+
+    /* --------------------- Bounds --------------------- */
+
+    override onPointBounds: TLBoundsEventHandler = info => {
+        if (info.metaKey) {
+            if (!info.shiftKey) {
+                this.select_none();
+            }
+
+            this.app.startSession(SessionType.Brush);
+
+            this.set_status(Status.Brushing);
+            return;
+        }
+
+        this.set_status(Status.PointingBounds);
+    };
+
+    override onRightPointBounds: TLPointerEventHandler = (info, e) => {
+        e.stopPropagation();
+    };
+
+    override onReleaseBounds: TLBoundsEventHandler = () => {
+        if (
+            this.status === Status.Translating ||
+            this.status === Status.Brushing
+        ) {
+            this.app.completeSession();
+        }
+
+        this.set_status(Status.Idle);
+    };
+
+    /* ----------------- Bounds Handles ----------------- */
+
+    override onPointBoundsHandle: TLBoundsHandleEventHandler = info => {
+        this.pointedBoundsHandle = info.target;
+        this.set_status(Status.PointingBoundsHandle);
+    };
+
+    override onDoubleClickBoundsHandle: TLBoundsHandleEventHandler = info => {
+        switch (info.target) {
+            case 'center':
+            case 'left':
+            case 'right': {
+                this.app.select(
+                    ...TLDR.get_linked_shape_ids(
+                        this.app.state,
+                        this.app.currentPageId,
+                        info.target,
+                        info.shiftKey
+                    )
+                );
+                break;
+            }
+            default: {
+                if (this.app.selectedIds.length === 1) {
+                    this.app.resetBounds(this.app.selectedIds);
+                    const shape = this.app.getShape(this.app.selectedIds[0]);
+                    if ('label' in shape) {
+                        this.app.setEditingId(shape.id);
+                    }
+                }
+            }
+        }
+    };
+
+    override onReleaseBoundsHandle: TLBoundsHandleEventHandler = () => {
+        this.set_status(Status.Idle);
+    };
+
+    /* --------------------- Handles -------------------- */
+
+    override onPointHandle: TLPointerEventHandler = info => {
+        this.pointedHandleId = info.target as 'start' | 'end';
+        this.set_status(Status.PointingHandle);
+    };
+
+    override onDoubleClickHandle: TLPointerEventHandler = info => {
+        if (info.target === 'bend') {
+            const { selectedIds } = this.app;
+            if (selectedIds.length !== 1) return;
+            const shape = this.app.getShape(selectedIds[0]);
+            if (
+                TLDR.get_shape_util(shape.type).canEdit &&
+                (shape.parentId === this.app.currentPageId ||
+                    shape.parentId === this.selectedGroupId)
+            ) {
+                this.app.setEditingId(shape.id);
+            }
+            return;
+        }
+
+        this.app.toggleDecoration(info.target);
+    };
+
+    override onReleaseHandle: TLPointerEventHandler = () => {
+        this.set_status(Status.Idle);
+    };
+
+    /* ---------------------- Misc ---------------------- */
+
+    override onShapeClone: TLShapeCloneHandler = info => {
+        const selectedShapeId = this.app.selectedIds[0];
+
+        const clonedShape = this.getShapeClone(selectedShapeId, info.target);
+
+        if (
+            info.target === 'left' ||
+            info.target === 'right' ||
+            info.target === 'top' ||
+            info.target === 'bottom'
+        ) {
+            if (clonedShape) {
+                this.app.createShapes(clonedShape);
+
+                // Now start pointing the bounds, so that a user can start
+                // dragging to reposition if they wish.
+                this.pointedId = clonedShape.id;
+                this.set_status(Status.PointingClone);
+            }
+        } else {
+            this.set_status(Status.GridCloning);
+            this.app.startSession(SessionType.Grid, selectedShapeId);
+        }
+    };
+}
diff --git a/libs/components/board-tools/src/triangle-tool/index.ts b/libs/components/board-tools/src/triangle-tool/index.ts
new file mode 100644
index 000000000..db076e9d2
--- /dev/null
+++ b/libs/components/board-tools/src/triangle-tool/index.ts
@@ -0,0 +1 @@
+export * from './triangle-tool';
diff --git a/libs/components/board-tools/src/triangle-tool/triangle-tool.ts b/libs/components/board-tools/src/triangle-tool/triangle-tool.ts
new file mode 100644
index 000000000..519124fd0
--- /dev/null
+++ b/libs/components/board-tools/src/triangle-tool/triangle-tool.ts
@@ -0,0 +1,49 @@
+import { Utils, TLPointerEventHandler, TLBoundsCorner } from '@tldraw/core';
+import Vec from '@tldraw/vec';
+import { Triangle } from '@toeverything/components/board-shapes';
+import { SessionType, TDShapeType } from '@toeverything/components/board-types';
+import { BaseTool, BaseToolStatus } from '@toeverything/components/board-state';
+
+export class TriangleTool extends BaseTool {
+    override type = TDShapeType.Triangle as const;
+
+    /* ----------------- Event Handlers ----------------- */
+
+    override onPointerDown: TLPointerEventHandler = () => {
+        if (this.status !== BaseToolStatus.Idle) return;
+
+        const {
+            currentPoint,
+            currentGrid,
+            settings: { showGrid },
+            appState: { currentPageId, currentStyle },
+            document: { id: workspace },
+        } = this.app;
+
+        const childIndex = this.getNextChildIndex();
+
+        const id = Utils.uniqueId();
+
+        const newShape = Triangle.create({
+            id,
+            parentId: currentPageId,
+            childIndex,
+            point: showGrid
+                ? Vec.snap(currentPoint, currentGrid)
+                : currentPoint,
+            style: { ...currentStyle },
+            workspace,
+        });
+
+        this.app.patchCreate([newShape]);
+
+        this.app.startSession(
+            SessionType.TransformSingle,
+            newShape.id,
+            TLBoundsCorner.BottomRight,
+            true
+        );
+
+        this.set_status(BaseToolStatus.Creating);
+    };
+}
diff --git a/libs/components/board-tools/src/white-arrow-tool/index.ts b/libs/components/board-tools/src/white-arrow-tool/index.ts
new file mode 100644
index 000000000..7f6186e79
--- /dev/null
+++ b/libs/components/board-tools/src/white-arrow-tool/index.ts
@@ -0,0 +1 @@
+export * from './white-arrow-tool';
diff --git a/libs/components/board-tools/src/white-arrow-tool/white-arrow-tool.ts b/libs/components/board-tools/src/white-arrow-tool/white-arrow-tool.ts
new file mode 100644
index 000000000..b65836760
--- /dev/null
+++ b/libs/components/board-tools/src/white-arrow-tool/white-arrow-tool.ts
@@ -0,0 +1,49 @@
+import { Utils, TLPointerEventHandler, TLBoundsCorner } from '@tldraw/core';
+import Vec from '@tldraw/vec';
+import { WhiteArrow } from '@toeverything/components/board-shapes';
+import { SessionType, TDShapeType } from '@toeverything/components/board-types';
+import { BaseTool, BaseToolStatus } from '@toeverything/components/board-state';
+
+export class WhiteArrowTool extends BaseTool {
+    override type = TDShapeType.Triangle as const;
+
+    /* ----------------- Event Handlers ----------------- */
+
+    override onPointerDown: TLPointerEventHandler = () => {
+        if (this.status !== BaseToolStatus.Idle) return;
+
+        const {
+            currentPoint,
+            currentGrid,
+            settings: { showGrid },
+            appState: { currentPageId, currentStyle },
+            document: { id: workspace },
+        } = this.app;
+
+        const childIndex = this.getNextChildIndex();
+
+        const id = Utils.uniqueId();
+
+        const newShape = WhiteArrow.create({
+            id,
+            parentId: currentPageId,
+            childIndex,
+            point: showGrid
+                ? Vec.snap(currentPoint, currentGrid)
+                : currentPoint,
+            style: { ...currentStyle },
+            workspace,
+        });
+
+        this.app.patchCreate([newShape]);
+
+        this.app.startSession(
+            SessionType.TransformSingle,
+            newShape.id,
+            TLBoundsCorner.BottomRight,
+            true
+        );
+
+        this.set_status(BaseToolStatus.Creating);
+    };
+}
diff --git a/libs/components/board-tools/tsconfig.json b/libs/components/board-tools/tsconfig.json
new file mode 100644
index 000000000..dce3dae9a
--- /dev/null
+++ b/libs/components/board-tools/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/components/board-tools/tsconfig.lib.json b/libs/components/board-tools/tsconfig.lib.json
new file mode 100644
index 000000000..6a4378740
--- /dev/null
+++ b/libs/components/board-tools/tsconfig.lib.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"]
+}
diff --git a/libs/components/board-tools/tsconfig.spec.json b/libs/components/board-tools/tsconfig.spec.json
new file mode 100644
index 000000000..24b3ac659
--- /dev/null
+++ b/libs/components/board-tools/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+    "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"
+    ]
+}
diff --git a/libs/components/board-types/.babelrc b/libs/components/board-types/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/components/board-types/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/components/board-types/.eslintrc.json b/libs/components/board-types/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/components/board-types/.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": {}
+        }
+    ]
+}
diff --git a/libs/components/board-types/README.md b/libs/components/board-types/README.md
new file mode 100644
index 000000000..5999c4033
--- /dev/null
+++ b/libs/components/board-types/README.md
@@ -0,0 +1,7 @@
+# components-board-types
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test components-board-types` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/components/board-types/jest.config.ts b/libs/components/board-types/jest.config.ts
new file mode 100644
index 000000000..5680febde
--- /dev/null
+++ b/libs/components/board-types/jest.config.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+    displayName: 'components-board-types',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/components/board-types',
+};
diff --git a/libs/components/board-types/package.json b/libs/components/board-types/package.json
new file mode 100644
index 000000000..bc294a798
--- /dev/null
+++ b/libs/components/board-types/package.json
@@ -0,0 +1,10 @@
+{
+    "name": "@toeverything/components/board-types",
+    "version": "0.0.1",
+    "license": "MIT",
+    "dependencies": {
+        "@tldraw/core": "^1.12.0",
+        "@tldraw/intersect": "^1.7.1",
+        "@tldraw/vec": "^1.7.0"
+    }
+}
diff --git a/libs/components/board-types/project.json b/libs/components/board-types/project.json
new file mode 100644
index 000000000..4cbde1030
--- /dev/null
+++ b/libs/components/board-types/project.json
@@ -0,0 +1,45 @@
+{
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/components/board-types/src",
+    "projectType": "library",
+    "tags": ["components"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/components/board-types",
+                "tsConfig": "libs/components/board-types/tsconfig.lib.json",
+                "project": "libs/components/board-types/package.json",
+                "entryFile": "libs/components/board-types/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/components/board-types/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/components/board-types/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/components/board-types"],
+            "options": {
+                "jestConfig": "libs/components/board-types/jest.config.ts",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/components/board-types/src/constants.ts b/libs/components/board-types/src/constants.ts
new file mode 100644
index 000000000..8e63fa61f
--- /dev/null
+++ b/libs/components/board-types/src/constants.ts
@@ -0,0 +1,97 @@
+import type { Easing } from './types';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const LETTER_SPACING = '-0.03em';
+export const LINE_HEIGHT = 1;
+export const GRID_SIZE = 8;
+export const SVG_EXPORT_PADDING = 16;
+export const BINDING_DISTANCE = 16;
+export const CLONING_DISTANCE = 32;
+export const FIT_TO_SCREEN_PADDING = 128;
+export const SNAP_DISTANCE = 5;
+export const EMPTY_ARRAY = [] as any[];
+export const SLOW_SPEED = 10;
+export const VERY_SLOW_SPEED = 2.5;
+export const GHOSTED_OPACITY = 0.3;
+export const DEAD_ZONE = 3;
+export const LABEL_POINT = [0.5, 0.5];
+
+export const PI2 = Math.PI * 2;
+
+export const EASINGS: Record<Easing, (t: number) => number> = {
+    linear: t => t,
+    easeInQuad: t => t * t,
+    easeOutQuad: t => t * (2 - t),
+    easeInOutQuad: t => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
+    easeInCubic: t => t * t * t,
+    easeOutCubic: t => --t * t * t + 1,
+    easeInOutCubic: t =>
+        t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+    easeInQuart: t => t * t * t * t,
+    easeOutQuart: t => 1 - --t * t * t * t,
+    easeInOutQuart: t =>
+        t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t,
+    easeInQuint: t => t * t * t * t * t,
+    easeOutQuint: t => 1 + --t * t * t * t * t,
+    easeInOutQuint: t =>
+        t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t,
+    easeInSine: t => 1 - Math.cos((t * Math.PI) / 2),
+    easeOutSine: t => Math.sin((t * Math.PI) / 2),
+    easeInOutSine: t => -(Math.cos(Math.PI * t) - 1) / 2,
+    easeInExpo: t => (t <= 0 ? 0 : Math.pow(2, 10 * t - 10)),
+    easeOutExpo: t => (t >= 1 ? 1 : 1 - Math.pow(2, -10 * t)),
+    easeInOutExpo: t =>
+        t <= 0
+            ? 0
+            : t >= 1
+            ? 1
+            : t < 0.5
+            ? Math.pow(2, 20 * t - 10) / 2
+            : (2 - Math.pow(2, -20 * t + 10)) / 2,
+};
+
+export const EASING_STRINGS: Record<Easing, string> = {
+    linear: `(t) => t`,
+    easeInQuad: `(t) => t * t`,
+    easeOutQuad: `(t) => t * (2 - t)`,
+    easeInOutQuad: `(t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t)`,
+    easeInCubic: `(t) => t * t * t`,
+    easeOutCubic: `(t) => --t * t * t + 1`,
+    easeInOutCubic: `(t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1`,
+    easeInQuart: `(t) => t * t * t * t`,
+    easeOutQuart: `(t) => 1 - --t * t * t * t`,
+    easeInOutQuart: `(t) => t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t`,
+    easeInQuint: `(t) => t * t * t * t * t`,
+    easeOutQuint: `(t) => 1 + --t * t * t * t * t`,
+    easeInOutQuint: `(t) => t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t`,
+    easeInSine: `(t) => 1 - Math.cos((t * Math.PI) / 2)`,
+    easeOutSine: `(t) => Math.sin((t * Math.PI) / 2)`,
+    easeInOutSine: `(t) => -(Math.cos(Math.PI * t) - 1) / 2`,
+    easeInExpo: `(t) => (t <= 0 ? 0 : Math.pow(2, 10 * t - 10))`,
+    easeOutExpo: `(t) => (t >= 1 ? 1 : 1 - Math.pow(2, -10 * t))`,
+    easeInOutExpo: `(t) => t <= 0 ? 0 : t >= 1 ? 1 : t < 0.5 ? Math.pow(2, 20 * t - 10) / 2 : (2 - Math.pow(2, -20 * t + 10)) / 2`,
+};
+
+export const USER_COLORS = [
+    '#EC5E41',
+    '#F2555A',
+    '#F04F88',
+    '#E34BA9',
+    '#BD54C6',
+    '#9D5BD2',
+    '#7B66DC',
+    '#02B1CC',
+    '#11B3A3',
+    '#39B178',
+    '#55B467',
+    '#FF802B',
+];
+
+export const isSafari =
+    typeof Window === 'undefined'
+        ? false
+        : /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+export const IMAGE_EXTENSIONS = ['.png', '.svg', '.jpg', '.jpeg', '.gif'];
+
+export const VIDEO_EXTENSIONS = isSafari ? [] : ['.mp4', '.webm'];
diff --git a/libs/components/board-types/src/index.ts b/libs/components/board-types/src/index.ts
new file mode 100644
index 000000000..ffe2c7460
--- /dev/null
+++ b/libs/components/board-types/src/index.ts
@@ -0,0 +1,3 @@
+export * from './types';
+export * from './constants';
+export * from './session';
diff --git a/libs/components/board-types/src/session.ts b/libs/components/board-types/src/session.ts
new file mode 100644
index 000000000..1ae279f98
--- /dev/null
+++ b/libs/components/board-types/src/session.ts
@@ -0,0 +1,35 @@
+import { TLPerformanceMode } from '@tldraw/core';
+import { TDSnapshot, Patch } from './types';
+
+export enum SessionType {
+    Transform = 'transform',
+    Translate = 'translate',
+    TransformSingle = 'transformSingle',
+    Brush = 'brush',
+    Arrow = 'arrow',
+    Draw = 'draw',
+    Laser = 'laser',
+    Erase = 'erase',
+    Rotate = 'rotate',
+    Handle = 'handle',
+    Grid = 'grid',
+}
+
+export interface Command<T extends { [key: string]: any }> {
+    id?: string;
+    before: Patch<T>;
+    after: Patch<T>;
+}
+
+export type TldrawPatch = Patch<TDSnapshot>;
+
+export type TldrawCommand = Command<TDSnapshot>;
+
+export abstract class BaseSessionType {
+    abstract type: SessionType;
+    abstract performanceMode: TLPerformanceMode | undefined;
+    abstract start: () => TldrawPatch | undefined;
+    abstract update: () => TldrawPatch | undefined;
+    abstract complete: () => TldrawPatch | TldrawCommand | undefined;
+    abstract cancel: () => TldrawPatch | undefined;
+}
diff --git a/libs/components/board-types/src/types.ts b/libs/components/board-types/src/types.ts
new file mode 100644
index 000000000..9f678921e
--- /dev/null
+++ b/libs/components/board-types/src/types.ts
@@ -0,0 +1,636 @@
+/* eslint-disable max-lines */
+import type {
+    TLPage,
+    TLUser,
+    TLPageState,
+    TLBinding,
+    TLBoundsCorner,
+    TLBoundsEdge,
+    TLShape,
+    TLHandle,
+    TLSnapLine,
+    TLPinchEventHandler,
+    TLKeyboardEventHandler,
+    TLPointerEventHandler,
+    TLWheelEventHandler,
+    TLCanvasEventHandler,
+    TLBoundsEventHandler,
+    TLBoundsHandleEventHandler,
+    TLShapeBlurHandler,
+    TLShapeCloneHandler,
+    TLAsset,
+} from '@tldraw/core';
+
+/* -------------------------------------------------- */
+/*                         App                        */
+/* -------------------------------------------------- */
+
+// A base class for all classes that handle events from the Renderer,
+// including TDApp and all Tools.
+export class TDEventHandler {
+    onPinchStart?: TLPinchEventHandler;
+    onPinchEnd?: TLPinchEventHandler;
+    onPinch?: TLPinchEventHandler;
+    onKeyDown?: TLKeyboardEventHandler;
+    onKeyUp?: TLKeyboardEventHandler;
+    onPointerMove?: TLPointerEventHandler;
+    onPointerUp?: TLPointerEventHandler;
+    onPan?: TLWheelEventHandler;
+    onZoom?: TLWheelEventHandler;
+    onPointerDown?: TLPointerEventHandler;
+    onPointCanvas?: TLCanvasEventHandler;
+    onDoubleClickCanvas?: TLCanvasEventHandler;
+    onRightPointCanvas?: TLCanvasEventHandler;
+    onDragCanvas?: TLCanvasEventHandler;
+    onReleaseCanvas?: TLCanvasEventHandler;
+    onPointShape?: TLPointerEventHandler;
+    onDoubleClickShape?: TLPointerEventHandler;
+    onRightPointShape?: TLPointerEventHandler;
+    onDragShape?: TLPointerEventHandler;
+    onHoverShape?: TLPointerEventHandler;
+    onUnhoverShape?: TLPointerEventHandler;
+    onReleaseShape?: TLPointerEventHandler;
+    onPointBounds?: TLBoundsEventHandler;
+    onDoubleClickBounds?: TLBoundsEventHandler;
+    onRightPointBounds?: TLBoundsEventHandler;
+    onDragBounds?: TLBoundsEventHandler;
+    onHoverBounds?: TLBoundsEventHandler;
+    onUnhoverBounds?: TLBoundsEventHandler;
+    onReleaseBounds?: TLBoundsEventHandler;
+    onPointBoundsHandle?: TLBoundsHandleEventHandler;
+    onDoubleClickBoundsHandle?: TLBoundsHandleEventHandler;
+    onRightPointBoundsHandle?: TLBoundsHandleEventHandler;
+    onDragBoundsHandle?: TLBoundsHandleEventHandler;
+    onHoverBoundsHandle?: TLBoundsHandleEventHandler;
+    onUnhoverBoundsHandle?: TLBoundsHandleEventHandler;
+    onReleaseBoundsHandle?: TLBoundsHandleEventHandler;
+    onPointHandle?: TLPointerEventHandler;
+    onDoubleClickHandle?: TLPointerEventHandler;
+    onRightPointHandle?: TLPointerEventHandler;
+    onDragHandle?: TLPointerEventHandler;
+    onHoverHandle?: TLPointerEventHandler;
+    onUnhoverHandle?: TLPointerEventHandler;
+    onReleaseHandle?: TLPointerEventHandler;
+    onShapeBlur?: TLShapeBlurHandler;
+    onShapeClone?: TLShapeCloneHandler;
+}
+
+// The shape of the TldrawApp's React (zustand) store
+export interface TDSnapshot {
+    settings: {
+        isCadSelectMode: boolean;
+        isDarkMode: boolean;
+        isDebugMode: boolean;
+        isPenMode: boolean;
+        isReadonlyMode: boolean;
+        isZoomSnap: boolean;
+        keepStyleMenuOpen: boolean;
+        nudgeDistanceSmall: number;
+        nudgeDistanceLarge: number;
+        isFocusMode: boolean;
+        isSnapping: boolean;
+        showRotateHandles: boolean;
+        showBindingHandles: boolean;
+        showCloneHandles: boolean;
+        showGrid: boolean;
+    };
+    appState: {
+        currentStyle: ShapeStyles;
+        currentPageId: string;
+        hoveredId?: string;
+        activeTool: TDToolType;
+        isToolLocked: boolean;
+        isEmptyCanvas: boolean;
+        isMenuOpen: boolean;
+        status: string;
+        snapLines: TLSnapLine[];
+        laserLine: number[][];
+        isLoading: boolean;
+        disableAssets: boolean;
+        selectByContain?: boolean;
+    };
+    document: TDDocument;
+    room?: {
+        id: string;
+        userId: string;
+        users: Record<string, TDUser>;
+    };
+}
+
+// The shape of the files stored in JSON
+export interface TDFile {
+    name: string;
+    fileHandle: FileSystemHandle | null;
+    document: TDDocument;
+    assets: Record<string, unknown>;
+}
+
+// The shape of the Tldraw document
+export interface TDDocument {
+    id: string;
+    name: string;
+    version: number;
+    pages: Record<string, TDPage>;
+    pageStates: Record<string, TLPageState>;
+    assets: TDAssets;
+}
+
+// The shape of a single page in the Tldraw document
+export type TDPage = TLPage<TDShape, TDBinding>;
+
+// A partial of a TDPage, used for commands / patches
+export type PagePartial = {
+    shapes: Patch<TDPage['shapes']>;
+    bindings: Patch<TDPage['bindings']>;
+};
+
+// The meta information passed to TDShapeUtil components
+export interface TDMeta {
+    isDarkMode: boolean;
+    app: {
+        useStore: () => TDSnapshot;
+    };
+}
+
+// The type of info given to shapes when transforming
+export interface TransformInfo<T extends TLShape> {
+    type: TLBoundsEdge | TLBoundsCorner;
+    initialShape: T;
+    scaleX: number;
+    scaleY: number;
+    transformOrigin: number[];
+}
+
+// The status of a TDUser
+export enum TDUserStatus {
+    Idle = 'idle',
+    Connecting = 'connecting',
+    Connected = 'connected',
+    Disconnected = 'disconnected',
+}
+
+// A TDUser, for multiplayer rooms
+export interface TDUser extends TLUser<TDShape> {
+    activeShapes: TDShape[];
+    status: TDUserStatus;
+}
+
+export type Theme = 'dark' | 'light';
+
+export enum TDStatus {
+    Idle = 'idle',
+    PointingHandle = 'pointingHandle',
+    PointingBounds = 'pointingBounds',
+    PointingBoundsHandle = 'pointingBoundsHandle',
+    TranslatingLabel = 'translatingLabel',
+    TranslatingHandle = 'translatingHandle',
+    Translating = 'translating',
+    Transforming = 'transforming',
+    Rotating = 'rotating',
+    Pinching = 'pinching',
+    Brushing = 'brushing',
+    Creating = 'creating',
+    EditingText = 'editing-text',
+}
+
+export type TDToolType =
+    | 'select'
+    | 'erase'
+    | TDShapeType.Draw
+    | TDShapeType.Pencil
+    | TDShapeType.Highlight
+    | TDShapeType.Laser
+    | TDShapeType.Ellipse
+    | TDShapeType.Rectangle
+    | TDShapeType.Triangle
+    | TDShapeType.Hexagon
+    | TDShapeType.Pentagram
+    | TDShapeType.Line
+    | TDShapeType.Arrow
+    | TDShapeType.WhiteArrow
+    | TDShapeType.Editor
+    | TDShapeType.Frame
+    | TDShapeType.HandDraw;
+
+export type Easing =
+    | 'linear'
+    | 'easeInQuad'
+    | 'easeOutQuad'
+    | 'easeInOutQuad'
+    | 'easeInCubic'
+    | 'easeOutCubic'
+    | 'easeInOutCubic'
+    | 'easeInQuart'
+    | 'easeOutQuart'
+    | 'easeInOutQuart'
+    | 'easeInQuint'
+    | 'easeOutQuint'
+    | 'easeInOutQuint'
+    | 'easeInSine'
+    | 'easeOutSine'
+    | 'easeInOutSine'
+    | 'easeInExpo'
+    | 'easeOutExpo'
+    | 'easeInOutExpo';
+
+export enum MoveType {
+    Backward = 'backward',
+    Forward = 'forward',
+    ToFront = 'toFront',
+    ToBack = 'toBack',
+}
+
+export enum AlignType {
+    Top = 'top',
+    CenterVertical = 'centerVertical',
+    Bottom = 'bottom',
+    Left = 'left',
+    CenterHorizontal = 'centerHorizontal',
+    Right = 'right',
+}
+
+export enum StretchType {
+    Horizontal = 'horizontal',
+    Vertical = 'vertical',
+}
+
+export enum DistributeType {
+    Horizontal = 'horizontal',
+    Vertical = 'vertical',
+}
+
+export enum FlipType {
+    Horizontal = 'horizontal',
+    Vertical = 'vertical',
+}
+
+/* -------------------------------------------------- */
+/*                       Shapes                       */
+/* -------------------------------------------------- */
+
+export enum TDShapeType {
+    Ellipse = 'ellipse',
+    Rectangle = 'rectangle',
+    Triangle = 'triangle',
+    Pentagram = 'pentagram',
+    Hexagon = 'hexagon',
+    Draw = 'draw',
+    Pencil = 'pencil',
+    Laser = 'laser',
+    Highlight = 'highlight',
+    Arrow = 'arrow',
+    Line = 'line',
+    Group = 'group',
+    Image = 'image',
+    Video = 'video',
+    Editor = 'editor',
+    WhiteArrow = 'white-arrow',
+    HandDraw = 'hand-draw',
+    Frame = 'frame',
+}
+
+export enum Decoration {
+    Arrow = 'arrow',
+}
+
+export interface TDBaseShape extends TLShape {
+    style: ShapeStyles;
+    type: TDShapeType;
+    label?: string;
+    affineId?: string;
+    handles?: Record<string, TDHandle>;
+    workspace: string;
+}
+
+export interface DrawShape extends TDBaseShape {
+    type: TDShapeType.Draw;
+    points: number[][];
+    isComplete: boolean;
+}
+
+// The extended handle (used for arrows)
+export interface TDHandle extends TLHandle {
+    canBind?: boolean;
+    bindingId?: string;
+}
+
+export interface RectangleShape extends TDBaseShape {
+    type: TDShapeType.Rectangle;
+    size: number[];
+    label?: string;
+    labelPoint?: number[];
+}
+
+export interface FrameShape extends TDBaseShape {
+    type: TDShapeType.Frame;
+    size: number[];
+    label?: string;
+    labelPoint?: number[];
+}
+
+export interface EllipseShape extends TDBaseShape {
+    type: TDShapeType.Ellipse;
+    radius: number[];
+    label?: string;
+    labelPoint?: number[];
+}
+
+export interface TriangleShape extends TDBaseShape {
+    type: TDShapeType.Triangle;
+    size: number[];
+    label?: string;
+    labelPoint?: number[];
+}
+
+export interface HexagonShape extends TDBaseShape {
+    type: TDShapeType.Hexagon;
+    size: number[];
+    label?: string;
+    labelPoint?: number[];
+}
+export interface PentagramShape extends TDBaseShape {
+    type: TDShapeType.Pentagram;
+    size: number[];
+    label?: string;
+    labelPoint?: number[];
+}
+export interface WhiteArrowShape extends TDBaseShape {
+    type: TDShapeType.WhiteArrow;
+    size: number[];
+    label?: string;
+    labelPoint?: number[];
+}
+// The shape created with the arrow tool
+export interface ArrowShape extends TDBaseShape {
+    type: TDShapeType.Arrow;
+    bend: number;
+    handles: {
+        start: TDHandle;
+        bend: TDHandle;
+        end: TDHandle;
+    };
+    decorations?: {
+        start?: Decoration;
+        end?: Decoration;
+        middle?: Decoration;
+    };
+    label?: string;
+    labelPoint?: number[];
+}
+
+export interface ArrowBinding extends TLBinding {
+    handleId: keyof ArrowShape['handles'];
+    distance: number;
+    point: number[];
+}
+
+export type TDBinding = ArrowBinding;
+
+export interface ImageShape extends TDBaseShape {
+    type: TDShapeType.Image;
+    size: number[];
+    assetId: string;
+}
+
+export interface VideoShape extends TDBaseShape {
+    type: TDShapeType.Video;
+    size: number[];
+    assetId: string;
+    isPlaying: boolean;
+    currentTime: number;
+}
+
+// The shape created when multiple shapes are grouped
+export interface GroupShape extends TDBaseShape {
+    type: TDShapeType.Group;
+    size: number[];
+    children: string[];
+}
+
+export interface EditorShape extends TDBaseShape {
+    type: TDShapeType.Editor;
+    rootBlockId: string;
+    /**
+     * size: [width, height]
+     * height dynamic calculation
+     */
+    size: number[];
+}
+
+// A union of all shapes
+export type TDShape =
+    | RectangleShape
+    | EllipseShape
+    | TriangleShape
+    | HexagonShape
+    | PentagramShape
+    | WhiteArrowShape
+    | DrawShape
+    | ArrowShape
+    | GroupShape
+    | ImageShape
+    | VideoShape
+    | FrameShape
+    | EditorShape;
+
+/* ------------------ Shape Styles ------------------ */
+
+export type ColorStyle = string;
+
+export enum FontSizeStyle {
+    h1 = 28,
+    h2 = 24,
+    h3 = 20,
+    body = 16,
+}
+
+export enum StrokeWidth {
+    s1 = 2,
+    s2 = 4,
+    s3 = 6,
+    s4 = 8,
+    s5 = 10,
+    s6 = 12,
+}
+
+export enum DashStyle {
+    Draw = 'draw',
+    Solid = 'solid',
+    Dashed = 'dashed',
+    Dotted = 'dotted',
+    None = 'none',
+}
+
+export enum FontSize {
+    Small = 'small',
+    Medium = 'medium',
+    Large = 'large',
+    ExtraLarge = 'extraLarge',
+}
+
+export enum AlignStyle {
+    Start = 'start',
+    Middle = 'middle',
+    End = 'end',
+    Justify = 'justify',
+}
+
+export enum FontStyle {
+    Script = 'script',
+    Sans = 'sans',
+    Serif = 'erif',
+    Mono = 'mono',
+}
+
+export type ShapeStyles = {
+    /**
+     * stroke color, border color, line color
+     */
+    stroke: string;
+    /**
+     * stroke width
+     */
+    strokeWidth: StrokeWidth;
+    /**
+     * fill color
+     */
+    fill: string;
+    // color: ColorStyle;
+    fontSize: FontSizeStyle;
+    dash: DashStyle;
+    font?: FontStyle;
+    textAlign?: AlignStyle;
+    isFilled?: boolean;
+    scale?: number;
+};
+
+export enum TDAssetType {
+    Image = 'image',
+    Video = 'video',
+}
+
+export interface TDImageAsset extends TLAsset {
+    type: TDAssetType.Image;
+    fileName: string;
+    src: string;
+    size: number[];
+}
+
+export interface TDVideoAsset extends TLAsset {
+    type: TDAssetType.Video;
+    fileName: string;
+    src: string;
+    size: number[];
+}
+
+export type TDAsset = TDImageAsset | TDVideoAsset;
+
+export type TDAssets = Record<string, TDAsset>;
+
+/* -------------------------------------------------- */
+/*                    Export                          */
+/* -------------------------------------------------- */
+
+export enum TDExportType {
+    PNG = 'png',
+    JPG = 'jpeg',
+    WEBP = 'webp',
+    SVG = 'svg',
+    JSON = 'json',
+}
+
+export interface TDExport {
+    name: string;
+    type: string;
+    blob: Blob;
+}
+
+/* -------------------------------------------------- */
+/*                    Type Helpers                    */
+/* -------------------------------------------------- */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ParametersExceptFirst<F> = F extends (
+    arg0: any,
+    ...rest: infer R
+) => any
+    ? R
+    : never;
+
+export type ExceptFirst<T extends unknown[]> = T extends [any, ...infer U]
+    ? U
+    : never;
+
+export type ExceptFirstTwo<T extends unknown[]> = T extends [
+    any,
+    any,
+    ...infer U
+]
+    ? U
+    : never;
+
+export type PropsOfType<U> = {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [K in keyof TDShape]: TDShape[K] extends any
+        ? TDShape[K] extends U
+            ? K
+            : never
+        : never;
+}[keyof TDShape];
+
+export type Difference<A, B, C = A> = A extends B ? never : C;
+
+export type Intersection<A, B, C = A> = A extends B ? C : never;
+
+export type FilteredKeys<T, U> = {
+    [P in keyof T]: T[P] extends U ? P : never;
+}[keyof T];
+
+export type RequiredKeys<T> = {
+    [K in keyof T]-?: Difference<Record<string, unknown>, Pick<T, K>, K>;
+}[keyof T];
+
+export type MembersWithRequiredKey<T, U> = {
+    [P in keyof T]: Intersection<U, RequiredKeys<T[P]>, T[P]>;
+}[keyof T];
+
+export type MappedByType<U extends string, T extends { type: U }> = {
+    [P in T['type']]: T extends any ? (P extends T['type'] ? T : never) : never;
+};
+
+export type ShapesWithProp<U> = MembersWithRequiredKey<
+    MappedByType<TDShapeType, TDShape>,
+    U
+>;
+
+export type Patch<T> = Partial<{ [P in keyof T]: Patch<T[P]> }>;
+
+export interface FileWithHandle extends File {
+    handle?: FileSystemHandle;
+}
+
+export interface FileWithDirectoryHandle extends File {
+    directoryHandle?: FileSystemHandle;
+}
+
+// The following typings implement the relevant parts of the File System Access
+// API. This can be removed once the specification reaches the Candidate phase
+// and is implemented as part of microsoft/TSJS-lib-generator.
+
+export interface FileSystemHandlePermissionDescriptor {
+    mode?: 'read' | 'readwrite';
+}
+
+export interface FileSystemHandle {
+    readonly kind: 'file' | 'directory';
+    readonly name: string;
+
+    isSameEntry: (other: FileSystemHandle) => Promise<boolean>;
+
+    queryPermission: (
+        descriptor?: FileSystemHandlePermissionDescriptor
+    ) => Promise<PermissionState>;
+    requestPermission: (
+        descriptor?: FileSystemHandlePermissionDescriptor
+    ) => Promise<PermissionState>;
+}
diff --git a/libs/components/board-types/tsconfig.json b/libs/components/board-types/tsconfig.json
new file mode 100644
index 000000000..dce3dae9a
--- /dev/null
+++ b/libs/components/board-types/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/components/board-types/tsconfig.lib.json b/libs/components/board-types/tsconfig.lib.json
new file mode 100644
index 000000000..6a4378740
--- /dev/null
+++ b/libs/components/board-types/tsconfig.lib.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"]
+}
diff --git a/libs/components/board-types/tsconfig.spec.json b/libs/components/board-types/tsconfig.spec.json
new file mode 100644
index 000000000..24b3ac659
--- /dev/null
+++ b/libs/components/board-types/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+    "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"
+    ]
+}
diff --git a/libs/components/common/.babelrc b/libs/components/common/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/components/common/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/components/common/.eslintrc.json b/libs/components/common/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/components/common/.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": {}
+        }
+    ]
+}
diff --git a/libs/components/common/jest.config.js b/libs/components/common/jest.config.js
new file mode 100644
index 000000000..1c221d914
--- /dev/null
+++ b/libs/components/common/jest.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+    displayName: 'components-common',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/components/common',
+};
diff --git a/libs/components/common/package.json b/libs/components/common/package.json
new file mode 100644
index 000000000..fa9896d9e
--- /dev/null
+++ b/libs/components/common/package.json
@@ -0,0 +1,22 @@
+{
+    "name": "@toeverything/components/common",
+    "version": "0.0.1",
+    "license": "MIT",
+    "dependencies": {
+        "@emotion/react": "^11.9.3",
+        "@emotion/styled": "^11.9.3",
+        "@mui/icons-material": "^5.8.4",
+        "@mui/material": "^5.8.6",
+        "@mui/x-data-grid": "^5.12.3",
+        "is-hotkey": "^0.2.0",
+        "is-url": "^1.2.4",
+        "slate": "^0.81.1",
+        "slate-react": "^0.81.0",
+        "tinycolor2": "^1.4.2"
+    },
+    "devDependencies": {
+        "@types/is-hotkey": "^0.1.7",
+        "@types/is-url": "^1.2.30",
+        "@types/tinycolor2": "^1.4.3"
+    }
+}
diff --git a/libs/components/common/project.json b/libs/components/common/project.json
new file mode 100644
index 000000000..e08d7edc9
--- /dev/null
+++ b/libs/components/common/project.json
@@ -0,0 +1,56 @@
+{
+    "sourceRoot": "libs/components/common/src",
+    "projectType": "library",
+    "tags": ["components:common"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/components/common",
+                "tsConfig": "libs/components/common/tsconfig.lib.json",
+                "project": "libs/components/common/package.json",
+                "entryFile": "libs/components/common/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "libs/rollup-ts-checker.config.cjs",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/components/common/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/components/common/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/components/common"],
+            "options": {
+                "jestConfig": "libs/components/common/jest.config.js",
+                "passWithNoTests": true
+            }
+        },
+        "figmaRes": {
+            "executor": "./tools/executors/figmaRes:figmaRes",
+            "options": {
+                "assets": [
+                    {
+                        "fileId": "7pyx5gMz6CN0qSRADmScQ7",
+                        "nodeId": "665%3A1735",
+                        "folder": "./src/lib/Icon"
+                    }
+                ]
+            }
+        }
+    }
+}
diff --git a/libs/components/common/src/index.ts b/libs/components/common/src/index.ts
new file mode 100644
index 000000000..11aece60c
--- /dev/null
+++ b/libs/components/common/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/index';
diff --git a/libs/components/common/src/lib/Logo/LogoImg.tsx b/libs/components/common/src/lib/Logo/LogoImg.tsx
new file mode 100644
index 000000000..d104588fe
--- /dev/null
+++ b/libs/components/common/src/lib/Logo/LogoImg.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import type { CSSProperties } from 'react';
+
+export const LogoImg = ({ style = {} }: { style: CSSProperties }) => {
+    return (
+        <img
+            style={style}
+            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABzJJREFUeNrs3T1SHEcUAOAxpQOQON/EOcpdFpwAfAKhE0ikToBEqawTCG6ATiDkUu7NnaxjJXsET0uDDOiHfrM9fzvfV7VFMgzN9Mzr1z3dvVUFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEBhP5U82c+//rGofyweOGz18cPLlUsPw3tU+Hyn9ef4gWOW9edxX/9gHZRSeZ6O7Lqf1EFwObEyP/tR4P7t+T9nTf3nOP/r9S9nGXW3X/94l3G+VK7HdfnWBe+b9Hf3Mw8/qP/2dcY5X9U/9rY5ABxlHLOXMoUes4BFoCL7sPrRwz/iMo85a0vX60X9OavGbW9k9XqxUzBipod/N/Pw5zPOus6VuROn9T24VxGq152CJ4ukrEczveCpJb1Q5s688kznt/4pqysSAOrIuxt8qBczjdZa/27tN+MnZNZrqQygTYv+dGYXXOvfUxbQNEg80PqXDACHLX5nbpFa69+PXV2B/HrdOAA07/7bZAC7zcCh1l+ZSztuXiHyg9a/VAawyUN8OJOLrvUfoCvgWX+4XksEgE368nPIALT+w0jzTc48799v/ZONJgI16f8mo/mpG3A8opstleOy8DnXEyzzaktu+Of1/XUx0annJ9XnWbOd1uumMwFLtOCHzU08Bv/mTOkcmSmWuS9pQPBN/TmYYNmXfdTrpgGgxIy+o/TapuQ8bvrXzO0fY8qd5gYc1ffXlVr6WusxgGYiz6JQOY5UBR0yN6B0AKjKTuQ5VBV0KDVUpy5D2QBQstU+agYUoSsvLBYqFACaSRalH1jdADrvCrgEZTKASPq/7uCc0EYaEHzhMmweAHJb61X9yR193dMNoAenBgT/F34NGNz4Iz3876v8hT/puDPVMj3NrLvsLcE+fng5VD3fLBZ6ptbaZQCREfvL4PtX3QD6YLFQmwDQpE65rfntve9yg8DCSC09eeMSxDOAyEj97Yf+rSyAkVlYLBQfA4ik/+/vBYPciJuCzMlA1+PJSG6KJyMo8/XE1hjclDWS2p+OeLHQu7psXZz3zhbm2QEguO/f+nbfP83zr3//KvP3FwPO3d6vxrVt85Blvphgg5Yajr9bdAWmuFio9y7AceDYbz28kW6AqcHDmuQS2mbMKbqRyf6MdqbaKABE+uZvM4NCibEGypvybkB/VvH9DN7MdW5AVgAIbvyx/lb63iz3zQ0Cu3OOylr/jbKAdRUfQ0oP/6kAUKZFvgpmBiUyDsp5PfV/oGmAomNIs1wstNPBw/i2ZXD4KuiYstm764zvLZyKlAVEN5l5IwB8nf7vbZr+30vPIjeYboC+f9ssYNUim9mb22KhnAwg0vpfZxwT2cDS24B+W//rbfqHmvUG0YxmVouFcuYBRFrhnD5+yhBy12XbL1DrX6Ir8C5w/O5IugLLqpsdpdfZAaDFvn8P9vFTalafdxnoVhxXn1/t9NIKVndnMA4lzQTc77HM623dWTj9X2m2XxWbx3JUdb+d+4OBawy7Akd2/b0KtNSXgQDwtMcA8H7AZaq3A+9ZIACMoswTyAIiy9ir4LFbOwZQOv3PzhRusVEIm2YBbeYGVLMOAMGNP0IPdTNC620AfQaBiypvkFoAaERG4K9aDNRF3gY8V1UU6grwUAAIrvyLpv83ItHYRiGUyALaLBaaZQbQWfp/rzJWgV8xNZgS2iwWml0AiKT/yw3e01shSN9ZQLpXbQj6vQDQIv3f5KupI7+7sJEjhYLAdZusdS4ZQLSlvdqgInQDGEqbxUKzCACRh2xZYO24bgBDZAHpvj0XAO6m/4sqtr/cZYEyRM5hoxBKBoE0ILgUAAZI/zfoBlghSOmuwGw9Gjj9vx1Ictdhp291ObFCkEJZQFos9Gfg/utLV9uC37beuZf+RybbXBYsSHQikW4AJaWxgDk2KFe3uwDR6bbFXqM0r2UiFaAbQMksYK6Lhc53Wraqqw52jrVfIEMGgYtqXouFPu3+vNOk/8U3/tANYILmNEPw0yvQmwwgOsHmsnRpms1EI90AKwQpfQ+uqnnMDfjy3Q83AeA4mP539e7URiEMbQ6Lhb4EuZ0uN/7QDWCCWcC2Lxa6881PKQOIjqhfdnjxo90AawPo4j68rrZ3sdCdLs5OFR/973rqZLQbYKMQurCNi4W++t7HNBPw98AJ+rgg58EsY/VAND+rf5xNrAWaXJnTzVXlv0bL7WOnxuZgiHuz2b7+ILN7vMw850EFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMC2+0+AAQDgljs/XVSdVAAAAABJRU5ErkJggg=="
+            alt="Affine Logo"
+        />
+    );
+};
diff --git a/libs/components/common/src/lib/Logo/LogoLink.tsx b/libs/components/common/src/lib/Logo/LogoLink.tsx
new file mode 100644
index 000000000..364866eb4
--- /dev/null
+++ b/libs/components/common/src/lib/Logo/LogoLink.tsx
@@ -0,0 +1,17 @@
+import { Link } from 'react-router-dom';
+import { LogoImg } from './LogoImg';
+import { styled } from '@toeverything/components/ui';
+
+export const LogoLink = () => {
+    return (
+        <StyledLink to="/">
+            <LogoImg style={{ width: 56, height: 56 }} />
+        </StyledLink>
+    );
+};
+
+const StyledLink = styled(Link)`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
diff --git a/libs/components/common/src/lib/Logo/affine-logo.svg b/libs/components/common/src/lib/Logo/affine-logo.svg
new file mode 100644
index 000000000..4b99927ca
--- /dev/null
+++ b/libs/components/common/src/lib/Logo/affine-logo.svg
@@ -0,0 +1,8 @@
+<svg width="100" height="22" viewBox="0 0 100 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M77.4929 0.10376V13.3534L69.3559 0.10376H65.563V21.9999H69.7957V8.75276L77.9197 21.9999H81.7255V0.10376H77.4929Z" fill="#153C7A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.71004 0L0 22H4.5159L9.42021 6.78417L14.3267 22H18.8273L11.1161 0H7.71004Z" fill="#153C7A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.6845 0.148682V9.30504H26.3638V3.94645H34.5655L36.4257 0.148682H22.127V21.9552H26.3638V13.1041H39.6845V21.9552H43.9214V13.1041H50.0647H50.6301L52.489 9.30504H51.9237H43.9214V3.94645H52.123L53.9832 0.148682H39.6845Z" fill="#153C7A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M85.7012 0.148682V21.9552H98.1397L99.9999 18.1559H89.938V12.8571H98.507V9.06163H89.938V3.94645H98.1397L99.9999 0.148682H85.7012Z" fill="#153C7A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.2695 22.0001H61.5022V7.49414H57.2695V22.0001Z" fill="#153C7A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.2695 4.6581H61.5022V0.103882H57.2695V4.6581Z" fill="#3E6FDB"/>
+</svg>
diff --git a/libs/components/common/src/lib/Logo/index.ts b/libs/components/common/src/lib/Logo/index.ts
new file mode 100644
index 000000000..d01962d4c
--- /dev/null
+++ b/libs/components/common/src/lib/Logo/index.ts
@@ -0,0 +1,2 @@
+export { LogoLink } from './LogoLink';
+export { LogoImg } from './LogoImg';
diff --git a/libs/components/common/src/lib/block-preview/BlockPreview.tsx b/libs/components/common/src/lib/block-preview/BlockPreview.tsx
new file mode 100644
index 000000000..f505e2b38
--- /dev/null
+++ b/libs/components/common/src/lib/block-preview/BlockPreview.tsx
@@ -0,0 +1,27 @@
+import { PagesIcon } from '@toeverything/components/icons';
+// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
+import { BlockSearchItem } from '@toeverything/datasource/jwt';
+import { ListButton } from '@toeverything/components/ui';
+
+type BlockPreviewProps = {
+    block: BlockSearchItem;
+    className?: string;
+    onClick?: () => void;
+    onMouseOver?: () => void;
+    hover?: boolean;
+};
+
+export const BlockPreview = (props: BlockPreviewProps) => {
+    const { block } = props;
+
+    return (
+        <ListButton
+            className={props.className}
+            onClick={props.onClick}
+            onMouseOver={props.onMouseOver}
+            hover={props.hover}
+            content={block.content}
+            icon={PagesIcon}
+        />
+    );
+};
diff --git a/libs/components/common/src/lib/block-preview/StyledBlockPreview.tsx b/libs/components/common/src/lib/block-preview/StyledBlockPreview.tsx
new file mode 100644
index 000000000..afe859eb5
--- /dev/null
+++ b/libs/components/common/src/lib/block-preview/StyledBlockPreview.tsx
@@ -0,0 +1,142 @@
+import { useEffect, useRef, useState } from 'react';
+import { PagesIcon } from '@toeverything/components/icons';
+import { styled } from '@toeverything/components/ui';
+
+type PreviewSize = 'sm' | 'md' | 'lg';
+
+type StyledBlockPreviewProps = {
+    title: string;
+    children: JSX.Element;
+    className?: string;
+    onClick?: () => void;
+    onMouseOver?: () => void;
+    hover?: boolean;
+};
+
+const BaseContainer = styled('div')<{ size: PreviewSize }>(({ size }) => {
+    const append =
+        size === 'sm'
+            ? {}
+            : {
+                  maxWidth: '18em',
+
+                  lineHeight: '1.5em',
+                  overflowWrap: 'anywhere',
+              };
+    return {
+        background: '#3E6FDB',
+        display: 'flex',
+        flexDirection: size === 'sm' ? 'column' : 'row',
+        rowGap: '0.5em',
+        height: size === 'sm' ? '182px' : size === 'md' ? '180px' : '174px',
+        padding: '1em',
+        paddingBottom: '0',
+        marginBottom: size !== 'lg' ? '20px' : '0',
+        append,
+    };
+});
+
+const PreviewContainer = styled('div')<{ size: PreviewSize }>(({ size }) => {
+    return {
+        minWidth: '272px',
+        position: 'absolute',
+        bottom: '0',
+        overflow: 'hidden',
+        ...(size === 'sm'
+            ? { top: '2.5em', left: '0', right: '0' }
+            : { top: '0.5em', right: '2em' }),
+    };
+});
+
+const Preview = styled('div')<{ size: PreviewSize }>({
+    backgroundColor: 'white',
+    borderRadius: '10px 10px 0 0',
+    boxShadow: '1px 1px 0.5em 0 #000a',
+    margin: '1em auto',
+    height: '100%',
+    width: '256px',
+});
+
+const Title = styled('div')<{ size: PreviewSize }>(({ size }) => {
+    const append =
+        size === 'sm'
+            ? {}
+            : {
+                  maxWidth: '50%',
+                  alignItems: 'top',
+              };
+
+    return {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        columnGap: '0.5em',
+        margin: size === 'sm' ? '0.25em 0.5em' : '0.5em 1em',
+        color: 'white',
+        ...append,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        '&>span': {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        },
+    };
+});
+
+const ScopedEditorWrapper = styled('div')<{ size: PreviewSize }>(({ size }) => {
+    return {
+        width: '750px',
+        height: '750px',
+        transform: 'scale(32%) translate(-102%, -104%)',
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        '&>:first-child': {
+            margin: 'auto',
+            marginTop: 0,
+            overflow: 'hidden',
+            userSelect: 'none',
+            pointerEvents: 'none',
+            padding: 0,
+        },
+    };
+});
+
+export const StyledBlockPreview = (props: StyledBlockPreviewProps) => {
+    const { title } = props;
+    const container = useRef<HTMLDivElement>();
+    const [size, setSize] = useState<PreviewSize>();
+
+    useEffect(() => {
+        if (container?.current) {
+            const element = container?.current;
+            const resizeObserver = new ResizeObserver(entries => {
+                const width = entries?.[0]?.contentRect.width;
+                if (width > 726) setSize('lg');
+                else if (width > 440) setSize('md');
+                else setSize('sm');
+            });
+
+            resizeObserver.observe(element);
+            return () => resizeObserver.unobserve(element);
+        }
+        return undefined;
+    }, [container]);
+
+    return (
+        <BaseContainer ref={container} style={{ width: '100%' }} size={size}>
+            {size ? (
+                <>
+                    <Title size={size}>
+                        <PagesIcon />
+                        <span>{title}</span>
+                    </Title>
+                    <PreviewContainer size={size}>
+                        <Preview size={size}>
+                            <ScopedEditorWrapper size={size}>
+                                {(container?.current && props.children) || null}
+                            </ScopedEditorWrapper>
+                        </Preview>
+                    </PreviewContainer>
+                </>
+            ) : null}
+        </BaseContainer>
+    );
+};
diff --git a/libs/components/common/src/lib/block-preview/index.ts b/libs/components/common/src/lib/block-preview/index.ts
new file mode 100644
index 000000000..ad4c5416b
--- /dev/null
+++ b/libs/components/common/src/lib/block-preview/index.ts
@@ -0,0 +1,2 @@
+export { BlockPreview } from './BlockPreview';
+export { StyledBlockPreview } from './StyledBlockPreview';
diff --git a/libs/components/common/src/lib/button/index.tsx b/libs/components/common/src/lib/button/index.tsx
new file mode 100644
index 000000000..55dd4a124
--- /dev/null
+++ b/libs/components/common/src/lib/button/index.tsx
@@ -0,0 +1,61 @@
+import clsx from 'clsx';
+import style9 from 'style9';
+
+const styles = style9.create({
+    ligoButton: {
+        border: 'none',
+        outline: 'none',
+        // backgroundColor: 'white',
+        cursor: 'pointer',
+        ':hover': {
+            backgroundColor: '#edeef0',
+        },
+    },
+});
+
+export type ButtonType =
+    | 'default'
+    | 'primary'
+    | 'ghost'
+    | 'dashed'
+    | 'link'
+    | 'text';
+
+export type SizeType = 'small' | 'medium' | 'large';
+
+export type ButtonProps = {
+    type?: ButtonType;
+    size?: SizeType;
+    icon?: React.ReactNode;
+    className?: string;
+    children?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    style?: React.CSSProperties;
+};
+
+export default function Button(props: ButtonProps) {
+    const { className, type, style, size, children } = props;
+    const classes = clsx(
+        styles('ligoButton'),
+        {
+            [`${styles('ligoButton')}-${type}`]: type,
+            [`${styles('ligoButton')}-icon-only`]: !children && children !== 0,
+        },
+        className
+    );
+    const handleClick = (
+        e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>
+    ) => {
+        const { onClick } = props;
+        (
+            onClick as React.MouseEventHandler<
+                HTMLButtonElement | HTMLAnchorElement
+            >
+        )?.(e);
+    };
+    return (
+        <button className={classes} style={style || {}} onClick={handleClick}>
+            {children}
+        </button>
+    );
+}
diff --git a/libs/components/common/src/lib/collapsible-title/index.tsx b/libs/components/common/src/lib/collapsible-title/index.tsx
new file mode 100644
index 000000000..2612eb0aa
--- /dev/null
+++ b/libs/components/common/src/lib/collapsible-title/index.tsx
@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import clsx from 'clsx';
+import style9 from 'style9';
+import {
+    MuiButton as Button,
+    MuiCollapse as Collapse,
+} from '@toeverything/components/ui';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+
+const styles = style9.create({
+    ligoButton: {
+        textTransform: 'none',
+    },
+});
+
+export type CollapsibleTitleProps = {
+    title?: string;
+    initialOpen?: boolean;
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+
+export function CollapsibleTitle(props: CollapsibleTitleProps) {
+    const { className, style, children, title, initialOpen = true } = props;
+
+    const [open, setOpen] = useState(initialOpen);
+
+    return (
+        <>
+            <Button
+                startIcon={
+                    open ? (
+                        <ArrowDropDownIcon sx={{ color: '#566B7D' }} />
+                    ) : (
+                        <ArrowRightIcon sx={{ color: '#566B7D' }} />
+                    )
+                }
+                onClick={() => setOpen(prev => !prev)}
+                sx={{ color: '#566B7D', textTransform: 'none' }}
+                className={clsx(styles('ligoButton'), className)}
+                style={style}
+                disableElevation
+                disableRipple
+            >
+                {title}
+            </Button>
+            {children ? (
+                <Collapse in={open} timeout="auto" unmountOnExit>
+                    {children}
+                </Collapse>
+            ) : null}
+        </>
+    );
+}
+
+export default CollapsibleTitle;
diff --git a/libs/components/common/src/lib/colors/color-src.ts b/libs/components/common/src/lib/colors/color-src.ts
new file mode 100644
index 000000000..b8d1a211d
--- /dev/null
+++ b/libs/components/common/src/lib/colors/color-src.ts
@@ -0,0 +1,517 @@
+import tinycolor from 'tinycolor2';
+
+// return rgba based on hex & transparency
+const rgbaString = (hex: string, alpha: number) => {
+    const color = tinycolor(hex);
+    return color.setAlpha(alpha).toString();
+};
+
+// base color, non-semantic
+export const colorBase = {
+    // light theme
+    light: {
+        // gray
+        Gray01: '#000000',
+        Gray02: '#333333',
+        Gray03: '#666666',
+        Gray04: '#999999',
+        Gray05: '#cccccc',
+        Gray06: '#e1e1e1',
+        Gray07: '#eaeaea',
+        Gray08: '#F5F5F5',
+        Gray09: '#FBFAFA',
+        Gray10: '#FFFFFF',
+
+        // gray-vc
+        GrayVc07: '#e8eaed',
+        GrayVc09: '#787b80',
+
+        // blue
+        Blue01: '#1851b3',
+        Blue02: '#0050db',
+        Blue03: '#0c63fa',
+        Blue04: '#337eff',
+        Blue05: '#80aeff',
+        Blue06: '#a5c4fe',
+        Blue07: '#bbd2fe',
+        Blue08: '#d0e0fe',
+        Blue09: '#edf3ff',
+        Blue10: '#f5f8ff',
+        // blue-vc
+        BlueVc09: '#e0ebff',
+
+        // cyan
+        Cyan01: '#0190D8',
+        Cyan02: '#58BFF3',
+        Cyan03: '#88D2F5',
+        Cyan04: '#B7E3F9',
+        Cyan05: '#D0EEFD',
+        Cyan06: '#E7F6FC',
+
+        // green
+        Green01: '#017547',
+        Green02: '#018550',
+        Green03: '#03a363',
+        Green04: '#06cc7d',
+        Green05: '#0ccf81',
+        Green06: '#31e097',
+        Green07: '#75ebbc',
+        Green08: '#b6f0d9',
+        Green09: '#d3f6e8',
+        Green10: '#e8faf3',
+        Green11: '#f2fcf8',
+
+        // grass-green
+        GrassGreen01: '#02661b',
+        GrassGreen02: '#038523',
+        GrassGreen03: '#02a32a',
+        GrassGreen04: '#06bf34',
+        GrassGreen05: '#2fd656',
+        GrassGreen06: '#50de71',
+        GrassGreen07: '#7ceb96',
+        GrassGreen08: '#b4f0c2',
+        GrassGreen09: '#d2f6da',
+        GrassGreen10: '#e8faec',
+        GrassGreen11: '#f2fcf5',
+
+        // orange
+        Orange01: '#fca10d',
+        Orange02: '#fff0e0',
+
+        // orange-vc
+        OrangeVc04: '#fc7f00',
+
+        // orange-calendar
+        OrangeCalendar01: '#944b01',
+        OrangeCalendar02: '#ba5f04',
+        OrangeCalendar03: '#d9730d',
+        OrangeCalendar04: '#fc860f',
+        OrangeCalendar05: '#fc9c42',
+        OrangeCalendar06: '#fcad62',
+        OrangeCalendar07: '#fcbf86',
+        OrangeCalendar08: '#fcdcbd',
+        OrangeCalendar09: '#faf1e8',
+        OrangeCalendar10: '#fcf7f2',
+
+        // yellow
+        Yellow01: '#fcc036',
+        Yellow02: '#fcca26',
+        Yellow03: '#fff7e0',
+
+        // yellow-calendar
+        YellowCalendar01: '#6b4f01',
+        YellowCalendar02: '#9c7202',
+        YellowCalendar03: '#c7950a',
+        YellowCalendar04: '#fabc11',
+        YellowCalendar05: '#fac641',
+        YellowCalendar06: '#fad26b',
+        YellowCalendar07: '#fce19a',
+        YellowCalendar08: '#fcedc7',
+        YellowCalendar09: '#faf5e8',
+        YellowCalendar10: '#fcfaf2',
+
+        // red
+        Red01: '#9e0202',
+        Red02: '#b50707',
+        Red03: '#db1d1d',
+        Red04: '#fc3232',
+        Red05: '#fc5656',
+        Red06: '#fc8b8b',
+        Red07: '#fcb3b3',
+        Red08: '#fcd9da',
+        Red09: '#fae8e9',
+        Red10: '#fff5f5',
+
+        // red-vc
+        RedVc09: '#ffebec',
+
+        // carmine
+        Carmine01: '#9e025a',
+        Carmine02: '#ba076d',
+        Carmine03: '#d90d81',
+        Carmine04: '#f72d9f',
+        Carmine05: '#fa46af',
+        Carmine06: '#fc74c4',
+        Carmine07: '#fca9da',
+        Carmine08: '#fccce8',
+        Carmine09: '#fae8f3',
+        Carmine10: '#fcf2f8',
+
+        // purple
+        Purple01: '#502EC4',
+        Purple02: '#A086FA',
+        Purple03: '#BBA9FB',
+        Purple04: '#BBA9FB',
+        Purple05: '#E5DDFD',
+        Purple06: '#F1ECFE',
+
+        // brown
+        Brown01: '#8a2608',
+        Brown02: '#9c3313',
+        Brown03: '#b04828',
+        Brown04: '#b86044',
+        Brown05: '#db7d60',
+        Brown06: '#ed9277',
+        Brown07: '#f5ad98',
+        Brown08: '#fcd6ca',
+        Brown09: '#faece8',
+        Brown10: '#fcf5f2',
+
+        // gray-blue
+        GrayBlue01: '#3d5c80',
+        GrayBlue02: '#476c96',
+        GrayBlue03: '#587fad',
+        GrayBlue04: '#658fbf',
+        GrayBlue05: '#7ca2cf',
+        GrayBlue06: '#94b9e3',
+        GrayBlue07: '#abc9eb',
+        GrayBlue08: '#c8def7',
+        GrayBlue09: '#EDF5FF',
+        GrayBlue10: '#F2F7FC',
+
+        // docs new colors:
+        // Red - Docs Red
+        DocsRed01: '#7E0101',
+        // Orange - Docs Orange
+        DocsOrange01: '#7A3D00',
+        // Lemon Yellow - Docs Lemon
+        DocsLemon01: '#6B4C00',
+        DocsLemon03: '#B38F00',
+        DocsLemon05: '#FCE303',
+        DocsLemon06: '#FCEE4C',
+        DocsLemon08: '#FFF88F',
+        DocsLemon09: '#FFFABA',
+        // Green - Docs Green
+        DocsGreen01: '#285215',
+        DocsGreen03: '#4C8A29',
+        DocsGreen05: '#71B842',
+        DocsGreen06: '#91CC66',
+        DocsGreen08: '#BDE9A5',
+        DocsGreen09: '#E2FAD4',
+        // sky blue - Docs Sky
+        DocsSky01: '#004587',
+        DocsSky03: '#016DCB',
+        DocsSky05: '#0C87FA',
+        DocsSky06: '#37ACFF',
+        DocsSky08: '#86D9FF',
+        DocsSky09: '#D1F2FF',
+        // Gray Blue - Docs Gray Blue
+        DocsGrayBlue01: '#30445C',
+        DocsGrayBlue09: '#DEECFC',
+        // Purple - Docs Purple
+        DocsPurple01: '#360990',
+        // Magenta - Docs Carmine
+        DocsCarmine01: '#88014E',
+        // Gray - Docs Gray
+        DocsGray10: '#3B3F44',
+        DocsGray11: '#2C2F33',
+    },
+    // dark theme
+    dark: {
+        // gray
+        Gray01: '#17181A',
+        Gray02: '#121314',
+        Gray03: '#101112',
+        Gray04: '#27292b',
+        Gray05: '#2d2f32',
+        Gray06: '#303134',
+        Gray07: '#45474a',
+        Gray08: '#515155',
+        Gray09: '#65676a',
+        Gray10: '#88898C',
+        Gray12: '#f7f7f7',
+        Gray13: '#fafafa',
+        // gray-vc
+        GrayVc07: '#e3e5e8',
+        GrayVc09: '#88898c',
+
+        // blue
+        Blue01: '#134BE0',
+        Blue02: '#1E6FFF',
+        Blue03: '#5D98FF',
+        Blue04: '#98BEFF',
+        Blue05: '#C2D8FF',
+        Blue06: '#EDF3FF',
+        Blue07: '#EDF3FF',
+        Blue08: '#EDF3FF',
+        Blue09: '#EDF3FF',
+        // blue-vc
+        BlueVc09: '#1A2741',
+
+        // cyan
+        Cyan01: '#046B7A',
+        Cyan02: '#058599',
+        Cyan03: '#049dbf',
+        Cyan04: '#0AB7D1',
+        Cyan05: '#2DCEE3',
+        Cyan06: '#52E0F2',
+        Cyan07: '#45B3C4',
+        Cyan08: '#368A96',
+        Cyan09: '#275F69',
+        Cyan10: '#17363c',
+        Cyan11: '#0F2226',
+
+        // green
+        Green01: '#68BB0B',
+        Green02: '#A3E163',
+        Green03: '#BDE98F',
+        Green04: '#D8F0BD',
+        Green05: '#E6F7D3',
+        Green06: '#F2FCE9',
+
+        // grass-green
+        GrassGreen01: '#046B1E',
+        GrassGreen02: '#068C27',
+        GrassGreen03: '#00942c',
+        GrassGreen04: '#09BA36',
+        GrassGreen05: '#33CC57',
+        GrassGreen06: '#52D972',
+        GrassGreen07: '#3EA356',
+        GrassGreen08: '#2B703B',
+        GrassGreen09: '#1D4D2A',
+        GrassGreen10: '#163820',
+        GrassGreen11: '#112918',
+
+        // orange
+        Orange01: '#E96800',
+        Orange02: '#FEA94B',
+        Orange03: '#FDC17F',
+        Orange04: '#FFDAB2',
+        Orange05: '#FFE7CD',
+        Orange06: '#FFF1E3',
+
+        // orange-vc
+        OrangeVc04: '#fc850d',
+
+        // orange-calendar
+        OrangeCalendar01: '#99530C',
+        OrangeCalendar02: '#BD660F',
+        OrangeCalendar03: '#DA7918',
+        OrangeCalendar04: '#e0760b',
+        OrangeCalendar05: '#B86818',
+        OrangeCalendar06: '#8F561E',
+        OrangeCalendar07: '#66411E',
+        OrangeCalendar08: '#3D2917',
+        OrangeCalendar09: '#3d2a17',
+        OrangeCalendar10: '#261C12',
+
+        // yellow
+        Yellow01: '#F59800',
+        Yellow02: '#FFDA4E',
+        Yellow03: '#FFE480',
+        Yellow04: '#FFF0B3',
+        Yellow05: '#FFF4CD',
+        Yellow06: '#FFF9E7',
+
+        // yellow-calendar
+        YellowCalendar01: '#705302',
+        YellowCalendar02: '#A17705',
+        YellowCalendar03: '#d19704',
+        YellowCalendar04: '#b88702',
+        YellowCalendar05: '#FCC947',
+        YellowCalendar06: '#BD983A',
+        YellowCalendar07: '#7D662A',
+        YellowCalendar08: '#54451E',
+        YellowCalendar09: '#3d3417',
+        YellowCalendar10: '#26200E',
+
+        // red
+        Red01: '#9e0505',
+        Red02: '#b50b0b',
+        Red03: '#db272d',
+        Red04: '#fc3c3c',
+        Red05: '#fc5e5e',
+        Red06: '#7a2525',
+        Red07: '#632122',
+        Red08: '#4c1d1d',
+        Red09: '#421d1e',
+        Red10: '#2e1c1c',
+
+        // red-vc
+        RedVc09: '#ffebec',
+
+        // carmine
+        Carmine01: '#A3055F',
+        Carmine02: '#BF0B71',
+        Carmine03: '#DE1285',
+        Carmine04: '#e32998',
+        Carmine05: '#FC4CB3',
+        Carmine06: '#CF4294',
+        Carmine07: '#A13774',
+        Carmine08: '#702A53',
+        Carmine09: '#401a31',
+        Carmine10: '#26101E',
+
+        // purple
+        Purple01: '#480FBA',
+        Purple02: '#6021DE',
+        Purple03: '#7E3DFF',
+        Purple04: '#8c56ff',
+        Purple05: '#9d6dfc',
+        Purple06: '#b797fc',
+        Purple07: '#977BD1',
+        Purple08: '#7660A6',
+        Purple09: '#342a4a',
+        Purple10: '#1B1526',
+
+        // brown
+        Brown01: '#8F2A0B',
+        Brown02: '#9E3616',
+        Brown03: '#b85944',
+        Brown04: '#BA6449',
+        Brown05: '#DB8165',
+        Brown06: '#B5705B',
+        Brown07: '#8F5E4F',
+        Brown08: '#69483F',
+        Brown09: '#3B2A26',
+        Brown10: '#261D1A',
+
+        // gray-blue
+        GrayBlue01: '#81868c',
+        GrayBlue02: '#50739B',
+        GrayBlue03: '#5F85B3',
+        GrayBlue04: '#4F81C7',
+        GrayBlue05: '#496280',
+        GrayBlue06: '#3F5269',
+        GrayBlue07: '#334152',
+        GrayBlue08: '#27303B',
+        GrayBlue09: '#28303b',
+        GrayBlue10: '#252C36',
+
+        // docs new colors:
+        // Red - Docs Red
+        DocsRed01: '#7E0101',
+        // Orange - Docs Orange
+        DocsOrange01: '#7A3D00',
+        // Lemon Yellow - Docs Lemon
+        DocsLemon01: '#6B4C00',
+        DocsLemon03: '#B38F00',
+        DocsLemon05: '#FCE303',
+        DocsLemon06: '#FCEE4C',
+        DocsLemon08: '#FFF88F',
+        DocsLemon09: '#FFFABA',
+        // Green - Docs Green
+        DocsGreen01: '#285215',
+        DocsGreen03: '#4C8A29',
+        DocsGreen05: '#71B842',
+        DocsGreen06: '#91CC66',
+        DocsGreen08: '#BDE9A5',
+        DocsGreen09: '#E2FAD4',
+        // sky blue - Docs Sky
+        DocsSky01: '#004587',
+        DocsSky03: '#016DCB',
+        DocsSky05: '#1889F2',
+        DocsSky06: '#329BE6',
+        DocsSky08: '#86D9FF',
+        DocsSky09: '#D1F2FF',
+        // Gray Blue - Docs Gray Blue
+        DocsGrayBlue01: '#30445C',
+        DocsGrayBlue09: '#DEECFC',
+        // Purple - Docs Purple
+        DocsPurple01: '#360990',
+        // Magenta - Docs Carmine
+        DocsCarmine01: '#88014E',
+        // Gray - Docs Gray
+        DocsGray10: '#3B3F44',
+        DocsGray11: '#2C2F33',
+    },
+};
+
+// scene color, semantic
+export const colorScenes = {
+    light: {
+        // main color (@Blue03)
+        PrimaryColor: colorBase.light.Blue03,
+        CardBg: colorBase.light.Gray01, // Card background color
+        CardNestedBg: colorBase.light.Gray02, // Background color of the nested area in the card
+        // primary button - primary
+        ButtonPrimaryBg: colorBase.light.Blue03, // primary button background color
+        ButtonPrimaryText: colorBase.light.Gray01, // primary button text color
+        ButtonPrimaryBgHover: colorBase.light.Blue04, // background color - hover
+        ButtonPrimaryTextHover: colorBase.light.Gray01, // Text color - hover
+        ButtonPrimaryBgActive: colorBase.light.Blue02, // background color - active
+        ButtonPrimaryTextActive: colorBase.light.Gray01, // Text color - active
+        ButtonPrimaryBgDisabled: colorBase.light.Blue05, // background color - disabled
+        ButtonPrimaryTextDisabled: colorBase.light.Gray01, // Text color - disabled
+        // secondary button - secondary
+        ButtonSecondaryBg: colorBase.light.Gray01, // secondary button background color
+        ButtonSecondaryText: colorBase.light.Gray03, // Secondary button text color
+        ButtonSecondaryBgHover: colorBase.light.Gray02, // background color - hover
+        ButtonSecondaryTextHover: colorBase.light.Gray03, // Text color - hover
+        ButtonSecondaryBgActive: colorBase.light.Gray03, // background color - active
+        ButtonSecondaryTextActive: colorBase.light.Gray03, // Text color - active
+        ButtonSecondaryBgDisabled: colorBase.light.Gray03, // background color - disabled
+        ButtonSecondaryTextDisabled: colorBase.light.Gray09, // Text color - disabled
+        // ghost button - ghost
+        ButtonGhostBg: colorBase.light.Gray01, // Ghost button background color
+        ButtonGhostText: colorBase.light.Blue03, // Ghost button text color
+        ButtonGhostBgHover: colorBase.light.Blue09, // background color - hover
+        ButtonGhostTextHover: colorBase.light.Blue03, // Text color - hover
+        ButtonGhostBgActive: colorBase.light.Blue08, // background color - active
+        ButtonGhostTextActive: colorBase.light.Blue03, // Text color - active
+        ButtonGhostBgDisabled: colorBase.light.Gray03, // background color - disabled
+        ButtonGhostTextDisabled: colorBase.light.Gray09, // text color - disabled
+
+        ContainerBorder: rgbaString(colorBase.light.Gray03, 0.12), // item hover // container border
+        DividerColor: rgbaString(colorBase.light.Gray03, 0.08), // global divider
+        SelectColor: rgbaString(colorBase.light.GrayBlue01, 0.08), // item select
+        HoverColor: rgbaString(colorBase.light.GrayBlue01, 0.05), // item hover
+        ModalMaskBg: rgbaString(colorBase.light.Gray03, 0.45), // modal translucent mask
+        CardBoxShadow: rgbaString(colorBase.light.Gray03, 0.04), // card shadow
+        TooltipBg: colorBase.light.Gray03, // tooltip background color
+        TooltipText: colorBase.light.Gray01, // tooltip text color
+    },
+    dark: {
+        // main color (@Blue03)
+        PrimaryColor: colorBase.dark.Blue03,
+        CardBg: colorBase.dark.Gray04,
+        CardNestedBg: colorBase.dark.Gray06,
+        // main button
+        ButtonPrimaryBg: colorBase.dark.Blue03,
+        ButtonPrimaryText: colorBase.dark.Gray03,
+        ButtonPrimaryBgHover: colorBase.dark.Blue04, // background color - hover
+        ButtonPrimaryTextHover: colorBase.dark.Gray03, // Text color - hover
+        ButtonPrimaryBgActive: colorBase.dark.Blue02, // background color - active
+        ButtonPrimaryTextActive: colorBase.dark.Gray03, // Text color - active
+        ButtonPrimaryBgDisabled: colorBase.dark.Blue05, // background color - disabled
+        ButtonPrimaryTextDisabled: colorBase.dark.Gray03, // Text color - disabled
+        // The dark mode secondary button has the same style as the ghost button
+        // secondary button
+        ButtonSecondaryBg: rgbaString(colorBase.dark.Gray03, 0.1),
+        ButtonSecondaryText: colorBase.dark.Gray03,
+        ButtonSecondaryBgHover: rgbaString(colorBase.dark.Gray03, 0.15), // background color - hover
+        ButtonSecondaryTextHover: colorBase.dark.Gray03, // Text color - hover
+        ButtonSecondaryBgActive: rgbaString(colorBase.dark.Gray03, 0.07), // background color - active
+        ButtonSecondaryTextActive: colorBase.dark.Gray03, // Text color - active
+        ButtonSecondaryBgDisabled: rgbaString(colorBase.dark.Gray03, 0.07), // background color - disabled
+        ButtonSecondaryTextDisabled: colorBase.dark.Gray09, // Text color - disabled
+        // ghost button
+        ButtonGhostBg: rgbaString(colorBase.dark.Gray03, 0.1),
+        ButtonGhostText: colorBase.dark.Gray03,
+        ButtonGhostBgHover: rgbaString(colorBase.dark.Gray03, 0.15), // background color - hover
+        ButtonGhostTextHover: colorBase.dark.Gray03, // Text color - hover
+        ButtonGhostBgActive: rgbaString(colorBase.dark.Gray03, 0.07), // background color - active
+        ButtonGhostTextActive: colorBase.dark.Gray03, // Text color - active
+        ButtonGhostBgDisabled: rgbaString(colorBase.dark.Gray03, 0.07), // background color - disabled
+        ButtonGhostTextDisabled: colorBase.dark.Gray09, // Text color - disabled
+        ContainerBorder: rgbaString(colorBase.dark.Gray03, 0.12),
+        DividerColor: rgbaString(colorBase.dark.Gray03, 0.08),
+        SelectColor: rgbaString(colorBase.dark.GrayBlue01, 0.2),
+        HoverColor: rgbaString(colorBase.dark.GrayBlue01, 0.1),
+        ModalMaskBg: rgbaString(colorBase.light.Gray03, 0.5),
+        CardBoxShadow: rgbaString(colorBase.light.Gray03, 0.3),
+        TooltipBg: colorBase.dark.Gray05,
+        TooltipText: colorBase.dark.Gray03,
+    },
+};
+
+export default {
+    light: {
+        ...colorBase.light,
+        ...colorScenes.light,
+    },
+    dark: {
+        ...colorBase.dark,
+        ...colorScenes.dark,
+    },
+};
diff --git a/libs/components/common/src/lib/colors/colors.ts b/libs/components/common/src/lib/colors/colors.ts
new file mode 100644
index 000000000..57b476614
--- /dev/null
+++ b/libs/components/common/src/lib/colors/colors.ts
@@ -0,0 +1,378 @@
+import themes from './color-src';
+const mode = 'light';
+const themeColors = themes[mode];
+
+export const Gray01 = themeColors.Gray01;
+export const Gray02 = themeColors.Gray02;
+export const Gray03 = themeColors.Gray03;
+export const Gray04 = themeColors.Gray04;
+export const Gray05 = themeColors.Gray05;
+export const Gray06 = themeColors.Gray06;
+export const Gray07 = themeColors.Gray07;
+export const Gray08 = themeColors.Gray08;
+export const Gray09 = themeColors.Gray09;
+export const Gray10 = themeColors.Gray10;
+export const GrayVc07 = themeColors.GrayVc07;
+export const GrayVc09 = themeColors.GrayVc09;
+export const Blue01 = themeColors.Blue01;
+export const Blue02 = themeColors.Blue02;
+export const Blue03 = themeColors.Blue03;
+export const Blue04 = themeColors.Blue04;
+export const Blue05 = themeColors.Blue05;
+export const Blue06 = themeColors.Blue06;
+export const Blue07 = themeColors.Blue07;
+export const Blue08 = themeColors.Blue08;
+export const Blue09 = themeColors.Blue09;
+export const Blue10 = themeColors.Blue10;
+export const BlueVc09 = themeColors.BlueVc09;
+export const Cyan01 = themeColors.Cyan01;
+export const Cyan02 = themeColors.Cyan02;
+export const Cyan03 = themeColors.Cyan03;
+export const Cyan04 = themeColors.Cyan04;
+export const Cyan05 = themeColors.Cyan05;
+export const Cyan06 = themeColors.Cyan06;
+export const Green01 = themeColors.Green01;
+export const Green02 = themeColors.Green02;
+export const Green03 = themeColors.Green03;
+export const Green04 = themeColors.Green04;
+export const Green05 = themeColors.Green05;
+export const Green06 = themeColors.Green06;
+export const Green07 = themeColors.Green07;
+export const Green08 = themeColors.Green08;
+export const Green09 = themeColors.Green09;
+export const Green10 = themeColors.Green10;
+export const Green11 = themeColors.Green11;
+export const GrassGreen01 = themeColors.GrassGreen01;
+export const GrassGreen02 = themeColors.GrassGreen02;
+export const GrassGreen03 = themeColors.GrassGreen03;
+export const GrassGreen04 = themeColors.GrassGreen04;
+export const GrassGreen05 = themeColors.GrassGreen05;
+export const GrassGreen06 = themeColors.GrassGreen06;
+export const GrassGreen07 = themeColors.GrassGreen07;
+export const GrassGreen08 = themeColors.GrassGreen08;
+export const GrassGreen09 = themeColors.GrassGreen09;
+export const GrassGreen10 = themeColors.GrassGreen10;
+export const GrassGreen11 = themeColors.GrassGreen11;
+export const Orange01 = themeColors.Orange01;
+export const Orange02 = themeColors.Orange02;
+export const OrangeVc04 = themeColors.OrangeVc04;
+export const OrangeCalendar01 = themeColors.OrangeCalendar01;
+export const OrangeCalendar02 = themeColors.OrangeCalendar02;
+export const OrangeCalendar03 = themeColors.OrangeCalendar03;
+export const OrangeCalendar04 = themeColors.OrangeCalendar04;
+export const OrangeCalendar05 = themeColors.OrangeCalendar05;
+export const OrangeCalendar06 = themeColors.OrangeCalendar06;
+export const OrangeCalendar07 = themeColors.OrangeCalendar07;
+export const OrangeCalendar08 = themeColors.OrangeCalendar08;
+export const OrangeCalendar09 = themeColors.OrangeCalendar09;
+export const OrangeCalendar10 = themeColors.OrangeCalendar10;
+export const Yellow01 = themeColors.Yellow01;
+export const Yellow02 = themeColors.Yellow02;
+export const Yellow03 = themeColors.Yellow03;
+export const YellowCalendar01 = themeColors.YellowCalendar01;
+export const YellowCalendar02 = themeColors.YellowCalendar02;
+export const YellowCalendar03 = themeColors.YellowCalendar03;
+export const YellowCalendar04 = themeColors.YellowCalendar04;
+export const YellowCalendar05 = themeColors.YellowCalendar05;
+export const YellowCalendar06 = themeColors.YellowCalendar06;
+export const YellowCalendar07 = themeColors.YellowCalendar07;
+export const YellowCalendar08 = themeColors.YellowCalendar08;
+export const YellowCalendar09 = themeColors.YellowCalendar09;
+export const YellowCalendar10 = themeColors.YellowCalendar10;
+export const Red01 = themeColors.Red01;
+export const Red02 = themeColors.Red02;
+export const Red03 = themeColors.Red03;
+export const Red04 = themeColors.Red04;
+export const Red05 = themeColors.Red05;
+export const Red06 = themeColors.Red06;
+export const Red07 = themeColors.Red07;
+export const Red08 = themeColors.Red08;
+export const Red09 = themeColors.Red09;
+export const Red10 = themeColors.Red10;
+export const RedVc09 = themeColors.RedVc09;
+export const Carmine01 = themeColors.Carmine01;
+export const Carmine02 = themeColors.Carmine02;
+export const Carmine03 = themeColors.Carmine03;
+export const Carmine04 = themeColors.Carmine04;
+export const Carmine05 = themeColors.Carmine05;
+export const Carmine06 = themeColors.Carmine06;
+export const Carmine07 = themeColors.Carmine07;
+export const Carmine08 = themeColors.Carmine08;
+export const Carmine09 = themeColors.Carmine09;
+export const Carmine10 = themeColors.Carmine10;
+export const Purple01 = themeColors.Purple01;
+export const Purple02 = themeColors.Purple02;
+export const Purple03 = themeColors.Purple03;
+export const Purple04 = themeColors.Purple04;
+export const Purple05 = themeColors.Purple05;
+export const Purple06 = themeColors.Purple06;
+export const Brown01 = themeColors.Brown01;
+export const Brown02 = themeColors.Brown02;
+export const Brown03 = themeColors.Brown03;
+export const Brown04 = themeColors.Brown04;
+export const Brown05 = themeColors.Brown05;
+export const Brown06 = themeColors.Brown06;
+export const Brown07 = themeColors.Brown07;
+export const Brown08 = themeColors.Brown08;
+export const Brown09 = themeColors.Brown09;
+export const Brown10 = themeColors.Brown10;
+export const GrayBlue01 = themeColors.GrayBlue01;
+export const GrayBlue02 = themeColors.GrayBlue02;
+export const GrayBlue03 = themeColors.GrayBlue03;
+export const GrayBlue04 = themeColors.GrayBlue04;
+export const GrayBlue05 = themeColors.GrayBlue05;
+export const GrayBlue06 = themeColors.GrayBlue06;
+export const GrayBlue07 = themeColors.GrayBlue07;
+export const GrayBlue08 = themeColors.GrayBlue08;
+export const GrayBlue09 = themeColors.GrayBlue09;
+export const GrayBlue10 = themeColors.GrayBlue10;
+export const DocsRed01 = themeColors.DocsRed01;
+export const DocsOrange01 = themeColors.DocsOrange01;
+export const DocsLemon01 = themeColors.DocsLemon01;
+export const DocsLemon03 = themeColors.DocsLemon03;
+export const DocsLemon05 = themeColors.DocsLemon05;
+export const DocsLemon06 = themeColors.DocsLemon06;
+export const DocsLemon08 = themeColors.DocsLemon08;
+export const DocsLemon09 = themeColors.DocsLemon09;
+export const DocsGreen01 = themeColors.DocsGreen01;
+export const DocsGreen03 = themeColors.DocsGreen03;
+export const DocsGreen05 = themeColors.DocsGreen05;
+export const DocsGreen06 = themeColors.DocsGreen06;
+export const DocsGreen08 = themeColors.DocsGreen08;
+export const DocsGreen09 = themeColors.DocsGreen09;
+export const DocsSky01 = themeColors.DocsSky01;
+export const DocsSky03 = themeColors.DocsSky03;
+export const DocsSky05 = themeColors.DocsSky05;
+export const DocsSky06 = themeColors.DocsSky06;
+export const DocsSky08 = themeColors.DocsSky08;
+export const DocsSky09 = themeColors.DocsSky09;
+export const DocsGrayBlue01 = themeColors.DocsGrayBlue01;
+export const DocsGrayBlue09 = themeColors.DocsGrayBlue09;
+export const DocsPurple01 = themeColors.DocsPurple01;
+export const DocsCarmine01 = themeColors.DocsCarmine01;
+export const DocsGray10 = themeColors.DocsGray10;
+export const DocsGray11 = themeColors.DocsGray11;
+export const PrimaryColor = themeColors.PrimaryColor;
+export const CardBg = themeColors.CardBg;
+export const CardNestedBg = themeColors.CardNestedBg;
+export const ButtonPrimaryBg = themeColors.ButtonPrimaryBg;
+export const ButtonPrimaryText = themeColors.ButtonPrimaryText;
+export const ButtonPrimaryBgHover = themeColors.ButtonPrimaryBgHover;
+export const ButtonPrimaryTextHover = themeColors.ButtonPrimaryTextHover;
+export const ButtonPrimaryBgActive = themeColors.ButtonPrimaryBgActive;
+export const ButtonPrimaryTextActive = themeColors.ButtonPrimaryTextActive;
+export const ButtonPrimaryBgDisabled = themeColors.ButtonPrimaryBgDisabled;
+export const ButtonPrimaryTextDisabled = themeColors.ButtonPrimaryTextDisabled;
+export const ButtonSecondaryBg = themeColors.ButtonSecondaryBg;
+export const ButtonSecondaryText = themeColors.ButtonSecondaryText;
+export const ButtonSecondaryBgHover = themeColors.ButtonSecondaryBgHover;
+export const ButtonSecondaryTextHover = themeColors.ButtonSecondaryTextHover;
+export const ButtonSecondaryBgActive = themeColors.ButtonSecondaryBgActive;
+export const ButtonSecondaryTextActive = themeColors.ButtonSecondaryTextActive;
+export const ButtonSecondaryBgDisabled = themeColors.ButtonSecondaryBgDisabled;
+export const ButtonSecondaryTextDisabled =
+    themeColors.ButtonSecondaryTextDisabled;
+export const ButtonGhostBg = themeColors.ButtonGhostBg;
+export const ButtonGhostText = themeColors.ButtonGhostText;
+export const ButtonGhostBgHover = themeColors.ButtonGhostBgHover;
+export const ButtonGhostTextHover = themeColors.ButtonGhostTextHover;
+export const ButtonGhostBgActive = themeColors.ButtonGhostBgActive;
+export const ButtonGhostTextActive = themeColors.ButtonGhostTextActive;
+export const ButtonGhostBgDisabled = themeColors.ButtonGhostBgDisabled;
+export const ButtonGhostTextDisabled = themeColors.ButtonGhostTextDisabled;
+export const ContainerBorder = themeColors.ContainerBorder;
+export const DividerColor = themeColors.DividerColor;
+export const SelectColor = themeColors.SelectColor;
+export const HoverColor = themeColors.HoverColor;
+export const ModalMaskBg = themeColors.ModalMaskBg;
+export const CardBoxShadow = themeColors.CardBoxShadow;
+export const TooltipBg = themeColors.TooltipBg;
+export const TooltipText = themeColors.TooltipText;
+
+export const colors = {
+    Gray01: themeColors.Gray01,
+    Gray02: themeColors.Gray02,
+    Gray03: themeColors.Gray03,
+    Gray04: themeColors.Gray04,
+    Gray05: themeColors.Gray05,
+    Gray06: themeColors.Gray06,
+    Gray07: themeColors.Gray07,
+    Gray08: themeColors.Gray08,
+    Gray09: themeColors.Gray09,
+    Gray10: themeColors.Gray10,
+    GrayVc07: themeColors.GrayVc07,
+    GrayVc09: themeColors.GrayVc09,
+    Blue01: themeColors.Blue01,
+    Blue02: themeColors.Blue02,
+    Blue03: themeColors.Blue03,
+    Blue04: themeColors.Blue04,
+    Blue05: themeColors.Blue05,
+    Blue06: themeColors.Blue06,
+    Blue07: themeColors.Blue07,
+    Blue08: themeColors.Blue08,
+    Blue09: themeColors.Blue09,
+    Blue10: themeColors.Blue10,
+    BlueVc09: themeColors.BlueVc09,
+    Cyan01: themeColors.Cyan01,
+    Cyan02: themeColors.Cyan02,
+    Cyan03: themeColors.Cyan03,
+    Cyan04: themeColors.Cyan04,
+    Cyan05: themeColors.Cyan05,
+    Cyan06: themeColors.Cyan06,
+    Green01: themeColors.Green01,
+    Green02: themeColors.Green02,
+    Green03: themeColors.Green03,
+    Green04: themeColors.Green04,
+    Green05: themeColors.Green05,
+    Green06: themeColors.Green06,
+    Green07: themeColors.Green07,
+    Green08: themeColors.Green08,
+    Green09: themeColors.Green09,
+    Green10: themeColors.Green10,
+    Green11: themeColors.Green11,
+    GrassGreen01: themeColors.GrassGreen01,
+    GrassGreen02: themeColors.GrassGreen02,
+    GrassGreen03: themeColors.GrassGreen03,
+    GrassGreen04: themeColors.GrassGreen04,
+    GrassGreen05: themeColors.GrassGreen05,
+    GrassGreen06: themeColors.GrassGreen06,
+    GrassGreen07: themeColors.GrassGreen07,
+    GrassGreen08: themeColors.GrassGreen08,
+    GrassGreen09: themeColors.GrassGreen09,
+    GrassGreen10: themeColors.GrassGreen10,
+    GrassGreen11: themeColors.GrassGreen11,
+    Orange01: themeColors.Orange01,
+    Orange02: themeColors.Orange02,
+    OrangeVc04: themeColors.OrangeVc04,
+    OrangeCalendar01: themeColors.OrangeCalendar01,
+    OrangeCalendar02: themeColors.OrangeCalendar02,
+    OrangeCalendar03: themeColors.OrangeCalendar03,
+    OrangeCalendar04: themeColors.OrangeCalendar04,
+    OrangeCalendar05: themeColors.OrangeCalendar05,
+    OrangeCalendar06: themeColors.OrangeCalendar06,
+    OrangeCalendar07: themeColors.OrangeCalendar07,
+    OrangeCalendar08: themeColors.OrangeCalendar08,
+    OrangeCalendar09: themeColors.OrangeCalendar09,
+    OrangeCalendar10: themeColors.OrangeCalendar10,
+    Yellow01: themeColors.Yellow01,
+    Yellow02: themeColors.Yellow02,
+    Yellow03: themeColors.Yellow03,
+    YellowCalendar01: themeColors.YellowCalendar01,
+    YellowCalendar02: themeColors.YellowCalendar02,
+    YellowCalendar03: themeColors.YellowCalendar03,
+    YellowCalendar04: themeColors.YellowCalendar04,
+    YellowCalendar05: themeColors.YellowCalendar05,
+    YellowCalendar06: themeColors.YellowCalendar06,
+    YellowCalendar07: themeColors.YellowCalendar07,
+    YellowCalendar08: themeColors.YellowCalendar08,
+    YellowCalendar09: themeColors.YellowCalendar09,
+    YellowCalendar10: themeColors.YellowCalendar10,
+    Red01: themeColors.Red01,
+    Red02: themeColors.Red02,
+    Red03: themeColors.Red03,
+    Red04: themeColors.Red04,
+    Red05: themeColors.Red05,
+    Red06: themeColors.Red06,
+    Red07: themeColors.Red07,
+    Red08: themeColors.Red08,
+    Red09: themeColors.Red09,
+    Red10: themeColors.Red10,
+    RedVc09: themeColors.RedVc09,
+    Carmine01: themeColors.Carmine01,
+    Carmine02: themeColors.Carmine02,
+    Carmine03: themeColors.Carmine03,
+    Carmine04: themeColors.Carmine04,
+    Carmine05: themeColors.Carmine05,
+    Carmine06: themeColors.Carmine06,
+    Carmine07: themeColors.Carmine07,
+    Carmine08: themeColors.Carmine08,
+    Carmine09: themeColors.Carmine09,
+    Carmine10: themeColors.Carmine10,
+    Purple01: themeColors.Purple01,
+    Purple02: themeColors.Purple02,
+    Purple03: themeColors.Purple03,
+    Purple04: themeColors.Purple04,
+    Purple05: themeColors.Purple05,
+    Purple06: themeColors.Purple06,
+    Brown01: themeColors.Brown01,
+    Brown02: themeColors.Brown02,
+    Brown03: themeColors.Brown03,
+    Brown04: themeColors.Brown04,
+    Brown05: themeColors.Brown05,
+    Brown06: themeColors.Brown06,
+    Brown07: themeColors.Brown07,
+    Brown08: themeColors.Brown08,
+    Brown09: themeColors.Brown09,
+    Brown10: themeColors.Brown10,
+    GrayBlue01: themeColors.GrayBlue01,
+    GrayBlue02: themeColors.GrayBlue02,
+    GrayBlue03: themeColors.GrayBlue03,
+    GrayBlue04: themeColors.GrayBlue04,
+    GrayBlue05: themeColors.GrayBlue05,
+    GrayBlue06: themeColors.GrayBlue06,
+    GrayBlue07: themeColors.GrayBlue07,
+    GrayBlue08: themeColors.GrayBlue08,
+    GrayBlue09: themeColors.GrayBlue09,
+    GrayBlue10: themeColors.GrayBlue10,
+    DocsRed01: themeColors.DocsRed01,
+    DocsOrange01: themeColors.DocsOrange01,
+    DocsLemon01: themeColors.DocsLemon01,
+    DocsLemon03: themeColors.DocsLemon03,
+    DocsLemon05: themeColors.DocsLemon05,
+    DocsLemon06: themeColors.DocsLemon06,
+    DocsLemon08: themeColors.DocsLemon08,
+    DocsLemon09: themeColors.DocsLemon09,
+    DocsGreen01: themeColors.DocsGreen01,
+    DocsGreen03: themeColors.DocsGreen03,
+    DocsGreen05: themeColors.DocsGreen05,
+    DocsGreen06: themeColors.DocsGreen06,
+    DocsGreen08: themeColors.DocsGreen08,
+    DocsGreen09: themeColors.DocsGreen09,
+    DocsSky01: themeColors.DocsSky01,
+    DocsSky03: themeColors.DocsSky03,
+    DocsSky05: themeColors.DocsSky05,
+    DocsSky06: themeColors.DocsSky06,
+    DocsSky08: themeColors.DocsSky08,
+    DocsSky09: themeColors.DocsSky09,
+    DocsGrayBlue01: themeColors.DocsGrayBlue01,
+    DocsGrayBlue09: themeColors.DocsGrayBlue09,
+    DocsPurple01: themeColors.DocsPurple01,
+    DocsCarmine01: themeColors.DocsCarmine01,
+    DocsGray10: themeColors.DocsGray10,
+    DocsGray11: themeColors.DocsGray11,
+    PrimaryColor: themeColors.PrimaryColor,
+    CardBg: themeColors.CardBg,
+    CardNestedBg: themeColors.CardNestedBg,
+    ButtonPrimaryBg: themeColors.ButtonPrimaryBg,
+    ButtonPrimaryText: themeColors.ButtonPrimaryText,
+    ButtonPrimaryBgHover: themeColors.ButtonPrimaryBgHover,
+    ButtonPrimaryTextHover: themeColors.ButtonPrimaryTextHover,
+    ButtonPrimaryBgActive: themeColors.ButtonPrimaryBgActive,
+    ButtonPrimaryTextActive: themeColors.ButtonPrimaryTextActive,
+    ButtonPrimaryBgDisabled: themeColors.ButtonPrimaryBgDisabled,
+    ButtonPrimaryTextDisabled: themeColors.ButtonPrimaryTextDisabled,
+    ButtonSecondaryBg: themeColors.ButtonSecondaryBg,
+    ButtonSecondaryText: themeColors.ButtonSecondaryText,
+    ButtonSecondaryBgHover: themeColors.ButtonSecondaryBgHover,
+    ButtonSecondaryTextHover: themeColors.ButtonSecondaryTextHover,
+    ButtonSecondaryBgActive: themeColors.ButtonSecondaryBgActive,
+    ButtonSecondaryTextActive: themeColors.ButtonSecondaryTextActive,
+    ButtonSecondaryBgDisabled: themeColors.ButtonSecondaryBgDisabled,
+    ButtonSecondaryTextDisabled: themeColors.ButtonSecondaryTextDisabled,
+    ButtonGhostBg: themeColors.ButtonGhostBg,
+    ButtonGhostText: themeColors.ButtonGhostText,
+    ButtonGhostBgHover: themeColors.ButtonGhostBgHover,
+    ButtonGhostTextHover: themeColors.ButtonGhostTextHover,
+    ButtonGhostBgActive: themeColors.ButtonGhostBgActive,
+    ButtonGhostTextActive: themeColors.ButtonGhostTextActive,
+    ButtonGhostBgDisabled: themeColors.ButtonGhostBgDisabled,
+    ButtonGhostTextDisabled: themeColors.ButtonGhostTextDisabled,
+    ContainerBorder: themeColors.ContainerBorder,
+    DividerColor: themeColors.DividerColor,
+    SelectColor: themeColors.SelectColor,
+    HoverColor: themeColors.HoverColor,
+    ModalMaskBg: themeColors.ModalMaskBg,
+    CardBoxShadow: themeColors.CardBoxShadow,
+    TooltipBg: themeColors.TooltipBg,
+    TooltipText: themeColors.TooltipText,
+};
diff --git a/libs/components/common/src/lib/colors/index.ts b/libs/components/common/src/lib/colors/index.ts
new file mode 100644
index 000000000..3f2f5efc7
--- /dev/null
+++ b/libs/components/common/src/lib/colors/index.ts
@@ -0,0 +1 @@
+export { colors } from './colors';
diff --git a/libs/components/common/src/lib/icon/Add/Add.svg b/libs/components/common/src/lib/icon/Add/Add.svg
new file mode 100644
index 000000000..3be16f00a
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Add/Add.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 20.4C16.6392 20.4 20.4 16.6392 20.4 12C20.4 7.36081 16.6392 3.6 12 3.6C7.36081 3.6 3.6 7.36081 3.6 12C3.6 16.6392 7.36081 20.4 12 20.4ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="#98ACBD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M11 13L11 17H13V13H17V11H13V7H11L11 11H7V13H11Z" fill="#98ACBD"/>
+</svg>
diff --git a/libs/components/common/src/lib/icon/Add/Add.tsx b/libs/components/common/src/lib/icon/Add/Add.tsx
new file mode 100644
index 000000000..18fe4bb57
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Add/Add.tsx
@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export const AddIcon: FC<SvgIconProps> = props => (
+    <SvgIcon {...props}>
+        <g clipPath="url(#a)">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 20.4C16.6392 20.4 20.4 16.6392 20.4 12C20.4 7.36081 16.6392 3.6 12 3.6C7.36081 3.6 3.6 7.36081 3.6 12C3.6 16.6392 7.36081 20.4 12 20.4ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="#98ACBD"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M11 13L11 17H13V13H17V11H13V7H11L11 11H7V13H11Z" fill="#98ACBD"/>
+        </g>
+    </SvgIcon>
+);
diff --git a/libs/components/common/src/lib/icon/Clock/Clock.svg b/libs/components/common/src/lib/icon/Clock/Clock.svg
new file mode 100644
index 000000000..c3581a9eb
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Clock/Clock.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill-rule="evenodd" clip-path="url(#a)" clip-rule="evenodd"><path d="M11.746 2.29C6.13 2.29 1.558 6.86 1.558 12.476c0 5.617 4.571 10.187 10.188 10.187 5.617 0 10.188-4.57 10.188-10.187 0-5.618-4.57-10.188-10.188-10.188Zm0 21.874C5.302 24.164.058 18.921.058 12.477.058 6.032 5.302.79 11.746.79c6.444 0 11.688 5.243 11.688 11.688 0 6.444-5.244 11.687-11.688 11.687Z"/><path d="M15.424 14.55H9.799V6.615h1.5v6.437h4.125v1.5Z"/></g><defs><clipPath id="a"><path d="M0 0H24V24H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/libs/components/common/src/lib/icon/Clock/Clock.tsx b/libs/components/common/src/lib/icon/Clock/Clock.tsx
new file mode 100644
index 000000000..a93a79607
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Clock/Clock.tsx
@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+/**
+ * @deprecated Please use the icon from @toeverything/components/ui. If it does not exist, contact the designer to add。
+ */
+export const ClockIcon: FC<SvgIconProps> = props => (
+    <SvgIcon {...props}>
+        <g fillRule="evenodd" clipPath="url(#a)" clipRule="evenodd">
+            <path d="M11.746 2.29C6.13 2.29 1.558 6.86 1.558 12.476c0 5.617 4.571 10.187 10.188 10.187 5.617 0 10.188-4.57 10.188-10.187 0-5.618-4.57-10.188-10.188-10.188Zm0 21.874C5.302 24.164.058 18.921.058 12.477.058 6.032 5.302.79 11.746.79c6.444 0 11.688 5.243 11.688 11.688 0 6.444-5.244 11.687-11.688 11.687Z" />
+            <path d="M15.424 14.55H9.799V6.615h1.5v6.437h4.125v1.5Z" />
+        </g>
+        <defs>
+            <clipPath id="a">
+                <path d="M0 0H24V24H0z" />
+            </clipPath>
+        </defs>
+    </SvgIcon>
+);
diff --git a/libs/components/common/src/lib/icon/Close/Close.svg b/libs/components/common/src/lib/icon/Close/Close.svg
new file mode 100644
index 000000000..4f92b281d
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Close/Close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M20.468 21.383 2.491 3.404l1.061-1.06L21.53 20.322l-1.06 1.06Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="m3.15 21.516-1.06-1.06L20.067 2.478l1.06 1.06L3.152 21.516Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/common/src/lib/icon/Close/Close.tsx b/libs/components/common/src/lib/icon/Close/Close.tsx
new file mode 100644
index 000000000..7e3e7fd09
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Close/Close.tsx
@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+/**
+ * @deprecated Please use the icon from @toeverything/components/ui. If it does not exist, contact the designer to add。
+ */
+export const CloseIcon: FC<SvgIconProps> = props => (
+    <SvgIcon {...props}>
+        <path
+            fillRule="evenodd"
+            d="M20.468 21.383 2.491 3.404l1.061-1.06L21.53 20.322l-1.06 1.06Z"
+            clipRule="evenodd"
+        />
+        <path
+            fillRule="evenodd"
+            d="m3.15 21.516-1.06-1.06L20.067 2.478l1.06 1.06L3.152 21.516Z"
+            clipRule="evenodd"
+        />
+    </SvgIcon>
+);
diff --git a/libs/components/common/src/lib/icon/CodeBlockInline/CodeBlockInline.svg b/libs/components/common/src/lib/icon/CodeBlockInline/CodeBlockInline.svg
new file mode 100644
index 000000000..35670c3da
--- /dev/null
+++ b/libs/components/common/src/lib/icon/CodeBlockInline/CodeBlockInline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M5.863 17.201.337 11.676l5.526-5.524 1.053 1.053-4.472 4.471 4.472 4.472-1.053 1.053ZM17.813 17.201l-1.053-1.053 4.47-4.472-4.47-4.471 1.053-1.053 5.524 5.524-5.524 5.525ZM10.319 16.26l-1.29-.745 4.848-8.4 1.29.746-4.848 8.398Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/common/src/lib/icon/CodeBlockInline/CodeBlockInline.tsx b/libs/components/common/src/lib/icon/CodeBlockInline/CodeBlockInline.tsx
new file mode 100644
index 000000000..dd55df288
--- /dev/null
+++ b/libs/components/common/src/lib/icon/CodeBlockInline/CodeBlockInline.tsx
@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+/**
+ * @deprecated Please use the icon from @toeverything/components/ui. If it does not exist, contact the designer to add。
+ */
+export const CodeBlockInlineIcon: FC<SvgIconProps> = props => (
+    <SvgIcon {...props}>
+        <path
+            fillRule="evenodd"
+            d="M5.863 17.201.337 11.676l5.526-5.524 1.053 1.053-4.472 4.471 4.472 4.472-1.053 1.053ZM17.813 17.201l-1.053-1.053 4.47-4.472-4.47-4.471 1.053-1.053 5.524 5.524-5.524 5.525ZM10.319 16.26l-1.29-.745 4.848-8.4 1.29.746-4.848 8.398Z"
+            clipRule="evenodd"
+        />
+    </SvgIcon>
+);
diff --git a/libs/components/common/src/lib/icon/Document/Document.svg b/libs/components/common/src/lib/icon/Document/Document.svg
new file mode 100644
index 000000000..24640f0c0
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Document/Document.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M4 4v16h15V8.616L14.055 4H4Zm1.28 1.253h7.879v4.26h4.561v9.234H5.28V5.253Zm9.159.837 2.323 2.169h-2.324v-2.17Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M7.053 8.758h4.162V7.505H7.053v1.253ZM7.053 12.835h8.723V11.58H7.053v1.254ZM7.053 16.836h8.723v-1.253H7.053v1.253Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/common/src/lib/icon/Document/Document.tsx b/libs/components/common/src/lib/icon/Document/Document.tsx
new file mode 100644
index 000000000..b236756a4
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Document/Document.tsx
@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+/**
+ * @deprecated Please use the icon from @toeverything/components/ui. If it does not exist, contact the designer to add。
+ */
+export const DocumentIcon: FC<SvgIconProps> = props => (
+    <SvgIcon {...props}>
+        <path
+            fillRule="evenodd"
+            d="M4 4v16h15V8.616L14.055 4H4Zm1.28 1.253h7.879v4.26h4.561v9.234H5.28V5.253Zm9.159.837 2.323 2.169h-2.324v-2.17Z"
+            clipRule="evenodd"
+        />
+        <path
+            fillRule="evenodd"
+            d="M7.053 8.758h4.162V7.505H7.053v1.253ZM7.053 12.835h8.723V11.58H7.053v1.254ZM7.053 16.836h8.723v-1.253H7.053v1.253Z"
+            clipRule="evenodd"
+        />
+    </SvgIcon>
+);
diff --git a/libs/components/common/src/lib/icon/Filter/Filter.svg b/libs/components/common/src/lib/icon/Filter/Filter.svg
new file mode 100644
index 000000000..a75ddad49
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Filter/Filter.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.6 10.8207V18.6373L13.4 15.8373V10.8208L18.584 4.6H5.41609L10.6 10.8207ZM15 16.5L10.5 21H8.99997V11.3999L3.36684 4.64018C2.82407 3.98886 3.28722 3 4.13506 3H19.865C20.7128 3 21.176 3.98886 20.6332 4.64019L15 11.4001V16.5Z" fill="#98ACBD"/>
+</svg>
diff --git a/libs/components/common/src/lib/icon/Filter/Filter.tsx b/libs/components/common/src/lib/icon/Filter/Filter.tsx
new file mode 100644
index 000000000..c0babdc2b
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Filter/Filter.tsx
@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export const FilterIcon: FC<SvgIconProps> = props => (
+    <SvgIcon {...props}>
+        <g clipPath="url(#a)">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.6 10.8207V18.6373L13.4 15.8373V10.8208L18.584 4.6H5.41609L10.6 10.8207ZM15 16.5L10.5 21H8.99997V11.3999L3.36684 4.64018C2.82407 3.98886 3.28722 3 4.13506 3H19.865C20.7128 3 21.176 3.98886 20.6332 4.64019L15 11.4001V16.5Z" fill="#98ACBD"/>
+        </g>
+    </SvgIcon>
+);
diff --git a/libs/components/common/src/lib/icon/FullScreen/FullScreen.svg b/libs/components/common/src/lib/icon/FullScreen/FullScreen.svg
new file mode 100644
index 000000000..4dba63e61
--- /dev/null
+++ b/libs/components/common/src/lib/icon/FullScreen/FullScreen.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 3C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3H6ZM16.2 6.79995H13V5.19995H18.8V11H17.2V8.0627L13.7174 11.5453L12.586 10.4139L16.2 6.79995ZM10.4808 12.5191L11.6122 13.6504L8.0626 17.2H11V18.8L5.19995 18.8V13H6.79995L6.79995 16.2L10.4808 12.5191Z" fill="#98ACBD"/>
+</svg>
diff --git a/libs/components/common/src/lib/icon/FullScreen/FullScreen.tsx b/libs/components/common/src/lib/icon/FullScreen/FullScreen.tsx
new file mode 100644
index 000000000..7b5588eff
--- /dev/null
+++ b/libs/components/common/src/lib/icon/FullScreen/FullScreen.tsx
@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export const FullScreenIcon: FC<SvgIconProps> = props => (
+    <SvgIcon {...props}>
+        <g clipPath="url(#a)">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M6 3C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3H6ZM16.2 6.79995H13V5.19995H18.8V11H17.2V8.0627L13.7174 11.5453L12.586 10.4139L16.2 6.79995ZM10.4808 12.5191L11.6122 13.6504L8.0626 17.2H11V18.8L5.19995 18.8V13H6.79995L6.79995 16.2L10.4808 12.5191Z" fill="#98ACBD"/>
+        </g>
+    </SvgIcon>
+);
diff --git a/libs/components/common/src/lib/icon/HighlighterDuotone/HighlighterDuotone.svg b/libs/components/common/src/lib/icon/HighlighterDuotone/HighlighterDuotone.svg
new file mode 100644
index 000000000..51b301681
--- /dev/null
+++ b/libs/components/common/src/lib/icon/HighlighterDuotone/HighlighterDuotone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#FF9F65" d="M6 15.004H18V17.003999999999998H6z"/><path fill="#3A4C5C" d="m7.656 16.445 2.908-.825 6.772-5.197a1.905 1.905 0 0 0 .287-2.624 1.938 1.938 0 0 0-1.189-.767 1.698 1.698 0 0 0-1.363.316l-6.75 5.197-1.594 2.624-.7.566.937 1.269.692-.56Zm8.163-8.08a.49.49 0 0 1 .385-.078.65.65 0 0 1 .412.28.612.612 0 0 1-.042.838l-6.57 5.018-.503.144-.524-.717.273-.452 6.57-5.032Z"/></svg>
\ No newline at end of file
diff --git a/libs/components/common/src/lib/icon/HighlighterDuotone/HighlighterDuotone.tsx b/libs/components/common/src/lib/icon/HighlighterDuotone/HighlighterDuotone.tsx
new file mode 100644
index 000000000..284e41d52
--- /dev/null
+++ b/libs/components/common/src/lib/icon/HighlighterDuotone/HighlighterDuotone.tsx
@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+/**
+ * @deprecated Please use the icon from @toeverything/components/ui. If it does not exist, contact the designer to add。
+ */
+export const HighlighterDuotoneIcon: FC<SvgIconProps> = props => (
+    <SvgIcon {...props}>
+        <path
+            style={{ fill: 'var(--color-0)' }}
+            d="M6 15.004H18V17.003999999999998H6z"
+        />
+        <path
+            style={{ fill: 'var(--color-1)' }}
+            d="m7.656 16.445 2.908-.825 6.772-5.197a1.905 1.905 0 0 0 .287-2.624 1.938 1.938 0 0 0-1.189-.767 1.698 1.698 0 0 0-1.363.316l-6.75 5.197-1.594 2.624-.7.566.937 1.269.692-.56Zm8.163-8.08a.49.49 0 0 1 .385-.078.65.65 0 0 1 .412.28.612.612 0 0 1-.042.838l-6.57 5.018-.503.144-.524-.717.273-.452 6.57-5.032Z"
+        />
+    </SvgIcon>
+);
diff --git a/libs/components/common/src/lib/icon/Kanban/Kanban.svg b/libs/components/common/src/lib/icon/Kanban/Kanban.svg
new file mode 100644
index 000000000..e118b4fee
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Kanban/Kanban.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M21 3.79998C21 4.2418 20.6418 4.59998 20.2 4.59998L13.8 4.59997C13.3582 4.59997 13 4.2418 13 3.79997C13 3.35815 13.3582 2.99997 13.8 2.99997L20.2 2.99998C20.6418 2.99998 21 3.35815 21 3.79998Z" fill="#98ACBD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M11 3.79998C11 4.2418 10.6418 4.59998 10.2 4.59998L3.8 4.59998C3.35817 4.59998 3 4.2418 3 3.79997C3 3.35815 3.35817 2.99997 3.8 2.99998L10.2 2.99998C10.6418 2.99998 11 3.35815 11 3.79998Z" fill="#98ACBD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9 8.6H5C4.77909 8.6 4.6 8.77909 4.6 9V19C4.6 19.2209 4.77909 19.4 5 19.4H9C9.22091 19.4 9.4 19.2209 9.4 19V9C9.4 8.77909 9.22091 8.6 9 8.6ZM5 7C3.89543 7 3 7.89543 3 9V19C3 20.1046 3.89543 21 5 21H9C10.1046 21 11 20.1046 11 19V9C11 7.89543 10.1046 7 9 7H5Z" fill="#98ACBD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M19 8.6H15C14.7791 8.6 14.6 8.77909 14.6 9V14C14.6 14.2209 14.7791 14.4 15 14.4H19C19.2209 14.4 19.4 14.2209 19.4 14V9C19.4 8.77909 19.2209 8.6 19 8.6ZM15 7C13.8954 7 13 7.89543 13 9V14C13 15.1046 13.8954 16 15 16H19C20.1046 16 21 15.1046 21 14V9C21 7.89543 20.1046 7 19 7H15Z" fill="#98ACBD"/>
+</svg>
diff --git a/libs/components/common/src/lib/icon/Kanban/Kanban.tsx b/libs/components/common/src/lib/icon/Kanban/Kanban.tsx
new file mode 100644
index 000000000..079ad8792
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Kanban/Kanban.tsx
@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export const KanbanIcon: FC<SvgIconProps> = props => (
+    <SvgIcon {...props}>
+        <g clipPath="url(#a)">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M21 3.79998C21 4.2418 20.6418 4.59998 20.2 4.59998L13.8 4.59997C13.3582 4.59997 13 4.2418 13 3.79997C13 3.35815 13.3582 2.99997 13.8 2.99997L20.2 2.99998C20.6418 2.99998 21 3.35815 21 3.79998Z" fill="#98ACBD"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M11 3.79998C11 4.2418 10.6418 4.59998 10.2 4.59998L3.8 4.59998C3.35817 4.59998 3 4.2418 3 3.79997C3 3.35815 3.35817 2.99997 3.8 2.99998L10.2 2.99998C10.6418 2.99998 11 3.35815 11 3.79998Z" fill="#98ACBD"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M9 8.6H5C4.77909 8.6 4.6 8.77909 4.6 9V19C4.6 19.2209 4.77909 19.4 5 19.4H9C9.22091 19.4 9.4 19.2209 9.4 19V9C9.4 8.77909 9.22091 8.6 9 8.6ZM5 7C3.89543 7 3 7.89543 3 9V19C3 20.1046 3.89543 21 5 21H9C10.1046 21 11 20.1046 11 19V9C11 7.89543 10.1046 7 9 7H5Z" fill="#98ACBD"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M19 8.6H15C14.7791 8.6 14.6 8.77909 14.6 9V14C14.6 14.2209 14.7791 14.4 15 14.4H19C19.2209 14.4 19.4 14.2209 19.4 14V9C19.4 8.77909 19.2209 8.6 19 8.6ZM15 7C13.8954 7 13 7.89543 13 9V14C13 15.1046 13.8954 16 15 16H19C20.1046 16 21 15.1046 21 14V9C21 7.89543 20.1046 7 19 7H15Z" fill="#98ACBD"/>
+        </g>
+    </SvgIcon>
+);
diff --git a/libs/components/common/src/lib/icon/List/List.svg b/libs/components/common/src/lib/icon/List/List.svg
new file mode 100644
index 000000000..14dea8048
--- /dev/null
+++ b/libs/components/common/src/lib/icon/List/List.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.98 10.86v1.78h4.45v-1.78H5.98ZM5.98 15.52v1.78h7.55v-1.78H5.98ZM5.98 6.2v1.78h11.55V6.2H5.98Z"/><path fill-rule="evenodd" d="M1 22.5V1h21.5v21.5H1ZM2.5 21H21V2.5H2.5V21Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/common/src/lib/icon/List/List.tsx b/libs/components/common/src/lib/icon/List/List.tsx
new file mode 100644
index 000000000..20c840fe0
--- /dev/null
+++ b/libs/components/common/src/lib/icon/List/List.tsx
@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+/**
+ * @deprecated Please use the icon from @toeverything/components/ui. If it does not exist, contact the designer to add。
+ */
+export const ListIcon: FC<SvgIconProps> = props => (
+    <SvgIcon {...props}>
+        <path d="M5.98 10.86v1.78h4.45v-1.78H5.98ZM5.98 15.52v1.78h7.55v-1.78H5.98ZM5.98 6.2v1.78h11.55V6.2H5.98Z" />
+        <path
+            fillRule="evenodd"
+            d="M1 22.5V1h21.5v21.5H1ZM2.5 21H21V2.5H2.5V21Z"
+            clipRule="evenodd"
+        />
+    </SvgIcon>
+);
diff --git a/libs/components/common/src/lib/icon/Newpage/Newpage.svg b/libs/components/common/src/lib/icon/Newpage/Newpage.svg
new file mode 100644
index 000000000..4f0c496a2
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Newpage/Newpage.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill-rule="evenodd" clip-path="url(#a)" clip-rule="evenodd"><path d="M18.662 21.85H-.008V2.03h18.67v1.497l-17.17.002v16.82h15.67v-1.896h1.5v3.396Z"/><path d="M17.162 15.984h1.5V5.06h-1.5v10.923Z"/><path d="M12.676 11.272h10.66v-1.5h-10.66v1.5Z"/></g><defs><clipPath id="a"><path d="M0 0H24V24H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/libs/components/common/src/lib/icon/Newpage/Newpage.tsx b/libs/components/common/src/lib/icon/Newpage/Newpage.tsx
new file mode 100644
index 000000000..5dc04ef58
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Newpage/Newpage.tsx
@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+/**
+ * @deprecated Please use the icon from @toeverything/components/ui. If it does not exist, contact the designer to add。
+ */
+export const NewpageIcon: FC<SvgIconProps> = props => (
+    <SvgIcon {...props}>
+        <g fillRule="evenodd" clipPath="url(#a)" clipRule="evenodd">
+            <path d="M18.662 21.85H-.008V2.03h18.67v1.497l-17.17.002v16.82h15.67v-1.896h1.5v3.396Z" />
+            <path d="M17.162 15.984h1.5V5.06h-1.5v10.923Z" />
+            <path d="M12.676 11.272h10.66v-1.5h-10.66v1.5Z" />
+        </g>
+        <defs>
+            <clipPath id="a">
+                <path d="M0 0H24V24H0z" />
+            </clipPath>
+        </defs>
+    </SvgIcon>
+);
diff --git a/libs/components/common/src/lib/icon/Pages/Pages.svg b/libs/components/common/src/lib/icon/Pages/Pages.svg
new file mode 100644
index 000000000..82b0b4372
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Pages/Pages.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M13.233 9.68h1.5V4.583h-1.5V9.68Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M13.45 10.43h5.5v-1.5h-5.5v1.5Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M3.996 21.482H18.58v-11.48l-4.896-4.668H3.996v16.148Zm16.084 1.5H2.496V3.834h11.787l5.797 5.525v13.623Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M17.12 8.324h3.993v-1.5H17.12v1.5ZM15.395 6.696h1.5V2.477h-1.5v4.219Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M22.242 20.877H18.95v-1.5h1.79V7.896l-4.895-4.668H6.159v1.797h-1.5V1.728h11.786l5.797 5.525v13.624Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M6.075 9.527h4.879v-1.5h-4.88v1.5ZM6.075 14.405H16.3v-1.5H6.075v1.5ZM6.075 19.195H16.3v-1.5H6.075v1.5Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/common/src/lib/icon/Pages/Pages.tsx b/libs/components/common/src/lib/icon/Pages/Pages.tsx
new file mode 100644
index 000000000..880681d58
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Pages/Pages.tsx
@@ -0,0 +1,39 @@
+import { FC } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+/**
+ * @deprecated Please use the icon from @toeverything/components/ui. If it does not exist, contact the designer to add。
+ */
+export const PagesIcon: FC<SvgIconProps> = props => (
+    <SvgIcon {...props}>
+        <path
+            fillRule="evenodd"
+            d="M13.233 9.68h1.5V4.583h-1.5V9.68Z"
+            clipRule="evenodd"
+        />
+        <path
+            fillRule="evenodd"
+            d="M13.45 10.43h5.5v-1.5h-5.5v1.5Z"
+            clipRule="evenodd"
+        />
+        <path
+            fillRule="evenodd"
+            d="M3.996 21.482H18.58v-11.48l-4.896-4.668H3.996v16.148Zm16.084 1.5H2.496V3.834h11.787l5.797 5.525v13.623Z"
+            clipRule="evenodd"
+        />
+        <path
+            fillRule="evenodd"
+            d="M17.12 8.324h3.993v-1.5H17.12v1.5ZM15.395 6.696h1.5V2.477h-1.5v4.219Z"
+            clipRule="evenodd"
+        />
+        <path
+            fillRule="evenodd"
+            d="M22.242 20.877H18.95v-1.5h1.79V7.896l-4.895-4.668H6.159v1.797h-1.5V1.728h11.786l5.797 5.525v13.624Z"
+            clipRule="evenodd"
+        />
+        <path
+            fillRule="evenodd"
+            d="M6.075 9.527h4.879v-1.5h-4.88v1.5ZM6.075 14.405H16.3v-1.5H6.075v1.5ZM6.075 19.195H16.3v-1.5H6.075v1.5Z"
+            clipRule="evenodd"
+        />
+    </SvgIcon>
+);
diff --git a/libs/components/common/src/lib/icon/PencilDotDuotone/PencilDotDuotone.svg b/libs/components/common/src/lib/icon/PencilDotDuotone/PencilDotDuotone.svg
new file mode 100644
index 000000000..e902dd3b6
--- /dev/null
+++ b/libs/components/common/src/lib/icon/PencilDotDuotone/PencilDotDuotone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#3A4C5C" d="M17.315 10.76c.417-.382.664-.911.685-1.472a2.101 2.101 0 0 0-.57-1.518 2.25 2.25 0 0 0-1.452-.754 2.04 2.04 0 0 0-1.576.47L9.78 11.084l-1.65 3.104a.933.933 0 0 0 .14 1.07.966.966 0 0 0 .429.291c.206.069.43.069.635 0l3.351-1.183 4.63-3.606Zm-1.948-2.196a.607.607 0 0 1 .446-.122.83.83 0 0 1 .512.276.682.682 0 0 1 0 .956l-4.416 3.42-.586.203-.677-.81.281-.527 4.44-3.396Z"/><path fill="#FF9F65" d="M6.825 17a.818.818 0 0 0 .826-.81c0-.448-.37-.81-.826-.81a.818.818 0 0 0-.825.81c0 .447.37.81.825.81Z"/></svg>
\ No newline at end of file
diff --git a/libs/components/common/src/lib/icon/PencilDotDuotone/PencilDotDuotone.tsx b/libs/components/common/src/lib/icon/PencilDotDuotone/PencilDotDuotone.tsx
new file mode 100644
index 000000000..5712d4890
--- /dev/null
+++ b/libs/components/common/src/lib/icon/PencilDotDuotone/PencilDotDuotone.tsx
@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+/**
+ * @deprecated Please use the icon from @toeverything/components/ui. If it does not exist, contact the designer to add。
+ */
+export const PencilDotDuotoneIcon: FC<SvgIconProps> = props => (
+    <SvgIcon {...props}>
+        <path
+            style={{ fill: 'var(--color-0)' }}
+            d="M17.315 10.76c.417-.382.664-.911.685-1.472a2.101 2.101 0 0 0-.57-1.518 2.25 2.25 0 0 0-1.452-.754 2.04 2.04 0 0 0-1.576.47L9.78 11.084l-1.65 3.104a.933.933 0 0 0 .14 1.07.966.966 0 0 0 .429.291c.206.069.43.069.635 0l3.351-1.183 4.63-3.606Zm-1.948-2.196a.607.607 0 0 1 .446-.122.83.83 0 0 1 .512.276.682.682 0 0 1 0 .956l-4.416 3.42-.586.203-.677-.81.281-.527 4.44-3.396Z"
+        />
+        <path
+            style={{ fill: 'var(--color-1)' }}
+            d="M6.825 17a.818.818 0 0 0 .826-.81c0-.448-.37-.81-.826-.81a.818.818 0 0 0-.825.81c0 .447.37.81.825.81Z"
+        />
+    </SvgIcon>
+);
diff --git a/libs/components/common/src/lib/icon/PencilDuotone/PencilDuotone.svg b/libs/components/common/src/lib/icon/PencilDuotone/PencilDuotone.svg
new file mode 100644
index 000000000..7995c588e
--- /dev/null
+++ b/libs/components/common/src/lib/icon/PencilDuotone/PencilDuotone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#FF9F65" d="M8 14.779H20V15.779H8z" transform="rotate(-40.407 8 14.779)"/><path fill="#3A4C5C" d="M17.357 9.615A2.026 2.026 0 0 0 18 8.204a2.05 2.05 0 0 0-.534-1.457 2.069 2.069 0 0 0-1.354-.733 1.853 1.853 0 0 0-1.46.452l-7.007 6.19-1.538 2.985a.923.923 0 0 0 .123 1.036.945.945 0 0 0 .4.273c.192.067.4.067.592 0l3.13-1.138 7.006-6.197Zm-1.815-2.104a.497.497 0 0 1 .416-.117.708.708 0 0 1 .484.265.652.652 0 0 1 0 .912l-6.806 6.017-.546.203-.63-.78.26-.514 6.822-5.986Z"/></svg>
\ No newline at end of file
diff --git a/libs/components/common/src/lib/icon/PencilDuotone/PencilDuotone.tsx b/libs/components/common/src/lib/icon/PencilDuotone/PencilDuotone.tsx
new file mode 100644
index 000000000..e9fb5a882
--- /dev/null
+++ b/libs/components/common/src/lib/icon/PencilDuotone/PencilDuotone.tsx
@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+/**
+ * @deprecated Please use the icon from @toeverything/components/ui. If it does not exist, contact the designer to add。
+ */
+export const PencilDuotoneIcon: FC<SvgIconProps> = props => (
+    <SvgIcon {...props}>
+        <path
+            style={{ fill: 'var(--color-0)' }}
+            d="M8 14.779H20V15.779H8z"
+            transform="rotate(-40.407 8 14.779)"
+        />
+        <path
+            style={{ fill: 'var(--color-1)' }}
+            d="M17.357 9.615A2.026 2.026 0 0 0 18 8.204a2.05 2.05 0 0 0-.534-1.457 2.069 2.069 0 0 0-1.354-.733 1.853 1.853 0 0 0-1.46.452l-7.007 6.19-1.538 2.985a.923.923 0 0 0 .123 1.036.945.945 0 0 0 .4.273c.192.067.4.067.592 0l3.13-1.138 7.006-6.197Zm-1.815-2.104a.497.497 0 0 1 .416-.117.708.708 0 0 1 .484.265.652.652 0 0 1 0 .912l-6.806 6.017-.546.203-.63-.78.26-.514 6.822-5.986Z"
+        />
+    </SvgIcon>
+);
diff --git a/libs/components/common/src/lib/icon/Sorter/Sorter.svg b/libs/components/common/src/lib/icon/Sorter/Sorter.svg
new file mode 100644
index 000000000..3e61e53c2
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Sorter/Sorter.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9 4.6H5C4.77909 4.6 4.6 4.77909 4.6 5V9C4.6 9.22091 4.77909 9.4 5 9.4H9C9.22091 9.4 9.4 9.22091 9.4 9V5C9.4 4.77909 9.22091 4.6 9 4.6ZM5 3C3.89543 3 3 3.89543 3 5V9C3 10.1046 3.89543 11 5 11H9C10.1046 11 11 10.1046 11 9V5C11 3.89543 10.1046 3 9 3H5Z" fill="#98ACBD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 13C3.89543 13 3 13.8954 3 15V19C3 20.1046 3.89543 21 5 21H9C10.1046 21 11 20.1046 11 19V15C11 13.8954 10.1046 13 9 13H5ZM6.16661 19.3819L9.92421 15.6243L9.07568 14.7758L6.16661 17.6848L4.92421 16.4424L4.07568 17.291L6.16661 19.3819Z" fill="#98ACBD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M18 17.8687L20.4343 15.4343L21.5657 16.5657L17 21.1314L12.4343 16.5657L13.5657 15.4343L16 17.8686L16 3H18L18 17.8687Z" fill="#98ACBD"/>
+</svg>
diff --git a/libs/components/common/src/lib/icon/Sorter/Sorter.tsx b/libs/components/common/src/lib/icon/Sorter/Sorter.tsx
new file mode 100644
index 000000000..56b46155d
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Sorter/Sorter.tsx
@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export const SorterIcon: FC<SvgIconProps> = props => (
+    <SvgIcon {...props}>
+        <g clipPath="url(#a)">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M9 4.6H5C4.77909 4.6 4.6 4.77909 4.6 5V9C4.6 9.22091 4.77909 9.4 5 9.4H9C9.22091 9.4 9.4 9.22091 9.4 9V5C9.4 4.77909 9.22091 4.6 9 4.6ZM5 3C3.89543 3 3 3.89543 3 5V9C3 10.1046 3.89543 11 5 11H9C10.1046 11 11 10.1046 11 9V5C11 3.89543 10.1046 3 9 3H5Z" fill="#98ACBD"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M5 13C3.89543 13 3 13.8954 3 15V19C3 20.1046 3.89543 21 5 21H9C10.1046 21 11 20.1046 11 19V15C11 13.8954 10.1046 13 9 13H5ZM6.16661 19.3819L9.92421 15.6243L9.07568 14.7758L6.16661 17.6848L4.92421 16.4424L4.07568 17.291L6.16661 19.3819Z" fill="#98ACBD"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M18 17.8687L20.4343 15.4343L21.5657 16.5657L17 21.1314L12.4343 16.5657L13.5657 15.4343L16 17.8686L16 3H18L18 17.8687Z" fill="#98ACBD"/>
+        </g>
+    </SvgIcon>
+);
diff --git a/libs/components/common/src/lib/icon/Space/Space.svg b/libs/components/common/src/lib/icon/Space/Space.svg
new file mode 100644
index 000000000..40fb22e93
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Space/Space.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g clip-path="url(#a)"><path fill-rule="evenodd" d="M12.001 5.211a6.67 6.67 0 0 0-6.663 6.663 6.67 6.67 0 0 0 6.663 6.663 6.67 6.67 0 0 0 6.663-6.663A6.67 6.67 0 0 0 12 5.211Zm0 14.537c-4.342 0-7.874-3.532-7.874-7.874S7.659 4 12.001 4s7.874 3.532 7.874 7.874-3.532 7.874-7.874 7.874Z" clip-rule="evenodd"/><path stroke-width=".3" d="M12.001 5.211a6.67 6.67 0 0 0-6.663 6.663 6.67 6.67 0 0 0 6.663 6.663 6.67 6.67 0 0 0 6.663-6.663A6.67 6.67 0 0 0 12 5.211m0 14.537c-4.342 0-7.874-3.532-7.874-7.874S7.659 4 12.001 4s7.874 3.532 7.874 7.874-3.532 7.874-7.874 7.874"/><path fill-rule="evenodd" d="M3.636 16.083c-1.878 0-3.366-.326-3.603-1.304-.26-1.065 1.065-1.955 2.085-2.533a.605.605 0 1 1 .596 1.054c-1.403.795-1.501 1.218-1.501 1.222.392.513 4.49.712 11.208-.918 6.704-1.629 10.255-3.678 10.369-4.373-.046-.004-.413-.354-2.399-.357a.605.605 0 0 1 0-1.212h.002c2.225.004 3.362.42 3.576 1.307.697 2.873-10.774 5.693-11.263 5.812-.322.078-5.429 1.302-9.07 1.302Z" clip-rule="evenodd"/><path stroke-width=".3" d="M3.636 16.083c-1.878 0-3.366-.326-3.603-1.304-.26-1.065 1.065-1.955 2.085-2.533a.605.605 0 1 1 .596 1.054c-1.403.795-1.501 1.218-1.501 1.222.392.513 4.49.712 11.208-.918 6.704-1.629 10.255-3.678 10.369-4.373-.046-.004-.413-.354-2.399-.357a.605.605 0 0 1 0-1.212h.002c2.225.004 3.362.42 3.576 1.307.697 2.873-10.774 5.693-11.263 5.812-.322.078-5.429 1.302-9.07 1.302"/></g><defs><clipPath id="a"><path d="M0 0H24V24H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/libs/components/common/src/lib/icon/Space/Space.tsx b/libs/components/common/src/lib/icon/Space/Space.tsx
new file mode 100644
index 000000000..3758af834
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Space/Space.tsx
@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+/**
+ * @deprecated Please use the icon from @toeverything/components/ui. If it does not exist, contact the designer to add。
+ */
+export const SpaceIcon: FC<SvgIconProps> = props => (
+    <SvgIcon {...props}>
+        <g clipPath="url(#a)">
+            <path
+                fillRule="evenodd"
+                d="M12.001 5.211a6.67 6.67 0 0 0-6.663 6.663 6.67 6.67 0 0 0 6.663 6.663 6.67 6.67 0 0 0 6.663-6.663A6.67 6.67 0 0 0 12 5.211Zm0 14.537c-4.342 0-7.874-3.532-7.874-7.874S7.659 4 12.001 4s7.874 3.532 7.874 7.874-3.532 7.874-7.874 7.874Z"
+                clipRule="evenodd"
+            />
+            <path
+                strokeWidth={0.3}
+                d="M12.001 5.211a6.67 6.67 0 0 0-6.663 6.663 6.67 6.67 0 0 0 6.663 6.663 6.67 6.67 0 0 0 6.663-6.663A6.67 6.67 0 0 0 12 5.211m0 14.537c-4.342 0-7.874-3.532-7.874-7.874S7.659 4 12.001 4s7.874 3.532 7.874 7.874-3.532 7.874-7.874 7.874"
+            />
+            <path
+                fillRule="evenodd"
+                d="M3.636 16.083c-1.878 0-3.366-.326-3.603-1.304-.26-1.065 1.065-1.955 2.085-2.533a.605.605 0 1 1 .596 1.054c-1.403.795-1.501 1.218-1.501 1.222.392.513 4.49.712 11.208-.918 6.704-1.629 10.255-3.678 10.369-4.373-.046-.004-.413-.354-2.399-.357a.605.605 0 0 1 0-1.212h.002c2.225.004 3.362.42 3.576 1.307.697 2.873-10.774 5.693-11.263 5.812-.322.078-5.429 1.302-9.07 1.302Z"
+                clipRule="evenodd"
+            />
+            <path
+                strokeWidth={0.3}
+                d="M3.636 16.083c-1.878 0-3.366-.326-3.603-1.304-.26-1.065 1.065-1.955 2.085-2.533a.605.605 0 1 1 .596 1.054c-1.403.795-1.501 1.218-1.501 1.222.392.513 4.49.712 11.208-.918 6.704-1.629 10.255-3.678 10.369-4.373-.046-.004-.413-.354-2.399-.357a.605.605 0 0 1 0-1.212h.002c2.225.004 3.362.42 3.576 1.307.697 2.873-10.774 5.693-11.263 5.812-.322.078-5.429 1.302-9.07 1.302"
+            />
+        </g>
+        <defs>
+            <clipPath id="a">
+                <path d="M0 0H24V24H0z" />
+            </clipPath>
+        </defs>
+    </SvgIcon>
+);
diff --git a/libs/components/common/src/lib/icon/Table/Table.svg b/libs/components/common/src/lib/icon/Table/Table.svg
new file mode 100644
index 000000000..8f995c5fe
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Table/Table.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 4.6H18C18.7732 4.6 19.4 5.2268 19.4 6V7.99998L4.6 7.99997V6C4.6 5.2268 5.2268 4.6 6 4.6ZM9.6001 9.59997L19.4 9.59998V13.8L9.6001 13.8V9.59997ZM8.0001 13.8V9.59997L4.6 9.59997V13.8H8.0001ZM4.6 15.4H8.0001V19.4H6C5.2268 19.4 4.6 18.7732 4.6 18V15.4ZM9.6001 15.4L19.4 15.4V18C19.4 18.7732 18.7732 19.4 18 19.4H9.6001V15.4ZM3 6C3 4.34315 4.34315 3 6 3H18C19.6569 3 21 4.34315 21 6V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V6Z" fill="#98ACBD"/>
+</svg>
diff --git a/libs/components/common/src/lib/icon/Table/Table.tsx b/libs/components/common/src/lib/icon/Table/Table.tsx
new file mode 100644
index 000000000..47e8637d8
--- /dev/null
+++ b/libs/components/common/src/lib/icon/Table/Table.tsx
@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export const TableIcon: FC<SvgIconProps> = props => (
+    <SvgIcon {...props}>
+        <g clipPath="url(#a)">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M6 4.6H18C18.7732 4.6 19.4 5.2268 19.4 6V7.99998L4.6 7.99997V6C4.6 5.2268 5.2268 4.6 6 4.6ZM9.6001 9.59997L19.4 9.59998V13.8L9.6001 13.8V9.59997ZM8.0001 13.8V9.59997L4.6 9.59997V13.8H8.0001ZM4.6 15.4H8.0001V19.4H6C5.2268 19.4 4.6 18.7732 4.6 18V15.4ZM9.6001 15.4L19.4 15.4V18C19.4 18.7732 18.7732 19.4 18 19.4H9.6001V15.4ZM3 6C3 4.34315 4.34315 3 6 3H18C19.6569 3 21 4.34315 21 6V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V6Z" fill="#98ACBD"/>
+        </g>
+    </SvgIcon>
+);
diff --git a/libs/components/common/src/lib/icon/TodoList/TodoList.svg b/libs/components/common/src/lib/icon/TodoList/TodoList.svg
new file mode 100644
index 000000000..ba3443685
--- /dev/null
+++ b/libs/components/common/src/lib/icon/TodoList/TodoList.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10 4.19999L21 4.19999L21 5.79999L10 5.79999L10 4.19999Z" fill="#98ACBD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10 18.2L21 18.2L21 19.8L10 19.8L10 18.2Z" fill="#98ACBD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10 11.2L21 11.2L21 12.8L10 12.8L10 11.2Z" fill="#98ACBD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.57574 2.77576L8.42426 3.62428L5 7.04855L3.07574 5.12428L3.92426 4.27576L5 5.35149L7.57574 2.77576Z" fill="#98ACBD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.57574 16.7758L8.42426 17.6243L5 21.0485L3.07574 19.1243L3.92426 18.2758L5 19.3515L7.57574 16.7758Z" fill="#98ACBD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.57574 9.77576L8.42426 10.6243L5 14.0485L3.07574 12.1243L3.92426 11.2758L5 12.3515L7.57574 9.77576Z" fill="#98ACBD"/>
+</svg>
diff --git a/libs/components/common/src/lib/icon/TodoList/TodoList.tsx b/libs/components/common/src/lib/icon/TodoList/TodoList.tsx
new file mode 100644
index 000000000..281cc415e
--- /dev/null
+++ b/libs/components/common/src/lib/icon/TodoList/TodoList.tsx
@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export const TodoListIcon: FC<SvgIconProps> = props => (
+    <SvgIcon {...props}>
+        <g clipPath="url(#a)">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M10 4.19999L21 4.19999L21 5.79999L10 5.79999L10 4.19999Z" fill="#98ACBD"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M10 18.2L21 18.2L21 19.8L10 19.8L10 18.2Z" fill="#98ACBD"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M10 11.2L21 11.2L21 12.8L10 12.8L10 11.2Z" fill="#98ACBD"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.57574 2.77576L8.42426 3.62428L5 7.04855L3.07574 5.12428L3.92426 4.27576L5 5.35149L7.57574 2.77576Z" fill="#98ACBD"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.57574 16.7758L8.42426 17.6243L5 21.0485L3.07574 19.1243L3.92426 18.2758L5 19.3515L7.57574 16.7758Z" fill="#98ACBD"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.57574 9.77576L8.42426 10.6243L5 14.0485L3.07574 12.1243L3.92426 11.2758L5 12.3515L7.57574 9.77576Z" fill="#98ACBD"/>
+        </g>
+    </SvgIcon>
+);
diff --git a/libs/components/common/src/lib/icon/UnGroup/UnGroup.svg b/libs/components/common/src/lib/icon/UnGroup/UnGroup.svg
new file mode 100644
index 000000000..8ca09ce18
--- /dev/null
+++ b/libs/components/common/src/lib/icon/UnGroup/UnGroup.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4 3C3.44772 3 3 3.44772 3 4V7C3 7.55228 3.44772 8 4 8H4.70005L4.70005 16H4C3.44772 16 3 16.4477 3 17V20C3 20.5523 3.44772 21 4 21H7C7.55229 21 8 20.5523 8 20L8 19.3H16V20C16 20.5523 16.4477 21 17 21H20C20.5523 21 21 20.5523 21 20V17C21 16.4477 20.5523 16 20 16H19.3V8H20C20.5523 8 21 7.55228 21 7V4C21 3.44772 20.5523 3 20 3H17C16.4477 3 16 3.44772 16 4V4.70005L8 4.70005V4C8 3.93096 7.993 3.86356 7.97968 3.79847C7.88644 3.34278 7.48325 3 7 3H4ZM8 6.30005V7C8 7.55228 7.55228 8 7 8H6.30005L6.30005 16H7C7.55229 16 8 16.4477 8 17L8 17.7H16V17C16 16.4477 16.4477 16 17 16H17.7L17.7 8H17C16.4477 8 16 7.55228 16 7V6.30005L8 6.30005Z" fill="#98ACBD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9 8C8.44772 8 8 8.44772 8 9V12.3333C8 12.8856 8.44772 13.3333 9 13.3333H10.6667V15C10.6667 15.5523 11.1144 16 11.6667 16H15C15.5523 16 16 15.5523 16 15V11.6667C16 11.1144 15.5523 10.6667 15 10.6667H13.3333V9C13.3333 8.44772 12.8856 8 12.3333 8H9Z" fill="#98ACBD"/>
+</svg>
diff --git a/libs/components/common/src/lib/icon/UnGroup/UnGroup.tsx b/libs/components/common/src/lib/icon/UnGroup/UnGroup.tsx
new file mode 100644
index 000000000..fd4a1df72
--- /dev/null
+++ b/libs/components/common/src/lib/icon/UnGroup/UnGroup.tsx
@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export const UnGroupIcon: FC<SvgIconProps> = props => (
+    <SvgIcon {...props}>
+        <g clipPath="url(#a)">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M4 3C3.44772 3 3 3.44772 3 4V7C3 7.55228 3.44772 8 4 8H4.70005L4.70005 16H4C3.44772 16 3 16.4477 3 17V20C3 20.5523 3.44772 21 4 21H7C7.55229 21 8 20.5523 8 20L8 19.3H16V20C16 20.5523 16.4477 21 17 21H20C20.5523 21 21 20.5523 21 20V17C21 16.4477 20.5523 16 20 16H19.3V8H20C20.5523 8 21 7.55228 21 7V4C21 3.44772 20.5523 3 20 3H17C16.4477 3 16 3.44772 16 4V4.70005L8 4.70005V4C8 3.93096 7.993 3.86356 7.97968 3.79847C7.88644 3.34278 7.48325 3 7 3H4ZM8 6.30005V7C8 7.55228 7.55228 8 7 8H6.30005L6.30005 16H7C7.55229 16 8 16.4477 8 17L8 17.7H16V17C16 16.4477 16.4477 16 17 16H17.7L17.7 8H17C16.4477 8 16 7.55228 16 7V6.30005L8 6.30005Z" fill="#98ACBD"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M9 8C8.44772 8 8 8.44772 8 9V12.3333C8 12.8856 8.44772 13.3333 9 13.3333H10.6667V15C10.6667 15.5523 11.1144 16 11.6667 16H15C15.5523 16 16 15.5523 16 15V11.6667C16 11.1144 15.5523 10.6667 15 10.6667H13.3333V9C13.3333 8.44772 12.8856 8 12.3333 8H9Z" fill="#98ACBD"/>
+        </g>
+    </SvgIcon>
+);
diff --git a/libs/components/common/src/lib/icon/ViewSidebar/ViewSidebar.svg b/libs/components/common/src/lib/icon/ViewSidebar/ViewSidebar.svg
new file mode 100644
index 000000000..55c85815d
--- /dev/null
+++ b/libs/components/common/src/lib/icon/ViewSidebar/ViewSidebar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g clip-path="url(#a)"><path d="M2 22.5V1h21.5v21.5H2ZM3.66 2.662v18.177h18.177V2.662H3.661Z"/><path d="M17.842 21.369V1h-1.698v20.369h1.698Z"/></g><defs><clipPath id="a"><path d="M0 0H24V24H0z" transform="rotate(90 12 12)"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/libs/components/common/src/lib/icon/ViewSidebar/ViewSidebar.tsx b/libs/components/common/src/lib/icon/ViewSidebar/ViewSidebar.tsx
new file mode 100644
index 000000000..ab04984f4
--- /dev/null
+++ b/libs/components/common/src/lib/icon/ViewSidebar/ViewSidebar.tsx
@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+/**
+ * @deprecated Please use the icon from @toeverything/components/ui. If it does not exist, contact the designer to add。
+ */
+export const ViewSidebarIcon: FC<SvgIconProps> = props => (
+    <SvgIcon {...props}>
+        <g clipPath="url(#a)">
+            <path d="M2 22.5V1h21.5v21.5H2ZM3.66 2.662v18.177h18.177V2.662H3.661Z" />
+            <path d="M17.842 21.369V1h-1.698v20.369h1.698Z" />
+        </g>
+        <defs>
+            <clipPath id="a">
+                <path d="M0 0H24V24H0z" transform="rotate(90 12 12)" />
+            </clipPath>
+        </defs>
+    </SvgIcon>
+);
diff --git a/libs/components/common/src/lib/icon/index.ts b/libs/components/common/src/lib/icon/index.ts
new file mode 100644
index 000000000..9025cbd2f
--- /dev/null
+++ b/libs/components/common/src/lib/icon/index.ts
@@ -0,0 +1,21 @@
+export const timestamp = 1650018884367;
+export * from './CodeBlockInline/CodeBlockInline';
+export * from './Newpage/Newpage';
+export * from './Pages/Pages';
+export * from './Clock/Clock';
+export * from './Space/Space';
+export * from './Close/Close';
+export * from './ViewSidebar/ViewSidebar';
+export * from './List/List';
+export * from './Document/Document';
+export * from './HighlighterDuotone/HighlighterDuotone';
+export * from './PencilDotDuotone/PencilDotDuotone';
+export * from './PencilDuotone/PencilDuotone';
+export * from './TodoList/TodoList';
+export * from './Kanban/Kanban';
+export * from './Table/Table';
+export * from './Add/Add';
+export * from './Filter/Filter';
+export * from './Sorter/Sorter';
+export * from './FullScreen/FullScreen';
+export * from './UnGroup/UnGroup';
diff --git a/libs/components/common/src/lib/index.ts b/libs/components/common/src/lib/index.ts
new file mode 100644
index 000000000..928992e1c
--- /dev/null
+++ b/libs/components/common/src/lib/index.ts
@@ -0,0 +1,51 @@
+import { BaseEditor } from 'slate';
+import { ReactEditor } from 'slate-react';
+import { LinkElement } from './text/plugins/link';
+import { RefLinkElement } from './text/plugins/reflink';
+
+export type CustomText = { text: string };
+export type CustomElement =
+    | { type: string; children: CustomElement[] }
+    | CustomText
+    | LinkElement
+    | RefLinkElement;
+declare module 'slate' {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}
+
+export { BlockPreview, StyledBlockPreview } from './block-preview';
+export { default as Button } from './button';
+export type { CommonListItem } from './list';
+export { CommonList, BackLink, commonListContainer } from './list';
+export * from './Logo';
+export { default as Toolbar } from './toolbar';
+export { CollapsibleTitle } from './collapsible-title';
+
+export * from './text';
+
+export {
+    NewpageIcon,
+    ClockIcon,
+    ViewSidebarIcon,
+    ListIcon,
+    SpaceIcon,
+    PencilDotDuotoneIcon,
+    PencilDuotoneIcon,
+    HighlighterDuotoneIcon,
+    CodeBlockInlineIcon,
+    PagesIcon,
+    CloseIcon,
+    DocumentIcon,
+    TodoListIcon,
+    KanbanIcon,
+    TableIcon,
+    AddIcon,
+    FilterIcon,
+    SorterIcon,
+    FullScreenIcon,
+    UnGroupIcon,
+} from './icon';
diff --git a/libs/components/common/src/lib/list/index.tsx b/libs/components/common/src/lib/list/index.tsx
new file mode 100644
index 000000000..1820d4665
--- /dev/null
+++ b/libs/components/common/src/lib/list/index.tsx
@@ -0,0 +1,202 @@
+import { FC, useState } from 'react';
+import { useNavigate, useParams } from 'react-router';
+import clsx from 'clsx';
+import style9 from 'style9';
+
+import {
+    BaseButton,
+    ListButton,
+    MuiClickAwayListener,
+    Popover,
+    SvgIconProps,
+} from '@toeverything/components/ui';
+// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
+import { BlockSearchItem } from '@toeverything/datasource/jwt';
+
+import { BlockPreview } from '../block-preview';
+import { BackwardUndoIcon } from '@toeverything/components/icons';
+
+export const commonListContainer = 'commonListContainer';
+import { useFlag } from '@toeverything/datasource/feature-flags';
+
+type Content = {
+    id: string;
+    content: string;
+    icon: FC<SvgIconProps>;
+};
+
+export type CommonListItem = {
+    divider?: string;
+    content?: Content;
+    block?: BlockSearchItem;
+};
+
+type MenuItemsProps = {
+    className?: string;
+    items: CommonListItem[];
+    currentItem: string;
+    setCurrentItem: (itemType: string) => void;
+    onSelected?: (item: string) => void;
+};
+
+export const CommonList = (props: MenuItemsProps) => {
+    const { items, currentItem, setCurrentItem, onSelected } = props;
+    // const JSONUnsupportedBlockTypes = useFlag('JSONUnsupportedBlockTypes', [
+    //     'page',
+    // ]);
+    // TODO Insert bidirectional link to be developed
+    const JSONUnsupportedBlockTypes = ['page'];
+    let usedItems = items.filter(item => {
+        return !JSONUnsupportedBlockTypes.includes(item?.content?.id);
+    });
+    return (
+        <div className={clsx(styles('root_container'), props.className)}>
+            <div
+                className={clsx([
+                    styles('scroll_container'),
+                    commonListContainer,
+                ])}
+            >
+                {usedItems?.length ? (
+                    usedItems.map((item, idx) => {
+                        if (item.block) {
+                            return (
+                                <BlockPreview
+                                    className={clsx(
+                                        styles('button'),
+                                        `item-${item.block.id}`
+                                    )}
+                                    key={item.block.id}
+                                    block={item.block}
+                                    onClick={() => onSelected?.(item.block.id)}
+                                    onMouseOver={() =>
+                                        setCurrentItem?.(item.block.id)
+                                    }
+                                    hover={currentItem === item.block.id}
+                                />
+                            );
+                        } else if (item.content) {
+                            const { id, content, icon } = item.content;
+                            return (
+                                <ListButton
+                                    key={id}
+                                    className={clsx(
+                                        styles('button'),
+                                        `item-${id}`
+                                    )}
+                                    onClick={() => onSelected?.(id)}
+                                    onMouseOver={() => setCurrentItem?.(id)}
+                                    hover={currentItem === id}
+                                    content={content}
+                                    icon={icon}
+                                />
+                            );
+                        } else if (item.divider) {
+                            return (
+                                <hr
+                                    className={styles('separator')}
+                                    key={`${item.divider}${idx}-separator`}
+                                    tabIndex={-1}
+                                />
+                            );
+                        } else {
+                            return null;
+                        }
+                    })
+                ) : (
+                    <span className={styles('empty')}>no search result</span>
+                )}
+            </div>
+        </div>
+    );
+};
+
+type BackLinkProps = {
+    blocks?: BlockSearchItem[];
+    workspaceId: string;
+};
+
+export const BackLink = (props: BackLinkProps) => {
+    const { blocks } = props;
+
+    const navigate = useNavigate();
+
+    const [item, set_item] = useState<string>();
+    const [visible, set_visible] = useState(false);
+
+    return blocks?.length ? (
+        <MuiClickAwayListener onClickAway={() => set_visible(false)}>
+            <Popover
+                defaultVisible={visible}
+                placement="bottom-start"
+                content={
+                    <CommonList
+                        items={blocks.map(block => ({ block }))}
+                        currentItem={item}
+                        setCurrentItem={set_item}
+                        onSelected={id =>
+                            navigate(`/${props.workspaceId}/${id}`)
+                        }
+                    />
+                }
+            >
+                <BaseButton
+                    className={styles('backlinks_button')}
+                    onClick={() => set_visible(bool => !bool)}
+                >
+                    <BackwardUndoIcon sx={{ width: 20, height: 20 }} />
+                    <span>Backlinks ({blocks.length})</span>
+                </BaseButton>
+            </Popover>
+        </MuiClickAwayListener>
+    ) : null;
+};
+
+const styles = style9.create({
+    root_container: {
+        width: '228px',
+        overflowX: 'hidden',
+        overflowY: 'hidden',
+        marginTop: '6px',
+        marginLeft: '5px',
+    },
+    scroll_container: {
+        width: 'calc(100% + 25px)',
+        height: '100%',
+        overflowY: 'scroll',
+    },
+    button: {
+        width: '220px',
+        borderRadius: '5px!important',
+        marginTop: '0px!important',
+    },
+    empty: {
+        display: 'inline-flex',
+        width: '220px',
+        height: '100%',
+        justifyContent: 'center',
+        alignItems: 'center',
+        fontSize: '15px',
+        lineHeight: '17px',
+        textAlign: 'justify',
+        letterSpacing: '1.5px',
+        color: '#4C6275',
+    },
+    separator: {
+        height: '1px',
+        border: 0,
+        marginTop: '8px',
+        marginBottom: '8px',
+        backgroundColor: 'rgba(152, 172, 189, 0.6)',
+        borderColor: 'rgba(152, 172, 189, 0.6)',
+    },
+    backlinks_container: {
+        borderRadius: '10px',
+        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+        backgroundColor: '#fff',
+    },
+    backlinks_button: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+});
diff --git a/libs/components/common/src/lib/text/EditableText.tsx b/libs/components/common/src/lib/text/EditableText.tsx
new file mode 100644
index 000000000..8970f6a00
--- /dev/null
+++ b/libs/components/common/src/lib/text/EditableText.tsx
@@ -0,0 +1,940 @@
+/* eslint-disable max-lines */
+import React, {
+    KeyboardEvent,
+    KeyboardEventHandler,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+    forwardRef,
+    MouseEventHandler,
+    useLayoutEffect,
+    CSSProperties,
+    MouseEvent,
+    DragEvent,
+} from 'react';
+import isHotkey from 'is-hotkey';
+import {
+    createEditor,
+    Descendant,
+    Range,
+    Element as SlateElement,
+    Editor,
+    Transforms,
+    Node,
+    Path,
+} from 'slate';
+import {
+    Editable,
+    withReact,
+    Slate,
+    ReactEditor,
+    useSlateStatic,
+} from 'slate-react';
+
+import { ErrorBoundary, isEqual, uaHelper } from '@toeverything/utils';
+
+import { Contents, SlateUtils, isSelectAll } from './slate-utils';
+import {
+    getCommentsIdsOnTextNode,
+    getExtraPropertiesFromEditorOutmostNode,
+    isInterceptCharacter,
+    matchMarkdown,
+} from './utils';
+import { HOTKEYS, INLINE_STYLES } from './constants';
+import { LinkComponent, LinkModal, withLinks, wrapLink } from './plugins/link';
+import { withDate, InlineDate } from './plugins/date';
+import { CustomElement } from '..';
+import isUrl from 'is-url';
+import { InlineRefLink } from './plugins/reflink';
+import { TextWithComments } from './element-leaf/TextWithComments';
+
+export interface TextProps {
+    /** read only */
+    readonly?: boolean;
+    /** current value */
+    currentValue?: CustomElement[];
+    /** extra props at editor top level; it's stored at the parent of currentValue */
+    textStyle?: Record<string, unknown>;
+    /** auto focus */
+    autoFocus?: boolean;
+    /** id */
+    id?: string;
+    /** keyDown event, return true, cancel the default behavior */
+    handleKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => boolean | undefined;
+    /** enter event, return true, cancel the default behavior */
+    handleEnter?: ({
+        splitContents,
+        isShiftKey,
+    }: {
+        splitContents: Contents;
+        isShiftKey: boolean;
+    }) => Promise<boolean | undefined> | boolean | undefined;
+    /** select event */
+    handleSelectAll?: () => void;
+    /** select event */
+    handleSelect?: (selection: Range) => void;
+    /** After text change event, generally used to synchronize model */
+    handleChange?: (
+        value: SlateElement[],
+        textStyle?: Record<string, unknown>
+    ) => void;
+    /** tab event, return true, cancel the default behavior */
+    handleTab?: ({
+        isShiftKey,
+    }: {
+        isShiftKey: boolean;
+    }) => boolean | undefined | Promise<boolean | undefined>;
+    /** Backspace event */
+    handleBackSpace?: ({
+        isCollAndStart,
+    }: {
+        isCollAndStart: boolean;
+    }) => boolean | undefined | Promise<boolean | undefined>;
+    /** Whether markdown is supported */
+    supportMarkdown?: boolean;
+    /** Whether to support inline linking */
+    supportLink?: boolean;
+    /** Whether to show placeholder all the time */
+    alwaysShowPlaceholder?: boolean;
+    /** placeholder */
+    placeholder?: string;
+    /** Convert Block API */
+    handleConvert?: (type: string, options?: Record<string, unknown>) => void;
+    /** undo */
+    handleUndo?: () => void;
+    /** redo */
+    handleRedo?: () => void;
+    /** up button */
+    handleUp?: (event: KeyboardEvent) => boolean | undefined | Promise<boolean>;
+    /** down button */
+    handleDown?: (
+        event: KeyboardEvent
+    ) => boolean | undefined | Promise<boolean>;
+    /** left button */
+    handleLeft?: () => boolean | undefined | Promise<boolean>;
+    /** right button */
+    handleRight?: () => boolean | undefined | Promise<boolean>;
+    /** press / */
+    handleSlash?: () => void;
+    /** Click event, fired after select */
+    handleClick?: MouseEventHandler<HTMLDivElement>;
+    handleMouseDown?: MouseEventHandler<HTMLDivElement>;
+    /** No need to synchronize the model's change event */
+    handleTextChange?: (value: SlateElement[]) => void;
+    /** esc */
+    handleEsc?: () => void;
+    /** focus */
+    handleFocus?: (selection: Range) => void;
+    handleBlur?: (selection: Range) => void;
+    /** hide inlinemenu */
+    hideInlineMenu?: () => void;
+    /** Whether as a pure controlled component */
+    isControlled?: boolean;
+    /** The dataset that needs to be added to the text-paragraph dom is initialized and used, and changes are not supported */
+    paragraphDataSets?: string[];
+    /** class */
+    className?: string;
+    style?: CSSProperties;
+    /** if return true prevent the default slate copy */
+    handleCopy?: () => boolean | undefined | Promise<boolean>;
+}
+type ExtendedTextUtils = SlateUtils & {
+    setLinkModalVisible: (visible: boolean) => void;
+};
+
+// @refresh reset
+export const Text = forwardRef<ExtendedTextUtils, TextProps>((props, ref) => {
+    const {
+        currentValue = [],
+        textStyle = {},
+        readonly = false,
+        id,
+        handleKeyDown,
+        handleEnter,
+        handleSelectAll,
+        handleSelect,
+        handleChange,
+        handleTab,
+        handleBackSpace,
+        handleConvert,
+        handleRedo,
+        handleUndo,
+        handleUp,
+        handleLeft,
+        handleRight,
+        handleTextChange,
+        handleDown,
+        handleClick,
+        handleMouseDown,
+        handleEsc,
+        handleSlash,
+        handleFocus,
+        handleBlur,
+        handleCopy,
+        hideInlineMenu,
+        className,
+        supportMarkdown = true,
+        supportLink = true,
+        alwaysShowPlaceholder = false,
+        placeholder = '',
+        autoFocus = false,
+        isControlled = false,
+        paragraphDataSets = [],
+        style,
+    } = props;
+
+    /** forceupdate */
+    const [updateTimes, forceUpdate] = useState<number>(0);
+
+    /** placeholder */
+    const [showPlaceholder, setShowPlaceholder] = useState<boolean>(
+        () => alwaysShowPlaceholder
+    );
+
+    /** Whether linkModal is displayed */
+    const [linkModalVisible, setLinkModalVisible] = useState<boolean>(false);
+
+    /** linkUrl */
+    const [linkUrl, setLinkUrl] = useState<string>('');
+
+    /** The selection area through blur deselect is used to restore the selection area */
+    const previous_selection_from_on_blur_ref = useRef<Range>(null);
+
+    const focused = useRef(false);
+
+    const editor = useMemo(
+        () => withDate(withLinks(withReact(createEditor() as ReactEditor))),
+        []
+    );
+
+    useLayoutEffect(() => {
+        const newVal = createSlateText(currentValue, textStyle);
+        if (!isEqual(editor.children, newVal)) {
+            editor.children = newVal;
+            forceUpdate(v => v + 1);
+        }
+    }, [currentValue, editor, textStyle]);
+
+    const onLinkModalVisibleChange = useCallback(
+        (visible: boolean, isInsertLink?: boolean, url?: string) => {
+            setLinkModalVisible(visible);
+            if (url) {
+                setLinkUrl(url);
+            }
+            if (!isInsertLink && previous_selection_from_on_blur_ref.current) {
+                Transforms.select(
+                    editor,
+                    previous_selection_from_on_blur_ref.current
+                );
+                requestAnimationFrame(() => {
+                    ReactEditor.focus(editor);
+                });
+            }
+        },
+        []
+    );
+
+    const renderElement = useCallback(
+        (props: any) => {
+            return (
+                <EditorElement
+                    {...props}
+                    editor={editor}
+                    onLinkModalVisibleChange={onLinkModalVisibleChange}
+                    hideInlineMenu={hideInlineMenu}
+                    paragraphDataSets={paragraphDataSets}
+                    id={id}
+                />
+            );
+        },
+        [
+            editor,
+            hideInlineMenu,
+            id,
+            onLinkModalVisibleChange,
+            paragraphDataSets,
+        ]
+    );
+
+    const renderLeaf = useCallback((props: any) => {
+        return <EditorLeaf {...props} />;
+    }, []);
+
+    const utils = useRef<SlateUtils>(null);
+
+    const resetSelectionIfNeeded = () => {
+        if (
+            currentValue &&
+            Array.isArray(currentValue) &&
+            utils.current &&
+            editor.selection
+        ) {
+            const { selectionEnd } = utils.current.getSelectionStartAndEnd();
+            const end = currentValue[currentValue.length - 1];
+            if ('text' in end) {
+                const endOffset = end.text.length;
+                if (selectionEnd.offset > end.text.length) {
+                    utils.current.setSelection({
+                        focus: {
+                            path: selectionEnd.path,
+                            offset: endOffset,
+                        },
+                        anchor: {
+                            path: selectionEnd.path,
+                            offset: endOffset,
+                        },
+                    });
+                }
+            }
+        }
+    };
+
+    useEffect(() => {
+        if (!utils.current) {
+            utils.current = new SlateUtils(editor);
+            if (ref && 'current' in ref) {
+                ref.current = utils.current as ExtendedTextUtils;
+                ref.current.setLinkModalVisible = setLinkModalVisible;
+            }
+        }
+        if (autoFocus) {
+            utils.current.focus();
+        }
+        return () => {
+            utils.current.dispose();
+            utils.current = null;
+        };
+    }, []);
+
+    const onKeyDown: KeyboardEventHandler<HTMLDivElement> = e => {
+        const shouldPreventDefault = handleKeyDown && handleKeyDown(e);
+        if (shouldPreventDefault) {
+            e.preventDefault();
+            return;
+        }
+        if (e.metaKey && e.key === 'a') {
+            e.stopPropagation();
+            if (isSelectAll(editor)) {
+                e.preventDefault();
+                handleSelectAll && handleSelectAll();
+            }
+        }
+
+        if (e.metaKey && e.key === 'z') {
+            if (e.shiftKey) {
+                // redo
+                handleRedo && handleRedo();
+            } else {
+                // undo
+                handleUndo && handleUndo();
+            }
+            e.preventDefault();
+            return;
+        }
+        if (e.code === 'ShiftLeft') {
+            return;
+        }
+        // https://github.com/facebook/react/issues/13104
+        if (!e.nativeEvent.isComposing) {
+            switch (e.code) {
+                case 'Enter': {
+                    onEnter(e);
+                    break;
+                }
+                case 'Tab': {
+                    onTab(e);
+                    break;
+                }
+                case 'Backspace': {
+                    onBackSpace(e);
+                    break;
+                }
+                case 'ArrowUp': {
+                    e.stopPropagation();
+                    onUp(e);
+                    break;
+                }
+                case 'ArrowDown': {
+                    e.stopPropagation();
+                    onDown(e);
+                    break;
+                }
+                case 'ArrowRight': {
+                    e.stopPropagation();
+                    onRight(e);
+                    break;
+                }
+                case 'ArrowLeft': {
+                    e.stopPropagation();
+                    onLeft(e);
+                    break;
+                }
+                case 'Digit2': {
+                    break;
+                }
+                case 'Escape': {
+                    e.stopPropagation();
+                    handleEsc?.();
+                }
+            }
+        }
+        handle_hotkey_if_needed(e);
+    };
+
+    const handle_hotkey_if_needed = (e: KeyboardEvent) => {
+        for (const hotkey in HOTKEYS) {
+            if (isHotkey(hotkey, e)) {
+                e.preventDefault();
+                const mark = HOTKEYS[hotkey as keyof typeof HOTKEYS];
+                if (mark === 'link' && supportLink) {
+                    setLinkModalVisible(true);
+                    hideInlineMenu?.();
+                    return;
+                }
+                toggleMark(editor, mark);
+            }
+        }
+    };
+
+    const isMarkActive = (editor: ReactEditor, format: string) => {
+        const marks: any = Editor.marks(editor);
+        return marks ? marks[format] === true : false;
+    };
+
+    const toggleMark = (editor: ReactEditor, format: string) => {
+        const isActive = isMarkActive(editor, format);
+
+        if (isActive) {
+            Editor.removeMark(editor, format);
+        } else {
+            Editor.addMark(editor, format, true);
+        }
+    };
+
+    const onSlash = () => {
+        handleSlash && handleSlash();
+    };
+
+    const onDown = (e: KeyboardEvent) => {
+        e.stopPropagation();
+        preventBindIfNeeded(handleDown)(e, e);
+    };
+
+    const onUp = (e: KeyboardEvent) => {
+        e.stopPropagation();
+        preventBindIfNeeded(handleUp)(e, e);
+    };
+    const onRight = (e: KeyboardEvent) => {
+        preventBindIfNeeded(handleRight)(e);
+    };
+    const onLeft = (e: KeyboardEvent) => {
+        preventBindIfNeeded(handleLeft)(e);
+    };
+
+    const onEnter = (e: KeyboardEvent) => {
+        if (!editor.selection) {
+            return;
+        }
+        if (!e.isDefaultPrevented()) {
+            const splitContents = utils.current.getSplitContentsBySelection();
+            preventBindIfNeeded(handleEnter)(e, {
+                splitContents,
+                isShiftKey: !!e.shiftKey,
+            });
+            // TODO: When re-rendering, onSelect will be triggered again, resulting in the wrong cursor position in the list after carriage return, so manual blur is required, but some cases cannot be manually blurred
+            if (
+                !Range.equals(
+                    editor.selection,
+                    utils.current.getStartSelection()
+                ) &&
+                !e.shiftKey
+            ) {
+                ReactEditor.blur(editor);
+            }
+        }
+    };
+
+    const onBackSpace = (e: KeyboardEvent) => {
+        if (!editor.selection) {
+            return;
+        }
+        const isCool = utils.current.isCollapsed();
+        const isCollAndStart = utils.current.isStart() && isCool;
+        if (!isCool) {
+            hideInlineMenu && hideInlineMenu();
+        }
+        preventBindIfNeeded(handleBackSpace)(e, { isCollAndStart });
+    };
+
+    const onTab = (e: KeyboardEvent) => {
+        if (!editor.selection) {
+            return;
+        }
+        preventBindIfNeeded(handleTab)(e, { isShiftKey: !!e.shiftKey });
+    };
+
+    const onSelect = () => {
+        handleSelect && handleSelect(editor.selection);
+    };
+
+    const onChange = (newValue: Descendant[]) => {
+        if (newValue?.[0] && 'children' in newValue[0]) {
+            const children = [...newValue[0].children];
+            handleChange &&
+                handleChange(
+                    children,
+                    getExtraPropertiesFromEditorOutmostNode(newValue[0])
+                );
+            if (!isEqual(children, currentValue)) {
+                handleTextChange && handleTextChange(children);
+            }
+        }
+
+        // https://github.com/ianstormtaylor/slate/issues/2434
+        const nowFocus = ReactEditor.isFocused(editor);
+
+        if (!focused.current && nowFocus) {
+            if (!alwaysShowPlaceholder) {
+                setShowPlaceholder(true);
+            }
+            handleFocus?.(editor.selection);
+        }
+
+        focused.current = nowFocus;
+    };
+
+    const onBeforeInput = (e: InputEvent): boolean => {
+        // Paste does not follow the default logic
+        if (e.inputType === 'insertFromPaste') {
+            e.preventDefault();
+            return true;
+        }
+        if (isControlled) {
+            // TODO: must be changed to controlled component
+            return false;
+        }
+        if (e.data === '/') {
+            onSlash && onSlash();
+            return false;
+        }
+        // link interception
+        if (
+            supportLink &&
+            e.dataTransfer != null &&
+            e.dataTransfer.files.length === 0
+        ) {
+            const { selection } = editor;
+            const text = e.dataTransfer.getData('text');
+            if (
+                isUrl(text) &&
+                selection.anchor.offset !== selection.focus.offset
+            ) {
+                insertLink(text);
+                e.preventDefault();
+                return true;
+            }
+        }
+        // markdown interception
+        if (supportMarkdown && !!handleMarkdown(e)) {
+            const start_selection = utils.current.getStartSelection();
+            utils.current.setSelection(start_selection);
+            e.preventDefault();
+            return true;
+        }
+        if (handleSoftEnter(e)) {
+            e.preventDefault();
+            return true;
+        }
+        return false;
+    };
+
+    const handleSoftEnter = (e: InputEvent) => {
+        if (e.inputType === 'insertLineBreak') {
+            // slate directly insertBreak inserts a new paragraph here, we need to insert a real linebreaker
+            Editor.insertText(editor, '\n');
+            return true;
+        }
+        return false;
+    };
+
+    const handleMarkdown = (e: InputEvent) => {
+        /**
+         * 1. Detected that a suspected markdown logo was entered
+         * 2. Further detect whether the line contains markdown syntax, whether or not a newline
+         * 3. If it contains markdown syntax, find out the path that should be converted
+         * 4. Convert the content of path to the corresponding format
+         */
+        if (supportMarkdown && isInterceptCharacter(e.data)) {
+            const strToBeTested = `${utils.current.getStringBetweenStartAndSelection()}`;
+            const matchRes = matchMarkdown(strToBeTested);
+            if (matchRes) {
+                if (INLINE_STYLES.includes(matchRes.style)) {
+                    const pointsRes = utils.current.getPathOfString(matchRes);
+                    if (pointsRes) {
+                        const { startLength } = matchRes;
+                        const { startPoint, endPoint, style } = pointsRes;
+                        utils.current.turnStyleBetweenPoints(
+                            startPoint,
+                            endPoint,
+                            style,
+                            startLength
+                        );
+                    }
+                } else {
+                    // get rid of the syntax first
+                    const { style, startLength } = matchRes;
+                    console.log('startLength', startLength);
+                    const start = Editor.after(
+                        editor,
+                        utils.current.getStart(),
+                        { distance: startLength }
+                    );
+                    // Conversion logic, pop out
+                    handleConvert &&
+                        handleConvert(style, {
+                            text: utils.current.getContentBetween(
+                                start,
+                                utils.current.getEnd()
+                            ),
+                        });
+                }
+                e.preventDefault();
+                return true;
+            }
+        }
+        return false;
+    };
+    const insertLink = (url: string) => {
+        wrapLink(editor, url, previous_selection_from_on_blur_ref.current);
+    };
+
+    const isSelectionError = (error: Error) => {
+        return (
+            error.message.indexOf(
+                'Cannot resolve a DOM point from Slate point:'
+            ) !== -1
+        );
+    };
+
+    const errorHandler = (error: Error, info: { componentStack: string }) => {
+        if (!isSelectionError(error)) {
+            console.error(`rendering error`, error, info);
+        }
+    };
+
+    const ErrorFallback = ({ error, resetErrorBoundary }: any): null => {
+        if (isSelectionError(error)) {
+            resetErrorBoundary();
+        }
+        return null;
+    };
+
+    const onClick: MouseEventHandler<HTMLDivElement> = e => {
+        handleClick && handleClick(e);
+    };
+
+    const onDrop = (event: DragEvent) => {
+        return true;
+    };
+
+    const onDragStart = (event: DragEvent) => {
+        return false;
+    };
+
+    const onCopy = () => {
+        if (handleCopy) {
+            return Boolean(handleCopy());
+        }
+        return false;
+    };
+
+    const onBlur = () => {
+        if (!alwaysShowPlaceholder) {
+            setShowPlaceholder(false);
+        }
+
+        if (
+            editor.selection &&
+            editor.selection !== previous_selection_from_on_blur_ref.current
+        ) {
+            // / ❓ make previous_selection not null, will it affect other features?
+            previous_selection_from_on_blur_ref.current = editor.selection;
+            utils.current?.setPreviousSelection(editor.selection);
+        }
+
+        Transforms.deselect(editor);
+
+        handleBlur?.(editor.selection);
+        focused.current = false;
+    };
+
+    const onMouseDown = (e: MouseEvent<HTMLDivElement>) => {
+        handleMouseDown?.(e);
+    };
+
+    return (
+        <>
+            <ErrorBoundary
+                onReset={resetSelectionIfNeeded}
+                FallbackComponent={ErrorFallback}
+                onError={errorHandler}
+            >
+                <Slate editor={editor} value={currentValue} onChange={onChange}>
+                    <Editable
+                        readOnly={readonly}
+                        renderElement={renderElement}
+                        renderLeaf={renderLeaf}
+                        className={`${className} text-manage`}
+                        style={style}
+                        placeholder={
+                            alwaysShowPlaceholder
+                                ? placeholder
+                                : showPlaceholder
+                                ? placeholder
+                                : ''
+                        }
+                        onKeyDown={onKeyDown}
+                        onSelect={onSelect}
+                        onClick={onClick}
+                        onMouseDown={onMouseDown}
+                        onDOMBeforeInput={onBeforeInput}
+                        spellCheck={false}
+                        scrollSelectionIntoView={() => {}}
+                        onDragStart={onDragStart}
+                        onDrop={onDrop}
+                        onCopy={onCopy}
+                        onBlur={onBlur}
+                    />
+                </Slate>
+            </ErrorBoundary>
+
+            {supportLink && linkModalVisible && (
+                <LinkModal
+                    visible={linkModalVisible}
+                    onVisibleChange={onLinkModalVisibleChange}
+                    insertLink={insertLink}
+                    url={linkUrl}
+                />
+            )}
+        </>
+    );
+});
+
+const EditorElement = (props: any) => {
+    const {
+        attributes,
+        children,
+        element,
+        editor,
+        onLinkModalVisibleChange,
+        hideInlineMenu,
+        paragraphDataSets = [],
+        id,
+    } = props;
+    const defaultElementStyles = {
+        textAlign: element['textAlign'],
+    } as React.CSSProperties;
+
+    switch (element.type) {
+        case 'link': {
+            return (
+                <LinkComponent
+                    {...props}
+                    editor={editor}
+                    onLinkModalVisibleChange={onLinkModalVisibleChange}
+                    hideInlineMenu={hideInlineMenu}
+                />
+            );
+        }
+        case 'date': {
+            return <InlineDate {...props} />;
+        }
+        case 'reflink': {
+            return <InlineRefLink block={null} pageId={element.reference} />;
+        }
+        default: {
+            for (let i = 0; i < paragraphDataSets.length; i++) {
+                attributes[paragraphDataSets] = 'true';
+            }
+            return (
+                <div
+                    style={defaultElementStyles}
+                    key={id}
+                    className="text-paragraph"
+                    {...attributes}
+                >
+                    {children}
+                </div>
+            );
+        }
+    }
+};
+
+const EditorLeaf = ({ attributes, children, leaf }: any) => {
+    const textStyles = useMemo(() => {
+        const styles = {} as { color?: string; backgroundColor?: string };
+        if (leaf.fontColor) {
+            styles.color = leaf.fontColor as string;
+        }
+        if (leaf.fontBgColor) {
+            styles.backgroundColor = leaf.fontBgColor as string;
+        }
+        return styles as React.CSSProperties;
+    }, [leaf.fontBgColor, leaf.fontColor]);
+
+    const commentsIds = useMemo(
+        () => [...getCommentsIdsOnTextNode(leaf)],
+        [leaf]
+    );
+
+    if (leaf.placeholder) {
+        return <span {...attributes}>{children}</span>;
+    }
+    let customChildren = <String {...children.props} />;
+
+    if (leaf.inlinecode) {
+        customChildren = (
+            <span {...attributes}>
+                <code
+                    style={{
+                        backgroundColor: 'rgba(135,131,120,0.15)',
+                        borderRadius: '3px',
+                        color: '#EB5757',
+                        fontSize: '0.875em',
+                        padding: '0.25em 0.375em',
+                    }}
+                >
+                    {customChildren}
+                </code>
+            </span>
+        );
+    }
+    if (leaf.bold) {
+        customChildren = <strong>{customChildren}</strong>;
+    }
+
+    if (leaf.italic) {
+        customChildren = <em>{customChildren}</em>;
+    }
+
+    if (leaf.underline) {
+        attributes.style = {
+            ...attributes.style,
+            borderBottom: '1px solid rgba(204, 204, 204, 0.9)',
+        };
+    }
+
+    if (leaf.strikethrough) {
+        if (attributes.style) {
+            attributes.style = {
+                ...attributes.style,
+                textDecoration: 'line-through',
+            };
+        } else {
+            attributes.style = {
+                textDecoration: 'line-through',
+            };
+        }
+    }
+
+    customChildren = (
+        <TextWithComments commentsIds={commentsIds}>
+            {customChildren}
+        </TextWithComments>
+    );
+
+    return (
+        <span style={textStyles} {...attributes}>
+            {customChildren}
+        </span>
+    );
+};
+
+const String = (props: {
+    isLast: boolean;
+    leaf: Text;
+    parent: Element;
+    text: Text;
+}) => {
+    const { isLast, leaf, parent, text } = props;
+    const editor = useSlateStatic();
+    const path = ReactEditor.findPath(
+        editor as ReactEditor,
+        text as unknown as Node
+    );
+    const parentPath = Path.parent(path);
+
+    if (editor.isVoid(parent as any)) {
+        return <ZeroWidthString length={Node.string(parent as any).length} />;
+    }
+
+    if (
+        (leaf as any).text === '' &&
+        // @ts-ignore
+        parent.children[parent.children.length - 1] === text &&
+        !editor.isInline(parent as any) &&
+        Editor.string(editor, parentPath) === ''
+    ) {
+        return <ZeroWidthString isLineBreak />;
+    }
+
+    if ((leaf as any).text === '') {
+        return <ZeroWidthString />;
+    }
+
+    if (isLast && (leaf as any).text.slice(-1) === '\n') {
+        return <TextString isTrailing text={(leaf as any).text} />;
+    }
+
+    return <TextString text={(leaf as any).text} />;
+};
+
+const TextString = (props: { text: string; isTrailing?: boolean }) => {
+    const { text, isTrailing = false } = props;
+
+    const textWithTrailing = useMemo(() => {
+        return `${text ?? ''}${isTrailing ? '\n' : ''}`;
+    }, [text, isTrailing]);
+
+    return <span data-slate-string>{textWithTrailing}</span>;
+};
+
+const ZeroWidthString = (props: { length?: number; isLineBreak?: boolean }) => {
+    const { length = 0, isLineBreak = false } = props;
+    return (
+        <span
+            data-slate-zero-width={isLineBreak ? 'n' : 'z'}
+            data-slate-length={length}
+        >
+            {'\uFEFF'}
+            {isLineBreak ? <br /> : null}
+        </span>
+    );
+};
+
+const preventBindIfNeeded = (cb: any) => {
+    return async (e: any, ...args: any[]) => {
+        const shouldPreventDefault =
+            cb && (args.length ? await cb(args[0]) : await cb());
+        if (shouldPreventDefault) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    };
+};
+
+const createSlateText = (
+    text: CustomElement[],
+    textStyle: Record<string, unknown>
+): Descendant[] => {
+    const slateText = [
+        {
+            type: 'paragraph',
+            children: [...text],
+            ...textStyle,
+        },
+    ];
+    return slateText;
+};
diff --git a/libs/components/common/src/lib/text/constants.ts b/libs/components/common/src/lib/text/constants.ts
new file mode 100644
index 000000000..2dfe55cb1
--- /dev/null
+++ b/libs/components/common/src/lib/text/constants.ts
@@ -0,0 +1,192 @@
+import { Protocol } from '@toeverything/datasource/db-service';
+const InnerTextStyle = {
+    FONT_FAMILY: 'FONT_FAMILY',
+    FONT_SIZE: 'FONT_SIZE',
+    COLOR: 'FOREGROUND_COLOR',
+    BACKGROUND_COLOR: 'BACKGROUND_COLOR',
+    BOLD: 'BOLD',
+    ITALIC: 'ITALIC',
+    UNDERLINE: 'UNDERLINE',
+    STRIKETHROUGH: 'STRIKETHROUGH',
+    VERTICAL_ALIGN: 'VERTICAL_ALIGN',
+    UNDER_LINE: 'UNDER_LINE',
+};
+export const MARKDOWN_REGS = [
+    {
+        type: InnerTextStyle.BOLD,
+        reg: /\*{2}.+\*{2}$/,
+        start: '**',
+        end: '**',
+    },
+    {
+        type: InnerTextStyle.ITALIC,
+        reg: /\*.+\*$/,
+        start: '*',
+        end: '*',
+    },
+    {
+        type: InnerTextStyle.STRIKETHROUGH,
+        reg: /[~～]{2}.+[~～]{2}$/,
+        start: '~~',
+        end: '~~',
+    },
+    {
+        type: InnerTextStyle.UNDER_LINE,
+        reg: /[~～].+[~～]$/,
+        start: '~',
+        end: '~',
+    },
+    {
+        type: Protocol.Block.Type.heading3,
+        reg: /^#{3}$/,
+        start: '###',
+    },
+    {
+        type: Protocol.Block.Type.heading2,
+        reg: /^#{2}$/,
+        start: '##',
+    },
+    {
+        type: Protocol.Block.Type.heading1,
+        reg: /^#$/,
+        start: '#',
+    },
+    {
+        type: Protocol.Block.Type.numbered,
+        reg: /^1\.$/,
+        start: '1.',
+    },
+    {
+        type: Protocol.Block.Type.bullet,
+        reg: /^(-|\*|\+)$/,
+        start: '*',
+    },
+    {
+        type: Protocol.Block.Type.todo,
+        reg: /^(\[]|【】)$/,
+        start: '[]',
+    },
+    {
+        type: Protocol.Block.Type.code,
+        reg: /^`{3}$/,
+        start: '```',
+    },
+    // {
+    //     type: Protocol.Block.Type.toc,
+    //     reg: /^\[toc\]$/,
+    //     start: '[t'
+    // },
+    {
+        type: Protocol.Block.Type.quote,
+        reg: /^[>》]$/,
+        start: '>',
+    },
+    {
+        type: Protocol.Block.Type.groupDivider,
+        reg: /^(={3}|\*{3})$/,
+        start: '===',
+    },
+    // divider
+    {
+        type: Protocol.Block.Type.divider,
+        reg: /^(-{3}|\*{3})$/,
+        start: '---',
+    },
+    // callout
+    {
+        type: Protocol.Block.Type.callout,
+        reg: /^!-$/,
+        start: '!-',
+    },
+    {
+        type: Protocol.Block.Type.file,
+        reg: /^file$/,
+        start: 'file',
+    },
+    {
+        type: Protocol.Block.Type.image,
+        reg: /^img$/,
+        start: 'img',
+    },
+    {
+        type: Protocol.Block.Type.youtube,
+        reg: /^youtube$/,
+        start: 'youtube',
+    },
+    {
+        type: Protocol.Block.Type.figma,
+        reg: /^figma$/,
+        start: 'figma',
+    },
+    {
+        type: Protocol.Block.Type.embedLink,
+        reg: /^embedLink$/,
+        start: 'embedLink',
+    },
+];
+
+export const HOTKEYS = {
+    'mod+b': 'bold',
+    'mod+i': 'italic',
+    'mod+u': 'underline',
+    'mod+k': 'link',
+    'mod+shift+s': 'strikethrough',
+    'mod+e': 'inlinecode',
+} as const;
+
+export const fontColorPalette = {
+    default: 'rgb(0,0,0)',
+    affineGray: 'rgb(155, 154, 151)',
+    affineBrown: 'rgb(100, 71, 58)',
+    affineOrange: 'rgb(217, 115, 13)',
+    affineYellow: 'rgb(223, 171, 1)',
+    affineGreen: 'rgb(77, 100, 97)',
+    affineBlue: 'rgb(11, 110, 153)',
+    affinePurple: 'rgb(105, 64, 165)',
+    affinePink: 'rgb(173, 26, 114)',
+    affineRed: 'rgb(224, 62, 62)',
+} as const;
+
+export const fontBgColorPalette = {
+    default: 'rgb(255,255,255)',
+    affineGray: 'rgb(235, 236, 237)',
+    affineBrown: 'rgb(233, 229, 227)',
+    affineOrange: 'rgb(250, 235, 221)',
+    affineYellow: 'rgb(251, 243, 219)',
+    affineGreen: 'rgb(221, 237, 234)',
+    affineBlue: 'rgb(221, 235, 241)',
+    affinePurple: 'rgb(234, 228, 242)',
+    affinePink: 'rgb(244, 223, 235)',
+    affineRed: 'rgb(251, 228, 228)',
+} as const;
+
+export const fontColorPaletteKeys = Object.keys(fontColorPalette).reduce(
+    (aac, curr) => ({ [curr]: curr, ...aac }),
+    {}
+) as Record<keyof typeof fontColorPalette, keyof typeof fontColorPalette>;
+
+export const fontBgColorPaletteKeys = Object.keys(fontBgColorPalette).reduce(
+    (aac, curr) => ({ [curr]: curr, ...aac }),
+    {}
+) as Record<keyof typeof fontBgColorPalette, keyof typeof fontBgColorPalette>;
+
+export type TextStyleMark =
+    | typeof HOTKEYS[keyof typeof HOTKEYS]
+    | 'fontColor'
+    | 'fontBgColor';
+
+export type TextAlignOptions =
+    | 'left'
+    | 'center'
+    | 'right'
+    | 'justify'
+    | undefined;
+
+export const interceptMarks = ['\u0020'];
+
+export const INLINE_STYLES = [
+    InnerTextStyle.BOLD,
+    InnerTextStyle.STRIKETHROUGH,
+    InnerTextStyle.UNDER_LINE,
+    InnerTextStyle.ITALIC,
+];
diff --git a/libs/components/common/src/lib/text/element-leaf/TextWithComments.tsx b/libs/components/common/src/lib/text/element-leaf/TextWithComments.tsx
new file mode 100644
index 000000000..3f247bc7f
--- /dev/null
+++ b/libs/components/common/src/lib/text/element-leaf/TextWithComments.tsx
@@ -0,0 +1,55 @@
+import { useState, type ReactNode } from 'react';
+import { styled, MuiClickAwayListener } from '@toeverything/components/ui';
+
+type TextWithCommentsProps = {
+    commentsIds: string[];
+    isActive?: boolean;
+    children?: ReactNode;
+    [p: string]: unknown;
+};
+
+export const TextWithComments = (props: TextWithCommentsProps) => {
+    const { children, ...restProps } = props;
+    // const [isActive, setIsActive] = useState(false);
+    // console.log(';; isActive ', isActive, props.commentsIds);
+
+    return <StyledText {...restProps}>{children}</StyledText>;
+
+    // return props.commentsIds.length > 0 ? (
+    //     <MuiClickAwayListener
+    //         onClickAway={() => {
+    //             setIsActive(false);
+    //         }}
+    //     >
+    //         <StyledText
+    //             isActive={isActive}
+    //             onClick={() => {
+    //                 setIsActive(true);
+    //             }}
+    //             {...restProps}
+    //         >
+    //             {children}
+    //         </StyledText>
+    //     </MuiClickAwayListener>
+    // ) : (
+    //     <StyledText {...restProps}>{children}</StyledText>
+    // );
+};
+
+const StyledText = styled('span', {
+    shouldForwardProp: (prop: string) =>
+        !['commentsIds', 'isActive'].includes(prop),
+})<TextWithCommentsProps>(({ theme, commentsIds, isActive }) => {
+    return {
+        width: 20,
+        height: 20,
+        // color: '',
+        backgroundColor:
+            commentsIds.length > 1
+                ? 'rgba(19, 217, 227, 0.4)'
+                : commentsIds.length === 1
+                ? 'rgba(19, 217, 227, 0.2)'
+                : '',
+        border: isActive ? '2px solid rgba(19, 217, 227, 0.3)' : '',
+    };
+});
diff --git a/libs/components/common/src/lib/text/index.ts b/libs/components/common/src/lib/text/index.ts
new file mode 100644
index 000000000..a72350c9c
--- /dev/null
+++ b/libs/components/common/src/lib/text/index.ts
@@ -0,0 +1,8 @@
+export type { TextProps } from './EditableText';
+export { Text } from './EditableText';
+export type { Contents } from './slate-utils';
+export { SlateUtils } from './slate-utils';
+export * from './constants';
+export { getRandomString, getEditorMarkForCommentId } from './utils';
+
+export { InlineRefLink } from './plugins/reflink';
diff --git a/libs/components/common/src/lib/text/plugins/date.tsx b/libs/components/common/src/lib/text/plugins/date.tsx
new file mode 100644
index 000000000..ce2a6874f
--- /dev/null
+++ b/libs/components/common/src/lib/text/plugins/date.tsx
@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+import { ReactEditor } from 'slate-react';
+import { useRichStyle } from './hooks';
+
+export const withDate = (editor: ReactEditor) => {
+    const { isInline, isVoid } = editor;
+
+    editor.isInline = element => {
+        // @ts-ignore
+        return element.type === 'date' ? true : isInline(element);
+    };
+
+    editor.isVoid = element => {
+        // @ts-ignore
+        return element.type === 'date' ? true : isVoid(element);
+    };
+
+    return editor;
+};
+
+export const InlineDate = ({ attributes, children, element }: any) => {
+    const onClick = () => {
+        console.log('date click');
+    };
+
+    const richStyles = useRichStyle(element);
+
+    const time = useMemo(() => {
+        const { timeStamp } = element;
+        const date = new Date(timeStamp);
+        return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
+    }, [element]);
+
+    return (
+        <span
+            {...attributes}
+            contentEditable={false}
+            data-cy={`${element.timeStamp}`}
+            style={{
+                padding: '0 2px',
+                margin: '0 1px',
+                verticalAlign: 'baseline',
+                display: 'inline-block',
+                color: 'darkgray',
+                cursor: 'pointer',
+                fontStyle: richStyles['italic'] ? 'italic' : 'none',
+                textDecoration: `${
+                    richStyles['strikethrough'] ? 'line-through' : ''
+                }  ${richStyles['underline'] ? 'underline' : ''}`,
+                fontWeight: richStyles['bold'] ? 'bolder' : 'normal',
+            }}
+            onClick={onClick}
+        >
+            <span style={{ opacity: 0.6 }}>@</span>
+            {time}
+            {children}
+        </span>
+    );
+};
diff --git a/libs/components/common/src/lib/text/plugins/hooks.tsx b/libs/components/common/src/lib/text/plugins/hooks.tsx
new file mode 100644
index 000000000..05468c2cb
--- /dev/null
+++ b/libs/components/common/src/lib/text/plugins/hooks.tsx
@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+
+export const useRichStyle = function (element: any) {
+    const richStyles = useMemo(() => {
+        const richStyles: { [key: string]: boolean } = {};
+        if (element.bold) {
+            richStyles['bold'] = true;
+        }
+        if (element.italic) {
+            richStyles['italic'] = true;
+        }
+        if (element.underline) {
+            richStyles['underline'] = true;
+        }
+        if (element.strikethrough) {
+            richStyles['strikethrough'] = true;
+        }
+        return richStyles;
+    }, [element]);
+
+    return richStyles;
+};
diff --git a/libs/components/common/src/lib/text/plugins/link.tsx b/libs/components/common/src/lib/text/plugins/link.tsx
new file mode 100644
index 000000000..18679b27d
--- /dev/null
+++ b/libs/components/common/src/lib/text/plugins/link.tsx
@@ -0,0 +1,572 @@
+import React, {
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+    useCallback,
+    KeyboardEvent,
+    MouseEvent,
+    memo,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { useNavigate } from 'react-router-dom';
+
+import isUrl from 'is-url';
+import style9 from 'style9';
+import {
+    Editor,
+    Transforms,
+    Element as SlateElement,
+    Descendant,
+    Range as SlateRange,
+    Node,
+} from 'slate';
+import { ReactEditor } from 'slate-react';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import EditIcon from '@mui/icons-material/Edit';
+import LinkOffIcon from '@mui/icons-material/LinkOff';
+import AttachmentIcon from '@mui/icons-material/Attachment';
+import {
+    MuiTooltip as Tooltip,
+    styled,
+    muiTooltipClasses,
+    type MuiTooltipProps,
+} from '@toeverything/components/ui';
+import {
+    getRelativeUrlForInternalPageUrl,
+    isInternalPageUrl,
+} from '@toeverything/utils';
+
+import { getRandomString } from '../utils';
+import { colors } from '../../colors';
+
+export type LinkElement = {
+    type: 'link';
+    url: string;
+    children: Descendant[];
+    id: string;
+};
+
+export const withLinks = (editor: ReactEditor) => {
+    const { isInline } = editor;
+
+    editor.isInline = element => {
+        // @ts-ignore
+        return element.type === 'link' ? true : isInline(element);
+    };
+
+    return editor;
+};
+
+const unwrapLink = (editor: Editor) => {
+    Transforms.unwrapNodes(editor, {
+        match: n => {
+            return (
+                !Editor.isEditor(n) &&
+                SlateElement.isElement(n) &&
+                // @ts-expect-error
+                n.type === 'link'
+            );
+        },
+    });
+};
+
+export const wrapLink = (
+    editor: ReactEditor,
+    url: string,
+    preSelection?: SlateRange
+) => {
+    if (!ReactEditor.isFocused(editor) && preSelection) {
+        Transforms.select(editor, preSelection);
+    }
+    if (isLinkActive(editor)) {
+        unwrapLink(editor);
+    }
+    const realUrl = normalizeUrl(url);
+    const { selection } = editor;
+    const isCollapsed = selection && SlateRange.isCollapsed(selection);
+    const link: LinkElement = {
+        type: 'link',
+        url: realUrl,
+        children: isCollapsed ? [{ text: realUrl }] : [],
+        id: getRandomString('link'),
+    };
+
+    if (isCollapsed) {
+        Transforms.insertNodes(editor, link as Node);
+    } else {
+        Transforms.wrapNodes(editor, link, { split: true });
+        Transforms.collapse(editor, { edge: 'end' });
+    }
+    requestAnimationFrame(() => {
+        ReactEditor.focus(editor);
+    });
+};
+
+const normalizeUrl = (url: string) => {
+    // eslint-disable-next-line no-restricted-globals
+    return /^https?/.test(url) ? url : `${location.protocol}//${url}`;
+};
+
+const isLinkActive = (editor: ReactEditor) => {
+    const [link] = Editor.nodes(editor, {
+        match: n =>
+            !Editor.isEditor(n) &&
+            SlateElement.isElement(n) &&
+            // @ts-expect-error
+            n.type === 'link',
+    });
+    return !!link;
+};
+
+const LinkStyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (
+    <Tooltip {...props} classes={{ popper: className }} />
+))(() => ({
+    [`& .${muiTooltipClasses.tooltip}`]: {
+        backgroundColor: '#fff',
+        color: '#4C6275',
+        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+        fontSize: '14px',
+    },
+    [`& .MuiTooltip-tooltipPlacementBottom`]: {
+        // prevent tooltip disappear as soon as mouse moves
+        // margin: 0
+    },
+}));
+
+export const LinkComponent = ({
+    attributes,
+    children,
+    element,
+    editor,
+    onLinkModalVisibleChange,
+    hideInlineMenu,
+}: any) => {
+    const navigate = useNavigate();
+    const [tooltip_visible, set_tooltip_visible] = useState(false);
+
+    const handle_tooltip_visible_change = useCallback((visible: boolean) => {
+        set_tooltip_visible(visible);
+    }, []);
+
+    const handle_link_modal_visible_change = useCallback(
+        (visible: boolean, url?: string) => {
+            onLinkModalVisibleChange(visible, undefined, url);
+        },
+        [onLinkModalVisibleChange]
+    );
+
+    const handle_click_link_text = useCallback(
+        (event: React.MouseEvent<HTMLAnchorElement>) => {
+            // prevent route to href url
+            event.preventDefault();
+            event.stopPropagation();
+
+            const { url } = element;
+
+            if (isInternalPageUrl(url)) {
+                navigate(getRelativeUrlForInternalPageUrl(url));
+            } else {
+                const new_window = window.open(url, '_blank');
+                if (new_window) {
+                    new_window.focus();
+                }
+            }
+        },
+        [element, navigate]
+    );
+
+    return (
+        <LinkStyledTooltip
+            open={tooltip_visible}
+            onOpen={() => handle_tooltip_visible_change(true)}
+            onClose={() => handle_tooltip_visible_change(false)}
+            placement="bottom-start"
+            title={
+                <LinkTooltips
+                    url={element.url}
+                    id={element.id}
+                    editor={editor}
+                    onLinkModalVisibleChange={handle_link_modal_visible_change}
+                    onVisibleChange={handle_tooltip_visible_change}
+                    hideInlineMenu={hideInlineMenu}
+                />
+            }
+        >
+            <a
+                {...attributes}
+                className={styles({
+                    linkWrapper: true,
+                    linkWrapperHover: tooltip_visible,
+                })}
+                href={element.url}
+            >
+                {/* <InlineChromiumBugfix /> */}
+                <span onClick={handle_click_link_text}>{children}</span>
+                {/* <InlineChromiumBugfix /> */}
+            </a>
+        </LinkStyledTooltip>
+    );
+};
+
+type LinkTooltipsProps = {
+    /** Uniquely identifies */
+    id: string;
+    /** The url to which the hyperlink points */
+    url: string;
+    /** slate instance */
+    editor: Editor;
+    /** Used to display linkModal */
+    onLinkModalVisibleChange: (visible: boolean, url?: string) => void;
+    /** used to hide inlinemenu */
+    hideInlineMenu: () => void;
+    /** visibleChange of the entire tooltips */
+    onVisibleChange: (visible: boolean) => void;
+};
+
+const LinkTooltips = (props: LinkTooltipsProps) => {
+    const {
+        id,
+        url,
+        editor,
+        onLinkModalVisibleChange,
+        hideInlineMenu,
+        onVisibleChange,
+    } = props;
+
+    const select_link = useCallback(() => {
+        const { children } = editor;
+        // @ts-ignore
+        const realChildren = children[0]?.children;
+        const path = [0];
+        let offset = 0;
+        if (realChildren && Array.isArray(realChildren)) {
+            for (let i = 0; i < realChildren.length; i++) {
+                const child = realChildren[i];
+                if (child.type === 'link' && child.id === id) {
+                    path.push(i);
+                    const linkChildren = child.children;
+                    path.push(linkChildren.length - 1);
+                    offset = linkChildren[linkChildren.length - 1].text.length;
+                }
+            }
+            if (path.length === 3 && offset) {
+                const anchor = Editor.before(
+                    editor,
+                    {
+                        path,
+                        offset: 0,
+                    },
+                    {
+                        unit: 'offset',
+                    }
+                );
+                const focus = Editor.after(
+                    editor,
+                    {
+                        path,
+                        offset,
+                    },
+                    {
+                        unit: 'offset',
+                    }
+                );
+                Transforms.select(editor, { anchor, focus });
+                ReactEditor.focus(editor as ReactEditor);
+                onVisibleChange(false);
+                requestAnimationFrame(() => {
+                    hideInlineMenu?.();
+                });
+                return true;
+            }
+        }
+        return false;
+    }, [editor, hideInlineMenu, id, onVisibleChange]);
+
+    const handle_edit_link_url = useCallback(() => {
+        const selectSuccess = select_link();
+
+        if (selectSuccess) {
+            onVisibleChange(false);
+            requestAnimationFrame(() => {
+                onLinkModalVisibleChange(true, url);
+            });
+        }
+    }, [onLinkModalVisibleChange, onVisibleChange, select_link, url]);
+
+    const handle_unlink = useCallback(() => {
+        const selectSuccess = select_link();
+        if (selectSuccess) {
+            requestAnimationFrame(() => {
+                unwrapLink(editor);
+                ReactEditor.deselect(editor);
+            });
+        }
+    }, [editor, select_link]);
+
+    return (
+        <div className={styles('linkTooltipContainer')}>
+            <span className={styles('linkModalIcon')}>
+                <OpenInNewIcon style={{ fontSize: 15 }} />
+            </span>
+            <span className={styles('linkModalUrl')}>{url}</span>
+            <div className={styles('linkModalStick')} />
+            <div
+                onClick={handle_edit_link_url}
+                className={styles('linkModalBtn')}
+            >
+                <EditIcon style={{ fontSize: 16 }} />
+            </div>
+            <div onClick={handle_unlink} className={styles('linkModalBtn')}>
+                <LinkOffIcon style={{ fontSize: 16 }} />
+            </div>
+        </div>
+    );
+};
+
+const InlineChromiumBugfix = () => (
+    <span contentEditable={false} style={{ fontSize: 0 }}>
+        ${String.fromCodePoint(160)}
+    </span>
+);
+
+function useBody() {
+    const [div] = useState(document.createElement('div'));
+
+    useEffect(() => {
+        document.body.appendChild(div);
+        return () => {
+            div.remove();
+        };
+    }, []);
+
+    return div;
+}
+
+const GAP_BETWEEN_CONTENT_AND_MODAL = 4;
+
+type LinkModalProps = {
+    visible: boolean;
+    url?: string;
+    /** Hide display callback */
+    onVisibleChange: (visible: boolean, isInsertLink?: boolean) => void;
+    /** Insert link to slate */
+    insertLink: (url: string) => void;
+};
+
+/**
+ * modal for adding and editing link url, input element as content.
+ */
+export const LinkModal = memo((props: LinkModalProps) => {
+    const body = useBody();
+    const { visible, onVisibleChange, url = '', insertLink } = props;
+
+    const inputEl = useRef<HTMLInputElement>(null);
+
+    const rect = useMemo(() => {
+        return window.getSelection().getRangeAt(0).getClientRects()[0];
+    }, []);
+
+    const rects = useMemo(() => {
+        return window.getSelection().getRangeAt(0).getClientRects();
+    }, []);
+
+    useEffect(() => {
+        if (visible) {
+            requestAnimationFrame(() => {
+                if (url) {
+                    inputEl.current.value = url;
+                }
+                inputEl.current?.focus();
+            });
+        }
+    }, [visible, url]);
+
+    const add_link_url_to_text = () => {
+        const newUrl = inputEl.current.value;
+        if (newUrl && newUrl !== url && isUrl(normalizeUrl(newUrl))) {
+            insertLink(newUrl);
+            onVisibleChange(false, true);
+            return;
+        }
+    };
+
+    const handle_key_down = (e: KeyboardEvent<HTMLInputElement>) => {
+        // console.log(';; link input keydown ', e.key, e);
+        if (e.key === 'Enter') {
+            add_link_url_to_text();
+        }
+        // TODO: FIX unable to catch ESCAPE key down
+        if (e.key === 'Escape') {
+            onVisibleChange(false);
+        }
+    };
+
+    const handle_mouse_down = () => {
+        onVisibleChange(false);
+    };
+
+    const { top, left, height } = rect;
+
+    return createPortal(
+        visible && (
+            <>
+                <LinkBehavior onMousedown={handle_mouse_down} rects={rects} />
+                <div
+                    className={styles('linkModalContainer')}
+                    style={{
+                        top: top + height + GAP_BETWEEN_CONTENT_AND_MODAL,
+                        left,
+                    }}
+                >
+                    <div className={styles('linkModalContainerIcon')}>
+                        <AttachmentIcon
+                            style={{ color: colors.Gray04, fontSize: 16 }}
+                        />
+                    </div>
+                    <input
+                        className={styles('linkModalContainerInput')}
+                        onKeyDown={handle_key_down}
+                        placeholder="Paste link url, like https://affine.pro"
+                        autoComplete="off"
+                        ref={inputEl}
+                    />
+                </div>
+            </>
+        ),
+        body
+    );
+});
+
+const LinkBehavior = (props: {
+    onMousedown: (e: MouseEvent) => void;
+    rects: DOMRectList;
+}) => {
+    const { onMousedown, rects } = props;
+
+    const ref = useRef<HTMLDivElement>(null);
+
+    const prevent = useCallback((e: any) => {
+        // console.log(e);
+        // e.preventDefault();
+        // e.stopPropagation();
+    }, []);
+
+    useEffect(() => {
+        document.addEventListener('mousemove', prevent, { capture: true });
+        return () => {
+            document.removeEventListener('mousemove', prevent, {
+                capture: true,
+            });
+        };
+    });
+
+    const renderFakeSelection = useCallback(() => {
+        const rectsArr = Array.from(rects);
+        if (rectsArr.length) {
+            return rectsArr.map((rect, i) => {
+                const { top, left, width, height } = rect;
+                return (
+                    <div
+                        key={`fake-selection-${i}`}
+                        className={styles('fakeSelection')}
+                        style={{ top, left, width, height }}
+                    />
+                );
+            });
+        } else {
+            return null;
+        }
+    }, [rects]);
+
+    return (
+        <>
+            <div
+                ref={ref}
+                className={styles('linkMask')}
+                onMouseDown={onMousedown}
+            />
+            {renderFakeSelection()}
+        </>
+    );
+};
+
+const styles = style9.create({
+    linkModalContainer: {
+        position: 'fixed',
+        width: '354px',
+        height: '40px',
+        padding: '12px',
+        display: 'flex',
+        borderRadius: '4px',
+        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+        backgroundColor: '#fff',
+        alignItems: 'center',
+        zIndex: '1',
+    },
+    linkModalContainerIcon: {
+        width: '16px',
+        margin: '0 16px 0 4px',
+    },
+    linkModalContainerInput: {
+        flex: '1',
+        outline: 'none',
+        border: 'none',
+        padding: '0',
+        fontFamily: 'Helvetica,Arial,"Microsoft Yahei",SimHei,sans-serif',
+        '::-webkit-input-placeholder': {
+            color: '#98acbd',
+        },
+    },
+    linkMask: {
+        position: 'fixed',
+        top: '0',
+        left: '0',
+        width: '100vw',
+        height: '100vh',
+        zIndex: '1',
+    },
+    fakeSelection: {
+        pointerEvents: 'none',
+        position: 'fixed',
+        // backgroundColor: 'rgba(80, 46, 196, 0.1)',
+        zIndex: '1',
+    },
+    linkWrapper: {
+        cursor: 'pointer',
+        textDecorationLine: 'none',
+    },
+    linkWrapperHover: {},
+    linkTooltipContainer: {
+        // color: 'var(--ligo-Gray04)',
+        display: 'flex',
+        alignItems: 'center',
+    },
+    linkModalIcon: {},
+    linkModalStick: {
+        width: '1px',
+        height: '20px',
+        margin: '0 10px 0 16px',
+    },
+    linkModalUrl: {
+        marginLeft: '8px',
+        maxWidth: '261px',
+        textOverflow: 'ellipsis',
+        overflowX: 'hidden',
+        overflowY: 'hidden',
+        whiteSpace: 'nowrap',
+    },
+    linkModalBtn: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '28px',
+        height: '28px',
+        transitionProperty: 'background-color',
+        transitionDuration: '0.3s',
+        borderRadius: '4px',
+        ':hover': {
+            cursor: 'pointer',
+        },
+    },
+});
diff --git a/libs/components/common/src/lib/text/plugins/reflink.tsx b/libs/components/common/src/lib/text/plugins/reflink.tsx
new file mode 100644
index 000000000..2b0c42a64
--- /dev/null
+++ b/libs/components/common/src/lib/text/plugins/reflink.tsx
@@ -0,0 +1,41 @@
+import { useNavigate, useParams } from 'react-router-dom';
+import { Descendant } from 'slate';
+
+// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
+import { BlockSearchItem } from '@toeverything/datasource/jwt';
+import { styled } from '@toeverything/components/ui';
+
+import { BlockPreview } from '../../block-preview';
+
+export type RefLinkElement = {
+    type: 'reflink';
+    reference: string;
+    children: Descendant[];
+};
+
+const BlockPreviewContainer = styled(BlockPreview)({
+    width: '100%',
+    margin: '0px!important',
+    paddingLeft: '0px!important',
+    paddingRight: '0px!important',
+});
+
+type InlineRefLinkProps = {
+    block?: BlockSearchItem;
+    pageId: string;
+};
+
+export const InlineRefLink = ({ block, pageId }: InlineRefLinkProps) => {
+    const { workspace_id } = useParams();
+    const navigate = useNavigate();
+
+    if (block) {
+        return (
+            <BlockPreviewContainer
+                block={block}
+                onClick={() => navigate(`/${workspace_id}/${pageId}`)}
+            />
+        );
+    }
+    return <span>Loading...</span>;
+};
diff --git a/libs/components/common/src/lib/text/slate-utils.ts b/libs/components/common/src/lib/text/slate-utils.ts
new file mode 100644
index 000000000..3f5fb5769
--- /dev/null
+++ b/libs/components/common/src/lib/text/slate-utils.ts
@@ -0,0 +1,1089 @@
+/* eslint-disable max-lines */
+import {
+    Descendant,
+    Editor,
+    Point,
+    Transforms,
+    Range,
+    Text,
+    Location,
+    Path,
+    Node as SlateNode,
+} from 'slate';
+import { ReactEditor } from 'slate-react';
+
+import {
+    getCommentsIdsOnTextNode,
+    getEditorMarkForCommentId,
+    MARKDOWN_STYLE_MAP,
+    MatchRes,
+} from './utils';
+import {
+    fontBgColorPalette,
+    fontColorPalette,
+    type TextAlignOptions,
+    type TextStyleMark,
+} from './constants';
+
+function isInlineAndVoid(editor: Editor, el: any) {
+    return editor.isInline(el) && editor.isVoid(el);
+}
+
+function isElementEnd(editor: Editor, el: any, offset: number) {
+    return el.text && el.text.length === offset;
+}
+
+export function isSelectAll(editor: Editor) {
+    const {
+        selection: { anchor, focus },
+        children,
+    } = editor;
+    const nodes = (children[0] as any).children as any[];
+    if (anchor.offset === 0 && anchor?.path[1] === 0) {
+        if (
+            focus?.path[1] === nodes.length - 1 &&
+            focus.offset === nodes[nodes.length - 1]?.text?.length
+        ) {
+            return true;
+        }
+    }
+    return false;
+}
+
+function isObject(o: any) {
+    return Object.prototype.toString.call(o) === '[object Object]';
+}
+
+function isPlainObject(o: any) {
+    let ctor, prot;
+
+    if (isObject(o) === false) return false;
+
+    // If has modified constructor
+    ctor = o.constructor;
+    if (ctor === undefined) return true;
+
+    // If has modified prototype
+    prot = ctor.prototype;
+    if (isObject(prot) === false) return false;
+
+    // If constructor does not have an Object-specific method
+    // eslint-disable-next-line no-prototype-builtins
+    if (prot.hasOwnProperty('isPrototypeOf') === false) {
+        return false;
+    }
+
+    // Most likely a plain Object
+    return true;
+}
+
+const isDeepEqual = (
+    node: Record<string, any>,
+    another: Record<string, any>
+): boolean => {
+    for (const key in node) {
+        const a = node[key];
+        const b = another[key];
+        if (isPlainObject(a) && isPlainObject(b)) {
+            if (!isDeepEqual(a, b)) return false;
+        } else if (Array.isArray(a) && Array.isArray(b)) {
+            if (a.length !== b.length) return false;
+            for (let i = 0; i < a.length; i++) {
+                if (a[i] !== b[i]) return false;
+            }
+        } else if (a !== b) {
+            return false;
+        }
+    }
+
+    for (const key in another) {
+        if (node[key] === undefined && another[key] !== undefined) {
+            return false;
+        }
+    }
+
+    return true;
+};
+
+Transforms.move = function (
+    editor: Editor,
+    options: {
+        distance?: number;
+        unit?: 'offset' | 'character' | 'word' | 'line';
+        reverse?: boolean;
+        edge?: 'anchor' | 'focus' | 'start' | 'end';
+    } = {}
+): void {
+    const { selection } = editor;
+    const { distance = 1, unit = 'offset', reverse = false } = options;
+    let { edge = null } = options;
+
+    if (!selection) {
+        return;
+    }
+
+    if (edge === 'start') {
+        edge = Range.isBackward(selection) ? 'focus' : 'anchor';
+    }
+
+    if (edge === 'end') {
+        edge = Range.isBackward(selection) ? 'anchor' : 'focus';
+    }
+
+    const { anchor, focus } = selection;
+    const opts = { distance, unit };
+    const props: Partial<Range> = {};
+
+    if (edge == null || edge === 'anchor') {
+        const point = reverse
+            ? Editor.before(editor, anchor, opts)
+            : Editor.after(editor, anchor, opts);
+
+        if (point) {
+            props.anchor = point;
+        }
+    }
+
+    if (edge == null || edge === 'focus') {
+        const point = reverse
+            ? Editor.before(editor, focus, opts)
+            : Editor.after(editor, focus, opts);
+
+        if (point) {
+            props.focus = point;
+        }
+    }
+
+    Transforms.setSelection(editor, props);
+};
+
+Text.equals = function (
+    text: Text,
+    another: Text,
+    options: { loose?: boolean } = {}
+): boolean {
+    const { loose = false } = options;
+
+    function omitText(obj: Record<any, any>) {
+        const { text, ...rest } = obj;
+
+        return rest;
+    }
+
+    return isDeepEqual(
+        loose ? omitText(text) : text,
+        loose ? omitText(another) : another
+    );
+};
+
+Editor.addMark = function (editor: Editor, key: string, value: any): void {
+    Transforms.setNodes(
+        editor,
+        { [key]: value },
+        {
+            match: isInlineAndVoid.bind(undefined, editor),
+            split: true,
+        }
+    );
+    editor.addMark(key, value);
+};
+
+Editor.removeMark = function (editor: Editor, key: string): void {
+    // Need to handle all selected inline entities by yourself
+    // Transforms.unsetNodes(editor, key, {
+    // match: isInlineAndVoid.bind(undefined, editor)
+    // });
+    Transforms.setNodes(
+        editor,
+        { [key]: null },
+        { match: Text.isText, split: true }
+    );
+    editor.removeMark(key);
+};
+
+/** override */
+Editor.insertText = function (
+    editor: Editor,
+    text: string,
+    options: {
+        at?: Location;
+        voids?: boolean;
+    } = {}
+): void {
+    Editor.withoutNormalizing(editor, () => {
+        const { voids = false } = options;
+        let { at = editor.selection } = options;
+
+        if (!at) {
+            return;
+        }
+
+        if (Path.isPath(at)) {
+            at = Editor.range(editor, at);
+        }
+
+        if (Range.isRange(at)) {
+            if (Range.isCollapsed(at)) {
+                at = at.anchor;
+            } else {
+                const end = Range.end(at);
+
+                if (!voids && Editor.void(editor, { at: end })) {
+                    return;
+                }
+
+                const pointRef = Editor.pointRef(editor, end);
+                Transforms.delete(editor, { at, voids });
+                at = pointRef.unref()!;
+                Transforms.setSelection(editor, { anchor: at, focus: at });
+            }
+        }
+
+        if (!voids && Editor.void(editor, { at })) {
+            return;
+        }
+
+        const { path, offset } = at;
+        if (text.length > 0) {
+            const marks = Editor.marks(editor);
+            if (text === '\u0020' && Object.keys(marks).length) {
+                // If the input is a space and the mark has content, remove the mark
+                const newPath = [path[0], path[1] + 1];
+                const newPoint = {
+                    path: newPath,
+                    offset: 1,
+                } as Point;
+                const newRange = {
+                    anchor: newPoint,
+                    focus: newPoint,
+                } as Range;
+                editor.apply({
+                    type: 'insert_node',
+                    path: newPath,
+                    node: { text },
+                });
+                editor.apply({
+                    type: 'set_selection',
+                    properties: null,
+                    newProperties: newRange,
+                });
+                return;
+            }
+
+            editor.apply({ type: 'insert_text', path, offset, text });
+        }
+    });
+};
+
+/** override */
+Transforms.select = function (editor: Editor, target: Location): void {
+    const { selection } = editor;
+    target = Editor.range(editor, target);
+
+    if (Range.isCollapsed(target) && target.focus.path.length > 2) {
+        // It is folded, and it may be drilled to a deep level, forcibly pulled out
+        const path = target.focus.path;
+        const [el] = Editor.node(editor, target);
+        const [parentEl] = Editor.node(editor, [path[0], path[1]]);
+        // @ts-ignore
+        if (
+            parentEl &&
+            el &&
+            (isInlineAndVoid(editor, parentEl) ||
+                isElementEnd(editor, el, target.focus.offset))
+        ) {
+            // Inline entity, the last content of the deep level, go directly out
+            let newPoint = Editor.after(editor, target);
+            if (!newPoint) {
+                Transforms.insertNodes(
+                    editor,
+                    {
+                        text: '',
+                    },
+                    { at: [path[0], path[1] + 1] }
+                );
+                newPoint = Editor.after(editor, target);
+            }
+            target.focus = newPoint;
+            target.anchor = newPoint;
+        }
+    }
+    if (selection) {
+        Transforms.setSelection(editor, target);
+        return;
+    }
+
+    if (!Range.isRange(target)) {
+        throw new Error(`wrong selection params: ${JSON.stringify(target)}`);
+    }
+
+    editor.apply({
+        type: 'set_selection',
+        properties: selection,
+        newProperties: target,
+    });
+};
+/** override */
+Transforms.setSelection = function (editor: Editor, props: any) {
+    const selection: any = editor.selection;
+    const oldProps: Record<string, any> = {};
+    const newProps: Record<string, any> = {};
+
+    if (!selection) {
+        return;
+    }
+
+    for (const k in props) {
+        if (
+            (k === 'anchor' &&
+                props.anchor != null &&
+                !Point.equals(props.anchor, selection.anchor)) ||
+            (k === 'focus' &&
+                props.focus != null &&
+                !Point.equals(props.focus, selection.focus)) ||
+            (k !== 'anchor' && k !== 'focus' && props[k] !== selection[k])
+        ) {
+            oldProps[k] = selection[k];
+            newProps[k] = props[k];
+        }
+    }
+
+    if (Object.keys(oldProps).length > 0) {
+        editor.apply({
+            type: 'set_selection',
+            properties: oldProps,
+            newProperties: newProps,
+        });
+    }
+};
+
+/** override */
+Editor.before = function (
+    editor: Editor,
+    at: Location,
+    options: {
+        distance?: number;
+        unit?: 'offset' | 'character' | 'word' | 'line' | 'block';
+        voids?: boolean;
+    } = {}
+): Point | undefined {
+    const anchor = Editor.start(editor, []);
+    const focus = Editor.point(editor, at, { edge: 'start' });
+    const range = { anchor, focus };
+    const { distance = 1, unit = 'offset' } = options;
+    let d = 0;
+    let target;
+
+    const positions = Editor.positions(editor, {
+        ...options,
+        at: range,
+        reverse: true,
+        unit,
+    });
+    for (const p of positions) {
+        if (d > distance) {
+            break;
+        }
+        if (d !== 0) {
+            target = p;
+        }
+        d++;
+    }
+
+    if (target) {
+        const { path, offset } = target;
+        // @ts-expect-error
+        const element = editor?.children?.[path[0]]?.children?.[path[1]];
+        const oldElement =
+            // @ts-expect-error
+            editor?.children?.[focus.path[0]]?.children?.[focus.path[1]];
+        if (element) {
+            if (isInlineAndVoid(editor, element)) {
+                // Inline entities need to be drilled out
+                // target = Editor.before(editor, target);
+                target = {
+                    path: [0, path[1] - 1],
+                    offset: 0,
+                };
+            } else if (editor.isInline(element) && !editor.isVoid(element)) {
+                // Inline styles such as hyperlinks need to drill directly into it
+                const inlineTextLength = element?.children?.[0]?.text?.length;
+                if (inlineTextLength === offset || offset === 0) {
+                    // This case should not exist, continue before
+                    target = Editor.before(editor, target);
+                }
+            } else if (
+                oldElement &&
+                oldElement.text &&
+                element.text &&
+                !('children' in element) &&
+                !Path.equals(path, focus.path) &&
+                !('children' in oldElement) &&
+                Editor.isEnd(editor, target, target.path)
+            ) {
+                // Simple rich text excessively needs to be in the previous one
+                target = Editor.before(editor, target);
+            }
+        }
+    }
+
+    return target;
+};
+
+/** override */
+Editor.after = function (
+    editor: Editor,
+    at: Location,
+    options: {
+        distance?: number;
+        unit?: 'offset' | 'character' | 'word' | 'line' | 'block';
+        voids?: boolean;
+    } = {}
+): Point | undefined {
+    const anchor = Editor.point(editor, at, { edge: 'end' });
+    const focus = Editor.end(editor, []);
+    const range = { anchor, focus };
+    const { distance = 1, unit = 'offset' } = options;
+    let d = 0;
+    let target;
+
+    for (const p of Editor.positions(editor, {
+        ...options,
+        at: range,
+        unit,
+    })) {
+        if (d > distance) {
+            break;
+        }
+
+        if (d !== 0) {
+            target = p;
+        }
+
+        d++;
+    }
+
+    if (target) {
+        const { path, offset } = target;
+        // @ts-expect-error
+        const element = editor?.children?.[path[0]]?.children?.[path[1]];
+        const oldElement =
+            // @ts-expect-error
+            editor?.children?.[anchor.path[0]]?.children?.[anchor.path[1]];
+        if (element) {
+            if (isInlineAndVoid(editor, element)) {
+                // Inline entities need to be drilled out
+                target = Editor.after(editor, target);
+            } else if (editor.isInline(element) && !editor.isVoid(element)) {
+                // Inline styles such as hyperlinks need to drill directly into it
+                const inlineTextLength = element?.children?.[0]?.text?.length;
+                if (inlineTextLength === offset || offset === 0) {
+                    // This case should not exist, continue after
+                    target = Editor.after(editor, target);
+                }
+            } else if (
+                oldElement &&
+                oldElement.text &&
+                element.text &&
+                !Path.equals(path, anchor.path) &&
+                !('children' in element) &&
+                !('children' in oldElement) &&
+                Editor.isStart(editor, target, target.path)
+            ) {
+                // Simple rich text is excessively required in the next one
+                target = Editor.after(editor, target);
+            }
+        }
+    }
+    return target;
+};
+
+type SelectionStartAndEnd = {
+    selectionStart: Point;
+    selectionEnd: Point;
+};
+
+export type Contents = {
+    contentBeforeSelection: {
+        content: Descendant[];
+        isEmpty: boolean;
+    };
+    contentAfterSelection: {
+        content: Descendant[];
+        isEmpty: boolean;
+    };
+};
+
+class SlateUtils {
+    public editor: ReactEditor;
+
+    /** save slate-selection before slate-editor lose focus  */
+    private previous_selection: Range | null;
+
+    constructor(editor: ReactEditor) {
+        this.editor = editor;
+        this.previous_selection = null;
+    }
+
+    public getSelectionStartAndEnd(
+        currentSelection?: Range
+    ): SelectionStartAndEnd | undefined {
+        const selection =
+            currentSelection || (this.editor && this.editor.selection);
+        if (!selection) {
+            return undefined;
+        }
+        const selectionCompareRes = Point.compare(
+            selection.focus,
+            selection.anchor
+        );
+        let selectionStart: Point, selectionEnd: Point;
+        switch (selectionCompareRes) {
+            case 1:
+                // focus is before anchor
+                selectionStart = selection.anchor;
+                selectionEnd = selection.focus;
+                break;
+            case 0:
+                // focus is the same as anchor
+                selectionStart = selectionEnd = selection.focus;
+                break;
+            case -1:
+                // focus after anchor
+                selectionStart = selection.focus;
+                selectionEnd = selection.anchor;
+                break;
+            default:
+                throw new Error('some thing is wrong');
+        }
+        return {
+            selectionStart,
+            selectionEnd,
+        };
+    }
+
+    public getContentBetween(point1: Point, point2: Point) {
+        const fragment = Editor.fragment(this.editor, {
+            anchor: point1,
+            focus: point2,
+        });
+        // @ts-ignore
+        return fragment[0].children;
+    }
+
+    public getSplitContentsBySelection() {
+        if (!this.editor) return undefined;
+        const { selectionStart, selectionEnd } = this.getSelectionStartAndEnd();
+        const start = this.getStart();
+        const end = this.getEnd();
+        return {
+            contentBeforeSelection: {
+                content: this.getContentBetween(start, selectionStart),
+                isEmpty: Point.equals(start, selectionStart),
+            },
+            contentAfterSelection: {
+                content: this.getContentBetween(selectionEnd, end),
+                isEmpty: Point.equals(end, selectionEnd),
+            },
+        } as Contents;
+    }
+
+    public isCollapsed() {
+        if (!this.editor) return false;
+        const selection = this.editor.selection;
+        if (!selection) return false;
+        return Range.isCollapsed(selection);
+    }
+
+    public isStart() {
+        if (this.isCollapsed()) {
+            return Point.equals(this.getStart(), this.editor.selection.focus);
+        }
+        return false;
+    }
+
+    public isSelectAll() {
+        if (!this.isCollapsed()) {
+            return isSelectAll(this.editor);
+        }
+        return false;
+    }
+
+    public isEnd() {
+        if (this.isCollapsed()) {
+            return Point.equals(this.getEnd(), this.editor.selection.focus);
+        }
+        return false;
+    }
+
+    public setPreviousSelection(selection: Range) {
+        this.previous_selection = selection;
+    }
+
+    public setPreviousSelectionToSlate() {
+        if (this.previous_selection) {
+            this.setSelection(this.previous_selection);
+        }
+    }
+
+    public getStart() {
+        return Editor.start(this.editor, {
+            path: [0, 0],
+            offset: 0,
+        });
+    }
+
+    public getEnd() {
+        return Editor.end(this.editor, [0]);
+    }
+
+    public getEndSelection() {
+        return {
+            anchor: this.getEnd(),
+            focus: this.getEnd(),
+        } as Range;
+    }
+
+    public getStringBetween(point1: Point, point2: Point) {
+        const str = Editor.string(this.editor, {
+            anchor: point1,
+            focus: point2,
+        });
+        return str;
+    }
+
+    public getString() {
+        return this.getStringBetween(this.getStart(), this.getEnd());
+    }
+
+    public getStringBetweenStartAndSelection() {
+        if (!this.editor) {
+            return undefined;
+        }
+        const { selectionEnd } = this.getSelectionStartAndEnd();
+        return this.getStringBetween(this.getStart(), selectionEnd);
+    }
+
+    public getStringBetweenSelection(shouldUsePreviousSelection = false) {
+        if (!this.editor) {
+            return undefined;
+        }
+        if (shouldUsePreviousSelection) {
+            this.setPreviousSelectionToSlate();
+        }
+        const { selectionStart, selectionEnd } = this.getSelectionStartAndEnd();
+        return this.getStringBetween(selectionStart, selectionEnd);
+    }
+
+    public getPathOfString(matRes: MatchRes) {
+        // @ts-ignore
+        const children = this.editor.children[0].children;
+        const { start, style } = matRes;
+        let startPoint: Point;
+        let endPoint: Point;
+        for (let i = 0; i < children.length; i++) {
+            if (Text.isText(children[i])) {
+                if (!startPoint) {
+                    const startOffset = children[i].text.indexOf(start);
+                    if (startOffset > -1) {
+                        startPoint = {
+                            offset: startOffset,
+                            path: [0, i],
+                        };
+                        continue;
+                    }
+                }
+            }
+        }
+        const { selectionEnd } = this.getSelectionStartAndEnd();
+        endPoint = { ...selectionEnd };
+        if (startPoint && endPoint) {
+            return {
+                startPoint,
+                endPoint,
+                style,
+            };
+        }
+        return null;
+    }
+
+    public turnStyleBetweenPoints(
+        startPoint: Point,
+        endPoint: Point,
+        style: string,
+        startLength: number
+    ) {
+        const at = {
+            anchor: startPoint,
+            focus: endPoint,
+        };
+        Transforms.select(this.editor, at);
+        const fragmentNode = this.editor.getFragment();
+        this.editor.deleteFragment();
+        let deleteLength = 0;
+        // @ts-ignore
+        const fragments = fragmentNode[0].children;
+        for (let i = 0; i < fragments.length; i++) {
+            const fragment = { ...fragments[i] };
+            // @ts-ignore
+            fragment[MARKDOWN_STYLE_MAP[style]] = true; // Give the style parsed by markdown
+            // Delete the last markdown syntax, there is a bug: if there are multiple markdown syntaxes at the end, and they are not in the same fragment, there will be problems
+            if (i === fragments.length - 1) {
+                // Assume that the markdown syntax is all in a fragment, and then change it later if there is a problem
+                for (let j = 0; j < startLength; j++) {
+                    fragment.text = fragment.text.slice(
+                        0,
+                        fragment.text.length - 1
+                    );
+                }
+            }
+            if (deleteLength !== startLength) {
+                // markdown syntax is not removed cleanly
+                if (fragment.text.length >= startLength - deleteLength) {
+                    // The length of the current fragment is greater than the length of the markdown syntax to be deleted, delete it directly
+                    fragment.text = fragment.text.slice(
+                        startLength - deleteLength
+                    );
+                    deleteLength = startLength;
+                    if (fragment.text) {
+                        this.editor.insertFragment([fragment]);
+                    }
+                } else {
+                    // The content of the current fragment is not enough to delete, how many can be deleted
+                    deleteLength += fragment.text.length;
+                }
+                continue;
+            }
+            this.editor.insertFragment([fragment]);
+        }
+    }
+
+    public setSelection(selection: Range, index?: number) {
+        if (!this.isSelectionSafe(selection)) {
+            return;
+        }
+        this.focus();
+        Transforms.select(this.editor, selection);
+    }
+
+    /** Get a safe selection, if it exceeds the limit, the bottom line is the first or last */
+    public isSelectionSafe(selection: Range) {
+        if (!Range.isRange(selection)) {
+            return false;
+        }
+        const { selectionEnd } = this.getSelectionStartAndEnd(selection);
+        const endPoint = this.getEnd();
+        const compare = Point.compare(selectionEnd, endPoint);
+        if (compare === 1) {
+            // beyond the end, give the end
+            return false;
+        }
+        return true;
+    }
+
+    /** Whether the selection is at the beginning */
+    public isSelectStart() {
+        return this.isSelectionEqualsInDom(this.getStartSelection());
+    }
+    /** Whether the selection is at the end */
+    public isSelectEnd() {
+        return this.isSelectionEqualsInDom(this.getEndSelection());
+    }
+
+    /** Is the selection consistent */
+    public isSelectionEqualsInDom(selection: Range) {
+        const sel = window.getSelection();
+        const currentSelection = ReactEditor.toSlateRange(this.editor, sel, {
+            exactMatch: false,
+            suppressThrow: false,
+        });
+        return Range.equals(selection, currentSelection);
+    }
+
+    public focus() {
+        ReactEditor.focus(this.editor);
+    }
+
+    public blur() {
+        ReactEditor.blur(this.editor);
+    }
+
+    /** get text styles in selection, like bold/italic */
+    public getStyleBySelection() {
+        const res = [];
+        const marks = Editor.marks(this.editor);
+        for (const key in marks) {
+            res.push(key);
+        }
+        return res;
+    }
+
+    public setStyleBySelection(format: string) {
+        Editor.addMark(this.editor, format, true);
+    }
+
+    public removeStyleBySelection(format: string) {
+        Editor.removeMark(this.editor, format);
+    }
+
+    public setTextFontColorBySelection(
+        color: keyof typeof fontColorPalette,
+        shouldUsePreviousSelection = false
+    ) {
+        if (shouldUsePreviousSelection) {
+            this.setPreviousSelectionToSlate();
+        }
+        Editor.addMark(this.editor, 'fontColor', fontColorPalette[color]);
+    }
+
+    public setTextFontBgColorBySelection(
+        bgColor: keyof typeof fontBgColorPalette,
+        shouldUsePreviousSelection = false
+    ) {
+        if (shouldUsePreviousSelection) {
+            this.setPreviousSelectionToSlate();
+        }
+        Editor.addMark(this.editor, 'fontBgColor', fontBgColorPalette[bgColor]);
+    }
+
+    public setCommentBySelection(
+        commentId: string,
+        status: 'default' | 'resolved' | 'active' = 'default',
+        shouldUsePreviousSelection = false
+    ) {
+        if (shouldUsePreviousSelection) {
+            this.setPreviousSelectionToSlate();
+        }
+        Editor.addMark(
+            this.editor,
+            getEditorMarkForCommentId(commentId),
+            status
+        );
+    }
+
+    public resolveCommentById(commentId: string) {
+        const commentMarkId = getEditorMarkForCommentId(commentId);
+        Transforms.setNodes(
+            this.editor,
+            { [commentMarkId]: 'resolved' } as Partial<SlateNode>,
+            {
+                at: [],
+                // @ts-ignore type mismatch only in production
+                match: n => Text.isText(n) && n[commentMarkId] !== 'resolved',
+            }
+        );
+    }
+
+    public toggleTextFormatBySelection(format: TextStyleMark) {
+        const isActive = this.isTextFormatActive(format);
+
+        if (isActive) {
+            Editor.removeMark(this.editor, format);
+        } else {
+            Editor.addMark(this.editor, format, true);
+        }
+    }
+
+    public isTextFormatActive(format: TextStyleMark) {
+        const marks = Editor.marks(this.editor) as any;
+        return marks ? marks[format] === true : false;
+    }
+
+    public setParagraphAlignBySelection(
+        style: TextAlignOptions,
+        shouldUsePreviousSelection = false
+    ) {
+        if (shouldUsePreviousSelection) {
+            this.setPreviousSelectionToSlate();
+        }
+        Transforms.setNodes(
+            this.editor,
+            { textAlign: style } as Partial<SlateNode>,
+            {
+                match: n => Editor.isBlock(this.editor, n),
+            }
+        );
+    }
+
+    public getStartSelection() {
+        return {
+            anchor: this.getStart(),
+            focus: this.getStart(),
+        } as Range;
+    }
+
+    public getCurrentSelection() {
+        if (!this.editor) return undefined;
+        return this.editor.selection;
+    }
+
+    public isEmpty() {
+        // @ts-ignore
+        const children = this.editor.children[0].children;
+        // @ts-ignore
+        return (
+            children.length === 1 &&
+            typeof children[0].text !== undefined &&
+            children[0].text === ''
+        );
+    }
+
+    public selectionToSlateRange(selection: Selection) {
+        try {
+            const currentSelection = ReactEditor.toSlateRange(
+                this.editor,
+                selection,
+                {
+                    exactMatch: false,
+                    suppressThrow: false,
+                }
+            );
+            return currentSelection;
+        } catch (error) {
+            return undefined;
+        }
+    }
+
+    public setSearchSlash(point: Point) {
+        const str = Editor.string(this.editor, {
+            anchor: this.getStart(),
+            focus: point,
+        });
+        if (str.endsWith('/')) {
+            // select the slash node
+            Transforms.select(this.editor, {
+                anchor: point,
+                focus: Object.assign({}, point, {
+                    offset: point.offset - 1,
+                }),
+            });
+            Editor.addMark(this.editor, 'search', true);
+            // set cursor back
+            Transforms.select(this.editor, {
+                anchor: this.editor.selection.anchor,
+                focus: this.editor.selection.anchor,
+            });
+        }
+    }
+
+    public getSearchSlashText() {
+        const nodes = Editor.nodes(this.editor, {
+            at: [],
+            //@ts-ignore
+            match: node => !!node.search,
+        });
+        const searchNode = nodes.next().value;
+        if (searchNode && (searchNode[0] as { text?: string }).text) {
+            return (searchNode[0] as { text?: string }).text;
+        }
+        return '';
+    }
+
+    public removeSearchSlash(isRemoveSlash?: boolean) {
+        if (isRemoveSlash) {
+            const nodes = Editor.nodes(this.editor, {
+                at: [],
+                //@ts-ignore
+                match: node => !!node.search,
+            });
+            const searchNode = nodes.next().value;
+            if (searchNode) {
+                const text = (searchNode[0] as { text?: string })?.text || '';
+                if (text.startsWith('/')) {
+                    const path = searchNode[1];
+                    Transforms.delete(this.editor, {
+                        at: {
+                            path,
+                            offset: 0,
+                        },
+                        distance: 1,
+                        unit: 'character',
+                    });
+                }
+            }
+        }
+        Transforms.setNodes(
+            this.editor,
+            { search: null } as Partial<SlateNode>,
+            {
+                at: [],
+                match: node => {
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    //@ts-ignore
+                    return !!node.search;
+                },
+                // split: true
+            }
+        );
+        this.editor.removeMark('search');
+    }
+
+    public removeSelection(selection: Selection) {
+        const range = this.selectionToSlateRange(selection);
+
+        this.editor.apply({
+            type: 'remove_node',
+            path: range.focus.path,
+            node: this.editor,
+        });
+    }
+
+    public insertReference(reference: string) {
+        try {
+            // Transforms.setSelection(this.editor, this.getEndSelection());
+            const { anchor, focus } = this.getEndSelection();
+            Transforms.insertNodes(
+                this.editor,
+                {
+                    type: 'reflink',
+                    reference,
+                    children: [],
+                },
+                { at: focus || anchor }
+            );
+
+            // requestAnimationFrame(() => {
+            //     console.log(this.editor.selection, this.editor.insertNode);
+            //     this.editor.insertNode({
+            //         type: 'reflink',
+            //         reference,
+            //         children: [{ text: '' }]
+            //     });
+            //     // Transforms.select();
+            // });
+        } catch (e) {
+            console.log(e);
+        }
+    }
+
+    /** todo  improve if selection is collapsed  */
+    public getCommentsIdsBySelection() {
+        const commentedTextNodes = Editor.nodes(this.editor, {
+            mode: 'lowest',
+            match: n => Text.isText(n) && getCommentsIdsOnTextNode(n).size > 0,
+        });
+        const commentsIds = new Set<string>();
+        let currentTextNode = commentedTextNodes.next().value;
+        while (currentTextNode) {
+            for (const id of getCommentsIdsOnTextNode(
+                currentTextNode[0] as any
+            )) {
+                commentsIds.add(id);
+            }
+            currentTextNode = commentedTextNodes.next().value;
+        }
+
+        return [...commentsIds];
+    }
+
+    public transformPoint(...args: Parameters<typeof Point.transform>) {
+        return Point.transform(...args);
+    }
+
+    public dispose() {
+        delete this.previous_selection;
+        delete this.editor;
+    }
+}
+
+export { SlateUtils };
diff --git a/libs/components/common/src/lib/text/utils.ts b/libs/components/common/src/lib/text/utils.ts
new file mode 100644
index 000000000..b05e5bdbd
--- /dev/null
+++ b/libs/components/common/src/lib/text/utils.ts
@@ -0,0 +1,76 @@
+import type { CustomElement } from '..';
+import { interceptMarks, MARKDOWN_REGS } from './constants';
+
+export const isInterceptCharacter = (str: string) => {
+    return interceptMarks.indexOf(str) > -1;
+};
+
+export enum MARKDOWN_STYLE_MAP {
+    BOLD = 'bold',
+    ITALIC = 'italic',
+    STRIKETHROUGH = 'strikethrough',
+    UNDER_LINE = 'underline',
+}
+
+export type MatchRes = {
+    start: string;
+    end: string;
+    style: string;
+    startLength: number;
+};
+
+export const matchMarkdown = (str: string) => {
+    const regs = MARKDOWN_REGS;
+    for (let i = 0; i < regs.length; i++) {
+        const matchResult = str.match(regs[i].reg);
+        if (matchResult && matchResult[0]) {
+            return {
+                start: regs[i].start,
+                end: regs[i].end,
+                style: regs[i].type,
+                startLength: regs[i].start.length,
+            } as MatchRes;
+        }
+    }
+    return undefined;
+};
+
+export const getRandomString = function (prefix: string) {
+    const x = 2147483648;
+    return `${prefix}.${Math.floor(Math.random() * x).toString(36)}${Math.abs(
+        Math.floor(Math.random() * x) ^ +new Date()
+    ).toString(36)}`;
+};
+
+const COMMENT_PREFIX_FOR_MARK = 'comment_id_';
+
+export const getEditorMarkForCommentId = (commentId: string) => {
+    return `${COMMENT_PREFIX_FOR_MARK}${commentId}`;
+};
+
+export const getCommentsIdsOnTextNode = (textNode: Record<string, unknown>) => {
+    const ids = Object.keys(textNode)
+        .filter(
+            maybeCommentMarkProp =>
+                maybeCommentMarkProp.startsWith(COMMENT_PREFIX_FOR_MARK) &&
+                textNode[maybeCommentMarkProp] !== 'resolved'
+        )
+        .map(commentMark => commentMark.replace(COMMENT_PREFIX_FOR_MARK, ''));
+    return new Set(ids);
+};
+
+const _usefulEditorLevelProps = ['textAlign'];
+/** get extra props from editor top level node; it's usually user custom props */
+export const getExtraPropertiesFromEditorOutmostNode = (
+    editorNode: CustomElement
+) => {
+    const textStyle = {} as Record<string, string>;
+    _usefulEditorLevelProps.forEach(p => {
+        if (p in editorNode) {
+            // @ts-ignore
+            textStyle[p] = editorNode[p] as string;
+        }
+    });
+
+    return textStyle;
+};
diff --git a/libs/components/common/src/lib/toolbar/index.tsx b/libs/components/common/src/lib/toolbar/index.tsx
new file mode 100644
index 000000000..2623e1081
--- /dev/null
+++ b/libs/components/common/src/lib/toolbar/index.tsx
@@ -0,0 +1,70 @@
+import { MuiTooltip as Tooltip } from '@toeverything/components/ui';
+
+import style9 from 'style9';
+
+const styles = style9.create({
+    toolbarContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        lineHeight: 1,
+        zIndex: 1,
+        padding: '0 8px',
+        backgroundColor: '#ffffff',
+        border: '1px solid #e1e1e1',
+        boxShadow: '0px 14px 24px rgba(51, 51, 51, 0.08)',
+        borderRadius: '4px',
+        color: '#333',
+        fontSize: '16px',
+        cursor: 'pointer',
+    },
+    toolbarItem: {
+        padding: '6px',
+        margin: '6px 2px',
+        ':hover': {
+            backgroundColor: '#f4f4f4',
+            borderRadius: '4px',
+        },
+    },
+    toolbarItemActive: {
+        color: '#502ec4',
+    },
+    line: {
+        margin: '0 8px',
+        width: '1px',
+        backgroundColor: '#e1e1e1',
+    },
+});
+
+interface Props {
+    data: any[];
+}
+
+export default function Toolbar({ data }: Props) {
+    return (
+        <div className={styles('toolbarContainer')}>
+            {data.map((item, index) => {
+                const { icon: Icon } = item;
+                return item.child ? (
+                    <span key={item.key} className={styles('toolbarItem')}>
+                        {item.child}
+                    </span>
+                ) : item.line ? (
+                    <div className={styles('line')} key={index}></div>
+                ) : (
+                    <Tooltip title={item.text} placement="top" key={item.key}>
+                        <span
+                            key={item.key}
+                            className={styles({
+                                toolbarItem: true,
+                                toolbarItemActive: !!item?.active,
+                            })}
+                            onClick={() => item?.action(item.key)}
+                        >
+                            <Icon />
+                        </span>
+                    </Tooltip>
+                );
+            })}
+        </div>
+    );
+}
diff --git a/libs/components/common/tsconfig.json b/libs/components/common/tsconfig.json
new file mode 100644
index 000000000..a3d52d01c
--- /dev/null
+++ b/libs/components/common/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,
+        "noImplicitAny": false,
+        "noFallthroughCasesInSwitch": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/components/common/tsconfig.lib.json b/libs/components/common/tsconfig.lib.json
new file mode 100644
index 000000000..0dda33329
--- /dev/null
+++ b/libs/components/common/tsconfig.lib.json
@@ -0,0 +1,22 @@
+{
+    "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": [
+        "**/*.spec.ts",
+        "**/*.test.ts",
+        "**/*.spec.tsx",
+        "**/*.test.tsx",
+        "**/*.spec.js",
+        "**/*.test.js",
+        "**/*.spec.jsx",
+        "**/*.test.jsx"
+    ],
+    "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/libs/components/common/tsconfig.spec.json b/libs/components/common/tsconfig.spec.json
new file mode 100644
index 000000000..ee70363dc
--- /dev/null
+++ b/libs/components/common/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "module": "commonjs",
+        "types": ["jest", "node"]
+    },
+    "include": [
+        "**/*.test.ts",
+        "**/*.spec.ts",
+        "**/*.test.tsx",
+        "**/*.spec.tsx",
+        "**/*.test.js",
+        "**/*.spec.js",
+        "**/*.test.jsx",
+        "**/*.spec.jsx",
+        "**/*.d.ts"
+    ]
+}
diff --git a/libs/components/editor-blocks/.babelrc b/libs/components/editor-blocks/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/components/editor-blocks/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/components/editor-blocks/.eslintrc.json b/libs/components/editor-blocks/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/components/editor-blocks/.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": {}
+        }
+    ]
+}
diff --git a/libs/components/editor-blocks/README.md b/libs/components/editor-blocks/README.md
new file mode 100644
index 000000000..bde29674d
--- /dev/null
+++ b/libs/components/editor-blocks/README.md
@@ -0,0 +1,7 @@
+# components-editor-blocks
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test components-editor-blocks` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/components/editor-blocks/jest.config.js b/libs/components/editor-blocks/jest.config.js
new file mode 100644
index 000000000..63a23be56
--- /dev/null
+++ b/libs/components/editor-blocks/jest.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+    displayName: 'components-editor-blocks',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/components/editor-blocks',
+};
diff --git a/libs/components/editor-blocks/package.json b/libs/components/editor-blocks/package.json
new file mode 100644
index 000000000..8fb5de9bd
--- /dev/null
+++ b/libs/components/editor-blocks/package.json
@@ -0,0 +1,46 @@
+{
+    "name": "@toeverything/components/editor-blocks",
+    "version": "0.0.1",
+    "license": "MIT",
+    "dependencies": {
+        "@codemirror/commands": "^6.0.1",
+        "@codemirror/lang-cpp": "~6.0.1",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-html": "~6.1.0",
+        "@codemirror/lang-java": "~6.0.0",
+        "@codemirror/lang-javascript": "~6.0.1",
+        "@codemirror/lang-json": "~6.0.0",
+        "@codemirror/lang-lezer": "~6.0.0",
+        "@codemirror/lang-markdown": "~6.0.0",
+        "@codemirror/lang-php": "~6.0.0",
+        "@codemirror/lang-python": "~6.0.0",
+        "@codemirror/lang-rust": "~6.0.0",
+        "@codemirror/lang-sql": "~6.0.0",
+        "@codemirror/lang-xml": "~6.0.0",
+        "@codemirror/language": "^6.2.0",
+        "@codemirror/legacy-modes": "~6.1.0",
+        "@codemirror/next": "^0.16.0",
+        "@codemirror/state": "^6.1.0",
+        "@codemirror/theme-one-dark": "^6.0.0",
+        "@codemirror/view": "^6.0.2",
+        "@dnd-kit/core": "^6.0.5",
+        "@dnd-kit/sortable": "^7.0.1",
+        "@dnd-kit/utilities": "^3.2.0",
+        "@emotion/react": "^11.9.3",
+        "@emotion/styled": "^11.9.3",
+        "@mui/system": "^5.8.6",
+        "code-example": "^3.3.6",
+        "codemirror": "6.0.1",
+        "keymap": "link:@codemirror/next/keymap",
+        "react-resizable": "^3.0.4",
+        "react-window": "^1.8.7",
+        "slate": "^0.81.1",
+        "slate-react": "^0.81.0",
+        "style9": "^0.13.3"
+    },
+    "devDependencies": {
+        "@types/codemirror": "^5.60.5",
+        "@types/react-resizable": "^3.0.1",
+        "@types/react-window": "^1.8.5"
+    }
+}
diff --git a/libs/components/editor-blocks/project.json b/libs/components/editor-blocks/project.json
new file mode 100644
index 000000000..952127b54
--- /dev/null
+++ b/libs/components/editor-blocks/project.json
@@ -0,0 +1,47 @@
+{
+    "sourceRoot": "libs/components/editor-blocks/src",
+    "projectType": "library",
+    "tags": ["components:editor-blocks"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/components/editor-blocks",
+                "tsConfig": "libs/components/editor-blocks/tsconfig.lib.json",
+                "project": "libs/components/editor-blocks/package.json",
+                "entryFile": "libs/components/editor-blocks/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "libs/rollup.config.cjs",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/components/editor-blocks/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/components/editor-blocks/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "check": {
+            "executor": "./tools/executors/tsCheck:tsCheck"
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/components/editor-blocks"],
+            "options": {
+                "jestConfig": "libs/components/editor-blocks/jest.config.js",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx b/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx
new file mode 100644
index 000000000..94ba65500
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx
@@ -0,0 +1,204 @@
+import type { TextProps } from '@toeverything/components/common';
+import {
+    ContentColumnValue,
+    services,
+    Protocol,
+} from '@toeverything/datasource/db-service';
+import { type CreateView } from '@toeverything/framework/virgo';
+import { useEffect, useRef, useState, type FC } from 'react';
+
+import {
+    TextManage,
+    type ExtendedTextUtils,
+} from '../../components/text-manage';
+import { tabBlock } from '../../utils/indent';
+import { BulletBlock, BulletProperties } from './types';
+import {
+    supportChildren,
+    RenderBlockChildren,
+    useOnSelect,
+    WrapperWithPendantAndDragDrop,
+} from '@toeverything/components/editor-core';
+import { List } from '../../components/style-container';
+import { getChildrenType, BulletIcon, NumberType } from './data';
+import { IndentWrapper } from '../../components/IndentWrapper';
+import { BlockContainer } from '../../components/BlockContainer';
+import { styled } from '@toeverything/components/ui';
+
+export const defaultBulletProps: BulletProperties = {
+    text: { value: [{ text: '' }] },
+    numberType: NumberType.type1,
+};
+const reset_todo_state = async (block: BulletBlock) => {
+    await block.setProperties({});
+};
+
+const todoIsEmpty = (contentValue: ContentColumnValue): boolean => {
+    const todoValue = contentValue.value;
+    return (
+        todoValue.length === 0 ||
+        (todoValue.length === 1 && !todoValue[0]['text'])
+    );
+};
+const BulletLeft = styled('div')(() => ({
+    height: '22px',
+}));
+export const BulletView: FC<CreateView> = ({ block, editor }) => {
+    // block.remove();
+    const properties = { ...defaultBulletProps, ...block.getProperties() };
+    const text_ref = useRef<ExtendedTextUtils>(null);
+    // const [type, set_type] = useState('type-1');
+    const [isSelect, setIsSelect] = useState<boolean>();
+
+    useOnSelect(block.id, (is_select: boolean) => {
+        setIsSelect(is_select);
+    });
+    const turn_into_text_block = async () => {
+        // Convert to text block
+        await block.setType('text');
+        await reset_todo_state(block);
+
+        if (!text_ref.current) {
+            throw new Error(
+                'Failed to set cursor position! text_ref is not exist!'
+            );
+        }
+        const currentSelection = text_ref.current.getStartSelection();
+        if (!currentSelection) {
+            throw new Error(
+                'Failed to get cursor selection! currentSelection is not exist!'
+            );
+        }
+        editor.selectionManager.setNodeActiveSelection(block.id, {
+            type: 'Range',
+            info: currentSelection,
+        });
+        // Update cursor position
+        // editor.selectionManager.setActivatedNodeId(block.id);
+        // editor.selectionManager.setNodeActiveSelection(block.id, {
+        //     type: 'Range',
+        //     info: currentSelection
+        // });
+    };
+    const i = 0;
+    const listChange = async () => {
+        const preBlock = await block.previousSiblings();
+        const parent_block = await block.parent();
+        let parent_number_type = parent_block.getProperty('numberType');
+        if (
+            !parent_number_type &&
+            parent_block.type === Protocol.Block.Type.bullet
+        ) {
+            parent_number_type = NumberType.type1;
+            parent_block.setProperty('numberType', parent_number_type);
+        }
+        block.setProperty('numberType', getChildrenType(parent_number_type));
+    };
+
+    useEffect(() => {
+        listChange();
+        let obj: any;
+        const parentChange = async () => {
+            const parent_block = await block.parent();
+            obj = await services.api.editorBlock.observe(
+                {
+                    workspace: editor.workspace,
+                    id: parent_block.id,
+                },
+                listChange
+            );
+        };
+        parentChange();
+        return () => {
+            obj?.();
+        };
+        // console.log('_parent_block: ', _parent_block);
+    }, []);
+
+    const on_text_enter: TextProps['handleEnter'] = async props => {
+        const { splitContents, isShiftKey } = props;
+        if (isShiftKey) {
+            return false;
+        }
+        const { contentBeforeSelection, contentAfterSelection } = splitContents;
+        const before = [...contentBeforeSelection.content];
+        const after = [...contentAfterSelection.content];
+        if (todoIsEmpty({ value: before } as ContentColumnValue)) {
+            await turn_into_text_block();
+            return true;
+        }
+
+        // Move children to new block
+        const children = await block.children();
+        await block.removeChildren();
+
+        const next_node = await editor.createBlock(Protocol.Block.Type.bullet);
+        if (!next_node) {
+            throw new Error('Failed to create todo block');
+        }
+        await next_node.append(...children);
+        await next_node.setProperties({
+            text: { value: after } as ContentColumnValue,
+        });
+        await block.setProperties({
+            text: { value: before } as ContentColumnValue,
+        });
+        await block.after(next_node);
+
+        editor.selectionManager.activeNodeByNodeId(next_node.id);
+
+        return true;
+    };
+    const on_tab: TextProps['handleTab'] = async ({ isShiftKey }) => {
+        if (!isShiftKey) {
+            const preSiblingBlock = await block.previousSibling();
+            if (preSiblingBlock && supportChildren(preSiblingBlock)) {
+                const copy_block = block;
+                block.remove();
+                block.removeChildren();
+                const block_children = await copy_block.children();
+                preSiblingBlock.append(copy_block, ...block_children);
+            }
+            return true;
+        } else {
+            return tabBlock(block, isShiftKey);
+        }
+    };
+
+    const on_backspace: TextProps['handleBackSpace'] = async ({
+        isCollAndStart,
+    }) => {
+        if (!isCollAndStart) {
+            return false;
+        }
+        await turn_into_text_block();
+        return true;
+    };
+
+    return (
+        <BlockContainer editor={editor} block={block} selected={isSelect}>
+            <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+                <List>
+                    <BulletLeft>
+                        <BulletIcon numberType={properties.numberType} />
+                    </BulletLeft>
+                    <div className={'textContainer'}>
+                        <TextManage
+                            ref={text_ref}
+                            editor={editor}
+                            block={block}
+                            supportMarkdown
+                            placeholder="/Bullet list"
+                            handleEnter={on_text_enter}
+                            handleBackSpace={on_backspace}
+                            handleTab={on_tab}
+                        />
+                    </div>
+                </List>
+            </WrapperWithPendantAndDragDrop>
+            <IndentWrapper>
+                <RenderBlockChildren block={block} />
+            </IndentWrapper>
+        </BlockContainer>
+    );
+};
diff --git a/libs/components/editor-blocks/src/blocks/bullet/data.tsx b/libs/components/editor-blocks/src/blocks/bullet/data.tsx
new file mode 100644
index 000000000..5c9575521
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/bullet/data.tsx
@@ -0,0 +1,34 @@
+import {
+    BulletedList_1Icon,
+    BulletedList_2Icon,
+    BulletedList_3Icon,
+    BulletedList_4Icon,
+} from '@toeverything/components/icons';
+export enum NumberType {
+    type1 = 'type1',
+    type2 = 'type2',
+    type3 = 'type3',
+    type4 = 'type4',
+}
+export function BulletIcon(props: any) {
+    const { numberType } = props;
+    if (numberType === NumberType.type2) {
+        return <BulletedList_2Icon />;
+    }
+    if (numberType === NumberType.type3) {
+        return <BulletedList_3Icon />;
+    }
+    if (numberType === NumberType.type4) {
+        return <BulletedList_4Icon />;
+    }
+    return <BulletedList_1Icon />;
+}
+
+export function getChildrenType(type: string) {
+    const typeMap: Record<string, string> = {
+        type1: 'type2',
+        type2: 'type3',
+        type3: 'type4',
+    };
+    return typeMap[type];
+}
diff --git a/libs/components/editor-blocks/src/blocks/bullet/index.ts b/libs/components/editor-blocks/src/blocks/bullet/index.ts
new file mode 100644
index 000000000..087afb305
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/bullet/index.ts
@@ -0,0 +1,92 @@
+import {
+    AsyncBlock,
+    BaseView,
+    CreateView,
+    getTextProperties,
+    SelectBlock,
+    getTextHtml,
+} from '@toeverything/framework/virgo';
+import {
+    Protocol,
+    DefaultColumnsValue,
+} from '@toeverything/datasource/db-service';
+// import { withTreeViewChildren } from '../../utils/with-tree-view-children';
+import { defaultBulletProps, BulletView } from './BulletView';
+import { IndentWrapper } from '../../components/IndentWrapper';
+
+export class BulletBlock extends BaseView {
+    public type = Protocol.Block.Type.bullet;
+
+    View = BulletView;
+
+    // override ChildrenView = IndentWrapper;
+
+    override async onCreate(block: AsyncBlock) {
+        if (!block.getProperty('text')) {
+            await block.setProperties(defaultBulletProps);
+        }
+        return block;
+    }
+
+    override getSelProperties(
+        block: AsyncBlock,
+        selectInfo: any
+    ): DefaultColumnsValue {
+        const properties = super.getSelProperties(block, selectInfo);
+        return getTextProperties(properties, selectInfo);
+    }
+
+    override html2block(
+        el: Element,
+        parseEl: (el: Element) => any[]
+    ): any[] | null {
+        const tag_name = el.tagName;
+        if (tag_name === 'UL') {
+            const result = [];
+            for (let i = 0; i < el.children.length; i++) {
+                const blocks_info = parseEl(el.children[i]);
+                result.push(...blocks_info);
+            }
+            return result.length > 0 ? result : null;
+        }
+
+        if (tag_name == 'LI' && !el.textContent.startsWith('[ ]  ')) {
+            const childNodes = el.childNodes;
+            const texts = [];
+            const children = [];
+            for (let i = 0; i < childNodes.length; i++) {
+                const blocks_info = parseEl(childNodes[i] as Element);
+                for (let j = 0; j < blocks_info.length; j++) {
+                    if (blocks_info[j].type === 'text') {
+                        const block_texts =
+                            blocks_info[j].properties.text.value;
+                        texts.push(...block_texts);
+                    } else {
+                        children.push(blocks_info[j]);
+                    }
+                }
+            }
+            return [
+                {
+                    type: this.type,
+                    properties: {
+                        text: { value: texts },
+                    },
+                    children: children,
+                },
+            ];
+        }
+
+        return null;
+    }
+
+    override async block2html(
+        block: AsyncBlock,
+        children: SelectBlock[],
+        generateHtml: (el: any[]) => Promise<string>
+    ): Promise<string> {
+        let content = getTextHtml(block);
+        content += await generateHtml(children);
+        return `<ul><li>${content}</li></ul>`;
+    }
+}
diff --git a/libs/components/editor-blocks/src/blocks/bullet/types.ts b/libs/components/editor-blocks/src/blocks/bullet/types.ts
new file mode 100644
index 000000000..193132ec1
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/bullet/types.ts
@@ -0,0 +1,18 @@
+import { AsyncBlock } from '@toeverything/framework/virgo';
+import type {
+    ContentColumnValue,
+    BooleanColumnValue,
+} from '@toeverything/datasource/db-service';
+
+export interface BulletProperties {
+    text: ContentColumnValue;
+    numberType: any;
+}
+
+export class BulletBlock extends AsyncBlock {
+    override setProperties(
+        properties: Partial<BulletProperties>
+    ): Promise<boolean> {
+        return super.setProperties(properties);
+    }
+}
diff --git a/libs/components/editor-blocks/src/blocks/code/CodeMirror.tsx b/libs/components/editor-blocks/src/blocks/code/CodeMirror.tsx
new file mode 100644
index 000000000..11bd0badf
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/code/CodeMirror.tsx
@@ -0,0 +1,154 @@
+import React, { useEffect, useRef, useImperativeHandle } from 'react';
+import { EditorState, EditorStateConfig, Extension } from '@codemirror/state';
+import { EditorView, ViewUpdate } from '@codemirror/view';
+import { useCodeMirror } from './use-code-mirror';
+
+export * from './use-code-mirror';
+
+export interface ReactCodeMirrorProps
+    extends Omit<EditorStateConfig, 'doc' | 'extensions'>,
+        Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'> {
+    /** value of the auto created model in the editor. */
+    value?: string;
+    height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    /** focus on the editor. */
+    autoFocus?: boolean;
+    /** Enables a placeholder—a piece of example content to show when the editor is empty. */
+    placeholder?: string | HTMLElement;
+    /**
+     * `light` / `dark` / `Extension` Defaults to `light`.
+     * @default light
+     */
+    theme?: 'light' | 'dark' | Extension;
+    /**
+     * Whether to optional basicSetup by default
+     * @default true
+     */
+    basicSetup?: boolean;
+    /**
+     * This disables editing of the editor content by the user.
+     * @default true
+     */
+    editable?: boolean;
+    readOnly?: boolean;
+    /**
+     * Whether to optional basicSetup by default
+     * @default true
+     */
+    indentWithTab?: boolean;
+    /** Fired whenever a change occurs to the document. */
+    onChange?(value: string, viewUpdate: ViewUpdate): void;
+    /** Fired whenever a change occurs to the document. There is a certain difference with `onChange`. */
+    onUpdate?(viewUpdate: ViewUpdate): void;
+    handleKeyArrowUp?: () => void;
+    handleKeyArrowDown?: () => void;
+    /**
+     * Extension values can be [provided](https://codemirror.net/6/docs/ref/#state.EditorStateConfig.extensions) when creating a state to attach various kinds of configuration and behavior information.
+     * They can either be built-in extension-providing objects,
+     * such as [state fields](https://codemirror.net/6/docs/ref/#state.StateField) or [facet providers](https://codemirror.net/6/docs/ref/#state.Facet.of),
+     * or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed.
+     */
+    extensions?: Extension[];
+    /**
+     * If the view is going to be mounted in a shadow root or document other than the one held by the global variable document (the default), you should pass it here.
+     * Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root)
+     */
+    root?: ShadowRoot | Document;
+}
+
+export interface ReactCodeMirrorRef {
+    editor?: HTMLDivElement | null;
+    state?: EditorState;
+    view?: EditorView;
+}
+
+const ReactCodeMirror = React.forwardRef<
+    ReactCodeMirrorRef,
+    ReactCodeMirrorProps
+>((props, ref) => {
+    const {
+        className,
+        value = '',
+        selection,
+        extensions = [],
+        onChange,
+        onUpdate,
+        handleKeyArrowUp,
+        handleKeyArrowDown,
+        autoFocus,
+        theme = 'light',
+        height,
+        minHeight,
+        maxHeight,
+        width,
+        minWidth,
+        maxWidth,
+        basicSetup,
+        placeholder,
+        indentWithTab,
+        editable,
+        readOnly,
+        root,
+        ...other
+    } = props;
+    const editor = useRef<HTMLDivElement>(null);
+    const { state, view, container, setContainer } = useCodeMirror({
+        container: editor.current,
+        root,
+        value,
+        autoFocus,
+        theme,
+        height,
+        minHeight,
+        maxHeight,
+        width,
+        minWidth,
+        maxWidth,
+        basicSetup,
+        placeholder,
+        indentWithTab,
+        editable,
+        readOnly,
+        selection,
+        onChange,
+        onUpdate,
+        extensions,
+        handleKeyArrowUp,
+        handleKeyArrowDown,
+    });
+    useImperativeHandle(ref, () => ({ editor: container, state, view }), [
+        container,
+        state,
+        view,
+    ]);
+    useEffect(() => {
+        setContainer(editor.current);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // check type of value
+    if (typeof value !== 'string') {
+        throw new Error(`value must be typeof string but got ${typeof value}`);
+    }
+
+    const defaultClassNames =
+        typeof theme === 'string' ? `cm-theme-${theme}` : 'cm-theme';
+    return (
+        <div
+            ref={editor}
+            className={`${defaultClassNames}${
+                className ? ` ${className}` : ''
+            }`}
+            {...other}
+        />
+    );
+});
+
+ReactCodeMirror.displayName = 'CodeMirror';
+
+export default ReactCodeMirror;
diff --git a/libs/components/editor-blocks/src/blocks/code/CodeView.tsx b/libs/components/editor-blocks/src/blocks/code/CodeView.tsx
new file mode 100644
index 000000000..e72928f29
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/code/CodeView.tsx
@@ -0,0 +1,220 @@
+import { FC, useState, useMemo, useRef, useEffect } from 'react';
+import { StyleWithAtRules } from 'style9';
+
+import { CreateView } from '@toeverything/framework/virgo';
+import CodeMirror from './CodeMirror';
+import { styled } from '@toeverything/components/ui';
+import DeleteSweepOutlinedIcon from '@mui/icons-material/DeleteSweepOutlined';
+
+import { javascript } from '@codemirror/lang-javascript';
+import { html } from '@codemirror/lang-html';
+import { css } from '@codemirror/lang-css';
+import { json } from '@codemirror/lang-json';
+import { python } from '@codemirror/lang-python';
+import { markdown } from '@codemirror/lang-markdown';
+import { xml } from '@codemirror/lang-xml';
+import { sql, MySQL, PostgreSQL } from '@codemirror/lang-sql';
+import { java } from '@codemirror/lang-java';
+import { rust } from '@codemirror/lang-rust';
+import { cpp } from '@codemirror/lang-cpp';
+import { lezer } from '@codemirror/lang-lezer';
+import { php } from '@codemirror/lang-php';
+import { StreamLanguage } from '@codemirror/language';
+import { go } from '@codemirror/legacy-modes/mode/go';
+import { ruby } from '@codemirror/legacy-modes/mode/ruby';
+import { shell } from '@codemirror/legacy-modes/mode/shell';
+import { lua } from '@codemirror/legacy-modes/mode/lua';
+import { swift } from '@codemirror/legacy-modes/mode/swift';
+import { tcl } from '@codemirror/legacy-modes/mode/tcl';
+import { yaml } from '@codemirror/legacy-modes/mode/yaml';
+import { vb } from '@codemirror/legacy-modes/mode/vb';
+import { powerShell } from '@codemirror/legacy-modes/mode/powershell';
+import { brainfuck } from '@codemirror/legacy-modes/mode/brainfuck';
+import { stylus } from '@codemirror/legacy-modes/mode/stylus';
+import { erlang } from '@codemirror/legacy-modes/mode/erlang';
+import { nginx } from '@codemirror/legacy-modes/mode/nginx';
+import { perl } from '@codemirror/legacy-modes/mode/perl';
+import { pascal } from '@codemirror/legacy-modes/mode/pascal';
+import { liveScript } from '@codemirror/legacy-modes/mode/livescript';
+import { scheme } from '@codemirror/legacy-modes/mode/scheme';
+import { toml } from '@codemirror/legacy-modes/mode/toml';
+import { vbScript } from '@codemirror/legacy-modes/mode/vbscript';
+import { clojure } from '@codemirror/legacy-modes/mode/clojure';
+import { coffeeScript } from '@codemirror/legacy-modes/mode/coffeescript';
+import { dockerFile } from '@codemirror/legacy-modes/mode/dockerfile';
+import { julia } from '@codemirror/legacy-modes/mode/julia';
+import { r } from '@codemirror/legacy-modes/mode/r';
+import { Extension } from '@codemirror/state';
+import { Select } from '../../components/select';
+import {
+    useOnSelect,
+    WrapperWithPendantAndDragDrop,
+} from '@toeverything/components/editor-core';
+interface CreateCodeView extends CreateView {
+    style9?: StyleWithAtRules;
+    containerClassName?: string;
+}
+const langs: Record<string, any> = {
+    javascript,
+    jsx: () => javascript({ jsx: true }),
+    typescript: () => javascript({ typescript: true }),
+    tsx: () => javascript({ jsx: true, typescript: true }),
+    json,
+    html,
+    css,
+    python,
+    markdown,
+    xml,
+    sql,
+    mysql: () => sql({ dialect: MySQL }),
+    pgsql: () => sql({ dialect: PostgreSQL }),
+    java,
+    rust,
+    cpp,
+    lezer,
+    php,
+    go: () => StreamLanguage.define(go),
+    shell: () => StreamLanguage.define(shell),
+    lua: () => StreamLanguage.define(lua),
+    swift: () => StreamLanguage.define(swift),
+    tcl: () => StreamLanguage.define(tcl),
+    yaml: () => StreamLanguage.define(yaml),
+    vb: () => StreamLanguage.define(vb),
+    powershell: () => StreamLanguage.define(powerShell),
+    brainfuck: () => StreamLanguage.define(brainfuck),
+    stylus: () => StreamLanguage.define(stylus),
+    erlang: () => StreamLanguage.define(erlang),
+    nginx: () => StreamLanguage.define(nginx),
+    perl: () => StreamLanguage.define(perl),
+    ruby: () => StreamLanguage.define(ruby),
+    pascal: () => StreamLanguage.define(pascal),
+    livescript: () => StreamLanguage.define(liveScript),
+    scheme: () => StreamLanguage.define(scheme),
+    toml: () => StreamLanguage.define(toml),
+    vbscript: () => StreamLanguage.define(vbScript),
+    clojure: () => StreamLanguage.define(clojure),
+    coffeescript: () => StreamLanguage.define(coffeeScript),
+    julia: () => StreamLanguage.define(julia),
+    dockerfile: () => StreamLanguage.define(dockerFile),
+    r: () => StreamLanguage.define(r),
+    // clike: () => StreamLanguage.define(clike),
+    // clike: () => clike({ }),
+};
+
+const CodeBlock = styled('div')(({ theme }) => ({
+    backgroundColor: '#f8f9fa',
+    border: '1px solid #e0e0e0',
+    '&:hover': {
+        '.operation': {
+            display: 'flex',
+        },
+    },
+    '.operation': {
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+        borderBottom: '1px solid #e0e0e0',
+        padding: '0 8px 0px',
+    },
+    '.delete-block': {
+        padding: '10px 4px 10px 10px',
+    },
+    '.cm-focused': {
+        outline: 'none !important',
+    },
+    '.select': {
+        marginTop: '10px',
+        select: {
+            border: 'none',
+            outline: 'none',
+            height: '22px',
+            lineHeight: theme.affine.typography.body1.lineHeight,
+            paddingLeft: '10px',
+            maxHeight: '400px',
+            background: '#f1f1f1',
+            borderRadius: '6px',
+        },
+    },
+}));
+export const CodeView: FC<CreateCodeView> = ({ block, editor }) => {
+    const init_value: string = block.getProperty('text')?.value?.[0]?.text;
+    const lang_type: string = block.getProperty('lang')?.value?.[0]?.text;
+    const [mode, setMode] = useState('javascript');
+    const [extensions, setExtensions] = useState<Extension[]>();
+    const codeMirror = useRef();
+    useOnSelect(block.id, (is_select: boolean) => {
+        if (codeMirror.current) {
+            //@ts-ignore
+            codeMirror?.current?.view?.focus();
+        }
+    });
+    const onChange = (value: any, codeEditor: any) => {
+        console.log(value);
+        block.setProperty('text', {
+            value: [{ text: value }],
+        });
+    };
+    useEffect(() => {
+        handleLangChange(lang_type ? lang_type : 'javascript');
+    }, []);
+    function handleLangChange(lang: string) {
+        block.setProperty('lang', lang);
+        setMode(lang);
+        setExtensions([langs[lang]()]);
+    }
+    const handle_remove_block = () => {
+        block.remove();
+    };
+    const handleKeyArrowDown = () => {
+        editor.selectionManager.activeNextNode(block.id, 'start');
+    };
+    const handleKeyArrowUp = () => {
+        editor.selectionManager.activePreviousNode(block.id, 'start');
+    };
+    return (
+        <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+            <CodeBlock
+                onKeyDown={e => {
+                    e.stopPropagation();
+                }}
+            >
+                <div className="operation">
+                    <div className="select">
+                        <Select
+                            label="Lang"
+                            options={Object.keys(langs)}
+                            value={mode}
+                            onChange={evn => handleLangChange(evn.target.value)}
+                        />
+                    </div>
+                    <div>
+                        <div
+                            className="delete-block"
+                            onClick={handle_remove_block}
+                        >
+                            <DeleteSweepOutlinedIcon
+                                className="delete-icon"
+                                fontSize="small"
+                                sx={{
+                                    color: 'rgba(0,0,0,.5)',
+                                    cursor: 'pointer',
+                                    '&:hover': { color: 'rgba(0,0,0,.9)' },
+                                }}
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <CodeMirror
+                    ref={codeMirror}
+                    value={init_value}
+                    height={'auto'}
+                    extensions={extensions}
+                    onChange={onChange}
+                    handleKeyArrowDown={handleKeyArrowDown}
+                    handleKeyArrowUp={handleKeyArrowUp}
+                />
+            </CodeBlock>
+        </WrapperWithPendantAndDragDrop>
+    );
+};
diff --git a/libs/components/editor-blocks/src/blocks/code/index.ts b/libs/components/editor-blocks/src/blocks/code/index.ts
new file mode 100644
index 000000000..9b089d6db
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/code/index.ts
@@ -0,0 +1,83 @@
+import {
+    BaseView,
+    AsyncBlock,
+    getTextProperties,
+    CreateView,
+    SelectBlock,
+    getTextHtml,
+} from '@toeverything/framework/virgo';
+import {
+    Protocol,
+    DefaultColumnsValue,
+} from '@toeverything/datasource/db-service';
+import { CodeView } from './CodeView';
+import { ComponentType } from 'react';
+
+export class CodeBlock extends BaseView {
+    type = Protocol.Block.Type.code;
+    public override selectable = true;
+    public override activatable = false;
+    // View = CodeView;
+    View = CodeView;
+    override async onCreate(block: AsyncBlock): Promise<AsyncBlock> {
+        if (!block.getProperty('text')) {
+            await block.setProperty('text', {
+                value: [{ text: '' }],
+            });
+        }
+        return block;
+    }
+
+    override getSelProperties(
+        block: AsyncBlock,
+        selectInfo: any
+    ): DefaultColumnsValue {
+        const properties = super.getSelProperties(block, selectInfo);
+        return getTextProperties(properties, selectInfo);
+    }
+
+    // TODO: internal format not implemented yet
+    override html2block(
+        el: Element,
+        parseEl: (el: Element) => any[]
+    ): any[] | null {
+        const tag_name = el.tagName;
+        if (tag_name === 'CODE') {
+            const childNodes = el.childNodes;
+            let text_value = '';
+            for (let i = 0; i < childNodes.length; i++) {
+                const blocks_info = parseEl(childNodes[i] as Element);
+                for (let j = 0; j < blocks_info.length; j++) {
+                    if (blocks_info[j].type === 'text') {
+                        const block_texts =
+                            blocks_info[j].properties.text.value;
+                        if (block_texts.length > 0) {
+                            text_value += block_texts[0].text;
+                        }
+                    }
+                }
+            }
+            return [
+                {
+                    type: this.type,
+                    properties: {
+                        text: { value: [{ text: text_value }] },
+                    },
+                    children: [],
+                },
+            ];
+        }
+
+        return null;
+    }
+
+    override async block2html(
+        block: AsyncBlock,
+        children: SelectBlock[],
+        generateHtml: (el: any[]) => Promise<string>
+    ): Promise<string> {
+        let content = getTextHtml(block);
+        content += await generateHtml(children);
+        return `<code>${content}</code>`;
+    }
+}
diff --git a/libs/components/editor-blocks/src/blocks/code/use-code-mirror.ts b/libs/components/editor-blocks/src/blocks/code/use-code-mirror.ts
new file mode 100644
index 000000000..29d5ed1d8
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/code/use-code-mirror.ts
@@ -0,0 +1,252 @@
+import { useEffect, useState } from 'react';
+// import { basicSetup, minimalSetup } from 'codemirror';
+import { EditorState, StateEffect, Extension } from '@codemirror/state';
+import {
+    indentWithTab,
+    defaultKeymap,
+    history,
+    historyKeymap,
+} from '@codemirror/commands';
+import {
+    EditorView,
+    keymap,
+    ViewUpdate,
+    placeholder,
+    highlightSpecialChars,
+    drawSelection,
+    highlightActiveLine,
+    dropCursor,
+    rectangularSelection,
+    crosshairCursor,
+    lineNumbers,
+    highlightActiveLineGutter,
+} from '@codemirror/view';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { ReactCodeMirrorProps } from './CodeMirror';
+
+import {
+    defaultHighlightStyle,
+    syntaxHighlighting,
+    indentOnInput,
+    bracketMatching,
+    foldGutter,
+    foldKeymap,
+} from '@codemirror/language';
+// import {searchKeymap, highlightSelectionMatches} from "@codemirror/search"
+// import {autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap} from "@codemirror/autocomplete"
+// import {lintKeymap} from "@codemirror/lint"
+
+export interface UseCodeMirror extends ReactCodeMirrorProps {
+    container?: HTMLDivElement | null;
+}
+
+const basicSetup: Extension = [
+    lineNumbers(),
+    highlightActiveLineGutter(),
+    highlightSpecialChars(),
+    history(),
+    foldGutter(),
+    drawSelection(),
+    dropCursor(),
+    EditorState.allowMultipleSelections.of(true),
+    indentOnInput(),
+    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+    bracketMatching(),
+    rectangularSelection(),
+    crosshairCursor(),
+    highlightActiveLine(),
+    keymap.of([...defaultKeymap, ...historyKeymap, ...foldKeymap]),
+];
+
+export function useCodeMirror(props: UseCodeMirror) {
+    const {
+        value,
+        selection,
+        onChange,
+        onUpdate,
+        handleKeyArrowUp,
+        handleKeyArrowDown,
+        extensions = [],
+        autoFocus,
+        theme = 'light',
+        height = '',
+        minHeight = '',
+        maxHeight = '',
+        placeholder: placeholderStr = '',
+        width = '',
+        minWidth = '',
+        maxWidth = '',
+        editable = true,
+        readOnly = false,
+        indentWithTab: defaultIndentWithTab = true,
+        basicSetup: defaultBasicSetup = true,
+
+        root,
+    } = props;
+    const [container, setContainer] = useState(props.container);
+    const [view, setView] = useState<EditorView>();
+    const [state, setState] = useState<EditorState>();
+    const defaultLightThemeOption = EditorView.theme(
+        {
+            '&': {
+                backgroundColor: '#fff',
+            },
+        },
+        {
+            dark: false,
+        }
+    );
+    const defaultThemeOption = EditorView.theme({
+        '&': {
+            height,
+            minHeight,
+            maxHeight,
+            width,
+            minWidth,
+            maxWidth,
+        },
+    });
+    const updateListener = EditorView.updateListener.of((vu: ViewUpdate) => {
+        if (vu.docChanged && typeof onChange === 'function') {
+            const doc = vu.state.doc;
+            const value = doc.toString();
+            onChange(value, vu);
+        }
+    });
+    // keymap.of([{''}])
+    // keymap.of()
+    const upFunction = [
+        {
+            key: 'ArrowUp',
+            run: () => {
+                handleKeyArrowUp();
+                return false;
+            },
+        },
+        {
+            key: 'ArrowDown',
+            run: (e: any) => {
+                handleKeyArrowDown();
+
+                return false;
+            },
+        },
+    ];
+    // completionKeymap
+
+    let getExtensions = [updateListener, keymap.of(upFunction)];
+
+    if (defaultIndentWithTab) {
+        getExtensions.unshift(keymap.of([indentWithTab]));
+    }
+    if (defaultBasicSetup) {
+        getExtensions.unshift(basicSetup);
+    }
+
+    if (placeholderStr) {
+        getExtensions.unshift(placeholder(placeholderStr));
+    }
+
+    switch (theme) {
+        case 'light':
+            getExtensions.push(defaultLightThemeOption);
+            break;
+        case 'dark':
+            getExtensions.push(oneDark);
+            break;
+        default:
+            getExtensions.push(theme);
+            break;
+    }
+
+    if (editable === false) {
+        getExtensions.push(EditorView.editable.of(false));
+    }
+    if (readOnly) {
+        getExtensions.push(EditorState.readOnly.of(true));
+    }
+
+    if (onUpdate && typeof onUpdate === 'function') {
+        getExtensions.push(EditorView.updateListener.of(onUpdate));
+    }
+    getExtensions.unshift(keymap.of([indentWithTab]));
+    getExtensions = getExtensions.concat(extensions);
+
+    useEffect(() => {
+        if (container && !state) {
+            const stateCurrent = EditorState.create({
+                doc: value,
+                selection,
+                extensions: getExtensions,
+            });
+            setState(stateCurrent);
+            if (!view) {
+                const viewCurrent = new EditorView({
+                    state: stateCurrent,
+                    parent: container,
+                    root,
+                });
+                setView(viewCurrent);
+            }
+        }
+        return () => {
+            if (view) {
+                setView(undefined);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [container, state]);
+
+    useEffect(
+        () => () => {
+            if (view) {
+                view.destroy();
+                setView(undefined);
+            }
+        },
+        [view]
+    );
+
+    useEffect(() => {
+        if (autoFocus && view) {
+            view.focus();
+        }
+    }, [autoFocus, view]);
+
+    useEffect(() => {
+        const currentValue = view ? view.state.doc.toString() : '';
+        if (view && value !== currentValue) {
+            view.dispatch({
+                changes: {
+                    from: 0,
+                    to: currentValue.length,
+                    insert: value || '',
+                },
+            });
+        }
+    }, [value, view]);
+
+    useEffect(() => {
+        if (view) {
+            view.dispatch({
+                effects: StateEffect.reconfigure.of(getExtensions),
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        theme,
+        extensions,
+        height,
+        minHeight,
+        maxHeight,
+        width,
+        placeholderStr,
+        minWidth,
+        maxWidth,
+        editable,
+        defaultIndentWithTab,
+        defaultBasicSetup,
+    ]);
+
+    return { state, setState, view, setView, container, setContainer };
+}
diff --git a/libs/components/editor-blocks/src/blocks/divider/divider-view.tsx b/libs/components/editor-blocks/src/blocks/divider/divider-view.tsx
new file mode 100644
index 000000000..7611f78f3
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/divider/divider-view.tsx
@@ -0,0 +1,37 @@
+import { FC, useState } from 'react';
+import { CreateView } from '@toeverything/framework/virgo';
+import { styled } from '@toeverything/components/ui';
+import { useOnSelect } from '@toeverything/components/editor-core';
+
+const DividerBlock = styled('div')<{ isSelected: boolean }>(
+    ({ isSelected }) => ({
+        margin: 0,
+        padding: '10px 0',
+        borderWidth: '2px',
+        borderStyle: 'solid',
+        borderColor: isSelected ? 'blue' : 'transparent',
+    })
+);
+
+const Line = styled('div')({
+    height: '1px',
+    backgroundColor: '#e2e8f0',
+});
+
+export const DividerView: FC<CreateView> = ({ block, editor }) => {
+    const [isSelected, setIsSelected] = useState(false);
+
+    useOnSelect(block.id, (isSelect: boolean) => {
+        setIsSelected(isSelect);
+    });
+
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        editor.selectionManager.setSelectedNodesIds([block.id]);
+    };
+
+    return (
+        <DividerBlock isSelected={isSelected} onClick={handleClick}>
+            <Line />
+        </DividerBlock>
+    );
+};
diff --git a/libs/components/editor-blocks/src/blocks/divider/index.ts b/libs/components/editor-blocks/src/blocks/divider/index.ts
new file mode 100644
index 000000000..6d67611cd
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/divider/index.ts
@@ -0,0 +1,39 @@
+import {
+    AsyncBlock,
+    BaseView,
+    SelectBlock,
+} from '@toeverything/framework/virgo';
+import { Protocol } from '@toeverything/datasource/db-service';
+import { DividerView } from './divider-view';
+
+export class DividerBlock extends BaseView {
+    type = Protocol.Block.Type.divider;
+    View = DividerView;
+    override html2block(
+        el: Element,
+        parseEl: (el: Element) => any[]
+    ): any[] | null {
+        const tag_name = el.tagName;
+        if (tag_name === 'HR') {
+            return [
+                {
+                    type: this.type,
+                    properties: {
+                        text: {},
+                    },
+                    children: [],
+                },
+            ];
+        }
+
+        return null;
+    }
+
+    override async block2html(
+        block: AsyncBlock,
+        children: SelectBlock[],
+        generateHtml: (el: any[]) => Promise<string>
+    ): Promise<string> {
+        return `<hr>`;
+    }
+}
diff --git a/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx b/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx
new file mode 100644
index 000000000..ac073abdb
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx
@@ -0,0 +1,58 @@
+import { FC, useState } from 'react';
+import { CreateView } from '@toeverything/framework/virgo';
+import {
+    WrapperWithPendantAndDragDrop,
+    useOnSelect,
+} from '@toeverything/components/editor-core';
+import { Upload } from '../../components/upload/upload';
+import { SourceView } from '../../components/source-view';
+import { LinkContainer } from '../../components/style-container';
+
+const MESSAGES = {
+    ADD_EMBED_LINK: 'Add embed link',
+};
+
+type EmbedLinkView = CreateView;
+export const EmbedLinkView: FC<EmbedLinkView> = props => {
+    const { block, editor } = props;
+    const [isSelect, setIsSelect] = useState(false);
+
+    const [embedLinkUrl, setEmbedLinkUrl] = useState<string>(
+        block.getProperty('embedLink')?.value
+    );
+
+    useOnSelect(block.id, (isSelect: boolean) => {
+        setIsSelect(isSelect);
+    });
+
+    const onEmbedLinkUrlChange = async (link: string) => {
+        const DEMO_URL = 'https://affine.pro/';
+        const value = link ? link : DEMO_URL;
+        setEmbedLinkUrl(value);
+        block.setProperty('embedLink', { value: value, name: 'embedLink' });
+    };
+
+    return (
+        <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+            <LinkContainer>
+                {embedLinkUrl ? (
+                    <SourceView
+                        block={block}
+                        editorElement={props.editorElement}
+                        isSelected={isSelect}
+                        viewType="embedLink"
+                        link={embedLinkUrl}
+                    />
+                ) : (
+                    <Upload
+                        firstCreate={block.firstCreateFlag}
+                        uploadType={'embedLink'}
+                        savaLink={onEmbedLinkUrlChange}
+                        defaultAddBtnText={MESSAGES.ADD_EMBED_LINK}
+                        isSelected={isSelect}
+                    />
+                )}
+            </LinkContainer>
+        </WrapperWithPendantAndDragDrop>
+    );
+};
diff --git a/libs/components/editor-blocks/src/blocks/embed-link/index.ts b/libs/components/editor-blocks/src/blocks/embed-link/index.ts
new file mode 100644
index 000000000..731ae801d
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/embed-link/index.ts
@@ -0,0 +1,47 @@
+import {
+    AsyncBlock,
+    BaseView,
+    SelectBlock,
+} from '@toeverything/framework/virgo';
+import { Protocol } from '@toeverything/datasource/db-service';
+import { EmbedLinkView } from './EmbedLinkView';
+
+export class EmbedLinkBlock extends BaseView {
+    public override selectable = true;
+    public override activatable = false;
+    type = Protocol.Block.Type.embedLink;
+    View = EmbedLinkView;
+
+    override html2block(
+        el: Element,
+        parseEl: (el: Element) => any[]
+    ): any[] | null {
+        const tag_name = el.tagName;
+        if (tag_name === 'A' && el.parentElement?.childElementCount === 1) {
+            return [
+                {
+                    type: this.type,
+                    properties: {
+                        // TODO: Not sure what value to fill for name
+                        embedLink: {
+                            name: this.type,
+                            value: el.getAttribute('href'),
+                        },
+                    },
+                    children: [],
+                },
+            ];
+        }
+
+        return null;
+    }
+
+    override async block2html(
+        block: AsyncBlock,
+        children: SelectBlock[],
+        generateHtml: (el: any[]) => Promise<string>
+    ): Promise<string> {
+        const figma_url = block.getProperty('embedLink')?.value;
+        return `<p><a src=${figma_url}>${figma_url}</p>`;
+    }
+}
diff --git a/libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx b/libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx
new file mode 100644
index 000000000..1dbaef3e1
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx
@@ -0,0 +1,57 @@
+import { FC, useState } from 'react';
+import { CreateView } from '@toeverything/framework/virgo';
+import {
+    useOnSelect,
+    WrapperWithPendantAndDragDrop,
+} from '@toeverything/components/editor-core';
+import { Upload } from '../../components/upload/upload';
+import { SourceView } from '../../components/source-view';
+import { styled } from '@toeverything/components/ui';
+import { LinkContainer } from '../../components/style-container';
+
+const MESSAGES = {
+    ADD_FIGMA_LINK: 'Add figma link',
+};
+
+interface FigmaView extends CreateView {
+    figmaUrl?: string;
+}
+export const FigmaView: FC<FigmaView> = ({ block, editor }) => {
+    const [figmaUrl, setFigmaUrl] = useState<string>(
+        block.getProperty('embedLink')?.value
+    );
+
+    const onFigmaUrlChange = async (link: string) => {
+        setFigmaUrl(link);
+        block.setProperty('embedLink', { value: link, name: 'figma' });
+    };
+    const [isSelect, setIsSelect] = useState<boolean>();
+    useOnSelect(block.id, (isSelect: boolean) => {
+        setIsSelect(isSelect);
+    });
+    return (
+        <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+            <LinkContainer>
+                {figmaUrl ? (
+                    <SourceView
+                        block={block}
+                        viewType="figma"
+                        link={figmaUrl}
+                        isSelected={isSelect}
+                    />
+                ) : (
+                    <Upload
+                        firstCreate={block.firstCreateFlag}
+                        uploadType={'figma'}
+                        savaLink={onFigmaUrlChange}
+                        deleteFile={() => {
+                            block.remove();
+                        }}
+                        defaultAddBtnText={MESSAGES.ADD_FIGMA_LINK}
+                        isSelected={isSelect}
+                    />
+                )}
+            </LinkContainer>
+        </WrapperWithPendantAndDragDrop>
+    );
+};
diff --git a/libs/components/editor-blocks/src/blocks/figma/index.ts b/libs/components/editor-blocks/src/blocks/figma/index.ts
new file mode 100644
index 000000000..b3e0b76b8
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/figma/index.ts
@@ -0,0 +1,50 @@
+import {
+    AsyncBlock,
+    BaseView,
+    SelectBlock,
+} from '@toeverything/framework/virgo';
+import { Protocol, services } from '@toeverything/datasource/db-service';
+import { FigmaView } from './FigmaView';
+
+export class FigmaBlock extends BaseView {
+    public override selectable = true;
+    public override activatable = false;
+    type = Protocol.Block.Type.figma;
+    View = FigmaView;
+
+    override html2block(
+        el: Element,
+        parseEl: (el: Element) => any[]
+    ): any[] | null {
+        const tag_name = el.tagName;
+        if (tag_name === 'A' && el.parentElement?.childElementCount === 1) {
+            const href = el.getAttribute('href');
+            if (href.indexOf('.figma.com') !== -1) {
+                return [
+                    {
+                        type: this.type,
+                        properties: {
+                            // TODO: Not sure what value to fill for name
+                            embedLink: {
+                                name: this.type,
+                                value: el.getAttribute('href'),
+                            },
+                        },
+                        children: [],
+                    },
+                ];
+            }
+        }
+
+        return null;
+    }
+
+    override async block2html(
+        block: AsyncBlock,
+        children: SelectBlock[],
+        generateHtml: (el: any[]) => Promise<string>
+    ): Promise<string> {
+        const figma_url = block.getProperty('embedLink')?.value;
+        return `<p><a src=${figma_url}>${figma_url}</p>`;
+    }
+}
diff --git a/libs/components/editor-blocks/src/blocks/file/FileView.tsx b/libs/components/editor-blocks/src/blocks/file/FileView.tsx
new file mode 100644
index 000000000..819bb5a5d
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/file/FileView.tsx
@@ -0,0 +1,124 @@
+import { FC, useState, useEffect, useRef } from 'react';
+import { CreateView } from '@toeverything/framework/virgo';
+import { Upload } from '../../components/upload/upload';
+import { services, FileColumnValue } from '@toeverything/datasource/db-service';
+import { styled } from '@toeverything/components/ui';
+import { useOnSelect } from '@toeverything/components/editor-core';
+type FileView = CreateView;
+const MESSAGES = {
+    ADD_AN_FILE: 'Add an file',
+};
+
+const FileViewContainer = styled('div')<{ isSelected: boolean }>(
+    ({ theme, isSelected }) => {
+        return {
+            borderRadius: theme.affine.shape.xsBorderRadius,
+            border: `1px solid ${
+                isSelected ? theme.affine.palette.primary : '#e0e0e0'
+            }`,
+            width: '100%',
+            background: '#f7f7f7',
+            padding: '15px 10px',
+            display: 'flex',
+            marginTop: '10px',
+            marginBottom: '10px',
+            '.file-name': {
+                fontWeight: 600,
+                maxWidth: '100px',
+                display: 'inline-block',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                cursor: 'pointer',
+            },
+            '.file-size': {
+                color: '#666',
+                paddingLeft: '10px',
+            },
+            '.delete': {
+                display: 'none',
+                float: 'right',
+            },
+            '&:hover': {
+                background: '#eee',
+                '.delete': {
+                    display: 'inline-block',
+                },
+            },
+        };
+    }
+);
+export const FileView: FC<FileView> = ({ block, editor }) => {
+    const [fileUrl, setFileUrl] = useState<string>();
+    const fileInfo = block.getProperty('file') || ({} as FileColumnValue);
+    const file_id = fileInfo.value;
+
+    useEffect(() => {
+        if (file_id) {
+            services.api.file.get(file_id, editor.workspace).then(fileInfo => {
+                setFileUrl(fileInfo.url);
+            });
+        }
+    }, [editor.workspace, file_id]);
+    const [isSelect, setIsSelect] = useState<boolean>();
+    useOnSelect(block.id, (is_select: boolean) => {
+        setIsSelect(is_select);
+    });
+    const down_ref = useRef(null);
+    const onFileChange = async (file: File) => {
+        const result = await services.api.file.create({
+            workspace: editor.workspace,
+            file: file,
+        });
+        setFileUrl(result.url);
+        block.setProperty('file', {
+            value: result.id,
+            name: file.name,
+            size: file.size,
+            type: file.type,
+        });
+    };
+    const deleteFile = () => {
+        block.remove();
+    };
+    const downFile = () => {
+        if (down_ref) {
+            down_ref.current.click();
+        }
+    };
+
+    return (
+        <div>
+            {fileUrl ? (
+                // <div>
+                //     <DownloadIcon onClick={down_file} className="delete-icon" fontSize="small" sx={{ color: '#fff', cursor: 'pointer', marginRight: '10px' }}></DownloadIcon>
+                //     <DeleteSweepOutlinedIcon onClick={delete_file} className="delete-icon" fontSize="small" sx={{ color: '#fff', cursor: 'pointer' }}></DeleteSweepOutlinedIcon>
+                //     <a href={file_url} ref={down_ref} style={{ display: 'none' }} download="text.png">
+                //         &nbsp;
+                //     </a>
+                // </div>
+                <FileViewContainer isSelected={isSelect}>
+                    <span onClick={downFile} className="file-name">
+                        {fileInfo.name}
+                    </span>
+                    <span className="file-size"> {fileInfo.size}kb</span>
+                    <a
+                        href={fileUrl}
+                        ref={down_ref}
+                        style={{ display: 'none' }}
+                        download={fileInfo.name}
+                    />
+                </FileViewContainer>
+            ) : (
+                <Upload
+                    uploadType={'file'}
+                    firstCreate={block.firstCreateFlag}
+                    fileChange={onFileChange}
+                    deleteFile={deleteFile}
+                    defaultAddBtnText={MESSAGES.ADD_AN_FILE}
+                    isSelected={isSelect}
+                />
+            )}
+        </div>
+    );
+};
diff --git a/libs/components/editor-blocks/src/blocks/file/index.ts b/libs/components/editor-blocks/src/blocks/file/index.ts
new file mode 100644
index 000000000..e55eed772
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/file/index.ts
@@ -0,0 +1,33 @@
+import {
+    AsyncBlock,
+    BaseView,
+    SelectBlock,
+} from '@toeverything/framework/virgo';
+import {
+    FileColumnValue,
+    Protocol,
+    services,
+} from '@toeverything/datasource/db-service';
+import { FileView } from './FileView';
+
+export class FileBlock extends BaseView {
+    public override selectable = true;
+    public override activatable = false;
+    type = Protocol.Block.Type.file;
+    View = FileView;
+
+    override async block2html(
+        block: AsyncBlock,
+        children: SelectBlock[],
+        generateHtml: (el: any[]) => Promise<string>
+    ): Promise<string> {
+        const file_property =
+            block.getProperty('file') || ({} as FileColumnValue);
+        const file_id = file_property.value;
+        let file_info = null;
+        if (file_id) {
+            file_info = await services.api.file.get(file_id, block.workspace);
+        }
+        return `<p><a src=${file_info?.url}>${file_property?.name}</p>`;
+    }
+}
diff --git a/libs/components/editor-blocks/src/blocks/grid-item/GridItem.tsx b/libs/components/editor-blocks/src/blocks/grid-item/GridItem.tsx
new file mode 100644
index 000000000..ae4f7581d
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/grid-item/GridItem.tsx
@@ -0,0 +1,131 @@
+import { FC, useEffect, useLayoutEffect, useRef } from 'react';
+import { ChildrenView } from '@toeverything/framework/virgo';
+import { styled } from '@toeverything/components/ui';
+import { sleep } from '@toeverything/utils';
+import { GRID_ITEM_MIN_WIDTH, GRID_PROPERTY_KEY, removePercent } from '../grid';
+
+export const GRID_ITEM_CLASS_NAME = 'grid-item';
+export const GRID_ITEM_CONTENT_CLASS_NAME = `${GRID_ITEM_CLASS_NAME}-content`;
+
+export const GridItem: FC<ChildrenView> = function (props) {
+    const { children, block } = props;
+    const RENDER_DELAY_TIME = 100;
+    const ref = useRef<HTMLDivElement>();
+
+    useLayoutEffect(() => {
+        if (block && ref.current) {
+            block.dom = ref.current;
+        }
+    });
+
+    const setWidth = (width: string) => {
+        const parent = ref.current?.parentElement as HTMLDivElement;
+        parent.style.width = width;
+    };
+
+    const checkAndRefreshWidth = async () => {
+        const currentWidth = block.getProperty(GRID_PROPERTY_KEY);
+        if (currentWidth) {
+            setWidth(currentWidth);
+        } else if (!block.dom?.style.width) {
+            const parent = await block.parent();
+            const children = await parent.children();
+            const length = children.length;
+            /* TODO fix db update time is not controllable */
+            await sleep(RENDER_DELAY_TIME);
+            /* if do not has gridItemWidth means it is a new block ,need set new width */
+            if (!block.getProperty(GRID_PROPERTY_KEY)) {
+                /* only new grid has two grid */
+                if (length <= 2) {
+                    block.setProperty(GRID_PROPERTY_KEY, '50%');
+                    setWidth('50%');
+                } else {
+                    const newBlockLength = Math.floor(100 / length);
+                    let totalWidth = newBlockLength;
+                    let index = 0;
+                    const minus = newBlockLength / (length - 1);
+                    setWidth(`${newBlockLength}%`);
+                    await block.setProperty(
+                        GRID_PROPERTY_KEY,
+                        `${newBlockLength}%`
+                    );
+                    let needFixWidth = 0;
+                    for (const child of children) {
+                        if (child.id !== block.id) {
+                            /* fix other block`s width */
+                            const originWidth = Number(
+                                removePercent(
+                                    child.getProperty(GRID_PROPERTY_KEY)
+                                )
+                            );
+                            let newWidth;
+                            newWidth = Math.floor(originWidth - minus);
+                            /*
+                                if new width less then min width,
+                                set min width and next block will be fix width
+                            */
+                            if (newWidth < GRID_ITEM_MIN_WIDTH) {
+                                needFixWidth += GRID_ITEM_MIN_WIDTH - newWidth;
+                                newWidth = GRID_ITEM_MIN_WIDTH;
+                            }
+                            // if can fix width, fix width
+                            if (
+                                newWidth > GRID_ITEM_MIN_WIDTH &&
+                                needFixWidth
+                            ) {
+                                if (
+                                    newWidth - needFixWidth >=
+                                    GRID_ITEM_MIN_WIDTH
+                                ) {
+                                    newWidth = newWidth - needFixWidth;
+                                    needFixWidth = 0;
+                                } else {
+                                    needFixWidth =
+                                        needFixWidth -
+                                        (newWidth - GRID_ITEM_MIN_WIDTH);
+                                    newWidth = GRID_ITEM_MIN_WIDTH;
+                                }
+                            }
+                            if (index === children.length - 2) {
+                                // the last other block width should be 100% - other totalWidth
+                                newWidth = Math.floor(100 - totalWidth);
+                            }
+                            totalWidth += newWidth;
+                            await child.setProperty(
+                                GRID_PROPERTY_KEY,
+                                `${newWidth}%`
+                            );
+                            if (child.dom.parentElement) {
+                                child.dom.parentElement.style.width = `${newWidth}%`;
+                            }
+                            index += 1;
+                        }
+                    }
+                }
+            }
+        }
+    };
+
+    useEffect(() => {
+        checkAndRefreshWidth();
+    }, [block]);
+
+    return (
+        <GridItemContainer
+            data-block-id={props.block.id}
+            className={GRID_ITEM_CONTENT_CLASS_NAME}
+            ref={ref}
+        >
+            {children}
+        </GridItemContainer>
+    );
+};
+
+const GridItemContainer = styled('div')({
+    transition: 'background-color 0.3s ease-in-out',
+    maxWidth: 'calc(100% - 10px)',
+    padding: '4px',
+    flexGrow: 1,
+    border: '1px solid transparent',
+    borderRadius: '4px',
+});
diff --git a/libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx b/libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx
new file mode 100644
index 000000000..ee7146879
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx
@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { RenderBlock } from '@toeverything/components/editor-core';
+import { ChildrenView, CreateView } from '@toeverything/framework/virgo';
+
+export const GridItemRender = function (creator: FC<ChildrenView>) {
+    const GridItem: FC<CreateView> = function (props) {
+        const { block } = props;
+        const children = (
+            <>
+                {block.childrenIds.map(id => {
+                    return <RenderBlock key={id} blockId={id} />;
+                })}
+            </>
+        );
+        return <>{creator({ ...props, children })}</>;
+    };
+    return GridItem;
+};
diff --git a/libs/components/editor-blocks/src/blocks/grid-item/index.ts b/libs/components/editor-blocks/src/blocks/grid-item/index.ts
new file mode 100644
index 000000000..88d5023cf
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/grid-item/index.ts
@@ -0,0 +1,25 @@
+import { GridItem, GRID_ITEM_CLASS_NAME } from './GridItem';
+
+import { Protocol } from '@toeverything/datasource/db-service';
+import { AsyncBlock, BaseView } from '@toeverything/framework/virgo';
+import { GridItemRender } from './GridItemRender';
+
+export class GridItemBlock extends BaseView {
+    public override selectable = false;
+    public override activatable = false;
+    public override allowPendant = false;
+
+    type = Protocol.Block.Type.grid;
+    View = GridItemRender(GridItem);
+
+    override async onCreate(block: AsyncBlock): Promise<AsyncBlock> {
+        return block;
+    }
+
+    override async onDeleteChild(block: AsyncBlock): Promise<boolean> {
+        if (block.childrenIds.length === 0) {
+            await block.remove();
+        }
+        return true;
+    }
+}
diff --git a/libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx b/libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx
new file mode 100644
index 000000000..aea646cbb
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx
@@ -0,0 +1,111 @@
+import type { FC } from 'react';
+import { useState } from 'react';
+import { styled } from '@toeverything/components/ui';
+import { BlockEditor } from '@toeverything/framework/virgo';
+
+type GridHandleProps = {
+    editor: BlockEditor;
+    onDrag?: (e: MouseEvent) => void;
+    onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+    blockId: string;
+    enabledAddItem: boolean;
+    draggable: boolean;
+};
+
+export const GridHandle: FC<GridHandleProps> = function ({
+    blockId,
+    editor,
+    enabledAddItem,
+    onDrag,
+    onMouseDown,
+    draggable,
+}) {
+    const [isMouseDown, setIsMouseDown] = useState<boolean>(false);
+    const handleMouseDown: React.MouseEventHandler<HTMLDivElement> = e => {
+        if (draggable) {
+            const cb = (e: MouseEvent) => {
+                onDrag && onDrag(e);
+            };
+            onMouseDown && onMouseDown(e);
+            setIsMouseDown(true);
+            editor.mouseManager.onMouseMove(cb);
+            editor.mouseManager.onMouseupEventOnce(() => {
+                setIsMouseDown(false);
+                editor.mouseManager.offMouseMove(cb);
+            });
+        }
+    };
+    const handleCreateGridItem = async () => {
+        const [, textBlock] =
+            await editor.commands.blockCommands.createGridItem(blockId);
+        if (textBlock) {
+            editor.selectionManager.setActivatedNodeId(textBlock.id);
+        }
+    };
+    return (
+        <GridHandleContainer
+            style={
+                isMouseDown
+                    ? {
+                          backgroundColor: '#3E6FDB',
+                      }
+                    : {}
+            }
+            onMouseDown={handleMouseDown}
+        >
+            {enabledAddItem ? (
+                <AddGridHandle
+                    onClick={handleCreateGridItem}
+                    className="grid-add-handle"
+                >
+                    +
+                </AddGridHandle>
+            ) : null}
+        </GridHandleContainer>
+    );
+};
+
+const GridHandleContainer = styled('div')(({ theme }) => ({
+    position: 'relative',
+    width: '10px',
+    flexGrow: '0',
+    flexShrink: '0',
+    padding: '5px 4px',
+    minHeight: '15px',
+    cursor: 'col-resize',
+    borderRadius: '1px',
+    backgroundClip: 'content-box',
+    ' &:hover': {
+        backgroundColor: theme.affine.palette.primary,
+        '.grid-add-handle': {
+            display: 'block',
+        },
+    },
+}));
+
+const AddGridHandle = styled('div')(({ theme }) => ({
+    display: 'none',
+    position: 'absolute',
+    transition: 'all 0.2s ease-in-out',
+    height: '6px',
+    width: '6px',
+    borderRadius: '6px',
+    top: '-6px',
+    left: '2px',
+    cursor: 'pointer',
+    backgroundColor: theme.affine.palette.menuSeparator,
+    color: theme.affine.palette.menuSeparator,
+    overflow: 'hidden',
+    fontWeight: 'bold',
+    lineHeight: '18px',
+    textAlign: 'center',
+    ' &:hover': {
+        width: '20px',
+        height: '20px',
+        borderRadius: '10px',
+        backgroundColor: theme.affine.palette.primary,
+        color: theme.affine.palette.white,
+        top: '-20px',
+        left: '-5px',
+    },
+}));
diff --git a/libs/components/editor-blocks/src/blocks/grid/Grid.tsx b/libs/components/editor-blocks/src/blocks/grid/Grid.tsx
new file mode 100644
index 000000000..16b0920a0
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/grid/Grid.tsx
@@ -0,0 +1,242 @@
+import { RenderBlock } from '@toeverything/components/editor-core';
+import { CreateView } from '@toeverything/framework/virgo';
+import React, { FC, useEffect, useRef, useState } from 'react';
+import { GridHandle } from './GirdHandle';
+import { styled } from '@toeverything/components/ui';
+import ReactDOM from 'react-dom';
+import {
+    GRID_ITEM_CLASS_NAME,
+    GRID_ITEM_CONTENT_CLASS_NAME,
+} from '../grid-item/GridItem';
+import { debounce, domToRect, Point } from '@toeverything/utils';
+import clsx from 'clsx';
+import { Protocol } from '@toeverything/datasource/db-service';
+
+const MAX_ITEM_COUNT = 6;
+const DB_UPDATE_DELAY = 50;
+const GRID_ON_DRAG_CLASS = 'grid-layout-on-drag';
+export const GRID_ITEM_MIN_WIDTH = 100 / MAX_ITEM_COUNT;
+export const GRID_PROPERTY_KEY = 'gridItemWidth';
+
+export function removePercent(str: string) {
+    return str.replace('%', '');
+}
+
+export const Grid: FC<CreateView> = function (props) {
+    const { block, editor } = props;
+    const [isOnDrag, setIsOnDrag] = useState<boolean>(false);
+    const isSetMouseUp = useRef<boolean>(false);
+    const GridContainerRef = useRef<HTMLDivElement>();
+    const mouseStartPoint = useRef<Point>();
+    const gridItemCountRef = useRef<number>();
+    const originalLeftWidth = useRef<number>(GRID_ITEM_MIN_WIDTH);
+    const originalRightWidth = useRef<number>(GRID_ITEM_MIN_WIDTH);
+
+    const getLeftRightGridItemDomByIndex = (index: number) => {
+        const gridItems = Array.from(GridContainerRef.current?.children).filter(
+            child => {
+                return child.classList.contains(GRID_ITEM_CLASS_NAME);
+            }
+        ) as Array<HTMLDivElement>;
+        const leftGrid = gridItems[index];
+        const rightGrid = gridItems[index + 1];
+        return { leftGrid, rightGrid };
+    };
+
+    useEffect(() => {
+        mayBeRefreshGridItemWidth();
+    }, [block.childrenIds]);
+
+    const mayBeRefreshGridItemWidth = async () => {
+        const gridItems = (await block.children()).filter(
+            child => child.type === Protocol.Block.Type.gridItem
+        );
+        if (gridItems.length < gridItemCountRef.current) {
+            let totalWidth = 0;
+            const widthList = [];
+            for (const gridItem of gridItems) {
+                const itemWidth = Number(
+                    removePercent(gridItem.getProperty(GRID_PROPERTY_KEY))
+                );
+                totalWidth += itemWidth;
+                widthList.push(itemWidth);
+            }
+            if (totalWidth < 100) {
+                const plus = (100 - totalWidth) / gridItems.length;
+                let totalNewWidth = 0;
+                let index = 0;
+                for (const gridItem of gridItems) {
+                    const newWidth = widthList.pop() + plus;
+                    let newWidthStr = `${newWidth}%`;
+                    if (index === gridItems.length - 1) {
+                        newWidthStr = `${100 - totalNewWidth}%`;
+                    }
+                    if (gridItem.dom) {
+                        setItemWidth(
+                            gridItem.dom.parentElement as HTMLDivElement,
+                            newWidthStr
+                        );
+                    }
+                    await gridItem.setProperty(GRID_PROPERTY_KEY, newWidthStr);
+                    totalNewWidth += newWidth;
+                    index += 1;
+                }
+            }
+        }
+        gridItemCountRef.current = gridItems.length;
+    };
+
+    const handleMouseDown = (
+        e: React.MouseEvent<HTMLDivElement>,
+        index: number
+    ) => {
+        mouseStartPoint.current = new Point(e.clientX, e.clientY);
+        const { leftGrid, rightGrid } = getLeftRightGridItemDomByIndex(index);
+        originalLeftWidth.current = domToRect(leftGrid).width;
+        originalRightWidth.current = domToRect(rightGrid).width;
+        // disable the default behavior of the drag event (selection about)
+        e.stopPropagation();
+    };
+
+    const updateDbWidth = debounce(
+        async (
+            leftBlockId: string,
+            leftWidth: string,
+            rightBlockId: string,
+            rightWidth: string
+        ) => {
+            const leftBlock = await editor.getBlockById(leftBlockId);
+            const rightBlock = await editor.getBlockById(rightBlockId);
+            leftBlock?.setProperty(GRID_PROPERTY_KEY, leftWidth);
+            rightBlock?.setProperty(GRID_PROPERTY_KEY, rightWidth);
+        },
+        DB_UPDATE_DELAY
+    );
+
+    const setItemWidth = (itemDom: HTMLDivElement, width: string) => {
+        itemDom.style.width = width;
+    };
+
+    const handleDragGrid = (e: MouseEvent, index: number) => {
+        setIsOnDrag(true);
+        window.getSelection().removeAllRanges();
+        if (!isSetMouseUp.current) {
+            isSetMouseUp.current = true;
+            editor.mouseManager.onMouseupEventOnce(() => {
+                setIsOnDrag(false);
+                isSetMouseUp.current = false;
+                originalLeftWidth.current = GRID_ITEM_MIN_WIDTH;
+                originalRightWidth.current = GRID_ITEM_MIN_WIDTH;
+                mouseStartPoint.current = null;
+            });
+        } else {
+            const { leftGrid, rightGrid } =
+                getLeftRightGridItemDomByIndex(index);
+            const leftBlockId = block.childrenIds[index];
+            const rightBlockId = block.childrenIds[index + 1];
+            if (
+                leftGrid &&
+                rightGrid &&
+                mouseStartPoint.current &&
+                GridContainerRef.current
+            ) {
+                const currentMousePoint = new Point(e.clientX, e.clientY);
+                const totalWidth =
+                    Number(removePercent(leftGrid.style.width)) +
+                    Number(removePercent(rightGrid.style.width));
+                const containerWidth = domToRect(
+                    GridContainerRef.current
+                ).width;
+                const xDistance =
+                    mouseStartPoint.current.xDistance(currentMousePoint);
+                const newLeftWidth = originalLeftWidth.current - xDistance;
+                let newLeftPercent = (newLeftWidth / containerWidth) * 100;
+                let newRightPercent = Number(totalWidth) - newLeftPercent;
+                if (newLeftPercent < GRID_ITEM_MIN_WIDTH) {
+                    newLeftPercent = GRID_ITEM_MIN_WIDTH;
+                    newRightPercent = totalWidth - GRID_ITEM_MIN_WIDTH;
+                } else if (newRightPercent < GRID_ITEM_MIN_WIDTH) {
+                    newRightPercent = GRID_ITEM_MIN_WIDTH;
+                    newLeftPercent = totalWidth - GRID_ITEM_MIN_WIDTH;
+                }
+                //XXX first change dom style is for animation speed, maybe not a good idea
+                const newLeft = `${newLeftPercent}%`;
+                const newRight = `${newRightPercent}%`;
+                setItemWidth(leftGrid, newLeft);
+                setItemWidth(rightGrid, newRight);
+                updateDbWidth(leftBlockId, newLeft, rightBlockId, newRight);
+            }
+        }
+    };
+
+    const children = (
+        <>
+            {block.childrenIds.map((id, i) => {
+                return (
+                    <GridItem
+                        style={{
+                            transition: isOnDrag
+                                ? 'none'
+                                : 'width 0.2s ease-in-out',
+                        }}
+                        key={id}
+                        className={GRID_ITEM_CLASS_NAME}
+                    >
+                        <RenderBlock hasContainer={false} blockId={id} />
+                        <GridHandle
+                            onDrag={event => handleDragGrid(event, i)}
+                            editor={editor}
+                            onMouseDown={event => handleMouseDown(event, i)}
+                            blockId={id}
+                            enabledAddItem={
+                                block.childrenIds.length < MAX_ITEM_COUNT
+                            }
+                            draggable={i !== block.childrenIds.length - 1}
+                        />
+                    </GridItem>
+                );
+            })}
+        </>
+    );
+
+    return (
+        <>
+            <GridContainer
+                className={clsx({ [GRID_ON_DRAG_CLASS]: isOnDrag })}
+                ref={GridContainerRef}
+            >
+                {children}
+            </GridContainer>
+            {isOnDrag
+                ? ReactDOM.createPortal(<GridMask />, window.document.body)
+                : null}
+        </>
+    );
+};
+
+const GridContainer = styled('div')({
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'stretch',
+    minWidth: `${GRID_ITEM_MIN_WIDTH}%`,
+    [`&:hover .${GRID_ITEM_CONTENT_CLASS_NAME}`]: {
+        backgroundColor: 'rgba(100, 106, 115, 0.05)',
+    },
+});
+
+const GridMask = styled('div')({
+    position: 'fixed',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 9999,
+    cursor: 'col-resize',
+    pointerEvents: 'all',
+});
+
+const GridItem = styled('div')({
+    display: 'flex',
+    flexShrink: 0,
+    flexGrow: 0,
+});
diff --git a/libs/components/editor-blocks/src/blocks/grid/GridRender.tsx b/libs/components/editor-blocks/src/blocks/grid/GridRender.tsx
new file mode 100644
index 000000000..d18cbd79e
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/grid/GridRender.tsx
@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { CreateView } from '@toeverything/framework/virgo';
+import { BlockContainer } from '../../components/BlockContainer';
+
+export function GridRender(creator: FC<CreateView>) {
+    return function GridWithItem(props: CreateView) {
+        const { editor, block } = props;
+        return (
+            <BlockContainer editor={editor} block={block} selected={false}>
+                {creator({ ...props })}
+            </BlockContainer>
+        );
+    };
+}
diff --git a/libs/components/editor-blocks/src/blocks/grid/index.ts b/libs/components/editor-blocks/src/blocks/grid/index.ts
new file mode 100644
index 000000000..984bd8271
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/grid/index.ts
@@ -0,0 +1,40 @@
+import { Grid } from './Grid';
+import { Protocol } from '@toeverything/datasource/db-service';
+import { AsyncBlock, BaseView } from '@toeverything/framework/virgo';
+import { GridItem } from '../grid-item/GridItem';
+import { GridRender } from './GridRender';
+export { GRID_ITEM_MIN_WIDTH, GRID_PROPERTY_KEY, removePercent } from './Grid';
+
+export class GridBlock extends BaseView {
+    public override selectable = false;
+    public override activatable = false;
+    public override allowPendant = false;
+
+    type = Protocol.Block.Type.grid;
+    View = GridRender(Grid);
+
+    override ChildrenView = GridItem;
+
+    override async onCreate(block: AsyncBlock): Promise<AsyncBlock> {
+        return block;
+    }
+
+    override async onDeleteChild(block: AsyncBlock): Promise<boolean> {
+        if (block.childrenIds.length === 1) {
+            // the children of grid will always be a grid item
+            const firstChildren = await block.childAt(0);
+            const itemChildren = await firstChildren.children();
+            const beforeBlock = await block.previousSibling();
+            if (beforeBlock) {
+                await beforeBlock.after(...itemChildren);
+            } else {
+                const parent = await block.parent();
+                if (parent) {
+                    await parent.prepend(...itemChildren);
+                }
+            }
+            return block.remove();
+        }
+        return true;
+    }
+}
diff --git a/libs/components/editor-blocks/src/blocks/group/Group.tsx b/libs/components/editor-blocks/src/blocks/group/Group.tsx
new file mode 100644
index 000000000..610b2e135
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/Group.tsx
@@ -0,0 +1,37 @@
+import { withRecastTable } from '@toeverything/components/editor-core';
+import { Protocol } from '@toeverything/datasource/db-service';
+import {
+    AsyncBlock,
+    BaseView,
+    SelectBlock,
+} from '@toeverything/framework/virgo';
+import { GroupView } from './GroupView';
+
+export class Group extends BaseView {
+    public override selectable = true;
+    public override activatable = false;
+    public override allowPendant = false;
+
+    type = Protocol.Block.Type.group;
+    View = withRecastTable(GroupView);
+
+    override async onDeleteChild(block: AsyncBlock): Promise<boolean> {
+        if (block.childrenIds.length === 0) {
+            await block.remove();
+        }
+        return true;
+    }
+
+    override async onCreate(block: AsyncBlock): Promise<AsyncBlock> {
+        return block;
+    }
+
+    override async block2html(
+        block: AsyncBlock,
+        children: SelectBlock[],
+        generateHtml: (el: any[]) => Promise<string>
+    ): Promise<string> {
+        const content = await generateHtml(children);
+        return `<div>${content}<div>`;
+    }
+}
diff --git a/libs/components/editor-blocks/src/blocks/group/GroupMenu.tsx b/libs/components/editor-blocks/src/blocks/group/GroupMenu.tsx
new file mode 100644
index 000000000..7ee5c2292
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/GroupMenu.tsx
@@ -0,0 +1,237 @@
+import { useState } from 'react';
+import type { ReactNode } from 'react';
+import {
+    mergeToPreviousGroup,
+    RecastScene,
+    useRecastBlockScene,
+    useRecastKanbanGroupBy,
+} from '@toeverything/components/editor-core';
+import { Popover, useTheme, Tooltip } from '@toeverything/components/ui';
+import type { AsyncBlock, BlockEditor } from '@toeverything/framework/virgo';
+import { Filter } from './components/filter';
+import { Sorter } from './components/sorter';
+import { GroupPanel } from './components/group-panel/GroupPanel';
+import { IconButton } from './components/IconButton';
+import { Line } from './components/Line';
+import {
+    TodoListIcon,
+    KanBanIcon,
+    TableIcon,
+    FilterIcon,
+    SortIcon,
+    FullScreenIcon,
+    GroupIcon,
+    GroupByIcon,
+} from '@toeverything/components/icons';
+import { PANEL_CONFIG, SCENE_CONFIG } from './config';
+
+import type { ActivePanel } from './types';
+import { useFlag } from '@toeverything/datasource/feature-flags';
+import { GroupBy } from './components/group-by/GroupBy';
+
+const GroupMenuWrapper = ({
+    block,
+    editor,
+    children,
+}: {
+    block: AsyncBlock;
+    editor: BlockEditor;
+    children: ReactNode;
+}) => {
+    /* feature flag: sprint14 close Filter、Sort feature */
+    const filterSorterFlag = useFlag('FilterSorter', false);
+    const { scene, setPage, setKanban, setTable } = useRecastBlockScene();
+    const { groupBy } = useRecastKanbanGroupBy();
+    const theme = useTheme();
+
+    /* state: add active-style */
+    const [activePanel, setActivePanel] = useState<ActivePanel>(
+        PANEL_CONFIG.GROUP_BY
+    );
+    /* state: open panel */
+    const [openPanel, setOpenPanel] = useState<ActivePanel>(null);
+
+    /**
+     * close panel state/active state
+     */
+    const closePanel = () => {
+        if (!groupBy?.id) {
+            setActivePanel(null);
+        }
+
+        setOpenPanel(null);
+    };
+
+    /**
+     * change open panel: if target is current, close panel; else change
+     * update active panel
+     * @param panel
+     */
+    const onPanelChange = (panel: ActivePanel) => {
+        if (openPanel === panel) {
+            return closePanel();
+        }
+
+        setActivePanel(panel);
+        setOpenPanel(panel);
+    };
+
+    return (
+        <Popover
+            placement="top-end"
+            zIndex={theme.affine.zIndex.header - 1}
+            content={
+                <GroupPanel>
+                    <IconButton
+                        active={scene === SCENE_CONFIG.PAGE}
+                        onClick={setPage}
+                    >
+                        <TodoListIcon fontSize="small" />
+                        <span>Text View</span>
+                    </IconButton>
+                    <IconButton
+                        active={scene === SCENE_CONFIG.KANBAN}
+                        onClick={setKanban}
+                    >
+                        <KanBanIcon fontSize="small" />
+                        Kanban
+                    </IconButton>
+                    {
+                        // // Closed beta period temporarily
+                        // filterSorterFlag && (
+                        //     <IconButton
+                        //         active={scene === SCENE_CONFIG.TABLE}
+                        //         onClick={setTable}
+                        //     >
+                        //         <TableIcon fontSize="small" />
+                        //         Table View
+                        //     </IconButton>
+                        // )
+                        <Tooltip content={'Comming Soon'} placement="top">
+                            <IconButton
+                                active={scene === SCENE_CONFIG.TABLE}
+                                style={{ cursor: 'not-allowed' }}
+                            >
+                                <TableIcon fontSize="small" />
+                                Table
+                            </IconButton>
+                        </Tooltip>
+                    }
+                    <Tooltip content={'Comming Soon'} placement="top">
+                        <IconButton
+                            active={scene === SCENE_CONFIG.TABLE}
+                            style={{ cursor: 'not-allowed' }}
+                        >
+                            <KanBanIcon fontSize="small" />
+                            Calendar
+                        </IconButton>
+                    </Tooltip>
+                    <Tooltip content={'Comming Soon'} placement="top">
+                        <IconButton
+                            active={scene === SCENE_CONFIG.TABLE}
+                            style={{ cursor: 'not-allowed' }}
+                        >
+                            <TableIcon fontSize="small" />
+                            Timeline
+                        </IconButton>
+                    </Tooltip>
+                    <Tooltip content={'Comming Soon'} placement="top">
+                        <IconButton
+                            active={scene === SCENE_CONFIG.TABLE}
+                            style={{ cursor: 'not-allowed' }}
+                        >
+                            <KanBanIcon fontSize="small" />
+                            BI
+                        </IconButton>
+                    </Tooltip>
+
+                    {
+                        // Closed beta period temporarily
+                        filterSorterFlag && (
+                            <IconButton
+                                active={activePanel === PANEL_CONFIG.FILTER}
+                                extraStyle={{ position: 'relative' }}
+                                onClick={() =>
+                                    onPanelChange(PANEL_CONFIG.FILTER)
+                                }
+                            >
+                                <FilterIcon fontSize="small" />
+                                Filter
+                                {openPanel === PANEL_CONFIG.FILTER && (
+                                    <Filter
+                                        block={block}
+                                        closePanel={closePanel}
+                                    />
+                                )}
+                            </IconButton>
+                        )
+                    }
+
+                    {
+                        // Closed beta period temporarily
+                        filterSorterFlag &&
+                            currentView.type === RecastScene.Kanban && (
+                                <IconButton
+                                    active={activePanel === PANEL_CONFIG.SORTER}
+                                    onClick={() =>
+                                        onPanelChange(PANEL_CONFIG.SORTER)
+                                    }
+                                >
+                                    <SortIcon fontSize="small" />
+                                    Sort
+                                    {openPanel === PANEL_CONFIG.SORTER && (
+                                        <Sorter
+                                            block={block}
+                                            closePanel={closePanel}
+                                        />
+                                    )}
+                                </IconButton>
+                            )
+                    }
+
+                    {scene === RecastScene.Kanban && (
+                        <IconButton
+                            active={activePanel === PANEL_CONFIG.GROUP_BY}
+                            onClick={() => onPanelChange(PANEL_CONFIG.GROUP_BY)}
+                        >
+                            <GroupByIcon fontSize="small" />
+                            GroupBy
+                            {openPanel === PANEL_CONFIG.GROUP_BY && (
+                                <GroupBy closePanel={closePanel} />
+                            )}
+                        </IconButton>
+                    )}
+
+                    {filterSorterFlag && <Line />}
+
+                    {
+                        // Closed beta period temporarily
+                        filterSorterFlag && (
+                            <IconButton extraStyle={{ width: 32 }}>
+                                <FullScreenIcon fontSize="small" />
+                            </IconButton>
+                        )
+                    }
+
+                    {
+                        // Closed beta period temporarily
+                        filterSorterFlag && (
+                            <IconButton
+                                extraStyle={{ width: 32 }}
+                                onClick={async () => {
+                                    await mergeToPreviousGroup(block);
+                                }}
+                            >
+                                <GroupIcon fontSize="small" />
+                            </IconButton>
+                        )
+                    }
+                </GroupPanel>
+            }
+        >
+            {children}
+        </Popover>
+    );
+};
+
+export { GroupMenuWrapper };
diff --git a/libs/components/editor-blocks/src/blocks/group/GroupView.tsx b/libs/components/editor-blocks/src/blocks/group/GroupView.tsx
new file mode 100644
index 000000000..f98ece720
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/GroupView.tsx
@@ -0,0 +1,120 @@
+import {
+    addNewGroup,
+    RecastScene,
+    useOnSelect,
+    useRecastBlockScene,
+} from '@toeverything/components/editor-core';
+import { SceneKanban } from './scene-kanban';
+import { ScenePage } from './ScenePage';
+import { SceneTable } from './SceneTable';
+import { GroupMenuWrapper } from './GroupMenu';
+import { styled } from '@toeverything/components/ui';
+import { useState } from 'react';
+import type { FC, ComponentType } from 'react';
+import type { CreateView } from '@toeverything/framework/virgo';
+
+const SceneMap: Record<RecastScene, ComponentType<CreateView>> = {
+    page: ScenePage,
+    table: SceneTable,
+    kanban: SceneKanban,
+    whiteboard: ScenePage,
+} as const;
+
+const GroupBox = styled('div')(({ theme }) => {
+    return {
+        '&:hover': {
+            // Workaround referring to other components
+            // See https://emotion.sh/docs/styled#targeting-another-emotion-component
+            // [GroupActionWrapper.toString()]: {},
+            '& > *': {
+                visibility: 'visible',
+            },
+        },
+    };
+});
+
+const GroupActionWrapper = styled('div')(({ theme }) => ({
+    height: '30px',
+    display: 'flex',
+    visibility: 'hidden',
+    fontSize: theme.affine.typography.xs.fontSize,
+    color: theme.affine.palette.icons,
+    '.line': {
+        flex: 1,
+        height: '15px',
+        borderBottom: `1px solid ${theme.affine.palette.icons}`,
+    },
+    '.add-button': {
+        textAlign: 'center',
+        cursor: 'pointer',
+        // width: '130px',
+        padding: '0 20px',
+        height: '30px',
+        lineHeight: '30px',
+        span: {
+            paddingRight: '10px',
+        },
+    },
+}));
+
+const GroupContainer = styled('div')<{ isSelect?: boolean }>(
+    ({ isSelect, theme }) => ({
+        background: theme.affine.palette.white,
+        border: '2px solid #ECF1FB',
+        boxShadow: isSelect
+            ? '0px 0px 5px 5px rgba(98, 137, 255, 0.25), 0px 0px 5px 5px #E3EAFF;'
+            : '#none',
+        padding: '15px 12px',
+        borderRadius: '10px',
+        '&:hover': {
+            // borderColor: 'none',
+            boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)',
+        },
+    })
+);
+
+export const GroupView: FC<CreateView> = props => {
+    const { block, editor } = props;
+    const { scene } = useRecastBlockScene();
+    const [groupIsSelect, setGroupIsSelect] = useState(false);
+
+    useOnSelect(block.id, (groupIsSelect: boolean) => {
+        setGroupIsSelect(groupIsSelect);
+    });
+
+    const addGroup = async () => {
+        addNewGroup(editor, block, true);
+    };
+
+    const View = SceneMap[scene];
+    if (!View) {
+        return <>Group scene not found: {scene}!</>;
+    }
+
+    return (
+        <GroupMenuWrapper block={block} editor={editor}>
+            <GroupBox>
+                <GroupContainer isSelect={groupIsSelect}>
+                    <View {...props} />
+                </GroupContainer>
+
+                {editor.isWhiteboard ? null : (
+                    <GroupAction onAddGroup={addGroup} />
+                )}
+            </GroupBox>
+        </GroupMenuWrapper>
+    );
+};
+
+const GroupAction = ({ onAddGroup }: { onAddGroup: () => void }) => {
+    return (
+        <GroupActionWrapper>
+            <div className="line" />
+            <div className="add-button" onClick={onAddGroup}>
+                <span>+</span>
+                <span>Add New Group Here</span>
+            </div>
+            <div className="line" />
+        </GroupActionWrapper>
+    );
+};
diff --git a/libs/components/editor-blocks/src/blocks/group/ScenePage.tsx b/libs/components/editor-blocks/src/blocks/group/ScenePage.tsx
new file mode 100644
index 000000000..2ff26ba55
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/ScenePage.tsx
@@ -0,0 +1,7 @@
+import { RenderBlockChildren } from '@toeverything/components/editor-core';
+import type { CreateView } from '@toeverything/framework/virgo';
+import { FC } from 'react';
+
+export const ScenePage: FC<CreateView> = ({ block }) => {
+    return <RenderBlockChildren block={block} />;
+};
diff --git a/libs/components/editor-blocks/src/blocks/group/SceneTable.tsx b/libs/components/editor-blocks/src/blocks/group/SceneTable.tsx
new file mode 100644
index 000000000..6b7a56cb5
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/SceneTable.tsx
@@ -0,0 +1,70 @@
+import type { FC } from 'react';
+import { useState, useMemo, useEffect } from 'react';
+import type { DefaultColumnsValue } from '@toeverything/datasource/db-service';
+import type { CreateView } from '@toeverything/framework/virgo';
+import type { TableColumn, TableRow } from '../../components/table';
+import { Table, CustomCell } from '../../components/table';
+
+export const SceneTable: FC<CreateView> = ({ block, columns, editor }) => {
+    const [rows, set_rows] = useState<TableRow[]>([]);
+    const data_columns = useMemo<TableColumn[]>(() => {
+        return (columns || [])
+            .map(column => {
+                if (column.innerColumn) {
+                    return null;
+                }
+                return {
+                    dataKey: column.key,
+                    label: column.name,
+                    type: column.type,
+                    width: 150,
+                    columnConfig: column,
+                };
+            })
+            .filter(c => Boolean(c));
+    }, [columns]);
+
+    useEffect(() => {
+        const get_rows = async () => {
+            const children = await block.children();
+            const children_rows = children.map(child => {
+                const properties = child.getProperties();
+                return {
+                    id: child.id,
+                    ...properties,
+                    text: properties?.text?.value?.[0]?.text,
+                };
+            });
+            set_rows(children_rows);
+        };
+        get_rows();
+    }, [block]);
+
+    return (
+        <div style={{ width: '100%', maxHeight: '500px' }}>
+            <Table
+                rows={rows}
+                columns={data_columns}
+                rowKey="id"
+                renderCell={props => {
+                    return (
+                        <CustomCell
+                            {...props}
+                            onChange={async value => {
+                                const block = await editor.getBlockById(
+                                    value.row['id'] as string
+                                );
+                                if (block) {
+                                    await block.setProperty(
+                                        props.valueKey as keyof DefaultColumnsValue,
+                                        value.value as DefaultColumnsValue[keyof DefaultColumnsValue]
+                                    );
+                                }
+                            }}
+                        />
+                    );
+                }}
+            />
+        </div>
+    );
+};
diff --git a/libs/components/editor-blocks/src/blocks/group/components/IconButton.tsx b/libs/components/editor-blocks/src/blocks/group/components/IconButton.tsx
new file mode 100644
index 000000000..ce6fd9e71
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/IconButton.tsx
@@ -0,0 +1,30 @@
+import { styled } from '@toeverything/components/ui';
+import type { CSSProperties } from 'react';
+
+export const IconButton = styled('div')<{
+    extraStyle?: CSSProperties;
+    active?: boolean;
+}>(({ extraStyle, active }) => ({
+    height: 32,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '6px 12px',
+    cursor: 'pointer',
+    color: '#98ACBD',
+    fontSize: 14,
+    ...extraStyle,
+
+    '& > svg': {
+        marginRight: 4,
+    },
+    '&:hover': {
+        background: '#F5F7F8',
+        borderRadius: 5,
+    },
+    ...(active && {
+        background: '#F5F7F8',
+        borderRadius: 5,
+        color: '#3E6FDB',
+    }),
+}));
diff --git a/libs/components/editor-blocks/src/blocks/group/components/Line.tsx b/libs/components/editor-blocks/src/blocks/group/components/Line.tsx
new file mode 100644
index 000000000..5d0efe56d
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/Line.tsx
@@ -0,0 +1,8 @@
+import { styled } from '@toeverything/components/ui';
+
+export const Line = styled('div')({
+    width: 0,
+    height: 32,
+    border: '1px solid #E0E6EB',
+    margin: '0px 6px',
+});
diff --git a/libs/components/editor-blocks/src/blocks/group/components/Panel.tsx b/libs/components/editor-blocks/src/blocks/group/components/Panel.tsx
new file mode 100644
index 000000000..b9557ba7a
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/Panel.tsx
@@ -0,0 +1,33 @@
+import { styled } from '@toeverything/components/ui';
+import type { ReactNode, MouseEvent, CSSProperties } from 'react';
+
+const StyledPanel = styled('div')<{ extraStyle?: CSSProperties }>(
+    ({ extraStyle }) => ({
+        position: 'absolute',
+        top: 50,
+        background: '#FFFFFF',
+        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+        borderRadius: 10,
+        padding: '12px 24px',
+        ...extraStyle,
+    })
+);
+
+const Panel = ({
+    children,
+    extraStyle,
+}: {
+    children: ReactNode;
+    extraStyle?: CSSProperties;
+}) => {
+    const stopPropagation = (e: MouseEvent<HTMLDivElement>) =>
+        e.stopPropagation();
+
+    return (
+        <StyledPanel style={extraStyle} onClick={stopPropagation}>
+            {children}
+        </StyledPanel>
+    );
+};
+
+export { Panel };
diff --git a/libs/components/editor-blocks/src/blocks/group/components/Title.tsx b/libs/components/editor-blocks/src/blocks/group/components/Title.tsx
new file mode 100644
index 000000000..ae43c58b7
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/Title.tsx
@@ -0,0 +1,16 @@
+import { styled } from '@toeverything/components/ui';
+
+const StyledTitle = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '4px 8px',
+    fontSize: 16,
+    lineHeight: '22px',
+    '& > div': {
+        marginRight: 4,
+    },
+    color: '#3A4C5C',
+    fontWeight: 400,
+});
+
+export { StyledTitle as Title };
diff --git a/libs/components/editor-blocks/src/blocks/group/components/filter/Checkbox.tsx b/libs/components/editor-blocks/src/blocks/group/components/filter/Checkbox.tsx
new file mode 100644
index 000000000..94c3cd377
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/filter/Checkbox.tsx
@@ -0,0 +1,25 @@
+import {
+    CheckBoxCheckIcon,
+    CheckBoxUncheckIcon,
+} from '@toeverything/components/icons';
+import { styled } from '@toeverything/components/ui';
+import type { CheckboxProps } from './types';
+
+const StyledCheckbox = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+});
+
+const Checkbox = ({ value, onChange }: CheckboxProps) => {
+    return (
+        <StyledCheckbox onClick={onChange}>
+            {value ? (
+                <CheckBoxCheckIcon />
+            ) : (
+                <CheckBoxUncheckIcon style={{ color: '#4C6275' }} />
+            )}
+        </StyledCheckbox>
+    );
+};
+
+export { Checkbox };
diff --git a/libs/components/editor-blocks/src/blocks/group/components/filter/Filter.tsx b/libs/components/editor-blocks/src/blocks/group/components/filter/Filter.tsx
new file mode 100644
index 000000000..09ba8d74d
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/filter/Filter.tsx
@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { TextareaGroup } from './TextareaGroup';
+import { Panel } from '../Panel';
+import { Title } from '../Title';
+import { HelpCenterIcon } from '@toeverything/components/icons';
+import { MODE_CONFIG } from './config/filter-mode-config';
+import { FilterGroup } from './FilterGroup';
+import { FilterContext } from './context/filter-context';
+import type { ClosePanel } from '../../types';
+import type { PanelMode } from './types';
+import type { AsyncBlock } from '@toeverything/framework/virgo';
+
+export const Filter = ({
+    closePanel,
+    block,
+}: {
+    closePanel: ClosePanel;
+    block: AsyncBlock;
+}) => {
+    const [mode, setMode] = useState<PanelMode>(MODE_CONFIG.NORMAL);
+
+    /**
+     * switch mode：weak-sql or filter-group
+     */
+    const switchMode = () => {
+        setMode(
+            mode === MODE_CONFIG.NORMAL
+                ? MODE_CONFIG.WEAK_SQL
+                : MODE_CONFIG.NORMAL
+        );
+    };
+
+    /* remain：probably won't use */
+    const makeView = () => {
+        /* create a view */
+        closePanel();
+    };
+
+    const context = {
+        mode,
+        switchMode,
+        makeView,
+        block,
+    };
+
+    return (
+        <FilterContext.Provider value={context}>
+            <Panel>
+                <Title>
+                    <div>Filter</div>
+                    <HelpCenterIcon fontSize="small" />
+                </Title>
+                {mode === MODE_CONFIG.NORMAL ? (
+                    <FilterGroup />
+                ) : (
+                    <TextareaGroup />
+                )}
+            </Panel>
+        </FilterContext.Provider>
+    );
+};
diff --git a/libs/components/editor-blocks/src/blocks/group/components/filter/FilterGroup.tsx b/libs/components/editor-blocks/src/blocks/group/components/filter/FilterGroup.tsx
new file mode 100644
index 000000000..cc4b53ff7
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/filter/FilterGroup.tsx
@@ -0,0 +1,136 @@
+import { useContext } from 'react';
+import { styled } from '@toeverything/components/ui';
+import { SorterItem } from './SelectItem';
+import { HandleGroup } from './HandleGroup';
+import { Introduce } from '../sorter/Introduce';
+import {
+    FILTER_GROUP_CHANGE_TYPES,
+    ruleMap,
+} from './config/filter-group-config';
+import { FilterContext } from './context/filter-context';
+import { makeFilterConstraint2Map } from './helper';
+import type {
+    Constraint,
+    ConstraintKey,
+    Context,
+    OnConstraintChange,
+} from './types';
+import type { Column } from '@toeverything/datasource/db-service';
+
+const StyledFilterGroup = styled('div')({
+    marginTop: 16,
+    width: 684,
+    padding: 12,
+    display: 'flex',
+    justifyContent: 'center',
+    flexDirection: 'column',
+});
+
+const FilterGroup = () => {
+    const { block } = useContext<Context>(FilterContext);
+    const fieldOption = (block.columns as Column[])?.filter(
+        ({ innerColumn }) => !innerColumn
+    );
+    const filterConstraintMap = makeFilterConstraint2Map(
+        block.getProperties()?.filterConstraint || []
+    );
+
+    /**
+     * update filter constraints
+     * @param type
+     * @param deleteKey
+     * @param newData
+     */
+    const onConstraintChange: OnConstraintChange = async ({
+        type,
+        deleteKey,
+        newData = [],
+    }) => {
+        const newFilterConstraint = new Map([...filterConstraintMap]);
+        const [key, value] = newData;
+
+        switch (type) {
+            case FILTER_GROUP_CHANGE_TYPES.RULE_ADD:
+            case FILTER_GROUP_CHANGE_TYPES.CHECK_CHANGE:
+            case FILTER_GROUP_CHANGE_TYPES.OP_CHANGE:
+            case FILTER_GROUP_CHANGE_TYPES.VALUE_CHANGE: {
+                newFilterConstraint.set(key, value);
+                break;
+            }
+            case FILTER_GROUP_CHANGE_TYPES.RULE_DELETE: {
+                newFilterConstraint.delete(deleteKey);
+                break;
+            }
+            case FILTER_GROUP_CHANGE_TYPES.KEY_CHANGE: {
+                newFilterConstraint.delete(deleteKey);
+                newFilterConstraint.set(key, value);
+                break;
+            }
+            default:
+                throw new Error(`group_change_action.type error: ${type}`);
+        }
+
+        await block.setProperties({
+            filterConstraint: Array.from(newFilterConstraint.values()),
+        });
+    };
+
+    /**
+     * add filter item
+     */
+    const addRule = async () => {
+        for (const option of fieldOption) {
+            const { key, type } = option;
+            if (!filterConstraintMap.has(key)) {
+                await onConstraintChange({
+                    type: FILTER_GROUP_CHANGE_TYPES.RULE_ADD,
+                    newData: [
+                        key,
+                        {
+                            key,
+                            type,
+                            fieldValue: key,
+                            checked: true,
+                            opSelectValue: Object.values(ruleMap.get(type))?.[0]
+                                ?.value,
+                            valueSelectValue: null,
+                        },
+                    ],
+                });
+
+                return;
+            }
+        }
+    };
+
+    /* translate Map to Array for render */
+    const filterConstraints: Array<[ConstraintKey, Constraint]> = Array.from(
+        filterConstraintMap.entries()
+    );
+
+    return (
+        <>
+            <StyledFilterGroup>
+                {filterConstraints.length ? (
+                    filterConstraints.map(constraint => {
+                        const key = constraint[0];
+                        return (
+                            <SorterItem
+                                key={key}
+                                constraint={constraint}
+                                constraints={filterConstraintMap}
+                                fieldOptions={fieldOption}
+                                onConstraintChange={onConstraintChange}
+                            />
+                        );
+                    })
+                ) : (
+                    <Introduce />
+                )}
+            </StyledFilterGroup>
+            <HandleGroup addRule={addRule} />
+        </>
+    );
+};
+
+export { FilterGroup };
diff --git a/libs/components/editor-blocks/src/blocks/group/components/filter/HandleGroup.tsx b/libs/components/editor-blocks/src/blocks/group/components/filter/HandleGroup.tsx
new file mode 100644
index 000000000..5a1e44aa4
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/filter/HandleGroup.tsx
@@ -0,0 +1,62 @@
+import { styled } from '@toeverything/components/ui';
+import { useContext } from 'react';
+import { FilterContext } from './context/filter-context';
+import { MODE_CONFIG } from './config/filter-mode-config';
+import { AddViewIcon } from '@toeverything/components/icons';
+import { IconBtn } from './IconBtn';
+import type { CSSProperties } from 'react';
+
+const StyledBtn = styled('div')<{ extraStyle?: CSSProperties }>(
+    ({ extraStyle }) => {
+        return {
+            padding: '6px 12px',
+            border: '1px solid #E0E6EB',
+            borderRadius: 5,
+            fontSize: 12,
+            lineHeight: '18px',
+            ...extraStyle,
+        };
+    }
+);
+
+const StyledBtnPanel = styled('div')({
+    display: 'flex',
+});
+
+const StyledButtonGroup = styled('div')({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 12,
+});
+
+interface Props {
+    addRule?: () => void;
+    confirm?: () => void;
+}
+
+const HandleGroup = (props: Props) => {
+    const { mode, switchMode, makeView } = useContext(FilterContext);
+    const { addRule, confirm } = props;
+
+    return (
+        <StyledButtonGroup>
+            {mode === MODE_CONFIG.NORMAL ? (
+                <IconBtn Icon={AddViewIcon} text="Add Rule" onClick={addRule} />
+            ) : (
+                <StyledBtn onClick={confirm}>Confirm</StyledBtn>
+            )}
+            <StyledBtnPanel>
+                <StyledBtn
+                    extraStyle={{ marginRight: 10 }}
+                    onClick={switchMode}
+                >
+                    Switch to Filter Panel
+                </StyledBtn>
+                <StyledBtn onClick={makeView}>Make Panel</StyledBtn>
+            </StyledBtnPanel>
+        </StyledButtonGroup>
+    );
+};
+
+export { HandleGroup };
diff --git a/libs/components/editor-blocks/src/blocks/group/components/filter/IconBtn.tsx b/libs/components/editor-blocks/src/blocks/group/components/filter/IconBtn.tsx
new file mode 100644
index 000000000..7d05d50b7
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/filter/IconBtn.tsx
@@ -0,0 +1,33 @@
+import { styled } from '@toeverything/components/ui';
+import type { FC } from 'react';
+import type { SvgIconProps } from '@toeverything/components/ui';
+
+interface Props {
+    Icon: FC<SvgIconProps>;
+    text?: string;
+    onClick: () => void;
+}
+
+const StyledAddSort = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '6px 8px',
+    '& svg': {
+        marginRight: 4,
+    },
+    fontSize: 12,
+    color: '#3A4C5C',
+});
+
+const IconBtn = (props: Props) => {
+    const { Icon, text, onClick } = props;
+
+    return (
+        <StyledAddSort onClick={onClick}>
+            <Icon fontSize="small" />
+            <span>{text}</span>
+        </StyledAddSort>
+    );
+};
+
+export { IconBtn };
diff --git a/libs/components/editor-blocks/src/blocks/group/components/filter/MultipleChipInput.tsx b/libs/components/editor-blocks/src/blocks/group/components/filter/MultipleChipInput.tsx
new file mode 100644
index 000000000..5c91cce5a
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/filter/MultipleChipInput.tsx
@@ -0,0 +1,194 @@
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
+import {
+    styled,
+    autocompleteClasses,
+    useAutocomplete,
+} from '@toeverything/components/ui';
+import type { MouseEvent } from 'react';
+import type { ValueOption } from './types';
+import * as React from 'react';
+
+const ListBox = styled('ul')`
+    width: 300px;
+    margin: 2px 0 0;
+    padding: 0;
+    position: absolute;
+    list-style: none;
+    background-color: #fff;
+    overflow: auto;
+    max-height: 250px;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    z-index: 1;
+
+    & li {
+        padding: 5px 12px;
+        display: flex;
+
+        & span {
+            flex-grow: 1;
+        }
+
+        & svg {
+            color: transparent;
+        }
+    }
+
+    & li[aria-selected='true'] {
+        background-color: #fafafa;
+        font-weight: 600;
+
+        & svg {
+            color: #1890ff;
+        }
+    }
+
+    & li.${autocompleteClasses.focused} {
+        background-color: #e6f7ff;
+        cursor: pointer;
+
+        & svg {
+            color: currentColor;
+        }
+    }
+`;
+
+const InputWrapper = styled('div')`
+    min-width: 300px;
+    min-height: 32px;
+    border: 1px solid #d9d9d9;
+    background-color: #fff;
+    border-radius: 4px;
+    padding: 1px;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 12px 0 6px;
+
+    &:hover {
+        border-color: #40a9ff;
+    }
+
+    &.focused {
+        border-color: #40a9ff;
+        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+    }
+
+    & input {
+        background-color: #fff;
+        color: rgba(0, 0, 0, 0.85);
+        box-sizing: border-box;
+        padding: 0 6px;
+        width: 0;
+        min-width: 30px;
+        flex-grow: 1;
+        border: 0;
+        outline: 0;
+    }
+`;
+
+const Tag = (props: {
+    label: string;
+    onDelete: (event: MouseEvent<SVGSVGElement>) => void;
+}) => {
+    const { label, onDelete, ...other } = props;
+    return (
+        <div {...other}>
+            <span>{label}</span>
+            <CloseIcon onClick={onDelete} />
+        </div>
+    );
+};
+
+const StyledTag = styled(Tag)`
+    display: flex;
+    align-items: center;
+    height: 24px;
+    margin: 2px;
+    line-height: 22px;
+    background-color: #fafafa;
+    border: 1px solid #e8e8e8;
+    border-radius: 2px;
+    box-sizing: content-box;
+    padding: 0 4px 0 10px;
+    outline: 0;
+    overflow: hidden;
+
+    &:focus {
+        border-color: #40a9ff;
+        background-color: #e6f7ff;
+    }
+
+    & span {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    & svg {
+        font-size: 12px;
+        cursor: pointer;
+        padding: 4px;
+    }
+`;
+
+interface Props {
+    initValue: string[];
+    options: ValueOption[];
+    onChange: (value: ValueOption[]) => void;
+}
+
+const MultipleChipInput = (props: Props) => {
+    const { initValue, options, onChange } = props;
+    const {
+        getInputProps,
+        getTagProps,
+        getListboxProps,
+        getOptionProps,
+        groupedOptions,
+        value,
+        setAnchorEl,
+    } = useAutocomplete({
+        id: 'multiple-chip-select',
+        multiple: true,
+        options,
+        value: initValue,
+        getOptionLabel: option => (option as ValueOption).title,
+        onChange: (event: React.SyntheticEvent, data) => {
+            onChange(data as ValueOption[]);
+        },
+    });
+
+    return (
+        <>
+            <InputWrapper ref={setAnchorEl}>
+                {(value as ValueOption[]).map(
+                    ({ title, value }, index: number) => (
+                        <StyledTag
+                            key={value}
+                            label={title}
+                            {...getTagProps({ index })}
+                        />
+                    )
+                )}
+                <input {...getInputProps()} />
+            </InputWrapper>
+
+            {!!groupedOptions.length && (
+                <ListBox {...getListboxProps()}>
+                    {(groupedOptions as ValueOption[]).map((option, index) => (
+                        <li
+                            key={option.value as string}
+                            {...getOptionProps({ option, index })}
+                        >
+                            <span>{option.title}</span>
+                            <CheckIcon fontSize="small" />
+                        </li>
+                    ))}
+                </ListBox>
+            )}
+        </>
+    );
+};
+
+export { MultipleChipInput };
diff --git a/libs/components/editor-blocks/src/blocks/group/components/filter/SelectItem.tsx b/libs/components/editor-blocks/src/blocks/group/components/filter/SelectItem.tsx
new file mode 100644
index 000000000..8f7ee0426
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/filter/SelectItem.tsx
@@ -0,0 +1,168 @@
+import { OldSelect, styled } from '@toeverything/components/ui';
+import { DeleteCashBinIcon } from '@toeverything/components/icons';
+import {
+    FILTER_GROUP_CHANGE_TYPES,
+    ruleMap,
+} from './config/filter-group-config';
+import { getOptionsFromNativeData } from '../helper';
+import { MultipleChipInput } from './MultipleChipInput';
+import { TextInput } from './TextInput';
+import { Checkbox } from './Checkbox';
+import type { CSSProperties } from 'react';
+import type { SorterItemProps } from './types';
+import { ValueOption } from './types';
+
+export const StyledSorterItem = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    '& select': {
+        margin: '6px',
+    },
+});
+
+const selectStyle: CSSProperties = {
+    height: 32,
+    border: '1px solid #E0E6EB',
+    borderRadius: 5,
+    padding: '0 12px',
+    color: '#4C6275',
+    fontSize: 14,
+};
+
+const fieldSelectStyle: CSSProperties = {
+    ...selectStyle,
+    minWidth: 168,
+};
+
+const relationSelectStyle: CSSProperties = {
+    ...selectStyle,
+    minWidth: 108,
+};
+
+const SorterItem = (props: SorterItemProps) => {
+    const { onConstraintChange, ...rest } = props;
+    const { fieldOptions, valueOptions } = getOptionsFromNativeData(rest);
+    const {
+        constraint: [
+            key,
+            { checked, type, fieldValue, opSelectValue, valueSelectValue },
+        ],
+    } = rest;
+    const ruleOptions = Object.values(ruleMap.get(type));
+
+    /* key change */
+    const onFieldChange = (newKey: string) => {
+        const { type } = fieldOptions.filter(item => item.key === newKey)[0];
+        onConstraintChange({
+            type: FILTER_GROUP_CHANGE_TYPES.KEY_CHANGE,
+            deleteKey: key,
+            newData: [
+                newKey,
+                {
+                    key: newKey,
+                    type,
+                    fieldValue: newKey,
+                    checked: true,
+                    opSelectValue: Object.values(ruleMap.get(type))?.[0]?.value,
+                    valueSelectValue: null,
+                },
+            ],
+        });
+    };
+
+    /* op change */
+    const onOpChange = (newOp: string) => {
+        onConstraintChange({
+            type: FILTER_GROUP_CHANGE_TYPES.OP_CHANGE,
+            newData: [
+                key,
+                {
+                    key,
+                    type,
+                    checked,
+                    fieldValue,
+                    opSelectValue: newOp,
+                    valueSelectValue,
+                },
+            ],
+        });
+    };
+
+    /* value change */
+    const onValueChange = (newValue: string | ValueOption[]) => {
+        onConstraintChange({
+            type: FILTER_GROUP_CHANGE_TYPES.VALUE_CHANGE,
+            newData: [
+                key,
+                {
+                    key,
+                    type,
+                    checked,
+                    fieldValue,
+                    opSelectValue,
+                    valueSelectValue: newValue,
+                },
+            ],
+        });
+    };
+
+    /* CheckBox change */
+    const onCheckChange = () => {
+        onConstraintChange({
+            type: FILTER_GROUP_CHANGE_TYPES.CHECK_CHANGE,
+            newData: [
+                key,
+                {
+                    key,
+                    type,
+                    fieldValue,
+                    checked: !checked,
+                    opSelectValue,
+                    valueSelectValue,
+                },
+            ],
+        });
+    };
+
+    /* delete constraint */
+    const deleteConstraint = () => {
+        onConstraintChange({
+            type: FILTER_GROUP_CHANGE_TYPES.RULE_DELETE,
+            deleteKey: key,
+        });
+    };
+
+    return (
+        <StyledSorterItem>
+            <Checkbox value={checked} onChange={onCheckChange} />
+
+            <OldSelect
+                extraStyle={fieldSelectStyle}
+                value={fieldValue}
+                options={fieldOptions}
+                onChange={onFieldChange}
+            />
+            <OldSelect
+                extraStyle={relationSelectStyle}
+                value={opSelectValue}
+                options={ruleOptions}
+                onChange={onOpChange}
+            />
+            {valueOptions?.length ? (
+                <MultipleChipInput
+                    initValue={(valueSelectValue || []) as string[]}
+                    options={valueOptions}
+                    onChange={onValueChange}
+                />
+            ) : (
+                <TextInput
+                    value={(valueSelectValue || '') as string}
+                    onChange={onValueChange}
+                />
+            )}
+            <DeleteCashBinIcon fontSize="small" onClick={deleteConstraint} />
+        </StyledSorterItem>
+    );
+};
+
+export { SorterItem };
diff --git a/libs/components/editor-blocks/src/blocks/group/components/filter/TextInput.tsx b/libs/components/editor-blocks/src/blocks/group/components/filter/TextInput.tsx
new file mode 100644
index 000000000..a241ce7ed
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/filter/TextInput.tsx
@@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+import { styled, MuiInputBase } from '@toeverything/components/ui';
+import type { ChangeEvent } from 'react';
+
+const StyledTextInput = styled(MuiInputBase)(({ theme }) => ({
+    '& .MuiInputBase-input': {
+        borderRadius: 4,
+        position: 'relative',
+        border: '1px solid #ced4da',
+        fontSize: 14,
+        width: 'auto',
+        height: 30,
+        padding: '0 8px',
+        margin: '0 12px 0 6px',
+        '&:focus': {
+            borderColor: theme.palette.primary.main,
+        },
+    },
+}));
+
+interface Props {
+    value: string;
+    onChange: (value: string) => void;
+}
+
+export const TextInput = ({ value, onChange }: Props) => {
+    const onInputChange = useCallback(
+        (e: ChangeEvent<HTMLInputElement>) => {
+            onChange(e.target.value);
+        },
+        [onChange]
+    );
+
+    return (
+        <StyledTextInput
+            value={value}
+            id="text-input"
+            onChange={onInputChange}
+        />
+    );
+};
diff --git a/libs/components/editor-blocks/src/blocks/group/components/filter/TextareaGroup.tsx b/libs/components/editor-blocks/src/blocks/group/components/filter/TextareaGroup.tsx
new file mode 100644
index 000000000..709f85ab5
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/filter/TextareaGroup.tsx
@@ -0,0 +1,68 @@
+import { useContext, useState } from 'react';
+import { styled } from '@toeverything/components/ui';
+import { HandleGroup } from './HandleGroup';
+import { toAsync, weakSqlCreator } from '../../utils';
+import { FilterContext } from './context/filter-context';
+import type { ChangeEvent } from 'react';
+import type { Context } from './types';
+
+const StyledTextarea = styled('textarea')({
+    marginTop: 16,
+    width: 684,
+    height: 170,
+    border: '1px solid #E0E6EB',
+    borderRadius: 5,
+    padding: 12,
+    fontWeight: 400,
+    fontSize: 12,
+    lineHeight: '16px',
+    color: '#98ACBD',
+});
+
+const TextareaGroup = () => {
+    const { block } = useContext<Context>(FilterContext);
+    const filterWeakSqlConstraint =
+        block.getProperties()?.filterWeakSqlConstraint || '';
+    const [textareaValue, setTextareaValue] = useState<string>(
+        filterWeakSqlConstraint
+    );
+    const [errStatus, setErrStatus] = useState<boolean>(false);
+
+    /**
+     * textarea change: input weak-sql string
+     * @param e
+     */
+    const onTextareaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+        setTextareaValue(e.target.value);
+    };
+
+    /**
+     * confirm filter: if string is valid，update filter-rule to store, and redistribute data
+     */
+    const confirm = async () => {
+        const [err, filterWeakSqlConstraint] = await toAsync(
+            weakSqlCreator(textareaValue)
+        );
+
+        /* need optimization */
+        setErrStatus(err ? true : false);
+
+        /* when weak-sql analysis success, update textarea */
+        if (!err) {
+            await block.setProperties({
+                filterWeakSqlConstraint: textareaValue,
+            });
+        }
+    };
+
+    return (
+        <>
+            <StyledTextarea value={textareaValue} onChange={onTextareaChange} />
+            {errStatus &&
+                "Syntax error, reference: status = 'complete' & price >= 1000"}
+            <HandleGroup confirm={confirm} />
+        </>
+    );
+};
+
+export { TextareaGroup };
diff --git a/libs/components/editor-blocks/src/blocks/group/components/filter/config/filter-group-config.ts b/libs/components/editor-blocks/src/blocks/group/components/filter/config/filter-group-config.ts
new file mode 100644
index 000000000..983b00461
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/filter/config/filter-group-config.ts
@@ -0,0 +1,67 @@
+/* filter item onChange types */
+const FILTER_GROUP_CHANGE_TYPES = {
+    RULE_ADD: 'rule_add',
+    RULE_DELETE: 'rule_delete',
+    CHECK_CHANGE: 'check_change',
+    KEY_CHANGE: 'key_change',
+    OP_CHANGE: 'op_change',
+    VALUE_CHANGE: 'value_change',
+} as const;
+
+/* filter rule config */
+const FILTER_RULE_CONFIG = {
+    include: {
+        label: 'includes',
+        value: 'includes1',
+    },
+    exclude: {
+        label: 'excludes',
+        value: 'excludes2',
+    },
+    gt: {
+        label: '>',
+        value: '>1',
+    },
+    lt: {
+        label: '<',
+        value: '<1',
+    },
+    eq: {
+        label: '=',
+        value: '=1',
+    },
+    gte: {
+        label: '>=',
+        value: '>=1',
+    },
+    lte: {
+        label: '<=',
+        value: '<=1',
+    },
+    null: {
+        label: 'is null',
+        value: 'is null1',
+    },
+    notNull: {
+        label: 'is not null',
+        value: 'is not null1',
+    },
+    between: {
+        label: 'between',
+        value: 'between',
+    },
+};
+
+/* rule Map for defaultValue or compare */
+const ruleMap = new Map([
+    [
+        'content',
+        {
+            include: FILTER_RULE_CONFIG.include,
+            exclude: FILTER_RULE_CONFIG.exclude,
+        },
+    ],
+    ['boolean', { eq: FILTER_RULE_CONFIG.eq }],
+]);
+
+export { FILTER_RULE_CONFIG, FILTER_GROUP_CHANGE_TYPES, ruleMap };
diff --git a/libs/components/editor-blocks/src/blocks/group/components/filter/config/filter-mode-config.ts b/libs/components/editor-blocks/src/blocks/group/components/filter/config/filter-mode-config.ts
new file mode 100644
index 000000000..ad2994323
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/filter/config/filter-mode-config.ts
@@ -0,0 +1,4 @@
+export const MODE_CONFIG = {
+    NORMAL: 'normal' /* filter group */,
+    WEAK_SQL: 'weak_sql' /* weak sql */,
+} as const;
diff --git a/libs/components/editor-blocks/src/blocks/group/components/filter/context/filter-context.ts b/libs/components/editor-blocks/src/blocks/group/components/filter/context/filter-context.ts
new file mode 100644
index 000000000..e717b1e5b
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/filter/context/filter-context.ts
@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+import type { Context } from '../types';
+
+const FilterContext = createContext<Context>(null);
+
+export { FilterContext };
diff --git a/libs/components/editor-blocks/src/blocks/group/components/filter/helper.ts b/libs/components/editor-blocks/src/blocks/group/components/filter/helper.ts
new file mode 100644
index 000000000..7e58c6695
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/filter/helper.ts
@@ -0,0 +1,9 @@
+import type { FilterConstraint, FilterConstraintMap } from './types';
+
+const makeFilterConstraint2Map = (filterConstraint: FilterConstraint = []) =>
+    filterConstraint.reduce<FilterConstraintMap>(
+        (m, current) => m.set(current.key, current),
+        new Map()
+    );
+
+export { makeFilterConstraint2Map };
diff --git a/libs/components/editor-blocks/src/blocks/group/components/filter/index.ts b/libs/components/editor-blocks/src/blocks/group/components/filter/index.ts
new file mode 100644
index 000000000..7b018c104
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/filter/index.ts
@@ -0,0 +1 @@
+export { Filter } from './Filter';
diff --git a/libs/components/editor-blocks/src/blocks/group/components/filter/types.ts b/libs/components/editor-blocks/src/blocks/group/components/filter/types.ts
new file mode 100644
index 000000000..c7828f941
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/filter/types.ts
@@ -0,0 +1,55 @@
+import { MODE_CONFIG } from './config/filter-mode-config';
+import type { ValueOf } from '../../types';
+import type { Column } from '@toeverything/datasource/db-service';
+import type { AsyncBlock } from '@toeverything/framework/virgo';
+
+export type ConstraintKey = string;
+
+export type MultipleValue = {
+    title?: string;
+    label?: string;
+    value?: string | boolean;
+};
+
+export type Constraint = {
+    key: ConstraintKey;
+    checked: boolean;
+    type: string;
+    fieldValue: string;
+    opSelectValue: string;
+    valueSelectValue: string | string[] | MultipleValue[];
+};
+
+export type FilterConstraint = Constraint[];
+
+export type FilterConstraintMap = Map<ConstraintKey, Constraint>;
+
+export type OnConstraintChange = (params: {
+    type: string;
+    deleteKey?: string;
+    newData?: [ConstraintKey, Constraint];
+}) => void;
+
+export type ValueOption = MultipleValue;
+
+export interface SorterItemProps {
+    constraint: [ConstraintKey, Constraint];
+    constraints: FilterConstraintMap;
+    fieldOptions: Column[];
+    valueOptions?: ValueOption[];
+    onConstraintChange: OnConstraintChange;
+}
+
+export interface CheckboxProps {
+    value: boolean;
+    onChange: () => void;
+}
+
+export type PanelMode = ValueOf<typeof MODE_CONFIG>;
+
+export interface Context {
+    mode: PanelMode;
+    switchMode: () => void;
+    makeView: () => void;
+    block: AsyncBlock;
+}
diff --git a/libs/components/editor-blocks/src/blocks/group/components/group-by/GroupBy.tsx b/libs/components/editor-blocks/src/blocks/group/components/group-by/GroupBy.tsx
new file mode 100644
index 000000000..9ac3bff71
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/group-by/GroupBy.tsx
@@ -0,0 +1,88 @@
+import { styled } from '@toeverything/components/ui';
+import { useRecastKanbanGroupBy } from '@toeverything/components/editor-core';
+import { StatusIcon } from '@toeverything/components/icons';
+import { Panel } from '../Panel';
+import type { RecastPropertyId } from '@toeverything/components/editor-core';
+
+const panelStyle = {
+    padding: '8px 4px',
+};
+
+const disabledStyle = {
+    fontSize: 12,
+    lineHeight: '18px',
+    color: '#98ACBD',
+};
+
+const activeStyle = {
+    color: '#3E6FDB',
+};
+
+const hoverStyle = {
+    borderRadius: 5,
+    backgroundColor: '#F5F7F8',
+};
+
+const Item = styled('div')<{ active?: boolean; disabled?: unknown }>(props => {
+    const { active } = props;
+
+    return {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        padding: '6px 12px',
+        minWidth: 120,
+        fontSize: 14,
+        lineHeight: '20px',
+        color: '#4C6275',
+        '&:hover': {
+            ...(!('disabled' in props) && hoverStyle),
+        },
+        ...('disabled' in props && disabledStyle),
+        ...(active && activeStyle),
+    };
+});
+
+const Content = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    '& > div': {
+        marginLeft: 12,
+    },
+});
+
+const GroupBy = ({ closePanel }: { closePanel: () => void }) => {
+    const { supportedGroupBy, setGroupBy, groupBy } = useRecastKanbanGroupBy();
+
+    const onChange = (value: string) => {
+        (async () => {
+            await setGroupBy(value as RecastPropertyId);
+        })();
+        closePanel();
+    };
+
+    return (
+        <Panel extraStyle={panelStyle}>
+            <Item disabled>
+                <div>COLUMN</div>
+            </Item>
+            {supportedGroupBy.map(({ name, id }) => (
+                <Item
+                    active={groupBy.id === id}
+                    key={id}
+                    onClick={() => onChange(id)}
+                >
+                    <Content>
+                        <StatusIcon fontSize="small" />
+                        <div>
+                            {name.slice(0, 1).toUpperCase()}
+                            {name.slice(1)}
+                        </div>
+                    </Content>
+                </Item>
+            ))}
+        </Panel>
+    );
+};
+
+export { GroupBy };
diff --git a/libs/components/editor-blocks/src/blocks/group/components/group-panel/GroupPanel.tsx b/libs/components/editor-blocks/src/blocks/group/components/group-panel/GroupPanel.tsx
new file mode 100644
index 000000000..7284f7f81
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/group-panel/GroupPanel.tsx
@@ -0,0 +1,10 @@
+import { styled } from '@toeverything/components/ui';
+
+const GroupPanel = styled('div')({
+    height: 32,
+    background: '#FFFFFF',
+    display: 'flex',
+    alignItems: 'center',
+});
+
+export { GroupPanel };
diff --git a/libs/components/editor-blocks/src/blocks/group/components/helper.ts b/libs/components/editor-blocks/src/blocks/group/components/helper.ts
new file mode 100644
index 000000000..162f80e1a
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/helper.ts
@@ -0,0 +1,52 @@
+import type { SorterItemProps } from './filter/types';
+import type { FilterGroupConstraint } from '../types';
+import { BooleanColumn } from '@toeverything/datasource/db-service';
+
+/**
+ * filter module: adapt multiple selection scenarios
+ * @param nativeData
+ */
+const getOptionsFromNativeData = (
+    nativeData: Omit<SorterItemProps, 'onConstraintChange'>
+) => {
+    const {
+        constraint: [key, { fieldValue }],
+        fieldOptions,
+        constraints,
+    } = nativeData;
+
+    const valueOptions = (
+        fieldOptions.filter(item => item.key === key)[0] as BooleanColumn
+    )?.options?.map(({ name, value }) => ({ title: name, value }));
+
+    /* options: contains current and unselected*/
+    const effectiveOptions = fieldOptions
+        .map(item => {
+            const { key, name } = item;
+            return {
+                ...item,
+                label: name,
+                value: key,
+            };
+        })
+        .filter(item => {
+            return !constraints.has(item.value) || item.value === fieldValue;
+        });
+
+    return {
+        fieldOptions: effectiveOptions,
+        valueOptions,
+    };
+};
+
+/**
+ * translate
+ * @param constraints
+ */
+const constraints2FilterSchema = (constraints: FilterGroupConstraint) => {
+    return [...constraints.entries()]
+        .filter(constraint => constraint[1].checked)
+        .map(([field, { op, value }]) => ({ field, op, value }));
+};
+
+export { getOptionsFromNativeData, constraints2FilterSchema };
diff --git a/libs/components/editor-blocks/src/blocks/group/components/sorter/GroupBySelector.tsx b/libs/components/editor-blocks/src/blocks/group/components/sorter/GroupBySelector.tsx
new file mode 100644
index 000000000..067ef6672
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/sorter/GroupBySelector.tsx
@@ -0,0 +1,53 @@
+import { styled, OldSelect } from '@toeverything/components/ui';
+import { useRecastKanbanGroupBy } from '@toeverything/components/editor-core';
+import type { CSSProperties } from 'react';
+import type { RecastPropertyId } from '@toeverything/components/editor-core';
+
+const extraStyle: CSSProperties = {
+    height: 32,
+    border: '1px solid #E0E6EB',
+    borderRadius: 5,
+    padding: '0 12px',
+};
+
+const StyledGroupSelector = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '0 8px',
+    fontWeight: 400,
+    fontSize: 16,
+    color: '#3A4C5C',
+    '& select': {
+        margin: '12px',
+        fontSize: 14,
+    },
+});
+
+const GroupBySelector = () => {
+    const { supportedGroupBy, setGroupBy, groupBy } = useRecastKanbanGroupBy();
+    /* groupBy config */
+    const options = supportedGroupBy.map(({ name, id }) => ({
+        label: name,
+        value: id,
+    }));
+
+    const onChange = (value: string) => {
+        (async () => {
+            await setGroupBy(value as RecastPropertyId);
+        })();
+    };
+
+    return (
+        <StyledGroupSelector>
+            Group by
+            <OldSelect
+                extraStyle={{ ...extraStyle }}
+                value={groupBy as unknown as string}
+                onChange={onChange}
+                options={options}
+            />
+        </StyledGroupSelector>
+    );
+};
+
+export { GroupBySelector };
diff --git a/libs/components/editor-blocks/src/blocks/group/components/sorter/Introduce.tsx b/libs/components/editor-blocks/src/blocks/group/components/sorter/Introduce.tsx
new file mode 100644
index 000000000..4cec9d324
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/sorter/Introduce.tsx
@@ -0,0 +1,18 @@
+import { styled } from '@toeverything/components/ui';
+
+const StyledIntroduce = styled('div')({
+    fontSize: 12,
+    color: '#3A4C5C',
+});
+
+const Introduce = () => {
+    return (
+        <StyledIntroduce>
+            Sort your items by priority, creation date, price or
+            <br />
+            any column you have on your board.
+        </StyledIntroduce>
+    );
+};
+
+export { Introduce };
diff --git a/libs/components/editor-blocks/src/blocks/group/components/sorter/Sorter.tsx b/libs/components/editor-blocks/src/blocks/group/components/sorter/Sorter.tsx
new file mode 100644
index 000000000..4fba8c952
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/sorter/Sorter.tsx
@@ -0,0 +1,41 @@
+import { HelpCenterIcon } from '@toeverything/components/icons';
+import { SorterSelector } from './SorterSelector';
+import { GroupBySelector } from './GroupBySelector';
+import { Panel } from '../Panel';
+import { Title } from '../Title';
+import type { ClosePanel } from '../../types';
+import type { AsyncBlock } from '@toeverything/framework/virgo';
+
+const extraStyle = {
+    width: 400,
+};
+
+const Sorter = ({
+    closePanel,
+    block,
+}: {
+    closePanel: ClosePanel;
+    block: AsyncBlock;
+}) => {
+    /* remain：probably won't use */
+    const makeView = () => {
+        /* create a view */
+        closePanel();
+    };
+
+    return (
+        <Panel extraStyle={extraStyle}>
+            <GroupBySelector />
+            <div>
+                <Title>
+                    <div>Sort by</div>
+                    <HelpCenterIcon fontSize="small" />
+                </Title>
+
+                <SorterSelector block={block} />
+            </div>
+        </Panel>
+    );
+};
+
+export { Sorter };
diff --git a/libs/components/editor-blocks/src/blocks/group/components/sorter/SorterItem.tsx b/libs/components/editor-blocks/src/blocks/group/components/sorter/SorterItem.tsx
new file mode 100644
index 000000000..251a490db
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/sorter/SorterItem.tsx
@@ -0,0 +1,91 @@
+import { OldSelect, styled } from '@toeverything/components/ui';
+import { DeleteCashBinIcon } from '@toeverything/components/icons';
+import type { CSSProperties } from 'react';
+import type { SorterItemProps } from './types';
+
+export const StyledSorterItem = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    '& select': {
+        margin: '6px',
+    },
+});
+
+const extraStyle: CSSProperties = {
+    width: 180,
+    height: 32,
+    border: '1px solid #E0E6EB',
+    borderRadius: 5,
+    padding: '0 12px',
+};
+
+const SorterItem = (props: SorterItemProps) => {
+    const {
+        constraint,
+        constraints,
+        fieldOptions,
+        ruleOptions,
+        onConstraintChange,
+    } = props;
+    /* current constraint */
+    const [field, { rule }] = constraint;
+
+    /**
+     * field change & update constraints
+     * @param newField
+     */
+    const onFieldChange = (newField: string) => {
+        onConstraintChange({
+            oldField: field,
+            newField,
+            newRule: rule,
+        });
+    };
+
+    /**
+     * rule change & update constraints
+     * @param newRule
+     */
+    const onRuleChange = (newRule: string) => {
+        onConstraintChange({
+            newField: field,
+            newRule,
+        });
+    };
+
+    /**
+     * delete current constrain & update constraints
+     * @param newField
+     */
+    const deleteConstraint = () => {
+        onConstraintChange({
+            oldField: field,
+        });
+    };
+
+    /* recast options: contains current and unselected */
+    const effectiveOptions = fieldOptions.filter(
+        fieldOption =>
+            !constraints.has(fieldOption.key) || fieldOption.key === field
+    );
+
+    return (
+        <StyledSorterItem>
+            <OldSelect
+                extraStyle={extraStyle}
+                value={field}
+                options={effectiveOptions}
+                onChange={onFieldChange}
+            />
+            <OldSelect
+                extraStyle={{ ...extraStyle, width: 125 }}
+                value={rule}
+                options={ruleOptions}
+                onChange={onRuleChange}
+            />
+            <DeleteCashBinIcon fontSize="small" onClick={deleteConstraint} />
+        </StyledSorterItem>
+    );
+};
+
+export { SorterItem };
diff --git a/libs/components/editor-blocks/src/blocks/group/components/sorter/SorterSelector.tsx b/libs/components/editor-blocks/src/blocks/group/components/sorter/SorterSelector.tsx
new file mode 100644
index 000000000..5476c2b09
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/sorter/SorterSelector.tsx
@@ -0,0 +1,128 @@
+import { styled } from '@toeverything/components/ui';
+import { AddViewIcon } from '@toeverything/components/icons';
+import { Introduce } from './Introduce';
+import { SorterItem } from './SorterItem';
+import { SORTER_CONFIG } from './config';
+import { makesSorterConstraint2Map } from './helper';
+import type { Column } from '@toeverything/datasource/db-service';
+import type {
+    Constraint,
+    ConstraintKey,
+    Constraints,
+    OnConstraintChange,
+} from './types';
+import type { AsyncBlock } from '@toeverything/framework/virgo';
+
+const StyledSorterItems = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: '32px 0',
+});
+
+const StyledAddSort = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '6px 8px',
+    '& svg': {
+        marginRight: 4,
+    },
+    fontSize: 12,
+    color: '#3A4C5C',
+});
+
+const SorterSelector = ({ block }: { block: AsyncBlock }) => {
+    const sorterConstraintMap = makesSorterConstraint2Map(
+        block.getProperties()?.sorterConstraint || []
+    );
+
+    const fieldOptions = (block.columns as Column[])
+        .filter(item => {
+            if ('sorter' in item) {
+                return !!item['sorter'];
+            }
+
+            return false;
+        })
+        .map(item => {
+            const { name, key } = item;
+
+            return { key, label: name };
+        });
+
+    /**
+     * sort constraint change
+     * @param constraints
+     */
+    const onConstraintChange: OnConstraintChange = async ({
+        oldField,
+        newField,
+        newRule,
+    }) => {
+        const newSorterConstraintMap: Constraints = new Map([
+            ...sorterConstraintMap.entries(),
+        ]);
+        /* delete */
+        oldField && newSorterConstraintMap.delete(oldField);
+        /* update or add */
+        /* maybe bug: when updated, item's position will change */
+        newField &&
+            newSorterConstraintMap.set(newField, {
+                field: newField,
+                rule: newRule,
+            });
+
+        await block.setProperties({
+            sorterConstraint: Array.from(newSorterConstraintMap.values()),
+        });
+    };
+
+    /**
+     * add new sort item
+     */
+    const addSort = () => {
+        for (const option of fieldOptions) {
+            if (!sorterConstraintMap.has(option.key)) {
+                onConstraintChange({
+                    newField: option.key,
+                    newRule: SORTER_CONFIG.ASC.value,
+                });
+                return;
+            }
+        }
+    };
+
+    /* translate Map to Array for render */
+    const constraintList: Array<[ConstraintKey, Constraint]> = Array.from(
+        sorterConstraintMap.entries()
+    );
+
+    return (
+        <>
+            <StyledSorterItems>
+                {!constraintList.length ? (
+                    <Introduce />
+                ) : (
+                    constraintList.map(constraint => (
+                        <SorterItem
+                            key={constraint[0]}
+                            constraint={constraint}
+                            constraints={sorterConstraintMap}
+                            fieldOptions={fieldOptions}
+                            ruleOptions={Object.values(SORTER_CONFIG)}
+                            onConstraintChange={onConstraintChange}
+                        />
+                    ))
+                )}
+            </StyledSorterItems>
+
+            <StyledAddSort onClick={addSort}>
+                <AddViewIcon fontSize="small" />
+                <span>Add new sort</span>
+            </StyledAddSort>
+        </>
+    );
+};
+
+export { SorterSelector };
diff --git a/libs/components/editor-blocks/src/blocks/group/components/sorter/config.ts b/libs/components/editor-blocks/src/blocks/group/components/sorter/config.ts
new file mode 100644
index 000000000..4c3f2099b
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/sorter/config.ts
@@ -0,0 +1,10 @@
+export const SORTER_CONFIG = {
+    ASC: {
+        label: 'ASC',
+        value: 'asc',
+    },
+    DESC: {
+        label: 'DESC',
+        value: 'desc',
+    },
+} as const;
diff --git a/libs/components/editor-blocks/src/blocks/group/components/sorter/helper.ts b/libs/components/editor-blocks/src/blocks/group/components/sorter/helper.ts
new file mode 100644
index 000000000..cb939d1d4
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/sorter/helper.ts
@@ -0,0 +1,9 @@
+import type { Constraint, Constraints } from './types';
+
+const makesSorterConstraint2Map = (sorterConstraint: Constraint[] = []) =>
+    sorterConstraint.reduce<Constraints>(
+        (m, cur) => m.set(cur.field, cur),
+        new Map()
+    );
+
+export { makesSorterConstraint2Map };
diff --git a/libs/components/editor-blocks/src/blocks/group/components/sorter/index.ts b/libs/components/editor-blocks/src/blocks/group/components/sorter/index.ts
new file mode 100644
index 000000000..0a7cb8f02
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/sorter/index.ts
@@ -0,0 +1 @@
+export { Sorter } from './Sorter';
diff --git a/libs/components/editor-blocks/src/blocks/group/components/sorter/types.ts b/libs/components/editor-blocks/src/blocks/group/components/sorter/types.ts
new file mode 100644
index 000000000..1133c6380
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/components/sorter/types.ts
@@ -0,0 +1,30 @@
+export type ConstraintKey = string;
+
+export type Constraint = {
+    field: ConstraintKey;
+    rule: string;
+};
+
+export type SorterConstraint = Constraint[];
+
+export type Constraints = Map<ConstraintKey, Constraint>;
+
+export type Option = {
+    key?: string;
+    label?: string;
+    value?: string;
+};
+
+export type OnConstraintChange = (params: {
+    oldField?: string;
+    newField?: string;
+    newRule?: string;
+}) => void;
+
+export interface SorterItemProps {
+    constraint: [ConstraintKey, Constraint];
+    constraints: Constraints;
+    fieldOptions: Option[];
+    ruleOptions: Option[];
+    onConstraintChange: OnConstraintChange;
+}
diff --git a/libs/components/editor-blocks/src/blocks/group/config.ts b/libs/components/editor-blocks/src/blocks/group/config.ts
new file mode 100644
index 000000000..1a3abb29b
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/config.ts
@@ -0,0 +1,13 @@
+export const PANEL_CONFIG = {
+    FILTER: 'filter',
+    SORTER: 'sorter',
+    ADD_VIEW: 'add_view',
+    GROUP_BY: 'group_by',
+} as const;
+
+export const SCENE_CONFIG = {
+    PAGE: 'page',
+    KANBAN: 'kanban',
+    TABLE: 'table',
+    REFLINK: 'reflink',
+} as const;
diff --git a/libs/components/editor-blocks/src/blocks/group/config/filter-op-rule.ts b/libs/components/editor-blocks/src/blocks/group/config/filter-op-rule.ts
new file mode 100644
index 000000000..8f92c0703
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/config/filter-op-rule.ts
@@ -0,0 +1,41 @@
+/* op rule for filter group */
+import { OpRule } from '../types';
+
+export const FILTER_OP_RULE_CONFIG: OpRule = [
+    {
+        key: 'includes',
+        value: 'includes1',
+    },
+    {
+        key: 'excludes',
+        value: 'excludes2',
+    },
+    {
+        key: '>',
+        value: '>1',
+    },
+    {
+        key: '<',
+        value: '<1',
+    },
+    {
+        key: '=',
+        value: '=1',
+    },
+    {
+        key: '>=',
+        value: '>=1',
+    },
+    {
+        key: '<=',
+        value: '<=1',
+    },
+    {
+        key: 'is null',
+        value: 'is null1',
+    },
+    {
+        key: 'is not null',
+        value: 'is not null1',
+    },
+];
diff --git a/libs/components/editor-blocks/src/blocks/group/config/sorter.ts b/libs/components/editor-blocks/src/blocks/group/config/sorter.ts
new file mode 100644
index 000000000..2c7c0ce6f
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/config/sorter.ts
@@ -0,0 +1,10 @@
+export const SORTER_CONFIG = [
+    {
+        label: 'ASC',
+        value: '1',
+    },
+    {
+        label: 'DESC',
+        value: '2',
+    },
+];
diff --git a/libs/components/editor-blocks/src/blocks/group/index.ts b/libs/components/editor-blocks/src/blocks/group/index.ts
new file mode 100644
index 000000000..07c480f01
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/index.ts
@@ -0,0 +1 @@
+export { Group } from './Group';
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/AddGroupButton.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/AddGroupButton.tsx
new file mode 100644
index 000000000..5fcb375b1
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/AddGroupButton.tsx
@@ -0,0 +1,78 @@
+import { useKanban } from '@toeverything/components/editor-core';
+import { DoneIcon } from '@toeverything/components/icons';
+import {
+    IconButton,
+    MuiClickAwayListener,
+    MuiPopper,
+} from '@toeverything/components/ui';
+import type { ChangeEvent, KeyboardEvent, MouseEvent } from 'react';
+import { useCallback, useState } from 'react';
+import { AddGroupWrapper, PopperContainer } from './styles';
+
+export const AddGroupButton = () => {
+    const { addGroup } = useKanban();
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    const [groupName, setGroupName] = useState('');
+    const open = Boolean(anchorEl);
+    const disabledAddGroup = !groupName;
+
+    const handleClick = useCallback(
+        async (event: MouseEvent<HTMLElement>) => {
+            if (open) {
+                setAnchorEl(null);
+                return;
+            }
+            setGroupName('');
+            setAnchorEl(event.currentTarget);
+        },
+        [open]
+    );
+
+    const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+        setGroupName(e.target.value.trim());
+    }, []);
+
+    const handleConfirm = useCallback(async () => {
+        if (!groupName) {
+            return;
+        }
+        const result = await addGroup(groupName);
+        if (result) {
+            setAnchorEl(null);
+        }
+    }, [addGroup, groupName]);
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+        if (event.key !== 'Enter') {
+            return;
+        }
+        handleConfirm();
+    };
+
+    return (
+        <>
+            <AddGroupWrapper onClick={handleClick}>+</AddGroupWrapper>
+            <MuiPopper open={open} anchorEl={anchorEl} placement="bottom-start">
+                <MuiClickAwayListener onClickAway={() => setAnchorEl(null)}>
+                    <PopperContainer>
+                        <input
+                            type="text"
+                            autoFocus
+                            value={groupName}
+                            onChange={handleChange}
+                            onKeyDown={handleKeyDown}
+                            placeholder="Add..."
+                        />
+                        <IconButton
+                            aria-label="done"
+                            disabled={disabledAddGroup}
+                            onClick={handleConfirm}
+                        >
+                            <DoneIcon />
+                        </IconButton>
+                    </PopperContainer>
+                </MuiClickAwayListener>
+            </MuiPopper>
+        </>
+    );
+};
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContainer.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContainer.tsx
new file mode 100644
index 000000000..daa5577ab
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContainer.tsx
@@ -0,0 +1,202 @@
+import type { KanbanGroup } from '@toeverything/components/editor-core';
+import {
+    DEFAULT_GROUP_ID,
+    PropertyType,
+    useKanban,
+} from '@toeverything/components/editor-core';
+import { DeleteCashBinIcon, DoneIcon } from '@toeverything/components/icons';
+import {
+    IconButton,
+    MuiClickAwayListener,
+    MuiPopper,
+} from '@toeverything/components/ui';
+import type {
+    ChangeEvent,
+    CSSProperties,
+    KeyboardEvent,
+    MouseEvent,
+} from 'react';
+import { useCallback, useState } from 'react';
+import { AddGroupButton } from './AddGroupButton';
+import { CardContext } from './CardContext';
+import { CardContextWrapper } from './dndable/wrapper/CardContextWrapper';
+import { DroppableContainer } from './dndable/wrapper/DroppableContainer';
+import {
+    KanbanBoard,
+    KanbanContainer,
+    KanbanHeader,
+    PopperContainer,
+    Tag,
+} from './styles';
+import type { CardContainerProps } from './types';
+
+const getKanbanColor = (
+    group: KanbanGroup
+): [color: CSSProperties['color'], background: CSSProperties['background']] => {
+    const DEFAULT_COLOR: [
+        color: CSSProperties['color'],
+        background: CSSProperties['background']
+    ] = ['#3A4C5C', 'transparent'];
+    if (!group) {
+        return DEFAULT_COLOR;
+    }
+    if (
+        group.type === PropertyType.Select ||
+        group.type === PropertyType.MultiSelect ||
+        group.type === DEFAULT_GROUP_ID
+    ) {
+        return [group.color, group.background];
+    }
+    // TODO other type color
+    return DEFAULT_COLOR;
+};
+
+const KanbanTag = (group: KanbanGroup) => {
+    const { removeGroup, renameGroup, checkIsDefaultGroup } = useKanban();
+    const [renamingGroupName, setRenamingGroupName] = useState(group.name);
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    const open = Boolean(anchorEl);
+    // Default group should not be renamed
+    const isDefaultGroup = checkIsDefaultGroup(group);
+    // Cannot be named empty string
+    const disabledRenameBtn = !renamingGroupName;
+
+    const handleClickTag = useCallback(
+        async (event: MouseEvent<HTMLElement>) => {
+            if (isDefaultGroup) {
+                return;
+            }
+            if (anchorEl) {
+                setAnchorEl(null);
+                return;
+            }
+            setAnchorEl(event.currentTarget);
+            // Reset to current groupName
+            setRenamingGroupName(group.name);
+        },
+        [anchorEl, group.name, isDefaultGroup]
+    );
+
+    const handleInputChange = useCallback(
+        (e: ChangeEvent<HTMLInputElement>) => {
+            setRenamingGroupName(e.target.value.trim());
+        },
+        []
+    );
+
+    const handleRename = useCallback(async () => {
+        if (!renamingGroupName) {
+            return;
+        }
+        const result = await renameGroup(group, renamingGroupName);
+        if (result) {
+            setAnchorEl(null);
+        }
+    }, [group, renamingGroupName, renameGroup]);
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+        if (event.key !== 'Enter') {
+            return;
+        }
+        if (!renamingGroupName) {
+            return;
+        }
+        handleRename();
+    };
+
+    const handleDelete = useCallback(() => {
+        removeGroup(group);
+        setAnchorEl(null);
+    }, [group, removeGroup]);
+
+    const [color, bg] = getKanbanColor(group);
+
+    return (
+        <>
+            <Tag
+                interactive={!isDefaultGroup}
+                color={color}
+                background={bg}
+                onClick={handleClickTag}
+            >
+                {group.name}
+            </Tag>
+
+            <MuiClickAwayListener onClickAway={() => setAnchorEl(null)}>
+                <MuiPopper
+                    open={open}
+                    anchorEl={anchorEl}
+                    placement="bottom-start"
+                >
+                    <PopperContainer>
+                        <input
+                            type="text"
+                            autoFocus
+                            value={renamingGroupName}
+                            onChange={handleInputChange}
+                            onKeyDown={handleKeyDown}
+                        />
+                        <IconButton aria-label="delete" onClick={handleDelete}>
+                            <DeleteCashBinIcon />
+                        </IconButton>
+                        <IconButton
+                            aria-label="done"
+                            disabled={disabledRenameBtn}
+                            onClick={handleRename}
+                        >
+                            <DoneIcon />
+                        </IconButton>
+                    </PopperContainer>
+                </MuiPopper>
+            </MuiClickAwayListener>
+        </>
+    );
+};
+
+export const CardContainer = (props: CardContainerProps) => {
+    const { kanban } = useKanban();
+    const { containerIds, items: dataSource, activeId } = props;
+    return (
+        <KanbanContainer>
+            {containerIds.map((containerId, idx) => {
+                const items = dataSource[containerId];
+
+                return (
+                    <KanbanBoard key={containerId}>
+                        <KanbanHeader>
+                            <KanbanTag {...kanban[idx]} />
+                            <span
+                                style={{
+                                    marginLeft: '10px',
+                                    color: getKanbanColor(kanban[idx])[0],
+                                }}
+                            >
+                                {items.length}
+                            </span>
+                        </KanbanHeader>
+                        <DroppableContainer
+                            key={containerId}
+                            id={containerId}
+                            items={items}
+                        >
+                            <CardContextWrapper
+                                containerId={containerId}
+                                items={items}
+                                render={({ items }) => (
+                                    <CardContext
+                                        group={kanban[idx]}
+                                        items={items}
+                                        activeId={activeId}
+                                    />
+                                )}
+                            />
+                        </DroppableContainer>
+                    </KanbanBoard>
+                );
+            })}
+            <KanbanBoard>
+                <AddGroupButton />
+            </KanbanBoard>
+        </KanbanContainer>
+    );
+};
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContext.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContext.tsx
new file mode 100644
index 000000000..4d3f311cb
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContext.tsx
@@ -0,0 +1,59 @@
+import { useCallback } from 'react';
+import { CardItem } from './CardItem';
+import { styled } from '@toeverything/components/ui';
+import { useKanban } from '@toeverything/components/editor-core';
+import { CardItemPanelWrapper } from './dndable/wrapper/CardItemPanelWrapper';
+import type {
+    KanbanCard,
+    KanbanGroup,
+} from '@toeverything/components/editor-core';
+
+const AddCardWrapper = styled('div')({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: '5px',
+    width: '100%',
+    color: '#B7C5D1',
+    border: '1px solid #F5F7F8',
+    fontSize: '12px',
+    padding: '3px 15px',
+    cursor: 'pointer',
+});
+
+const AddCard = ({ group }: { group: KanbanGroup }) => {
+    const { addCard } = useKanban();
+    const handleClick = useCallback(async () => {
+        await addCard(group);
+    }, [addCard]);
+    return <AddCardWrapper onClick={handleClick}>+</AddCardWrapper>;
+};
+
+interface Props {
+    group: KanbanGroup;
+    items: KanbanCard[];
+    activeId?: string;
+}
+
+export const CardContext = (props: Props) => {
+    const { items, group, activeId } = props;
+    return (
+        <>
+            {items.map(item => {
+                const { id, block } = item;
+
+                return (
+                    <div key={id} style={{ cursor: 'pointer' }}>
+                        <CardItemPanelWrapper
+                            item={item}
+                            active={activeId === id}
+                        >
+                            <CardItem id={id} block={block} />
+                        </CardItemPanelWrapper>
+                    </div>
+                );
+            })}
+            <AddCard group={group} />
+        </>
+    );
+};
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx
new file mode 100644
index 000000000..a84a9ba74
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx
@@ -0,0 +1,63 @@
+import { styled } from '@toeverything/components/ui';
+import { RenderBlock, useKanban } from '@toeverything/components/editor-core';
+import type { KanbanCard } from '@toeverything/components/editor-core';
+
+const CardContainer = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: '#fff',
+    border: '1px solid #E2E7ED',
+    borderRadius: '5px',
+});
+
+const CardContent = styled('div')({
+    margin: '20px',
+});
+
+const CardActions = styled('div')({
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    height: '29px',
+    background: 'rgba(152, 172, 189, 0.1)',
+    borderRadius: '0px 0px 5px 5px',
+    padding: '6px 0 6px 19px',
+    fontSize: '12px',
+    fontWeight: '300',
+    color: '#98ACBD',
+});
+
+const PlusIcon = styled('div')({
+    marginRight: '9px',
+    fontWeight: '500',
+    lineHeight: 0,
+    '::before': {
+        content: '"+"',
+    },
+});
+
+export const CardItem = ({
+    id,
+    block,
+}: {
+    id: KanbanCard['id'];
+    block: KanbanCard['block'];
+}) => {
+    const { addSubItem } = useKanban();
+    const onAddItem = async () => {
+        await addSubItem(block);
+    };
+
+    return (
+        <CardContainer>
+            <CardContent>
+                <RenderBlock blockId={id} />
+            </CardContent>
+            <CardActions onClick={onAddItem}>
+                <PlusIcon />
+                Add item
+            </CardActions>
+        </CardContainer>
+    );
+};
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/SceneKanban.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/SceneKanban.tsx
new file mode 100644
index 000000000..27d554317
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/SceneKanban.tsx
@@ -0,0 +1,33 @@
+import { useKanban, withKanban } from '@toeverything/components/editor-core';
+import { CardContainer } from './CardContainer';
+import { SceneKanbanContext } from './context';
+import { CardContainerWrapper } from './dndable/wrapper/CardContainerWrapper';
+import type { ComponentType } from 'react';
+import type { CreateView } from '@toeverything/framework/virgo';
+
+export const SceneKanban: ComponentType<CreateView> = withKanban<CreateView>(
+    ({ editor, block }) => {
+        const { kanban } = useKanban();
+
+        return (
+            <SceneKanbanContext.Provider value={{ editor, block }}>
+                <CardContainerWrapper
+                    dataSource={kanban}
+                    render={({
+                        activeId,
+                        items,
+                        containerIds,
+                        isSortingContainer,
+                    }) => (
+                        <CardContainer
+                            activeId={activeId}
+                            items={items}
+                            isSortingContainer={isSortingContainer}
+                            containerIds={containerIds}
+                        />
+                    )}
+                />
+            </SceneKanbanContext.Provider>
+        );
+    }
+);
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/context.ts b/libs/components/editor-blocks/src/blocks/group/scene-kanban/context.ts
new file mode 100644
index 000000000..583464068
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/context.ts
@@ -0,0 +1,9 @@
+import { AsyncBlock, CreateView } from '@toeverything/framework/virgo';
+import { createContext } from 'react';
+
+const SceneKanbanContext = createContext<{
+    editor: CreateView['editor'];
+    block: AsyncBlock;
+}>({} as any);
+
+export { SceneKanbanContext };
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/component/Container.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/component/Container.tsx
new file mode 100644
index 000000000..a64fdf0f4
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/component/Container.tsx
@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import type { CSSProperties, ForwardedRef, ReactNode } from 'react';
+
+interface Props {
+    children: ReactNode;
+    label?: string;
+    style?: CSSProperties;
+}
+
+export const Container = forwardRef(
+    ({ children, label, style }: Props, ref: ForwardedRef<HTMLDivElement>) => {
+        return (
+            <div ref={ref} style={style}>
+                {label && <div>{label}</div>}
+                {children}
+            </div>
+        );
+    }
+);
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/component/ItemStyle.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/component/ItemStyle.tsx
new file mode 100644
index 000000000..9804b5f31
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/component/ItemStyle.tsx
@@ -0,0 +1,51 @@
+import { styled } from '@toeverything/components/ui';
+import type { Transform } from '../type';
+
+interface ItemStyleProps {
+    dragOverlay?: boolean;
+    transition?: string;
+    fadeIn?: boolean;
+    transform?: Transform;
+    index?: number;
+}
+
+/* dnd-kit has built-in animation function, rewrite the form of classname to css-in-js here, please do not use it in the business layer */ const ItemStyle =
+    styled('div')((props: ItemStyleProps) => {
+        const { dragOverlay, transition, fadeIn, transform, index } = props;
+
+        const translateX = transform
+            ? `${Math.round(transform.x)}px`
+            : undefined;
+        const translateY = transform
+            ? `${Math.round(transform.y)}px`
+            : undefined;
+        const scaleAroundX = transform?.scaleX
+            ? `${transform.scaleX}`
+            : undefined;
+        const scaleAroundY = transform?.scaleY
+            ? `${transform.scaleY}`
+            : undefined;
+
+        return {
+            transform: `translate3d(${translateX || 0}, ${
+                translateY || 0
+            }, 0) scaleX(${scaleAroundX || 1}) scaleY(${scaleAroundY || 1})`,
+            transformOrigin: '0 0',
+            touchAction: 'manipulation',
+            transition: `${[transition].filter(Boolean).join(', ')}`,
+            '--translate-x': translateX,
+            '--translate-y': translateY,
+            '--scale-x': scaleAroundX,
+            '--scale-y': scaleAroundY,
+            '--index': index,
+            ...(dragOverlay && {
+                '--scale': 1.05,
+                'z-index': 999,
+            }),
+            ...(fadeIn && {
+                animation: 'fadeIn 500ms ease',
+            }),
+        };
+    });
+
+export { ItemStyle };
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/drag-overlay/DragOverlayPortal.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/drag-overlay/DragOverlayPortal.tsx
new file mode 100644
index 000000000..b7495e05b
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/drag-overlay/DragOverlayPortal.tsx
@@ -0,0 +1,43 @@
+import { createPortal } from 'react-dom';
+import { defaultDropAnimationSideEffects, DragOverlay } from '@dnd-kit/core';
+import { renderContainerDragOverlay } from './renderContainerDragOverlay';
+import { renderSortableItemDragOverlay } from './renderSortableItemDragOverlay';
+import type { DndableItems } from '../type';
+
+interface DragOverlayPortal {
+    activeId: string;
+    containerIds: string[];
+    items: DndableItems;
+}
+
+const dropAnimation = {
+    sideEffects: defaultDropAnimationSideEffects({
+        styles: {
+            active: {
+                opacity: '0.5',
+            },
+        },
+    }),
+};
+
+const DragOverlayPortal = ({
+    activeId,
+    containerIds,
+    items,
+}: DragOverlayPortal) => {
+    return createPortal(
+        <DragOverlay adjustScale={false} dropAnimation={dropAnimation}>
+            {activeId
+                ? containerIds.includes(activeId)
+                    ? renderContainerDragOverlay({
+                          containerId: activeId,
+                          items,
+                      })
+                    : renderSortableItemDragOverlay({ activeId, items })
+                : null}
+        </DragOverlay>,
+        document.body
+    );
+};
+
+export { DragOverlayPortal };
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/drag-overlay/renderContainerDragOverlay.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/drag-overlay/renderContainerDragOverlay.tsx
new file mode 100644
index 000000000..957ee8599
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/drag-overlay/renderContainerDragOverlay.tsx
@@ -0,0 +1,28 @@
+import { CardItemWrapper } from '../wrapper/CardItemWrapper';
+import { CardItem } from '../../CardItem';
+import type { KanbanCard } from '@toeverything/components/editor-core';
+import type { DndableItems } from '../type';
+
+export function renderContainerDragOverlay({
+    containerId,
+    items,
+}: {
+    containerId: string;
+    items: DndableItems;
+}) {
+    return (
+        <div style={{ height: '100%' }}>
+            {items[containerId].map((item, index) => {
+                const { id, block } = item;
+
+                return (
+                    <CardItemWrapper
+                        key={id}
+                        card={<CardItem key={id} id={id} block={block} />}
+                        index={index}
+                    />
+                );
+            })}
+        </div>
+    );
+}
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/drag-overlay/renderSortableItemDragOverlay.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/drag-overlay/renderSortableItemDragOverlay.tsx
new file mode 100644
index 000000000..d9278beab
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/drag-overlay/renderSortableItemDragOverlay.tsx
@@ -0,0 +1,17 @@
+import { CardItem } from '../../CardItem';
+import { CardItemWrapper } from '../wrapper/CardItemWrapper';
+import { findContainer } from '../helper';
+import type { DndableItems } from '../type';
+
+export function renderSortableItemDragOverlay({
+    activeId,
+    items,
+}: {
+    activeId: string;
+    items: DndableItems;
+}) {
+    const activeContainer = findContainer(activeId, items);
+    const item = items[activeContainer].find(item => item.id === activeId);
+
+    return <CardItemWrapper card={<CardItem {...item} />} dragOverlay />;
+}
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/helper.ts b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/helper.ts
new file mode 100644
index 000000000..f662144ec
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/helper.ts
@@ -0,0 +1,87 @@
+/**
+ * Data format conversion
+ * @param data
+ */
+import type { DndableItems } from './type';
+import type {
+    KanbanCard,
+    KanbanGroup,
+} from '@toeverything/components/editor-core';
+import { isEqual } from '@toeverything/utils';
+
+const transformKanban2DndFormat = (dataSource: KanbanGroup[]) => {
+    return dataSource.reduce<[DndableItems, string[]]>(
+        (tuple, current) => {
+            const { id, items } = current;
+            const [dndableItems, dndableContainerIds] = tuple;
+            return [
+                { ...dndableItems, [id]: items },
+                [...dndableContainerIds, id],
+            ];
+        },
+        [{}, []]
+    );
+};
+
+const findContainer = (id: string, items: DndableItems) => {
+    if (id in items) {
+        return id;
+    }
+
+    return Object.keys(items).find(key =>
+        items[key].some(item => item.id === id)
+    );
+};
+
+/**
+ * Find the sibling node after the dragging of the moved node ends
+ * @param cards
+ * @param currentCardId
+ */
+const findSibling = (cards: KanbanCard[], currentCardId: string) => {
+    const index = cards.findIndex(card => card.id === currentCardId);
+
+    return [cards[index - 1]?.id ?? null, cards[index + 1]?.id ?? null];
+};
+
+/**
+ * Get card ids
+ * @param data
+ */
+const pickIdFromCards = (data: KanbanCard[][]) => {
+    return data.reduce((arr: string[], current) => {
+        const ids = current.map(item => item.id);
+
+        return [...arr, ...ids];
+    }, []);
+};
+
+/**
+ * Determine whether the current operation belongs to the addition, deletion, modification and inspection at the card/container level (distinguished from actions such as dragging, inputting card/container content, etc.)
+ * @param prevContainerIds
+ * @param prevCardIds
+ * @param nextContainerIds
+ * @param nextCardIds
+ */
+const shouldUpdate = (
+    [prevContainerIds, prevCardIds]: [string[], string[]],
+    [nextContainerIds, nextCardIds]: [string[], string[]]
+) => {
+    return !(
+        /* Since the rendering of the container is based on the order, the order of the container changes and needs to be updated */ (
+            isEqual(
+                prevContainerIds,
+                nextContainerIds
+            ) /* add/remove container */ &&
+            isEqual(prevCardIds.sort(), nextCardIds.sort())
+        ) /* add/delete cards */
+    );
+};
+
+export {
+    transformKanban2DndFormat,
+    findContainer,
+    findSibling,
+    pickIdFromCards,
+    shouldUpdate,
+};
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/type.ts b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/type.ts
new file mode 100644
index 000000000..fe59e9ee2
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/type.ts
@@ -0,0 +1,31 @@
+import type { KanbanCard } from '@toeverything/components/editor-core';
+import type {
+    CollisionDetection,
+    DragStartEvent,
+    DragEndEvent,
+    DragOverEvent,
+    Active,
+} from '@dnd-kit/core';
+
+export type DndableItems = Record<string, KanbanCard[]>;
+
+export type UseDndableRes = [
+    {
+        active: Active;
+        containerIds: string[];
+        items: DndableItems;
+        collisionDetectionStrategy: CollisionDetection;
+    },
+    {
+        onDragStart: ({ active }: DragStartEvent) => void;
+        onDragOver: ({ active, over }: DragOverEvent) => void;
+        onDragEnd: ({ active, over }: DragEndEvent) => void;
+    }
+];
+
+export type Transform = {
+    x: number;
+    y: number;
+    scaleX: number;
+    scaleY: number;
+};
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/CardContainerWrapper.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/CardContainerWrapper.tsx
new file mode 100644
index 000000000..b205774ef
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/CardContainerWrapper.tsx
@@ -0,0 +1,77 @@
+import {
+    DndContext,
+    MeasuringStrategy,
+    PointerSensor,
+    useSensor,
+    useSensors,
+} from '@dnd-kit/core';
+import { useDndable } from './use-dndable';
+import {
+    horizontalListSortingStrategy,
+    SortableContext,
+} from '@dnd-kit/sortable';
+import { DragOverlayPortal } from '../drag-overlay/DragOverlayPortal';
+import { transformKanban2DndFormat } from '../helper';
+import type { ReactNode } from 'react';
+import type { KanbanGroup } from '@toeverything/components/editor-core';
+import type { DndableItems } from '../type';
+
+interface RenderParams {
+    containerIds: string[];
+    items: DndableItems;
+    isSortingContainer?: boolean;
+    activeId?: string;
+}
+
+interface Props {
+    dataSource: KanbanGroup[];
+    render: (params: RenderParams) => ReactNode;
+}
+
+export const CardContainerWrapper = (props: Props) => {
+    const { dataSource, render } = props;
+    const sensors = useSensors(
+        useSensor(PointerSensor, {
+            activationConstraint: {
+                distance: 15,
+            },
+        })
+    );
+
+    const [
+        { active, containerIds, items, collisionDetectionStrategy },
+        { onDragStart, onDragOver, onDragEnd },
+    ] = useDndable(...transformKanban2DndFormat(dataSource));
+    const activeId = active?.id as string;
+    const isSortingContainer = activeId
+        ? containerIds.includes(activeId)
+        : false;
+
+    return (
+        <DndContext
+            sensors={sensors}
+            collisionDetection={collisionDetectionStrategy}
+            measuring={{
+                droppable: {
+                    strategy: MeasuringStrategy.Always,
+                },
+            }}
+            onDragStart={onDragStart}
+            onDragOver={onDragOver}
+            onDragEnd={onDragEnd}
+        >
+            <SortableContext
+                items={containerIds}
+                strategy={horizontalListSortingStrategy}
+            >
+                {render({ activeId, containerIds, items, isSortingContainer })}
+            </SortableContext>
+
+            <DragOverlayPortal
+                items={items}
+                activeId={activeId}
+                containerIds={containerIds}
+            />
+        </DndContext>
+    );
+};
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/CardContextWrapper.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/CardContextWrapper.tsx
new file mode 100644
index 000000000..3f99f5437
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/CardContextWrapper.tsx
@@ -0,0 +1,23 @@
+import {
+    verticalListSortingStrategy,
+    SortableContext,
+} from '@dnd-kit/sortable';
+import { KanbanGroup } from '../../styles';
+import type { ReactNode } from 'react';
+import type { KanbanCard } from '@toeverything/components/editor-core';
+
+interface Props {
+    containerId: string;
+    items: KanbanCard[];
+    render: ({ items }: { items: KanbanCard[] }) => ReactNode;
+}
+
+export const CardContextWrapper = (props: Props) => {
+    const { items, render } = props;
+
+    return (
+        <SortableContext items={items} strategy={verticalListSortingStrategy}>
+            <KanbanGroup>{render({ items })}</KanbanGroup>
+        </SortableContext>
+    );
+};
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/CardItemPanelWrapper.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/CardItemPanelWrapper.tsx
new file mode 100644
index 000000000..b02233de8
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/CardItemPanelWrapper.tsx
@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CardItemWrapper } from './CardItemWrapper';
+import type { ReactNode } from 'react';
+import type { Active } from '@dnd-kit/core';
+import type { KanbanCard } from '@toeverything/components/editor-core';
+
+interface Props {
+    disabled?: boolean;
+    index?: number;
+    item: KanbanCard;
+    children: ReactNode;
+    active?: boolean;
+}
+
+function useMountStatus() {
+    const [isMounted, setIsMounted] = useState(false);
+
+    useEffect(() => {
+        const timeout = setTimeout(() => setIsMounted(true), 500);
+
+        return () => clearTimeout(timeout);
+    }, []);
+
+    return isMounted;
+}
+
+const CardItemPanelWrapper = ({
+    disabled,
+    index,
+    item,
+    active,
+    children,
+}: Props) => {
+    const { setNodeRef, listeners, isDragging, transform, transition } =
+        useSortable({
+            id: item.id,
+        });
+
+    const mounted = useMountStatus();
+    const mountedWhileDragging = isDragging && !mounted;
+
+    return (
+        <CardItemWrapper
+            ref={disabled ? undefined : setNodeRef}
+            dragging={isDragging}
+            index={index}
+            style={{ opacity: active ? 0.5 : undefined }}
+            transition={transition}
+            transform={transform}
+            fadeIn={mountedWhileDragging}
+            listeners={listeners}
+            card={children}
+        />
+    );
+};
+
+export { CardItemPanelWrapper };
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/CardItemWrapper.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/CardItemWrapper.tsx
new file mode 100644
index 000000000..633fc7fbc
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/CardItemWrapper.tsx
@@ -0,0 +1,56 @@
+import { memo, forwardRef } from 'react';
+import { ItemStyle } from '../component/ItemStyle';
+import type { ReactNode, ForwardedRef, CSSProperties } from 'react';
+import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
+import type { Transform } from '../type';
+
+interface Props {
+    index?: number;
+    dragOverlay?: boolean;
+    dragging?: boolean;
+    disabled?: boolean;
+    fadeIn?: boolean;
+    listeners?: SyntheticListenerMap;
+    transition?: string;
+    transform?: Transform;
+    style?: CSSProperties;
+    card: ReactNode;
+}
+
+const CardItemWrapper = memo(
+    forwardRef(
+        (
+            {
+                dragOverlay,
+                dragging,
+                disabled,
+                fadeIn,
+                index,
+                listeners,
+                transition,
+                transform,
+                card,
+                style,
+                ...props
+            }: Props,
+            ref: ForwardedRef<HTMLDivElement>
+        ) => {
+            const ItemStyleProps = {
+                dragOverlay,
+                transition,
+                fadeIn,
+                transform,
+                index,
+            };
+            return (
+                <ItemStyle ref={ref} {...ItemStyleProps} style={style}>
+                    <div {...listeners} {...props} tabIndex={0}>
+                        {card}
+                    </div>
+                </ItemStyle>
+            );
+        }
+    )
+);
+
+export { CardItemWrapper };
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/DroppableContainer.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/DroppableContainer.tsx
new file mode 100644
index 000000000..0d2126318
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/DroppableContainer.tsx
@@ -0,0 +1,47 @@
+import { useSortable, defaultAnimateLayoutChanges } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Container } from '../component/Container';
+import type { ReactNode } from 'react';
+import type { AnimateLayoutChanges } from '@dnd-kit/sortable';
+import type { KanbanCard } from '@toeverything/components/editor-core';
+
+const animateLayoutChanges: AnimateLayoutChanges = args =>
+    defaultAnimateLayoutChanges({ ...args, wasDragging: true });
+
+interface Props {
+    children: ReactNode;
+    disabled?: boolean;
+    id: string;
+    items: KanbanCard[];
+}
+
+export function DroppableContainer({
+    children,
+    disabled,
+    id,
+    items,
+    ...props
+}: Props) {
+    const { isDragging, setNodeRef, transition, transform } = useSortable({
+        id,
+        data: {
+            type: 'container',
+            children: items,
+        },
+        animateLayoutChanges,
+    });
+
+    return (
+        <Container
+            ref={disabled ? undefined : setNodeRef}
+            style={{
+                transition,
+                transform: CSS.Translate.toString(transform),
+                ...(isDragging && { opacity: 0.5 }),
+            }}
+            {...props}
+        >
+            {children}
+        </Container>
+    );
+}
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/use-dndable.ts b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/use-dndable.ts
new file mode 100644
index 000000000..4dfcc5f5a
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/use-dndable.ts
@@ -0,0 +1,294 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+    closestCenter,
+    getFirstCollision,
+    pointerWithin,
+    rectIntersection,
+} from '@dnd-kit/core';
+import { arrayMove } from '@dnd-kit/sortable';
+import {
+    findContainer,
+    findSibling,
+    pickIdFromCards,
+    shouldUpdate,
+} from '../helper';
+import type {
+    CollisionDetection,
+    DragStartEvent,
+    DragOverEvent,
+    DragEndEvent,
+} from '@dnd-kit/core';
+import type { DndableItems, UseDndableRes } from '../type';
+
+export const useDndable = (
+    dndableItems: DndableItems,
+    dndableContainerIds: string[]
+): UseDndableRes => {
+    const [items, setItems] = useState(dndableItems);
+    const [containerIds, setContainerIds] = useState(dndableContainerIds);
+    const [active, setActive] = useState(null);
+    const lastOverId = useRef(null);
+    const recentlyMovedToNewContainer = useRef(false);
+    const activeId = active?.id;
+
+    useEffect(() => {
+        /*
+         * Kanban operations are divided into: dragging, deleting, adding containers/cards, etc.;
+         * 1. When any action is generated, the data source needs to be updated.
+         * However, since the child components are rendered asynchronously, during this process, the payload will be continuously patched to the data source, causing useEffect to render endlessly.
+         * (The main reason for the deformation of the card during the dragging process)
+         * 2. In order to achieve better visual effects, use the hack scheme here to selectively update the data source:
+         * 2.1 Maintain the state of the card in the state for drag and drop operations;
+         * When a drag and drop behavior occurs: use moveTo to map the payload to the data source, but do not re-fetch the new data source
+         * (If you use moveTo directly, the dragged cards and the exchanged cards will be re-rendered. This is because the current database read and write operations do not have a batch mechanism, and the vision is very strange)
+         * 2.2 When deletion or addition occurs, the data source needs to be updated to display a new view;
+         */
+        const nextContainerIds = Object.keys(dndableItems);
+        const prevCardIds = pickIdFromCards(Object.values(items));
+        const nextCardIds = pickIdFromCards(Object.values(dndableItems));
+
+        if (
+            shouldUpdate(
+                [containerIds, prevCardIds],
+                [nextContainerIds, nextCardIds]
+            )
+        ) {
+            setItems(dndableItems);
+            setContainerIds(nextContainerIds);
+        }
+    }, [containerIds, dndableItems, items]);
+
+    const collisionDetectionStrategy: CollisionDetection = useCallback(
+        args => {
+            if (activeId && activeId in items) {
+                return closestCenter({
+                    ...args,
+                    droppableContainers: args.droppableContainers.filter(
+                        container => container.id in items
+                    ),
+                });
+            }
+
+            // Start by finding any intersecting droppable
+            const pointerIntersections = pointerWithin(args);
+            const intersections =
+                pointerIntersections.length > 0
+                    ? // If there are droppables intersecting with the pointer, return those
+                      pointerIntersections
+                    : rectIntersection(args);
+            let overId = getFirstCollision(intersections, 'id');
+
+            if (overId != null) {
+                if (overId in items) {
+                    const containerItems = items[overId].filter(Boolean);
+
+                    // If a container is matched and it contains items (columns 'A', 'B', 'C')
+                    if (containerItems.length > 0) {
+                        // Return the closest droppable within that container
+                        overId = closestCenter({
+                            ...args,
+                            droppableContainers:
+                                args.droppableContainers.filter(
+                                    container =>
+                                        container.id !== overId &&
+                                        containerItems.some(
+                                            item => item.id === container.id
+                                        )
+                                ),
+                        })[0]?.id;
+                    }
+                }
+
+                lastOverId.current = overId;
+
+                return [{ id: overId }];
+            }
+
+            if (recentlyMovedToNewContainer.current) {
+                lastOverId.current = activeId;
+            }
+
+            // If no droppable is matched, return the last match
+            return lastOverId.current ? [{ id: lastOverId.current }] : [];
+        },
+        [activeId, items]
+    );
+
+    useEffect(() => {
+        requestAnimationFrame(() => {
+            recentlyMovedToNewContainer.current = false;
+        });
+    }, [items]);
+
+    const onDragStart = ({ active }: DragStartEvent) => {
+        setActive(active);
+    };
+
+    const onDragOver = ({ active, over }: DragOverEvent) => {
+        const overId = over?.id as string;
+        const activeId = active?.id as string;
+        if (overId == null || activeId in items) {
+            return;
+        }
+
+        const overContainer = findContainer(overId, items);
+        const activeContainer = findContainer(activeId, items);
+
+        if (!overContainer || !activeContainer) {
+            return;
+        }
+
+        if (activeContainer !== overContainer) {
+            setItems(items => {
+                const activeItems = items[activeContainer];
+                const overItems = items[overContainer];
+                const overIndex = overItems.findIndex(
+                    item => item.id === overId
+                );
+                const activeIndex = activeItems.findIndex(
+                    item => item.id === activeId
+                );
+                const activeItem = activeItems.find(
+                    item => item.id === activeId
+                );
+
+                let newIndex;
+
+                if (overId in items) {
+                    newIndex = overItems.length + 1;
+                } else {
+                    const isBelowOverItem =
+                        over &&
+                        active.rect.current.translated &&
+                        active.rect.current.translated.top >
+                            over.rect.top + over.rect.height;
+
+                    const modifier = isBelowOverItem ? 1 : 0;
+
+                    newIndex =
+                        overIndex >= 0
+                            ? overIndex + modifier
+                            : overItems.length + 1;
+                }
+
+                recentlyMovedToNewContainer.current = true;
+
+                const data = {
+                    ...items,
+                    [activeContainer]: items[activeContainer]
+                        .filter(item => item.id !== active.id)
+                        .filter(Boolean),
+                    [overContainer]: [
+                        ...items[overContainer].slice(0, newIndex),
+                        items[activeContainer][activeIndex],
+                        ...items[overContainer].slice(
+                            newIndex,
+                            items[overContainer].length
+                        ),
+                    ].filter(Boolean),
+                };
+
+                /*
+                 * Linked with the following, if the cards in different Containers move horizontally (same level), onDragEnd.moveTo will not be triggered
+                 * used here to handle the scene
+                 * */
+                const [beforeId, afterId] = findSibling(
+                    data[overContainer],
+                    activeId
+                );
+
+                activeItem?.moveTo(overContainer, beforeId, afterId);
+
+                return data;
+            });
+        }
+    };
+
+    const onDragEnd = ({ active, over }: DragEndEvent) => {
+        const overId = over?.id as string;
+        const activeId = active?.id as string;
+
+        if (activeId in items && overId) {
+            setContainerIds(containerIds => {
+                const activeIndex = containerIds.indexOf(activeId);
+                const overIndex = containerIds.indexOf(overId);
+
+                if (activeIndex === -1 || overIndex === -1) {
+                    return containerIds;
+                }
+
+                return arrayMove(containerIds, activeIndex, overIndex);
+            });
+        }
+
+        const activeContainer = findContainer(activeId, items);
+
+        if (!activeContainer) {
+            setActive(null);
+            return;
+        }
+
+        if (overId == null) {
+            setActive(null);
+            return;
+        }
+
+        const overContainer = findContainer(overId, items);
+
+        if (overContainer) {
+            const activeIndex = items[activeContainer].findIndex(
+                item => item.id === activeId
+            );
+            const overIndex = items[overContainer].findIndex(
+                item => item.id === overId
+            );
+
+            if (activeIndex === -1 || overIndex === -1) {
+                return;
+            }
+
+            /* Between different containers, dragging at the same level will not go through this logic */
+            if (activeIndex !== overIndex) {
+                setItems(items => {
+                    const data = {
+                        ...items,
+                        [overContainer]: arrayMove(
+                            items[overContainer],
+                            activeIndex,
+                            overIndex
+                        ).filter(Boolean),
+                    };
+
+                    const activeItems = items[activeContainer];
+                    const activeItem = activeItems.find(
+                        item => item.id === activeId
+                    );
+                    const [beforeId, afterId] = findSibling(
+                        items[overContainer],
+                        activeId
+                    );
+
+                    activeItem?.moveTo(overContainer, beforeId, afterId);
+
+                    return data;
+                });
+            }
+        }
+
+        setActive(null);
+    };
+
+    return [
+        {
+            active,
+            containerIds,
+            items,
+            collisionDetectionStrategy,
+        },
+        {
+            onDragStart,
+            onDragOver,
+            onDragEnd,
+        },
+    ];
+};
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/helper.ts b/libs/components/editor-blocks/src/blocks/group/scene-kanban/helper.ts
new file mode 100644
index 000000000..26b168f90
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/helper.ts
@@ -0,0 +1,140 @@
+import { DEFAULT_COLUMN_KEYS } from '@toeverything/datasource/db-service';
+import { SORTER_CONFIG } from '../components/sorter/config';
+import { FILTER_RULE_CONFIG } from '../components/filter/config/filter-group-config';
+import type { KanbanGroup } from '@toeverything/components/editor-core';
+import type {
+    FilterConstraint,
+    MultipleValue,
+} from '../components/filter/types';
+import type { SorterConstraint } from '../components/sorter/types';
+import type { DefaultColumnsValue } from '@toeverything/datasource/db-service';
+
+/**
+ * TODO: Grayscale configuration
+ */
+
+const filter = (
+    kanban: KanbanGroup[],
+    filterConstraint: FilterConstraint = []
+) => {
+    return kanban.map(panel => {
+        const cards = panel.items;
+
+        const effectiveCards = cards.filter(card => {
+            const properties =
+                card.block.getProperties() as unknown as DefaultColumnsValue;
+
+            const validRes = filterConstraint.map(constraint => {
+                const { key, opSelectValue, valueSelectValue } = constraint;
+
+                /* filter constraint has no value, no filter */ if (
+                    !valueSelectValue ||
+                    !valueSelectValue.length
+                ) {
+                    return true;
+                }
+
+                /* For the time being, only content and checked need to be filtered, and you can continue to add policies in the future */
+                if (key === DEFAULT_COLUMN_KEYS.Text) {
+                    if (key in properties) {
+                        const textValue = properties?.[key]?.value
+                            .reduce((res, current) => res + current.text, '')
+                            .toLowerCase();
+                        const isContainer = textValue.includes(
+                            (valueSelectValue as string).trim()
+                        );
+                        if (
+                            opSelectValue === FILTER_RULE_CONFIG.include.value
+                        ) {
+                            return isContainer;
+                        }
+
+                        return !isContainer;
+                    }
+                }
+
+                if (key === DEFAULT_COLUMN_KEYS.Checked) {
+                    /* selected all */
+                    if (valueSelectValue.length === 2) {
+                        return true;
+                    }
+
+                    if (opSelectValue === FILTER_RULE_CONFIG.eq.value) {
+                        return (
+                            (properties[key]?.value || false) ===
+                            (valueSelectValue[0] as MultipleValue).value
+                        );
+                    }
+
+                    return !(
+                        (properties[key]?.value || false) ===
+                        (valueSelectValue[0] as MultipleValue).value
+                    );
+                }
+
+                /* If the card has neither content nor checked, then filter it out directly */
+                return false;
+            });
+
+            const isValid = !validRes.some(item => item === false);
+
+            return isValid;
+        });
+
+        return {
+            ...panel,
+            items: effectiveCards,
+        };
+    });
+};
+
+const sorter = (kanban: KanbanGroup[], sorterConstraint: SorterConstraint) => {
+    return kanban.map(cardPanel => {
+        let cards = cardPanel.items;
+
+        /* The data is divided into three categories: checked is true; checked is false; no checked */
+        for (const constraint of sorterConstraint) {
+            const { field, rule } = constraint;
+            if (field === 'checked') {
+                const checkedData = [];
+                const unCheckedData = [];
+                const noCheckedData = [];
+
+                for (const card of cards) {
+                    const properties =
+                        card.block.getProperties() as unknown as DefaultColumnsValue;
+                    const checked = properties[field]?.value;
+
+                    if (checked === true) {
+                        checkedData.push(card);
+                    } else if (checked === false) {
+                        unCheckedData.push(card);
+                    } else {
+                        noCheckedData.push(card);
+                    }
+                }
+
+                if (rule === SORTER_CONFIG.ASC.value) {
+                    cards = [].concat(
+                        checkedData,
+                        unCheckedData,
+                        noCheckedData
+                    );
+                } else {
+                    cards = [].concat(
+                        unCheckedData,
+                        checkedData,
+                        noCheckedData
+                    );
+                }
+            }
+        }
+
+        return {
+            ...cardPanel,
+            items: cards,
+        };
+    });
+};
+
+export { filter, sorter };
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/index.ts b/libs/components/editor-blocks/src/blocks/group/scene-kanban/index.ts
new file mode 100644
index 000000000..694fb266c
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/index.ts
@@ -0,0 +1 @@
+export { SceneKanban } from './SceneKanban';
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/styles.ts b/libs/components/editor-blocks/src/blocks/group/scene-kanban/styles.ts
new file mode 100644
index 000000000..71457104c
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/styles.ts
@@ -0,0 +1,105 @@
+import { styled } from '@toeverything/components/ui';
+import type { CSSProperties } from 'react';
+
+export const KanbanContainer = styled('div')({
+    display: 'flex',
+    padding: '15px 0',
+
+    // Scrollbars
+    // Always show scrollbars when hover
+    // See https://stackoverflow.com/questions/7492062/css-overflow-scroll-always-show-vertical-scroll-bar
+    // See https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
+    overflowX: 'scroll',
+    // Set overflowY to 'hidden' to workaround the scrollbars flash when drag kanban card
+    overflowY: 'hidden',
+    webkitOverflowScrolling: 'auto',
+    '::-webkit-scrollbar': {
+        webkitAppearance: 'none',
+        height: '7px',
+    },
+    '&:hover': {
+        '&::-webkit-scrollbar-thumb': {
+            borderRadius: '4px',
+            backgroundColor: '#98ACBD33',
+        },
+        '&::-webkit-scrollbar': {
+            borderRadius: '4px',
+            backgroundColor: '#98ACBD1A',
+        },
+    },
+    // scrollbarGutter: 'stable',
+    // overscrollBehavior: 'contain',
+
+    '& > * + *': {
+        marginLeft: '10px',
+    },
+});
+
+export const KanbanBoard = styled('div')({
+    display: 'flex',
+    width: '296px',
+    flex: '0 0 296px',
+    flexDirection: 'column',
+});
+
+export const KanbanGroup = styled('div')({
+    marginTop: '18px',
+
+    display: 'flex',
+    flexDirection: 'column',
+    '& > * + *': {
+        marginTop: '10px',
+    },
+});
+
+export const KanbanHeader = styled('div')({
+    whiteSpace: 'nowrap',
+    color: '#3A4C5C',
+    fontSize: '12px',
+});
+
+export const Tag = styled('div')<{
+    interactive?: boolean;
+    color?: CSSProperties['color'];
+    background?: CSSProperties['background'];
+}>(({ interactive, color, background }) => ({
+    display: 'inline-flex',
+    justifyContent: 'center',
+    height: '20px',
+    alignItems: 'center',
+    whiteSpace: 'nowrap',
+    borderRadius: '10px',
+    background: background ?? '#ECEFF2',
+    color: color ?? '#3A4C5C',
+    fontSize: '12px',
+    padding: '0 8px',
+    cursor: interactive ? 'pointer' : 'default',
+    userSelect: 'none',
+}));
+
+export const AddGroupWrapper = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    borderRadius: '5px',
+    width: '100%',
+    color: '#B7C5D1',
+    background: '#F5F7F8',
+    fontSize: '12px',
+    padding: '3px 15px',
+    cursor: 'pointer',
+});
+
+export const PopperContainer = styled('div')`
+    color: #4c6275;
+    background: #fff;
+    box-shadow: 0px 1px 10px rgba(152, 172, 189, 0.6);
+    border-radius: 0px 10px 10px 10px;
+    padding: 6px 12px;
+
+    display: flex;
+    justify-content: center;
+
+    & > input::placeholder {
+        color: #98acbd;
+    }
+`;
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/types.ts b/libs/components/editor-blocks/src/blocks/group/scene-kanban/types.ts
new file mode 100644
index 000000000..572335756
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/types.ts
@@ -0,0 +1,8 @@
+import type { DndableItems } from './dndable/type';
+
+export interface CardContainerProps {
+    containerIds: string[];
+    items: DndableItems;
+    isSortingContainer?: boolean;
+    activeId?: string;
+}
diff --git a/libs/components/editor-blocks/src/blocks/group/types.ts b/libs/components/editor-blocks/src/blocks/group/types.ts
new file mode 100644
index 000000000..6fe398360
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/types.ts
@@ -0,0 +1,50 @@
+import { PANEL_CONFIG, SCENE_CONFIG } from './config';
+
+export type ActivePanel = ValueOf<typeof PANEL_CONFIG | null>;
+export type ActiveScene = ValueOf<typeof SCENE_CONFIG | null>;
+
+export type Option = {
+    key?: string;
+    label?: string;
+    value?: string;
+};
+
+/* closePanel */
+export type ClosePanel = () => void;
+
+export interface ViewItem {
+    [key: string]: {
+        id: number | string;
+        value: boolean | number | string | string[];
+        type: string;
+        options?: Option[];
+    };
+}
+
+export type ViewData = ViewItem[];
+
+export interface OpRuleItem {
+    key: string;
+    value: string;
+}
+
+export type OpRule = OpRuleItem[];
+
+export interface FilterGroupConstraintItemValue {
+    checked: boolean;
+    op: OpRuleItem['value'];
+    value: string | string[] | unknown;
+}
+
+export type FilterGroupConstraint = Map<string, FilterGroupConstraintItemValue>;
+
+export type SorterConstraint = Map<string, string>;
+
+export type GroupData = {
+    viewData: ViewData;
+    filterGroupConstraint: FilterGroupConstraint;
+    filterWeakSqlConstraint: string;
+    sorterConstraint: SorterConstraint;
+};
+
+export type ValueOf<T> = T extends { [key: string]: infer V } ? V : never;
diff --git a/libs/components/editor-blocks/src/blocks/group/utils/index.ts b/libs/components/editor-blocks/src/blocks/group/utils/index.ts
new file mode 100644
index 000000000..740fc08ef
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/utils/index.ts
@@ -0,0 +1,2 @@
+export { weakSql2Sql, weakSqlCreator } from './weak-sql';
+export { toAsync } from './toAsync';
diff --git a/libs/components/editor-blocks/src/blocks/group/utils/toAsync.ts b/libs/components/editor-blocks/src/blocks/group/utils/toAsync.ts
new file mode 100644
index 000000000..2d191ac75
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/utils/toAsync.ts
@@ -0,0 +1,4 @@
+const toAsync = <T>(promise: Promise<T>) =>
+    promise.then(data => [null, data]).catch(err => [err]);
+
+export { toAsync };
diff --git a/libs/components/editor-blocks/src/blocks/group/utils/weak-sql/index.ts b/libs/components/editor-blocks/src/blocks/group/utils/weak-sql/index.ts
new file mode 100644
index 000000000..4b7f69321
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/utils/weak-sql/index.ts
@@ -0,0 +1 @@
+export { weakSql2Sql, weakSqlCreator } from './weakSql2Sql';
diff --git a/libs/components/editor-blocks/src/blocks/group/utils/weak-sql/rule-config.ts b/libs/components/editor-blocks/src/blocks/group/utils/weak-sql/rule-config.ts
new file mode 100644
index 000000000..8cb24519c
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/utils/weak-sql/rule-config.ts
@@ -0,0 +1,16 @@
+export const compareRules = new Map([
+    ['>', '$gt'] /* example: { field: {$gt: null} } */,
+    ['<', '$lt'],
+    ['=', '$eq'],
+    ['>=', '$gte'],
+    ['<=', '$lte'],
+
+    ['includes', '$in'] /* example: { field: {$in: [1, 2, 3]} } */,
+    ['excludes', '$nin'],
+]);
+
+/* example: { field: {}} */
+export const nullRules = new Map([
+    ['is null', { $ne: null }],
+    ['is not null', { $exists: true }],
+]);
diff --git a/libs/components/editor-blocks/src/blocks/group/utils/weak-sql/types.ts b/libs/components/editor-blocks/src/blocks/group/utils/weak-sql/types.ts
new file mode 100644
index 000000000..91e84d595
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/utils/weak-sql/types.ts
@@ -0,0 +1,18 @@
+/* sql relation type */
+export type Relation =
+    | '>'
+    | '<'
+    | '='
+    | '>='
+    | '<='
+    | 'is null'
+    | 'is not null'
+    | 'includes'
+    | 'excludes';
+
+/* single weak sql type */
+export interface Constraint {
+    field: string;
+    relation: Relation;
+    value: unknown;
+}
diff --git a/libs/components/editor-blocks/src/blocks/group/utils/weak-sql/weakSql2Sql.ts b/libs/components/editor-blocks/src/blocks/group/utils/weak-sql/weakSql2Sql.ts
new file mode 100644
index 000000000..1cf6ed25c
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/utils/weak-sql/weakSql2Sql.ts
@@ -0,0 +1,35 @@
+import { compareRules, nullRules } from './rule-config';
+import { weakSqlCreator } from './weakSqlCreator';
+
+/**
+ * weakSql to sql
+ * @param weakSqlExpress
+ */
+const weakSql2Sql = async (weakSqlExpress = '') => {
+    const weakConstraints = await weakSqlCreator(weakSqlExpress);
+
+    const constraints = weakConstraints.map(weakConstraint => {
+        const { field, relation, value } = weakConstraint;
+
+        if (!compareRules.has(relation) && !nullRules.has(relation)) {
+            return {};
+        }
+
+        const rule = (compareRules.get(relation) ||
+            nullRules.get(relation)) as string;
+
+        return {
+            [field]: {
+                [rule]: compareRules.has(relation)
+                    ? value
+                    : nullRules.get(relation),
+            },
+        };
+    });
+
+    return {
+        $and: constraints,
+    };
+};
+
+export { weakSql2Sql, weakSqlCreator };
diff --git a/libs/components/editor-blocks/src/blocks/group/utils/weak-sql/weakSqlCreator.ts b/libs/components/editor-blocks/src/blocks/group/utils/weak-sql/weakSqlCreator.ts
new file mode 100644
index 000000000..47debf217
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/group/utils/weak-sql/weakSqlCreator.ts
@@ -0,0 +1,66 @@
+import type { Constraint, Relation } from './types';
+
+/**
+ * pick valid information in v
+ * @param v
+ * @returns {number|string}
+ */
+const pickValue = (v: string) => {
+    /* pick legal value: number */
+    if (!isNaN(Number(v))) {
+        return Number(v);
+    }
+
+    /* pick legal value: string | string[] | number[] */
+    try {
+        const set = v.match(/["|'](.*)["|']/)[1].split(',');
+
+        if (set.length === 1) {
+            /* string */
+            return set[0];
+        }
+
+        /* string[] */
+        return set;
+    } catch (e) {
+        /* number[] */
+        return v.split(',').map(Number);
+    }
+};
+
+/**
+ * make weak-sql str to weak-constraint
+ * @param weak_sql_express
+ * @return Promise<Constraint[]>
+ */
+const weakSqlCreator = (weak_sql_express = ''): Promise<Constraint[]> => {
+    const weak_sql_pattern =
+        /[^;&&;&]+(>|<|=|>=|<=|includes|excludes|is null)[^;&&;&]*(&&|&|;)?/gim;
+    const relation_pattern = /(>=|<=|>|<|=|includes|excludes|is null)/gim;
+
+    return new Promise((resolve, reject) => {
+        const constraints: Constraint[] = [];
+
+        try {
+            weak_sql_express.replace(weak_sql_pattern, weak_sql_str => {
+                const [relation] = weak_sql_str.match(relation_pattern);
+                const [field, value] = weak_sql_str.split(relation);
+
+                constraints.push({
+                    field: field.trim(),
+                    relation: relation.trim() as Relation,
+                    value: pickValue(value.replace(/&&|&|;/, '').trim()),
+                });
+
+                /* meaningless return value */
+                return '';
+            });
+
+            resolve(constraints);
+        } catch (e) {
+            reject(e);
+        }
+    });
+};
+
+export { weakSqlCreator };
diff --git a/libs/components/editor-blocks/src/blocks/groupDvider/groupDividerView.tsx b/libs/components/editor-blocks/src/blocks/groupDvider/groupDividerView.tsx
new file mode 100644
index 000000000..c14d4bbf0
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/groupDvider/groupDividerView.tsx
@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { CreateView } from '@toeverything/framework/virgo';
+
+export const GroupDividerView: FC<CreateView> = ({ block, editor }) => {
+    return <></>;
+};
diff --git a/libs/components/editor-blocks/src/blocks/groupDvider/index.ts b/libs/components/editor-blocks/src/blocks/groupDvider/index.ts
new file mode 100644
index 000000000..4120f1a52
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/groupDvider/index.ts
@@ -0,0 +1,39 @@
+import {
+    AsyncBlock,
+    BaseView,
+    SelectBlock,
+} from '@toeverything/framework/virgo';
+import { Protocol } from '@toeverything/datasource/db-service';
+import { GroupDividerView } from './groupDividerView';
+
+export class GroupDividerBlock extends BaseView {
+    type = Protocol.Block.Type.groupDivider;
+    View = GroupDividerView;
+    override html2block(
+        el: Element,
+        parseEl: (el: Element) => any[]
+    ): any[] | null {
+        const tag_name = el.tagName;
+        if (tag_name === 'HR') {
+            return [
+                {
+                    type: this.type,
+                    properties: {
+                        text: {},
+                    },
+                    children: [],
+                },
+            ];
+        }
+
+        return null;
+    }
+
+    override async block2html(
+        block: AsyncBlock,
+        children: SelectBlock[],
+        generateHtml: (el: any[]) => Promise<string>
+    ): Promise<string> {
+        return `<hr>`;
+    }
+}
diff --git a/libs/components/editor-blocks/src/blocks/image/ImageView.tsx b/libs/components/editor-blocks/src/blocks/image/ImageView.tsx
new file mode 100644
index 000000000..dbdc6f493
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/image/ImageView.tsx
@@ -0,0 +1,236 @@
+import { FC, useState, useEffect, useRef } from 'react';
+import { CreateView } from '@toeverything/framework/virgo';
+import { Upload } from '../../components/upload/upload';
+import { services } from '@toeverything/datasource/db-service';
+import { styled } from '@toeverything/components/ui';
+import DeleteSweepOutlinedIcon from '@mui/icons-material/DeleteSweepOutlined';
+import DownloadIcon from '@mui/icons-material/Download';
+import { Image as SourceView } from '../../components/ImageView';
+import {
+    useOnSelect,
+    useRecastBlockScene,
+    WrapperWithPendantAndDragDrop,
+} from '@toeverything/components/editor-core';
+import './styles.css';
+import { SCENE_CONFIG } from '../group/config';
+const MESSAGES = {
+    ADD_AN_IMAGE: 'Add an image',
+};
+interface ImageView extends CreateView {
+    imageFile?: File;
+}
+const ImageBlock = styled('div')({
+    position: 'relative',
+    marginTop: '10px',
+    '.option': {
+        position: 'absolute',
+        background: 'rgba(0,0,0,.4)',
+        height: '30px',
+        width: '100%',
+        textAlign: 'right',
+        top: '-30px',
+        color: '#fff',
+        padding: '4px',
+        transition: 'top .5s',
+    },
+    '&:hover': {
+        '.option': {
+            top: '0px',
+        },
+    },
+    '.img': {
+        width: '100%',
+    },
+    '.progress': {},
+});
+const KanbanImageContainer = styled('div')<{ isSelected: boolean }>(
+    ({ theme, isSelected }) => {
+        return {
+            display: 'flex',
+            borderRadius: theme.affine.shape.xsBorderRadius,
+            background: isSelected ? 'rgba(152, 172, 189, 0.1)' : 'transparent',
+            padding: '8px',
+            // border: `2px solid ${
+            //     isSelected ? theme.affine.palette.primary : '#e0e0e0'
+            // }`,
+        };
+    }
+);
+export const ImageView: FC<ImageView> = ({ block, editor }) => {
+    const workspace = editor.workspace;
+    const [imgUrl, set_image_url] = useState<string>();
+    const [imgWidth, setImgWidth] = useState<number>(0);
+    const [ratio, set_ratio] = useState<number>(0);
+    const resize_box = useRef(null);
+    const { scene } = useRecastBlockScene();
+    const [isSelect, setIsSelect] = useState<boolean>();
+    useOnSelect(block.id, (isSelect: boolean) => {
+        setIsSelect(isSelect);
+    });
+
+    const img_load = (url: string) => {
+        let boxWidth = resize_box.current.offsetWidth;
+
+        const imageStyle = block.getProperty('image_style');
+        if (imageStyle?.width) {
+            set_ratio(imageStyle.width / imageStyle.height);
+            setImgWidth(imageStyle.width);
+            set_image_url(url);
+            return;
+        }
+        const img = new Image();
+        img.src = url;
+        // load complete execution
+        img.onload = async () => {
+            const img_radio = img.width / img.height;
+
+            if (img.width >= boxWidth - 20) {
+                img.width = boxWidth - 20;
+            }
+            img.height = img.width / img_radio;
+
+            block.setProperty('image_style', {
+                width: img.width,
+                height: img.height,
+            });
+            setImgWidth(img.width);
+            set_image_url(url);
+            set_ratio(img_radio);
+        };
+        img.onerror = e => {
+            console.log(e);
+        };
+    };
+    useEffect(() => {
+        const style = window.getComputedStyle(block?.dom);
+        const image_info = block.getProperty('image');
+        const image_block_id = image_info?.value;
+        const image_info_url = image_info?.url;
+
+        if (image_info_url) {
+            img_load(image_info_url);
+            return;
+        }
+        if (image_block_id) {
+            services.api.file.get(image_block_id, workspace).then(file_info => {
+                img_load(file_info.url);
+            });
+        }
+    }, [workspace]);
+
+    const down_ref = useRef(null);
+    const on_file_change = async (file: File) => {
+        const result = await services.api.file.create({
+            workspace: editor.workspace,
+            file: file,
+        });
+        img_load(result.url);
+        block.setProperty('image', {
+            value: result.id,
+            name: file.name,
+            size: file.size,
+            type: file.type,
+        });
+    };
+    const delete_file = () => {
+        block.remove();
+    };
+    const sava_link = (link: string) => {
+        img_load(link);
+        block.setProperty('image', {
+            value: '',
+            url: link,
+            name: link,
+            size: 0,
+            type: 'link',
+        });
+    };
+    const handle_click = (e: React.MouseEvent<HTMLDivElement>) => {
+        //TODO clear active selection
+        // document.getElementsByTagName('body')[0].click();
+        e.stopPropagation();
+        e.nativeEvent.stopPropagation();
+        editor.selectionManager.setSelectedNodesIds([block.id]);
+        editor.selectionManager.activeNodeByNodeId(block.id);
+    };
+    const down_file = () => {
+        if (down_ref) {
+            down_ref.current.click();
+        }
+    };
+
+    return (
+        <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+            <ImageBlock>
+                <div ref={resize_box}>
+                    {imgUrl ? (
+                        <div
+                            onClick={handle_click}
+                            onMouseDown={e => {
+                                // e.nativeEvent.stopPropagation();
+                                e.stopPropagation();
+                            }}
+                        >
+                            {scene === SCENE_CONFIG.PAGE ? (
+                                <SourceView
+                                    block={block}
+                                    viewStyle={{
+                                        width: imgWidth,
+                                        maxWidth:
+                                            resize_box.current.offsetWidth - 20,
+                                        minWidth: 32,
+                                        ratio: ratio,
+                                    }}
+                                    isSelected={isSelect}
+                                    link={imgUrl}
+                                />
+                            ) : (
+                                <KanbanImageContainer isSelected={isSelect}>
+                                    <img width={'100%'} src={imgUrl} alt="" />
+                                </KanbanImageContainer>
+                            )}
+                        </div>
+                    ) : (
+                        // </ResizableBox>
+                        <Upload
+                            firstCreate={block.firstCreateFlag}
+                            uploadType={'image'}
+                            fileChange={on_file_change}
+                            deleteFile={delete_file}
+                            savaLink={sava_link}
+                            isSelected={isSelect}
+                            defaultAddBtnText={MESSAGES.ADD_AN_IMAGE}
+                            accept={
+                                'image/gif,image/jpeg,image/jpg,image/png,image/svg'
+                            }
+                        />
+                    )}
+                    {/* <div>
+                    <DownloadIcon
+                        onClick={down_file}
+                        className="delete-icon"
+                        fontSize="small"
+                        sx={{
+                            color: '#000',
+                            cursor: 'pointer',
+                            marginRight: '10px'
+                        }}
+                    ></DownloadIcon>
+                    <DeleteSweepOutlinedIcon
+                        onClick={delete_file}
+                        className="delete-icon"
+                        fontSize="small"
+                        sx={{ color: '#000', cursor: 'pointer' }}
+                    ></DeleteSweepOutlinedIcon>
+                    <a
+                        href={imgUrl}
+                        ref={down_ref}
+                        style={{ display: 'none' }}
+                        download="text.png"
+                    ></a>
+                </div> */}
+                </div>
+            </ImageBlock>
+        </WrapperWithPendantAndDragDrop>
+    );
+};
diff --git a/libs/components/editor-blocks/src/blocks/image/index.ts b/libs/components/editor-blocks/src/blocks/image/index.ts
new file mode 100644
index 000000000..8f56468b4
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/image/index.ts
@@ -0,0 +1,54 @@
+import {
+    AsyncBlock,
+    BaseView,
+    SelectBlock,
+} from '@toeverything/framework/virgo';
+import { Protocol } from '@toeverything/datasource/db-service';
+import { ImageView } from './ImageView';
+
+export class ImageBlock extends BaseView {
+    public override selectable = true;
+    public override activatable = false;
+    type = Protocol.Block.Type.image;
+    View = ImageView;
+
+    // TODO: needs to download the image and then upload it to get a new link and then assign it
+    override html2block(
+        el: Element,
+        parseEl: (el: Element) => any[]
+    ): any[] | null {
+        const tag_name = el.tagName;
+        if (tag_name === 'IMG') {
+            return [
+                {
+                    type: this.type,
+                    properties: {
+                        value: '',
+                        url: el.getAttribute('src'),
+                        name: el.getAttribute('src'),
+                        size: 0,
+                        type: 'link',
+                    },
+                    children: [],
+                },
+            ];
+        }
+
+        return null;
+    }
+
+    // TODO:
+    override async block2html(
+        block: AsyncBlock,
+        children: SelectBlock[],
+        generateHtml: (el: any[]) => Promise<string>
+    ): Promise<string> {
+        const text = block.getProperty('text');
+        const content = '';
+        if (text) {
+            text.value.map(text => `<span>${text}</span>`).join('');
+        }
+        // TODO: child
+        return `<p><img src=${content}></p>`;
+    }
+}
diff --git a/libs/components/editor-blocks/src/blocks/image/styles.css b/libs/components/editor-blocks/src/blocks/image/styles.css
new file mode 100644
index 000000000..ac53ed40d
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/image/styles.css
@@ -0,0 +1,69 @@
+.react-resizable {
+    position: relative;
+    max-width: 100%;
+    height: auto !important;
+    margin-bottom: 10px;
+}
+.react-resizable-handle {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background: #3e6fdb;
+    background-repeat: no-repeat;
+    background-origin: content-box;
+    box-sizing: border-box;
+    background-position: bottom right;
+    border-radius: 10px;
+    padding: 0 3px 3px 0;
+}
+.react-resizable-handle-sw {
+    bottom: -6px;
+    left: -6px;
+    cursor: sw-resize;
+    transform: rotate(90deg);
+}
+.react-resizable-handle-se {
+    bottom: -6px;
+    right: -6px;
+    cursor: se-resize;
+}
+.react-resizable-handle-nw {
+    top: -6px;
+    left: -6px;
+    cursor: nw-resize;
+    transform: rotate(180deg);
+}
+.react-resizable-handle-ne {
+    top: -6px;
+    right: -6px;
+    cursor: ne-resize;
+    transform: rotate(270deg);
+}
+.react-resizable-handle-w,
+.react-resizable-handle-e {
+    top: 50%;
+    margin-top: -10px;
+    cursor: ew-resize;
+}
+.react-resizable-handle-w {
+    left: 0;
+    transform: rotate(135deg);
+}
+.react-resizable-handle-e {
+    right: 0;
+    transform: rotate(315deg);
+}
+.react-resizable-handle-n,
+.react-resizable-handle-s {
+    left: 50%;
+    margin-left: -10px;
+    cursor: ns-resize;
+}
+.react-resizable-handle-n {
+    top: 0;
+    transform: rotate(225deg);
+}
+.react-resizable-handle-s {
+    bottom: 0;
+    transform: rotate(45deg);
+}
diff --git a/libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx b/libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx
new file mode 100644
index 000000000..514ce335f
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx
@@ -0,0 +1,213 @@
+import { TextProps } from '@toeverything/components/common';
+import {
+    ContentColumnValue,
+    services,
+    Protocol,
+} from '@toeverything/datasource/db-service';
+import { type CreateView } from '@toeverything/framework/virgo';
+import { useEffect, useRef, useState, type FC } from 'react';
+import {
+    TextManage,
+    type ExtendedTextUtils,
+} from '../../components/text-manage';
+import { tabBlock } from '../../utils/indent';
+import { IndentWrapper } from '../../components/IndentWrapper';
+import type { Numbered, NumberedAsyncBlock } from './types';
+
+import { getChildrenType, getNumber } from './data';
+import {
+    supportChildren,
+    RenderBlockChildren,
+    useOnSelect,
+    WrapperWithPendantAndDragDrop,
+} from '@toeverything/components/editor-core';
+import { styled } from '@toeverything/components/ui';
+import { List } from '../../components/style-container';
+import { BlockContainer } from '../../components/BlockContainer';
+
+export const defaultTodoProps: Numbered = {
+    text: { value: [{ text: '' }] },
+    numberType: 'type1',
+};
+const reset_todo_state = async (block: NumberedAsyncBlock) => {
+    await block.setProperties({});
+};
+
+const todoIsEmpty = (contentValue: ContentColumnValue): boolean => {
+    const todoValue = contentValue.value;
+    return (
+        todoValue.length === 0 ||
+        (todoValue.length === 1 && !todoValue[0]['text'])
+    );
+};
+
+export const NumberedView: FC<CreateView> = ({ block, editor }) => {
+    // block.remove();
+    const properties = { ...defaultTodoProps, ...block.getProperties() };
+    const [number, set_number] = useState<number>(1);
+    const [isSelect, setIsSelect] = useState<boolean>();
+
+    // const [type, set_type] = useState('type-1');
+    const text_ref = useRef<ExtendedTextUtils>(null);
+
+    useOnSelect(block.id, (is_select: boolean) => {
+        setIsSelect(is_select);
+    });
+    const turn_into_text_block = async () => {
+        // Convert to text block
+        await block.setType('text');
+        await reset_todo_state(block);
+
+        if (!text_ref.current) {
+            throw new Error(
+                'Failed to set cursor position! text_ref is not exist!'
+            );
+        }
+        const currentSelection = text_ref.current.getCurrentSelection();
+        if (!currentSelection) {
+            throw new Error(
+                'Failed to get cursor selection! currentSelection is not exist!'
+            );
+        }
+        // Update cursor position
+        editor.selectionManager.setNodeActiveSelection(block.id, {
+            type: 'Range',
+            info: currentSelection,
+        });
+    };
+    const i = 0;
+    const listChange = async () => {
+        let number = 1;
+        const preBlock = await block.previousSiblings();
+        const parent_block = await block.parent();
+        let parent_number_type = 'type3';
+        if (parent_block.type === 'numbered') {
+            parent_number_type = await parent_block.getProperty('numberType');
+        }
+        block.setProperty('numberType', getChildrenType(parent_number_type));
+
+        if (preBlock.length) {
+            preBlock.reverse();
+            for (let i = 0; i <= preBlock.length; i++) {
+                if (preBlock[i]?.type === 'numbered') {
+                    number++;
+                } else {
+                    break;
+                }
+            }
+        }
+        set_number(number);
+    };
+
+    useEffect(() => {
+        listChange();
+        let obj: any;
+        const parentChange = async () => {
+            const parent_block = await block.parent();
+            obj = await services.api.editorBlock.observe(
+                {
+                    workspace: editor.workspace,
+                    id: parent_block.id,
+                },
+                listChange
+            );
+        };
+        parentChange();
+        return () => {
+            obj?.();
+        };
+        // console.log('_parent_block: ', _parent_block);
+    }, []);
+
+    const on_text_enter: TextProps['handleEnter'] = async props => {
+        const { splitContents, isShiftKey } = props;
+        if (isShiftKey) {
+            return false;
+        }
+        const { contentBeforeSelection, contentAfterSelection } = splitContents;
+        const before = [...contentBeforeSelection.content];
+        const after = [...contentAfterSelection.content];
+        if (todoIsEmpty({ value: before } as ContentColumnValue)) {
+            await turn_into_text_block();
+            return true;
+        }
+
+        // Move children to new block
+        const children = await block.children();
+        await block.removeChildren();
+
+        const next_node = await editor.createBlock(
+            Protocol.Block.Type.numbered
+        );
+        if (!next_node) {
+            throw new Error('Failed to create todo block');
+        }
+        await next_node.append(...children);
+        await next_node.setProperties({
+            text: { value: after } as ContentColumnValue,
+        });
+        await block.setProperties({
+            text: { value: before } as ContentColumnValue,
+        });
+        await block.after(next_node);
+
+        editor.selectionManager.activeNodeByNodeId(next_node.id);
+
+        return true;
+    };
+    const on_tab: TextProps['handleTab'] = async ({ isShiftKey }) => {
+        if (!isShiftKey) {
+            const preSiblingBlock = await block.previousSibling();
+
+            if (preSiblingBlock && supportChildren(preSiblingBlock)) {
+                const copy_block = block;
+                block.remove();
+                block.removeChildren();
+                const block_children = await copy_block.children();
+                preSiblingBlock.append(copy_block, ...block_children);
+            }
+            return true;
+        } else {
+            tabBlock(block, isShiftKey);
+            return false;
+        }
+    };
+
+    const on_backspace: TextProps['handleBackSpace'] = async ({
+        isCollAndStart,
+    }) => {
+        if (!isCollAndStart) {
+            return false;
+        }
+        await turn_into_text_block();
+        return true;
+    };
+
+    return (
+        <BlockContainer editor={editor} block={block} selected={isSelect}>
+            <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+                <List>
+                    <div className={'checkBoxContainer'}>
+                        {getNumber(properties.numberType, number)}.
+                    </div>
+                    <div className="textContainer">
+                        <TextManage
+                            ref={text_ref}
+                            editor={editor}
+                            block={block}
+                            supportMarkdown
+                            placeholder="Numbered list"
+                            handleEnter={on_text_enter}
+                            handleBackSpace={on_backspace}
+                            handleTab={on_tab}
+                        />
+                    </div>
+                </List>
+            </WrapperWithPendantAndDragDrop>
+
+            <IndentWrapper>
+                <RenderBlockChildren block={block} />
+            </IndentWrapper>
+        </BlockContainer>
+    );
+};
diff --git a/libs/components/editor-blocks/src/blocks/numbered/data.ts b/libs/components/editor-blocks/src/blocks/numbered/data.ts
new file mode 100644
index 000000000..98d060a15
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/numbered/data.ts
@@ -0,0 +1,69 @@
+const type2Map: Record<number, string> = {};
+const type3Map: Record<number, string> = {};
+export function getNumber(type: string, index: number) {
+    if (type === 'type2') {
+        if (type2Map[index]) {
+            return type2Map[index];
+        }
+        type2Map[index] = getType2(index - 1);
+
+        return type2Map[index];
+    }
+    if (type === 'type3') {
+        if (type3Map[index]) {
+            return type3Map[index];
+        }
+        type3Map[index] = getType3(index);
+
+        return type3Map[index];
+    }
+    return index;
+}
+
+const getType2 = (n: number) => {
+    const ordA = 'a'.charCodeAt(0);
+    const ordZ = 'z'.charCodeAt(0);
+    const len = ordZ - ordA + 1;
+    let s = '';
+    while (n >= 0) {
+        s = String.fromCharCode((n % len) + ordA) + s;
+        n = Math.floor(n / len) - 1;
+    }
+    return s;
+};
+const getType3 = (num: number) => {
+    const lookup = {
+        m: 1000,
+        cm: 900,
+        d: 500,
+        cd: 400,
+        c: 100,
+        xc: 90,
+        l: 50,
+        xl: 40,
+        x: 10,
+        ix: 9,
+        v: 5,
+        iv: 4,
+        i: 1,
+    };
+    let romanStr = '';
+    for (const i in lookup) {
+        // @ts-ignore
+        while (num >= lookup[i]) {
+            romanStr += i;
+            // @ts-ignore
+            num -= lookup[i];
+        }
+    }
+    return romanStr;
+};
+
+export function getChildrenType(type: string) {
+    const typeMap: Record<string, string> = {
+        type1: 'type2',
+        type2: 'type3',
+        type3: 'type1',
+    };
+    return typeMap[type];
+}
diff --git a/libs/components/editor-blocks/src/blocks/numbered/index.ts b/libs/components/editor-blocks/src/blocks/numbered/index.ts
new file mode 100644
index 000000000..b8b3c3dc0
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/numbered/index.ts
@@ -0,0 +1,99 @@
+import {
+    AsyncBlock,
+    BaseView,
+    getTextProperties,
+    SelectBlock,
+    getTextHtml,
+} from '@toeverything/framework/virgo';
+import {
+    Protocol,
+    DefaultColumnsValue,
+} from '@toeverything/datasource/db-service';
+// import { withTreeViewChildren } from '../../utils/with-tree-view-children';
+import { defaultTodoProps, NumberedView } from './NumberedView';
+import { IndentWrapper } from '../../components/IndentWrapper';
+
+export class NumberedBlock extends BaseView {
+    public type = Protocol.Block.Type.numbered;
+    // public View = withTreeViewChildren((props: CreateView) => <NumberedView {...props} />);
+
+    // type = Protocol.Block.Type.todo;
+    View = NumberedView;
+
+    // override ChildrenView = IndentWrapper;
+
+    override async onCreate(block: AsyncBlock) {
+        if (!block.getProperty('text')) {
+            await block.setProperties(defaultTodoProps);
+        }
+        return block;
+    }
+
+    override getSelProperties(
+        block: AsyncBlock,
+        selectInfo: any
+    ): DefaultColumnsValue {
+        const properties = super.getSelProperties(block, selectInfo);
+        return getTextProperties(properties, selectInfo);
+    }
+
+    override html2block(
+        el: Element,
+        parseEl: (el: Element) => any[]
+    ): any[] | null {
+        const tag_name = el.tagName;
+        if (tag_name === 'OL') {
+            const result = [];
+            for (let i = 0; i < el.children.length; i++) {
+                const blocks_info = parseEl(el.children[i]);
+                result.push(...blocks_info);
+            }
+            return result.length > 0 ? result : null;
+        }
+
+        if (tag_name == 'LI' && el.textContent.startsWith('[ ]  ')) {
+            const childNodes = el.childNodes;
+            let texts = [];
+            const children = [];
+            for (let i = 0; i < childNodes.length; i++) {
+                const blocks_info = parseEl(childNodes[i] as Element);
+                for (let j = 0; j < blocks_info.length; j++) {
+                    if (blocks_info[j].type === 'text') {
+                        const block_texts =
+                            blocks_info[j].properties.text.value;
+                        texts.push(...block_texts);
+                    } else {
+                        children.push(blocks_info[j]);
+                    }
+                }
+            }
+            if (texts.length > 0 && (texts[0].text || '').startsWith('[ ]  ')) {
+                texts[0].text = texts[0].text.substring('[ ]  '.length);
+                if (!texts[0].text) {
+                    texts = texts.slice(1);
+                }
+            }
+            return [
+                {
+                    type: this.type,
+                    properties: {
+                        text: { value: texts },
+                    },
+                    children: children,
+                },
+            ];
+        }
+
+        return null;
+    }
+
+    override async block2html(
+        block: AsyncBlock,
+        children: SelectBlock[],
+        generateHtml: (el: any[]) => Promise<string>
+    ): Promise<string> {
+        let content = getTextHtml(block);
+        content += await generateHtml(children);
+        return `<ol><li>${content}</li></ol>`;
+    }
+}
diff --git a/libs/components/editor-blocks/src/blocks/numbered/types.ts b/libs/components/editor-blocks/src/blocks/numbered/types.ts
new file mode 100644
index 000000000..0fd0072cb
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/numbered/types.ts
@@ -0,0 +1,16 @@
+import { AsyncBlock } from '@toeverything/framework/virgo';
+import type {
+    ContentColumnValue,
+    BooleanColumnValue,
+} from '@toeverything/datasource/db-service';
+
+export interface Numbered {
+    text: ContentColumnValue;
+    numberType: any;
+}
+
+export class NumberedAsyncBlock extends AsyncBlock {
+    override setProperties(properties: Partial<Numbered>): Promise<boolean> {
+        return super.setProperties(properties);
+    }
+}
diff --git a/libs/components/editor-blocks/src/blocks/page/PageView.tsx b/libs/components/editor-blocks/src/blocks/page/PageView.tsx
new file mode 100644
index 000000000..685bd0582
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/page/PageView.tsx
@@ -0,0 +1,120 @@
+import { FC, useRef, useEffect, useMemo, useState } from 'react';
+import { useParams } from 'react-router';
+
+import { BackLink, TextProps } from '@toeverything/components/common';
+import {
+    RenderBlockChildren,
+    BlockPendantProvider,
+} from '@toeverything/components/editor-core';
+import { ContentColumnValue } from '@toeverything/datasource/db-service';
+import { CreateView } from '@toeverything/framework/virgo';
+import { Theme, styled } from '@toeverything/components/ui';
+
+import {
+    TextManage,
+    type ExtendedTextUtils,
+} from '../../components/text-manage';
+
+export const PageView: FC<CreateView> = ({ block, editor }) => {
+    const { workspace_id } = useParams();
+    const textRef = useRef<ExtendedTextUtils>(null);
+    const [backLinks, setBackLinks] =
+        useState<Awaited<ReturnType<typeof editor.search>>>();
+
+    const properties = useMemo(() => block.getProperties(), [block]);
+    const onTextEnter: TextProps['handleEnter'] = async props => {
+        const { splitContents } = props;
+        if (!splitContents) {
+            return false;
+        }
+        const { contentBeforeSelection, contentAfterSelection } = splitContents;
+        const before = [...contentBeforeSelection.content];
+        const after = [...contentAfterSelection.content];
+
+        const firstChild = await block.firstChild();
+        const maybeGroupBlock =
+            firstChild && firstChild.type === 'group' ? firstChild : null;
+        const groupBlock =
+            maybeGroupBlock ?? (await editor.createBlock('group', block.id));
+        if (!groupBlock) {
+            throw new Error('Failed to create group block');
+        }
+
+        const childBlock = await editor.createBlock('text', groupBlock.id);
+        if (!childBlock) {
+            throw new Error('Failed to create text block');
+        }
+        await childBlock.setProperties({
+            text: { value: after } as ContentColumnValue,
+        });
+
+        await block.setProperties({
+            text: { value: before } as ContentColumnValue,
+        });
+        await groupBlock.prepend(childBlock);
+        editor.selectionManager.activeNodeByNodeId(childBlock.id);
+        return true;
+    };
+
+    useEffect(() => {
+        // const title = properties['text']?.value?.[0]?.text;
+        // if (!title || !title.trim()) {
+        //     try {
+        //         const startSelection = text_ref.current.getStartSelection();
+        //         text_ref.current.setSelection(startSelection);
+        //     } catch (error) {
+        //         console.error(error);
+        //     }
+        // }
+    }, [properties]);
+
+    useEffect(() => {
+        editor
+            .search({ tag: `reference:${block.id}` })
+            .then(blocks => setBackLinks(blocks));
+    }, [block.id, editor]);
+
+    useEffect(() => {
+        // auto focus page title by default
+        editor.selectionManager.activeNodeByNodeId(block.id, 'end');
+    }, [block.id, editor]);
+
+    return (
+        <PageTitleBlock>
+            <BlockPendantProvider block={block}>
+                <TextManage
+                    alwaysShowPlaceholder
+                    ref={textRef}
+                    className={'title'}
+                    supportMarkdown={true}
+                    handleEnter={onTextEnter}
+                    placeholder={'Untitled'}
+                    block={block}
+                    editor={editor}
+                />
+            </BlockPendantProvider>
+
+            {/* TODO: add back multi block select */}
+            {/* <div
+                contentEditable
+                className={style9(styles.content)}
+                suppressContentEditableWarning
+            > */}
+            <BackLink blocks={backLinks} workspaceId={workspace_id} />
+            {/*{block.childrenIds.map(childId => (*/}
+            {/*    <RenderBlock key={childId} blockId={childId} />*/}
+            {/*))}*/}
+            <RenderBlockChildren block={block} />
+        </PageTitleBlock>
+    );
+};
+
+const PageTitleBlock = styled('div')({
+    '.title': {
+        fontSize: Theme.typography.page.fontSize,
+        lineHeight: Theme.typography.page.lineHeight,
+    },
+    '.content': {
+        outline: 'none',
+    },
+});
diff --git a/libs/components/editor-blocks/src/blocks/page/index.ts b/libs/components/editor-blocks/src/blocks/page/index.ts
new file mode 100644
index 000000000..2f47a6ae6
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/page/index.ts
@@ -0,0 +1,55 @@
+import { withRecastTable } from '@toeverything/components/editor-core';
+import {
+    Protocol,
+    DefaultColumnsValue,
+} from '@toeverything/datasource/db-service';
+import {
+    AsyncBlock,
+    BaseView,
+    ChildrenView,
+    getTextHtml,
+    getTextProperties,
+    SelectBlock,
+} from '@toeverything/framework/virgo';
+
+import { PageView } from './PageView';
+import { ComponentType, FC } from 'react';
+
+export const PageChildrenView: FC<ChildrenView> = props => props.children;
+
+export class PageBlock extends BaseView {
+    type = Protocol.Block.Type.page;
+    View = withRecastTable(PageView);
+    // override ChildrenView = withRecastTable(PageChildrenView);
+    public override allowPendant = false;
+    override async onCreate(block: AsyncBlock): Promise<AsyncBlock> {
+        if (!block.getProperty('text')) {
+            await block.setProperty('text', {
+                value: [{ text: '' }],
+            });
+        }
+        return block;
+    }
+
+    override onExport(content: any): string {
+        return this.get_decoration<any>(content, 'text')?.value?.[0].text;
+    }
+
+    override getSelProperties(
+        block: AsyncBlock,
+        selectInfo: any
+    ): DefaultColumnsValue {
+        const properties = super.getSelProperties(block, selectInfo);
+        return getTextProperties(properties, selectInfo);
+    }
+
+    override async block2html(
+        block: AsyncBlock,
+        children: SelectBlock[],
+        generateHtml: (el: any[]) => Promise<string>
+    ): Promise<string> {
+        const content = getTextHtml(block);
+        const childrenContent = await generateHtml(children);
+        return `<h1>${content}</h1> ${childrenContent}`;
+    }
+}
diff --git a/libs/components/editor-blocks/src/blocks/page/types.ts b/libs/components/editor-blocks/src/blocks/page/types.ts
new file mode 100644
index 000000000..56c9d0718
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/page/types.ts
@@ -0,0 +1,4 @@
+import { CustomText } from '@toeverything/components/common';
+export interface PageProperties {
+    text: CustomText[];
+}
diff --git a/libs/components/editor-blocks/src/blocks/ref-link/index.ts b/libs/components/editor-blocks/src/blocks/ref-link/index.ts
new file mode 100644
index 000000000..bc37e8a9f
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/ref-link/index.ts
@@ -0,0 +1,16 @@
+import { BaseView } from '@toeverything/framework/virgo';
+import { Protocol } from '@toeverything/datasource/db-service';
+import { RefLinkView } from './ref-link-view';
+
+export class RefLinkBlock extends BaseView {
+    type = Protocol.Block.Type.reference;
+    View = RefLinkView;
+
+    override onTagging(content: any): string[] {
+        return [
+            `reference:${this.get_decoration<string>(content, 'reference')}`,
+        ];
+    }
+
+    // TODO: html2block block2html
+}
diff --git a/libs/components/editor-blocks/src/blocks/ref-link/ref-link-view.tsx b/libs/components/editor-blocks/src/blocks/ref-link/ref-link-view.tsx
new file mode 100644
index 000000000..80e035775
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/ref-link/ref-link-view.tsx
@@ -0,0 +1,21 @@
+import { FC, useEffect, useMemo, useState } from 'react';
+
+import { InlineRefLink } from '@toeverything/components/common';
+import { CreateView } from '@toeverything/framework/virgo';
+
+type RefLinkView = CreateView;
+
+export const RefLinkView: FC<RefLinkView> = ({ block, editor }) => {
+    const page_id = useMemo(() => block.getProperty('reference'), [block]);
+
+    const [block_content, set_block] =
+        useState<Awaited<ReturnType<typeof editor.search>>[number]>();
+
+    useEffect(() => {
+        editor
+            .search({ tag: `id:${page_id}` })
+            .then(block => set_block(block[0]));
+    }, [editor, page_id]);
+
+    return <InlineRefLink block={block_content} pageId={page_id} />;
+};
diff --git a/libs/components/editor-blocks/src/blocks/text/QuoteBlock.tsx b/libs/components/editor-blocks/src/blocks/text/QuoteBlock.tsx
new file mode 100644
index 000000000..ddd42c621
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/text/QuoteBlock.tsx
@@ -0,0 +1,164 @@
+import {
+    DefaultColumnsValue,
+    Protocol,
+} from '@toeverything/datasource/db-service';
+import {
+    AsyncBlock,
+    BaseView,
+    CreateView,
+    getTextHtml,
+    getTextProperties,
+    SelectBlock,
+} from '@toeverything/framework/virgo';
+import { FC } from 'react';
+import { TextView } from './TextView';
+
+export class QuoteBlock extends BaseView {
+    type = Protocol.Block.Type.quote;
+
+    View: FC<CreateView> = TextView;
+
+    // override ChildrenView = IndentWrapper;
+
+    override async onCreate(block: AsyncBlock): Promise<AsyncBlock> {
+        if (!block.getProperty('text')) {
+            await block.setProperty('text', {
+                value: [{ text: '' }],
+            });
+        }
+        return block;
+    }
+
+    override getSelProperties(
+        block: AsyncBlock,
+        selectInfo: any
+    ): DefaultColumnsValue {
+        const properties = super.getSelProperties(block, selectInfo);
+        return getTextProperties(properties, selectInfo);
+    }
+
+    override html2block(
+        el: Element,
+        parseEl: (el: Element) => any[]
+    ): any[] | null {
+        const tag_name = el.tagName;
+        if (tag_name === 'BLOCKQUOTE') {
+            const childNodes = el.childNodes;
+            const texts = [];
+            for (let i = 0; i < childNodes.length; i++) {
+                const blocks_info = parseEl(childNodes[i] as Element);
+                for (let j = 0; j < blocks_info.length; j++) {
+                    if (blocks_info[j].type === 'text') {
+                        const block_texts =
+                            blocks_info[j].properties.text.value;
+                        texts.push(...block_texts);
+                    }
+                }
+            }
+            return [
+                {
+                    type: this.type,
+                    properties: {
+                        text: { value: texts },
+                    },
+                    children: [],
+                },
+            ];
+        }
+
+        return null;
+    }
+
+    override async block2html(
+        block: AsyncBlock,
+        children: SelectBlock[],
+        generateHtml: (el: any[]) => Promise<string>
+    ): Promise<string> {
+        let content = getTextHtml(block);
+        content += await generateHtml(children);
+        return `<blockquote>${content}</blockquote>`;
+    }
+}
+
+export class CalloutBlock extends BaseView {
+    type = Protocol.Block.Type.callout;
+
+    View: FC<CreateView> = TextView;
+
+    // override ChildrenView = IndentWrapper;
+
+    override async onCreate(block: AsyncBlock): Promise<AsyncBlock> {
+        if (!block.getProperty('text')) {
+            await block.setProperty('text', {
+                value: [{ text: '' }],
+            });
+        }
+        return block;
+    }
+
+    override getSelProperties(
+        block: AsyncBlock,
+        selectInfo: any
+    ): DefaultColumnsValue {
+        const properties = super.getSelProperties(block, selectInfo);
+        return getTextProperties(properties, selectInfo);
+    }
+
+    override html2block(
+        el: Element,
+        parseEl: (el: Element) => any[]
+    ): any[] | null {
+        const tag_name = el.tagName;
+        if (
+            tag_name === 'ASIDE' ||
+            el.firstChild?.nodeValue?.startsWith('<aside>')
+        ) {
+            const childNodes = el.childNodes;
+            let texts = [];
+            for (let i = 0; i < childNodes.length; i++) {
+                const blocks_info = parseEl(childNodes[i] as Element);
+                for (let j = 0; j < blocks_info.length; j++) {
+                    if (blocks_info[j].type === 'text') {
+                        const block_texts =
+                            blocks_info[j].properties.text.value;
+                        texts.push(...block_texts);
+                    }
+                }
+            }
+            if (
+                texts.length > 0 &&
+                (texts[0].text || '').startsWith('<aside>')
+            ) {
+                texts[0].text = texts[0].text.substring('<aside>'.length);
+                if (!texts[0].text) {
+                    texts = texts.slice(1);
+                }
+            }
+            return [
+                {
+                    type: this.type,
+                    properties: {
+                        text: { value: texts },
+                    },
+                    children: [],
+                },
+            ];
+        }
+
+        if (el.firstChild?.nodeValue?.startsWith('</aside>')) {
+            return [];
+        }
+
+        return null;
+    }
+
+    override async block2html(
+        block: AsyncBlock,
+        children: SelectBlock[],
+        generateHtml: (el: any[]) => Promise<string>
+    ): Promise<string> {
+        let content = getTextHtml(block);
+        content += await generateHtml(children);
+        return `<aside>${content}</aside>`;
+    }
+}
diff --git a/libs/components/editor-blocks/src/blocks/text/TextBlock.tsx b/libs/components/editor-blocks/src/blocks/text/TextBlock.tsx
new file mode 100644
index 000000000..1a1a36644
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/text/TextBlock.tsx
@@ -0,0 +1,327 @@
+import {
+    BaseView,
+    CreateView,
+    AsyncBlock,
+    getTextProperties,
+    SelectBlock,
+    getTextHtml,
+} from '@toeverything/framework/virgo';
+import {
+    DefaultColumnsValue,
+    Protocol,
+} from '@toeverything/datasource/db-service';
+import { TextView } from './TextView';
+import { FC } from 'react';
+import { getRandomString } from '@toeverything/components/common';
+
+export class TextBlock extends BaseView {
+    type = Protocol.Block.Type.text;
+
+    View: FC<CreateView> = TextView;
+
+    override async onCreate(block: AsyncBlock): Promise<AsyncBlock> {
+        if (!block.getProperty('text')) {
+            await block.setProperty('text', {
+                value: [{ text: '' }],
+            });
+        }
+        return block;
+    }
+
+    override getSelProperties(
+        block: AsyncBlock,
+        selectInfo: any
+    ): DefaultColumnsValue {
+        const properties = super.getSelProperties(block, selectInfo);
+        return getTextProperties(properties, selectInfo);
+    }
+
+    override html2block(
+        el: Element,
+        parseEl: (el: Element) => any[]
+    ): any[] | null {
+        if (el instanceof Text) {
+            // TODO: parsing style
+            return el.textContent.split('\n').map(text => {
+                return {
+                    type: this.type,
+                    properties: {
+                        text: { value: [{ text: text }] },
+                    },
+                    children: [],
+                };
+            });
+        }
+
+        const tag_name = el.tagName;
+        const block_style: any = {};
+        switch (tag_name) {
+            case 'STRONG':
+            case 'B':
+                block_style.bold = true;
+                break;
+            case 'A':
+                block_style.type = 'link';
+                block_style.url = el.getAttribute('href');
+                block_style.id = getRandomString('link');
+                block_style.children = [];
+                break;
+            case 'EM':
+                block_style.italic = true;
+                break;
+            case 'U':
+                block_style.underline = true;
+                break;
+            case 'CODE':
+                block_style.inlinecode = true;
+                break;
+            case 'S':
+            case 'DEL':
+                block_style.strikethrough = true;
+                break;
+            default:
+                break;
+        }
+
+        const child_nodes = el.childNodes;
+        let texts = [];
+        if (Object.keys(block_style).length > 0) {
+            for (let i = 0; i < child_nodes.length; i++) {
+                const blocks_info: any[] = parseEl(child_nodes[i] as Element);
+                for (let j = 0; j < blocks_info.length; j++) {
+                    const block = blocks_info[j];
+                    if (block.type === this.type) {
+                        const block_texts = block.properties.text.value.map(
+                            (text_value: any) => {
+                                return tag_name === 'A'
+                                    ? { ...text_value }
+                                    : { ...block_style, ...text_value };
+                            }
+                        );
+                        texts.push(...block_texts);
+                    }
+                }
+            }
+        }
+        if (tag_name === 'A') {
+            block_style.children.push(...texts);
+            texts = [block_style];
+        }
+        return texts.length > 0
+            ? [
+                  {
+                      type: this.type,
+                      properties: {
+                          text: { value: texts },
+                      },
+                      children: [],
+                  },
+              ]
+            : null;
+    }
+
+    override async block2html(
+        block: AsyncBlock,
+        children: SelectBlock[],
+        generateHtml: (el: any[]) => Promise<string>
+    ): Promise<string> {
+        let content = getTextHtml(block);
+        content += await generateHtml(children);
+        return `<p>${content}</p>`;
+    }
+}
+
+export class Heading1Block extends BaseView {
+    type = Protocol.Block.Type.heading1;
+
+    View: FC<CreateView> = TextView;
+
+    override async onCreate(block: AsyncBlock): Promise<AsyncBlock> {
+        if (!block.getProperty('text')) {
+            await block.setProperty('text', {
+                value: [{ text: '' }],
+            });
+        }
+        return block;
+    }
+
+    override getSelProperties(
+        block: AsyncBlock,
+        selectInfo: any
+    ): DefaultColumnsValue {
+        const properties = super.getSelProperties(block, selectInfo);
+        return getTextProperties(properties, selectInfo);
+    }
+
+    override html2block(
+        el: Element,
+        parseEl: (el: Element) => any[]
+    ): any[] | null {
+        const tag_name = el.tagName;
+        if (tag_name === 'H1') {
+            const childNodes = el.childNodes;
+            const texts = [];
+            for (let i = 0; i < childNodes.length; i++) {
+                const blocks_info = parseEl(childNodes[i] as Element);
+                for (let j = 0; j < blocks_info.length; j++) {
+                    if (blocks_info[j].type === 'text') {
+                        const block_texts =
+                            blocks_info[j].properties.text.value;
+                        texts.push(...block_texts);
+                    }
+                }
+            }
+            return [
+                {
+                    type: this.type,
+                    properties: {
+                        text: { value: texts },
+                    },
+                    children: [],
+                },
+            ];
+        }
+
+        return null;
+    }
+
+    override async block2html(
+        block: AsyncBlock,
+        children: SelectBlock[],
+        generateHtml: (el: any[]) => Promise<string>
+    ): Promise<string> {
+        let content = getTextHtml(block);
+        content += await generateHtml(children);
+        return `<h1>${content}</h1>`;
+    }
+}
+
+export class Heading2Block extends BaseView {
+    type = Protocol.Block.Type.heading2;
+
+    View: FC<CreateView> = TextView;
+
+    override async onCreate(block: AsyncBlock): Promise<AsyncBlock> {
+        if (!block.getProperty('text')) {
+            await block.setProperty('text', {
+                value: [{ text: '' }],
+            });
+        }
+        return block;
+    }
+
+    override getSelProperties(
+        block: AsyncBlock,
+        selectInfo: any
+    ): DefaultColumnsValue {
+        const properties = super.getSelProperties(block, selectInfo);
+        return getTextProperties(properties, selectInfo);
+    }
+
+    override html2block(
+        el: Element,
+        parseEl: (el: Element) => any[]
+    ): any[] | null {
+        const tag_name = el.tagName;
+        if (tag_name === 'H2') {
+            const childNodes = el.childNodes;
+            const texts = [];
+            for (let i = 0; i < childNodes.length; i++) {
+                const blocks_info = parseEl(childNodes[i] as Element);
+                for (let j = 0; j < blocks_info.length; j++) {
+                    if (blocks_info[j].type === 'text') {
+                        const block_texts =
+                            blocks_info[j].properties.text.value;
+                        texts.push(...block_texts);
+                    }
+                }
+            }
+            return [
+                {
+                    type: this.type,
+                    properties: {
+                        text: { value: texts },
+                    },
+                    children: [],
+                },
+            ];
+        }
+
+        return null;
+    }
+
+    override async block2html(
+        block: AsyncBlock,
+        children: SelectBlock[],
+        generateHtml: (el: any[]) => Promise<string>
+    ): Promise<string> {
+        let content = getTextHtml(block);
+        content += await generateHtml(children);
+        return `<h2>${content}</h2>`;
+    }
+}
+
+export class Heading3Block extends BaseView {
+    type = Protocol.Block.Type.heading3;
+
+    View: FC<CreateView> = TextView;
+
+    override async onCreate(block: AsyncBlock): Promise<AsyncBlock> {
+        if (!block.getProperty('text')) {
+            await block.setProperty('text', {
+                value: [{ text: '' }],
+            });
+        }
+        return block;
+    }
+
+    override getSelProperties(
+        block: AsyncBlock,
+        selectInfo: any
+    ): DefaultColumnsValue {
+        const properties = super.getSelProperties(block, selectInfo);
+        return getTextProperties(properties, selectInfo);
+    }
+
+    override html2block(
+        el: Element,
+        parseEl: (el: Element) => any[]
+    ): any[] | null {
+        const tag_name = el.tagName;
+        if (tag_name === 'H3') {
+            const childNodes = el.childNodes;
+            const texts = [];
+            for (let i = 0; i < childNodes.length; i++) {
+                const blocks_info = parseEl(childNodes[i] as Element);
+                for (let j = 0; j < blocks_info.length; j++) {
+                    if (blocks_info[j].type === 'text') {
+                        const block_texts =
+                            blocks_info[j].properties.text.value;
+                        texts.push(...block_texts);
+                    }
+                }
+            }
+            return [
+                {
+                    type: this.type,
+                    properties: {
+                        text: { value: texts },
+                    },
+                    children: [],
+                },
+            ];
+        }
+
+        return null;
+    }
+
+    override async block2html(
+        block: AsyncBlock,
+        children: SelectBlock[],
+        generateHtml: (el: any[]) => Promise<string>
+    ): Promise<string> {
+        let content = getTextHtml(block);
+        content += await generateHtml(children);
+        return `<h3>${content}</h3>`;
+    }
+}
diff --git a/libs/components/editor-blocks/src/blocks/text/TextView.tsx b/libs/components/editor-blocks/src/blocks/text/TextView.tsx
new file mode 100644
index 000000000..ced1a8745
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/text/TextView.tsx
@@ -0,0 +1,251 @@
+import { FC, useState } from 'react';
+
+import { CustomText, TextProps } from '@toeverything/components/common';
+import {
+    mergeGroup,
+    RenderBlockChildren,
+    splitGroup,
+    supportChildren,
+    unwrapGroup,
+    useOnSelect,
+    WrapperWithPendantAndDragDrop,
+} from '@toeverything/components/editor-core';
+import { styled } from '@toeverything/components/ui';
+import { Protocol } from '@toeverything/datasource/db-service';
+import { CreateView } from '@toeverything/framework/virgo';
+import { BlockContainer } from '../../components/BlockContainer';
+import { IndentWrapper } from '../../components/IndentWrapper';
+import { TextManage } from '../../components/text-manage';
+import { tabBlock } from '../../utils/indent';
+interface CreateTextView extends CreateView {
+    // TODO: need to optimize
+    containerClassName?: string;
+}
+
+const TextBlock = styled(TextManage)<{ type: string }>(({ theme, type }) => {
+    const textStyleMap = {
+        text: theme.affine.typography.body1,
+        heading1: theme.affine.typography.h1,
+        heading2: theme.affine.typography.h2,
+        heading3: theme.affine.typography.h3,
+        heading4: theme.affine.typography.h4,
+        callout: {
+            ...theme.affine.typography.body1,
+            background: theme.affine.palette.textSelected,
+        },
+        quote: {
+            ...theme.affine.typography.body1,
+            borderLeft: `2px solid ${theme.affine.palette.primary}`,
+            paddingLeft: theme.affine.spacing.xsSpacing,
+        },
+    };
+    if (type in textStyleMap) {
+        const textType = type as keyof typeof textStyleMap;
+        return textStyleMap[textType];
+    } else {
+        return {
+            fontSize: textStyleMap.text.fontSize,
+            lineHeight: textStyleMap.text.lineHeight,
+        };
+    }
+});
+
+export const TextView: FC<CreateTextView> = ({
+    block,
+    editor,
+    containerClassName,
+}) => {
+    const [isSelect, setIsSelect] = useState<boolean>();
+    useOnSelect(block.id, (is_select: boolean) => {
+        setIsSelect(is_select);
+    });
+    // block.remove();
+    const onTextEnter: TextProps['handleEnter'] = async props => {
+        const { splitContents, isShiftKey } = props;
+        if (isShiftKey || !splitContents) {
+            return false;
+        }
+        const { contentBeforeSelection, contentAfterSelection } = splitContents;
+        const before = [...contentBeforeSelection.content];
+        const after = [...contentAfterSelection.content];
+        const _nextBlockChildren = await block.children();
+        const _nextBlock = await editor.createBlock('text');
+        await _nextBlock.setProperty('text', {
+            value: after as CustomText[],
+        });
+        _nextBlock.append(..._nextBlockChildren);
+        block.removeChildren();
+        await block.setProperty('text', {
+            value: before as CustomText[],
+        });
+        await block.after(_nextBlock);
+
+        editor.selectionManager.activeNodeByNodeId(_nextBlock.id);
+        return true;
+    };
+
+    const onBackspace: TextProps['handleBackSpace'] = async props => {
+        return await editor.withSuspend(async () => {
+            const { isCollAndStart } = props;
+            if (!isCollAndStart) {
+                return false;
+            }
+            if (block.type !== 'text') {
+                await block.setType('text');
+                return true;
+            }
+            const parentBlock = await block.parent();
+
+            if (!parentBlock) {
+                return false;
+            }
+
+            if (Protocol.Block.Type.group === parentBlock.type) {
+                const children = await block.children();
+                const preNode = await block.physicallyPerviousSibling();
+                // FIXME support children do not means has textBlock
+                // TODO: abstract this part of code
+                if (preNode) {
+                    if (supportChildren(preNode)) {
+                        editor.suspend(true);
+                        await editor.selectionManager.activePreviousNode(
+                            block.id,
+                            'end'
+                        );
+                        const value = [
+                            ...preNode.getProperty('text').value,
+                            ...block.getProperty('text').value,
+                        ];
+                        await preNode.setProperty('text', {
+                            value,
+                        });
+                        await preNode.append(...children);
+                        await block.remove();
+                        editor.suspend(false);
+                    } else {
+                        // TODO: point does not clear
+                        await editor.selectionManager.activePreviousNode(
+                            block.id,
+                            'start'
+                        );
+                        if (block.blockProvider.isEmpty()) {
+                            block.remove();
+                        }
+                    }
+                    return true;
+                } else {
+                    // TODO remove timing problem
+                    const prevGroupBlock = await parentBlock.previousSibling();
+
+                    if (!prevGroupBlock) {
+                        const childrenBlock = await parentBlock.children();
+                        if (childrenBlock.length) {
+                            if (children.length) {
+                                await parentBlock.append(...children);
+                            }
+                            await block.remove();
+                            return true;
+                        }
+
+                        parentBlock.remove();
+                        return true;
+                    }
+                    if (prevGroupBlock.type !== Protocol.Block.Type.group) {
+                        unwrapGroup(parentBlock);
+                        return true;
+                    }
+
+                    mergeGroup(prevGroupBlock, parentBlock);
+
+                    return true;
+                }
+            }
+            if (Protocol.Block.Type.gridItem === parentBlock.type) {
+                const siblingBlocks = await parentBlock.children();
+                const previousSiblings = await block.previousSiblings();
+                const gridBlock = await parentBlock.parent();
+                const prevGridItemBlock = await parentBlock.previousSibling();
+                const siblingBlocksReverse = [...previousSiblings].reverse();
+                const textBlock = siblingBlocksReverse.find(child =>
+                    supportChildren(child)
+                );
+                if (textBlock) {
+                    const children = await block.children();
+                    const value = [
+                        ...textBlock.getProperty('text').value,
+                        ...block.getProperty('text').value,
+                    ];
+                    await textBlock.setProperty('text', {
+                        value,
+                    });
+                    await textBlock.append(...children);
+                    await block.remove();
+                    await editor.selectionManager.activeNodeByNodeId(
+                        textBlock.id
+                    );
+                } else if (prevGridItemBlock) {
+                    await prevGridItemBlock.append(...siblingBlocks);
+                    await parentBlock.remove();
+                } else {
+                    await gridBlock.before(...siblingBlocks);
+                    await parentBlock.remove();
+                }
+                return true;
+            } else {
+                const nextNodes = await block.nextSiblings();
+                for (const nextNode of nextNodes) {
+                    await nextNode.remove();
+                }
+                block.append(...nextNodes);
+                editor.commands.blockCommands.moveBlockAfter(
+                    block.id,
+                    parentBlock.id
+                );
+            }
+            return true;
+        });
+    };
+    const handleConvert = async (
+        toType: string,
+        options?: Record<string, unknown>
+    ) => {
+        if (toType === Protocol.Block.Type.groupDivider) {
+            splitGroup(editor, block, true);
+            return;
+        }
+        await block.setType(toType as 'title');
+        await block.setProperty('text', {
+            value: options?.['text'] as CustomText[],
+        });
+        block.firstCreateFlag = true;
+    };
+    const onTab: TextProps['handleTab'] = async ({ isShiftKey }) => {
+        await tabBlock(block, isShiftKey);
+        return true;
+    };
+
+    return (
+        <BlockContainer
+            editor={editor}
+            block={block}
+            selected={isSelect}
+            className={containerClassName}
+        >
+            <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+                <TextBlock
+                    block={block}
+                    type={block.type}
+                    editor={editor}
+                    placeholder={"type '/' for commands"}
+                    handleEnter={onTextEnter}
+                    handleBackSpace={onBackspace}
+                    handleConvert={handleConvert}
+                    handleTab={onTab}
+                />
+            </WrapperWithPendantAndDragDrop>
+            <IndentWrapper>
+                <RenderBlockChildren block={block} />
+            </IndentWrapper>
+        </BlockContainer>
+    );
+};
diff --git a/libs/components/editor-blocks/src/blocks/text/index.ts b/libs/components/editor-blocks/src/blocks/text/index.ts
new file mode 100644
index 000000000..34156e57c
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/text/index.ts
@@ -0,0 +1,7 @@
+export {
+    TextBlock,
+    Heading1Block,
+    Heading2Block,
+    Heading3Block,
+} from './TextBlock';
+export { QuoteBlock, CalloutBlock } from './QuoteBlock';
diff --git a/libs/components/editor-blocks/src/blocks/text/types.ts b/libs/components/editor-blocks/src/blocks/text/types.ts
new file mode 100644
index 000000000..e62ae3cf9
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/text/types.ts
@@ -0,0 +1,5 @@
+import { CustomText } from '@toeverything/components/common';
+
+export interface TextProperties {
+    text: CustomText[];
+}
diff --git a/libs/components/editor-blocks/src/blocks/toc/index.ts b/libs/components/editor-blocks/src/blocks/toc/index.ts
new file mode 100644
index 000000000..b85abad0f
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/toc/index.ts
@@ -0,0 +1,10 @@
+import { BaseView } from '@toeverything/framework/virgo';
+import { Protocol } from '@toeverything/datasource/db-service';
+import { TocView } from './toc-view';
+
+export class TocBlock extends BaseView {
+    type = Protocol.Block.Type.toc;
+    View = TocView;
+
+    // TODO: html2block block2html
+}
diff --git a/libs/components/editor-blocks/src/blocks/toc/toc-util.ts b/libs/components/editor-blocks/src/blocks/toc/toc-util.ts
new file mode 100644
index 000000000..2af586ae2
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/toc/toc-util.ts
@@ -0,0 +1,32 @@
+import { Protocol } from '@toeverything/datasource/db-service';
+import { AsyncBlock } from '@toeverything/framework/virgo';
+
+export const is_heading_child_type = (child: AsyncBlock) => {
+    if (!child) return false;
+    if (
+        Protocol.Block.Type.heading1 === child.type ||
+        Protocol.Block.Type.heading2 === child.type ||
+        Protocol.Block.Type.heading3 === child.type
+    ) {
+        return true;
+    }
+    return false;
+};
+export const get_heading_child_title = (child: AsyncBlock) => {
+    return (child as any).getProperties()?.['text']?.[0]?.text;
+};
+export const get_heading_child_level = (child: AsyncBlock) => {
+    let level = 1;
+    switch (child.type) {
+        case Protocol.Block.Type.heading1:
+            level = 1;
+            break;
+        case Protocol.Block.Type.heading2:
+            level = 2;
+            break;
+        case Protocol.Block.Type.heading3:
+            level = 3;
+            break;
+    }
+    return level;
+};
diff --git a/libs/components/editor-blocks/src/blocks/toc/toc-view.tsx b/libs/components/editor-blocks/src/blocks/toc/toc-view.tsx
new file mode 100644
index 000000000..6e16889b2
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/toc/toc-view.tsx
@@ -0,0 +1,85 @@
+import { FC, useEffect, useState } from 'react';
+import { CreateView } from '@toeverything/framework/virgo';
+import {
+    is_heading_child_type,
+    get_heading_child_title,
+    get_heading_child_level,
+} from './toc-util';
+import { MenuItem } from './types';
+import { styled } from '@toeverything/components/ui';
+const INITIAL_LIST: MenuItem[] = [];
+const MESSAGES = {
+    NO_HEADINGS_FOUND: 'No headings found',
+};
+export const TocView: FC<CreateView> = ({ block, editor }) => {
+    const [list, setList] = useState(INITIAL_LIST);
+    useEffect(() => {
+        const sync_toc = async () => {
+            const parent_block = await block.parent();
+            const parent_children = await parent_block.children();
+            const tmp_list: MenuItem[] = [];
+            parent_children.forEach(child => {
+                if (is_heading_child_type(child)) {
+                    tmp_list.push({
+                        id: child.id,
+                        title: get_heading_child_title(child),
+                        level: get_heading_child_level(child),
+                    });
+                }
+            });
+            //TODO  observe block change , timely update tmp_list
+            setList(tmp_list);
+        };
+        sync_toc();
+    }, [block, block.parent]);
+
+    return (
+        <ToContainer>
+            {list.length ? (
+                <ul className={'menu'}>
+                    {list.map((menu, index) => (
+                        <li
+                            key={menu.id}
+                            className={'menuItem'}
+                            style={{
+                                paddingLeft: (menu.level - 1) * 20 + 'px',
+                            }}
+                        >
+                            {menu.title}
+                        </li>
+                    ))}
+                </ul>
+            ) : (
+                <p className={'noHeadingsFound'}>
+                    {MESSAGES.NO_HEADINGS_FOUND}
+                </p>
+            )}
+        </ToContainer>
+    );
+};
+const ToContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    '.checkBoxContainer': {
+        marginRight: '4px',
+        padding: '10px 0',
+        height: theme.affine.typography.body1.lineHeight,
+    },
+    '.menu': {
+        listStyleType: 'none',
+        width: '100%',
+    },
+    '.menuItem': {
+        fontSize: '14px',
+        height: '30px',
+        lineHeight: '30px',
+        color: 'var(--color-gray-400)',
+        textDecorationLine: 'underline',
+        cursor: 'pointer',
+        '&:hover': {
+            backgroundColor: 'var(--color-gray-100)',
+        },
+    },
+    '.noHeadingsFound': {
+        color: 'var(--color-gray-400)',
+    },
+}));
diff --git a/libs/components/editor-blocks/src/blocks/toc/types.ts b/libs/components/editor-blocks/src/blocks/toc/types.ts
new file mode 100644
index 000000000..1a879acb1
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/toc/types.ts
@@ -0,0 +1,5 @@
+export interface MenuItem {
+    title: string;
+    id: string;
+    level: number;
+}
diff --git a/libs/components/editor-blocks/src/blocks/todo/CheckBox.tsx b/libs/components/editor-blocks/src/blocks/todo/CheckBox.tsx
new file mode 100644
index 000000000..badd4f6a6
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/todo/CheckBox.tsx
@@ -0,0 +1,84 @@
+import { styled } from '@toeverything/components/ui';
+import { FC, useMemo } from 'react';
+
+interface CheckBoxProps {
+    size?: number;
+    height?: number;
+    checked?: boolean;
+    onChange: (checked: boolean) => void;
+}
+
+export const CheckBox: FC<CheckBoxProps> = ({
+    size = '16px',
+    height = '23px',
+    checked,
+    onChange,
+}) => {
+    const dynamic_style = useMemo(
+        () => ({
+            height: {
+                height,
+            },
+            size: {
+                width: size,
+                height: size,
+            },
+        }),
+        [height, size]
+    );
+    return (
+        <CheckBoxContainer
+            style={dynamic_style.height}
+            onClick={() => onChange(!checked)}
+        >
+            <div
+                style={dynamic_style.size}
+                className={`checkBox ${checked ? 'checked' : 'unChecked'}`}
+            />
+        </CheckBoxContainer>
+    );
+};
+const CheckBoxContainer = styled('div')(() => ({
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    '.checkBox': {
+        position: 'relative',
+        borderWidth: '1.5px',
+        borderRadius: '3px',
+        cursor: 'pointer',
+        userSelect: 'none',
+        // Align border
+        marginLeft: '1.5px',
+        transitionDuration: '.2s',
+        transitionTimingFunction: 'ease-in',
+    },
+    '.unChecked': {
+        borderColor: '#c4c7cc',
+        borderStyle: 'solid',
+        backgroundColor: '#fff',
+        '&:hover': {
+            boxShadow: 'inset 0 0 4px rgba(165, 124, 124, 0.2)',
+        },
+    },
+    '.checked': {
+        backgroundColor: '#B9CAD5',
+        borderColor: '#B9CAD5',
+        '&::before': {
+            content: '""',
+            position: 'absolute',
+            top: '4px',
+            bottom: '0px',
+            left: '4px',
+            right: '0px',
+            width: '9px',
+            height: '5px',
+            borderWidth: '1.5px',
+            borderStyle: 'solid',
+            borderColor: '#fff',
+            borderTop: 'none',
+            borderRight: 'none',
+            transform: 'rotate(-45deg)',
+        },
+    },
+}));
diff --git a/libs/components/editor-blocks/src/blocks/todo/TodoView.tsx b/libs/components/editor-blocks/src/blocks/todo/TodoView.tsx
new file mode 100644
index 000000000..b45c07a79
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/todo/TodoView.tsx
@@ -0,0 +1,164 @@
+import { TextProps } from '@toeverything/components/common';
+import { styled } from '@toeverything/components/ui';
+import {
+    ContentColumnValue,
+    Protocol,
+} from '@toeverything/datasource/db-service';
+import { AsyncBlock, type CreateView } from '@toeverything/framework/virgo';
+import { useRef, type FC } from 'react';
+import {
+    TextManage,
+    type ExtendedTextUtils,
+} from '../../components/text-manage';
+import { tabBlock } from '../../utils/indent';
+import { CheckBox } from './CheckBox';
+import type { TodoAsyncBlock, TodoProperties } from './types';
+
+export const defaultTodoProps: TodoProperties = {
+    text: { value: [{ text: '' }] },
+};
+
+const reset_todo_state = async (block: TodoAsyncBlock) => {
+    await block.setProperties({
+        checked: { value: false },
+        collapsed: { value: false },
+    });
+};
+
+const todoIsEmpty = (contentValue: ContentColumnValue): boolean => {
+    const todoValue = contentValue.value;
+    return (
+        todoValue.length === 0 ||
+        (todoValue.length === 1 && !todoValue[0]['text'])
+    );
+};
+
+export const TodoView: FC<CreateView> = ({ block, editor }) => {
+    const properties = { ...defaultTodoProps, ...block.getProperties() };
+    const text_ref = useRef<ExtendedTextUtils>(null);
+
+    const turn_into_text_block = async () => {
+        // Convert to text block
+        await block.setType('text');
+        await reset_todo_state(block);
+
+        if (!text_ref.current) {
+            throw new Error(
+                'Failed to set cursor position! text_ref is not exist!'
+            );
+        }
+        const currentSelection = text_ref.current.getCurrentSelection();
+        if (!currentSelection) {
+            throw new Error(
+                'Failed to get cursor selection! currentSelection is not exist!'
+            );
+        }
+        // Update cursor position
+        editor.selectionManager.setNodeActiveSelection(block.id, {
+            type: 'Range',
+            info: currentSelection,
+        });
+    };
+
+    const on_text_enter: TextProps['handleEnter'] = async props => {
+        const { splitContents, isShiftKey } = props;
+        if (isShiftKey) {
+            return false;
+        }
+        const { contentBeforeSelection, contentAfterSelection } = splitContents;
+        const before = [...contentBeforeSelection.content];
+        const after = [...contentAfterSelection.content];
+        if (todoIsEmpty({ value: before } as ContentColumnValue)) {
+            await turn_into_text_block();
+            return true;
+        }
+
+        // Move children to new block
+        const children = (await block.children()).filter(
+            Boolean
+        ) as AsyncBlock[];
+
+        const next_node = await editor.createBlock(Protocol.Block.Type.todo);
+        if (!next_node) {
+            throw new Error('Failed to create todo block');
+        }
+        await block.removeChildren();
+        await next_node.append(...children);
+        await next_node.setProperties({
+            text: { value: after } as ContentColumnValue,
+        });
+
+        await block.setProperties({
+            text: { value: before } as ContentColumnValue,
+            collapsed: { value: false },
+        });
+        await block.after(next_node);
+
+        editor.selectionManager.activeNodeByNodeId(next_node.id);
+
+        return true;
+    };
+
+    const on_tab: TextProps['handleTab'] = async ({ isShiftKey }) => {
+        await tabBlock(block, isShiftKey);
+        return true;
+    };
+
+    const on_backspace: TextProps['handleBackSpace'] = async ({
+        isCollAndStart,
+    }) => {
+        if (!isCollAndStart) {
+            return false;
+        }
+        await turn_into_text_block();
+        return true;
+    };
+
+    const on_checked_change = async (checked: boolean) => {
+        await block.setProperties({
+            checked: { value: checked },
+        });
+    };
+
+    return (
+        <TodoBlock>
+            <div className={'checkBoxContainer'}>
+                <CheckBox
+                    checked={properties.checked?.value}
+                    onChange={on_checked_change}
+                />
+            </div>
+
+            <div className={'textContainer'}>
+                <TextManage
+                    className={properties.checked?.value ? 'checked' : ''}
+                    ref={text_ref}
+                    editor={editor}
+                    block={block}
+                    supportMarkdown
+                    placeholder="To-do"
+                    handleEnter={on_text_enter}
+                    handleBackSpace={on_backspace}
+                    handleTab={on_tab}
+                />
+            </div>
+        </TodoBlock>
+    );
+};
+
+const TodoBlock = styled('div')({
+    display: 'flex',
+    '.checkBoxContainer': {
+        marginRight: '4px',
+        height: '22px',
+    },
+    '.textContainer': {
+        flex: 1,
+        maxWidth: '100%',
+        overflowX: 'hidden',
+        overflowY: 'hidden',
+    },
+    '.checked': {
+        color: '#B9CAD5',
+    },
+});
diff --git a/libs/components/editor-blocks/src/blocks/todo/index.ts b/libs/components/editor-blocks/src/blocks/todo/index.ts
new file mode 100644
index 000000000..c6580009d
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/todo/index.ts
@@ -0,0 +1,99 @@
+import {
+    BaseView,
+    getTextProperties,
+    AsyncBlock,
+    SelectBlock,
+    getTextHtml,
+} from '@toeverything/framework/virgo';
+// import type { CreateView } from '@toeverything/framework/virgo';
+import {
+    Protocol,
+    DefaultColumnsValue,
+} from '@toeverything/datasource/db-service';
+// import { withTreeViewChildren } from '../../utils/with-tree-view-children';
+import { withTreeViewChildren } from '../../utils/WithTreeViewChildren';
+import { TodoView, defaultTodoProps } from './TodoView';
+import type { TodoAsyncBlock } from './types';
+
+export class TodoBlock extends BaseView {
+    type = Protocol.Block.Type.todo;
+    // View = withTreeViewChildren((props: CreateView) => <TodoView {...props} />);
+    View = withTreeViewChildren(TodoView);
+    // //
+    // override ChildrenView = WithTreeViewChildren;
+
+    override async onCreate(block: TodoAsyncBlock) {
+        if (!block.getProperty('text')) {
+            await block.setProperties(defaultTodoProps);
+        }
+        return block;
+    }
+
+    override getSelProperties(
+        block: TodoAsyncBlock,
+        selectInfo: any
+    ): DefaultColumnsValue {
+        const properties = super.getSelProperties(block, selectInfo);
+        return getTextProperties(properties, selectInfo);
+    }
+
+    override html2block(
+        el: Element,
+        parseEl: (el: Element) => any[]
+    ): any[] | null {
+        const tag_name = el.tagName;
+        if (tag_name === 'UL') {
+            const result = [];
+            for (let i = 0; i < el.children.length; i++) {
+                const blocks_info = parseEl(el.children[i]);
+                result.push(...blocks_info);
+            }
+            return result.length > 0 ? result : null;
+        }
+
+        if (tag_name == 'LI' && el.textContent.startsWith('[ ]  ')) {
+            const childNodes = el.childNodes;
+            let texts = [];
+            const children = [];
+            for (let i = 0; i < childNodes.length; i++) {
+                const blocks_info = parseEl(childNodes[i] as Element);
+                for (let j = 0; j < blocks_info.length; j++) {
+                    if (blocks_info[j].type === 'text') {
+                        const block_texts =
+                            blocks_info[j].properties.text.value;
+                        texts.push(...block_texts);
+                    } else {
+                        children.push(blocks_info[j]);
+                    }
+                }
+            }
+            if (texts.length > 0 && (texts[0].text || '').startsWith('[ ]  ')) {
+                texts[0].text = texts[0].text.substring('[ ]  '.length);
+                if (!texts[0].text) {
+                    texts = texts.slice(1);
+                }
+            }
+            return [
+                {
+                    type: this.type,
+                    properties: {
+                        text: { value: texts },
+                    },
+                    children: children,
+                },
+            ];
+        }
+
+        return null;
+    }
+
+    override async block2html(
+        block: AsyncBlock,
+        children: SelectBlock[],
+        generateHtml: (el: any[]) => Promise<string>
+    ): Promise<string> {
+        let content = getTextHtml(block);
+        content += await generateHtml(children);
+        return `<ul><li>[ ] ${content}</li></ul>`;
+    }
+}
diff --git a/libs/components/editor-blocks/src/blocks/todo/types.ts b/libs/components/editor-blocks/src/blocks/todo/types.ts
new file mode 100644
index 000000000..aa8f40081
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/todo/types.ts
@@ -0,0 +1,19 @@
+import { AsyncBlock } from '@toeverything/framework/virgo';
+import type {
+    ContentColumnValue,
+    BooleanColumnValue,
+} from '@toeverything/datasource/db-service';
+
+export interface TodoProperties {
+    text: ContentColumnValue;
+    checked?: BooleanColumnValue;
+    collapsed?: BooleanColumnValue;
+}
+
+export class TodoAsyncBlock extends AsyncBlock {
+    override setProperties(
+        properties: Partial<TodoProperties>
+    ): Promise<boolean> {
+        return super.setProperties(properties);
+    }
+}
diff --git a/libs/components/editor-blocks/src/blocks/youtube/YoutubeView.tsx b/libs/components/editor-blocks/src/blocks/youtube/YoutubeView.tsx
new file mode 100644
index 000000000..d761e8e10
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/youtube/YoutubeView.tsx
@@ -0,0 +1,49 @@
+import { FC, useState } from 'react';
+import { CreateView } from '@toeverything/framework/virgo';
+import { Upload } from '../../components/upload/upload';
+import { SourceView } from '../../components/source-view';
+import { LinkContainer } from '../../components/style-container';
+import { useOnSelect } from '@toeverything/components/editor-core';
+
+const _messages = {
+    addYoutubeLink: 'Add youtube link',
+};
+
+type YoutubeView = CreateView;
+export const YoutubeView: FC<YoutubeView> = ({ block }) => {
+    const [youtubeUrl, setYoutubeUrl] = useState<string>(
+        block.getProperty('embedLink')?.value
+    );
+
+    const onYoutubeUrlChange = async (link: string) => {
+        setYoutubeUrl(link);
+        block.setProperty('embedLink', { value: link, name: 'youtube' });
+    };
+    const [isSelect, setIsSelect] = useState<boolean>();
+    useOnSelect(block.id, (isSelect: boolean) => {
+        setIsSelect(isSelect);
+    });
+    return (
+        <LinkContainer>
+            {youtubeUrl ? (
+                <SourceView
+                    block={block}
+                    isSelected={isSelect}
+                    viewType="youtube"
+                    link={youtubeUrl}
+                />
+            ) : (
+                <Upload
+                    firstCreate={block.firstCreateFlag}
+                    uploadType={'youtube'}
+                    savaLink={onYoutubeUrlChange}
+                    deleteFile={() => {
+                        block.remove();
+                    }}
+                    defaultAddBtnText={_messages.addYoutubeLink}
+                    isSelected={isSelect}
+                />
+            )}
+        </LinkContainer>
+    );
+};
diff --git a/libs/components/editor-blocks/src/blocks/youtube/index.ts b/libs/components/editor-blocks/src/blocks/youtube/index.ts
new file mode 100644
index 000000000..363e7d78a
--- /dev/null
+++ b/libs/components/editor-blocks/src/blocks/youtube/index.ts
@@ -0,0 +1,50 @@
+import {
+    AsyncBlock,
+    BaseView,
+    SelectBlock,
+} from '@toeverything/framework/virgo';
+import { Protocol } from '@toeverything/datasource/db-service';
+import { YoutubeView } from './YoutubeView';
+
+export class YoutubeBlock extends BaseView {
+    public override selectable = true;
+    public override activatable = false;
+    type = Protocol.Block.Type.youtube;
+    View = YoutubeView;
+
+    override html2block(
+        el: Element,
+        parseEl: (el: Element) => any[]
+    ): any[] | null {
+        const tag_name = el.tagName;
+        if (tag_name === 'A' && el.parentElement?.childElementCount === 1) {
+            const href = el.getAttribute('href');
+            if (href.indexOf('.youtube.com') !== -1) {
+                return [
+                    {
+                        type: this.type,
+                        properties: {
+                            // TODO: is not sure what value to fill in name
+                            embedLink: {
+                                name: this.type,
+                                value: el.getAttribute('href'),
+                            },
+                        },
+                        children: [],
+                    },
+                ];
+            }
+        }
+
+        return null;
+    }
+
+    override async block2html(
+        block: AsyncBlock,
+        children: SelectBlock[],
+        generateHtml: (el: any[]) => Promise<string>
+    ): Promise<string> {
+        const url = block.getProperty('embedLink')?.value;
+        return `<p><a src=${url}>${url}</p>`;
+    }
+}
diff --git a/libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx b/libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx
new file mode 100644
index 000000000..f03cd9ffe
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx
@@ -0,0 +1,31 @@
+import type { FC } from 'react';
+import { styled } from '@toeverything/components/ui';
+import { AsyncBlock, BlockEditor } from '@toeverything/framework/virgo';
+
+type BlockContainerProps = Parameters<typeof Container>[0] & {
+    block: AsyncBlock;
+    editor: BlockEditor;
+};
+
+export const BlockContainer: FC<BlockContainerProps> = function ({
+    block,
+    children,
+    className,
+    editor,
+    ...restProps
+}) {
+    return (
+        <Container
+            className={`${className || ''} block_container`}
+            {...restProps}
+        >
+            {children}
+        </Container>
+    );
+};
+
+export const Container = styled('div')<{ selected: boolean }>(
+    ({ selected, theme }) => ({
+        backgroundColor: selected ? theme.affine.palette.textSelected : '',
+    })
+);
diff --git a/libs/components/editor-blocks/src/components/BlockContainer/index.ts b/libs/components/editor-blocks/src/components/BlockContainer/index.ts
new file mode 100644
index 000000000..91fd2eb1a
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/BlockContainer/index.ts
@@ -0,0 +1 @@
+export { BlockContainer } from './BlockContainer';
diff --git a/libs/components/editor-blocks/src/components/ImageView/ImageView.tsx b/libs/components/editor-blocks/src/components/ImageView/ImageView.tsx
new file mode 100644
index 000000000..24ffac6f2
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/ImageView/ImageView.tsx
@@ -0,0 +1,65 @@
+import { AsyncBlock } from '@toeverything/framework/virgo';
+import { FC } from 'react';
+import { ResizableBox } from 'react-resizable';
+import { styled } from '@toeverything/components/ui';
+
+export interface Props {
+    block: AsyncBlock;
+    link: string;
+    viewStyle: {
+        width: number;
+        maxWidth: number;
+        minWidth: number;
+        ratio: number;
+    };
+    isSelected: boolean;
+    resize?: boolean;
+}
+const ImageContainer = styled('div')<{ isSelected: boolean }>(
+    ({ theme, isSelected }) => {
+        return {
+            position: 'relative',
+            fontSize: 0,
+            width: '100%',
+            height: '100%',
+            border: `2px solid ${
+                isSelected ? theme.affine.palette.primary : '#fff'
+            }`,
+            img: {
+                width: '100%',
+                maxWidth: '100%',
+                // height: '100%',
+            },
+        };
+    }
+);
+export const Image: FC<Props> = props => {
+    const { link, viewStyle, isSelected, block } = props;
+    const on_resize_end = (e: any, data: any) => {
+        block.setProperty('image_style', data.size);
+    };
+    return (
+        <div
+            onMouseDown={e => {
+                e.preventDefault();
+            }}
+        >
+            <ResizableBox
+                className="box"
+                width={viewStyle.width}
+                height={viewStyle.width / viewStyle.ratio}
+                minConstraints={[
+                    viewStyle.minWidth,
+                    viewStyle.minWidth / viewStyle.ratio,
+                ]}
+                lockAspectRatio={true}
+                resizeHandles={isSelected ? ['sw', 'nw', 'se', 'ne'] : []}
+                onResizeStop={on_resize_end}
+            >
+                <ImageContainer isSelected={isSelected}>
+                    <img src={link} alt={link} />
+                </ImageContainer>
+            </ResizableBox>
+        </div>
+    );
+};
diff --git a/libs/components/editor-blocks/src/components/ImageView/index.ts b/libs/components/editor-blocks/src/components/ImageView/index.ts
new file mode 100644
index 000000000..24e726090
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/ImageView/index.ts
@@ -0,0 +1 @@
+export { Image } from './ImageView';
diff --git a/libs/components/editor-blocks/src/components/IndentWrapper/IndentWrapper.tsx b/libs/components/editor-blocks/src/components/IndentWrapper/IndentWrapper.tsx
new file mode 100644
index 000000000..f342d28ba
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/IndentWrapper/IndentWrapper.tsx
@@ -0,0 +1,17 @@
+import { FC, PropsWithChildren } from 'react';
+import { ChildrenView } from '@toeverything/framework/virgo';
+import { styled } from '@toeverything/components/ui';
+
+/**
+ * Indent rendering child nodes
+ */
+export const IndentWrapper: FC<PropsWithChildren> = props => {
+    return <StyledIdentWrapper>{props.children}</StyledIdentWrapper>;
+};
+
+const StyledIdentWrapper = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    // TODO: marginLeft should use theme provided by styled
+    marginLeft: '30px',
+});
diff --git a/libs/components/editor-blocks/src/components/IndentWrapper/index.ts b/libs/components/editor-blocks/src/components/IndentWrapper/index.ts
new file mode 100644
index 000000000..e4234a916
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/IndentWrapper/index.ts
@@ -0,0 +1 @@
+export * from './IndentWrapper';
diff --git a/libs/components/editor-blocks/src/components/editable/editable.tsx b/libs/components/editor-blocks/src/components/editable/editable.tsx
new file mode 100644
index 000000000..5354b0869
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/editable/editable.tsx
@@ -0,0 +1,25 @@
+import { FC, useMemo } from 'react';
+import { createEditor } from 'slate';
+import { Slate, Editable as SlateEditable, withReact } from 'slate-react';
+import { ErrorBoundary } from '@toeverything/utils';
+// import { EditableText, EditableElement } from './types';
+
+// interface EditableProps {
+//     value: EditableText[];
+//     onChange: () => void;
+// }
+
+export const Editable: FC = () => {
+    const editor = useMemo(() => withReact(createEditor()), []);
+    return (
+        <ErrorBoundary
+            FallbackComponent={props => (
+                <div>Render Error. {props.error?.message}</div>
+            )}
+        >
+            <Slate editor={editor} value={[]} onChange={() => 1}>
+                <SlateEditable />
+            </Slate>
+        </ErrorBoundary>
+    );
+};
diff --git a/libs/components/editor-blocks/src/components/editable/index.ts b/libs/components/editor-blocks/src/components/editable/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/libs/components/editor-blocks/src/components/editable/types.ts b/libs/components/editor-blocks/src/components/editable/types.ts
new file mode 100644
index 000000000..9e294f197
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/editable/types.ts
@@ -0,0 +1,13 @@
+// import { BaseEditor } from 'slate';
+// import { ReactEditor } from 'slate-react';
+
+// export type EditableText = { text: string };
+// export type EditableElement = { type: 'paragraph'; children: EditableElement[] };
+
+// declare module 'slate' {
+//     interface CustomTypes {
+//         Editor: BaseEditor & ReactEditor;
+//         Element: EditableElement;
+//         Text: EditableText;
+//     }
+// }
diff --git a/libs/components/editor-blocks/src/components/select/index.tsx b/libs/components/editor-blocks/src/components/select/index.tsx
new file mode 100644
index 000000000..e650cf090
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/select/index.tsx
@@ -0,0 +1,35 @@
+interface SelectProps {
+    label?: string;
+    value?: string;
+    options?: string[];
+    onChange?(evn: React.ChangeEvent<HTMLSelectElement>): void;
+}
+
+export const Select = ({
+    label = '',
+    value,
+    options = [],
+    onChange,
+}: SelectProps) => {
+    return (
+        <label>
+            {label && <span>{label}：</span>}
+            <span>
+                <select value={value} onChange={onChange}>
+                    {options.map((item, key) => {
+                        const optionProps: React.OptionHTMLAttributes<HTMLOptionElement> =
+                            {};
+                        if (value === item) {
+                            optionProps.value = item;
+                        }
+                        return (
+                            <option key={key} {...optionProps}>
+                                {item}
+                            </option>
+                        );
+                    })}
+                </select>
+            </span>
+        </label>
+    );
+};
diff --git a/libs/components/editor-blocks/src/components/source-view/SourceView.tsx b/libs/components/editor-blocks/src/components/source-view/SourceView.tsx
new file mode 100644
index 000000000..99673d221
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/source-view/SourceView.tsx
@@ -0,0 +1,184 @@
+import { FC, memo, useEffect, useMemo, useRef, useState } from 'react';
+
+import { StyledBlockPreview } from '@toeverything/components/common';
+import { styled } from '@toeverything/components/ui';
+import { AsyncBlock, useRecastBlockScene } from '@toeverything/framework/virgo';
+
+import { formatUrl } from './format-url';
+import { SCENE_CONFIG } from '../../blocks/group/config';
+import { services } from '@toeverything/datasource/db-service';
+import { debounce } from '@toeverything/utils';
+
+export interface Props {
+    block: AsyncBlock;
+    editorElement?: () => JSX.Element;
+    viewType?: string;
+    link: string;
+    // onResizeEnd: (data: any) => void;
+    isSelected: boolean;
+    resize?: boolean;
+}
+
+const _getLinkStyle = (scene: string) => {
+    switch (scene) {
+        case SCENE_CONFIG.PAGE:
+            return {
+                width: '420px',
+                height: '198px',
+            };
+        case SCENE_CONFIG.REFLINK:
+            return {};
+        default:
+            return {
+                width: '252px',
+                height: '126px',
+            };
+    }
+};
+
+type BlockPreviewProps = {
+    block: AsyncBlock;
+    blockId: string;
+    editorElement?: () => JSX.Element;
+};
+
+const BlockPreview = (props: BlockPreviewProps) => {
+    const container = useRef<HTMLDivElement>();
+    const [preview, setPreview] = useState(true);
+    const [title, setTitle] = useState('Loading...');
+    useEffect(() => {
+        let callback: any = undefined;
+        services.api.editorBlock
+            .getBlock(props.block.workspace, props.blockId)
+            .then(block => {
+                if (block.id === props.blockId) {
+                    const updateTitle = debounce(
+                        async () => {
+                            const [page] =
+                                await services.api.editorBlock.search(
+                                    props.block.workspace,
+                                    { tag: 'id:affine67Uz4DstDk6PKUbz' }
+                                );
+
+                            console.log(page);
+                            setTitle(page?.content || 'Untitled');
+                        },
+                        100,
+                        { maxWait: 500 }
+                    );
+                    block.on('content', props.block.id, updateTitle);
+                    callback = () => block.off('content', props.block.id);
+                    updateTitle();
+                } else {
+                    setTitle('Untitled');
+                }
+            });
+        return () => callback?.();
+    }, [props.block.id, props.block.workspace, props.blockId]);
+
+    const AffineEditor = props.editorElement as any;
+
+    useEffect(() => {
+        if (container?.current) {
+            const element = container?.current;
+            const resizeObserver = new IntersectionObserver(entries => {
+                const height = entries?.[0]?.intersectionRect.height;
+                setPreview(height < 174);
+            });
+
+            resizeObserver.observe(element);
+            return () => resizeObserver.unobserve(element);
+        }
+        return undefined;
+    }, [container]);
+
+    return (
+        <div ref={container}>
+            <StyledBlockPreview title={title}>
+                {preview ? (
+                    <span
+                        style={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            fontSize: '128px',
+                            height: '480px',
+                            alignItems: 'center',
+                            color: '#5591ff',
+                        }}
+                    >
+                        Preview
+                    </span>
+                ) : AffineEditor ? (
+                    <AffineEditor
+                        workspace={props.block.workspace}
+                        rootBlockId={props.blockId}
+                    />
+                ) : null}
+            </StyledBlockPreview>
+        </div>
+    );
+};
+
+const MemoBlockPreview = memo(BlockPreview, (prev, next) => {
+    return (
+        prev.block.workspace === next.block.workspace &&
+        prev.blockId === next.blockId
+    );
+});
+
+const SourceViewContainer = styled('div')<{
+    isSelected: boolean;
+    scene: string;
+}>(({ theme, isSelected, scene }) => {
+    return {
+        ..._getLinkStyle(scene),
+        overflow: 'hidden',
+        borderRadius: theme.affine.shape.borderRadius,
+        background: isSelected ? 'rgba(152, 172, 189, 0.1)' : 'transparent',
+        padding: '8px',
+        // border:
+        iframe: {
+            width: '100%',
+            height: '100%',
+            border: '1px solid #EAEEF2',
+            borderRadius: theme.affine.shape.borderRadius,
+        },
+    };
+});
+
+export const SourceView: FC<Props> = props => {
+    const { link, isSelected, block, editorElement } = props;
+    const { scene } = useRecastBlockScene();
+    const src = formatUrl(link);
+    if (src?.startsWith('http')) {
+        return (
+            <div
+                onMouseDown={e => e.preventDefault()}
+                style={{ display: 'flex' }}
+            >
+                <SourceViewContainer isSelected={isSelected} scene={scene}>
+                    <iframe
+                        title={link}
+                        src={src}
+                        frameBorder="0"
+                        allowFullScreen
+                    />
+                </SourceViewContainer>
+            </div>
+        );
+    } else if (src?.startsWith('affine')) {
+        return (
+            <SourceViewContainer
+                isSelected={isSelected}
+                scene={SCENE_CONFIG.REFLINK}
+            >
+                <MemoBlockPreview
+                    block={block}
+                    editorElement={editorElement}
+                    blockId={src}
+                />
+            </SourceViewContainer>
+        );
+    }
+    return null;
+};
diff --git a/libs/components/editor-blocks/src/components/source-view/format-url/affine.ts b/libs/components/editor-blocks/src/components/source-view/format-url/affine.ts
new file mode 100644
index 000000000..2ddb81463
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/source-view/format-url/affine.ts
@@ -0,0 +1,11 @@
+const _regex =
+    /^(https?:\/\/(localhost:4200|(nightly|app)\.affine\.pro|.*?\.ligo-virgo\.pages\.dev)\/\w{28}\/)?(affine\w{16})$/;
+
+export const isAffineUrl = (url?: string) => {
+    if (!url) return false;
+    return _regex.test(url);
+};
+
+export const toAffineEmbedUrl = (url: string) => {
+    return _regex.exec(url)?.[4];
+};
diff --git a/libs/components/editor-blocks/src/components/source-view/format-url/figma.ts b/libs/components/editor-blocks/src/components/source-view/format-url/figma.ts
new file mode 100644
index 000000000..a3bfb7e9a
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/source-view/format-url/figma.ts
@@ -0,0 +1,12 @@
+export const isFigmaUrl = (url?: string) => {
+    if (!url) {
+        return false;
+    }
+    return /https:\/\/([\w.-]+\.)?figma.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/.test(
+        url
+    );
+};
+
+export const toFigmaEmbedUrl = (url: string) => {
+    return `https://www.figma.com/embed?embed_host=affine&url=${url}`;
+};
diff --git a/libs/components/editor-blocks/src/components/source-view/format-url/format-url.ts b/libs/components/editor-blocks/src/components/source-view/format-url/format-url.ts
new file mode 100644
index 000000000..affc0ae38
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/source-view/format-url/format-url.ts
@@ -0,0 +1,17 @@
+import { isYoutubeUrl, parseYoutubeId } from './youtube';
+import { isFigmaUrl, toFigmaEmbedUrl } from './figma';
+import { isAffineUrl, toAffineEmbedUrl } from './affine';
+
+export const formatUrl = (url?: string): undefined | string => {
+    if (isYoutubeUrl(url)) {
+        const youtubeId = parseYoutubeId(url);
+        return youtubeId ? `https://www.youtube.com/embed/${youtubeId}` : url;
+    }
+    if (isFigmaUrl(url)) {
+        return toFigmaEmbedUrl(url);
+    }
+    if (isAffineUrl(url)) {
+        return toAffineEmbedUrl(url);
+    }
+    return url;
+};
diff --git a/libs/components/editor-blocks/src/components/source-view/format-url/index.ts b/libs/components/editor-blocks/src/components/source-view/format-url/index.ts
new file mode 100644
index 000000000..a23803cc8
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/source-view/format-url/index.ts
@@ -0,0 +1 @@
+export { formatUrl } from './format-url';
diff --git a/libs/components/editor-blocks/src/components/source-view/format-url/youtube.ts b/libs/components/editor-blocks/src/components/source-view/format-url/youtube.ts
new file mode 100644
index 000000000..ebc0c70be
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/source-view/format-url/youtube.ts
@@ -0,0 +1,13 @@
+export const isYoutubeUrl = (url?: string): boolean => {
+    return url.includes('youtu.be') || url.includes('youtube.com');
+};
+
+const _regexp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#&?]*).*/;
+
+export const parseYoutubeId = (url?: string): undefined | string => {
+    if (!url) {
+        return undefined;
+    }
+    const matched = url.match(_regexp);
+    return matched && matched[1].length === 11 ? matched[1] : undefined;
+};
diff --git a/libs/components/editor-blocks/src/components/source-view/index.ts b/libs/components/editor-blocks/src/components/source-view/index.ts
new file mode 100644
index 000000000..cd9820a5c
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/source-view/index.ts
@@ -0,0 +1 @@
+export { SourceView } from './SourceView';
diff --git a/libs/components/editor-blocks/src/components/style-container/index.tsx b/libs/components/editor-blocks/src/components/style-container/index.tsx
new file mode 100644
index 000000000..6d8c266a6
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/style-container/index.tsx
@@ -0,0 +1,19 @@
+import { styled } from '@toeverything/components/ui';
+
+export const List = styled('div')(({ theme }) => ({
+    display: 'flex',
+    '.checkBoxContainer': {
+        marginRight: '4px',
+        lineHeight: theme.affine.typography.body1.lineHeight,
+    },
+    '.textContainer': {
+        flex: 1,
+        maxWidth: '100%',
+        overflowX: 'hidden',
+        overflowY: 'hidden',
+    },
+}));
+export const LinkContainer = styled('div')(() => ({
+    position: 'relative',
+    overflowBlock: 'hidden',
+}));
diff --git a/libs/components/editor-blocks/src/components/table/basic-table.scss b/libs/components/editor-blocks/src/components/table/basic-table.scss
new file mode 100644
index 000000000..d5546784f
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/table/basic-table.scss
@@ -0,0 +1,6 @@
+.v-basic-table-body {
+    overflow: hidden !important;
+    &:hover {
+        overflow: auto !important;
+    }
+}
diff --git a/libs/components/editor-blocks/src/components/table/basic-table.tsx b/libs/components/editor-blocks/src/components/table/basic-table.tsx
new file mode 100644
index 000000000..61373017a
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/table/basic-table.tsx
@@ -0,0 +1,198 @@
+import {
+    useMemo,
+    memo,
+    useRef,
+    useState,
+    useLayoutEffect,
+    useCallback,
+} from 'react';
+import type { FC } from 'react';
+import { VariableSizeGrid, areEqual } from 'react-window';
+import type {
+    GridChildComponentProps,
+    GridItemKeySelector,
+} from 'react-window';
+import style9 from 'style9';
+import './basic-table.scss';
+export interface TableColumn {
+    dataKey: string;
+    label: string;
+    width?: number;
+    [key: string]: unknown;
+}
+
+export interface TableRow {
+    height?: number;
+    [key: string]: unknown;
+}
+
+export interface CustomCellProps<T = unknown> {
+    columnIndex: number;
+    rowIndex: number;
+    column: TableColumn;
+    row: TableRow;
+    value: T;
+    valueKey: string;
+}
+export type CustomCell<T = unknown> = FC<CustomCellProps<T>>;
+
+interface TableData {
+    columns: readonly TableColumn[];
+    rows: readonly TableRow[];
+    CustomCell: CustomCell;
+}
+
+export interface BasicTableProps {
+    columns: readonly TableColumn[];
+    rows: readonly TableRow[];
+    headerHeight?: number;
+    /**
+     * row unique identifier
+     */
+    rowKey: string;
+    /**
+     * Whether to display border, default true
+     */
+    border?: boolean;
+    renderCell?: CustomCell;
+}
+
+const DEFAULT_COLUMN_WIDTH = 150;
+const DEFAULT_ROW_HEIGHT = 42;
+const MAX_TABLE_HEIGHT = 400;
+export const DEFAULT_RENDER_CELL: CustomCell = ({ value }) => {
+    return <span>{value ? String(value) : '--'}</span>;
+};
+
+const Cell: FC<GridChildComponentProps<TableData>> = memo(
+    ({ data, rowIndex, columnIndex, style }) => {
+        const column = data.columns[columnIndex];
+        const row = data.rows[rowIndex];
+        const is_first_column = columnIndex === 0;
+        const is_first_row = rowIndex === 0;
+        const class_name = styles({
+            cell: true,
+            cellLeftBorder: !is_first_column,
+            cellTopBorder: !is_first_row,
+        });
+
+        const CustomCell = data.CustomCell;
+        return (
+            <div style={style} className={class_name}>
+                <CustomCell
+                    column={column}
+                    row={row}
+                    columnIndex={columnIndex}
+                    rowIndex={rowIndex}
+                    value={row[column.dataKey]}
+                    valueKey={column.dataKey}
+                />
+            </div>
+        );
+    },
+    areEqual
+);
+
+export const BasicTable: FC<BasicTableProps> = ({
+    columns,
+    rows,
+    headerHeight = DEFAULT_ROW_HEIGHT,
+    rowKey,
+    border = true,
+    renderCell = DEFAULT_RENDER_CELL,
+}) => {
+    const container_ref = useRef<HTMLDivElement>();
+    const [table_width, set_table_width] = useState(0);
+
+    useLayoutEffect(() => {
+        const container_rect =
+            container_ref.current?.getBoundingClientRect() || { width: 0 };
+        const container_width = border
+            ? container_rect.width - 2
+            : container_rect.width;
+        if (container_width !== table_width) {
+            set_table_width(container_width);
+        }
+    });
+
+    const rows_with_header = useMemo(() => {
+        const header_row = columns.reduce((acc, cur) => {
+            acc[cur.dataKey] = cur.label;
+            return acc;
+        }, {} as TableRow);
+        header_row['height'] = headerHeight;
+        return [header_row, ...rows];
+    }, [rows, columns, headerHeight]);
+
+    const table_height = useMemo(() => {
+        let height = 0;
+        let index = 0;
+        while (height < MAX_TABLE_HEIGHT) {
+            if (index >= rows_with_header.length) {
+                return height;
+            }
+            const row = rows_with_header[index];
+            height = height + (row.height || DEFAULT_ROW_HEIGHT);
+            index = index + 1;
+        }
+        return MAX_TABLE_HEIGHT;
+    }, [rows_with_header]);
+
+    const item_data = useMemo<TableData>(
+        () => ({ columns, rows: rows_with_header, CustomCell: renderCell }),
+        [columns, rows_with_header]
+    );
+
+    const get_item_key = useCallback<GridItemKeySelector<TableData>>(
+        ({ data, columnIndex, rowIndex }) => {
+            const column = data.columns[columnIndex];
+            const row = data.rows[rowIndex];
+            return `${column.dataKey}_${row[rowKey]}`;
+        },
+        [rowKey]
+    );
+
+    return (
+        <div ref={container_ref} className={styles('containerBorder')}>
+            {table_width ? (
+                <VariableSizeGrid
+                    className="v-basic-table-body"
+                    columnCount={columns.length}
+                    columnWidth={index =>
+                        columns[index].width || DEFAULT_COLUMN_WIDTH
+                    }
+                    height={table_height}
+                    rowCount={rows_with_header.length}
+                    rowHeight={index =>
+                        rows_with_header[index].height || DEFAULT_ROW_HEIGHT
+                    }
+                    width={table_width}
+                    itemData={item_data}
+                    itemKey={get_item_key}
+                >
+                    {Cell}
+                </VariableSizeGrid>
+            ) : null}
+        </div>
+    );
+};
+
+const styles = style9.create({
+    containerBorder: {
+        borderTop: '1px solid #ECEFF3',
+        borderBottom: '1px solid #ECEFF3',
+        boxSizing: 'border-box',
+    },
+    cell: {
+        overflowX: 'hidden',
+        overflowY: 'hidden',
+        padding: '10px 4px',
+        boxSizing: 'border-box',
+    },
+    cellLeftBorder: {
+        // borderLeft: '1px solid #98ACBD'
+    },
+    cellTopBorder: {
+        borderTop: '1px solid #ECEFF3',
+    },
+});
diff --git a/libs/components/editor-blocks/src/components/table/custom-cell/check-box/index.tsx b/libs/components/editor-blocks/src/components/table/custom-cell/check-box/index.tsx
new file mode 100644
index 000000000..37361f78f
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/table/custom-cell/check-box/index.tsx
@@ -0,0 +1,19 @@
+import type { FC } from 'react';
+import { Checkbox } from '@toeverything/components/ui';
+import type { BooleanColumnValue } from '@toeverything/datasource/db-service';
+import type { CellProps } from '../types';
+
+/**
+ * @deprecated
+ */
+export const CheckBoxCell: FC<CellProps<BooleanColumnValue>> = ({
+    value,
+    onChange,
+}) => {
+    return (
+        <Checkbox
+            checked={value?.value}
+            onChange={event => onChange({ value: event.target.checked })}
+        />
+    );
+};
diff --git a/libs/components/editor-blocks/src/components/table/custom-cell/index.tsx b/libs/components/editor-blocks/src/components/table/custom-cell/index.tsx
new file mode 100644
index 000000000..1591dfa72
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/table/custom-cell/index.tsx
@@ -0,0 +1,52 @@
+import type { FC } from 'react';
+import { ColumnType } from '@toeverything/datasource/db-service';
+import type { CustomCellProps as TableCustomCellProps } from '../basic-table';
+import { DEFAULT_RENDER_CELL } from '../basic-table';
+import { CheckBoxCell } from './check-box';
+import { SelectCell } from './select';
+import type { CellProps } from './types';
+
+/**
+ * @deprecated
+ */
+const DefaultCell: FC<CellProps> = ({ onChange, ...props }) => {
+    return <DEFAULT_RENDER_CELL {...props} />;
+};
+
+/**
+ * @deprecated
+ */
+const cellMap: Record<ColumnType, FC<CellProps<any>>> = {
+    [ColumnType.content]: DefaultCell,
+    [ColumnType.number]: DefaultCell,
+    [ColumnType.enum]: SelectCell,
+    [ColumnType.date]: DefaultCell,
+    [ColumnType.boolean]: CheckBoxCell,
+    [ColumnType.file]: DefaultCell,
+    [ColumnType.string]: DefaultCell,
+};
+
+/**
+ * @deprecated
+ */
+interface CustomCellProps extends TableCustomCellProps<unknown> {
+    onChange: (data: TableCustomCellProps<unknown>) => void;
+}
+
+export const CustomCell: FC<CustomCellProps> = props => {
+    const View =
+        props.rowIndex === 0
+            ? DefaultCell
+            : cellMap[props.column['type'] as ColumnType] || DefaultCell;
+    return (
+        <View
+            {...(props as CellProps)}
+            onChange={value => {
+                props.onChange({
+                    ...props,
+                    value,
+                });
+            }}
+        />
+    );
+};
diff --git a/libs/components/editor-blocks/src/components/table/custom-cell/select/index.tsx b/libs/components/editor-blocks/src/components/table/custom-cell/select/index.tsx
new file mode 100644
index 000000000..e5175533e
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/table/custom-cell/select/index.tsx
@@ -0,0 +1,34 @@
+import type { FC } from 'react';
+import { useMemo } from 'react';
+import { OldSelect } from '@toeverything/components/ui';
+import type { EnumColumnValue } from '@toeverything/datasource/db-service';
+import { isEnumColumn } from '@toeverything/datasource/db-service';
+import type { CellProps } from '../types';
+
+/**
+ * @deprecated
+ */
+export const SelectCell: FC<CellProps<EnumColumnValue>> = ({
+    value,
+    column,
+    onChange,
+}) => {
+    const options = useMemo(() => {
+        if (isEnumColumn(column.columnConfig)) {
+            return column.columnConfig.options.map(option => {
+                return {
+                    label: option.name,
+                    value: String(option.value),
+                };
+            });
+        }
+        return [];
+    }, [column]);
+    return (
+        <OldSelect
+            value={value?.value?.[0]}
+            options={options}
+            onChange={eventValue => onChange({ value: [eventValue] })}
+        />
+    );
+};
diff --git a/libs/components/editor-blocks/src/components/table/custom-cell/types.ts b/libs/components/editor-blocks/src/components/table/custom-cell/types.ts
new file mode 100644
index 000000000..e4f14fd42
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/table/custom-cell/types.ts
@@ -0,0 +1,17 @@
+import type { Column } from '@toeverything/datasource/db-service';
+import type { CustomCellProps, TableColumn } from '../basic-table';
+
+/**
+ * @deprecated
+ */
+export interface BusinessTableColumn extends TableColumn {
+    columnConfig: Column;
+}
+
+/**
+ * @deprecated
+ */
+export interface CellProps<T = unknown> extends CustomCellProps<T> {
+    onChange: (value: T) => void;
+    column: BusinessTableColumn;
+}
diff --git a/libs/components/editor-blocks/src/components/table/index.ts b/libs/components/editor-blocks/src/components/table/index.ts
new file mode 100644
index 000000000..0e750c862
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/table/index.ts
@@ -0,0 +1,4 @@
+export { Table } from './table';
+export type { TableColumn, TableRow } from './basic-table';
+
+export { CustomCell } from './custom-cell';
diff --git a/libs/components/editor-blocks/src/components/table/table.tsx b/libs/components/editor-blocks/src/components/table/table.tsx
new file mode 100644
index 000000000..1c65c63b5
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/table/table.tsx
@@ -0,0 +1,16 @@
+import type { FC, ReactNode } from 'react';
+import { BasicTable } from './basic-table';
+import type { BasicTableProps } from './basic-table';
+
+interface TableProps extends BasicTableProps {
+    addon?: ReactNode;
+}
+
+export const Table: FC<TableProps> = ({ addon, ...props }) => {
+    return (
+        <div>
+            {addon}
+            <BasicTable {...props} />
+        </div>
+    );
+};
diff --git a/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx b/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx
new file mode 100644
index 000000000..43cd700aa
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx
@@ -0,0 +1,515 @@
+/* eslint-disable max-lines */
+import {
+    Text,
+    type SlateUtils,
+    type TextProps,
+} from '@toeverything/components/common';
+import {
+    useOnSelectActive,
+    useOnSelectSetSelection,
+} from '@toeverything/components/editor-core';
+import { styled } from '@toeverything/components/ui';
+import { ContentColumnValue } from '@toeverything/datasource/db-service';
+import {
+    AsyncBlock,
+    BlockEditor,
+    CursorTypes,
+} from '@toeverything/framework/virgo';
+import { isEqual, Point } from '@toeverything/utils';
+import {
+    forwardRef,
+    MouseEvent,
+    useCallback,
+    useEffect,
+    useRef,
+    type MutableRefObject,
+} from 'react';
+import { Range } from 'slate';
+import { ReactEditor } from 'slate-react';
+
+interface CreateTextView extends TextProps {
+    // TODO: need to optimize
+    block: AsyncBlock;
+    editor: BlockEditor;
+    className?: string;
+}
+
+export type ExtendedTextUtils = SlateUtils & {
+    setLinkModalVisible: (visible: boolean) => void;
+};
+const TextBlockContainer = styled(Text)(({ theme }) => ({
+    lineHeight: theme.affine.typography.body1.lineHeight,
+}));
+
+const findSlice = (arr: string[], p: string, q: string) => {
+    let should_include = false;
+    return arr.filter(block => {
+        if (block === p || block === q) {
+            should_include = !should_include;
+            return true;
+        } else {
+            return should_include;
+        }
+    });
+};
+
+const findLowestCommonAncestor = async (
+    editor: BlockEditor,
+    p: string,
+    q: string
+) => {
+    const root = editor.getRootBlockId();
+
+    const ancestor: { id: string; children: string[] }[] = [
+        { id: p, children: [] },
+    ];
+
+    let current = p;
+
+    while (current !== root) {
+        const parent = await (await editor.getBlockById(current)).parent();
+        ancestor.push({ id: parent.id, children: parent.childrenIds });
+        current = parent.id;
+    }
+    current = q;
+    let prev = q;
+    let commonAncestor = ancestor.length - 1;
+    while (current !== root) {
+        // eslint-disable-next-line no-loop-func
+        const same = ancestor.findIndex(a => a.id === current);
+        if (same !== -1) {
+            commonAncestor = same;
+            break;
+        }
+        const parent = await (await editor.getBlockById(current)).parent();
+        prev = current;
+        current = parent.id;
+    }
+
+    // ancestor is p
+    if (commonAncestor === 0) {
+        return [p];
+    }
+
+    // ancestor is q
+    if (current === q) {
+        return [q];
+    }
+
+    return findSlice(
+        ancestor[commonAncestor].children,
+        prev,
+        ancestor[commonAncestor - 1].id
+    );
+};
+
+export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
+    (props, ref) => {
+        const { block, editor, ...otherOptions } = props;
+        const defaultRef = useRef<ExtendedTextUtils>(null);
+        // Maybe there is a better way
+        const textRef =
+            (ref as MutableRefObject<ExtendedTextUtils>) || defaultRef;
+
+        const properties = block.getProperties();
+        // const [is_select, set_is_select] = useState<boolean>();
+        // useOnSelect(block.id, (is_select: boolean) => {
+        //     set_is_select(is_select);
+        // });
+        const on_text_view_set_selection = (selection: Range | Point) => {
+            if (selection instanceof Point) {
+                //do some thing
+            } else {
+                textRef.current.setSelection(selection);
+            }
+        };
+
+        // block = await editor.commands.blockCommands.createNextBlock(block.id,)
+        const on_text_view_active = useCallback(
+            (point: CursorTypes, rang_form?: 'up' | 'down') => {
+                // TODO code to be optimized
+                if (textRef.current) {
+                    const end_selection = textRef.current.getEndSelection();
+                    const start_selection = textRef.current.getStartSelection();
+                    if (point === 'start') {
+                        textRef.current.setSelection(start_selection);
+                        return;
+                    }
+                    if (point === 'end') {
+                        textRef.current.setSelection(end_selection);
+                        return;
+                    }
+                    try {
+                        if (point instanceof Point) {
+                            let blockTop = point.y;
+                            const blockDomStyle = block?.dom
+                                .getElementsByClassName('text-paragraph')[0]
+                                .getBoundingClientRect();
+
+                            if (rang_form === 'up') {
+                                blockTop = blockDomStyle.bottom - 5;
+                            } else {
+                                blockTop = blockDomStyle.top + 5;
+                            }
+                            const end_position = ReactEditor.toDOMRange(
+                                textRef.current.editor,
+                                end_selection
+                            )
+                                .getClientRects()
+                                .item(0);
+                            const start_position = ReactEditor.toDOMRange(
+                                textRef.current.editor,
+                                start_selection
+                            )
+                                .getClientRects()
+                                .item(0);
+                            if (end_position.left <= point.x) {
+                                textRef.current.setSelection(end_selection);
+                                return;
+                            }
+                            if (start_position.left >= point.x) {
+                                textRef.current.setSelection(start_selection);
+                                return;
+                            }
+                            let range: globalThis.Range;
+                            if (document.caretRangeFromPoint) {
+                                range = document.caretRangeFromPoint(
+                                    point.x,
+                                    blockTop
+                                );
+                            } else if (document.caretPositionFromPoint) {
+                                const caret = document.caretPositionFromPoint(
+                                    point.x,
+                                    blockTop
+                                );
+
+                                range = document.createRange();
+                                range.setStart(caret.offsetNode, caret.offset);
+                            }
+                            const slate_rang = ReactEditor.toSlateRange(
+                                textRef.current.editor,
+                                range,
+                                {
+                                    exactMatch: true,
+                                    suppressThrow: true,
+                                }
+                            );
+                            textRef.current.setSelection(slate_rang);
+                        }
+                    } catch (e) {
+                        console.log('e: ', e);
+                        textRef.current.setSelection(end_selection);
+                    }
+                }
+            },
+            [textRef]
+        );
+
+        useOnSelectActive(block.id, on_text_view_active);
+        useOnSelectSetSelection<'Range'>(block.id, on_text_view_set_selection);
+
+        useEffect(() => {
+            if (textRef.current) {
+                editor.blockHelper.registerTextUtils(block.id, textRef.current);
+
+                return () => editor.blockHelper.unRegisterTextUtils(block.id);
+            }
+            return undefined;
+        }, [textRef, block, editor.blockHelper]);
+
+        // set active in initialization
+        useEffect(() => {
+            try {
+                const activatedNodeId =
+                    editor.selectionManager.getActivatedNodeId();
+                const {
+                    nodeId: lastSelectNodeId,
+                    type,
+                    info,
+                } = editor.selectionManager.getLastActiveSelectionSetting<'Range'>();
+                if (block.id === activatedNodeId) {
+                    if (
+                        (block.id === lastSelectNodeId && type === 'Range') ||
+                        (type === 'Range' && info)
+                    ) {
+                        on_text_view_active('end');
+                    } else {
+                        on_text_view_active('start');
+                    }
+                }
+            } catch (e) {
+                console.warn('error occured in set active in initialization');
+            }
+        }, [block.id, editor.selectionManager, on_text_view_active, textRef]);
+
+        const on_text_change: TextProps['handleChange'] = async (
+            value,
+            textStyle
+        ) => {
+            if (
+                !isEqual(value, properties.text.value) ||
+                //@ts-ignore
+                (properties.textStyle &&
+                    !isEqual(
+                        //@ts-ignore
+                        textStyle.textAlign,
+                        //@ts-ignore
+                        properties.textStyle.textAlign
+                    ))
+            ) {
+                await block.setProperties({
+                    text: { value } as ContentColumnValue,
+                    textStyle: textStyle as Record<'textAlign', string>,
+                });
+            }
+        };
+        const get_now_and_pre_rang_position = () => {
+            window.getSelection().getRangeAt(0);
+            // const now_range =
+            //     editor.selectionManager.currentSelectInfo?.browserSelection.getRangeAt(
+            //         0
+            //     );
+            const now_range = window.getSelection().getRangeAt(0);
+            let pre_position = null;
+            const now_position = now_range.getClientRects().item(0);
+            try {
+                if (now_range.startOffset !== 0) {
+                    const pre_rang = document.createRange();
+                    pre_rang.setStart(
+                        now_range.startContainer,
+                        now_range.startOffset + 1
+                    );
+                    pre_rang.setEnd(
+                        now_range.endContainer,
+                        now_range.endOffset + 1
+                    );
+                    pre_position = pre_rang.getClientRects().item(0);
+                }
+            } catch (e) {
+                // console.log(e);
+            }
+            return { nowPosition: now_position, prePosition: pre_position };
+        };
+
+        const onKeyboardUp = (event: React.KeyboardEvent<Element>) => {
+            // if default event is prevented do noting
+            // if U want to disable up/down/enter use capture event for preventing
+            if (!event.isDefaultPrevented()) {
+                const positions = get_now_and_pre_rang_position();
+                const prePosition = positions.prePosition;
+                const nowPosition = positions.nowPosition;
+                if (prePosition) {
+                    if (prePosition.top !== nowPosition.top) {
+                        return false;
+                    }
+                }
+                // Create the first element range of slate_editor
+                const startPoint = textRef.current.getStart();
+
+                const startSlateRange: Range = {
+                    anchor: startPoint,
+                    focus: startPoint,
+                };
+                const startPosition = ReactEditor.toDOMRange(
+                    textRef.current.editor,
+                    startSlateRange
+                )
+                    .getClientRects()
+                    .item(0);
+                if (nowPosition.top === startPosition.top) {
+                    editor.selectionManager.activePreviousNode(
+                        block.id,
+                        new Point(nowPosition.left, nowPosition.top - 20)
+                    );
+
+                    return true;
+                } else {
+                    return false;
+                }
+            }
+            return false;
+        };
+
+        const onKeyboardDown = (event: React.KeyboardEvent<Element>) => {
+            // if default event is prevented do noting
+            // if U want to disable up/down/enter use capture event for preventing
+            // editor.selectionManager.activeNextNode(block.id, 'start');
+            // return;
+            if (!event.isDefaultPrevented()) {
+                const positions = get_now_and_pre_rang_position();
+                const prePosition = positions.prePosition;
+                const nowPosition = positions.nowPosition;
+                // Create the last element range of slate_editor
+                const endPoint = textRef.current.getEnd();
+
+                const endSlateRange: Range = {
+                    anchor: endPoint,
+                    focus: endPoint,
+                };
+                const endPosition = ReactEditor.toDOMRange(
+                    textRef.current.editor,
+                    endSlateRange
+                )
+                    .getClientRects()
+                    .item(0);
+
+                if (nowPosition.bottom === endPosition.bottom) {
+                    // The specific amount of TODO needs to be determined after subsequent padding
+                    editor.selectionManager.activeNextNode(
+                        block.id,
+                        new Point(nowPosition.left, nowPosition.bottom + 20)
+                    );
+                    return true;
+                } else {
+                    if (prePosition?.bottom === endPosition.bottom) {
+                        editor.selectionManager.activeNextNode(
+                            block.id,
+                            new Point(
+                                prePosition.left,
+                                prePosition?.bottom + 20
+                            )
+                        );
+                        return true;
+                    } else {
+                        return false;
+                    }
+                }
+            }
+            return false;
+        };
+        const onKeyboardLeft = () => {
+            const isEndText = textRef.current.isStart();
+            if (isEndText) {
+                editor.selectionManager.activePreviousNode(block.id, 'end');
+                return true;
+            } else {
+                return false;
+            }
+        };
+        const onKeyboardRight = () => {
+            const isEndText = textRef.current.isEnd();
+            if (isEndText) {
+                editor.selectionManager.activeNextNode(block.id, 'start');
+                return true;
+            } else {
+                return false;
+            }
+        };
+        const on_select_all = () => {
+            const isSelectAll =
+                textRef.current.isEmpty() || textRef.current.isSelectAll();
+            if (isSelectAll) {
+                editor.selectionManager.selectAllBlocks();
+                return true;
+            }
+            return false;
+        };
+
+        const on_undo = () => {
+            editor.undo();
+        };
+
+        const on_redo = () => {
+            editor.redo();
+        };
+
+        const on_keyboard_esc = () => {
+            if (editor.selectionManager.getSelectedNodesIds().length === 0) {
+                const active_node_id =
+                    editor.selectionManager.getActivatedNodeId();
+                if (active_node_id) {
+                    editor.selectionManager.setSelectedNodesIds([
+                        active_node_id,
+                    ]);
+                    ReactEditor.blur(textRef.current.editor);
+                }
+            } else {
+                editor.selectionManager.setSelectedNodesIds([]);
+            }
+        };
+
+        const on_shift_click = async (e: MouseEvent) => {
+            if (e.shiftKey) {
+                const activeId = editor.selectionManager.getActivatedNodeId();
+                if (activeId === block.id) {
+                    return;
+                }
+                const currentId = block.id;
+                const parent = await block.parent();
+                if (!parent) {
+                    return;
+                }
+                const position = parent.findChildIndex(block.id);
+                if (position === -1) {
+                    return;
+                }
+                e.preventDefault();
+                const activeBlock = await editor.getBlockById(activeId);
+                const activeParent = await activeBlock.parent();
+                if (activeParent === parent) {
+                    const sibilings = findSlice(
+                        parent.childrenIds,
+                        currentId,
+                        activeId
+                    );
+                    editor.blockHelper.blur(activeId);
+                    editor.selectionManager.setSelectedNodesIds(sibilings);
+                } else {
+                    const ids = await findLowestCommonAncestor(
+                        editor,
+                        currentId,
+                        activeId
+                    );
+
+                    editor.blockHelper.blur(activeId);
+                    editor.selectionManager.setSelectedNodesIds(ids);
+                }
+            }
+        };
+        if (!properties || !properties.text) {
+            return <></>;
+        }
+
+        return (
+            <TextBlockContainer
+                ref={textRef}
+                supportMarkdown
+                className={`${otherOptions.className}`}
+                currentValue={properties.text.value}
+                textStyle={properties.textStyle}
+                handleChange={on_text_change}
+                handleUp={onKeyboardUp}
+                handleDown={onKeyboardDown}
+                handleLeft={onKeyboardLeft}
+                handleRight={onKeyboardRight}
+                handleSelectAll={on_select_all}
+                handleMouseDown={on_shift_click}
+                handleUndo={on_undo}
+                handleRedo={on_redo}
+                handleEsc={on_keyboard_esc}
+                {...otherOptions}
+            />
+        );
+    }
+);
+
+declare global {
+    interface Document {
+        /**
+         *
+         * The caretRangeFromPoint() method of the Document interface returns a Range object for the document fragment under the specified coordinates.
+         *
+         * Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
+         * @memberof Document
+         */
+        caretPositionFromPoint?: (
+            clientX: number,
+            clientY: number
+        ) => CaretPosition;
+    }
+
+    interface CaretPosition {
+        offsetNode: Node;
+        offset: number;
+    }
+}
diff --git a/libs/components/editor-blocks/src/components/text-manage/index.ts b/libs/components/editor-blocks/src/components/text-manage/index.ts
new file mode 100644
index 000000000..daa05b503
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/text-manage/index.ts
@@ -0,0 +1 @@
+export * from './TextManage';
diff --git a/libs/components/editor-blocks/src/components/upload/index.ts b/libs/components/editor-blocks/src/components/upload/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/libs/components/editor-blocks/src/components/upload/upload.tsx b/libs/components/editor-blocks/src/components/upload/upload.tsx
new file mode 100644
index 000000000..1158d97ff
--- /dev/null
+++ b/libs/components/editor-blocks/src/components/upload/upload.tsx
@@ -0,0 +1,257 @@
+import {
+    FC,
+    useRef,
+    ChangeEvent,
+    ReactElement,
+    useState,
+    SyntheticEvent,
+} from 'react';
+import DeleteSweepOutlinedIcon from '@mui/icons-material/DeleteSweepOutlined';
+import {
+    styled,
+    SxProps,
+    MuiTextField as TextField,
+    MuiButton as Button,
+    MuiClickAwayListener as ClickAwayListener,
+    MuiTabs as Tabs,
+    MuiTab as Tab,
+    MuiBox as Box,
+} from '@toeverything/components/ui';
+
+const MESSAGES = {
+    ADD_AN_FILE: 'Add an file',
+    SIZE_EXCEEDS_LIMIT: 'Size exceeds limit',
+};
+interface Props {
+    uploadType?: string;
+    title?: string;
+    view?: ReactElement;
+    size?: number;
+    accept?: string;
+    isSelected?: boolean;
+    defaultAddBtnText?: string;
+    firstCreate: boolean | undefined;
+    fileChange?: (file: File) => void;
+    deleteFile?: () => void;
+    savaLink?: (link: string) => void;
+}
+const styles: SxProps = {
+    position: 'absolute',
+    width: '600px',
+    zIndex: 99,
+    marginLeft: '50px',
+    p: 1,
+    bgcolor: 'background.paper',
+    borderRadius: '4px',
+    textAlign: 'center',
+    boxShadow:
+        'rgb(15 15 15 / 5%) 0px 0px 0px 1px, rgb(15 15 15 / 10%) 0px 3px 6px, rgb(15 15 15 / 20%) 0px 9px 24px',
+};
+const UploadBox = styled('div')<{ isSelected: boolean }>(
+    ({ theme, isSelected }) => {
+        return {
+            width: '100%',
+            background: '#f7f7f7',
+            padding: '15px 10px',
+            fontSize: theme.affine.typography.body1.fontSize,
+            borderRadius: '4px',
+            cursor: 'pointer',
+            border: isSelected
+                ? `1px solid ${theme.affine.palette.primary}`
+                : '1px solid #e0e0e0',
+            '.delete': {
+                display: 'none',
+                float: 'right',
+            },
+            '&:hover': {
+                background: '#eee',
+                '.delete': {
+                    display: 'inline-block',
+                },
+            },
+        };
+    }
+);
+
+const button_styles: SxProps = { width: '60%', fontSize: '12px' };
+export const Upload: FC<Props> = props => {
+    const {
+        fileChange,
+        size,
+        accept,
+        deleteFile,
+        uploadType,
+        defaultAddBtnText,
+        savaLink,
+        firstCreate,
+        isSelected,
+    } = props;
+    const input_ref = useRef<HTMLInputElement>(null);
+    const [upload_link, set_upload_link] = useState('');
+
+    const [open, setOpen] = useState<boolean>(firstCreate);
+    const type = ['file', 'image'].includes(uploadType) ? 'file' : 'link';
+    const [value, setValue] = useState(type);
+
+    const handleChange = (event: SyntheticEvent, newValue: string) => {
+        setValue(newValue);
+    };
+
+    const handleClick = () => {
+        setOpen(prev => !prev);
+    };
+
+    const handleClickAway = () => {
+        setOpen(false);
+    };
+    const choose_file = () => {
+        if (input_ref.current) {
+            input_ref.current.click();
+        }
+    };
+    const handle_input_change = (e: ChangeEvent<HTMLInputElement>) => {
+        const files = e.target.files;
+        if (!files) {
+            return;
+        }
+        const file = files[0];
+        if (size && size < file.size) {
+            console.log(MESSAGES.SIZE_EXCEEDS_LIMIT);
+        }
+        fileChange(file);
+        if (input_ref.current) {
+            input_ref.current.value = '';
+        }
+    };
+    const on_link_input_change = (e: any) => {
+        set_upload_link(e.target.value);
+    };
+    const handle_sava_link = () => {
+        savaLink(upload_link);
+    };
+    return (
+        <div>
+            <Box sx={{ position: 'relative' }}>
+                <UploadBox onClick={handleClick} isSelected={isSelected}>
+                    {defaultAddBtnText
+                        ? defaultAddBtnText
+                        : MESSAGES.ADD_AN_FILE}
+                    <span
+                        className="delete"
+                        onClick={e => {
+                            e.stopPropagation();
+                            deleteFile();
+                        }}
+                    >
+                        <DeleteSweepOutlinedIcon
+                            className="delete-icon"
+                            fontSize="small"
+                            sx={{
+                                color: 'rgba(0,0,0,.5)',
+                                cursor: 'pointer',
+                                '&:hover': { color: 'rgba(0,0,0,.9)' },
+                            }}
+                        />
+                    </span>
+                </UploadBox>
+                {open && (
+                    <ClickAwayListener onClickAway={handleClickAway}>
+                        <Box
+                            onClick={e => {
+                                e.stopPropagation();
+                            }}
+                            sx={styles}
+                        >
+                            <Tabs
+                                sx={{
+                                    borderBottom: '1px solid #ccc',
+                                    minHeight: '36px',
+                                }}
+                                value={value}
+                                onChange={handleChange}
+                            >
+                                {['file', 'image'].includes(uploadType) ? (
+                                    <Tab
+                                        sx={{
+                                            fontSize: '12px',
+                                            minHeight: '36px',
+                                        }}
+                                        value="file"
+                                        label="Upload"
+                                    />
+                                ) : (
+                                    ''
+                                )}
+                                {!['file', 'image'].includes(uploadType) ? (
+                                    <Tab
+                                        sx={{
+                                            fontSize: '12px',
+                                            minHeight: '36px',
+                                        }}
+                                        value="link"
+                                        label="Embed Link"
+                                    />
+                                ) : (
+                                    ''
+                                )}
+                            </Tabs>
+
+                            {value === 'file' ? (
+                                <Box sx={{ padding: '10px' }}>
+                                    <Button
+                                        variant="outlined"
+                                        sx={button_styles}
+                                        onClick={choose_file}
+                                        size="small"
+                                    >
+                                        {defaultAddBtnText
+                                            ? defaultAddBtnText
+                                            : MESSAGES.ADD_AN_FILE}
+                                    </Button>
+                                    <input
+                                        ref={input_ref}
+                                        type="file"
+                                        style={{ display: 'none' }}
+                                        onChange={handle_input_change}
+                                        accept={accept}
+                                    />
+                                </Box>
+                            ) : (
+                                <Box>
+                                    <Box
+                                        sx={{
+                                            '.MuiTextField-root': {
+                                                width: '100%',
+                                            },
+                                        }}
+                                    >
+                                        <TextField
+                                            value={upload_link}
+                                            hiddenLabel
+                                            margin={'dense'}
+                                            sx={{
+                                                fontSize: '12px',
+                                                padding: 0,
+                                            }}
+                                            onChange={on_link_input_change}
+                                            variant="outlined"
+                                            size="small"
+                                        />
+                                    </Box>
+                                    <Button
+                                        variant="outlined"
+                                        sx={button_styles}
+                                        onClick={handle_sava_link}
+                                        size="small"
+                                    >
+                                        embed link
+                                    </Button>
+                                </Box>
+                            )}
+                        </Box>
+                    </ClickAwayListener>
+                )}
+            </Box>
+        </div>
+    );
+};
diff --git a/libs/components/editor-blocks/src/index.ts b/libs/components/editor-blocks/src/index.ts
new file mode 100644
index 000000000..bacbe3e3c
--- /dev/null
+++ b/libs/components/editor-blocks/src/index.ts
@@ -0,0 +1,26 @@
+export { GroupDividerBlock } from './blocks/groupDvider';
+
+export { PageBlock } from './blocks/page';
+export { RefLinkBlock } from './blocks/ref-link';
+export {
+    TextBlock,
+    Heading1Block,
+    Heading2Block,
+    Heading3Block,
+    QuoteBlock,
+    CalloutBlock,
+} from './blocks/text';
+export { TodoBlock } from './blocks/todo';
+export { CodeBlock } from './blocks/code';
+export { TocBlock } from './blocks/toc';
+export { FileBlock } from './blocks/file';
+export { ImageBlock } from './blocks/image';
+export { DividerBlock } from './blocks/divider';
+export { YoutubeBlock } from './blocks/youtube';
+export { FigmaBlock } from './blocks/figma';
+export { Group as GroupBlock } from './blocks/group';
+export { EmbedLinkBlock } from './blocks/embed-link';
+export { NumberedBlock } from './blocks/numbered';
+export { BulletBlock } from './blocks/bullet';
+export { GridBlock } from './blocks/grid';
+export { GridItemBlock } from './blocks/grid-item';
diff --git a/libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx b/libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx
new file mode 100644
index 000000000..5bba77216
--- /dev/null
+++ b/libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx
@@ -0,0 +1,267 @@
+import {
+    RenderBlock,
+    useOnSelect,
+    useRecastBlockScene,
+    WrapperWithPendantAndDragDrop,
+} from '@toeverything/components/editor-core';
+import { CreateView } from '@toeverything/framework/virgo';
+import type {
+    ComponentPropsWithoutRef,
+    ComponentPropsWithRef,
+    CSSProperties,
+    ReactElement,
+} from 'react';
+import { forwardRef, useState } from 'react';
+import style9 from 'style9';
+
+import { BlockContainer } from '../components/BlockContainer';
+import { styled } from '@toeverything/components/ui';
+import { SCENE_CONFIG } from '../blocks/group/config';
+
+type WithChildrenConfig = {
+    indent: CSSProperties['marginLeft'];
+};
+
+const defaultConfig: WithChildrenConfig = {
+    indent: '30px',
+};
+
+const TreeView = forwardRef<
+    HTMLDivElement,
+    { lastItem?: boolean } & ComponentPropsWithRef<'div'>
+>(({ lastItem, children, onClick, ...restProps }, ref) => {
+    return (
+        <div ref={ref} className={treeStyles('treeWrapper')} {...restProps}>
+            <div className={treeStyles('treeView')}>
+                <div
+                    className={treeStyles({
+                        line: true,
+                        verticalLine: true,
+                        lastItemVerticalLine: lastItem,
+                    })}
+                    onClick={onClick}
+                />
+                <div
+                    className={treeStyles({
+                        line: true,
+                        horizontalLine: true,
+                        lastItemHorizontalLine: lastItem,
+                    })}
+                    onClick={onClick}
+                />
+                {lastItem && <div className={treeStyles('lastItemRadius')} />}
+            </div>
+            {/* maybe need a child wrapper */}
+            {children}
+        </div>
+    );
+});
+
+interface ChildrenViewProp {
+    childrenIds: string[];
+    handleCollapse: () => void;
+    indent?: string | number;
+}
+
+const ChildrenView = ({
+    childrenIds,
+    handleCollapse,
+    indent,
+}: ChildrenViewProp) => {
+    const { scene } = useRecastBlockScene();
+    const isKanbanScene = scene === SCENE_CONFIG.KANBAN;
+
+    return (
+        <div
+            className={styles('children')}
+            style={{ ...(!isKanbanScene && { marginLeft: indent }) }}
+        >
+            {childrenIds.map((childId, idx) => {
+                if (isKanbanScene) {
+                    return (
+                        <StyledBorder>
+                            <RenderBlock key={childId} blockId={childId} />
+                        </StyledBorder>
+                    );
+                }
+
+                return (
+                    <TreeView
+                        key={childId}
+                        lastItem={idx === childrenIds.length - 1}
+                        onClick={handleCollapse}
+                    >
+                        <RenderBlock key={childId} blockId={childId} />
+                    </TreeView>
+                );
+            })}
+        </div>
+    );
+};
+
+const CollapsedNode = forwardRef<
+    HTMLDivElement,
+    ComponentPropsWithoutRef<'div'>
+>((props, ref) => {
+    return (
+        <TreeView ref={ref} lastItem={true} {...props}>
+            <div className={treeStyles('collapsed')} onClick={props.onClick}>
+                ···
+            </div>
+        </TreeView>
+    );
+});
+
+/**
+ * Indent rendering child nodes
+ */
+export const withTreeViewChildren = (
+    creator: (props: CreateView) => ReactElement,
+    customConfig: Partial<WithChildrenConfig> = {}
+) => {
+    const config = {
+        ...defaultConfig,
+        ...customConfig,
+    };
+
+    return (props: CreateView) => {
+        const { block, editor } = props;
+        const collapsed = block.getProperty('collapsed')?.value;
+        const childrenIds = block.childrenIds;
+        const showChildren = !collapsed && childrenIds.length > 0;
+
+        const [isSelect, setIsSelect] = useState<boolean>();
+        useOnSelect(block.id, (is_select: boolean) => {
+            setIsSelect(is_select);
+        });
+        const handleCollapse = () => {
+            block.setProperty('collapsed', { value: true });
+        };
+
+        const handleExpand = () => {
+            block.setProperty('collapsed', { value: false });
+        };
+
+        return (
+            <BlockContainer
+                editor={props.editor}
+                block={block}
+                selected={isSelect}
+                className={styles('wrapper')}
+            >
+                <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+                    <div className={styles('node')}>{creator(props)}</div>
+                </WrapperWithPendantAndDragDrop>
+
+                {collapsed && (
+                    <CollapsedNode
+                        onClick={handleExpand}
+                        style={{ marginLeft: config.indent }}
+                    />
+                )}
+                {showChildren && (
+                    <ChildrenView
+                        childrenIds={childrenIds}
+                        handleCollapse={handleCollapse}
+                        indent={config.indent}
+                    />
+                )}
+            </BlockContainer>
+        );
+    };
+};
+
+const styles = style9.create({
+    wrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    node: {},
+
+    children: {
+        display: 'flex',
+        flexDirection: 'column',
+    },
+});
+
+const treeColor = '#D5DFE6';
+// TODO determine the position of the horizontal line by the type of the item
+const itemPointHeight = '12.5px'; // '50%'
+
+const treeStyles = style9.create({
+    treeWrapper: {
+        position: 'relative',
+    },
+
+    treeView: {
+        position: 'absolute',
+        left: '-21px',
+        height: '100%',
+    },
+    line: {
+        position: 'absolute',
+        cursor: 'pointer',
+        backgroundColor: treeColor,
+        boxSizing: 'content-box',
+        // See [Can I add background color only for padding?](https://stackoverflow.com/questions/14628601/can-i-add-background-color-only-for-padding)
+        backgroundClip: 'content-box',
+        backgroundOrigin: 'content-box',
+        // Increase click hot spot
+        padding: '10px',
+    },
+    verticalLine: {
+        width: '1px',
+        height: '100%',
+        paddingTop: 0,
+        paddingBottom: 0,
+        transform: 'translate(-50%, 0)',
+    },
+    horizontalLine: {
+        width: '16px',
+        height: '1px',
+        paddingLeft: 0,
+        paddingRight: 0,
+        top: itemPointHeight,
+        transform: 'translate(0, -50%)',
+    },
+    noItemHorizontalLine: {
+        display: 'none',
+    },
+
+    lastItemHorizontalLine: {
+        opacity: 0,
+    },
+    lastItemVerticalLine: {
+        height: itemPointHeight,
+        opacity: 0,
+    },
+    lastItemRadius: {
+        boxSizing: 'content-box',
+        position: 'absolute',
+        left: '-0.5px',
+        top: 0,
+        height: itemPointHeight,
+        bottom: '50%',
+        width: '16px',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderLeftColor: treeColor,
+        borderBottomColor: treeColor,
+        borderTop: 'none',
+        borderRight: 'none',
+        borderRadius: '0 0 0 3px',
+        pointerEvents: 'none',
+    },
+
+    collapsed: {
+        cursor: 'pointer',
+        display: 'inline-block',
+        color: '#B9CAD5',
+    },
+});
+
+const StyledBorder = styled('div')({
+    border: '1px solid #E0E6EB',
+    borderRadius: '5px',
+    margin: '4px',
+});
diff --git a/libs/components/editor-blocks/src/utils/indent.ts b/libs/components/editor-blocks/src/utils/indent.ts
new file mode 100644
index 000000000..a68dd5b2d
--- /dev/null
+++ b/libs/components/editor-blocks/src/utils/indent.ts
@@ -0,0 +1,188 @@
+import { supportChildren } from '@toeverything/components/editor-core';
+import { Protocol } from '@toeverything/datasource/db-service';
+import { AsyncBlock } from '@toeverything/framework/virgo';
+import type { TodoAsyncBlock } from '../blocks/todo/types';
+
+/**
+ * Is the block in top level
+ */
+export const isTopLevelBlock = (parentBlock: AsyncBlock): boolean => {
+    return (
+        parentBlock.type === Protocol.Block.Type.group ||
+        parentBlock.type === Protocol.Block.Type.page
+    );
+};
+
+/**
+ * @returns true if indent is success
+ * @example
+ * ```
+ * [ ]
+ *  └─ [ ]
+ * [x]     <- tab
+ *  └─ [ ]
+ *
+ * ↓
+ *
+ * [ ]
+ *  ├─ [ ]
+ *  ├─ [x] <-
+ *  └─ [ ]
+ * ```
+ */
+const indentBlock = async (block: TodoAsyncBlock) => {
+    // Move down
+    const previousBlock = await block.previousSibling();
+
+    if (!previousBlock || !supportChildren(previousBlock)) {
+        // Bottom, can not indent, do nothing
+        return false;
+    }
+
+    // Indent current node, but preserve child node hierarchy
+    const previousTodo = previousBlock as TodoAsyncBlock;
+    await previousTodo.setProperties({
+        collapsed: { value: false },
+    });
+
+    // 1. save target block children
+    const children = await block.children();
+
+    // 2. remove current block and children
+    await block.remove();
+    await block.removeChildren();
+    // 3. append target block and children to previous node
+    await previousTodo.append(block, ...children);
+    return true;
+};
+
+/**
+ * @returns true if dedent is success
+ * @example
+ * ```
+ * [ ]
+ *  ├─ [ ]
+ *  ├─ [x] <- shift + tab
+ *  └─ [ ]
+ *
+ * ↓
+ *
+ * [ ]
+ *  └─ [ ]
+ * [x]     <-
+ *  └─ [ ]
+ * ```
+ */
+const dedentBlock = async (block: AsyncBlock) => {
+    // Move up
+    let parentBlock = await block.parent();
+    if (!parentBlock) {
+        throw new Error('Failed to dedent block! Parent block not found!');
+    }
+    if (isTopLevelBlock(parentBlock)) {
+        // Top, do nothing
+        return false;
+    }
+    // 1. save child blocks of the parent block
+    const previousSiblings = await block.previousSiblings();
+    const nextSiblings = await block.nextSiblings();
+    // const children = await parentBlock.children();
+    // 2. remove all child blocks after the target block from the parent block
+    await parentBlock.removeChildren();
+    // TODO fix block sync with db-service
+    // Need update block from service now
+    parentBlock = await block.parent();
+    if (!parentBlock) {
+        throw new Error('Failed to dedent block! Parent block not found!');
+    }
+    await parentBlock.append(...previousSiblings);
+
+    parentBlock = await block.parent();
+    if (!parentBlock) {
+        throw new Error('Failed to dedent block! Parent block not found!');
+    }
+
+    // 3. remove current block
+    await block.remove();
+    // 4. append parent children to target block
+    await block.append(...nextSiblings);
+    // 5. append block to parent
+    await parentBlock.after(block);
+    return true;
+};
+
+export const tabBlock = async (block: AsyncBlock, isShiftKey: boolean) => {
+    if (isShiftKey) {
+        return await dedentBlock(block);
+    } else {
+        return await indentBlock(block);
+    }
+};
+
+const type2Map: Record<number, string> = {};
+const type3Map: Record<number, string> = {};
+export function getNumber(type: string, index: number) {
+    if (type === 'type2') {
+        if (type2Map[index]) {
+            return type2Map[index];
+        }
+        type2Map[index] = getType2(index - 1);
+
+        return type2Map[index];
+    }
+    if (type === 'type3') {
+        if (type3Map[index]) {
+            return type3Map[index];
+        }
+        type3Map[index] = getType3(index);
+
+        return type3Map[index];
+    }
+    return index;
+}
+
+const getType2 = (n: number) => {
+    const ordA = 'a'.charCodeAt(0);
+    const ordZ = 'z'.charCodeAt(0);
+    const len = ordZ - ordA + 1;
+    let s = '';
+    while (n >= 0) {
+        s = String.fromCharCode((n % len) + ordA) + s;
+        n = Math.floor(n / len) - 1;
+    }
+    return s;
+};
+const getType3 = (num: number) => {
+    const lookup = {
+        m: 1000,
+        cm: 900,
+        d: 500,
+        cd: 400,
+        c: 100,
+        xc: 90,
+        l: 50,
+        xl: 40,
+        x: 10,
+        ix: 9,
+        v: 5,
+        iv: 4,
+        i: 1,
+    };
+    let romanStr = '';
+    for (const i in lookup) {
+        while (num >= lookup[i as keyof typeof lookup]) {
+            romanStr += i;
+            num -= lookup[i as keyof typeof lookup];
+        }
+    }
+    return romanStr;
+};
+
+export function getChildrenType(type: string) {
+    const typeMap: Record<string, string> = {
+        type1: 'type2',
+        type2: 'type3',
+        type3: 'type1',
+    };
+    return typeMap[type];
+}
diff --git a/libs/components/editor-blocks/tsconfig.json b/libs/components/editor-blocks/tsconfig.json
new file mode 100644
index 000000000..dce3dae9a
--- /dev/null
+++ b/libs/components/editor-blocks/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/components/editor-blocks/tsconfig.lib.json b/libs/components/editor-blocks/tsconfig.lib.json
new file mode 100644
index 000000000..0dda33329
--- /dev/null
+++ b/libs/components/editor-blocks/tsconfig.lib.json
@@ -0,0 +1,22 @@
+{
+    "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": [
+        "**/*.spec.ts",
+        "**/*.test.ts",
+        "**/*.spec.tsx",
+        "**/*.test.tsx",
+        "**/*.spec.js",
+        "**/*.test.js",
+        "**/*.spec.jsx",
+        "**/*.test.jsx"
+    ],
+    "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/libs/components/editor-blocks/tsconfig.spec.json b/libs/components/editor-blocks/tsconfig.spec.json
new file mode 100644
index 000000000..ee70363dc
--- /dev/null
+++ b/libs/components/editor-blocks/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "module": "commonjs",
+        "types": ["jest", "node"]
+    },
+    "include": [
+        "**/*.test.ts",
+        "**/*.spec.ts",
+        "**/*.test.tsx",
+        "**/*.spec.tsx",
+        "**/*.test.js",
+        "**/*.spec.js",
+        "**/*.test.jsx",
+        "**/*.spec.jsx",
+        "**/*.d.ts"
+    ]
+}
diff --git a/libs/components/editor-core/.babelrc b/libs/components/editor-core/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/components/editor-core/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/components/editor-core/.eslintrc.json b/libs/components/editor-core/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/components/editor-core/.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": {}
+        }
+    ]
+}
diff --git a/libs/components/editor-core/README.md b/libs/components/editor-core/README.md
new file mode 100644
index 000000000..8b8c1c635
--- /dev/null
+++ b/libs/components/editor-core/README.md
@@ -0,0 +1,7 @@
+# components-editor-core
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test components-editor-core` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/components/editor-core/jest.config.js b/libs/components/editor-core/jest.config.js
new file mode 100644
index 000000000..5c62cec99
--- /dev/null
+++ b/libs/components/editor-core/jest.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+    displayName: 'components-editor-core',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/components/editor-core',
+};
diff --git a/libs/components/editor-core/package.json b/libs/components/editor-core/package.json
new file mode 100644
index 000000000..24078afb1
--- /dev/null
+++ b/libs/components/editor-core/package.json
@@ -0,0 +1,15 @@
+{
+    "name": "@toeverything/components/editor-core",
+    "version": "0.0.1",
+    "license": "MIT",
+    "dependencies": {
+        "@mui/icons-material": "^5.8.4",
+        "date-fns": "^2.28.0",
+        "eventemitter3": "^4.0.7",
+        "hotkeys-js": "^3.9.4",
+        "lru-cache": "^7.10.1",
+        "nanoid": "^4.0.0",
+        "slate": "^0.81.0",
+        "style9": "^0.13.3"
+    }
+}
diff --git a/libs/components/editor-core/project.json b/libs/components/editor-core/project.json
new file mode 100644
index 000000000..0b52c39eb
--- /dev/null
+++ b/libs/components/editor-core/project.json
@@ -0,0 +1,47 @@
+{
+    "sourceRoot": "libs/components/editor-core/src",
+    "projectType": "library",
+    "tags": ["components:editor-core"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/components/editor-core",
+                "tsConfig": "libs/components/editor-core/tsconfig.lib.json",
+                "project": "libs/components/editor-core/package.json",
+                "entryFile": "libs/components/editor-core/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "libs/rollup.config.cjs",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/components/editor-core/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/components/editor-core/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "check": {
+            "executor": "./tools/executors/tsCheck:tsCheck"
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/components/editor-core"],
+            "options": {
+                "jestConfig": "libs/components/editor-core/jest.config.js",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/components/editor-core/src/RenderRoot.tsx b/libs/components/editor-core/src/RenderRoot.tsx
new file mode 100644
index 000000000..2afd3f039
--- /dev/null
+++ b/libs/components/editor-core/src/RenderRoot.tsx
@@ -0,0 +1,295 @@
+import type { BlockEditor } from './editor';
+import { Point } from '@toeverything/utils';
+import { styled, usePatchNodes } from '@toeverything/components/ui';
+import type { FC, PropsWithChildren } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { RootContext } from './contexts';
+import { SelectionRect, SelectionRef } from './selection';
+import {
+    Protocol,
+    services,
+    type ReturnUnobserve,
+} from '@toeverything/datasource/db-service';
+import { addNewGroup } from './recast-block';
+
+interface RenderRootProps {
+    editor: BlockEditor;
+    editorElement: () => JSX.Element;
+    /**
+     * Scroll to the bottom of the article visually leave blank
+     */
+    scrollBlank?: boolean;
+}
+
+const MAX_PAGE_WIDTH = 5000;
+export const MIN_PAGE_WIDTH = 1480;
+
+export const RenderRoot: FC<PropsWithChildren<RenderRootProps>> = ({
+    editor,
+    editorElement,
+    children,
+}) => {
+    const contentRef = useRef<HTMLDivElement>(null);
+    const selectionRef = useRef<SelectionRef>(null);
+    const triggeredBySelect = useRef(false);
+    const [container, setContainer] = useState<HTMLDivElement>();
+    const [pageWidth, setPageWidth] = useState<number>(MIN_PAGE_WIDTH);
+
+    const { patch, has, patchedNodes } = usePatchNodes();
+
+    editor.setReactRenderRoot({ patch, has });
+    const rootId = editor.getRootBlockId();
+    const fetchPageBlockWidth = useCallback(async () => {
+        const dbPageBlock = await services.api.editorBlock.getBlock(
+            editor.workspace,
+            rootId
+        );
+        if (!dbPageBlock) return;
+        if (dbPageBlock.getDecoration('fullWidthChecked')) {
+            setPageWidth(MAX_PAGE_WIDTH);
+        } else {
+            setPageWidth(MIN_PAGE_WIDTH);
+        }
+    }, [editor.workspace, rootId]);
+
+    useEffect(() => {
+        if (container) {
+            editor.container = container;
+            editor.getHooks().render();
+        }
+    }, [editor, container]);
+
+    useEffect(() => {
+        fetchPageBlockWidth();
+
+        let unobserve: ReturnUnobserve | undefined = undefined;
+        const observe = async () => {
+            unobserve = await services.api.editorBlock.observe(
+                {
+                    workspace: editor.workspace,
+                    id: rootId,
+                },
+                fetchPageBlockWidth
+            );
+        };
+        observe();
+        return () => {
+            unobserve?.();
+        };
+    }, [rootId, editor, fetchPageBlockWidth]);
+
+    const onMouseMove = async (
+        event: React.MouseEvent<HTMLDivElement, MouseEvent>
+    ) => {
+        selectionRef.current?.onMouseMove(event);
+        if (!contentRef.current) {
+            return;
+        }
+        const rootRect: DOMRect = contentRef.current.getBoundingClientRect();
+        editor.getHooks().onRootNodeMouseMove(event, rootRect);
+
+        const slidingBlock = await editor.getBlockByPoint(
+            new Point(event.clientX, event.clientY)
+        );
+
+        if (slidingBlock && slidingBlock.dom) {
+            editor.getHooks().afterOnNodeMouseMove(event, {
+                blockId: slidingBlock.id,
+                dom: slidingBlock.dom,
+                rect: slidingBlock.dom.getBoundingClientRect(),
+                rootRect: rootRect,
+                type: slidingBlock.type,
+                properties: slidingBlock.getProperties(),
+            });
+        }
+    };
+
+    const onMouseDown = (
+        event: React.MouseEvent<HTMLDivElement, MouseEvent>
+    ) => {
+        triggeredBySelect.current = true;
+        selectionRef.current?.onMouseDown(event);
+        editor.getHooks().onRootNodeMouseDown(event);
+    };
+
+    const onMouseUp = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        selectionRef.current?.onMouseUp(event);
+        editor.getHooks().onRootNodeMouseUp(event);
+    };
+
+    const onMouseOut = (
+        event: React.MouseEvent<HTMLDivElement, MouseEvent>
+    ) => {
+        editor.getHooks().onRootNodeMouseOut(event);
+    };
+
+    const onMouseLeave = (
+        event: React.MouseEvent<HTMLDivElement, MouseEvent>
+    ) => {
+        editor.getHooks().onRootNodeMouseLeave(event);
+    };
+
+    const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = event => {
+        // IMP move into keyboard managers?
+        editor.getHooks().onRootNodeKeyDown(event);
+    };
+
+    const onKeyUp: React.KeyboardEventHandler<HTMLDivElement> = event => {
+        // IMP move into keyboard managers?
+        editor.getHooks().onRootNodeKeyUp(event);
+    };
+
+    const onKeyDownCapture: React.KeyboardEventHandler<
+        HTMLDivElement
+    > = event => {
+        editor.getHooks().onRootNodeKeyDownCapture(event);
+    };
+
+    const onDragOver = (event: React.DragEvent<Element>) => {
+        if (!contentRef.current) {
+            return;
+        }
+        const rootRect: DOMRect = contentRef.current.getBoundingClientRect();
+        editor.dragDropManager.handlerEditorDragOver(event);
+        if (editor.dragDropManager.isEnabled()) {
+            editor.getHooks().onRootNodeDragOver(event, rootRect);
+        }
+        event.preventDefault();
+    };
+
+    const onDragOverCapture = (event: React.DragEvent<Element>) => {
+        if (!contentRef.current) {
+            return;
+        }
+        const rootRect: DOMRect = contentRef.current.getBoundingClientRect();
+        if (editor.dragDropManager.isEnabled()) {
+            editor.getHooks().onRootNodeDragOver(event, rootRect);
+        }
+    };
+
+    const onDragEnd = (event: React.DragEvent<Element>) => {
+        const rootRect: DOMRect = contentRef.current.getBoundingClientRect();
+        editor.dragDropManager.handlerEditorDragEnd(event);
+        editor.getHooks().onRootNodeDragEnd(event, rootRect);
+    };
+
+    const onDrop = (event: React.DragEvent<Element>) => {
+        editor.dragDropManager.handlerEditorDrop(event);
+        editor.getHooks().onRootNodeDrop(event);
+    };
+
+    return (
+        <RootContext.Provider value={{ editor, editorElement }}>
+            <Container
+                isWhiteboard={editor.isWhiteboard}
+                ref={ref => {
+                    ref && setContainer(ref);
+                }}
+                onMouseMove={onMouseMove}
+                onMouseDown={onMouseDown}
+                onMouseUp={onMouseUp}
+                onMouseLeave={onMouseLeave}
+                onMouseOut={onMouseOut}
+                onKeyDown={onKeyDown}
+                onKeyDownCapture={onKeyDownCapture}
+                onKeyUp={onKeyUp}
+                onDragOver={onDragOver}
+                onDragOverCapture={onDragOverCapture}
+                onDragEnd={onDragEnd}
+                onDrop={onDrop}
+            >
+                <Content
+                    ref={contentRef}
+                    style={{ maxWidth: pageWidth + 'px' }}
+                >
+                    {children}
+                    {patchedNodes}
+                </Content>
+                {editor.isWhiteboard ? null : <ScrollBlank editor={editor} />}
+                {/** TODO: remove selectionManager insert */}
+                {container && editor && (
+                    <SelectionRect
+                        ref={selectionRef}
+                        container={container}
+                        editor={editor}
+                    />
+                )}
+            </Container>
+        </RootContext.Provider>
+    );
+};
+
+function ScrollBlank({ editor }: { editor: BlockEditor }) {
+    const mouseMoved = useRef(false);
+
+    const onMouseDown = useCallback(() => (mouseMoved.current = false), []);
+    const onMouseMove = useCallback(() => (mouseMoved.current = true), []);
+    const onClick = useCallback(
+        async (e: React.MouseEvent) => {
+            if (mouseMoved.current) {
+                mouseMoved.current = false;
+                return;
+            }
+            const lastBlock = await editor.getRootLastChildrenBlock();
+
+            const lastGroupBlock = await editor.getRootLastChildrenBlock();
+            // If last block is not a group
+            // create a group with a empty text
+            if (lastGroupBlock.type !== 'group') {
+                addNewGroup(editor, lastBlock, true);
+                return;
+            }
+
+            if (lastGroupBlock.childrenIds.length > 1) {
+                addNewGroup(editor, lastBlock, true);
+                return;
+            }
+
+            // If the **only** block in the group is text and is empty
+            // active the text block
+            const theGroupChildBlock = await lastGroupBlock.firstChild();
+
+            if (
+                theGroupChildBlock &&
+                theGroupChildBlock.type === Protocol.Block.Type.text &&
+                theGroupChildBlock.blockProvider?.isEmpty()
+            ) {
+                await editor.selectionManager.activeNodeByNodeId(
+                    theGroupChildBlock.id
+                );
+                return;
+            }
+            // else create a new group
+            addNewGroup(editor, lastBlock, true);
+        },
+        [editor]
+    );
+
+    return (
+        <ScrollBlankContainter
+            onMouseDown={onMouseDown}
+            onMouseMove={onMouseMove}
+            onClick={onClick}
+        />
+    );
+}
+
+const Container = styled('div')(
+    ({ isWhiteboard }: { isWhiteboard: boolean }) => ({
+        width: '100%',
+        height: '100%',
+        overflowY: isWhiteboard ? 'unset' : 'auto',
+        padding: isWhiteboard ? 0 : '96px 150px 0 150px',
+        minWidth: isWhiteboard ? 'unset' : '940px',
+    })
+);
+
+const Content = styled('div')({
+    width: '100%',
+    margin: '0 auto',
+    transitionDuration: '.2s',
+    transitionTimingFunction: 'ease-in',
+    position: 'relative',
+});
+
+const ScrollBlankContainter = styled('div')({ paddingBottom: '30vh' });
diff --git a/libs/components/editor-core/src/block-content-wrapper/BlockContentWrapper.tsx b/libs/components/editor-core/src/block-content-wrapper/BlockContentWrapper.tsx
new file mode 100644
index 000000000..792b1a845
--- /dev/null
+++ b/libs/components/editor-core/src/block-content-wrapper/BlockContentWrapper.tsx
@@ -0,0 +1,21 @@
+import { AsyncBlock, BlockEditor } from '../editor';
+import type { FC, ReactElement } from 'react';
+import { BlockPendantProvider } from '../block-pendant';
+import { DragDropWrapper } from '../drag-drop-wrapper';
+
+type BlockContentWrapperProps = {
+    block: AsyncBlock;
+    editor: BlockEditor;
+    children: ReactElement | null;
+};
+
+export const WrapperWithPendantAndDragDrop: FC<BlockContentWrapperProps> =
+    function ({ block, children, editor }) {
+        return (
+            <DragDropWrapper block={block} editor={editor}>
+                <BlockPendantProvider block={block}>
+                    {children}
+                </BlockPendantProvider>
+            </DragDropWrapper>
+        );
+    };
diff --git a/libs/components/editor-core/src/block-content-wrapper/index.ts b/libs/components/editor-core/src/block-content-wrapper/index.ts
new file mode 100644
index 000000000..80c770d49
--- /dev/null
+++ b/libs/components/editor-core/src/block-content-wrapper/index.ts
@@ -0,0 +1 @@
+export * from './BlockContentWrapper';
diff --git a/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx b/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx
new file mode 100644
index 000000000..bbb61be63
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx
@@ -0,0 +1,46 @@
+import React, { CSSProperties, useRef } from 'react';
+import { Add } from '@mui/icons-material';
+import {
+    Popover,
+    type PopoverProps,
+    PopperHandler,
+} from '@toeverything/components/ui';
+import { CreatePendantPanel } from './pendant-operation-panel';
+import { IconButton } from './StyledComponent';
+import { AsyncBlock } from '../editor';
+
+type Props = {
+    block: AsyncBlock;
+    onSure?: () => void;
+    iconStyle?: CSSProperties;
+} & Omit<PopoverProps, 'content'>;
+export const AddPendantPopover = ({
+    block,
+    onSure,
+    iconStyle,
+    ...popoverProps
+}: Props) => {
+    const popoverHandlerRef = useRef<PopperHandler>();
+    return (
+        <Popover
+            ref={popoverHandlerRef}
+            content={
+                <CreatePendantPanel
+                    block={block}
+                    onSure={() => {
+                        popoverHandlerRef.current?.setVisible(false);
+                        onSure?.();
+                    }}
+                />
+            }
+            placement="bottom-start"
+            // visible={true}
+            style={{ padding: 0 }}
+            {...popoverProps}
+        >
+            <IconButton style={{ marginRight: 12, ...iconStyle }}>
+                <Add sx={{ fontSize: 14 }} />
+            </IconButton>
+        </Popover>
+    );
+};
diff --git a/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx b/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx
new file mode 100644
index 000000000..bda4e2d2b
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx
@@ -0,0 +1,61 @@
+import type { FC, PropsWithChildren } from 'react';
+import React, { useState, useRef } from 'react';
+import { styled, Popover } from '@toeverything/components/ui';
+import type { AsyncBlock } from '../editor';
+import { PendantPopover } from './pendant-popover';
+import { PendantRender } from './pendant-render';
+/**
+ * @deprecated
+ */
+interface BlockTagProps {
+    block: AsyncBlock;
+}
+
+/**
+ * @deprecated Need to be refactored
+ */
+export const BlockPendantProvider: FC<PropsWithChildren<BlockTagProps>> = ({
+    block,
+    children,
+}) => {
+    const [container, setContainer] = useState<HTMLElement>(null);
+    return (
+        <Container ref={(dom: HTMLElement) => setContainer(dom)}>
+            {children}
+            {container && (
+                <PendantPopover block={block} container={container}>
+                    <TriggerLine className="triggerLine" />
+                </PendantPopover>
+            )}
+            <PendantRender block={block} />
+        </Container>
+    );
+};
+
+const Container = styled('div')({
+    position: 'relative',
+    padding: '4px',
+    '&:hover .triggerLine::after': {
+        display: 'flex',
+    },
+});
+
+const TriggerLine = styled('div')`
+    padding: 4px 0;
+    width: 100px;
+    cursor: default;
+    display: flex;
+    align-items: flex-end;
+    position: relative;
+    //background: red;
+    ::after {
+        content: '';
+        width: 100%;
+        height: 2px;
+        background: #d9d9d9;
+        display: none;
+        position: absolute;
+        left: 0;
+        top: 4px;
+    }
+`;
diff --git a/libs/components/editor-core/src/block-pendant/PendantTag.tsx b/libs/components/editor-core/src/block-pendant/PendantTag.tsx
new file mode 100644
index 000000000..009ed5274
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/PendantTag.tsx
@@ -0,0 +1,317 @@
+import React from 'react';
+import { Tag, type TagProps } from '@toeverything/components/ui';
+import {
+    DateValue,
+    InformationProperty,
+    InformationValue,
+    MentionValue,
+    MultiSelectProperty,
+    MultiSelectValue,
+    RecastBlockValue,
+    RecastMetaProperty,
+    SelectOption,
+    SelectProperty,
+    SelectValue,
+    StatusProperty,
+    StatusValue,
+    TextValue,
+} from '../recast-block';
+import { IconNames, PendantTypes } from './types';
+import format from 'date-fns/format';
+import { IconMap, pendantColors } from './config';
+
+type PendantTagProps = {
+    value: RecastBlockValue;
+    property: RecastMetaProperty;
+} & TagProps;
+
+const MultiSelectRender = ({
+    options,
+    tagProps,
+}: {
+    options: SelectOption[];
+    tagProps: TagProps;
+}) => {
+    const { style, ...otherProps } = tagProps;
+    return (
+        <>
+            {options.map((option: SelectOption) => {
+                const Icon = IconMap[option.iconName as IconNames];
+                return (
+                    <Tag
+                        key={option.id}
+                        {...otherProps}
+                        style={{
+                            background: style?.background || option.background,
+                            color: style?.color || option.color,
+                            ...style,
+                        }}
+                        startElement={
+                            Icon && (
+                                <Icon
+                                    style={{
+                                        fontSize: 12,
+                                        color: style?.color || option.color,
+                                        marginRight: '4px',
+                                    }}
+                                />
+                            )
+                        }
+                    >
+                        {option.name}
+                    </Tag>
+                );
+            })}
+        </>
+    );
+};
+
+export const PendantTag = (props: PendantTagProps) => {
+    const { value, property, ...tagProps } = props;
+    const {
+        background: customBackground,
+        color: customColor,
+        iconName,
+    } = property;
+    const { style: styleTagStyle, ...otherTagProps } = tagProps;
+    const type = value.type;
+    const { background: defaultBackground, color: defaultColor } =
+        pendantColors[type];
+
+    const background = customBackground || defaultBackground;
+    const color = customColor || defaultColor;
+    const Icon = IconMap[iconName as IconNames];
+    if (value.type === PendantTypes.Text) {
+        const { value: textValue } = value as TextValue;
+        return (
+            <Tag
+                style={{
+                    background,
+                    color,
+                    ...styleTagStyle,
+                }}
+                startElement={
+                    Icon && (
+                        <Icon
+                            style={{
+                                fontSize: 12,
+                                color: color || '#fff',
+                                marginRight: '4px',
+                            }}
+                        />
+                    )
+                }
+                {...otherTagProps}
+            >
+                {textValue}
+            </Tag>
+        );
+    }
+
+    if (value.type === PendantTypes.Date) {
+        const { value: dateValue } = value as DateValue;
+        if (Array.isArray(dateValue)) {
+            return (
+                <Tag
+                    style={{
+                        background,
+                        color,
+                        ...styleTagStyle,
+                    }}
+                    startElement={
+                        Icon && (
+                            <Icon
+                                style={{
+                                    fontSize: 12,
+                                    color: color || '#fff',
+                                    marginRight: '4px',
+                                }}
+                            />
+                        )
+                    }
+                    {...otherTagProps}
+                >
+                    {format(dateValue[0], 'yyyy-MM-dd')} ~{' '}
+                    {format(dateValue[1], 'yyyy-MM-dd')}
+                </Tag>
+            );
+        }
+        return (
+            <Tag
+                style={{
+                    background,
+                    color,
+                    ...styleTagStyle,
+                }}
+                startElement={
+                    Icon && (
+                        <Icon
+                            style={{
+                                fontSize: 12,
+                                color: color || '#fff',
+                                marginRight: '4px',
+                            }}
+                        />
+                    )
+                }
+                {...otherTagProps}
+            >
+                {format(dateValue, 'yyyy-MM-dd')}
+            </Tag>
+        );
+    }
+
+    if (value.type === PendantTypes.MultiSelect) {
+        const { value: multiSelectValue } = value as MultiSelectValue;
+        const selectedOptions = (
+            property as MultiSelectProperty
+        ).options.filter(o => multiSelectValue.includes(o.id));
+
+        if (selectedOptions.length) {
+            return (
+                <MultiSelectRender
+                    options={selectedOptions}
+                    tagProps={tagProps}
+                />
+            );
+        }
+    }
+
+    if (value.type === PendantTypes.Select) {
+        const { value: selectValue } = value as SelectValue;
+        const { style, ...otherProps } = tagProps;
+
+        const option = (property as SelectProperty).options.find(
+            o => o.id === selectValue
+        );
+        const OptionIcon = IconMap[option.iconName as IconNames];
+        return (
+            <Tag
+                style={{
+                    background: option.background,
+                    color: option.color,
+                    ...style,
+                }}
+                startElement={
+                    OptionIcon && (
+                        <OptionIcon
+                            style={{
+                                fontSize: 12,
+                                color: option.color || '#fff',
+                                marginRight: '4px',
+                            }}
+                        />
+                    )
+                }
+                {...otherProps}
+            >
+                {option.name}
+            </Tag>
+        );
+    }
+
+    if (value.type === PendantTypes.Status) {
+        const { value: statusValue } = value as StatusValue;
+        const { style, ...otherProps } = tagProps;
+
+        const option = (property as StatusProperty).options.find(
+            o => o.id === statusValue
+        );
+        const OptionIcon = IconMap[option.iconName as IconNames];
+
+        return (
+            <Tag
+                style={{
+                    background: option.background,
+                    color: option.color,
+                    ...style,
+                }}
+                startElement={
+                    OptionIcon && (
+                        <OptionIcon
+                            style={{
+                                fontSize: 12,
+                                color: option.color || '#fff',
+                                marginRight: '4px',
+                            }}
+                        />
+                    )
+                }
+                {...otherProps}
+            >
+                {option.name}
+            </Tag>
+        );
+    }
+
+    if (value.type === PendantTypes.Mention) {
+        const { value: mentionValue } = value as MentionValue;
+
+        return (
+            <Tag
+                style={{
+                    background,
+                    color,
+                    ...styleTagStyle,
+                }}
+                startElement={
+                    Icon && (
+                        <Icon
+                            style={{
+                                fontSize: 12,
+                                color: color || '#fff',
+                                marginRight: '4px',
+                            }}
+                        />
+                    )
+                }
+                {...otherTagProps}
+            >
+                @{mentionValue}
+            </Tag>
+        );
+    }
+
+    if (value.type === PendantTypes.Information) {
+        const {
+            value: { email, location, phone },
+        } = value as InformationValue;
+        const { emailOptions, phoneOptions, locationOptions } =
+            property as InformationProperty;
+
+        const emailSelectedOptions = emailOptions.filter(o =>
+            email.includes(o.id)
+        );
+        const phoneSelectedOptions = phoneOptions.filter(o =>
+            phone.includes(o.id)
+        );
+        const locationSelectedOptions = locationOptions.filter(o =>
+            location.includes(o.id)
+        );
+
+        if (
+            emailSelectedOptions.length ||
+            phoneSelectedOptions.length ||
+            locationSelectedOptions.length
+        ) {
+            return (
+                <>
+                    <MultiSelectRender
+                        options={emailSelectedOptions}
+                        tagProps={tagProps}
+                    />
+                    <MultiSelectRender
+                        options={phoneSelectedOptions}
+                        tagProps={tagProps}
+                    />
+                    <MultiSelectRender
+                        options={locationSelectedOptions}
+                        tagProps={tagProps}
+                    />
+                </>
+            );
+        }
+    }
+
+    return <Tag {...tagProps}>{property.name}</Tag>;
+};
diff --git a/libs/components/editor-core/src/block-pendant/StyledComponent.tsx b/libs/components/editor-core/src/block-pendant/StyledComponent.tsx
new file mode 100644
index 000000000..925fa4602
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/StyledComponent.tsx
@@ -0,0 +1,135 @@
+import React from 'react';
+import { styled } from '@toeverything/components/ui';
+
+export const IconButton = styled('button')`
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    background: #f5f7f8;
+    color: #98acbd;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+`;
+
+const commonStyle = {
+    height: '24px',
+    padding: '0 8px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    fontSize: '12px',
+    borderRadius: '5px',
+};
+
+export const StyledSureButton = styled('button')(({ theme }) => ({
+    ...commonStyle,
+    background: theme.affine.palette.primary,
+    color: '#fff',
+}));
+
+export const StyledCancelButton = styled('button')(({ theme }) => ({
+    ...commonStyle,
+    background: '#fff',
+    color: theme.affine.palette.primaryText,
+    border: `1px solid ${theme.affine.palette.borderColor}`,
+}));
+
+export const StyledPopoverWrapper = styled('div')`
+    padding: 24px;
+    width: 332px;
+    color: #4c6275;
+    line-height: 1.5;
+`;
+
+export const StyledOperationWrapper = styled('div')<{ isFocus: boolean }>(
+    ({ isFocus, theme }) => {
+        return {
+            display: 'flex',
+            alignItems: 'center',
+            borderTop: `1px solid`,
+            borderBottom: `1px solid`,
+            borderColor: isFocus
+                ? `${theme.affine.palette.primary}`
+                : 'transparent',
+            transition: 'border .1s',
+        };
+    }
+);
+
+export const StyledOperationTitle = styled('div')(({ theme }) => {
+    return {
+        color: theme.affine.palette.secondaryText,
+        fontSize: 20,
+        marginBottom: 12,
+        fontWeight: 'bold',
+    };
+});
+
+export const StyledOperationLabel = styled('div')(({ theme }) => {
+    return {
+        color: theme.affine.palette.secondaryText,
+        fontSize: 12,
+        marginBottom: 12,
+        fontWeight: 'bold',
+    };
+});
+
+export const StyledInputEndAdornment = styled('div')`
+    width: 32px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+
+export const StyledDivider = styled('div')`
+    height: 1px;
+    padding: 12px 0;
+    margin: 12px 0;
+    position: relative;
+    &::after {
+        content: '';
+        width: 100%;
+        height: 1px;
+        background: #e0e6eb;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        margin: auto;
+    }
+`;
+
+export const StyledPopoverContent = styled('div')(({ theme }) => {
+    return {
+        color: theme.affine.palette.secondaryText,
+        fontSize: '14px',
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 12px',
+        marginBottom: '12px',
+    };
+});
+export const StyledPopoverSubTitle = styled('div')(({ theme }) => {
+    return {
+        color: theme.affine.palette.secondaryText,
+        fontSize: '16px',
+        marginBottom: '12px',
+        fontWeight: 'bold',
+        padding: '0 12px',
+    };
+});
+
+export const StyledHighLightWrapper = styled('div')<{
+    isFocus: boolean;
+}>(({ isFocus, theme }) => {
+    return {
+        display: 'flex',
+        alignItems: 'center',
+        borderTop: `1px solid`,
+        borderBottom: `1px solid`,
+        borderColor: isFocus ? theme.affine.palette.primary : 'transparent',
+        transition: 'border .1s',
+    };
+});
diff --git a/libs/components/editor-core/src/block-pendant/config.ts b/libs/components/editor-core/src/block-pendant/config.ts
new file mode 100644
index 000000000..676d20d6b
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/config.ts
@@ -0,0 +1,212 @@
+import {
+    PendantIconConfig,
+    PendantOptions,
+    PendantTypes,
+    IconNames,
+} from './types';
+import {
+    MultiSelectIcon,
+    SingleSelectIcon,
+    TextFontIcon,
+    DateIcon,
+    CollaboratorIcon,
+    StatusIcon,
+    PhoneIcon,
+    InformationIcon,
+    LocationIcon,
+    EmailIcon,
+} from '@toeverything/components/icons';
+
+// export const selectColors = [
+//     { background: '#C3DBFF', color: '#253486' },
+//     { background: '#C6F1F3', color: '#0C6066' },
+//     { background: '#C5FBE0', color: '#05683D' },
+//     { background: '#FFF5AB', color: '#896406' },
+//     { background: '#FFCCA7', color: '#8F4500' },
+//     { background: '#FFCECE', color: '#AF1212' },
+//     { background: '#E3DEFF', color: '#511AAB' },
+// ];
+//
+// export const statusSelectColors = [
+//     { background: '#C5FBE0', color: '#05683D' },
+//     { background: '#FFF5AB', color: '#896406' },
+//     { background: '#FFCECE', color: '#AF1212' },
+//     { background: '#E3DEFF', color: '#511AAB' },
+// ];
+
+export const pendantColors = {
+    [PendantTypes.Text]: {
+        background: '#7389FD',
+        color: '#FFF',
+    },
+    [PendantTypes.Date]: {
+        background: '#5DC6CD',
+        color: '#FFF',
+    },
+    [PendantTypes.Select]: {
+        background: '#EAAE14',
+        color: '#FFF',
+    },
+    [PendantTypes.MultiSelect]: {
+        background: '#A691FC',
+        color: '#FFF',
+    },
+    [PendantTypes.Mention]: {
+        background: '#57C696',
+        color: '#FFF',
+    },
+    [PendantTypes.Status]: {
+        background: '#57C696',
+        color: '#FFF',
+    },
+    [PendantTypes.Information]: {
+        background: '#57C696',
+        color: '#FFF',
+    },
+};
+
+export const IconMap = {
+    [IconNames.TEXT]: TextFontIcon,
+    [IconNames.DATE]: DateIcon,
+    [IconNames.STATUS]: StatusIcon,
+    [IconNames.MULTI_SELECT]: MultiSelectIcon,
+    [IconNames.SINGLE_SELECT]: SingleSelectIcon,
+    [IconNames.COLLABORATOR]: CollaboratorIcon,
+    [IconNames.INFORMATION]: InformationIcon,
+    [IconNames.PHONE]: PhoneIcon,
+    [IconNames.LOCATION]: LocationIcon,
+    [IconNames.EMAIL]: EmailIcon,
+};
+
+export const pendantIconConfig: { [key: string]: PendantIconConfig } = {
+    [PendantTypes.Text]: {
+        name: IconNames.TEXT,
+        background: '#67dcaa',
+        color: '#FFF',
+    },
+    [PendantTypes.Date]: { name: IconNames.DATE, background: '', color: '' },
+    [PendantTypes.Status]: {
+        name: IconNames.STATUS,
+        background: ['#C5FBE0', '#FFF5AB', '#FFCECE', '#E3DEFF'],
+        color: ['#05683D', '#896406', '#AF1212', '#511AAB'],
+    },
+    [PendantTypes.Select]: {
+        name: IconNames.SINGLE_SELECT,
+        background: [
+            '#C3DBFF',
+            '#C6F1F3',
+            '#C5FBE0',
+            '#FFF5AB',
+            '#FFCCA7',
+            '#FFCECE',
+            '#E3DEFF',
+        ],
+        color: [
+            '#253486',
+            '#0C6066',
+            '#05683D',
+            '#896406',
+            '#8F4500',
+            '#AF1212',
+            '#511AAB',
+        ],
+    },
+
+    [PendantTypes.MultiSelect]: {
+        name: IconNames.MULTI_SELECT,
+        background: [
+            '#C3DBFF',
+            '#C6F1F3',
+            '#C5FBE0',
+            '#FFF5AB',
+            '#FFCCA7',
+            '#FFCECE',
+            '#E3DEFF',
+        ],
+        color: [
+            '#253486',
+            '#0C6066',
+            '#05683D',
+            '#896406',
+            '#8F4500',
+            '#AF1212',
+            '#511AAB',
+        ],
+    },
+    [PendantTypes.Mention]: {
+        name: IconNames.COLLABORATOR,
+        background: '#FFD568',
+        color: '#FFFFFF',
+    },
+    [PendantTypes.Information]: {
+        name: IconNames.INFORMATION,
+        background: '#FFD568',
+        color: '#FFFFFF',
+    },
+    Phone: {
+        name: IconNames.PHONE,
+        background: '#c3dbff',
+        color: '#263486',
+    },
+    Location: {
+        name: IconNames.LOCATION,
+        background: '#c5f1f3',
+        color: '#263486',
+    },
+    Email: {
+        name: IconNames.EMAIL,
+        background: '#ffcca7',
+        color: '#8f4400',
+    },
+};
+
+export const pendantOptions: PendantOptions[] = [
+    {
+        name: 'Text',
+        type: PendantTypes.Text,
+        iconName: IconNames.TEXT,
+        subTitle: 'Add KeyWords',
+    },
+    {
+        name: 'Date',
+        type: PendantTypes.Date,
+        iconName: IconNames.DATE,
+        subTitle: '',
+    },
+    {
+        name: 'Status',
+        type: PendantTypes.Status,
+        iconName: IconNames.STATUS,
+        subTitle: '',
+    },
+    {
+        name: 'Single Select',
+        type: PendantTypes.Select,
+        iconName: IconNames.SINGLE_SELECT,
+        subTitle: 'Select A Options',
+    },
+    {
+        name: 'Multiple Select',
+        type: PendantTypes.MultiSelect,
+        iconName: IconNames.MULTI_SELECT,
+        subTitle: 'Create A List Of Options',
+    },
+    {
+        name: 'Collaborator',
+        type: PendantTypes.Mention,
+        iconName: IconNames.COLLABORATOR,
+        subTitle: 'Assign People',
+    },
+    {
+        name: 'Information',
+        type: PendantTypes.Information,
+        iconName: IconNames.INFORMATION,
+        subTitle: '',
+    },
+    // {
+    //     name: 'Information',
+    //     type: [PendantTypes.Phone, PendantTypes.Location, PendantTypes.Email],
+    //     icon: InformationIcon,
+    //     subTitle: '',
+    // },
+];
diff --git a/libs/components/editor-core/src/block-pendant/index.ts b/libs/components/editor-core/src/block-pendant/index.ts
new file mode 100644
index 000000000..5b07b9929
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/index.ts
@@ -0,0 +1 @@
+export * from './BlockPendantProvider';
diff --git a/libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx
new file mode 100644
index 000000000..263ae1560
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx
@@ -0,0 +1,105 @@
+import React, { ReactNode, useRef, useState } from 'react';
+import { getLatestPropertyValue } from '../utils';
+import {
+    getRecastItemValue,
+    RecastMetaProperty,
+    useRecastBlock,
+    useRecastBlockMeta,
+    RecastBlockValue,
+} from '../../recast-block';
+import { AsyncBlock } from '../../editor';
+import { Popover, PopperHandler, styled } from '@toeverything/components/ui';
+import { PendantTag } from '../PendantTag';
+import { UpdatePendantPanel } from '../pendant-operation-panel';
+
+export const PendantHistoryPanel = ({
+    block,
+    endElement,
+}: {
+    block: AsyncBlock;
+    endElement?: ReactNode;
+}) => {
+    const [propertyWithValue, setPropertyWithValue] = useState<{
+        value: RecastBlockValue;
+        property: RecastMetaProperty;
+    }>();
+    const popoverHandlerRef = useRef<{ [key: string]: PopperHandler }>({});
+
+    const { getProperty } = useRecastBlockMeta();
+
+    const { getAllValue } = getRecastItemValue(block);
+
+    const recastBlock = useRecastBlock();
+
+    const latestPropertyValues = getLatestPropertyValue({
+        recastBlockId: recastBlock.id,
+        blockId: block.id,
+    });
+    const blockValues = getAllValue();
+
+    const history = latestPropertyValues
+        .filter(latest => !blockValues.find(v => v && v.id === latest.value.id))
+        .map(v => v.value);
+
+    return (
+        <StyledPendantHistoryPanel>
+            {history.map(item => {
+                const property = getProperty(item.id);
+                return (
+                    <Popover
+                        key={item.id}
+                        ref={ref => {
+                            popoverHandlerRef.current[item.id] = ref;
+                        }}
+                        placement="bottom-start"
+                        content={
+                            propertyWithValue && (
+                                <UpdatePendantPanel
+                                    block={block}
+                                    value={propertyWithValue.value}
+                                    property={propertyWithValue.property}
+                                    hasDelete={false}
+                                    onSure={() => {
+                                        popoverHandlerRef.current[
+                                            item.id
+                                        ].setVisible(false);
+                                    }}
+                                    onCancel={() => {
+                                        popoverHandlerRef.current[
+                                            item.id
+                                        ].setVisible(false);
+                                    }}
+                                />
+                            )
+                        }
+                        trigger="click"
+                    >
+                        <PendantTag
+                            style={{
+                                background: '#F5F7F8',
+                                color: '#98ACBD',
+                                marginRight: 12,
+                                marginBottom: 8,
+                            }}
+                            property={property as RecastMetaProperty}
+                            value={item}
+                            onClick={e => {
+                                if (property) {
+                                    setPropertyWithValue({
+                                        property,
+                                        value: item,
+                                    });
+                                }
+                            }}
+                        />
+                    </Popover>
+                );
+            })}
+            {endElement}
+        </StyledPendantHistoryPanel>
+    );
+};
+const StyledPendantHistoryPanel = styled('div')`
+    display: flex;
+    flex-wrap: wrap;
+`;
diff --git a/libs/components/editor-core/src/block-pendant/pendant-history-panel/index.ts b/libs/components/editor-core/src/block-pendant/pendant-history-panel/index.ts
new file mode 100644
index 000000000..ff24817f5
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-history-panel/index.ts
@@ -0,0 +1 @@
+export * from './PendantHistoryPanel';
diff --git a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Date.tsx b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Date.tsx
new file mode 100644
index 000000000..46584a1d7
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Date.tsx
@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+
+import { ModifyPanelContentProps } from './types';
+import {
+    MuiSwitch as Switch,
+    DateRange,
+    styled,
+    Calendar,
+    type Range,
+} from '@toeverything/components/ui';
+
+export default ({ onValueChange, initialValue }: ModifyPanelContentProps) => {
+    const [dateTime, setDateTime] = useState<Date | null>(
+        initialValue && !Array.isArray(initialValue.value)
+            ? new Date(initialValue.value as number)
+            : null
+    );
+
+    const [isRange, setIsRange] = useState<boolean>(
+        Array.isArray(initialValue?.value) || false
+    );
+
+    const [dateRange, setDateRange] = useState<Range[]>([
+        {
+            startDate:
+                initialValue && Array.isArray(initialValue.value)
+                    ? new Date(initialValue.value[0])
+                    : new Date(),
+            endDate:
+                initialValue && Array.isArray(initialValue.value)
+                    ? new Date(initialValue.value[1])
+                    : null,
+            key: 'selection',
+        },
+    ]);
+
+    return (
+        <>
+            {!initialValue && (
+                <StyledSwitchContainer>
+                    <StyledSwitchLabel>Use Date Range</StyledSwitchLabel>
+                    <Switch
+                        size="small"
+                        onChange={(e, checked) => {
+                            setIsRange(checked);
+                        }}
+                    />
+                </StyledSwitchContainer>
+            )}
+
+            <StyledDateContainer
+                onClick={e => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                }}
+            >
+                {isRange ? (
+                    <DateRange
+                        // editableDateInputs={true}
+                        onChange={({ selection }) => {
+                            const { startDate, endDate } = selection;
+                            setDateRange([selection]);
+
+                            if (startDate && endDate) {
+                                onValueChange([
+                                    startDate.getTime(),
+                                    endDate.getTime(),
+                                ]);
+                            }
+                        }}
+                        moveRangeOnFirstSelection={false}
+                        ranges={dateRange}
+                    />
+                ) : (
+                    <Calendar
+                        date={dateTime}
+                        onChange={date => {
+                            setDateTime(date);
+                            date && onValueChange(date.getTime());
+                        }}
+                    />
+                )}
+            </StyledDateContainer>
+        </>
+    );
+};
+
+const StyledSwitchContainer = styled('div')`
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+`;
+const StyledSwitchLabel = styled('span')`
+    font-size: 14px;
+    margin-right: 10px;
+`;
+
+/**
+ *  DateRange & Calendar width is calc by their container width, but include container`s padding,
+ *  and this calc width style is just right
+ *  so there have to set margin negative
+ * **/
+const StyledDateContainer = styled('div')`
+    margin-left: -24px;
+`;
diff --git a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Email.tsx b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Email.tsx
new file mode 100644
index 000000000..92219a32e
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Email.tsx
@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+
+import { Input } from '@toeverything/components/ui';
+import { ModifyPanelContentProps } from './types';
+
+export default ({ onValueChange, initialValue }: ModifyPanelContentProps) => {
+    const [text, setText] = useState(initialValue?.value || '');
+    return (
+        <Input
+            placeholder="Input email"
+            value={text}
+            onChange={e => {
+                setText(e.target.value);
+                onValueChange(e.target.value);
+            }}
+        />
+    );
+};
diff --git a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/IconInput.tsx b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/IconInput.tsx
new file mode 100644
index 000000000..98bd66e7a
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/IconInput.tsx
@@ -0,0 +1,100 @@
+import React, { type CSSProperties, useState } from 'react';
+import { Input, styled, InputProps } from '@toeverything/components/ui';
+import { StyledHighLightWrapper } from '../StyledComponent';
+import { IconNames } from '../types';
+import { IconMap } from '../config';
+
+type IconInputProps = PendantIconProps & InputProps;
+
+type PendantIconProps = {
+    iconName?: IconNames;
+    background?: CSSProperties['background'];
+    color?: CSSProperties['color'];
+    iconStyle?: CSSProperties;
+};
+
+export const PendantIcon = ({
+    iconName,
+    iconStyle,
+    color,
+    background,
+}: PendantIconProps) => {
+    const Icon = IconMap[iconName];
+    return (
+        Icon && (
+            <StyledIconWrapper style={{ ...iconStyle, color, background }}>
+                <Icon style={{ fontSize: 16, color }} />
+            </StyledIconWrapper>
+        )
+    );
+};
+
+export const IconInput = ({
+    iconName,
+    iconStyle,
+    color,
+    background,
+    ...inputProps
+}: IconInputProps) => {
+    return (
+        <>
+            <PendantIcon
+                iconName={iconName}
+                iconStyle={iconStyle}
+                color={color}
+                background={background}
+            />
+            <Input
+                style={{
+                    flexGrow: '1',
+                    border: 'none',
+                }}
+                {...inputProps}
+            />
+        </>
+    );
+};
+
+type HighLightIconInputProps = {
+    startElement?: React.ReactNode;
+    endElement?: React.ReactNode;
+} & IconInputProps;
+
+export const HighLightIconInput = (props: HighLightIconInputProps) => {
+    const {
+        onFocus,
+        onBlur,
+        startElement = null,
+        endElement = null,
+        ...otherProps
+    } = props;
+    const [focus, setFocus] = useState(false);
+
+    return (
+        <StyledHighLightWrapper isFocus={focus}>
+            {startElement}
+            <IconInput
+                onFocus={e => {
+                    setFocus(true);
+                    onFocus?.(e);
+                }}
+                onBlur={e => {
+                    setFocus(false);
+                    onBlur?.(e);
+                }}
+                {...otherProps}
+            />
+            {endElement}
+        </StyledHighLightWrapper>
+    );
+};
+
+const StyledIconWrapper = styled('div')`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12px;
+    width: 20px;
+    height: 20px;
+    border-radius: 3px;
+`;
diff --git a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Information.tsx b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Information.tsx
new file mode 100644
index 000000000..afd5bc552
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Information.tsx
@@ -0,0 +1,105 @@
+import React, { useRef, useState } from 'react';
+
+import { ModifyPanelContentProps } from './types';
+import { StyledDivider, StyledPopoverSubTitle } from '../StyledComponent';
+import { BasicSelect } from './Select';
+import { InformationProperty, InformationValue } from '../../recast-block';
+import { genInitialOptions, getPendantIconsConfigByName } from '../utils';
+
+export default (props: ModifyPanelContentProps) => {
+    const { onPropertyChange, onValueChange, initialValue, property } = props;
+    const propProperty = property as InformationProperty;
+    const propValue = initialValue as InformationValue;
+
+    const optionsRef = useRef(propProperty);
+    const valueRef = useRef(propValue?.value);
+
+    return (
+        <>
+            <StyledPopoverSubTitle>Email</StyledPopoverSubTitle>
+            <BasicSelect
+                isMulti={true}
+                iconConfig={getPendantIconsConfigByName('Email')}
+                initialValue={propValue?.value?.email || []}
+                onValueChange={selectedId => {
+                    valueRef.current = {
+                        ...valueRef.current,
+                        email: selectedId,
+                    };
+                    onValueChange(valueRef.current);
+                }}
+                onPropertyChange={options => {
+                    // setEmailOptions(options);
+                    optionsRef.current = {
+                        ...optionsRef.current,
+                        emailOptions: options,
+                    };
+                    onPropertyChange(optionsRef.current);
+                }}
+                initialOptions={
+                    propProperty?.emailOptions ||
+                    genInitialOptions(
+                        property?.type,
+                        getPendantIconsConfigByName('Email')
+                    )
+                }
+            />
+            <StyledDivider />
+            <StyledPopoverSubTitle>Phone</StyledPopoverSubTitle>
+            <BasicSelect
+                isMulti={true}
+                iconConfig={getPendantIconsConfigByName('Phone')}
+                initialValue={propValue?.value?.phone || []}
+                onValueChange={selectedId => {
+                    valueRef.current = {
+                        ...valueRef.current,
+                        phone: selectedId,
+                    };
+                    onValueChange(valueRef.current);
+                }}
+                onPropertyChange={options => {
+                    optionsRef.current = {
+                        ...optionsRef.current,
+                        phoneOptions: options,
+                    };
+                    onPropertyChange(optionsRef.current);
+                }}
+                initialOptions={
+                    propProperty?.phoneOptions ||
+                    genInitialOptions(
+                        property?.type,
+                        getPendantIconsConfigByName('Phone')
+                    )
+                }
+            />
+            <StyledDivider />
+            <StyledPopoverSubTitle>Location</StyledPopoverSubTitle>
+            <BasicSelect
+                isMulti={true}
+                iconConfig={getPendantIconsConfigByName('Location')}
+                initialValue={propValue?.value?.location || []}
+                onValueChange={selectedId => {
+                    valueRef.current = {
+                        ...valueRef.current,
+                        location: selectedId,
+                    };
+                    onValueChange(valueRef.current);
+                }}
+                onPropertyChange={options => {
+                    optionsRef.current = {
+                        ...optionsRef.current,
+                        locationOptions: options,
+                    };
+                    onPropertyChange(optionsRef.current);
+                }}
+                initialOptions={
+                    propProperty?.locationOptions ||
+                    genInitialOptions(
+                        property?.type,
+                        getPendantIconsConfigByName('Location')
+                    )
+                }
+            />
+        </>
+    );
+};
diff --git a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Location.tsx b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Location.tsx
new file mode 100644
index 000000000..65ca9d3e6
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Location.tsx
@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+
+import { Input } from '@toeverything/components/ui';
+import { ModifyPanelContentProps } from './types';
+
+export default ({ onValueChange, initialValue }: ModifyPanelContentProps) => {
+    const [text, setText] = useState(initialValue?.value || '');
+    return (
+        <Input
+            placeholder="Input location"
+            value={text}
+            onChange={e => {
+                setText(e.target.value);
+                onValueChange(e.target.value);
+            }}
+        />
+    );
+};
diff --git a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Mention.tsx b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Mention.tsx
new file mode 100644
index 000000000..cbe6f8dc0
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Mention.tsx
@@ -0,0 +1,70 @@
+import React, { CSSProperties, useState } from 'react';
+import { useUserAndSpaces } from '@toeverything/datasource/state';
+import {
+    Option,
+    Select,
+    useTheme,
+    MuiAvatar as Avatar,
+} from '@toeverything/components/ui';
+import { ModifyPanelContentProps } from './types';
+import { PendantIcon } from './IconInput';
+
+export default ({
+    onValueChange,
+    initialValue,
+    iconConfig,
+}: ModifyPanelContentProps) => {
+    const {
+        user: { username, nickname, photo },
+    } = useUserAndSpaces();
+
+    const [selectedValue, setSelectedValue] = useState(initialValue?.value);
+    const [focus, setFocus] = useState(false);
+    const theme = useTheme();
+    return (
+        <Select
+            width={284}
+            placeholder={
+                <>
+                    <PendantIcon
+                        iconName={iconConfig?.name}
+                        color={iconConfig?.color as CSSProperties['color']}
+                        background={
+                            iconConfig?.background as CSSProperties['background']
+                        }
+                    />
+                    Select a collaborator
+                </>
+            }
+            value={selectedValue}
+            onChange={selectedValue => {
+                setSelectedValue(selectedValue);
+                onValueChange(selectedValue);
+            }}
+            style={{
+                borderLeft: 'none',
+                borderRight: 'none',
+                borderRadius: '0',
+                borderTop: focus
+                    ? `1px solid ${theme.affine.palette.primary}`
+                    : 'none',
+                borderBottom: focus
+                    ? `1px solid ${theme.affine.palette.primary}`
+                    : 'none',
+                transition: 'border-color .15s',
+            }}
+            onListboxOpenChange={open => {
+                setFocus(open);
+            }}
+        >
+            <Option value={nickname}>
+                <Avatar
+                    alt={username}
+                    src={photo}
+                    sx={{ width: 20, height: 20, marginRight: '12px' }}
+                />
+                {nickname}
+            </Option>
+        </Select>
+    );
+};
diff --git a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/PendantModifyPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/PendantModifyPanel.tsx
new file mode 100644
index 000000000..4f6f9ca29
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/PendantModifyPanel.tsx
@@ -0,0 +1,132 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { PendantTypes } from '../types';
+import { ModifyPanelContentProps, ModifyPanelProps } from './types';
+import { MuiButton as Button, styled } from '@toeverything/components/ui';
+import DatePanel from './Date';
+import TextPanel from './Text';
+import { Select } from './Select';
+import Mention from './Mention';
+import Information from './Information';
+
+import { PendantSelect } from './PendantTypeSelect';
+import { StyledCancelButton, StyledSureButton } from '../StyledComponent';
+
+const View = (props: ModifyPanelContentProps) => {
+    const { type } = props;
+    switch (type) {
+        case PendantTypes.Date:
+            return <DatePanel {...props} />;
+        case PendantTypes.Text:
+            return <TextPanel {...props} />;
+        case PendantTypes.Status:
+            return <Select {...props} isMulti={false} />;
+        case PendantTypes.Select:
+            return <Select {...props} isMulti={false} />;
+        case PendantTypes.MultiSelect:
+            return <Select {...props} isMulti={true} />;
+        case PendantTypes.Mention:
+            return <Mention {...props} />;
+        case PendantTypes.Information:
+            return <Information {...props} />;
+        default:
+            return <div className="">{type}</div>;
+    }
+};
+
+export const PendantModifyPanel = ({
+    type: propsType,
+    onSure,
+    onDelete,
+    initialValue,
+    property,
+    onCancel,
+    initialOptions,
+    iconConfig,
+    isStatusSelect,
+}: ModifyPanelProps) => {
+    const currentValue = useRef(initialValue?.value);
+    // propertyValueMemo is used to memoize the property,
+    // the property is not complete defined yet and it maybe not here
+    // so use any type defined
+    const propertyValueMemo = useRef<any>();
+    useEffect(() => {
+        currentValue.current = initialValue?.value;
+    }, [propsType]);
+
+    const [type, setType] = useState<PendantTypes>();
+
+    useEffect(() => {
+        setType(Array.isArray(propsType) ? propsType[0] : propsType);
+    }, [propsType]);
+
+    return (
+        <>
+            {Array.isArray(propsType) && (
+                <PendantSelect
+                    currentType={type}
+                    types={propsType}
+                    onChange={selectType => setType(selectType)}
+                />
+            )}
+
+            <View
+                type={type}
+                initialValue={initialValue}
+                onValueChange={newValue => {
+                    currentValue.current = newValue;
+                }}
+                onPropertyChange={newPropertyValue => {
+                    propertyValueMemo.current = newPropertyValue;
+                }}
+                property={property}
+                initialOptions={initialOptions}
+                iconConfig={iconConfig}
+                isStatusSelect={isStatusSelect}
+            />
+            <ModifyPanelBottom>
+                {onDelete && (
+                    <StyledCancelButton
+                        style={{ marginRight: 10 }}
+                        onClick={async () => {
+                            onDelete?.(
+                                type,
+                                currentValue.current,
+                                propertyValueMemo.current
+                            );
+                        }}
+                    >
+                        Delete
+                    </StyledCancelButton>
+                )}
+
+                {onCancel && (
+                    <StyledCancelButton
+                        style={{ marginRight: 10 }}
+                        onClick={async () => {
+                            onCancel?.();
+                        }}
+                    >
+                        Cancel
+                    </StyledCancelButton>
+                )}
+                <StyledSureButton
+                    onClick={async () => {
+                        onSure(
+                            type,
+                            propertyValueMemo.current,
+                            currentValue.current
+                        );
+                    }}
+                >
+                    Apply
+                </StyledSureButton>
+            </ModifyPanelBottom>
+        </>
+    );
+};
+
+const ModifyPanelBottom = styled('div')({
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginTop: '12px',
+});
diff --git a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/PendantTypeSelect.tsx b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/PendantTypeSelect.tsx
new file mode 100644
index 000000000..71db6a3c8
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/PendantTypeSelect.tsx
@@ -0,0 +1,39 @@
+import { PendantTypes } from '../types';
+import { MuiRadio as Radio, styled } from '@toeverything/components/ui';
+import React from 'react';
+
+export const PendantSelect = ({
+    currentType,
+    types,
+    onChange,
+}: {
+    currentType: PendantTypes;
+    types: PendantTypes[];
+    onChange: (type: PendantTypes) => void;
+}) => {
+    return (
+        <StyledContainer>
+            {types.map(type => {
+                return (
+                    <div key={type}>
+                        <Radio
+                            checked={type === currentType}
+                            onChange={e => {
+                                onChange(type);
+                            }}
+                            size="small"
+                        />
+                        {type}
+                    </div>
+                );
+            })}
+        </StyledContainer>
+    );
+};
+
+const StyledContainer = styled('div')`
+    display: flex;
+    font-size: 12px;
+    margin-bottom: 10px;
+    margin-top: -10px;
+`;
diff --git a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Phone.tsx b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Phone.tsx
new file mode 100644
index 000000000..09241531d
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Phone.tsx
@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+
+import { Input } from '@toeverything/components/ui';
+import { ModifyPanelContentProps } from './types';
+
+export default ({ onValueChange, initialValue }: ModifyPanelContentProps) => {
+    const [text, setText] = useState(initialValue?.value || '');
+    return (
+        <Input
+            placeholder="Input phone"
+            value={text}
+            onChange={e => {
+                setText(e.target.value);
+                onValueChange(e.target.value);
+            }}
+        />
+    );
+};
diff --git a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Select.tsx b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Select.tsx
new file mode 100644
index 000000000..6f9e6419b
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Select.tsx
@@ -0,0 +1,270 @@
+import React, { CSSProperties, useEffect, useState } from 'react';
+import { Add, Delete, Close } from '@mui/icons-material';
+import { ModifyPanelContentProps } from './types';
+import {
+    MultiSelectProperty,
+    MultiSelectValue,
+    SelectOption,
+    SelectProperty,
+    SelectOptionId,
+    RecastBlockValue,
+    RecastMetaProperty,
+} from '../../recast-block';
+import { Checkbox, Radio, styled, useTheme } from '@toeverything/components/ui';
+import { HighLightIconInput } from './IconInput';
+import {
+    PendantIconConfig,
+    IconNames,
+    OptionIdType,
+    OptionType,
+} from '../types';
+import { genBasicOption } from '../utils';
+
+type OptionItemType = {
+    option: OptionType;
+    onNameChange: (id: OptionIdType, name: string) => void;
+    onStatusChange: (id: OptionIdType, status: boolean) => void;
+    onDelete: (id: OptionIdType) => void;
+    onInsertOption: (id: OptionIdType) => void;
+    checked: boolean;
+    isMulti: boolean;
+    iconConfig: {
+        name: IconNames;
+        background: CSSProperties['background'];
+        color: CSSProperties['color'];
+    };
+};
+
+type SelectPropsType = {
+    isMulti?: boolean;
+} & ModifyPanelContentProps;
+
+export const BasicSelect = ({
+    isMulti = false,
+    initialValue,
+    onValueChange,
+    onPropertyChange,
+    initialOptions = [],
+    iconConfig,
+}: {
+    isMulti?: boolean;
+    initialValue: SelectOptionId[];
+    initialOptions: OptionType[];
+    onValueChange: (value: any) => void;
+    onPropertyChange?: (newProperty: any) => void;
+    iconConfig?: PendantIconConfig;
+}) => {
+    const [options, setOptions] = useState<OptionType[]>(initialOptions);
+    const [selectIds, setSelectIds] = useState<OptionIdType[]>(initialValue);
+
+    const insertOption = (insertId: OptionIdType) => {
+        const newOption = genBasicOption({
+            index: options.length + 1,
+            iconConfig,
+        });
+        const index = options.findIndex(o => o.id === insertId);
+        options.splice(index + 1, 0, newOption);
+        setOptions([...options]);
+    };
+    const deleteOption = (id: OptionIdType) => {
+        if (options.length === 1) {
+            return;
+        }
+        const deleteOptionIndex = options.findIndex(o => o.id === id);
+        options.splice(deleteOptionIndex, 1);
+        setOptions([...options]);
+    };
+
+    const onNameChange = (id: OptionIdType, name: string) => {
+        const changedIndex = options.findIndex(o => o.id === id);
+        options[changedIndex].name = name;
+        setOptions([...options]);
+    };
+
+    const onStatusChange = (id: OptionIdType, status: boolean) => {
+        if (status) {
+            if (isMulti) {
+                selectIds.push(id);
+                setSelectIds([...selectIds]);
+            } else {
+                setSelectIds([id]);
+            }
+        } else {
+            const index = selectIds.findIndex(selectId => selectId === id);
+            selectIds.splice(index, 1);
+            setSelectIds([...selectIds]);
+        }
+    };
+
+    useEffect(() => {
+        onValueChange(isMulti ? selectIds : selectIds[0]);
+    }, [selectIds]);
+
+    useEffect(() => {
+        if (options.every(o => !o.name)) {
+            return;
+        }
+        onPropertyChange?.([...options.filter(o => o.name)]);
+    }, [options]);
+
+    return (
+        <div className="">
+            {options.map((option, index) => {
+                const checked = selectIds.includes(option.id);
+
+                return (
+                    <OptionItem
+                        key={option.id}
+                        isMulti={isMulti}
+                        checked={checked}
+                        option={option}
+                        onNameChange={onNameChange}
+                        onStatusChange={onStatusChange}
+                        onDelete={deleteOption}
+                        onInsertOption={insertOption}
+                        iconConfig={{
+                            name: option?.iconName as IconNames,
+                            color: option?.color,
+                            background: option?.background,
+                        }}
+                    />
+                );
+            })}
+
+            <StyledAddButton
+                onClick={() => {
+                    insertOption(options[options.length - 1].id);
+                }}
+            >
+                <Add style={{ fontSize: 12, marginRight: 4 }} />
+                Add New
+            </StyledAddButton>
+        </div>
+    );
+};
+export const Select = ({
+    isMulti = false,
+    initialValue,
+    property,
+    onValueChange,
+    onPropertyChange,
+    initialOptions = [],
+    iconConfig,
+}: SelectPropsType) => {
+    const propProperty = property as SelectProperty | MultiSelectProperty;
+    const propInitialValueValue = initialValue?.value as
+        | SelectOptionId
+        | SelectOptionId[];
+
+    return (
+        <BasicSelect
+            isMulti={isMulti}
+            iconConfig={iconConfig}
+            initialValue={
+                propInitialValueValue
+                    ? isMulti
+                        ? (propInitialValueValue as SelectOptionId[])
+                        : [propInitialValueValue as SelectOptionId]
+                    : []
+            }
+            onValueChange={onValueChange}
+            onPropertyChange={onPropertyChange}
+            initialOptions={propProperty?.options || initialOptions}
+        />
+    );
+};
+
+const OptionItem = ({
+    option,
+    onNameChange,
+    onStatusChange,
+    onDelete,
+    onInsertOption,
+    checked,
+    isMulti,
+    iconConfig,
+}: OptionItemType) => {
+    const theme = useTheme();
+    return (
+        <HighLightIconInput
+            iconName={iconConfig?.name}
+            color={iconConfig?.color}
+            background={iconConfig?.background}
+            value={option.name}
+            placeholder="Option content"
+            onChange={e => {
+                onNameChange(option.id, e.target.value);
+            }}
+            startElement={
+                <StyledOptionBox>
+                    {isMulti ? (
+                        <Checkbox
+                            checked={checked}
+                            onChange={e => {
+                                onStatusChange(option.id, e.target.checked);
+                            }}
+                            size="small"
+                        />
+                    ) : (
+                        <Radio
+                            checked={checked}
+                            onChange={e => {
+                                onStatusChange(option.id, e.target.checked);
+                            }}
+                            size="small"
+                        />
+                    )}
+                </StyledOptionBox>
+            }
+            endElement={
+                <StyledCloseButton
+                    onClick={() => {
+                        onDelete(option.id);
+                    }}
+                >
+                    <Close
+                        style={{
+                            fontSize: 12,
+                            color: theme.affine.palette.icons,
+                        }}
+                    />
+                </StyledCloseButton>
+            }
+        />
+    );
+};
+
+const StyledIconWrapper = styled('div')`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12px;
+    width: 20px;
+    height: 20px;
+    border-radius: 3px;
+`;
+const StyledOptionBox = styled('div')`
+    display: inline-flex;
+    margin-right: 12px;
+`;
+
+const StyledCloseButton = styled('button')`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 20px;
+    width: 20px;
+`;
+
+const StyledAddButton = styled('button')(({ theme }) => {
+    return {
+        height: 26,
+        padding: '0 8px',
+        color: theme.affine.palette.primaryText,
+        display: 'inline-flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        fontSize: 14,
+        marginTop: 12,
+    };
+});
diff --git a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Text.tsx b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Text.tsx
new file mode 100644
index 000000000..a1d76e574
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Text.tsx
@@ -0,0 +1,25 @@
+import React, { CSSProperties, useState } from 'react';
+
+import { ModifyPanelContentProps } from './types';
+import { HighLightIconInput } from './IconInput';
+
+export default ({
+    onValueChange,
+    initialValue,
+    iconConfig,
+}: ModifyPanelContentProps) => {
+    const [text, setText] = useState(initialValue?.value || '');
+    return (
+        <HighLightIconInput
+            iconName={iconConfig?.name}
+            color={iconConfig?.color as CSSProperties['color']}
+            background={iconConfig?.background as CSSProperties['background']}
+            value={text}
+            placeholder="Input text"
+            onChange={e => {
+                setText(e.target.value);
+                onValueChange(e.target.value);
+            }}
+        />
+    );
+};
diff --git a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/index.ts b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/index.ts
new file mode 100644
index 000000000..b2ea55a97
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/index.ts
@@ -0,0 +1 @@
+export * from './PendantModifyPanel';
diff --git a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/types.ts b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/types.ts
new file mode 100644
index 000000000..ef5233389
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/types.ts
@@ -0,0 +1,26 @@
+import { OptionType, PendantIconConfig, PendantTypes } from '../types';
+import type { RecastBlockValue, RecastMetaProperty } from '../../recast-block';
+import { FunctionComponent } from 'react';
+
+export type ModifyPanelProps = {
+    type: PendantTypes | PendantTypes[];
+    onSure: (type: PendantTypes, newPropertyItem: any, newValue: any) => void;
+    onDelete?: (type: PendantTypes, value: any, propertyValue: any) => void;
+    onCancel?: () => void;
+    initialValue?: RecastBlockValue;
+    initialOptions?: OptionType[];
+    iconConfig?: PendantIconConfig;
+    isStatusSelect?: boolean;
+    property?: RecastMetaProperty;
+};
+
+export type ModifyPanelContentProps = {
+    type: PendantTypes;
+    onValueChange: (value: any) => void;
+    onPropertyChange?: (newProperty: any) => void;
+    initialValue?: RecastBlockValue;
+    initialOptions?: OptionType[];
+    iconConfig?: PendantIconConfig;
+    isStatusSelect?: boolean;
+    property?: RecastMetaProperty;
+};
diff --git a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx
new file mode 100644
index 000000000..110097467
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx
@@ -0,0 +1,209 @@
+import React, { CSSProperties, useState } from 'react';
+import { Input, Option, Select, Tooltip } from '@toeverything/components/ui';
+import { HelpCenterIcon } from '@toeverything/components/icons';
+import { AsyncBlock } from '../../editor';
+
+import { pendantOptions, IconMap, pendantIconConfig } from '../config';
+import { OptionType, PendantOptions, PendantTypes } from '../types';
+import { PendantModifyPanel } from '../pendant-modify-panel';
+import {
+    StyledDivider,
+    StyledInputEndAdornment,
+    StyledOperationLabel,
+    StyledOperationTitle,
+    StyledPopoverSubTitle,
+    StyledPopoverWrapper,
+} from '../StyledComponent';
+import {
+    PropertyType,
+    useRecastBlock,
+    useRecastBlockMeta,
+    useSelectProperty,
+    genSelectOptionId,
+    InformationProperty,
+} from '../../recast-block';
+import {
+    genInitialOptions,
+    getOfficialSelected,
+    getPendantIconsConfigByType,
+} from '../utils';
+import { usePendant } from '../use-pendant';
+
+export const CreatePendantPanel = ({
+    block,
+    onSure,
+}: {
+    block: AsyncBlock;
+    onSure?: () => void;
+}) => {
+    const [selectedOption, setSelectedOption] = useState<PendantOptions>();
+    const [fieldName, setFieldName] = useState<string>('');
+    const { addProperty, removeProperty } = useRecastBlockMeta();
+    // const { getValue, setValue, getAllValue } = getRecastItemValue(block);
+    const { createSelect } = useSelectProperty();
+    const { setPendant } = usePendant(block);
+    const recastBlock = useRecastBlock();
+
+    return (
+        <StyledPopoverWrapper>
+            <StyledOperationTitle>Add Field</StyledOperationTitle>
+            <StyledOperationLabel>Field Type</StyledOperationLabel>
+            <Select
+                width={284}
+                placeholder="Search for a field type"
+                value={selectedOption}
+                onChange={(selectedValue: PendantOptions) => {
+                    setSelectedOption(selectedValue);
+                }}
+                style={{ marginBottom: 12 }}
+            >
+                {pendantOptions.map(item => {
+                    const Icon = IconMap[item.iconName];
+                    return (
+                        <Option key={item.name} value={item}>
+                            <Icon
+                                style={{
+                                    fontSize: 20,
+                                    marginRight: 12,
+                                    color: '#98ACBD',
+                                }}
+                            />
+                            {item.name}
+                        </Option>
+                    );
+                })}
+            </Select>
+            <StyledOperationLabel>Field Title</StyledOperationLabel>
+            <Input
+                value={fieldName}
+                placeholder="Input your field name here"
+                onChange={e => {
+                    setFieldName(e.target.value);
+                }}
+                endAdornment={
+                    <Tooltip content="Help info here">
+                        <StyledInputEndAdornment>
+                            <HelpCenterIcon />
+                        </StyledInputEndAdornment>
+                    </Tooltip>
+                }
+            />
+            {selectedOption ? (
+                <>
+                    <StyledDivider />
+                    {selectedOption.subTitle && (
+                        <StyledPopoverSubTitle>
+                            {selectedOption.subTitle}
+                        </StyledPopoverSubTitle>
+                    )}
+                    <PendantModifyPanel
+                        type={selectedOption.type}
+                        // Select, MultiSelect, Status use this props as initial property
+                        initialOptions={genInitialOptions(
+                            selectedOption.type,
+                            getPendantIconsConfigByType(selectedOption.type)
+                        )}
+                        iconConfig={getPendantIconsConfigByType(
+                            selectedOption.type
+                        )}
+                        // isStatusSelect={selectedOption.name === 'Status'}
+                        onSure={async (type, newPropertyItem, newValue) => {
+                            if (!fieldName) {
+                                return;
+                            }
+
+                            if (
+                                type === PendantTypes.MultiSelect ||
+                                type === PendantTypes.Select ||
+                                type === PendantTypes.Status
+                            ) {
+                                const newProperty = await createSelect({
+                                    name: fieldName,
+                                    options: newPropertyItem,
+                                    type,
+                                });
+
+                                const selectedId = getOfficialSelected({
+                                    isMulti: type === PendantTypes.MultiSelect,
+                                    options: newProperty.options,
+                                    tempOptions: newPropertyItem,
+                                    tempSelectedId: newValue,
+                                });
+
+                                await setPendant(newProperty, selectedId);
+                            } else if (type === PendantTypes.Information) {
+                                const emailOptions = genOptionWithId(
+                                    newPropertyItem.emailOptions
+                                );
+
+                                const phoneOptions = genOptionWithId(
+                                    newPropertyItem.phoneOptions
+                                );
+
+                                const locationOptions = genOptionWithId(
+                                    newPropertyItem.locationOptions
+                                );
+
+                                const newProperty = await addProperty({
+                                    type,
+                                    name: fieldName,
+                                    emailOptions,
+                                    phoneOptions,
+                                    locationOptions,
+                                } as Omit<InformationProperty, 'id'>);
+
+                                await setPendant(newProperty, {
+                                    email: getOfficialSelected({
+                                        isMulti: true,
+                                        options: emailOptions,
+                                        tempOptions:
+                                            newPropertyItem.emailOptions,
+                                        tempSelectedId: newValue.email,
+                                    }),
+                                    phone: getOfficialSelected({
+                                        isMulti: true,
+                                        options: phoneOptions,
+                                        tempOptions:
+                                            newPropertyItem.phoneOptions,
+                                        tempSelectedId: newValue.phone,
+                                    }),
+                                    location: getOfficialSelected({
+                                        isMulti: true,
+                                        options: locationOptions,
+                                        tempOptions:
+                                            newPropertyItem.locationOptions,
+                                        tempSelectedId: newValue.location,
+                                    }),
+                                });
+                            } else {
+                                // TODO: Color and background should use pendant config, but ui is not design now
+                                const iconConfig =
+                                    getPendantIconsConfigByType(type);
+                                // TODO: Color and background should be choose by user in the future
+                                const newProperty = await addProperty({
+                                    type: type,
+                                    name: fieldName,
+                                    background:
+                                        iconConfig.background as CSSProperties['background'],
+                                    color: iconConfig.color as CSSProperties['color'],
+                                    iconName: iconConfig.name,
+                                });
+
+                                await setPendant(newProperty, newValue);
+                            }
+
+                            onSure?.();
+                        }}
+                    />
+                </>
+            ) : null}
+        </StyledPopoverWrapper>
+    );
+};
+
+const genOptionWithId = (options: OptionType[] = []) => {
+    return options.map((option: OptionType) => ({
+        ...option,
+        id: genSelectOptionId(),
+    }));
+};
diff --git a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx
new file mode 100644
index 000000000..a37f64e6d
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx
@@ -0,0 +1,206 @@
+import React from 'react';
+import { PendantModifyPanel } from '../pendant-modify-panel';
+import type { AsyncBlock } from '../../editor';
+import {
+    genSelectOptionId,
+    InformationProperty,
+    type MultiSelectProperty,
+    type RecastBlockValue,
+    type RecastMetaProperty,
+    type SelectOption,
+    type SelectProperty,
+    useRecastBlockMeta,
+    useSelectProperty,
+} from '../../recast-block';
+import { OptionType, PendantTypes, TempInformationType } from '../types';
+import {
+    getOfficialSelected,
+    getPendantIconsConfigByType,
+    // getPendantIconsConfigByNameOrType,
+} from '../utils';
+import { usePendant } from '../use-pendant';
+import {
+    StyledPopoverWrapper,
+    StyledOperationTitle,
+    StyledOperationLabel,
+    StyledInputEndAdornment,
+    StyledDivider,
+    StyledPopoverContent,
+    StyledPopoverSubTitle,
+} from '../StyledComponent';
+import { IconMap, pendantOptions } from '../config';
+
+type SelectPropertyType = MultiSelectProperty | SelectProperty;
+
+type Props = {
+    value: RecastBlockValue;
+    property: RecastMetaProperty;
+    block: AsyncBlock;
+    hasDelete?: boolean;
+    onSure?: () => void;
+    onCancel?: () => void;
+};
+
+export const UpdatePendantPanel = ({
+    value,
+    property,
+    block,
+    hasDelete = false,
+    onSure,
+    onCancel,
+}: Props) => {
+    const { updateSelect } = useSelectProperty();
+    const { setPendant, removePendant } = usePendant(block);
+    const pendantOption = pendantOptions.find(v => v.type === property.type);
+    const iconConfig = getPendantIconsConfigByType(property.type);
+    const Icon = IconMap[iconConfig.name];
+    const { updateProperty } = useRecastBlockMeta();
+
+    return (
+        <StyledPopoverWrapper>
+            <StyledOperationLabel>Field Type</StyledOperationLabel>
+            <StyledPopoverContent>
+                <Icon
+                    style={{
+                        fontSize: 20,
+                        marginRight: 12,
+                        color: '#98ACBD',
+                    }}
+                />
+                {property.type}
+            </StyledPopoverContent>
+            <StyledOperationLabel>Field Title</StyledOperationLabel>
+            <StyledPopoverContent>{property.name}</StyledPopoverContent>
+            <StyledDivider />
+            {pendantOption.subTitle && (
+                <StyledPopoverSubTitle>
+                    {pendantOption.subTitle}
+                </StyledPopoverSubTitle>
+            )}
+            <PendantModifyPanel
+                initialValue={
+                    {
+                        type: value.type,
+                        value: value.value,
+                    } as RecastBlockValue
+                }
+                iconConfig={getPendantIconsConfigByType(property.type)}
+                property={property}
+                type={property.type}
+                onSure={async (type, newPropertyItem, newValue) => {
+                    if (
+                        type === PendantTypes.MultiSelect ||
+                        type === PendantTypes.Select ||
+                        type === PendantTypes.Status
+                    ) {
+                        const newOptions = newPropertyItem as OptionType[];
+                        let selectProperty = property as SelectPropertyType;
+                        const deleteOptionIds = selectProperty.options
+                            .filter(o => {
+                                return !newOptions.find(no => no.id === o.id);
+                            })
+                            .map(o => o.id);
+                        const addOptions = newOptions.filter(
+                            o => typeof o.id === 'number'
+                        );
+
+                        const { addSelectOptions, removeSelectOptions } =
+                            updateSelect(selectProperty);
+
+                        deleteOptionIds.length &&
+                            (selectProperty = (await removeSelectOptions(
+                                ...deleteOptionIds
+                            )) as SelectPropertyType);
+
+                        addOptions.length &&
+                            (selectProperty = (await addSelectOptions(
+                                ...(addOptions as unknown as Omit<
+                                    SelectOption,
+                                    'id'
+                                >[])
+                            )) as SelectPropertyType);
+
+                        const selectedId = getOfficialSelected({
+                            isMulti: type === PendantTypes.MultiSelect,
+                            options: selectProperty.options,
+                            tempOptions: newPropertyItem,
+                            tempSelectedId: newValue,
+                        });
+
+                        await setPendant(selectProperty, selectedId);
+                    } else if (type === PendantTypes.Information) {
+                        // const { emailOptions, phoneOptions, locationOptions } =
+                        //     property as InformationProperty;
+                        const optionGroup =
+                            newPropertyItem as TempInformationType;
+
+                        const emailOptions = optionGroup.emailOptions.map(
+                            option => {
+                                if (typeof option.id === 'number') {
+                                    option.id = genSelectOptionId();
+                                }
+                                return option;
+                            }
+                        );
+                        const phoneOptions = optionGroup.phoneOptions.map(
+                            option => {
+                                if (typeof option.id === 'number') {
+                                    option.id = genSelectOptionId();
+                                }
+                                return option;
+                            }
+                        );
+                        const locationOptions = optionGroup.locationOptions.map(
+                            option => {
+                                if (typeof option.id === 'number') {
+                                    option.id = genSelectOptionId();
+                                }
+                                return option;
+                            }
+                        );
+
+                        const newProperty = await updateProperty({
+                            ...property,
+                            emailOptions,
+                            phoneOptions,
+                            locationOptions,
+                        } as InformationProperty);
+
+                        await setPendant(newProperty, {
+                            email: getOfficialSelected({
+                                isMulti: true,
+                                options: emailOptions as SelectOption[],
+                                tempOptions: newPropertyItem.emailOptions,
+                                tempSelectedId: newValue.email,
+                            }),
+                            phone: getOfficialSelected({
+                                isMulti: true,
+                                options: phoneOptions as SelectOption[],
+                                tempOptions: newPropertyItem.phoneOptions,
+                                tempSelectedId: newValue.phone,
+                            }),
+                            location: getOfficialSelected({
+                                isMulti: true,
+                                options: locationOptions as SelectOption[],
+                                tempOptions: newPropertyItem.locationOptions,
+                                tempSelectedId: newValue.location,
+                            }),
+                        });
+                    } else {
+                        await setPendant(property, newValue);
+                    }
+
+                    onSure?.();
+                }}
+                onDelete={
+                    hasDelete
+                        ? async () => {
+                              await removePendant(property);
+                          }
+                        : null
+                }
+                onCancel={onCancel}
+            />
+        </StyledPopoverWrapper>
+    );
+};
diff --git a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/index.ts b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/index.ts
new file mode 100644
index 000000000..0a9a9c235
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/index.ts
@@ -0,0 +1,2 @@
+export { CreatePendantPanel } from './CreatePendantPanel';
+export { UpdatePendantPanel } from './UpdatePendantPanel';
diff --git a/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx b/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx
new file mode 100644
index 000000000..f10310c5e
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx
@@ -0,0 +1,51 @@
+import React, { FC, useRef } from 'react';
+import { AsyncBlock } from '../../editor';
+import { PendantHistoryPanel } from '../pendant-history-panel';
+import { Popover, type PopperHandler } from '@toeverything/components/ui';
+import { AddPendantPopover } from '../AddPendantPopover';
+
+export const PendantPopover: FC<{
+    block: AsyncBlock;
+    container: HTMLElement;
+    children?: React.ReactElement;
+}> = props => {
+    const { block, children, container } = props;
+    const popoverHandlerRef = useRef<PopperHandler>();
+    return (
+        <Popover
+            ref={popoverHandlerRef}
+            pointerEnterDelay={300}
+            pointerLeaveDelay={200}
+            placement="bottom-start"
+            container={container}
+            // visible={true}
+            // trigger="click"
+            content={
+                <PendantHistoryPanel
+                    block={block}
+                    endElement={
+                        <AddPendantPopover
+                            block={block}
+                            onSure={() => {
+                                popoverHandlerRef.current?.setVisible(false);
+                            }}
+                            offset={[0, -30]}
+                            trigger="click"
+                        />
+                    }
+                />
+            }
+            offset={[0, 0]}
+            style={popoverContainerStyle}
+        >
+            {children}
+        </Popover>
+    );
+};
+
+const popoverContainerStyle = {
+    padding: '8px 0 0 12px',
+    maxWidth: '700px',
+    minHeight: '36px',
+    BoxSizing: 'border-box',
+};
diff --git a/libs/components/editor-core/src/block-pendant/pendant-popover/index.ts b/libs/components/editor-core/src/block-pendant/pendant-popover/index.ts
new file mode 100644
index 000000000..b9b7d9ce2
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-popover/index.ts
@@ -0,0 +1 @@
+export * from './PendantPopover';
diff --git a/libs/components/editor-core/src/block-pendant/pendant-render/PandentRender.tsx b/libs/components/editor-core/src/block-pendant/pendant-render/PandentRender.tsx
new file mode 100644
index 000000000..484c88904
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-render/PandentRender.tsx
@@ -0,0 +1,108 @@
+import React, { useRef, useState } from 'react';
+import { AsyncBlock } from '../../editor';
+import {
+    getRecastItemValue,
+    PropertyType,
+    RecastBlockValue,
+    RecastMetaProperty,
+    useRecastBlockMeta,
+} from '../../recast-block';
+import { Popover, PopperHandler, styled } from '@toeverything/components/ui';
+import { PendantTag } from '../PendantTag';
+
+import { pendantColors } from '../config';
+import { UpdatePendantPanel } from '../pendant-operation-panel';
+import { AddPendantPopover } from '../AddPendantPopover';
+import { PendantTypes } from '../types';
+
+export const PendantRender = ({ block }: { block: AsyncBlock }) => {
+    const [propertyWithValue, setPropertyWithValue] = useState<{
+        value: RecastBlockValue;
+        property: RecastMetaProperty;
+    }>();
+    const popoverHandlerRef = useRef<{ [key: string]: PopperHandler }>({});
+
+    const { getProperties } = useRecastBlockMeta();
+
+    const { getValue, removeValue } = getRecastItemValue(block);
+
+    const properties = getProperties();
+
+    const propertyWithValues = properties
+        .map(property => {
+            return {
+                value: getValue(property.id),
+                property,
+            };
+        })
+        .filter(v => v.value);
+
+    return (
+        <BlockPendantContainer>
+            {propertyWithValues.map(pWithV => {
+                const { id, type } = pWithV.value;
+
+                /* （暂时关闭，HOOK中需要加入Scene的判断）Remove duplicate label(tag) */
+                // if (groupBy?.id === id) {
+                //     return null;
+                // }
+
+                return (
+                    <Popover
+                        ref={ref => {
+                            popoverHandlerRef.current[id] = ref;
+                        }}
+                        key={id}
+                        trigger="click"
+                        placement="bottom-start"
+                        content={
+                            propertyWithValue && (
+                                <UpdatePendantPanel
+                                    block={block}
+                                    value={propertyWithValue.value}
+                                    property={propertyWithValue.property}
+                                    hasDelete={false}
+                                    onSure={() => {
+                                        popoverHandlerRef.current[
+                                            id
+                                        ].setVisible(false);
+                                    }}
+                                    onCancel={() => {
+                                        popoverHandlerRef.current[
+                                            id
+                                        ].setVisible(false);
+                                    }}
+                                />
+                            )
+                        }
+                    >
+                        <PendantTag
+                            key={id}
+                            style={{
+                                marginRight: 10,
+                                marginTop: 4,
+                            }}
+                            onClick={e => {
+                                setPropertyWithValue(pWithV);
+                            }}
+                            value={pWithV.value}
+                            property={pWithV.property}
+                            closeable
+                            onClose={async () => {
+                                await removeValue(pWithV.property.id);
+                            }}
+                        />
+                    </Popover>
+                );
+            })}
+            {propertyWithValues.length ? (
+                <AddPendantPopover block={block} iconStyle={{ marginTop: 5 }} />
+            ) : null}
+        </BlockPendantContainer>
+    );
+};
+
+const BlockPendantContainer = styled('div')`
+    display: flex;
+    flex-wrap: wrap;
+`;
diff --git a/libs/components/editor-core/src/block-pendant/pendant-render/index.ts b/libs/components/editor-core/src/block-pendant/pendant-render/index.ts
new file mode 100644
index 000000000..685f3dda6
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/pendant-render/index.ts
@@ -0,0 +1 @@
+export * from './PandentRender';
diff --git a/libs/components/editor-core/src/block-pendant/types.ts b/libs/components/editor-core/src/block-pendant/types.ts
new file mode 100644
index 000000000..88ed2f3be
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/types.ts
@@ -0,0 +1,54 @@
+import type { ReactElement, CSSProperties } from 'react';
+import {
+    PropertyType as PendantTypes,
+    SelectOption,
+    SelectOptionId,
+} from '../recast-block';
+import { FunctionComponent } from 'react';
+import { TextFontIcon } from '@toeverything/components/icons';
+
+export { PropertyType as PendantTypes } from '../recast-block';
+
+export enum IconNames {
+    TEXT = 'text',
+    DATE = 'date',
+    STATUS = 'status',
+    MULTI_SELECT = 'multiSelect',
+    SINGLE_SELECT = 'singleSelect',
+    COLLABORATOR = 'collaborator',
+    INFORMATION = 'information',
+    PHONE = 'phone',
+    LOCATION = 'location',
+    EMAIL = 'email',
+}
+
+export type BasicPendantOption = {
+    type: PendantTypes | PendantTypes[];
+    name: string;
+};
+
+export type PendantOptions = {
+    name: string;
+    type: PendantTypes;
+    iconName: IconNames;
+    subTitle: string;
+};
+
+export type PendantIconConfig = {
+    name: IconNames;
+    // background: CSSProperties['background'];
+    // color: CSSProperties['color'];
+    background: CSSProperties['background'] | CSSProperties['background'][];
+    color: CSSProperties['color'] | CSSProperties['color'][];
+};
+
+export type OptionIdType = SelectOptionId | number;
+export type OptionType = Omit<SelectOption, 'id'> & {
+    id: OptionIdType;
+};
+
+export type TempInformationType = {
+    phoneOptions: OptionType[];
+    locationOptions: OptionType[];
+    emailOptions: OptionType[];
+};
diff --git a/libs/components/editor-core/src/block-pendant/use-pendant.ts b/libs/components/editor-core/src/block-pendant/use-pendant.ts
new file mode 100644
index 000000000..e936d2532
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/use-pendant.ts
@@ -0,0 +1,41 @@
+import { removePropertyValueRecord, setLatestPropertyValue } from './utils';
+import { AsyncBlock } from '../editor';
+import {
+    getRecastItemValue,
+    RecastMetaProperty,
+    useRecastBlock,
+} from '../recast-block';
+
+export const usePendant = (block: AsyncBlock) => {
+    // const { getProperties, removeProperty } = useRecastBlockMeta();
+    const recastBlock = useRecastBlock();
+    const { getValue, setValue, removeValue } = getRecastItemValue(block);
+    // const { updateSelect } = useSelectProperty();
+
+    const setPendant = async (property: RecastMetaProperty, newValue: any) => {
+        const nv = {
+            id: property.id,
+            type: property.type,
+            value: newValue,
+        };
+        await setValue(nv);
+        setLatestPropertyValue({
+            recastBlockId: recastBlock.id,
+            blockId: block.id,
+            value: nv,
+        });
+    };
+
+    const removePendant = async (property: RecastMetaProperty) => {
+        await removeValue(property.id);
+        removePropertyValueRecord({
+            recastBlockId: block.id,
+            propertyId: property.id,
+        });
+    };
+
+    return {
+        setPendant,
+        removePendant,
+    };
+};
diff --git a/libs/components/editor-core/src/block-pendant/utils.ts b/libs/components/editor-core/src/block-pendant/utils.ts
new file mode 100644
index 000000000..e265813f2
--- /dev/null
+++ b/libs/components/editor-core/src/block-pendant/utils.ts
@@ -0,0 +1,206 @@
+import {
+    PropertyType,
+    RecastBlockValue,
+    RecastPropertyId,
+    RecastMetaProperty,
+    SelectOption,
+    SelectOptionId,
+} from '../recast-block';
+import { OptionIdType, OptionType } from './types';
+import { pendantIconConfig } from './config';
+import { PendantIconConfig, PendantTypes } from './types';
+type Props = {
+    recastBlockId: string;
+    blockId: string;
+    value: RecastBlockValue;
+};
+
+type StorageMap = {
+    [recastBlockId: string]: {
+        [propertyId: RecastPropertyId]: {
+            blockId: string;
+            value: RecastBlockValue;
+        };
+    };
+};
+
+const LOCAL_STROAGE_NAME = 'TEMPORARY_PENDANT_DATA';
+
+const ensureLocalStorage = () => {
+    const data = localStorage.getItem(LOCAL_STROAGE_NAME);
+    if (!data) {
+        localStorage.setItem(LOCAL_STROAGE_NAME, JSON.stringify({}));
+    }
+};
+
+export const setLatestPropertyValue = ({
+    recastBlockId,
+    blockId,
+    value,
+}: Props) => {
+    ensureLocalStorage();
+    const data: StorageMap = JSON.parse(
+        localStorage.getItem(LOCAL_STROAGE_NAME) as string
+    );
+
+    if (!data[recastBlockId]) {
+        data[recastBlockId] = {};
+    }
+    const propertyValueRecord = data[recastBlockId];
+    const propertyId = value.id;
+    propertyValueRecord[propertyId] = {
+        blockId: blockId,
+        value,
+    };
+
+    localStorage.setItem(LOCAL_STROAGE_NAME, JSON.stringify(data));
+};
+
+export const getLatestPropertyValue = ({
+    recastBlockId,
+}: {
+    recastBlockId: string;
+    blockId: string;
+}): Array<{
+    blockId: string;
+    value: RecastBlockValue;
+    propertyId: RecastPropertyId;
+}> => {
+    ensureLocalStorage();
+    const data: StorageMap = JSON.parse(
+        localStorage.getItem(LOCAL_STROAGE_NAME) as string
+    );
+
+    if (!data[recastBlockId]) {
+        return [];
+    }
+
+    const returnData = [];
+    for (const propertyId in data[recastBlockId]) {
+        returnData.push({
+            propertyId: propertyId as RecastPropertyId,
+            ...data[recastBlockId][propertyId as RecastPropertyId],
+        });
+    }
+
+    return returnData;
+};
+
+export const removePropertyValueRecord = ({
+    recastBlockId,
+    propertyId,
+}: {
+    recastBlockId: string;
+    propertyId: RecastPropertyId;
+}) => {
+    ensureLocalStorage();
+    const data: StorageMap = JSON.parse(
+        localStorage.getItem(LOCAL_STROAGE_NAME) as string
+    );
+    if (!data[recastBlockId]) {
+        return;
+    }
+
+    delete data[recastBlockId][propertyId];
+
+    localStorage.setItem(LOCAL_STROAGE_NAME, JSON.stringify(data));
+};
+
+/**
+ * In select pendant panel, use mock options instead of use `createSelect` when add or delete option
+ * so the option`s id is index number, not `SelectOptionId`
+ * need to convert index number to id when Select is created and set selected
+ *
+ * 1. find index in mock options
+ * 2. find generated options for index
+ *
+ * **/
+export const getOfficialSelected = ({
+    isMulti,
+    options,
+    tempSelectedId,
+    tempOptions,
+}: {
+    isMulti: boolean;
+    options: SelectOption[];
+    tempSelectedId: OptionIdType | OptionIdType[];
+    tempOptions: OptionType[];
+}) => {
+    let selectedId: string | string[] = isMulti ? [] : '';
+
+    if (isMulti) {
+        const selectedIndex = (tempSelectedId as OptionIdType[])
+            .map(id => {
+                return tempOptions.findIndex((o: OptionType) => o.id === id);
+            })
+            .filter(index => index != -1);
+        selectedId = selectedIndex.map((index: number) => {
+            return options[index].id;
+        });
+    } else {
+        const selectedIndex = tempOptions.findIndex(
+            (o: OptionType) => o.id === tempSelectedId
+        );
+        selectedId = options[selectedIndex]?.id || '';
+    }
+    return selectedId;
+};
+
+export const getPendantIconsConfigByType = (
+    pendantType: string
+): PendantIconConfig => {
+    return pendantIconConfig[pendantType];
+};
+
+export const getPendantIconsConfigByName = (
+    pendantName?: string
+): PendantIconConfig => {
+    return pendantIconConfig[pendantName];
+};
+
+export const genBasicOption = ({
+    index,
+    iconConfig,
+    name = '',
+}: {
+    index: number;
+    iconConfig: PendantIconConfig;
+    name?: string;
+}): OptionType => {
+    const iconName = iconConfig.name;
+    const background = Array.isArray(iconConfig.background)
+        ? iconConfig.background[index % iconConfig.background.length]
+        : iconConfig.background;
+    const color = Array.isArray(iconConfig.color)
+        ? iconConfig.color[index % iconConfig.color.length]
+        : iconConfig.color;
+
+    return {
+        id: index,
+        name,
+        color,
+        background,
+        iconName,
+    };
+};
+
+/**
+ * Status Pendant is a Select Pendant built-in some options
+ * **/
+export const genInitialOptions = (
+    type: PendantTypes,
+    iconConfig: PendantIconConfig
+) => {
+    if (type === PendantTypes.Status) {
+        return [
+            genBasicOption({ index: 0, iconConfig, name: 'No Started' }),
+            genBasicOption({
+                index: 1,
+                iconConfig,
+                name: 'In Progress',
+            }),
+            genBasicOption({ index: 2, iconConfig, name: 'Complete' }),
+        ];
+    }
+    return [genBasicOption({ index: 0, iconConfig })];
+};
diff --git a/libs/components/editor-core/src/contexts.tsx b/libs/components/editor-core/src/contexts.tsx
new file mode 100644
index 000000000..cdd4dbf30
--- /dev/null
+++ b/libs/components/editor-core/src/contexts.tsx
@@ -0,0 +1,37 @@
+import { createContext, useContext } from 'react';
+import type { BlockEditor, AsyncBlock } from './editor';
+import type { Column } from '@toeverything/datasource/db-service';
+import { genErrorObj } from '@toeverything/utils';
+
+export const RootContext = createContext<{
+    editor: BlockEditor;
+    // TODO: Temporary fix, dependencies in the new architecture are bottom-up, editors do not need to be passed down from the top
+    editorElement: () => JSX.Element;
+}>(
+    genErrorObj(
+        'Failed to get context! The context only can use under the "render-root"'
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ) as any
+);
+
+export const useEditor = () => {
+    return useContext(RootContext);
+};
+
+/**
+ * @deprecated
+ */
+export const BlockContext = createContext<AsyncBlock>(null as any);
+
+/**
+ * Context of column information
+ *
+ * @deprecated
+ */
+export const ColumnsContext = createContext<{
+    fromId: string;
+    columns: Column[];
+}>({
+    fromId: '',
+    columns: [],
+});
diff --git a/libs/components/editor-core/src/drag-drop-wrapper/DragDropWrapper.tsx b/libs/components/editor-core/src/drag-drop-wrapper/DragDropWrapper.tsx
new file mode 100644
index 000000000..f2d7a2afc
--- /dev/null
+++ b/libs/components/editor-core/src/drag-drop-wrapper/DragDropWrapper.tsx
@@ -0,0 +1,38 @@
+import { AsyncBlock, BlockEditor } from '../editor';
+import { ReactElement } from 'react';
+
+export const dragDropWrapperClass = 'drag-drop-wrapper';
+
+interface DragDropWrapperProps {
+    editor: BlockEditor;
+    block: AsyncBlock;
+    children: ReactElement | null;
+}
+
+export function DragDropWrapper({
+    children,
+    editor,
+    block,
+}: DragDropWrapperProps) {
+    const handler_drag_over: React.DragEventHandler<
+        HTMLDivElement
+    > = async event => {
+        const rootDom = await editor.getBlockDomById(editor.getRootBlockId());
+
+        if (block.dom && rootDom) {
+            editor.getHooks().afterOnNodeDragOver(event, {
+                blockId: block.id,
+                dom: block.dom,
+                rect: block.dom?.getBoundingClientRect(),
+                rootRect: rootDom.getBoundingClientRect(),
+                type: block.type,
+                properties: block.getProperties(),
+            });
+        }
+    };
+    return (
+        <div onDragOver={handler_drag_over} className={dragDropWrapperClass}>
+            {children}
+        </div>
+    );
+}
diff --git a/libs/components/editor-core/src/drag-drop-wrapper/index.ts b/libs/components/editor-core/src/drag-drop-wrapper/index.ts
new file mode 100644
index 000000000..bfade2043
--- /dev/null
+++ b/libs/components/editor-core/src/drag-drop-wrapper/index.ts
@@ -0,0 +1 @@
+export * from './DragDropWrapper';
diff --git a/libs/components/editor-core/src/editor/block/async-block.ts b/libs/components/editor-core/src/editor/block/async-block.ts
new file mode 100644
index 000000000..8c422b996
--- /dev/null
+++ b/libs/components/editor-core/src/editor/block/async-block.ts
@@ -0,0 +1,486 @@
+/* eslint-disable max-lines */
+import EventEmitter from 'eventemitter3';
+import {
+    ReturnEditorBlock,
+    UpdateEditorBlock,
+    DefaultColumnsValue,
+    Protocol,
+} from '@toeverything/datasource/db-service';
+import {
+    isDev,
+    createNoopWithMessage,
+    lowerFirst,
+    last,
+} from '@toeverything/utils';
+import { BlockProvider } from './block-provider';
+import { BaseView, BaseView as BlockView } from './../views/base-view';
+
+type EventType = 'update';
+export interface EventData {
+    block: AsyncBlock;
+    oldData?: ReturnEditorBlock;
+}
+type EventCallback = (eventData: EventData) => void;
+
+export interface WorkspaceAndBlockId {
+    workspace: string;
+    id: string;
+}
+
+type Unobserve = () => void;
+type Observe = (
+    workspaceAndBlockId: WorkspaceAndBlockId,
+    callback: (blockData: ReturnEditorBlock) => void
+) => Promise<Unobserve>;
+
+export interface BlockNodeCtorOptions {
+    initData: ReturnEditorBlock;
+    viewClass: BaseView;
+    services: AsyncBlockServices;
+}
+interface AsyncBlockServices {
+    /**
+     * Used to monitor block data changes
+     */
+    observe: Observe;
+    /**
+     * for loading child nodes
+     */
+    load: (
+        workspaceAndBlockId: WorkspaceAndBlockId
+    ) => Promise<AsyncBlock | null>;
+    /**
+     * Used to update block data
+     */
+    update: (patches: UpdateEditorBlock) => Promise<boolean>;
+    /**
+     * delete block
+     */
+    remove: (workspaceAndBlockId: WorkspaceAndBlockId) => Promise<boolean>;
+}
+
+interface LifeCycleHook {
+    /**
+     * Triggered when the block data changes
+     */
+    onUpdate: (event: EventData) => Promise<void>;
+}
+function eventNameFromHookName(hookName: string) {
+    return hookName.replace(/^on([A-Z].+)/, (matched, name) =>
+        lowerFirst(name)
+    );
+}
+
+export class AsyncBlock {
+    private raw_data: ReturnEditorBlock;
+    private services: AsyncBlockServices = {
+        observe: createNoopWithMessage({
+            module: 'AsyncBlock',
+            message: 'observe not set',
+        }),
+        load: createNoopWithMessage({
+            module: 'AsyncBlock',
+            message: 'load not set',
+        }),
+        update: createNoopWithMessage({
+            module: 'AsyncBlock',
+            message: 'update not set',
+        }),
+        remove: createNoopWithMessage({
+            module: 'AsyncBlock',
+            message: 'remove not set',
+        }),
+    };
+    private life_cycle?: LifeCycleHook = {
+        onUpdate: createNoopWithMessage({
+            module: 'AsyncBlock',
+            message: 'onUpdate not set',
+        }),
+    };
+
+    private event_emitter = new EventEmitter();
+
+    private viewClass: BaseView;
+
+    public dom?: HTMLElement;
+    public renderPath: string[] = [];
+
+    public blockProvider?: BlockProvider;
+    public firstCreateFlag?: boolean;
+    private initialized = false;
+
+    constructor(options: BlockNodeCtorOptions) {
+        const { initData, viewClass, services } = options;
+        const { id } = initData;
+        this.renderPath = [id];
+        this.raw_data = initData;
+        this.viewClass = viewClass;
+        this.services = services;
+    }
+
+    registerProvider(options: { blockView: BlockView }) {
+        this.blockProvider = new BlockProvider({
+            block: this as AsyncBlock,
+            blockView: options.blockView,
+        });
+    }
+
+    dispose() {
+        this.unobserve?.();
+        this.unobserve = undefined;
+    }
+
+    setLifeCycle(lifeCycle: LifeCycleHook) {
+        if (this.life_cycle) {
+            Object.entries(this.life_cycle).forEach(([key, callback]) => {
+                this.off(eventNameFromHookName(key) as EventType, callback);
+            });
+        }
+        this.life_cycle = lifeCycle;
+        Object.entries(this.life_cycle).forEach(([key, callback]) => {
+            this.on(eventNameFromHookName(key) as EventType, callback);
+        });
+    }
+
+    // Internally monitor db block data changes
+    private unobserve?: Unobserve;
+    async init() {
+        if (this.initialized) {
+            console.error(
+                'The block is already initialized! Please do not repeat call the init!',
+                this
+            );
+            return;
+        }
+        this.initialized = true;
+        this.raw_data = await this.filterPageInvalidChildren(this.raw_data);
+        const { workspace, id } = this.raw_data;
+        this.unobserve = await this.services.observe(
+            { workspace, id },
+            async blockData => {
+                const oldData = this.raw_data;
+                this.raw_data = blockData;
+                this.raw_data = await this.filterPageInvalidChildren(blockData);
+                this.emit('update', { block: this, oldData });
+            }
+        );
+    }
+
+    private on(eventName: EventType, callback: EventCallback) {
+        return this.event_emitter.on(eventName, callback);
+    }
+
+    private off(eventName: EventType, callback: EventCallback) {
+        return this.event_emitter.off(eventName, callback);
+    }
+
+    private emit(eventName: EventType, eventData: EventData) {
+        return this.event_emitter.emit(eventName, eventData);
+    }
+
+    onUpdate(callback: (event: EventData) => void) {
+        this.on('update', callback);
+        return () => {
+            this.off('update', callback);
+        };
+    }
+
+    get id() {
+        return this.raw_data.id;
+    }
+
+    get workspace() {
+        return this.raw_data.workspace;
+    }
+
+    get type() {
+        return this.raw_data.type;
+    }
+
+    get created() {
+        return this.raw_data.created;
+    }
+
+    get createdDate() {
+        if (isDev) {
+            return new Date(this.created);
+        }
+        console.error('createDate is only allowed in development environment');
+        return undefined;
+    }
+
+    get lastUpdated() {
+        return this.raw_data.lastUpdated;
+    }
+
+    get lastUpdatedDate() {
+        if (isDev) {
+            return new Date(this.lastUpdated);
+        }
+        console.error(
+            'only allowed to use lastUpdatedDate in development environment'
+        );
+        return undefined;
+    }
+
+    get columns() {
+        return this.raw_data.columns;
+    }
+
+    get parentId() {
+        return this.raw_data.parentId;
+    }
+
+    async parent() {
+        return this.load_node(this.raw_data.parentId || '');
+    }
+
+    get childrenIds() {
+        return this.raw_data.children;
+    }
+
+    async children() {
+        return await this.load_nodes(this.raw_data.children);
+    }
+
+    async childAt(position: number) {
+        const child_id = this.raw_data.children[position];
+        if (!child_id) {
+            return null;
+        }
+        return this.load_node(child_id);
+    }
+
+    /**
+     * Returns the index of the child in the group, or -1 if it is not present.
+     */
+    findChildIndex(childId: string) {
+        return this.raw_data.children.indexOf(childId);
+    }
+
+    async firstChild() {
+        const children = this.raw_data.children;
+        if (!children?.length) {
+            return null;
+        }
+        return this.load_node(children[0]);
+    }
+
+    async lastChild() {
+        const children = this.raw_data.children;
+        if (!children?.length) {
+            return null;
+        }
+        return this.load_node(children[children.length - 1]);
+    }
+
+    /**
+     * Remove all children from block
+     */
+    async removeChildren() {
+        return this.services.update({
+            id: this.id,
+            workspace: this.raw_data.workspace,
+            children: [],
+        });
+    }
+
+    async nextSibling() {
+        const parent = await this.parent();
+        if (!parent) {
+            return null;
+        }
+        const position = parent.findChildIndex(this.id);
+        if (position === -1) {
+            return null;
+        }
+        return await parent.childAt(position + 1);
+    }
+
+    async nextSiblings() {
+        const parent = await this.parent();
+        if (!parent) {
+            return [];
+        }
+        const position = parent.findChildIndex(this.id);
+        if (position === -1) {
+            return [];
+        }
+        return await this.load_nodes(
+            parent.raw_data.children.slice(position + 1)
+        );
+    }
+
+    async previousSibling() {
+        const parent = await this.parent();
+        if (!parent) {
+            return null;
+        }
+        const position = parent.findChildIndex(this.id);
+        if (position < 1) {
+            return null;
+        }
+        return await parent.childAt(position - 1);
+    }
+
+    async physicallyPerviousSibling(): Promise<null | AsyncBlock> {
+        let preNode = await this.previousSibling();
+        // if preNode is not parent level check if previous block has selectable children
+        if (preNode) {
+            let children = await preNode.children();
+            // loop until find the latest deepest children block
+            while (children && children.length) {
+                preNode = last(children) || null;
+                if (preNode) {
+                    children = await preNode.children();
+                }
+            }
+        } else {
+            preNode = await this.parent();
+        }
+        return preNode || null;
+    }
+
+    async previousSiblings() {
+        const parent = await this.parent();
+        if (!parent) {
+            return [];
+        }
+        const position = parent.findChildIndex(this.id);
+        if (position < 1) {
+            return [];
+        }
+        return await this.load_nodes(
+            parent.raw_data.children.slice(0, position)
+        );
+    }
+
+    async insert(position: number, blocks: AsyncBlock[]) {
+        const children = [...this.raw_data.children];
+        children.splice(position, 0, ...blocks.map(block => block.id));
+        return this.services.update({
+            id: this.id,
+            workspace: this.raw_data.workspace,
+            children,
+        });
+    }
+
+    async append(...blocks: AsyncBlock[]) {
+        return await this.insert(this.raw_data.children.length, blocks);
+    }
+
+    async prepend(...blocks: AsyncBlock[]) {
+        return await this.insert(0, blocks);
+    }
+
+    async after(...blocks: AsyncBlock[]) {
+        const parent = await this.parent();
+        if (!parent) {
+            return false;
+        }
+        const position = parent.findChildIndex(this.id);
+        if (position === -1) {
+            return false;
+        }
+        return await parent.insert(position + 1, blocks);
+    }
+
+    async before(...blocks: AsyncBlock[]) {
+        const parent = await this.parent();
+        if (!parent) {
+            return false;
+        }
+        const position = parent.findChildIndex(this.id);
+        if (position === -1) {
+            return false;
+        }
+        return await parent.insert(position, blocks);
+    }
+
+    async remove(): Promise<boolean> {
+        const parentId = this.parentId;
+        const ret = await this.services.remove({
+            workspace: this.raw_data.workspace,
+            id: this.raw_data.id,
+        });
+        const parent = await this.services.load({
+            workspace: this.raw_data.workspace,
+            id: parentId,
+        });
+        if (ret && parent !== null && parent.viewClass) {
+            return await parent.viewClass.onDeleteChild(parent);
+        }
+        return ret;
+    }
+
+    async setType(type: ReturnEditorBlock['type']) {
+        return this.services.update({
+            id: this.id,
+            workspace: this.raw_data.workspace,
+            type,
+        });
+    }
+
+    getProperty<
+        T extends keyof DefaultColumnsValue = keyof DefaultColumnsValue
+    >(key: T): DefaultColumnsValue[T] | undefined {
+        return (this.raw_data.properties as any)?.[
+            key
+        ] as DefaultColumnsValue[T];
+    }
+
+    getProperties(): DefaultColumnsValue {
+        return this.raw_data.properties as DefaultColumnsValue;
+    }
+
+    async setProperty<
+        T extends keyof DefaultColumnsValue = keyof DefaultColumnsValue
+    >(key: T, value: DefaultColumnsValue[T]) {
+        return this.services.update({
+            id: this.id,
+            workspace: this.raw_data.workspace,
+            properties: {
+                [key]: value,
+            },
+        });
+    }
+
+    async setProperties(properties: Partial<DefaultColumnsValue>) {
+        return this.services.update({
+            id: this.id,
+            workspace: this.raw_data.workspace,
+            properties: properties as Record<string, unknown>,
+        });
+    }
+
+    private async load_node(id: string): Promise<AsyncBlock | null> {
+        return await this.services.load({
+            workspace: this.raw_data.workspace,
+            id,
+        });
+    }
+
+    private async load_nodes(ids: string[]): Promise<Array<AsyncBlock>> {
+        return (await Promise.all(ids.map(id => this.load_node(id)))).filter(
+            Boolean
+        ) as AsyncBlock[];
+    }
+
+    /**
+     * Filter the shape children from the page block
+     */
+    async filterPageInvalidChildren(rawData: ReturnEditorBlock) {
+        if (rawData.type !== Protocol.Block.Type.page) {
+            return rawData;
+        }
+        // The load node method will filter invalid children automatically
+        const children = await this.load_nodes(this.raw_data.children);
+        rawData.children = children.map(child => child.id);
+        return rawData;
+    }
+
+    // Get block location information
+    getBoundingClientRect() {
+        return this.dom?.getBoundingClientRect();
+    }
+}
diff --git a/libs/components/editor-core/src/editor/block/block-helper.ts b/libs/components/editor-core/src/editor/block/block-helper.ts
new file mode 100644
index 000000000..1c1fafa99
--- /dev/null
+++ b/libs/components/editor-core/src/editor/block/block-helper.ts
@@ -0,0 +1,312 @@
+import type {
+    fontColorPalette,
+    SlateUtils,
+    TextAlignOptions,
+} from '@toeverything/components/common';
+import { Point, Selection as SlateSelection } from 'slate';
+import { Editor } from '../editor';
+
+type TextUtilsFunctions =
+    | 'getString'
+    | 'getStringBetweenStartAndSelection'
+    | 'getStringBetweenSelection'
+    | 'setSearchSlash'
+    | 'removeSearchSlash'
+    | 'getSearchSlashText'
+    | 'selectionToSlateRange'
+    | 'transformPoint'
+    | 'toggleTextFormatBySelection'
+    | 'isTextFormatActive'
+    | 'setLinkModalVisible'
+    | 'setParagraphAlignBySelection'
+    | 'setTextFontColorBySelection'
+    | 'setTextFontBgColorBySelection'
+    | 'setCommentBySelection'
+    | 'resolveCommentById'
+    | 'getCommentsIdsBySelection'
+    | 'getCurrentSelection'
+    | 'removeSelection'
+    | 'insertReference'
+    | 'isCollapsed'
+    | 'blur';
+
+type ExtendedTextUtils = SlateUtils & {
+    setLinkModalVisible: (visible: boolean) => void;
+};
+
+type TextUtils = { [K in TextUtilsFunctions]: ExtendedTextUtils[K] };
+
+/**
+ *
+ * block helper aim to get block`s self infos
+ * @class BlockHelper
+ */
+export class BlockHelper {
+    private _editor: Editor;
+    private _blockTextUtilsMap: Record<string, TextUtils> = {};
+
+    constructor(editor: Editor) {
+        this._editor = editor;
+    }
+
+    public registerTextUtils(blockId: string, utils: ExtendedTextUtils) {
+        this._blockTextUtilsMap[blockId] = utils;
+    }
+
+    public unRegisterTextUtils(blockId: string) {
+        delete this._blockTextUtilsMap[blockId];
+    }
+
+    /**
+     *
+     * get block serializer text by block id
+     * @memberof BlockHelper
+     */
+    public getBlockText(blockId: string) {
+        const text_utils = this._blockTextUtilsMap[blockId];
+        if (text_utils) {
+            return text_utils.getString();
+        }
+        console.warn('Could find the block text utils');
+        return '';
+    }
+
+    /**
+     *
+     * get serializer text between start and end selection by block id
+     * @memberof BlockHelper
+     */
+    public getBlockTextBeforeSelection(blockId: string) {
+        const text_utils = this._blockTextUtilsMap[blockId];
+        if (text_utils) {
+            return text_utils.getStringBetweenStartAndSelection();
+        }
+        console.warn('Could find the block text utils');
+        return '';
+    }
+
+    public getBlockTextBetweenSelection(blockId: string) {
+        const text_utils = this._blockTextUtilsMap[blockId];
+        if (text_utils) {
+            return text_utils.getStringBetweenSelection(true);
+        }
+        console.warn('Could find the block text utils');
+        return '';
+    }
+
+    public setBlockBlur(blockId: string) {
+        const text_utils = this._blockTextUtilsMap[blockId];
+        if (text_utils) {
+            return text_utils.blur();
+        }
+        console.warn('Could find the block text utils');
+        return '';
+    }
+
+    /**
+     *
+     * set slash character into a special node
+     * @param {string} blockId
+     * @param {Point} point
+     * @memberof BlockHelper
+     */
+    public setSearchSlash(blockId: string, point: Point) {
+        const text_utils = this._blockTextUtilsMap[blockId];
+        if (text_utils) {
+            text_utils.setSearchSlash(point);
+        } else {
+            console.warn('Could find the block text utils');
+        }
+    }
+
+    /**
+     *
+     * change slash node back to normal node,
+     * if afferent remove flash remove slash symbol
+     * @param {string} blockId
+     * @param {boolean} [isRemoveSlash]
+     * @memberof BlockHelper
+     */
+    public removeSearchSlash(blockId: string, isRemoveSlash?: boolean) {
+        const text_utils = this._blockTextUtilsMap[blockId];
+        if (text_utils) {
+            text_utils.removeSearchSlash(isRemoveSlash);
+        } else {
+            console.warn('Could find the block text utils');
+        }
+    }
+
+    public insertReference(
+        reference: string,
+        blockId: string,
+        selection: Selection,
+        offset: number
+    ) {
+        const text_utils = this._blockTextUtilsMap[blockId];
+        if (text_utils) {
+            const offsetSelection = window.getSelection();
+            offsetSelection.setBaseAndExtent(
+                selection.anchorNode,
+                selection.anchorOffset,
+                selection.focusNode,
+                selection.focusOffset + offset
+            );
+
+            text_utils.removeSelection(offsetSelection);
+            text_utils.insertReference(reference);
+
+            // range.
+            // text_utils.toggleTextFormatBySelection(format, range);
+        }
+        console.warn('Could find the block text utils');
+    }
+
+    /**
+     *
+     * convert browser selection to slate rang
+     * @memberof BlockHelper
+     */
+    public selectionToSlateRange(blockId: string, selection: Selection) {
+        const text_utils = this._blockTextUtilsMap[blockId];
+        if (text_utils) {
+            return text_utils.selectionToSlateRange(selection);
+        }
+        console.warn('Could find the block text utils');
+        return undefined;
+    }
+
+    /**
+     *
+     * get special slash node`s text
+     * @memberof BlockHelper
+     */
+    public getSearchSlashText(blockId: string) {
+        const text_utils = this._blockTextUtilsMap[blockId];
+        if (text_utils) {
+            return text_utils.getSearchSlashText();
+        }
+        console.warn('Could find the block text utils');
+        return '';
+    }
+
+    public transformPoint(
+        blockId: string,
+        ...restArgs: Parameters<TextUtils['transformPoint']>
+    ) {
+        const text_utils = this._blockTextUtilsMap[blockId];
+        if (text_utils) {
+            return text_utils.transformPoint(...restArgs);
+        }
+        console.warn('Could find the block text utils');
+        return undefined;
+    }
+
+    public toggleTextFormatBySelection(
+        blockId: string,
+        format: 'bold' | 'italic' | 'underline' | 'strikethrough' | 'inlinecode'
+    ) {
+        const text_utils = this._blockTextUtilsMap[blockId];
+        if (text_utils) {
+            return text_utils.toggleTextFormatBySelection(format);
+        }
+        console.warn('Could find the block text utils');
+    }
+
+    public setLinkModalVisible(blockId: string, visible: boolean) {
+        const text_utils = this._blockTextUtilsMap[blockId];
+        if (text_utils) {
+            return text_utils.setLinkModalVisible(visible);
+        }
+        console.warn('Could find the block text utils');
+    }
+
+    public setParagraphAlign(blockId: string, format: TextAlignOptions) {
+        const text_utils = this._blockTextUtilsMap[blockId];
+        if (text_utils) {
+            return text_utils.setParagraphAlignBySelection(format, true);
+        }
+        console.warn('Could find the block text utils');
+    }
+
+    public setTextFontColor(
+        blockId: string,
+        color: keyof typeof fontColorPalette
+    ) {
+        const text_utils = this._blockTextUtilsMap[blockId];
+        if (text_utils) {
+            return text_utils.setTextFontColorBySelection(color, true);
+        }
+        console.warn('Could find the block text utils');
+    }
+
+    public setTextFontBgColor(
+        blockId: string,
+        bgColor: keyof typeof fontColorPalette
+    ) {
+        const text_utils = this._blockTextUtilsMap[blockId];
+        if (text_utils) {
+            return text_utils.setTextFontBgColorBySelection(bgColor, true);
+        }
+        console.warn('Could find the block text utils');
+    }
+
+    public addComment(blockId: string, commentId: string) {
+        const text_utils = this._blockTextUtilsMap[blockId];
+        if (text_utils) {
+            return text_utils.setCommentBySelection(commentId);
+        }
+        console.warn('Could find the block text utils');
+    }
+
+    public resolveComment(blockId: string, commentId: string) {
+        const text_utils = this._blockTextUtilsMap[blockId];
+        if (text_utils) {
+            return text_utils.resolveCommentById(commentId);
+        }
+        console.warn('Could find the block text utils');
+    }
+
+    public async getBlockDragImg(blockId: string) {
+        let blockImg;
+        const block = await this._editor.getBlockById(blockId);
+        if (block) {
+            blockImg = block.dom;
+        }
+        return blockImg;
+    }
+
+    public blur(blockId: string) {
+        const textUtils = this._blockTextUtilsMap[blockId];
+        if (textUtils != null) {
+            textUtils.blur();
+        }
+    }
+
+    public getCurrentSelection(blockId: string): SlateSelection {
+        const textUtils = this._blockTextUtilsMap[blockId];
+        if (textUtils) {
+            return textUtils.getCurrentSelection();
+        }
+
+        console.warn('Could find the block text utils');
+        return undefined as SlateSelection;
+    }
+
+    public isSelectionCollapsed(blockId: string): boolean | undefined {
+        const text_utils = this._blockTextUtilsMap[blockId];
+        if (text_utils) {
+            return text_utils.isCollapsed();
+        }
+        console.warn('Could find the block text utils');
+        return undefined;
+    }
+
+    public getCommentsIdsBySelection(blockId: string): string[] {
+        const text_utils = this._blockTextUtilsMap[blockId];
+        if (text_utils) {
+            return text_utils.getCommentsIdsBySelection();
+        }
+        console.warn('Could find the block text utils');
+        return undefined;
+    }
+}
diff --git a/libs/components/editor-core/src/editor/block/block-provider.ts b/libs/components/editor-core/src/editor/block/block-provider.ts
new file mode 100644
index 000000000..c2de2e80f
--- /dev/null
+++ b/libs/components/editor-core/src/editor/block/block-provider.ts
@@ -0,0 +1,20 @@
+import type { AsyncBlock } from './async-block';
+import { BaseView as BlockView } from './../views/base-view';
+
+interface BlockProviderCtorProps {
+    blockView: BlockView;
+    block: AsyncBlock;
+}
+
+export class BlockProvider {
+    private block: AsyncBlock;
+    private block_view: BlockView;
+    constructor(props: BlockProviderCtorProps) {
+        this.block = props.block;
+        this.block_view = props.blockView;
+    }
+
+    isEmpty() {
+        return this.block_view.isEmpty(this.block);
+    }
+}
diff --git a/libs/components/editor-core/src/editor/block/index.ts b/libs/components/editor-core/src/editor/block/index.ts
new file mode 100644
index 000000000..007920bb8
--- /dev/null
+++ b/libs/components/editor-core/src/editor/block/index.ts
@@ -0,0 +1,2 @@
+export { AsyncBlock } from './async-block';
+export type { WorkspaceAndBlockId, EventData } from './async-block';
diff --git a/libs/components/editor-core/src/editor/clipboard/browser-clipboard.ts b/libs/components/editor-core/src/editor/clipboard/browser-clipboard.ts
new file mode 100644
index 000000000..eefca42b0
--- /dev/null
+++ b/libs/components/editor-core/src/editor/clipboard/browser-clipboard.ts
@@ -0,0 +1,417 @@
+import { HooksRunner } from '../types';
+import {
+    OFFICE_CLIPBOARD_MIMETYPE,
+    InnerClipInfo,
+    ClipBlockInfo,
+} from './types';
+import { Editor } from '../editor';
+import { AsyncBlock } from '../block';
+import ClipboardParse from './clipboard-parse';
+import { SelectInfo } from '../selection';
+import {
+    Protocol,
+    BlockFlavorKeys,
+    services,
+} from '@toeverything/datasource/db-service';
+import { MarkdownParser } from './markdown-parse';
+
+// todo needs to be a switch
+const support_markdown_paste = true;
+
+enum ClipboardAction {
+    COPY = 'copy',
+    CUT = 'cut',
+    PASTE = 'paste',
+}
+class BrowserClipboard {
+    private event_target: Element;
+    private hooks: HooksRunner;
+    private editor: Editor;
+    private clipboard_parse: ClipboardParse;
+    private markdown_parse: MarkdownParser;
+
+    private static optimal_mime_type: string[] = [
+        OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED,
+        OFFICE_CLIPBOARD_MIMETYPE.HTML,
+        OFFICE_CLIPBOARD_MIMETYPE.TEXT,
+    ];
+
+    constructor(eventTarget: Element, hooks: HooksRunner, editor: Editor) {
+        this.event_target = eventTarget;
+        this.hooks = hooks;
+        this.editor = editor;
+        this.clipboard_parse = new ClipboardParse(editor);
+        this.markdown_parse = new MarkdownParser();
+        this.initialize();
+    }
+
+    public getClipboardParse() {
+        return this.clipboard_parse;
+    }
+
+    private initialize() {
+        this.handle_copy = this.handle_copy.bind(this);
+        this.handle_cut = this.handle_cut.bind(this);
+        this.handle_paste = this.handle_paste.bind(this);
+
+        document.addEventListener(ClipboardAction.COPY, this.handle_copy);
+        document.addEventListener(ClipboardAction.CUT, this.handle_cut);
+        document.addEventListener(ClipboardAction.PASTE, this.handle_paste);
+        this.event_target.addEventListener(
+            ClipboardAction.COPY,
+            this.handle_copy
+        );
+        this.event_target.addEventListener(
+            ClipboardAction.CUT,
+            this.handle_cut
+        );
+        this.event_target.addEventListener(
+            ClipboardAction.PASTE,
+            this.handle_paste
+        );
+    }
+
+    private handle_copy(e: Event) {
+        //@ts-ignore
+        if (e.defaultPrevented || e.target.nodeName === 'INPUT') {
+            return;
+        }
+
+        this.dispatch_clipboard_event(
+            ClipboardAction.COPY,
+            e as ClipboardEvent
+        );
+    }
+
+    private handle_cut(e: Event) {
+        //@ts-ignore
+        if (e.defaultPrevented || e.target.nodeName === 'INPUT') {
+            return;
+        }
+        this.dispatch_clipboard_event(ClipboardAction.CUT, e as ClipboardEvent);
+    }
+
+    private handle_paste(e: Event) {
+        //@ts-ignore TODO should be handled more scientifically here, whether to trigger the paste time, also need some whitelist mechanism
+        if (e.defaultPrevented || e.target.nodeName === 'INPUT') {
+            return;
+        }
+
+        const clipboardData = (e as ClipboardEvent).clipboardData;
+
+        const isPureFile = this.is_pure_file_in_clipboard(clipboardData);
+
+        if (!isPureFile) {
+            this.paste_content(clipboardData);
+        } else {
+            this.paste_file(clipboardData);
+        }
+        // this.editor.selectionManager
+        //     .getSelectInfo()
+        //     .then(selectionInfo => console.log(selectionInfo));
+
+        e.stopPropagation();
+    }
+
+    private paste_content(clipboardData: any) {
+        const originClip: { data: any; type: any } = this.getOptimalClip(
+            clipboardData
+        ) as { data: any; type: any };
+        const originTextClipData = clipboardData.getData(
+            OFFICE_CLIPBOARD_MIMETYPE.TEXT
+        );
+
+        let clipData = originClip['data'];
+
+        if (originClip['type'] === OFFICE_CLIPBOARD_MIMETYPE.TEXT) {
+            clipData = this.excape_html(clipData);
+        }
+
+        switch (originClip['type']) {
+            /** Protocol paste */
+            case OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED:
+                this.fire_paste_edit_action(clipData);
+                break;
+            case OFFICE_CLIPBOARD_MIMETYPE.HTML:
+                this.paste_html(clipData, originTextClipData);
+                break;
+            case OFFICE_CLIPBOARD_MIMETYPE.TEXT:
+                this.paste_text(clipData, originTextClipData);
+                break;
+
+            default:
+                break;
+        }
+    }
+
+    private paste_html(clipData: any, originTextClipData: any) {
+        if (support_markdown_paste) {
+            const has_markdown =
+                this.markdown_parse.checkIfTextContainsMd(originTextClipData);
+            if (has_markdown) {
+                try {
+                    const convertedDataObj =
+                        this.markdown_parse.md2Html(originTextClipData);
+                    if (convertedDataObj.isConverted) {
+                        clipData = convertedDataObj.text;
+                    }
+                } catch (e) {
+                    console.error(e);
+                    clipData = originTextClipData;
+                }
+            }
+        }
+
+        const blocks = this.clipboard_parse.html2blocks(clipData);
+        this.insert_blocks(blocks);
+    }
+
+    private paste_text(clipData: any, originTextClipData: any) {
+        const blocks = this.clipboard_parse.text2blocks(clipData);
+        this.insert_blocks(blocks);
+    }
+
+    private async paste_file(clipboardData: any) {
+        const file = this.get_image_file(clipboardData);
+        if (file) {
+            const result = await services.api.file.create({
+                workspace: this.editor.workspace,
+                file: file,
+            });
+            const block_info: ClipBlockInfo = {
+                type: 'image',
+                properties: {
+                    image: {
+                        value: result.id,
+                        name: file.name,
+                        size: file.size,
+                        type: file.type,
+                    },
+                },
+                children: [] as ClipBlockInfo[],
+            };
+            this.insert_blocks([block_info]);
+        }
+    }
+
+    private get_image_file(clipboardData: any) {
+        const files = clipboardData.files;
+        if (files && files[0] && files[0].type.indexOf('image') > -1) {
+            return files[0];
+        }
+        return;
+    }
+
+    private excape_html(data: any, onlySpace?: any) {
+        if (!onlySpace) {
+            // TODO:
+            // data = string.htmlEscape(data);
+            // data = data.replace(/\n/g, '<br>');
+        }
+
+        // data = data.replace(/ /g, '&nbsp;');
+        // data = data.replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;');
+        return data;
+    }
+
+    public getOptimalClip(clipboardData: any) {
+        const mimeTypeArr = BrowserClipboard.optimal_mime_type;
+
+        for (let i = 0; i < mimeTypeArr.length; i++) {
+            const data =
+                clipboardData[mimeTypeArr[i]] ||
+                clipboardData.getData(mimeTypeArr[i]);
+
+            if (data) {
+                return {
+                    type: mimeTypeArr[i],
+                    data: data,
+                };
+            }
+        }
+
+        return '';
+    }
+
+    private is_pure_file_in_clipboard(clipboardData: DataTransfer) {
+        const types = clipboardData.types;
+
+        const res =
+            (types.length === 1 && types[0] === 'Files') ||
+            (types.length === 2 &&
+                (types.includes('text/plain') || types.includes('text/html')) &&
+                types.includes('Files'));
+
+        return res;
+    }
+
+    private async fire_paste_edit_action(clipboardData: any) {
+        const clip_info: InnerClipInfo = JSON.parse(clipboardData);
+        clip_info && this.insert_blocks(clip_info.data, clip_info.select);
+    }
+
+    private can_edit_text(type: BlockFlavorKeys) {
+        return (
+            type === Protocol.Block.Type.page ||
+            type === Protocol.Block.Type.text ||
+            type === Protocol.Block.Type.heading1 ||
+            type === Protocol.Block.Type.heading2 ||
+            type === Protocol.Block.Type.heading3 ||
+            type === Protocol.Block.Type.quote ||
+            type === Protocol.Block.Type.todo ||
+            type === Protocol.Block.Type.code ||
+            type === Protocol.Block.Type.callout ||
+            type === Protocol.Block.Type.numbered ||
+            type === Protocol.Block.Type.bullet
+        );
+    }
+
+    // TODO: cursor positioning problem
+    private async insert_blocks(blocks: ClipBlockInfo[], select?: SelectInfo) {
+        if (blocks.length === 0) {
+            return;
+        }
+
+        const cur_select_info =
+            await this.editor.selectionManager.getSelectInfo();
+        if (cur_select_info.blocks.length === 0) {
+            return;
+        }
+
+        let begin_index = 0;
+        const cur_node_id =
+            cur_select_info.blocks[cur_select_info.blocks.length - 1].blockId;
+        let cur_block = await this.editor.getBlockById(cur_node_id);
+        const block_view = this.editor.getView(cur_block.type);
+        if (
+            cur_select_info.type === 'Range' &&
+            cur_block.type === 'text' &&
+            block_view.isEmpty(cur_block)
+        ) {
+            cur_block.setType(blocks[0].type);
+            cur_block.setProperties(blocks[0].properties);
+            this.paste_children(cur_block, blocks[0].children);
+            begin_index = 1;
+        } else if (
+            select?.type === 'Range' &&
+            cur_select_info.type === 'Range' &&
+            this.can_edit_text(cur_block.type) &&
+            this.can_edit_text(blocks[0].type)
+        ) {
+            if (
+                cur_select_info.blocks.length > 0 &&
+                cur_select_info.blocks[0].startInfo
+            ) {
+                const start_info = cur_select_info.blocks[0].startInfo;
+                const end_info = cur_select_info.blocks[0].endInfo;
+                const cur_text_value = cur_block.getProperty('text').value;
+                const pre_cur_text_value = cur_text_value.slice(
+                    0,
+                    start_info.arrayIndex
+                );
+                const last_cur_text_value = cur_text_value.slice(
+                    end_info.arrayIndex + 1
+                );
+                const pre_text = cur_text_value[
+                    start_info.arrayIndex
+                ].text.substring(0, start_info.offset);
+                const last_text = cur_text_value[
+                    end_info.arrayIndex
+                ].text.substring(end_info.offset);
+
+                let last_block: ClipBlockInfo = blocks[blocks.length - 1];
+                if (!this.can_edit_text(last_block.type)) {
+                    last_block = { type: 'text', children: [] };
+                    blocks.push(last_block);
+                }
+                const last_values = last_block.properties?.text?.value;
+                last_text && last_values.push({ text: last_text });
+                last_values.push(...last_cur_text_value);
+                last_block.properties = {
+                    text: { value: last_values },
+                };
+
+                const insert_info = blocks[0].properties.text;
+                pre_text && pre_cur_text_value.push({ text: pre_text });
+                pre_cur_text_value.push(...insert_info.value);
+                this.editor.blockHelper.setBlockBlur(cur_node_id);
+                setTimeout(async () => {
+                    const cur_block = await this.editor.getBlockById(
+                        cur_node_id
+                    );
+                    cur_block.setProperties({
+                        text: { value: pre_cur_text_value },
+                    });
+                    this.paste_children(cur_block, blocks[0].children);
+                }, 0);
+                begin_index = 1;
+            }
+        }
+
+        for (let i = begin_index; i < blocks.length; i++) {
+            const next_block = await this.editor.createBlock(blocks[i].type);
+            next_block.setProperties(blocks[i].properties);
+            if (cur_block.type === 'page') {
+                cur_block.prepend(next_block);
+            } else {
+                cur_block.after(next_block);
+            }
+
+            this.paste_children(next_block, blocks[i].children);
+            cur_block = next_block;
+        }
+    }
+
+    private async paste_children(parent: AsyncBlock, children: any[]) {
+        for (let i = 0; i < children.length; i++) {
+            const next_block = await this.editor.createBlock(children[i].type);
+            next_block.setProperties(children[i].properties);
+            parent.append(next_block);
+            await this.paste_children(next_block, children[i].children);
+        }
+    }
+
+    private pre_copy_cut(action: ClipboardAction, e: ClipboardEvent) {
+        switch (action) {
+            case ClipboardAction.COPY:
+                this.hooks.beforeCopy(e);
+                break;
+
+            case ClipboardAction.CUT:
+                this.hooks.beforeCut(e);
+                break;
+        }
+    }
+
+    private dispatch_clipboard_event(
+        action: ClipboardAction,
+        e: ClipboardEvent
+    ) {
+        this.pre_copy_cut(action, e);
+    }
+
+    dispose() {
+        document.removeEventListener(ClipboardAction.COPY, this.handle_copy);
+        document.removeEventListener(ClipboardAction.CUT, this.handle_cut);
+        document.removeEventListener(ClipboardAction.PASTE, this.handle_paste);
+        this.event_target.removeEventListener(
+            ClipboardAction.COPY,
+            this.handle_copy
+        );
+        this.event_target.removeEventListener(
+            ClipboardAction.CUT,
+            this.handle_cut
+        );
+        this.event_target.removeEventListener(
+            ClipboardAction.PASTE,
+            this.handle_paste
+        );
+        this.clipboard_parse.dispose();
+        this.clipboard_parse = null;
+        this.event_target = null;
+        this.hooks = null;
+        this.editor = null;
+    }
+}
+
+export { BrowserClipboard };
diff --git a/libs/components/editor-core/src/editor/clipboard/clip.ts b/libs/components/editor-core/src/editor/clipboard/clip.ts
new file mode 100644
index 000000000..47a82e719
--- /dev/null
+++ b/libs/components/editor-core/src/editor/clipboard/clip.ts
@@ -0,0 +1,23 @@
+class Clip {
+    private mime_type: any;
+    private data: any;
+
+    constructor(mimeType: any, data: any) {
+        this.mime_type = mimeType;
+        this.data = data;
+    }
+
+    getMimeType() {
+        return this.mime_type;
+    }
+
+    getData() {
+        return this.data;
+    }
+
+    hasData() {
+        return this.data !== null && this.data !== undefined;
+    }
+}
+
+export { Clip };
diff --git a/libs/components/editor-core/src/editor/clipboard/clipboard-parse.ts b/libs/components/editor-core/src/editor/clipboard/clipboard-parse.ts
new file mode 100644
index 000000000..a4a59bd2b
--- /dev/null
+++ b/libs/components/editor-core/src/editor/clipboard/clipboard-parse.ts
@@ -0,0 +1,209 @@
+import { Protocol, BlockFlavorKeys } from '@toeverything/datasource/db-service';
+import { escape } from '@toeverything/utils';
+import { Editor } from '../editor';
+import { SelectBlock } from '../selection';
+import { ClipBlockInfo } from './types';
+
+class DefaultBlockParse {
+    public static html2block(el: Element): ClipBlockInfo[] | undefined | null {
+        const tag_name = el.tagName;
+        if (tag_name === 'DIV' || el instanceof Text) {
+            return el.textContent?.split('\n').map(str => {
+                const data = {
+                    text: escape(str),
+                };
+                return {
+                    type: 'text',
+                    properties: {
+                        text: { value: [data] },
+                    },
+                    children: [],
+                };
+            });
+        }
+
+        return null;
+    }
+}
+
+export default class ClipboardParse {
+    private editor: Editor;
+    private static block_types: BlockFlavorKeys[] = [
+        Protocol.Block.Type.page,
+        Protocol.Block.Type.reference,
+        Protocol.Block.Type.heading1,
+        Protocol.Block.Type.heading2,
+        Protocol.Block.Type.heading3,
+        Protocol.Block.Type.quote,
+        Protocol.Block.Type.todo,
+        Protocol.Block.Type.code,
+        Protocol.Block.Type.text,
+        Protocol.Block.Type.toc,
+        Protocol.Block.Type.file,
+        Protocol.Block.Type.image,
+        Protocol.Block.Type.divider,
+        Protocol.Block.Type.callout,
+        Protocol.Block.Type.youtube,
+        Protocol.Block.Type.figma,
+        Protocol.Block.Type.group,
+        Protocol.Block.Type.embedLink,
+        Protocol.Block.Type.numbered,
+        Protocol.Block.Type.bullet,
+    ];
+    private static break_flags: Set<string> = new Set([
+        'BLOCKQUOTE',
+        'BODY',
+        'CENTER',
+        'DD',
+        'DIR',
+        'DIV',
+        'DL',
+        'DT',
+        'FORM',
+        'H1',
+        'H2',
+        'H3',
+        'H4',
+        'H5',
+        'H6',
+        'HEAD',
+        'HTML',
+        'ISINDEX',
+        'MENU',
+        'NOFRAMES',
+        'P',
+        'PRE',
+        'TABLE',
+        'TD',
+        'TH',
+        'TITLE',
+        'TR',
+    ]);
+
+    constructor(editor: Editor) {
+        this.editor = editor;
+        this.generate_html = this.generate_html.bind(this);
+        this.parse_dom = this.parse_dom.bind(this);
+    }
+    // TODO: escape
+    public text2blocks(clipData: string): ClipBlockInfo[] {
+        return (clipData || '').split('\n').map((str: string) => {
+            const block_info: ClipBlockInfo = {
+                type: 'text',
+                properties: {
+                    text: { value: [{ text: str }] },
+                },
+                children: [] as ClipBlockInfo[],
+            };
+            return block_info;
+        });
+    }
+
+    public html2blocks(clipData: string): ClipBlockInfo[] {
+        return this.common_html2blocks(clipData);
+    }
+
+    private common_html2blocks(clipData: string): ClipBlockInfo[] {
+        const html_el = document.createElement('html');
+        html_el.innerHTML = clipData;
+        return this.parse_dom(html_el);
+    }
+
+    // tTODO:odo escape
+    private parse_dom(el: Element): ClipBlockInfo[] {
+        for (let i = 0; i < ClipboardParse.block_types.length; i++) {
+            const block_utils = this.editor.getView(
+                ClipboardParse.block_types[i]
+            );
+            const blocks =
+                block_utils &&
+                block_utils.html2block &&
+                block_utils.html2block(el, this.parse_dom);
+            if (blocks) {
+                return blocks;
+            }
+        }
+        const blocks: ClipBlockInfo[] = [];
+        // blocks = DefaultBlockParse.html2block(el);
+        for (let i = 0; i < el.childNodes.length; i++) {
+            const child = el.childNodes[i];
+            const last_block_info =
+                blocks.length === 0 ? null : blocks[blocks.length - 1];
+            let blocks_info = this.parse_dom(child as Element);
+            if (
+                last_block_info &&
+                last_block_info.type === 'text' &&
+                !ClipboardParse.break_flags.has((child as Element).tagName)
+            ) {
+                const texts = last_block_info.properties?.text?.value || [];
+                let j = 0;
+                for (; j < blocks_info.length; j++) {
+                    const block = blocks_info[j];
+                    if (block.type === 'text') {
+                        const block_texts = block.properties.text.value;
+                        texts.push(...block_texts);
+                    }
+                }
+                last_block_info.properties = {
+                    text: { value: texts },
+                };
+                blocks_info = blocks_info.slice(j);
+            }
+            blocks.push(...blocks_info);
+        }
+        return blocks;
+    }
+
+    public async generateHtml(): Promise<string> {
+        const select_info = await this.editor.selectionManager.getSelectInfo();
+        return await this.generate_html(select_info.blocks);
+    }
+
+    public async page2html(): Promise<string> {
+        const root_block_id = this.editor.getRootBlockId();
+        if (!root_block_id) {
+            return '';
+        }
+
+        const block_info = await this.get_select_info(root_block_id);
+        return await this.generate_html([block_info]);
+    }
+
+    private async get_select_info(blockId: string) {
+        const block = await this.editor.getBlockById(blockId);
+        if (!block) return null;
+        const block_info: SelectBlock = {
+            blockId: block.id,
+            children: [],
+        };
+        const children_ids = block.childrenIds;
+        for (let i = 0; i < children_ids.length; i++) {
+            block_info.children.push(
+                await this.get_select_info(children_ids[i])
+            );
+        }
+        return block_info;
+    }
+
+    private async generate_html(selectBlocks: SelectBlock[]): Promise<string> {
+        let result = '';
+        for (let i = 0; i < selectBlocks.length; i++) {
+            const sel_block = selectBlocks[i];
+            if (!sel_block || !sel_block.blockId) continue;
+            const block = await this.editor.getBlockById(sel_block.blockId);
+            if (!block) continue;
+            const block_utils = this.editor.getView(block.type);
+            const html = await block_utils.block2html(
+                block,
+                sel_block.children,
+                this.generate_html
+            );
+            result += html;
+        }
+        return result;
+    }
+
+    public dispose() {
+        this.editor = null;
+    }
+}
diff --git a/libs/components/editor-core/src/editor/clipboard/clipboard-populator.ts b/libs/components/editor-core/src/editor/clipboard/clipboard-populator.ts
new file mode 100644
index 000000000..d4f220009
--- /dev/null
+++ b/libs/components/editor-core/src/editor/clipboard/clipboard-populator.ts
@@ -0,0 +1,158 @@
+import { Editor } from '../editor';
+import { SelectionManager, SelectInfo, SelectBlock } from '../selection';
+import { HookType, PluginHooks } from '../types';
+import {
+    ClipBlockInfo,
+    OFFICE_CLIPBOARD_MIMETYPE,
+    InnerClipInfo,
+} from './types';
+import { Clip } from './clip';
+import assert from 'assert';
+import ClipboardParse from './clipboard-parse';
+
+class ClipboardPopulator {
+    private editor: Editor;
+    private hooks: PluginHooks;
+    private selection_manager: SelectionManager;
+    private clipboard: any;
+    private clipboard_parse: ClipboardParse;
+
+    constructor(
+        editor: Editor,
+        hooks: PluginHooks,
+        selectionManager: SelectionManager,
+        clipboard: any
+    ) {
+        this.editor = editor;
+        this.hooks = hooks;
+        this.selection_manager = selectionManager;
+        this.clipboard = clipboard;
+        this.clipboard_parse = new ClipboardParse(editor);
+        hooks.addHook(HookType.BEFORE_COPY, this.populate_app_clipboard, this);
+        hooks.addHook(HookType.BEFORE_CUT, this.populate_app_clipboard, this);
+    }
+
+    private async populate_app_clipboard(e: ClipboardEvent) {
+        e.preventDefault();
+        e.stopPropagation();
+        const clips = await this.getClips();
+        if (!clips.length) {
+            return;
+        }
+
+        // TODO: is not compatible with safari
+        const success = this.copy_to_cliboard_from_pc(clips);
+        if (!success) {
+            // This way, not compatible with firefox
+            const clipboardData = e.clipboardData;
+            if (clipboardData) {
+                try {
+                    clips.forEach(clip => {
+                        clipboardData.setData(
+                            clip.getMimeType(),
+                            clip.getData()
+                        );
+                    });
+                } catch (e) {
+                    // TODO handle exception
+                }
+            }
+        }
+    }
+
+    private copy_to_cliboard_from_pc(clips: any[]) {
+        let success = false;
+        const tempElem = document.createElement('textarea');
+        tempElem.value = 'temp';
+        document.body.appendChild(tempElem);
+        tempElem.select();
+        tempElem.setSelectionRange(0, tempElem.value.length);
+
+        const listener = function (e: any) {
+            const clipboardData = e.clipboardData;
+            if (clipboardData) {
+                clips.forEach(clip => {
+                    clipboardData.setData(clip.getMimeType(), clip.getData());
+                });
+            }
+
+            e.preventDefault();
+            e.stopPropagation();
+            tempElem.removeEventListener('copy', listener);
+        } as any;
+
+        tempElem.addEventListener('copy', listener);
+        try {
+            success = document.execCommand('copy');
+        } finally {
+            tempElem.removeEventListener('copy', listener);
+            document.body.removeChild(tempElem);
+        }
+        return success;
+    }
+
+    private async get_clip_block_info(selBlock: SelectBlock) {
+        const block = await this.editor.getBlockById(selBlock.blockId);
+        const block_view = this.editor.getView(block.type);
+        assert(block_view);
+        const block_info: ClipBlockInfo = {
+            type: block.type,
+            properties: block_view.getSelProperties(block, selBlock),
+            children: [] as any[],
+        };
+
+        for (let i = 0; i < selBlock.children.length; i++) {
+            const child_info = await this.get_clip_block_info(
+                selBlock.children[i]
+            );
+            block_info.children.push(child_info);
+        }
+
+        return block_info;
+    }
+
+    private async get_inner_clip(): Promise<InnerClipInfo> {
+        const clips: ClipBlockInfo[] = [];
+        const select_info: SelectInfo =
+            await this.selection_manager.getSelectInfo();
+        for (let i = 0; i < select_info.blocks.length; i++) {
+            const sel_block = select_info.blocks[i];
+            const clip_block_info = await this.get_clip_block_info(sel_block);
+            clips.push(clip_block_info);
+        }
+        const clipInfo: InnerClipInfo = {
+            select: select_info,
+            data: clips,
+        };
+        return clipInfo;
+    }
+
+    async getClips() {
+        const clips: any[] = [];
+
+        const inner_clip = await this.get_inner_clip();
+        clips.push(
+            new Clip(
+                OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED,
+                JSON.stringify(inner_clip)
+            )
+        );
+
+        const html_clip = await this.clipboard_parse.generateHtml();
+        html_clip &&
+            clips.push(new Clip(OFFICE_CLIPBOARD_MIMETYPE.HTML, html_clip));
+
+        return clips;
+    }
+
+    disposeInternal() {
+        this.hooks.removeHook(
+            HookType.BEFORE_COPY,
+            this.populate_app_clipboard
+        );
+        this.hooks.removeHook(HookType.BEFORE_CUT, this.populate_app_clipboard);
+        this.hooks = null;
+    }
+}
+
+export { ClipboardPopulator };
diff --git a/libs/components/editor-core/src/editor/clipboard/markdown-parse.ts b/libs/components/editor-core/src/editor/clipboard/markdown-parse.ts
new file mode 100644
index 000000000..faf3822fa
--- /dev/null
+++ b/libs/components/editor-core/src/editor/clipboard/markdown-parse.ts
@@ -0,0 +1,1418 @@
+import { isFunction, isString } from '@toeverything/utils';
+
+class MarkdownParser {
+    private code_blocks: any[];
+    private html_blocks: any[];
+    private html_spans: any[];
+    private gTitles: any;
+    private gUrls: any;
+    private list_level: number;
+    private convert_flag: boolean;
+    private static regexes: any = {
+        asteriskDashTildeAndColon: /([*_:~])/g,
+        asteriskDashAndTilde: /([*_~])/g,
+        simpleURLRegex:
+            /([*~_]+|\b)(((https?|ftp|dict):\/\/|www\.)[^'">\s]+?\.[^'">\s]+?)()(\1)?(?=\s|$)(?!["<>])/gi,
+        simpleURLRegex2:
+            // eslint-disable-next-line
+            /([*~_]+|\b)(((https?|ftp|dict):\/\/|www\.)[^'">\s]+\.[^'">\s]+?)([.!?,()\[\]])?(\1)?(?=\s|$)(?!["<>])/gi,
+        delimUrlRegex: /()<(((https?|ftp|dict):\/\/|www\.)[^'">\s]+)()>()/gi,
+        simpleMailRegex:
+            /(^|\s)(?:mailto:)?([A-Za-z0-9!#$%&'*+-/=?^_`{|}~.]+@[-a-z0-9]+(\.[-a-z0-9]+)*\.[a-z]+)(?=$|\s)/gim,
+        delimMailRegex:
+            /<()(?:mailto:)?([-.\w]+@[-a-z0-9]+(\.[-a-z0-9]+)*\.[a-z]+)>/gi,
+    };
+
+    constructor() {
+        this.init_global_var();
+    }
+
+    private check_reg_arr: RegExp[] = [
+        /^(#{1,6})[ \t]*(.+?)[ \t]*#*\n+/gm, // header
+        /^ {0,3}\|?.+\|.+\n {0,3}\|?[ \t]*:?[ \t]*(?:[-=]){2,}[ \t]*:?[ \t]*\|[ \t]*:?[ \t]*(?:[-=]){2,}[\s\S]+?(?:\n\n|¨0)/gm, // table
+        /(?:^|\n)(?: {0,3})(```+|~~~+)(?: *)([^\s`~]*)\n([\s\S]*?)\n(?: {0,3})\1/g, // codeBlock
+        /(\n\n|^\n?)(( {0,3}([*+-]|\d+[.])[ \t]+)[^\r]+?(¨0|\n{2,}(?=\S)(?![ \t]*(?:[*+-]|\d+[.])[ \t]+)))/gm, // list
+        /!\[([^\]]*?)] ?(?:\n *)?\[([\s\S]*?)]()()()()()/g, // referenceImage
+        /!\[([^\]]*?)][ \t]*()\([ \t]?<?([\S]+?(?:\([\S]*?\)[\S]*?)?)>?(?: =([*\d]+[A-Za-z%]{0,4})x([*\d]+[A-Za-z%]{0,4}))?[ \t]*(?:(["'])([^"]*?)\6)?[ \t]?\)/g, // inlineImage
+        /!\[([^\]]*?)][ \t]*()\([ \t]?<([^>]*)>(?: =([*\d]+[A-Za-z%]{0,4})x([*\d]+[A-Za-z%]{0,4}))?[ \t]*(?:(?:(["'])([^"]*?)\6))?[ \t]?\)/g, // crazyImage
+        /!\[([^\]]*?)][ \t]*()\([ \t]?<?(data:.+?\/.+?;base64,[A-Za-z0-9+/=\n]+?)>?(?: =([*\d]+[A-Za-z%]{0,4})x([*\d]+[A-Za-z%]{0,4}))?[ \t]*(?:(["'])([^"]*?)\6)?[ \t]?\)/g, // base64Image
+        // eslint-disable-next-line
+        /!\[([^\[\]]+)]()()()()()/g, // referShortcutImage
+        // eslint-disable-next-line
+        /\[((?:\[[^\]]*]|[^\[\]])*)]()[ \t]*\([ \t]?<?([\S]+?(?:\([\S]*?\)[\S]*?)?)>?(?:[ \t]*((["'])([^"]*?)\5))?[ \t]?\)/g, // Generallink
+        // eslint-disable-next-line
+        /\[((?:\[[^\]]*]|[^\[\]])*)] ?(?:\n *)?\[(.*?)]()()()()/g, // inlineLink
+        // eslint-disable-next-line
+        /\[((?:\[[^\]]*]|[^\[\]])*)]()[ \t]*\([ \t]?<([^>]*)>(?:[ \t]*((["'])([^"]*?)\5))?[ \t]?\)/g, // special link
+        // eslint-disable-next-line
+        /\[([^\[\]]+)]()()()()()/g, // abbreviationlink
+    ];
+
+    /** Extract some grammar rules to check whether a piece of text contains markdown grammar */
+    checkIfTextContainsMd(text: any) {
+        text = text.replace(/¨/g, '¨T');
+        text = text.replace(/\$/g, '¨D'); // replace $ with ¨D
+        // Standardize the line position (unify mac, dos)
+        text = text.replace(/\r\n/g, '\n'); // dos
+        text = text.replace(/\r/g, '\n'); // mac
+        text = text.replace(/\u00A0/g, '&nbsp;'); // normalize spaces
+        // 2. Due to the grammatical characteristics of markdwon (one \n is not counted as a newline, two are counted), let the start and end of the text be a pair of newlines, so as to ensure that the first and last lines of the pasted content can be recognized normally
+        text = `\n\n${text}\n\n`; // 3. Convert tab to space
+        text = this.detab(text); // 4. Delete lines consisting only of space and tab
+
+        for (let i = 0; i < this.check_reg_arr.length; i++) {
+            const text1 = i === 3 ? `${text}¨0` : text;
+
+            if (this.check_reg_arr[i].test(text1)) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    private init_global_var() {
+        this.code_blocks = [];
+        this.html_blocks = [];
+        this.html_spans = [];
+        this.gTitles = [];
+        this.gUrls = {};
+        this.list_level = 0;
+        this.convert_flag = false; // Whether md syntax is recognized
+    }
+
+    private replace_link() {
+        return (
+            wm: any,
+            leadingMagicChars: any,
+            link: any,
+            m2: any,
+            m3: any,
+            trailingPunctuation: any,
+            trailingMagicChars: any
+        ) => {
+            link = link.replace(
+                MarkdownParser.regexes.asteriskDashTildeAndColon,
+                this.escape_characters_callback
+            );
+            const lnkTxt = link,
+                append = '',
+                target = '',
+                lmc = leadingMagicChars || '',
+                tmc = trailingMagicChars || '';
+
+            if (/^www\./i.test(link)) {
+                link = link.replace(/^www\./i, 'http://www.');
+            }
+
+            return `${lmc}<a href="${link}"${target}>${lnkTxt}</a>${append}${tmc}`;
+        };
+    }
+
+    private replace_mail() {
+        return (wholeMatch: any, b: any, mail: any) => {
+            let href = 'mailto:';
+            b = b || '';
+            mail = this.unescape_special_chars(mail);
+            href = href + mail;
+            return `${b}<a href="${href}">${mail}</a>`;
+        };
+    }
+
+    md2Html(text: any) {
+        if (!text) return text;
+        // 1. Perform a series of escape operations first, and use '¨' as the escape character to avoid md5 encoding problems
+        text = text.replace(/¨/g, '¨T');
+        text = text.replace(/\$/g, '¨D'); // replace $ with ¨D
+        // Standardize the line position (unify mac, dos)
+        text = text.replace(/\r\n/g, '\n'); // dos
+        text = text.replace(/\r/g, '\n'); // mac
+
+        text = text.replace(/\u00A0/g, '&nbsp;'); // normalize spaces
+        // 2. Due to the grammatical characteristics of markdwon (one \n is not counted as a newline, two are counted), let the start and end of the text be a pair of newlines, so as to ensure that the first and last lines of the pasted content can be recognized normally
+        text = `\n\n${text}\n\n`;
+        // 3. Convert tab to space
+        text = this.detab(text);
+        // 4. Delete lines consisting only of spaces and tabs
+        text = text.replace(/^[ \t]+$/gm, '');
+        // 5. Start a wave of code blocks (compatible with github)
+        text = this.github_code_block(text);
+        // 6. Cache all html related content (such as in code blocks and inline code) to avoid affecting subsequent real conversion operations
+        text = this.hash_html_blocks(text);
+        // 7. Since the syntax of the latex formula and the code block syntax are always the same, the code tag needs to be cached to facilitate the subsequent completion of related capabilities
+        text = this.hash_code_tags(text);
+        // core conversion link
+        text = this.block_gamut(text);
+        // unhash
+        text = this.unhash_html_spans(text);
+        // escape special characters
+        text = this.unescape_special_chars(text);
+        text = text.replace(/¨D/g, '$$');
+        // Escape the ¨ that comes with itself
+        text = text.replace(/¨T/g, '¨');
+        // Return whether md syntax is recognized
+        const isConverted = this.convert_flag;
+        this.init_global_var();
+        return {
+            text: text,
+            isConverted: isConverted,
+        };
+    }
+
+    private detab(text: any) {
+        text = text.replace(/\t(?=\t)/g, ' '); // 1 tab === 4 space
+        // turn \t into a placeholder
+        text = text.replace(/\t/g, '¨A¨B');
+        // Use placeholders to mark tabs to prevent regular backtracking
+        text = text.replace(/¨B(.+?)¨A/g, (wholeMatch: any, m1: any) => {
+            let leadingText = m1,
+                numSpaces = 4 - (leadingText.length % 4);
+
+            for (let i = 0; i < numSpaces; i++) {
+                leadingText += ' ';
+            }
+
+            return leadingText;
+        });
+        // Convert placeholder to space
+        text = text.replace(/¨A/g, ' ');
+        text = text.replace(/¨B/g, '');
+        return text;
+    }
+
+    private github_code_block(text: any) {
+        text += '¨0';
+        text = text.replace(
+            /(?:^|\n)(?: {0,3})(```+|~~~+)(?: *)([^\s`~]*)\n([\s \S]*?)\n(?: {0,3})\1/g,
+            (wholeMatch: any, delim: any, language: any, codeblock: any) => {
+                const end = '\n';
+                this.convert_flag = true;
+                // TODO:
+                // codeblock = String.unescapeEntities(codeblock); // Since the outside is escaped, the escape is returned here
+                codeblock = this.encode_code(codeblock);
+                codeblock = this.detab(codeblock);
+                codeblock = codeblock.replace(/^\n+/g, ''); // delete empty lines
+                codeblock = codeblock.replace(/\n+$/g, ''); // trailing spaces removed
+                codeblock = `${
+                    '<pre><code' + 'vodka-language="'
+                }${language}">${codeblock}${end}</code></pre>`;
+                codeblock = this.hash_block(codeblock); // prevent codeblck from false positives, the bottom line: cache raw text and parsed text in the instance
+
+                return `\n\n¨G${
+                    this.code_blocks.push({
+                        text: wholeMatch,
+                        codeblock: codeblock,
+                    }) - 1
+                }G\n\n`;
+            }
+        );
+        text = text.replace(/¨0/, '');
+        return text;
+    }
+
+    private encode_code(text: any) {
+        text = text
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;') // escape all special characters (used by md syntax)
+            // eslint-disable-next-line
+            .replace(/([*_{}\[\]\\=~-])/g, this.escape_characters_callback);
+        return text;
+    }
+
+    private escape_characters_callback(param: any, m1: any) {
+        const charCodeToEscape = m1.charCodeAt(0);
+        return `¨E${charCodeToEscape}E`;
+    }
+
+    private hash_block(text: any) {
+        text = text.replace(/(^\n+|\n+$)/g, '');
+        text = `\n\n¨K${this.html_blocks.push(text) - 1}K\n\n`;
+        return text;
+    }
+
+    private hash_html_blocks(text: any) {
+        const blockTags = [
+            'pre',
+            'div',
+            'h1',
+            'h2',
+            'h3',
+            'h4',
+            'h5',
+            'h6',
+            'blockquote',
+            'table',
+            'dl',
+            'ol',
+            'ul',
+            'script',
+            'noscript',
+            'form',
+            'fieldset',
+            'iframe',
+            'math',
+            'style',
+            'section',
+            'header',
+            'footer',
+            'nav',
+            'article',
+            'aside',
+            'address',
+            'audio',
+            'canvas',
+            'figure',
+            'hgroup',
+            'output',
+            'video',
+            'p',
+        ];
+        const repFunc = (
+            wholeMatch: any,
+            match: any,
+            left: any,
+            right: any
+        ) => {
+            const txt = wholeMatch;
+            return `\n\n¨K${this.html_blocks.push(txt) - 1}K\n\n`;
+        };
+
+        for (let i = 0; i < blockTags.length; ++i) {
+            let opTagPos: any;
+            const rgx1 = new RegExp(`^ {0,3}(<${blockTags[i]}\\b[^>]*>)`, 'im');
+            const patLeft = `<${blockTags[i]}\\b[^>]*>`;
+            const patRight = `</${blockTags[i]}>`; // 1. Find the first position of the first open HTML tag in the text
+
+            while ((opTagPos = this.regex_index_of(text, rgx1)) !== -1) {
+                //2. Split text at this position
+                const subTexts = this.split_at_index(text, opTagPos),
+                    //3. Recursive matching
+                    newSubText1 = this.replace_recursive_reg_exp(
+                        subTexts[1],
+                        repFunc,
+                        patLeft,
+                        patRight,
+                        'im'
+                    ); // prevent infinite loop
+
+                if (newSubText1 === subTexts[1]) {
+                    break;
+                }
+
+                text = subTexts[0].concat(newSubText1);
+            }
+        } // Special case handling: hr tag
+
+        text = text.replace(
+            /(\n {0,3}(<(hr)\b([^<>])*?\/?>)[ \t]*(?=\n{2,}))/g,
+            this.hash_element()
+        ); // special handling of independent html comments
+
+        text = this.replace_recursive_reg_exp(
+            text,
+            (txt: any) => {
+                return `\n\n¨K${this.html_blocks.push(txt) - 1}K\n\n`;
+            },
+            '^{0,3}<!--',
+            '-->',
+            'gm'
+        ); // PHP tag handling (<?...?> / <%...%>)
+        text = text.replace(
+            /(?:\n\n)( {0,3}(?:<([?%])[^\r]*?\2>)[ \t]*(?=\n{2,}))/g,
+            this.hash_element()
+        );
+        return text;
+    }
+
+    private regex_index_of(str: any, regex: any, fromIndex?: any) {
+        if (!isString(str)) {
+            throw 'The first parameter of regex_index_of must be a string';
+        }
+
+        if (regex instanceof RegExp === false) {
+            throw 'The second parameter of regex_index_of must be a regular expression instance';
+        }
+
+        const indexOf = str.substring(fromIndex || 0).search(regex);
+        return indexOf >= 0 ? indexOf + (fromIndex || 0) : indexOf;
+    }
+
+    private split_at_index(str: any, index: any) {
+        if (!isString(str)) {
+            throw 'The first parameter of split_at_index must be a string';
+        }
+
+        return [str.substring(0, index), str.substring(index)];
+    }
+
+    private replace_recursive_reg_exp(
+        str: any,
+        replacement: any,
+        left: any,
+        right: any,
+        flags: any
+    ) {
+        if (!isFunction(replacement)) {
+            const repStr = replacement;
+
+            replacement = function () {
+                return repStr;
+            };
+        }
+
+        let matchPos = this.rgx_find_match_pos(str, left, right, flags),
+            finalStr = str,
+            lng = matchPos.length;
+
+        if (lng > 0) {
+            const bits: any[] = [];
+
+            if (matchPos[0].wholeMatch.start !== 0) {
+                bits.push(str.slice(0, matchPos[0].wholeMatch.start));
+            }
+
+            for (let i = 0; i < lng; ++i) {
+                bits.push(
+                    replacement(
+                        str.slice(
+                            matchPos[i].wholeMatch.start,
+                            matchPos[i].wholeMatch.end
+                        ),
+                        str.slice(
+                            matchPos[i].match.start,
+                            matchPos[i].match.end
+                        ),
+                        str.slice(matchPos[i].left.start, matchPos[i].left.end),
+                        str.slice(
+                            matchPos[i].right.start,
+                            matchPos[i].right.end
+                        )
+                    )
+                );
+
+                if (i < lng - 1) {
+                    bits.push(
+                        str.slice(
+                            matchPos[i].wholeMatch.end,
+                            matchPos[i + 1].wholeMatch.start
+                        )
+                    );
+                }
+            }
+
+            if (matchPos[lng - 1].wholeMatch.end < str.length) {
+                bits.push(str.slice(matchPos[lng - 1].wholeMatch.end));
+            }
+
+            finalStr = bits.join('');
+        }
+
+        return finalStr;
+    }
+
+    private rgx_find_match_pos(str: any, left: any, right: any, flags: any) {
+        let f = flags || '',
+            g = f.indexOf('g') > -1,
+            x = new RegExp(`${left}|${right}`, `g${f.replace(/g/g, '')}`),
+            l = new RegExp(left, f.replace(/g/g, '')),
+            pos: any[] = [],
+            t: any,
+            s: any,
+            m: any,
+            start: any,
+            end: any;
+
+        do {
+            t = 0;
+
+            while ((m = x.exec(str))) {
+                if (l.test(m[0])) {
+                    if (!t++) {
+                        s = x.lastIndex;
+                        start = s - m[0].length;
+                    }
+                } else if (t) {
+                    if (!--t) {
+                        end = m.index + m[0].length;
+                        const obj = {
+                            left: {
+                                start: start,
+                                end: s,
+                            },
+                            match: {
+                                start: s,
+                                end: m.index,
+                            },
+                            right: {
+                                start: m.index,
+                                end: end,
+                            },
+                            wholeMatch: {
+                                start: start,
+                                end: end,
+                            },
+                        } as any;
+                        pos.push(obj);
+
+                        if (!g) {
+                            return pos;
+                        }
+                    }
+                }
+            }
+        } while (t && (x.lastIndex = s));
+
+        return pos;
+    }
+
+    private hash_element() {
+        return function (this: any, wholeMatch: any, m1: any) {
+            let blockText = m1; // remove double line breaks
+
+            blockText = blockText.replace(/\n\n/g, '\n');
+            blockText = blockText.replace(/^\n/, ''); // delete blank lines
+
+            blockText = blockText.replace(/\n+$/g, ''); // replace the text of the element with a placeholder (eg x in "¨KxK" is text)
+
+            blockText = `\n\n¨K${this.html_blocks.push(blockText) - 1}K\n\n`;
+            return blockText;
+        };
+    }
+    private hash_code_tags(text: any) {
+        const repFunc = (
+            wholeMatch: any,
+            match: any,
+            left: any,
+            right: any
+        ) => {
+            const codeblock = left + this.encode_code(match) + right;
+            return `¨C${this.html_spans.push(codeblock) - 1}C`;
+        };
+
+        text = this.replace_recursive_reg_exp(
+            text,
+            repFunc,
+            '<code\\b[^>]*>',
+            '</code>',
+            'gim'
+        );
+        return text;
+    }
+
+    private encode_amps_and_angles(text: any) {
+        text = text.replace(/&(?!#?[xX]?(?:[0-9a-fA-F]+|\w+);)/g, '&amp;');
+        // eslint-disable-next-line
+        text = text.replace(/<(?![a-z\/?$!])/gi, '&lt;');
+        text = text.replace(/</g, '&lt;');
+        text = text.replace(/>/g, '&gt;');
+        return text;
+    }
+
+    private block_gamut(text: any) {
+        // 1. Convert the reference to ensure that the title and blank lines in the reference are processed without polluting the subsequent process
+        text = this.block_quotes(text); // Quotes are temporarily not recognized
+        // 2. Convert the title
+        text = this.headers(text);
+        // 3. Horizontal dividing line
+        text = this.horizontal_rule(text);
+        // 4. List
+        text = this.lists(text);
+        // 6. Form
+        text = this.tables(text);
+        // 7. Cache all html tags
+        text = this.hash_html_blocks(text);
+        // 8. Paragraph
+        text = this.paragraphs(text);
+        return text;
+    }
+
+    private block_quotes(text: any) {
+        text = `${text}\n\n`;
+        const rgx = /(^ {0,3}&gt;[ \t]?.+\n(.+\n)*\n*)+/gm;
+        text = text.replace(rgx, (bq: any) => {
+            bq = bq.replace(/^[ \t]*&gt;[ \t]?/gm, ''); // prevent hack attacks
+
+            bq = bq.replace(/¨0/g, '');
+            bq = bq.replace(/^[ \t]+$/gm, ''); // delete lines with only spaces
+
+            bq = this.block_gamut(bq);
+            bq = bq.replace(/(^|\n)/g, '$1 '); // remove the space before the pre tag
+
+            bq = bq.replace(
+                /(\s*<pre>[^\r]+?<\/pre>)/gm,
+                function (wholeMatch: any, m1: any) {
+                    let pre = m1;
+                    pre = pre.replace(/^ {2}/gm, '¨0');
+                    pre = pre.replace(/¨0/g, '');
+                    return pre;
+                }
+            );
+            return this.hash_block(`<blockquote>\n${bq}\n</blockquote>`);
+        });
+        return text;
+    }
+
+    private headers(text: any) {
+        // ## Header, ## Header ##
+        const headerLevelStart = 1;
+        const atxStyle = /^(#{1,6})[ \t]*(.+?)[ \t]*#*\n+/gm;
+
+        function getStrCount(scrstr: any, armstr: any) {
+            // scrstr source string armstr special characters
+            let count = 0;
+
+            while (scrstr.indexOf(armstr) != -1) {
+                scrstr = scrstr.replace(armstr, '');
+                count++;
+            }
+
+            return count;
+        }
+
+        text = text.replace(atxStyle, (wholeMatch: any, m1: any, m2: any) => {
+            this.convert_flag = true;
+            const tagCount = getStrCount(wholeMatch, '#');
+
+            if (tagCount > 5) {
+                return wholeMatch; // more than 5 # ignore
+            }
+
+            const hText = m2;
+            const span = this.span_gamut(hText),
+                hLevel = headerLevelStart - 1 + m1.length,
+                header = `<h${hLevel}>${span}</h${hLevel}>`;
+            return this.hash_block(header);
+        });
+        return text;
+    }
+
+    private span_gamut(text: any) {
+        text = this.escape_special_chars_within_tag_attributes(text);
+        text = this.encode_backslash_escapes(text); // Process links and pictures, pictures need to be processed first, because the picture syntax and link syntax overlap: ![alt][url] => [title][url]
+
+        text = this.images(text);
+        text = this.anchors(text);
+        text = this.auto_links(text); // underline, bold, italic, strikethrough
+
+        text = this.underline(text);
+        text = this.italics_and_bold(text);
+        text = this.strikethrough(text); // cache html tags
+
+        text = this.hash_html_spans(text); // escape the html tags
+
+        text = this.encode_amps_and_angles(text); // space + \n => <br />\n
+
+        text = text.replace(/ +\n/g, '<br />\n');
+        return text;
+    }
+
+    private hash_html_spans(text: any) {
+        // 1. Cache self-closing tags
+        text = text.replace(/<[^>]+?\/>/gi, (wm: any) => {
+            return this.hash_html_span(wm);
+        });
+        // 2. Cache tags without attributes
+        text = text.replace(/<([^>]+?)>[\s\S]*?<\/\1>/g, (wm: any) => {
+            return this.hash_html_span(wm);
+        });
+        // 3. Cache pending attribute tags
+        text = text.replace(/<([^>]+?)\s[^>]+?>[\s\S]*?<\/\1>/g, (wm: any) => {
+            return this.hash_html_span(wm);
+        });
+        // 4. Cache self-closing and tags without slashes
+        text = text.replace(/<[^>]+?>/gi, (wm: any) => {
+            return this.hash_html_span(wm);
+        });
+        return text;
+    }
+    private hash_html_span(html: any) {
+        return `¨C${this.html_spans.push(html) - 1}C`;
+    }
+
+    private escape_special_chars_within_tag_attributes(text: any) {
+        const tags = /<\/?[a-z\d_:-]+(?:[\s]+[\s\S]+?)?>/gi,
+            comments = /<!(--(?:(?:[^>-]|-[^>])(?:[^-]|-[^-])*)--)>/gi;
+        text = text.replace(tags, (wholeMatch: any) => {
+            return wholeMatch
+                .replace(/(.)<\/?code>(?=.)/g, '$1`')
+                .replace(/([\\`*_~=|])/g, this.escape_characters_callback);
+        });
+        text = text.replace(comments, (wholeMatch: any) => {
+            return wholeMatch.replace(
+                /([\\`*_~=|])/g,
+                this.escape_characters_callback
+            );
+        });
+        return text;
+    }
+
+    private encode_backslash_escapes(text: any) {
+        text = text.replace(/\\(\\)/g, this.escape_characters_callback);
+        text = text.replace(
+            // eslint-disable-next-line
+            /\\([`*_{}\[\]()>#+.!~=|:-])/g,
+            this.escape_characters_callback
+        );
+        return text;
+    }
+
+    private images(text: any) {
+        const backupText = text;
+        const inlineRegExp =
+                /!\[([^\]]*?)][ \t]*()\([ \t]?<?([\S]+?(?:\([\S]*?\)[\S]*?)?)>?(?: =([*\d]+[A-Za-z%]{0,4})x([*\d]+[A-Za-z%]{0,4}))?[ \t]*(?:(["'])([^"]*?)\6)?[ \t]?\)/g,
+            crazyRegExp =
+                /!\[([^\]]*?)][ \t]*()\([ \t]?<([^>]*)>(?: =([*\d]+[A-Za-z%]{0,4})x([*\d]+[A-Za-z%]{0,4}))?[ \t]*(?:(?:(["'])([^"]*?)\6))?[ \t]?\)/g,
+            base64RegExp =
+                /!\[([^\]]*?)][ \t]*()\([ \t]?<?(data:.+?\/.+?;base64,[A-Za-z0-9+/=\n]+?)>?(?: =([*\d]+[A-Za-z%]{0,4})x([*\d]+[A-Za-z%]{0,4}))?[ \t]*(?:(["'])([^"]*?)\6)?[ \t]?\)/g,
+            referenceRegExp =
+                /!\[([^\]]*?)] ?(?:\n *)?\[([\s\S]*?)]()()()()()/g,
+            // eslint-disable-next-line
+            refShortcutRegExp = /!\[([^\[\]]+)]()()()()()/g;
+
+        function writeImageTagBase64(
+            wholeMatch: any,
+            altText: any,
+            linkId: any,
+            url: any,
+            width: any,
+            height: any,
+            m5: any,
+            title: any
+        ) {
+            url = url.replace(/\s/g, '');
+            return writeImageTag.call(
+                // @ts-ignore
+                this,
+                wholeMatch,
+                altText,
+                linkId,
+                url,
+                width,
+                height,
+                m5,
+                title
+            );
+        }
+
+        function writeImageTag(
+            wholeMatch: any,
+            altText: any,
+            linkId: any,
+            url: any,
+            width: any,
+            height: any,
+            m5: any,
+            title: any
+        ) {
+            // @ts-ignore
+            const gUrls = this.gUrls,
+                // @ts-ignore
+                gTitles = this.gTitles,
+                // @ts-ignore
+                gDims = this.gDimensions;
+            // @ts-ignore
+            this.convert_flag = true;
+            linkId = linkId.toLowerCase();
+
+            if (!title) {
+                title = '';
+            } // Compatible with special case: nothing is written in url
+
+            if (wholeMatch.search(/\(<?\s*>??(['"].*['"])?\)$/m) > -1) {
+                url = '';
+            } else if (url === '' || url === null) {
+                if (linkId === '' || linkId === null) {
+                    // lowercase and convert \n to spaces
+                    linkId = altText.toLowerCase().replace(/ ?\n/g, ' ');
+                }
+
+                url = `#${linkId}`;
+                /** handle footnotes */
+                if (gUrls[linkId] !== undefined) {
+                    url = gUrls[linkId];
+
+                    if (gTitles[linkId] !== undefined) {
+                        title = gTitles[linkId];
+                    }
+
+                    if (gDims[linkId] !== undefined) {
+                        width = gDims[linkId].width;
+                        height = gDims[linkId].height;
+                    }
+                } else {
+                    return wholeMatch;
+                }
+            }
+            /** handle alt */
+
+            altText = altText.replace(/"/g, '&quot;').replace(
+                MarkdownParser.regexes.asteriskDashTildeAndColon,
+                // @ts-ignore
+                this.escape_characters_callback
+            );
+            url = url.replace(
+                MarkdownParser.regexes.asteriskDashTildeAndColon,
+                // @ts-ignore
+                this.escape_characters_callback
+            );
+            if (/^\//.test(url)) {
+                // start with a slash, change to local
+                url = `file:/${url}`;
+            }
+            let result = `<img src="${url}" alt="${altText}"`;
+            /** title */
+
+            if (title && isString(title)) {
+                title = title.replace(/"/g, '&quot;').replace(
+                    MarkdownParser.regexes.asteriskDashTildeAndColon,
+                    // @ts-ignore
+                    this.escape_characters_callback
+                );
+                result += `title="${title}"`;
+            }
+            /** Width Height */
+            if (width && height) {
+                width = width === '*' ? 'auto' : width;
+                height = height === '*' ? 'auto' : height;
+                result += `width="${width}"`;
+                result += `height="${height}"`;
+            }
+
+            result += ' />';
+            return result;
+        }
+        // 1. Normal image syntax ![alt text][id]
+        text = text.replace(referenceRegExp, writeImageTag.bind(this)); // 2. Inline image syntax: ![alt text](url =<width>x<height> "optional title"), divided into different urls base64, ./image/cat1, normal url
+        // base64
+        text = text.replace(base64RegExp, writeImageTagBase64.bind(this)); // special case ./image/cat1).png
+        text = text.replace(crazyRegExp, writeImageTag.bind(this)); // normal case
+        text = text.replace(inlineRegExp, writeImageTag.bind(this)); // 3. Shorthand syntax![img text]
+        text = text.replace(refShortcutRegExp, writeImageTag.bind(this));
+        return text;
+    }
+
+    private anchors(text: any) {
+        const writeAnchorTag = (
+            wholeMatch: any,
+            linkText: any,
+            linkId: any,
+            url: any,
+            m5: any,
+            m6: any,
+            title: any
+        ) => {
+            if (title === undefined) {
+                title = '';
+            }
+
+            this.convert_flag = true;
+            linkId = linkId.toLowerCase(); // special case: url is empty
+
+            if (wholeMatch.search(/\(<?\s*>??(['"].*['"])?\)$/m) > -1) {
+                url = '';
+            } else if (!url) {
+                if (!linkId) {
+                    // lowercase and convert \n to spaces
+                    linkId = linkText.toLowerCase().replace(/ ?\n/g, ' ');
+                }
+
+                url = `#${linkId}`;
+                /** handle footnotes */
+                if (this.gUrls[linkId] !== undefined) {
+                    url = this.gUrls[linkId];
+
+                    if (this.gTitles[linkId] !== undefined) {
+                        title = this.gTitles[linkId];
+                    }
+                } else {
+                    return wholeMatch;
+                }
+            }
+
+            url = url.replace(
+                MarkdownParser.regexes.asteriskDashTildeAndColon,
+                this.escape_characters_callback
+            );
+            let result = `<a href="${url}"`;
+
+            if (title !== '' && title !== null) {
+                title = title.replace(/"/g, '&quot;');
+                title = title.replace(
+                    MarkdownParser.regexes.asteriskDashTildeAndColon,
+                    this.escape_characters_callback
+                );
+                result += `title="${title}"`;
+            }
+
+            if (!/^#/.test(url)) {
+                // escaped
+                result += ' rel="noopener noreferrer" target="¨E95Eblank"';
+            }
+
+            result += `>${linkText || url || ''}</a>`;
+            return result;
+        }; // 1. Normal syntax: [link text] [id]
+
+        text = text.replace(
+            // eslint-disable-next-line
+            /\[((?:\[[^\]]*]|[^\[\]])*)] ?(?:\n *)?\[(.*?)]()()( )()/g,
+            writeAnchorTag.bind(this)
+        ); // 2. Inline syntax: [link text](url "optional title")
+        // Special url writing: ./image/cat1).png
+        text = text.replace(
+            // eslint-disable-next-line
+            /\[((?:\[[^\]]*]|[^\[\]])*)]()[ \t]*\([ \t]?<([^>]*) >(?:[ \t]*((["'])([^"]*?)\5))?[ \t]?\)/g,
+            writeAnchorTag.bind(this)
+        ); // normal case
+        text = text.replace(
+            // eslint-disable-next-line
+            /\[((?:\[[^\]]*]|[^\[\]])*)]()[ \t]*\([ \t]?<?([\S]+ ?(?:\([\S]*?\)[\S]*?)?)>?(?:[ \t]*((["'])([^"]*?)\5 ))?[ \t]?\)/g,
+            writeAnchorTag.bind(this)
+        ); // Shorthand syntax: [link text]
+        // Consider footnotes: [link test][1]
+        // and special notation: [link test](/foo)
+        text = text.replace(
+            // eslint-disable-next-line
+            /\[([^\[\]]+)]()()()()()/g,
+            writeAnchorTag.bind(this)
+        );
+        return text;
+    }
+    private auto_links(text: any) {
+        text = text.replace(
+            MarkdownParser.regexes.delimUrlRegex,
+            this.replace_link.call(this)
+        );
+        text = text.replace(
+            MarkdownParser.regexes.delimMailRegex,
+            this.replace_mail.call(this)
+        );
+        return text;
+    }
+
+    private unescape_special_chars(text: any) {
+        text = text.replace(/¨E(\d+)E/g, function (wholeMatch: any, m1: any) {
+            const charCodeToReplace = parseInt(m1);
+            return String.fromCharCode(charCodeToReplace);
+        });
+        return text;
+    }
+
+    private underline(text: any) {
+        text = text.replace(/___(\S[\s\S]*?)___/g, (wm: any, m: any) => {
+            this.convert_flag = true;
+            return /\S$/.test(m) ? `<u>${m}</u>` : wm;
+        });
+        text = text.replace(/__(\S[\s\S]*?)__/g, (wm: any, m: any) => {
+            this.convert_flag = true;
+            return /\S$/.test(m) ? `<u>${m}</u>` : wm;
+        });
+        return text;
+    }
+
+    private italics_and_bold(text: any) {
+        function parseInside(txt: any, left: any, right: any) {
+            return left + txt + right;
+        }
+
+        text = text.replace(/__(\S[\s\S]*?)__/g, (wm: any, m: any) => {
+            this.convert_flag = true;
+            return /\S$/.test(m) ? parseInside(m, '<strong>', '</strong>') : wm;
+        });
+
+        text = text.replace(/\*\*\*(\S[\s\S]*?)\*\*\*/g, (wm: any, m: any) => {
+            this.convert_flag = true;
+            return /\S$/.test(m)
+                ? parseInside(m, '<strong><em>', '</em></strong>')
+                : wm;
+        });
+        text = text.replace(/\*\*(\S[\s\S]*?)\*\*/g, (wm: any, m: any) => {
+            this.convert_flag = true;
+            return /\S$/.test(m) ? parseInside(m, '<strong>', '</strong>') : wm;
+        });
+        text = text.replace(/\*([^\s*][\s\S]*?)\*/g, (wm: any, m: any) => {
+            // !/^\*[^*]/.test(m) - not preceded by "**" (may be redundant, delete it so as not to affect subsequent syntax checking)
+            this.convert_flag = true;
+            return /\S$/.test(m) ? parseInside(m, '<em>', '</em>') : wm;
+        });
+        return text;
+    }
+
+    private strikethrough(text: any) {
+        text = text.replace(
+            /(?:~){2}([\s\S]+?)(?:~){2}/g,
+            (wm: any, txt: any) => {
+                this.convert_flag = true;
+                return `<s>${txt}</s>`;
+            }
+        );
+        return text;
+    }
+
+    private horizontal_rule(text: any) {
+        const key = this.hash_block('<hr />');
+        text = text.replace(/^ {0,2}( ?-){3,}[ \t]*$/gm, () => {
+            this.convert_flag = true;
+            return key;
+        });
+        text = text.replace(/^ {0,2}( ?\*){3,}[ \t]*$/gm, () => {
+            this.convert_flag = true;
+            return key;
+        });
+        text = text.replace(/^ {0,2}( ?_){3,}[ \t]*$/gm, () => {
+            this.convert_flag = true;
+            return key;
+        });
+        return text;
+    }
+
+    private lists(text: any) {
+        /**
+         * Process a single ordered or unordered list, splitting it into separate list items
+         * @param {string} listStr
+         * @param {boolean} trimTrailing
+         * @returns {string}
+         */
+        const processListItems = (listStr: any, trimTrailing: any) => {
+            // list_level keeps track of when we enter the list, and every time we enter the list, this property is incremented
+            // When the list ends, the value is decremented; if the value is 0, it is not currently in any list
+            //
+            // special case:
+            //
+            // blah blah blah blah blah blah, for example, a value is
+            // 8. At this point, the following line will be treated as a sublist
+            // I will be treated as a sublist
+            //
+            // The list is difficult to parse perfectly, and there are many problems with its handling by showdown, but there is no better solution in the community
+            // @ts-ignore
+            this.list_level++; // empty line to kill
+
+            listStr = listStr.replace(/\n{2,}$/, '\n'); // emulate \Z
+
+            listStr += '¨0';
+            const rgx =
+                    /(\n)?(^ {0,3})([*+-]|\d+[.])[ \t]+((\[(x|X| )?])?[ \t] *[^\r]+?(\n{1,2}))(?=\n*(¨0| {0,3}([*+-]|\d+[.])[ \t] +))/gm,
+                isParagraphed = /\n[ \t]*\n(?!¨0)/.test(listStr);
+            listStr = listStr.replace(
+                rgx,
+                (
+                    wholeMatch: any,
+                    m1: any,
+                    m2: any,
+                    m3: any,
+                    m4: any,
+                    taskbtn: any,
+                    checked: any
+                ) => {
+                    checked = checked && checked.trim() !== '';
+                    let item = this.outdent(m4),
+                        bulletStyle = ''; // ISSUE for showdown: 312
+
+                    item = item.replace(
+                        /^([-*+]|\d\.)[ \t]+[\S\n ]*/g,
+                        function (wm2: any) {
+                            return `¨A${wm2}`;
+                        }
+                    ); // special case:
+                    // - # zbc
+                    // zbczbc
+
+                    if (/^#+.+\n.+/.test(item)) {
+                        item = item.replace(/^(#+.+)$/m, '$1\n');
+                    }
+
+                    if (m1 || item.search(/\n{2,}/) > -1) {
+                        item = this.github_code_block(item); // code block in list
+                        item = this.block_gamut(item);
+                    } else {
+                        // sublist recursion
+                        item = this.lists(item);
+                        item = item.replace(/\n$/, ''); // chomp(item)
+
+                        item = this.hash_html_blocks(item); // Double wrapping is folded, keeping at most double wrapping
+
+                        item = item.replace(/\n\n+/g, '\n\n');
+
+                        if (isParagraphed) {
+                            item = this.paragraphs(item);
+                        } else {
+                            item = this.span_gamut(item);
+                        }
+                    } // reverse escaping
+
+                    item = item.replace('¨A', '');
+                    item = `<li${bulletStyle}>${item}</li>\n`;
+                    return item;
+                }
+            );
+            listStr = listStr.replace(/¨0/g, '');
+            // @ts-ignore
+            this.list_level--;
+
+            if (trimTrailing) {
+                listStr = listStr.replace(/\s+$/, '');
+            }
+
+            return listStr;
+        };
+
+        function styleStartNumber(list: any, listType: any) {
+            // is ol and does not start with 1
+            if (listType === 'ol') {
+                const res = list.match(/^ *(\d+)\./);
+
+                if (res && res[1] !== '1') {
+                    return `start="${res[1]}"`;
+                }
+            }
+
+            return '';
+        }
+        /**
+         * Check and parse consecutive lists
+         * @param {string} list
+         * @param {string} listType
+         * @param {boolean} trimTrailing
+         * @returns {string}
+         */
+
+        function parseConsecutiveLists(
+            list: any,
+            listType: any,
+            trimTrailing: any
+        ) {
+            // Check if we are capturing multiple lists by mistake
+            // If there is an error capture, swap ol and ul at the location where the error is captured
+            // Due to the particularity of the checkbox, the checkbox is not considered in this position
+            let olRgx = /^ {0,3}\d+\.[ \t]/gm,
+                ulRgx = /^ {0,3}[*+-][ \t]/gm,
+                counterRxg = listType === 'ul' ? olRgx : ulRgx,
+                result = '';
+
+            if (list.search(counterRxg) !== -1) {
+                // @ts-ignore
+                this.convert_flag = true;
+                (function parse_cl(this: any, txt: any) {
+                    const pos = txt.search(counterRxg),
+                        style = styleStartNumber(list, listType);
+
+                    if (pos !== -1) {
+                        // slice
+                        result += `\n\n<${listType}${style}>\n${processListItems.call(
+                            this,
+                            txt.slice(0, pos),
+                            !!trimTrailing
+                        )}</${listType}>\n`; // swap ol and ul
+
+                        listType = listType === 'ul' ? 'ol' : 'ul';
+                        counterRxg = listType === 'ul' ? olRgx : ulRgx; // continue
+
+                        parse_cl.call(this, txt.slice(pos));
+                    } else {
+                        result += `\n\n<${listType}${style}>\n${processListItems.call(
+                            this,
+                            txt,
+                            !!trimTrailing
+                        )}</${listType}>\n`;
+                    }
+                    // @ts-ignore
+                }.call(this, list));
+            } else {
+                const style = styleStartNumber(list, listType);
+
+                if (listType === 'ul') {
+                    // @ts-ignore
+                    this.convert_flag = true; // individual unordered lists can be converted
+                }
+
+                result = `\n\n<${listType}${style}>\n${processListItems.call(
+                    // @ts-ignore
+                    this,
+                    list,
+                    !!trimTrailing
+                )}</${listType}>\n`;
+            }
+
+            return result;
+        }
+
+        const subListRgx =
+            /^(( {0,3}([*+-]|\d+[.])[ \t]+)[^\r]+?(¨0|\n{2,}(?=\S)(?![ \t]*(?:[*+-]|\d+[.])[ \t]+)))/gm;
+        const mainListRgx =
+            /(\n\n|^\n?)(( {0,3}([*+-]|\d+[.])[ \t]+)[^\r]+?(¨0|\n{2,}(?=\S)(?![ \t]*(?:[*+-]|\d+[.])[ \t]+)))/gm;
+        text += '¨0';
+
+        if (this.list_level) {
+            text = text.replace(
+                subListRgx,
+                (wholeMatch: any, list: any, m2: any) => {
+                    const listType = m2.search(/[*+-]/g) > -1 ? 'ul' : 'ol';
+                    return parseConsecutiveLists.call(
+                        this,
+                        list,
+                        listType,
+                        true
+                    );
+                }
+            );
+        } else {
+            text = text.replace(
+                mainListRgx,
+                (wholeMatch: any, m1: any, list: any, m3: any) => {
+                    const listType = m3.search(/[*+-]/g) > -1 ? 'ul' : 'ol';
+                    return parseConsecutiveLists.call(
+                        this,
+                        list,
+                        listType,
+                        false
+                    );
+                }
+            );
+        }
+
+        text = text.replace(/¨0/, '');
+        return text;
+    }
+
+    private paragraphs(text: any) {
+        // get rid of the leading and trailing \n
+        text = text.replace(/^\n+/g, '');
+        text = text.replace(/\n+$/g, '');
+        const grafs = text.split(/\n{2,}/g);
+        const grafsOut: any[] = [];
+        let end = grafs.length; // wrap the p tag
+
+        for (let i = 0; i < end; i++) {
+            let str = grafs[i]; // cache html tags
+
+            if (str.search(/¨(K|G)(\d+)\1/g) >= 0) {
+                grafsOut.push(str); // new empty line exists as p tag
+            } else if (str.search(/\S/) >= 0) {
+                str = this.span_gamut(str);
+                str = str.replace(/^([ \t]*)/g, '<div>');
+                str += '</div>';
+                grafsOut.push(str);
+            }
+        }
+        /** unhash */
+
+        end = grafsOut.length;
+
+        for (let i = 0; i < end; i++) {
+            let blockText = '',
+                grafsOutIt = grafsOut[i],
+                codeFlag = false;
+
+            while (/¨(K|G)(\d+)\1/.test(grafsOutIt)) {
+                const delim = RegExp.$1;
+                const num = parseInt(RegExp.$2);
+
+                if (delim === 'K') {
+                    blockText = this.html_blocks[num];
+                } else {
+                    // Determine whether the current parsed content is in other grammar blocks
+                    if (codeFlag) {
+                        blockText = this.encode_code(
+                            this.code_blocks[num].text
+                        );
+                    } else {
+                        blockText = this.code_blocks[num].codeblock;
+                    }
+                }
+
+                blockText = blockText.replace(/\$/g, '$$$$'); // $ character conversion
+
+                grafsOutIt = grafsOutIt.replace(
+                    /(\n\n)?¨(K|G)\d+\2(\n\n)?/,
+                    blockText
+                );
+
+                if (/^<pre\b[^>]*>\s*<code\b[^>]*>/.test(grafsOutIt)) {
+                    codeFlag = true;
+                }
+            }
+
+            grafsOut[i] = grafsOutIt;
+        }
+
+        text = grafsOut.join('\n'); // remove newline
+
+        text = text.replace(/^\n+/g, '');
+        text = text.replace(/\n+$/g, '');
+        return text;
+    }
+    private tables(text: any) {
+        const tableRgx =
+                /^ {0,3}\|?.+\|.+\n {0,3}\|?[ \t]*:?[ \t]*(?:[-=]){2,}[ \t]*:?[ \t]*\|[ \t]*:?[ \t]*(?:[-=]){2,}[\s\S]+?(?:\n\n|¨0)/gm,
+            singeColTblRgx =
+                /^ {0,3}\|.+\|[ \t]*\n {0,3}\|[ \t]*:?[ \t]*(?:[-=]){2,}[ \t]*:?[ \t]*\|[ \t]*\n( {0,3}\|.+\|[ \t]*\n)*(?:\n|¨0)/gm;
+
+        function parseStyles(sLine: any) {
+            if (/^:[ \t]*--*$/.test(sLine)) {
+                return ' style="text-align:left;"';
+            } else if (/^--*[ \t]*:[ \t]*$/.test(sLine)) {
+                return ' style="text-align:right;"';
+            } else if (/^:[ \t]*--*[ \t]*:$/.test(sLine)) {
+                return ' style="text-align:center;"';
+            } else {
+                return '';
+            }
+        }
+
+        function parseHeaders(header: any, style: any) {
+            header = header.trim();
+            // @ts-ignore
+            header = this.span_gamut(header);
+            return `<th${style}>${header}</th>\n`;
+        }
+
+        function parseCells(cell: any, style: any) {
+            // @ts-ignore
+            const subText = this.span_gamut(cell);
+            return `<td${style}>${subText}</td>\n`;
+        }
+
+        function buildTable(headers: any, cells: any) {
+            let tb = '<table>\n<thead>\n<tr>\n',
+                tblLgn = headers.length;
+
+            for (let i = 0; i < tblLgn; ++i) {
+                tb += headers[i];
+            }
+
+            tb += '</tr>\n</thead>\n<tbody>\n';
+
+            for (let i = 0; i < cells.length; ++i) {
+                tb += '<tr>\n';
+
+                for (let ii = 0; ii < tblLgn; ++ii) {
+                    tb += cells[i][ii];
+                }
+
+                tb += '</tr>\n';
+            }
+
+            tb += '</tbody>\n</table>\n';
+            return tb;
+        }
+
+        function parseTable(this: any, rawTable: any) {
+            let i: any,
+                tableLines = rawTable.split('\n');
+            this.convert_flag = true;
+
+            for (i = 0; i < tableLines.length; ++i) {
+                if (/^ {0,3}\|/.test(tableLines[i])) {
+                    tableLines[i] = tableLines[i].replace(/^ {0,3}\|/, '');
+                }
+
+                if (/\|[ \t]*$/.test(tableLines[i])) {
+                    tableLines[i] = tableLines[i].replace(/\|[ \t]*$/, '');
+                }
+            }
+
+            const rawHeaders = (tableLines[0] || '')
+                .split('|')
+                .map(function (s: any) {
+                    return s.trim();
+                });
+            const rawStyles = (tableLines[1] || '')
+                .split('|')
+                .map(function (s: any) {
+                    return s.trim();
+                });
+            const rawCells: any[] = [];
+            const headers: any[] = [];
+            const styles: any[] = [];
+            const cells: any[] = [];
+            tableLines.shift();
+            tableLines.shift();
+
+            for (i = 0; i < tableLines.length; ++i) {
+                if (tableLines[i].trim() === '') {
+                    continue;
+                }
+
+                rawCells.push(
+                    (tableLines[i] || '').split('|').map(function (s: any) {
+                        return s.trim();
+                    })
+                );
+            }
+
+            if (rawHeaders.length < rawStyles.length) {
+                return rawTable;
+            }
+
+            for (i = 0; i < rawStyles.length; ++i) {
+                styles.push(parseStyles(rawStyles[i]));
+            }
+
+            for (i = 0; i < rawHeaders.length; ++i) {
+                if (styles[i] === undefined) {
+                    styles[i] = '';
+                }
+
+                headers.push(parseHeaders.call(this, rawHeaders[i], styles[i]));
+            }
+
+            for (i = 0; i < rawCells.length; ++i) {
+                const row: any[] = [];
+
+                for (let ii = 0; ii < headers.length; ++ii) {
+                    if (rawCells[i][ii] === undefined) {
+                        return rawTable;
+                    }
+
+                    row.push(
+                        parseCells.call(this, rawCells[i][ii], styles[ii])
+                    );
+                }
+
+                cells.push(row);
+            }
+
+            return buildTable(headers, cells);
+        }
+
+        text = text.replace(/\\(\|)/g, this.escape_characters_callback); // Multi-column form
+
+        text = text.replace(tableRgx, parseTable.bind(this)); // single-column table
+
+        text = text.replace(singeColTblRgx, parseTable.bind(this));
+        return text;
+    }
+
+    private unhash_html_spans(text: any) {
+        for (let i = 0; i < this.html_spans.length; ++i) {
+            let repText = this.html_spans[i],
+                // recursion counter to prevent infinite loop, pop the loop when it is 10
+                limit = 0;
+
+            while (/¨C(\d+)C/.test(repText)) {
+                const num = parseInt(RegExp.$1);
+                repText = repText.replace(`¨C${num}C`, this.html_spans[num]);
+
+                if (limit === 10) {
+                    break;
+                }
+
+                ++limit;
+            }
+
+            text = text.replace(`¨C${i}C`, repText);
+        }
+
+        return text;
+    }
+
+    private outdent(text: any) {
+        text = text.replace(/^(\t|[ ]{1,4})/gm, '¨0'); // clear the flag
+
+        text = text.replace(/¨0/g, '');
+        return text;
+    }
+}
+
+export { MarkdownParser };
diff --git a/libs/components/editor-core/src/editor/clipboard/types.ts b/libs/components/editor-core/src/editor/clipboard/types.ts
new file mode 100644
index 000000000..d57d312f8
--- /dev/null
+++ b/libs/components/editor-core/src/editor/clipboard/types.ts
@@ -0,0 +1,29 @@
+import {
+    BlockFlavorKeys,
+    DefaultColumnsValue,
+} from '@toeverything/datasource/db-service';
+import { SelectInfo } from '../selection';
+
+export const OFFICE_CLIPBOARD_MIMETYPE = {
+    DOCS_DOCUMENT_SLICE_CLIP_WRAPPED: 'affine/x-c+w',
+    HTML: 'text/html',
+    TEXT: 'text/plain',
+    IMAGE_BMP: 'image/bmp',
+    IMAGE_GIF: 'image/gif',
+    IMAGE_JPEG: 'image/jpeg',
+    IMAGE_JPG: 'image/jpg',
+    IMAGE_PNG: 'image/png',
+    IMAGE_SVG: 'image/svg',
+    IMAGE_WEBP: 'image/webp',
+};
+
+export interface ClipBlockInfo {
+    type: BlockFlavorKeys;
+    properties?: Partial<DefaultColumnsValue>;
+    children: ClipBlockInfo[];
+}
+
+export interface InnerClipInfo {
+    select: SelectInfo;
+    data: ClipBlockInfo[];
+}
diff --git a/libs/components/editor-core/src/editor/commands/block-commands.ts b/libs/components/editor-core/src/editor/commands/block-commands.ts
new file mode 100644
index 000000000..f21a36d56
--- /dev/null
+++ b/libs/components/editor-core/src/editor/commands/block-commands.ts
@@ -0,0 +1,172 @@
+import { BlockFlavorKeys, Protocol } from '@toeverything/datasource/db-service';
+import { sleep } from '@toeverything/utils';
+import type { AsyncBlock } from '../../editor';
+import { mergeGroup, splitGroup } from '../../recast-block';
+import { Editor as BlockEditor } from '../editor';
+import { GridDropType } from './types';
+
+/**
+ *
+ * commands for control blocks
+ * @export
+ * @class BlockCommands
+ */
+export class BlockCommands {
+    private _editor: BlockEditor;
+
+    constructor(editor: BlockEditor) {
+        this._editor = editor;
+    }
+
+    /**
+     *
+     * create a block after typed id
+     * @param {keyof BlockFlavors} type
+     * @param {string} blockId
+     * @return {*}
+     * @memberof BlockCommands
+     */
+    public async createNextBlock(
+        blockId: string,
+        type: BlockFlavorKeys = Protocol.Block.Type.text
+    ) {
+        const block = await this._editor.getBlockById(blockId);
+        if (block) {
+            const next_block = await this._editor.createBlock(type);
+            if (next_block) {
+                await block.after(next_block);
+                this._editor.selectionManager.activeNodeByNodeId(next_block.id);
+                return next_block;
+            }
+        }
+        return undefined;
+    }
+
+    /**
+     *
+     * remove block by block id
+     * @param {string} blockId
+     * @memberof BlockCommands
+     */
+    public async removeBlock(blockId: string) {
+        const block = await this._editor.getBlockById(blockId);
+        if (block) {
+            block.remove();
+        }
+    }
+
+    /**
+     *
+     * convert blocks to other type
+     * @param {BlockFlavorKeys} type
+     * @memberof BlockCommands
+     */
+    public async convertBlock(blockId: string, type: BlockFlavorKeys) {
+        const block = await this._editor.getBlockById(blockId);
+        if (block) {
+            await block.setType(type);
+            await sleep(10);
+            this._editor.selectionManager.activeNodeByNodeId(block.id);
+        }
+        return block;
+    }
+
+    /**
+     *
+     * move block to another block`s after
+     * @param {string} from
+     * @param {string} to
+     * @memberof BlockCommands
+     */
+    public async moveBlockAfter(from: string, to: string) {
+        const fromBlock = await this._editor.getBlockById(from);
+        const toBlock = await this._editor.getBlockById(to);
+        if (fromBlock && toBlock) {
+            await fromBlock.remove();
+            await toBlock.after(fromBlock);
+        }
+    }
+
+    /**
+     *
+     * move block to another block`s after
+     * @param {string} from
+     * @param {string} to
+     * @memberof BlockCommands
+     */
+    public async moveBlockBefore(from: string, to: string) {
+        const fromBlock = await this._editor.getBlockById(from);
+        const toBlock = await this._editor.getBlockById(to);
+        if (fromBlock && toBlock) {
+            await fromBlock.remove();
+            await toBlock.before(fromBlock);
+        }
+    }
+
+    /**
+     *
+     * add a new layout block
+     * @param {string} dragBlockId
+     * @param {string} dropBlockId
+     * @param {*} [type=GridDropType.left]
+     * @memberof BlockCommands
+     */
+    public async createLayoutBlock(
+        dragBlockId: string,
+        dropBlockId: string,
+        type = GridDropType.left
+    ) {
+        const layoutBlock = await this._editor.createBlock(
+            Protocol.Block.Type.grid
+        );
+        const dragBlock = await this._editor.getBlockById(dragBlockId);
+        const dropBlock = await this._editor.getBlockById(dropBlockId);
+        const leftGridItemBlock = await this._editor.createBlock(
+            Protocol.Block.Type.gridItem
+        );
+        const rightGridItemBlock = await this._editor.createBlock(
+            Protocol.Block.Type.gridItem
+        );
+        let leftBlock, rightBlock;
+        if (type === GridDropType.left) {
+            leftBlock = dragBlock;
+            rightBlock = dropBlock;
+        } else {
+            leftBlock = dropBlock;
+            rightBlock = dragBlock;
+        }
+        await dropBlock.after(layoutBlock);
+        await leftBlock.remove();
+        await rightBlock.remove();
+        await leftGridItemBlock.append(leftBlock);
+        await rightGridItemBlock.append(rightBlock);
+        await layoutBlock.append(leftGridItemBlock, rightGridItemBlock);
+        return layoutBlock;
+    }
+
+    public async createGridItem(blockId: string) {
+        const gridItemBlock = await this.createNextBlock(
+            blockId,
+            Protocol.Block.Type.gridItem
+        );
+        if (gridItemBlock) {
+            const textBlock = await this._editor.createBlock(
+                Protocol.Block.Type.text
+            );
+            gridItemBlock.append(textBlock);
+            return [gridItemBlock, textBlock];
+        }
+        return [];
+    }
+
+    public async splitGroupFromBlock(blockId: string) {
+        const block = await this._editor.getBlockById(blockId);
+        await splitGroup(this._editor, block);
+        return;
+    }
+
+    public async mergeGroup(...blocks: AsyncBlock[]) {
+        await mergeGroup(...blocks);
+        return;
+    }
+}
diff --git a/libs/components/editor-core/src/editor/commands/index.ts b/libs/components/editor-core/src/editor/commands/index.ts
new file mode 100644
index 000000000..0f48f24b9
--- /dev/null
+++ b/libs/components/editor-core/src/editor/commands/index.ts
@@ -0,0 +1,21 @@
+import { BlockEditor } from '../..';
+import { BlockCommands } from './block-commands';
+import { TextCommands } from './text-commands';
+export * from './types';
+
+/**
+ *
+ * commands bind with editor , use for change model data
+ * if want to get some block info use block helper
+ * @export
+ * @class EditorCommands
+ * @deprecated to move into dbCommands
+ */
+export class EditorCommands {
+    public blockCommands: BlockCommands;
+    public textCommands: TextCommands;
+    constructor(editor: BlockEditor) {
+        this.blockCommands = new BlockCommands(editor);
+        this.textCommands = new TextCommands(editor);
+    }
+}
diff --git a/libs/components/editor-core/src/editor/commands/text-commands.ts b/libs/components/editor-core/src/editor/commands/text-commands.ts
new file mode 100644
index 000000000..0ab375602
--- /dev/null
+++ b/libs/components/editor-core/src/editor/commands/text-commands.ts
@@ -0,0 +1,49 @@
+/**
+ *
+ * commands for control text and text styles
+ * @export
+ * @class TextCommand
+ */
+import { BlockEditor } from '../..';
+
+export class TextCommands {
+    private _editor: BlockEditor;
+
+    constructor(editor: BlockEditor) {
+        this._editor = editor;
+    }
+
+    /**
+     *
+     * get block text by block id
+     * @param {string} blockId
+     * @return {*}
+     * @memberof TextCommand
+     */
+    public async getBlockText(blockId: string) {
+        let string = '';
+        const block = await this._editor.getBlockById(blockId);
+        if (block) {
+            string = block.getProperty('text')?.value[0]?.text || '';
+        }
+        return string;
+    }
+
+    /**
+     *
+     * set block text by block id
+     * @param {string} blockId
+     * @param {string} text
+     * @memberof TextCommand
+     */
+    public async setBlockText(blockId: string, text: string) {
+        const block = await this._editor.getBlockById(blockId);
+        if (block) {
+            await block.setProperty('text', { value: [{ text: text }] });
+        }
+    }
+
+    public async getBlockRichText() {
+        // TODO: need implement
+    }
+}
diff --git a/libs/components/editor-core/src/editor/commands/types.ts b/libs/components/editor-core/src/editor/commands/types.ts
new file mode 100644
index 000000000..e26427b12
--- /dev/null
+++ b/libs/components/editor-core/src/editor/commands/types.ts
@@ -0,0 +1,4 @@
+export enum GridDropType {
+    left = 'left',
+    right = 'right',
+}
diff --git a/libs/components/editor-core/src/editor/drag-drop/drag-drop.ts b/libs/components/editor-core/src/editor/drag-drop/drag-drop.ts
new file mode 100644
index 000000000..2da6d1a42
--- /dev/null
+++ b/libs/components/editor-core/src/editor/drag-drop/drag-drop.ts
@@ -0,0 +1,290 @@
+import { domToRect, Point, ValueOf } from '@toeverything/utils';
+import { AsyncBlock } from '../..';
+import { GridDropType } from '../commands/types';
+import { Editor } from '../editor';
+import { BlockDropPlacement, GroupDirection } from '../types';
+// TODO: Evaluate implementing custom events with Rxjs
+import EventEmitter from 'eventemitter3';
+
+type DargType =
+    | ValueOf<InstanceType<typeof DragDropManager>['dragActions']>
+    | '';
+export class DragDropManager {
+    private _editor: Editor;
+    private _enabled: boolean;
+
+    private _blockIdKey = 'blockId';
+    private _rootIdKey = 'rootId';
+    private _dragType: DargType;
+    private _blockDragDirection: BlockDropPlacement;
+    private _blockDragTargetId = '';
+
+    private _dragBlockHotDistance = 20;
+
+    private _dragActions = {
+        dragBlock: 'dragBlock',
+        dragGroup: 'dragGroup',
+    } as const;
+
+    get dragActions() {
+        return this._dragActions;
+    }
+
+    constructor(editor: Editor) {
+        this._editor = editor;
+        this._enabled = true;
+        this._dragType = '';
+        this._blockDragDirection = BlockDropPlacement.none;
+    }
+
+    get dragType() {
+        return this._dragType;
+    }
+
+    set dragType(type: DargType) {
+        this._dragType = type;
+    }
+
+    private _setBlockDragDirection(direction: BlockDropPlacement) {
+        this._blockDragDirection = direction;
+    }
+
+    private _setBlockDragTargetId(id: string) {
+        this._blockDragTargetId = id;
+    }
+
+    private async _canBeDrop(event: React.DragEvent<Element>) {
+        const blockId = event.dataTransfer.getData(this._blockIdKey);
+        if (blockId === undefined || this._blockDragTargetId === undefined) {
+            return false;
+        }
+        let curr = this._blockDragTargetId;
+        while (curr !== this._editor.getRootBlockId()) {
+            if (curr === blockId) return false;
+            const block = await this._editor.getBlockById(curr);
+            curr = block.parentId;
+        }
+        return true;
+    }
+
+    private async _handleDropBlock(event: React.DragEvent<Element>) {
+        if (this._blockDragDirection !== BlockDropPlacement.none) {
+            const blockId = event.dataTransfer.getData(this._blockIdKey);
+            if (!(await this._canBeDrop(event))) return;
+            if (this._blockDragDirection === BlockDropPlacement.bottom) {
+                this._editor.commands.blockCommands.moveBlockAfter(
+                    blockId,
+                    this._blockDragTargetId
+                );
+            }
+            if (
+                [BlockDropPlacement.left, BlockDropPlacement.right].includes(
+                    this._blockDragDirection
+                )
+            ) {
+                await this._editor.commands.blockCommands.createLayoutBlock(
+                    blockId,
+                    this._blockDragTargetId,
+                    this._blockDragDirection === BlockDropPlacement.left
+                        ? GridDropType.left
+                        : GridDropType.right
+                );
+            }
+        }
+    }
+
+    public async getGroupBlockByPoint(point: Point) {
+        const blockList = await this._editor.getBlockList();
+        return blockList.find(block => {
+            if (block.type === 'group' && block.dom) {
+                const rect = domToRect(block.dom);
+                if (rect.fromNewLeft(rect.left - 30).isContainPoint(point)) {
+                    return true;
+                }
+            }
+            return false;
+        });
+    }
+
+    private async _handleDropGroup(event: React.DragEvent<Element>) {
+        const blockId = event.dataTransfer.getData(this._blockIdKey);
+        const toGroup = await this.getGroupBlockByPoint(
+            new Point(event.clientX, event.clientY)
+        );
+        if (toGroup && blockId && toGroup.id !== blockId) {
+            const fromGroup = await this._editor.getBlockById(blockId);
+            if (fromGroup) {
+                const direction = await this.checkDragGroupDirection(
+                    fromGroup,
+                    toGroup,
+                    new Point(event.clientX, event.clientY)
+                );
+                direction === GroupDirection.down
+                    ? this._editor.commands.blockCommands.moveBlockAfter(
+                          blockId,
+                          toGroup.id
+                      )
+                    : this._editor.commands.blockCommands.moveBlockBefore(
+                          blockId,
+                          toGroup.id
+                      );
+            }
+        }
+    }
+
+    public isEnabled() {
+        return this._enabled;
+    }
+
+    public enableDragDrop(enabled: boolean) {
+        this._enabled = enabled;
+    }
+
+    public disableDragDrop(disable: boolean) {
+        this._enabled = false;
+    }
+
+    public setDragBlockInfo(event: React.DragEvent<Element>, blockId: string) {
+        this.dragType = this.dragActions.dragBlock;
+        event.dataTransfer.setData(
+            this._dragActions.dragBlock,
+            this.dragActions.dragBlock
+        );
+        event.dataTransfer.setData(this._blockIdKey, blockId);
+        event.dataTransfer.setData(
+            this._rootIdKey,
+            this._editor.getRootBlockId()
+        );
+    }
+
+    /**
+     *
+     *  Drag data store's dragover event is Protected mode.
+     * Drag over can not get dataTransfer value by event.dataTransfer.
+     * @param {React.DragEvent<Element>} [event]
+     * @return {*}
+     * @memberof DragDropManager
+     */
+    public isDragBlock(event: React.DragEvent<Element>) {
+        return event.dataTransfer.types.includes(
+            this.dragActions.dragBlock.toLowerCase()
+        );
+    }
+
+    public setDragGroupInfo(event: React.DragEvent<Element>, blockId: string) {
+        this.dragType = this.dragActions.dragGroup;
+        event.dataTransfer.setData(
+            this._dragActions.dragGroup,
+            this.dragActions.dragGroup
+        );
+        event.dataTransfer.setData(this._blockIdKey, blockId);
+        event.dataTransfer.setData(
+            this._rootIdKey,
+            this._editor.getRootBlockId()
+        );
+    }
+
+    /**
+     *
+     *  Drag data store's dragover event is Protected mode.
+     * Drag over can not get dataTransfer value by event.dataTransfer.
+     * @param {React.DragEvent<Element>} [event]
+     * @return {*}
+     * @memberof DragDropManager
+     */
+    public isDragGroup(event: React.DragEvent<Element>) {
+        return event.dataTransfer.types.includes(
+            this.dragActions.dragGroup.toLowerCase()
+        );
+    }
+
+    public async checkBlockDragTypes(
+        event: React.DragEvent<Element>,
+        blockDom: HTMLElement,
+        blockId: string
+    ) {
+        const { clientX, clientY } = event;
+        this._setBlockDragTargetId(blockId);
+
+        const mousePoint = new Point(clientX, clientY);
+        const rect = domToRect(blockDom);
+        let direction = BlockDropPlacement.bottom;
+        if (mousePoint.x - rect.left <= this._dragBlockHotDistance) {
+            direction = BlockDropPlacement.left;
+        }
+        if (rect.right - mousePoint.x <= this._dragBlockHotDistance) {
+            direction = BlockDropPlacement.right;
+        }
+        if (!rect.isContainPoint(mousePoint)) {
+            direction = BlockDropPlacement.none;
+        }
+        if (!(await this._canBeDrop(event))) {
+            direction = BlockDropPlacement.none;
+        }
+        this._setBlockDragDirection(direction);
+        return direction;
+    }
+
+    public handlerEditorDrop(event: React.DragEvent<Element>) {
+        // IMP: can not use Decorators now may use decorators is right
+        if (this.isEnabled()) {
+            if (this.isDragBlock(event)) {
+                this._handleDropBlock(event);
+            }
+            if (this.isDragGroup(event)) {
+                this._handleDropGroup(event);
+            }
+        }
+        this.dragType = '';
+    }
+
+    public handlerEditorDragOver(event: React.DragEvent<Element>) {
+        // IMP: can not use Decorators now
+    }
+
+    public handlerEditorDragEnd(event: React.DragEvent<Element>) {
+        this._resetDragDropData();
+        if (this.isEnabled()) {
+            // TODO: handle drag end event flow
+        }
+    }
+
+    private _resetDragDropData() {
+        this._dragType = '';
+        this._setBlockDragDirection(BlockDropPlacement.none);
+        this._setBlockDragTargetId('');
+    }
+
+    public async checkDragGroupDirection(
+        groupBlock: AsyncBlock,
+        dragOverGroup: AsyncBlock,
+        mousePoint: Point
+    ) {
+        let direction = GroupDirection.down;
+        if (groupBlock && dragOverGroup && dragOverGroup.dom) {
+            const preBlock = await dragOverGroup.previousSibling();
+            const nextBlock = await dragOverGroup.nextSibling();
+            let isSibling = false;
+            if (preBlock?.id === groupBlock.id) {
+                direction = GroupDirection.down;
+                isSibling = true;
+            }
+            if (nextBlock?.id === groupBlock.id) {
+                direction = GroupDirection.up;
+                isSibling = true;
+            }
+            if (!isSibling) {
+                const dragOverGroupRect = domToRect(dragOverGroup.dom);
+                if (
+                    mousePoint.y <
+                    dragOverGroupRect.top + dragOverGroupRect.height / 2
+                ) {
+                    direction = GroupDirection.up;
+                } else {
+                    direction = GroupDirection.down;
+                }
+            }
+        }
+        return direction;
+    }
+}
diff --git a/libs/components/editor-core/src/editor/drag-drop/index.ts b/libs/components/editor-core/src/editor/drag-drop/index.ts
new file mode 100644
index 000000000..0aa0b8feb
--- /dev/null
+++ b/libs/components/editor-core/src/editor/drag-drop/index.ts
@@ -0,0 +1,2 @@
+export { DragDropManager } from './drag-drop';
+export * from './types';
diff --git a/libs/components/editor-core/src/editor/drag-drop/types.ts b/libs/components/editor-core/src/editor/drag-drop/types.ts
new file mode 100644
index 000000000..f7cc40133
--- /dev/null
+++ b/libs/components/editor-core/src/editor/drag-drop/types.ts
@@ -0,0 +1,12 @@
+export enum BlockDropPlacement {
+    left = 'left',
+    right = 'right',
+    top = 'top',
+    bottom = 'bottom',
+    none = 'none',
+}
+
+export enum GroupDirection {
+    up = 'up',
+    down = 'down',
+}
diff --git a/libs/components/editor-core/src/editor/editor.ts b/libs/components/editor-core/src/editor/editor.ts
new file mode 100644
index 000000000..ad527ea55
--- /dev/null
+++ b/libs/components/editor-core/src/editor/editor.ts
@@ -0,0 +1,450 @@
+/* eslint-disable max-lines */
+import type { ReactNode } from 'react';
+import HotKeys from 'hotkeys-js';
+import LRUCache from 'lru-cache';
+
+import { services } from '@toeverything/datasource/db-service';
+import type {
+    BlockFlavors,
+    ReturnEditorBlock,
+    UpdateEditorBlock,
+} from '@toeverything/datasource/db-service';
+import type { PatchNode, UnPatchNode } from '@toeverything/components/ui';
+
+import { AsyncBlock } from './block';
+import type { WorkspaceAndBlockId } from './block';
+import type { BaseView } from './views/base-view';
+import { SelectionManager } from './selection';
+import { Hooks, PluginManager } from './plugin';
+import { EditorCommands } from './commands';
+import {
+    Virgo,
+    HooksRunner,
+    PluginHooks,
+    PluginCreator,
+    StorageManager,
+    VirgoSelection,
+    PluginManagerInterface,
+} from './types';
+import { KeyboardManager } from './keyboard';
+import { MouseManager } from './mouse';
+import { ScrollManager } from './scroll';
+import assert from 'assert';
+import { domToRect, last, Point, sleep } from '@toeverything/utils';
+import { Commands } from '@toeverything/datasource/commands';
+import { BrowserClipboard } from './clipboard/browser-clipboard';
+import { ClipboardPopulator } from './clipboard/clipboard-populator';
+import { BlockHelper } from './block/block-helper';
+import { DragDropManager } from './drag-drop';
+
+export interface EditorCtorProps {
+    workspace: string;
+    views: Partial<Record<keyof BlockFlavors, BaseView>>;
+    plugins: PluginCreator[];
+    rootBlockId?: string;
+    isWhiteboard?: boolean;
+}
+
+export class Editor implements Virgo {
+    private cache_manager = new LRUCache<string, Promise<AsyncBlock | null>>({
+        max: 8192,
+        ttl: 1000 * 60 * 30,
+    });
+    public mouseManager = new MouseManager(this);
+    public selectionManager = new SelectionManager(this);
+    public keyboardManager = new KeyboardManager(this);
+    public scrollManager = new ScrollManager(this);
+    public dragDropManager = new DragDropManager(this);
+    public commands = new EditorCommands(this);
+    public blockHelper = new BlockHelper(this);
+    public bdCommands: Commands;
+    public ui_container?: HTMLDivElement;
+    public version = '0.0.1';
+    public copyright = '@Affine 2019-2022';
+    private plugin_manager: PluginManager;
+    private hooks: Hooks;
+    private views: Record<string, BaseView> = {};
+    workspace: string;
+    readonly = false;
+    private root_block_id: string;
+    private storage_manager?: StorageManager;
+    private clipboard?: BrowserClipboard;
+    private clipboard_populator?: ClipboardPopulator;
+    public reactRenderRoot: {
+        render: PatchNode;
+        has: (key: string) => boolean;
+    };
+    public isWhiteboard = false;
+    private _isDisposed = false;
+
+    constructor(props: EditorCtorProps) {
+        this.workspace = props.workspace;
+        this.views = props.views;
+        this.root_block_id = props.rootBlockId || '';
+        this.hooks = new Hooks();
+        this.plugin_manager = new PluginManager(this, this.hooks);
+        this.plugin_manager.registerAll(props.plugins);
+        if (props.isWhiteboard) {
+            this.isWhiteboard = true;
+        }
+        for (const [name, block] of Object.entries(props.views)) {
+            services.api.editorBlock.registerContentExporter(
+                this.workspace,
+                name,
+                { flavor: name as keyof BlockFlavors },
+                block.onExport.bind(block)
+            );
+            services.api.editorBlock.registerMetadataExporter(
+                this.workspace,
+                name,
+                { flavor: name as keyof BlockFlavors },
+                block.onMetadata.bind(block)
+            );
+            services.api.editorBlock.registerTagExporter(
+                this.workspace,
+                name,
+                { flavor: name as keyof BlockFlavors },
+                block.onTagging.bind(block)
+            );
+        }
+        this.bdCommands = new Commands(props.workspace);
+        services.api.editorBlock.onHistoryChange(
+            this.workspace,
+            'affine',
+            map => {
+                map.set('node', this.selectionManager.getActivatedNodeId());
+                map.set(
+                    'selection',
+                    this.selectionManager.getLastActiveSelectionSetting()
+                );
+            }
+        );
+        services.api.editorBlock.onHistoryRevoke(
+            this.workspace,
+            'affine',
+            async meta => {
+                const node = meta.get('node') as string;
+                const selection = meta.get('selection') as any;
+                await this.selectionManager.activeNodeByNodeId(node);
+                await this.selectionManager.setNodeActiveSelection(
+                    node,
+                    selection
+                );
+            }
+        );
+    }
+
+    public set container(v: HTMLDivElement) {
+        this.ui_container = v;
+        this.init_clipboard();
+    }
+
+    public get container() {
+        return this.ui_container;
+    }
+    // preference to use withSuspend
+    public suspend(flag: boolean) {
+        services.api.editorBlock.suspend(this.workspace, flag);
+    }
+
+    public async withSuspend<T extends (...args: any[]) => any>(
+        fn: T
+    ): Promise<Awaited<ReturnType<T>>> {
+        services.api.editorBlock.suspend(this.workspace, true);
+        const result = await fn();
+        services.api.editorBlock.suspend(this.workspace, false);
+        return result;
+    }
+
+    public setReactRenderRoot(props: {
+        patch: PatchNode;
+        has: (key: string) => boolean;
+    }) {
+        this.reactRenderRoot = {
+            render: props.patch,
+            has: props.has,
+        };
+    }
+
+    private _disposeClipboard() {
+        this.clipboard?.dispose();
+        this.clipboard_populator?.disposeInternal();
+    }
+
+    private init_clipboard() {
+        this._disposeClipboard();
+        if (this.ui_container && !this._isDisposed) {
+            this.clipboard = new BrowserClipboard(
+                this.ui_container,
+                this.hooks,
+                this
+            );
+            this.clipboard_populator = new ClipboardPopulator(
+                this,
+                this.hooks,
+                this.selectionManager,
+                this.clipboard
+            );
+        }
+    }
+
+    /** Root Block Id */
+    getRootBlockId() {
+        return this.root_block_id;
+    }
+
+    setRootBlockId(rootBlockId: string) {
+        this.root_block_id = rootBlockId;
+    }
+
+    setHotKeysScope(scope?: string) {
+        HotKeys.setScope(scope || 'all');
+    }
+
+    /** Block CRUD */
+
+    options = {
+        load: ({ workspace, id }: WorkspaceAndBlockId) =>
+            this.getBlock({ workspace, id }),
+        update: async (patches: UpdateEditorBlock) => {
+            return await services.api.editorBlock.update(patches);
+        },
+        remove: async ({ workspace, id }: WorkspaceAndBlockId) => {
+            return await services.api.editorBlock.delete({ workspace, id });
+        },
+        observe: async (
+            { workspace, id }: WorkspaceAndBlockId,
+            callback: (blockData: ReturnEditorBlock) => void
+        ) => {
+            return await services.api.editorBlock.observe(
+                { workspace, id },
+                callback
+            );
+        },
+    };
+
+    getView(type: string) {
+        return this.views[type];
+    }
+
+    private async _initBlock(
+        blockData: ReturnEditorBlock
+    ): Promise<AsyncBlock | null> {
+        if (!blockData) {
+            return null;
+        }
+        const block = new AsyncBlock({
+            initData: blockData,
+            viewClass: this.getView(blockData.type),
+            services: {
+                load: (...args) => this.getBlock(...args),
+                update: (...args) => this.options.update(...args),
+                remove: (...args) => this.options.remove(...args),
+                observe: (...args) => this.options.observe(...args),
+            },
+        });
+        await block.init();
+        const blockView = this.getView(block.type);
+        if (!blockView) {
+            return null;
+        }
+        block.setLifeCycle({
+            onUpdate: blockView.onUpdate,
+        });
+        block.registerProvider({
+            blockView: blockView,
+        });
+        return await blockView.onCreate(block);
+    }
+
+    private async getBlock({
+        workspace,
+        id,
+    }: WorkspaceAndBlockId): Promise<AsyncBlock | null> {
+        const block = this.cache_manager.get(id);
+        if (block) {
+            return block;
+        }
+        const block_promise = new Promise<AsyncBlock | null>(resolve => {
+            const create = async () => {
+                const blocksData = await services.api.editorBlock.get({
+                    workspace,
+                    ids: [id],
+                });
+                if (!blocksData.length) {
+                    console.warn('Failed to get blocks_data', id);
+                    resolve(null);
+                    return;
+                }
+                if (blocksData && blocksData[0]) {
+                    const asyncBlock = await this._initBlock(blocksData[0]);
+                    if (!asyncBlock) {
+                        // console.warn('Failed to initBlock', id, blocksData);
+                        resolve(null);
+                        return;
+                    }
+                    resolve(asyncBlock);
+                }
+            };
+            create();
+        });
+        this.cache_manager.set(id, block_promise);
+        return await block_promise;
+    }
+
+    async createBlock(type: keyof BlockFlavors, parentId?: string) {
+        assert(type, `The block type is missing.`);
+        const blockData = await services.api.editorBlock.create({
+            workspace: this.workspace,
+            type,
+            parentId,
+        });
+        const block = await this._initBlock(blockData);
+        if (block) {
+            this.cache_manager.set(block.id, Promise.resolve(block));
+        }
+        return block;
+    }
+
+    async getBlockById(blockId: string): Promise<AsyncBlock | null> {
+        return await this.getBlock({ workspace: this.workspace, id: blockId });
+    }
+
+    /**
+     * TODO: to be optimized
+     * get block`s dom by block`s id
+     * @param {string} blockId
+     * @param {number} [times=1]
+     * @return {*}  {(Promise<HTMLElement | null>)}
+     * @memberof Editor
+     */
+    async getBlockDomById(
+        blockId: string,
+        times = 1
+    ): Promise<HTMLElement | null> {
+        const block = await this.getBlockById(blockId);
+        if (times === 10) {
+            console.warn('render');
+            return null;
+        }
+        if (block) {
+            if (block.dom) {
+                return block.dom;
+            }
+            await sleep(16);
+            return this.getBlockDomById(blockId, times + 1);
+        }
+        return null;
+    }
+
+    async getBlockList() {
+        const rootBlockId = this.getRootBlockId();
+        const rootBlock = await this.getBlockById(rootBlockId);
+        const blockList: Array<AsyncBlock> = rootBlock ? [rootBlock] : [];
+        const children = (await rootBlock?.children()) || [];
+        for (const block of children) {
+            if (!block) {
+                continue;
+            }
+            const blockChildren = await block.children();
+            blockList.push(block);
+            if (blockChildren) {
+                children.push(...blockChildren);
+            }
+        }
+        return blockList;
+    }
+
+    async getRootLastChildrenBlock(rootBlockId = this.getRootBlockId()) {
+        const rootBlock = await this.getBlockById(rootBlockId);
+        if (!rootBlock) {
+            throw new Error('root block is not found');
+        }
+        const lastChildren = await rootBlock.lastChild();
+        return lastChildren ?? rootBlock;
+    }
+
+    async getLastBlock(rootBlockId = this.getRootBlockId()) {
+        const rootBlock = await this.getBlockById(rootBlockId);
+        if (!rootBlock) {
+            throw new Error('root block is not found');
+        }
+        let lastBlock = rootBlock;
+        let children = await rootBlock.children();
+        while (children.length) {
+            // Safe type assert because the length of children has been checked
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            lastBlock = last(children)!;
+            children = (await lastBlock?.children()) || [];
+        }
+        return lastBlock;
+    }
+
+    async getBlockByPoint(point: Point) {
+        const blockList = await this.getBlockList();
+
+        return blockList.reverse().find(block => {
+            return (
+                Boolean(block.dom) && domToRect(block.dom).isContainPoint(point)
+            );
+        });
+    }
+
+    async undo() {
+        await services.api.editorBlock.undo(this.workspace);
+    }
+
+    async redo() {
+        await services.api.editorBlock.redo(this.workspace);
+    }
+
+    async search(query: Parameters<typeof services.api.editorBlock.search>[1]) {
+        return services.api.editorBlock.search(this.workspace, query);
+    }
+
+    async queryBlock(query: any) {
+        return await services.api.editorBlock.query(this.workspace, query);
+    }
+
+    /** Hooks */
+
+    public getHooks(): HooksRunner & PluginHooks {
+        return this.hooks;
+    }
+
+    public get storageManager(): StorageManager | undefined {
+        return this.storage_manager;
+    }
+
+    public get selection(): VirgoSelection {
+        return this.selectionManager;
+    }
+
+    public get plugins(): PluginManagerInterface {
+        return this.plugin_manager;
+    }
+
+    public async page2html(): Promise<string> {
+        const parse = this.clipboard?.getClipboardParse();
+        if (!parse) {
+            return '';
+        }
+        const html_str = await parse.page2html();
+        return html_str;
+    }
+
+    dispose() {
+        this._isDisposed = true;
+        Object.keys(this.views).map(name =>
+            services.api.editorBlock.unregisterContentExporter(
+                this.workspace,
+                name
+            )
+        );
+        this.keyboardManager.dispose();
+        this.hooks.dispose();
+        this.plugin_manager.dispose();
+        this.selectionManager.dispose();
+        this._disposeClipboard();
+    }
+}
diff --git a/libs/components/editor-core/src/editor/index.ts b/libs/components/editor-core/src/editor/index.ts
new file mode 100644
index 000000000..4b12aa5b7
--- /dev/null
+++ b/libs/components/editor-core/src/editor/index.ts
@@ -0,0 +1,18 @@
+import ClipboardParseInner from './clipboard/clipboard-parse';
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const ClipboardParse = ClipboardParseInner;
+
+export { AsyncBlock } from './block';
+export * from './commands/types';
+export { Editor as BlockEditor } from './editor';
+export * from './selection';
+export { BlockDropPlacement, HookType, GroupDirection } from './types';
+export type {
+    BlockDomInfo,
+    Plugin,
+    PluginCreator,
+    PluginHooks,
+    Virgo,
+} from './types';
+export { BaseView, getTextHtml, getTextProperties } from './views/base-view';
+export type { ChildrenView, CreateView } from './views/base-view';
diff --git a/libs/components/editor-core/src/editor/keyboard/hotkey-map.ts b/libs/components/editor-core/src/editor/keyboard/hotkey-map.ts
new file mode 100644
index 000000000..4d5b80e4a
--- /dev/null
+++ b/libs/components/editor-core/src/editor/keyboard/hotkey-map.ts
@@ -0,0 +1,69 @@
+export type HotKeyTypes =
+    | 'selectAll'
+    | 'newPage'
+    | 'undo'
+    | 'redo'
+    | 'remove'
+    | 'checkUncheck'
+    | 'preExpendSelect'
+    | 'nextExpendSelect'
+    | 'up'
+    | 'down'
+    | 'left'
+    | 'right'
+    | 'enter'
+    | 'mergeGroup'
+    | 'mergeGroupUp'
+    | 'mergeGroupDown';
+export type HotkeyMap = Record<HotKeyTypes, string>;
+
+/** hot key maps for mac */
+export const MacHotkeyMap: HotkeyMap = {
+    selectAll: 'command+a',
+    newPage: 'command+n',
+    undo: 'command+z',
+    redo: 'command+shift+z',
+    remove: 'backspace',
+    checkUncheck: 'esc',
+    preExpendSelect: 'shift+up',
+    nextExpendSelect: 'shift+down',
+    up: 'up',
+    down: 'down',
+    left: 'left',
+    right: 'right',
+    enter: 'enter',
+    mergeGroupUp: 'command+up',
+    mergeGroupDown: 'command+down',
+    mergeGroup: 'command+m',
+};
+
+/** hot key maps for windows */
+export const WinHotkeyMap: HotkeyMap = {
+    selectAll: 'ctrl+a',
+    newPage: 'ctrl+n',
+    undo: 'ctrl+z',
+    redo: 'ctrl+shift+z',
+    remove: 'backspace',
+    checkUncheck: 'esc',
+    preExpendSelect: 'shift+up',
+    nextExpendSelect: 'shift+down',
+    mergeGroupUp: 'command+up',
+    mergeGroupDown: 'command+down',
+    mergeGroup: 'command+m',
+    up: 'up',
+    down: 'down',
+    left: 'left',
+    right: 'right',
+    enter: 'enter',
+};
+
+type GlobalHotKeyTypes = 'search';
+export type GlobalHotkeyMap = Record<GlobalHotKeyTypes, string>;
+
+export const GlobalMacHotkeyMap: GlobalHotkeyMap = {
+    search: 'alt+space',
+};
+
+export const GlobalWinHotkeyMap: GlobalHotkeyMap = {
+    search: 'ctrl+space',
+};
diff --git a/libs/components/editor-core/src/editor/keyboard/index.ts b/libs/components/editor-core/src/editor/keyboard/index.ts
new file mode 100644
index 000000000..dee3410df
--- /dev/null
+++ b/libs/components/editor-core/src/editor/keyboard/index.ts
@@ -0,0 +1 @@
+export { KeyboardManager } from './keyboard';
diff --git a/libs/components/editor-core/src/editor/keyboard/keyboard.ts b/libs/components/editor-core/src/editor/keyboard/keyboard.ts
new file mode 100644
index 000000000..751e88858
--- /dev/null
+++ b/libs/components/editor-core/src/editor/keyboard/keyboard.ts
@@ -0,0 +1,297 @@
+import HotKeys from 'hotkeys-js';
+
+import { uaHelper } from '@toeverything/utils';
+
+import { AsyncBlock, BlockEditor } from '../..';
+import { SelectionManager } from '../selection';
+import {
+    HotKeyTypes,
+    HotkeyMap,
+    MacHotkeyMap,
+    WinHotkeyMap,
+    GlobalHotkeyMap,
+    GlobalMacHotkeyMap,
+    GlobalWinHotkeyMap,
+} from './hotkey-map';
+import { supportChildren } from '../../utils';
+import { Protocol } from '@toeverything/datasource/db-service';
+type KeyboardEventHandler = (event: KeyboardEvent) => void;
+export class KeyboardManager {
+    private _editor: BlockEditor;
+    private selection_manager: SelectionManager;
+    private hotkeys: HotkeyMap;
+    private global_hotkeys: GlobalHotkeyMap;
+    private handler_map: { [k: string]: Array<KeyboardEventHandler> };
+
+    constructor(editor: BlockEditor) {
+        this._editor = editor;
+        this.selection_manager = this._editor.selectionManager;
+        if (uaHelper.isMacOs) {
+            this.hotkeys = MacHotkeyMap;
+            this.global_hotkeys = GlobalMacHotkeyMap;
+        } else {
+            this.hotkeys = WinHotkeyMap;
+            this.global_hotkeys = GlobalWinHotkeyMap;
+        }
+        this.handler_map = {};
+
+        // WARNING: Remove the filter of hotkeys, the input event of input/select/textarea will be filtered out by default
+        // When there is a problem with the input of the text component, you need to pay attention to this
+        const old_filter = HotKeys.filter;
+        HotKeys.filter = event => {
+            let parent = (event.target as Element).parentElement;
+            while (parent) {
+                if (parent === editor.container) {
+                    return old_filter(event);
+                }
+                parent = parent.parentElement;
+            }
+
+            return true;
+        };
+        HotKeys.setScope('editor');
+
+        // this.init_common_shortcut_cb();
+        this.bind_hot_key_handlers();
+    }
+
+    private bind_hot_key_handlers() {
+        this.bind_hotkey(
+            this.hotkeys.selectAll,
+            'editor',
+            this.handle_select_all
+        );
+
+        this.bind_hotkey(this.hotkeys.undo, 'editor', this.handle_undo);
+        this.bind_hotkey(this.hotkeys.redo, 'editor', this.handle_redo);
+        this.bind_hotkey(this.hotkeys.remove, 'editor', this.handle_remove);
+        this.bind_hotkey(
+            this.hotkeys.checkUncheck,
+            'editor',
+            this.handle_check_uncheck
+        );
+        this.bind_hotkey(
+            this.hotkeys.preExpendSelect,
+            'editor',
+            this.handle_pre_expend_select
+        );
+        this.bind_hotkey(
+            this.hotkeys.nextExpendSelect,
+            'editor',
+            this.handle_next_expend_select
+        );
+        this.bind_hotkey(this.hotkeys.up, 'editor', this.handle_click_up);
+        this.bind_hotkey(this.hotkeys.down, 'editor', this.handleClickDown);
+        this.bind_hotkey(this.hotkeys.left, 'editor', this.handle_click_up);
+        this.bind_hotkey(this.hotkeys.right, 'editor', this.handleClickDown);
+        this.bind_hotkey(this.hotkeys.mergeGroup, 'editor', this.mergeGroup);
+        this.bind_hotkey(this.hotkeys.enter, 'all', this.handleEnter);
+        this.bind_hotkey(this.global_hotkeys.search, 'all', this.handle_search);
+        this.bind_hotkey(
+            this.hotkeys.mergeGroupDown,
+            'editor',
+            this.mergeGroupDown
+        );
+        this.bind_hotkey(
+            this.hotkeys.mergeGroupUp,
+            'editor',
+            this.mergeGroupUp
+        );
+    }
+
+    private bind_hotkey(
+        key: string,
+        scope: string,
+        ...handler: Array<KeyboardEventHandler>
+    ) {
+        handler.forEach(h => {
+            HotKeys(key, scope, h);
+            if (!this.handler_map[key]) {
+                this.handler_map[key] = [h];
+            } else {
+                this.handler_map[key].push(h);
+            }
+        });
+    }
+
+    /**
+     *
+     * bind global shortcut event
+     * @param {HotkeyMapKeys} type
+     * @param {KeyboardEventHandler} handler
+     * @memberof KeyboardManager
+     */
+    public bind(type: HotKeyTypes, handler: KeyboardEventHandler) {
+        this.bind_hotkey(this.hotkeys[type], 'editor', handler);
+    }
+
+    /**
+     *
+     * emit a shortcut event，
+     * need pass a new keyboard event
+     * @param {HotkeyMapKeys} type
+     * @param {KeyboardEventHandler} handler
+     * @memberof KeyboardManager
+     */
+    public emit(type: HotKeyTypes, event: KeyboardEvent) {
+        // this.common_handler(type, event);
+        const handlers = this.handler_map[this.hotkeys[type]];
+        if (handlers) {
+            handlers.forEach(h => h(event));
+        }
+    }
+
+    /**
+     *
+     * unbind keyboard event
+     * @param {HotKeyTypes} key
+     * @param {KeyboardEventHandler} cb
+     * @memberof KeyboardManager
+     */
+    public unbind(key: HotKeyTypes, cb: KeyboardEventHandler) {
+        HotKeys.unbind(key, 'editor', cb);
+    }
+
+    public dispose() {
+        Object.keys(this.handler_map).map(key => HotKeys.unbind(key, 'editor'));
+
+        this.handler_map = {};
+    }
+
+    private handle_select_all = (event: KeyboardEvent) => {
+        event.preventDefault();
+        this.selection_manager.selectAllBlocks();
+    };
+
+    private handle_undo = (event: KeyboardEvent) => {
+        event.preventDefault();
+        this._editor.undo();
+    };
+
+    private handle_redo = (event: KeyboardEvent) => {
+        event.preventDefault();
+        this._editor.redo();
+    };
+
+    private handle_search = (event: KeyboardEvent) => {
+        event.preventDefault();
+        this._editor.getHooks().onSearch();
+    };
+
+    private handle_remove = (event: KeyboardEvent) => {
+        const selectNode =
+            this._editor.selectionManager.selectedNodesList || [];
+        selectNode.forEach(node => node.remove());
+    };
+
+    private handle_check_uncheck = (event: KeyboardEvent) => {
+        if (this._editor.selectionManager.getSelectedNodesIds().length !== 0) {
+            this._editor.selectionManager.setSelectedNodesIds([]);
+        }
+    };
+
+    private handle_pre_expend_select = (event: KeyboardEvent) => {
+        this.handle_expend_select(event, true);
+    };
+
+    private handle_next_expend_select = (event: KeyboardEvent) => {
+        this.handle_expend_select(event, false);
+    };
+
+    private handle_expend_select = async (
+        event: KeyboardEvent,
+        is_previous: boolean
+    ) => {
+        this._editor.selectionManager.expandBlockSelect(is_previous);
+    };
+
+    private handle_click_up = (event: Event) => {
+        const selectedIds = this._editor.selectionManager.getSelectedNodesIds();
+        if (selectedIds.length) {
+            event.preventDefault();
+            this._editor.selectionManager.activePreviousNode(
+                selectedIds[0],
+                'end'
+            );
+        }
+    };
+    private handleClickDown = async (event: Event) => {
+        const selectedIds = this._editor.selectionManager.getSelectedNodesIds();
+        if (selectedIds.length) {
+            event.preventDefault();
+            this._editor.selectionManager.activeNextNode(selectedIds[0], 'end');
+        }
+    };
+    private handleEnter = async (event: Event) => {
+        const selectedIds = this._editor.selectionManager.getSelectedNodesIds();
+        if (selectedIds.length) {
+            event.preventDefault();
+            const selectedNode = await this._editor.getBlockById(
+                selectedIds[0]
+            );
+            if (selectedNode.type === Protocol.Block.Type.group) {
+                const children = await selectedNode.children();
+                if (!supportChildren(children[0])) {
+                    await this._editor.selectionManager.setSelectedNodesIds([
+                        children[0].id,
+                    ]);
+                    return;
+                }
+                await this._editor.selectionManager.activeNodeByNodeId(
+                    children[0].id
+                );
+            } else {
+                // suspend(true)
+                let textBlock = await this._editor.createBlock('text');
+                await selectedNode.after(textBlock);
+                this._editor.selectionManager.setActivatedNodeId(textBlock.id);
+            }
+        }
+    };
+    private mergeGroup = async (event: Event) => {
+        let selectedGroup = await this.getSelectedGroups();
+        this._editor.commands.blockCommands.mergeGroup(...selectedGroup);
+    };
+    private mergeGroupDown = async (event: Event) => {
+        let selectedGroup = await this.getSelectedGroups();
+        if (selectedGroup.length) {
+            let nextGroup = await selectedGroup[
+                selectedGroup.length - 1
+            ].nextSibling();
+            if (nextGroup?.type === Protocol.Block.Type.group) {
+                this._editor.commands.blockCommands.mergeGroup(
+                    ...selectedGroup,
+                    nextGroup
+                );
+            }
+        }
+    };
+    private mergeGroupUp = async (event: Event) => {
+        let selectedGroup = await this.getSelectedGroups();
+        if (selectedGroup.length) {
+            let preGroup = await selectedGroup[0].previousSibling();
+            if (preGroup?.type === Protocol.Block.Type.group) {
+                this._editor.commands.blockCommands.mergeGroup(
+                    preGroup,
+                    ...selectedGroup
+                );
+            }
+        }
+    };
+    private getSelectedGroups = async () => {
+        const selectedIds = this._editor.selectionManager.getSelectedNodesIds();
+        const selectedNodes = (
+            await Promise.all(
+                selectedIds.map(id => this._editor.getBlockById(id))
+            )
+        ).filter(Boolean) as AsyncBlock[];
+        if (
+            !selectedNodes.every(
+                node => node.type === Protocol.Block.Type.group
+            )
+        ) {
+            return [];
+        }
+        return selectedNodes;
+    };
+}
diff --git a/libs/components/editor-core/src/editor/mouse/index.ts b/libs/components/editor-core/src/editor/mouse/index.ts
new file mode 100644
index 000000000..a74d6323e
--- /dev/null
+++ b/libs/components/editor-core/src/editor/mouse/index.ts
@@ -0,0 +1 @@
+export * from './mouse';
diff --git a/libs/components/editor-core/src/editor/mouse/mouse.ts b/libs/components/editor-core/src/editor/mouse/mouse.ts
new file mode 100644
index 000000000..e63bbec99
--- /dev/null
+++ b/libs/components/editor-core/src/editor/mouse/mouse.ts
@@ -0,0 +1,146 @@
+import { debounce } from '@toeverything/utils';
+import EventEmitter from 'eventemitter3';
+
+import { BlockEditor } from '../..';
+
+const mouseupEventName = 'mouseup';
+const mousemoveEventName = 'mousemove';
+
+export class MouseManager {
+    private _editor: BlockEditor;
+    private is_mouse_down: boolean;
+    private mousedown_timer: number;
+    private is_dragging: boolean;
+    private _events = new EventEmitter();
+
+    constructor(editor: BlockEditor) {
+        this._editor = editor;
+        this.is_mouse_down = false;
+        this.is_dragging = false;
+        this.init_editor_mouse_event_handler();
+    }
+
+    get isMouseDown() {
+        return this.is_mouse_down;
+    }
+
+    get isDragging() {
+        return this.is_dragging;
+    }
+
+    private init_editor_mouse_event_handler() {
+        this.handle_mouse_down = this.handle_mouse_down.bind(this);
+        this.handle_mouse_up = this.handle_mouse_up.bind(this);
+        this.handle_mouse_down_capture =
+            this.handle_mouse_down_capture.bind(this);
+        // TODO: IMP: Check later to see if there is any need to add drag
+        this.handle_mouse_drag = debounce(
+            this.handle_mouse_drag.bind(this),
+            15
+        );
+        this.handle_mouse_move = this.handle_mouse_move.bind(this);
+        window.addEventListener('mousedown', this.handle_mouse_down_capture, {
+            capture: true,
+        });
+        window.addEventListener('mousedown', this.handle_mouse_down);
+        window.addEventListener('mouseup', this.handle_mouse_up);
+        window.addEventListener('mousemove', this.handle_mouse_move);
+    }
+
+    private handle_mouse_down_capture(e: MouseEvent) {
+        this.is_mouse_down = true;
+    }
+
+    private handle_mouse_down(e: MouseEvent) {
+        this.mousedown_timer = window.setTimeout(() => {
+            window.addEventListener('mousemove', this.handle_mouse_drag);
+            this.mousedown_timer = undefined;
+        }, 30);
+    }
+
+    private handle_mouse_up(e: MouseEvent) {
+        this.is_mouse_down = false;
+        this.is_dragging = false;
+        if (this.mousedown_timer) {
+            window.clearTimeout(this.mousedown_timer);
+        }
+        this._events.emit(mouseupEventName, e);
+        window.removeEventListener('mousemove', this.handle_mouse_drag);
+    }
+
+    private get_select_start_event_name(blockId: string) {
+        return `${blockId}-select_start`;
+    }
+
+    private handle_mouse_drag(e: MouseEvent) {
+        const selectionInfo = this._editor.selectionManager.currentSelectInfo;
+        if (selectionInfo.type === 'Range') {
+            if (selectionInfo.anchorNode) {
+                this.emit_select_start_with(selectionInfo.anchorNode.id, e);
+            }
+        }
+    }
+
+    private handle_mouse_move(e: MouseEvent) {
+        this._events.emit(mousemoveEventName, e);
+    }
+
+    public onSelectStartWith = (
+        blockId: string,
+        cb: (e: MouseEvent) => void
+    ) => {
+        this._events.on(this.get_select_start_event_name(blockId), cb);
+    };
+
+    public offSelectStartWith = (
+        blockId: string,
+        cb: (e: MouseEvent) => void
+    ) => {
+        this._events.off(this.get_select_start_event_name(blockId), cb);
+    };
+
+    public onMouseupEventOnce(cb: (e: MouseEvent) => void) {
+        this._events.once(mouseupEventName, cb);
+    }
+
+    public onMouseUp(cb: (e: MouseEvent) => void) {
+        this._events.on(mouseupEventName, cb);
+    }
+
+    public offMouseUp(cb: (e: MouseEvent) => void) {
+        this._events.on(mouseupEventName, cb);
+    }
+
+    public onMouseMove(cb: (e: MouseEvent) => void) {
+        this._events.on(mousemoveEventName, cb);
+    }
+
+    public offMouseMove(cb: (e: MouseEvent) => void) {
+        this._events.off(mousemoveEventName, cb);
+    }
+
+    public dispose() {
+        this._events.removeAllListeners();
+        window.removeEventListener(
+            'mousedown',
+            this.handle_mouse_down_capture,
+            {
+                capture: true,
+            }
+        );
+        window.removeEventListener('mousedown', this.handle_mouse_down);
+        window.removeEventListener('mouseup', this.handle_mouse_up);
+        window.removeEventListener('mousemove', this.handle_mouse_drag);
+        window.removeEventListener('mousemove', this.handle_mouse_move);
+    }
+
+    /**
+     *
+     * emit browser select start event to the start block by start id
+     * @private
+     * @memberof MouseManager
+     */
+    private emit_select_start_with(id: string, e: MouseEvent) {
+        this._events.emit(this.get_select_start_event_name(id), e);
+    }
+}
diff --git a/libs/components/editor-core/src/editor/plugin/hooks.ts b/libs/components/editor-core/src/editor/plugin/hooks.ts
new file mode 100644
index 000000000..f03769168
--- /dev/null
+++ b/libs/components/editor-core/src/editor/plugin/hooks.ts
@@ -0,0 +1,200 @@
+import {
+    HooksRunner,
+    PluginHooks,
+    HookType,
+    HookBaseArgs,
+    BlockDomInfo,
+    AnyFunction,
+    AnyThisType,
+} from '../types';
+
+interface PluginHookInfo {
+    thisObj?: AnyThisType;
+    callback: AnyFunction;
+    once: boolean;
+}
+
+export class Hooks implements HooksRunner, PluginHooks {
+    private hooks_map: Map<string, PluginHookInfo[]> = new Map();
+
+    dispose() {
+        this.hooks_map.clear();
+    }
+
+    private run_hook(key: HookType, ...params: unknown[]): void {
+        const hook_infos: PluginHookInfo[] = this.hooks_map.get(key) || [];
+        hook_infos.forEach(hook_info => {
+            if (hook_info.once) {
+                this.removeHook(key, hook_info.callback);
+            }
+            let is_stopped_propagation = false;
+            const hookOption: HookBaseArgs = {
+                stopImmediatePropagation: () => {
+                    is_stopped_propagation = true;
+                },
+            };
+            hook_info.callback.call(
+                hook_info.thisObj || this,
+                ...params,
+                hookOption
+            );
+            return is_stopped_propagation;
+        });
+    }
+
+    private has_hook(key: HookType, callback: AnyFunction): boolean {
+        const hook_infos: PluginHookInfo[] = this.hooks_map.get(key) || [];
+        for (let i = hook_infos.length - 1; i >= 0; i--) {
+            if (hook_infos[i].callback === callback) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    // 执行多次
+    public addHook(
+        key: HookType,
+        callback: AnyFunction,
+        thisObj?: AnyThisType,
+        once?: boolean
+    ): void {
+        if (this.has_hook(key, callback)) {
+            throw new Error('Duplicate registration of the same class');
+        }
+        if (!this.hooks_map.has(key)) {
+            this.hooks_map.set(key, []);
+        }
+        const hook_infos: PluginHookInfo[] = this.hooks_map.get(key);
+        hook_infos.push({ callback, thisObj, once });
+    }
+
+    // 执行一次
+    public addOnceHook(
+        key: HookType,
+        callback: AnyFunction,
+        thisObj?: AnyThisType
+    ): void {
+        this.addHook(key, callback, thisObj, true);
+    }
+
+    // 移除
+    public removeHook(key: HookType, callback: AnyFunction): void {
+        const hook_infos: PluginHookInfo[] = this.hooks_map.get(key) || [];
+        for (let i = hook_infos.length - 1; i >= 0; i--) {
+            if (hook_infos[i].callback === callback) {
+                hook_infos.splice(i, 1);
+            }
+        }
+    }
+
+    public init(): void {
+        this.run_hook(HookType.INIT);
+    }
+
+    public render(): void {
+        this.run_hook(HookType.RENDER);
+    }
+
+    public onRootNodeKeyDown(e: React.KeyboardEvent<HTMLDivElement>): void {
+        this.run_hook(HookType.ON_ROOT_NODE_KEYDOWN, e);
+    }
+
+    public onRootNodeKeyDownCapture(
+        e: React.KeyboardEvent<HTMLDivElement>
+    ): void {
+        this.run_hook(HookType.ON_ROOT_NODE_KEYDOWN_CAPTURE, e);
+    }
+
+    public onRootNodeKeyUp(e: React.KeyboardEvent<HTMLDivElement>): void {
+        this.run_hook(HookType.ON_ROOT_NODE_KEYUP, e);
+    }
+
+    public onRootNodeMouseDown(
+        e: React.MouseEvent<HTMLDivElement, MouseEvent>
+    ): void {
+        this.run_hook(HookType.ON_ROOTNODE_MOUSE_DOWN, e);
+    }
+
+    public onRootNodeMouseMove(
+        e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+        root_rect: DOMRect
+    ): void {
+        this.run_hook(HookType.ON_ROOTNODE_MOUSE_MOVE, e, root_rect);
+    }
+
+    public onRootNodeMouseUp(
+        e: React.MouseEvent<HTMLDivElement, MouseEvent>
+    ): void {
+        this.run_hook(HookType.ON_ROOTNODE_MOUSE_UP, e);
+    }
+
+    public onRootNodeMouseOut(
+        e: React.MouseEvent<HTMLDivElement, MouseEvent>
+    ): void {
+        this.run_hook(HookType.ON_ROOTNODE_MOUSE_OUT, e);
+    }
+
+    public onRootNodeMouseLeave(
+        e: React.MouseEvent<HTMLDivElement, MouseEvent>
+    ): void {
+        this.run_hook(HookType.ON_ROOTNODE_MOUSE_LEAVE, e);
+    }
+
+    public afterOnNodeMouseMove(
+        e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+        node: BlockDomInfo
+    ): void {
+        this.run_hook(HookType.AFTER_ON_NODE_MOUSE_MOVE, e, node);
+    }
+
+    public afterOnResize(
+        e: React.MouseEvent<HTMLDivElement, MouseEvent>
+    ): void {
+        this.run_hook(HookType.AFTER_ON_RESIZE, e);
+    }
+
+    public onRootNodeDragOver(
+        e: React.DragEvent<Element>,
+        root_rect: DOMRect
+    ): void {
+        this.run_hook(HookType.ON_ROOTNODE_DRAG_OVER, e, root_rect);
+    }
+
+    public onRootNodeDragEnd(
+        e: React.DragEvent<Element>,
+        root_rect: DOMRect
+    ): void {
+        this.run_hook(HookType.ON_ROOTNODE_DRAG_END, e, root_rect);
+    }
+
+    public onRootNodeDrop(e: React.DragEvent<Element>): void {
+        this.run_hook(HookType.ON_ROOTNODE_DROP, e);
+    }
+
+    public onRootNodeDragOverCapture(
+        e: React.DragEvent<Element>,
+        root_rect: DOMRect
+    ): void {
+        this.run_hook(HookType.ON_ROOTNODE_DRAG_OVER_CAPTURE, e, root_rect);
+    }
+
+    public afterOnNodeDragOver(
+        e: React.DragEvent<Element>,
+        node: BlockDomInfo
+    ): void {
+        this.run_hook(HookType.AFTER_ON_NODE_DRAG_OVER, e, node);
+    }
+
+    public onSearch(): void {
+        this.run_hook(HookType.ON_SEARCH);
+    }
+
+    public beforeCopy(e: ClipboardEvent): void {
+        this.run_hook(HookType.BEFORE_COPY, e);
+    }
+
+    public beforeCut(e: ClipboardEvent): void {
+        this.run_hook(HookType.BEFORE_CUT, e);
+    }
+}
diff --git a/libs/components/editor-core/src/editor/plugin/index.ts b/libs/components/editor-core/src/editor/plugin/index.ts
new file mode 100644
index 000000000..e955f5703
--- /dev/null
+++ b/libs/components/editor-core/src/editor/plugin/index.ts
@@ -0,0 +1,2 @@
+export { PluginManager } from './manager';
+export { Hooks } from './hooks';
diff --git a/libs/components/editor-core/src/editor/plugin/manager.ts b/libs/components/editor-core/src/editor/plugin/manager.ts
new file mode 100644
index 000000000..193bc83a9
--- /dev/null
+++ b/libs/components/editor-core/src/editor/plugin/manager.ts
@@ -0,0 +1,88 @@
+import EventEmitter from 'eventemitter3';
+import { createNoopWithMessage } from '@toeverything/utils';
+import type {
+    Virgo,
+    Plugin,
+    PluginCreator,
+    PluginHooks,
+    PluginManagerInterface,
+} from '../types';
+
+export class PluginManager implements PluginManagerInterface {
+    private editor: Virgo;
+    private hooks: PluginHooks;
+    private plugins: Record<string, Plugin> = {};
+    private emitter = new EventEmitter();
+
+    constructor(editor: Virgo, hooks: PluginHooks) {
+        this.editor = editor;
+        this.hooks = hooks;
+    }
+
+    register(createPlugin: PluginCreator): void {
+        const plugin: Plugin = new createPlugin(this.editor, this.hooks);
+        createNoopWithMessage({
+            module: 'plugin/manager',
+            message: 'Plugin registered: ' + createPlugin.pluginName,
+        })();
+        plugin.init();
+        this.plugins[createPlugin.pluginName] = plugin;
+    }
+
+    registerAll(createPlugins: PluginCreator[]): void {
+        createPlugins.sort((a: PluginCreator, b: PluginCreator): number => {
+            return a.priority - b.priority;
+        });
+        createPlugins.forEach((pluginCreator: PluginCreator): void => {
+            this.register(pluginCreator);
+        });
+    }
+
+    deregister(pluginName: string): void {
+        const plugin: Plugin | undefined = this.plugins[pluginName];
+        try {
+            plugin?.dispose();
+        } catch (error) {
+            console.error(error);
+        }
+        delete this.plugins[pluginName];
+    }
+
+    dispose() {
+        Object.entries(this.plugins).forEach(([pluginName, plugin]) => {
+            try {
+                plugin.dispose();
+            } catch (error) {
+                console.error(error);
+            }
+            delete this.plugins[pluginName];
+        });
+    }
+
+    observe(
+        name: string,
+        callback: (
+            ...args: Array<unknown>
+        ) => Promise<Record<string, unknown>> | void
+    ): void {
+        this.emitter.on(name, callback);
+    }
+    unobserve(
+        name: string,
+        callback: (
+            ...args: Array<unknown>
+        ) => Promise<Record<string, unknown>> | void
+    ): void {
+        this.emitter.off(name, callback);
+    }
+    emitAsync(name: string, ...params: Array<unknown>): Promise<any[]> {
+        // return this.emitter.emitAsync(name, params);
+        return {} as any;
+    }
+    emit(name: string, ...params: Array<unknown>): void {
+        this.emitter.emit(name, params);
+    }
+    public getPlugin(pluginName: string): Plugin {
+        return this.plugins[pluginName];
+    }
+}
diff --git a/libs/components/editor-core/src/editor/plugin/utils.ts b/libs/components/editor-core/src/editor/plugin/utils.ts
new file mode 100644
index 000000000..618417905
--- /dev/null
+++ b/libs/components/editor-core/src/editor/plugin/utils.ts
@@ -0,0 +1,6 @@
+export enum PluginsEventTypes {
+    toggleTextBold = 'TOGGLE_TEXT_BOLD',
+    toggleTextItalic = 'TOGGLE_TEXT_ITALIC',
+    toggleTextStrikethrough = 'TOGGLE_TEXT_STRIKETHROUGH',
+    checkTextBold = 'CHECK_TEXT_BOLD',
+}
diff --git a/libs/components/editor-core/src/editor/scroll/index.ts b/libs/components/editor-core/src/editor/scroll/index.ts
new file mode 100644
index 000000000..56057e07c
--- /dev/null
+++ b/libs/components/editor-core/src/editor/scroll/index.ts
@@ -0,0 +1 @@
+export * from './scroll';
diff --git a/libs/components/editor-core/src/editor/scroll/scroll.ts b/libs/components/editor-core/src/editor/scroll/scroll.ts
new file mode 100644
index 000000000..94bbbca82
--- /dev/null
+++ b/libs/components/editor-core/src/editor/scroll/scroll.ts
@@ -0,0 +1,245 @@
+import EventEmitter from 'eventemitter3';
+
+import { domToRect, Rect } from '@toeverything/utils';
+import type { Editor as BlockEditor } from '../editor';
+
+import { AsyncBlock } from '../block';
+
+type VerticalTypes = 'up' | 'down' | null;
+type HorizontalTypes = 'left' | 'right' | null;
+
+export class ScrollManager {
+    private _editor: BlockEditor;
+    private _animation_frame: null | number = null;
+    private _event_name = 'scrolling';
+    private _current_move_direction: [HorizontalTypes, VerticalTypes] = [
+        null,
+        null,
+    ];
+
+    public scrollMoveOffset = 8;
+    public scrollingEvent = new EventEmitter();
+
+    constructor(editor: BlockEditor) {
+        this._editor = editor;
+    }
+
+    private update_scroll_info(left: number, top: number) {
+        this.scrollTop = top;
+        this.scrollLeft = left;
+    }
+
+    public onScrolling(
+        cb: (args: { direction: [HorizontalTypes, VerticalTypes] }) => void
+    ) {
+        this.scrollingEvent.on(this._event_name, cb);
+    }
+    public removeScrolling(
+        cb: (args: { direction: [HorizontalTypes, VerticalTypes] }) => void
+    ) {
+        this.scrollingEvent.removeListener(this._event_name, cb);
+    }
+
+    public get scrollContainer() {
+        return this._editor.ui_container;
+    }
+
+    public get verticalScrollTriggerDistance() {
+        return 15;
+    }
+    public get horizontalScrollTriggerDistance() {
+        // Set horizon distance when support horizontal scroll
+        return -1;
+    }
+
+    public get scrollTop() {
+        return this._editor.ui_container.scrollTop;
+    }
+    public set scrollTop(top: number) {
+        this._editor.ui_container.scrollTop = top;
+    }
+    public get scrollLeft() {
+        return this._editor.ui_container.scrollLeft;
+    }
+    public set scrollLeft(left: number) {
+        this._editor.ui_container.scrollLeft = left;
+    }
+
+    public scrollTo({
+        top,
+        left,
+        behavior = 'smooth',
+    }: {
+        top?: number;
+        left?: number;
+        behavior?: ScrollBehavior; // "auto" | "smooth";
+    }) {
+        top = top !== undefined ? top : this.scrollContainer.scrollTop;
+        left = left !== undefined ? left : this.scrollContainer.scrollLeft;
+
+        if (behavior === 'smooth') {
+            this._editor.ui_container.scrollBy({
+                top,
+                left,
+                behavior,
+            });
+        } else {
+            this._editor.ui_container.scrollTo(left, top);
+        }
+    }
+
+    public async scrollIntoViewByBlockId(
+        blockId: string,
+        behavior: ScrollBehavior = 'smooth'
+    ) {
+        const block = await this._editor.getBlockById(blockId);
+
+        await this.scrollIntoViewByBlock(block, behavior);
+    }
+
+    public async scrollIntoViewByBlock(
+        block: AsyncBlock,
+        behavior: ScrollBehavior = 'smooth'
+    ) {
+        if (!block.dom) {
+            return console.warn(`Block is not exist.`);
+        }
+        const containerRect = domToRect(this._editor.ui_container);
+        const blockRect = domToRect(block.dom);
+
+        const blockRelativeTopToEditor =
+            blockRect.top - containerRect.top - containerRect.height / 4;
+        const blockRelativeLeftToEditor = blockRect.left - containerRect.left;
+
+        this.scrollTo({
+            left: blockRelativeLeftToEditor,
+            top: blockRelativeTopToEditor,
+            behavior,
+        });
+        this.update_scroll_info(
+            blockRelativeLeftToEditor,
+            blockRelativeTopToEditor
+        );
+    }
+
+    public async keepBlockInView(
+        blockIdOrBlock: string | AsyncBlock,
+        behavior: ScrollBehavior = 'auto'
+    ) {
+        const block =
+            typeof blockIdOrBlock === 'string'
+                ? await this._editor.getBlockById(blockIdOrBlock)
+                : blockIdOrBlock;
+
+        if (!block.dom) {
+            return console.warn(`Block is not exist.`);
+        }
+        const blockRect = domToRect(block.dom);
+
+        const value = this.get_keep_in_view_params(blockRect);
+
+        if (value !== 0) {
+            this.scrollTo({
+                top: this.scrollTop + blockRect.height * value,
+                behavior,
+            });
+        }
+    }
+
+    private get_keep_in_view_params(blockRect: Rect) {
+        const { top, bottom } = domToRect(this._editor.ui_container);
+        if (blockRect.top <= top + blockRect.height * 3) {
+            return -1;
+        }
+
+        if (blockRect.bottom >= bottom - blockRect.height * 3) {
+            return 1;
+        }
+        return 0;
+    }
+
+    public scrollToBottom(behavior: ScrollBehavior = 'auto') {
+        const containerRect = domToRect(this.scrollContainer);
+        const scrollTop =
+            this.scrollContainer.scrollHeight - containerRect.height;
+        this.scrollTo({ top: scrollTop, behavior });
+    }
+
+    public scrollToTop(behavior: ScrollBehavior = 'auto') {
+        this.scrollTo({ top: 0, behavior });
+    }
+
+    private auto_scroll() {
+        const xValue =
+            this._current_move_direction[0] === 'left'
+                ? -1
+                : this._current_move_direction[0] === 'right'
+                ? 1
+                : 0;
+        const yValue =
+            this._current_move_direction[1] === 'up'
+                ? -1
+                : this._current_move_direction[1] === 'down'
+                ? 1
+                : 0;
+
+        const horizontalOffset = this.scrollMoveOffset * xValue;
+        const verticalOffset = this.scrollMoveOffset * yValue;
+
+        const calcLeft = this.scrollLeft + horizontalOffset;
+        const calcTop = this.scrollTop + verticalOffset;
+        //  If the scrollbar is out of range, the event is no longer fired
+        if (
+            (calcTop <= 0 ||
+                calcTop >=
+                    this.scrollContainer.scrollHeight -
+                        this.scrollContainer.offsetHeight) &&
+            (calcLeft <= 0 ||
+                calcLeft >=
+                    this.scrollContainer.scrollWidth -
+                        this.scrollContainer.offsetWidth)
+        ) {
+            return;
+        }
+
+        this._animation_frame = requestAnimationFrame(() => {
+            const left = this.scrollLeft + horizontalOffset;
+            const top = this.scrollTop + verticalOffset;
+
+            this.scrollTo({
+                left,
+                top,
+                behavior: 'auto',
+            });
+            this.update_scroll_info(left, top);
+            this.scrollingEvent.emit(this._event_name, {
+                direction: this._current_move_direction,
+            });
+            this.auto_scroll();
+        });
+    }
+
+    public startAutoScroll(direction: [HorizontalTypes, VerticalTypes]) {
+        if (direction[0] === null && direction[1] === null) {
+            this._current_move_direction = direction;
+            this.stopAutoScroll();
+            return;
+        }
+        if (
+            direction[0] !== this._current_move_direction[0] ||
+            direction[1] !== this._current_move_direction[1]
+        ) {
+            this._current_move_direction = direction;
+            this.stopAutoScroll();
+        } else {
+            return;
+        }
+        this.auto_scroll();
+    }
+    public stopAutoScroll() {
+        if (this._animation_frame) {
+            cancelAnimationFrame(this._animation_frame);
+            this._animation_frame = null;
+        }
+    }
+}
diff --git a/libs/components/editor-core/src/editor/selection/index.ts b/libs/components/editor-core/src/editor/selection/index.ts
new file mode 100644
index 000000000..67c5a8707
--- /dev/null
+++ b/libs/components/editor-core/src/editor/selection/index.ts
@@ -0,0 +1,4 @@
+export * from './types';
+
+export { SelectionManager } from './selection';
+export type { SelectionInfo } from './selection';
diff --git a/libs/components/editor-core/src/editor/selection/selection.ts b/libs/components/editor-core/src/editor/selection/selection.ts
new file mode 100644
index 000000000..0b60b789b
--- /dev/null
+++ b/libs/components/editor-core/src/editor/selection/selection.ts
@@ -0,0 +1,1046 @@
+/* eslint-disable max-lines */
+import {
+    domToRect,
+    Point,
+    Rect,
+    last,
+    without,
+    debounce,
+    getBlockIdByDom,
+} from '@toeverything/utils';
+import EventEmitter from 'eventemitter3';
+
+import { BlockEditor } from '../..';
+import { AsyncBlock } from '../block';
+import { VirgoSelection } from '../types';
+import {
+    AsyncBlockList,
+    changeEventName,
+    CursorTypes,
+    IdList,
+    selectEndEventName,
+    SelectEventCallbackTypes,
+    SelectEventTypes,
+    SelectionSettings,
+    SelectionSettingsMap,
+    SelectionTypes,
+    SelectPosition,
+    SelectBlock,
+    SelectInfo,
+} from './types';
+import { isLikeBlockListIds } from './utils';
+import { Protocol } from '@toeverything/datasource/db-service';
+// IMP: maybe merge active and select into single function
+
+export type SelectionInfo = InstanceType<
+    typeof SelectionManager
+>['currentSelectInfo'];
+
+export class SelectionManager implements VirgoSelection {
+    private _editor: BlockEditor;
+    private _events = new EventEmitter();
+    private _anchorNode?: AsyncBlock;
+    private _focusNode?: AsyncBlock;
+    private _browserSelection?: Selection;
+    private _lastPoint?: CursorTypes;
+    // TODO check if it is correct
+    private _scrollDelay = 150;
+    private _selectEndDelayTime = 500;
+    private _hasEmitEndPending = false;
+
+    /**
+     *
+     * the selection info before current
+     * @private
+     */
+    private _lastSelectionInfo?: SelectionInfo;
+
+    /**
+     *
+     * last active block info for cache
+     * @private
+     */
+    private _lastActiveSelectInfo: {
+        type: SelectionTypes;
+        info: SelectionSettings;
+    };
+
+    private _activatedNodeId: string;
+    private _selectedNodesIds: IdList = [];
+    private _selectedNodesList: AsyncBlockList = [];
+
+    constructor(editor: BlockEditor) {
+        this._editor = editor;
+        this._activatedNodeId = editor.getRootBlockId();
+        this._lastSelectionInfo = undefined;
+        this._lastActiveSelectInfo = {
+            type: 'None',
+            info: null,
+        };
+        // IMP: to delete
+        // @ts-ignore
+        window['selectionManager'] = this;
+        this._initWindowSelectionChangeListen();
+    }
+
+    /**
+     *
+     * current select`s type
+     * @readonly
+     * @memberof SelectionManager
+     */
+    get type() {
+        if (this._selectedNodesIds.length) {
+            return 'Block';
+        }
+
+        if (window.getSelection()?.type === 'None') {
+            return 'None';
+        }
+
+        if (window.getSelection()?.type === 'Caret' && this._anchorNode) {
+            return 'Caret';
+        }
+
+        if (window.getSelection()?.type === 'Range' && this._anchorNode) {
+            return 'Range';
+        }
+        return 'None';
+    }
+
+    /**
+     *
+     * current select info
+     * @readonly
+     * @memberof SelectionManager
+     */
+    get currentSelectInfo() {
+        if (this.type === 'Range' || this.type === 'Caret') {
+            //TODO IMP: Do you need to pass Range and Crate directly here
+            return {
+                type: 'Range',
+                anchorNode: this._anchorNode,
+                focusNode: this._focusNode,
+                browserSelection: this._browserSelection,
+            } as const;
+        }
+        if (this.type === 'Block') {
+            return {
+                type: 'Block',
+                selectedNodesIds: this._selectedNodesIds,
+            } as const;
+        }
+        return { type: 'None' } as const;
+    }
+
+    get lastSelectionInfo() {
+        return this._lastSelectionInfo;
+    }
+
+    get lastPoint() {
+        return this._lastPoint || 'end';
+    }
+
+    /**
+     *
+     * listen selection in window
+     * @private
+     * @memberof SelectionManager
+     */
+    private _initWindowSelectionChangeListen() {
+        document.addEventListener(
+            'selectionchange',
+            this._windowSelectionChangeHandler
+        );
+    }
+
+    private _windowSelectionChangeHandler = async (e: Event) => {
+        const selection = window.getSelection();
+        await this._editor.selectionManager.setSelectedNodesIds([]);
+        const { type, anchorNode, focusNode } = selection;
+        if (type !== 'None' && anchorNode && focusNode) {
+            const anchorNodeId = getBlockIdByDom(anchorNode);
+            const focusNodeId = getBlockIdByDom(focusNode);
+            const anchorBlock = await this._editor.getBlockById(
+                anchorNodeId || ''
+            );
+            const focusBlock = await this._editor.getBlockById(
+                focusNodeId || ''
+            );
+            if (anchorBlock && focusBlock) {
+                this._anchorNode = anchorBlock;
+                this._focusNode = focusBlock;
+                if (selection.isCollapsed) {
+                    this.setActivatedNodeId(anchorBlock.id);
+                }
+            }
+            this._browserSelection = selection;
+            const currentSelectionInfo = this.currentSelectInfo;
+            this._emitSelectionChange();
+            this._lastSelectionInfo = currentSelectionInfo;
+        } else {
+            this._anchorNode = undefined;
+            this._focusNode = undefined;
+            this._browserSelection = undefined;
+            if (this.type !== 'Block') {
+                const currentSelectionInfo = this.currentSelectInfo;
+                this._emitSelectionChange();
+                this._lastSelectionInfo = currentSelectionInfo;
+            }
+        }
+    };
+
+    public getActivatedNodeId() {
+        return this._activatedNodeId;
+    }
+
+    public async setActivatedNodeId(nodeId: string) {
+        const node = await this._editor.getBlockById(nodeId);
+        if (node) {
+            this._activatedNodeId = nodeId;
+        }
+    }
+
+    get selectedNodesList() {
+        return this._selectedNodesList;
+    }
+
+    set selectedNodesList(nodeList: AsyncBlockList) {
+        const newSelectedNodesIds = nodeList.map(node => node.id);
+        if (!isLikeBlockListIds(newSelectedNodesIds, this._selectedNodesIds)) {
+            const nodesNeedUnselect = without(
+                this._selectedNodesIds,
+                ...newSelectedNodesIds
+            );
+            this._emitBlockSelect(nodesNeedUnselect, false);
+            this._selectedNodesIds = newSelectedNodesIds;
+            this._selectedNodesList = nodeList;
+            this._emitBlockSelect(this._selectedNodesIds);
+            const currentSelectionInfo = this.currentSelectInfo;
+            this._emitSelectionChange();
+            this._lastSelectionInfo = currentSelectionInfo;
+            this.setActivatedNodeId('');
+        }
+    }
+
+    getSelectedNodesIds() {
+        return this._selectedNodesIds;
+    }
+
+    public async setSelectedNodesIds(nodesIdsList: IdList) {
+        if (!isLikeBlockListIds(nodesIdsList, this._selectedNodesIds)) {
+            const ids: IdList = [];
+            const nodeList: AsyncBlockList = [];
+            for (const id of nodesIdsList) {
+                const node = await this._editor.getBlockById(id);
+                if (node) {
+                    ids.push(id);
+                    nodeList.push(node);
+                }
+            }
+            const blockNeedUnselect = without(this._selectedNodesIds, ...ids);
+            this._emitBlockSelect(blockNeedUnselect, false);
+            this._selectedNodesIds = ids;
+            this._selectedNodesList = nodeList;
+            this._emitBlockSelect(this._selectedNodesIds);
+            const currentSelectionInfo = this.currentSelectInfo;
+            this._emitSelectionChange();
+            this._lastSelectionInfo = currentSelectionInfo;
+            this.setActivatedNodeId('');
+        }
+    }
+
+    /**
+     *
+     * select all level1 classes
+     * @memberof SelectionManager
+     */
+    public async selectAllBlocks() {
+        const rootBlockId = this._editor.getRootBlockId();
+        const rootBlock = await this._editor.getBlockById(rootBlockId);
+        const children = await rootBlock?.children();
+        if (children) {
+            this.setSelectedNodesIds(children.map(({ id }) => id));
+            // blur focused element and blur it
+            (document?.activeElement as HTMLInputElement)?.blur();
+        }
+    }
+
+    /**
+     *
+     * get all block list
+     * @private
+     * @return {*}  {Promise<Array<AsyncBlock>>}
+     * @memberof SelectionManager
+     */
+    public getLastActiveSelectionSetting<
+        T extends keyof SelectionSettingsMap
+    >() {
+        const { type, info } = this._lastActiveSelectInfo as {
+            type: T;
+            info: SelectionSettingsMap[T];
+        };
+        return {
+            nodeId: this._activatedNodeId || '',
+            type,
+            info,
+        };
+    }
+
+    public async rootDomReady() {
+        const rootBlockId = this._editor.getRootBlockId();
+        const rootBlock = await this._editor.getBlockById(rootBlockId);
+        return Boolean(rootBlock?.dom);
+    }
+    // TODO: Maybe just check root block
+    public async isPointInBlocks(point: Point) {
+        const blockList = await this._editor.getBlockList();
+        return blockList.some(block => {
+            return (
+                Boolean(block.dom) && domToRect(block.dom).isContainPoint(point)
+            );
+        });
+    }
+
+    /**
+     *
+     * get witch nodes intersect with selected rect
+     * @param {Rect} selectionRect
+     * @param {AsyncBlock} [block]
+     * @return {*}
+     * @memberof SelectionManager
+     */
+    public async calcRenderBlockIntersect(
+        selectionRect: Rect,
+        block?: AsyncBlock
+    ) {
+        const selectedNodes: Array<AsyncBlock> = [];
+        if (!block) {
+            const rootBlockId = this._editor.getRootBlockId();
+            const rootBlock = await this._editor.getBlockById(rootBlockId);
+            if (rootBlock) {
+                block = rootBlock;
+            }
+        }
+        if (block && block.dom) {
+            if (selectionRect.isIntersect(domToRect(block.dom))) {
+                const selectableChildren = await (
+                    await block.children()
+                ).filter(childBlock => {
+                    return this._editor.getView(childBlock.type).selectable;
+                });
+                for await (const childBlock of selectableChildren) {
+                    const { dom } = childBlock;
+                    if (dom && selectionRect.isIntersect(domToRect(dom))) {
+                        selectedNodes.push(childBlock);
+                    }
+                    if (!dom) {
+                        console.warn('can not find dom bind with block');
+                    }
+                }
+                // if just only has one selected maybe select the children
+                if (selectedNodes.length === 1) {
+                    const childrenSelectedNodes: Array<AsyncBlock> =
+                        await this.calcRenderBlockIntersect(
+                            selectionRect,
+                            selectedNodes[0]
+                        );
+                    if (childrenSelectedNodes.length)
+                        return childrenSelectedNodes;
+                }
+            }
+        }
+        return selectedNodes;
+    }
+
+    /**
+     *
+     * convert selected nodes to group,
+     * group is still a special block`s type.
+     * @memberof SelectionManager
+     */
+    public async convertSelectedNodesToGroup(nodes = this._selectedNodesList) {
+        if (nodes && nodes.length) {
+            const groupBlock = await this._editor.createBlock('group');
+            // IMP: if check nodes are level1
+            const lastNode = last(nodes);
+            if (groupBlock) {
+                await lastNode?.after(groupBlock);
+                for (const node of nodes) {
+                    await node.remove();
+                }
+                await groupBlock.prepend(...nodes);
+                // cache
+                this.selectedNodesList = [groupBlock];
+            }
+        }
+    }
+
+    /**
+     *
+     * remove group block by Id
+     * @param {string} blockId
+     * @memberof SelectionManager
+     */
+    public async removeGroup(blockId: string) {
+        const groupBlock = await this._editor.getBlockById(blockId);
+        if (groupBlock?.type === Protocol.Block.Type.group) {
+            const children = await groupBlock.children();
+            if (children && children.length) {
+                const previousBlock = await groupBlock.previousSibling();
+                await groupBlock.remove();
+                for (const node of children) {
+                    await node.remove();
+                }
+                if (previousBlock) {
+                    await previousBlock.after(...children);
+                } else {
+                    const parentNode = await groupBlock.parent();
+                    await parentNode.append(...children);
+                }
+            }
+        }
+    }
+
+    /**
+     *
+     * get previous activatable blockNode
+     * @private
+     * @param {AsyncBlock} node
+     * @return {*}  {(Promise<AsyncBlock | null>)}
+     * @memberof SelectionManager
+     */
+    private async _getPreviousActivatableBlockNode(
+        node: AsyncBlock
+    ): Promise<AsyncBlock | null> {
+        const preNode = await node.physicallyPerviousSibling();
+        // exit when find no preNode
+        if (!preNode) {
+            return null;
+        }
+        const { activatable, selectable } = this._editor.getView(preNode.type);
+        if (activatable) {
+            this.setSelectedNodesIds([]);
+            return preNode;
+        }
+        if (selectable) {
+            this.setSelectedNodesIds([preNode.id]);
+            (document.activeElement as HTMLInputElement)?.blur();
+            return null;
+        }
+        return this._getPreviousActivatableBlockNode(preNode);
+    }
+
+    /**
+     *
+     * get next activatable blockNode
+     * @private
+     * @param {AsyncBlock} node
+     * @return {*}  {(Promise<AsyncBlock | null>)}
+     * @memberof SelectionManager
+     */
+    private async _getNextActivatableBlockNode(
+        node: AsyncBlock,
+        ignoreSelf = true
+    ): Promise<AsyncBlock | null> {
+        // if preNode is not parent level check if next block has selectable children
+        const children = await node.children();
+        let nextNode: AsyncBlock | null = null;
+
+        // if has children first check children
+        if (children && children.length) {
+            nextNode = children[0];
+        } else {
+            const nextSibling = await node.nextSibling();
+
+            if (nextSibling) {
+                nextNode = nextSibling;
+            }
+
+            let parentNode = await node.parent();
+            // if do not has next sibling block search for paren levels next
+            if (parentNode) {
+                while (!nextNode) {
+                    if (parentNode.id === this._editor.getRootBlockId()) {
+                        return null;
+                    }
+                    const parentNext = await parentNode.nextSibling();
+                    if (parentNext) {
+                        nextNode = parentNext;
+                    } else {
+                        parentNode = await parentNode.parent();
+                    }
+                }
+            }
+
+            if (!nextNode || node.id === this._editor.getRootBlockId()) {
+                return null;
+            }
+        }
+
+        const { activatable, selectable } = this._editor.getView(nextNode.type);
+        if (activatable) {
+            this.setSelectedNodesIds([]);
+            return nextNode;
+        }
+        if (selectable) {
+            this.setSelectedNodesIds([nextNode.id]);
+            (document.activeElement as HTMLInputElement)?.blur();
+            return null;
+        }
+        return this._getNextActivatableBlockNode(nextNode);
+    }
+
+    /**
+     *
+     * make pervious or parent node be focused
+     * @param {string} nodeId
+     * @memberof SelectionManager
+     */
+    public async activePreviousNode(nodeId?: string, position?: CursorTypes) {
+        const id = nodeId || this._activatedNodeId;
+        const node = await this._editor.getBlockById(id);
+        if (node) {
+            let preNode: AsyncBlock;
+            if (node.type === Protocol.Block.Type.group) {
+                preNode = await node.previousSibling();
+                if (preNode) {
+                    this.setSelectedNodesIds([preNode.id]);
+                    return;
+                }
+            }
+            preNode = await this._getPreviousActivatableBlockNode(node);
+            if (preNode) {
+                this.activeNodeByNodeId(preNode.id, position);
+            }
+        } else {
+            console.warn('Can not find node by this id');
+        }
+    }
+
+    /**
+     *
+     * get previous selectable block
+     * @private
+     * @param {AsyncBlock} node
+     * @return {*}  {(Promise<AsyncBlock | null>)}
+     * @memberof SelectionManager
+     */
+    private async _getPreviousBlockForSelect(
+        node: AsyncBlock
+    ): Promise<AsyncBlock | null> {
+        let preNode = await node.previousSibling();
+        // if preNode is not parent level check if previous block has selectable children
+        if (!preNode) {
+            preNode = await node.parent();
+        }
+        // exit when find root block
+        if (!preNode || preNode.id === this._editor.getRootBlockId()) {
+            return null;
+        }
+        const { selectable } = this._editor.getView(preNode.type);
+        if (selectable) {
+            (document.activeElement as HTMLInputElement)?.blur();
+            return preNode;
+        }
+        return this._getPreviousBlockForSelect(preNode);
+    }
+
+    public async getPreviousNodeId(nodeId: string): Promise<string> {
+        const node = await this._editor.getBlockById(nodeId);
+        if (node) {
+            const preNode = await this._getPreviousBlockForSelect(node);
+            return preNode?.id || '';
+        } else {
+            console.warn('Can not find node by this id');
+            return '';
+        }
+    }
+
+    public async expandBlockSelect(isPrevious: boolean) {
+        if (this.type === 'Block') {
+            let newNodeId = '';
+            if (isPrevious) {
+                newNodeId = await this.getPreviousNodeId(
+                    this._selectedNodesIds[0]
+                );
+            } else {
+                newNodeId = await this._editor.selectionManager.getNextNodeId(
+                    this._selectedNodesIds[0]
+                );
+            }
+            if (newNodeId) {
+                if (this._selectedNodesIds.indexOf(newNodeId) !== -1) {
+                    this._editor.selectionManager.setSelectedNodesIds(
+                        this._selectedNodesIds.slice(1)
+                    );
+                } else {
+                    const new_node = await this._editor.getBlockById(newNodeId);
+                    if (new_node) {
+                        const new_node_children_ids =
+                            await new_node.childrenIds;
+                        let select_ids_new = this._selectedNodesIds;
+                        if (
+                            new_node_children_ids &&
+                            new_node_children_ids.length
+                        ) {
+                            select_ids_new = select_ids_new = without(
+                                select_ids_new,
+                                ...new_node_children_ids
+                            );
+                        }
+                        this.setSelectedNodesIds([
+                            newNodeId,
+                            ...select_ids_new,
+                        ]);
+                    }
+                }
+            }
+        }
+    }
+
+    /**
+     *
+     * make next or next children node be focused
+     * @param {string} nodeId
+     * @memberof SelectionManager
+     */
+    public async activeNextNode(nodeId?: string, position?: CursorTypes) {
+        const id = nodeId || this._activatedNodeId;
+        const node = await this._editor.getBlockById(id);
+        if (node) {
+            let nextNode: AsyncBlock;
+            if (node.type === Protocol.Block.Type.group) {
+                nextNode = await node.nextSibling();
+                if (nextNode) {
+                    this.setSelectedNodesIds([nextNode.id]);
+                    return false;
+                }
+            }
+
+            nextNode = await this._getNextActivatableBlockNode(node);
+            if (nextNode) {
+                this.activeNodeByNodeId(nextNode.id, position);
+            }
+            return false;
+        } else {
+            console.warn('Can not find node by this id');
+            return false;
+        }
+    }
+
+    private async _getNextBlockForSelect(
+        node: AsyncBlock
+    ): Promise<AsyncBlock | null> {
+        let nextNode: AsyncBlock | null = null;
+
+        const nextSibling = await node.nextSibling();
+
+        if (nextSibling) {
+            nextNode = nextSibling;
+        }
+
+        if (!nextNode) {
+            nextNode = await (await node.parent())?.nextSibling();
+        }
+
+        if (!nextNode || node.id === this._editor.getRootBlockId()) {
+            return null;
+        }
+
+        const { selectable } = this._editor.getView(nextNode.type);
+
+        if (selectable) {
+            (document.activeElement as HTMLInputElement)?.blur();
+            return nextNode;
+        }
+        return this._getNextBlockForSelect(nextNode);
+    }
+
+    public async getNextNodeId(nodeId: string): Promise<string> {
+        const node = await this._editor.getBlockById(nodeId);
+        if (node) {
+            const nextNode = await this._getNextBlockForSelect(node);
+            return nextNode ? nextNode.id : '-1';
+        } else {
+            console.warn('Can not find node by this id');
+            return '-1';
+        }
+    }
+
+    /**
+     *
+     * focus node by node id
+     * @param {string} nodeId
+     * @memberof SelectionManager
+     */
+    public async activeNodeByNodeId(nodeId: string, position?: CursorTypes) {
+        try {
+            const node = await this._editor.getBlockById(nodeId);
+            if (node) {
+                this._activatedNodeId = nodeId;
+                if (position) {
+                    this._lastPoint = position;
+                }
+                this.emit(nodeId, SelectEventTypes.active, this.lastPoint);
+                // TODO: Optimize the related logic after implementing the scroll bar
+                setTimeout(() => {
+                    // this._editor.scrollManager.keepBlockInView(node);
+                }, this._scrollDelay);
+            } else {
+                console.warn('Can not find node by this id');
+            }
+        } catch (e) {
+            console.warn('Some error occured in activeNodeByNodeId');
+        }
+    }
+
+    /**
+     *
+     * active and set a block`s selection
+     * @template T
+     * @param {string} nodeId
+     * @param {{
+     *             type: T;
+     *             info: SelectionSettingsMap[T];
+     *         }} [selectionInfo]
+     * @memberof SelectionManager
+     */
+    public async setNodeActiveSelection<T extends keyof SelectionSettingsMap>(
+        nodeId: string,
+        selectionInfo?: {
+            type: T;
+            info: SelectionSettingsMap[T];
+        }
+    ) {
+        const node = await this._editor.getBlockById(nodeId);
+        if (node) {
+            this._activatedNodeId = nodeId;
+            this.emit(
+                nodeId,
+                SelectEventTypes.setSelection,
+                selectionInfo?.info || null
+            );
+            // TODO: Optimize the related logic after implementing the scroll bar
+            setTimeout(() => {
+                // node.dom?.scrollIntoView();
+            }, this._scrollDelay);
+        } else {
+            console.warn('Can not find node by this id');
+        }
+    }
+
+    private _toEventName(blockId: string, eventType: SelectEventTypes) {
+        return `${blockId}_${eventType}`;
+    }
+
+    /**
+     *
+     * notice selected blocks, select status had been changed
+     * @private
+     * @param {Array<string>} nodeIdList
+     * @param {boolean} [isSelect=true]
+     * @memberof SelectionManager
+     */
+    private _emitBlockSelect(nodeIdList: Array<string>, isSelect = true) {
+        if (nodeIdList && nodeIdList.length) {
+            nodeIdList.forEach(id => {
+                this.emit(id, SelectEventTypes.onSelect, isSelect);
+            });
+        }
+    }
+
+    public emit<T extends SelectEventTypes>(
+        blockId: string,
+        eventType: T,
+        ...eventParams: SelectEventCallbackTypes[T] | []
+    ) {
+        this._events.emit(
+            this._toEventName(blockId, eventType),
+            ...eventParams
+        );
+    }
+
+    public onSelectionChange(handler: (selectionInfo: SelectionInfo) => void) {
+        this._events.on(changeEventName, handler);
+    }
+
+    public unBindSelectionChange(
+        handler: (selectionInfo: SelectionInfo) => void
+    ) {
+        this._events.off(changeEventName, handler);
+    }
+
+    public observe(
+        nodeId: string,
+        eventType: SelectEventTypes,
+        callback: (...args: Array<any>) => void
+    ) {
+        this._events.on(this._toEventName(nodeId, eventType), callback);
+    }
+
+    public unobserve(
+        nodeId: string,
+        eventType: SelectEventTypes,
+        callback: (...args: Array<any>) => void
+    ) {
+        this._events.off(this._toEventName(nodeId, eventType), callback);
+    }
+
+    private _emitSelectionEnd = debounce(() => {
+        this._events.emit(selectEndEventName, this.currentSelectInfo);
+    }, this._selectEndDelayTime);
+
+    private _emitSelectionChange() {
+        this._events.emit(changeEventName, this.currentSelectInfo);
+        this._maybeEmitSelectEnd();
+    }
+
+    private _maybeEmitSelectEnd() {
+        if (this._editor.mouseManager.isMouseDown) {
+            if (!this._hasEmitEndPending) {
+                this._hasEmitEndPending = true;
+                this._editor.mouseManager.onMouseupEventOnce(() => {
+                    this._emitSelectionEnd();
+                    this._hasEmitEndPending = false;
+                });
+            }
+        } else {
+            this._emitSelectionEnd();
+        }
+    }
+
+    /**
+     *
+     * check if current selection is single cursor
+     * @memberof SelectionManager
+     */
+    public isCollapsed() {
+        if (this.currentSelectInfo.type === 'Range') {
+            return this.currentSelectInfo.browserSelection?.isCollapsed;
+        }
+        return false;
+    }
+
+    /**
+     *
+     * add listener select info start
+     * @param {(info: SelectionInfo) => void} cb
+     * @memberof SelectionManager
+     */
+    public onSelectEnd(cb: (info: SelectionInfo) => void) {
+        this._events.on(selectEndEventName, cb);
+        return this.offSelectEnd.bind(this, cb);
+    }
+
+    /**
+     *
+     * off listener select info end
+     * @param {(info: SelectionInfo) => void} cb
+     * @memberof SelectionManager
+     */
+    public offSelectEnd(cb: (info: SelectionInfo) => void) {
+        this._events.off(selectEndEventName, cb);
+    }
+
+    // TODO: does not consider discontinuous situations (such as multi-selection or hidden block scenarios), the product does not have this feature yet
+    public async getSelectInfo(): Promise<SelectInfo> {
+        const selectInfo = this.currentSelectInfo;
+        const startBlockId = await this._getFirstBlockId(selectInfo);
+        const endBlockId = await this._getLastBlockId(selectInfo);
+        let startPosition: SelectPosition = null;
+        let endPosition: SelectPosition = null;
+        if (selectInfo.type === 'Range') {
+            const selRange = selectInfo.browserSelection.getRangeAt(0);
+            const startIndex = this._getTextNodeIndex(selRange.startContainer);
+            if (startIndex !== -1) {
+                startPosition = {
+                    arrayIndex: startIndex,
+                    offset: selRange.startOffset,
+                };
+            }
+            const endIndex = this._getTextNodeIndex(selRange.endContainer);
+            if (endIndex !== -1) {
+                endPosition = {
+                    arrayIndex: endIndex,
+                    offset: selRange.endOffset,
+                };
+            }
+        }
+        let select: SelectInfo = {
+            type: 'None',
+            blocks: [],
+        };
+        if (!startBlockId || !endBlockId) {
+            return select;
+        }
+
+        const blocks: SelectBlock[] = [];
+        const blockId = startBlockId;
+        let beenFind = false;
+        let curBlock = await this._editor.getBlockById(blockId);
+        while (!beenFind && curBlock) {
+            beenFind = await this._collectBlockInfo(
+                curBlock,
+                startBlockId,
+                endBlockId,
+                startPosition,
+                endPosition,
+                blocks
+            );
+            if (beenFind) {
+                break;
+            }
+            let parent = curBlock;
+            curBlock = null;
+            while (parent) {
+                const nextSibling = await parent.nextSibling();
+                if (nextSibling) {
+                    curBlock = nextSibling;
+                    break;
+                }
+                parent = await parent.parent();
+            }
+        }
+
+        select = {
+            type: selectInfo.type,
+            blocks: blocks,
+        };
+        return select;
+    }
+
+    private async _collectBlockInfo(
+        block: AsyncBlock,
+        startId: string,
+        endId: string,
+        startPosition: SelectPosition,
+        endPosition: SelectPosition,
+        blocks: SelectBlock[]
+    ) {
+        const selectBlock: SelectBlock = {
+            blockId: block.id,
+            children: [] as any[],
+        };
+
+        if (block.id === startId && startPosition) {
+            selectBlock.startInfo = startPosition;
+        }
+
+        if (block.id === endId && endPosition) {
+            selectBlock.endInfo = endPosition;
+        }
+
+        blocks.push(selectBlock);
+
+        let beenFindEnd = block.id === endId;
+        if (!beenFindEnd) {
+            for (let i = 0; i < block.childrenIds.length; i++) {
+                const nextBlock = await this._editor.getBlockById(
+                    block.childrenIds[i]
+                );
+                beenFindEnd = await this._collectBlockInfo(
+                    nextBlock,
+                    startId,
+                    endId,
+                    startPosition,
+                    endPosition,
+                    selectBlock.children
+                );
+                if (beenFindEnd) {
+                    break;
+                }
+            }
+        }
+
+        return beenFindEnd;
+    }
+
+    // Get the text node index position
+    private _getTextNodeIndex(node: Node) {
+        const paragraph = node?.parentElement?.closest('.text-paragraph');
+        const slate = node?.parentElement?.closest('[data-slate-node]');
+
+        if (paragraph) {
+            for (let i = 0; i < paragraph.childNodes.length; i++) {
+                if (paragraph.childNodes[i] === slate) {
+                    return i;
+                }
+            }
+        }
+        return -1;
+    }
+
+    private async _getFirstBlockId(selectInfo: any) {
+        let blockId = '';
+        if (selectInfo.type === 'Block') {
+            if (selectInfo.selectedNodesIds?.length === 0) {
+                return blockId;
+            }
+
+            blockId = selectInfo.selectedNodesIds[0];
+            let nextBlockId = blockId;
+            while (
+                nextBlockId &&
+                selectInfo.selectedNodesIds.indexOf(nextBlockId) !== 0
+            ) {
+                blockId = nextBlockId;
+                nextBlockId = await this.getPreviousNodeId(blockId);
+            }
+        } else if (selectInfo.type === 'Range') {
+            const selRange = selectInfo.browserSelection?.getRangeAt(0);
+            blockId =
+                selRange.startContainer?.parentElement
+                    ?.closest('[data-block-id]')
+                    ?.attributes.getNamedItem('data-block-id')?.value || '';
+        }
+        return blockId && blockId !== '-1' ? blockId : '';
+    }
+
+    private async _getLastBlockId(selectInfo: any) {
+        let blockId = '';
+        if (selectInfo.type === 'Block') {
+            if (selectInfo.selectedNodesIds?.length === 0) {
+                return blockId;
+            }
+
+            blockId =
+                selectInfo.selectedNodesIds[
+                    selectInfo.selectedNodesIds.length - 1
+                ];
+            let nextBlockId = blockId;
+            while (
+                nextBlockId &&
+                selectInfo.selectedNodesIds.indexOf(nextBlockId) !== -1
+            ) {
+                blockId = nextBlockId;
+                nextBlockId = await this.getNextNodeId(blockId);
+            }
+
+            let block = await this._editor.getBlockById(blockId);
+            while (block) {
+                blockId = block.id;
+                block = await block.lastChild();
+            }
+        } else if (selectInfo.type === 'Range') {
+            const selRange = selectInfo.browserSelection?.getRangeAt(0);
+            blockId =
+                selRange.endContainer?.parentElement
+                    ?.closest('[data-block-id]')
+                    ?.attributes.getNamedItem('data-block-id')?.value || '';
+        }
+        return blockId && blockId !== '-1' ? blockId : '';
+    }
+
+    /**
+     *
+     * make this function always in the end of this class
+     * @memberof SelectionManager
+     */
+    public dispose() {
+        document.removeEventListener(
+            'selectionchange',
+            this._windowSelectionChangeHandler
+        );
+    }
+}
diff --git a/libs/components/editor-core/src/editor/selection/types.ts b/libs/components/editor-core/src/editor/selection/types.ts
new file mode 100644
index 000000000..6f1cb773f
--- /dev/null
+++ b/libs/components/editor-core/src/editor/selection/types.ts
@@ -0,0 +1,83 @@
+import { Point } from '@toeverything/utils';
+import { Range } from 'slate';
+import { AsyncBlock } from '../block';
+
+export const changeEventName = 'selection-change';
+export const selectEndEventName = 'select-end';
+export interface TextSelection {
+    anchor: { offset: number; path: Array<number> };
+    focus: { offset: number; path: Array<number> };
+}
+
+export type ModelType = 'None' | 'Range' | 'Caret' | 'Block';
+
+/** -*-*-*- enum import start -*-*-*- **/
+
+export enum SelectEventTypes {
+    active = 'active',
+    setSelection = 'setSelection',
+    onSelect = 'onSelect',
+}
+
+export interface SelectEventCallbackTypes {
+    [SelectEventTypes.active]: [CursorTypes];
+    [SelectEventTypes.onSelect]: [boolean];
+    [SelectEventTypes.setSelection]: [
+        SelectionSettingsMap[keyof SelectionSettingsMap]
+    ];
+}
+
+/** -*-*-*- enum import end -*-*-*- **/
+
+/** -*-*-*- interface import start -*-*-*- **/
+
+/**
+ *
+ * types for set selection
+ * @export
+ * @interface SelectionSettingsMap
+ */
+export interface SelectionSettingsMap {
+    Range: Range | Point;
+    None: null;
+    Caret: Range | Point;
+    Block: null;
+}
+
+/** -*-*-*- interface import end -*-*-*- **/
+
+/** -*-*-*- type import start -*-*-*- **/
+
+export type IdList = Array<string>;
+
+export type SelectionTypes = 'None' | 'Range' | 'Caret' | 'Block';
+
+export type SelectionSettings = SelectionSettingsMap[SelectionTypes];
+
+export type AsyncBlockList = Array<AsyncBlock>;
+
+export type Path = Array<string>;
+
+export type PathList = Array<Path>;
+
+export type CursorTypes = Point | 'start' | 'end';
+
+export type Form = 'up' | 'down';
+
+export interface SelectPosition {
+    arrayIndex: number;
+    offset: number;
+}
+
+export interface SelectBlock {
+    blockId: string;
+    startInfo?: SelectPosition;
+    endInfo?: SelectPosition;
+    children: SelectBlock[];
+}
+
+export interface SelectInfo {
+    type: 'Block' | 'Range' | 'None';
+    blocks: SelectBlock[];
+}
+/** -*-*-*- type import end -*-*-*- **/
diff --git a/libs/components/editor-core/src/editor/selection/utils.ts b/libs/components/editor-core/src/editor/selection/utils.ts
new file mode 100644
index 000000000..82b579c62
--- /dev/null
+++ b/libs/components/editor-core/src/editor/selection/utils.ts
@@ -0,0 +1,42 @@
+import { AsyncBlockList, PathList } from './types';
+import { difference } from '@toeverything/utils';
+
+interface TextSelection {
+    anchor: { offset: number; path: Array<number> };
+    focus: { offset: number; path: Array<number> };
+}
+
+interface SelectText {
+    // discard blockId discard
+    blockId?: string;
+    renderId?: string;
+    selection?: TextSelection;
+    parentRenderId?: string;
+}
+
+export function isLikePathList(paths1: PathList, paths2: PathList) {
+    if (paths1?.length !== paths2?.length) return false;
+    return paths1.join() === paths2.join();
+}
+
+export function isLikeBlockList(a: AsyncBlockList, b: AsyncBlockList) {
+    if (a?.length !== b?.length) return false;
+    for (let i = 0; i < a.length; i++) {
+        if (a[i] != b[i]) return false;
+    }
+    return true;
+}
+
+export function isLikeBlockListIds(left: Array<string>, right: Array<string>) {
+    if (left.length && right.length && left.length === right.length) {
+        return !difference(left, right).length;
+    }
+    return false;
+}
+
+// export function isLikeSelectText(a: SelectText, b?: SelectText) {
+//     if (a?.renderId === b?.renderId) {
+//         if (a?.selection?.anchor.offset === b?.selection?.anchor.offset && a?.selection?.focus.offset === b?.selection?.focus.offset) return true;
+//     }
+//     return false;
+// }
diff --git a/libs/components/editor-core/src/editor/types.ts b/libs/components/editor-core/src/editor/types.ts
new file mode 100644
index 000000000..1c766c2ff
--- /dev/null
+++ b/libs/components/editor-core/src/editor/types.ts
@@ -0,0 +1,257 @@
+/**
+ * Editor plug-in mechanism design
+ * 1. Plug-ins are not aware of each other
+ * 2. Disable dom operations in plugins, such as operating dom, monitoring mouse and keyboard events, etc.
+ * 3. Interact with Editor through EditorApi, get value and set value
+ * 4. Through the hook, complete the callback of the Editor, just make the callback,
+ * Therefore, the parameters in the hook cannot directly transmit the reference data in the Editor to prevent the Plugin from modifying it.
+ * 5. All Plugins should inherit from BasePlugin, in the form of objects
+ * 6. Dependencies between plugins are not supported for the time being
+ */
+// import { CompleteInfoSelectOption } from '@authing/react-ui-components/components/CompleteInfo/interface';
+import type {
+    BlockFlavors,
+    BlockFlavorKeys,
+} from '@toeverything/datasource/db-service';
+import type { PatchNode } from '@toeverything/components/ui';
+import type { IdList, SelectionInfo, SelectionManager } from './selection';
+
+import type { AsyncBlock } from './block';
+import type { BlockHelper } from './block/block-helper';
+import type { BlockCommands } from './commands/block-commands';
+import type { DragDropManager } from './drag-drop';
+
+// import { BrowserClipboard } from './clipboard/browser-clipboard';
+
+export interface StorageManager {
+    // createStorage: () => void;
+    // removeStorage: () => void;
+}
+
+export interface Commands {
+    blockCommands: Pick<
+        BlockCommands,
+        | 'createNextBlock'
+        | 'convertBlock'
+        | 'removeBlock'
+        | 'splitGroupFromBlock'
+        | 'mergeGroup'
+    >;
+    textCommands: {
+        getBlockText: (blockId: string) => Promise<string>;
+        setBlockText: (blockId: string, text: string) => void;
+    };
+}
+
+export interface VirgoSelection {
+    currentSelectInfo: SelectionInfo;
+    getSelectedNodesIds: () => IdList;
+    setSelectedNodesIds: (nodesIdsList: IdList) => void;
+    onSelectionChange: (
+        handler: (selectionInfo: SelectionInfo) => void
+    ) => void;
+    unBindSelectionChange: (
+        handler: (selectionInfo: SelectionInfo) => void
+    ) => void;
+    onSelectEnd: (cb: (info: SelectionInfo) => void) => () => void;
+    convertSelectedNodesToGroup: (nodes?: AsyncBlock[]) => Promise<void>;
+}
+
+// Editor's external API
+export interface Virgo {
+    selectionManager: SelectionManager;
+    createBlock: (
+        type: keyof BlockFlavors,
+        parentId?: string
+    ) => Promise<AsyncBlock>;
+    getRootBlockId: () => string;
+    getBlockById(blockId: string): Promise<AsyncBlock | null>;
+    setHotKeysScope(scope?: string): void;
+    getBlockList: () => Promise<AsyncBlock[]>;
+    // removeBlocks: () => void;
+    storageManager: StorageManager | undefined;
+    selection: VirgoSelection;
+    plugins: PluginManagerInterface;
+    /**
+     * commands bind with editor , use for change model data
+     * if want to get some block info use block helper
+     */
+    commands: Commands;
+    container: HTMLDivElement;
+    /**
+     * Block helper aim to get block`s self infos, is has some function for changing block use them carefully
+     */
+    blockHelper: BlockHelper;
+    dragDropManager: DragDropManager;
+    // getRenderNodeById: () => void; // Post removal to transform the corresponding function through the hook mechanism
+    // container is removed later using the attachElement interface
+    readonly: boolean;
+    // getRootRenderId is removed later and the corresponding function is modified through the hook mechanism
+    // getRootRenderNode is later removed to transform the corresponding function through the hook mechanism
+    // dispatchAction needs to be designed to transform the corresponding function through the hook mechanism
+    // Plugin.actions needs to be designed to transform the corresponding functions through the hook mechanism
+    // renderNodeMap is removed later and the corresponding function is transformed through the hook mechanism
+    // getDomByBlockId is removed later and the corresponding function is modified through the hook mechanism
+    // registerHotKey is later removed and the corresponding function is modified through the hook mechanism
+    // unregisterHotKey is later removed to transform the corresponding function through the hook mechanism
+    // eventEmitter needs to be designed to transform the corresponding function through the hook mechanism
+    // getAllBlockTypes later removed
+    reactRenderRoot: {
+        render: PatchNode;
+        has: (key: string) => boolean;
+    };
+    // clipboard: BrowserClipboard;
+    workspace: string;
+    getBlockDomById: (id: string) => Promise<HTMLElement>;
+    isWhiteboard: boolean;
+}
+
+export interface Plugin {
+    init: () => void;
+    dispose: () => void;
+}
+
+export interface PluginCreator {
+    // Unique identifier to distinguish between different Plugins
+    pluginName: string;
+    // Priority, the higher the number, the higher the priority? ? Is it necessary to put it at the hook level?
+    priority: number;
+    // According to different capabilities, the api of editor/hooks will be different
+    // If the capability to which the api belongs is enabled, the api will throw error
+    // For example, a plug-in is a plug-in related to encrypted storage to localStorage, and needs to declare storage capability
+    // Then operate localStorage through the encapsulated storage api
+    // And when the plugin is uninstalled (such as editor destroyed), the ability to directly revoke the storage api
+    // And when the user loads a plug-in, it can also remind the user what kind of capabilities the plug-in may use
+    // getCapability: () => Capability[];
+    new (affine: Virgo, hooks: PluginHooks): Plugin;
+}
+
+// plugin management
+export interface PluginManagerInterface {
+    /** register plugin to editor */
+    register: (plugin: PluginCreator) => void;
+    deregister: (pluginName: string) => void;
+    getPlugin: (pluginName: string) => Plugin | undefined;
+
+    /** listen to event name, exec async listener callback */
+    observe(
+        name: string,
+        callback: (
+            ...args: Array<any>
+        ) => Promise<Record<string, unknown>> | void
+    ): void;
+    unobserve(
+        name: string,
+        callback: (
+            ...args: Array<any>
+        ) => Promise<Record<string, unknown>> | void
+    ): void;
+    /** fire event name, and collect all results of listeners */
+    emitAsync(name: string, ...params: Array<any>): Promise<any[]>;
+    emit(name: string, ...params: Array<any>): void;
+}
+
+export enum HookType {
+    INIT = 'init',
+    RENDER = 'render',
+    ON_ROOT_NODE_KEYUP = 'onRootNodeKeyUp',
+    ON_ROOTNODE_MOUSE_DOWN = 'onRootNodeMouseDown',
+    ON_ROOT_NODE_KEYDOWN = 'onRootNodeKeyDown',
+    ON_ROOT_NODE_KEYDOWN_CAPTURE = 'onRootNodeKeyDownCapture',
+    ON_ROOTNODE_MOUSE_MOVE = 'onRootNodeMouseMove',
+    ON_ROOTNODE_MOUSE_UP = 'onRootNodeMouseUp',
+    ON_ROOTNODE_MOUSE_OUT = 'onRootNodeMouseOut',
+    ON_ROOTNODE_MOUSE_LEAVE = 'onRootNodeMouseLeave',
+    ON_SEARCH = 'onSearch',
+    AFTER_ON_NODE_MOUSE_MOVE = 'afterOnNodeMouseMove',
+    AFTER_ON_RESIZE = 'afterOnResize',
+    ON_ROOTNODE_DRAG_OVER = 'onRootNodeDragOver',
+    ON_ROOTNODE_DRAG_END = 'onRootNodeDragEnd',
+    ON_ROOTNODE_DRAG_OVER_CAPTURE = 'onRootNodeDragOverCapture',
+    ON_ROOTNODE_DROP = 'onRootNodeDrop',
+    AFTER_ON_NODE_DRAG_OVER = 'afterOnNodeDragOver',
+    BEFORE_COPY = 'beforeCopy',
+    BEFORE_CUT = 'beforeCut',
+}
+
+export interface HookBaseArgs {
+    stopImmediatePropagation: () => void;
+}
+
+export interface BlockDomInfo {
+    blockId: string;
+    dom: HTMLElement;
+    type: BlockFlavorKeys;
+    rect: DOMRect;
+    rootRect: DOMRect;
+    properties: Record<string, unknown>;
+}
+
+// Editor's various callbacks, used in Editor
+export interface HooksRunner {
+    init: () => void;
+    render: () => void;
+    onRootNodeKeyUp: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+    onRootNodeKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+    onRootNodeKeyDownCapture: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+    onRootNodeMouseDown: (
+        e: React.MouseEvent<HTMLDivElement, MouseEvent>
+    ) => void;
+    onRootNodeMouseMove: (
+        e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+        root_rect: DOMRect
+    ) => void;
+    onRootNodeMouseUp: (
+        e: React.MouseEvent<HTMLDivElement, MouseEvent>
+    ) => void;
+    onRootNodeMouseOut: (
+        e: React.MouseEvent<HTMLDivElement, MouseEvent>
+    ) => void;
+    onRootNodeMouseLeave: (
+        e: React.MouseEvent<HTMLDivElement, MouseEvent>
+    ) => void;
+    onSearch: () => void;
+    afterOnNodeMouseMove: (
+        e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+        node: BlockDomInfo
+    ) => void;
+    afterOnResize: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onRootNodeDragOver: (
+        e: React.DragEvent<Element>,
+        root_rect: DOMRect
+    ) => void;
+    onRootNodeDragEnd: (
+        e: React.DragEvent<Element>,
+        root_rect: DOMRect
+    ) => void;
+    onRootNodeDrop: (e: React.DragEvent<Element>) => void;
+    afterOnNodeDragOver: (
+        e: React.DragEvent<Element>,
+        node: BlockDomInfo
+    ) => void;
+    beforeCopy: (e: ClipboardEvent) => void;
+    beforeCut: (e: ClipboardEvent) => void;
+}
+
+export type AnyFunction = (...args: any[]) => any;
+export type AnyThisType = ThisParameterType<any>;
+
+// hook管理，在editor、plugin中使用
+export interface PluginHooks {
+    // 执行多次
+    addHook: (
+        key: HookType,
+        callback: AnyFunction,
+        thisObj?: AnyThisType,
+        once?: boolean
+    ) => void;
+    // 执行一次
+    addOnceHook: (
+        key: HookType,
+        callback: AnyFunction,
+        thisObj?: AnyThisType
+    ) => void;
+    // 移除
+    removeHook: (key: HookType, callback: AnyFunction) => void;
+}
+export * from './drag-drop/types';
diff --git a/libs/components/editor-core/src/editor/views/base-view.ts b/libs/components/editor-core/src/editor/views/base-view.ts
new file mode 100644
index 000000000..85346660c
--- /dev/null
+++ b/libs/components/editor-core/src/editor/views/base-view.ts
@@ -0,0 +1,193 @@
+import { ComponentType, ReactElement } from 'react';
+
+import type {
+    Column,
+    DefaultColumnsValue,
+} from '@toeverything/datasource/db-service';
+import {
+    ArrayOperation,
+    BlockDecoration,
+    MapOperation,
+} from '@toeverything/datasource/jwt';
+import type { EventData } from '../block';
+import { AsyncBlock } from '../block';
+import type { Editor } from '../editor';
+import { cloneDeep } from '@toeverything/utils';
+import { SelectBlock } from '../selection';
+
+export interface CreateView {
+    block: AsyncBlock;
+    editor: Editor;
+    editorElement: () => JSX.Element;
+    /**
+     * @deprecated Use recast table instead
+     */
+    columns: Column[];
+    /**
+     * @deprecated Use recast table instead
+     */
+    columnsFromId: string;
+    scene: 'page' | 'kanban' | 'table' | 'whiteboard';
+}
+
+export interface ChildrenView extends CreateView {
+    children: ReactElement;
+}
+
+export abstract class BaseView {
+    abstract type: string;
+
+    /**
+     * activatable means can be focused
+     * @memberof BaseView
+     */
+    public activatable = true;
+
+    public selectable = true;
+
+    /**
+     *
+     * layout only means the block is only used as structured block
+     * @memberof BaseView
+     */
+    public layoutOnly = false;
+
+    /**
+     * Whether to display the widget below the block
+     * @deprecated pending further evaluation, use with caution
+     */
+    public allowPendant = true;
+
+    abstract View: ComponentType<CreateView>;
+
+    ChildrenView: ComponentType<ChildrenView>;
+
+    /** Life Cycle */
+
+    // If it returns null, it means the creation failed
+    async onCreate(block: AsyncBlock): Promise<AsyncBlock | null> {
+        return block;
+    }
+
+    // when the data is updated, call
+    async onUpdate(event: EventData): Promise<void> {
+        return;
+    }
+
+    /**
+     * Called when a child node is deleted
+     */
+    async onDeleteChild(block: AsyncBlock): Promise<boolean> {
+        return true;
+    }
+
+    onExport(content: MapOperation<any>): string {
+        try {
+            return JSON.stringify((content as any)['toJSON']());
+            // eslint-disable-next-line no-empty
+        } catch (e) {
+            return '';
+        }
+    }
+
+    onMetadata(
+        content: MapOperation<any>
+    ): Array<[string, number | string | string[]]> {
+        return [];
+    }
+
+    onTagging(content: MapOperation<any>): string[] {
+        return [];
+    }
+
+    protected get_decoration<T>(
+        content: MapOperation<ArrayOperation<any>>,
+        name: string
+    ): T | undefined {
+        return content
+            .get('decoration')
+            ?.asArray<BlockDecoration>()
+            ?.find<BlockDecoration>(obj => obj.key === name)?.value as T;
+    }
+
+    /** Component utility function */
+
+    // Whether the component is empty
+    isEmpty(block: AsyncBlock): boolean {
+        const text = block.getProperty('text');
+        return !text?.value?.[0]?.text;
+    }
+
+    getSelProperties(block: AsyncBlock, selectInfo: any): DefaultColumnsValue {
+        return cloneDeep(block.getProperties());
+    }
+
+    html2block(el: Element, parseEl: (el: Element) => any[]): any[] | null {
+        return null;
+    }
+
+    async block2html(
+        block: AsyncBlock,
+        children: SelectBlock[],
+        generateHtml: (el: any[]) => Promise<string>
+    ): Promise<string> {
+        return '';
+    }
+}
+
+export const getTextProperties = (
+    properties: DefaultColumnsValue,
+    selectInfo: any
+) => {
+    let text_value = properties.text.value;
+    if (text_value.length === 0) {
+        return properties;
+    }
+    if (selectInfo.endInfo) {
+        text_value = text_value.slice(0, selectInfo.endInfo.arrayIndex + 1);
+        text_value[text_value.length - 1].text = text_value[
+            text_value.length - 1
+        ].text.substring(0, selectInfo.endInfo.offset);
+    }
+    if (selectInfo.startInfo) {
+        text_value = text_value.slice(selectInfo.startInfo.arrayIndex);
+        text_value[0].text = text_value[0].text.substring(
+            selectInfo.startInfo.offset
+        );
+    }
+    properties.text.value = text_value;
+    return properties;
+};
+
+export const getTextHtml = (block: AsyncBlock) => {
+    const generate = (textList: any[]) => {
+        let content = '';
+        textList.forEach(text_obj => {
+            let text = text_obj.text || '';
+            if (text_obj.bold) {
+                text = `<strong>${text}</strong>`;
+            }
+            if (text_obj.italic) {
+                text = `<em>${text}</em>`;
+            }
+            if (text_obj.underline) {
+                text = `<u>${text}</u>`;
+            }
+            if (text_obj.inlinecode) {
+                text = `<code>${text}</code>`;
+            }
+            if (text_obj.strikethrough) {
+                text = `<s>${text}</s>`;
+            }
+            if (text_obj.type === 'link') {
+                text = `<a href='${text_obj.url}'>${generate(
+                    text_obj.children
+                )}</a>`;
+            }
+            content += text;
+        });
+        return content;
+    };
+    const text_list: any[] = block.getProperty('text').value;
+    return generate(text_list);
+};
diff --git a/libs/components/editor-core/src/hooks.ts b/libs/components/editor-core/src/hooks.ts
new file mode 100644
index 000000000..82fd13773
--- /dev/null
+++ b/libs/components/editor-core/src/hooks.ts
@@ -0,0 +1,204 @@
+import {
+    AsyncBlock,
+    SelectEventTypes,
+    SelectionInfo,
+    SelectionSettingsMap,
+} from './editor';
+import { noop, Point } from '@toeverything/utils';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { RootContext } from './contexts';
+
+function useRequestReRender() {
+    const [, setUpdateCounter] = useState(0);
+    const animationFrameRef = useRef<number | null>(null);
+
+    const requestReRender = useCallback((immediate = false) => {
+        if (animationFrameRef.current && !immediate) {
+            return;
+        }
+
+        if (!immediate) {
+            animationFrameRef.current = requestAnimationFrame(() => {
+                setUpdateCounter(state => state + 1);
+                animationFrameRef.current = null;
+            });
+            return;
+        }
+
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = null;
+        }
+
+        setUpdateCounter(state => state + 1);
+    }, []);
+
+    useEffect(() => {
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = null;
+        }
+    });
+
+    useEffect(
+        () => () => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        },
+        []
+    );
+
+    return requestReRender;
+}
+
+export const useBlock = (blockId: string) => {
+    const [block, setBlock] = useState<AsyncBlock>();
+    const requestReRender = useRequestReRender();
+    const { editor } = useContext(RootContext);
+    useEffect(() => {
+        if (!blockId) {
+            return undefined;
+        }
+        let valid = true;
+        let offUpdate = noop;
+        editor.getBlockById(blockId).then(node => {
+            if (!valid) {
+                return;
+            }
+            if (!node) {
+                console.warn('Failed to get block by id', blockId);
+                return undefined;
+            }
+            setBlock(node);
+            offUpdate = node.onUpdate(() => {
+                requestReRender();
+            });
+        });
+
+        return () => {
+            valid = false;
+            offUpdate();
+        };
+    }, [blockId, editor, requestReRender]);
+
+    return { block };
+};
+
+/**
+ *
+ * hooks run when block node selected as a block
+ * @export
+ */
+export const useOnSelect = (
+    blockId: string,
+    cb: (isSelect: boolean) => void
+) => {
+    const { editor } = useContext(RootContext);
+    useEffect(() => {
+        editor.selectionManager.observe(blockId, SelectEventTypes.onSelect, cb);
+        return () => {
+            editor.selectionManager.unobserve(
+                blockId,
+                SelectEventTypes.onSelect,
+                cb
+            );
+        };
+    }, [cb, blockId, editor]);
+};
+
+/**
+ *
+ * hooks run when block was set focused by selection manager
+ * @export
+ */
+export const useOnSelectActive = (
+    blockId: string,
+    cb: (position: Point | undefined) => void
+) => {
+    const { editor } = useContext(RootContext);
+    useEffect(() => {
+        editor.selectionManager.observe(blockId, SelectEventTypes.active, cb);
+        return () => {
+            editor.selectionManager.unobserve(
+                blockId,
+                SelectEventTypes.active,
+                cb
+            );
+        };
+    }, [cb, blockId, editor]);
+};
+
+/**
+ *
+ * hooks run when block was set range by selection manager
+ * @export
+ */
+export const useOnSelectSetSelection = <T extends keyof SelectionSettingsMap>(
+    blockId: string,
+    cb: (args: SelectionSettingsMap[T]) => void
+) => {
+    const { editor } = useContext(RootContext);
+    useEffect(() => {
+        editor.selectionManager.observe(
+            blockId,
+            SelectEventTypes.setSelection,
+            cb
+        );
+        return () => {
+            editor.selectionManager.unobserve(
+                blockId,
+                SelectEventTypes.setSelection,
+                cb
+            );
+        };
+    }, [cb, blockId, editor]);
+};
+
+/**
+ *
+ * hooks run when selection type or range is changed
+ * @export
+ */
+export const useOnSelectChange = (cb: (info: SelectionInfo) => void) => {
+    const { editor } = useContext(RootContext);
+    useEffect(() => {
+        editor.selectionManager.onSelectionChange(cb);
+        return () => {
+            editor.selectionManager.unBindSelectionChange(cb);
+        };
+    }, [editor, cb]);
+};
+
+/**
+ *
+ * hooks run when select end (based on mouse up)
+ * @export
+ */
+export const useOnSelectEnd = (cb: (info: SelectionInfo) => void) => {
+    const { editor } = useContext(RootContext);
+    useEffect(() => {
+        editor.selectionManager.onSelectEnd(cb);
+        return () => {
+            editor.selectionManager.onSelectEnd(cb);
+        };
+    }, [editor, cb]);
+};
+
+/**
+ *
+ * hooks run when select range start with the block node
+ * @export
+ */
+export const useOnSelectStartWith = (
+    blockId: string,
+    cb: (args: MouseEvent) => void
+) => {
+    const { editor } = useContext(RootContext);
+    useEffect(() => {
+        editor.mouseManager.onSelectStartWith(blockId, cb);
+        return () => {
+            editor.mouseManager.offSelectStartWith(blockId, cb);
+        };
+    }, [editor, cb, blockId]);
+};
diff --git a/libs/components/editor-core/src/index.ts b/libs/components/editor-core/src/index.ts
new file mode 100644
index 000000000..64939c065
--- /dev/null
+++ b/libs/components/editor-core/src/index.ts
@@ -0,0 +1,21 @@
+export { ColumnsContext, RootContext } from './contexts';
+export { RenderRoot, MIN_PAGE_WIDTH } from './RenderRoot';
+export * from './render-block';
+export * from './hooks';
+
+export { RenderBlock } from './render-block';
+
+export * from './recast-block';
+export * from './recast-block/types';
+
+export * from './block-pendant';
+
+export * from './kanban';
+export * from './kanban/types';
+
+export * from './utils';
+
+export * from './drag-drop-wrapper';
+export * from './block-content-wrapper';
+
+export * from './editor';
diff --git a/libs/components/editor-core/src/kanban/Context.tsx b/libs/components/editor-core/src/kanban/Context.tsx
new file mode 100644
index 000000000..12cc0db2f
--- /dev/null
+++ b/libs/components/editor-core/src/kanban/Context.tsx
@@ -0,0 +1,75 @@
+import { genErrorObj } from '@toeverything/utils';
+import {
+    ComponentType,
+    createContext,
+    ReactElement,
+    type ReactNode,
+} from 'react';
+import {
+    RecastBlock,
+    RecastMetaProperty,
+    RecastPropertyId,
+} from '../recast-block/types';
+import { useInitKanbanEffect, useRecastKanban } from './kanban';
+import { KanbanGroup } from './types';
+
+type KanbanState = {
+    groupBy: RecastMetaProperty;
+    kanban: KanbanGroup[];
+    recastBlock: RecastBlock;
+    setGroupBy: (id: RecastPropertyId) => Promise<void>;
+};
+
+export const KanbanContext = createContext<KanbanState>(
+    genErrorObj(
+        'Failed to get KanbanContext! Please use the hook under `KanbanProvider`.'
+        // Just for type cast
+    ) as KanbanState
+);
+
+/**
+ * Provide the kanban context to the children.
+ *
+ * The Provider has effect to init the groupBy property.
+ */
+export const KanbanProvider = ({
+    fallback,
+    children,
+}: {
+    fallback: ReactElement;
+    children: ReactNode;
+}): JSX.Element => {
+    const [loading, groupBy] = useInitKanbanEffect();
+    const { kanban, setGroupBy, recastBlock } = useRecastKanban();
+
+    if (loading || !kanban.length) {
+        return fallback;
+    }
+
+    const value = {
+        groupBy,
+        kanban,
+        setGroupBy,
+        recastBlock,
+    };
+
+    return (
+        <KanbanContext.Provider value={value}>
+            {children}
+        </KanbanContext.Provider>
+    );
+};
+
+/**
+ * Wrap your component with {@link KanbanProvider} to get access to the recast block state
+ * @public
+ */
+export const withKanban =
+    <T,>(Component: ComponentType<T>): ComponentType<T> =>
+    (props: T) => {
+        return (
+            <KanbanProvider fallback={<div>Loading</div>}>
+                <Component {...props} />
+            </KanbanProvider>
+        );
+    };
diff --git a/libs/components/editor-core/src/kanban/atom.ts b/libs/components/editor-core/src/kanban/atom.ts
new file mode 100644
index 000000000..b903e2d92
--- /dev/null
+++ b/libs/components/editor-core/src/kanban/atom.ts
@@ -0,0 +1,223 @@
+import { Protocol } from '@toeverything/datasource/db-service';
+import { AsyncBlock } from '../editor';
+import { getRecastItemValue } from '../recast-block/property';
+import type { RecastBlock, RecastItem } from '../recast-block/types';
+import {
+    PropertyType,
+    RecastBlockValue,
+    RecastMetaProperty,
+    RecastPropertyId,
+} from '../recast-block/types';
+import type { DefaultGroup, KanbanGroup } from './types';
+import { DEFAULT_GROUP_ID } from './types';
+
+/**
+ * - If the `groupBy` is `SelectProperty` or `MultiSelectProperty`, return `(Multi)SelectProperty.options`.
+ * - If the `groupBy` is `TextProperty` or `DateProperty`, return all values of the recastBlock's children
+ */
+export const getGroupOptions = async (
+    groupBy: RecastMetaProperty,
+    recastBlock: RecastBlock
+): Promise<KanbanGroup[]> => {
+    if (!groupBy) {
+        return [];
+    }
+    switch (groupBy.type) {
+        case PropertyType.Select:
+        case PropertyType.MultiSelect: {
+            return groupBy.options.map(option => ({
+                ...option,
+                type: groupBy.type,
+                items: [],
+            }));
+        }
+        case PropertyType.Text: {
+            // const children = await recastBlock.children();
+            // TODO: support group by text, need group children value
+            return []; // WIP! Just a placeholder
+        }
+        default: {
+            throw new Error(
+                // Safe cast for future compatible
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                `Not support group by type "${(groupBy as any).type}"`
+            );
+        }
+    }
+};
+
+const isValueBelongOption = (
+    propertyValue: RecastBlockValue,
+    option: KanbanGroup
+) => {
+    switch (propertyValue.type) {
+        case PropertyType.Select: {
+            return propertyValue.value === option.id;
+        }
+        case PropertyType.MultiSelect: {
+            return propertyValue.value.some(i => i === option.id);
+        }
+        // case PropertyType.Text: {
+        // TOTODO:DO support this type
+        // }
+        default: {
+            console.error(propertyValue, option);
+            throw new Error('Not support group by type');
+        }
+    }
+};
+
+/**
+ * Calculate the group that the card belongs to
+ */
+export const calcCardGroup = (
+    card: RecastItem,
+    groupBy: RecastMetaProperty,
+    groupOptions: KanbanGroup[],
+    defaultGroup: KanbanGroup
+) => {
+    const { getValue } = getRecastItemValue(card);
+    const propertyValue = getValue(groupBy.id);
+    if (!propertyValue || propertyValue.type !== groupBy.type) {
+        // No properties, maybe not have be initialized
+        // Belong to default group
+        return defaultGroup;
+    }
+    const target = groupOptions.find(option =>
+        isValueBelongOption(propertyValue, option)
+    );
+    if (target) {
+        return target;
+    }
+    // Belong to default group
+    return defaultGroup;
+};
+
+/**
+ * Set group value for the card block
+ */
+export const moveCardToGroup = async (
+    groupById: RecastPropertyId,
+    cardBlock: RecastItem,
+    group: KanbanGroup
+) => {
+    const { setValue, removeValue } = getRecastItemValue(cardBlock);
+    let success = false;
+    if (group.id === DEFAULT_GROUP_ID) {
+        success = await removeValue(groupById);
+        return false;
+    }
+    switch (group.type) {
+        case PropertyType.Select: {
+            success = await setValue({
+                id: groupById,
+                type: group.type,
+                value: group.id,
+            });
+            break;
+        }
+        case PropertyType.MultiSelect: {
+            success = await setValue({
+                id: groupById,
+                type: group.type,
+                value: [group.id],
+            });
+            break;
+        }
+        case PropertyType.Text: {
+            success = await setValue({
+                id: groupById,
+                type: group.type,
+                value: group.id,
+            });
+            break;
+        }
+        default:
+            console.error('group', group, 'block', cardBlock);
+            throw new Error('Not support move card to group');
+    }
+    return success;
+};
+
+export const moveCardToBefore = async (
+    targetBlock: RecastItem,
+    nextBlock: RecastItem
+) => {
+    if (targetBlock.id === nextBlock.id) return;
+    await targetBlock.remove();
+    await nextBlock.before(targetBlock as unknown as AsyncBlock);
+};
+
+export const moveCardToAfter = async (
+    targetBlock: RecastItem,
+    previousBlock: RecastItem
+) => {
+    if (targetBlock.id === previousBlock.id) return;
+    await targetBlock.remove();
+    await previousBlock.after(targetBlock as unknown as AsyncBlock);
+};
+
+/**
+ * Similar to {@link calcCardGroup}, but only find card from the existed group
+ */
+export const getCardGroup = (card: RecastItem, kanban: KanbanGroup[]) => {
+    for (let i = 0; i < kanban.length; i++) {
+        const kanbanGroup = kanban[i];
+        for (let j = 0; j < kanbanGroup.items.length; j++) {
+            const kanbanCard = kanbanGroup.items[j];
+            if (kanbanCard.id === card.id) {
+                return [kanbanGroup, j] as const;
+            }
+        }
+    }
+
+    console.error('kanban', kanban, 'card', card);
+    throw new Error('Failed to find the group containing the card!');
+};
+
+/**
+ * Is the group is the default group.
+ *
+ * - the default group has unique id
+ * - the default group can not be renamed/deleted
+ */
+export const checkIsDefaultGroup = (
+    group: KanbanGroup
+): group is DefaultGroup => group.id === DEFAULT_GROUP_ID;
+
+export const genDefaultGroup = (groupBy: RecastMetaProperty): DefaultGroup => ({
+    id: DEFAULT_GROUP_ID,
+    type: DEFAULT_GROUP_ID,
+    name: `No ${groupBy.name}`,
+    color: '#4324B9',
+    background: '#E3DEFF',
+    items: [],
+});
+
+export const DEFAULT_GROUP_BY_PROPERTY = {
+    name: 'Status',
+    options: [
+        { name: 'No Started', color: '#E53535', background: '#FFCECE' },
+        { name: 'In Progress', color: '#A77F1A', background: '#FFF5AB' },
+        { name: 'Complete', color: '#3C8867', background: '#C5FBE0' },
+    ],
+};
+
+/**
+ * Unwrap blocks from the grid recursively.
+ *
+ * If the node is not a grid node, return as is and wrap with a array
+ */
+export const unwrapGrid = async (node: AsyncBlock): Promise<AsyncBlock[]> => {
+    if (
+        node.type === Protocol.Block.Type.grid ||
+        node.type === Protocol.Block.Type.gridItem
+    ) {
+        const children = await node.children();
+        return (
+            await Promise.all(children.map(child => unwrapGrid(child)))
+        ).flat();
+    }
+
+    return [node];
+};
diff --git a/libs/components/editor-core/src/kanban/group.ts b/libs/components/editor-core/src/kanban/group.ts
new file mode 100644
index 000000000..0297946d8
--- /dev/null
+++ b/libs/components/editor-core/src/kanban/group.ts
@@ -0,0 +1,103 @@
+import { useSelectProperty } from '../recast-block/property';
+import { PropertyType, RecastMetaProperty } from '../recast-block/types';
+import { checkIsDefaultGroup } from './atom';
+import { KanbanGroup } from './types';
+
+export const useKanbanGroup = (groupBy: RecastMetaProperty) => {
+    const { updateSelect } = useSelectProperty();
+
+    switch (groupBy.type) {
+        case PropertyType.MultiSelect:
+        case PropertyType.Select: {
+            const {
+                addSelectOptions,
+                renameSelectOptions,
+                hasSelectOptions,
+                removeSelectOptions,
+            } = updateSelect(groupBy);
+
+            const addGroup = async (name: string) => {
+                if (!name) {
+                    throw new Error(
+                        'Failed to add new group! Group Name can not be empty'
+                    );
+                }
+                if (hasSelectOptions(name)) {
+                    throw new Error(
+                        `Failed to add new group! Group name can not be repeated. name: ${name}`
+                    );
+                }
+                return await addSelectOptions({ name });
+            };
+
+            const renameGroup = async (group: KanbanGroup, name: string) => {
+                if (checkIsDefaultGroup(group)) {
+                    console.error('Cannot rename default group', group);
+                    return undefined;
+                }
+                if (groupBy.type !== group.type) {
+                    console.error('groupBy:', groupBy, 'group:', group);
+                    throw new Error(
+                        `Inconsistent group type, groupBy: ${groupBy.type} group: ${group.type}`
+                    );
+                }
+                if (!name) {
+                    throw new Error(
+                        'Failed to add rename group! Group Name can not be empty'
+                    );
+                }
+                if (hasSelectOptions(name)) {
+                    throw new Error(
+                        `Failed to rename group! Group name can not be repeated. name: ${name}`
+                    );
+                }
+
+                return await renameSelectOptions({ ...group, name });
+            };
+
+            const removeGroup = async (group: KanbanGroup) => {
+                if (checkIsDefaultGroup(group)) {
+                    console.error('Cannot remove default group', group);
+                    return;
+                }
+                if (groupBy.type !== group.type) {
+                    console.error('groupBy:', groupBy, 'group:', group);
+                    throw new Error(
+                        `Inconsistent group type, groupBy: ${groupBy.type} group: ${group.type}`
+                    );
+                }
+                await removeSelectOptions(group.id);
+            };
+
+            return {
+                addGroup,
+                renameGroup,
+                removeGroup,
+                checkIsDefaultGroup,
+            };
+        }
+
+        case PropertyType.Text: {
+            const addGroup = async (name: string) => {
+                throw new Error('TODO');
+            };
+            const renameGroup = async (group: KanbanGroup, name: string) => {
+                throw new Error('TODO');
+            };
+            const removeGroup = async (group: KanbanGroup) => {
+                throw new Error('TODO');
+            };
+            return {
+                addGroup,
+                renameGroup,
+                removeGroup,
+                checkIsDefaultGroup,
+            };
+        }
+        // TODO: support other types
+
+        default: {
+            throw new Error(`Unsupported group type: ${groupBy.type}`);
+        }
+    }
+};
diff --git a/libs/components/editor-core/src/kanban/index.ts b/libs/components/editor-core/src/kanban/index.ts
new file mode 100644
index 000000000..e1044b42d
--- /dev/null
+++ b/libs/components/editor-core/src/kanban/index.ts
@@ -0,0 +1,2 @@
+export { useKanban, useRecastKanbanGroupBy } from './kanban';
+export { KanbanProvider, withKanban } from './Context';
diff --git a/libs/components/editor-core/src/kanban/kanban.ts b/libs/components/editor-core/src/kanban/kanban.ts
new file mode 100644
index 000000000..096a5239d
--- /dev/null
+++ b/libs/components/editor-core/src/kanban/kanban.ts
@@ -0,0 +1,339 @@
+import { Protocol } from '@toeverything/datasource/db-service';
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { useEditor } from '../contexts';
+import { AsyncBlock } from '../editor';
+import { useRecastBlock } from '../recast-block/Context';
+import {
+    useRecastBlockMeta,
+    useSelectProperty,
+} from '../recast-block/property';
+import type { RecastItem } from '../recast-block/types';
+import {
+    KANBAN_PROPERTIES_KEY,
+    PropertyType,
+    RecastMetaProperty,
+    RecastPropertyId,
+} from '../recast-block/types';
+import { supportChildren } from '../utils';
+import {
+    calcCardGroup,
+    DEFAULT_GROUP_BY_PROPERTY,
+    genDefaultGroup,
+    getCardGroup,
+    getGroupOptions,
+    moveCardToAfter,
+    moveCardToBefore,
+    moveCardToGroup,
+    unwrapGrid,
+} from './atom';
+import { KanbanContext } from './Context';
+import { useKanbanGroup } from './group';
+import { KanbanCard, KanbanGroup } from './types';
+
+/**
+ * Get the recast kanban groupBy property and set groupBy
+ *
+ * Only works with kanban view
+ *
+ * Get the multidimensional block kanban groupBy attribute
+ * @public
+ */
+export const useRecastKanbanGroupBy = () => {
+    const recastBlock = useRecastBlock();
+    const { getProperty, getProperties } = useRecastBlockMeta();
+    const kanbanProperties = recastBlock.getProperty(KANBAN_PROPERTIES_KEY);
+
+    // TODO: remove filter
+    // Add other type groupBy support
+    const supportedGroupBy = getProperties().filter(
+        prop =>
+            prop.type === PropertyType.Select ||
+            prop.type === PropertyType.MultiSelect
+    );
+
+    const setGroupBy = useCallback(
+        async (id: RecastPropertyId) => {
+            const ok = await recastBlock.setProperty(KANBAN_PROPERTIES_KEY, {
+                ...kanbanProperties,
+                groupBy: id,
+            });
+            if (!ok) {
+                throw new Error('Failed to set groupBy');
+            }
+        },
+        [recastBlock, kanbanProperties]
+    );
+
+    const groupById = kanbanProperties?.groupBy;
+    // 1. groupBy is not set
+    if (!groupById) {
+        return {
+            setGroupBy,
+            supportedGroupBy,
+        };
+    }
+    // 2. groupBy has been set, but not the detail found for the groupBy
+    const groupByProperty = getProperty(groupById);
+    if (!groupByProperty) {
+        return {
+            setGroupBy,
+            supportedGroupBy,
+        };
+    }
+
+    // 3. groupBy has been set and the detail found
+    // but the type of the groupBy is not supported currently
+    // TODO: support other property type
+    if (
+        groupByProperty.type !== PropertyType.Select &&
+        groupByProperty.type !== PropertyType.MultiSelect
+    ) {
+        console.warn('Not support groupBy type', groupByProperty);
+
+        return {
+            setGroupBy,
+            supportedGroupBy,
+        };
+    }
+    // TODO: remove the type cast after support all property type
+    const groupBy = groupByProperty as RecastMetaProperty;
+    // TODO: end remove this
+
+    return {
+        groupBy,
+        supportedGroupBy,
+        setGroupBy,
+    };
+};
+
+/**
+ * Init kanban groupBy property if not set
+ * Effect to set groupBy property
+ */
+export const useInitKanbanEffect = ():
+    | readonly [loading: true, groupBy: null]
+    | readonly [loading: false, groupBy: RecastMetaProperty] => {
+    const { groupBy, setGroupBy, supportedGroupBy } = useRecastKanbanGroupBy();
+    const { getProperties } = useRecastBlockMeta();
+    const { createSelect } = useSelectProperty();
+
+    useEffect(() => {
+        const initKanban = async () => {
+            // 1. has group by
+            // do nothing
+            if (groupBy) {
+                return;
+            }
+            // 2. no group by, but has properties exist
+            // set the first supported property as group by
+            if (supportedGroupBy.length) {
+                await setGroupBy(supportedGroupBy[0].id);
+                return;
+            }
+            // 3. no group by, no properties
+            // create a new property and set it as group by
+            const prop = await createSelect(DEFAULT_GROUP_BY_PROPERTY);
+            await setGroupBy(prop.id);
+        };
+
+        initKanban();
+    }, [createSelect, getProperties, groupBy, setGroupBy, supportedGroupBy]);
+
+    if (groupBy) {
+        return [false, groupBy] as const;
+    }
+    return [true, null] as const;
+};
+
+/**
+ * Get the recast kanban group.
+ *
+ * If not need kanban cards, use {@link useRecastKanbanGroupBy} instead.
+ * @private
+ */
+export const useRecastKanban = () => {
+    const recastBlock = useRecastBlock();
+    const { groupBy, setGroupBy } = useRecastKanbanGroupBy();
+    const { editor } = useEditor();
+    const [kanban, setKanban] = useState<KanbanGroup[]>([]);
+
+    useEffect(() => {
+        const getGroupCards = async () => {
+            if (!groupBy) {
+                return;
+            }
+
+            const defaultGroup = genDefaultGroup(groupBy);
+            const groupOptions = await getGroupOptions(groupBy, recastBlock);
+            // Init group map
+            const kanbanMap: Record<string, KanbanGroup> = Object.fromEntries([
+                // Default group
+                [defaultGroup.id, defaultGroup],
+                // Groups from options
+                ...groupOptions.map(option => [option.id, option]),
+            ]);
+
+            const children = (await recastBlock.children()).filter(
+                Boolean
+                // Safe type cast because of the filter guarantee
+            ) as AsyncBlock[];
+
+            const unwrapGridChildren = (
+                await Promise.all(children.map(child => unwrapGrid(child)))
+            ).flat();
+
+            // Just for type cast
+            // It's safe because of the implementation of RecastItem is AsyncBlock
+            const recastItems = unwrapGridChildren as unknown as RecastItem[];
+
+            recastItems.forEach(child => {
+                const card: KanbanCard = {
+                    id: child.id,
+                    block: child,
+                    moveTo: async (
+                        id: KanbanGroup['id'],
+                        beforeBlock: string | null,
+                        afterBlock: string | null
+                    ) => {
+                        await moveCardToGroup(groupBy.id, child, kanbanMap[id]);
+                        if (beforeBlock) {
+                            const block = await editor.getBlockById(
+                                beforeBlock
+                            );
+                            if (!block) {
+                                throw new Error(
+                                    `Failed to move card! card id ${id} not found`
+                                );
+                            }
+                            await moveCardToAfter(
+                                child,
+                                block as unknown as RecastItem
+                            );
+                        } else if (afterBlock) {
+                            const block = await editor.getBlockById(afterBlock);
+                            if (!block) {
+                                throw new Error(
+                                    `Failed to move card! card id ${id} not found`
+                                );
+                            }
+                            await moveCardToBefore(
+                                child,
+                                block as unknown as RecastItem
+                            );
+                        }
+                    },
+                };
+                const group = calcCardGroup(
+                    child,
+                    groupBy,
+                    groupOptions,
+                    defaultGroup
+                );
+                kanbanMap[group.id].items.push(card);
+            });
+            setKanban(Object.values(kanbanMap));
+        };
+        getGroupCards();
+        // Workaround: Add the extra `recastBlock.lastUpdated` as dependencies for the `recastBlock` can not update reference
+    }, [editor, groupBy, recastBlock, recastBlock.lastUpdated]);
+
+    return {
+        recastBlock,
+        kanban,
+        setGroupBy,
+    };
+};
+
+/**
+ * Get the kanban API.
+ *
+ * Please make sure the {@link KanbanProvider} is set before use.
+ *
+ * @example
+ * ```ts
+ * const { kanban, groupBy, setGroupBy, addGroup } = useKanban();
+ *
+ * await addGroup('new group');
+ * await moveCard(card, newGroup, 0);
+ * ```
+ */
+export const useKanban = () => {
+    const { groupBy, kanban, recastBlock } = useContext(KanbanContext);
+    const groupOp = useKanbanGroup(groupBy);
+    const { editor } = useEditor();
+
+    /**
+     * Move a card to a group.
+     */
+    const moveCard = useCallback(
+        async (
+            targetCard: RecastItem,
+            targetGroup: KanbanGroup | null,
+            idx?: number
+        ) => {
+            targetCard = targetCard as unknown as RecastItem;
+            const [nowGroup] = getCardGroup(targetCard, kanban);
+            // 1. Move to the target group
+            if (!targetGroup) {
+                // 1.1 Target group is not specified, just set the nowGroup as the targetGroup
+                targetGroup = nowGroup;
+            }
+            if (nowGroup.id !== targetGroup.id) {
+                // 1.2 Move to the target group
+                await moveCardToGroup(groupBy.id, targetCard, targetGroup);
+            }
+
+            // 2. Reorder the card
+            if (!targetGroup.items.length) {
+                // 2.1 If target group is empty, no need to reorder
+                return;
+            }
+            if (typeof idx !== 'number') {
+                // 2.2 idx is not specified, do nothing
+                return;
+            }
+
+            if (idx === 0) {
+                await moveCardToBefore(targetCard, nowGroup.items[0].block);
+                return;
+            }
+            if (idx > nowGroup.items.length) {
+                idx = nowGroup.items.length;
+            }
+            const previousBlock = nowGroup.items[idx - 1].block;
+            await moveCardToAfter(targetCard, previousBlock);
+        },
+        [groupBy, kanban]
+    );
+
+    const addCard = useCallback(
+        async (group: KanbanGroup) => {
+            const newBlock = await editor.createBlock(Protocol.Block.Type.text);
+            if (!newBlock) {
+                throw new Error('Failed to create new block!');
+            }
+            recastBlock.append(newBlock);
+            const newCard = newBlock as unknown as RecastItem;
+            await moveCardToGroup(groupBy.id, newCard, group);
+        },
+        [editor, groupBy.id, recastBlock]
+    );
+
+    const addSubItem = useCallback(
+        async (card: RecastItem) => {
+            if (!supportChildren(card)) {
+                throw new Error('This card does not support children!');
+            }
+
+            const newBlock = await editor.createBlock(Protocol.Block.Type.text);
+            if (!newBlock) {
+                throw new Error('Failed to create new block!');
+            }
+            card.append(newBlock);
+            editor.selectionManager.activeNodeByNodeId(newBlock.id);
+        },
+        [editor]
+    );
+
+    return { kanban, groupBy, moveCard, addCard, addSubItem, ...groupOp };
+};
diff --git a/libs/components/editor-core/src/kanban/types.ts b/libs/components/editor-core/src/kanban/types.ts
new file mode 100644
index 000000000..c34371f2d
--- /dev/null
+++ b/libs/components/editor-core/src/kanban/types.ts
@@ -0,0 +1,57 @@
+import type { RecastItem } from '../recast-block/types';
+import { PropertyType, SelectOption } from '../recast-block/types';
+
+export const DEFAULT_GROUP_ID = '__EMPTY_GROUP';
+type DefaultGroupId = typeof DEFAULT_GROUP_ID;
+
+/**
+ * Block id
+ */
+type CardId = string;
+
+export type KanbanCard = {
+    id: CardId;
+    block: RecastItem;
+    /**
+     * Move the item to other group. (Set property to the block)
+     * @deprecated Use {@link useKanban().moveCard} instead
+     */
+    moveTo: (
+        id: KanbanGroup['id'],
+        beforeBlockId: string | null,
+        afterBlockId: string | null
+    ) => Promise<void>;
+    // moveToBefore: (id: CardId) => Promise<boolean>;
+    // moveToAfter: (id: CardId) => Promise<boolean>;
+};
+
+type KanbanGroupBase = {
+    /**
+     * Group name
+     */
+    name: string;
+    /**
+     * Block id list
+     */
+    items: KanbanCard[];
+};
+
+export type DefaultGroup = KanbanGroupBase & {
+    type: DefaultGroupId;
+    id: DefaultGroupId;
+    name: `No ${string}`;
+    color?: SelectOption['color'];
+    background?: SelectOption['background'];
+};
+
+type SelectGroup = KanbanGroupBase &
+    SelectOption & {
+        type: PropertyType.Select | PropertyType.MultiSelect;
+    };
+
+type TextGroup = KanbanGroupBase & {
+    type: PropertyType.Text;
+    id: string;
+};
+
+export type KanbanGroup = DefaultGroup | SelectGroup | TextGroup;
diff --git a/libs/components/editor-core/src/recast-block/Context.tsx b/libs/components/editor-core/src/recast-block/Context.tsx
new file mode 100644
index 000000000..a4efe72b9
--- /dev/null
+++ b/libs/components/editor-core/src/recast-block/Context.tsx
@@ -0,0 +1,74 @@
+import { Protocol } from '@toeverything/datasource/db-service';
+import { AsyncBlock } from '../editor';
+import { ComponentType, createContext, ReactNode, useContext } from 'react';
+import { RecastBlock } from './types';
+
+/**
+ * Determine whether the block supports RecastBlock
+ */
+export const isRecastBlock = (block: unknown): block is RecastBlock => {
+    if (!(block instanceof AsyncBlock)) {
+        return false;
+    }
+    return (
+        block.type === Protocol.Block.Type.page ||
+        block.type === Protocol.Block.Type.group
+    );
+};
+
+export const RecastBlockContext = createContext<RecastBlock | null>(null);
+
+export const RecastBlockProvider = ({
+    block,
+    children,
+}: {
+    block: AsyncBlock;
+    children: ReactNode;
+}) => {
+    if (!isRecastBlock(block)) {
+        throw new Error(
+            'RecastBlockProvider only works for page and group block'
+        );
+    }
+
+    return (
+        <RecastBlockContext.Provider value={block}>
+            {children}
+        </RecastBlockContext.Provider>
+    );
+};
+
+/**
+ * Get the root recast block
+ * @private
+ */
+export const useRecastBlock = () => {
+    const recastBlock = useContext(RecastBlockContext);
+    if (!recastBlock) {
+        throw new Error(
+            'Failed to find recastBlock! Please use the hook under `RecastTableProvider`.'
+        );
+    }
+    return recastBlock;
+};
+
+/**
+ * Wrap your component with {@link RecastBlockProvider} to get access to the recast block state
+ * @public
+ */
+export const withRecastBlock =
+    <T extends { block: AsyncBlock }>(
+        Component: ComponentType<T>
+    ): ComponentType<T> =>
+    props => {
+        return (
+            <RecastBlockProvider block={props.block}>
+                <Component {...props} />
+            </RecastBlockProvider>
+        );
+    };
+
+/**
+ * @deprecated Use {@link withRecastBlock} instead.
+ */
+export const withRecastTable = withRecastBlock;
diff --git a/libs/components/editor-core/src/recast-block/README.md b/libs/components/editor-core/src/recast-block/README.md
new file mode 100644
index 000000000..59aed91be
--- /dev/null
+++ b/libs/components/editor-core/src/recast-block/README.md
@@ -0,0 +1,70 @@
+# Recast Block
+
+# What's Recast block?
+
+A recast block is a block that can be recast into other forms, such as list, kanban, table, and so on.
+
+But now, we only have List and Kanban implementation.
+
+Every recast block has some Property also call it "Meta Data"
+
+# Usage
+
+**In most cases, you do not need to use recast block API directly.**
+
+## Context
+
+-   `RecastBlockProvider` and `withRecastBlock`
+
+```tsx
+const RecastComponent = () => {
+  return (
+    <RecastBlockProvider>
+      <SomeBlock />
+    </RecastBlockProvider>
+  );
+
+// or
+
+const RecastComponent = withRecastBlock(SomeBlock);
+```
+
+## Meta Data
+
+```tsx
+const SomeBlock = () => {
+    const {
+        // Get meta data
+        getProperty,
+        // Get all meta data
+        getProperties,
+        // Set meta data
+        addProperty,
+        // Update meta data
+        updateProperty,
+        // Remove meta data
+        removeProperty,
+    } = useRecastBlockMeta();
+
+    return <div>...</div>;
+};
+```
+
+## Scene
+
+**Notice: The scene API will refactor at next version.**
+
+```tsx
+const SomeBlock = () => {
+    const { scene, setScene, setPage, setTable, setKanban } =
+        useRecastBlockScene();
+
+    return (
+        <>
+            <div>Scene: {scene}</div>
+            <button onClick={setPage}>list</button>
+            <button onClick={setKanban}>kanban</button>
+        </>
+    );
+};
+```
diff --git a/libs/components/editor-core/src/recast-block/Scene.tsx b/libs/components/editor-core/src/recast-block/Scene.tsx
new file mode 100644
index 000000000..b10734732
--- /dev/null
+++ b/libs/components/editor-core/src/recast-block/Scene.tsx
@@ -0,0 +1,45 @@
+import { useCallback } from 'react';
+import { useRecastBlock } from './Context';
+import { RecastScene } from './types';
+
+/**
+ * Get the recast table state
+ *
+ * 获取/设置多维区块场景
+ * @public
+ */
+export const useRecastBlockScene = () => {
+    const groupBlock = useRecastBlock();
+    const DEFAULT_SCENE = RecastScene.Page;
+    let maybeScene = groupBlock.getProperty('scene');
+    // TODO remove this
+    // Backward compatible
+    if (maybeScene && typeof maybeScene !== 'string') {
+        groupBlock.setProperty('scene', DEFAULT_SCENE);
+        maybeScene = DEFAULT_SCENE;
+    }
+    // End of backward compatible
+    const scene = maybeScene ?? DEFAULT_SCENE;
+
+    const setScene = useCallback(
+        (scene: RecastScene) => {
+            return groupBlock.setProperty('scene', scene);
+        },
+        [groupBlock]
+    );
+
+    const setPage = useCallback(() => setScene(RecastScene.Page), [setScene]);
+    const setTable = useCallback(() => setScene(RecastScene.Table), [setScene]);
+    const setKanban = useCallback(
+        () => setScene(RecastScene.Kanban),
+        [setScene]
+    );
+
+    return {
+        scene,
+        setScene,
+        setPage,
+        setTable,
+        setKanban,
+    };
+};
diff --git a/libs/components/editor-core/src/recast-block/group.ts b/libs/components/editor-core/src/recast-block/group.ts
new file mode 100644
index 000000000..b8b25cce0
--- /dev/null
+++ b/libs/components/editor-core/src/recast-block/group.ts
@@ -0,0 +1,224 @@
+import { Protocol } from '@toeverything/datasource/db-service';
+import type { AsyncBlock, BlockEditor } from '../editor';
+import type { RecastBlock } from '.';
+import { cloneRecastMetaTo, mergeRecastMeta } from './property';
+
+const mergeGroupProperties = async (...groups: RecastBlock[]) => {
+    const [headGroup, ...restGroups] = groups;
+    for (const group of restGroups) {
+        await mergeRecastMeta(headGroup, group);
+    }
+};
+
+const splitGroupProperties = async (...groups: RecastBlock[]) => {
+    const [headGroup, ...restGroups] = groups;
+    await cloneRecastMetaTo(headGroup, ...restGroups);
+};
+
+/**
+ * Merge multiple groups into one group.
+ */
+export const mergeGroup = async (...groups: AsyncBlock[]) => {
+    if (!groups.length) {
+        return undefined;
+    }
+    const allIsGroup = groups.every(
+        group => group.type === Protocol.Block.Type.group
+    );
+    if (!allIsGroup) {
+        console.error(groups);
+        throw new Error(
+            'Failed to merge groups! Only the the group block can merged!'
+        );
+    }
+
+    await mergeGroupProperties(...(groups as RecastBlock[]));
+
+    const [headGroup, ...restGroups] = groups;
+    // Add all children to the head group
+    const children = (
+        await Promise.all(restGroups.map(group => group.children()))
+    ).flat();
+
+    // Remove other group
+    for (const group of restGroups) {
+        await group.remove();
+    }
+
+    await headGroup.append(...children);
+    return headGroup;
+};
+
+export const mergeToPreviousGroup = async (group: AsyncBlock) => {
+    const previousGroup = await group.previousSibling();
+    if (!previousGroup) {
+        throw new Error(
+            'Failed to merge previous group! previous block not found!'
+        );
+    }
+    if (previousGroup.type !== Protocol.Block.Type.group) {
+        console.error('previous block:', previousGroup);
+        throw new Error(
+            `Failed to merge previous group! previous block not group! type: ${previousGroup.type}`
+        );
+    }
+    return await mergeGroup(previousGroup, group);
+};
+
+const findParentGroup = async (block: AsyncBlock) => {
+    const group = await block.parent();
+    if (!group) {
+        throw new Error('Failed to split group! Parent group not found!');
+    }
+    if (group.type !== Protocol.Block.Type.group) {
+        // TODO: find group recursively, need to handle splitIdx also
+        console.error(
+            `Expected type ${Protocol.Block.Type.group} but got type "${group.type}"`,
+            'group:',
+            group
+        );
+        throw new Error(
+            'Failed to split group! Only the the group block can split!'
+        );
+    }
+    return group;
+};
+
+const createGroupWithEmptyText = async (editor: BlockEditor) => {
+    const groupBlock = await editor.createBlock('group');
+    if (!groupBlock) {
+        throw new Error('Create new group block fail!');
+    }
+    const textBlock = await editor.createBlock('text');
+    if (!textBlock) {
+        throw new Error('Create new text block fail!');
+    }
+    await groupBlock.append(textBlock);
+    return groupBlock;
+};
+
+/**
+ *
+ * ```markdown
+ * # Example
+ *
+ * - block1
+ * - block2
+ * - block3 <- Select block to split
+ * - block4
+ *
+ * ↓
+ *
+ * - block1
+ * - block2
+ * ---      <- Create a new group
+ * - block3 <- Remove it if `removeSplitPoint` is true
+ * - block4
+ *
+ * ```
+ */
+export const splitGroup = async (
+    editor: BlockEditor,
+    splitPoint: AsyncBlock,
+    removeSplitPoint = false
+) => {
+    const group = await findParentGroup(splitPoint);
+    const groupChildrenIds = group.childrenIds;
+    const splitIdx = group.findChildIndex(splitPoint.id);
+    if (splitIdx === -1) {
+        console.error('split block', splitPoint);
+        throw new Error('Failed to split group! split point block not found!');
+    }
+    if (splitIdx === 0) {
+        // Split from the first block
+        const groupBlock = await createGroupWithEmptyText(editor);
+        group.before(groupBlock);
+        if (removeSplitPoint) {
+            await splitPoint.remove();
+        }
+        return group;
+    }
+
+    const newGroupBlock = await editor.createBlock('group');
+    if (!newGroupBlock) {
+        throw new Error('Failed to split group! Create new group block fail!');
+    }
+    const newGroupChildId = groupChildrenIds.slice(splitIdx);
+    const newGroupChild = (
+        await Promise.all(newGroupChildId.map(id => editor.getBlockById(id)))
+    ).filter(Boolean) as AsyncBlock[];
+
+    // Remove from old group
+    for (const block of newGroupChild) {
+        await block.remove();
+    }
+
+    await newGroupBlock.append(...newGroupChild);
+    if (removeSplitPoint) {
+        await splitPoint.remove();
+    }
+    // If only one divider block add empty text block in group
+    // TODO: use this simple logic after the block sync bug is fixed
+    // if (!newGroupBlock.children.length) {
+    if (
+        !newGroupChild.length ||
+        (newGroupChild.length === 1 && removeSplitPoint)
+    ) {
+        const textBlock = await editor.createBlock('text');
+        if (!textBlock) {
+            throw new Error(
+                'Failed to split group! Create new text block fail!'
+            );
+        }
+        await newGroupBlock.append(textBlock);
+    }
+
+    splitGroupProperties(
+        group as RecastBlock,
+        newGroupBlock as unknown as RecastBlock
+    );
+    await group.after(newGroupBlock);
+    const newGroupFirstlyBlock = await newGroupBlock.children();
+    setTimeout(() => {
+        editor.selectionManager.activeNodeByNodeId(newGroupFirstlyBlock[0].id);
+    }, 100);
+    return newGroupBlock;
+};
+
+export const addNewGroup = async (
+    editor: BlockEditor,
+    previousBlock: AsyncBlock,
+    active = false
+) => {
+    const newGroupBlock = await createGroupWithEmptyText(editor);
+    await previousBlock.after(newGroupBlock);
+    if (active) {
+        // Active text block
+        await editor.selectionManager.activeNodeByNodeId(
+            newGroupBlock.childrenIds[0]
+        );
+    }
+    return newGroupBlock;
+};
+
+export const unwrapGroup = async (group: AsyncBlock) => {
+    const groupChild = await group.children();
+    if (!groupChild.length) {
+        await group.remove();
+        return;
+    }
+    const prevBlock = await group.previousSibling();
+    if (prevBlock) {
+        prevBlock.after(...groupChild);
+        await group.remove();
+        return;
+    }
+    const parentBlock = await group.parent();
+    if (parentBlock) {
+        parentBlock.after(...groupChild);
+        await group.remove();
+        return;
+    }
+
+    throw new Error('Failed to unwrap group! Parent group not found!');
+};
diff --git a/libs/components/editor-core/src/recast-block/index.ts b/libs/components/editor-core/src/recast-block/index.ts
new file mode 100644
index 000000000..dfe818812
--- /dev/null
+++ b/libs/components/editor-core/src/recast-block/index.ts
@@ -0,0 +1,24 @@
+import {
+    getRecastItemValue,
+    useRecastBlockMeta,
+    useSelectProperty,
+    genSelectOptionId,
+} from './property';
+import { useRecastBlockScene } from './Scene';
+export * from './types';
+export {
+    RecastBlockProvider,
+    withRecastBlock,
+    withRecastTable,
+    useRecastBlock,
+} from './Context';
+
+export {
+    getRecastItemValue,
+    useRecastBlockScene,
+    useRecastBlockMeta,
+    useSelectProperty,
+    genSelectOptionId,
+};
+
+export * from './group';
diff --git a/libs/components/editor-core/src/recast-block/property.ts b/libs/components/editor-core/src/recast-block/property.ts
new file mode 100644
index 000000000..c830c5e30
--- /dev/null
+++ b/libs/components/editor-core/src/recast-block/property.ts
@@ -0,0 +1,393 @@
+import { nanoid } from 'nanoid';
+import { useCallback } from 'react';
+import { AsyncBlock } from '../editor';
+import { useRecastBlock } from './Context';
+import type { RecastBlock, RecastItem, StatusProperty } from './types';
+import {
+    META_PROPERTIES_KEY,
+    MultiSelectProperty,
+    PropertyType,
+    RecastBlockValue,
+    RecastMetaProperty,
+    RecastPropertyId,
+    SelectOption,
+    SelectOptionId,
+    SelectProperty,
+    TABLE_VALUES_KEY,
+} from './types';
+
+/**
+ * Generate a unique id for a property
+ */
+const genPropertyId = () => nanoid(16) as RecastPropertyId; // This is a safe type cast
+
+/**
+ * Generate a unique id for a select option
+ */
+export const genSelectOptionId = () => nanoid(16) as SelectOptionId; // This is a safe type cast
+
+/**
+ * Clone all **meta** properties to other block
+ * The meta of the `toRecastBlock` will be changed in place!
+ */
+export const cloneRecastMetaTo = async (
+    fromRecastBlock: RecastBlock,
+    ...toRecastBlock: RecastBlock[]
+) => {
+    const blockProperties = fromRecastBlock.getProperty(META_PROPERTIES_KEY);
+    for (const group of toRecastBlock) {
+        await group.setProperty(META_PROPERTIES_KEY, blockProperties);
+    }
+    return blockProperties;
+};
+
+const mergeSelectOptions = (
+    select1: SelectOption[],
+    select2: SelectOption[]
+): SelectOption[] => {
+    // TODO: handle duplicate names
+    return [...select1, ...select2].filter(
+        (value, index, self) => index === self.findIndex(t => t.id === value.id)
+    );
+};
+
+/**
+ * The meta of the `toRecastBlock` will be changed in place!
+ */
+export const mergeRecastMeta = async (
+    toRecastBlock: RecastBlock,
+    fromRecastBlock: RecastBlock
+) => {
+    const fromBlockProperties =
+        fromRecastBlock.getProperty(META_PROPERTIES_KEY) ?? [];
+    const toBlockProperties =
+        toRecastBlock.getProperty(META_PROPERTIES_KEY) ?? [];
+    const newProperty = [...toBlockProperties];
+    for (const fromProp of fromBlockProperties) {
+        const theSameProperty = toBlockProperties.find(
+            toProp => toProp.id === fromProp.id
+        );
+        if (!theSameProperty) {
+            newProperty.push(fromProp);
+            continue;
+        }
+        if (theSameProperty.type !== fromProp.type) {
+            console.error(
+                'Can not merge properties',
+                theSameProperty,
+                fromProp
+            );
+            throw new Error(
+                'Failed to merge properties! There are two properties with the same id that have different types!'
+            );
+        }
+        switch (theSameProperty.type) {
+            case PropertyType.Select:
+            case PropertyType.MultiSelect: {
+                // Caution! Here the value of the property is overwritten directly
+                theSameProperty.options = mergeSelectOptions(
+                    theSameProperty.options,
+                    // The type cast is safe because the type of the `fromProp` is same as the `theSameProperty`
+                    (fromProp as typeof theSameProperty).options
+                );
+                break;
+            }
+            default: {
+                // TODO: fix property merge
+                console.warn(
+                    'Can not merge properties',
+                    theSameProperty,
+                    'drop property',
+                    fromProp
+                );
+                // throw new Error(
+                //     'Failed to merge properties! Unknown property type'
+                // );
+            }
+        }
+    }
+
+    await toRecastBlock.setProperty(META_PROPERTIES_KEY, newProperty);
+};
+
+/**
+ * Get the recast block state
+ *
+ * Get/set multi-dimensional block meta properties
+ * @public
+ */
+export const useRecastBlockMeta = () => {
+    const recastBlock = useRecastBlock();
+    const blockProperties = recastBlock.getProperty(META_PROPERTIES_KEY);
+
+    const getProperties = useCallback(
+        () => blockProperties ?? [],
+        [blockProperties]
+    );
+
+    const getProperty = useCallback(
+        (id: RecastPropertyId) =>
+            blockProperties?.find(props => id === props.id),
+        [blockProperties]
+    );
+
+    const addProperty = useCallback(
+        async (propertyWithoutId: Omit<RecastMetaProperty, 'id'>) => {
+            const newProperty = {
+                id: genPropertyId(),
+                ...propertyWithoutId,
+            } as RecastMetaProperty;
+
+            const nameDuplicated = blockProperties?.find(
+                prop => prop.name === newProperty.name
+            );
+            if (nameDuplicated) {
+                throw new Error('Duplicated property name');
+            }
+            const newProperties = [...(blockProperties ?? []), newProperty];
+            const success = await recastBlock.setProperty(
+                META_PROPERTIES_KEY,
+                newProperties
+            );
+            if (!success) {
+                console.error(
+                    'Failed to set',
+                    propertyWithoutId,
+                    'newProperties',
+                    newProperties
+                );
+                throw new Error('Failed to set property');
+            }
+            return newProperty;
+        },
+        [recastBlock, blockProperties]
+    );
+
+    const removeProperty = useCallback(
+        (id: RecastPropertyId) => {
+            const newProperties = blockProperties?.filter(
+                property => property.id !== id
+            );
+            return recastBlock.setProperty(META_PROPERTIES_KEY, newProperties);
+        },
+        [recastBlock, blockProperties]
+    );
+
+    const updateProperty = useCallback(
+        async (property: RecastMetaProperty) => {
+            if (!blockProperties) {
+                throw new Error(
+                    'Cannot update property, because the block has no properties'
+                );
+            }
+            const idx = blockProperties.findIndex(
+                prop => prop.id === property.id
+            );
+            if (idx === -1) {
+                console.error(blockProperties, property);
+                throw new Error(
+                    `Failed to update Property. The id "${property.id}" not found.`
+                );
+            }
+            const success = await recastBlock.setProperty(META_PROPERTIES_KEY, [
+                ...blockProperties.slice(0, idx),
+                property,
+                ...blockProperties.slice(idx + 1),
+            ]);
+            if (!success) {
+                console.error(
+                    'update property',
+                    property,
+                    'blockProperties',
+                    blockProperties
+                );
+                throw new Error('Failed to update property');
+            }
+            return property;
+        },
+        [recastBlock, blockProperties]
+    );
+
+    return {
+        getProperty,
+        getProperties,
+        addProperty,
+        updateProperty,
+        removeProperty,
+    };
+};
+
+/**
+ * Get the recast item value
+ *
+ * Get the value of the entry inside the multidimensional table
+ * @public
+ * @example
+ * ```ts
+ * const { getAllValue, getValue, setValue } = getRecastItemValue(block);
+ *
+ * ```
+ */
+export const getRecastItemValue = (block: RecastItem | AsyncBlock) => {
+    const recastItem = block as unknown as RecastItem;
+    const props = recastItem.getProperty(TABLE_VALUES_KEY) ?? {};
+
+    const getAllValue = () => {
+        return Object.values(props);
+    };
+
+    const getValue = (id: RecastPropertyId) => {
+        return props[id];
+    };
+
+    const setValue = (newValue: RecastBlockValue) => {
+        return recastItem.setProperty(TABLE_VALUES_KEY, {
+            ...props,
+            [newValue.id]: newValue,
+        });
+    };
+
+    const removeValue = (propertyId: RecastPropertyId) => {
+        return recastItem.setProperty(TABLE_VALUES_KEY, {
+            ...props,
+            [propertyId]: null,
+        });
+    };
+    return { getAllValue, getValue, setValue, removeValue };
+};
+
+const isSelectLikeProperty = (
+    metaProperty?: RecastMetaProperty
+): metaProperty is SelectProperty | MultiSelectProperty => {
+    if (
+        !metaProperty ||
+        (metaProperty.type !== PropertyType.Select &&
+            metaProperty.type !== PropertyType.MultiSelect)
+    ) {
+        return false;
+    }
+    return true;
+};
+
+/**
+ * A helper to handle select property
+ *
+ * @example
+ * ```ts
+ * // Init useSelectProperty
+ * const { createSelect, updateSelect } = useSelectProperty();
+ *
+ * // Create a new select property
+ * const selectProp = await createSelect({ name: 'Select Prop', options: [{ name: 'select 1' }] })
+ * const selectProp2 = await createSelect({ name: 'Select Prop', type: PropertyType.Select })
+ *
+ * // Update select property
+ * await updateSelect(selectProp).addSelectOptions({ name: 'select 2' })
+ * ```
+ */
+export const useSelectProperty = () => {
+    const { getProperty, addProperty, updateProperty } = useRecastBlockMeta();
+
+    /**
+     * Notice: Before use, you need to check whether the name is repeated manually.
+     */
+    const createSelect = async <
+        T extends SelectProperty | MultiSelectProperty | StatusProperty
+    >({
+        name,
+        options = [],
+        type = PropertyType.Select,
+    }: {
+        name: string;
+        options?: Omit<SelectOption, 'id'>[];
+        type?: T['type'];
+    }) => {
+        const selectProperty = {
+            name,
+            type,
+            options: options.map(option => ({
+                ...option,
+                id: genSelectOptionId(),
+            })),
+        };
+        return (await addProperty(selectProperty)) as T;
+    };
+
+    const updateSelect = (
+        selectProperty: SelectProperty | MultiSelectProperty
+    ) => {
+        // if (typeof selectProperty === 'string') {
+        //     const maybeSelectProperty = getProperty(selectProperty);
+        //     if (maybeSelectProperty) {
+        //         selectProperty = maybeSelectProperty;
+        //     }
+        // }
+        if (!isSelectLikeProperty(selectProperty)) {
+            console.error('selectProperty', selectProperty);
+            throw new Error(
+                `Incorrect usage of "selectPropertyHelper.updateSelect". The property is not a select property.`
+            );
+        }
+
+        /**
+         * Notice: Before use, you need to call {@link hasSelectOptions} to check whether the name is repeated
+         */
+        const addSelectOptions = (...options: Omit<SelectOption, 'id'>[]) => {
+            const newOptions = [
+                ...selectProperty.options,
+                ...options.map(option => ({
+                    ...option,
+                    id: genSelectOptionId(),
+                })),
+            ];
+            return updateProperty({
+                ...selectProperty,
+                options: newOptions,
+            });
+        };
+
+        /**
+         * Notice: Before use, you need to call {@link hasSelectOptions} to check whether the name is repeated
+         */
+        const renameSelectOptions = (targetOption: SelectOption) => {
+            const newOptions = selectProperty.options.map(option => {
+                if (option.id === targetOption.id) {
+                    return {
+                        ...option,
+                        name: targetOption.name,
+                    };
+                }
+                return option;
+            });
+            return updateProperty({
+                ...selectProperty,
+                options: newOptions,
+            });
+        };
+
+        const removeSelectOptions = (...options: SelectOptionId[]) => {
+            const newOptions = selectProperty.options.filter(
+                i => !options.some(id => id === i.id)
+            );
+            return updateProperty({
+                ...selectProperty,
+                options: newOptions,
+            });
+        };
+
+        const hasSelectOptions = (name: string) => {
+            return selectProperty.options.some(option => option.name === name);
+        };
+        return {
+            addSelectOptions,
+            renameSelectOptions,
+            removeSelectOptions,
+            hasSelectOptions,
+        };
+    };
+
+    return {
+        createSelect,
+        updateSelect,
+    };
+};
diff --git a/libs/components/editor-core/src/recast-block/types/constant.ts b/libs/components/editor-core/src/recast-block/types/constant.ts
new file mode 100644
index 000000000..386b21098
--- /dev/null
+++ b/libs/components/editor-core/src/recast-block/types/constant.ts
@@ -0,0 +1,9 @@
+// Constants
+
+export const META_PROPERTIES_KEY = 'metaProps' as const;
+export const TABLE_VALUES_KEY = 'recastValues' as const;
+/**
+ * @deprecated Use {@link META_VIEWS_KEY} instead.
+ */
+export const KANBAN_PROPERTIES_KEY = 'kanbanProps' as const;
+export const META_VIEWS_KEY = 'recastViews' as const;
diff --git a/libs/components/editor-core/src/recast-block/types/index.ts b/libs/components/editor-core/src/recast-block/types/index.ts
new file mode 100644
index 000000000..e1a097ebe
--- /dev/null
+++ b/libs/components/editor-core/src/recast-block/types/index.ts
@@ -0,0 +1,32 @@
+import { AsyncBlock } from '../../editor';
+import { RecastBlockValue } from './recast-value';
+import { RecastDataProperties, RecastPropertyId } from './recast-property';
+import { TABLE_VALUES_KEY } from './constant';
+
+// ---------------------------------------------------
+// Block
+
+// TODO update AsyncBlock
+type VariantBlock<Props> = Omit<
+    AsyncBlock,
+    'getProperty' | 'getProperties' | 'setProperty' | 'setProperties'
+> & {
+    getProperty<T extends keyof Props>(key: T): Props[T];
+    getProperties(): Props;
+    setProperty<T extends keyof Props>(
+        key: T,
+        value: Props[T]
+    ): Promise<boolean>;
+    setProperties(value: Partial<Props>): Promise<boolean>;
+};
+
+export type RecastBlock = VariantBlock<RecastDataProperties>;
+
+export type RecastItem = VariantBlock<{
+    [TABLE_VALUES_KEY]: Record<RecastPropertyId, RecastBlockValue>;
+}>;
+
+export * from './constant';
+export * from './recast-property';
+export * from './recast-value';
+export * from './view';
diff --git a/libs/components/editor-core/src/recast-block/types/recast-property.ts b/libs/components/editor-core/src/recast-block/types/recast-property.ts
new file mode 100644
index 000000000..ec4cc0fc5
--- /dev/null
+++ b/libs/components/editor-core/src/recast-block/types/recast-property.ts
@@ -0,0 +1,121 @@
+import { CSSProperties, ReactNode } from 'react';
+import {
+    KANBAN_PROPERTIES_KEY,
+    META_PROPERTIES_KEY,
+    META_VIEWS_KEY,
+} from './constant';
+import { RecastScene, RecastView } from './view';
+
+// ---------------------------------------------------
+// Property
+
+export enum PropertyType {
+    Text = 'text',
+    Status = 'status',
+    Select = 'select',
+    MultiSelect = 'multiSelect',
+    Date = 'date',
+    Mention = 'mention',
+    Information = 'information',
+}
+
+export type RecastPropertyId = string & {
+    /**
+     * Type differentiator only.
+     */
+    readonly __isPropertyId: true;
+};
+
+interface BaseProperty {
+    readonly id: RecastPropertyId;
+    name: string;
+    background?: CSSProperties['background'];
+    color?: CSSProperties['color'];
+    iconName?: string;
+}
+
+export interface TextProperty extends BaseProperty {
+    type: PropertyType.Text;
+}
+
+export interface DateProperty extends BaseProperty {
+    type: PropertyType.Date;
+}
+
+export interface MentionProperty extends BaseProperty {
+    type: PropertyType.Mention;
+}
+
+export type SelectOptionId = string & {
+    /**
+     * Type differentiator only.
+     */
+    readonly __isSelectOptionId: true;
+};
+
+export interface SelectOption {
+    id: SelectOptionId;
+    name: string;
+    // value: string;
+    color?: CSSProperties['color'];
+    background?: CSSProperties['background'];
+    iconName?: string;
+}
+
+export interface StatusProperty extends BaseProperty {
+    type: PropertyType.Status;
+    options: SelectOption[];
+}
+
+/**
+ * Select
+ */
+export interface SelectProperty extends BaseProperty {
+    type: PropertyType.Select;
+    options: SelectOption[];
+}
+
+/**
+ * MultiSelect
+ *
+ * TODO pending for further evaluation
+ */
+export interface MultiSelectProperty extends BaseProperty {
+    type: PropertyType.MultiSelect;
+    options: SelectOption[];
+    /**
+     * Limit the number of choices, if it is 1, it is a single choice
+     * @deprecated pending for further evaluation
+     */
+    multiple?: number;
+}
+
+export interface InformationProperty extends BaseProperty {
+    type: PropertyType.Information;
+    phoneOptions: SelectOption[];
+    locationOptions: SelectOption[];
+    emailOptions: SelectOption[];
+}
+// TODO add more value
+export type RecastMetaProperty =
+    | TextProperty
+    | SelectProperty
+    | MultiSelectProperty
+    | DateProperty
+    | MentionProperty
+    | StatusProperty
+    | InformationProperty;
+
+/**
+ * @deprecated Use {@link RecastView}
+ */
+export type RecastKanbanProperty = {
+    groupBy: RecastPropertyId;
+};
+
+export type RecastDataProperties = Partial<{
+    scene: RecastScene;
+    [META_PROPERTIES_KEY]: RecastMetaProperty[];
+    [META_VIEWS_KEY]: RecastView[];
+    [KANBAN_PROPERTIES_KEY]: RecastKanbanProperty;
+}>;
diff --git a/libs/components/editor-core/src/recast-block/types/recast-value.ts b/libs/components/editor-core/src/recast-block/types/recast-value.ts
new file mode 100644
index 000000000..f3809fdfb
--- /dev/null
+++ b/libs/components/editor-core/src/recast-block/types/recast-value.ts
@@ -0,0 +1,61 @@
+import { CSSProperties } from 'react';
+import {
+    RecastPropertyId,
+    PropertyType,
+    SelectOptionId,
+} from './recast-property';
+
+// Property Value
+
+type BaseValue = {
+    readonly id: RecastPropertyId;
+};
+
+export interface TextValue extends BaseValue {
+    type: PropertyType.Text;
+    value: string;
+}
+
+export interface DateValue extends BaseValue {
+    type: PropertyType.Date;
+    value: number | [number, number];
+}
+
+export interface SelectValue extends BaseValue {
+    type: PropertyType.Select;
+    value: SelectOptionId;
+}
+
+export interface MultiSelectValue extends BaseValue {
+    type: PropertyType.MultiSelect;
+    value: SelectOptionId[];
+}
+
+export interface MentionValue extends BaseValue {
+    type: PropertyType.Mention;
+    value: string;
+}
+
+export interface StatusValue extends BaseValue {
+    type: PropertyType.Status;
+    value: SelectOptionId;
+}
+
+export interface InformationValue extends BaseValue {
+    type: PropertyType.Information;
+    value: {
+        phone: SelectOptionId[];
+        location: SelectOptionId[];
+        email: SelectOptionId[];
+    };
+}
+
+// TODO add more value
+export type RecastBlockValue =
+    | TextValue
+    | SelectValue
+    | MultiSelectValue
+    | StatusValue
+    | DateValue
+    | MentionValue
+    | InformationValue;
diff --git a/libs/components/editor-core/src/recast-block/types/view.ts b/libs/components/editor-core/src/recast-block/types/view.ts
new file mode 100644
index 000000000..b5e2839ac
--- /dev/null
+++ b/libs/components/editor-core/src/recast-block/types/view.ts
@@ -0,0 +1,28 @@
+import { RecastPropertyId } from './recast-property';
+
+export enum RecastScene {
+    /**
+     * normal view
+     */
+    Page = 'page',
+    Kanban = 'kanban',
+    Table = 'table',
+    Whiteboard = 'whiteboard',
+}
+
+type BaseView = {
+    name: string;
+    // TODO: design this
+    // order?: string[];
+};
+
+export interface PageView extends BaseView {
+    type: RecastScene.Page;
+}
+
+export interface KanbanView extends BaseView {
+    type: RecastScene.Kanban;
+    groupBy: RecastPropertyId;
+}
+
+export type RecastView = PageView | KanbanView;
diff --git a/libs/components/editor-core/src/render-block/RenderBlock.tsx b/libs/components/editor-core/src/render-block/RenderBlock.tsx
new file mode 100644
index 000000000..4fa6435bf
--- /dev/null
+++ b/libs/components/editor-core/src/render-block/RenderBlock.tsx
@@ -0,0 +1,72 @@
+import { styled, Theme } from '@toeverything/components/ui';
+import { FC, useContext, useLayoutEffect, useMemo, useRef } from 'react';
+
+// import { RenderChildren } from './RenderChildren';
+import { RootContext } from '../contexts';
+import { useBlock } from '../hooks';
+
+interface RenderBlockProps {
+    blockId: string;
+    hasContainer?: boolean;
+}
+
+export const RenderBlock: FC<RenderBlockProps> = ({
+    blockId,
+    hasContainer = true,
+}) => {
+    const { editor, editorElement } = useContext(RootContext);
+    const { block } = useBlock(blockId);
+    const blockRef = useRef<HTMLDivElement>(null);
+
+    useLayoutEffect(() => {
+        if (block && blockRef.current) {
+            block.dom = blockRef.current;
+        }
+    });
+
+    const blockView = useMemo(() => {
+        if (block?.type) {
+            return editor.getView(block.type);
+        }
+        return null;
+    }, [editor, block?.type]);
+
+    if (!block) {
+        return null;
+    }
+
+    /**
+     * @deprecated
+     */
+    const columns = {
+        fromId: block.id ?? '',
+        columns: block.columns ?? [],
+    };
+
+    const view = blockView?.View ? (
+        <blockView.View
+            editor={editor}
+            block={block}
+            columns={columns.columns}
+            columnsFromId={columns.fromId}
+            scene="page"
+            editorElement={editorElement}
+        />
+    ) : null;
+
+    return hasContainer ? (
+        <BlockContainer
+            block-id={blockId}
+            ref={blockRef}
+            data-block-id={blockId}
+        >
+            {view}
+        </BlockContainer>
+    ) : (
+        <> {view}</>
+    );
+};
+
+const BlockContainer = styled('div')(({ theme }) => ({
+    fontSize: theme.typography.body1.fontSize,
+}));
diff --git a/libs/components/editor-core/src/render-block/RenderBlockChildren.tsx b/libs/components/editor-core/src/render-block/RenderBlockChildren.tsx
new file mode 100644
index 000000000..23391057f
--- /dev/null
+++ b/libs/components/editor-core/src/render-block/RenderBlockChildren.tsx
@@ -0,0 +1,17 @@
+import type { FC } from 'react';
+import type { AsyncBlock } from '../editor';
+import { RenderBlock } from './RenderBlock';
+
+interface RenderChildrenProps {
+    block: AsyncBlock;
+}
+
+export const RenderBlockChildren: FC<RenderChildrenProps> = ({ block }) => {
+    return block.childrenIds.length ? (
+        <>
+            {block.childrenIds.map(childId => {
+                return <RenderBlock key={childId} blockId={childId} />;
+            })}
+        </>
+    ) : null;
+};
diff --git a/libs/components/editor-core/src/render-block/index.ts b/libs/components/editor-core/src/render-block/index.ts
new file mode 100644
index 000000000..820bac8b5
--- /dev/null
+++ b/libs/components/editor-core/src/render-block/index.ts
@@ -0,0 +1,2 @@
+export * from './RenderBlock';
+export * from './RenderBlockChildren';
diff --git a/libs/components/editor-core/src/selection.tsx b/libs/components/editor-core/src/selection.tsx
new file mode 100644
index 000000000..93316c284
--- /dev/null
+++ b/libs/components/editor-core/src/selection.tsx
@@ -0,0 +1,267 @@
+import React, {
+    forwardRef,
+    useCallback,
+    useImperativeHandle,
+    useEffect,
+    useRef,
+    useState,
+} from 'react';
+import { domToRect, Point, Rect } from '@toeverything/utils';
+// TODO: optimize
+import { AsyncBlock, BlockEditor } from './editor';
+import { styled } from '@toeverything/components/ui';
+
+type MouseType = 'up' | 'down';
+
+interface SelectionProps {
+    container?: HTMLElement;
+    editor: BlockEditor;
+}
+
+const styles = style9.create({
+    selectionRect: {
+        backgroundColor: 'rgba(152, 172, 189, 0.1)',
+        position: 'absolute',
+        zIndex: 99,
+    },
+});
+
+type VerticalTypes = 'up' | 'down' | null;
+type HorizontalTypes = 'left' | 'right' | null;
+export type SelectionRef = {
+    onMouseDown: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMouseMove: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMouseUp: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+};
+
+const getFixedPoint = (
+    { x: clientX, y: clientY }: Point,
+    scrollContainerDom: HTMLElement,
+    scrollContainerRect: Rect
+) => {
+    const { scrollHeight, scrollWidth, scrollTop, scrollLeft } =
+        scrollContainerDom;
+    const { top, left } = scrollContainerRect;
+
+    const calcTop = clientY - top + scrollTop;
+    const calcLeft = clientX - left + scrollLeft;
+
+    return new Point(
+        calcLeft > scrollWidth ? scrollWidth : calcLeft < 0 ? 0 : calcLeft,
+        calcTop > scrollHeight ? scrollHeight : calcTop < 0 ? 0 : calcTop
+    );
+};
+
+const getScrollDirections = (
+    endPoint: Point,
+    verticalScrollTriggerDistance: number,
+    horizontalScrollTriggerDistance: number,
+    scrollContainerRect: Rect
+): [HorizontalTypes, VerticalTypes] => {
+    let verticalDirection: VerticalTypes = null;
+    let horizontalDirection: HorizontalTypes = null;
+
+    if (endPoint.y - scrollContainerRect.top < verticalScrollTriggerDistance) {
+        verticalDirection = 'up';
+    }
+
+    if (
+        scrollContainerRect.height + scrollContainerRect.top - endPoint.y <
+        verticalScrollTriggerDistance
+    ) {
+        verticalDirection = 'down';
+    }
+
+    if (
+        endPoint.x - scrollContainerRect.left <
+        horizontalScrollTriggerDistance
+    ) {
+        horizontalDirection = 'left';
+    }
+
+    if (
+        scrollContainerRect.width + scrollContainerRect.left - endPoint.x <
+        horizontalScrollTriggerDistance
+    ) {
+        horizontalDirection = 'right';
+    }
+
+    return [horizontalDirection, verticalDirection];
+};
+
+const setSelectedNodesByPoints = async (
+    editor: BlockEditor,
+    startPoint: Point,
+    endPoint: Point
+) => {
+    editor.selectionManager.selectedNodesList =
+        await editor.selectionManager.calcRenderBlockIntersect(
+            Rect.fromPoints(startPoint, endPoint)
+        );
+    window.getSelection()?.removeAllRanges();
+};
+
+export const SelectionRect = forwardRef<SelectionRef, SelectionProps>(
+    (props, ref) => {
+        const { container, editor } = props;
+        const { selectionManager, scrollManager } = editor;
+
+        const [isShow, setIsShow] = useState<boolean>(false);
+        const startPointRef = useRef<Point>();
+        const endPointRef = useRef<Point>();
+        const [rect, setRect] = useState<Rect>(Rect.fromLTRB(0, 0, 0, 0));
+        const startPointAtBlock = useRef<boolean>(false);
+        const mouseType = useRef<MouseType>('up');
+
+        const scrollContainerRect = useRef<Rect>();
+
+        const onMouseDown = async (
+            event: React.MouseEvent<HTMLDivElement, MouseEvent>
+        ) => {
+            await selectionManager.setSelectedNodesIds([]);
+            startPointRef.current = new Point(event.clientX, event.clientY);
+            startPointAtBlock.current =
+                (await selectionManager.rootDomReady()) &&
+                (await selectionManager.isPointInBlocks(startPointRef.current));
+            mouseType.current = 'down';
+            if (scrollManager.scrollContainer) {
+                scrollContainerRect.current = domToRect(
+                    scrollManager.scrollContainer
+                );
+            }
+        };
+
+        const onMouseMove = async (
+            event: React.MouseEvent<HTMLDivElement, MouseEvent>
+        ) => {
+            if (mouseType.current === 'down' && !startPointAtBlock.current) {
+                event.preventDefault();
+                endPointRef.current = new Point(event.clientX, event.clientY);
+                setIsShow(true);
+
+                if (startPointRef.current) {
+                    await setSelectedNodesByPoints(
+                        editor,
+                        startPointRef.current,
+                        endPointRef.current
+                    );
+                }
+
+                if (
+                    startPointRef.current &&
+                    scrollManager.scrollContainer &&
+                    scrollContainerRect.current
+                ) {
+                    setRect(
+                        Rect.fromPoints(
+                            getFixedPoint(
+                                startPointRef.current,
+                                scrollManager.scrollContainer,
+                                scrollContainerRect.current
+                            ),
+                            getFixedPoint(
+                                endPointRef.current,
+                                scrollManager.scrollContainer,
+                                scrollContainerRect.current
+                            )
+                        )
+                    );
+
+                    const scrollDirections = getScrollDirections(
+                        endPointRef.current,
+                        scrollManager.verticalScrollTriggerDistance,
+                        scrollManager.horizontalScrollTriggerDistance,
+                        scrollContainerRect.current
+                    );
+
+                    scrollManager.startAutoScroll(scrollDirections);
+                }
+            }
+        };
+
+        const onMouseUp = () => {
+            mouseType.current = 'up';
+            startPointAtBlock.current = false;
+            setIsShow(false);
+            scrollManager.stopAutoScroll();
+        };
+
+        useImperativeHandle(ref, () => ({
+            onMouseDown,
+            onMouseMove,
+            onMouseUp,
+        }));
+
+        useEffect(() => {
+            const scrollingCallback = ({
+                direction,
+            }: {
+                direction: [HorizontalTypes, VerticalTypes];
+            }) => {
+                if (
+                    startPointRef.current &&
+                    endPointRef.current &&
+                    scrollManager.scrollContainer &&
+                    scrollContainerRect.current
+                ) {
+                    const xValue =
+                        direction[0] === 'right'
+                            ? -1
+                            : direction[0] === 'left'
+                            ? 1
+                            : 0;
+                    const yValue =
+                        direction[1] === 'down'
+                            ? -1
+                            : direction[1] === 'up'
+                            ? 1
+                            : 0;
+
+                    startPointRef.current = new Point(
+                        startPointRef.current.x +
+                            xValue * scrollManager.scrollMoveOffset,
+                        startPointRef.current.y +
+                            yValue * scrollManager.scrollMoveOffset
+                    );
+
+                    setSelectedNodesByPoints(
+                        editor,
+                        startPointRef.current,
+                        endPointRef.current
+                    );
+
+                    setRect(
+                        Rect.fromPoints(
+                            getFixedPoint(
+                                startPointRef.current,
+                                scrollManager.scrollContainer,
+                                scrollContainerRect.current
+                            ),
+                            getFixedPoint(
+                                endPointRef.current,
+                                scrollManager.scrollContainer,
+                                scrollContainerRect.current
+                            )
+                        )
+                    );
+                }
+            };
+
+            scrollManager.onScrolling(scrollingCallback);
+
+            return () => scrollManager.removeScrolling(scrollingCallback);
+        }, [scrollManager]);
+
+        return isShow ? (
+            <div
+                className={styles('selectionRect')}
+                style={{
+                    left: `${rect.left}px`,
+                    top: `${rect.top}px`,
+                    height: `${rect.height}px`,
+                    width: `${rect.width}px`,
+                }}
+            />
+        ) : null;
+    }
+);
diff --git a/libs/components/editor-core/src/utils.ts b/libs/components/editor-core/src/utils.ts
new file mode 100644
index 000000000..d4d94ad29
--- /dev/null
+++ b/libs/components/editor-core/src/utils.ts
@@ -0,0 +1,29 @@
+import { Protocol } from '@toeverything/datasource/db-service';
+import { AsyncBlock } from './editor';
+
+// TODO is migrated to the implementation of block
+export const supportedChildrenBlock = [
+    Protocol.Block.Type.heading1,
+    Protocol.Block.Type.heading2,
+    Protocol.Block.Type.heading3,
+    Protocol.Block.Type.text,
+    Protocol.Block.Type.numbered,
+    Protocol.Block.Type.bullet,
+    Protocol.Block.Type.todo,
+    Protocol.Block.Type.quote,
+] as const;
+
+/**
+ * Is the block support render children.
+ *
+ * @example
+ * ```ts
+ * const supportChildren = isSupportChildren(block);
+ * ```
+ */
+export const supportChildren = (block: AsyncBlock | unknown): boolean => {
+    if (!(block instanceof AsyncBlock)) {
+        return false;
+    }
+    return supportedChildrenBlock.some(type => type === block.type);
+};
diff --git a/libs/components/editor-core/tsconfig.json b/libs/components/editor-core/tsconfig.json
new file mode 100644
index 000000000..725ba5b53
--- /dev/null
+++ b/libs/components/editor-core/tsconfig.json
@@ -0,0 +1,26 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        // "strictNullChecks": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/components/editor-core/tsconfig.lib.json b/libs/components/editor-core/tsconfig.lib.json
new file mode 100644
index 000000000..0dda33329
--- /dev/null
+++ b/libs/components/editor-core/tsconfig.lib.json
@@ -0,0 +1,22 @@
+{
+    "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": [
+        "**/*.spec.ts",
+        "**/*.test.ts",
+        "**/*.spec.tsx",
+        "**/*.test.tsx",
+        "**/*.spec.js",
+        "**/*.test.js",
+        "**/*.spec.jsx",
+        "**/*.test.jsx"
+    ],
+    "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/libs/components/editor-core/tsconfig.spec.json b/libs/components/editor-core/tsconfig.spec.json
new file mode 100644
index 000000000..ee70363dc
--- /dev/null
+++ b/libs/components/editor-core/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "module": "commonjs",
+        "types": ["jest", "node"]
+    },
+    "include": [
+        "**/*.test.ts",
+        "**/*.spec.ts",
+        "**/*.test.tsx",
+        "**/*.spec.tsx",
+        "**/*.test.js",
+        "**/*.spec.js",
+        "**/*.test.jsx",
+        "**/*.spec.jsx",
+        "**/*.d.ts"
+    ]
+}
diff --git a/libs/components/editor-plugins/.babelrc b/libs/components/editor-plugins/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/components/editor-plugins/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/components/editor-plugins/.eslintrc.json b/libs/components/editor-plugins/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/components/editor-plugins/.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": {}
+        }
+    ]
+}
diff --git a/libs/components/editor-plugins/README.md b/libs/components/editor-plugins/README.md
new file mode 100644
index 000000000..0b92c420b
--- /dev/null
+++ b/libs/components/editor-plugins/README.md
@@ -0,0 +1,7 @@
+# components-editor-plugins
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test components-editor-plugins` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/components/editor-plugins/jest.config.js b/libs/components/editor-plugins/jest.config.js
new file mode 100644
index 000000000..03de97743
--- /dev/null
+++ b/libs/components/editor-plugins/jest.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+    displayName: 'components-editor-plugins',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/components/editor-plugins',
+};
diff --git a/libs/components/editor-plugins/package.json b/libs/components/editor-plugins/package.json
new file mode 100644
index 000000000..94f7b8e0c
--- /dev/null
+++ b/libs/components/editor-plugins/package.json
@@ -0,0 +1,10 @@
+{
+    "name": "@toeverything/components/editor-plugins",
+    "version": "0.0.1",
+    "license": "MIT",
+    "dependencies": {
+        "@mui/icons-material": "^5.8.4",
+        "date-fns": "^2.28.0",
+        "style9": "^0.13.3"
+    }
+}
diff --git a/libs/components/editor-plugins/project.json b/libs/components/editor-plugins/project.json
new file mode 100644
index 000000000..ac41d5d88
--- /dev/null
+++ b/libs/components/editor-plugins/project.json
@@ -0,0 +1,47 @@
+{
+    "sourceRoot": "libs/components/editor-plugins/src",
+    "projectType": "library",
+    "tags": ["components:editor-plugins"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/components/editor-plugins",
+                "tsConfig": "libs/components/editor-plugins/tsconfig.lib.json",
+                "project": "libs/components/editor-plugins/package.json",
+                "entryFile": "libs/components/editor-plugins/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "libs/rollup.config.cjs",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/components/editor-plugins/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/components/editor-plugins/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "check": {
+            "executor": "./tools/executors/tsCheck:tsCheck"
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/components/editor-plugins"],
+            "options": {
+                "jestConfig": "libs/components/editor-plugins/jest.config.js",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/components/editor-plugins/src/base-plugin.ts b/libs/components/editor-plugins/src/base-plugin.ts
new file mode 100644
index 000000000..ad3d211d8
--- /dev/null
+++ b/libs/components/editor-plugins/src/base-plugin.ts
@@ -0,0 +1,85 @@
+import {
+    HookType,
+    Virgo,
+    Plugin,
+    PluginHooks,
+} from '@toeverything/framework/virgo';
+import { genErrorObj } from '@toeverything/utils';
+
+export abstract class BasePlugin implements Plugin {
+    protected editor: Virgo;
+    protected hooks: PluginHooks;
+    private hook_queue: [type: HookType, fn: (...args: unknown[]) => void][] =
+        [];
+    private is_disposed = false;
+
+    // Unique identifier to distinguish between different Plugins
+    public static get pluginName(): string {
+        throw new Error(
+            "subclass need to implement 'get pluginName' property accessors."
+        );
+    }
+
+    // Priority, the higher the number, the higher the priority
+    public static get priority(): number {
+        return 1;
+    }
+
+    constructor(editor: Virgo, hooks: PluginHooks) {
+        this.editor = editor;
+        // TODO perfect it
+        this.hooks = {
+            addHook: (...args) => {
+                this.hook_queue.push([args[0], args[1]]);
+                return hooks.addHook(...args);
+            },
+            addOnceHook(...args) {
+                return hooks.addHook(...args);
+            },
+            // TODO fix remove
+            removeHook(...args) {
+                return hooks.removeHook(...args);
+            },
+        };
+        this.on_render = this.on_render.bind(this);
+        hooks.addHook(HookType.RENDER, this.on_render, this);
+    }
+
+    /**
+     * Only executed once during initialization
+     */
+    public init(): void {
+        // implement in subclass
+    }
+
+    /**
+     * will trigger multiple times
+     */
+    protected on_render(): void {
+        // implement in subclass
+    }
+
+    public dispose(): void {
+        // See https://stackoverflow.com/questions/33387318/access-to-static-properties-via-this-constructor-in-typescript
+        const pluginName = (this.constructor as typeof BasePlugin).pluginName;
+        if (this.is_disposed) {
+            console.warn(`Plugin '${pluginName}' already disposed`);
+            return;
+        }
+        this.is_disposed = true;
+        // FIX will remove hook multiple times
+        // if the hook has been removed manually
+        // or set once flag when add hook
+        this.hook_queue.forEach(([type, fn]) => {
+            this.hooks.removeHook(type, fn);
+        });
+        this.hook_queue = [];
+
+        const errorMsg = `You are trying to access an invalid editor or hooks.
+                The plugin '${pluginName}' has been disposed.
+                Make sure all hooks are removed before dispose.`;
+
+        this.editor = genErrorObj(errorMsg) as Virgo;
+        this.hooks = genErrorObj(errorMsg) as PluginHooks;
+    }
+}
diff --git a/libs/components/editor-plugins/src/block-property/index.tsx b/libs/components/editor-plugins/src/block-property/index.tsx
new file mode 100644
index 000000000..53c00860a
--- /dev/null
+++ b/libs/components/editor-plugins/src/block-property/index.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { BasePlugin } from '../base-plugin';
+import { BlockDomInfo, HookType } from '@toeverything/framework/virgo';
+
+import View from './view';
+const PLUGIN_NAME = 'block-property';
+
+export class BlockPropertyPlugin extends BasePlugin {
+    public static override get pluginName(): string {
+        return PLUGIN_NAME;
+    }
+
+    private root: Root | undefined;
+    private root_dom: HTMLElement;
+    // record mouse moving block id
+    private current_sliding_block_info: BlockDomInfo;
+    private is_render = false;
+    private is_hover = false;
+
+    private set_is_hover = (isHover: boolean) => {
+        this.is_hover = isHover;
+    };
+    private insert_root_to_block = async () => {
+        this.root_dom = document.createElement('div');
+        this.root_dom.style.position = 'relative';
+        this.root_dom.style.zIndex = '1000';
+        this.root_dom.classList.add(`id-${PLUGIN_NAME}`);
+        this.current_sliding_block_info.dom.appendChild(this.root_dom);
+        this.root = createRoot(this.root_dom);
+    };
+
+    private on_sliding_block_change = async (blockDomInfo: BlockDomInfo) => {
+        this.current_sliding_block_info = blockDomInfo;
+        await this.insert_root_to_block();
+        this.render_view();
+        this.is_render = true;
+    };
+
+    private on_mouse_move = async (
+        event: React.MouseEvent,
+        blockDomInfo: BlockDomInfo
+    ) => {
+        if (
+            blockDomInfo.blockId !== this.current_sliding_block_info?.blockId &&
+            !this.is_hover
+        ) {
+            await this.dispose();
+
+            await this.on_sliding_block_change(blockDomInfo);
+        }
+    };
+
+    private render_view = () => {
+        this.root.render(
+            <View
+                blockDomInfo={this.current_sliding_block_info}
+                setIsHover={this.set_is_hover}
+            />
+        );
+    };
+
+    protected override on_render(): void {
+        this.hooks.addHook(
+            HookType.AFTER_ON_NODE_MOUSE_MOVE,
+            this.on_mouse_move,
+            this
+        );
+    }
+
+    override async dispose() {
+        if (this.current_sliding_block_info) {
+            this.current_sliding_block_info.dom.removeChild(this.root_dom);
+            this.current_sliding_block_info = undefined;
+        }
+
+        this.root_dom = undefined;
+        this.is_render = false;
+        if (this.root) {
+            this.root.unmount();
+        }
+    }
+}
diff --git a/libs/components/editor-plugins/src/block-property/view.tsx b/libs/components/editor-plugins/src/block-property/view.tsx
new file mode 100644
index 000000000..4d97f4cdc
--- /dev/null
+++ b/libs/components/editor-plugins/src/block-property/view.tsx
@@ -0,0 +1,67 @@
+import React, { StrictMode, useState } from 'react';
+import { BlockDomInfo } from '@toeverything/framework/virgo';
+import style9 from 'style9';
+import { styled } from '@toeverything/components/ui';
+import { Add } from '@mui/icons-material';
+
+export default (props: {
+    blockDomInfo: BlockDomInfo;
+    setIsHover: (isHover: boolean) => void;
+}) => {
+    const { blockDomInfo, setIsHover } = props;
+
+    const [showPopover, setShowPopover] = useState(false);
+    return (
+        <StrictMode>
+            <div
+                onMouseOver={() => {
+                    setShowPopover(true);
+                    setIsHover(true);
+                }}
+                onMouseLeave={() => {
+                    setShowPopover(false);
+                    setIsHover(false);
+                }}
+            >
+                <div className={styles('triggerLine')} />
+                <div
+                    className={styles('popover', {
+                        popoverShow: showPopover,
+                    })}
+                >
+                    <Add />
+                </div>
+            </div>
+        </StrictMode>
+    );
+};
+const Container = styled('div')({
+    background: 'blue',
+    '&:hover .popover': {
+        background: 'red',
+        display: 'flex',
+    },
+});
+
+const styles = style9.create({
+    popover: {
+        backgroundColor: '#fff',
+        display: 'none',
+        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+        padding: '8px',
+        borderRadius: '0 8px 8px 8px',
+        position: 'absolute',
+    },
+    popoverShow: {
+        display: 'flex',
+    },
+    triggerLine: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        height: '4px',
+        width: '20px',
+        backgroundColor: '#aaa',
+        cursor: 'pointer',
+    },
+});
diff --git a/libs/components/editor-plugins/src/comment/AddComment.tsx b/libs/components/editor-plugins/src/comment/AddComment.tsx
new file mode 100644
index 000000000..2c721ccc0
--- /dev/null
+++ b/libs/components/editor-plugins/src/comment/AddComment.tsx
@@ -0,0 +1,37 @@
+import { styled } from '@toeverything/components/ui';
+import { WithEditorSelectionType } from '../menu/inline-menu/types';
+import { AddCommentActions } from './AddCommentActions';
+import { AddCommentInput } from './AddCommentInput';
+import { useAddComment } from './use-add-comment';
+
+export const AddComment = (props: WithEditorSelectionType) => {
+    const {
+        currentComment,
+        setCurrentComment,
+        createComment,
+        handleSubmitCurrentComment,
+    } = useAddComment(props);
+
+    return (
+        <StyledContainerForAddComment>
+            <AddCommentInput
+                comment={currentComment}
+                setComment={setCurrentComment}
+                createComment={createComment}
+                handleSubmitCurrentComment={handleSubmitCurrentComment}
+            />
+            <AddCommentActions
+                {...props}
+                createComment={createComment}
+                handleSubmitCurrentComment={handleSubmitCurrentComment}
+            />
+        </StyledContainerForAddComment>
+    );
+};
+
+const StyledContainerForAddComment = styled('div')(({ theme }) => {
+    return {
+        // display: 'flex',
+        margin: theme.affine.spacing.main,
+    };
+});
diff --git a/libs/components/editor-plugins/src/comment/AddCommentActions.tsx b/libs/components/editor-plugins/src/comment/AddCommentActions.tsx
new file mode 100644
index 000000000..e01679fbd
--- /dev/null
+++ b/libs/components/editor-plugins/src/comment/AddCommentActions.tsx
@@ -0,0 +1,142 @@
+import { useCallback, type FC, type MouseEvent } from 'react';
+import {
+    styled,
+    Tooltip,
+    IconButton,
+    type SvgIconProps,
+} from '@toeverything/components/ui';
+import {
+    EmbedIcon,
+    ImageIcon,
+    ReactionIcon,
+    CollaboratorIcon,
+} from '@toeverything/components/icons';
+import { WithEditorSelectionType } from '../menu/inline-menu/types';
+import { getEditorMarkForCommentId } from '@toeverything/components/common';
+
+const getCommentQuickActionsData = () => {
+    return [
+        {
+            id: 'attachment',
+            icon: EmbedIcon,
+            tooltip: 'Add attachment file',
+        },
+        {
+            id: 'mention',
+            icon: CollaboratorIcon,
+            tooltip: 'Mention someone',
+        },
+        {
+            id: 'image',
+            icon: ImageIcon,
+            tooltip: 'Add image',
+        },
+        {
+            id: 'emoji',
+            icon: ReactionIcon,
+            tooltip: 'Add emoji',
+        },
+    ];
+};
+
+type AddCommentActionsProps = {
+    createComment: () => Promise<{ commentsId: string } | undefined>;
+    handleSubmitCurrentComment: () => Promise<void>;
+} & WithEditorSelectionType;
+
+export const AddCommentActions = ({
+    createComment,
+    handleSubmitCurrentComment,
+    editor,
+    selectionInfo,
+    setShow,
+}: AddCommentActionsProps) => {
+    return (
+        <StyledContainerForAddCommentActions>
+            <StyledContainerForActionsButtons>
+                {getCommentQuickActionsData().map(action => {
+                    const { id, icon, tooltip } = action;
+                    return (
+                        <IconButtonWithTooltip
+                            icon={icon}
+                            tooltip={tooltip}
+                            key={id}
+                        />
+                    );
+                })}
+                <IconButton />
+            </StyledContainerForActionsButtons>
+            <StyledContainerForActionsButtons>
+                <StyledCancelButton
+                    onClick={() => {
+                        setShow(false);
+                    }}
+                >
+                    Cancel
+                </StyledCancelButton>
+                <StyledSendButton onClick={handleSubmitCurrentComment}>
+                    Send
+                </StyledSendButton>
+            </StyledContainerForActionsButtons>
+        </StyledContainerForAddCommentActions>
+    );
+};
+
+type IconButtonWithTooltipProps = {
+    icon: FC<SvgIconProps>;
+    tooltip?: string;
+};
+
+const IconButtonWithTooltip = ({
+    icon: Icon,
+    tooltip,
+}: IconButtonWithTooltipProps) => {
+    return (
+        <Tooltip content={tooltip} placement="bottom" trigger="hover">
+            <IconButton aria-label={tooltip}>
+                <Icon />
+            </IconButton>
+        </Tooltip>
+    );
+};
+
+const StyledContainerForAddCommentActions = styled('div')(({ theme }) => {
+    return {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    };
+});
+
+const StyledContainerForActionsButtons = styled('div')(({ theme }) => {
+    return {
+        display: 'flex',
+    };
+});
+
+const StyledActionBaseButton = styled('button')(({ theme }) => {
+    return {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: 50,
+        height: 20,
+        borderRadius: 5,
+        fontSize: 12,
+    };
+});
+
+const StyledCancelButton = styled(StyledActionBaseButton)(({ theme }) => {
+    return {
+        border: `1px solid ${theme.affine.palette.tagHover}`,
+        marginRight: theme.affine.spacing.smSpacing,
+    };
+});
+
+const StyledSendButton = styled(StyledActionBaseButton)(({ theme }) => {
+    return {
+        border: `none`,
+        backgroundColor: theme.affine.palette.primary,
+        color: theme.affine.palette.white,
+    };
+});
diff --git a/libs/components/editor-plugins/src/comment/AddCommentInput.tsx b/libs/components/editor-plugins/src/comment/AddCommentInput.tsx
new file mode 100644
index 000000000..96ba34e68
--- /dev/null
+++ b/libs/components/editor-plugins/src/comment/AddCommentInput.tsx
@@ -0,0 +1,58 @@
+import { useCallback, ChangeEvent, KeyboardEvent } from 'react';
+import { styled } from '@toeverything/components/ui';
+import { useAddComment } from './use-add-comment';
+import { WithEditorSelectionType } from '../menu/inline-menu/types';
+
+type AddCommentInputProps = {
+    comment: string;
+    setComment: React.Dispatch<React.SetStateAction<string>>;
+    createComment: () => Promise<{ commentsId: string }>;
+    handleSubmitCurrentComment: () => Promise<void>;
+};
+
+export const AddCommentInput = (props: AddCommentInputProps) => {
+    const { comment, setComment, handleSubmitCurrentComment } = props;
+
+    const handleTextAreaChange = useCallback(
+        (event: ChangeEvent<HTMLTextAreaElement>) => {
+            setComment(event.currentTarget.value);
+        },
+        [setComment]
+    );
+
+    // 👀 keydown event won't work as expected
+    const handleKeyUp = useCallback(
+        async (e: KeyboardEvent<HTMLTextAreaElement>) => {
+            if (!e.metaKey && !e.shiftKey && e.code === 'Enter' && comment) {
+                await handleSubmitCurrentComment();
+            }
+        },
+        [comment, handleSubmitCurrentComment]
+    );
+
+    return (
+        <StyledContainerForAddCommentInput>
+            {/* <input type="text" placeholder={'Add comment...'} /> */}
+            <StyledTextArea
+                placeholder={'Add comment...'}
+                value={comment || ''}
+                onChange={handleTextAreaChange}
+                onKeyUp={handleKeyUp}
+            />
+        </StyledContainerForAddCommentInput>
+    );
+};
+
+const StyledContainerForAddCommentInput = styled('div')(({ theme }) => {
+    return {
+        marginLeft: theme.affine.spacing.iconPadding,
+    };
+});
+
+const StyledTextArea = styled('textarea')(({ theme }) => {
+    return {
+        minWidth: 252,
+        resize: 'none',
+        // color: theme.affine.palette.primaryText,
+    };
+});
diff --git a/libs/components/editor-plugins/src/comment/Container.tsx b/libs/components/editor-plugins/src/comment/Container.tsx
new file mode 100644
index 000000000..6c0ed17b4
--- /dev/null
+++ b/libs/components/editor-plugins/src/comment/Container.tsx
@@ -0,0 +1,70 @@
+import { useState, useEffect } from 'react';
+import {
+    styled,
+    MuiClickAwayListener as ClickAwayListener,
+} from '@toeverything/components/ui';
+import {
+    Virgo,
+    PluginHooks,
+    SelectionInfo,
+} from '@toeverything/framework/virgo';
+import { AddComment } from './AddComment';
+
+export type AddCommentPluginContainerProps = {
+    editor: Virgo;
+    hooks: PluginHooks;
+    style?: { left: number; top: number };
+};
+
+export const AddCommentPluginContainer = ({
+    editor,
+    hooks,
+    style,
+}: AddCommentPluginContainerProps) => {
+    const [showAddComment, setShowAddComment] = useState(false);
+    const [containerStyle, setContainerStyle] = useState<{
+        left: number;
+        top: number;
+    }>(null);
+    const [selectionInfo, setSelectionInfo] = useState<SelectionInfo>();
+
+    useEffect(() => {
+        const showAddCommentInput = () => {
+            setShowAddComment(true);
+            const rect = editor.selection?.currentSelectInfo?.browserSelection
+                ?.getRangeAt(0)
+                ?.getBoundingClientRect();
+            if (rect) {
+                setSelectionInfo(editor.selection.currentSelectInfo);
+                setContainerStyle({ left: rect.left, top: rect.top + 32 });
+            }
+        };
+        editor.plugins.observe('show-add-comment', showAddCommentInput);
+
+        return () =>
+            editor.plugins.unobserve('show-add-comment', showAddCommentInput);
+    }, [editor.plugins, editor.selection.currentSelectInfo]);
+
+    return showAddComment && containerStyle ? (
+        <ClickAwayListener onClickAway={() => setShowAddComment(false)}>
+            <StyledContainerForAddCommentContainer style={containerStyle}>
+                <AddComment
+                    editor={editor}
+                    selectionInfo={selectionInfo}
+                    setShow={setShowAddComment}
+                />
+            </StyledContainerForAddCommentContainer>
+        </ClickAwayListener>
+    ) : null;
+};
+
+const StyledContainerForAddCommentContainer = styled('div')(({ theme }) => {
+    return {
+        position: 'fixed',
+        zIndex: 1,
+        display: 'flex',
+        borderRadius: theme.affine.shape.borderRadius,
+        boxShadow: theme.affine.shadows.shadowSxDownLg,
+        backgroundColor: theme.affine.palette.white,
+    };
+});
diff --git a/libs/components/editor-plugins/src/comment/Plugin.tsx b/libs/components/editor-plugins/src/comment/Plugin.tsx
new file mode 100644
index 000000000..a454aafe9
--- /dev/null
+++ b/libs/components/editor-plugins/src/comment/Plugin.tsx
@@ -0,0 +1,40 @@
+import { StrictMode } from 'react';
+import { BasePlugin } from '../base-plugin';
+import { PluginRenderRoot } from '../utils';
+import { AddCommentPluginContainer } from './Container';
+
+const PLUGIN_NAME = 'add-comment-plugin';
+
+export class AddCommentPlugin extends BasePlugin {
+    public static override get pluginName(): string {
+        return PLUGIN_NAME;
+    }
+
+    private root: PluginRenderRoot;
+
+    protected override on_render(): void {
+        this.root = new PluginRenderRoot({
+            name: AddCommentPlugin.pluginName,
+            render: this.editor.reactRenderRoot?.render,
+        });
+
+        this.root.mount();
+        this.renderAddComment();
+    }
+
+    private renderAddComment(): void {
+        this.root?.render(
+            <StrictMode>
+                <AddCommentPluginContainer
+                    editor={this.editor}
+                    hooks={this.hooks}
+                />
+            </StrictMode>
+        );
+    }
+
+    public override dispose() {
+        this.root?.unmount();
+        super.dispose();
+    }
+}
diff --git a/libs/components/editor-plugins/src/comment/index.ts b/libs/components/editor-plugins/src/comment/index.ts
new file mode 100644
index 000000000..a89460a81
--- /dev/null
+++ b/libs/components/editor-plugins/src/comment/index.ts
@@ -0,0 +1 @@
+export { AddCommentPlugin } from './Plugin';
diff --git a/libs/components/editor-plugins/src/comment/use-add-comment.ts b/libs/components/editor-plugins/src/comment/use-add-comment.ts
new file mode 100644
index 000000000..d5572801a
--- /dev/null
+++ b/libs/components/editor-plugins/src/comment/use-add-comment.ts
@@ -0,0 +1,78 @@
+import { useState, useCallback } from 'react';
+import { useParams } from 'react-router-dom';
+import { services } from '@toeverything/datasource/db-service';
+import { WithEditorSelectionType } from '../menu/inline-menu/types';
+
+export const useAddComment = ({
+    editor,
+    selectionInfo,
+    setShow,
+}: WithEditorSelectionType) => {
+    const { workspace_id: workspaceId, page_id: pageId } = useParams();
+    const [currentComment, setCurrentComment] = useState('');
+
+    const createComment = useCallback(async (): Promise<{
+        commentsId: string;
+    }> => {
+        const selectedBlockId = selectionInfo?.anchorNode?.id;
+        if (!currentComment || !currentComment.trim()) {
+            throw new Error(
+                'Comment content must not be empty before creating in db. '
+            );
+        }
+        if (!selectedBlockId) {
+            throw new Error(
+                'Commented block id must not be empty before creating in db. '
+            );
+        }
+
+        const created = await services.api.commentService.createComment({
+            workspace: workspaceId,
+            pageId: pageId,
+            attachedToBlocksIds: [selectionInfo.anchorNode.id],
+            quote: {
+                value: [
+                    {
+                        text: editor.blockHelper.getBlockTextBetweenSelection(
+                            selectedBlockId
+                        ),
+                    },
+                ],
+            },
+            content: {
+                value: [{ text: currentComment }],
+            },
+        });
+
+        return created;
+    }, [
+        currentComment,
+        editor.blockHelper,
+        pageId,
+        selectionInfo?.anchorNode?.id,
+        workspaceId,
+    ]);
+
+    const handleSubmitCurrentComment = useCallback(async () => {
+        const textBlockId = selectionInfo.anchorNode.id;
+        if (!textBlockId) return;
+        const created = await createComment();
+        const commentId = created?.commentsId;
+
+        if (commentId) {
+            editor.blockHelper.addComment(textBlockId, commentId);
+            setShow(false);
+        }
+    }, [
+        createComment,
+        editor.blockHelper,
+        selectionInfo.anchorNode.id,
+        setShow,
+    ]);
+    return {
+        currentComment,
+        setCurrentComment,
+        createComment,
+        handleSubmitCurrentComment,
+    };
+};
diff --git a/libs/components/editor-plugins/src/comment/utils.ts b/libs/components/editor-plugins/src/comment/utils.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/libs/components/editor-plugins/src/index.ts b/libs/components/editor-plugins/src/index.ts
new file mode 100644
index 000000000..be7bb9bd9
--- /dev/null
+++ b/libs/components/editor-plugins/src/index.ts
@@ -0,0 +1,27 @@
+import type { PluginCreator } from '@toeverything/framework/virgo';
+import {
+    LeftMenuPlugin,
+    InlineMenuPlugin,
+    CommandMenuPlugin,
+    ReferenceMenuPlugin,
+    SelectionGroupPlugin,
+    GroupMenuPlugin,
+} from './menu';
+import { TemplatePlugin } from './template';
+import { FullTextSearchPlugin } from './search';
+import { AddCommentPlugin } from './comment';
+// import { PlaceholderPlugin } from './placeholder';
+
+// import { BlockPropertyPlugin } from './block-property';
+
+export const plugins: PluginCreator[] = [
+    FullTextSearchPlugin,
+    LeftMenuPlugin,
+    InlineMenuPlugin,
+    CommandMenuPlugin,
+    ReferenceMenuPlugin,
+    TemplatePlugin,
+    SelectionGroupPlugin,
+    AddCommentPlugin,
+    GroupMenuPlugin,
+];
diff --git a/libs/components/editor-plugins/src/menu/command-menu/Categories.tsx b/libs/components/editor-plugins/src/menu/command-menu/Categories.tsx
new file mode 100644
index 000000000..b24d9825e
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/command-menu/Categories.tsx
@@ -0,0 +1,91 @@
+import { useMemo } from 'react';
+import style9 from 'style9';
+
+import { CommandMenuCategories } from './config';
+
+type MenuCategoriesProps = {
+    currentCategories: CommandMenuCategories;
+    onSetCategories?: (categories: CommandMenuCategories) => void;
+    categories: Array<CommandMenuCategories>;
+};
+
+export const MenuCategories = ({
+    currentCategories,
+    onSetCategories,
+    categories,
+}: MenuCategoriesProps) => {
+    const categories_data = useMemo(() => {
+        return [
+            {
+                type: CommandMenuCategories.pages,
+                text: 'PAGES',
+            },
+            {
+                type: CommandMenuCategories.typesetting,
+                text: 'TYPESETTING',
+            },
+            {
+                type: CommandMenuCategories.lists,
+                text: 'LISTS',
+            },
+            {
+                type: CommandMenuCategories.media,
+                text: 'MEDIA',
+            },
+            {
+                type: CommandMenuCategories.blocks,
+                text: 'BLOCKS',
+            },
+        ];
+    }, []);
+
+    const handle_click = (type: CommandMenuCategories) => {
+        onSetCategories && onSetCategories(type);
+    };
+
+    return (
+        <div className={styles('rootContainer')}>
+            {categories_data.map((menu_category, index) => {
+                const { type, text } = menu_category;
+                return categories.includes(type) ? (
+                    <button
+                        className={styles({
+                            categoryItem: true,
+                            activeItem: currentCategories === type,
+                        })}
+                        key={type}
+                        onClick={() => {
+                            handle_click(type);
+                        }}
+                    >
+                        {text}
+                    </button>
+                ) : null;
+            })}
+        </div>
+    );
+};
+
+const styles = style9.create({
+    rootContainer: {
+        minWidth: '120px',
+        marginTop: '6px',
+    },
+    categoryItem: {
+        display: 'flex',
+        width: '120px',
+        paddingLeft: '12px',
+        paddingTop: '6px',
+        paddingBottom: '6px',
+        borderRadius: '5px',
+        color: '#98ACBD',
+        fontSize: '12px',
+        lineHeight: '14px',
+        fontFamily: 'Helvetica,Arial,"Microsoft Yahei",SimHei,sans-serif',
+        textAlign: 'justify',
+        letterSpacing: '1.5px',
+    },
+    activeItem: {
+        backgroundColor: 'rgba(152, 172, 189, 0.1)',
+    },
+});
diff --git a/libs/components/editor-plugins/src/menu/command-menu/CommandMenu.tsx b/libs/components/editor-plugins/src/menu/command-menu/CommandMenu.tsx
new file mode 100644
index 000000000..f12080713
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/command-menu/CommandMenu.tsx
@@ -0,0 +1,34 @@
+import { StrictMode } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+import { BasePlugin } from '../../base-plugin';
+import { CommandMenu } from './Menu';
+
+const PLUGIN_NAME = 'command-menu';
+
+export class CommandMenuPlugin extends BasePlugin {
+    private root?: Root;
+
+    public static override get pluginName(): string {
+        return PLUGIN_NAME;
+    }
+
+    protected override on_render(): void {
+        const container = document.createElement('div');
+        // TODO remove
+        container.classList.add(`id-${PLUGIN_NAME}`);
+        // this.editor.attachElement(this.menu_container);
+        window.document.body.appendChild(container);
+        this.root = createRoot(container);
+        this.render_command_menu();
+    }
+
+    private renderCommandMenu(): void {
+        //TODO If you change to PluginRenderRoot here, you need to support PluginRenderRoot under body
+        this.root?.render(
+            <StrictMode>
+                <CommandMenu editor={this.editor} hooks={this.hooks} />
+            </StrictMode>
+        );
+    }
+}
diff --git a/libs/components/editor-plugins/src/menu/command-menu/Container.tsx b/libs/components/editor-plugins/src/menu/command-menu/Container.tsx
new file mode 100644
index 000000000..b8e48b85f
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/command-menu/Container.tsx
@@ -0,0 +1,257 @@
+import React, {
+    useEffect,
+    useState,
+    useMemo,
+    useCallback,
+    useRef,
+} from 'react';
+import style9 from 'style9';
+
+import { BlockFlavorKeys } from '@toeverything/datasource/db-service';
+import { Virgo, PluginHooks, HookType } from '@toeverything/framework/virgo';
+import {
+    CommonList,
+    CommonListItem,
+    commonListContainer,
+} from '@toeverything/components/common';
+import { domToRect } from '@toeverything/utils';
+
+import { MenuCategories } from './Categories';
+import { menuItemsMap, CommandMenuCategories } from './config';
+import { QueryResult } from '../../search';
+
+export type CommandMenuContainerProps = {
+    editor: Virgo;
+    hooks: PluginHooks;
+    style?: React.CSSProperties;
+    isShow?: boolean;
+    blockId: string;
+    onSelected?: (item: BlockFlavorKeys | string) => void;
+    onclose?: () => void;
+    searchBlocks?: QueryResult;
+    types?: Array<BlockFlavorKeys | string>;
+    categories: Array<CommandMenuCategories>;
+};
+
+export const CommandMenuContainer = ({
+    hooks,
+    isShow = false,
+    onSelected,
+    onclose,
+    types,
+    categories,
+    searchBlocks,
+    style,
+}: CommandMenuContainerProps) => {
+    const menu_ref = useRef<HTMLDivElement>(null);
+    const [current_item, set_current_item] = useState<
+        BlockFlavorKeys | string | undefined
+    >();
+    const [need_check_into_view, set_need_check_into_view] =
+        useState<boolean>(false);
+
+    const current_category = useMemo(
+        () =>
+            (Object.entries(menuItemsMap).find(
+                ([, infos]) =>
+                    infos.findIndex(info => current_item === info.type) !== -1
+            )?.[0] || CommandMenuCategories.pages) as CommandMenuCategories,
+        [current_item]
+    );
+
+    useEffect(() => {
+        if (need_check_into_view) {
+            if (current_item && menu_ref.current) {
+                const item_ele =
+                    menu_ref.current.querySelector<HTMLButtonElement>(
+                        `.item-${current_item}`
+                    );
+                const scroll_ele =
+                    menu_ref.current.querySelector<HTMLButtonElement>(
+                        `.${commonListContainer}`
+                    );
+                if (item_ele) {
+                    const itemRect = domToRect(item_ele);
+                    const scrollRect = domToRect(scroll_ele);
+                    if (
+                        itemRect.top < scrollRect.top ||
+                        itemRect.bottom > scrollRect.bottom
+                    ) {
+                        // IMP: may be do it with self function
+                        item_ele.scrollIntoView({
+                            block: 'nearest',
+                        });
+                    }
+                }
+            }
+            set_need_check_into_view(false);
+        }
+    }, [need_check_into_view, current_item]);
+
+    useEffect(() => {
+        if (isShow && types) {
+            set_current_item(types[0]);
+        }
+        if (!isShow) {
+            onclose && onclose();
+        }
+    }, [isShow]);
+
+    useEffect(() => {
+        if (isShow && types) {
+            if (!types.includes(current_item)) {
+                set_need_check_into_view(true);
+                if (types.length) {
+                    set_current_item(types[0]);
+                } else {
+                    set_current_item(undefined);
+                }
+            }
+        }
+    }, [isShow, types, current_item]);
+
+    const handle_click_up = useCallback(
+        (event: React.KeyboardEvent<HTMLDivElement>) => {
+            if (isShow && types && event.code === 'ArrowUp') {
+                event.preventDefault();
+                if (!current_item && types.length) {
+                    set_current_item(types[types.length - 1]);
+                }
+                if (current_item) {
+                    const idx = types.indexOf(current_item);
+                    if (idx > 0) {
+                        set_need_check_into_view(true);
+                        set_current_item(types[idx - 1]);
+                    }
+                }
+            }
+        },
+        [isShow, types, current_item]
+    );
+
+    const handle_click_down = useCallback(
+        (event: React.KeyboardEvent<HTMLDivElement>) => {
+            if (isShow && types && event.code === 'ArrowDown') {
+                event.preventDefault();
+                if (!current_item && types.length) {
+                    set_current_item(types[0]);
+                }
+                if (current_item) {
+                    const idx = types.indexOf(current_item);
+                    if (idx < types.length - 1) {
+                        set_need_check_into_view(true);
+                        set_current_item(types[idx + 1]);
+                    }
+                }
+            }
+        },
+        [isShow, types, current_item]
+    );
+
+    const handle_click_enter = useCallback(
+        async (event: React.KeyboardEvent<HTMLDivElement>) => {
+            if (isShow && event.code === 'Enter' && current_item) {
+                event.preventDefault();
+                onSelected && onSelected(current_item);
+            }
+        },
+        [isShow, current_item, onSelected]
+    );
+
+    const handle_key_down = useCallback(
+        (event: React.KeyboardEvent<HTMLDivElement>) => {
+            handle_click_up(event);
+            handle_click_down(event);
+            handle_click_enter(event);
+        },
+        [handle_click_up, handle_click_down, handle_click_enter]
+    );
+
+    useEffect(() => {
+        hooks.addHook(HookType.ON_ROOT_NODE_KEYDOWN_CAPTURE, handle_key_down);
+
+        return () => {
+            hooks.removeHook(
+                HookType.ON_ROOT_NODE_KEYDOWN_CAPTURE,
+                handle_key_down
+            );
+        };
+    }, [hooks, handle_key_down]);
+
+    const handleSetCategories = (type: CommandMenuCategories) => {
+        const newItem = menuItemsMap[type][0].type;
+        set_need_check_into_view(true);
+        set_current_item(newItem);
+    };
+
+    const items = useMemo(() => {
+        const blocks = searchBlocks?.map(
+            block => ({ block } as CommonListItem)
+        );
+        if (blocks?.length) {
+            blocks.push({ divider: CommandMenuCategories.pages });
+        }
+        return [
+            ...(blocks || []),
+            ...Object.entries(menuItemsMap).flatMap(
+                ([category, items], idx, all) => {
+                    let render_separator = false;
+                    const lines: CommonListItem[] = items
+                        .filter(item => types.includes(item.type))
+                        .map(item => {
+                            const { text, type, icon } = item;
+                            render_separator = true;
+                            return {
+                                content: { id: type, content: text, icon },
+                            };
+                        });
+                    if (render_separator && idx !== all.length - 1) {
+                        lines.push({ divider: category });
+                    }
+                    return lines;
+                }
+            ),
+        ];
+    }, [searchBlocks, types]);
+
+    return isShow ? (
+        <div
+            ref={menu_ref}
+            className={styles('rootContainer')}
+            onKeyDownCapture={handle_key_down}
+            style={style}
+        >
+            <div className={styles('contentContainer')}>
+                <MenuCategories
+                    currentCategories={current_category}
+                    onSetCategories={handleSetCategories}
+                    categories={categories}
+                />
+                <CommonList
+                    items={items}
+                    onSelected={type => onSelected?.(type)}
+                    currentItem={current_item}
+                    setCurrentItem={set_current_item}
+                />
+            </div>
+        </div>
+    ) : null;
+};
+
+const styles = style9.create({
+    rootContainer: {
+        position: 'fixed',
+        zIndex: 1,
+        width: 352,
+        maxHeight: 525,
+        borderRadius: '10px',
+        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+        backgroundColor: '#fff',
+        padding: '8px 4px',
+    },
+    contentContainer: {
+        display: 'flex',
+        overflow: 'hidden',
+        maxHeight: 493,
+    },
+});
diff --git a/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx b/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx
new file mode 100644
index 000000000..d537ee2fe
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx
@@ -0,0 +1,265 @@
+import { BlockFlavorKeys, Protocol } from '@toeverything/datasource/db-service';
+import React, {
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import style9 from 'style9';
+
+import { MuiClickAwayListener } from '@toeverything/components/ui';
+import { Virgo, HookType, PluginHooks } from '@toeverything/framework/virgo';
+import { Point } from '@toeverything/utils';
+
+import { CommandMenuContainer } from './Container';
+import {
+    CommandMenuCategories,
+    commandMenuHandlerMap,
+    commonCommandMenuHandler,
+    menuItemsMap,
+} from './config';
+import { QueryBlocks, QueryResult } from '../../search';
+
+export type CommandMenuProps = {
+    editor: Virgo;
+    hooks: PluginHooks;
+    style?: { left: number; top: number };
+};
+type CommandMenuPosition = {
+    left: number;
+    top: number | 'initial';
+    bottom: number | 'initial';
+};
+
+export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => {
+    const [is_show, set_is_show] = useState(false);
+    const [block_id, set_block_id] = useState<string>();
+    const [commandMenuPosition, setCommandMenuPosition] =
+        useState<CommandMenuPosition>({
+            left: 0,
+            top: 0,
+            bottom: 0,
+        });
+
+    const [search_text, set_search_text] = useState<string>('');
+    const [search_blocks, set_search_blocks] = useState<QueryResult>([]);
+    const commandMenuContentRef = useRef();
+    // TODO: Two-way link to be developed
+    // useEffect(() => {
+    //     QueryBlocks(editor, search_text, result => set_search_blocks(result));
+    // }, [editor, search_text]);
+
+    const [types, categories] = useMemo(() => {
+        const types: Array<BlockFlavorKeys | string> = [];
+        const categories: Array<CommandMenuCategories> = [];
+        if (search_blocks.length) {
+            Object.values(search_blocks).forEach(({ id }) => types.push(id));
+            categories.push(CommandMenuCategories.pages);
+        }
+        Object.entries(menuItemsMap).forEach(([category, itemInfoList]) => {
+            itemInfoList.forEach(info => {
+                if (
+                    !search_text ||
+                    info.text.toLowerCase().includes(search_text.toLowerCase())
+                ) {
+                    types.push(info.type);
+                }
+
+                if (
+                    !categories.includes(category as CommandMenuCategories) ||
+                    types.includes(info.type)
+                ) {
+                    categories.push(category as CommandMenuCategories);
+                }
+            });
+        });
+        return [types, categories];
+    }, [search_blocks, search_text]);
+
+    const check_if_show_command_menu = useCallback(
+        async (event: React.KeyboardEvent<HTMLDivElement>) => {
+            const { type, anchorNode } = editor.selection.currentSelectInfo;
+            if (event.key === '/' && type === 'Range') {
+                if (anchorNode) {
+                    const text = editor.blockHelper.getBlockTextBeforeSelection(
+                        anchorNode.id
+                    );
+                    if (text.endsWith('/')) {
+                        set_block_id(anchorNode.id);
+                        editor.blockHelper.removeSearchSlash(block_id);
+                        setTimeout(() => {
+                            const textSelection =
+                                editor.blockHelper.selectionToSlateRange(
+                                    anchorNode.id,
+                                    editor.selection.currentSelectInfo
+                                        .browserSelection
+                                );
+                            if (textSelection) {
+                                const { anchor } = textSelection;
+                                editor.blockHelper.setSearchSlash(
+                                    anchorNode.id,
+                                    anchor
+                                );
+                            }
+                        });
+                        set_search_text('');
+                        set_is_show(true);
+                        const rect =
+                            editor.selection.currentSelectInfo?.browserSelection
+                                ?.getRangeAt(0)
+                                ?.getBoundingClientRect();
+                        if (rect) {
+                            let top = rect.top;
+                            let clientHeight =
+                                document.documentElement.clientHeight;
+
+                            const COMMAND_MENU_HEIGHT = 509;
+                            if (clientHeight - top <= COMMAND_MENU_HEIGHT) {
+                                top = clientHeight - top + 10;
+                                setCommandMenuPosition({
+                                    left: rect.left,
+                                    bottom: top,
+                                    top: 'initial',
+                                });
+                            } else {
+                                top += 24;
+                                setCommandMenuPosition({
+                                    left: rect.left,
+                                    top: top,
+                                    bottom: 'initial',
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        [editor, block_id]
+    );
+
+    const handle_click_others = useCallback(
+        (event: React.KeyboardEvent<HTMLDivElement>) => {
+            if (is_show) {
+                const { anchorNode } = editor.selection.currentSelectInfo;
+                if (anchorNode.id !== block_id) {
+                    set_is_show(false);
+                    return;
+                }
+                setTimeout(() => {
+                    const searchText =
+                        editor.blockHelper.getSearchSlashText(block_id);
+                    // check if has search text
+                    if (searchText && searchText.startsWith('/')) {
+                        set_search_text(searchText.slice(1));
+                    } else {
+                        set_is_show(false);
+                    }
+                    if (searchText.length > 6 && !types.length) {
+                        set_is_show(false);
+                    }
+                });
+            }
+        },
+        [editor, is_show, block_id, types]
+    );
+
+    const handle_keyup = useCallback(
+        (event: React.KeyboardEvent<HTMLDivElement>) => {
+            check_if_show_command_menu(event);
+            handle_click_others(event);
+        },
+        [check_if_show_command_menu, handle_click_others]
+    );
+
+    const handle_key_down = useCallback(
+        (event: React.KeyboardEvent<HTMLDivElement>) => {
+            if (event.code === 'Escape') {
+                set_is_show(false);
+            }
+        },
+        []
+    );
+
+    useEffect(() => {
+        hooks.addHook(HookType.ON_ROOT_NODE_KEYUP, handle_keyup);
+        hooks.addHook(HookType.ON_ROOT_NODE_KEYDOWN_CAPTURE, handle_key_down);
+
+        return () => {
+            hooks.removeHook(HookType.ON_ROOT_NODE_KEYUP, handle_keyup);
+            hooks.removeHook(
+                HookType.ON_ROOT_NODE_KEYDOWN_CAPTURE,
+                handle_key_down
+            );
+        };
+    }, [handle_keyup, handle_key_down, hooks]);
+
+    const handle_click_away = () => {
+        set_is_show(false);
+    };
+
+    const handle_selected = async (type: BlockFlavorKeys | string) => {
+        const text = await editor.commands.textCommands.getBlockText(block_id);
+        editor.blockHelper.removeSearchSlash(block_id, true);
+        if (type.startsWith('Virgo')) {
+            const handler =
+                commandMenuHandlerMap[Protocol.Block.Type.reference];
+            handler(block_id, type, editor);
+        } else if (text.length > 1) {
+            const handler = commandMenuHandlerMap[type];
+            if (handler) {
+                await handler(block_id, type, editor);
+            } else {
+                await commonCommandMenuHandler(block_id, type, editor);
+            }
+            const block = await editor.getBlockById(block_id);
+            block.remove();
+        } else {
+            if (Protocol.Block.Type[type as BlockFlavorKeys]) {
+                const block = await editor.commands.blockCommands.convertBlock(
+                    block_id,
+                    type as BlockFlavorKeys
+                );
+                block.firstCreateFlag = true;
+            }
+        }
+        set_is_show(false);
+    };
+
+    const handle_close = () => {
+        editor.blockHelper.removeSearchSlash(block_id);
+    };
+
+    return (
+        <div
+            className={styles('commandMenu')}
+            onKeyUpCapture={handle_keyup}
+            ref={commandMenuContentRef}
+        >
+            <MuiClickAwayListener onClickAway={handle_click_away}>
+                <CommandMenuContainer
+                    editor={editor}
+                    hooks={hooks}
+                    style={{
+                        ...commandMenuPosition,
+                        ...style,
+                    }}
+                    isShow={is_show}
+                    blockId={block_id}
+                    onSelected={handle_selected}
+                    onclose={handle_close}
+                    searchBlocks={search_blocks}
+                    types={types}
+                    categories={categories}
+                />
+            </MuiClickAwayListener>
+        </div>
+    );
+};
+
+const styles = style9.create({
+    commandMenu: {
+        position: 'absolute',
+        zIndex: 1,
+    },
+});
diff --git a/libs/components/editor-plugins/src/menu/command-menu/config.ts b/libs/components/editor-plugins/src/menu/command-menu/config.ts
new file mode 100644
index 000000000..8aa740f7a
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/command-menu/config.ts
@@ -0,0 +1,202 @@
+import type { FC } from 'react';
+import {
+    HeadingOneIcon,
+    HeadingTwoIcon,
+    HeadingThreeIcon,
+    ToDoIcon,
+    NumberIcon,
+    BulletIcon,
+    CodeIcon,
+    TextIcon,
+    PagesIcon,
+    ImageIcon,
+    FileIcon,
+    QuoteIcon,
+    CalloutIcon,
+    DividerIcon,
+    FigmaIcon,
+    YoutubeIcon,
+    EmbedIcon,
+} from '@toeverything/components/icons';
+import { SvgIconProps } from '@toeverything/components/ui';
+import { Virgo } from '@toeverything/framework/virgo';
+import { BlockFlavorKeys, Protocol } from '@toeverything/datasource/db-service';
+import { without } from '@toeverything/utils';
+
+export enum CommandMenuCategories {
+    pages = 'pages',
+    typesetting = 'typesetting',
+    lists = 'lists',
+    media = 'media',
+    blocks = 'blocks',
+}
+
+type ClickItemHandler = (
+    anchorNodeId: string,
+    type: BlockFlavorKeys | string,
+    editor: Virgo
+) => void;
+
+export type CommandMenuDataType = {
+    type: BlockFlavorKeys;
+    text: string;
+    icon: FC<SvgIconProps>;
+};
+
+export const commonCommandMenuHandler: ClickItemHandler = async (
+    anchorNodeId,
+    type,
+    editor
+) => {
+    if (anchorNodeId) {
+        if (Protocol.Block.Type[type as BlockFlavorKeys]) {
+            const block = await editor.commands.blockCommands.createNextBlock(
+                anchorNodeId,
+                type as BlockFlavorKeys
+            );
+            editor.selectionManager.activeNodeByNodeId(block.id);
+        }
+    }
+};
+
+export const menuItemsMap: {
+    [k in CommandMenuCategories]: Array<CommandMenuDataType>;
+} = {
+    [CommandMenuCategories.pages]: [],
+    [CommandMenuCategories.typesetting]: [
+        {
+            text: 'Text',
+            type: Protocol.Block.Type.text,
+            icon: TextIcon,
+        },
+        {
+            text: 'Page',
+            type: 'page',
+            icon: PagesIcon,
+        },
+        {
+            text: 'Heading 1',
+            type: Protocol.Block.Type.heading1,
+            icon: HeadingOneIcon,
+        },
+        {
+            text: 'Heading 2',
+            type: Protocol.Block.Type.heading2,
+            icon: HeadingTwoIcon,
+        },
+        {
+            text: 'Heading 3',
+            type: Protocol.Block.Type.heading3,
+            icon: HeadingThreeIcon,
+        },
+    ],
+    [CommandMenuCategories.lists]: [
+        {
+            text: 'To do',
+            type: Protocol.Block.Type.todo,
+            icon: ToDoIcon,
+        },
+        {
+            text: 'Number',
+            type: Protocol.Block.Type.numbered,
+            icon: NumberIcon,
+        },
+        {
+            text: 'Bullet',
+            type: Protocol.Block.Type.bullet,
+            icon: BulletIcon,
+        },
+    ],
+    [CommandMenuCategories.media]: [
+        {
+            text: 'Image',
+            type: Protocol.Block.Type.image,
+            icon: ImageIcon,
+        },
+        {
+            text: 'File',
+            type: Protocol.Block.Type.file,
+            icon: FileIcon,
+        },
+        {
+            text: 'Embed Link',
+            type: 'embedLink',
+            icon: EmbedIcon,
+        },
+        {
+            text: 'Figma',
+            type: Protocol.Block.Type.figma,
+            icon: FigmaIcon,
+        },
+        {
+            text: 'Youtube',
+            type: Protocol.Block.Type.youtube,
+            icon: YoutubeIcon,
+        },
+    ],
+    [CommandMenuCategories.blocks]: [
+        {
+            text: 'Code',
+            type: Protocol.Block.Type.code,
+            icon: CodeIcon,
+        },
+        {
+            text: 'Quote',
+            icon: QuoteIcon,
+            type: Protocol.Block.Type.quote,
+        },
+        {
+            text: 'Callout',
+            type: Protocol.Block.Type.callout,
+            icon: CalloutIcon,
+        },
+        {
+            text: 'Divider',
+            icon: DividerIcon,
+            type: Protocol.Block.Type.divider,
+        },
+    ],
+};
+
+export const defaultCategoriesList = without(
+    Object.keys(menuItemsMap),
+    'pages'
+) as Array<CommandMenuCategories>;
+
+export const defaultTypeList = Object.values(menuItemsMap).reduce(
+    (pre, cur) => {
+        cur.forEach(info => {
+            pre.push(info.type);
+        });
+        return pre;
+    },
+    [] as Array<BlockFlavorKeys>
+);
+
+export const commandMenuHandlerMap: Partial<{
+    [k in BlockFlavorKeys | string]: ClickItemHandler;
+}> = {
+    [Protocol.Block.Type.page]: () => {},
+    [Protocol.Block.Type.reference]: async (anchorNodeId, type, editor) => {
+        if (anchorNodeId) {
+            console.log(anchorNodeId, type, editor);
+            const reflink_block =
+                await editor.commands.blockCommands.createNextBlock(
+                    anchorNodeId,
+                    Protocol.Block.Type.reference
+                );
+            await reflink_block.setProperty('reference', type);
+        }
+    },
+    [Protocol.Block.Type.image]: async (anchorNodeId, type, editor) => {
+        if (anchorNodeId) {
+            const image_block =
+                await editor.commands.blockCommands.createNextBlock(
+                    anchorNodeId,
+                    Protocol.Block.Type.image
+                );
+            // set img block active open
+            image_block.firstCreateFlag = true;
+        }
+    },
+};
diff --git a/libs/components/editor-plugins/src/menu/command-menu/index.ts b/libs/components/editor-plugins/src/menu/command-menu/index.ts
new file mode 100644
index 000000000..137c6f0ab
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/command-menu/index.ts
@@ -0,0 +1 @@
+export * from './CommandMenu';
diff --git a/libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx b/libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx
new file mode 100644
index 000000000..642cbeeac
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx
@@ -0,0 +1,50 @@
+import { Button } from '@toeverything/components/common';
+import { AsyncBlock, Virgo } from '@toeverything/components/editor-core';
+import { HandleParentIcon } from '@toeverything/components/icons';
+import { styled } from '@toeverything/components/ui';
+import { Point } from '@toeverything/utils';
+
+export const ICON_WIDTH = 24;
+
+type DragItemProps = {
+    isShow: boolean;
+    groupBlock: AsyncBlock;
+    editor: Virgo;
+    onPositionChange?: (position: Point) => void;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export const DragItem = function ({
+    isShow,
+    editor,
+    groupBlock,
+    ...divProps
+}: DragItemProps) {
+    return (
+        <StyledDiv {...divProps}>
+            <StyledButton>
+                <HandleParentIcon />
+            </StyledButton>
+        </StyledDiv>
+    );
+};
+
+const StyledDiv = styled('div')({
+    padding: '0',
+    display: 'inlineFlex',
+    width: `${ICON_WIDTH}px`,
+    height: `${ICON_WIDTH}px`,
+    ':hover': {
+        backgroundColor: '#edeef0',
+        borderRadius: '4px',
+    },
+});
+
+const StyledButton = styled(Button)({
+    padding: '0',
+    display: 'inlineFlex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'transparent',
+    width: '100%',
+    height: '100%',
+});
diff --git a/libs/components/editor-plugins/src/menu/group-menu/GropuMenu.tsx b/libs/components/editor-plugins/src/menu/group-menu/GropuMenu.tsx
new file mode 100644
index 000000000..9b97b33c6
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/group-menu/GropuMenu.tsx
@@ -0,0 +1,189 @@
+import {
+    AsyncBlock,
+    HookType,
+    PluginHooks,
+    Virgo,
+} from '@toeverything/components/editor-core';
+import { domToRect, Point } from '@toeverything/utils';
+import { GroupDirection } from '@toeverything/framework/virgo';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { DragItem } from './DragItem';
+import { Line } from './Line';
+import { Menu } from './Menu';
+
+type GroupMenuProps = {
+    editor?: Virgo;
+    hooks: PluginHooks;
+};
+export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
+    const [groupBlock, setGroupBlock] = useState<AsyncBlock | null>(null);
+    const [showMenu, setShowMenu] = useState(false);
+    const [position, setPosition] = useState<Point>(new Point(0, 0));
+    const [dragOverGroup, setDragOverGroup] = useState<AsyncBlock | null>(null);
+    const [direction, setDirection] = useState<GroupDirection>(
+        GroupDirection.down
+    );
+    const menuRef = useRef<HTMLUListElement>(null);
+
+    const handleRootMouseMove = useCallback(
+        async (e: React.MouseEvent<HTMLDivElement>) => {
+            const groupBlockNew =
+                await editor.dragDropManager.getGroupBlockByPoint(
+                    new Point(e.clientX, e.clientY)
+                );
+            groupBlockNew && setGroupBlock(groupBlockNew || null);
+        },
+        [editor, setGroupBlock]
+    );
+
+    const handleRootMouseDown = useCallback(
+        (e: React.MouseEvent<HTMLDivElement>) => {
+            if (
+                menuRef.current &&
+                !menuRef.current.contains(e.target as Node)
+            ) {
+                setShowMenu(false);
+            }
+        },
+        [setShowMenu]
+    );
+
+    const handleRootDragOver = useCallback(
+        async (e: React.DragEvent<Element>) => {
+            let groupBlockOnDragOver = null;
+            const mousePoint = new Point(e.clientX, e.clientY);
+            if (editor.dragDropManager.isDragGroup(e)) {
+                groupBlockOnDragOver =
+                    await editor.dragDropManager.getGroupBlockByPoint(
+                        mousePoint
+                    );
+                if (groupBlockOnDragOver?.id === groupBlock?.id) {
+                    groupBlockOnDragOver = null;
+                }
+            }
+            setDragOverGroup(groupBlockOnDragOver || null);
+            const direction =
+                await editor.dragDropManager.checkDragGroupDirection(
+                    groupBlock,
+                    groupBlockOnDragOver,
+                    mousePoint
+                );
+            setDirection(direction);
+        },
+        [editor, groupBlock]
+    );
+
+    const handleRootDrop = useCallback(
+        async (e: React.DragEvent<Element>) => {
+            let groupBlockOnDrop = null;
+            if (editor.dragDropManager.isDragGroup(e)) {
+                groupBlockOnDrop =
+                    await editor.dragDropManager.getGroupBlockByPoint(
+                        new Point(e.clientX, e.clientY)
+                    );
+                if (groupBlockOnDrop?.id === groupBlock?.id) {
+                    groupBlockOnDrop = null;
+                }
+            }
+        },
+        [editor, groupBlock]
+    );
+
+    const handleRootDragEnd = () => {
+        setDragOverGroup(null);
+    };
+
+    useEffect(() => {
+        hooks.addHook(HookType.ON_ROOTNODE_MOUSE_MOVE, handleRootMouseMove);
+        hooks.addHook(HookType.ON_ROOTNODE_MOUSE_DOWN, handleRootMouseDown);
+        hooks.addHook(HookType.ON_ROOTNODE_DRAG_OVER, handleRootDragOver);
+        hooks.addHook(HookType.ON_ROOTNODE_DRAG_END, handleRootDragEnd);
+        return () => {
+            hooks.removeHook(
+                HookType.ON_ROOTNODE_MOUSE_MOVE,
+                handleRootMouseMove
+            );
+            hooks.removeHook(
+                HookType.ON_ROOTNODE_MOUSE_DOWN,
+                handleRootMouseDown
+            );
+            hooks.removeHook(
+                HookType.ON_ROOTNODE_DRAG_OVER,
+                handleRootDragOver
+            );
+            hooks.removeHook(HookType.ON_ROOTNODE_DRAG_END, handleRootDragEnd);
+        };
+    }, [
+        hooks,
+        handleRootMouseMove,
+        handleRootMouseDown,
+        handleRootDragOver,
+        handleRootDrop,
+    ]);
+
+    useEffect(() => {
+        if (groupBlock && groupBlock.dom) {
+            if (editor.container) {
+                setPosition(
+                    new Point(
+                        groupBlock.dom.offsetLeft - editor.container.offsetLeft,
+                        groupBlock.dom.offsetTop - editor.container.offsetTop
+                    )
+                );
+            }
+        }
+    }, [groupBlock, editor]);
+
+    const handleClick = () => {
+        setShowMenu(!showMenu);
+    };
+
+    const handleDragStart = async (e: React.DragEvent<HTMLDivElement>) => {
+        const dragImage = await editor.blockHelper.getBlockDragImg(
+            groupBlock.id
+        );
+        if (dragImage) {
+            e.dataTransfer.setDragImage(dragImage, 0, 0);
+            editor.dragDropManager.setDragGroupInfo(e, groupBlock.id);
+        }
+    };
+
+    const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation();
+    };
+
+    useEffect(() => {
+        setShowMenu(false);
+    }, [groupBlock]);
+
+    return (
+        <>
+            {groupBlock ? (
+                <Menu
+                    editor={editor}
+                    groupBlock={groupBlock}
+                    position={position}
+                    visible={showMenu}
+                    setVisible={setShowMenu}
+                    setGroupBlock={setGroupBlock}
+                    menuRef={menuRef}
+                >
+                    <DragItem
+                        editor={editor}
+                        isShow={!!groupBlock}
+                        groupBlock={groupBlock}
+                        onClick={handleClick}
+                        onDragStart={handleDragStart}
+                        onMouseDown={handleMouseDown}
+                        draggable={true}
+                    />
+                </Menu>
+            ) : null}
+            <Line
+                groupBlock={dragOverGroup}
+                editor={editor}
+                direction={direction}
+            />
+        </>
+    );
+};
diff --git a/libs/components/editor-plugins/src/menu/group-menu/Line.tsx b/libs/components/editor-plugins/src/menu/group-menu/Line.tsx
new file mode 100644
index 000000000..4613f37dd
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/group-menu/Line.tsx
@@ -0,0 +1,63 @@
+import {
+    AsyncBlock,
+    GroupDirection,
+    Virgo,
+} from '@toeverything/components/editor-core';
+import { Rect } from '@toeverything/utils';
+import { styled } from '@toeverything/components/ui';
+import { useEffect, useState } from 'react';
+
+type LineProps = {
+    groupBlock: AsyncBlock | null;
+    editor: Virgo;
+    direction: GroupDirection;
+};
+
+const LINE_WEIGHT = 2;
+
+export const Line = function ({ direction, editor, groupBlock }: LineProps) {
+    const [isShow, setIsShow] = useState<boolean>(false);
+    const [rect, setRect] = useState<Rect | null>(null);
+    useEffect(() => {
+        if (groupBlock && groupBlock.dom && editor.container) {
+            setRect(
+                Rect.fromLWTH(
+                    groupBlock.dom.offsetLeft - editor.container.offsetLeft,
+                    groupBlock.dom.offsetWidth,
+                    groupBlock.dom.offsetTop - editor.container.offsetTop,
+                    groupBlock.dom.offsetHeight
+                )
+            );
+            setIsShow(true);
+        } else {
+            setIsShow(false);
+        }
+    }, [groupBlock, editor.container]);
+
+    const computeLineStyle = (): React.CSSProperties => {
+        if (!rect) {
+            return {};
+        }
+        return direction === GroupDirection.down
+            ? {
+                  top: rect.bottom + LINE_WEIGHT,
+                  left: rect.left,
+                  width: rect.width,
+              }
+            : {
+                  top: rect.top - LINE_WEIGHT,
+                  left: rect.left,
+                  width: rect.width,
+              };
+    };
+
+    return isShow ? <LineDiv style={computeLineStyle()} /> : null;
+};
+
+// TODO: use absolute position
+const LineDiv = styled('div')({
+    zIndex: 2,
+    position: 'absolute',
+    background: '#502EC4',
+    height: LINE_WEIGHT,
+});
diff --git a/libs/components/editor-plugins/src/menu/group-menu/Menu.tsx b/libs/components/editor-plugins/src/menu/group-menu/Menu.tsx
new file mode 100644
index 000000000..85ea1bcbd
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/group-menu/Menu.tsx
@@ -0,0 +1,98 @@
+import { AsyncBlock, Virgo } from '@toeverything/components/editor-core';
+import { DeleteCashBinIcon } from '@toeverything/components/icons';
+import { Popover, styled } from '@toeverything/components/ui';
+import { Point } from '@toeverything/utils';
+import { PropsWithChildren } from 'react';
+import { ICON_WIDTH } from './DragItem';
+
+type MenuProps = {
+    visible: boolean;
+    setVisible: (visible: boolean) => void;
+    setGroupBlock: (groupBlock: AsyncBlock | null) => void;
+    position: Point;
+    editor: Virgo;
+    groupBlock: AsyncBlock;
+    menuRef: React.RefObject<HTMLUListElement>;
+};
+
+export const Menu = ({
+    children,
+    position,
+    groupBlock,
+    setVisible,
+    visible,
+    setGroupBlock,
+    menuRef,
+}: PropsWithChildren<MenuProps>) => {
+    const handlerDeleteGroup = () => {
+        groupBlock.remove();
+        setVisible(false);
+        setGroupBlock(null);
+    };
+
+    const Content = () => {
+        return (
+            <MenuUl ref={menuRef}>
+                <MenuItem onClick={handlerDeleteGroup}>
+                    <IconContainer>
+                        <DeleteCashBinIcon />
+                    </IconContainer>
+                    Delete
+                </MenuItem>
+            </MenuUl>
+        );
+    };
+
+    return (
+        <Popover
+            content={<Content />}
+            placement={'bottom-start'}
+            visible={visible}
+            anchorStyle={{
+                position: 'absolute',
+                top: position.y,
+                left: position.x - ICON_WIDTH,
+                height: ICON_WIDTH,
+            }}
+        >
+            {children}
+        </Popover>
+    );
+};
+
+const MenuUl = styled('ul')(({ theme }) => ({
+    fontFamily: 'PingFang SC',
+    background: '#FFF',
+    color: '#4C6275',
+    fontWeight: '400',
+}));
+
+const MenuItem = styled('li')(({ theme }) => ({
+    fontWeight: '400',
+    width: '268px',
+    height: '32px',
+    lineHeight: '32px',
+    display: 'flex',
+    fontSize: '14px',
+    borderRadius: '5px',
+    cursor: 'pointer',
+    '&:hover': {
+        backgroundColor: '#F5F7F8',
+    },
+}));
+
+const IconContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    height: '32px',
+    margin: '0 8px',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    lineHeight: '32px',
+    fontSize: '20px',
+    '&, & > svg': {
+        width: '20px',
+    },
+    '& > svg': {
+        height: '20px',
+    },
+}));
diff --git a/libs/components/editor-plugins/src/menu/group-menu/Plugin.tsx b/libs/components/editor-plugins/src/menu/group-menu/Plugin.tsx
new file mode 100644
index 000000000..93cab7bab
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/group-menu/Plugin.tsx
@@ -0,0 +1,41 @@
+import { StrictMode } from 'react';
+
+import { BasePlugin } from '../../base-plugin';
+import { PluginRenderRoot } from '../../utils';
+import { GroupMenu } from './GropuMenu';
+// import { CommandMenu } from './Menu';
+
+const PLUGIN_NAME = 'group-menu';
+
+export class GroupMenuPlugin extends BasePlugin {
+    private root?: PluginRenderRoot;
+    public static override get pluginName(): string {
+        return PLUGIN_NAME;
+    }
+
+    protected override on_render(): void {
+        if (this.editor.isWhiteboard) return;
+        const container = document.createElement('div');
+        // TODO remove
+        container.classList.add(`id-${PLUGIN_NAME}`);
+        this.root = new PluginRenderRoot({
+            name: PLUGIN_NAME,
+            render: this.editor.reactRenderRoot.render,
+        });
+        this.root.mount();
+        this._renderGroupMenu();
+    }
+
+    public override dispose() {
+        this.root?.unmount();
+        super.dispose();
+    }
+
+    private _renderGroupMenu(): void {
+        this.root?.render(
+            <StrictMode>
+                <GroupMenu editor={this.editor} hooks={this.hooks} />
+            </StrictMode>
+        );
+    }
+}
diff --git a/libs/components/editor-plugins/src/menu/group-menu/index.ts b/libs/components/editor-plugins/src/menu/group-menu/index.ts
new file mode 100644
index 000000000..7f95bfcb7
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/group-menu/index.ts
@@ -0,0 +1 @@
+export * from './Plugin';
diff --git a/libs/components/editor-plugins/src/menu/index.ts b/libs/components/editor-plugins/src/menu/index.ts
new file mode 100644
index 000000000..50d413365
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/index.ts
@@ -0,0 +1,9 @@
+export { InlineMenuPlugin } from './inline-menu';
+export { LeftMenuPlugin } from './left-menu/LeftMenuPlugin';
+export { CommandMenuPlugin } from './command-menu';
+export { ReferenceMenuPlugin } from './reference-menu';
+export { SelectionGroupPlugin } from './selection-group-menu';
+
+export { MENU_WIDTH as menuWidth } from './left-menu/menu-config';
+
+export { GroupMenuPlugin } from './group-menu';
diff --git a/libs/components/editor-plugins/src/menu/inline-menu/Container.tsx b/libs/components/editor-plugins/src/menu/inline-menu/Container.tsx
new file mode 100644
index 000000000..2b4ca2130
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/inline-menu/Container.tsx
@@ -0,0 +1,108 @@
+import { useState, useEffect } from 'react';
+import style9 from 'style9';
+import {
+    MuiClickAwayListener as ClickAwayListener,
+    MuiGrow as Grow,
+} from '@toeverything/components/ui';
+
+import {
+    Virgo,
+    PluginHooks,
+    SelectionInfo,
+} from '@toeverything/framework/virgo';
+import { InlineMenuToolbar } from './Toolbar';
+
+export type InlineMenuContainerProps = {
+    style?: { left: number; top: number };
+    editor: Virgo;
+    hooks: PluginHooks;
+};
+
+export const InlineMenuContainer = ({
+    editor,
+    style,
+    hooks,
+}: InlineMenuContainerProps) => {
+    const [showMenu, setShowMenu] = useState(false);
+    const [containerStyle, setContainerStyle] = useState<{
+        left: number;
+        top: number;
+    }>(null);
+    const [selectionInfo, setSelectionInfo] = useState<SelectionInfo>();
+
+    useEffect(() => {
+        // const unsubscribe = editor.selection.onSelectionChange(info => {
+        const unsubscribe = editor.selection.onSelectEnd(info => {
+            const { type, browserSelection, anchorNode } = info;
+            if (
+                type === 'None' ||
+                !anchorNode ||
+                !browserSelection ||
+                browserSelection?.isCollapsed ||
+                // 👀 inline-toolbar should support more block types except Text
+                // anchorNode.type !== 'text'
+                !editor.blockHelper.getCurrentSelection(anchorNode.id) ||
+                editor.blockHelper.isSelectionCollapsed(anchorNode.id)
+            ) {
+                return;
+            }
+
+            const rect = browserSelection.getRangeAt(0).getBoundingClientRect();
+
+            setSelectionInfo(info);
+            setShowMenu(true);
+            setContainerStyle({ left: rect.left, top: rect.top - 64 });
+        });
+
+        return unsubscribe;
+    }, [editor]);
+
+    useEffect(() => {
+        const hideInlineMenu = () => {
+            setShowMenu(false);
+        };
+        editor.plugins.observe('hide-inline-menu', hideInlineMenu);
+
+        return () =>
+            editor.plugins.unobserve('hide-inline-menu', hideInlineMenu);
+    }, [editor.plugins]);
+
+    return showMenu && containerStyle ? (
+        <ClickAwayListener onClickAway={() => setShowMenu(false)}>
+            <Grow
+                in={showMenu}
+                style={{ transformOrigin: '0 0 0' }}
+                {...{ timeout: 'auto' }}
+            >
+                <div
+                    style={containerStyle}
+                    className={styles('toolbarContainer')}
+                    onMouseDown={e => {
+                        // prevent toolbar from taking focus away from editor
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }}
+                >
+                    <InlineMenuToolbar
+                        editor={editor}
+                        selectionInfo={selectionInfo}
+                        setShow={setShowMenu}
+                    />
+                </div>
+            </Grow>
+        </ClickAwayListener>
+    ) : null;
+};
+
+const styles = style9.create({
+    toolbarContainer: {
+        position: 'fixed',
+        zIndex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 12px',
+        borderRadius: '10px',
+        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+        backgroundColor: '#fff',
+    },
+});
diff --git a/libs/components/editor-plugins/src/menu/inline-menu/Plugin.tsx b/libs/components/editor-plugins/src/menu/inline-menu/Plugin.tsx
new file mode 100644
index 000000000..b0d16140a
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/inline-menu/Plugin.tsx
@@ -0,0 +1,37 @@
+import { StrictMode } from 'react';
+import { BasePlugin } from '../../base-plugin';
+import { PluginRenderRoot } from '../../utils';
+import { InlineMenuContainer } from './Container';
+
+const PLUGIN_NAME = 'inline-menu';
+
+export class InlineMenuPlugin extends BasePlugin {
+    public static override get pluginName(): string {
+        return PLUGIN_NAME;
+    }
+
+    private root: PluginRenderRoot;
+
+    protected override on_render(): void {
+        this.root = new PluginRenderRoot({
+            name: InlineMenuPlugin.pluginName,
+            render: this.editor.reactRenderRoot?.render,
+        });
+
+        this.root.mount();
+        this._renderInlineMenu();
+    }
+
+    private _renderInlineMenu(): void {
+        this.root?.render(
+            <StrictMode>
+                <InlineMenuContainer editor={this.editor} hooks={this.hooks} />
+            </StrictMode>
+        );
+    }
+
+    public override dispose() {
+        this.root?.unmount();
+        super.dispose();
+    }
+}
diff --git a/libs/components/editor-plugins/src/menu/inline-menu/Toolbar.tsx b/libs/components/editor-plugins/src/menu/inline-menu/Toolbar.tsx
new file mode 100644
index 000000000..53156c472
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/inline-menu/Toolbar.tsx
@@ -0,0 +1,70 @@
+import { useMemo } from 'react';
+import { styled } from '@toeverything/components/ui';
+import { useFlag } from '@toeverything/datasource/feature-flags';
+
+import type { WithEditorSelectionType } from './types';
+import { getInlineMenuData } from './utils';
+import { MenuDropdownItem, MenuIconItem } from './menu-item';
+import { INLINE_MENU_UI_TYPES } from './config';
+
+const ToolbarItemSeparator = styled('span')(({ theme }) => ({
+    display: 'inline-flex',
+    marginLeft: theme.affine.spacing.xsSpacing,
+    marginRight: theme.affine.spacing.xsSpacing,
+    color: theme.affine.palette.menuSeparator,
+}));
+
+export const InlineMenuToolbar = ({
+    editor,
+    selectionInfo,
+    setShow,
+}: WithEditorSelectionType) => {
+    // default value is false
+    const enableCommentFeature = useFlag<boolean>('commentDiscussion');
+
+    const inlineMenuData = useMemo(() => {
+        const data = getInlineMenuData({ enableCommentFeature });
+        return data;
+    }, [enableCommentFeature]);
+
+    return (
+        <>
+            {inlineMenuData.map(menu => {
+                const { type, name } = menu;
+
+                if (type === INLINE_MENU_UI_TYPES.dropdown) {
+                    return (
+                        <MenuDropdownItem
+                            {...menu}
+                            editor={editor}
+                            selectionInfo={selectionInfo}
+                            key={name}
+                        />
+                    );
+                }
+
+                if (type === INLINE_MENU_UI_TYPES.separator) {
+                    return (
+                        <ToolbarItemSeparator key={name}>
+                            |
+                        </ToolbarItemSeparator>
+                    );
+                }
+
+                if (type === INLINE_MENU_UI_TYPES.icon) {
+                    return (
+                        <MenuIconItem
+                            {...menu}
+                            editor={editor}
+                            selectionInfo={selectionInfo}
+                            setShow={setShow}
+                            key={name}
+                        />
+                    );
+                }
+
+                return null;
+            })}
+        </>
+    );
+};
diff --git a/libs/components/editor-plugins/src/menu/inline-menu/config.ts b/libs/components/editor-plugins/src/menu/inline-menu/config.ts
new file mode 100644
index 000000000..8cad7e7a9
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/inline-menu/config.ts
@@ -0,0 +1,102 @@
+import {
+    fontBgColorPaletteKeys,
+    fontColorPaletteKeys,
+} from '@toeverything/components/common';
+import type { InlineMenuNamesType } from './types';
+import { Protocol } from '@toeverything/datasource/db-service';
+
+export const INLINE_MENU_UI_TYPES = {
+    icon: 'Icon',
+    dropdown: 'Dropdown',
+    separator: 'Separator',
+} as const;
+
+/** inline menu item { key : display-name } */
+export const inlineMenuShortcuts = {
+    textBold: '⌘+B',
+    textItalic: '⌘+I',
+    textStrikethrough: '⌘+S',
+    link: '⌘+K',
+    [Protocol.Block.Type.code]: '⌘+E',
+};
+export const inlineMenuNames = {
+    currentText: 'TEXT SIZE',
+    [Protocol.Block.Type.heading1]: 'Heading 1',
+    [Protocol.Block.Type.heading2]: 'Heading 2',
+    [Protocol.Block.Type.heading3]: 'Heading 3',
+    text: 'Text',
+    currentList: 'CHECK BOX',
+    [Protocol.Block.Type.todo]: 'To do',
+    [Protocol.Block.Type.numbered]: 'Number',
+    [Protocol.Block.Type.bullet]: 'Bullet',
+    comment: 'Comment',
+    textBold: 'Bold',
+    textItalic: 'Italic',
+    textStrikethrough: 'Strikethrough',
+    link: 'Link',
+    [Protocol.Block.Type.code]: 'Code',
+    currentFontColor: 'COLOR',
+    currentFontBackground: 'BACKGROUND COLOR',
+    colorDefault: 'Default',
+    colorGray: 'Gray',
+    colorBrown: 'Brown',
+    colorOrange: 'Orange',
+    colorYellow: 'Yellow',
+    colorGreen: 'Green',
+    colorBlue: 'Blue',
+    colorPurple: 'Purple',
+    colorPink: 'Pink',
+    colorRed: 'Red',
+    bgDefault: 'Default background',
+    bgGray: 'Gray background',
+    bgBrown: 'Brown background',
+    bgOrange: 'Orange background',
+    bgYellow: 'Yellow background',
+    bgGreen: 'Green background',
+    bgBlue: 'Blue background',
+    bgPurple: 'Purple background',
+    bgPink: 'Pink background',
+    bgRed: 'Red background',
+    currentTextAlign: 'TEXT ALIGN',
+    alignLeft: 'Align Left',
+    alignCenter: 'Align Center',
+    alignRight: 'Align Right',
+    turnInto: 'TURN INTO',
+    [Protocol.Block.Type.page]: 'Page',
+    [Protocol.Block.Type.quote]: 'Quote',
+    [Protocol.Block.Type.callout]: 'Callout',
+    // [Protocol.Block.Type.code]: 'Code Block',
+    codeBlock: 'Code Block',
+    [Protocol.Block.Type.image]: 'Image',
+    [Protocol.Block.Type.file]: 'File',
+    backlinks: 'Backlinks',
+    moreActions: 'More Actions',
+} as const;
+
+export const inlineMenuNamesKeys = Object.keys(inlineMenuNames).reduce(
+    (aac, curr) => ({ [curr]: curr, ...aac }),
+    {}
+) as Record<InlineMenuNamesType, InlineMenuNamesType>;
+
+export const inlineMenuNamesForFontColor = {
+    colorDefault: fontColorPaletteKeys.default,
+    colorGray: fontColorPaletteKeys.affineGray,
+    colorBrown: fontColorPaletteKeys.affineBrown,
+    colorOrange: fontColorPaletteKeys.affineOrange,
+    colorYellow: fontColorPaletteKeys.affineYellow,
+    colorGreen: fontColorPaletteKeys.affineGreen,
+    colorBlue: fontColorPaletteKeys.affineBlue,
+    colorPurple: fontColorPaletteKeys.affinePurple,
+    colorPink: fontColorPaletteKeys.affinePink,
+    colorRed: fontColorPaletteKeys.affineRed,
+    bgDefault: fontBgColorPaletteKeys.default,
+    bgGray: fontBgColorPaletteKeys.affineGray,
+    bgBrown: fontBgColorPaletteKeys.affineBrown,
+    bgOrange: fontBgColorPaletteKeys.affineOrange,
+    bgYellow: fontBgColorPaletteKeys.affineYellow,
+    bgGreen: fontBgColorPaletteKeys.affineGreen,
+    bgBlue: fontBgColorPaletteKeys.affineBlue,
+    bgPurple: fontBgColorPaletteKeys.affinePurple,
+    bgPink: fontBgColorPaletteKeys.affinePink,
+    bgRed: fontBgColorPaletteKeys.affineRed,
+} as const;
diff --git a/libs/components/editor-plugins/src/menu/inline-menu/index.ts b/libs/components/editor-plugins/src/menu/inline-menu/index.ts
new file mode 100644
index 000000000..589d0a4c9
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/inline-menu/index.ts
@@ -0,0 +1 @@
+export { InlineMenuPlugin } from './Plugin';
diff --git a/libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx b/libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx
new file mode 100644
index 000000000..5fbc3f91f
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx
@@ -0,0 +1,196 @@
+import React, { useState, useCallback } from 'react';
+import style9 from 'style9';
+import {
+    MuiPopover,
+    styled,
+    type SvgIconProps,
+    Tooltip,
+} from '@toeverything/components/ui';
+import {
+    fontBgColorPalette,
+    fontColorPalette,
+} from '@toeverything/components/common';
+import { ArrowDropDownIcon } from '@toeverything/components/icons';
+import type { DropdownItemType, WithEditorSelectionType } from '../types';
+import {
+    inlineMenuNamesKeys,
+    inlineMenuNamesForFontColor,
+    inlineMenuShortcuts,
+} from '../config';
+
+type MenuDropdownItemProps = DropdownItemType & WithEditorSelectionType;
+
+export const MenuDropdownItem = ({
+    name,
+    nameKey,
+    icon: MenuIcon,
+    children,
+    editor,
+    selectionInfo,
+}: MenuDropdownItemProps) => {
+    const [anchor_ele, set_anchor_ele] = useState<HTMLButtonElement | null>(
+        null
+    );
+
+    const handle_open_dropdown_menu = useCallback(
+        (event: React.MouseEvent<HTMLButtonElement>) => {
+            event.preventDefault();
+            event.stopPropagation();
+            set_anchor_ele(event.currentTarget);
+        },
+        []
+    );
+
+    const handle_close_dropdown_menu = useCallback(() => {
+        set_anchor_ele(null);
+    }, []);
+
+    //@ts-ignore
+    const shortcut = inlineMenuShortcuts[nameKey];
+
+    return (
+        <>
+            <Tooltip
+                content={
+                    <div style={{ padding: '2px 4px' }}>
+                        <p>{name}</p>
+                        {shortcut && <p>{shortcut}</p>}
+                    </div>
+                }
+                placement="bottom"
+                trigger="hover"
+            >
+                <button
+                    onClick={handle_open_dropdown_menu}
+                    className={styles('currentDropdownButton')}
+                    aria-label={name}
+                    onMouseDown={e => {
+                        // prevent toolbar from taking focus away from editor
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }}
+                >
+                    <MenuIcon sx={{ width: 20, height: 20 }} />
+                    <ArrowDropDownIcon sx={{ width: 20, height: 20 }} />
+                </button>
+            </Tooltip>
+            <MuiPopover
+                id={anchor_ele ? 'inline-menu-pop' : undefined}
+                open={Boolean(anchor_ele)}
+                anchorEl={anchor_ele}
+                onClose={handle_close_dropdown_menu}
+                anchorOrigin={{
+                    horizontal: 'left',
+                    vertical: 40,
+                }}
+            >
+                <div className={styles('dropdownContainer')}>
+                    {children.map(item => {
+                        const {
+                            name,
+                            icon: ItemIcon,
+                            onClick,
+                            nameKey: itemNameKey,
+                        } = item;
+
+                        const StyledIcon = withStylesForIcon(ItemIcon);
+
+                        return (
+                            <button
+                                className={styles('dropdownItem')}
+                                key={name}
+                                onClick={() => {
+                                    if (
+                                        onClick &&
+                                        selectionInfo?.anchorNode?.id
+                                    ) {
+                                        onClick({
+                                            editor,
+                                            type: itemNameKey,
+                                            anchorNodeId:
+                                                selectionInfo?.anchorNode?.id,
+                                        });
+                                    }
+                                    handle_close_dropdown_menu();
+                                }}
+                            >
+                                <StyledIcon
+                                    fontColor={
+                                        nameKey ===
+                                        inlineMenuNamesKeys.currentFontColor
+                                            ? fontColorPalette[
+                                                  inlineMenuNamesForFontColor[
+                                                      itemNameKey as keyof typeof inlineMenuNamesForFontColor
+                                                  ]
+                                              ]
+                                            : nameKey ===
+                                              inlineMenuNamesKeys.currentFontBackground
+                                            ? fontBgColorPalette[
+                                                  inlineMenuNamesForFontColor[
+                                                      itemNameKey as keyof typeof inlineMenuNamesForFontColor
+                                                  ]
+                                              ]
+                                            : ''
+                                    }
+                                    // fontBgColor={
+                                    //     nameKey=== inlineMenuNamesKeys.currentFontBackground ?  fontBgColorPalette[
+                                    //         inlineMenuNamesForFontColor[itemNameKey] as keyof typeof fontBgColorPalette
+                                    //     ]:''
+                                    // }
+                                />
+                                {/* <ItemIcon sx={{ width: 20, height: 20 }} /> */}
+                                <span className={styles('dropdownItemItext')}>
+                                    {name}
+                                </span>
+                            </button>
+                        );
+                    })}
+                </div>
+            </MuiPopover>
+        </>
+    );
+};
+
+const withStylesForIcon = (FontIconComponent: React.FC<SvgIconProps>) =>
+    styled(FontIconComponent, {
+        shouldForwardProp: (prop: string) =>
+            !['fontColor', 'fontBgColor'].includes(prop),
+    })<{ fontColor?: string; fontBgColor?: string }>(
+        ({ fontColor, fontBgColor }) => {
+            return {
+                width: 20,
+                height: 20,
+                color: fontColor || undefined,
+                backgroundColor: fontBgColor || undefined,
+            };
+        }
+    );
+
+const styles = style9.create({
+    currentDropdownButton: {
+        display: 'inline-flex',
+        padding: '0',
+        margin: '15px 6px',
+        color: '#98acbd',
+        ':hover': { backgroundColor: 'transparent' },
+    },
+    dropdownContainer: {
+        margin: '8px 4px',
+    },
+    dropdownItem: {
+        display: 'flex',
+        alignItems: 'center',
+        // @ts-ignore
+        gap: '12px',
+        // width: '120px',
+        height: '32px',
+        padding: '0px 12px',
+        borderRadius: '5px',
+        color: '#98acbd',
+        ':hover': { backgroundColor: '#F5F7F8' },
+    },
+    dropdownItemItext: {
+        color: '#4C6275',
+        fontFamily: 'Helvetica,Arial,"Microsoft Yahei",SimHei,sans-serif',
+    },
+});
diff --git a/libs/components/editor-plugins/src/menu/inline-menu/menu-item/IconItem.tsx b/libs/components/editor-plugins/src/menu/inline-menu/menu-item/IconItem.tsx
new file mode 100644
index 000000000..a1627da10
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/inline-menu/menu-item/IconItem.tsx
@@ -0,0 +1,70 @@
+import React, { useCallback } from 'react';
+import style9 from 'style9';
+
+import type { IconItemType, WithEditorSelectionType } from '../types';
+import { inlineMenuNamesKeys, inlineMenuShortcuts } from '../config';
+import { Tooltip } from '@toeverything/components/ui';
+type MenuIconItemProps = IconItemType & WithEditorSelectionType;
+
+export const MenuIconItem = ({
+    name,
+    nameKey,
+    icon: MenuIcon,
+    onClick,
+    editor,
+    selectionInfo,
+    setShow,
+}: MenuIconItemProps) => {
+    const handleToolbarItemClick = useCallback(
+        (event: React.MouseEvent<HTMLButtonElement>) => {
+            if (onClick && selectionInfo?.anchorNode?.id) {
+                onClick({
+                    editor,
+                    type: nameKey,
+                    anchorNodeId: selectionInfo?.anchorNode?.id,
+                });
+            }
+            if ([inlineMenuNamesKeys.comment].includes(nameKey)) {
+                setShow(false);
+            }
+            if (inlineMenuNamesKeys.comment === nameKey) {
+                editor.plugins.emit('show-add-comment');
+            }
+        },
+        [editor, nameKey, onClick, selectionInfo?.anchorNode?.id, setShow]
+    );
+
+    //@ts-ignore
+    const shortcut = inlineMenuShortcuts[nameKey];
+
+    return (
+        <Tooltip
+            content={
+                <div style={{ padding: '2px 4px' }}>
+                    <p>{name}</p>
+                    {shortcut && <p>{shortcut}</p>}
+                </div>
+            }
+            placement="bottom"
+            trigger="hover"
+        >
+            <button
+                onClick={handleToolbarItemClick}
+                className={styles('currentIcon')}
+                aria-label={name}
+            >
+                <MenuIcon sx={{ width: 20, height: 20 }} />
+            </button>
+        </Tooltip>
+    );
+};
+
+const styles = style9.create({
+    currentIcon: {
+        display: 'inline-flex',
+        padding: '0',
+        margin: '15px 6px',
+        color: '#98acbd',
+        ':hover': { backgroundColor: 'transparent' },
+    },
+});
diff --git a/libs/components/editor-plugins/src/menu/inline-menu/menu-item/index.ts b/libs/components/editor-plugins/src/menu/inline-menu/menu-item/index.ts
new file mode 100644
index 000000000..eb179ce65
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/inline-menu/menu-item/index.ts
@@ -0,0 +1,2 @@
+export { MenuIconItem } from './IconItem';
+export { MenuDropdownItem } from './DropdownItem';
diff --git a/libs/components/editor-plugins/src/menu/inline-menu/types.ts b/libs/components/editor-plugins/src/menu/inline-menu/types.ts
new file mode 100644
index 000000000..ac5fedfb1
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/inline-menu/types.ts
@@ -0,0 +1,50 @@
+import React, { type FC } from 'react';
+import type { SvgIconProps } from '@toeverything/components/ui';
+import type { Virgo, SelectionInfo } from '@toeverything/framework/virgo';
+import { inlineMenuNames, INLINE_MENU_UI_TYPES } from './config';
+
+export type WithEditorSelectionType = {
+    editor: Virgo;
+    selectionInfo: SelectionInfo;
+    setShow?: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export type InlineMenuNamesType = keyof typeof inlineMenuNames;
+
+export type ClickItemHandler = ({
+    type,
+    editor,
+    anchorNodeId,
+}: {
+    type: InlineMenuNamesType;
+    editor: Virgo;
+    anchorNodeId: string;
+}) => void;
+
+export type IconItemType = {
+    type: typeof INLINE_MENU_UI_TYPES['icon'];
+    icon: FC<SvgIconProps>;
+    nameKey: InlineMenuNamesType;
+    name: typeof inlineMenuNames[InlineMenuNamesType];
+    onClick?: ClickItemHandler;
+    active?: boolean;
+};
+
+export type DropdownItemType = {
+    type: typeof INLINE_MENU_UI_TYPES['dropdown'];
+    icon: FC<SvgIconProps>;
+    nameKey: InlineMenuNamesType;
+    name: typeof inlineMenuNames[InlineMenuNamesType];
+    children: IconItemType[];
+    activeKey?: InlineMenuNamesType;
+};
+
+type SeparatorMenuItem = {
+    type: typeof INLINE_MENU_UI_TYPES['separator'];
+    name: string;
+};
+
+export type InlineMenuItem =
+    | IconItemType
+    | DropdownItemType
+    | SeparatorMenuItem;
diff --git a/libs/components/editor-plugins/src/menu/inline-menu/utils.ts b/libs/components/editor-plugins/src/menu/inline-menu/utils.ts
new file mode 100644
index 000000000..14d2d6837
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/inline-menu/utils.ts
@@ -0,0 +1,833 @@
+/* eslint-disable max-lines */
+import {
+    HeadingOneIcon,
+    HeadingTwoIcon,
+    HeadingThreeIcon,
+    ToDoIcon,
+    NumberIcon,
+    BulletIcon,
+    FormatBoldEmphasisIcon,
+    FormatItalicIcon,
+    FormatStrikethroughIcon,
+    LinkIcon,
+    CodeIcon,
+    FormatColorTextIcon,
+    FormatBackgroundIcon,
+    AlignLeftIcon,
+    AlignCenterIcon,
+    AlignRightIcon,
+    TurnIntoIcon,
+    BacklinksIcon,
+    MoreIcon,
+    TextFontIcon,
+    QuoteIcon,
+    CalloutIcon,
+    FileIcon,
+    ImageIcon,
+    PagesIcon,
+    CodeBlockIcon,
+    CommentIcon,
+} from '@toeverything/components/icons';
+import {
+    fontBgColorPalette,
+    fontColorPalette,
+    type TextAlignOptions,
+} from '@toeverything/components/common';
+import { Virgo } from '@toeverything/framework/virgo';
+import { BlockFlavorKeys, Protocol } from '@toeverything/datasource/db-service';
+import { ClickItemHandler, InlineMenuItem } from './types';
+import {
+    inlineMenuNamesKeys,
+    inlineMenuNamesForFontColor,
+    INLINE_MENU_UI_TYPES,
+    inlineMenuNames,
+} from './config';
+
+const convert_to_block_type = async ({
+    editor,
+    blockId,
+    blockType,
+}: {
+    editor: Virgo;
+    blockId: string;
+    blockType: BlockFlavorKeys;
+}) => {
+    if (Protocol.Block.Type[blockType]) {
+        await editor.commands.blockCommands.convertBlock(blockId, blockType);
+    }
+};
+const toggle_text_format = ({
+    editor,
+    nodeId,
+    format,
+}: {
+    editor: Virgo;
+    nodeId: string;
+    format: 'bold' | 'italic' | 'underline' | 'strikethrough' | 'inlinecode';
+}) => {
+    editor.blockHelper.toggleTextFormatBySelection(nodeId, format);
+};
+const add_link = ({ editor, blockId }: { editor: Virgo; blockId: string }) => {
+    editor.blockHelper.setLinkModalVisible(blockId, true);
+};
+const set_paragraph_align = ({
+    editor,
+    nodeId,
+    align,
+}: {
+    editor: Virgo;
+    nodeId: string;
+    align: TextAlignOptions;
+}) => {
+    editor.blockHelper.setParagraphAlign(nodeId, align);
+};
+const set_font_color = ({
+    editor,
+    nodeId,
+    color,
+}: {
+    editor: Virgo;
+    nodeId: string;
+    color: keyof typeof fontColorPalette;
+}) => {
+    editor.blockHelper.setTextFontColor(nodeId, color);
+};
+const set_font_bg_color = ({
+    editor,
+    nodeId,
+    bgColor,
+}: {
+    editor: Virgo;
+    nodeId: string;
+    bgColor: keyof typeof fontBgColorPalette;
+}) => {
+    editor.blockHelper.setTextFontBgColor(nodeId, bgColor);
+};
+const common_handler_for_inline_menu: ClickItemHandler = ({
+    editor,
+    anchorNodeId,
+    type,
+}) => {
+    switch (type) {
+        case inlineMenuNamesKeys.text:
+            convert_to_block_type({
+                editor,
+                blockId: anchorNodeId,
+                blockType: Protocol.Block.Type.text,
+            });
+            break;
+        case inlineMenuNamesKeys.heading1:
+            convert_to_block_type({
+                editor,
+                blockId: anchorNodeId,
+                blockType: Protocol.Block.Type.heading1,
+            });
+            break;
+        case inlineMenuNamesKeys.heading2:
+            convert_to_block_type({
+                editor,
+                blockId: anchorNodeId,
+                blockType: Protocol.Block.Type.heading2,
+            });
+            break;
+        case inlineMenuNamesKeys.heading3:
+            convert_to_block_type({
+                editor,
+                blockId: anchorNodeId,
+                blockType: Protocol.Block.Type.heading3,
+            });
+            break;
+        case inlineMenuNamesKeys.bullet:
+            convert_to_block_type({
+                editor,
+                blockId: anchorNodeId,
+                blockType: Protocol.Block.Type.bullet,
+            });
+            break;
+        case inlineMenuNamesKeys.todo:
+            convert_to_block_type({
+                editor,
+                blockId: anchorNodeId,
+                blockType: Protocol.Block.Type.todo,
+            });
+            break;
+        case inlineMenuNamesKeys.numbered:
+            convert_to_block_type({
+                editor,
+                blockId: anchorNodeId,
+                blockType: Protocol.Block.Type.numbered,
+            });
+            break;
+        case inlineMenuNamesKeys.textBold:
+            toggle_text_format({
+                editor,
+                nodeId: anchorNodeId,
+                format: 'bold',
+            });
+            break;
+        case inlineMenuNamesKeys.textItalic:
+            toggle_text_format({
+                editor,
+                nodeId: anchorNodeId,
+                format: 'italic',
+            });
+            break;
+        case inlineMenuNamesKeys.textStrikethrough:
+            toggle_text_format({
+                editor,
+                nodeId: anchorNodeId,
+                format: 'strikethrough',
+            });
+            break;
+        case inlineMenuNamesKeys.link:
+            add_link({
+                editor,
+                blockId: anchorNodeId,
+            });
+            break;
+        case inlineMenuNamesKeys.code:
+            toggle_text_format({
+                editor,
+                nodeId: anchorNodeId,
+                format: 'inlinecode',
+            });
+            break;
+        case inlineMenuNamesKeys.alignLeft:
+            set_paragraph_align({
+                editor,
+                nodeId: anchorNodeId,
+                align: undefined,
+            });
+            break;
+        case inlineMenuNamesKeys.alignCenter:
+            set_paragraph_align({
+                editor,
+                nodeId: anchorNodeId,
+                align: 'center',
+            });
+            break;
+        case inlineMenuNamesKeys.alignRight:
+            set_paragraph_align({
+                editor,
+                nodeId: anchorNodeId,
+                align: 'right',
+            });
+            break;
+        case inlineMenuNamesKeys.colorDefault:
+            set_font_color({
+                editor,
+                nodeId: anchorNodeId,
+                color: inlineMenuNamesForFontColor[
+                    inlineMenuNamesKeys.colorDefault as keyof typeof inlineMenuNamesForFontColor
+                ],
+            });
+            break;
+        case inlineMenuNamesKeys.colorGray:
+            set_font_color({
+                editor,
+                nodeId: anchorNodeId,
+                color: inlineMenuNamesForFontColor[
+                    inlineMenuNamesKeys.colorGray as keyof typeof inlineMenuNamesForFontColor
+                ],
+            });
+            break;
+        case inlineMenuNamesKeys.colorBrown:
+            set_font_color({
+                editor,
+                nodeId: anchorNodeId,
+                color: inlineMenuNamesForFontColor[
+                    inlineMenuNamesKeys.colorBrown as keyof typeof inlineMenuNamesForFontColor
+                ],
+            });
+            break;
+        case inlineMenuNamesKeys.colorOrange:
+            set_font_color({
+                editor,
+                nodeId: anchorNodeId,
+                color: inlineMenuNamesForFontColor[
+                    inlineMenuNamesKeys.colorOrange as keyof typeof inlineMenuNamesForFontColor
+                ],
+            });
+            break;
+        case inlineMenuNamesKeys.colorYellow:
+            set_font_color({
+                editor,
+                nodeId: anchorNodeId,
+                color: inlineMenuNamesForFontColor[
+                    inlineMenuNamesKeys.colorYellow as keyof typeof inlineMenuNamesForFontColor
+                ],
+            });
+            break;
+        case inlineMenuNamesKeys.colorGreen:
+            set_font_color({
+                editor,
+                nodeId: anchorNodeId,
+                color: inlineMenuNamesForFontColor[
+                    inlineMenuNamesKeys.colorGreen as keyof typeof inlineMenuNamesForFontColor
+                ],
+            });
+            break;
+        case inlineMenuNamesKeys.colorBlue:
+            set_font_color({
+                editor,
+                nodeId: anchorNodeId,
+                color: inlineMenuNamesForFontColor[
+                    inlineMenuNamesKeys.colorBlue as keyof typeof inlineMenuNamesForFontColor
+                ],
+            });
+            break;
+        case inlineMenuNamesKeys.colorPurple:
+            set_font_color({
+                editor,
+                nodeId: anchorNodeId,
+                color: inlineMenuNamesForFontColor[
+                    inlineMenuNamesKeys.colorPurple as keyof typeof inlineMenuNamesForFontColor
+                ],
+            });
+            break;
+        case inlineMenuNamesKeys.colorPink:
+            set_font_color({
+                editor,
+                nodeId: anchorNodeId,
+                color: inlineMenuNamesForFontColor[
+                    inlineMenuNamesKeys.colorPink as keyof typeof inlineMenuNamesForFontColor
+                ],
+            });
+            break;
+        case inlineMenuNamesKeys.colorRed:
+            set_font_color({
+                editor,
+                nodeId: anchorNodeId,
+                color: inlineMenuNamesForFontColor[
+                    inlineMenuNamesKeys.colorRed as keyof typeof inlineMenuNamesForFontColor
+                ],
+            });
+            break;
+        case inlineMenuNamesKeys.bgDefault:
+            set_font_bg_color({
+                editor,
+                nodeId: anchorNodeId,
+                bgColor:
+                    inlineMenuNamesForFontColor[
+                        inlineMenuNamesKeys.bgDefault as keyof typeof inlineMenuNamesForFontColor
+                    ],
+            });
+            break;
+        case inlineMenuNamesKeys.bgGray:
+            set_font_bg_color({
+                editor,
+                nodeId: anchorNodeId,
+                bgColor:
+                    inlineMenuNamesForFontColor[
+                        inlineMenuNamesKeys.bgGray as keyof typeof inlineMenuNamesForFontColor
+                    ],
+            });
+            break;
+        case inlineMenuNamesKeys.bgBrown:
+            set_font_bg_color({
+                editor,
+                nodeId: anchorNodeId,
+                bgColor:
+                    inlineMenuNamesForFontColor[
+                        inlineMenuNamesKeys.bgBrown as keyof typeof inlineMenuNamesForFontColor
+                    ],
+            });
+            break;
+        case inlineMenuNamesKeys.bgOrange:
+            set_font_bg_color({
+                editor,
+                nodeId: anchorNodeId,
+                bgColor:
+                    inlineMenuNamesForFontColor[
+                        inlineMenuNamesKeys.bgOrange as keyof typeof inlineMenuNamesForFontColor
+                    ],
+            });
+            break;
+        case inlineMenuNamesKeys.bgYellow:
+            set_font_bg_color({
+                editor,
+                nodeId: anchorNodeId,
+                bgColor:
+                    inlineMenuNamesForFontColor[
+                        inlineMenuNamesKeys.bgYellow as keyof typeof inlineMenuNamesForFontColor
+                    ],
+            });
+            break;
+        case inlineMenuNamesKeys.bgGreen:
+            set_font_bg_color({
+                editor,
+                nodeId: anchorNodeId,
+                bgColor:
+                    inlineMenuNamesForFontColor[
+                        inlineMenuNamesKeys.bgGreen as keyof typeof inlineMenuNamesForFontColor
+                    ],
+            });
+            break;
+        case inlineMenuNamesKeys.bgBlue:
+            set_font_bg_color({
+                editor,
+                nodeId: anchorNodeId,
+                bgColor:
+                    inlineMenuNamesForFontColor[
+                        inlineMenuNamesKeys.bgBlue as keyof typeof inlineMenuNamesForFontColor
+                    ],
+            });
+            break;
+        case inlineMenuNamesKeys.bgPurple:
+            set_font_bg_color({
+                editor,
+                nodeId: anchorNodeId,
+                bgColor:
+                    inlineMenuNamesForFontColor[
+                        inlineMenuNamesKeys.bgPurple as keyof typeof inlineMenuNamesForFontColor
+                    ],
+            });
+            break;
+        case inlineMenuNamesKeys.bgPink:
+            set_font_bg_color({
+                editor,
+                nodeId: anchorNodeId,
+                bgColor:
+                    inlineMenuNamesForFontColor[
+                        inlineMenuNamesKeys.bgPink as keyof typeof inlineMenuNamesForFontColor
+                    ],
+            });
+            break;
+        case inlineMenuNamesKeys.bgRed:
+            set_font_bg_color({
+                editor,
+                nodeId: anchorNodeId,
+                bgColor:
+                    inlineMenuNamesForFontColor[
+                        inlineMenuNamesKeys.bgRed as keyof typeof inlineMenuNamesForFontColor
+                    ],
+            });
+            break;
+        case inlineMenuNamesKeys.quote:
+            convert_to_block_type({
+                editor,
+                blockId: anchorNodeId,
+                blockType: Protocol.Block.Type.quote,
+            });
+            break;
+        case inlineMenuNamesKeys.callout:
+            convert_to_block_type({
+                editor,
+                blockId: anchorNodeId,
+                blockType: Protocol.Block.Type.callout,
+            });
+            break;
+        case inlineMenuNamesKeys.codeBlock:
+            convert_to_block_type({
+                editor,
+                blockId: anchorNodeId,
+                blockType: Protocol.Block.Type.code,
+            });
+            break;
+        case inlineMenuNamesKeys.image:
+            convert_to_block_type({
+                editor,
+                blockId: anchorNodeId,
+                blockType: Protocol.Block.Type.image,
+            });
+            break;
+        case inlineMenuNamesKeys.file:
+            convert_to_block_type({
+                editor,
+                blockId: anchorNodeId,
+                blockType: Protocol.Block.Type.file,
+            });
+            break;
+        default: // do nothing
+    }
+};
+
+type InlineMenuDataConfigType = {
+    enableCommentFeature: boolean;
+};
+
+export const getInlineMenuData = ({
+    enableCommentFeature,
+}: InlineMenuDataConfigType): InlineMenuItem[] => {
+    const inlineMenuData = [
+        {
+            type: INLINE_MENU_UI_TYPES.dropdown,
+            icon: HeadingOneIcon,
+            name: inlineMenuNames.currentText,
+            nameKey: inlineMenuNamesKeys.currentText,
+            children: [
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: HeadingOneIcon,
+                    name: inlineMenuNames.heading1,
+                    nameKey: inlineMenuNamesKeys.heading1,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: HeadingTwoIcon,
+                    name: inlineMenuNames.heading2,
+                    nameKey: inlineMenuNamesKeys.heading2,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: HeadingThreeIcon,
+                    name: inlineMenuNames.heading3,
+                    nameKey: inlineMenuNamesKeys.heading3,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: TextFontIcon,
+                    name: inlineMenuNames.text,
+                    nameKey: inlineMenuNamesKeys.text,
+                    onClick: common_handler_for_inline_menu,
+                },
+            ],
+        },
+        {
+            type: INLINE_MENU_UI_TYPES.dropdown,
+            icon: ToDoIcon,
+            name: inlineMenuNames.currentList,
+            nameKey: inlineMenuNamesKeys.currentList,
+            children: [
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: ToDoIcon,
+                    name: inlineMenuNames.todo,
+                    nameKey: inlineMenuNamesKeys.todo,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: NumberIcon,
+                    name: inlineMenuNames.numbered,
+                    nameKey: inlineMenuNamesKeys.numbered,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: BulletIcon,
+                    name: inlineMenuNames.bullet,
+                    nameKey: inlineMenuNamesKeys.bullet,
+                    active: false,
+                    onClick: common_handler_for_inline_menu,
+                },
+            ],
+        },
+        {
+            type: INLINE_MENU_UI_TYPES.separator,
+            name: 'separator ' + inlineMenuNames.currentList,
+        },
+        enableCommentFeature
+            ? {
+                  type: INLINE_MENU_UI_TYPES.icon,
+                  icon: CommentIcon,
+                  name: inlineMenuNames.comment,
+                  nameKey: inlineMenuNamesKeys.comment,
+                  onClick: common_handler_for_inline_menu,
+              }
+            : null,
+        enableCommentFeature
+            ? {
+                  type: INLINE_MENU_UI_TYPES.separator,
+                  name: 'separator ' + inlineMenuNames.comment,
+              }
+            : null,
+        {
+            type: INLINE_MENU_UI_TYPES.icon,
+            icon: FormatBoldEmphasisIcon,
+            name: inlineMenuNames.textBold,
+            nameKey: inlineMenuNamesKeys.textBold,
+            onClick: common_handler_for_inline_menu,
+        },
+        {
+            type: INLINE_MENU_UI_TYPES.icon,
+            icon: FormatItalicIcon,
+            name: inlineMenuNames.textItalic,
+            nameKey: inlineMenuNamesKeys.textItalic,
+            onClick: common_handler_for_inline_menu,
+        },
+        {
+            type: INLINE_MENU_UI_TYPES.icon,
+            icon: FormatStrikethroughIcon,
+            name: inlineMenuNames.textStrikethrough,
+            nameKey: inlineMenuNamesKeys.textStrikethrough,
+            onClick: common_handler_for_inline_menu,
+        },
+        {
+            type: INLINE_MENU_UI_TYPES.icon,
+            icon: LinkIcon,
+            name: inlineMenuNames.link,
+            nameKey: inlineMenuNamesKeys.link,
+            onClick: common_handler_for_inline_menu,
+        },
+        {
+            type: INLINE_MENU_UI_TYPES.icon,
+            icon: CodeIcon,
+            name: inlineMenuNames.code,
+            nameKey: inlineMenuNamesKeys.code,
+            onClick: common_handler_for_inline_menu,
+        },
+        {
+            type: INLINE_MENU_UI_TYPES.separator,
+            name: 'separator ' + inlineMenuNames.code,
+        },
+        {
+            type: INLINE_MENU_UI_TYPES.dropdown,
+            icon: FormatColorTextIcon,
+            name: inlineMenuNames.currentFontColor,
+            nameKey: inlineMenuNamesKeys.currentFontColor,
+            children: [
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: FormatColorTextIcon,
+                    name: inlineMenuNames.colorDefault,
+                    nameKey: inlineMenuNamesKeys.colorDefault,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: FormatColorTextIcon,
+                    name: inlineMenuNames.colorGray,
+                    nameKey: inlineMenuNamesKeys.colorGray,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: FormatColorTextIcon,
+                    name: inlineMenuNames.colorBrown,
+                    nameKey: inlineMenuNamesKeys.colorBrown,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: FormatColorTextIcon,
+                    name: inlineMenuNames.colorOrange,
+                    nameKey: inlineMenuNamesKeys.colorOrange,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: FormatColorTextIcon,
+                    name: inlineMenuNames.colorYellow,
+                    nameKey: inlineMenuNamesKeys.colorYellow,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: FormatColorTextIcon,
+                    name: inlineMenuNames.colorGreen,
+                    nameKey: inlineMenuNamesKeys.colorGreen,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: FormatColorTextIcon,
+                    name: inlineMenuNames.colorBlue,
+                    nameKey: inlineMenuNamesKeys.colorBlue,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: FormatColorTextIcon,
+                    name: inlineMenuNames.colorPurple,
+                    nameKey: inlineMenuNamesKeys.colorPurple,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: FormatColorTextIcon,
+                    name: inlineMenuNames.colorPink,
+                    nameKey: inlineMenuNamesKeys.colorPink,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: FormatColorTextIcon,
+                    name: inlineMenuNames.colorRed,
+                    nameKey: inlineMenuNamesKeys.colorRed,
+                    onClick: common_handler_for_inline_menu,
+                },
+            ],
+        },
+        {
+            type: INLINE_MENU_UI_TYPES.dropdown,
+            icon: FormatBackgroundIcon,
+            name: inlineMenuNames.currentFontBackground,
+            nameKey: inlineMenuNamesKeys.currentFontBackground,
+            children: [
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: FormatBackgroundIcon,
+                    name: inlineMenuNames.bgDefault,
+                    nameKey: inlineMenuNamesKeys.bgDefault,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: FormatBackgroundIcon,
+                    name: inlineMenuNames.bgGray,
+                    nameKey: inlineMenuNamesKeys.bgGray,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: FormatBackgroundIcon,
+                    name: inlineMenuNames.bgBrown,
+                    nameKey: inlineMenuNamesKeys.bgBrown,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: FormatBackgroundIcon,
+                    name: inlineMenuNames.bgOrange,
+                    nameKey: inlineMenuNamesKeys.bgOrange,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: FormatBackgroundIcon,
+                    name: inlineMenuNames.bgYellow,
+                    nameKey: inlineMenuNamesKeys.bgYellow,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: FormatBackgroundIcon,
+                    name: inlineMenuNames.bgGreen,
+                    nameKey: inlineMenuNamesKeys.bgGreen,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: FormatBackgroundIcon,
+                    name: inlineMenuNames.bgBlue,
+                    nameKey: inlineMenuNamesKeys.bgBlue,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: FormatBackgroundIcon,
+                    name: inlineMenuNames.bgPurple,
+                    nameKey: inlineMenuNamesKeys.bgPurple,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: FormatBackgroundIcon,
+                    name: inlineMenuNames.bgPink,
+                    nameKey: inlineMenuNamesKeys.bgPink,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: FormatBackgroundIcon,
+                    name: inlineMenuNames.bgRed,
+                    nameKey: inlineMenuNamesKeys.bgRed,
+                    onClick: common_handler_for_inline_menu,
+                },
+            ],
+        },
+        {
+            type: INLINE_MENU_UI_TYPES.dropdown,
+            icon: AlignLeftIcon,
+            name: inlineMenuNames.currentTextAlign,
+            nameKey: inlineMenuNamesKeys.currentTextAlign,
+            children: [
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: AlignLeftIcon,
+                    name: inlineMenuNames.alignLeft,
+                    nameKey: inlineMenuNamesKeys.alignLeft,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: AlignCenterIcon,
+                    name: inlineMenuNames.alignCenter,
+                    nameKey: inlineMenuNamesKeys.alignCenter,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: AlignRightIcon,
+                    name: inlineMenuNames.alignRight,
+                    nameKey: inlineMenuNamesKeys.alignRight,
+                    onClick: common_handler_for_inline_menu,
+                },
+            ],
+        },
+        {
+            type: INLINE_MENU_UI_TYPES.separator,
+            name: 'separator ' + inlineMenuNames.alignRight,
+        },
+        {
+            type: INLINE_MENU_UI_TYPES.dropdown,
+            icon: TurnIntoIcon,
+            name: inlineMenuNames.turnInto,
+            nameKey: inlineMenuNamesKeys.turnInto,
+            children: [
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: PagesIcon,
+                    name: inlineMenuNames.page,
+                    nameKey: inlineMenuNamesKeys.page,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: QuoteIcon,
+                    name: inlineMenuNames.quote,
+                    nameKey: inlineMenuNamesKeys.quote,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: CalloutIcon,
+                    name: inlineMenuNames.callout,
+                    nameKey: inlineMenuNamesKeys.callout,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: CodeBlockIcon,
+                    name: inlineMenuNames.codeBlock,
+                    nameKey: inlineMenuNamesKeys.codeBlock,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: ImageIcon,
+                    name: inlineMenuNames.image,
+                    nameKey: inlineMenuNamesKeys.image,
+                    onClick: common_handler_for_inline_menu,
+                },
+                {
+                    type: INLINE_MENU_UI_TYPES.icon,
+                    icon: FileIcon,
+                    name: inlineMenuNames.file,
+                    nameKey: inlineMenuNamesKeys.file,
+                    onClick: common_handler_for_inline_menu,
+                },
+            ],
+        },
+        {
+            type: INLINE_MENU_UI_TYPES.icon,
+            icon: BacklinksIcon,
+            name: inlineMenuNames.backlinks,
+            nameKey: inlineMenuNamesKeys.backlinks,
+            onClick: common_handler_for_inline_menu,
+        },
+        {
+            type: INLINE_MENU_UI_TYPES.icon,
+            icon: MoreIcon,
+            name: inlineMenuNames.moreActions,
+            nameKey: inlineMenuNamesKeys.moreActions,
+            onClick: common_handler_for_inline_menu,
+        },
+    ];
+
+    return inlineMenuData.filter(item => Boolean(item));
+};
diff --git a/libs/components/editor-plugins/src/menu/left-menu/LeftMenu.tsx b/libs/components/editor-plugins/src/menu/left-menu/LeftMenu.tsx
new file mode 100644
index 000000000..d153af97a
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/left-menu/LeftMenu.tsx
@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import { Virgo, PluginHooks } from '@toeverything/framework/virgo';
+import { Cascader, CascaderItemProps } from '@toeverything/components/ui';
+import { TurnIntoMenu } from './TurnIntoMenu';
+import {
+    DeleteCashBinIcon,
+    TurnIntoIcon,
+    UngroupIcon,
+} from '@toeverything/components/icons';
+
+interface LeftMenuProps {
+    anchorEl?: Element;
+    children?: React.ReactElement;
+    onClose: () => void;
+    editor?: Virgo;
+    hooks: PluginHooks;
+    blockId: string;
+}
+
+export function LeftMenu(props: LeftMenuProps) {
+    const { editor, anchorEl, hooks, blockId } = props;
+    const menu: CascaderItemProps[] = [
+        {
+            title: 'Delete',
+            callback: () => {
+                editor.commands.blockCommands.removeBlock(blockId);
+            },
+            shortcut: 'Del',
+            icon: <DeleteCashBinIcon />,
+        },
+        {
+            title: 'Turn into',
+            subItems: [],
+            children: (
+                <TurnIntoMenu
+                    editor={editor}
+                    hooks={hooks}
+                    blockId={blockId}
+                    onClose={() => {
+                        props.onClose();
+                        editor.selection.setSelectedNodesIds([]);
+                    }}
+                />
+            ),
+            icon: <TurnIntoIcon />,
+        },
+        {
+            title: 'Divide Here As A New Group',
+            icon: <UngroupIcon />,
+            callback: () => {
+                editor.commands.blockCommands.splitGroupFromBlock(blockId);
+            },
+        },
+    ].filter(v => v);
+
+    const [menuList, setMenuList] = useState<CascaderItemProps[]>(menu);
+
+    const filter_items = (
+        value: string,
+        menuList: CascaderItemProps[],
+        filterList: CascaderItemProps[]
+    ) => {
+        menuList.forEach(item => {
+            if (item?.subItems.length === 0) {
+                if (item.title.toLocaleLowerCase().indexOf(value) !== -1) {
+                    filterList.push(item);
+                }
+            } else {
+                filter_items(value, item.subItems || [], filterList);
+            }
+        });
+    };
+
+    const on_filter = (
+        e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+    ) => {
+        const value = e.currentTarget.value;
+        if (!value) {
+            setMenuList(menu);
+        } else {
+            const filterList: CascaderItemProps[] = [];
+            filter_items(value.toLocaleLowerCase(), menu, filterList);
+            setMenuList(
+                filterList.length > 0 ? filterList : [{ title: 'No Result' }]
+            );
+        }
+    };
+
+    return (
+        <>
+            {props.children}
+            <Cascader
+                items={menuList}
+                anchorEl={anchorEl}
+                placement="bottom-start"
+                open={Boolean(anchorEl)}
+                onClose={() => props.onClose()}
+            />
+        </>
+    );
+}
diff --git a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx
new file mode 100644
index 000000000..7a7706129
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx
@@ -0,0 +1,271 @@
+import { useState, useEffect, FC } from 'react';
+
+import {
+    Virgo,
+    BlockDomInfo,
+    HookType,
+    PluginHooks,
+    BlockDropPlacement,
+} from '@toeverything/framework/virgo';
+import { Button } from '@toeverything/components/common';
+import { styled } from '@toeverything/components/ui';
+
+import { LeftMenu } from './LeftMenu';
+import { debounce } from '@toeverything/utils';
+import type { Subject } from 'rxjs';
+import { HandleChildIcon } from '@toeverything/components/icons';
+import { MENU_WIDTH } from './menu-config';
+
+const MENU_BUTTON_OFFSET = 12;
+
+export type LineInfoSubject = Subject<
+    | {
+          direction: BlockDropPlacement;
+          blockInfo: BlockDomInfo;
+      }
+    | undefined
+>;
+
+export type LeftMenuProps = {
+    editor: Virgo;
+    hooks: PluginHooks;
+    defaultVisible?: boolean;
+    blockInfo: Subject<BlockDomInfo | undefined>;
+    lineInfo: LineInfoSubject;
+};
+
+type LineInfo = {
+    direction: BlockDropPlacement;
+    blockInfo: BlockDomInfo;
+};
+
+function Line(props: { lineInfo: LineInfo }) {
+    const { lineInfo } = props;
+    if (!lineInfo || lineInfo.direction === BlockDropPlacement.none) {
+        return null;
+    }
+    const { direction, blockInfo } = lineInfo;
+    const finalDirection = direction;
+    const lineStyle = {
+        zIndex: 2,
+        position: 'absolute' as const,
+        background: '#502EC4',
+    };
+
+    const intersectionRect = blockInfo.rect;
+
+    const horizontalLineStyle = {
+        ...lineStyle,
+        width: intersectionRect.width,
+        height: 2,
+        left: intersectionRect.x - blockInfo.rootRect.x,
+    };
+    const topLineStyle = {
+        ...horizontalLineStyle,
+        top: intersectionRect.top,
+    };
+    const bottomLineStyle = {
+        ...horizontalLineStyle,
+        top: intersectionRect.bottom + 1 - blockInfo.rootRect.y,
+    };
+
+    const verticalLineStyle = {
+        ...lineStyle,
+        width: 2,
+        height: intersectionRect.height,
+        top: intersectionRect.y - blockInfo.rootRect.y,
+    };
+    const leftLineStyle = {
+        ...verticalLineStyle,
+        left: intersectionRect.x - 10 - blockInfo.rootRect.x,
+    };
+    const rightLineStyle = {
+        ...verticalLineStyle,
+        left: intersectionRect.right + 10 - blockInfo.rootRect.x,
+    };
+    const styleMap = {
+        left: leftLineStyle,
+        right: rightLineStyle,
+        top: topLineStyle,
+        bottom: bottomLineStyle,
+    };
+    return (
+        <div className="editor-menu-line" style={styleMap[finalDirection]} />
+    );
+}
+
+function DragComponent(props: {
+    children: React.ReactNode;
+    style: React.CSSProperties;
+    onDragStart: (event: React.DragEvent<Element>) => void;
+    onDragEnd: (event: React.DragEvent<Element>) => void;
+}) {
+    const { style, children, onDragStart, onDragEnd } = props;
+    return (
+        <LigoLeftMenu
+            draggable
+            style={style}
+            onMouseMove={event => event.stopPropagation()}
+            onMouseDown={event => event.stopPropagation()}
+            onDragStart={onDragStart}
+            onDragEnd={onDragEnd}
+        >
+            {children}
+        </LigoLeftMenu>
+    );
+}
+
+export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
+    const { editor, blockInfo, defaultVisible, hooks, lineInfo } = props;
+    const [visible, setVisible] = useState(defaultVisible);
+    const [anchorEl, setAnchorEl] = useState<Element>();
+
+    const [block, setBlock] = useState<BlockDomInfo | undefined>();
+    const [line, setLine] = useState<LineInfo | undefined>(undefined);
+
+    const handleDragStart = (event: React.DragEvent<Element>) => {
+        window.addEventListener('dragover', handleDragOverCapture, {
+            capture: true,
+        });
+        hooks.addHook(
+            HookType.ON_ROOTNODE_DRAG_OVER_CAPTURE,
+            handleDragOverCapture
+        );
+
+        const onDragStart = async (event: React.DragEvent<Element>) => {
+            if (block == null) return;
+            const dragImage = await editor.blockHelper.getBlockDragImg(
+                block.blockId
+            );
+            if (dragImage) {
+                event.dataTransfer.setDragImage(dragImage, -50, -10);
+                editor.dragDropManager.setDragBlockInfo(event, block.blockId);
+            }
+            setVisible(false);
+        };
+        onDragStart(event);
+        event.stopPropagation();
+    };
+
+    const handleDragEnd = (event: React.DragEvent<Element>) => {
+        event.preventDefault();
+        window.removeEventListener('dragover', handleDragOverCapture, {
+            capture: true,
+        });
+        setLine(undefined);
+    };
+
+    const onClick = (event: React.MouseEvent) => {
+        if (block == null) return;
+        const currentTarget = event.currentTarget;
+        editor.selection.setSelectedNodesIds([block.blockId]);
+        setVisible(true);
+        setAnchorEl(currentTarget);
+    };
+
+    /**
+     * clear line info
+     */
+    const handleDragOverCapture = debounce((e: MouseEvent) => {
+        const { target } = e;
+        if (
+            target instanceof HTMLElement &&
+            (!target.closest('[data-block-id]') ||
+                !editor.container.contains(target))
+        ) {
+            setLine(undefined);
+        }
+    }, 10);
+
+    useEffect(() => {
+        const sub = blockInfo.subscribe(block => {
+            setBlock(block);
+            if (block != null) {
+                setVisible(true);
+            }
+        });
+        return () => sub.unsubscribe();
+    }, [blockInfo, editor]);
+
+    useEffect(() => {
+        const sub = lineInfo.subscribe(data => {
+            if (data == null) {
+                setLine(undefined);
+            } else {
+                const { direction, blockInfo } = data;
+                setLine(prev => {
+                    if (
+                        prev?.blockInfo.blockId !== blockInfo.blockId ||
+                        prev?.direction !== direction
+                    ) {
+                        return {
+                            direction,
+                            blockInfo,
+                        };
+                    } else {
+                        return prev;
+                    }
+                });
+            }
+        });
+        return () => sub.unsubscribe();
+    }, [editor.dragDropManager, lineInfo]);
+
+    return (
+        <>
+            {block && (
+                <DragComponent
+                    style={{
+                        position: 'absolute',
+                        left:
+                            Math.min(
+                                block.rect.left -
+                                    MENU_WIDTH -
+                                    MENU_BUTTON_OFFSET
+                            ) - block.rootRect.left,
+                        top: block.rect.top - block.rootRect.top,
+                        opacity: visible ? 1 : 0,
+                        zIndex: 1,
+                    }}
+                    onDragStart={handleDragStart}
+                    onDragEnd={handleDragEnd}
+                >
+                    {
+                        <LeftMenu
+                            anchorEl={anchorEl}
+                            editor={props.editor}
+                            hooks={props.hooks}
+                            onClose={() => setAnchorEl(undefined)}
+                            blockId={block.blockId}
+                        >
+                            <Draggable onClick={onClick}>
+                                <HandleChildIcon />
+                            </Draggable>
+                        </LeftMenu>
+                    }
+                </DragComponent>
+            )}
+            <Line lineInfo={line} />
+        </>
+    );
+};
+
+const Draggable = styled(Button)({
+    cursor: 'grab',
+    padding: '0',
+    display: 'inlineFlex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'transparent',
+    width: '24px',
+    height: '24px',
+    ':hover': {
+        backgroundColor: '#edeef0',
+        borderRadius: '4px',
+    },
+});
+
+const LigoLeftMenu = styled('div')({
+    backgroundColor: 'transparent',
+    marginRight: '4px',
+});
diff --git a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx
new file mode 100644
index 000000000..7fd4f7722
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx
@@ -0,0 +1,176 @@
+import { BlockDomInfo, HookType } from '@toeverything/framework/virgo';
+import React, { StrictMode } from 'react';
+import { BasePlugin } from '../../base-plugin';
+import { ignoreBlockTypes } from './menu-config';
+import { LineInfoSubject, LeftMenuDraggable } from './LeftMenuDraggable';
+import { PluginRenderRoot } from '../../utils';
+import { Subject } from 'rxjs';
+import { domToRect, last, Point } from '@toeverything/utils';
+
+export class LeftMenuPlugin extends BasePlugin {
+    private mousedown?: boolean;
+    private root?: PluginRenderRoot;
+    private preBlockId: string;
+    private hideTimer: number;
+
+    private _blockInfo: Subject<BlockDomInfo | undefined> = new Subject();
+    private _lineInfo: LineInfoSubject = new Subject();
+
+    public static override get pluginName(): string {
+        return 'left-menu';
+    }
+
+    public override init(): void {
+        this.hooks.addHook(
+            HookType.AFTER_ON_NODE_MOUSE_MOVE,
+            this._handleMouseMove
+        );
+        this.hooks.addHook(
+            HookType.ON_ROOTNODE_MOUSE_DOWN,
+            this._handleMouseDown
+        );
+        this.hooks.addHook(
+            HookType.ON_ROOTNODE_MOUSE_LEAVE,
+            this._handleRootMouseLeave,
+            this
+        );
+        this.hooks.addHook(HookType.ON_ROOTNODE_MOUSE_UP, this._handleMouseUp);
+        this.hooks.addHook(
+            HookType.AFTER_ON_NODE_DRAG_OVER,
+            this._handleDragOverBlockNode
+        );
+        this.hooks.addHook(HookType.ON_ROOT_NODE_KEYDOWN, this._handleKeyDown);
+        this.hooks.addHook(HookType.ON_ROOTNODE_DROP, this._onDrop);
+    }
+
+    private _handleRootMouseLeave() {
+        this._hideLeftMenu();
+    }
+    private _onDrop = () => {
+        this.preBlockId = '';
+        this._lineInfo.next(undefined);
+    };
+    private _handleDragOverBlockNode = async (
+        event: React.DragEvent<Element>,
+        blockInfo: BlockDomInfo
+    ) => {
+        const { type, dom, blockId } = blockInfo;
+        if (this.editor.dragDropManager.isDragBlock(event)) {
+            event.preventDefault();
+            if (ignoreBlockTypes.includes(type)) {
+                return;
+            }
+            const direction =
+                await this.editor.dragDropManager.checkBlockDragTypes(
+                    event,
+                    dom,
+                    blockId
+                );
+            this._lineInfo.next({ direction, blockInfo });
+        }
+    };
+
+    private _handleMouseMove = async (
+        e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+        node: BlockDomInfo
+    ) => {
+        if (!this.hideTimer) {
+            this.hideTimer = window.setTimeout(() => {
+                if (this.mousedown) {
+                    this._hideLeftMenu();
+                    return;
+                }
+                this.hideTimer = 0;
+            }, 300);
+        }
+        if (this.editor.readonly) {
+            this._hideLeftMenu();
+            return;
+        }
+        if (node.blockId !== this.preBlockId) {
+            if (node.dom) {
+                const mousePoint = new Point(e.clientX, e.clientY);
+                const children = await (
+                    await this.editor.getBlockById(node.blockId)
+                ).children();
+                // if mouse point is between the first and last child do not show left menu
+                if (children.length) {
+                    const firstChildren = children[0];
+                    const lastChildren = last(children);
+                    if (firstChildren.dom && lastChildren.dom) {
+                        const firstChildrenRect = domToRect(firstChildren.dom);
+                        const lastChildrenRect = domToRect(lastChildren.dom);
+                        if (
+                            firstChildrenRect.top < mousePoint.y &&
+                            lastChildrenRect.bottom > mousePoint.y
+                        ) {
+                            return;
+                        }
+                    }
+                }
+            }
+            this.preBlockId = node.blockId;
+            this._showLeftMenu(node);
+        }
+    };
+
+    private _handleMouseUp(
+        e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+        node: BlockDomInfo
+    ) {
+        if (this.hideTimer) {
+            window.clearTimeout(this.hideTimer);
+            this.hideTimer = 0;
+        }
+        this.mousedown = false;
+    }
+
+    private _handleMouseDown = (
+        e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+        node: BlockDomInfo
+    ) => {
+        this.mousedown = true;
+    };
+
+    private _hideLeftMenu = (): void => {
+        this._blockInfo.next(undefined);
+    };
+
+    private _handleKeyDown = () => {
+        this._hideLeftMenu();
+    };
+
+    private _showLeftMenu = (blockInfo: BlockDomInfo): void => {
+        if (ignoreBlockTypes.includes(blockInfo.type)) {
+            return;
+        }
+        this._blockInfo.next(blockInfo);
+    };
+
+    protected override on_render(): void {
+        this.root = new PluginRenderRoot({
+            name: LeftMenuPlugin.pluginName,
+            render: (...args) => {
+                return this.editor.reactRenderRoot?.render(...args);
+            },
+        });
+        this.root.mount();
+        this.root.render(
+            <StrictMode>
+                <LeftMenuDraggable
+                    key={Math.random() + ''}
+                    defaultVisible={true}
+                    editor={this.editor}
+                    hooks={this.hooks}
+                    blockInfo={this._blockInfo}
+                    lineInfo={this._lineInfo}
+                />
+            </StrictMode>
+        );
+    }
+
+    public override dispose(): void {
+        // TODO: rxjs
+        this.root?.unmount();
+    }
+}
diff --git a/libs/components/editor-plugins/src/menu/left-menu/TurnIntoMenu.tsx b/libs/components/editor-plugins/src/menu/left-menu/TurnIntoMenu.tsx
new file mode 100644
index 000000000..5dc367601
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/left-menu/TurnIntoMenu.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { BlockFlavorKeys, Protocol } from '@toeverything/datasource/db-service';
+import { Virgo, PluginHooks } from '@toeverything/framework/virgo';
+import { CommandMenuContainer } from '../command-menu/Container';
+import { defaultCategoriesList, defaultTypeList } from '../command-menu/config';
+interface TurnIntoMenuProps {
+    editor: Virgo;
+    hooks: PluginHooks;
+    blockId: string;
+    onClose?: () => void;
+}
+
+export const TurnIntoMenu = ({
+    blockId,
+    editor,
+    hooks,
+    onClose,
+}: TurnIntoMenuProps) => {
+    const handle_select = (type: string) => {
+        if (Protocol.Block.Type[type as BlockFlavorKeys]) {
+            editor.commands.blockCommands.convertBlock(
+                blockId,
+                type as BlockFlavorKeys
+            );
+            onClose && onClose();
+        }
+    };
+    return (
+        <CommandMenuContainer
+            editor={editor}
+            hooks={hooks}
+            isShow={true}
+            blockId={blockId}
+            onSelected={handle_select}
+            types={defaultTypeList}
+            categories={defaultCategoriesList}
+            style={{ position: 'relative', boxShadow: 'none', padding: '0' }}
+        />
+    );
+};
diff --git a/libs/components/editor-plugins/src/menu/left-menu/menu-config.ts b/libs/components/editor-plugins/src/menu/left-menu/menu-config.ts
new file mode 100644
index 000000000..0d107c15a
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/left-menu/menu-config.ts
@@ -0,0 +1,104 @@
+import { BlockFlavorKeys, Protocol } from '@toeverything/datasource/db-service';
+import ShortTextIcon from '@mui/icons-material/ShortText';
+import TitleIcon from '@mui/icons-material/Title';
+import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
+import HorizontalRuleIcon from '@mui/icons-material/HorizontalRule';
+import NotificationsNoneIcon from '@mui/icons-material/NotificationsNone';
+import {
+    CodeBlockInlineIcon,
+    PagesIcon,
+} from '@toeverything/components/common';
+import ListIcon from '@mui/icons-material/List';
+export const MENU_WIDTH = 14;
+export const pageConvertIconSize = 24;
+type MenuItem = {
+    name: string[];
+    title: string;
+    blockType: string;
+    render?({ renderNode }: { renderNode: any }): void;
+    icon: typeof ShortTextIcon;
+    params?: Record<string, any>;
+    disable?: boolean;
+};
+
+const textTypeBlocks: MenuItem[] = [
+    {
+        name: ['text'], // name represents the search keyword
+        title: 'Text',
+        blockType: Protocol.Block.Type.text,
+        icon: ShortTextIcon,
+    },
+    {
+        name: ['quote'],
+        title: 'Quote',
+        blockType: Protocol.Block.Type.quote,
+        icon: ShortTextIcon,
+    },
+    {
+        name: ['page'],
+        title: 'Page',
+        blockType: Protocol.Block.Type.page,
+        icon: PagesIcon as any,
+    },
+    {
+        name: ['todo'],
+        title: 'To-do list',
+        blockType: Protocol.Block.Type.todo,
+        icon: ListIcon,
+    },
+    {
+        name: ['heading1'],
+        title: 'Heading 1',
+        blockType: Protocol.Block.Type.heading1,
+        icon: TitleIcon,
+    },
+    {
+        name: ['heading2'],
+        title: 'Heading 2',
+        blockType: Protocol.Block.Type.heading2,
+        icon: TitleIcon,
+    },
+    {
+        name: ['heading3'],
+        title: 'Heading 3',
+        blockType: Protocol.Block.Type.heading3,
+        icon: TitleIcon,
+    },
+    {
+        name: ['code'],
+        title: 'Code',
+        blockType: Protocol.Block.Type.code,
+        icon: CodeBlockInlineIcon as any,
+    },
+    {
+        name: ['bullet'],
+        title: 'Bullet List',
+        blockType: Protocol.Block.Type.bullet,
+        icon: FormatListBulletedIcon,
+    },
+    {
+        name: ['call', 'callout'],
+        title: 'Callout',
+        blockType: Protocol.Block.Type.callout,
+        icon: NotificationsNoneIcon,
+    },
+    {
+        name: ['div', 'divider'],
+        title: 'Divider',
+        blockType: Protocol.Block.Type.divider,
+        icon: HorizontalRuleIcon,
+    },
+];
+
+export const addMenuList = [...textTypeBlocks].filter(v => v);
+
+export const textConvertMenuList = textTypeBlocks;
+
+export const ignoreBlockTypes: BlockFlavorKeys[] = [
+    Protocol.Block.Type.workspace,
+    Protocol.Block.Type.page,
+    Protocol.Block.Type.group,
+    Protocol.Block.Type.title,
+    Protocol.Block.Type.grid,
+    Protocol.Block.Type.gridItem,
+];
diff --git a/libs/components/editor-plugins/src/menu/reference-menu/ReferenceMenu.tsx b/libs/components/editor-plugins/src/menu/reference-menu/ReferenceMenu.tsx
new file mode 100644
index 000000000..ab1664883
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/reference-menu/ReferenceMenu.tsx
@@ -0,0 +1,150 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import style9 from 'style9';
+
+import { MuiClickAwayListener } from '@toeverything/components/ui';
+import { Virgo, HookType, PluginHooks } from '@toeverything/framework/virgo';
+import { Point } from '@toeverything/utils';
+
+import { ReferenceMenuContainer } from './container';
+import { QueryBlocks, QueryResult } from '../../search';
+
+export type ReferenceMenuProps = {
+    editor: Virgo;
+    hooks: PluginHooks;
+    style?: { left: number; top: number };
+};
+
+export type RefLinkComponent = {
+    type: 'reflink';
+    reference: string;
+};
+
+const BEFORE_REGEX = /\[\[(.*)$/;
+
+export const ReferenceMenu = ({ editor, hooks, style }: ReferenceMenuProps) => {
+    const [is_show, set_is_show] = useState(false);
+    const [block_id, set_block_id] = useState<string>();
+    const [position, set_position] = useState<Point>(new Point(0, 0));
+
+    const [search_text, set_search_text] = useState<string>('');
+    const [search_blocks, set_search_blocks] = useState<QueryResult>([]);
+
+    useEffect(() => {
+        QueryBlocks(editor, search_text, result => set_search_blocks(result));
+    }, [editor, search_text]);
+
+    const search_block_ids = useMemo(
+        () => Object.values(search_blocks).map(({ id }) => id),
+        [search_blocks]
+    );
+
+    const handle_search = useCallback(
+        async (event: React.KeyboardEvent<HTMLDivElement>) => {
+            const { type, anchorNode } = editor.selection.currentSelectInfo;
+            if (
+                type === 'Range' &&
+                anchorNode &&
+                editor.blockHelper.isSelectionCollapsed(anchorNode.id)
+            ) {
+                const text = editor.blockHelper.getBlockTextBeforeSelection(
+                    anchorNode.id
+                );
+                const matched = BEFORE_REGEX.exec(text)?.[1];
+
+                if (typeof matched === 'string') {
+                    if (event.key === '[') set_is_show(true);
+
+                    set_block_id(anchorNode.id);
+                    set_search_text(matched);
+
+                    const rect =
+                        editor.selection.currentSelectInfo?.browserSelection
+                            ?.getRangeAt(0)
+                            ?.getBoundingClientRect();
+                    if (rect) {
+                        set_position(new Point(rect.left, rect.top + 24));
+                    }
+                } else if (is_show) {
+                    set_is_show(false);
+                }
+            }
+        },
+        [editor, is_show]
+    );
+
+    const handle_keyup = useCallback(
+        (event: React.KeyboardEvent<HTMLDivElement>) => handle_search(event),
+        [handle_search]
+    );
+
+    const handle_key_down = useCallback(
+        (event: React.KeyboardEvent<HTMLDivElement>) => {
+            if (event.code === 'Escape') {
+                set_is_show(false);
+            }
+        },
+        []
+    );
+
+    useEffect(() => {
+        hooks.addHook(HookType.ON_ROOT_NODE_KEYUP, handle_keyup);
+        hooks.addHook(HookType.ON_ROOT_NODE_KEYDOWN_CAPTURE, handle_key_down);
+
+        return () => {
+            hooks.removeHook(HookType.ON_ROOT_NODE_KEYUP, handle_keyup);
+            hooks.removeHook(
+                HookType.ON_ROOT_NODE_KEYDOWN_CAPTURE,
+                handle_key_down
+            );
+        };
+    }, [handle_keyup, handle_key_down, hooks]);
+
+    const handle_selected = async (reference: string) => {
+        if (block_id) {
+            const { anchorNode } = editor.selection.currentSelectInfo;
+            editor.blockHelper.insertReference(
+                reference,
+                anchorNode.id,
+                editor.selection.currentSelectInfo?.browserSelection,
+                -search_text.length - 2
+            );
+        }
+
+        set_is_show(false);
+    };
+
+    const handle_close = () => {
+        editor.blockHelper.removeSearchSlash(block_id);
+    };
+
+    return (
+        <div
+            className={styles('referenceMenu')}
+            style={{ top: position.y, left: position.x }}
+            onKeyUp={handle_keyup}
+        >
+            <MuiClickAwayListener onClickAway={() => set_is_show(false)}>
+                <div>
+                    <ReferenceMenuContainer
+                        editor={editor}
+                        hooks={hooks}
+                        style={style}
+                        isShow={is_show && !!search_text}
+                        blockId={block_id}
+                        onSelected={handle_selected}
+                        onClose={handle_close}
+                        searchBlocks={search_blocks}
+                        types={search_block_ids}
+                    />
+                </div>
+            </MuiClickAwayListener>
+        </div>
+    );
+};
+
+const styles = style9.create({
+    referenceMenu: {
+        position: 'absolute',
+        zIndex: 1,
+    },
+});
diff --git a/libs/components/editor-plugins/src/menu/reference-menu/container.tsx b/libs/components/editor-plugins/src/menu/reference-menu/container.tsx
new file mode 100644
index 000000000..6edd702ef
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/reference-menu/container.tsx
@@ -0,0 +1,193 @@
+import React, { useEffect, useState, useCallback, useRef } from 'react';
+import style9 from 'style9';
+
+import { Virgo, PluginHooks, HookType } from '@toeverything/framework/virgo';
+import {
+    CommonList,
+    CommonListItem,
+    commonListContainer,
+} from '@toeverything/components/common';
+import { domToRect } from '@toeverything/utils';
+
+import { QueryResult } from '../../search';
+
+export type ReferenceMenuContainerProps = {
+    editor: Virgo;
+    hooks: PluginHooks;
+    style?: React.CSSProperties;
+    isShow?: boolean;
+    blockId: string;
+    onSelected?: (item: string) => void;
+    onClose?: () => void;
+    searchBlocks?: QueryResult;
+    types?: Array<string>;
+};
+
+export const ReferenceMenuContainer = ({
+    hooks,
+    isShow = false,
+    onSelected,
+    onClose,
+    types,
+    searchBlocks,
+    style,
+}: ReferenceMenuContainerProps) => {
+    const menu_ref = useRef<HTMLDivElement>(null);
+    const [current_item, set_current_item] = useState<string | undefined>();
+    const [need_check_into_view, set_need_check_into_view] =
+        useState<boolean>(false);
+
+    useEffect(() => {
+        if (need_check_into_view) {
+            if (current_item && menu_ref.current) {
+                const item_ele =
+                    menu_ref.current.querySelector<HTMLButtonElement>(
+                        `.item-${current_item}`
+                    );
+                const scroll_ele =
+                    menu_ref.current.querySelector<HTMLButtonElement>(
+                        `.${commonListContainer}`
+                    );
+                if (item_ele) {
+                    const itemRect = domToRect(item_ele);
+                    const scrollRect = domToRect(scroll_ele);
+                    if (
+                        itemRect.top < scrollRect.top ||
+                        itemRect.bottom > scrollRect.bottom
+                    ) {
+                        // IMP: may be do it with self function
+                        item_ele.scrollIntoView({
+                            block: 'nearest',
+                        });
+                    }
+                }
+            }
+            set_need_check_into_view(false);
+        }
+    }, [need_check_into_view, current_item]);
+
+    useEffect(() => {
+        if (isShow && types && !current_item) set_current_item(types[0]);
+        if (!isShow) onClose?.();
+    }, [current_item, isShow, onClose, types]);
+
+    useEffect(() => {
+        if (isShow && types) {
+            if (!types.includes(current_item)) {
+                set_need_check_into_view(true);
+                if (types.length) {
+                    set_current_item(types[0]);
+                } else {
+                    set_current_item(undefined);
+                }
+            }
+        }
+    }, [isShow, types, current_item]);
+
+    const handle_click_up = useCallback(
+        (event: React.KeyboardEvent<HTMLDivElement>) => {
+            if (isShow && types && event.code === 'ArrowUp') {
+                event.preventDefault();
+                if (!current_item && types.length) {
+                    set_current_item(types[types.length - 1]);
+                }
+                if (current_item) {
+                    const idx = types.indexOf(current_item);
+                    if (idx > 0) {
+                        set_need_check_into_view(true);
+                        set_current_item(types[idx - 1]);
+                    }
+                }
+            }
+        },
+        [isShow, types, current_item]
+    );
+
+    const handle_click_down = useCallback(
+        (event: React.KeyboardEvent<HTMLDivElement>) => {
+            if (isShow && types && event.code === 'ArrowDown') {
+                event.preventDefault();
+                if (!current_item && types.length) {
+                    set_current_item(types[0]);
+                }
+                if (current_item) {
+                    const idx = types.indexOf(current_item);
+                    if (idx < types.length - 1) {
+                        set_need_check_into_view(true);
+                        set_current_item(types[idx + 1]);
+                    }
+                }
+            }
+        },
+        [isShow, types, current_item]
+    );
+
+    const handle_click_enter = useCallback(
+        async (event: React.KeyboardEvent<HTMLDivElement>) => {
+            if (isShow && event.code === 'Enter' && current_item) {
+                event.preventDefault();
+                onSelected && onSelected(current_item);
+            }
+        },
+        [isShow, current_item, onSelected]
+    );
+
+    const handle_key_down = useCallback(
+        (event: React.KeyboardEvent<HTMLDivElement>) => {
+            handle_click_up(event);
+            handle_click_down(event);
+            handle_click_enter(event);
+        },
+        [handle_click_up, handle_click_down, handle_click_enter]
+    );
+
+    useEffect(() => {
+        hooks.addHook(HookType.ON_ROOT_NODE_KEYDOWN_CAPTURE, handle_key_down);
+
+        return () => {
+            hooks.removeHook(
+                HookType.ON_ROOT_NODE_KEYDOWN_CAPTURE,
+                handle_key_down
+            );
+        };
+    }, [hooks, handle_key_down]);
+
+    return isShow ? (
+        <div
+            ref={menu_ref}
+            className={styles('rootContainer')}
+            onKeyDownCapture={handle_key_down}
+            style={style}
+        >
+            <div className={styles('contentContainer')}>
+                <CommonList
+                    items={
+                        searchBlocks?.map(
+                            block => ({ block } as CommonListItem)
+                        ) || []
+                    }
+                    onSelected={type => onSelected?.(type)}
+                    currentItem={current_item}
+                    setCurrentItem={set_current_item}
+                />
+            </div>
+        </div>
+    ) : null;
+};
+
+const styles = style9.create({
+    rootContainer: {
+        position: 'fixed',
+        zIndex: 1,
+        maxHeight: 525,
+        borderRadius: '10px',
+        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+        backgroundColor: '#fff',
+        padding: '8px 4px',
+    },
+    contentContainer: {
+        display: 'flex',
+        overflow: 'hidden',
+        maxHeight: 493,
+    },
+});
diff --git a/libs/components/editor-plugins/src/menu/reference-menu/index.tsx b/libs/components/editor-plugins/src/menu/reference-menu/index.tsx
new file mode 100644
index 000000000..18174250f
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/reference-menu/index.tsx
@@ -0,0 +1,33 @@
+import { StrictMode } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+import { BasePlugin } from '../../base-plugin';
+import { ReferenceMenu } from './ReferenceMenu';
+
+const PLUGIN_NAME = 'reference-menu';
+
+export class ReferenceMenuPlugin extends BasePlugin {
+    private root?: Root;
+
+    public static override get pluginName(): string {
+        return PLUGIN_NAME;
+    }
+
+    protected override on_render(): void {
+        const container = document.createElement('div');
+        // TODO: remove
+        container.classList.add(`id-${PLUGIN_NAME}`);
+        // this.editor.attachElement(this.menu_container);
+        window.document.body.appendChild(container);
+        this.root = createRoot(container);
+        this.render_reference_menu();
+    }
+
+    private render_reference_menu(): void {
+        this.root?.render(
+            <StrictMode>
+                <ReferenceMenu editor={this.editor} hooks={this.hooks} />
+            </StrictMode>
+        );
+    }
+}
diff --git a/libs/components/editor-plugins/src/menu/selection-group-menu/MenuApp.tsx b/libs/components/editor-plugins/src/menu/selection-group-menu/MenuApp.tsx
new file mode 100644
index 000000000..3c26ad4de
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/selection-group-menu/MenuApp.tsx
@@ -0,0 +1,118 @@
+import {
+    MuiClickAwayListener as ClickAwayListener,
+    styled,
+} from '@toeverything/components/ui';
+import { Protocol } from '@toeverything/datasource/db-service';
+import type {
+    AsyncBlock,
+    PluginHooks,
+    Virgo,
+} from '@toeverything/framework/virgo';
+import {
+    createContext,
+    useContext,
+    useEffect,
+    useState,
+    type CSSProperties,
+} from 'react';
+
+export type Store =
+    | {
+          editor: Virgo;
+          hooks: PluginHooks;
+      }
+    | Record<string, never>;
+
+export const StoreContext = createContext<Store>({});
+
+export const MenuApp = () => {
+    const { editor } = useContext(StoreContext);
+    const [show, setShow] = useState<boolean>(false);
+    const [style, setStyle] = useState<CSSProperties>();
+    const [selectedNodes, setSelectedNodes] = useState<AsyncBlock[]>([]);
+
+    useEffect(() => {
+        if (!editor) {
+            console.warn('Failed to found editor! ');
+            return undefined;
+        }
+        const unsubscribe = editor.selection.onSelectEnd(
+            async ({ type, selectedNodesIds }) => {
+                if (type !== 'Block' || selectedNodesIds.length <= 1) {
+                    // Not show menu if only one node is selected.
+                    // The user can still create a group with only one block.
+                    return;
+                }
+                const selectedNodes = (
+                    await Promise.all(
+                        selectedNodesIds.map(id => editor.getBlockById(id))
+                    )
+                ).filter(Boolean) as AsyncBlock[];
+                if (
+                    !selectedNodes.every(
+                        node => node.type === Protocol.Block.Type.group
+                    )
+                ) {
+                    return;
+                }
+
+                // Assume the first block is the topmost block
+                const topmostBlock = selectedNodes[0];
+                if (!topmostBlock) {
+                    throw new Error(
+                        'Failed to get block, id: ' + selectedNodesIds[0]
+                    );
+                }
+                const dom = topmostBlock.dom;
+                if (!dom) {
+                    return;
+                }
+                const rect = dom.getBoundingClientRect();
+
+                setSelectedNodes(selectedNodes);
+                setStyle({
+                    position: 'fixed',
+                    left: rect.right,
+                    top: rect.top,
+                    transform: 'translate(-100%, -100%)',
+                });
+                setShow(true);
+            }
+        );
+        return unsubscribe;
+    }, [editor]);
+
+    const handleGroup = () => {
+        editor.commands.blockCommands.mergeGroup(...selectedNodes);
+        setShow(false);
+    };
+
+    const handleClickAway = () => {
+        if (show) {
+            setShow(false);
+        }
+    };
+
+    return show ? (
+        <ClickAwayListener onClickAway={handleClickAway}>
+            <IconButton style={style} onClick={handleGroup}>
+                Merge Group
+            </IconButton>
+        </ClickAwayListener>
+    ) : null;
+};
+
+const IconButton = styled('span')({
+    padding: '4px 8px',
+    borderRadius: '4px',
+    color: '#3E6FDB',
+    cursor: 'pointer',
+
+    '&:hover': {
+        backgroundColor: 'rgba(62, 111, 219, 0.1)',
+    },
+
+    '&.active': {
+        backgroundColor: 'rgba(62, 111, 219, 0.1)',
+    },
+});
diff --git a/libs/components/editor-plugins/src/menu/selection-group-menu/SelectionGroupPlugin.tsx b/libs/components/editor-plugins/src/menu/selection-group-menu/SelectionGroupPlugin.tsx
new file mode 100644
index 000000000..a4e42216a
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/selection-group-menu/SelectionGroupPlugin.tsx
@@ -0,0 +1,36 @@
+import { StrictMode } from 'react';
+import { BasePlugin } from '../../base-plugin';
+import { PluginRenderRoot } from '../../utils';
+import { MenuApp, StoreContext } from './MenuApp';
+
+const PLUGIN_NAME = 'selection-group';
+
+export class SelectionGroupPlugin extends BasePlugin {
+    public static override get pluginName(): string {
+        return PLUGIN_NAME;
+    }
+
+    private root: PluginRenderRoot | undefined;
+
+    protected override on_render() {
+        this.root = new PluginRenderRoot({
+            name: SelectionGroupPlugin.pluginName,
+            render: this.editor.reactRenderRoot?.render,
+        });
+        this.root.mount();
+        this.root.render(
+            <StrictMode>
+                <StoreContext.Provider
+                    value={{ editor: this.editor, hooks: this.hooks }}
+                >
+                    <MenuApp />
+                </StoreContext.Provider>
+            </StrictMode>
+        );
+    }
+
+    public override dispose() {
+        this.root?.unmount();
+        super.dispose();
+    }
+}
diff --git a/libs/components/editor-plugins/src/menu/selection-group-menu/index.ts b/libs/components/editor-plugins/src/menu/selection-group-menu/index.ts
new file mode 100644
index 000000000..7677ec93c
--- /dev/null
+++ b/libs/components/editor-plugins/src/menu/selection-group-menu/index.ts
@@ -0,0 +1 @@
+export { SelectionGroupPlugin } from './SelectionGroupPlugin';
diff --git a/libs/components/editor-plugins/src/placeholder/Placeholder.tsx b/libs/components/editor-plugins/src/placeholder/Placeholder.tsx
new file mode 100644
index 000000000..5fcfec9e2
--- /dev/null
+++ b/libs/components/editor-plugins/src/placeholder/Placeholder.tsx
@@ -0,0 +1,38 @@
+import { StrictMode } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+import { BasePlugin } from './../base-plugin';
+import { PlaceholderPanel } from './PlaceholderPanel';
+const PLUGIN_NAME = 'placeholder';
+
+export class PlaceholderPlugin extends BasePlugin {
+    private root?: Root;
+
+    public static override get pluginName(): string {
+        return PLUGIN_NAME;
+    }
+
+    protected override on_render(): void {
+        const container = document.createElement('div');
+        // TODO remove
+        container.classList.add(`id-${PLUGIN_NAME}`);
+        window.document.body.appendChild(container);
+        this.root = createRoot(container);
+        this._renderPlugin();
+    }
+
+    private _renderPlugin(): void {
+        this.root?.render(
+            <StrictMode>
+                <PlaceholderPanel
+                    editor={this.editor}
+                    onClickTips={() => this.dispose()}
+                />
+            </StrictMode>
+        );
+    }
+
+    public override dispose(): void {
+        this.root?.unmount();
+    }
+}
diff --git a/libs/components/editor-plugins/src/placeholder/PlaceholderPanel.tsx b/libs/components/editor-plugins/src/placeholder/PlaceholderPanel.tsx
new file mode 100644
index 000000000..429336c97
--- /dev/null
+++ b/libs/components/editor-plugins/src/placeholder/PlaceholderPanel.tsx
@@ -0,0 +1,194 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router';
+import { Virgo, BlockEditor } from '@toeverything/framework/virgo';
+import { debounce } from '@toeverything/utils';
+
+import { MuiBox as Box, styled, BaseButton } from '@toeverything/components/ui';
+import {
+    services,
+    type ReturnUnobserve,
+    TemplateFactory,
+    TemplateMeta,
+} from '@toeverything/datasource/db-service';
+
+const PlaceholderPanelContainer = styled('div')({
+    position: 'fixed',
+    top: '0px',
+    fontSize: '16px',
+    lineHeight: '22px',
+    opacity: '0.333',
+});
+
+const TemplateItemContainer = styled('div')({
+    '&:hover': {
+        backgroundColor: '#eee',
+        cursor: 'pointer',
+    },
+});
+
+const EmptyPageTipContainer = styled('div')({
+    cursor: 'pointer',
+    '&:hover': {
+        backgroundColor: '#eee',
+        cursor: 'pointer',
+    },
+});
+
+type PlaceholderPanelProps = {
+    editor: Virgo;
+    onClickTips?: () => void;
+};
+
+export const PlaceholderPanel = (props: PlaceholderPanelProps) => {
+    const editor = props.editor;
+    const workspaceId = editor.workspace;
+
+    const [point, setPoint] = useState({
+        x: 0,
+        y: 0,
+    });
+    const [open, setOpen] = useState(false);
+    // const navigate = useNavigate();
+
+    const ifPageChildrenExist = useCallback(async () => {
+        const rootId = await editor.getRootBlockId();
+        const dbPageBlock = await services.api.editorBlock.getBlock(
+            workspaceId,
+            rootId
+        );
+        if (!dbPageBlock) return;
+        if (dbPageBlock.children && dbPageBlock.children.length > 0) {
+            setOpen(false);
+        } else {
+            if (open) {
+                return;
+            }
+            setOpen(true);
+            adjustPosition();
+        }
+    }, [
+        editor,
+        workspaceId,
+        editor.getRootBlockId,
+        open,
+        services.api.editorBlock.getBlock,
+    ]);
+
+    useEffect(() => {
+        let unobserve: ReturnUnobserve | undefined = undefined;
+        const observe = async () => {
+            const rootId = await editor.getRootBlockId();
+
+            unobserve = await services.api.editorBlock.observe(
+                {
+                    workspace: workspaceId,
+                    id: rootId,
+                },
+                () => {
+                    ifPageChildrenExist();
+                }
+            );
+        };
+        observe();
+
+        return () => {
+            unobserve?.();
+        };
+    }, [editor, workspaceId, editor.getRootBlockId, ifPageChildrenExist]);
+
+    const adjustPosition = useCallback(async () => {
+        //@ts-ignore
+        const rootBlockDom = await editor.getBlockDomById(
+            editor.getRootBlockId()
+        );
+        const { x, y } = rootBlockDom.getBoundingClientRect();
+        setPoint({
+            x,
+            y: y + 60,
+        });
+        //@ts-ignore
+    }, [editor, editor.getRootBlockId, editor.getBlockDomById]);
+
+    useEffect(() => {
+        let unobserve: () => void;
+        const observerePageTreeChange = async () => {
+            unobserve = await services.api.pageTree.observe(
+                { workspace: workspaceId, page: editor.getRootBlockId() },
+                ifPageChildrenExist
+            );
+        };
+        observerePageTreeChange();
+
+        return () => {
+            unobserve?.();
+        };
+    }, [editor, workspaceId, editor.getRootBlockId, ifPageChildrenExist, open]);
+
+    useEffect(() => {
+        ifPageChildrenExist();
+    }, [editor, ifPageChildrenExist, open]);
+
+    const handleClickEmptyPage = async () => {
+        const rootBlockId = await editor.getRootBlockId();
+        await services.api.editorBlock.copyTemplateToPage(
+            workspaceId,
+            rootBlockId,
+            TemplateFactory.generatePageTemplateByGroupKeys({
+                name: 'Empty Page',
+                groupKeys: ['empty'],
+            })
+        );
+        setOpen(false);
+        props.onClickTips();
+    };
+    const templateList: Array<TemplateMeta> =
+        TemplateFactory.defaultTemplateList;
+    const handleNewFromTemplate = async (template: TemplateMeta) => {
+        const pageId = await editor.getRootBlockId();
+        const newPage = await services.api.editorBlock.getBlock(
+            workspaceId,
+            pageId
+        );
+
+        await services.api.editorBlock.copyTemplateToPage(
+            workspaceId,
+            newPage.id,
+            TemplateFactory.generatePageTemplateByGroupKeys(template)
+        );
+
+        // redirectToPage(workspaceId, newPage.id);
+
+        // handleClose();
+        setOpen(false);
+    };
+    return (
+        <>
+            <PlaceholderPanelContainer
+                style={{
+                    top: point.y + 'px',
+                    left: point.x + 'px',
+                    display: open ? 'block' : 'none',
+                }}
+            >
+                <EmptyPageTipContainer onClick={handleClickEmptyPage}>
+                    Press Enter to continue with an empty page, or pick a
+                    template
+                </EmptyPageTipContainer>
+                <div style={{ marginTop: '4px', marginLeft: '-8px' }}>
+                    {templateList.map((template, index) => {
+                        return (
+                            <TemplateItemContainer
+                                key={index}
+                                onClick={() => {
+                                    handleNewFromTemplate(template);
+                                }}
+                            >
+                                <BaseButton>{template.name}</BaseButton>
+                            </TemplateItemContainer>
+                        );
+                    })}
+                </div>
+            </PlaceholderPanelContainer>
+        </>
+    );
+};
diff --git a/libs/components/editor-plugins/src/placeholder/index.ts b/libs/components/editor-plugins/src/placeholder/index.ts
new file mode 100644
index 000000000..5c3772514
--- /dev/null
+++ b/libs/components/editor-plugins/src/placeholder/index.ts
@@ -0,0 +1 @@
+export * from './Placeholder';
diff --git a/libs/components/editor-plugins/src/search/index.tsx b/libs/components/editor-plugins/src/search/index.tsx
new file mode 100644
index 000000000..d4d4c0ef0
--- /dev/null
+++ b/libs/components/editor-plugins/src/search/index.tsx
@@ -0,0 +1,50 @@
+import { StrictMode } from 'react';
+
+import { HookType } from '@toeverything/framework/virgo';
+
+import { BasePlugin } from '../base-plugin';
+import { Search } from './search';
+import { PluginRenderRoot } from '../utils';
+
+export class FullTextSearchPlugin extends BasePlugin {
+    #root?: PluginRenderRoot;
+
+    public static override get pluginName(): string {
+        return 'search';
+    }
+
+    public override init(): void {
+        this.hooks.addHook(HookType.ON_SEARCH, this.handle_search, this);
+    }
+
+    private unmount() {
+        if (this.#root) {
+            this.editor.setHotKeysScope();
+            this.#root.unmount();
+            this.#root = undefined;
+        }
+    }
+
+    private handle_search() {
+        this.editor.setHotKeysScope('search');
+        this.render_search();
+    }
+    private render_search() {
+        this.#root = new PluginRenderRoot({
+            name: FullTextSearchPlugin.pluginName,
+            render: this.editor.reactRenderRoot.render,
+        });
+        this.#root.mount();
+        this.#root.render(
+            <StrictMode>
+                <Search onClose={() => this.unmount()} editor={this.editor} />
+            </StrictMode>
+        );
+    }
+    public renderSearch() {
+        this.render_search();
+    }
+}
+
+export type { QueryResult } from './search';
+export { QueryBlocks } from './search';
diff --git a/libs/components/editor-plugins/src/search/search.tsx b/libs/components/editor-plugins/src/search/search.tsx
new file mode 100644
index 000000000..2983df8e4
--- /dev/null
+++ b/libs/components/editor-plugins/src/search/search.tsx
@@ -0,0 +1,117 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router';
+import style9 from 'style9';
+
+import { BlockPreview } from '@toeverything/components/common';
+import {
+    TransitionsModal,
+    MuiBox as Box,
+    MuiBox,
+} from '@toeverything/components/ui';
+import { Virgo, BlockEditor } from '@toeverything/framework/virgo';
+import { throttle } from '@toeverything/utils';
+
+const styles = style9.create({
+    wrapper: {
+        position: 'absolute',
+        top: '20%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: '50vw',
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    search: {
+        margin: '0.5em',
+        backgroundColor: 'white',
+        boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)',
+        padding: '16px 32px',
+        borderRadius: '10px',
+    },
+    result: {
+        margin: '0.5em',
+        backgroundColor: 'white',
+        boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)',
+        padding: '16px 32px',
+        borderRadius: '10px',
+        transitionProperty: 'max-height',
+        transitionDuration: '300ms',
+        transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+        transitionDelay: '0ms',
+        overflowX: 'hidden',
+        overflowY: 'hidden',
+    },
+    result_hide: {
+        opacity: 0,
+    },
+});
+
+export type QueryResult = Awaited<ReturnType<BlockEditor['search']>>;
+
+const query_blocks = (
+    editor: Virgo,
+    search: string,
+    callback: (result: QueryResult) => void
+) => {
+    (editor as BlockEditor).search(search).then(pages => callback(pages));
+};
+
+export const QueryBlocks = throttle(query_blocks, 500);
+
+type SearchProps = {
+    onClose: () => void;
+    editor: Virgo;
+};
+
+export const Search = (props: SearchProps) => {
+    const { workspace_id } = useParams();
+    const navigate = useNavigate();
+
+    const [open, set_open] = useState(true);
+    const [search, set_search] = useState('');
+    const [result, set_result] = useState<QueryResult>([]);
+
+    useEffect(() => {
+        QueryBlocks(props.editor, search, result => {
+            set_result(result);
+        });
+    }, [props.editor, search]);
+
+    const handle_navigate = useCallback(
+        (id: string) => navigate(`/${workspace_id}/${id}`),
+        [navigate, workspace_id]
+    );
+
+    return (
+        <TransitionsModal
+            open={open}
+            onClose={() => {
+                set_open(false);
+                props.onClose();
+            }}
+        >
+            <Box className={styles('wrapper')}>
+                <input
+                    className={styles('search')}
+                    autoFocus
+                    value={search}
+                    onChange={e => set_search(e.target.value)}
+                />
+                <MuiBox
+                    sx={{ maxHeight: `${result.length * 28 + 32 + 20}px` }}
+                    className={styles('result', {
+                        result_hide: !result.length,
+                    })}
+                >
+                    {result.map(block => (
+                        <BlockPreview
+                            key={block.id}
+                            block={block}
+                            onClick={() => handle_navigate(block.id)}
+                        />
+                    ))}
+                </MuiBox>
+            </Box>
+        </TransitionsModal>
+    );
+};
diff --git a/libs/components/editor-plugins/src/template/index.ts b/libs/components/editor-plugins/src/template/index.ts
new file mode 100644
index 000000000..1b4a22a41
--- /dev/null
+++ b/libs/components/editor-plugins/src/template/index.ts
@@ -0,0 +1 @@
+export * from './template';
diff --git a/libs/components/editor-plugins/src/template/readme.md b/libs/components/editor-plugins/src/template/readme.md
new file mode 100644
index 000000000..e71e69643
--- /dev/null
+++ b/libs/components/editor-plugins/src/template/readme.md
@@ -0,0 +1,6 @@
+ExportJson
+
+```
+virgo.plugins.plugins.tempalte.exportTemplateJson()
+.then(data => console.log(JSON.stringify(data)));
+```
diff --git a/libs/components/editor-plugins/src/template/template.ts b/libs/components/editor-plugins/src/template/template.ts
new file mode 100644
index 000000000..7a403efd5
--- /dev/null
+++ b/libs/components/editor-plugins/src/template/template.ts
@@ -0,0 +1,107 @@
+import { Virgo, AsyncBlock } from '@toeverything/framework/virgo';
+import {
+    Protocol,
+    services,
+    Template,
+} from '@toeverything/datasource/db-service';
+import assert from 'assert';
+import format from 'date-fns/format';
+
+import { BasePlugin } from '../base-plugin';
+export class TemplatePlugin extends BasePlugin {
+    static singleton: TemplatePlugin;
+
+    public static override get pluginName(): string {
+        return 'tempalte';
+    }
+
+    async exportTemplate(blockId: string): Promise<Template> {
+        const editor: Virgo = this.editor;
+        const curBlock = await editor.getBlockById(
+            blockId || editor.getRootBlockId()
+        );
+
+        const exportData: Template = {
+            type: curBlock.type,
+            properties: curBlock.getProperties(),
+            blocks: [],
+        };
+        const blocks = await curBlock.children();
+        for (let i = 0; i < blocks.length; i++) {
+            const subTemplate = await this.exportTemplate(blocks[i].id);
+            const exportBlock: Template = {
+                type: blocks[i].type,
+                properties: blocks[i].getProperties(),
+                blocks: subTemplate.blocks,
+            };
+            exportData.blocks.push(exportBlock);
+        }
+
+        return exportData;
+    }
+    private _generateDailyNote_title() {
+        return `${format(new Date(), 'yyyy/MM/dd')}`;
+    }
+    public async addDailyNote(): Promise<AsyncBlock> {
+        return this._addDailyNote();
+    }
+    private async _addDailyNote() {
+        const newPageBlock = await this.editor.createBlock('page');
+        newPageBlock.setProperties({
+            text: { value: [{ text: this._generateDailyNote_title() }] },
+        });
+        const nextBlock = await this.editor.createBlock(
+            Protocol.Block.Type.todo
+        );
+        nextBlock.setProperties({
+            text: { value: [{ text: '1. Get Things Done' }] },
+        });
+        newPageBlock.append(nextBlock);
+        this._addPageIntoWorkspace(newPageBlock);
+        return newPageBlock;
+    }
+    private _getDefaultWorkspaceId() {
+        return window.location.pathname.split('/')[1];
+    }
+    private async _addPageIntoWorkspace(
+        newPageBlock: AsyncBlock,
+        targetWorkspaceId?: string
+    ) {
+        const workspaceId = targetWorkspaceId || this._getDefaultWorkspaceId();
+        const pageId = newPageBlock.id;
+        const items = await services.api.pageTree.getPageTree<any>(workspaceId);
+        await services.api.pageTree.setPageTree<any>(workspaceId, [
+            { id: pageId, children: [] },
+            ...items,
+        ]);
+    }
+    async imporPageData(importData: Template, targetWorkspaceId: string) {
+        assert(importData, 'importData is required');
+
+        //create new page
+        const newPageBlock = await this.editor.createBlock('page');
+
+        newPageBlock.setProperties(importData.properties);
+
+        for (let i = 0; i < importData.blocks.length; i++) {
+            const nextBlock = await this.editor.createBlock(
+                importData.blocks[i].type
+            );
+            nextBlock.setProperties(importData.blocks[i].properties);
+            newPageBlock.append(nextBlock);
+        }
+
+        // update page tree
+        this._addPageIntoWorkspace(newPageBlock);
+
+        return newPageBlock.id;
+    }
+    async exportTemplateJson(block_id: string) {
+        return this.exportTemplate(block_id);
+    }
+    async imporPageDataJson(json_str: string, targetWorkspaceId: string) {
+        assert(json_str, 'json_str is required');
+        const importData: Template = JSON.parse(json_str);
+        return this.imporPageData(importData, targetWorkspaceId);
+    }
+}
diff --git a/libs/components/editor-plugins/src/utils/index.ts b/libs/components/editor-plugins/src/utils/index.ts
new file mode 100644
index 000000000..789aa3e0a
--- /dev/null
+++ b/libs/components/editor-plugins/src/utils/index.ts
@@ -0,0 +1 @@
+export { PluginRenderRoot } from './plugin-render-root';
diff --git a/libs/components/editor-plugins/src/utils/plugin-render-root.ts b/libs/components/editor-plugins/src/utils/plugin-render-root.ts
new file mode 100644
index 000000000..ff1aabc80
--- /dev/null
+++ b/libs/components/editor-plugins/src/utils/plugin-render-root.ts
@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import type { PatchNode, UnPatchNode } from '@toeverything/components/ui';
+
+interface PluginRenderRootProps {
+    name: string;
+    render: PatchNode;
+}
+export class PluginRenderRoot {
+    readonly name: string;
+    readonly patch: PatchNode;
+    private un_patch: UnPatchNode;
+    private root: ReactNode;
+    public isMounted = false;
+
+    constructor({ name, render }: PluginRenderRootProps) {
+        this.name = name;
+        this.patch = render;
+    }
+
+    render(node?: ReactNode) {
+        this.root = node;
+        if (this.isMounted) {
+            this.mount();
+        }
+    }
+
+    mount() {
+        this.un_patch = this.patch(this.name, this.root);
+        this.isMounted = true;
+    }
+
+    unmount() {
+        this.un_patch?.();
+        this.isMounted = false;
+    }
+}
diff --git a/libs/components/editor-plugins/tsconfig.json b/libs/components/editor-plugins/tsconfig.json
new file mode 100644
index 000000000..e169fb1f3
--- /dev/null
+++ b/libs/components/editor-plugins/tsconfig.json
@@ -0,0 +1,26 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "strictNullChecks": false
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/components/editor-plugins/tsconfig.lib.json b/libs/components/editor-plugins/tsconfig.lib.json
new file mode 100644
index 000000000..0dda33329
--- /dev/null
+++ b/libs/components/editor-plugins/tsconfig.lib.json
@@ -0,0 +1,22 @@
+{
+    "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": [
+        "**/*.spec.ts",
+        "**/*.test.ts",
+        "**/*.spec.tsx",
+        "**/*.test.tsx",
+        "**/*.spec.js",
+        "**/*.test.js",
+        "**/*.spec.jsx",
+        "**/*.test.jsx"
+    ],
+    "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/libs/components/editor-plugins/tsconfig.spec.json b/libs/components/editor-plugins/tsconfig.spec.json
new file mode 100644
index 000000000..ee70363dc
--- /dev/null
+++ b/libs/components/editor-plugins/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "module": "commonjs",
+        "types": ["jest", "node"]
+    },
+    "include": [
+        "**/*.test.ts",
+        "**/*.spec.ts",
+        "**/*.test.tsx",
+        "**/*.spec.tsx",
+        "**/*.test.js",
+        "**/*.spec.js",
+        "**/*.test.jsx",
+        "**/*.spec.jsx",
+        "**/*.d.ts"
+    ]
+}
diff --git a/libs/components/icons/.babelrc b/libs/components/icons/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/components/icons/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/components/icons/.eslintrc.json b/libs/components/icons/.eslintrc.json
new file mode 100644
index 000000000..568f3f2b4
--- /dev/null
+++ b/libs/components/icons/.eslintrc.json
@@ -0,0 +1,21 @@
+{
+    "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
+    "ignorePatterns": ["!**/*"],
+    "overrides": [
+        {
+            "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+            "rules": {
+                "@typescript-eslint/naming-convention": "off",
+                "filename-rules/match": "off"
+            }
+        },
+        {
+            "files": ["*.ts", "*.tsx"],
+            "rules": {}
+        },
+        {
+            "files": ["*.js", "*.jsx"],
+            "rules": {}
+        }
+    ]
+}
diff --git a/libs/components/icons/README.md b/libs/components/icons/README.md
new file mode 100644
index 000000000..3a4efa7a3
--- /dev/null
+++ b/libs/components/icons/README.md
@@ -0,0 +1,7 @@
+# components-icons
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test components-icons` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/components/icons/jest.config.ts b/libs/components/icons/jest.config.ts
new file mode 100644
index 000000000..991847c20
--- /dev/null
+++ b/libs/components/icons/jest.config.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+    displayName: 'components-icons',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/components/icons',
+};
diff --git a/libs/components/icons/package.json b/libs/components/icons/package.json
new file mode 100644
index 000000000..0f4bc7f6a
--- /dev/null
+++ b/libs/components/icons/package.json
@@ -0,0 +1,5 @@
+{
+    "name": "@toeverything/components/icons",
+    "version": "0.0.1",
+    "license": "MIT"
+}
diff --git a/libs/components/icons/project.json b/libs/components/icons/project.json
new file mode 100644
index 000000000..e97bf41fd
--- /dev/null
+++ b/libs/components/icons/project.json
@@ -0,0 +1,57 @@
+{
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/components/icons/src",
+    "projectType": "library",
+    "tags": ["components:icons"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/components/icons",
+                "tsConfig": "libs/components/icons/tsconfig.lib.json",
+                "project": "libs/components/icons/package.json",
+                "entryFile": "libs/components/icons/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/components/icons/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/components/icons/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/components/icons"],
+            "options": {
+                "jestConfig": "libs/components/icons/jest.config.ts",
+                "passWithNoTests": true
+            }
+        },
+        "figmaRes": {
+            "executor": "./tools/executors/figmaRes:figmaRes",
+            "options": {
+                "assets": [
+                    {
+                        "fileId": "7pyx5gMz6CN0qSRADmScQ7",
+                        "nodeId": "6146%3A2601",
+                        "folder": "./src/auto-icons"
+                    }
+                ]
+            }
+        }
+    }
+}
diff --git a/libs/components/icons/src/auto-icons/add-view/add-view.svg b/libs/components/icons/src/auto-icons/add-view/add-view.svg
new file mode 100644
index 000000000..25f6bb4a2
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/add-view/add-view.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 20.4a8.4 8.4 0 1 0 0-16.8 8.4 8.4 0 0 0 0 16.8Zm0 1.6c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M11 13v4h2v-4h4v-2h-4V7h-2v4H7v2h4Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/add-view/add-view.tsx b/libs/components/icons/src/auto-icons/add-view/add-view.tsx
new file mode 100644
index 000000000..17d439570
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/add-view/add-view.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface AddViewIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AddViewIcon: FC<AddViewIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M12 20.4a8.4 8.4 0 1 0 0-16.8 8.4 8.4 0 0 0 0 16.8Zm0 1.6c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" clipRule="evenodd" /><path fillRule="evenodd" d="M11 13v4h2v-4h4v-2h-4V7h-2v4H7v2h4Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/align-center/align-center.svg b/libs/components/icons/src/auto-icons/align-center/align-center.svg
new file mode 100644
index 000000000..7fef95ca8
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-center/align-center.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2 4h20v1.6H2V4ZM5 9h14v1.6H5V9ZM22 15H2v-1.6h20V15ZM19 20H5v-1.6h14V20Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/align-center/align-center.tsx b/libs/components/icons/src/auto-icons/align-center/align-center.tsx
new file mode 100644
index 000000000..1a87ccc29
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-center/align-center.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface AlignCenterIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AlignCenterIcon: FC<AlignCenterIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M2 4h20v1.6H2V4ZM5 9h14v1.6H5V9ZM22 15H2v-1.6h20V15ZM19 20H5v-1.6h14V20Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/align-justify/align-justify.svg b/libs/components/icons/src/auto-icons/align-justify/align-justify.svg
new file mode 100644
index 000000000..a310df51b
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-justify/align-justify.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2 4h20v1.6H2V4ZM2 9h20v1.6H2V9ZM22 15H2v-1.6h20V15ZM22 20H2v-1.6h20V20Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/align-justify/align-justify.tsx b/libs/components/icons/src/auto-icons/align-justify/align-justify.tsx
new file mode 100644
index 000000000..50a97b9f3
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-justify/align-justify.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface AlignJustifyIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AlignJustifyIcon: FC<AlignJustifyIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M2 4h20v1.6H2V4ZM2 9h20v1.6H2V9ZM22 15H2v-1.6h20V15ZM22 20H2v-1.6h20V20Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/align-left/align-left.svg b/libs/components/icons/src/auto-icons/align-left/align-left.svg
new file mode 100644
index 000000000..ccfec6b4d
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-left/align-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2 4h20v1.6H2V4ZM2 9h14v1.6H2V9ZM22 15H2v-1.6h20V15ZM16 20H2v-1.6h14V20Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/align-left/align-left.tsx b/libs/components/icons/src/auto-icons/align-left/align-left.tsx
new file mode 100644
index 000000000..d00f9c9ee
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-left/align-left.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface AlignLeftIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AlignLeftIcon: FC<AlignLeftIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M2 4h20v1.6H2V4ZM2 9h14v1.6H2V9ZM22 15H2v-1.6h20V15ZM16 20H2v-1.6h14V20Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/align-right/align-right.svg b/libs/components/icons/src/auto-icons/align-right/align-right.svg
new file mode 100644
index 000000000..bf10ff86b
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-right/align-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2 4h20v1.6H2V4ZM8 9h14v1.6H8V9ZM22 15H2v-1.6h20V15ZM22 20H8v-1.6h14V20Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/align-right/align-right.tsx b/libs/components/icons/src/auto-icons/align-right/align-right.tsx
new file mode 100644
index 000000000..b4674bf93
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-right/align-right.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface AlignRightIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AlignRightIcon: FC<AlignRightIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M2 4h20v1.6H2V4ZM8 9h14v1.6H8V9ZM22 15H2v-1.6h20V15ZM22 20H8v-1.6h14V20Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/arrow-drop-down/arrow-drop-down.svg b/libs/components/icons/src/auto-icons/arrow-drop-down/arrow-drop-down.svg
new file mode 100644
index 000000000..3cc37200c
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/arrow-drop-down/arrow-drop-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="m12 14 4-4H8l4 4Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/arrow-drop-down/arrow-drop-down.tsx b/libs/components/icons/src/auto-icons/arrow-drop-down/arrow-drop-down.tsx
new file mode 100644
index 000000000..94d8e9b84
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/arrow-drop-down/arrow-drop-down.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface ArrowDropDownIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const ArrowDropDownIcon: FC<ArrowDropDownIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="m12 14 4-4H8l4 4Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/arrow-right/arrow-right.svg b/libs/components/icons/src/auto-icons/arrow-right/arrow-right.svg
new file mode 100644
index 000000000..7cbba03a1
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/arrow-right/arrow-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="m14 12-4-4v8l4-4Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/arrow-right/arrow-right.tsx b/libs/components/icons/src/auto-icons/arrow-right/arrow-right.tsx
new file mode 100644
index 000000000..284a7fec9
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/arrow-right/arrow-right.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface ArrowRightIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const ArrowRightIcon: FC<ArrowRightIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="m14 12-4-4v8l4-4Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/arrow/arrow.svg b/libs/components/icons/src/auto-icons/arrow/arrow.svg
new file mode 100644
index 000000000..bf5041404
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/arrow/arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M9.6 11.4v8h4.8v-8h3.56L12 5.079 6.04 11.4H9.6Zm2-8.23a.554.554 0 0 1 .8 0l8.461 8.974c.311.33.066.856-.4.856H16v7.5a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5V13H3.538c-.465 0-.71-.526-.4-.856l8.463-8.974Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/arrow/arrow.tsx b/libs/components/icons/src/auto-icons/arrow/arrow.tsx
new file mode 100644
index 000000000..0446fee91
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/arrow/arrow.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface ArrowIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const ArrowIcon: FC<ArrowIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M9.6 11.4v8h4.8v-8h3.56L12 5.079 6.04 11.4H9.6Zm2-8.23a.554.554 0 0 1 .8 0l8.461 8.974c.311.33.066.856-.4.856H16v7.5a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5V13H3.538c-.465 0-.71-.526-.4-.856l8.463-8.974Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/at/at.svg b/libs/components/icons/src/auto-icons/at/at.svg
new file mode 100644
index 000000000..82a47e957
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/at/at.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.287 3c-2.746 0-4.99.898-6.757 2.717C3.837 7.415 3 9.526 3 12.073c0 2.717.836 4.876 2.53 6.525C7.178 20.2 9.422 21 12.287 21c1.886 0 3.581-.388 5.11-1.14 1.575-.776 2.768-1.892 3.604-3.348h-1.671c-.669.97-1.552 1.723-2.65 2.28-1.241.607-2.721.922-4.392.922-2.34 0-4.178-.655-5.515-1.916-1.432-1.334-2.125-3.227-2.125-5.677 0-2.232.693-4.1 2.101-5.555 1.432-1.48 3.247-2.208 5.443-2.208 2.053 0 3.724.607 4.966 1.844 1.145 1.14 1.718 2.572 1.718 4.294 0 1.504-.43 2.814-1.289 3.93-.74.946-1.48 1.431-2.22 1.431-.454 0-.668-.218-.668-.606 0-.291.095-.777.286-1.48l1.695-6.332h-1.552l-.358 1.359c-.382-1.213-1.146-1.82-2.292-1.82-1.432 0-2.65.631-3.7 1.941-1.098 1.31-1.623 2.887-1.623 4.682 0 1.043.31 1.916.93 2.596.622.679 1.433 1.043 2.436 1.043 1.194 0 2.196-.558 3.008-1.65.095 1.068.644 1.601 1.647 1.601 1.241 0 2.387-.679 3.438-2.013 1.05-1.407 1.6-2.96 1.6-4.706 0-2.087-.67-3.809-2.006-5.192C16.75 3.752 14.769 3 12.287 3Zm.453 5.507c.477 0 .86.194 1.17.582.262.315.406.703.406 1.14 0 .146-.096.534-.24 1.165l-.524 1.989c-.191.63-.573 1.213-1.146 1.698-.573.485-1.17.728-1.767.728s-1.05-.194-1.36-.583c-.31-.388-.454-.897-.454-1.552 0-1.431.406-2.644 1.217-3.663.764-1.02 1.671-1.504 2.698-1.504Z"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/at/at.tsx b/libs/components/icons/src/auto-icons/at/at.tsx
new file mode 100644
index 000000000..2eef208e8
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/at/at.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface AtIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AtIcon: FC<AtIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path d="M12.287 3c-2.746 0-4.99.898-6.757 2.717C3.837 7.415 3 9.526 3 12.073c0 2.717.836 4.876 2.53 6.525C7.178 20.2 9.422 21 12.287 21c1.886 0 3.581-.388 5.11-1.14 1.575-.776 2.768-1.892 3.604-3.348h-1.671c-.669.97-1.552 1.723-2.65 2.28-1.241.607-2.721.922-4.392.922-2.34 0-4.178-.655-5.515-1.916-1.432-1.334-2.125-3.227-2.125-5.677 0-2.232.693-4.1 2.101-5.555 1.432-1.48 3.247-2.208 5.443-2.208 2.053 0 3.724.607 4.966 1.844 1.145 1.14 1.718 2.572 1.718 4.294 0 1.504-.43 2.814-1.289 3.93-.74.946-1.48 1.431-2.22 1.431-.454 0-.668-.218-.668-.606 0-.291.095-.777.286-1.48l1.695-6.332h-1.552l-.358 1.359c-.382-1.213-1.146-1.82-2.292-1.82-1.432 0-2.65.631-3.7 1.941-1.098 1.31-1.623 2.887-1.623 4.682 0 1.043.31 1.916.93 2.596.622.679 1.433 1.043 2.436 1.043 1.194 0 2.196-.558 3.008-1.65.095 1.068.644 1.601 1.647 1.601 1.241 0 2.387-.679 3.438-2.013 1.05-1.407 1.6-2.96 1.6-4.706 0-2.087-.67-3.809-2.006-5.192C16.75 3.752 14.769 3 12.287 3Zm.453 5.507c.477 0 .86.194 1.17.582.262.315.406.703.406 1.14 0 .146-.096.534-.24 1.165l-.524 1.989c-.191.63-.573 1.213-1.146 1.698-.573.485-1.17.728-1.767.728s-1.05-.194-1.36-.583c-.31-.388-.454-.897-.454-1.552 0-1.431.406-2.644 1.217-3.663.764-1.02 1.671-1.504 2.698-1.504Z" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/backlinks/backlinks.svg b/libs/components/icons/src/auto-icons/backlinks/backlinks.svg
new file mode 100644
index 000000000..08b090aa8
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/backlinks/backlinks.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M3.2 3.2H10v1.6H4.8v14.4H10v1.6H3.2V3.2ZM14.2 3.2H21v1.6h-5.2v14.4H21v1.6h-6.8V3.2Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/backlinks/backlinks.tsx b/libs/components/icons/src/auto-icons/backlinks/backlinks.tsx
new file mode 100644
index 000000000..4ba3cc7c9
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/backlinks/backlinks.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface BacklinksIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const BacklinksIcon: FC<BacklinksIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M3.2 3.2H10v1.6H4.8v14.4H10v1.6H3.2V3.2ZM14.2 3.2H21v1.6h-5.2v14.4H21v1.6h-6.8V3.2Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/backward-undo/backward-undo.svg b/libs/components/icons/src/auto-icons/backward-undo/backward-undo.svg
new file mode 100644
index 000000000..d1a0dbff6
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/backward-undo/backward-undo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M11.121 5.707 9.707 4.293 2 12l7.707 7.707 1.414-1.414L5.828 13H15c2.074 0 3.274.842 3.988 1.834C19.74 15.878 20 17.16 20 18h2c0-1.16-.34-2.878-1.389-4.334C19.526 12.158 17.726 11 15 11H5.83l5.292-5.293Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/backward-undo/backward-undo.tsx b/libs/components/icons/src/auto-icons/backward-undo/backward-undo.tsx
new file mode 100644
index 000000000..58d8daa11
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/backward-undo/backward-undo.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface BackwardUndoIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const BackwardUndoIcon: FC<BackwardUndoIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M11.121 5.707 9.707 4.293 2 12l7.707 7.707 1.414-1.414L5.828 13H15c2.074 0 3.274.842 3.988 1.834C19.74 15.878 20 17.16 20 18h2c0-1.16-.34-2.878-1.389-4.334C19.526 12.158 17.726 11 15 11H5.83l5.292-5.293Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/blocks/blocks.svg b/libs/components/icons/src/auto-icons/blocks/blocks.svg
new file mode 100644
index 000000000..79608a761
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/blocks/blocks.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M9.2 4.6H5a.4.4 0 0 0-.4.4v4.2c0 .22.18.4.4.4h4.2a.4.4 0 0 0 .4-.4V5a.4.4 0 0 0-.4-.4ZM5 3a2 2 0 0 0-2 2v4.2a2 2 0 0 0 2 2h4.2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5ZM19 4.6h-4.2a.4.4 0 0 0-.4.4v4.2c0 .22.18.4.4.4H19a.4.4 0 0 0 .4-.4V5a.4.4 0 0 0-.4-.4ZM14.8 3a2 2 0 0 0-2 2v4.2a2 2 0 0 0 2 2H19a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-4.2ZM9.2 14.4H5a.4.4 0 0 0-.4.4V19c0 .221.18.4.4.4h4.2a.4.4 0 0 0 .4-.4v-4.2a.4.4 0 0 0-.4-.4ZM5 12.8a2 2 0 0 0-2 2V19a2 2 0 0 0 2 2h4.2a2 2 0 0 0 2-2v-4.2a2 2 0 0 0-2-2H5ZM19 14.4h-4.2a.4.4 0 0 0-.4.4V19c0 .221.18.4.4.4H19a.4.4 0 0 0 .4-.4v-4.2a.4.4 0 0 0-.4-.4Zm-4.2-1.6a2 2 0 0 0-2 2V19a2 2 0 0 0 2 2H19a2 2 0 0 0 2-2v-4.2a2 2 0 0 0-2-2h-4.2Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/blocks/blocks.tsx b/libs/components/icons/src/auto-icons/blocks/blocks.tsx
new file mode 100644
index 000000000..f175a64e6
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/blocks/blocks.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface BlocksIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const BlocksIcon: FC<BlocksIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M9.2 4.6H5a.4.4 0 0 0-.4.4v4.2c0 .22.18.4.4.4h4.2a.4.4 0 0 0 .4-.4V5a.4.4 0 0 0-.4-.4ZM5 3a2 2 0 0 0-2 2v4.2a2 2 0 0 0 2 2h4.2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5ZM19 4.6h-4.2a.4.4 0 0 0-.4.4v4.2c0 .22.18.4.4.4H19a.4.4 0 0 0 .4-.4V5a.4.4 0 0 0-.4-.4ZM14.8 3a2 2 0 0 0-2 2v4.2a2 2 0 0 0 2 2H19a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-4.2ZM9.2 14.4H5a.4.4 0 0 0-.4.4V19c0 .221.18.4.4.4h4.2a.4.4 0 0 0 .4-.4v-4.2a.4.4 0 0 0-.4-.4ZM5 12.8a2 2 0 0 0-2 2V19a2 2 0 0 0 2 2h4.2a2 2 0 0 0 2-2v-4.2a2 2 0 0 0-2-2H5ZM19 14.4h-4.2a.4.4 0 0 0-.4.4V19c0 .221.18.4.4.4H19a.4.4 0 0 0 .4-.4v-4.2a.4.4 0 0 0-.4-.4Zm-4.2-1.6a2 2 0 0 0-2 2V19a2 2 0 0 0 2 2H19a2 2 0 0 0 2-2v-4.2a2 2 0 0 0-2-2h-4.2Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/board-view/board-view.svg b/libs/components/icons/src/auto-icons/board-view/board-view.svg
new file mode 100644
index 000000000..03bae114f
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/board-view/board-view.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 17.4a5.4 5.4 0 1 0 0-10.8 5.4 5.4 0 0 0 0 10.8Zm7-5.4a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M18.565 8a.8.8 0 0 1 .8-.8c.797 0 1.511.07 2.07.24.5.15 1.172.477 1.334 1.202v.004c.089.405-.026.776-.186 1.065a3.165 3.165 0 0 1-.652.782c-.52.471-1.265.947-2.15 1.407-1.783.927-4.28 1.869-7.077 2.62-2.796.752-5.409 1.184-7.381 1.266-.98.04-1.848-.003-2.516-.162-.333-.079-.662-.196-.937-.38-.282-.19-.547-.48-.639-.892v-.002c-.138-.63.202-1.173.518-1.532.343-.39.836-.768 1.413-1.129a.8.8 0 0 1 .848 1.357c-.515.322-.862.605-1.06.83a1.524 1.524 0 0 0-.078.096c.07.03.169.064.304.095.461.11 1.163.158 2.08.12 1.822-.075 4.314-.481 7.033-1.212 2.718-.73 5.1-1.635 6.753-2.494.832-.433 1.441-.835 1.814-1.173.127-.115.213-.21.268-.284a1.67 1.67 0 0 0-.153-.053c-.342-.104-.878-.171-1.606-.171a.8.8 0 0 1-.8-.8Zm2.692 1.097-.004-.004a.026.026 0 0 1 .004.004Zm-18.46 5 .001-.002v.002Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/board-view/board-view.tsx b/libs/components/icons/src/auto-icons/board-view/board-view.tsx
new file mode 100644
index 000000000..372feee00
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/board-view/board-view.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface BoardViewIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const BoardViewIcon: FC<BoardViewIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M12 17.4a5.4 5.4 0 1 0 0-10.8 5.4 5.4 0 0 0 0 10.8Zm7-5.4a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z" clipRule="evenodd" /><path fillRule="evenodd" d="M18.565 8a.8.8 0 0 1 .8-.8c.797 0 1.511.07 2.07.24.5.15 1.172.477 1.334 1.202v.004c.089.405-.026.776-.186 1.065a3.165 3.165 0 0 1-.652.782c-.52.471-1.265.947-2.15 1.407-1.783.927-4.28 1.869-7.077 2.62-2.796.752-5.409 1.184-7.381 1.266-.98.04-1.848-.003-2.516-.162-.333-.079-.662-.196-.937-.38-.282-.19-.547-.48-.639-.892v-.002c-.138-.63.202-1.173.518-1.532.343-.39.836-.768 1.413-1.129a.8.8 0 0 1 .848 1.357c-.515.322-.862.605-1.06.83a1.524 1.524 0 0 0-.078.096c.07.03.169.064.304.095.461.11 1.163.158 2.08.12 1.822-.075 4.314-.481 7.033-1.212 2.718-.73 5.1-1.635 6.753-2.494.832-.433 1.441-.835 1.814-1.173.127-.115.213-.21.268-.284a1.67 1.67 0 0 0-.153-.053c-.342-.104-.878-.171-1.606-.171a.8.8 0 0 1-.8-.8Zm2.692 1.097-.004-.004a.026.026 0 0 1 .004.004Zm-18.46 5 .001-.002v.002Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/border-color-duotone/border-color-duotone.svg b/libs/components/icons/src/auto-icons/border-color-duotone/border-color-duotone.svg
new file mode 100644
index 000000000..7196ca42b
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/border-color-duotone/border-color-duotone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#3A4C5C" fill-rule="evenodd" d="M15.857 5.571H8.143A2.571 2.571 0 0 0 5.57 8.143v7.714a2.571 2.571 0 0 0 2.572 2.572h7.714a2.572 2.572 0 0 0 2.572-2.572V8.143a2.571 2.571 0 0 0-2.572-2.572ZM8.143 3A5.143 5.143 0 0 0 3 8.143v7.714A5.143 5.143 0 0 0 8.143 21h7.714A5.143 5.143 0 0 0 21 15.857V8.143A5.143 5.143 0 0 0 15.857 3H8.143Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/border-color-duotone/border-color-duotone.tsx b/libs/components/icons/src/auto-icons/border-color-duotone/border-color-duotone.tsx
new file mode 100644
index 000000000..fb97c5379
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/border-color-duotone/border-color-duotone.tsx
@@ -0,0 +1,22 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface BorderColorDuotoneIconProps extends Omit<SvgIconProps, 'color'> {
+    color0?: string
+    primaryColor?: string
+}
+
+export const BorderColorDuotoneIcon: FC<BorderColorDuotoneIconProps> = ({ color0, primaryColor, style, ...props}) => {
+    const propsStyles = {"--color-0": color0 || primaryColor};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path style={{fill: 'var(--color-0)'}} fillRule="evenodd" d="M15.857 5.571H8.143A2.571 2.571 0 0 0 5.57 8.143v7.714a2.571 2.571 0 0 0 2.572 2.572h7.714a2.572 2.572 0 0 0 2.572-2.572V8.143a2.571 2.571 0 0 0-2.572-2.572ZM8.143 3A5.143 5.143 0 0 0 3 8.143v7.714A5.143 5.143 0 0 0 8.143 21h7.714A5.143 5.143 0 0 0 21 15.857V8.143A5.143 5.143 0 0 0 15.857 3H8.143Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/border-color-none/border-color-none.svg b/libs/components/icons/src/auto-icons/border-color-none/border-color-none.svg
new file mode 100644
index 000000000..2baa598b2
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/border-color-none/border-color-none.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M13.286 5.571h2.571V3m2.572 5.143a2.571 2.571 0 0 0-2.565-2.572h2.565v2.572Zm0 2.571V8.143h2.57v2.571h-2.57Zm0 5.143v-5.143 2.572h2.57v2.571h-2.57Zm-2.562 2.572a2.572 2.572 0 0 0 2.562-2.572v2.572h-2.562Zm-2.581 0h2.571V21h-2.571v-2.571Zm-5.143 0h2.571V21H8.143v-2.571ZM5.57 15.876a2.571 2.571 0 0 0 2.562 2.553H5.571v-2.553Zm0-.019v-2.571H3v2.571h2.571Zm0 4.455a5.169 5.169 0 0 1-1.883-1.883h1.883v1.883Zm14.741-1.883a5.169 5.169 0 0 1-1.884 1.883v-1.883h1.884ZM18.428 3.688a5.168 5.168 0 0 1 1.884 1.883h-1.883V3.688ZM3 10.714h2.571V8.143H3v2.571Zm.688-5.143h1.883V3.688a5.168 5.168 0 0 0-1.883 1.883ZM8.143 3v2.571h2.571V3H8.143Zm-.007 2.571H5.571v2.553a2.571 2.571 0 0 1 2.565-2.553ZM15.857 3h-2.571v2.571" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/border-color-none/border-color-none.tsx b/libs/components/icons/src/auto-icons/border-color-none/border-color-none.tsx
new file mode 100644
index 000000000..105b3754e
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/border-color-none/border-color-none.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface BorderColorNoneIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const BorderColorNoneIcon: FC<BorderColorNoneIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M13.286 5.571h2.571V3m2.572 5.143a2.571 2.571 0 0 0-2.565-2.572h2.565v2.572Zm0 2.571V8.143h2.57v2.571h-2.57Zm0 5.143v-5.143 2.572h2.57v2.571h-2.57Zm-2.562 2.572a2.572 2.572 0 0 0 2.562-2.572v2.572h-2.562Zm-2.581 0h2.571V21h-2.571v-2.571Zm-5.143 0h2.571V21H8.143v-2.571ZM5.57 15.876a2.571 2.571 0 0 0 2.562 2.553H5.571v-2.553Zm0-.019v-2.571H3v2.571h2.571Zm0 4.455a5.169 5.169 0 0 1-1.883-1.883h1.883v1.883Zm14.741-1.883a5.169 5.169 0 0 1-1.884 1.883v-1.883h1.884ZM18.428 3.688a5.168 5.168 0 0 1 1.884 1.883h-1.883V3.688ZM3 10.714h2.571V8.143H3v2.571Zm.688-5.143h1.883V3.688a5.168 5.168 0 0 0-1.883 1.883ZM8.143 3v2.571h2.571V3H8.143Zm-.007 2.571H5.571v2.553a2.571 2.571 0 0 1 2.565-2.553ZM15.857 3h-2.571v2.571" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/brush/brush.svg b/libs/components/icons/src/auto-icons/brush/brush.svg
new file mode 100644
index 000000000..4562547d9
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/brush/brush.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.504 3.793a.868.868 0 0 1 .312-.59.885.885 0 0 1 .642-.2l3.567.316c2.53.238 4.952.525 6.943.85 1.946.317 3.603.69 4.507 1.142.23.116.483.27.677.482.207.223.413.587.329 1.045-.079.413-.357.685-.571.846a3.53 3.53 0 0 1-.815.429c-1.196.469-3.461.917-7.016 1.357-1.69.209-2.918.414-3.768.606.24.052.505.103.79.153 1.164.202 2.628.375 4.184.508 1.185.097 2.365.251 3.535.462.54.1 1.047.216 1.479.344.413.122.829.274 1.138.478.153.1.357.261.493.507a1.078 1.078 0 0 1 .032.99c-.132.284-.36.465-.532.576-.2.122-.412.223-.634.3-.9.329-2.514.632-5.021.916-2.49.283-3.997.64-4.827.998-.347.149-.518.274-.596.348.03.043.086.11.183.198.176.16.433.336.762.522.657.367 1.503.708 2.32.973l3.092.945a.882.882 0 0 1 .525.424.864.864 0 0 1-.37 1.183.887.887 0 0 1-.674.057l-3.113-.95c-.884-.287-1.852-.672-2.646-1.115a5.956 5.956 0 0 1-1.083-.755c-.3-.27-.602-.632-.727-1.086-.14-.512-.019-1.022.321-1.444.306-.381.77-.667 1.305-.898 1.079-.464 2.798-.844 5.328-1.13 1.602-.182 2.76-.364 3.566-.537-.215-.048-.431-.092-.648-.133a35.158 35.158 0 0 0-3.358-.438c-1.585-.135-3.106-.314-4.338-.528a16.608 16.608 0 0 1-1.636-.356c-.44-.123-.879-.28-1.197-.495a1.381 1.381 0 0 1-.504-.569 1.075 1.075 0 0 1 .07-1.013c.152-.248.375-.41.553-.514.208-.117.428-.215.655-.291.946-.333 2.605-.653 5.123-.964 3.16-.392 5.132-.773 6.208-1.117-.748-.244-1.903-.496-3.388-.737-1.934-.317-4.313-.598-6.819-.834l-3.561-.316a.882.882 0 0 1-.597-.309.865.865 0 0 1-.2-.636Z"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/brush/brush.tsx b/libs/components/icons/src/auto-icons/brush/brush.tsx
new file mode 100644
index 000000000..716b9e74b
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/brush/brush.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface BrushIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const BrushIcon: FC<BrushIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path d="M3.504 3.793a.868.868 0 0 1 .312-.59.885.885 0 0 1 .642-.2l3.567.316c2.53.238 4.952.525 6.943.85 1.946.317 3.603.69 4.507 1.142.23.116.483.27.677.482.207.223.413.587.329 1.045-.079.413-.357.685-.571.846a3.53 3.53 0 0 1-.815.429c-1.196.469-3.461.917-7.016 1.357-1.69.209-2.918.414-3.768.606.24.052.505.103.79.153 1.164.202 2.628.375 4.184.508 1.185.097 2.365.251 3.535.462.54.1 1.047.216 1.479.344.413.122.829.274 1.138.478.153.1.357.261.493.507a1.078 1.078 0 0 1 .032.99c-.132.284-.36.465-.532.576-.2.122-.412.223-.634.3-.9.329-2.514.632-5.021.916-2.49.283-3.997.64-4.827.998-.347.149-.518.274-.596.348.03.043.086.11.183.198.176.16.433.336.762.522.657.367 1.503.708 2.32.973l3.092.945a.882.882 0 0 1 .525.424.864.864 0 0 1-.37 1.183.887.887 0 0 1-.674.057l-3.113-.95c-.884-.287-1.852-.672-2.646-1.115a5.956 5.956 0 0 1-1.083-.755c-.3-.27-.602-.632-.727-1.086-.14-.512-.019-1.022.321-1.444.306-.381.77-.667 1.305-.898 1.079-.464 2.798-.844 5.328-1.13 1.602-.182 2.76-.364 3.566-.537-.215-.048-.431-.092-.648-.133a35.158 35.158 0 0 0-3.358-.438c-1.585-.135-3.106-.314-4.338-.528a16.608 16.608 0 0 1-1.636-.356c-.44-.123-.879-.28-1.197-.495a1.381 1.381 0 0 1-.504-.569 1.075 1.075 0 0 1 .07-1.013c.152-.248.375-.41.553-.514.208-.117.428-.215.655-.291.946-.333 2.605-.653 5.123-.964 3.16-.392 5.132-.773 6.208-1.117-.748-.244-1.903-.496-3.388-.737-1.934-.317-4.313-.598-6.819-.834l-3.561-.316a.882.882 0 0 1-.597-.309.865.865 0 0 1-.2-.636Z" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/bullet/bullet.svg b/libs/components/icons/src/auto-icons/bullet/bullet.svg
new file mode 100644
index 000000000..a5b12882b
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/bullet/bullet.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18 4.6H6A1.4 1.4 0 0 0 4.6 6v12A1.4 1.4 0 0 0 6 19.4h12a1.4 1.4 0 0 0 1.4-1.4V6A1.4 1.4 0 0 0 18 4.6ZM6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Z" clip-rule="evenodd"/><circle cx="12" cy="12" r="2"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/bullet/bullet.tsx b/libs/components/icons/src/auto-icons/bullet/bullet.tsx
new file mode 100644
index 000000000..126e1321e
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/bullet/bullet.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface BulletIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const BulletIcon: FC<BulletIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18 4.6H6A1.4 1.4 0 0 0 4.6 6v12A1.4 1.4 0 0 0 6 19.4h12a1.4 1.4 0 0 0 1.4-1.4V6A1.4 1.4 0 0 0 18 4.6ZM6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Z" clipRule="evenodd" /><circle cx={12} cy={12} r={2} />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/bulleted-list-1/bulleted-list-1.svg b/libs/components/icons/src/auto-icons/bulleted-list-1/bulleted-list-1.svg
new file mode 100644
index 000000000..abceac165
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/bulleted-list-1/bulleted-list-1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/bulleted-list-1/bulleted-list-1.tsx b/libs/components/icons/src/auto-icons/bulleted-list-1/bulleted-list-1.tsx
new file mode 100644
index 000000000..59dddc056
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/bulleted-list-1/bulleted-list-1.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface BulletedList_1IconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const BulletedList_1Icon: FC<BulletedList_1IconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <circle cx={12} cy={12} r={2} />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/bulleted-list-2/bulleted-list-2.svg b/libs/components/icons/src/auto-icons/bulleted-list-2/bulleted-list-2.svg
new file mode 100644
index 000000000..c7132c3ac
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/bulleted-list-2/bulleted-list-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm0 .5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/bulleted-list-2/bulleted-list-2.tsx b/libs/components/icons/src/auto-icons/bulleted-list-2/bulleted-list-2.tsx
new file mode 100644
index 000000000..f5a8be5de
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/bulleted-list-2/bulleted-list-2.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface BulletedList_2IconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const BulletedList_2Icon: FC<BulletedList_2IconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M12 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm0 .5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/bulleted-list-3/bulleted-list-3.svg b/libs/components/icons/src/auto-icons/bulleted-list-3/bulleted-list-3.svg
new file mode 100644
index 000000000..07c7fd6d1
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/bulleted-list-3/bulleted-list-3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.606 10.163a.558.558 0 0 1 .788 0l1.443 1.443a.558.558 0 0 1 0 .788l-1.443 1.443a.558.558 0 0 1-.788 0l-1.443-1.443a.558.558 0 0 1 0-.788l1.443-1.443Z"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/bulleted-list-3/bulleted-list-3.tsx b/libs/components/icons/src/auto-icons/bulleted-list-3/bulleted-list-3.tsx
new file mode 100644
index 000000000..44d686255
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/bulleted-list-3/bulleted-list-3.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface BulletedList_3IconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const BulletedList_3Icon: FC<BulletedList_3IconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path d="M11.606 10.163a.558.558 0 0 1 .788 0l1.443 1.443a.558.558 0 0 1 0 .788l-1.443 1.443a.558.558 0 0 1-.788 0l-1.443-1.443a.558.558 0 0 1 0-.788l1.443-1.443Z" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/bulleted-list-4/bulleted-list-4.svg b/libs/components/icons/src/auto-icons/bulleted-list-4/bulleted-list-4.svg
new file mode 100644
index 000000000..23b4a7fb8
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/bulleted-list-4/bulleted-list-4.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M13.442 12 12 10.558 10.558 12 12 13.442 13.442 12Zm-1.048-1.837a.558.558 0 0 0-.788 0l-1.443 1.443a.558.558 0 0 0 0 .788l1.443 1.443a.558.558 0 0 0 .788 0l1.443-1.443a.558.558 0 0 0 0-.788l-1.443-1.443Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/bulleted-list-4/bulleted-list-4.tsx b/libs/components/icons/src/auto-icons/bulleted-list-4/bulleted-list-4.tsx
new file mode 100644
index 000000000..9c54e6118
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/bulleted-list-4/bulleted-list-4.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface BulletedList_4IconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const BulletedList_4Icon: FC<BulletedList_4IconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M13.442 12 12 10.558 10.558 12 12 13.442 13.442 12Zm-1.048-1.837a.558.558 0 0 0-.788 0l-1.443 1.443a.558.558 0 0 0 0 .788l1.443 1.443a.558.558 0 0 0 .788 0l1.443-1.443a.558.558 0 0 0 0-.788l-1.443-1.443Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/callout/callout.svg b/libs/components/icons/src/auto-icons/callout/callout.svg
new file mode 100644
index 000000000..9487e1c92
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/callout/callout.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M20 21H8v-1.6h12V21ZM20 16.4H4v-1.6h16v1.6ZM19 4.6H5a.4.4 0 0 0-.4.4v5c0 .22.18.4.4.4h14a.4.4 0 0 0 .4-.4V5a.4.4 0 0 0-.4-.4ZM5 3a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/callout/callout.tsx b/libs/components/icons/src/auto-icons/callout/callout.tsx
new file mode 100644
index 000000000..469a5baf7
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/callout/callout.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface CalloutIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const CalloutIcon: FC<CalloutIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M20 21H8v-1.6h12V21ZM20 16.4H4v-1.6h16v1.6ZM19 4.6H5a.4.4 0 0 0-.4.4v5c0 .22.18.4.4.4h14a.4.4 0 0 0 .4-.4V5a.4.4 0 0 0-.4-.4ZM5 3a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/card/card.svg b/libs/components/icons/src/auto-icons/card/card.svg
new file mode 100644
index 000000000..41866abfc
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/card/card.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M19 5.6H5A1.4 1.4 0 0 0 3.6 7v10A1.4 1.4 0 0 0 5 18.4h14a1.4 1.4 0 0 0 1.4-1.4V7A1.4 1.4 0 0 0 19 5.6ZM5 4a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H5Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M6 8h12v1.6H6V8ZM6 11.5h12v1.6H6v-1.6Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/card/card.tsx b/libs/components/icons/src/auto-icons/card/card.tsx
new file mode 100644
index 000000000..8c7250165
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/card/card.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface CardIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const CardIcon: FC<CardIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M19 5.6H5A1.4 1.4 0 0 0 3.6 7v10A1.4 1.4 0 0 0 5 18.4h14a1.4 1.4 0 0 0 1.4-1.4V7A1.4 1.4 0 0 0 19 5.6ZM5 4a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H5Z" clipRule="evenodd" /><path fillRule="evenodd" d="M6 8h12v1.6H6V8ZM6 11.5h12v1.6H6v-1.6Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/check-box-check/check-box-check.svg b/libs/components/icons/src/auto-icons/check-box-check/check-box-check.svg
new file mode 100644
index 000000000..e48bb2250
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/check-box-check/check-box-check.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M7 4a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm10.567 5.565a.8.8 0 1 0-1.134-1.13l-6.078 6.098-2.788-2.798a.8.8 0 0 0-1.134 1.13l3.213 3.224a1 1 0 0 0 1.417 0l6.504-6.524Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/check-box-check/check-box-check.tsx b/libs/components/icons/src/auto-icons/check-box-check/check-box-check.tsx
new file mode 100644
index 000000000..b2cc8fb7b
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/check-box-check/check-box-check.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface CheckBoxCheckIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const CheckBoxCheckIcon: FC<CheckBoxCheckIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M7 4a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm10.567 5.565a.8.8 0 1 0-1.134-1.13l-6.078 6.098-2.788-2.798a.8.8 0 0 0-1.134 1.13l3.213 3.224a1 1 0 0 0 1.417 0l6.504-6.524Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/check-box-uncheck/check-box-uncheck.svg b/libs/components/icons/src/auto-icons/check-box-uncheck/check-box-uncheck.svg
new file mode 100644
index 000000000..5667f2aa0
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/check-box-uncheck/check-box-uncheck.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M17 5.6H7A1.4 1.4 0 0 0 5.6 7v10A1.4 1.4 0 0 0 7 18.4h10a1.4 1.4 0 0 0 1.4-1.4V7A1.4 1.4 0 0 0 17 5.6ZM7 4a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/check-box-uncheck/check-box-uncheck.tsx b/libs/components/icons/src/auto-icons/check-box-uncheck/check-box-uncheck.tsx
new file mode 100644
index 000000000..56fae7819
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/check-box-uncheck/check-box-uncheck.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface CheckBoxUncheckIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const CheckBoxUncheckIcon: FC<CheckBoxUncheckIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M17 5.6H7A1.4 1.4 0 0 0 5.6 7v10A1.4 1.4 0 0 0 7 18.4h10a1.4 1.4 0 0 0 1.4-1.4V7A1.4 1.4 0 0 0 17 5.6ZM7 4a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/code-block/code-block.svg b/libs/components/icons/src/auto-icons/code-block/code-block.svg
new file mode 100644
index 000000000..56c85dda7
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/code-block/code-block.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M19 5.6H5A1.4 1.4 0 0 0 3.6 7v10A1.4 1.4 0 0 0 5 18.4h14a1.4 1.4 0 0 0 1.4-1.4V7A1.4 1.4 0 0 0 19 5.6ZM5 4a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H5Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="m8.576 8.576.848.848L6.85 12l2.575 2.576-.848.848L5.15 12l3.425-3.424ZM15.424 15.424l-.848-.848L17.15 12l-2.575-2.576.848-.848L18.85 12l-3.425 3.424ZM10 15l3-6 1.073.537-3 6L10 15Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/code-block/code-block.tsx b/libs/components/icons/src/auto-icons/code-block/code-block.tsx
new file mode 100644
index 000000000..f2807ea6b
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/code-block/code-block.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface CodeBlockIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const CodeBlockIcon: FC<CodeBlockIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M19 5.6H5A1.4 1.4 0 0 0 3.6 7v10A1.4 1.4 0 0 0 5 18.4h14a1.4 1.4 0 0 0 1.4-1.4V7A1.4 1.4 0 0 0 19 5.6ZM5 4a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H5Z" clipRule="evenodd" /><path fillRule="evenodd" d="m8.576 8.576.848.848L6.85 12l2.575 2.576-.848.848L5.15 12l3.425-3.424ZM15.424 15.424l-.848-.848L17.15 12l-2.575-2.576.848-.848L18.85 12l-3.425 3.424ZM10 15l3-6 1.073.537-3 6L10 15Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/code/code.svg b/libs/components/icons/src/auto-icons/code/code.svg
new file mode 100644
index 000000000..569a1ba6b
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/code/code.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="m7.434 6.434 1.132 1.132L4.13 12l4.435 4.434-1.132 1.132L1.87 12l5.565-5.566ZM16.566 17.566l-1.132-1.132L19.87 12l-4.435-4.434 1.132-1.132L22.13 12l-5.565 5.566ZM9.333 16 13 8l1.454.667-3.666 8L9.333 16Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/code/code.tsx b/libs/components/icons/src/auto-icons/code/code.tsx
new file mode 100644
index 000000000..f20f5a709
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/code/code.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface CodeIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const CodeIcon: FC<CodeIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="m7.434 6.434 1.132 1.132L4.13 12l4.435 4.434-1.132 1.132L1.87 12l5.565-5.566ZM16.566 17.566l-1.132-1.132L19.87 12l-4.435-4.434 1.132-1.132L22.13 12l-5.565 5.566ZM9.333 16 13 8l1.454.667-3.666 8L9.333 16Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/collaborator/collaborator.svg b/libs/components/icons/src/auto-icons/collaborator/collaborator.svg
new file mode 100644
index 000000000..b422ca55f
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/collaborator/collaborator.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 10.4a2.9 2.9 0 1 0 0-5.8 2.9 2.9 0 0 0 0 5.8Zm0 1.6a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM10 14.8A5.2 5.2 0 0 0 4.8 20v1H3.2v-1a6.8 6.8 0 0 1 6.8-6.8h4a6.8 6.8 0 0 1 6.8 6.8v1h-1.6v-1a5.2 5.2 0 0 0-5.2-5.2h-4Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/collaborator/collaborator.tsx b/libs/components/icons/src/auto-icons/collaborator/collaborator.tsx
new file mode 100644
index 000000000..99413bff2
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/collaborator/collaborator.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface CollaboratorIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const CollaboratorIcon: FC<CollaboratorIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M12 10.4a2.9 2.9 0 1 0 0-5.8 2.9 2.9 0 0 0 0 5.8Zm0 1.6a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM10 14.8A5.2 5.2 0 0 0 4.8 20v1H3.2v-1a6.8 6.8 0 0 1 6.8-6.8h4a6.8 6.8 0 0 1 6.8 6.8v1h-1.6v-1a5.2 5.2 0 0 0-5.2-5.2h-4Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/comment/comment.svg b/libs/components/icons/src/auto-icons/comment/comment.svg
new file mode 100644
index 000000000..cc52b6d02
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/comment/comment.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="m12.663 16.4 1.737 1.737V16.4H18a1.4 1.4 0 0 0 1.4-1.4V6A1.4 1.4 0 0 0 18 4.6H6A1.4 1.4 0 0 0 4.6 6v9A1.4 1.4 0 0 0 6 16.4h6.663ZM16 20.552a.6.6 0 0 1-1.024.424L12 18H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-2v2.552Z" clip-rule="evenodd"/><circle cx="8" cy="10.5" r="1"/><circle cx="12" cy="10.5" r="1"/><circle cx="16" cy="10.5" r="1"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/comment/comment.tsx b/libs/components/icons/src/auto-icons/comment/comment.tsx
new file mode 100644
index 000000000..e8186e6e1
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/comment/comment.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface CommentIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const CommentIcon: FC<CommentIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="m12.663 16.4 1.737 1.737V16.4H18a1.4 1.4 0 0 0 1.4-1.4V6A1.4 1.4 0 0 0 18 4.6H6A1.4 1.4 0 0 0 4.6 6v9A1.4 1.4 0 0 0 6 16.4h6.663ZM16 20.552a.6.6 0 0 1-1.024.424L12 18H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-2v2.552Z" clipRule="evenodd" /><circle cx={8} cy={10.5} r={1} /><circle cx={12} cy={10.5} r={1} /><circle cx={16} cy={10.5} r={1} />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/conector-arrow/conector-arrow.svg b/libs/components/icons/src/auto-icons/conector-arrow/conector-arrow.svg
new file mode 100644
index 000000000..c9a63d7de
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/conector-arrow/conector-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M20.8 9V4.1a.9.9 0 0 0-.9-.9H15v1.6h3.2L4.8 18.2V15H3.2v4.9a.9.9 0 0 0 .9.9H9v-1.6H6.063L19.2 6.063V9h1.6Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/conector-arrow/conector-arrow.tsx b/libs/components/icons/src/auto-icons/conector-arrow/conector-arrow.tsx
new file mode 100644
index 000000000..d04fb4bd3
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/conector-arrow/conector-arrow.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface ConectorArrowIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const ConectorArrowIcon: FC<ConectorArrowIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M20.8 9V4.1a.9.9 0 0 0-.9-.9H15v1.6h3.2L4.8 18.2V15H3.2v4.9a.9.9 0 0 0 .9.9H9v-1.6H6.063L19.2 6.063V9h1.6Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/conector-line/conector-line.svg b/libs/components/icons/src/auto-icons/conector-line/conector-line.svg
new file mode 100644
index 000000000..263880f96
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/conector-line/conector-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M3.434 20.434a.8.8 0 0 1 0-1.131L19.303 3.434a.8.8 0 1 1 1.131 1.132L4.566 20.434a.8.8 0 0 1-1.132 0Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/conector-line/conector-line.tsx b/libs/components/icons/src/auto-icons/conector-line/conector-line.tsx
new file mode 100644
index 000000000..c2b492e52
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/conector-line/conector-line.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface ConectorLineIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const ConectorLineIcon: FC<ConectorLineIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M3.434 20.434a.8.8 0 0 1 0-1.131L19.303 3.434a.8.8 0 1 1 1.131 1.132L4.566 20.434a.8.8 0 0 1-1.132 0Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/connector/connector.svg b/libs/components/icons/src/auto-icons/connector/connector.svg
new file mode 100644
index 000000000..8c17a6688
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/connector/connector.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M15.6 6.5a1.9 1.9 0 1 0 3.8 0 1.9 1.9 0 0 0-3.8 0ZM17.5 3a3.5 3.5 0 0 0-2.924 5.424l-6.152 6.152a3.5 3.5 0 1 0 1.1 1.162l6.214-6.213A3.5 3.5 0 1 0 17.5 3ZM4.6 17.5a1.9 1.9 0 1 0 3.8 0 1.9 1.9 0 0 0-3.8 0Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/connector/connector.tsx b/libs/components/icons/src/auto-icons/connector/connector.tsx
new file mode 100644
index 000000000..18f11e3aa
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/connector/connector.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface ConnectorIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const ConnectorIcon: FC<ConnectorIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M15.6 6.5a1.9 1.9 0 1 0 3.8 0 1.9 1.9 0 0 0-3.8 0ZM17.5 3a3.5 3.5 0 0 0-2.924 5.424l-6.152 6.152a3.5 3.5 0 1 0 1.1 1.162l6.214-6.213A3.5 3.5 0 1 0 17.5 3ZM4.6 17.5a1.9 1.9 0 1 0 3.8 0 1.9 1.9 0 0 0-3.8 0Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/dash-line/dash-line.svg b/libs/components/icons/src/auto-icons/dash-line/dash-line.svg
new file mode 100644
index 000000000..6cd4c009e
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/dash-line/dash-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M17.167 5.833 20 3l.99.99-2.833 2.833-.99-.99ZM12.444 10.556l2.834-2.834.99.99-2.834 2.834-.99-.99ZM7.722 15.278l2.834-2.834.99.99-2.834 2.834-.99-.99ZM3 20l2.833-2.833.99.99L3.99 20.99 3 20Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/dash-line/dash-line.tsx b/libs/components/icons/src/auto-icons/dash-line/dash-line.tsx
new file mode 100644
index 000000000..71b889c45
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/dash-line/dash-line.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface DashLineIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const DashLineIcon: FC<DashLineIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M17.167 5.833 20 3l.99.99-2.833 2.833-.99-.99ZM12.444 10.556l2.834-2.834.99.99-2.834 2.834-.99-.99ZM7.722 15.278l2.834-2.834.99.99-2.834 2.834-.99-.99ZM3 20l2.833-2.833.99.99L3.99 20.99 3 20Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/date/date.svg b/libs/components/icons/src/auto-icons/date/date.svg
new file mode 100644
index 000000000..b7a51aab0
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/date/date.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18 6.2H6a1.4 1.4 0 0 0-1.4 1.4V18A1.4 1.4 0 0 0 6 19.4h12a1.4 1.4 0 0 0 1.4-1.4V7.6A1.4 1.4 0 0 0 18 6.2ZM6 4.6a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V7.6a3 3 0 0 0-3-3H6Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M20 11H4V9.4h16V11ZM8.8 3a.8.8 0 0 1 .8.8v3.4a.8.8 0 0 1-1.6 0V3.8a.8.8 0 0 1 .8-.8ZM15.2 8a.8.8 0 0 1-.8-.8V3.8a.8.8 0 0 1 1.6 0v3.4a.8.8 0 0 1-.8.8Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/date/date.tsx b/libs/components/icons/src/auto-icons/date/date.tsx
new file mode 100644
index 000000000..02e74a09f
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/date/date.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface DateIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const DateIcon: FC<DateIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18 6.2H6a1.4 1.4 0 0 0-1.4 1.4V18A1.4 1.4 0 0 0 6 19.4h12a1.4 1.4 0 0 0 1.4-1.4V7.6A1.4 1.4 0 0 0 18 6.2ZM6 4.6a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V7.6a3 3 0 0 0-3-3H6Z" clipRule="evenodd" /><path fillRule="evenodd" d="M20 11H4V9.4h16V11ZM8.8 3a.8.8 0 0 1 .8.8v3.4a.8.8 0 0 1-1.6 0V3.8a.8.8 0 0 1 .8-.8ZM15.2 8a.8.8 0 0 1-.8-.8V3.8a.8.8 0 0 1 1.6 0v3.4a.8.8 0 0 1-.8.8Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/delete-cash-bin/delete-cash-bin.svg b/libs/components/icons/src/auto-icons/delete-cash-bin/delete-cash-bin.svg
new file mode 100644
index 000000000..782d045d1
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/delete-cash-bin/delete-cash-bin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M22 7H2V5.4h20V7ZM8 2h8v1.6H8V2ZM5.6 7v12A1.4 1.4 0 0 0 7 20.4h10a1.4 1.4 0 0 0 1.4-1.4V7H20v12a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7h1.6Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M9 18V9h1.6v9H9ZM15 9v9h-1.6V9H15Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/delete-cash-bin/delete-cash-bin.tsx b/libs/components/icons/src/auto-icons/delete-cash-bin/delete-cash-bin.tsx
new file mode 100644
index 000000000..8ae563568
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/delete-cash-bin/delete-cash-bin.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface DeleteCashBinIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const DeleteCashBinIcon: FC<DeleteCashBinIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M22 7H2V5.4h20V7ZM8 2h8v1.6H8V2ZM5.6 7v12A1.4 1.4 0 0 0 7 20.4h10a1.4 1.4 0 0 0 1.4-1.4V7H20v12a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7h1.6Z" clipRule="evenodd" /><path fillRule="evenodd" d="M9 18V9h1.6v9H9ZM15 9v9h-1.6V9H15Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/delete-small-tag/delete-small-tag.svg b/libs/components/icons/src/auto-icons/delete-small-tag/delete-small-tag.svg
new file mode 100644
index 000000000..a2362573d
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/delete-small-tag/delete-small-tag.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M11.578 12.007 9 14.585l.425.425 2.578-2.578 2.582 2.582.425-.425-2.582-2.582 2.582-2.582L14.585 9l-2.582 2.582-2.578-2.578L9 9.43l2.578 2.577Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/delete-small-tag/delete-small-tag.tsx b/libs/components/icons/src/auto-icons/delete-small-tag/delete-small-tag.tsx
new file mode 100644
index 000000000..7260c5db4
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/delete-small-tag/delete-small-tag.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface DeleteSmallTagIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const DeleteSmallTagIcon: FC<DeleteSmallTagIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M11.578 12.007 9 14.585l.425.425 2.578-2.578 2.582 2.582.425-.425-2.582-2.582 2.582-2.582L14.585 9l-2.582 2.582-2.578-2.578L9 9.43l2.578 2.577Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/divider/divider.svg b/libs/components/icons/src/auto-icons/divider/divider.svg
new file mode 100644
index 000000000..8489bddc0
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/divider/divider.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21 12.8H3v-1.6h18v1.6ZM4 2V9.2h1.6V3.6h6.737l5.6 5.6H20V9l-7-7H4Zm14.4 12.8H20V22H7a3 3 0 0 1-3-3v-4.2h1.6V19A1.4 1.4 0 0 0 7 20.4h11.4v-5.6Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/divider/divider.tsx b/libs/components/icons/src/auto-icons/divider/divider.tsx
new file mode 100644
index 000000000..08009a3e7
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/divider/divider.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface DividerIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const DividerIcon: FC<DividerIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M21 12.8H3v-1.6h18v1.6ZM4 2V9.2h1.6V3.6h6.737l5.6 5.6H20V9l-7-7H4Zm14.4 12.8H20V22H7a3 3 0 0 1-3-3v-4.2h1.6V19A1.4 1.4 0 0 0 7 20.4h11.4v-5.6Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/doc-view/doc-view.svg b/libs/components/icons/src/auto-icons/doc-view/doc-view.svg
new file mode 100644
index 000000000..593a2c84b
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/doc-view/doc-view.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M19 6.6H5a.4.4 0 0 0-.4.4v10c0 .22.18.4.4.4h14a.4.4 0 0 0 .4-.4V7a.4.4 0 0 0-.4-.4ZM5 5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M17 9.8H7V8.2h10v1.6Zm-5 3H7v-1.6h5v1.6Zm-5 3h7v-1.6H7v1.6Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/doc-view/doc-view.tsx b/libs/components/icons/src/auto-icons/doc-view/doc-view.tsx
new file mode 100644
index 000000000..a75e9f2f5
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/doc-view/doc-view.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface DocViewIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const DocViewIcon: FC<DocViewIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M19 6.6H5a.4.4 0 0 0-.4.4v10c0 .22.18.4.4.4h14a.4.4 0 0 0 .4-.4V7a.4.4 0 0 0-.4-.4ZM5 5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5Z" clipRule="evenodd" /><path fillRule="evenodd" d="M17 9.8H7V8.2h10v1.6Zm-5 3H7v-1.6h5v1.6Zm-5 3h7v-1.6H7v1.6Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/done/done.svg b/libs/components/icons/src/auto-icons/done/done.svg
new file mode 100644
index 000000000..8269f3855
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/done/done.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21.207 7.207 9 19.414l-6.207-6.207 1.414-1.414L9 16.586 19.793 5.793l1.414 1.414Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/done/done.tsx b/libs/components/icons/src/auto-icons/done/done.tsx
new file mode 100644
index 000000000..1550405f8
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/done/done.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface DoneIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const DoneIcon: FC<DoneIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M21.207 7.207 9 19.414l-6.207-6.207 1.414-1.414L9 16.586 19.793 5.793l1.414 1.414Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/duplicate/duplicate.svg b/libs/components/icons/src/auto-icons/duplicate/duplicate.svg
new file mode 100644
index 000000000..abf27ab86
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/duplicate/duplicate.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18 8.6h-8A1.4 1.4 0 0 0 8.6 10v8a1.4 1.4 0 0 0 1.4 1.4h8a1.4 1.4 0 0 0 1.4-1.4v-8A1.4 1.4 0 0 0 18 8.6ZM10 7a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3h-8Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M13.2 17v-6h1.6v6h-1.6Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M11 13.2h6v1.6h-6v-1.6ZM6 4.6h8A1.4 1.4 0 0 1 15.4 6v1H17V6a3 3 0 0 0-3-3H6a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h1v-1.6H6A1.4 1.4 0 0 1 4.6 14V6A1.4 1.4 0 0 1 6 4.6Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/duplicate/duplicate.tsx b/libs/components/icons/src/auto-icons/duplicate/duplicate.tsx
new file mode 100644
index 000000000..8421aa6ca
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/duplicate/duplicate.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface DuplicateIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const DuplicateIcon: FC<DuplicateIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18 8.6h-8A1.4 1.4 0 0 0 8.6 10v8a1.4 1.4 0 0 0 1.4 1.4h8a1.4 1.4 0 0 0 1.4-1.4v-8A1.4 1.4 0 0 0 18 8.6ZM10 7a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3h-8Z" clipRule="evenodd" /><path fillRule="evenodd" d="M13.2 17v-6h1.6v6h-1.6Z" clipRule="evenodd" /><path fillRule="evenodd" d="M11 13.2h6v1.6h-6v-1.6ZM6 4.6h8A1.4 1.4 0 0 1 15.4 6v1H17V6a3 3 0 0 0-3-3H6a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h1v-1.6H6A1.4 1.4 0 0 1 4.6 14V6A1.4 1.4 0 0 1 6 4.6Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/edit/edit.svg b/libs/components/icons/src/auto-icons/edit/edit.svg
new file mode 100644
index 000000000..13912a25c
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/edit/edit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="m6.398 15.864-.383 1.151.97.97 1.15-.383 8.234-8.233L14.63 7.63l-8.233 8.233ZM15.763 6.5 17.5 8.237l1.369-1.368A1.228 1.228 0 0 0 17.13 5.13L15.763 6.5ZM16 4 5.133 14.867a.8.8 0 0 0-.193.312l-1.434 4.303a.8.8 0 0 0 1.012 1.012L8.82 19.06a.8.8 0 0 0 .312-.194L20 8a2.828 2.828 0 1 0-4-4Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/edit/edit.tsx b/libs/components/icons/src/auto-icons/edit/edit.tsx
new file mode 100644
index 000000000..25a1238e1
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/edit/edit.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface EditIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const EditIcon: FC<EditIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="m6.398 15.864-.383 1.151.97.97 1.15-.383 8.234-8.233L14.63 7.63l-8.233 8.233ZM15.763 6.5 17.5 8.237l1.369-1.368A1.228 1.228 0 0 0 17.13 5.13L15.763 6.5ZM16 4 5.133 14.867a.8.8 0 0 0-.193.312l-1.434 4.303a.8.8 0 0 0 1.012 1.012L8.82 19.06a.8.8 0 0 0 .312-.194L20 8a2.828 2.828 0 1 0-4-4Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/ellipse/ellipse.svg b/libs/components/icons/src/auto-icons/ellipse/ellipse.svg
new file mode 100644
index 000000000..36c69842c
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/ellipse/ellipse.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 20.4a8.4 8.4 0 1 0 0-16.8 8.4 8.4 0 0 0 0 16.8Zm0 1.6c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/ellipse/ellipse.tsx b/libs/components/icons/src/auto-icons/ellipse/ellipse.tsx
new file mode 100644
index 000000000..e77a90925
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/ellipse/ellipse.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface EllipseIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const EllipseIcon: FC<EllipseIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M12 20.4a8.4 8.4 0 1 0 0-16.8 8.4 8.4 0 0 0 0 16.8Zm0 1.6c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/email/email.svg b/libs/components/icons/src/auto-icons/email/email.svg
new file mode 100644
index 000000000..cc82e8abd
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/email/email.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M5 5.6h14c.062 0 .124.004.184.012L12 11 4.816 5.612c.06-.008.122-.012.184-.012Zm-1.108.544a1.377 1.377 0 0 0-.025.034l.025-.034Zm-.264.577c-.018.09-.028.183-.028.279v10A1.4 1.4 0 0 0 5 18.4h14a1.4 1.4 0 0 0 1.4-1.4V7c0-.096-.01-.189-.028-.279L12 13.001 3.628 6.72Zm16.504-.545a1.339 1.339 0 0 0-.023-.03l.023.03ZM2 7a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/email/email.tsx b/libs/components/icons/src/auto-icons/email/email.tsx
new file mode 100644
index 000000000..8d7068943
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/email/email.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface EmailIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const EmailIcon: FC<EmailIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M5 5.6h14c.062 0 .124.004.184.012L12 11 4.816 5.612c.06-.008.122-.012.184-.012Zm-1.108.544a1.377 1.377 0 0 0-.025.034l.025-.034Zm-.264.577c-.018.09-.028.183-.028.279v10A1.4 1.4 0 0 0 5 18.4h14a1.4 1.4 0 0 0 1.4-1.4V7c0-.096-.01-.189-.028-.279L12 13.001 3.628 6.72Zm16.504-.545a1.339 1.339 0 0 0-.023-.03l.023.03ZM2 7a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/embed/embed.svg b/libs/components/icons/src/auto-icons/embed/embed.svg
new file mode 100644
index 000000000..78bd8ded6
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/embed/embed.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M5.959 12.179C4.312 13.825 4.33 16.513 6 18.182c1.67 1.67 4.357 1.688 6.003.041l5.395-5.394 1.151 1.151-5.394 5.395c-2.274 2.273-5.986 2.248-8.29-.057-2.306-2.305-2.331-6.017-.057-8.29l6.92-6.92c1.588-1.588 4.18-1.57 5.789.039 1.61 1.61 1.627 4.201.04 5.789L10.99 16.5c-.902.902-2.373.892-3.288-.022-.914-.914-.924-2.386-.022-3.288l6.033-6.033 1.152 1.151-6.034 6.034a.708.708 0 0 0 .007 1 .708.708 0 0 0 1 .007l6.566-6.566c.96-.96.95-2.528-.024-3.502-.973-.973-2.541-.984-3.502-.023l-6.92 6.92Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/embed/embed.tsx b/libs/components/icons/src/auto-icons/embed/embed.tsx
new file mode 100644
index 000000000..6b8118629
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/embed/embed.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface EmbedIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const EmbedIcon: FC<EmbedIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M5.959 12.179C4.312 13.825 4.33 16.513 6 18.182c1.67 1.67 4.357 1.688 6.003.041l5.395-5.394 1.151 1.151-5.394 5.395c-2.274 2.273-5.986 2.248-8.29-.057-2.306-2.305-2.331-6.017-.057-8.29l6.92-6.92c1.588-1.588 4.18-1.57 5.789.039 1.61 1.61 1.627 4.201.04 5.789L10.99 16.5c-.902.902-2.373.892-3.288-.022-.914-.914-.924-2.386-.022-3.288l6.033-6.033 1.152 1.151-6.034 6.034a.708.708 0 0 0 .007 1 .708.708 0 0 0 1 .007l6.566-6.566c.96-.96.95-2.528-.024-3.502-.973-.973-2.541-.984-3.502-.023l-6.92 6.92Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/eraser/eraser.svg b/libs/components/icons/src/auto-icons/eraser/eraser.svg
new file mode 100644
index 000000000..cd906f364
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/eraser/eraser.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M15.98 3.848a2.8 2.8 0 0 0-3.96 0L2.848 13.02a2.8 2.8 0 0 0 0 3.96l3 3a2.8 2.8 0 0 0 1.98.82H21v-1.6H12.93l7.22-7.22a2.8 2.8 0 0 0 0-3.96L15.98 3.848Zm.454 9.586L10.668 19.2h-2.84a1.2 1.2 0 0 1-.848-.352l-3-3a1.2 1.2 0 0 1 0-1.697l6.586-6.585 5.868 5.868Zm1.132-1.131-5.87-5.869 1.455-1.454a1.2 1.2 0 0 1 1.697 0L19.02 9.15a1.2 1.2 0 0 1 0 1.697l-1.454 1.455Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/eraser/eraser.tsx b/libs/components/icons/src/auto-icons/eraser/eraser.tsx
new file mode 100644
index 000000000..a6b4a504e
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/eraser/eraser.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface EraserIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const EraserIcon: FC<EraserIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M15.98 3.848a2.8 2.8 0 0 0-3.96 0L2.848 13.02a2.8 2.8 0 0 0 0 3.96l3 3a2.8 2.8 0 0 0 1.98.82H21v-1.6H12.93l7.22-7.22a2.8 2.8 0 0 0 0-3.96L15.98 3.848Zm.454 9.586L10.668 19.2h-2.84a1.2 1.2 0 0 1-.848-.352l-3-3a1.2 1.2 0 0 1 0-1.697l6.586-6.585 5.868 5.868Zm1.132-1.131-5.87-5.869 1.455-1.454a1.2 1.2 0 0 1 1.697 0L19.02 9.15a1.2 1.2 0 0 1 0 1.697l-1.454 1.455Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/figma/figma.svg b/libs/components/icons/src/auto-icons/figma/figma.svg
new file mode 100644
index 000000000..f40f7de3f
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/figma/figma.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#0ACF83" d="M9.25 21c1.518 0 2.75-1.344 2.75-3v-3H9.25c-1.518 0-2.75 1.344-2.75 3s1.232 3 2.75 3Z"/><path fill="#A259FF" d="M6.5 12c0-1.656 1.232-3 2.75-3H12v6H9.25c-1.518 0-2.75-1.344-2.75-3Z"/><path fill="#F24E1E" d="M6.5 6c0-1.656 1.232-3 2.75-3H12v6H9.25C7.732 9 6.5 7.656 6.5 6Z"/><path fill="#FF7262" d="M12 3h2.75c1.518 0 2.75 1.344 2.75 3s-1.232 3-2.75 3H12V3Z"/><path fill="#1ABCFE" d="M17.5 12c0 1.656-1.232 3-2.75 3S12 13.656 12 12s1.232-3 2.75-3 2.75 1.344 2.75 3Z"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/figma/figma.tsx b/libs/components/icons/src/auto-icons/figma/figma.tsx
new file mode 100644
index 000000000..ebd0c50d7
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/figma/figma.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface FigmaIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const FigmaIcon: FC<FigmaIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fill="#0ACF83" d="M9.25 21c1.518 0 2.75-1.344 2.75-3v-3H9.25c-1.518 0-2.75 1.344-2.75 3s1.232 3 2.75 3Z" /><path fill="#A259FF" d="M6.5 12c0-1.656 1.232-3 2.75-3H12v6H9.25c-1.518 0-2.75-1.344-2.75-3Z" /><path fill="#F24E1E" d="M6.5 6c0-1.656 1.232-3 2.75-3H12v6H9.25C7.732 9 6.5 7.656 6.5 6Z" /><path fill="#FF7262" d="M12 3h2.75c1.518 0 2.75 1.344 2.75 3s-1.232 3-2.75 3H12V3Z" /><path fill="#1ABCFE" d="M17.5 12c0 1.656-1.232 3-2.75 3S12 13.656 12 12s1.232-3 2.75-3 2.75 1.344 2.75 3Z" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/file/file.svg b/libs/components/icons/src/auto-icons/file/file.svg
new file mode 100644
index 000000000..fe5d84fa2
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/file/file.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="m14.337 8.6-3-3H4a.4.4 0 0 0-.4.4v12c0 .22.18.4.4.4h16a.4.4 0 0 0 .4-.4V9a.4.4 0 0 0-.4-.4h-5.663ZM12 4l3 3h5a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h8Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M21 12H3v-1.6h18V12Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/file/file.tsx b/libs/components/icons/src/auto-icons/file/file.tsx
new file mode 100644
index 000000000..7c8d5a564
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/file/file.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface FileIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const FileIcon: FC<FileIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="m14.337 8.6-3-3H4a.4.4 0 0 0-.4.4v12c0 .22.18.4.4.4h16a.4.4 0 0 0 .4-.4V9a.4.4 0 0 0-.4-.4h-5.663ZM12 4l3 3h5a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h8Z" clipRule="evenodd" /><path fillRule="evenodd" d="M21 12H3v-1.6h18V12Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/filter/filter.svg b/libs/components/icons/src/auto-icons/filter/filter.svg
new file mode 100644
index 000000000..440e0cbfc
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/filter/filter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M10.6 10.82v7.817l2.8-2.8v-5.016L18.584 4.6H5.416l5.184 6.22ZM15 16.5 10.5 21H9v-9.6L3.367 4.64A1 1 0 0 1 4.135 3h15.73a1 1 0 0 1 .768 1.64L15 11.4v5.1Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/filter/filter.tsx b/libs/components/icons/src/auto-icons/filter/filter.tsx
new file mode 100644
index 000000000..72bd22d75
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/filter/filter.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface FilterIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const FilterIcon: FC<FilterIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M10.6 10.82v7.817l2.8-2.8v-5.016L18.584 4.6H5.416l5.184 6.22ZM15 16.5 10.5 21H9v-9.6L3.367 4.64A1 1 0 0 1 4.135 3h15.73a1 1 0 0 1 .768 1.64L15 11.4v5.1Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/format-background/format-background.svg b/libs/components/icons/src/auto-icons/format-background/format-background.svg
new file mode 100644
index 000000000..3cb3b85cb
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/format-background/format-background.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Zm-.45 16 5.51-14h1.862l5.51 14h-1.745l-1.49-3.922H8.766L7.276 19H5.55Zm6.412-12.275-2.687 7h5.412l-2.647-7h-.078Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/format-background/format-background.tsx b/libs/components/icons/src/auto-icons/format-background/format-background.tsx
new file mode 100644
index 000000000..6baf1ba3c
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/format-background/format-background.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface FormatBackgroundIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const FormatBackgroundIcon: FC<FormatBackgroundIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Zm-.45 16 5.51-14h1.862l5.51 14h-1.745l-1.49-3.922H8.766L7.276 19H5.55Zm6.412-12.275-2.687 7h5.412l-2.647-7h-.078Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/format-bold-emphasis/format-bold-emphasis.svg b/libs/components/icons/src/auto-icons/format-bold-emphasis/format-bold-emphasis.svg
new file mode 100644
index 000000000..c335f5fb8
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/format-bold-emphasis/format-bold-emphasis.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M7.2 5.2h5.3a2.3 2.3 0 1 1 0 4.6H7.2V5.2ZM5 10V3h7.5a4.5 4.5 0 0 1 3.578 7.23A5.5 5.5 0 0 1 14.5 21H5V10Zm2.2 2.2h7.3a3.3 3.3 0 0 1 0 6.6H7.2v-6.6Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/format-bold-emphasis/format-bold-emphasis.tsx b/libs/components/icons/src/auto-icons/format-bold-emphasis/format-bold-emphasis.tsx
new file mode 100644
index 000000000..849681b6f
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/format-bold-emphasis/format-bold-emphasis.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface FormatBoldEmphasisIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const FormatBoldEmphasisIcon: FC<FormatBoldEmphasisIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M7.2 5.2h5.3a2.3 2.3 0 1 1 0 4.6H7.2V5.2ZM5 10V3h7.5a4.5 4.5 0 0 1 3.578 7.23A5.5 5.5 0 0 1 14.5 21H5V10Zm2.2 2.2h7.3a3.3 3.3 0 0 1 0 6.6H7.2v-6.6Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/format-clear/format-clear.svg b/libs/components/icons/src/auto-icons/format-clear/format-clear.svg
new file mode 100644
index 000000000..6857e66b6
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/format-clear/format-clear.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M11.665 14.924 15.615 21H18l-5.41-8.323-1.324-2.037L6.3 3H3.915l6.426 9.887L7 21l1.85.762 2.815-6.838ZM15.75 5l-2.236 5.43-1.324-2.037L13.588 5H9.985l-1.3-2H21v2h-5.249Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/format-clear/format-clear.tsx b/libs/components/icons/src/auto-icons/format-clear/format-clear.tsx
new file mode 100644
index 000000000..a4da1e465
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/format-clear/format-clear.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface FormatClearIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const FormatClearIcon: FC<FormatClearIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M11.665 14.924 15.615 21H18l-5.41-8.323-1.324-2.037L6.3 3H3.915l6.426 9.887L7 21l1.85.762 2.815-6.838ZM15.75 5l-2.236 5.43-1.324-2.037L13.588 5H9.985l-1.3-2H21v2h-5.249Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/format-color-text/format-color-text.svg b/libs/components/icons/src/auto-icons/format-color-text/format-color-text.svg
new file mode 100644
index 000000000..5b15a7c60
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/format-color-text/format-color-text.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21 21H3v-1.6h18V21Z" clip-rule="evenodd"/><path d="M11.12 3 5.5 17.28h1.76l1.52-4h6.56l1.52 4h1.78L13.02 3h-1.9ZM9.3 11.9l2.74-7.14h.08l2.7 7.14H9.3Z"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/format-color-text/format-color-text.tsx b/libs/components/icons/src/auto-icons/format-color-text/format-color-text.tsx
new file mode 100644
index 000000000..aa68b248f
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/format-color-text/format-color-text.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface FormatColorTextIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const FormatColorTextIcon: FC<FormatColorTextIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M21 21H3v-1.6h18V21Z" clipRule="evenodd" /><path d="M11.12 3 5.5 17.28h1.76l1.52-4h6.56l1.52 4h1.78L13.02 3h-1.9ZM9.3 11.9l2.74-7.14h.08l2.7 7.14H9.3Z" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/format-italic/format-italic.svg b/libs/components/icons/src/auto-icons/format-italic/format-italic.svg
new file mode 100644
index 000000000..3427f4962
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/format-italic/format-italic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M10 3h9v1.6h-3.668l-5.224 14.8H14V21H5v-1.6h3.412l5.223-14.8H10V3Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/format-italic/format-italic.tsx b/libs/components/icons/src/auto-icons/format-italic/format-italic.tsx
new file mode 100644
index 000000000..ba3a82b16
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/format-italic/format-italic.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface FormatItalicIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const FormatItalicIcon: FC<FormatItalicIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M10 3h9v1.6h-3.668l-5.224 14.8H14V21H5v-1.6h3.412l5.223-14.8H10V3Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/format-strikethrough/format-strikethrough.svg b/libs/components/icons/src/auto-icons/format-strikethrough/format-strikethrough.svg
new file mode 100644
index 000000000..76df33170
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/format-strikethrough/format-strikethrough.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21 12.8H4v-1.6h17v1.6Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="m16.576 6.966 1.282-.953C16.584 4.004 14.535 3 11.709 3c-1.587 0-2.947.352-4.081 1.056-1.221.755-1.831 1.862-1.831 3.322 0 .274.008.472.026.592.07.446.209.85.418 1.21.227.36.462.661.707.902.261.223.645.463 1.15.72.524.258.96.456 1.309.593.366.137.916.335 1.648.592.053.034.14.06.262.077.663.24 1.107.395 1.334.464l.082.032h3.831a4.875 4.875 0 0 0-.198-.135c-.593-.378-1.317-.738-2.171-1.082a90.081 90.081 0 0 1-1.335-.54c-.209-.07-.619-.198-1.23-.387-.592-.206-.95-.326-1.072-.36-.855-.275-1.535-.618-2.04-1.03-.576-.48-.864-1.073-.864-1.777 0-.927.384-1.631 1.151-2.112.768-.48 1.814-.72 3.14-.72.994 0 1.892.222 2.694.669a4.932 4.932 0 0 1 1.937 1.88Zm1.307 7.194h-2.122c.105.102.185.202.239.3.262.583.392 1.124.392 1.621 0 .55-.087 1.005-.261 1.365-.314.738-.907 1.27-1.78 1.597-.767.309-1.621.463-2.563.463-2.983 0-4.832-1.296-5.547-3.888l-1.491.644c.122.686.366 1.313.733 1.88.575.961 1.5 1.7 2.773 2.214a9.005 9.005 0 0 0 3.401.644c2.023 0 3.628-.438 4.814-1.313 1.186-.893 1.779-2.112 1.779-3.657 0-.693-.122-1.316-.367-1.87Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/format-strikethrough/format-strikethrough.tsx b/libs/components/icons/src/auto-icons/format-strikethrough/format-strikethrough.tsx
new file mode 100644
index 000000000..1868a9a16
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/format-strikethrough/format-strikethrough.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface FormatStrikethroughIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const FormatStrikethroughIcon: FC<FormatStrikethroughIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M21 12.8H4v-1.6h17v1.6Z" clipRule="evenodd" /><path fillRule="evenodd" d="m16.576 6.966 1.282-.953C16.584 4.004 14.535 3 11.709 3c-1.587 0-2.947.352-4.081 1.056-1.221.755-1.831 1.862-1.831 3.322 0 .274.008.472.026.592.07.446.209.85.418 1.21.227.36.462.661.707.902.261.223.645.463 1.15.72.524.258.96.456 1.309.593.366.137.916.335 1.648.592.053.034.14.06.262.077.663.24 1.107.395 1.334.464l.082.032h3.831a4.875 4.875 0 0 0-.198-.135c-.593-.378-1.317-.738-2.171-1.082a90.081 90.081 0 0 1-1.335-.54c-.209-.07-.619-.198-1.23-.387-.592-.206-.95-.326-1.072-.36-.855-.275-1.535-.618-2.04-1.03-.576-.48-.864-1.073-.864-1.777 0-.927.384-1.631 1.151-2.112.768-.48 1.814-.72 3.14-.72.994 0 1.892.222 2.694.669a4.932 4.932 0 0 1 1.937 1.88Zm1.307 7.194h-2.122c.105.102.185.202.239.3.262.583.392 1.124.392 1.621 0 .55-.087 1.005-.261 1.365-.314.738-.907 1.27-1.78 1.597-.767.309-1.621.463-2.563.463-2.983 0-4.832-1.296-5.547-3.888l-1.491.644c.122.686.366 1.313.733 1.88.575.961 1.5 1.7 2.773 2.214a9.005 9.005 0 0 0 3.401.644c2.023 0 3.628-.438 4.814-1.313 1.186-.893 1.779-2.112 1.779-3.657 0-.693-.122-1.316-.367-1.87Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/forward-redo/forward-redo.svg b/libs/components/icons/src/auto-icons/forward-redo/forward-redo.svg
new file mode 100644
index 000000000..76934a1e0
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/forward-redo/forward-redo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="m12.879 5.707 1.414-1.414L22 12l-7.707 7.707-1.414-1.414L18.172 13H9c-2.074 0-3.274.842-3.988 1.834C4.26 15.878 4 17.16 4 18H2c0-1.16.34-2.878 1.388-4.334C4.474 12.158 6.275 11 9.001 11h9.17L12.88 5.707Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/forward-redo/forward-redo.tsx b/libs/components/icons/src/auto-icons/forward-redo/forward-redo.tsx
new file mode 100644
index 000000000..52e5893e4
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/forward-redo/forward-redo.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface ForwardRedoIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const ForwardRedoIcon: FC<ForwardRedoIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="m12.879 5.707 1.414-1.414L22 12l-7.707 7.707-1.414-1.414L18.172 13H9c-2.074 0-3.274.842-3.988 1.834C4.26 15.878 4 17.16 4 18H2c0-1.16.34-2.878 1.388-4.334C4.474 12.158 6.275 11 9.001 11h9.17L12.88 5.707Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/frame/frame.svg b/libs/components/icons/src/auto-icons/frame/frame.svg
new file mode 100644
index 000000000..695eecf45
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/frame/frame.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M8 3v3.4h8V3h1.6v3.4H21V8h-3.4v8H21v1.6h-3.4V21H16v-3.4H8V21H6.4v-3.4H3V16h3.4V8H3V6.4h3.4V3H8Zm8 13V8H8v8h8Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/frame/frame.tsx b/libs/components/icons/src/auto-icons/frame/frame.tsx
new file mode 100644
index 000000000..295410dd7
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/frame/frame.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface FrameIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const FrameIcon: FC<FrameIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M8 3v3.4h8V3h1.6v3.4H21V8h-3.4v8H21v1.6h-3.4V21H16v-3.4H8V21H6.4v-3.4H3V16h3.4V8H3V6.4h3.4V3H8Zm8 13V8H8v8h8Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/full-screen/full-screen.svg b/libs/components/icons/src/auto-icons/full-screen/full-screen.svg
new file mode 100644
index 000000000..63977ef14
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/full-screen/full-screen.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Zm10.2 3.8H13V5.2h5.8V11h-1.6V8.063l-3.483 3.482-1.131-1.131L16.2 6.8Zm-5.72 5.72 1.132 1.13-3.55 3.55H11v1.6H5.2V13h1.6v3.2l3.68-3.68Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/full-screen/full-screen.tsx b/libs/components/icons/src/auto-icons/full-screen/full-screen.tsx
new file mode 100644
index 000000000..cc91c6915
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/full-screen/full-screen.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface FullScreenIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const FullScreenIcon: FC<FullScreenIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Zm10.2 3.8H13V5.2h5.8V11h-1.6V8.063l-3.483 3.482-1.131-1.131L16.2 6.8Zm-5.72 5.72 1.132 1.13-3.55 3.55H11v1.6H5.2V13h1.6v3.2l3.68-3.68Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/group-by/group-by.svg b/libs/components/icons/src/auto-icons/group-by/group-by.svg
new file mode 100644
index 000000000..c81de16c3
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/group-by/group-by.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21 3.8a.8.8 0 0 1-.8.8h-6.4a.8.8 0 0 1 0-1.6h6.4a.8.8 0 0 1 .8.8ZM11 3.8a.8.8 0 0 1-.8.8H3.8a.8.8 0 1 1 0-1.6h6.4a.8.8 0 0 1 .8.8ZM19 8.6h-4a.4.4 0 0 0-.4.4v10c0 .22.18.4.4.4h4a.4.4 0 0 0 .4-.4V9a.4.4 0 0 0-.4-.4ZM15 7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-4Z" clip-rule="evenodd"/><rect width="8" height="9" x="3" y="7" rx="2"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/group-by/group-by.tsx b/libs/components/icons/src/auto-icons/group-by/group-by.tsx
new file mode 100644
index 000000000..36a029891
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/group-by/group-by.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface GroupByIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const GroupByIcon: FC<GroupByIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M21 3.8a.8.8 0 0 1-.8.8h-6.4a.8.8 0 0 1 0-1.6h6.4a.8.8 0 0 1 .8.8ZM11 3.8a.8.8 0 0 1-.8.8H3.8a.8.8 0 1 1 0-1.6h6.4a.8.8 0 0 1 .8.8ZM19 8.6h-4a.4.4 0 0 0-.4.4v10c0 .22.18.4.4.4h4a.4.4 0 0 0 .4-.4V9a.4.4 0 0 0-.4-.4ZM15 7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-4Z" clipRule="evenodd" /><rect width={8} height={9} x={3} y={7} rx={2} />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/group/group.svg b/libs/components/icons/src/auto-icons/group/group.svg
new file mode 100644
index 000000000..6baf7d5d1
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/group/group.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18 4.6H6A1.4 1.4 0 0 0 4.6 6v12A1.4 1.4 0 0 0 6 19.4h12a1.4 1.4 0 0 0 1.4-1.4V6A1.4 1.4 0 0 0 18 4.6ZM6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Z" clip-rule="evenodd"/><rect width="10" height="4" x="7" y="7" rx="1"/><rect width="10" height="4" x="7" y="13" rx="1"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/group/group.tsx b/libs/components/icons/src/auto-icons/group/group.tsx
new file mode 100644
index 000000000..abf8a0080
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/group/group.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface GroupIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const GroupIcon: FC<GroupIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18 4.6H6A1.4 1.4 0 0 0 4.6 6v12A1.4 1.4 0 0 0 6 19.4h12a1.4 1.4 0 0 0 1.4-1.4V6A1.4 1.4 0 0 0 18 4.6ZM6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Z" clipRule="evenodd" /><rect width={10} height={4} x={7} y={7} rx={1} /><rect width={10} height={4} x={7} y={13} rx={1} />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/hand-tool/hand-tool.svg b/libs/components/icons/src/auto-icons/hand-tool/hand-tool.svg
new file mode 100644
index 000000000..5ddad3de3
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/hand-tool/hand-tool.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.811 20.999a11.652 11.652 0 0 1-4.541-1.02l-5.595-2.633a2.302 2.302 0 0 1-1.09-3.052A2.274 2.274 0 0 1 6.619 13.2l1.044.492c-.49-1.668-1.471-4.428-2.943-6.04l-.908-.738a2.206 2.206 0 0 1 1.043-3.887c.564-.09 1.14.042 1.61.37A12.471 12.471 0 0 1 9.315 6.24c.267-.4.656-.704 1.108-.865a2.21 2.21 0 0 1 1.735.082c.242.113.464.267.654.455.245-.279.558-.49.909-.61a2.074 2.074 0 0 1 1.616.082c.287.13.54.327.736.574.102-.066.212-.118.327-.155a1.594 1.594 0 0 1 2.044.966l2.17 6.049a6.697 6.697 0 0 1 0 4.473 5.469 5.469 0 0 1-3.315 3.325 7.499 7.499 0 0 1-2.489.383Zm-9.054-6.596c-.131-.028-.33-.036-.428 0a.907.907 0 0 0-.527.474.913.913 0 0 0 .445 1.23l5.559 2.687s3.288 1.53 5.995.556a4.012 4.012 0 0 0 2.507-2.478 5.281 5.281 0 0 0 0-3.544l-2.18-6.05a.228.228 0 0 0-.43-.022.237.237 0 0 0-.006.178l.308.91a.684.684 0 0 1-.408.912.68.68 0 0 1-.909-.41l-.6-1.676a.82.82 0 0 0-.39-.429.734.734 0 0 0-.572 0 .746.746 0 0 0-.481.911l.254.957a.676.676 0 0 1-.463.82.67.67 0 0 1-.836-.42l-.6-1.657a.91.91 0 0 0-1.153-.538.91.91 0 0 0-.536 1.157l.436 1.221a.685.685 0 0 1-.409.911.68.68 0 0 1-.908-.41A10.518 10.518 0 0 0 5.592 4.72a.816.816 0 0 0-1.135.182c-.131.173-.12.335-.095.551a.839.839 0 0 0 .302.551l.908.765.064.064c2.48 2.67 3.633 7.88 3.678 8.1a.685.685 0 0 1-.245.683.69.69 0 0 1-.708.082l-1.585-.82c-.395-.216-.478-.29-1.019-.474Z"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/hand-tool/hand-tool.tsx b/libs/components/icons/src/auto-icons/hand-tool/hand-tool.tsx
new file mode 100644
index 000000000..33566d795
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/hand-tool/hand-tool.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface HandToolIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const HandToolIcon: FC<HandToolIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path d="M14.811 20.999a11.652 11.652 0 0 1-4.541-1.02l-5.595-2.633a2.302 2.302 0 0 1-1.09-3.052A2.274 2.274 0 0 1 6.619 13.2l1.044.492c-.49-1.668-1.471-4.428-2.943-6.04l-.908-.738a2.206 2.206 0 0 1 1.043-3.887c.564-.09 1.14.042 1.61.37A12.471 12.471 0 0 1 9.315 6.24c.267-.4.656-.704 1.108-.865a2.21 2.21 0 0 1 1.735.082c.242.113.464.267.654.455.245-.279.558-.49.909-.61a2.074 2.074 0 0 1 1.616.082c.287.13.54.327.736.574.102-.066.212-.118.327-.155a1.594 1.594 0 0 1 2.044.966l2.17 6.049a6.697 6.697 0 0 1 0 4.473 5.469 5.469 0 0 1-3.315 3.325 7.499 7.499 0 0 1-2.489.383Zm-9.054-6.596c-.131-.028-.33-.036-.428 0a.907.907 0 0 0-.527.474.913.913 0 0 0 .445 1.23l5.559 2.687s3.288 1.53 5.995.556a4.012 4.012 0 0 0 2.507-2.478 5.281 5.281 0 0 0 0-3.544l-2.18-6.05a.228.228 0 0 0-.43-.022.237.237 0 0 0-.006.178l.308.91a.684.684 0 0 1-.408.912.68.68 0 0 1-.909-.41l-.6-1.676a.82.82 0 0 0-.39-.429.734.734 0 0 0-.572 0 .746.746 0 0 0-.481.911l.254.957a.676.676 0 0 1-.463.82.67.67 0 0 1-.836-.42l-.6-1.657a.91.91 0 0 0-1.153-.538.91.91 0 0 0-.536 1.157l.436 1.221a.685.685 0 0 1-.409.911.68.68 0 0 1-.908-.41A10.518 10.518 0 0 0 5.592 4.72a.816.816 0 0 0-1.135.182c-.131.173-.12.335-.095.551a.839.839 0 0 0 .302.551l.908.765.064.064c2.48 2.67 3.633 7.88 3.678 8.1a.685.685 0 0 1-.245.683.69.69 0 0 1-.708.082l-1.585-.82c-.395-.216-.478-.29-1.019-.474Z" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/handle-child/handle-child.svg b/libs/components/icons/src/auto-icons/handle-child/handle-child.svg
new file mode 100644
index 000000000..9c9137e51
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/handle-child/handle-child.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="14.482" cy="12" r="1.296"/><circle cx="14.482" cy="7.463" r="1.296"/><circle cx="14.482" cy="16.537" r="1.296"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/handle-child/handle-child.tsx b/libs/components/icons/src/auto-icons/handle-child/handle-child.tsx
new file mode 100644
index 000000000..94b45e7bd
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/handle-child/handle-child.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface HandleChildIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const HandleChildIcon: FC<HandleChildIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <circle cx={14.482} cy={12} r={1.296} /><circle cx={14.482} cy={7.463} r={1.296} /><circle cx={14.482} cy={16.537} r={1.296} />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/handle-parent/handle-parent.svg b/libs/components/icons/src/auto-icons/handle-parent/handle-parent.svg
new file mode 100644
index 000000000..fffa5a6e0
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/handle-parent/handle-parent.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="9.296" cy="12" r="1.296"/><circle cx="14.482" cy="12" r="1.296"/><circle cx="9.296" cy="7.463" r="1.296"/><circle cx="14.482" cy="7.463" r="1.296"/><circle cx="9.296" cy="16.537" r="1.296"/><circle cx="14.482" cy="16.537" r="1.296"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/handle-parent/handle-parent.tsx b/libs/components/icons/src/auto-icons/handle-parent/handle-parent.tsx
new file mode 100644
index 000000000..0703b8b71
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/handle-parent/handle-parent.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface HandleParentIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const HandleParentIcon: FC<HandleParentIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <circle cx={9.296} cy={12} r={1.296} /><circle cx={14.482} cy={12} r={1.296} /><circle cx={9.296} cy={7.463} r={1.296} /><circle cx={14.482} cy={7.463} r={1.296} /><circle cx={9.296} cy={16.537} r={1.296} /><circle cx={14.482} cy={16.537} r={1.296} />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/heading-one/heading-one.svg b/libs/components/icons/src/auto-icons/heading-one/heading-one.svg
new file mode 100644
index 000000000..4dbe660ba
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/heading-one/heading-one.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2 20V4h1.6v16H2ZM14 4v16h-1.6V4H14Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M12.5 12.8h-9v-1.6h9v1.6Z" clip-rule="evenodd"/><path d="M20.68 9.29c-.36.375-.81.72-1.35 1.05-.54.3-1.05.51-1.53.63v1.74c.99-.285 1.8-.72 2.445-1.305V20H22V9.29h-1.32Z"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/heading-one/heading-one.tsx b/libs/components/icons/src/auto-icons/heading-one/heading-one.tsx
new file mode 100644
index 000000000..357c943f2
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/heading-one/heading-one.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface HeadingOneIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const HeadingOneIcon: FC<HeadingOneIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M2 20V4h1.6v16H2ZM14 4v16h-1.6V4H14Z" clipRule="evenodd" /><path fillRule="evenodd" d="M12.5 12.8h-9v-1.6h9v1.6Z" clipRule="evenodd" /><path d="M20.68 9.29c-.36.375-.81.72-1.35 1.05-.54.3-1.05.51-1.53.63v1.74c.99-.285 1.8-.72 2.445-1.305V20H22V9.29h-1.32Z" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/heading-three/heading-three.svg b/libs/components/icons/src/auto-icons/heading-three/heading-three.svg
new file mode 100644
index 000000000..323ee9232
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/heading-three/heading-three.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2 20V4h1.6v16H2ZM14 4v16h-1.6V4H14Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M12.5 12.8h-9v-1.6h9v1.6Z" clip-rule="evenodd"/><path d="M19.075 11c-.806 0-1.474.23-1.992.716-.553.485-.853 1.164-.922 2.037h1.325c.046-.521.207-.91.483-1.164.265-.255.634-.376 1.117-.376.473 0 .83.11 1.071.327.22.219.334.534.334.959 0 .424-.126.752-.368.97-.254.218-.622.328-1.106.328h-.575v1.067h.575c.53 0 .933.109 1.21.352.276.23.426.594.426 1.091 0 .413-.139.752-.403 1.031-.3.303-.715.461-1.233.461-.472 0-.852-.145-1.14-.424-.322-.304-.483-.74-.507-1.298H16c.07.97.392 1.722.967 2.232.519.46 1.21.691 2.062.691.898 0 1.624-.267 2.176-.788.53-.51.795-1.165.795-1.965 0-.51-.138-.934-.415-1.262-.253-.315-.633-.546-1.117-.703.91-.316 1.37-.946 1.37-1.893 0-.752-.253-1.334-.748-1.758-.506-.425-1.186-.631-2.015-.631Z"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/heading-three/heading-three.tsx b/libs/components/icons/src/auto-icons/heading-three/heading-three.tsx
new file mode 100644
index 000000000..1e10e1f1a
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/heading-three/heading-three.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface HeadingThreeIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const HeadingThreeIcon: FC<HeadingThreeIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M2 20V4h1.6v16H2ZM14 4v16h-1.6V4H14Z" clipRule="evenodd" /><path fillRule="evenodd" d="M12.5 12.8h-9v-1.6h9v1.6Z" clipRule="evenodd" /><path d="M19.075 11c-.806 0-1.474.23-1.992.716-.553.485-.853 1.164-.922 2.037h1.325c.046-.521.207-.91.483-1.164.265-.255.634-.376 1.117-.376.473 0 .83.11 1.071.327.22.219.334.534.334.959 0 .424-.126.752-.368.97-.254.218-.622.328-1.106.328h-.575v1.067h.575c.53 0 .933.109 1.21.352.276.23.426.594.426 1.091 0 .413-.139.752-.403 1.031-.3.303-.715.461-1.233.461-.472 0-.852-.145-1.14-.424-.322-.304-.483-.74-.507-1.298H16c.07.97.392 1.722.967 2.232.519.46 1.21.691 2.062.691.898 0 1.624-.267 2.176-.788.53-.51.795-1.165.795-1.965 0-.51-.138-.934-.415-1.262-.253-.315-.633-.546-1.117-.703.91-.316 1.37-.946 1.37-1.893 0-.752-.253-1.334-.748-1.758-.506-.425-1.186-.631-2.015-.631Z" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/heading-two/heading-two.svg b/libs/components/icons/src/auto-icons/heading-two/heading-two.svg
new file mode 100644
index 000000000..2d3f6d776
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/heading-two/heading-two.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2 20V4h1.6v16H2ZM14 4v16h-1.6V4H14Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M12.5 12.8h-9v-1.6h9v1.6Z" clip-rule="evenodd"/><path d="M19.133 11c-.928 0-1.675.321-2.241.964-.555.606-.832 1.397-.844 2.386h1.41c.024-.692.169-1.224.434-1.57.265-.37.662-.556 1.192-.556.494 0 .868.111 1.12.346.242.235.374.594.374 1.076 0 .494-.192.964-.566 1.397-.24.26-.627.593-1.18.989-1 .704-1.663 1.248-1.977 1.62C16.277 18.318 16 19.096 16 20h6v-1.273h-4.241c.193-.445.723-.965 1.602-1.558.844-.581 1.446-1.05 1.784-1.422.554-.63.843-1.322.843-2.089 0-.791-.265-1.422-.795-1.916-.542-.495-1.23-.742-2.06-.742Z"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/heading-two/heading-two.tsx b/libs/components/icons/src/auto-icons/heading-two/heading-two.tsx
new file mode 100644
index 000000000..f41b618e4
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/heading-two/heading-two.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface HeadingTwoIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const HeadingTwoIcon: FC<HeadingTwoIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M2 20V4h1.6v16H2ZM14 4v16h-1.6V4H14Z" clipRule="evenodd" /><path fillRule="evenodd" d="M12.5 12.8h-9v-1.6h9v1.6Z" clipRule="evenodd" /><path d="M19.133 11c-.928 0-1.675.321-2.241.964-.555.606-.832 1.397-.844 2.386h1.41c.024-.692.169-1.224.434-1.57.265-.37.662-.556 1.192-.556.494 0 .868.111 1.12.346.242.235.374.594.374 1.076 0 .494-.192.964-.566 1.397-.24.26-.627.593-1.18.989-1 .704-1.663 1.248-1.977 1.62C16.277 18.318 16 19.096 16 20h6v-1.273h-4.241c.193-.445.723-.965 1.602-1.558.844-.581 1.446-1.05 1.784-1.422.554-.63.843-1.322.843-2.089 0-.791-.265-1.422-.795-1.916-.542-.495-1.23-.742-2.06-.742Z" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/help-center/help-center.svg b/libs/components/icons/src/auto-icons/help-center/help-center.svg
new file mode 100644
index 000000000..45b995c5e
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/help-center/help-center.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12Zm0 1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z" clip-rule="evenodd"/><path d="M12.07 8.1c-.789 0-1.41.244-1.865.732-.433.467-.655 1.088-.655 1.865h.888c0-.544.122-.966.355-1.276.277-.367.688-.544 1.232-.544.466 0 .832.122 1.099.388.244.244.366.589.366 1.032 0 .311-.111.6-.322.877-.078.089-.2.222-.377.4-.6.533-.977.954-1.121 1.287-.144.278-.211.6-.211.966v.255h.899v-.255c0-.3.066-.577.21-.822.112-.2.278-.4.511-.599.489-.433.8-.721.91-.854.267-.367.411-.8.411-1.299 0-.666-.21-1.187-.622-1.565-.421-.4-.998-.588-1.709-.588Zm-.156 6.759c-.2 0-.355.055-.477.189a.604.604 0 0 0-.2.466c0 .188.067.344.2.477a.643.643 0 0 0 .477.189.7.7 0 0 0 .477-.19.643.643 0 0 0 .189-.476.636.636 0 0 0-.189-.466.635.635 0 0 0-.477-.19Z"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/help-center/help-center.tsx b/libs/components/icons/src/auto-icons/help-center/help-center.tsx
new file mode 100644
index 000000000..73e836d13
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/help-center/help-center.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface HelpCenterIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const HelpCenterIcon: FC<HelpCenterIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12Zm0 1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z" clipRule="evenodd" /><path d="M12.07 8.1c-.789 0-1.41.244-1.865.732-.433.467-.655 1.088-.655 1.865h.888c0-.544.122-.966.355-1.276.277-.367.688-.544 1.232-.544.466 0 .832.122 1.099.388.244.244.366.589.366 1.032 0 .311-.111.6-.322.877-.078.089-.2.222-.377.4-.6.533-.977.954-1.121 1.287-.144.278-.211.6-.211.966v.255h.899v-.255c0-.3.066-.577.21-.822.112-.2.278-.4.511-.599.489-.433.8-.721.91-.854.267-.367.411-.8.411-1.299 0-.666-.21-1.187-.622-1.565-.421-.4-.998-.588-1.709-.588Zm-.156 6.759c-.2 0-.355.055-.477.189a.604.604 0 0 0-.2.466c0 .188.067.344.2.477a.643.643 0 0 0 .477.189.7.7 0 0 0 .477-.19.643.643 0 0 0 .189-.476.636.636 0 0 0-.189-.466.635.635 0 0 0-.477-.19Z" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/highlighter-duotone/highlighter-duotone.svg b/libs/components/icons/src/auto-icons/highlighter-duotone/highlighter-duotone.svg
new file mode 100644
index 000000000..9031469b3
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/highlighter-duotone/highlighter-duotone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#FF9F65" fill-rule="evenodd" d="M21 21H3v-3h18v3Z" clip-rule="evenodd"/><path fill="#3A4C5C" fill-rule="evenodd" d="m6.847 15.53-.376 1.129.87.87 1.13-.376L18.892 6.732a1.148 1.148 0 1 0-1.624-1.624L6.847 15.529Zm9.29-11.553L5.582 14.53a.8.8 0 0 0-.193.313L4.174 18.49 3 19.663 4.337 21l1.174-1.174 3.645-1.215a.8.8 0 0 0 .313-.193L20.023 7.863a2.748 2.748 0 1 0-3.886-3.886Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/highlighter-duotone/highlighter-duotone.tsx b/libs/components/icons/src/auto-icons/highlighter-duotone/highlighter-duotone.tsx
new file mode 100644
index 000000000..506f45454
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/highlighter-duotone/highlighter-duotone.tsx
@@ -0,0 +1,24 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface HighlighterDuotoneIconProps extends Omit<SvgIconProps, 'color'> {
+    color0?: string
+    primaryColor?: string
+    color1?: string
+    secondaryColor?: string
+}
+
+export const HighlighterDuotoneIcon: FC<HighlighterDuotoneIconProps> = ({ color0, primaryColor, color1, secondaryColor, style, ...props}) => {
+    const propsStyles = {"--color-0": color0 || primaryColor, "--color-1": color1 || secondaryColor};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path style={{fill: 'var(--color-0)'}} fillRule="evenodd" d="M21 21H3v-3h18v3Z" clipRule="evenodd" /><path style={{fill: 'var(--color-1)'}} fillRule="evenodd" d="m6.847 15.53-.376 1.129.87.87 1.13-.376L18.892 6.732a1.148 1.148 0 1 0-1.624-1.624L6.847 15.529Zm9.29-11.553L5.582 14.53a.8.8 0 0 0-.193.313L4.174 18.49 3 19.663 4.337 21l1.174-1.174 3.645-1.215a.8.8 0 0 0 .313-.193L20.023 7.863a2.748 2.748 0 1 0-3.886-3.886Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/hover-frame/hover-frame.svg b/libs/components/icons/src/auto-icons/hover-frame/hover-frame.svg
new file mode 100644
index 000000000..14feeaf01
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/hover-frame/hover-frame.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122 12"><path d="M0 1.177v8.744h.96V6.378c0-.577.157-1.07.481-1.453.313-.385.709-.577 1.19-.577.516 0 .912.156 1.2.468.265.313.409.757.409 1.334V9.92h.96V6.006c0-.793-.191-1.406-.576-1.826-.384-.433-.949-.637-1.67-.637-.42 0-.792.096-1.128.289-.36.204-.649.504-.865.9V1.177H0Zm9.449 2.366c-.937 0-1.67.313-2.222.961-.529.613-.793 1.381-.793 2.318 0 .925.264 1.694.793 2.294.552.649 1.285.973 2.222.973.925 0 1.67-.324 2.234-.973.516-.6.78-1.369.78-2.294 0-.937-.264-1.705-.792-2.318-.553-.648-1.297-.96-2.222-.96Zm0 .805c.648 0 1.165.252 1.55.757.323.456.492 1.02.492 1.717 0 .673-.169 1.25-.493 1.706-.384.504-.9.757-1.55.757-.66 0-1.176-.253-1.537-.757-.336-.457-.492-1.021-.492-1.706 0-.696.156-1.26.492-1.717.36-.505.877-.757 1.538-.757Zm3.578-.637 2.342 6.21h.973l2.354-6.21H17.64L15.862 8.72l-1.778-5.009h-1.057Zm9.038-.168c-.901 0-1.61.325-2.138.973-.529.613-.781 1.381-.781 2.294 0 1.01.264 1.802.817 2.402.528.577 1.249.877 2.138.877.804 0 1.465-.24 1.982-.696.42-.385.696-.865.84-1.466h-.96c-.157.433-.361.757-.625.973-.313.252-.733.385-1.237.385-.589 0-1.057-.193-1.394-.577-.336-.384-.516-.925-.564-1.621h4.9c-.024-1.081-.264-1.934-.72-2.535-.505-.672-1.262-1.009-2.258-1.009Zm.024.805c1.177 0 1.837.66 1.957 1.994h-3.88c.06-.613.253-1.093.59-1.454.336-.36.78-.54 1.333-.54Zm6.806-.805c-.432 0-.805.132-1.129.397-.264.204-.48.492-.648.852v-1.08h-.95v6.21h.95V6.63c0-.576.156-1.069.492-1.477.324-.433.733-.637 1.213-.637.3 0 .613.036.925.132v-.96c-.228-.097-.517-.145-.853-.145Zm4.147 2.342a15.596 15.596 0 0 1-2.727 2.295l.264.9a18.082 18.082 0 0 0 2.463-2.174v4.18h.853V.18h-.853v5.705ZM31.288 1.37l-.817.264c.457.913.877 1.97 1.25 3.171l.756-.348a22.882 22.882 0 0 0-1.189-3.087ZM39.396.35l-.673.42c.625.708 1.13 1.357 1.49 1.958l.672-.48c-.348-.541-.84-1.178-1.49-1.899ZM38.062.143h-.852c0 .733-.024 1.802-.06 3.195h-2.463v.829h2.415c-.24 2.378-1.165 4.48-2.775 6.282l.577.648c1.369-1.465 2.318-3.29 2.822-5.465.529 2.186 1.55 4 3.063 5.43l.588-.65c-1.657-1.465-2.738-3.555-3.255-6.245h2.835v-.829h-2.93c.023-1.25.035-2.306.035-3.195ZM47.395 0a7.09 7.09 0 0 1-.276 1.37h-4.24v.828h3.94c-.217.468-.48.889-.817 1.25-.757.792-1.994 1.416-3.7 1.849l.337.793c1.441-.385 2.57-.865 3.363-1.454.576.457 1.153.973 1.73 1.55l.6-.6c-.649-.59-1.225-1.07-1.754-1.442.036-.048.072-.084.12-.132a5.889 5.889 0 0 0 1.07-1.814h.18c.6 1.634 2.222 2.919 4.888 3.856l.456-.745c-2.39-.745-3.88-1.778-4.468-3.111h3.844v-.829h-4.636c.096-.408.18-.829.228-1.285L47.395 0Zm-3.856 7.099a10.233 10.233 0 0 1-1.105 2.954l.745.469c.517-.913.925-1.994 1.213-3.243l-.853-.18Zm4.553-.433-.757.24c.384.613.733 1.322 1.069 2.126l.793-.348a12.54 12.54 0 0 0-1.105-2.018Zm3.591.252-.829.265c.565.852 1.081 1.837 1.55 2.966l.792-.348a18.192 18.192 0 0 0-1.513-2.883Zm-2.198 3.952c.456 0 .78-.108.997-.312.24-.24.408-.89.492-1.97l-.816-.264c-.048.828-.145 1.32-.289 1.489-.108.144-.288.216-.54.216H46.71c-.36 0-.528-.18-.528-.54V7.062h-.889V9.67c0 .793.373 1.201 1.141 1.201h3.051ZM63.31.613h-7.075V7.23h.865V1.453h5.333V7.22h.877V.613Zm-4.048 1.645v2.258c-.048 1.514-.396 2.75-1.045 3.7-.697.912-1.934 1.645-3.711 2.198l.468.732c1.79-.564 3.075-1.345 3.856-2.342.804-1.069 1.237-2.498 1.285-4.288V2.258h-.853Zm4.276 8.636c.408-.012.72-.108.937-.3.228-.24.396-.937.504-2.066l-.829-.264c-.047.936-.168 1.489-.336 1.645a.774.774 0 0 1-.504.168h-1.886c-.36 0-.529-.228-.529-.66V6.354h-.852v3.219c0 .877.372 1.321 1.14 1.321h2.355ZM67.778.336l-.6.565c.816.636 1.453 1.237 1.921 1.813l.589-.6c-.517-.589-1.153-1.177-1.91-1.778Zm-1.393 3.472v.828h1.67v4.757c0 .192-.097.372-.265.54l.336.769a17.828 17.828 0 0 0 2.402-1.886l-.24-.913c-.492.469-.96.877-1.393 1.237V3.807h-2.51Zm4.263 1.405v.84h.661c.336 1.046.949 1.982 1.862 2.823-.901.637-2.018 1.153-3.351 1.55l.48.732c1.406-.432 2.595-.997 3.556-1.717.84.648 1.897 1.213 3.146 1.717l.469-.744c-1.177-.433-2.174-.925-2.991-1.49a7.013 7.013 0 0 0 1.886-2.918v-.793h-5.718Zm1.478.84h3.387c-.384.89-.96 1.658-1.73 2.33-.792-.684-1.345-1.465-1.657-2.33ZM71.573.578V1.91c0 .949-.528 1.681-1.573 2.198l.576.66c1.226-.696 1.85-1.681 1.85-2.954v-.42h2.33V3.35c0 .709.36 1.07 1.105 1.07h1.322v-.794h-1.106c-.312 0-.468-.156-.468-.456V.577h-4.036ZM82.155 3.71v.865h3.255v6.57h.889v-6.57h3.087v-.865h-3.087V.096h-.889v3.615h-3.255ZM79.801.228l-.6.589c.864.648 1.56 1.273 2.065 1.861l.589-.6C81.302 1.453 80.618.84 79.8.228Zm-1.405 3.555v.83h1.765v4.792c0 .192-.096.36-.276.504l.336.78a16.68 16.68 0 0 0 2.403-1.92l-.217-.89c-.504.48-.985.89-1.417 1.25V3.782h-2.594Zm14.701-2.438c-.528 0-.937.144-1.213.445-.264.288-.396.684-.396 1.213v.708h-1.562v.805h1.562v5.405h.96V4.516h1.754v-.805H92.45v-.684c0-.3.06-.517.18-.649.12-.144.324-.204.588-.204h1.07v-.829h-1.19Zm4.721 2.198c-.432 0-.805.132-1.129.397-.264.204-.48.492-.648.852v-1.08h-.95v6.21h.95V6.63c0-.576.156-1.069.492-1.477.324-.433.733-.637 1.213-.637.3 0 .613.036.925.132v-.96c-.228-.097-.517-.145-.853-.145Zm4.363 0c-.745 0-1.333.144-1.79.433-.504.312-.829.804-.96 1.453l.948.072c.096-.396.301-.697.625-.889.288-.192.66-.276 1.117-.276 1.081 0 1.621.516 1.621 1.561v.325l-1.489.024c-.937.012-1.657.192-2.162.528-.576.36-.853.89-.853 1.598 0 .504.192.925.577 1.249.372.312.865.468 1.489.468.577 0 1.093-.132 1.55-.384.384-.216.708-.493.948-.829v1.045h.901V5.933c0-.72-.192-1.285-.552-1.693-.433-.469-1.081-.697-1.97-.697Zm1.561 3.4v.528c0 .48-.228.913-.672 1.285a2.35 2.35 0 0 1-1.562.577c-.384 0-.696-.096-.937-.277a.854.854 0 0 1-.348-.708c0-.901.697-1.358 2.09-1.382l1.429-.024Zm5.16-3.4c-.696 0-1.285.325-1.753.997v-.829h-.961v6.21h.961V6.138c0-.493.144-.913.432-1.25.288-.36.649-.528 1.093-.528.949 0 1.429.54 1.429 1.646V9.92h.961V6.03c0-.505.132-.901.421-1.214.264-.312.612-.456 1.021-.456.528 0 .912.132 1.153.42.228.265.348.673.348 1.226V9.92h.961V5.85c0-.708-.204-1.273-.589-1.693-.408-.409-.925-.613-1.573-.613-.433 0-.793.096-1.093.289-.336.18-.625.48-.865.888-.348-.792-.997-1.177-1.946-1.177Zm10.119 0c-.901 0-1.609.325-2.138.973-.528.613-.78 1.381-.78 2.294 0 1.01.264 1.802.816 2.402.529.577 1.249.877 2.138.877.805 0 1.466-.24 1.982-.696.421-.385.697-.865.841-1.466h-.961c-.156.433-.36.757-.625.973-.312.252-.732.385-1.237.385-.588 0-1.057-.193-1.393-.577-.336-.384-.516-.925-.565-1.621H122c-.024-1.081-.264-1.934-.721-2.535-.504-.672-1.261-1.009-2.258-1.009Zm.024.805c1.177 0 1.838.66 1.958 1.994h-3.879c.06-.613.252-1.093.588-1.454.336-.36.781-.54 1.333-.54Z"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/hover-frame/hover-frame.tsx b/libs/components/icons/src/auto-icons/hover-frame/hover-frame.tsx
new file mode 100644
index 000000000..2e80468f9
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/hover-frame/hover-frame.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface HoverFrameIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const HoverFrameIcon: FC<HoverFrameIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path d="M0 1.177v8.744h.96V6.378c0-.577.157-1.07.481-1.453.313-.385.709-.577 1.19-.577.516 0 .912.156 1.2.468.265.313.409.757.409 1.334V9.92h.96V6.006c0-.793-.191-1.406-.576-1.826-.384-.433-.949-.637-1.67-.637-.42 0-.792.096-1.128.289-.36.204-.649.504-.865.9V1.177H0Zm9.449 2.366c-.937 0-1.67.313-2.222.961-.529.613-.793 1.381-.793 2.318 0 .925.264 1.694.793 2.294.552.649 1.285.973 2.222.973.925 0 1.67-.324 2.234-.973.516-.6.78-1.369.78-2.294 0-.937-.264-1.705-.792-2.318-.553-.648-1.297-.96-2.222-.96Zm0 .805c.648 0 1.165.252 1.55.757.323.456.492 1.02.492 1.717 0 .673-.169 1.25-.493 1.706-.384.504-.9.757-1.55.757-.66 0-1.176-.253-1.537-.757-.336-.457-.492-1.021-.492-1.706 0-.696.156-1.26.492-1.717.36-.505.877-.757 1.538-.757Zm3.578-.637 2.342 6.21h.973l2.354-6.21H17.64L15.862 8.72l-1.778-5.009h-1.057Zm9.038-.168c-.901 0-1.61.325-2.138.973-.529.613-.781 1.381-.781 2.294 0 1.01.264 1.802.817 2.402.528.577 1.249.877 2.138.877.804 0 1.465-.24 1.982-.696.42-.385.696-.865.84-1.466h-.96c-.157.433-.361.757-.625.973-.313.252-.733.385-1.237.385-.589 0-1.057-.193-1.394-.577-.336-.384-.516-.925-.564-1.621h4.9c-.024-1.081-.264-1.934-.72-2.535-.505-.672-1.262-1.009-2.258-1.009Zm.024.805c1.177 0 1.837.66 1.957 1.994h-3.88c.06-.613.253-1.093.59-1.454.336-.36.78-.54 1.333-.54Zm6.806-.805c-.432 0-.805.132-1.129.397-.264.204-.48.492-.648.852v-1.08h-.95v6.21h.95V6.63c0-.576.156-1.069.492-1.477.324-.433.733-.637 1.213-.637.3 0 .613.036.925.132v-.96c-.228-.097-.517-.145-.853-.145Zm4.147 2.342a15.596 15.596 0 0 1-2.727 2.295l.264.9a18.082 18.082 0 0 0 2.463-2.174v4.18h.853V.18h-.853v5.705ZM31.288 1.37l-.817.264c.457.913.877 1.97 1.25 3.171l.756-.348a22.882 22.882 0 0 0-1.189-3.087ZM39.396.35l-.673.42c.625.708 1.13 1.357 1.49 1.958l.672-.48c-.348-.541-.84-1.178-1.49-1.899ZM38.062.143h-.852c0 .733-.024 1.802-.06 3.195h-2.463v.829h2.415c-.24 2.378-1.165 4.48-2.775 6.282l.577.648c1.369-1.465 2.318-3.29 2.822-5.465.529 2.186 1.55 4 3.063 5.43l.588-.65c-1.657-1.465-2.738-3.555-3.255-6.245h2.835v-.829h-2.93c.023-1.25.035-2.306.035-3.195ZM47.395 0a7.09 7.09 0 0 1-.276 1.37h-4.24v.828h3.94c-.217.468-.48.889-.817 1.25-.757.792-1.994 1.416-3.7 1.849l.337.793c1.441-.385 2.57-.865 3.363-1.454.576.457 1.153.973 1.73 1.55l.6-.6c-.649-.59-1.225-1.07-1.754-1.442.036-.048.072-.084.12-.132a5.889 5.889 0 0 0 1.07-1.814h.18c.6 1.634 2.222 2.919 4.888 3.856l.456-.745c-2.39-.745-3.88-1.778-4.468-3.111h3.844v-.829h-4.636c.096-.408.18-.829.228-1.285L47.395 0Zm-3.856 7.099a10.233 10.233 0 0 1-1.105 2.954l.745.469c.517-.913.925-1.994 1.213-3.243l-.853-.18Zm4.553-.433-.757.24c.384.613.733 1.322 1.069 2.126l.793-.348a12.54 12.54 0 0 0-1.105-2.018Zm3.591.252-.829.265c.565.852 1.081 1.837 1.55 2.966l.792-.348a18.192 18.192 0 0 0-1.513-2.883Zm-2.198 3.952c.456 0 .78-.108.997-.312.24-.24.408-.89.492-1.97l-.816-.264c-.048.828-.145 1.32-.289 1.489-.108.144-.288.216-.54.216H46.71c-.36 0-.528-.18-.528-.54V7.062h-.889V9.67c0 .793.373 1.201 1.141 1.201h3.051ZM63.31.613h-7.075V7.23h.865V1.453h5.333V7.22h.877V.613Zm-4.048 1.645v2.258c-.048 1.514-.396 2.75-1.045 3.7-.697.912-1.934 1.645-3.711 2.198l.468.732c1.79-.564 3.075-1.345 3.856-2.342.804-1.069 1.237-2.498 1.285-4.288V2.258h-.853Zm4.276 8.636c.408-.012.72-.108.937-.3.228-.24.396-.937.504-2.066l-.829-.264c-.047.936-.168 1.489-.336 1.645a.774.774 0 0 1-.504.168h-1.886c-.36 0-.529-.228-.529-.66V6.354h-.852v3.219c0 .877.372 1.321 1.14 1.321h2.355ZM67.778.336l-.6.565c.816.636 1.453 1.237 1.921 1.813l.589-.6c-.517-.589-1.153-1.177-1.91-1.778Zm-1.393 3.472v.828h1.67v4.757c0 .192-.097.372-.265.54l.336.769a17.828 17.828 0 0 0 2.402-1.886l-.24-.913c-.492.469-.96.877-1.393 1.237V3.807h-2.51Zm4.263 1.405v.84h.661c.336 1.046.949 1.982 1.862 2.823-.901.637-2.018 1.153-3.351 1.55l.48.732c1.406-.432 2.595-.997 3.556-1.717.84.648 1.897 1.213 3.146 1.717l.469-.744c-1.177-.433-2.174-.925-2.991-1.49a7.013 7.013 0 0 0 1.886-2.918v-.793h-5.718Zm1.478.84h3.387c-.384.89-.96 1.658-1.73 2.33-.792-.684-1.345-1.465-1.657-2.33ZM71.573.578V1.91c0 .949-.528 1.681-1.573 2.198l.576.66c1.226-.696 1.85-1.681 1.85-2.954v-.42h2.33V3.35c0 .709.36 1.07 1.105 1.07h1.322v-.794h-1.106c-.312 0-.468-.156-.468-.456V.577h-4.036ZM82.155 3.71v.865h3.255v6.57h.889v-6.57h3.087v-.865h-3.087V.096h-.889v3.615h-3.255ZM79.801.228l-.6.589c.864.648 1.56 1.273 2.065 1.861l.589-.6C81.302 1.453 80.618.84 79.8.228Zm-1.405 3.555v.83h1.765v4.792c0 .192-.096.36-.276.504l.336.78a16.68 16.68 0 0 0 2.403-1.92l-.217-.89c-.504.48-.985.89-1.417 1.25V3.782h-2.594Zm14.701-2.438c-.528 0-.937.144-1.213.445-.264.288-.396.684-.396 1.213v.708h-1.562v.805h1.562v5.405h.96V4.516h1.754v-.805H92.45v-.684c0-.3.06-.517.18-.649.12-.144.324-.204.588-.204h1.07v-.829h-1.19Zm4.721 2.198c-.432 0-.805.132-1.129.397-.264.204-.48.492-.648.852v-1.08h-.95v6.21h.95V6.63c0-.576.156-1.069.492-1.477.324-.433.733-.637 1.213-.637.3 0 .613.036.925.132v-.96c-.228-.097-.517-.145-.853-.145Zm4.363 0c-.745 0-1.333.144-1.79.433-.504.312-.829.804-.96 1.453l.948.072c.096-.396.301-.697.625-.889.288-.192.66-.276 1.117-.276 1.081 0 1.621.516 1.621 1.561v.325l-1.489.024c-.937.012-1.657.192-2.162.528-.576.36-.853.89-.853 1.598 0 .504.192.925.577 1.249.372.312.865.468 1.489.468.577 0 1.093-.132 1.55-.384.384-.216.708-.493.948-.829v1.045h.901V5.933c0-.72-.192-1.285-.552-1.693-.433-.469-1.081-.697-1.97-.697Zm1.561 3.4v.528c0 .48-.228.913-.672 1.285a2.35 2.35 0 0 1-1.562.577c-.384 0-.696-.096-.937-.277a.854.854 0 0 1-.348-.708c0-.901.697-1.358 2.09-1.382l1.429-.024Zm5.16-3.4c-.696 0-1.285.325-1.753.997v-.829h-.961v6.21h.961V6.138c0-.493.144-.913.432-1.25.288-.36.649-.528 1.093-.528.949 0 1.429.54 1.429 1.646V9.92h.961V6.03c0-.505.132-.901.421-1.214.264-.312.612-.456 1.021-.456.528 0 .912.132 1.153.42.228.265.348.673.348 1.226V9.92h.961V5.85c0-.708-.204-1.273-.589-1.693-.408-.409-.925-.613-1.573-.613-.433 0-.793.096-1.093.289-.336.18-.625.48-.865.888-.348-.792-.997-1.177-1.946-1.177Zm10.119 0c-.901 0-1.609.325-2.138.973-.528.613-.78 1.381-.78 2.294 0 1.01.264 1.802.816 2.402.529.577 1.249.877 2.138.877.805 0 1.466-.24 1.982-.696.421-.385.697-.865.841-1.466h-.961c-.156.433-.36.757-.625.973-.312.252-.732.385-1.237.385-.588 0-1.057-.193-1.393-.577-.336-.384-.516-.925-.565-1.621H122c-.024-1.081-.264-1.934-.721-2.535-.504-.672-1.261-1.009-2.258-1.009Zm.024.805c1.177 0 1.838.66 1.958 1.994h-3.879c.06-.613.252-1.093.588-1.454.336-.36.781-.54 1.333-.54Z" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/image/image.svg b/libs/components/icons/src/auto-icons/image/image.svg
new file mode 100644
index 000000000..00cfb6e4c
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/image/image.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M19 5.6H5A1.4 1.4 0 0 0 3.6 7v10A1.4 1.4 0 0 0 5 18.4h14a1.4 1.4 0 0 0 1.4-1.4V7A1.4 1.4 0 0 0 19 5.6ZM5 4a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H5Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="m16.25 8.057 5.184 3.348-.868 1.344-4.345-2.806-12.807 7.742-.828-1.37L16.25 8.057Z" clip-rule="evenodd"/><circle cx="6.5" cy="9.5" r="1.5"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/image/image.tsx b/libs/components/icons/src/auto-icons/image/image.tsx
new file mode 100644
index 000000000..23f79a4d0
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/image/image.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface ImageIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const ImageIcon: FC<ImageIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M19 5.6H5A1.4 1.4 0 0 0 3.6 7v10A1.4 1.4 0 0 0 5 18.4h14a1.4 1.4 0 0 0 1.4-1.4V7A1.4 1.4 0 0 0 19 5.6ZM5 4a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H5Z" clipRule="evenodd" /><path fillRule="evenodd" d="m16.25 8.057 5.184 3.348-.868 1.344-4.345-2.806-12.807 7.742-.828-1.37L16.25 8.057Z" clipRule="evenodd" /><circle cx={6.5} cy={9.5} r={1.5} />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/indent-right/indent-right.svg b/libs/components/icons/src/auto-icons/indent-right/indent-right.svg
new file mode 100644
index 000000000..fdfe908a0
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/indent-right/indent-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M15.869 12 7.434 3.566l1.132-1.132L18.13 12l-9.565 9.566-1.132-1.132L15.87 12Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/indent-right/indent-right.tsx b/libs/components/icons/src/auto-icons/indent-right/indent-right.tsx
new file mode 100644
index 000000000..a7818b39e
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/indent-right/indent-right.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface IndentRightIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const IndentRightIcon: FC<IndentRightIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M15.869 12 7.434 3.566l1.132-1.132L18.13 12l-9.565 9.566-1.132-1.132L15.87 12Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/index.ts b/libs/components/icons/src/auto-icons/index.ts
new file mode 100644
index 000000000..a28171b51
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/index.ts
@@ -0,0 +1,127 @@
+export const timestamp = 1658396276897;
+export * from './image/image';
+export * from './format-clear/format-clear';
+export * from './backward-undo/backward-undo';
+export * from './forward-redo/forward-redo';
+export * from './pages/pages';
+export * from './duplicate/duplicate';
+export * from './delete-cash-bin/delete-cash-bin';
+export * from './turn-into/turn-into';
+export * from './move-to/move-to';
+export * from './file/file';
+export * from './to-do/to-do';
+export * from './bullet/bullet';
+export * from './number/number';
+export * from './heading-one/heading-one';
+export * from './heading-two/heading-two';
+export * from './heading-three/heading-three';
+export * from './code-block/code-block';
+export * from './quote/quote';
+export * from './divider/divider';
+export * from './backlinks/backlinks';
+export * from './callout/callout';
+export * from './text-font/text-font';
+export * from './format-bold-emphasis/format-bold-emphasis';
+export * from './format-italic/format-italic';
+export * from './format-strikethrough/format-strikethrough';
+export * from './format-color-text/format-color-text';
+export * from './format-background/format-background';
+export * from './align-left/align-left';
+export * from './align-center/align-center';
+export * from './align-right/align-right';
+export * from './align-justify/align-justify';
+export * from './arrow-drop-down/arrow-drop-down';
+export * from './arrow-right/arrow-right';
+export * from './more/more';
+export * from './date/date';
+export * from './collaborator/collaborator';
+export * from './link/link';
+export * from './code/code';
+export * from './frame/frame';
+export * from './select/select';
+export * from './pen/pen';
+export * from './connector/connector';
+export * from './hand-tool/hand-tool';
+export * from './rectangle/rectangle';
+export * from './ellipse/ellipse';
+export * from './triangle/triangle';
+export * from './star/star';
+export * from './arrow/arrow';
+export * from './polygon/polygon';
+export * from './stamp/stamp';
+export * from './pencil-duotone/pencil-duotone';
+export * from './highlighter-duotone/highlighter-duotone';
+export * from './laser-pen-duotone/laser-pen-duotone';
+export * from './conector-line/conector-line';
+export * from './conector-arrow/conector-arrow';
+export * from './figma/figma';
+export * from './youtube/youtube';
+export * from './rectangle-93/rectangle-93';
+export * from './single-select/single-select';
+export * from './blocks/blocks';
+export * from './web-app/web-app';
+export * from './done/done';
+export * from './page-duallink/page-duallink';
+export * from './card/card';
+export * from './todo-list/todo-list';
+export * from './kan-ban/kan-ban';
+export * from './table/table';
+export * from './add-view/add-view';
+export * from './filter/filter';
+export * from './sort/sort';
+export * from './full-screen/full-screen';
+export * from './tag-add-duotone/tag-add-duotone';
+export * from './sql/sql';
+export * from './status/status';
+export * from './tags/tags';
+export * from './multi-select/multi-select';
+export * from './shape/shape';
+export * from './edit/edit';
+export * from './embed/embed';
+export * from './indent-right/indent-right';
+export * from './comment/comment';
+export * from './at/at';
+export * from './reaction/reaction';
+export * from './side-bar-view/side-bar-view';
+export * from './side-bar-view-close/side-bar-view-close';
+export * from './border-color-none/border-color-none';
+export * from './shape-color-none/shape-color-none';
+export * from './solid-line/solid-line';
+export * from './line-none/line-none';
+export * from './dash-line/dash-line';
+export * from './brush/brush';
+export * from './point-line/point-line';
+export * from './border-color-duotone/border-color-duotone';
+export * from './shape-color-duotone/shape-color-duotone';
+export * from './group/group';
+export * from './ungroup/ungroup';
+export * from './information/information';
+export * from './email/email';
+export * from './phone/phone';
+export * from './location/location';
+export * from './text/text';
+export * from './logo/logo';
+export * from './search/search';
+export * from './log-out/log-out';
+export * from './doc-view/doc-view';
+export * from './board-view/board-view';
+export * from './help-center/help-center';
+export * from './handle-parent/handle-parent';
+export * from './handle-child/handle-child';
+export * from './switch-on-duotone/switch-on-duotone';
+export * from './switch-off-duotone/switch-off-duotone';
+export * from './select-box-select/select-box-select';
+export * from './select-box-unselect/select-box-unselect';
+export * from './check-box-uncheck/check-box-uncheck';
+export * from './check-box-check/check-box-check';
+export * from './bulleted-list-1/bulleted-list-1';
+export * from './bulleted-list-2/bulleted-list-2';
+export * from './bulleted-list-3/bulleted-list-3';
+export * from './bulleted-list-4/bulleted-list-4';
+export * from './hover-frame/hover-frame';
+export * from './delete-small-tag/delete-small-tag';
+export * from './settings/settings';
+export * from './eraser/eraser';
+export * from './group-by/group-by';
+export * from './layout/layout';
+
diff --git a/libs/components/icons/src/auto-icons/information/information.svg b/libs/components/icons/src/auto-icons/information/information.svg
new file mode 100644
index 000000000..ea9788989
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/information/information.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 20.4a8.4 8.4 0 1 0 0-16.8 8.4 8.4 0 0 0 0 16.8Zm0 1.6c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M11.2 18v-7h1.6v7h-1.6Z" clip-rule="evenodd"/><circle cx="12" cy="8" r="1.5"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/information/information.tsx b/libs/components/icons/src/auto-icons/information/information.tsx
new file mode 100644
index 000000000..73bd08109
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/information/information.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface InformationIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const InformationIcon: FC<InformationIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M12 20.4a8.4 8.4 0 1 0 0-16.8 8.4 8.4 0 0 0 0 16.8Zm0 1.6c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" clipRule="evenodd" /><path fillRule="evenodd" d="M11.2 18v-7h1.6v7h-1.6Z" clipRule="evenodd" /><circle cx={12} cy={8} r={1.5} />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/kan-ban/kan-ban.svg b/libs/components/icons/src/auto-icons/kan-ban/kan-ban.svg
new file mode 100644
index 000000000..129217058
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/kan-ban/kan-ban.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21 3.8a.8.8 0 0 1-.8.8h-6.4a.8.8 0 0 1 0-1.6h6.4a.8.8 0 0 1 .8.8ZM11 3.8a.8.8 0 0 1-.8.8H3.8a.8.8 0 0 1 0-1.6h6.4a.8.8 0 0 1 .8.8ZM9 8.6H5a.4.4 0 0 0-.4.4v10c0 .22.18.4.4.4h4a.4.4 0 0 0 .4-.4V9a.4.4 0 0 0-.4-.4ZM5 7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H5ZM19 8.6h-4a.4.4 0 0 0-.4.4v5c0 .22.18.4.4.4h4a.4.4 0 0 0 .4-.4V9a.4.4 0 0 0-.4-.4ZM15 7a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-4Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/kan-ban/kan-ban.tsx b/libs/components/icons/src/auto-icons/kan-ban/kan-ban.tsx
new file mode 100644
index 000000000..b3b351ee0
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/kan-ban/kan-ban.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface KanBanIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const KanBanIcon: FC<KanBanIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M21 3.8a.8.8 0 0 1-.8.8h-6.4a.8.8 0 0 1 0-1.6h6.4a.8.8 0 0 1 .8.8ZM11 3.8a.8.8 0 0 1-.8.8H3.8a.8.8 0 0 1 0-1.6h6.4a.8.8 0 0 1 .8.8ZM9 8.6H5a.4.4 0 0 0-.4.4v10c0 .22.18.4.4.4h4a.4.4 0 0 0 .4-.4V9a.4.4 0 0 0-.4-.4ZM5 7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H5ZM19 8.6h-4a.4.4 0 0 0-.4.4v5c0 .22.18.4.4.4h4a.4.4 0 0 0 .4-.4V9a.4.4 0 0 0-.4-.4ZM15 7a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-4Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/laser-pen-duotone/laser-pen-duotone.svg b/libs/components/icons/src/auto-icons/laser-pen-duotone/laser-pen-duotone.svg
new file mode 100644
index 000000000..50664b998
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/laser-pen-duotone/laser-pen-duotone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#3A4C5C" fill-rule="evenodd" d="m7.654 15.486.203-.61 9.892-9.892a.895.895 0 1 1 1.267 1.267l-9.893 9.892-.609.203-.86-.86Zm-1.158-1.683L16.532 3.767a2.618 2.618 0 0 1 3.701 3.701L10.197 17.504a.86.86 0 0 1-.336.208l-3.726 1.242a.861.861 0 0 1-1.09-1.089l1.243-3.726a.861.861 0 0 1 .208-.336Z" clip-rule="evenodd"/><circle cx="3.5" cy="20.5" r="1.5" fill="#FF9F65"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/laser-pen-duotone/laser-pen-duotone.tsx b/libs/components/icons/src/auto-icons/laser-pen-duotone/laser-pen-duotone.tsx
new file mode 100644
index 000000000..b7d924edb
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/laser-pen-duotone/laser-pen-duotone.tsx
@@ -0,0 +1,24 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface LaserPenDuotoneIconProps extends Omit<SvgIconProps, 'color'> {
+    color0?: string
+    primaryColor?: string
+    color1?: string
+    secondaryColor?: string
+}
+
+export const LaserPenDuotoneIcon: FC<LaserPenDuotoneIconProps> = ({ color0, primaryColor, color1, secondaryColor, style, ...props}) => {
+    const propsStyles = {"--color-0": color0 || primaryColor, "--color-1": color1 || secondaryColor};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path style={{fill: 'var(--color-0)'}} fillRule="evenodd" d="m7.654 15.486.203-.61 9.892-9.892a.895.895 0 1 1 1.267 1.267l-9.893 9.892-.609.203-.86-.86Zm-1.158-1.683L16.532 3.767a2.618 2.618 0 0 1 3.701 3.701L10.197 17.504a.86.86 0 0 1-.336.208l-3.726 1.242a.861.861 0 0 1-1.09-1.089l1.243-3.726a.861.861 0 0 1 .208-.336Z" clipRule="evenodd" /><circle cx={3.5} cy={20.5} r={1.5} style={{fill: 'var(--color-1)'}} />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/layout/layout.svg b/libs/components/icons/src/auto-icons/layout/layout.svg
new file mode 100644
index 000000000..4a7c9bc9b
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/layout/layout.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18 4.6H6A1.4 1.4 0 0 0 4.6 6v12A1.4 1.4 0 0 0 6 19.4h12a1.4 1.4 0 0 0 1.4-1.4V6A1.4 1.4 0 0 0 18 4.6ZM6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M6 6h5v1.6H6V6ZM6 9h5v1.6H6V9ZM6 12h5v1.6H6V12Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/layout/layout.tsx b/libs/components/icons/src/auto-icons/layout/layout.tsx
new file mode 100644
index 000000000..9a03e4d6e
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/layout/layout.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface LayoutIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const LayoutIcon: FC<LayoutIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18 4.6H6A1.4 1.4 0 0 0 4.6 6v12A1.4 1.4 0 0 0 6 19.4h12a1.4 1.4 0 0 0 1.4-1.4V6A1.4 1.4 0 0 0 18 4.6ZM6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Z" clipRule="evenodd" /><path fillRule="evenodd" d="M6 6h5v1.6H6V6ZM6 9h5v1.6H6V9ZM6 12h5v1.6H6V12Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/line-none/line-none.svg b/libs/components/icons/src/auto-icons/line-none/line-none.svg
new file mode 100644
index 000000000..ab3770e66
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/line-none/line-none.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18.6 12a6.6 6.6 0 0 1-10.69 5.18l9.27-9.27A6.572 6.572 0 0 1 18.6 12ZM6.91 16.201 16.2 6.91a6.6 6.6 0 0 0-9.292 9.292ZM20 12a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/line-none/line-none.tsx b/libs/components/icons/src/auto-icons/line-none/line-none.tsx
new file mode 100644
index 000000000..862879f12
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/line-none/line-none.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface LineNoneIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const LineNoneIcon: FC<LineNoneIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18.6 12a6.6 6.6 0 0 1-10.69 5.18l9.27-9.27A6.572 6.572 0 0 1 18.6 12ZM6.91 16.201 16.2 6.91a6.6 6.6 0 0 0-9.292 9.292ZM20 12a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/link/link.svg b/libs/components/icons/src/auto-icons/link/link.svg
new file mode 100644
index 000000000..d94171c47
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/link/link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="m17.225 13.642 2.588-2.588a4.5 4.5 0 0 0 0-6.364l-.511-.511a4.5 4.5 0 0 0-6.364 0l-3.261 3.26a4.5 4.5 0 0 0 0 6.365l.51.51a4.5 4.5 0 0 0 1.055.785l.808-.808c.131-.131.229-.283.292-.446a2.89 2.89 0 0 1-1.023-.662l-.51-.51a2.9 2.9 0 0 1 0-4.102l3.26-3.26a2.9 2.9 0 0 1 4.101 0l.511.51a2.9 2.9 0 0 1 0 4.101l-1.704 1.705c.195.655.278 1.337.248 2.014Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="m6.765 10.348-2.588 2.588a4.5 4.5 0 0 0 0 6.364l.511.511a4.5 4.5 0 0 0 6.364 0l3.261-3.26a4.5 4.5 0 0 0 0-6.365l-.51-.51a4.498 4.498 0 0 0-1.055-.785l-.808.808a1.295 1.295 0 0 0-.292.446c.373.14.723.361 1.023.662l.51.51a2.9 2.9 0 0 1 0 4.102l-3.26 3.26a2.9 2.9 0 0 1-4.101 0l-.511-.51a2.9 2.9 0 0 1 0-4.101l1.704-1.705a6.124 6.124 0 0 1-.248-2.014Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/link/link.tsx b/libs/components/icons/src/auto-icons/link/link.tsx
new file mode 100644
index 000000000..9828e5942
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/link/link.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface LinkIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const LinkIcon: FC<LinkIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="m17.225 13.642 2.588-2.588a4.5 4.5 0 0 0 0-6.364l-.511-.511a4.5 4.5 0 0 0-6.364 0l-3.261 3.26a4.5 4.5 0 0 0 0 6.365l.51.51a4.5 4.5 0 0 0 1.055.785l.808-.808c.131-.131.229-.283.292-.446a2.89 2.89 0 0 1-1.023-.662l-.51-.51a2.9 2.9 0 0 1 0-4.102l3.26-3.26a2.9 2.9 0 0 1 4.101 0l.511.51a2.9 2.9 0 0 1 0 4.101l-1.704 1.705c.195.655.278 1.337.248 2.014Z" clipRule="evenodd" /><path fillRule="evenodd" d="m6.765 10.348-2.588 2.588a4.5 4.5 0 0 0 0 6.364l.511.511a4.5 4.5 0 0 0 6.364 0l3.261-3.26a4.5 4.5 0 0 0 0-6.365l-.51-.51a4.498 4.498 0 0 0-1.055-.785l-.808.808a1.295 1.295 0 0 0-.292.446c.373.14.723.361 1.023.662l.51.51a2.9 2.9 0 0 1 0 4.102l-3.26 3.26a2.9 2.9 0 0 1-4.101 0l-.511-.51a2.9 2.9 0 0 1 0-4.101l1.704-1.705a6.124 6.124 0 0 1-.248-2.014Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/location/location.svg b/libs/components/icons/src/auto-icons/location/location.svg
new file mode 100644
index 000000000..97ec4f8be
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/location/location.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M4.856 9.3c0-3.927 3.204-7.1 7.145-7.1 3.94 0 7.143 3.173 7.143 7.1 0 1.18-.579 2.674-1.299 4.112-.946 1.893-2.253 3.915-3.312 5.451a73.958 73.958 0 0 1-1.86 2.574l-.028.038-.01.012v.002L12 21l-.634.489-.01-.014-.03-.038a73.97 73.97 0 0 1-1.86-2.573c-1.059-1.537-2.366-3.56-3.312-5.452-.718-1.436-1.299-2.933-1.299-4.113ZM12.001 21l-.634.489.634.82.633-.82-.633-.489Zm0-1.336c.322-.44.745-1.028 1.215-1.709 1.045-1.515 2.302-3.465 3.198-5.258.716-1.43 1.13-2.628 1.13-3.398C17.544 6.268 15.067 3.8 12 3.8c-3.068 0-5.545 2.468-5.545 5.5 0 .769.415 1.967 1.13 3.397.896 1.793 2.154 3.743 3.199 5.258.47.68.893 1.269 1.216 1.709Zm0-12.239a1.919 1.919 0 1 0-.002 3.837A1.919 1.919 0 0 0 12 7.425ZM8.48 9.344a3.519 3.519 0 1 1 7.037 0 3.519 3.519 0 0 1-7.037 0Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/location/location.tsx b/libs/components/icons/src/auto-icons/location/location.tsx
new file mode 100644
index 000000000..7988b3c38
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/location/location.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface LocationIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const LocationIcon: FC<LocationIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M4.856 9.3c0-3.927 3.204-7.1 7.145-7.1 3.94 0 7.143 3.173 7.143 7.1 0 1.18-.579 2.674-1.299 4.112-.946 1.893-2.253 3.915-3.312 5.451a73.958 73.958 0 0 1-1.86 2.574l-.028.038-.01.012v.002L12 21l-.634.489-.01-.014-.03-.038a73.97 73.97 0 0 1-1.86-2.573c-1.059-1.537-2.366-3.56-3.312-5.452-.718-1.436-1.299-2.933-1.299-4.113ZM12.001 21l-.634.489.634.82.633-.82-.633-.489Zm0-1.336c.322-.44.745-1.028 1.215-1.709 1.045-1.515 2.302-3.465 3.198-5.258.716-1.43 1.13-2.628 1.13-3.398C17.544 6.268 15.067 3.8 12 3.8c-3.068 0-5.545 2.468-5.545 5.5 0 .769.415 1.967 1.13 3.397.896 1.793 2.154 3.743 3.199 5.258.47.68.893 1.269 1.216 1.709Zm0-12.239a1.919 1.919 0 1 0-.002 3.837A1.919 1.919 0 0 0 12 7.425ZM8.48 9.344a3.519 3.519 0 1 1 7.037 0 3.519 3.519 0 0 1-7.037 0Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/log-out/log-out.svg b/libs/components/icons/src/auto-icons/log-out/log-out.svg
new file mode 100644
index 000000000..b50cd5ab2
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/log-out/log-out.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="m16.434 8.566 1.132-1.132L22.13 12l-4.565 4.566-1.132-1.132L19.07 12.8H12v-1.6h7.069l-2.635-2.634Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M17 3.6H7A1.4 1.4 0 0 0 5.6 5v14A1.4 1.4 0 0 0 7 20.4h10a1.4 1.4 0 0 0 1.4-1.4v-1H20v1a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v1h-1.6V5A1.4 1.4 0 0 0 17 3.6Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/log-out/log-out.tsx b/libs/components/icons/src/auto-icons/log-out/log-out.tsx
new file mode 100644
index 000000000..a7844fe2c
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/log-out/log-out.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface LogOutIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const LogOutIcon: FC<LogOutIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="m16.434 8.566 1.132-1.132L22.13 12l-4.565 4.566-1.132-1.132L19.07 12.8H12v-1.6h7.069l-2.635-2.634Z" clipRule="evenodd" /><path fillRule="evenodd" d="M17 3.6H7A1.4 1.4 0 0 0 5.6 5v14A1.4 1.4 0 0 0 7 20.4h10a1.4 1.4 0 0 0 1.4-1.4v-1H20v1a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v1h-1.6V5A1.4 1.4 0 0 0 17 3.6Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/logo/logo.svg b/libs/components/icons/src/auto-icons/logo/logo.svg
new file mode 100644
index 000000000..8418191f8
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/logo/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M10.71 1 3 23h4.516L12.42 7.784 17.327 23h4.5l-7.71-22H10.71Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/logo/logo.tsx b/libs/components/icons/src/auto-icons/logo/logo.tsx
new file mode 100644
index 000000000..b402a6032
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/logo/logo.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface LogoIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const LogoIcon: FC<LogoIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M10.71 1 3 23h4.516L12.42 7.784 17.327 23h4.5l-7.71-22H10.71Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/more/more.svg b/libs/components/icons/src/auto-icons/more/more.svg
new file mode 100644
index 000000000..5c2237a50
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/more/more.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="5.5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="18.5" r="1.5"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/more/more.tsx b/libs/components/icons/src/auto-icons/more/more.tsx
new file mode 100644
index 000000000..643779bb8
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/more/more.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface MoreIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const MoreIcon: FC<MoreIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <circle cx={12} cy={5.5} r={1.5} /><circle cx={12} cy={12} r={1.5} /><circle cx={12} cy={18.5} r={1.5} />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/move-to/move-to.svg b/libs/components/icons/src/auto-icons/move-to/move-to.svg
new file mode 100644
index 000000000..0ea1ee59e
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/move-to/move-to.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M10.069 11.2 7.434 8.566l1.132-1.132L13.13 12l-4.565 4.566-1.132-1.132L10.07 12.8H2v-1.6h8.069Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M7 4.6h12A1.4 1.4 0 0 1 20.4 6v12a1.4 1.4 0 0 1-1.4 1.4H7A1.4 1.4 0 0 1 5.6 18v-3H4v3a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v3h1.6V6A1.4 1.4 0 0 1 7 4.6Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/move-to/move-to.tsx b/libs/components/icons/src/auto-icons/move-to/move-to.tsx
new file mode 100644
index 000000000..a1a5f9b44
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/move-to/move-to.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface MoveToIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const MoveToIcon: FC<MoveToIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M10.069 11.2 7.434 8.566l1.132-1.132L13.13 12l-4.565 4.566-1.132-1.132L10.07 12.8H2v-1.6h8.069Z" clipRule="evenodd" /><path fillRule="evenodd" d="M7 4.6h12A1.4 1.4 0 0 1 20.4 6v12a1.4 1.4 0 0 1-1.4 1.4H7A1.4 1.4 0 0 1 5.6 18v-3H4v3a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v3h1.6V6A1.4 1.4 0 0 1 7 4.6Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/multi-select/multi-select.svg b/libs/components/icons/src/auto-icons/multi-select/multi-select.svg
new file mode 100644
index 000000000..a85cacc6a
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/multi-select/multi-select.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M19 4.6H8a.4.4 0 0 0-.4.4v11c0 .22.18.4.4.4h11a.4.4 0 0 0 .4-.4V5a.4.4 0 0 0-.4-.4ZM8 3a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H8Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M4.6 8v11c0 .22.18.4.4.4h11V21H5a2 2 0 0 1-2-2V8h1.6Z" clip-rule="evenodd"/><path d="M13.895 12.34a.568.568 0 0 1-.79 0l-2.993-3.149c-.265-.278-.03-.691.395-.691h5.986c.424 0 .66.413.395.691l-2.993 3.15Z"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/multi-select/multi-select.tsx b/libs/components/icons/src/auto-icons/multi-select/multi-select.tsx
new file mode 100644
index 000000000..a56de13a0
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/multi-select/multi-select.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface MultiSelectIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const MultiSelectIcon: FC<MultiSelectIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M19 4.6H8a.4.4 0 0 0-.4.4v11c0 .22.18.4.4.4h11a.4.4 0 0 0 .4-.4V5a.4.4 0 0 0-.4-.4ZM8 3a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H8Z" clipRule="evenodd" /><path fillRule="evenodd" d="M4.6 8v11c0 .22.18.4.4.4h11V21H5a2 2 0 0 1-2-2V8h1.6Z" clipRule="evenodd" /><path d="M13.895 12.34a.568.568 0 0 1-.79 0l-2.993-3.149c-.265-.278-.03-.691.395-.691h5.986c.424 0 .66.413.395.691l-2.993 3.15Z" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/number/number.svg b/libs/components/icons/src/auto-icons/number/number.svg
new file mode 100644
index 000000000..fc412b63c
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/number/number.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18 4.6H6A1.4 1.4 0 0 0 4.6 6v12A1.4 1.4 0 0 0 6 19.4h12a1.4 1.4 0 0 0 1.4-1.4V6A1.4 1.4 0 0 0 18 4.6ZM6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M12.013 7.9H13.1v8.2h-1.454V9.803c-.443.374-.98.656-1.617.847l-.129.04V9.177l.075-.02c.331-.087.687-.239 1.066-.46.38-.242.693-.494.942-.766l.03-.032Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/number/number.tsx b/libs/components/icons/src/auto-icons/number/number.tsx
new file mode 100644
index 000000000..b636516b8
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/number/number.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface NumberIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const NumberIcon: FC<NumberIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18 4.6H6A1.4 1.4 0 0 0 4.6 6v12A1.4 1.4 0 0 0 6 19.4h12a1.4 1.4 0 0 0 1.4-1.4V6A1.4 1.4 0 0 0 18 4.6ZM6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Z" clipRule="evenodd" /><path fillRule="evenodd" d="M12.013 7.9H13.1v8.2h-1.454V9.803c-.443.374-.98.656-1.617.847l-.129.04V9.177l.075-.02c.331-.087.687-.239 1.066-.46.38-.242.693-.494.942-.766l.03-.032Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/page-duallink/page-duallink.svg b/libs/components/icons/src/auto-icons/page-duallink/page-duallink.svg
new file mode 100644
index 000000000..e665ece83
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/page-duallink/page-duallink.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M4 2h9l7 7v13H7a3 3 0 0 1-3-3V2Zm14.4 18.4V9.663L12.337 3.6H5.6V19A1.4 1.4 0 0 0 7 20.4h11.4Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M12 10V2h1l7 7v1h-8Zm5.137-1.6L13.6 4.863V8.4h3.537Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/page-duallink/page-duallink.tsx b/libs/components/icons/src/auto-icons/page-duallink/page-duallink.tsx
new file mode 100644
index 000000000..da28fe455
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/page-duallink/page-duallink.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface PageDuallinkIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const PageDuallinkIcon: FC<PageDuallinkIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M4 2h9l7 7v13H7a3 3 0 0 1-3-3V2Zm14.4 18.4V9.663L12.337 3.6H5.6V19A1.4 1.4 0 0 0 7 20.4h11.4Z" clipRule="evenodd" /><path fillRule="evenodd" d="M12 10V2h1l7 7v1h-8Zm5.137-1.6L13.6 4.863V8.4h3.537Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/pages/pages.svg b/libs/components/icons/src/auto-icons/pages/pages.svg
new file mode 100644
index 000000000..31e880d23
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/pages/pages.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M4 5.2h-.8V19A2.8 2.8 0 0 0 6 21.8h11.8V11.169l-.234-.235-5.5-5.5-.235-.234H4ZM4.8 19V6.8h5.4v6h6v7.4H6A1.2 1.2 0 0 1 4.8 19Zm10.769-7.8L11.8 7.431V11.2h3.769Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M6.2 2.2h8.631l.235.234 5.5 5.5.234.235V18.8H18v-1.6h1.2V9.8h-2.4l-1.6-1.6h3.369L14.8 4.431V7.8l-1.6-1.6V3.8H7.8V5H6.2V2.2Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/pages/pages.tsx b/libs/components/icons/src/auto-icons/pages/pages.tsx
new file mode 100644
index 000000000..f62e5c142
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/pages/pages.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface PagesIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const PagesIcon: FC<PagesIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M4 5.2h-.8V19A2.8 2.8 0 0 0 6 21.8h11.8V11.169l-.234-.235-5.5-5.5-.235-.234H4ZM4.8 19V6.8h5.4v6h6v7.4H6A1.2 1.2 0 0 1 4.8 19Zm10.769-7.8L11.8 7.431V11.2h3.769Z" clipRule="evenodd" /><path fillRule="evenodd" d="M6.2 2.2h8.631l.235.234 5.5 5.5.234.235V18.8H18v-1.6h1.2V9.8h-2.4l-1.6-1.6h3.369L14.8 4.431V7.8l-1.6-1.6V3.8H7.8V5H6.2V2.2Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/pen/pen.svg b/libs/components/icons/src/auto-icons/pen/pen.svg
new file mode 100644
index 000000000..0fe3163f5
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/pen/pen.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="m6.015 17.015.383-1.15L17.131 5.13A1.228 1.228 0 0 1 18.87 6.87L8.136 17.602l-1.15.383-.971-.97Zm-.881-2.149L16 4a2.828 2.828 0 1 1 4 4L9.134 18.866a.8.8 0 0 1-.313.194l-4.303 1.434a.8.8 0 0 1-1.012-1.012L4.94 15.18a.8.8 0 0 1 .194-.313Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/pen/pen.tsx b/libs/components/icons/src/auto-icons/pen/pen.tsx
new file mode 100644
index 000000000..ad0751641
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/pen/pen.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface PenIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const PenIcon: FC<PenIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="m6.015 17.015.383-1.15L17.131 5.13A1.228 1.228 0 0 1 18.87 6.87L8.136 17.602l-1.15.383-.971-.97Zm-.881-2.149L16 4a2.828 2.828 0 1 1 4 4L9.134 18.866a.8.8 0 0 1-.313.194l-4.303 1.434a.8.8 0 0 1-1.012-1.012L4.94 15.18a.8.8 0 0 1 .194-.313Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/pencil-duotone/pencil-duotone.svg b/libs/components/icons/src/auto-icons/pencil-duotone/pencil-duotone.svg
new file mode 100644
index 000000000..63f0ac404
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/pencil-duotone/pencil-duotone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#FF9F65" fill-rule="evenodd" d="M6 18 19 5l1.414 1.414-13 13L6 18Z" clip-rule="evenodd"/><path fill="#3A4C5C" fill-rule="evenodd" d="m6.015 17.015.383-1.15L17.131 5.13A1.228 1.228 0 0 1 18.87 6.87L8.136 17.602l-1.15.383-.971-.97Zm-.881-2.149L16 4a2.828 2.828 0 1 1 4 4L9.134 18.866a.8.8 0 0 1-.313.194l-4.303 1.434a.8.8 0 0 1-1.012-1.012L4.94 15.18a.8.8 0 0 1 .194-.313Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/pencil-duotone/pencil-duotone.tsx b/libs/components/icons/src/auto-icons/pencil-duotone/pencil-duotone.tsx
new file mode 100644
index 000000000..bd18d7cac
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/pencil-duotone/pencil-duotone.tsx
@@ -0,0 +1,24 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface PencilDuotoneIconProps extends Omit<SvgIconProps, 'color'> {
+    color0?: string
+    primaryColor?: string
+    color1?: string
+    secondaryColor?: string
+}
+
+export const PencilDuotoneIcon: FC<PencilDuotoneIconProps> = ({ color0, primaryColor, color1, secondaryColor, style, ...props}) => {
+    const propsStyles = {"--color-0": color0 || primaryColor, "--color-1": color1 || secondaryColor};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path style={{fill: 'var(--color-0)'}} fillRule="evenodd" d="M6 18 19 5l1.414 1.414-13 13L6 18Z" clipRule="evenodd" /><path style={{fill: 'var(--color-1)'}} fillRule="evenodd" d="m6.015 17.015.383-1.15L17.131 5.13A1.228 1.228 0 0 1 18.87 6.87L8.136 17.602l-1.15.383-.971-.97Zm-.881-2.149L16 4a2.828 2.828 0 1 1 4 4L9.134 18.866a.8.8 0 0 1-.313.194l-4.303 1.434a.8.8 0 0 1-1.012-1.012L4.94 15.18a.8.8 0 0 1 .194-.313Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/phone/phone.svg b/libs/components/icons/src/auto-icons/phone/phone.svg
new file mode 100644
index 000000000..5934c23b6
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/phone/phone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M16.923 19.4h.005c.11 0 .219-.02.322-.064a.866.866 0 0 0 .283-.193l.003-.003 1.569-1.588-2.94-1.942-1.941 1.576-.892-.387a11.625 11.625 0 0 1-3.655-2.514 11.693 11.693 0 0 1-2.505-3.624l-.397-.899L8.36 7.825l-1.912-2.89-1.58 1.555-.007.007a.848.848 0 0 0-.222.363.893.893 0 0 0-.022.435 15.938 15.938 0 0 0 4.25 7.85 15.94 15.94 0 0 0 7.862 4.231l.01.002.01.002a.81.81 0 0 0 .174.02Zm-9.184-3.12a17.538 17.538 0 0 1-4.688-8.657 2.493 2.493 0 0 1 .06-1.235c.123-.399.344-.76.643-1.046l2.084-2.05a1.038 1.038 0 0 1 .802-.288 1.026 1.026 0 0 1 .755.463L10 7.404a.867.867 0 0 1-.057 1.012l-1.308 1.599a10.094 10.094 0 0 0 2.173 3.138 10.024 10.024 0 0 0 3.162 2.178l1.62-1.315a.843.843 0 0 1 .969-.064l3.933 2.6c.135.082.25.195.337.329a1.081 1.081 0 0 1-.123 1.327l-2.032 2.057c-.23.235-.505.42-.806.547a2.424 2.424 0 0 1-1.47.13 17.541 17.541 0 0 1-8.659-4.662Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/phone/phone.tsx b/libs/components/icons/src/auto-icons/phone/phone.tsx
new file mode 100644
index 000000000..691aaa6df
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/phone/phone.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface PhoneIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const PhoneIcon: FC<PhoneIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M16.923 19.4h.005c.11 0 .219-.02.322-.064a.866.866 0 0 0 .283-.193l.003-.003 1.569-1.588-2.94-1.942-1.941 1.576-.892-.387a11.625 11.625 0 0 1-3.655-2.514 11.693 11.693 0 0 1-2.505-3.624l-.397-.899L8.36 7.825l-1.912-2.89-1.58 1.555-.007.007a.848.848 0 0 0-.222.363.893.893 0 0 0-.022.435 15.938 15.938 0 0 0 4.25 7.85 15.94 15.94 0 0 0 7.862 4.231l.01.002.01.002a.81.81 0 0 0 .174.02Zm-9.184-3.12a17.538 17.538 0 0 1-4.688-8.657 2.493 2.493 0 0 1 .06-1.235c.123-.399.344-.76.643-1.046l2.084-2.05a1.038 1.038 0 0 1 .802-.288 1.026 1.026 0 0 1 .755.463L10 7.404a.867.867 0 0 1-.057 1.012l-1.308 1.599a10.094 10.094 0 0 0 2.173 3.138 10.024 10.024 0 0 0 3.162 2.178l1.62-1.315a.843.843 0 0 1 .969-.064l3.933 2.6c.135.082.25.195.337.329a1.081 1.081 0 0 1-.123 1.327l-2.032 2.057c-.23.235-.505.42-.806.547a2.424 2.424 0 0 1-1.47.13 17.541 17.541 0 0 1-8.659-4.662Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/point-line/point-line.svg b/libs/components/icons/src/auto-icons/point-line/point-line.svg
new file mode 100644
index 000000000..774185598
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/point-line/point-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.324 4.485a.7.7 0 1 1-.99-.99.7.7 0 0 1 .99.99ZM11.273 13.536a.7.7 0 1 1-.99-.99.7.7 0 0 1 .99.99ZM15.799 9.01a.7.7 0 1 1-.99-.99.7.7 0 0 1 .99.99ZM6.748 18.062a.7.7 0 1 1-.99-.99.7.7 0 0 1 .99.99ZM18.062 6.748a.7.7 0 1 1-.99-.99.7.7 0 0 1 .99.99ZM9.01 15.799a.7.7 0 1 1-.99-.99.7.7 0 0 1 .99.99ZM13.536 11.273a.7.7 0 1 1-.99-.99.7.7 0 0 1 .99.99ZM4.485 20.325a.7.7 0 1 1-.99-.99.7.7 0 0 1 .99.99Z"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/point-line/point-line.tsx b/libs/components/icons/src/auto-icons/point-line/point-line.tsx
new file mode 100644
index 000000000..e2818689f
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/point-line/point-line.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface PointLineIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const PointLineIcon: FC<PointLineIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path d="M20.324 4.485a.7.7 0 1 1-.99-.99.7.7 0 0 1 .99.99ZM11.273 13.536a.7.7 0 1 1-.99-.99.7.7 0 0 1 .99.99ZM15.799 9.01a.7.7 0 1 1-.99-.99.7.7 0 0 1 .99.99ZM6.748 18.062a.7.7 0 1 1-.99-.99.7.7 0 0 1 .99.99ZM18.062 6.748a.7.7 0 1 1-.99-.99.7.7 0 0 1 .99.99ZM9.01 15.799a.7.7 0 1 1-.99-.99.7.7 0 0 1 .99.99ZM13.536 11.273a.7.7 0 1 1-.99-.99.7.7 0 0 1 .99.99ZM4.485 20.325a.7.7 0 1 1-.99-.99.7.7 0 0 1 .99.99Z" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/polygon/polygon.svg b/libs/components/icons/src/auto-icons/polygon/polygon.svg
new file mode 100644
index 000000000..f7fce5a03
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/polygon/polygon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="m20.17 12-4.111-7.4H7.94L3.831 12l4.11 7.4h8.118l4.11-7.4ZM17 21l5-9-5-9H7l-5 9 5 9h10Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/polygon/polygon.tsx b/libs/components/icons/src/auto-icons/polygon/polygon.tsx
new file mode 100644
index 000000000..29e820aca
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/polygon/polygon.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface PolygonIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const PolygonIcon: FC<PolygonIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="m20.17 12-4.111-7.4H7.94L3.831 12l4.11 7.4h8.118l4.11-7.4ZM17 21l5-9-5-9H7l-5 9 5 9h10Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/quote/quote.svg b/libs/components/icons/src/auto-icons/quote/quote.svg
new file mode 100644
index 000000000..31d0562ef
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/quote/quote.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m3 7 1.455-4h1.251L4.72 7H3Zm3.294 0L7.74 3H9l-.987 4h-1.72ZM21 17l-1.509 4h-1.297l1.033-4H21Zm-3.203 0-1.5 4H15l1.023-4h1.774Z"/><path fill-rule="evenodd" d="M21 7h-8V5.4h8V7ZM3 17h8v1.6H3V17ZM21 12.8H3v-1.6h18v1.6Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/quote/quote.tsx b/libs/components/icons/src/auto-icons/quote/quote.tsx
new file mode 100644
index 000000000..403fec355
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/quote/quote.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface QuoteIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const QuoteIcon: FC<QuoteIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path d="m3 7 1.455-4h1.251L4.72 7H3Zm3.294 0L7.74 3H9l-.987 4h-1.72ZM21 17l-1.509 4h-1.297l1.033-4H21Zm-3.203 0-1.5 4H15l1.023-4h1.774Z" /><path fillRule="evenodd" d="M21 7h-8V5.4h8V7ZM3 17h8v1.6H3V17ZM21 12.8H3v-1.6h18v1.6Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/reaction/reaction.svg b/libs/components/icons/src/auto-icons/reaction/reaction.svg
new file mode 100644
index 000000000..8dab16901
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/reaction/reaction.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 20.4a8.4 8.4 0 1 0 0-16.8 8.4 8.4 0 0 0 0 16.8Zm0 1.6c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M12 17.8A4.8 4.8 0 0 1 7.2 13h1.6a3.2 3.2 0 1 0 6.4 0h1.6a4.8 4.8 0 0 1-4.8 4.8Z" clip-rule="evenodd"/><circle cx="8.5" cy="9.5" r="1.5"/><circle cx="15.5" cy="9.5" r="1.5"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/reaction/reaction.tsx b/libs/components/icons/src/auto-icons/reaction/reaction.tsx
new file mode 100644
index 000000000..e50612e3f
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/reaction/reaction.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface ReactionIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const ReactionIcon: FC<ReactionIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M12 20.4a8.4 8.4 0 1 0 0-16.8 8.4 8.4 0 0 0 0 16.8Zm0 1.6c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" clipRule="evenodd" /><path fillRule="evenodd" d="M12 17.8A4.8 4.8 0 0 1 7.2 13h1.6a3.2 3.2 0 1 0 6.4 0h1.6a4.8 4.8 0 0 1-4.8 4.8Z" clipRule="evenodd" /><circle cx={8.5} cy={9.5} r={1.5} /><circle cx={15.5} cy={9.5} r={1.5} />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/rectangle-93/rectangle-93.svg b/libs/components/icons/src/auto-icons/rectangle-93/rectangle-93.svg
new file mode 100644
index 000000000..7682fae57
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/rectangle-93/rectangle-93.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1677 1087"><path stroke-width="2" d="M1 1H1676V1086H1z"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/rectangle-93/rectangle-93.tsx b/libs/components/icons/src/auto-icons/rectangle-93/rectangle-93.tsx
new file mode 100644
index 000000000..beb3b61b5
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/rectangle-93/rectangle-93.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface Rectangle_93IconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const Rectangle_93Icon: FC<Rectangle_93IconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path strokeWidth={2} d="M1 1H1676V1086H1z" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/rectangle/rectangle.svg b/libs/components/icons/src/auto-icons/rectangle/rectangle.svg
new file mode 100644
index 000000000..836b45dbb
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/rectangle/rectangle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M19.4 4.6H4.6v14.8h14.8V4.6ZM3 3v18h18V3H3Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/rectangle/rectangle.tsx b/libs/components/icons/src/auto-icons/rectangle/rectangle.tsx
new file mode 100644
index 000000000..cdd56157b
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/rectangle/rectangle.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface RectangleIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const RectangleIcon: FC<RectangleIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M19.4 4.6H4.6v14.8h14.8V4.6ZM3 3v18h18V3H3Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/search/search.svg b/libs/components/icons/src/auto-icons/search/search.svg
new file mode 100644
index 000000000..4882fa819
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/search/search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M14.4 9.5a4.9 4.9 0 1 1-9.8 0 4.9 4.9 0 0 1 9.8 0Zm-.979 5.184a6.5 6.5 0 1 1 1.148-1.115L21 20l-1.131 1.131-6.447-6.447Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/search/search.tsx b/libs/components/icons/src/auto-icons/search/search.tsx
new file mode 100644
index 000000000..e19e5b630
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/search/search.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface SearchIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const SearchIcon: FC<SearchIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M14.4 9.5a4.9 4.9 0 1 1-9.8 0 4.9 4.9 0 0 1 9.8 0Zm-.979 5.184a6.5 6.5 0 1 1 1.148-1.115L21 20l-1.131 1.131-6.447-6.447Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/select-box-select/select-box-select.svg b/libs/components/icons/src/auto-icons/select-box-select/select-box-select.svg
new file mode 100644
index 000000000..3feef6c22
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/select-box-select/select-box-select.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 4.8a7.2 7.2 0 1 0 0 14.4 7.2 7.2 0 0 0 0-14.4ZM3.2 12a8.8 8.8 0 1 1 17.6 0 8.8 8.8 0 0 1-17.6 0Z" clip-rule="evenodd"/><circle cx="12" cy="12" r="4"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/select-box-select/select-box-select.tsx b/libs/components/icons/src/auto-icons/select-box-select/select-box-select.tsx
new file mode 100644
index 000000000..e2207f52a
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/select-box-select/select-box-select.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface SelectBoxSelectIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const SelectBoxSelectIcon: FC<SelectBoxSelectIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M12 4.8a7.2 7.2 0 1 0 0 14.4 7.2 7.2 0 0 0 0-14.4ZM3.2 12a8.8 8.8 0 1 1 17.6 0 8.8 8.8 0 0 1-17.6 0Z" clipRule="evenodd" /><circle cx={12} cy={12} r={4} />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/select-box-unselect/select-box-unselect.svg b/libs/components/icons/src/auto-icons/select-box-unselect/select-box-unselect.svg
new file mode 100644
index 000000000..8b7490680
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/select-box-unselect/select-box-unselect.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 4.8a7.2 7.2 0 1 0 0 14.4 7.2 7.2 0 0 0 0-14.4ZM3.2 12a8.8 8.8 0 1 1 17.6 0 8.8 8.8 0 0 1-17.6 0Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/select-box-unselect/select-box-unselect.tsx b/libs/components/icons/src/auto-icons/select-box-unselect/select-box-unselect.tsx
new file mode 100644
index 000000000..6d4f5838b
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/select-box-unselect/select-box-unselect.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface SelectBoxUnselectIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const SelectBoxUnselectIcon: FC<SelectBoxUnselectIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M12 4.8a7.2 7.2 0 1 0 0 14.4 7.2 7.2 0 0 0 0-14.4ZM3.2 12a8.8 8.8 0 1 1 17.6 0 8.8 8.8 0 0 1-17.6 0Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/select/select.svg b/libs/components/icons/src/auto-icons/select/select.svg
new file mode 100644
index 000000000..93ae8ee7c
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/select/select.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g clip-path="url(#a)"><path fill-rule="evenodd" d="M5.61 4.222c0-1.354 1.577-2.094 2.62-1.23l11.582 9.593c1.218 1.008.394 2.909-1.085 2.89-1.008-.014-2.157.01-3.23.12-1.091.112-2.03.308-2.661.605-.631.296-1.382.894-2.165 1.661-.77.756-1.521 1.626-2.155 2.41-.93 1.151-2.918.572-2.917-1.009l.01-15.04Zm1.6.001-.01 15.04v.002c.003.003.01.006.019.01a.075.075 0 0 0 .039.003l.003-.001s.004-.002.01-.01c.655-.811 1.45-1.733 2.28-2.548.82-.803 1.725-1.554 2.604-1.967.88-.414 2.036-.631 3.177-.749 1.158-.12 2.375-.142 3.416-.128.01 0 .015-.002.015-.002l.003-.001a.075.075 0 0 0 .022-.033.07.07 0 0 0 .005-.02l-.001-.002L7.209 4.223Z" clip-rule="evenodd"/></g><defs><clipPath id="a"><path d="M0 0H24V24H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/select/select.tsx b/libs/components/icons/src/auto-icons/select/select.tsx
new file mode 100644
index 000000000..eaa55cf47
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/select/select.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface SelectIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const SelectIcon: FC<SelectIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <g clipPath="url(#a)"><path fillRule="evenodd" d="M5.61 4.222c0-1.354 1.577-2.094 2.62-1.23l11.582 9.593c1.218 1.008.394 2.909-1.085 2.89-1.008-.014-2.157.01-3.23.12-1.091.112-2.03.308-2.661.605-.631.296-1.382.894-2.165 1.661-.77.756-1.521 1.626-2.155 2.41-.93 1.151-2.918.572-2.917-1.009l.01-15.04Zm1.6.001-.01 15.04v.002c.003.003.01.006.019.01a.075.075 0 0 0 .039.003l.003-.001s.004-.002.01-.01c.655-.811 1.45-1.733 2.28-2.548.82-.803 1.725-1.554 2.604-1.967.88-.414 2.036-.631 3.177-.749 1.158-.12 2.375-.142 3.416-.128.01 0 .015-.002.015-.002l.003-.001a.075.075 0 0 0 .022-.033.07.07 0 0 0 .005-.02l-.001-.002L7.209 4.223Z" clipRule="evenodd" /></g><defs><clipPath id="a"><path d="M0 0H24V24H0z" /></clipPath></defs>
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/settings/settings.svg b/libs/components/icons/src/auto-icons/settings/settings.svg
new file mode 100644
index 000000000..3d6981d09
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/settings/settings.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="m9.028 18.597.378 1.696c.045.2.16.38.324.508.165.129.37.199.582.199h3.377c.211 0 .416-.07.58-.199a.896.896 0 0 0 .325-.508l.383-1.691a7.46 7.46 0 0 0 1.423-.798l1.704.527c.202.062.42.056.617-.019a.92.92 0 0 0 .468-.39l1.689-2.837a.887.887 0 0 0-.18-1.115l-1.321-1.17c.06-.53.06-1.065 0-1.595l1.322-1.17a.887.887 0 0 0 .179-1.115l-1.689-2.838a.92.92 0 0 0-.468-.389.954.954 0 0 0-.616-.018L16.4 6.2a7.66 7.66 0 0 0-1.424-.798l-.382-1.695a.896.896 0 0 0-.324-.509.946.946 0 0 0-.581-.199h-3.377a.946.946 0 0 0-.581.2.897.897 0 0 0-.324.508l-.379 1.694c-.247.104-.488.22-.722.348a7.72 7.72 0 0 0-.705.45l-1.704-.527a.954.954 0 0 0-.617.018.92.92 0 0 0-.469.39L3.123 8.918a.883.883 0 0 0 .179 1.116l1.322 1.168c-.06.53-.06 1.065 0 1.595l-1.322 1.17a.883.883 0 0 0-.179 1.115l1.692 2.836a.92.92 0 0 0 .468.389c.198.074.416.08.617.018l1.704-.526c.443.316.92.584 1.424.798ZM4.802 9.225l1.506 1.329-.094.828c-.047.41-.047.824 0 1.234l.093.827-1.504 1.332 1.116 1.87 1.97-.61.646.462c.347.248.722.459 1.12.628l.756.321.435 1.954h2.31l.442-1.951.754-.32a5.861 5.861 0 0 0 1.117-.627l.646-.46 1.97.608 1.113-1.871-1.505-1.332.094-.827c.047-.41.047-.824 0-1.234l-.094-.827 1.505-1.332-1.113-1.871-1.968.607-.644-.458a6.06 6.06 0 0 0-1.127-.631l-.75-.322-.441-1.952h-2.308l-.438 1.958-.762.32c-.193.08-.382.171-.566.271-.186.105-.37.223-.55.352l-.645.461-1.97-.608-1.114 1.87Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M12 9.8a2.2 2.2 0 1 0 0 4.4 2.2 2.2 0 0 0 0-4.4ZM8.2 12a3.8 3.8 0 1 1 7.6 0 3.8 3.8 0 0 1-7.6 0Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/settings/settings.tsx b/libs/components/icons/src/auto-icons/settings/settings.tsx
new file mode 100644
index 000000000..d75d48e7e
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/settings/settings.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface SettingsIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const SettingsIcon: FC<SettingsIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="m9.028 18.597.378 1.696c.045.2.16.38.324.508.165.129.37.199.582.199h3.377c.211 0 .416-.07.58-.199a.896.896 0 0 0 .325-.508l.383-1.691a7.46 7.46 0 0 0 1.423-.798l1.704.527c.202.062.42.056.617-.019a.92.92 0 0 0 .468-.39l1.689-2.837a.887.887 0 0 0-.18-1.115l-1.321-1.17c.06-.53.06-1.065 0-1.595l1.322-1.17a.887.887 0 0 0 .179-1.115l-1.689-2.838a.92.92 0 0 0-.468-.389.954.954 0 0 0-.616-.018L16.4 6.2a7.66 7.66 0 0 0-1.424-.798l-.382-1.695a.896.896 0 0 0-.324-.509.946.946 0 0 0-.581-.199h-3.377a.946.946 0 0 0-.581.2.897.897 0 0 0-.324.508l-.379 1.694c-.247.104-.488.22-.722.348a7.72 7.72 0 0 0-.705.45l-1.704-.527a.954.954 0 0 0-.617.018.92.92 0 0 0-.469.39L3.123 8.918a.883.883 0 0 0 .179 1.116l1.322 1.168c-.06.53-.06 1.065 0 1.595l-1.322 1.17a.883.883 0 0 0-.179 1.115l1.692 2.836a.92.92 0 0 0 .468.389c.198.074.416.08.617.018l1.704-.526c.443.316.92.584 1.424.798ZM4.802 9.225l1.506 1.329-.094.828c-.047.41-.047.824 0 1.234l.093.827-1.504 1.332 1.116 1.87 1.97-.61.646.462c.347.248.722.459 1.12.628l.756.321.435 1.954h2.31l.442-1.951.754-.32a5.861 5.861 0 0 0 1.117-.627l.646-.46 1.97.608 1.113-1.871-1.505-1.332.094-.827c.047-.41.047-.824 0-1.234l-.094-.827 1.505-1.332-1.113-1.871-1.968.607-.644-.458a6.06 6.06 0 0 0-1.127-.631l-.75-.322-.441-1.952h-2.308l-.438 1.958-.762.32c-.193.08-.382.171-.566.271-.186.105-.37.223-.55.352l-.645.461-1.97-.608-1.114 1.87Z" clipRule="evenodd" /><path fillRule="evenodd" d="M12 9.8a2.2 2.2 0 1 0 0 4.4 2.2 2.2 0 0 0 0-4.4ZM8.2 12a3.8 3.8 0 1 1 7.6 0 3.8 3.8 0 0 1-7.6 0Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/shape-color-duotone/shape-color-duotone.svg b/libs/components/icons/src/auto-icons/shape-color-duotone/shape-color-duotone.svg
new file mode 100644
index 000000000..0bb4b7fc5
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/shape-color-duotone/shape-color-duotone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#3A4C5C" fill-rule="evenodd" d="M8.143 3A5.143 5.143 0 0 0 3 8.143v7.714A5.143 5.143 0 0 0 8.143 21h7.714A5.143 5.143 0 0 0 21 15.857V8.143A5.143 5.143 0 0 0 15.857 3H8.143Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/shape-color-duotone/shape-color-duotone.tsx b/libs/components/icons/src/auto-icons/shape-color-duotone/shape-color-duotone.tsx
new file mode 100644
index 000000000..cb44911c6
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/shape-color-duotone/shape-color-duotone.tsx
@@ -0,0 +1,22 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface ShapeColorDuotoneIconProps extends Omit<SvgIconProps, 'color'> {
+    color0?: string
+    primaryColor?: string
+}
+
+export const ShapeColorDuotoneIcon: FC<ShapeColorDuotoneIconProps> = ({ color0, primaryColor, style, ...props}) => {
+    const propsStyles = {"--color-0": color0 || primaryColor};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path style={{fill: 'var(--color-0)'}} fillRule="evenodd" d="M8.143 3A5.143 5.143 0 0 0 3 8.143v7.714A5.143 5.143 0 0 0 8.143 21h7.714A5.143 5.143 0 0 0 21 15.857V8.143A5.143 5.143 0 0 0 15.857 3H8.143Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/shape-color-none/shape-color-none.svg b/libs/components/icons/src/auto-icons/shape-color-none/shape-color-none.svg
new file mode 100644
index 000000000..380c0a774
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/shape-color-none/shape-color-none.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M3.06 8.143C3.02 8.423 3 8.709 3 9v1.714h2.571v2.572H3V15c0 .291.02.577.06.857h2.511v2.572H4.075c.407.582.914 1.09 1.496 1.496v-1.496h2.572v2.51c.28.04.566.061.857.061h1.714v-2.571h2.572V21H15c.291 0 .577-.02.857-.06v-2.511h2.572v1.496a6.038 6.038 0 0 0 1.496-1.496h-1.496v-2.572h2.51c.04-.28.061-.566.061-.857v-1.714h-2.571v-2.572H21V9c0-.291-.02-.577-.06-.857h-2.511V5.57h1.496a6.036 6.036 0 0 0-1.496-1.496v1.496h-2.572v-2.51A6.05 6.05 0 0 0 15 3h-1.714v2.571h-2.572V3H9c-.291 0-.577.02-.857.06v2.511H5.57V4.075a6.034 6.034 0 0 0-1.496 1.496h1.496v2.572h-2.51Zm5.083 0V5.57h2.571v2.572H8.143Zm0 2.571H5.57V8.143h2.572v2.571Zm2.571 0V8.143h2.572v2.571h-2.572Zm0 2.572v-2.572H8.143v2.572H5.57v2.571h2.572v2.572h2.571v-2.572h2.572v2.572h2.571v-2.572h2.572v-2.571h-2.572v-2.572h2.572V8.143h-2.572V5.57h-2.571v2.572h2.571v2.571h-2.571v2.572h-2.572Zm0 0v2.571H8.143v-2.571h2.571Zm2.572 0h2.571v2.571h-2.571v-2.571Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/shape-color-none/shape-color-none.tsx b/libs/components/icons/src/auto-icons/shape-color-none/shape-color-none.tsx
new file mode 100644
index 000000000..18340931c
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/shape-color-none/shape-color-none.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface ShapeColorNoneIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const ShapeColorNoneIcon: FC<ShapeColorNoneIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M3.06 8.143C3.02 8.423 3 8.709 3 9v1.714h2.571v2.572H3V15c0 .291.02.577.06.857h2.511v2.572H4.075c.407.582.914 1.09 1.496 1.496v-1.496h2.572v2.51c.28.04.566.061.857.061h1.714v-2.571h2.572V21H15c.291 0 .577-.02.857-.06v-2.511h2.572v1.496a6.038 6.038 0 0 0 1.496-1.496h-1.496v-2.572h2.51c.04-.28.061-.566.061-.857v-1.714h-2.571v-2.572H21V9c0-.291-.02-.577-.06-.857h-2.511V5.57h1.496a6.036 6.036 0 0 0-1.496-1.496v1.496h-2.572v-2.51A6.05 6.05 0 0 0 15 3h-1.714v2.571h-2.572V3H9c-.291 0-.577.02-.857.06v2.511H5.57V4.075a6.034 6.034 0 0 0-1.496 1.496h1.496v2.572h-2.51Zm5.083 0V5.57h2.571v2.572H8.143Zm0 2.571H5.57V8.143h2.572v2.571Zm2.571 0V8.143h2.572v2.571h-2.572Zm0 2.572v-2.572H8.143v2.572H5.57v2.571h2.572v2.572h2.571v-2.572h2.572v2.572h2.571v-2.572h2.572v-2.571h-2.572v-2.572h2.572V8.143h-2.572V5.57h-2.571v2.572h2.571v2.571h-2.571v2.572h-2.572Zm0 0v2.571H8.143v-2.571h2.571Zm2.572 0h2.571v2.571h-2.571v-2.571Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/shape/shape.svg b/libs/components/icons/src/auto-icons/shape/shape.svg
new file mode 100644
index 000000000..e895274d0
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/shape/shape.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M19.228 6.944 11.822 4.96l-1.984 7.406 1.613.432-.73 1.461-2.843-.762L10.69 3l10.497 2.813-2.813 10.497-1.236-.331-.956-1.913 1.06.284 1.985-7.406Zm-10.247.119a5.5 5.5 0 1 0-.147 10.97l.894-1.788a3.9 3.9 0 1 1-1.17-7.602l.423-1.58Zm4.519 2.979-5.5 11h11l-5.5-11Zm0 3.578-2.911 5.822h5.822L13.5 13.62Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/shape/shape.tsx b/libs/components/icons/src/auto-icons/shape/shape.tsx
new file mode 100644
index 000000000..3e6a38d5a
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/shape/shape.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface ShapeIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const ShapeIcon: FC<ShapeIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M19.228 6.944 11.822 4.96l-1.984 7.406 1.613.432-.73 1.461-2.843-.762L10.69 3l10.497 2.813-2.813 10.497-1.236-.331-.956-1.913 1.06.284 1.985-7.406Zm-10.247.119a5.5 5.5 0 1 0-.147 10.97l.894-1.788a3.9 3.9 0 1 1-1.17-7.602l.423-1.58Zm4.519 2.979-5.5 11h11l-5.5-11Zm0 3.578-2.911 5.822h5.822L13.5 13.62Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/side-bar-view-close/side-bar-view-close.svg b/libs/components/icons/src/auto-icons/side-bar-view-close/side-bar-view-close.svg
new file mode 100644
index 000000000..fd535ed23
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/side-bar-view-close/side-bar-view-close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18 5.6H6A1.4 1.4 0 0 0 4.6 7v10A1.4 1.4 0 0 0 6 18.4h12a1.4 1.4 0 0 0 1.4-1.4V7A1.4 1.4 0 0 0 18 5.6ZM6 4a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H6Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M14 19V5h1.6v14H14ZM9.369 12 6.934 9.566l1.132-1.132L11.63 12l-3.565 3.566-1.132-1.132L9.37 12Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/side-bar-view-close/side-bar-view-close.tsx b/libs/components/icons/src/auto-icons/side-bar-view-close/side-bar-view-close.tsx
new file mode 100644
index 000000000..dcca9989e
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/side-bar-view-close/side-bar-view-close.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface SideBarViewCloseIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const SideBarViewCloseIcon: FC<SideBarViewCloseIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18 5.6H6A1.4 1.4 0 0 0 4.6 7v10A1.4 1.4 0 0 0 6 18.4h12a1.4 1.4 0 0 0 1.4-1.4V7A1.4 1.4 0 0 0 18 5.6ZM6 4a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H6Z" clipRule="evenodd" /><path fillRule="evenodd" d="M14 19V5h1.6v14H14ZM9.369 12 6.934 9.566l1.132-1.132L11.63 12l-3.565 3.566-1.132-1.132L9.37 12Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/side-bar-view/side-bar-view.svg b/libs/components/icons/src/auto-icons/side-bar-view/side-bar-view.svg
new file mode 100644
index 000000000..7f2832f09
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/side-bar-view/side-bar-view.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18 5.6H6A1.4 1.4 0 0 0 4.6 7v10A1.4 1.4 0 0 0 6 18.4h12a1.4 1.4 0 0 0 1.4-1.4V7A1.4 1.4 0 0 0 18 5.6ZM6 4a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H6Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M14 19V5h1.6v14H14Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/side-bar-view/side-bar-view.tsx b/libs/components/icons/src/auto-icons/side-bar-view/side-bar-view.tsx
new file mode 100644
index 000000000..ecd466c8c
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/side-bar-view/side-bar-view.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface SideBarViewIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const SideBarViewIcon: FC<SideBarViewIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18 5.6H6A1.4 1.4 0 0 0 4.6 7v10A1.4 1.4 0 0 0 6 18.4h12a1.4 1.4 0 0 0 1.4-1.4V7A1.4 1.4 0 0 0 18 5.6ZM6 4a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H6Z" clipRule="evenodd" /><path fillRule="evenodd" d="M14 19V5h1.6v14H14Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/single-select/single-select.svg b/libs/components/icons/src/auto-icons/single-select/single-select.svg
new file mode 100644
index 000000000..db8a93f76
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/single-select/single-select.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18 4.6H6A1.4 1.4 0 0 0 4.6 6v12A1.4 1.4 0 0 0 6 19.4h12a1.4 1.4 0 0 0 1.4-1.4V6A1.4 1.4 0 0 0 18 4.6ZM6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Z" clip-rule="evenodd"/><path d="M12.451 14.8a.61.61 0 0 1-.902 0l-3.421-3.936c-.303-.348-.034-.864.451-.864h6.842c.485 0 .754.516.451.864l-3.42 3.936Z"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/single-select/single-select.tsx b/libs/components/icons/src/auto-icons/single-select/single-select.tsx
new file mode 100644
index 000000000..3f7bdc99d
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/single-select/single-select.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface SingleSelectIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const SingleSelectIcon: FC<SingleSelectIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18 4.6H6A1.4 1.4 0 0 0 4.6 6v12A1.4 1.4 0 0 0 6 19.4h12a1.4 1.4 0 0 0 1.4-1.4V6A1.4 1.4 0 0 0 18 4.6ZM6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Z" clipRule="evenodd" /><path d="M12.451 14.8a.61.61 0 0 1-.902 0l-3.421-3.936c-.303-.348-.034-.864.451-.864h6.842c.485 0 .754.516.451.864l-3.42 3.936Z" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/solid-line/solid-line.svg b/libs/components/icons/src/auto-icons/solid-line/solid-line.svg
new file mode 100644
index 000000000..d3ebe52f4
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/solid-line/solid-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M3 20 20 3l.99.99-17 17L3 20Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/solid-line/solid-line.tsx b/libs/components/icons/src/auto-icons/solid-line/solid-line.tsx
new file mode 100644
index 000000000..331fde47c
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/solid-line/solid-line.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface SolidLineIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const SolidLineIcon: FC<SolidLineIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M3 20 20 3l.99.99-17 17L3 20Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/sort/sort.svg b/libs/components/icons/src/auto-icons/sort/sort.svg
new file mode 100644
index 000000000..ac22bec86
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/sort/sort.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M9 4.6H5a.4.4 0 0 0-.4.4v4c0 .22.18.4.4.4h4a.4.4 0 0 0 .4-.4V5a.4.4 0 0 0-.4-.4ZM5 3a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5ZM5 13a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2H5Zm1.167 6.382 3.757-3.758-.848-.848-2.91 2.909-1.242-1.243-.848.849 2.09 2.09ZM18 17.869l2.434-2.435 1.132 1.132L17 21.13l-4.566-4.565 1.132-1.132L16 17.87V3h2v14.869Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/sort/sort.tsx b/libs/components/icons/src/auto-icons/sort/sort.tsx
new file mode 100644
index 000000000..8b7f1f327
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/sort/sort.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface SortIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const SortIcon: FC<SortIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M9 4.6H5a.4.4 0 0 0-.4.4v4c0 .22.18.4.4.4h4a.4.4 0 0 0 .4-.4V5a.4.4 0 0 0-.4-.4ZM5 3a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5ZM5 13a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2H5Zm1.167 6.382 3.757-3.758-.848-.848-2.91 2.909-1.242-1.243-.848.849 2.09 2.09ZM18 17.869l2.434-2.435 1.132 1.132L17 21.13l-4.566-4.565 1.132-1.132L16 17.87V3h2v14.869Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/sql/sql.svg b/libs/components/icons/src/auto-icons/sql/sql.svg
new file mode 100644
index 000000000..2e53dc907
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/sql/sql.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18.41 4.857c-.224-.185-.628-.415-1.248-.636-1.25-.447-3.076-.751-5.162-.751s-3.911.304-5.162.751c-.62.221-1.024.451-1.248.636.224.185.628.415 1.248.636 1.25.447 3.076.751 5.162.751s3.911-.304 5.162-.75c.62-.222 1.024-.452 1.248-.637ZM12 7.714c2.617 0 4.94-.448 6.4-1.142v3.055c-.226.184-.627.41-1.238.628-1.25.447-3.076.751-5.162.751s-3.911-.304-5.162-.75c-.611-.219-1.012-.445-1.238-.629V6.572c1.46.694 3.783 1.142 6.4 1.142Zm-8 1.92V19.2h.002C4.087 20.752 7.635 22 12 22s7.913-1.248 7.998-2.8H20V5h-.01c.007-.047.01-.095.01-.143C20 3.28 16.418 2 12 2S4 3.28 4 4.857c0 .048.003.096.01.143H4v4.633Zm14.4 9.517v-3.055c-1.46.693-3.783 1.142-6.4 1.142-2.617 0-4.94-.449-6.4-1.142v3.055c.226.183.627.41 1.238.628 1.25.447 3.076.751 5.162.751s3.911-.304 5.162-.751c.611-.218 1.012-.445 1.238-.628ZM6.838 15.017c-.611-.218-1.012-.444-1.238-.628v-3.055c1.46.694 3.783 1.142 6.4 1.142 2.617 0 4.94-.449 6.4-1.142v3.055c-.226.184-.627.41-1.238.628-1.25.447-3.076.751-5.162.751s-3.911-.304-5.162-.751Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/sql/sql.tsx b/libs/components/icons/src/auto-icons/sql/sql.tsx
new file mode 100644
index 000000000..d8d613db1
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/sql/sql.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface SqlIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const SqlIcon: FC<SqlIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18.41 4.857c-.224-.185-.628-.415-1.248-.636-1.25-.447-3.076-.751-5.162-.751s-3.911.304-5.162.751c-.62.221-1.024.451-1.248.636.224.185.628.415 1.248.636 1.25.447 3.076.751 5.162.751s3.911-.304 5.162-.75c.62-.222 1.024-.452 1.248-.637ZM12 7.714c2.617 0 4.94-.448 6.4-1.142v3.055c-.226.184-.627.41-1.238.628-1.25.447-3.076.751-5.162.751s-3.911-.304-5.162-.75c-.611-.219-1.012-.445-1.238-.629V6.572c1.46.694 3.783 1.142 6.4 1.142Zm-8 1.92V19.2h.002C4.087 20.752 7.635 22 12 22s7.913-1.248 7.998-2.8H20V5h-.01c.007-.047.01-.095.01-.143C20 3.28 16.418 2 12 2S4 3.28 4 4.857c0 .048.003.096.01.143H4v4.633Zm14.4 9.517v-3.055c-1.46.693-3.783 1.142-6.4 1.142-2.617 0-4.94-.449-6.4-1.142v3.055c.226.183.627.41 1.238.628 1.25.447 3.076.751 5.162.751s3.911-.304 5.162-.751c.611-.218 1.012-.445 1.238-.628ZM6.838 15.017c-.611-.218-1.012-.444-1.238-.628v-3.055c1.46.694 3.783 1.142 6.4 1.142 2.617 0 4.94-.449 6.4-1.142v3.055c-.226.184-.627.41-1.238.628-1.25.447-3.076.751-5.162.751s-3.911-.304-5.162-.751Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/stamp/stamp.svg b/libs/components/icons/src/auto-icons/stamp/stamp.svg
new file mode 100644
index 000000000..5145b332c
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/stamp/stamp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="m12.9 11.408.799-.462a3.4 3.4 0 1 0-3.398 0l.799.462V16.6H6A1.4 1.4 0 0 0 4.6 18v1.4h14.8V18a1.4 1.4 0 0 0-1.4-1.4h-5.1v-5.192ZM21 21H3v-3a3 3 0 0 1 3-3h3.5v-2.669a5 5 0 1 1 5 0V15H18a3 3 0 0 1 3 3v3Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/stamp/stamp.tsx b/libs/components/icons/src/auto-icons/stamp/stamp.tsx
new file mode 100644
index 000000000..ec6a69d85
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/stamp/stamp.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface StampIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const StampIcon: FC<StampIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="m12.9 11.408.799-.462a3.4 3.4 0 1 0-3.398 0l.799.462V16.6H6A1.4 1.4 0 0 0 4.6 18v1.4h14.8V18a1.4 1.4 0 0 0-1.4-1.4h-5.1v-5.192ZM21 21H3v-3a3 3 0 0 1 3-3h3.5v-2.669a5 5 0 1 1 5 0V15H18a3 3 0 0 1 3 3v3Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/star/star.svg b/libs/components/icons/src/auto-icons/star/star.svg
new file mode 100644
index 000000000..7575b8e02
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/star/star.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M13.52 10.698 12 6.728l-1.52 3.97-4.072.29L9.54 13.73l-.996 4.149L12 15.604l3.456 2.275-.996-4.149 3.132-2.742-4.071-.29Zm6.999-1.235c.463.033.652.642.295.954l-4.503 3.944 1.432 5.965c.113.473-.38.848-.773.59L12 17.645l-4.97 3.27c-.393.26-.886-.116-.773-.589l1.432-5.965-4.503-3.944c-.357-.313-.168-.92.295-.954l5.854-.416 2.187-5.708a.507.507 0 0 1 .956 0l2.187 5.708 5.854.416Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/star/star.tsx b/libs/components/icons/src/auto-icons/star/star.tsx
new file mode 100644
index 000000000..ef3e355bd
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/star/star.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface StarIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const StarIcon: FC<StarIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M13.52 10.698 12 6.728l-1.52 3.97-4.072.29L9.54 13.73l-.996 4.149L12 15.604l3.456 2.275-.996-4.149 3.132-2.742-4.071-.29Zm6.999-1.235c.463.033.652.642.295.954l-4.503 3.944 1.432 5.965c.113.473-.38.848-.773.59L12 17.645l-4.97 3.27c-.393.26-.886-.116-.773-.589l1.432-5.965-4.503-3.944c-.357-.313-.168-.92.295-.954l5.854-.416 2.187-5.708a.507.507 0 0 1 .956 0l2.187 5.708 5.854.416Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/status/status.svg b/libs/components/icons/src/auto-icons/status/status.svg
new file mode 100644
index 000000000..03e98cc37
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/status/status.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="m15.667 7.903 4.786-4.487 1.094 1.168-5.88 5.513-3.214-3.013 1.094-1.168 2.12 1.987ZM3 7h8v1.6H3V7ZM11 17.8H3v-1.6h8v1.6ZM17.066 18.048l2.823 2.823 1.113-1.114-2.823-2.823 2.823-2.823-1.113-1.113-2.823 2.823-2.953-2.952L13 13.982l2.952 2.952L13 19.887 14.113 21l2.953-2.952Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/status/status.tsx b/libs/components/icons/src/auto-icons/status/status.tsx
new file mode 100644
index 000000000..c2a5d672a
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/status/status.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface StatusIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const StatusIcon: FC<StatusIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="m15.667 7.903 4.786-4.487 1.094 1.168-5.88 5.513-3.214-3.013 1.094-1.168 2.12 1.987ZM3 7h8v1.6H3V7ZM11 17.8H3v-1.6h8v1.6ZM17.066 18.048l2.823 2.823 1.113-1.114-2.823-2.823 2.823-2.823-1.113-1.113-2.823 2.823-2.953-2.952L13 13.982l2.952 2.952L13 19.887 14.113 21l2.953-2.952Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/switch-off-duotone/switch-off-duotone.svg b/libs/components/icons/src/auto-icons/switch-off-duotone/switch-off-duotone.svg
new file mode 100644
index 000000000..33c854b2a
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/switch-off-duotone/switch-off-duotone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#fff" d="M1 9a3 3 0 0 1 3-3h16a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V9Z"/><path fill="#3E6FDB" fill-rule="evenodd" d="M20 7H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2ZM4 6a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h16a3 3 0 0 0 3-3V9a3 3 0 0 0-3-3H4Z" clip-rule="evenodd"/><rect width="8" height="8" x="3" y="8" fill="#3E6FDB" rx="2"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/switch-off-duotone/switch-off-duotone.tsx b/libs/components/icons/src/auto-icons/switch-off-duotone/switch-off-duotone.tsx
new file mode 100644
index 000000000..277e26eb8
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/switch-off-duotone/switch-off-duotone.tsx
@@ -0,0 +1,25 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface SwitchOffDuotoneIconProps extends Omit<SvgIconProps, 'color'> {
+    color0?: string
+    primaryColor?: string
+    color1?: string
+    secondaryColor?: string
+    color2?: string
+}
+
+export const SwitchOffDuotoneIcon: FC<SwitchOffDuotoneIconProps> = ({ color0, primaryColor, color1, secondaryColor, color2, style, ...props}) => {
+    const propsStyles = {"--color-0": color0 || primaryColor, "--color-1": color1 || secondaryColor, "--color-2": color2};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path style={{fill: 'var(--color-0)'}} d="M1 9a3 3 0 0 1 3-3h16a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V9Z" /><path style={{fill: 'var(--color-1)'}} fillRule="evenodd" d="M20 7H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2ZM4 6a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h16a3 3 0 0 0 3-3V9a3 3 0 0 0-3-3H4Z" clipRule="evenodd" /><rect width={8} height={8} x={3} y={8} style={{fill: 'var(--color-2)'}} rx={2} />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/switch-on-duotone/switch-on-duotone.svg b/libs/components/icons/src/auto-icons/switch-on-duotone/switch-on-duotone.svg
new file mode 100644
index 000000000..8d1800844
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/switch-on-duotone/switch-on-duotone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><rect width="22" height="12" x="1" y="6" fill="#3E6FDB" rx="3"/><rect width="8" height="8" x="13" y="8" fill="#fff" rx="2"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/switch-on-duotone/switch-on-duotone.tsx b/libs/components/icons/src/auto-icons/switch-on-duotone/switch-on-duotone.tsx
new file mode 100644
index 000000000..4ac41c532
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/switch-on-duotone/switch-on-duotone.tsx
@@ -0,0 +1,24 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface SwitchOnDuotoneIconProps extends Omit<SvgIconProps, 'color'> {
+    color0?: string
+    primaryColor?: string
+    color1?: string
+    secondaryColor?: string
+}
+
+export const SwitchOnDuotoneIcon: FC<SwitchOnDuotoneIconProps> = ({ color0, primaryColor, color1, secondaryColor, style, ...props}) => {
+    const propsStyles = {"--color-0": color0 || primaryColor, "--color-1": color1 || secondaryColor};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <rect width={22} height={12} x={1} y={6} style={{fill: 'var(--color-0)'}} rx={3} /><rect width={8} height={8} x={13} y={8} style={{fill: 'var(--color-1)'}} rx={2} />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/table/table.svg b/libs/components/icons/src/auto-icons/table/table.svg
new file mode 100644
index 000000000..c8503a122
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/table/table.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M6 4.6h12A1.4 1.4 0 0 1 19.4 6v2H4.6V6A1.4 1.4 0 0 1 6 4.6Zm3.6 5h9.8v4.2H9.6V9.6ZM8 13.8V9.6H4.6v4.2H8Zm-3.4 1.6H8v4H6A1.4 1.4 0 0 1 4.6 18v-2.6Zm5 0h9.8V18a1.4 1.4 0 0 1-1.4 1.4H9.6v-4ZM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/table/table.tsx b/libs/components/icons/src/auto-icons/table/table.tsx
new file mode 100644
index 000000000..0534eadd6
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/table/table.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface TableIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const TableIcon: FC<TableIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M6 4.6h12A1.4 1.4 0 0 1 19.4 6v2H4.6V6A1.4 1.4 0 0 1 6 4.6Zm3.6 5h9.8v4.2H9.6V9.6ZM8 13.8V9.6H4.6v4.2H8Zm-3.4 1.6H8v4H6A1.4 1.4 0 0 1 4.6 18v-2.6Zm5 0h9.8V18a1.4 1.4 0 0 1-1.4 1.4H9.6v-4ZM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/tag-add-duotone/tag-add-duotone.svg b/libs/components/icons/src/auto-icons/tag-add-duotone/tag-add-duotone.svg
new file mode 100644
index 000000000..638e73ac1
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/tag-add-duotone/tag-add-duotone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#F5F7F8"/><path fill="#98ACBD" fill-rule="evenodd" d="M11.2 12.8V16h1.6v-3.2H16v-1.6h-3.2V8h-1.6v3.2H8v1.6h3.2Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/tag-add-duotone/tag-add-duotone.tsx b/libs/components/icons/src/auto-icons/tag-add-duotone/tag-add-duotone.tsx
new file mode 100644
index 000000000..045115b9e
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/tag-add-duotone/tag-add-duotone.tsx
@@ -0,0 +1,24 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface TagAddDuotoneIconProps extends Omit<SvgIconProps, 'color'> {
+    color0?: string
+    primaryColor?: string
+    color1?: string
+    secondaryColor?: string
+}
+
+export const TagAddDuotoneIcon: FC<TagAddDuotoneIconProps> = ({ color0, primaryColor, color1, secondaryColor, style, ...props}) => {
+    const propsStyles = {"--color-0": color0 || primaryColor, "--color-1": color1 || secondaryColor};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <circle cx={12} cy={12} r={10} style={{fill: 'var(--color-0)'}} /><path style={{fill: 'var(--color-1)'}} fillRule="evenodd" d="M11.2 12.8V16h1.6v-3.2H16v-1.6h-3.2V8h-1.6v3.2H8v1.6h3.2Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/tags/tags.svg b/libs/components/icons/src/auto-icons/tags/tags.svg
new file mode 100644
index 000000000..bd11b449f
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/tags/tags.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21.38 10.088a2 2 0 0 1-.578 1.595l-8.53 8.53a2 2 0 0 1-2.828 0l-5.657-5.657a2 2 0 0 1 0-2.828l8.53-8.53a2 2 0 0 1 1.595-.578l5.186.472a2 2 0 0 1 1.81 1.81l.472 5.186Zm-2.065-5.04.471 5.185a.4.4 0 0 1-.115.319l-8.53 8.53a.4.4 0 0 1-.566 0l-5.657-5.657a.4.4 0 0 1 0-.566l8.53-8.53a.4.4 0 0 1 .32-.115l5.185.471a.4.4 0 0 1 .362.362Z" clip-rule="evenodd"/><path d="M15 7.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0Z"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/tags/tags.tsx b/libs/components/icons/src/auto-icons/tags/tags.tsx
new file mode 100644
index 000000000..4d79fa6ed
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/tags/tags.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface TagsIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const TagsIcon: FC<TagsIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M21.38 10.088a2 2 0 0 1-.578 1.595l-8.53 8.53a2 2 0 0 1-2.828 0l-5.657-5.657a2 2 0 0 1 0-2.828l8.53-8.53a2 2 0 0 1 1.595-.578l5.186.472a2 2 0 0 1 1.81 1.81l.472 5.186Zm-2.065-5.04.471 5.185a.4.4 0 0 1-.115.319l-8.53 8.53a.4.4 0 0 1-.566 0l-5.657-5.657a.4.4 0 0 1 0-.566l8.53-8.53a.4.4 0 0 1 .32-.115l5.185.471a.4.4 0 0 1 .362.362Z" clipRule="evenodd" /><path d="M15 7.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0Z" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/text-font/text-font.svg b/libs/components/icons/src/auto-icons/text-font/text-font.svg
new file mode 100644
index 000000000..8ec35944d
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/text-font/text-font.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="m21.202 11.977.051.058c.452.549.693 1.308.693 2.278v5.363h-1.13 1.13v-5.363c0-.97-.241-1.729-.693-2.278a2.396 2.396 0 0 0-.051-.058Zm-.385 6.294a3.738 3.738 0 0 1-3.13 1.632c-.783 0-1.4-.21-1.867-.63.467.42 1.084.63 1.866.63a3.737 3.737 0 0 0 3.13-1.632Zm-.597-5.598c-.339-.34-.842-.509-1.51-.509-.572 0-1.039.113-1.4.372-.406.258-.662.662-.782 1.195l-1.19-.097 1.19.097c.12-.533.376-.937.782-1.195.361-.259.828-.372 1.4-.372.668 0 1.171.169 1.51.509Zm.424 1.591v.34l-1.77.03c-1.184.017-2.11.261-2.763.729-.753.505-1.111 1.248-1.111 2.229 0 .704.251 1.297.755 1.753.488.44 1.13.655 1.931.655a3.838 3.838 0 0 0 3.033-1.43v1.204h1.325v-5.461c0-.986-.245-1.769-.715-2.34l-.002-.002c-.566-.659-1.41-.971-2.542-.971-.946 0-1.704.197-2.297.598-.658.437-1.076 1.125-1.245 2.018l-.02.107 1.381.112.019-.082c.116-.514.36-.893.74-1.135l.004-.003c.339-.242.783-.353 1.343-.353.661 0 1.14.17 1.453.493.315.324.48.82.48 1.51Zm-3.965 4.165a1.17 1.17 0 0 1-.347-.87c0-1.21.873-1.825 2.619-1.857l1.79-.032-1.79.032c-1.746.032-2.62.646-2.62 1.858 0 .347.11.629.348.87Zm1.263.358c-.462 0-.83-.124-1.111-.35a1.082 1.082 0 0 1-.401-.877c0-.58.206-1.004.613-1.292.413-.292 1.045-.452 1.91-.468l1.69-.03v.61c0 .614-.27 1.17-.81 1.656-.555.502-1.179.75-1.89.75ZM7.152 4 1.505 20H3.2l1.765-5h6.068l1.765 5h1.697L8.848 4H7.152Zm3.176 9L8 6.404 5.672 13h4.656Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/text-font/text-font.tsx b/libs/components/icons/src/auto-icons/text-font/text-font.tsx
new file mode 100644
index 000000000..84188037f
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/text-font/text-font.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface TextFontIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const TextFontIcon: FC<TextFontIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="m21.202 11.977.051.058c.452.549.693 1.308.693 2.278v5.363h-1.13 1.13v-5.363c0-.97-.241-1.729-.693-2.278a2.396 2.396 0 0 0-.051-.058Zm-.385 6.294a3.738 3.738 0 0 1-3.13 1.632c-.783 0-1.4-.21-1.867-.63.467.42 1.084.63 1.866.63a3.737 3.737 0 0 0 3.13-1.632Zm-.597-5.598c-.339-.34-.842-.509-1.51-.509-.572 0-1.039.113-1.4.372-.406.258-.662.662-.782 1.195l-1.19-.097 1.19.097c.12-.533.376-.937.782-1.195.361-.259.828-.372 1.4-.372.668 0 1.171.169 1.51.509Zm.424 1.591v.34l-1.77.03c-1.184.017-2.11.261-2.763.729-.753.505-1.111 1.248-1.111 2.229 0 .704.251 1.297.755 1.753.488.44 1.13.655 1.931.655a3.838 3.838 0 0 0 3.033-1.43v1.204h1.325v-5.461c0-.986-.245-1.769-.715-2.34l-.002-.002c-.566-.659-1.41-.971-2.542-.971-.946 0-1.704.197-2.297.598-.658.437-1.076 1.125-1.245 2.018l-.02.107 1.381.112.019-.082c.116-.514.36-.893.74-1.135l.004-.003c.339-.242.783-.353 1.343-.353.661 0 1.14.17 1.453.493.315.324.48.82.48 1.51Zm-3.965 4.165a1.17 1.17 0 0 1-.347-.87c0-1.21.873-1.825 2.619-1.857l1.79-.032-1.79.032c-1.746.032-2.62.646-2.62 1.858 0 .347.11.629.348.87Zm1.263.358c-.462 0-.83-.124-1.111-.35a1.082 1.082 0 0 1-.401-.877c0-.58.206-1.004.613-1.292.413-.292 1.045-.452 1.91-.468l1.69-.03v.61c0 .614-.27 1.17-.81 1.656-.555.502-1.179.75-1.89.75ZM7.152 4 1.505 20H3.2l1.765-5h6.068l1.765 5h1.697L8.848 4H7.152Zm3.176 9L8 6.404 5.672 13h4.656Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/text/text.svg b/libs/components/icons/src/auto-icons/text/text.svg
new file mode 100644
index 000000000..8e7560dd9
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/text/text.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21 3H3v2h8v16h2V5h8V3Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/text/text.tsx b/libs/components/icons/src/auto-icons/text/text.tsx
new file mode 100644
index 000000000..3500e2356
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/text/text.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface TextIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const TextIcon: FC<TextIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M21 3H3v2h8v16h2V5h8V3Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/to-do/to-do.svg b/libs/components/icons/src/auto-icons/to-do/to-do.svg
new file mode 100644
index 000000000..82cd06123
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/to-do/to-do.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18 4.6H6A1.4 1.4 0 0 0 4.6 6v12A1.4 1.4 0 0 0 6 19.4h12a1.4 1.4 0 0 0 1.4-1.4V6A1.4 1.4 0 0 0 18 4.6ZM6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M17.566 8.566 10 16.13l-3.566-3.565 1.132-1.132L10 13.87l6.434-6.435 1.132 1.132Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/to-do/to-do.tsx b/libs/components/icons/src/auto-icons/to-do/to-do.tsx
new file mode 100644
index 000000000..4db46b78b
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/to-do/to-do.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface ToDoIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const ToDoIcon: FC<ToDoIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18 4.6H6A1.4 1.4 0 0 0 4.6 6v12A1.4 1.4 0 0 0 6 19.4h12a1.4 1.4 0 0 0 1.4-1.4V6A1.4 1.4 0 0 0 18 4.6ZM6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Z" clipRule="evenodd" /><path fillRule="evenodd" d="M17.566 8.566 10 16.13l-3.566-3.565 1.132-1.132L10 13.87l6.434-6.435 1.132 1.132Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/todo-list/todo-list.svg b/libs/components/icons/src/auto-icons/todo-list/todo-list.svg
new file mode 100644
index 000000000..827647adf
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/todo-list/todo-list.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M10 4.2h11v1.6H10V4.2ZM10 18.2h11v1.6H10v-1.6ZM10 11.2h11v1.6H10v-1.6ZM7.576 2.776l.848.848L5 7.05 3.076 5.124l.848-.848L5 5.35l2.576-2.575ZM7.576 16.776l.848.848L5 21.05l-1.924-1.925.848-.848L5 19.352l2.576-2.576ZM7.576 9.776l.848.848L5 14.05l-1.924-1.925.848-.848L5 12.35l2.576-2.575Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/todo-list/todo-list.tsx b/libs/components/icons/src/auto-icons/todo-list/todo-list.tsx
new file mode 100644
index 000000000..c34489080
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/todo-list/todo-list.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface TodoListIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const TodoListIcon: FC<TodoListIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M10 4.2h11v1.6H10V4.2ZM10 18.2h11v1.6H10v-1.6ZM10 11.2h11v1.6H10v-1.6ZM7.576 2.776l.848.848L5 7.05 3.076 5.124l.848-.848L5 5.35l2.576-2.575ZM7.576 16.776l.848.848L5 21.05l-1.924-1.925.848-.848L5 19.352l2.576-2.576ZM7.576 9.776l.848.848L5 14.05l-1.924-1.925.848-.848L5 12.35l2.576-2.575Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/triangle/triangle.svg b/libs/components/icons/src/auto-icons/triangle/triangle.svg
new file mode 100644
index 000000000..8970a7378
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/triangle/triangle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 3 3 21h18L12 3Zm0 3.578L5.589 19.4H18.41L12 6.578Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/triangle/triangle.tsx b/libs/components/icons/src/auto-icons/triangle/triangle.tsx
new file mode 100644
index 000000000..4eea5fc3c
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/triangle/triangle.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface TriangleIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const TriangleIcon: FC<TriangleIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M12 3 3 21h18L12 3Zm0 3.578L5.589 19.4H18.41L12 6.578Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/turn-into/turn-into.svg b/libs/components/icons/src/auto-icons/turn-into/turn-into.svg
new file mode 100644
index 000000000..d3bc58bfe
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/turn-into/turn-into.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18 4.6h-2A1.4 1.4 0 0 0 14.6 6v2A1.4 1.4 0 0 0 16 9.4h2A1.4 1.4 0 0 0 19.4 8V6A1.4 1.4 0 0 0 18 4.6ZM16 3a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h2a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3h-2ZM8 14.6H6A1.4 1.4 0 0 0 4.6 16v2A1.4 1.4 0 0 0 6 19.4h2A1.4 1.4 0 0 0 9.4 18v-2A1.4 1.4 0 0 0 8 14.6ZM6 13a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h2a3 3 0 0 0 3-3v-2a3 3 0 0 0-3-3H6ZM8.566 3.566 7.434 2.434 2.87 7l4.565 4.566 1.132-1.132L5.93 7.8H12V6.2H5.931l2.635-2.634ZM15.434 20.434l1.132 1.132L21.13 17l-4.565-4.566-1.132 1.132L18.07 16.2H12v1.6h6.069l-2.635 2.634Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/turn-into/turn-into.tsx b/libs/components/icons/src/auto-icons/turn-into/turn-into.tsx
new file mode 100644
index 000000000..bc1e24cde
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/turn-into/turn-into.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface TurnIntoIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const TurnIntoIcon: FC<TurnIntoIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18 4.6h-2A1.4 1.4 0 0 0 14.6 6v2A1.4 1.4 0 0 0 16 9.4h2A1.4 1.4 0 0 0 19.4 8V6A1.4 1.4 0 0 0 18 4.6ZM16 3a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h2a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3h-2ZM8 14.6H6A1.4 1.4 0 0 0 4.6 16v2A1.4 1.4 0 0 0 6 19.4h2A1.4 1.4 0 0 0 9.4 18v-2A1.4 1.4 0 0 0 8 14.6ZM6 13a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h2a3 3 0 0 0 3-3v-2a3 3 0 0 0-3-3H6ZM8.566 3.566 7.434 2.434 2.87 7l4.565 4.566 1.132-1.132L5.93 7.8H12V6.2H5.931l2.635-2.634ZM15.434 20.434l1.132 1.132L21.13 17l-4.565-4.566-1.132 1.132L18.07 16.2H12v1.6h6.069l-2.635 2.634Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/ungroup/ungroup.svg b/libs/components/icons/src/auto-icons/ungroup/ungroup.svg
new file mode 100644
index 000000000..57d19c600
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/ungroup/ungroup.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="10" height="4" x="7" y="7" rx="1"/><rect width="10" height="4" x="12" y="15" rx="1"/><path fill-rule="evenodd" d="M6 4.6h12A1.4 1.4 0 0 1 19.4 6v6H21V6a3 3 0 0 0-3-3H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h3v-1.6H6A1.4 1.4 0 0 1 4.6 18V6A1.4 1.4 0 0 1 6 4.6Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/ungroup/ungroup.tsx b/libs/components/icons/src/auto-icons/ungroup/ungroup.tsx
new file mode 100644
index 000000000..1b5ecb9b2
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/ungroup/ungroup.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface UngroupIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const UngroupIcon: FC<UngroupIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <rect width={10} height={4} x={7} y={7} rx={1} /><rect width={10} height={4} x={12} y={15} rx={1} /><path fillRule="evenodd" d="M6 4.6h12A1.4 1.4 0 0 1 19.4 6v6H21V6a3 3 0 0 0-3-3H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h3v-1.6H6A1.4 1.4 0 0 1 4.6 18V6A1.4 1.4 0 0 1 6 4.6Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/web-app/web-app.svg b/libs/components/icons/src/auto-icons/web-app/web-app.svg
new file mode 100644
index 000000000..0187d3286
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/web-app/web-app.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M20.052 14.4c.227-.76.348-1.566.348-2.4 0-.834-.121-1.64-.348-2.4h-3.47c.144.74.218 1.496.218 2.259v.282c0 .763-.074 1.52-.218 2.259h3.47Zm-5.105 0H9.053a10.199 10.199 0 0 1-.253-2.259v-.282c0-.765.086-1.523.253-2.259h5.894c.167.736.253 1.494.253 2.259v.282a10.2 10.2 0 0 1-.253 2.259ZM16.15 8h3.237a8.412 8.412 0 0 0-5.757-4.242l.583.73c.848 1.059 1.5 2.248 1.937 3.512ZM12 4.28l.965 1.207c.614.768 1.11 1.615 1.477 2.513H9.558c.367-.898.863-1.745 1.477-2.513L12 4.28ZM14.442 16a10.196 10.196 0 0 1-1.477 2.513L12 19.72l-.965-1.206A10.198 10.198 0 0 1 9.558 16h4.884Zm-.81 4.242.582-.73c.848-1.059 1.5-2.248 1.937-3.512h3.237a8.411 8.411 0 0 1-5.757 4.242ZM7.2 11.859c0-.763.074-1.52.218-2.259h-3.47A8.401 8.401 0 0 0 3.6 12c0 .834.122 1.64.348 2.4h3.47a11.798 11.798 0 0 1-.218-2.259v-.282Zm2.586-7.372.583-.729A8.412 8.412 0 0 0 4.612 8h3.237a11.799 11.799 0 0 1 1.937-3.513ZM4.612 16h3.237a11.8 11.8 0 0 0 1.937 3.513l.583.729A8.412 8.412 0 0 1 4.612 16ZM12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/web-app/web-app.tsx b/libs/components/icons/src/auto-icons/web-app/web-app.tsx
new file mode 100644
index 000000000..ee1bcba6e
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/web-app/web-app.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface WebAppIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const WebAppIcon: FC<WebAppIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M20.052 14.4c.227-.76.348-1.566.348-2.4 0-.834-.121-1.64-.348-2.4h-3.47c.144.74.218 1.496.218 2.259v.282c0 .763-.074 1.52-.218 2.259h3.47Zm-5.105 0H9.053a10.199 10.199 0 0 1-.253-2.259v-.282c0-.765.086-1.523.253-2.259h5.894c.167.736.253 1.494.253 2.259v.282a10.2 10.2 0 0 1-.253 2.259ZM16.15 8h3.237a8.412 8.412 0 0 0-5.757-4.242l.583.73c.848 1.059 1.5 2.248 1.937 3.512ZM12 4.28l.965 1.207c.614.768 1.11 1.615 1.477 2.513H9.558c.367-.898.863-1.745 1.477-2.513L12 4.28ZM14.442 16a10.196 10.196 0 0 1-1.477 2.513L12 19.72l-.965-1.206A10.198 10.198 0 0 1 9.558 16h4.884Zm-.81 4.242.582-.73c.848-1.059 1.5-2.248 1.937-3.512h3.237a8.411 8.411 0 0 1-5.757 4.242ZM7.2 11.859c0-.763.074-1.52.218-2.259h-3.47A8.401 8.401 0 0 0 3.6 12c0 .834.122 1.64.348 2.4h3.47a11.798 11.798 0 0 1-.218-2.259v-.282Zm2.586-7.372.583-.729A8.412 8.412 0 0 0 4.612 8h3.237a11.799 11.799 0 0 1 1.937-3.513ZM4.612 16h3.237a11.8 11.8 0 0 0 1.937 3.513l.583.729A8.412 8.412 0 0 1 4.612 16ZM12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/auto-icons/youtube/youtube.svg b/libs/components/icons/src/auto-icons/youtube/youtube.svg
new file mode 100644
index 000000000..a08685666
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/youtube/youtube.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="red" d="M20.6 7.528a2.339 2.339 0 0 0-.583-1.037 2.25 2.25 0 0 0-1.009-.6C17.612 5.5 11.991 5.5 11.991 5.5s-5.621.012-7.018.403a2.25 2.25 0 0 0-1.008.6A2.34 2.34 0 0 0 3.38 7.54c-.423 2.549-.587 6.433.011 8.88.103.393.305.75.584 1.037.28.287.627.494 1.009.6 1.396.391 7.017.391 7.017.391s5.621 0 7.018-.39a2.25 2.25 0 0 0 1.008-.601c.28-.287.481-.644.584-1.036.446-2.553.583-6.435-.011-8.893Z"/><path fill="#fff" d="m10.202 14.749 4.663-2.775L10.202 9.2v5.549Z"/></svg>
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/youtube/youtube.tsx b/libs/components/icons/src/auto-icons/youtube/youtube.tsx
new file mode 100644
index 000000000..0f8138329
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/youtube/youtube.tsx
@@ -0,0 +1,21 @@
+
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface YoutubeIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const YoutubeIcon: FC<YoutubeIconProps> = ({ color, style, ...props}) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fill="red" d="M20.6 7.528a2.339 2.339 0 0 0-.583-1.037 2.25 2.25 0 0 0-1.009-.6C17.612 5.5 11.991 5.5 11.991 5.5s-5.621.012-7.018.403a2.25 2.25 0 0 0-1.008.6A2.34 2.34 0 0 0 3.38 7.54c-.423 2.549-.587 6.433.011 8.88.103.393.305.75.584 1.037.28.287.627.494 1.009.6 1.396.391 7.017.391 7.017.391s5.621 0 7.018-.39a2.25 2.25 0 0 0 1.008-.601c.28-.287.481-.644.584-1.036.446-2.553.583-6.435-.011-8.893Z" /><path fill="#fff" d="m10.202 14.749 4.663-2.775L10.202 9.2v5.549Z" />
+        </SvgIcon>
+    )
+};
diff --git a/libs/components/icons/src/index.ts b/libs/components/icons/src/index.ts
new file mode 100644
index 000000000..caa65b70f
--- /dev/null
+++ b/libs/components/icons/src/index.ts
@@ -0,0 +1 @@
+export * from './auto-icons';
diff --git a/libs/components/icons/tsconfig.json b/libs/components/icons/tsconfig.json
new file mode 100644
index 000000000..dce3dae9a
--- /dev/null
+++ b/libs/components/icons/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/components/icons/tsconfig.lib.json b/libs/components/icons/tsconfig.lib.json
new file mode 100644
index 000000000..6a4378740
--- /dev/null
+++ b/libs/components/icons/tsconfig.lib.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"]
+}
diff --git a/libs/components/icons/tsconfig.spec.json b/libs/components/icons/tsconfig.spec.json
new file mode 100644
index 000000000..24b3ac659
--- /dev/null
+++ b/libs/components/icons/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+    "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"
+    ]
+}
diff --git a/libs/components/layout/.babelrc b/libs/components/layout/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/components/layout/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/components/layout/.eslintrc.json b/libs/components/layout/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/components/layout/.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": {}
+        }
+    ]
+}
diff --git a/libs/components/layout/README.md b/libs/components/layout/README.md
new file mode 100644
index 000000000..9c2cc3f57
--- /dev/null
+++ b/libs/components/layout/README.md
@@ -0,0 +1,7 @@
+# components-layout
+
+> global ui layout components for affine
+
+## Running unit tests
+
+Run `nx test components-layout` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/components/layout/jest.config.js b/libs/components/layout/jest.config.js
new file mode 100644
index 000000000..85f09314b
--- /dev/null
+++ b/libs/components/layout/jest.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+    displayName: 'components-layout',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/components/layout',
+};
diff --git a/libs/components/layout/package.json b/libs/components/layout/package.json
new file mode 100644
index 000000000..739ad7c56
--- /dev/null
+++ b/libs/components/layout/package.json
@@ -0,0 +1,22 @@
+{
+    "name": "@toeverything/components/layout",
+    "version": "0.0.1",
+    "license": "MIT",
+    "dependencies": {
+        "@date-io/date-fns": "^2.14.0",
+        "@dnd-kit/core": "^6.0.5",
+        "@dnd-kit/modifiers": "^6.0.0",
+        "@dnd-kit/sortable": "^7.0.1",
+        "@dnd-kit/utilities": "^3.2.0",
+        "@mui/icons-material": "^5.8.4",
+        "clsx": "^1.2.1",
+        "date-fns": "^2.28.0",
+        "jotai": "^1.7.4",
+        "tinycolor2": "^1.4.2",
+        "turndown": "7.1.1"
+    },
+    "devDependencies": {
+        "@types/tinycolor2": "^1.4.3",
+        "@types/turndown": "^5.0.1"
+    }
+}
diff --git a/libs/components/layout/project.json b/libs/components/layout/project.json
new file mode 100644
index 000000000..ff60b2072
--- /dev/null
+++ b/libs/components/layout/project.json
@@ -0,0 +1,44 @@
+{
+    "sourceRoot": "libs/components/layout/src",
+    "projectType": "library",
+    "tags": ["components"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/components/layout",
+                "tsConfig": "libs/components/layout/tsconfig.lib.json",
+                "project": "libs/components/layout/package.json",
+                "entryFile": "libs/components/layout/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "libs/rollup-ts-checker.config.cjs",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/components/layout/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/components/layout/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/components/layout"],
+            "options": {
+                "jestConfig": "libs/components/layout/jest.config.js",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/components/layout/src/header/EditorBoardSwitcher/StatusIcon.tsx b/libs/components/layout/src/header/EditorBoardSwitcher/StatusIcon.tsx
new file mode 100644
index 000000000..194759f54
--- /dev/null
+++ b/libs/components/layout/src/header/EditorBoardSwitcher/StatusIcon.tsx
@@ -0,0 +1,35 @@
+import { styled } from '@toeverything/components/ui';
+import { DocViewIcon, BoardViewIcon } from '@toeverything/components/icons';
+import { DocMode } from './type';
+
+interface StatusIconProps {
+    mode: DocMode;
+}
+
+export const StatusIcon = ({ mode }: StatusIconProps) => {
+    return (
+        <IconWrapper mode={mode}>
+            {mode === DocMode.doc ? <DocViewIcon /> : <BoardViewIcon />}
+        </IconWrapper>
+    );
+};
+
+const IconWrapper = styled('div')<Pick<StatusIconProps, 'mode'>>(
+    ({ theme, mode }) => {
+        return {
+            width: '20px',
+            height: '20px',
+            borderRadius: '5px',
+            boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+            color: theme.affine.palette.primary,
+            cursor: 'pointer',
+            backgroundColor: theme.affine.palette.white,
+            transform: `translateX(${mode === DocMode.doc ? 0 : 33}px)`,
+            transition: 'transform 300ms ease',
+
+            '& > svg': {
+                fontSize: '20px',
+            },
+        };
+    }
+);
diff --git a/libs/components/layout/src/header/EditorBoardSwitcher/StatusText.tsx b/libs/components/layout/src/header/EditorBoardSwitcher/StatusText.tsx
new file mode 100644
index 000000000..73976d3da
--- /dev/null
+++ b/libs/components/layout/src/header/EditorBoardSwitcher/StatusText.tsx
@@ -0,0 +1,27 @@
+import { styled } from '@toeverything/components/ui';
+
+type StatusTextProps = {
+    children: string;
+    active?: boolean;
+    onClick?: () => void;
+};
+
+export const StatusText = ({ children, active, onClick }: StatusTextProps) => {
+    return (
+        <StyledText active={active} onClick={onClick}>
+            {children}
+        </StyledText>
+    );
+};
+
+const StyledText = styled('div')<StatusTextProps>(({ theme, active }) => {
+    return {
+        display: 'inline-flex',
+        alignItems: 'center',
+        color: theme.affine.palette.primary,
+        fontWeight: active ? '500' : '300',
+        fontSize: '15px',
+        cursor: 'pointer',
+        padding: '0 6px',
+    };
+});
diff --git a/libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx b/libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx
new file mode 100644
index 000000000..02eac6750
--- /dev/null
+++ b/libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx
@@ -0,0 +1,28 @@
+import type { FC } from 'react';
+import type { DocMode } from './type';
+import { styled } from '@toeverything/components/ui';
+import { StatusIcon } from './StatusIcon';
+
+interface StatusTrackProps {
+    mode: DocMode;
+    onClick: () => void;
+}
+
+export const StatusTrack: FC<StatusTrackProps> = ({ mode, onClick }) => {
+    return (
+        <Container onClick={onClick}>
+            <StatusIcon mode={mode} />
+        </Container>
+    );
+};
+
+const Container = styled('div')(({ theme }) => {
+    return {
+        backgroundColor: theme.affine.palette.textHover,
+        borderRadius: '5px',
+        height: '30px',
+        width: '63px',
+        cursor: 'pointer',
+        padding: '5px',
+    };
+});
diff --git a/libs/components/layout/src/header/EditorBoardSwitcher/Switcher.tsx b/libs/components/layout/src/header/EditorBoardSwitcher/Switcher.tsx
new file mode 100644
index 000000000..82236eefd
--- /dev/null
+++ b/libs/components/layout/src/header/EditorBoardSwitcher/Switcher.tsx
@@ -0,0 +1,63 @@
+import { useLocation, useParams, useNavigate } from 'react-router-dom';
+import { styled } from '@toeverything/components/ui';
+import { StatusText } from './StatusText';
+import { StatusTrack } from './StatusTrack';
+import { DocMode } from './type';
+
+const isBoard = (pathname: string): boolean => pathname.endsWith('/whiteboard');
+
+export const Switcher = () => {
+    const navigate = useNavigate();
+    const params = useParams();
+    const { pathname } = useLocation();
+    const pageViewMode = isBoard(pathname) ? DocMode.board : DocMode.doc;
+
+    const switchToPageView = (targetViewMode: DocMode) => {
+        if (targetViewMode === pageViewMode) {
+            return;
+        }
+        const workspaceId = params['workspace_id'];
+        /**
+         * There are two possible modes:
+         * Page mode: /{workspaceId}/{pageId}
+         * Board mode: /{workspaceId}/{pageId}/whiteboard
+         */
+        const pageId = params['*'].split('/')[0];
+        const targetUrl = `/${workspaceId}/${pageId}${
+            targetViewMode === DocMode.board ? '/whiteboard' : ''
+        }`;
+        navigate(targetUrl);
+    };
+
+    return (
+        <StyledContainerForSwitcher>
+            <StatusText
+                active={pageViewMode === DocMode.doc}
+                onClick={() => switchToPageView(DocMode.doc)}
+            >
+                Doc
+            </StatusText>
+            <StatusTrack
+                mode={pageViewMode}
+                onClick={() => {
+                    switchToPageView(
+                        pageViewMode === DocMode.board
+                            ? DocMode.doc
+                            : DocMode.board
+                    );
+                }}
+            />
+            <StatusText
+                active={pageViewMode === DocMode.board}
+                onClick={() => switchToPageView(DocMode.board)}
+            >
+                Board
+            </StatusText>
+        </StyledContainerForSwitcher>
+    );
+};
+
+const StyledContainerForSwitcher = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+});
diff --git a/libs/components/layout/src/header/EditorBoardSwitcher/index.ts b/libs/components/layout/src/header/EditorBoardSwitcher/index.ts
new file mode 100644
index 000000000..7534aecc5
--- /dev/null
+++ b/libs/components/layout/src/header/EditorBoardSwitcher/index.ts
@@ -0,0 +1 @@
+export { Switcher as EditorBoardSwitcher } from './Switcher';
diff --git a/libs/components/layout/src/header/EditorBoardSwitcher/type.ts b/libs/components/layout/src/header/EditorBoardSwitcher/type.ts
new file mode 100644
index 000000000..de9891933
--- /dev/null
+++ b/libs/components/layout/src/header/EditorBoardSwitcher/type.ts
@@ -0,0 +1,6 @@
+export enum DocMode {
+    // Page Mode
+    doc,
+    // Board Mode
+    board,
+}
diff --git a/libs/components/layout/src/header/Header.tsx b/libs/components/layout/src/header/Header.tsx
new file mode 100644
index 000000000..baa370674
--- /dev/null
+++ b/libs/components/layout/src/header/Header.tsx
@@ -0,0 +1,184 @@
+import { useNavigate, useParams, useLocation } from 'react-router-dom';
+import MenuIconBak from '@mui/icons-material/Menu';
+import {
+    useUserAndSpaces,
+    useShowSpaceSidebar,
+    useShowSettingsSidebar,
+} from '@toeverything/datasource/state';
+import {
+    MuiIconButton as IconButton,
+    styled,
+    Tooltip,
+    useTheme,
+} from '@toeverything/components/ui';
+import { SideBarViewIcon } from '@toeverything/components/icons';
+import { LogoLink, ListIcon, SpaceIcon } from '@toeverything/components/common';
+import { PageHistoryPortal } from './PageHistoryPortal';
+import { PageSharePortal } from './PageSharePortal';
+import { PageSettingPortal } from './PageSettingPortal';
+import { CurrentPageTitle } from './Title';
+import { UserMenuIcon } from './user-menu-icon';
+import { useFlag } from '@toeverything/datasource/feature-flags';
+
+function hideAffineHeader(pathname: string): boolean {
+    return ['/', '/login', '/error/workspace', '/error/404', '/ui'].includes(
+        pathname
+    );
+}
+
+type HeaderIconProps = {
+    isWhiteboardView?: boolean;
+};
+
+export const AffineHeader = () => {
+    const navigate = useNavigate();
+    const params = useParams();
+    const { pathname } = useLocation();
+    const { toggleSpaceSidebar, setSpaceSidebarVisible } =
+        useShowSpaceSidebar();
+    const { toggleSettingsSidebar: toggleInfoSidebar } =
+        useShowSettingsSidebar();
+    const theme = useTheme();
+    const isWhiteboardView = pathname.endsWith('/whiteboard');
+    const pageHistoryPortalFlag = useFlag('BooleanPageHistoryPortal', false);
+    const pageSettingPortalFlag = useFlag('PageSettingPortal', false);
+    const BooleanPageSharePortal = useFlag('BooleanPageSharePortal', false);
+    // TODO: remove this
+    useUserAndSpaces();
+
+    const showCenterTab =
+        (params['workspace_id'] || pathname.includes('/space/')) && params['*'];
+
+    if (hideAffineHeader(pathname)) {
+        return null;
+    }
+
+    return (
+        <StyledHeader style={{ zIndex: theme.affine.zIndex.header }}>
+            <StyledHeaderLeft>
+                <LogoLink /> &emsp;
+                {/* <HeaderIcon
+                    onClick={toggleSpaceSidebar}
+                    onMouseEnter={() => setSpaceSidebarVisible(true)}
+                    sx={{ mr: 4, ml: 4 }}
+                >
+                    <MenuIconBak />
+                </HeaderIcon> */}
+                {pageHistoryPortalFlag && (
+                    <HeaderIcon sx={{ mr: 4 }}>
+                        <PageHistoryPortal />
+                    </HeaderIcon>
+                )}
+                <CurrentPageTitle />
+            </StyledHeaderLeft>
+
+            <StyledHeaderCenter>
+                {showCenterTab && (
+                    <>
+                        <Tooltip content="Doc">
+                            <HeaderIcon
+                                style={{ width: '80px' }}
+                                isWhiteboardView={!isWhiteboardView}
+                                onClick={() =>
+                                    isWhiteboardView
+                                        ? navigate(
+                                              `/${
+                                                  params['workspace_id'] ||
+                                                  'space'
+                                              }/${params['*'].slice(0, -11)}`
+                                          )
+                                        : null
+                                }
+                            >
+                                <ListIcon />
+                                <span
+                                    style={{
+                                        fontSize: '16px',
+                                        marginLeft: '7.5px',
+                                    }}
+                                >
+                                    Doc
+                                </span>
+                            </HeaderIcon>
+                        </Tooltip>
+                        <Tooltip content="Whiteboard">
+                            <HeaderIcon
+                                isWhiteboardView={isWhiteboardView}
+                                onClick={() =>
+                                    isWhiteboardView
+                                        ? null
+                                        : navigate(
+                                              `/${
+                                                  params['workspace_id'] ||
+                                                  'space'
+                                              }/${params['*']}` + '/whiteboard'
+                                          )
+                                }
+                            >
+                                <SpaceIcon />
+                            </HeaderIcon>
+                        </Tooltip>
+                    </>
+                )}
+            </StyledHeaderCenter>
+            <StyledHeaderRight>
+                {BooleanPageSharePortal && (
+                    <HeaderIcon sx={{ mr: 4 }}>
+                        <PageSharePortal />
+                    </HeaderIcon>
+                )}
+                <UserMenuIcon />
+
+                {pageSettingPortalFlag && (
+                    <HeaderIcon>
+                        <PageSettingPortal />
+                    </HeaderIcon>
+                )}
+
+                <HeaderIcon sx={{ mr: 4 }} onClick={toggleInfoSidebar}>
+                    <SideBarViewIcon />
+                </HeaderIcon>
+            </StyledHeaderRight>
+        </StyledHeader>
+    );
+};
+
+const StyledHeader = styled('div')`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 64px;
+    padding: 0 32px;
+    background-color: #fff;
+`;
+
+const StyledHeaderLeft = styled('div')`
+    display: flex;
+    align-items: center;
+`;
+
+const StyledHeaderCenter = styled('div')`
+    display: flex;
+    align-items: center;
+`;
+const StyledHeaderRight = styled('div')`
+    display: flex;
+    align-items: center;
+`;
+
+const HeaderIcon = styled(IconButton, {
+    shouldForwardProp: (prop: string) => prop !== 'isWhiteboardView',
+})<HeaderIconProps>(({ isWhiteboardView = false }) => ({
+    color: '#98ACBD',
+    minWidth: 48,
+    width: 48,
+    height: 36,
+    borderRadius: '8px',
+    ...(isWhiteboardView && {
+        color: '#fff',
+        backgroundColor: '#3E6FDB',
+        '&:hover': {
+            backgroundColor: '#3E6FDB',
+        },
+    }),
+}));
diff --git a/libs/components/layout/src/header/LayoutHeader.tsx b/libs/components/layout/src/header/LayoutHeader.tsx
new file mode 100644
index 000000000..8ff31213a
--- /dev/null
+++ b/libs/components/layout/src/header/LayoutHeader.tsx
@@ -0,0 +1,81 @@
+import { IconButton, styled } from '@toeverything/components/ui';
+import { LogoIcon, SideBarViewIcon } from '@toeverything/components/icons';
+import { useShowSettingsSidebar } from '@toeverything/datasource/state';
+import { CurrentPageTitle } from './Title';
+import { EditorBoardSwitcher } from './EditorBoardSwitcher';
+
+export const LayoutHeader = () => {
+    const { toggleSettingsSidebar: toggleInfoSidebar } =
+        useShowSettingsSidebar();
+
+    return (
+        <StyledContainerForHeaderRoot>
+            <StyledHeaderRoot>
+                <FlexContainer>
+                    <StyledLogoIcon />
+                    <TitleContainer>
+                        <CurrentPageTitle />
+                    </TitleContainer>
+                </FlexContainer>
+                <FlexContainer>
+                    <IconButton onClick={toggleInfoSidebar}>
+                        <SideBarViewIcon />
+                    </IconButton>
+                </FlexContainer>
+                <StyledContainerForEditorBoardSwitcher>
+                    <EditorBoardSwitcher />
+                </StyledContainerForEditorBoardSwitcher>
+            </StyledHeaderRoot>
+        </StyledContainerForHeaderRoot>
+    );
+};
+
+const StyledContainerForHeaderRoot = styled('div')(({ theme }) => {
+    return {
+        width: '100%',
+        zIndex: theme.affine.zIndex.header,
+    };
+});
+
+const StyledHeaderRoot = styled('div')(({ theme }) => {
+    return {
+        position: 'relative',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        height: 60,
+        marginLeft: 36,
+        marginRight: 36,
+    };
+});
+
+const FlexContainer = styled('div')({ display: 'flex' });
+
+const TitleContainer = styled('div')(({ theme }) => {
+    return {
+        // marginLeft: theme.affine.spacing.lgSpacing,
+        marginLeft: 100,
+        maxWidth: 500,
+        overflowX: 'hidden',
+        color: theme.affine.palette.primaryText,
+        lineHeight: '18px',
+        fontSize: '15px',
+        fontStyle: 'normal',
+        fontWeight: '400',
+        letterSpacing: '1.06px',
+    };
+});
+
+const StyledLogoIcon = styled(LogoIcon)(({ theme }) => {
+    return {
+        color: theme.affine.palette.primary,
+        cursor: 'pointer',
+    };
+});
+
+const StyledContainerForEditorBoardSwitcher = styled('div')(({ theme }) => {
+    return {
+        position: 'absolute',
+        left: '50%',
+    };
+});
diff --git a/libs/components/layout/src/header/PageHistoryPortal.tsx b/libs/components/layout/src/header/PageHistoryPortal.tsx
new file mode 100644
index 000000000..4ec69d7f1
--- /dev/null
+++ b/libs/components/layout/src/header/PageHistoryPortal.tsx
@@ -0,0 +1,6 @@
+import { ClockIcon } from '@toeverything/components/common';
+function PageHistoryPortal() {
+    return <ClockIcon />;
+}
+
+export { PageHistoryPortal };
diff --git a/libs/components/layout/src/header/PageSettingPortal.tsx b/libs/components/layout/src/header/PageSettingPortal.tsx
new file mode 100644
index 000000000..9c33f8d3f
--- /dev/null
+++ b/libs/components/layout/src/header/PageSettingPortal.tsx
@@ -0,0 +1,267 @@
+import { useState, MouseEvent, useCallback, useEffect } from 'react';
+import { services } from '@toeverything/datasource/db-service';
+import { useParams, useNavigate } from 'react-router-dom';
+
+import { copyToClipboard } from '@toeverything/utils';
+import { MoreIcon } from '@toeverything/components/icons';
+import {
+    MuiSnackbar as Snackbar,
+    Popover,
+    ListButton,
+    MuiDivider as Divider,
+    MuiSwitch as Switch,
+    styled,
+} from '@toeverything/components/ui';
+import { useUserAndSpaces } from '@toeverything/datasource/state';
+import format from 'date-fns/format';
+import { useFlag } from '@toeverything/datasource/feature-flags';
+import { PageBlock } from './types';
+import { FileExporter } from './file-exporter/file-exporter';
+const PageSettingPortalContainer = styled('div')({
+    width: '320p',
+    padding: '15px',
+    '.textDescription': {
+        height: '22px',
+        lineHeight: '22px',
+        marginLeft: '30px',
+        fontSize: '14px',
+        color: '#ccc',
+        p: {
+            margin: 0,
+        },
+    },
+    '.switchDescription': {
+        color: '#ccc',
+        fontSize: '14px',
+        paddingLeft: '30px',
+    },
+});
+
+const BtnPageSettingContainer = styled('div')({
+    width: '24px',
+    height: '24px',
+});
+
+const MESSAGES = {
+    COPY_LINK: ' Copy Link',
+    INVITE: 'Add people,emails, or groups',
+    COPY_LINK_SUCCESS: 'Copyed link to clipboard',
+};
+
+function PageSettingPortal() {
+    const [alertOpen, setAlertOpen] = useState(false);
+    const { workspace_id } = useParams();
+    const [pageBlock, setPageBlock] = useState<PageBlock>();
+
+    const params = useParams();
+    const pageId = params['*'].split('/')[0];
+    const navigate = useNavigate();
+    const { user } = useUserAndSpaces();
+    const BooleanFullWidthChecked = useFlag('BooleanFullWidthChecked', false);
+    const BooleanExportWorkspace = useFlag('BooleanExportWorkspace', false);
+    const BooleanImportWorkspace = useFlag('BooleanImportWorkspace', false);
+    const BooleanExportHtml = useFlag('BooleanExportHtml', false);
+    const BooleanExportPdf = useFlag('BooleanExportPdf', false);
+    const BooleanExportMarkdown = useFlag('BooleanExportMarkdown', false);
+
+    const fetchPageBlock = useCallback(async () => {
+        const dbPageBlock = await services.api.editorBlock.getBlock(
+            workspace_id,
+            pageId
+        );
+        if (!dbPageBlock) return;
+        const text = dbPageBlock.getDecoration('text');
+        setPageBlock({
+            lastUpdated: dbPageBlock.lastUpdated,
+            fullWidthChecked:
+                dbPageBlock.getDecoration('fullWidthChecked') || false,
+            title:
+                text &&
+                //@ts-ignore
+                text.value[0].text,
+        });
+    }, [workspace_id, pageId]);
+
+    useEffect(() => {
+        fetchPageBlock();
+    }, [workspace_id, pageId, fetchPageBlock]);
+    const redirectToPage = (newWorkspaceId: string, newPageId: string) => {
+        navigate('/' + newWorkspaceId + '/' + newPageId);
+    };
+
+    const handleDuplicatePage = async () => {
+        //create page
+        const newPage = await services.api.editorBlock.create({
+            workspace: workspace_id,
+            type: 'page' as const,
+        });
+        //add page to tree
+        await services.api.pageTree.addNextPageToWorkspace(
+            workspace_id,
+            pageId,
+            newPage.id
+        );
+        //copy source page to new page
+        await services.api.editorBlock.copyPage(
+            workspace_id,
+            pageId,
+            newPage.id
+        );
+
+        redirectToPage(workspace_id, newPage.id);
+    };
+
+    const handleCopy = () => {
+        copyToClipboard(window.location.href);
+        setAlertOpen(true);
+    };
+    const handleAlertClose = () => {
+        setAlertOpen(false);
+    };
+
+    const handleExportWorkspace = () => {
+        //@ts-ignore
+        window.client.inspector().save();
+    };
+
+    const handleImportWorkspace = () => {
+        //@ts-ignore
+        window.client
+            .inspector()
+            .load()
+            .then(() => {
+                window.location.href = `/${workspace_id}/`;
+            });
+    };
+
+    const handleFullWidthCheckedChange = async (
+        event: React.ChangeEvent<HTMLInputElement>
+    ) => {
+        const checked = event.target.checked;
+        setPageBlock({
+            lastUpdated: pageBlock.lastUpdated,
+            fullWidthChecked: checked,
+        });
+        services.api.editorBlock.update({
+            properties: {
+                fullWidthChecked: checked,
+            },
+            id: pageId,
+            workspace: workspace_id,
+        });
+    };
+
+    const handleExportHtml = async () => {
+        //@ts-ignore
+        const htmlContent = await virgo.clipboard
+            .getClipboardParse()
+            .page2html();
+        const htmlTitle = pageBlock.title;
+
+        FileExporter.exportHtml(htmlTitle, htmlContent);
+    };
+
+    const handleExportMarkdown = async () => {
+        //@ts-ignore
+        const htmlContent = await virgo.clipboard
+            .getClipboardParse()
+            .page2html();
+        const htmlTitle = pageBlock.title;
+        FileExporter.exportMarkdown(htmlTitle, htmlContent);
+    };
+    return (
+        <BtnPageSettingContainer>
+            <Popover
+                trigger="click"
+                placement="bottom-end"
+                content={
+                    <PageSettingPortalContainer>
+                        {BooleanFullWidthChecked && (
+                            <>
+                                <div className="switchDescription">
+                                    Full width
+                                    <Switch
+                                        checked={
+                                            pageBlock &&
+                                            pageBlock.fullWidthChecked
+                                        }
+                                        onChange={handleFullWidthCheckedChange}
+                                        disabled={true}
+                                    />
+                                </div>
+                                <Divider />
+                            </>
+                        )}
+
+                        <ListButton
+                            content="Duplicate Page"
+                            onClick={handleDuplicatePage}
+                        />
+                        <ListButton
+                            content={MESSAGES.COPY_LINK}
+                            onClick={handleCopy}
+                        />
+                        <Divider />
+                        {BooleanExportMarkdown && (
+                            <ListButton
+                                content="Export As Markdown"
+                                onClick={handleExportMarkdown}
+                            />
+                        )}
+                        {BooleanExportHtml && (
+                            <ListButton
+                                content="Export As HTML"
+                                onClick={handleExportHtml}
+                            />
+                        )}
+                        {BooleanExportPdf && (
+                            <ListButton
+                                content="Export As PDF"
+                                onClick={handleCopy}
+                            />
+                        )}
+                        <Divider />
+                        {BooleanImportWorkspace && (
+                            <ListButton
+                                content="Import Workspace"
+                                onClick={handleImportWorkspace}
+                            />
+                        )}
+                        {BooleanExportWorkspace && (
+                            <ListButton
+                                content="Export Workspace"
+                                onClick={handleExportWorkspace}
+                            />
+                        )}
+
+                        <p className="textDescription">
+                            Last edited by {user && user.nickname}
+                            <br />
+                            {pageBlock &&
+                                `${format(
+                                    new Date(pageBlock.lastUpdated),
+                                    'MM/dd/yyyy hh:mm'
+                                )}`}
+                        </p>
+
+                        <Snackbar
+                            anchorOrigin={{
+                                vertical: 'bottom',
+                                horizontal: 'center',
+                            }}
+                            open={alertOpen}
+                            message={MESSAGES.COPY_LINK_SUCCESS}
+                            key={'bottomcenter'}
+                            autoHideDuration={2000}
+                            onClose={handleAlertClose}
+                        />
+                    </PageSettingPortalContainer>
+                }
+            >
+                <MoreIcon />
+            </Popover>
+        </BtnPageSettingContainer>
+    );
+}
+
+export { PageSettingPortal };
diff --git a/libs/components/layout/src/header/PageSharePortal.tsx b/libs/components/layout/src/header/PageSharePortal.tsx
new file mode 100644
index 000000000..d311b403b
--- /dev/null
+++ b/libs/components/layout/src/header/PageSharePortal.tsx
@@ -0,0 +1,146 @@
+import style9 from 'style9';
+import LanguageIcon from '@mui/icons-material/Language';
+import { useState, MouseEvent } from 'react';
+import InsertLinkIcon from '@mui/icons-material/InsertLink';
+import ShareIcon from '@mui/icons-material/Share';
+import {
+    MuiSnackbar as Snackbar,
+    MuiButton as Button,
+    MuiDivider as Divider,
+    MuiInputBase as InputBase,
+    MuiPaper as Paper,
+    MuiSwitch as Switch,
+    Popover,
+} from '@toeverything/components/ui';
+import { copyToClipboard } from '@toeverything/utils';
+
+const styles = style9.create({
+    pageShareBox: {
+        width: '500px',
+        padding: '30px 20px 50px 20px',
+    },
+    btnPageShare: {
+        width: '24px',
+        height: '24px',
+    },
+    pageShareBoxIcon: {
+        position: 'absolute',
+        left: '5px',
+        top: '10px',
+        color: 'var(--color-gray-400)',
+    },
+    pageShareBoxForWeb: {
+        position: 'relative',
+        paddingLeft: '40px',
+        borderBottom: '1px solid var(--color-gray-400))',
+        marginBottom: '15px',
+    },
+    pageShareBoxSwitch: {
+        position: 'absolute',
+        right: '5px',
+        top: '10px',
+    },
+    pageShareBoxForWebP1: {
+        fontWeight: 'bold',
+        marginBottom: '5px',
+    },
+    pageShareBoxForWebP2: {
+        color: 'var(--color-gray-400)',
+    },
+    copyLinkBtn: {
+        marginTop: '15px',
+        float: 'right',
+        cursor: 'pointer',
+    },
+    copyLinkcon: {
+        verticalAlign: 'middle',
+    },
+});
+const MESSAGES = {
+    COPY_LINK: ' Copy Link',
+    INVITE: 'Add people,emails, or groups',
+    SHARE_TO_WEB: 'Share to web',
+    SHARE_TO_ANYONE: 'Publish and share link with any one',
+    COPY_LINK_SUCCESS: 'Copyed link to clipboard',
+};
+function PageSharePortal() {
+    const [alertOpen, setAlertOpen] = useState(false);
+    const handleCopy = () => {
+        copyToClipboard(window.location.href);
+        setAlertOpen(true);
+    };
+    const handleAlertClose = () => {
+        setAlertOpen(false);
+    };
+
+    return (
+        <div>
+            <Popover
+                placement="bottom-start"
+                trigger="click"
+                content={
+                    <div className={styles('pageShareBox')}>
+                        <div className={styles('pageShareBoxForWeb')}>
+                            <LanguageIcon
+                                className={styles('pageShareBoxIcon')}
+                            />
+                            <p className={styles('pageShareBoxForWebP1')}>
+                                {MESSAGES.SHARE_TO_WEB}
+                            </p>
+                            <p className={styles('pageShareBoxForWebP2')}>
+                                {MESSAGES.SHARE_TO_ANYONE}
+                            </p>
+                            <div className={styles('pageShareBoxSwitch')}>
+                                <Switch />
+                            </div>
+                        </div>
+
+                        <div>
+                            <Paper
+                                component="form"
+                                sx={{
+                                    p: '0px',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    width: 460,
+                                }}
+                            >
+                                <InputBase
+                                    sx={{ ml: 1, flex: 1 }}
+                                    placeholder={MESSAGES.INVITE}
+                                />
+                                <Button variant="contained">Invite</Button>
+                            </Paper>
+                        </div>
+                        <div>
+                            <a
+                                className={styles('copyLinkBtn')}
+                                onClick={handleCopy}
+                            >
+                                <InsertLinkIcon
+                                    className={styles('copyLinkcon')}
+                                />
+                                {MESSAGES.COPY_LINK}
+                            </a>
+                        </div>
+                        <Snackbar
+                            anchorOrigin={{
+                                vertical: 'bottom',
+                                horizontal: 'center',
+                            }}
+                            open={alertOpen}
+                            message={MESSAGES.COPY_LINK_SUCCESS}
+                            key={'bottomcenter'}
+                            autoHideDuration={2000}
+                            onClose={handleAlertClose}
+                        />
+                    </div>
+                }
+            >
+                <ShareIcon style={{ marginTop: '8px' }} />
+            </Popover>
+        </div>
+    );
+}
+
+export { PageSharePortal };
diff --git a/libs/components/layout/src/header/Tempnav.tsx b/libs/components/layout/src/header/Tempnav.tsx
new file mode 100644
index 000000000..f2183be86
--- /dev/null
+++ b/libs/components/layout/src/header/Tempnav.tsx
@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import { NavLink } from 'react-router-dom';
+
+import {
+    MuiButton as Button,
+    MuiMenu as Menu,
+    MuiMenuItem as MenuItem,
+} from '@toeverything/components/ui';
+
+export function TempLinkRouter() {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    return (
+        <div>
+            <Button onClick={e => setAnchorEl(e.currentTarget)} sx={{ mr: 4 }}>
+                Debug Routers
+            </Button>
+            <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+                <MenuItem onClick={handleClose}>
+                    <NavLink to="/agenda/calendar">/agenda/calendar</NavLink>
+                </MenuItem>
+                <MenuItem onClick={handleClose}>
+                    <NavLink to="/agenda/tasks">/agenda/tasks</NavLink>
+                </MenuItem>
+                <MenuItem onClick={handleClose}>
+                    <NavLink to="/agenda/today">/agenda/today</NavLink>
+                </MenuItem>
+                <MenuItem onClick={handleClose}>
+                    <NavLink to="/agenda/">/agenda/</NavLink>
+                </MenuItem>
+                <MenuItem>
+                    <NavLink to="/workspaceId/labels">
+                        /workspaceId/labels
+                    </NavLink>
+                </MenuItem>
+                <MenuItem>
+                    <NavLink to="/workspaceId/pages">
+                        /workspaceId/pages
+                    </NavLink>
+                </MenuItem>
+                <MenuItem>
+                    <NavLink to="/workspaceId/docId">
+                        /workspaceId/docId
+                    </NavLink>
+                </MenuItem>
+                <MenuItem>
+                    <NavLink to="/workspaceId/">/workspaceId/</NavLink>
+                </MenuItem>
+                <MenuItem>
+                    <NavLink to="/login">/login</NavLink>
+                </MenuItem>
+                <MenuItem>
+                    <NavLink to="/recent">/recent</NavLink>
+                </MenuItem>
+                <MenuItem>
+                    <NavLink to="/search">/search</NavLink>
+                </MenuItem>
+                <MenuItem>
+                    <NavLink to="/settings">/settings</NavLink>
+                </MenuItem>
+                <MenuItem>
+                    <NavLink to="/shared">/shared</NavLink>
+                </MenuItem>
+                <MenuItem>
+                    <NavLink to="/started">/started</NavLink>
+                </MenuItem>
+                <MenuItem>
+                    <NavLink to="/">/</NavLink>
+                </MenuItem>
+            </Menu>
+        </div>
+    );
+}
+
+export default TempLinkRouter;
diff --git a/libs/components/layout/src/header/Title.tsx b/libs/components/layout/src/header/Title.tsx
new file mode 100644
index 000000000..6c293709e
--- /dev/null
+++ b/libs/components/layout/src/header/Title.tsx
@@ -0,0 +1,85 @@
+import { useEffect, useState, useCallback } from 'react';
+import { useParams } from 'react-router-dom';
+import { Typography, styled } from '@toeverything/components/ui';
+
+import { services } from '@toeverything/datasource/db-service';
+
+/* card.7: Demand changes, temporarily closed, see https://github.com/toeverything/AFFiNE/issues/522 */
+// import { usePageTree} from '@toeverything/components/layout';
+// import { pickPath } from './utils';
+
+export const CurrentPageTitle = () => {
+    const params = useParams();
+    const { workspace_id } = params;
+    const [pageId, setPageId] = useState<string>('');
+    const [pageTitle, setPageTitle] = useState<string | undefined>();
+
+    useEffect(() => {
+        if (params['*']) {
+            setPageId(params['*'].split('/')[0]);
+        }
+    }, [params]);
+
+    const fetchPageTitle = useCallback(async () => {
+        if (!workspace_id || !pageId) return;
+        const [pageEditorBlock] = await services.api.editorBlock.get({
+            workspace: workspace_id,
+            ids: [pageId],
+        });
+        /* card.7 */
+        /* If the id is unique, only one path will be matched */
+        // const routes = pickPath(items, pageId).filter(item => item.length)?.[0];
+
+        setPageTitle(
+            pageEditorBlock?.properties?.text?.value
+                ?.map(v => v.text)
+                .join('') ?? 'Untitled'
+        );
+    }, [pageId, workspace_id]);
+
+    useEffect(() => {
+        fetchPageTitle();
+    }, [fetchPageTitle]);
+
+    useEffect(() => {
+        if (!workspace_id || !pageId || pageTitle === undefined)
+            return () => {};
+
+        let unobserve: () => void;
+        const auto_update_title = async () => {
+            // console.log(';; title registration auto update');
+            unobserve = await services.api.editorBlock.observe(
+                { workspace: workspace_id, id: pageId },
+                businessBlock => {
+                    // console.log(';; auto_update_title', businessBlock);
+                    fetchPageTitle();
+                }
+            );
+        };
+        auto_update_title();
+
+        return () => {
+            // unobserve?.();
+        };
+    }, [fetchPageTitle, pageId, pageTitle, workspace_id]);
+
+    useEffect(() => {
+        document.title = pageTitle || '';
+    }, [pageTitle]);
+
+    return pageTitle ? (
+        <ContentText type="sm" title={pageTitle}>
+            {pageTitle}
+        </ContentText>
+    ) : null;
+};
+
+const ContentText = styled(Typography)(({ theme }) => {
+    return {
+        color: theme.affine.palette.primaryText,
+        maxWidth: '240px',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    };
+});
diff --git a/libs/components/layout/src/header/file-exporter/file-exporter.ts b/libs/components/layout/src/header/file-exporter/file-exporter.ts
new file mode 100644
index 000000000..428ae0dd6
--- /dev/null
+++ b/libs/components/layout/src/header/file-exporter/file-exporter.ts
@@ -0,0 +1,59 @@
+import { PageBlock } from '../types';
+import TurndownService from 'turndown';
+const FileExporter = {
+    exportFile: (filename: string, text: string, format: string) => {
+        const element = document.createElement('a');
+        element.setAttribute(
+            'href',
+            'data:' + format + ';charset=utf-8,' + encodeURIComponent(text)
+        );
+        element.setAttribute('download', filename);
+
+        element.style.display = 'none';
+        document.body.appendChild(element);
+
+        element.click();
+
+        document.body.removeChild(element);
+    },
+    decorateHtml: (pageTitle: string, htmlContent: string) => {
+        return `<!DOCTYPE html>
+        <html lang="en">
+        <head>
+          <meta charset="UTF-8">
+          <title>${pageTitle}</title>
+          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
+        </head>
+        <body>
+            <div style="margin:20px auto;width:800px" >
+               <div style="background-color: #fff;box-shadow: 0px 0px 5px #ccc;padding: 10px;">
+                 ${htmlContent}
+               </div>
+            </div>
+        </body>
+        </html>`;
+    },
+    decoreateAffineBrand: (pageTitle: string) => {
+        return pageTitle + ` Created in Affine`;
+    },
+    exportHtml: (pageTitle: string, htmlContent: string) => {
+        FileExporter.exportFile(
+            FileExporter.decoreateAffineBrand(pageTitle) + '.html',
+            FileExporter.decorateHtml(pageTitle, htmlContent),
+            'text/html'
+        );
+    },
+
+    exportMarkdown: (pageTitle: string, htmlContent: string) => {
+        const turndownService = new TurndownService();
+        const markdown = turndownService.turndown(htmlContent);
+
+        FileExporter.exportFile(
+            FileExporter.decoreateAffineBrand(pageTitle) + '.md',
+            markdown,
+            'text/plain'
+        );
+    },
+};
+
+export { FileExporter };
diff --git a/libs/components/layout/src/header/index.ts b/libs/components/layout/src/header/index.ts
new file mode 100644
index 000000000..6e28a48dc
--- /dev/null
+++ b/libs/components/layout/src/header/index.ts
@@ -0,0 +1,2 @@
+export { AffineHeader } from './Header';
+export { LayoutHeader } from './LayoutHeader';
diff --git a/libs/components/layout/src/header/types.ts b/libs/components/layout/src/header/types.ts
new file mode 100644
index 000000000..77b29ad7c
--- /dev/null
+++ b/libs/components/layout/src/header/types.ts
@@ -0,0 +1,7 @@
+interface PageBlock {
+    lastUpdated?: number;
+    fullWidthChecked?: boolean;
+    title?: string;
+}
+
+export { PageBlock };
diff --git a/libs/components/layout/src/header/use-layout-header.ts b/libs/components/layout/src/header/use-layout-header.ts
new file mode 100644
index 000000000..90722627d
--- /dev/null
+++ b/libs/components/layout/src/header/use-layout-header.ts
@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+type PageViewStatusType = 'editor' | 'board';
+
+export const useLayoutHeader = () => {
+    const [pageViewStatus, setPageViewStatus] =
+        useState<PageViewStatusType>('editor');
+
+    return {
+        pageViewStatus,
+        setPageViewStatus,
+    };
+};
diff --git a/libs/components/layout/src/header/user-menu-icon/UserMenuIcon.tsx b/libs/components/layout/src/header/user-menu-icon/UserMenuIcon.tsx
new file mode 100644
index 000000000..73b11ad24
--- /dev/null
+++ b/libs/components/layout/src/header/user-menu-icon/UserMenuIcon.tsx
@@ -0,0 +1,34 @@
+import { MuiAvatar as Avatar, Popover } from '@toeverything/components/ui';
+import { useUserAndSpaces } from '@toeverything/datasource/state';
+import { getUserDisplayName } from '@toeverything/utils';
+import { UserMenuList } from './UserMenuList';
+
+/**
+ * An icon is displayed by default, click the icon to display the popover, and the content of the popover is children.
+ */
+export const UserMenuIcon = () => {
+    const { user } = useUserAndSpaces();
+
+    return (
+        <Popover
+            content={<UserMenuList />}
+            placement="bottom-end"
+            trigger="click"
+        >
+            <Avatar
+                // onClick={handleClick}
+                sx={{
+                    width: 26,
+                    height: 26,
+                    mr: 4,
+                    cursor: 'pointer',
+                    fontSize: '1rem',
+                }}
+                alt={getUserDisplayName(user)}
+                src={user?.photo || ''}
+            />
+        </Popover>
+    );
+};
+
+export default UserMenuIcon;
diff --git a/libs/components/layout/src/header/user-menu-icon/UserMenuList.tsx b/libs/components/layout/src/header/user-menu-icon/UserMenuList.tsx
new file mode 100644
index 000000000..cee1d7e2a
--- /dev/null
+++ b/libs/components/layout/src/header/user-menu-icon/UserMenuList.tsx
@@ -0,0 +1,66 @@
+import { useMemo } from 'react';
+import { getAuth, signOut } from 'firebase/auth';
+
+import { LOGOUT_COOKIES, LOGOUT_LOCAL_STORAGE } from '@toeverything/utils';
+import { useUserAndSpaces } from '@toeverything/datasource/state';
+import {
+    MuiDivider as Divider,
+    MuiList as List,
+    MuiListItem as ListItem,
+    MuiListItemText as ListItemText,
+} from '@toeverything/components/ui';
+
+export const UserMenuList = () => {
+    const { user } = useUserAndSpaces();
+
+    const user_menu_data = useMemo(() => {
+        return [
+            // {
+            // text: 'Settings',
+            // onClick: () => {
+            // console.log('Open the settings panel');
+            // },
+            // },
+            {
+                text: user?.email || 'Unknown User',
+                showDivider: true,
+            },
+            {
+                text: 'Logout',
+                onClick: async () => {
+                    LOGOUT_LOCAL_STORAGE.forEach(name =>
+                        localStorage.removeItem(name)
+                    );
+                    // localStorage.clear();
+                    document.cookie = LOGOUT_COOKIES.map(
+                        name =>
+                            name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'
+                    ).join(' ');
+
+                    signOut(getAuth());
+
+                    window.location.href = '/';
+                },
+            },
+        ];
+    }, [user?.email]);
+
+    return (
+        <List component="nav" aria-label="user settings">
+            {user_menu_data.map(menu => {
+                const { text, onClick, showDivider } = menu;
+
+                return (
+                    <>
+                        <ListItem button onClick={onClick} key={text}>
+                            <ListItemText primary={text} />
+                        </ListItem>
+                        {showDivider && <Divider />}
+                    </>
+                );
+            })}
+        </List>
+    );
+};
+
+export default UserMenuList;
diff --git a/libs/components/layout/src/header/user-menu-icon/index.ts b/libs/components/layout/src/header/user-menu-icon/index.ts
new file mode 100644
index 000000000..218cd96d6
--- /dev/null
+++ b/libs/components/layout/src/header/user-menu-icon/index.ts
@@ -0,0 +1,3 @@
+import { UserMenuIcon } from './UserMenuIcon';
+export { UserMenuIcon };
+export default UserMenuIcon;
diff --git a/libs/components/layout/src/index.ts b/libs/components/layout/src/index.ts
new file mode 100644
index 000000000..69a6d3ff7
--- /dev/null
+++ b/libs/components/layout/src/index.ts
@@ -0,0 +1,3 @@
+export * from './header';
+export * from './settings-sidebar';
+export * from './workspace-sidebar';
diff --git a/libs/components/layout/src/settings-sidebar/Comments/CommentItem.tsx b/libs/components/layout/src/settings-sidebar/Comments/CommentItem.tsx
new file mode 100644
index 000000000..8ebc4baf2
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Comments/CommentItem.tsx
@@ -0,0 +1,120 @@
+import { Fragment, useState, useEffect, useCallback } from 'react';
+import { styled, MuiClickAwayListener } from '@toeverything/components/ui';
+import { services } from '@toeverything/datasource/db-service';
+
+import { QuotedContent } from './item/QuotedContent';
+import { ReplyItem } from './item/ReplyItem';
+import { ReplyInput } from './item/ReplyInput';
+import { CommentInfo } from './type';
+
+export const CommentItem = (props: CommentInfo) => {
+    const {
+        id,
+        workspace,
+        attachedToBlocksIds,
+        quote,
+        replyList,
+        resolve,
+        activeCommentId,
+        resolveComment,
+    } = props;
+    const [isActive, setIsActive] = useState(false);
+
+    const handleSubmitComment = useCallback(
+        async (value: string) => {
+            await services.api.commentService.createReply({
+                workspace,
+                parentId: id,
+                content: { value: [{ text: value }] },
+            });
+        },
+        [id, workspace]
+    );
+
+    const handleToggleResolveComment = useCallback(async () => {
+        resolveComment(attachedToBlocksIds[0], id);
+        await services.api.commentService.updateComment({
+            workspace,
+            id,
+            attachedToBlocksIds,
+            resolve: !resolve,
+        });
+    }, [attachedToBlocksIds, id, resolve, resolveComment, workspace]);
+
+    useEffect(() => {
+        if (activeCommentId === id) {
+            setIsActive(true);
+        } else {
+            setIsActive(false);
+        }
+    }, [activeCommentId, id]);
+
+    return (
+        <MuiClickAwayListener onClickAway={() => setIsActive(false)}>
+            <StyledContainerForCommentItem
+                isActive={isActive}
+                onClick={() => setIsActive(true)}
+            >
+                <StyledItemContent>
+                    <QuotedContent
+                        content={quote.value[0].text}
+                        onToggle={handleToggleResolveComment}
+                    />
+                    {replyList?.map((reply, index) => {
+                        if (index === replyList.length - 1) {
+                            return <ReplyItem {...reply} key={reply.id} />;
+                        }
+
+                        return (
+                            <Fragment key={reply.id}>
+                                <ReplyItem {...reply} />
+                                <StyledReplySeparator />
+                            </Fragment>
+                        );
+                    })}
+                    {isActive ? (
+                        <ReplyInput onSubmit={handleSubmitComment} />
+                    ) : null}
+                </StyledItemContent>
+            </StyledContainerForCommentItem>
+        </MuiClickAwayListener>
+    );
+};
+
+const StyledContainerForCommentItem = styled('div', {
+    shouldForwardProp: (prop: string) => !['isActive'].includes(prop),
+})<{ isActive?: boolean }>(({ theme, isActive }) => {
+    return {
+        position: 'relative',
+        width: 322,
+        border: `2px solid ${theme.affine.palette.menuSeparator}`,
+        borderRadius: theme.affine.shape.borderRadius,
+        marginBottom: theme.affine.spacing.smSpacing,
+        left: isActive ? -58 : 0,
+        transition: 'left 150ms ease-in-out',
+        backgroundColor: theme.affine.palette.white,
+        '&:hover': {
+            boxShadow: theme.affine.shadows.shadowSxDownLg,
+        },
+    };
+});
+
+const StyledItemContent = styled('div')(({ theme }) => {
+    return {
+        marginLeft: theme.affine.spacing.main,
+        marginRight: theme.affine.spacing.main,
+        marginTop: theme.affine.spacing.smSpacing,
+        marginBottom: theme.affine.spacing.smSpacing,
+    };
+});
+
+const StyledReplySeparator = styled('div')(({ theme }) => {
+    return {
+        width: 290,
+        height: 1,
+        marginTop: 6,
+        marginBottom: 6,
+        color: theme.affine.palette.menuSeparator,
+        backgroundColor: theme.affine.palette.menuSeparator,
+    };
+});
diff --git a/libs/components/layout/src/settings-sidebar/Comments/Comments.tsx b/libs/components/layout/src/settings-sidebar/Comments/Comments.tsx
new file mode 100644
index 000000000..3d03e3e82
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Comments/Comments.tsx
@@ -0,0 +1,36 @@
+import { styled } from '@toeverything/components/ui';
+import { useComments } from './use-comments';
+import { CommentItem } from './CommentItem';
+
+type CommentsProps = {
+    activeCommentId: string;
+    resolveComment: (blockId: string, commentId: string) => void;
+};
+
+export const Comments = ({
+    activeCommentId,
+    resolveComment,
+}: CommentsProps) => {
+    const { comments } = useComments();
+
+    return (
+        <StyledContainerForComments className="id-comments-panel">
+            {comments?.map(comment => {
+                return (
+                    <CommentItem
+                        {...comment}
+                        activeCommentId={activeCommentId}
+                        resolveComment={resolveComment}
+                        key={comment.id}
+                    />
+                );
+            })}
+        </StyledContainerForComments>
+    );
+};
+
+const StyledContainerForComments = styled('div')(({ theme }) => {
+    return {
+        position: 'relative',
+    };
+});
diff --git a/libs/components/layout/src/settings-sidebar/Comments/index.ts b/libs/components/layout/src/settings-sidebar/Comments/index.ts
new file mode 100644
index 000000000..32f81fc01
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Comments/index.ts
@@ -0,0 +1 @@
+export { Comments } from './Comments';
diff --git a/libs/components/layout/src/settings-sidebar/Comments/item/CommentContent.tsx b/libs/components/layout/src/settings-sidebar/Comments/item/CommentContent.tsx
new file mode 100644
index 000000000..2b63278ab
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Comments/item/CommentContent.tsx
@@ -0,0 +1,21 @@
+import { styled } from '@toeverything/components/ui';
+
+type CommentContentProps = {
+    content: string;
+};
+
+export const CommentContent = ({ content }: CommentContentProps) => {
+    return (
+        <StyledContainerForCommentContent>
+            <p>{content || ''}</p>
+        </StyledContainerForCommentContent>
+    );
+};
+
+const StyledContainerForCommentContent = styled('div')(({ theme }) => {
+    return {
+        display: 'flex',
+        color: theme.affine.palette.primaryText,
+        marginTop: theme.affine.spacing.xsSpacing,
+    };
+});
diff --git a/libs/components/layout/src/settings-sidebar/Comments/item/CommentedByUser.tsx b/libs/components/layout/src/settings-sidebar/Comments/item/CommentedByUser.tsx
new file mode 100644
index 000000000..97e7be197
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Comments/item/CommentedByUser.tsx
@@ -0,0 +1,54 @@
+import { useMemo } from 'react';
+import { styled, MuiAvatar as Avatar } from '@toeverything/components/ui';
+import { useUserAndSpaces } from '@toeverything/datasource/state';
+import { getUserDisplayName } from '@toeverything/utils';
+
+type CommentedByUserProps = {
+    username: string;
+    updateTime: number;
+};
+
+export const CommentedByUser = ({
+    username,
+    updateTime: updatedTime,
+}: CommentedByUserProps) => {
+    const updateDatetime = useMemo(() => new Date(updatedTime), [updatedTime]);
+    //TODO temp
+    const { user } = useUserAndSpaces();
+
+    return (
+        <StyledContainerForCommentedByUser>
+            <Avatar sx={{ bgcolor: '#9176FF' }} src={user?.photo || ''}>
+                {/* {username ? username.slice(0, 2).toLocaleUpperCase() : ''} */}
+                {getUserDisplayName(user)}
+            </Avatar>
+            <StyledCommentUserInfo>
+                <div> {getUserDisplayName(user)}</div>
+                <StyledCommentTime>
+                    {updateDatetime.toTimeString().slice(0, 5)}{' '}
+                    {updateDatetime.toDateString().slice(4, 10)}
+                </StyledCommentTime>
+            </StyledCommentUserInfo>
+        </StyledContainerForCommentedByUser>
+    );
+};
+
+const StyledContainerForCommentedByUser = styled('div')(({ theme }) => {
+    return {
+        display: 'flex',
+        alignItems: 'center',
+        marginBottom: 6,
+    };
+});
+
+const StyledCommentUserInfo = styled('div')(({ theme }) => {
+    return {
+        marginLeft: theme.affine.spacing.smSpacing,
+    };
+});
+
+const StyledCommentTime = styled('div')(({ theme }) => {
+    return {
+        color: theme.affine.palette.icons,
+    };
+});
diff --git a/libs/components/layout/src/settings-sidebar/Comments/item/QuotedContent.tsx b/libs/components/layout/src/settings-sidebar/Comments/item/QuotedContent.tsx
new file mode 100644
index 000000000..0e50baafc
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Comments/item/QuotedContent.tsx
@@ -0,0 +1,53 @@
+import { styled } from '@toeverything/components/ui';
+import { DoneIcon } from '@toeverything/components/icons';
+
+type QuotedContentProps = {
+    content: string;
+    onToggle: () => void;
+};
+
+export const QuotedContent = ({ content, onToggle }: QuotedContentProps) => {
+    return (
+        <StyledContainerForQuotedContent>
+            <StyledVerticalLine />
+            <StyledQuotedContent>{content || ''}</StyledQuotedContent>
+            <StyledResolveAction onClick={onToggle} fontSize="small" />
+        </StyledContainerForQuotedContent>
+    );
+};
+
+const StyledContainerForQuotedContent = styled('div')(({ theme }) => {
+    return {
+        display: 'flex',
+        // marginBottom: theme.affine.spacing.xsSpacing,
+        marginBottom: 6,
+    };
+});
+
+const StyledVerticalLine = styled('div')(({ theme }) => {
+    return {
+        width: 2,
+        height: 18,
+        marginRight: theme.affine.spacing.smSpacing,
+        backgroundColor: '#97EEF2',
+    };
+});
+
+const StyledQuotedContent = styled('div')(({ theme }) => {
+    return {
+        color: theme.affine.palette.primaryText,
+        flex: '1 1 0',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+    };
+});
+
+const StyledResolveAction = styled(DoneIcon)(({ theme }) => {
+    return {
+        marginLeft: theme.affine.spacing.xsSpacing,
+        color: theme.affine.palette.primary,
+        // fontSize: '1.2rem',
+        cursor: 'pointer',
+    };
+});
diff --git a/libs/components/layout/src/settings-sidebar/Comments/item/ReplyInput.tsx b/libs/components/layout/src/settings-sidebar/Comments/item/ReplyInput.tsx
new file mode 100644
index 000000000..b9e7015dc
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Comments/item/ReplyInput.tsx
@@ -0,0 +1,45 @@
+import {
+    useState,
+    useCallback,
+    KeyboardEventHandler,
+    ChangeEvent,
+} from 'react';
+import { styled } from '@toeverything/components/ui';
+
+export const ReplyInput = (props: any) => {
+    const { onSubmit } = props;
+    const [value, setValue] = useState('');
+
+    const onKeyDown: KeyboardEventHandler<HTMLInputElement> = e => {
+        if (!e.metaKey && !e.shiftKey && e.code === 'Enter' && value) {
+            onSubmit && onSubmit(value);
+            setValue('');
+        }
+    };
+
+    const handleInputChange = useCallback(
+        (e: ChangeEvent<HTMLInputElement>) => {
+            setValue(e.target.value.trim());
+        },
+        []
+    );
+
+    return (
+        <StyledContainerForReplyInput className="affine-comment-reply-input">
+            <input
+                type="text"
+                placeholder={'reply...'}
+                onKeyDown={onKeyDown}
+                onChange={handleInputChange}
+                value={value}
+            />
+        </StyledContainerForReplyInput>
+    );
+};
+
+const StyledContainerForReplyInput = styled('div')(({ theme }) => {
+    return {
+        // marginTop: theme.affine.spacing.xsSpacing,
+        marginTop: 8,
+    };
+});
diff --git a/libs/components/layout/src/settings-sidebar/Comments/item/ReplyItem.tsx b/libs/components/layout/src/settings-sidebar/Comments/item/ReplyItem.tsx
new file mode 100644
index 000000000..30edeb9ca
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Comments/item/ReplyItem.tsx
@@ -0,0 +1,16 @@
+import { styled } from '@toeverything/components/ui';
+import type { CommentReply } from '@toeverything/datasource/db-service';
+
+import { CommentContent } from './CommentContent';
+import { CommentedByUser } from './CommentedByUser';
+
+export const ReplyItem = (props: CommentReply) => {
+    const { creator, lastUpdated, content } = props;
+
+    return (
+        <>
+            <CommentedByUser username={creator} updateTime={lastUpdated} />
+            <CommentContent content={content.value[0].text} />
+        </>
+    );
+};
diff --git a/libs/components/layout/src/settings-sidebar/Comments/type.ts b/libs/components/layout/src/settings-sidebar/Comments/type.ts
new file mode 100644
index 000000000..840e5eb79
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Comments/type.ts
@@ -0,0 +1,10 @@
+import type {
+    Comment,
+    CommentReply,
+} from '@toeverything/datasource/db-service';
+
+export interface CommentInfo extends Comment {
+    replyList?: CommentReply[];
+    activeCommentId?: string;
+    resolveComment: (blockId: string, commentId: string) => void;
+}
diff --git a/libs/components/layout/src/settings-sidebar/Comments/use-comments.ts b/libs/components/layout/src/settings-sidebar/Comments/use-comments.ts
new file mode 100644
index 000000000..18d3db4bc
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Comments/use-comments.ts
@@ -0,0 +1,129 @@
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import { services } from '@toeverything/datasource/db-service';
+import type { Virgo } from '@toeverything/components/editor-core';
+import {
+    useCurrentEditors,
+    useShowSettingsSidebar,
+} from '@toeverything/datasource/state';
+import type { CommentInfo } from './type';
+
+export const useComments = () => {
+    const { workspace_id: workspaceId, page_id: pageId } = useParams();
+
+    const [comments, setComments] = useState<CommentInfo[]>([]);
+    const [observeIds, setObserveIds] = useState<string[]>([]);
+
+    const fetchComments = useCallback(async () => {
+        if (!workspaceId || !pageId) return;
+        const ids = [];
+        const pageComment = await services.api.commentService.getPageComments({
+            workspace: workspaceId,
+            pageId: pageId,
+        });
+        ids.push(pageComment.id);
+
+        let comments = await services.api.commentService.getComments({
+            workspace: workspaceId,
+            ids: pageComment?.children,
+        });
+
+        comments = await Promise.all(
+            comments.map(async comment => {
+                const commentInfo = comment as CommentInfo;
+                commentInfo.replyList =
+                    await services.api.commentService.getReplyList({
+                        workspace: workspaceId,
+                        ids: comment.children,
+                    });
+                ids.push(comment.id);
+                ids.push(...comment.children);
+                return commentInfo;
+            })
+        );
+
+        setComments(comments.reverse() as CommentInfo[]);
+        setObserveIds(ids);
+    }, [pageId, workspaceId]);
+
+    useEffect(() => {
+        fetchComments();
+    }, [fetchComments]);
+
+    // first simple implementation
+    useEffect(() => {
+        const unobserveList: any[] = [];
+        observeIds.forEach(async id => {
+            const unobserve = await services.api.editorBlock.observe(
+                { workspace: workspaceId, id: id },
+                block => {
+                    fetchComments();
+                }
+            );
+            unobserveList.push(unobserve);
+        });
+        return () => {
+            unobserveList.forEach(unobserve => unobserve?.());
+        };
+    }, [fetchComments, workspaceId, observeIds]);
+
+    return { comments };
+};
+
+export const useActiveComment = () => {
+    const { workspace_id: workspaceId, page_id: pageId } = useParams();
+    const { currentEditors } = useCurrentEditors();
+    const editor = useMemo(() => {
+        return currentEditors[pageId] as Virgo;
+    }, [currentEditors, pageId]);
+
+    const [activeCommentId, setActiveCommentId] = useState('');
+
+    const { setShowSettingsSidebar: setShowInfoSidebar } =
+        useShowSettingsSidebar();
+
+    const resolveComment = useCallback(
+        (blockId: string, commentId: string) => {
+            editor?.blockHelper.resolveComment(blockId, commentId);
+        },
+        [editor]
+    );
+
+    useEffect(() => {
+        if (!editor) return;
+        editor.selection.onSelectEnd(info => {
+            // TODO: only do the following when sidebar is open
+
+            const { type, anchorNode } = info;
+            if (type === 'None' || !anchorNode) return;
+            const currentSelectionInTextBlock =
+                editor.blockHelper.getCurrentSelection(anchorNode.id);
+            if (!currentSelectionInTextBlock) return;
+
+            // get possible commentId from selection
+            let maybeActiveCommentsIds = [] as string[];
+
+            if (editor.blockHelper.isSelectionCollapsed(anchorNode.id)) {
+                // TODO: search before/after for comment text node, improve this
+                maybeActiveCommentsIds =
+                    editor.blockHelper.getCommentsIdsBySelection(anchorNode.id);
+            } else {
+                maybeActiveCommentsIds =
+                    editor.blockHelper.getCommentsIdsBySelection(anchorNode.id);
+            }
+
+            // TODO: set the shortest comment as active comment instead of the first
+            setActiveCommentId(
+                maybeActiveCommentsIds.length ? maybeActiveCommentsIds[0] : ''
+            );
+        });
+    }, [currentEditors, editor]);
+
+    useEffect(() => {
+        if (activeCommentId) {
+            setShowInfoSidebar(true);
+        }
+    }, [activeCommentId, setShowInfoSidebar]);
+
+    return { activeCommentId, resolveComment };
+};
diff --git a/libs/components/layout/src/settings-sidebar/Comments/utils.ts b/libs/components/layout/src/settings-sidebar/Comments/utils.ts
new file mode 100644
index 000000000..560f73a09
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Comments/utils.ts
@@ -0,0 +1,16 @@
+import type {
+    ReturnEditorBlock,
+    Comment,
+} from '@toeverything/datasource/db-service';
+
+export const getCommentsFromEditorBlocks = (
+    editorBlocks: ReturnEditorBlock[]
+) => {
+    return [] as Comment[];
+};
+
+export const getCommentReplyFromEditorBlock = (
+    editorBlock: ReturnEditorBlock
+) => {
+    return {};
+};
diff --git a/libs/components/layout/src/settings-sidebar/ContainerTabs/ContainerTabs.tsx b/libs/components/layout/src/settings-sidebar/ContainerTabs/ContainerTabs.tsx
new file mode 100644
index 000000000..a206cd4cd
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/ContainerTabs/ContainerTabs.tsx
@@ -0,0 +1,140 @@
+import { cloneElement, useMemo, useCallback, type ReactElement } from 'react';
+import { styled } from '@toeverything/components/ui';
+import {
+    CommentIcon,
+    LayoutIcon,
+    SettingsIcon,
+} from '@toeverything/components/icons';
+import { LayoutSettings } from '../Layout';
+import { Comments } from '../Comments';
+import { useActiveComment } from '../Comments/use-comments';
+import { SettingsPanel } from '../Settings';
+import { TabItemTitle } from './TabItemTitle';
+import { useTabs } from './use-tabs';
+
+const _defaultTabsKeys = ['layout', 'comment', 'settings'] as const;
+
+export const ContainerTabs = () => {
+    const { activeCommentId, resolveComment } = useActiveComment();
+
+    const getSettingsTabsData = useCallback((): SettingsTabItemType[] => {
+        return [
+            {
+                type: 'layout',
+                text: 'Layout',
+                icon: (
+                    <IconWrapper>
+                        <LayoutIcon />
+                    </IconWrapper>
+                ),
+                panel: <LayoutSettings />,
+            },
+            {
+                type: 'comment',
+                text: 'Comment',
+                icon: (
+                    <IconWrapper>
+                        <CommentIcon />
+                    </IconWrapper>
+                ),
+                panel: (
+                    <StyledSidebarContent>
+                        <Comments
+                            activeCommentId={activeCommentId}
+                            resolveComment={resolveComment}
+                        />
+                    </StyledSidebarContent>
+                ),
+            },
+            {
+                type: 'settings',
+                text: 'Settings',
+                icon: (
+                    <IconWrapper>
+                        <SettingsIcon />
+                    </IconWrapper>
+                ),
+                panel: <SettingsPanel />,
+            },
+        ];
+    }, [activeCommentId, resolveComment]);
+
+    const settingsTabsData = useMemo(() => {
+        return getSettingsTabsData();
+    }, [getSettingsTabsData]);
+
+    const [activeTab, setActiveTab] = useTabs(
+        _defaultTabsKeys as unknown as string[],
+        'settings'
+    );
+
+    return (
+        <>
+            <StyledTabsTitlesContainer>
+                {settingsTabsData.map(tab => {
+                    const { type, text, icon } = tab;
+                    return (
+                        <TabItemTitle
+                            title={text}
+                            icon={icon}
+                            isActive={activeTab === type}
+                            onClick={() => {
+                                setActiveTab(type);
+                            }}
+                            key={type}
+                        />
+                    );
+                })}
+            </StyledTabsTitlesContainer>
+            <StyledTabsPanelsContainer>
+                {settingsTabsData.map(tab => {
+                    const { type, panel } = tab;
+                    return type === activeTab
+                        ? cloneElement(panel, { key: type })
+                        : null;
+                })}
+            </StyledTabsPanelsContainer>
+        </>
+    );
+};
+
+const StyledTabsTitlesContainer = styled('div')(({ theme }) => {
+    return {
+        display: 'flex',
+        justifyContent: 'space-between',
+        marginTop: 24,
+        marginBottom: 24,
+        marginLeft: theme.affine.spacing.smSpacing,
+        marginRight: theme.affine.spacing.smSpacing,
+    };
+});
+
+const StyledTabsPanelsContainer = styled('div')(({ theme }) => {
+    return {
+        height: 'calc(100vh - 80px)',
+        borderTop: `1px solid ${theme.affine.palette.tagHover}`,
+    };
+});
+
+type SettingsTabsTypes = typeof _defaultTabsKeys[number];
+
+type SettingsTabItemType = {
+    type: SettingsTabsTypes;
+    text: string;
+    icon: ReactElement;
+    panel: ReactElement;
+};
+
+const StyledSidebarContent = styled('div')(({ theme }) => {
+    return {
+        marginLeft: theme.affine.spacing.lgSpacing,
+    };
+});
+
+const IconWrapper = styled('div')({
+    fontSize: 0,
+
+    '& > svg': {
+        fontSize: '20px',
+    },
+});
diff --git a/libs/components/layout/src/settings-sidebar/ContainerTabs/TabItemTitle.tsx b/libs/components/layout/src/settings-sidebar/ContainerTabs/TabItemTitle.tsx
new file mode 100644
index 000000000..899b9b25a
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/ContainerTabs/TabItemTitle.tsx
@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+import { styled, ListItem, ListIcon } from '@toeverything/components/ui';
+
+type TabItemTitleProps = {
+    icon: ReactNode;
+    title: string;
+    isActive?: boolean;
+    onClick?: () => void;
+};
+
+export const TabItemTitle = ({
+    icon,
+    title,
+    isActive,
+    onClick,
+}: TabItemTitleProps) => {
+    return (
+        <Container active={isActive} onClick={onClick}>
+            <IconWrapper>{icon}</IconWrapper>
+            <StyledTitleText>{title}</StyledTitleText>
+        </Container>
+    );
+};
+
+const Container = styled(ListItem)({
+    width: '110px',
+    height: '32px',
+});
+
+const IconWrapper = styled(ListIcon)({
+    marginRight: '4px',
+});
+
+const StyledTitleText = styled('span')(({ theme }) => {
+    return {
+        color: theme.affine.palette.menu,
+    };
+});
diff --git a/libs/components/layout/src/settings-sidebar/ContainerTabs/index.ts b/libs/components/layout/src/settings-sidebar/ContainerTabs/index.ts
new file mode 100644
index 000000000..f6243db9f
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/ContainerTabs/index.ts
@@ -0,0 +1 @@
+export { ContainerTabs } from './ContainerTabs';
diff --git a/libs/components/layout/src/settings-sidebar/ContainerTabs/use-tabs.ts b/libs/components/layout/src/settings-sidebar/ContainerTabs/use-tabs.ts
new file mode 100644
index 000000000..dad121a83
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/ContainerTabs/use-tabs.ts
@@ -0,0 +1,58 @@
+import { useRef, useEffect, useState, useMemo } from 'react';
+
+function usePrevious<T>(value: T) {
+    const ref = useRef<T>();
+    useEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
+}
+
+export function useTabs<K extends string>(tabs: K[], defaultTab?: K | null) {
+    const state = useState<K | null>();
+    const [selectedTab, setSelectedTab] = state;
+
+    const activeIndex = useMemo(() => {
+        if (selectedTab) {
+            return tabs.indexOf(selectedTab);
+        }
+        return -1;
+    }, [selectedTab, tabs]);
+
+    const previousActiveIndex = usePrevious(activeIndex);
+
+    useEffect(() => {
+        if (tabs.length === 0) {
+            setSelectedTab(undefined);
+            return;
+        }
+
+        if (
+            selectedTab === null ||
+            (selectedTab && tabs.includes(selectedTab))
+        ) {
+            return;
+        }
+
+        if (
+            typeof previousActiveIndex === 'number' &&
+            previousActiveIndex >= 0 &&
+            (tabs[previousActiveIndex] || tabs[previousActiveIndex - 1])
+        ) {
+            setSelectedTab(
+                tabs[previousActiveIndex] || tabs[previousActiveIndex - 1]
+            );
+            return;
+        }
+
+        if (defaultTab === null) {
+            return;
+        }
+
+        setSelectedTab(
+            defaultTab && tabs.includes(defaultTab) ? defaultTab : tabs[0]
+        );
+    }, [defaultTab, previousActiveIndex, selectedTab, setSelectedTab, tabs]);
+
+    return state;
+}
diff --git a/libs/components/layout/src/settings-sidebar/Layout/LayoutSettings.tsx b/libs/components/layout/src/settings-sidebar/Layout/LayoutSettings.tsx
new file mode 100644
index 000000000..3d6ad7fe4
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Layout/LayoutSettings.tsx
@@ -0,0 +1,18 @@
+import { styled } from '@toeverything/components/ui';
+
+export const LayoutSettings = () => {
+    return (
+        <StyledText>
+            <p>Layout Settings Coming Soon...</p>
+        </StyledText>
+    );
+};
+
+const StyledText = styled('div')(({ theme }) => {
+    return {
+        display: 'flex',
+        justifyContent: 'center',
+        color: theme.affine.palette.menu,
+        marginTop: theme.affine.spacing.lgSpacing,
+    };
+});
diff --git a/libs/components/layout/src/settings-sidebar/Layout/index.ts b/libs/components/layout/src/settings-sidebar/Layout/index.ts
new file mode 100644
index 000000000..9fdf32acd
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Layout/index.ts
@@ -0,0 +1 @@
+export { LayoutSettings } from './LayoutSettings';
diff --git a/libs/components/layout/src/settings-sidebar/Settings/SettingsList.tsx b/libs/components/layout/src/settings-sidebar/Settings/SettingsList.tsx
new file mode 100644
index 000000000..56528159d
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Settings/SettingsList.tsx
@@ -0,0 +1,52 @@
+import { styled, ListItem, Divider, Switch } from '@toeverything/components/ui';
+import { useSettings } from './use-settings';
+
+export const SettingsList = () => {
+    const settings = useSettings();
+
+    return (
+        <StyledSettingsList>
+            {settings.map((item, index) => {
+                const type = item.type;
+                if (type === 'separator') {
+                    return <Divider key={index} />;
+                }
+
+                if (type === 'switch') {
+                    return (
+                        <SwitchItemContainer
+                            key={item.name}
+                            onClick={() => {
+                                item.onChange(!item.value);
+                            }}
+                        >
+                            <span>{item.name}</span>
+                            <Switch
+                                checked={item.value}
+                                checkedLabel="ON"
+                                uncheckedLabel="OFF"
+                            />
+                        </SwitchItemContainer>
+                    );
+                }
+
+                return (
+                    <ListItem key={item.name} onClick={() => item.onClick()}>
+                        {item.name}
+                    </ListItem>
+                );
+            })}
+        </StyledSettingsList>
+    );
+};
+
+const StyledSettingsList = styled('div')({
+    overflow: 'auto',
+    padding: '0 4px',
+});
+
+const SwitchItemContainer = styled(ListItem)({
+    display: 'flex',
+    alignContent: 'center',
+    justifyContent: 'space-between',
+});
diff --git a/libs/components/layout/src/settings-sidebar/Settings/SettingsPanel.tsx b/libs/components/layout/src/settings-sidebar/Settings/SettingsPanel.tsx
new file mode 100644
index 000000000..6a92f0d1b
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Settings/SettingsPanel.tsx
@@ -0,0 +1,23 @@
+import { styled } from '@toeverything/components/ui';
+import { SettingsList } from './SettingsList';
+import { Footer } from './footer';
+
+export const SettingsPanel = () => {
+    return (
+        <StyledContainerForSettingsPanel>
+            <SettingsList />
+            <Footer />
+        </StyledContainerForSettingsPanel>
+    );
+};
+
+const StyledContainerForSettingsPanel = styled('div')(({ theme }) => {
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        paddingTop: 44,
+        paddingBottom: 44,
+        height: '100%',
+    };
+});
diff --git a/libs/components/layout/src/settings-sidebar/Settings/footer/Footer.tsx b/libs/components/layout/src/settings-sidebar/Settings/footer/Footer.tsx
new file mode 100644
index 000000000..712fe2a59
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Settings/footer/Footer.tsx
@@ -0,0 +1,20 @@
+import type { FC } from 'react';
+import { styled } from '@toeverything/components/ui';
+import { LastModified } from './LastModified';
+import { Logout } from './Logout';
+
+export const Footer: FC = () => {
+    return (
+        <Container>
+            <LastModified />
+            <Logout />
+        </Container>
+    );
+};
+
+const Container = styled('div')({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '0 16px',
+});
diff --git a/libs/components/layout/src/settings-sidebar/Settings/footer/LastModified.tsx b/libs/components/layout/src/settings-sidebar/Settings/footer/LastModified.tsx
new file mode 100644
index 000000000..3bac52c47
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Settings/footer/LastModified.tsx
@@ -0,0 +1,32 @@
+import type { FC } from 'react';
+import format from 'date-fns/format';
+import { Typography, styled } from '@toeverything/components/ui';
+import { useUserAndSpaces } from '@toeverything/datasource/state';
+import { usePageLastUpdated, useWorkspaceAndPageId } from '../util';
+
+export const LastModified: FC = () => {
+    const { user } = useUserAndSpaces();
+    const username = user ? user.nickname : 'Anonymous';
+    const { workspaceId, pageId } = useWorkspaceAndPageId();
+    const lastModified = usePageLastUpdated({ workspaceId, pageId });
+    const formatLastModified = format(lastModified, 'MM/dd/yyyy hh:mm');
+    return (
+        <div>
+            <div>
+                <ContentText type="xs">
+                    <span>Last edited by </span>
+                    <span>{username}</span>
+                </ContentText>
+            </div>
+            <div>
+                <ContentText type="xs">{formatLastModified}</ContentText>
+            </div>
+        </div>
+    );
+};
+
+const ContentText = styled(Typography)(({ theme }) => {
+    return {
+        color: theme.affine.palette.icons,
+    };
+});
diff --git a/libs/components/layout/src/settings-sidebar/Settings/footer/Logout.tsx b/libs/components/layout/src/settings-sidebar/Settings/footer/Logout.tsx
new file mode 100644
index 000000000..361ad8475
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Settings/footer/Logout.tsx
@@ -0,0 +1,43 @@
+import type { FC } from 'react';
+import { MoveToIcon } from '@toeverything/components/icons';
+import {
+    ListItem,
+    ListIcon,
+    styled,
+    Typography,
+} from '@toeverything/components/ui';
+import { LOGOUT_COOKIES, LOGOUT_LOCAL_STORAGE } from '@toeverything/utils';
+import { getAuth, signOut } from 'firebase/auth';
+
+const logout = () => {
+    LOGOUT_LOCAL_STORAGE.forEach(name => localStorage.removeItem(name));
+    // localStorage.clear();
+    document.cookie = LOGOUT_COOKIES.map(
+        name => name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'
+    ).join(' ');
+
+    signOut(getAuth());
+
+    window.location.href = '/';
+};
+
+export const Logout: FC = () => {
+    return (
+        <ListItem onClick={logout}>
+            <StyledIcon />
+            <ContentText type="base">Logout</ContentText>
+        </ListItem>
+    );
+};
+
+const StyledIcon = styled(MoveToIcon)(({ theme }) => {
+    return {
+        color: theme.affine.palette.icons,
+    };
+});
+
+const ContentText = styled(Typography)(({ theme }) => ({
+    marginLeft: '12px',
+    color: theme.affine.palette.menu,
+    fontWeight: 300,
+}));
diff --git a/libs/components/layout/src/settings-sidebar/Settings/footer/index.ts b/libs/components/layout/src/settings-sidebar/Settings/footer/index.ts
new file mode 100644
index 000000000..65e2506fa
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Settings/footer/index.ts
@@ -0,0 +1 @@
+export { Footer } from './Footer';
diff --git a/libs/components/layout/src/settings-sidebar/Settings/index.ts b/libs/components/layout/src/settings-sidebar/Settings/index.ts
new file mode 100644
index 000000000..a71f2579a
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Settings/index.ts
@@ -0,0 +1 @@
+export { SettingsPanel } from './SettingsPanel';
diff --git a/libs/components/layout/src/settings-sidebar/Settings/use-setting-flags.ts b/libs/components/layout/src/settings-sidebar/Settings/use-setting-flags.ts
new file mode 100644
index 000000000..2cab66e79
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Settings/use-setting-flags.ts
@@ -0,0 +1,21 @@
+import { useFlag } from '@toeverything/datasource/feature-flags';
+
+export const useSettingFlags = () => {
+    const booleanFullWidthChecked = useFlag('BooleanFullWidthChecked', false);
+    const booleanExportWorkspace = useFlag('BooleanExportWorkspace', false);
+    const booleanImportWorkspace = useFlag('BooleanImportWorkspace', false);
+    const booleanExportHtml = useFlag('BooleanExportHtml', false);
+    const booleanExportPdf = useFlag('BooleanExportPdf', false);
+    const booleanExportMarkdown = useFlag('BooleanExportMarkdown', false);
+
+    return {
+        booleanFullWidthChecked,
+        booleanExportWorkspace,
+        booleanImportWorkspace,
+        booleanExportHtml,
+        booleanExportPdf,
+        booleanExportMarkdown,
+    };
+};
+
+export type SettingFlags = ReturnType<typeof useSettingFlags>;
diff --git a/libs/components/layout/src/settings-sidebar/Settings/use-settings.ts b/libs/components/layout/src/settings-sidebar/Settings/use-settings.ts
new file mode 100644
index 000000000..b40b72397
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Settings/use-settings.ts
@@ -0,0 +1,140 @@
+import { useNavigate } from 'react-router-dom';
+import { useSettingFlags, type SettingFlags } from './use-setting-flags';
+import { copyToClipboard } from '@toeverything/utils';
+import {
+    duplicatePage,
+    getPageTitle,
+    exportHtml,
+    exportMarkdown,
+    importWorkspace,
+    exportWorkspace,
+    useWorkspaceAndPageId,
+    useReadingMode,
+} from './util';
+
+interface BaseSettingItem {
+    flag?: keyof SettingFlags;
+}
+
+interface SwitchItem extends BaseSettingItem {
+    name: string;
+    type: 'switch';
+    value: boolean;
+    onChange: (value: boolean) => void;
+}
+
+interface SeparatorItem extends BaseSettingItem {
+    type: 'separator';
+}
+
+interface ButtonItem extends BaseSettingItem {
+    name: string;
+    type: 'button';
+    onClick: () => void;
+}
+
+type SettingItem = SwitchItem | SeparatorItem | ButtonItem;
+
+const filterSettings = (settings: SettingItem[], flags: SettingFlags) => {
+    return settings
+        .filter(setting => {
+            if (!setting.flag) {
+                return true;
+            }
+            return flags[setting.flag];
+        })
+        .filter((setting, index, array) => {
+            if (setting.type === 'separator') {
+                if (
+                    // If the current is a separator, and the following is also a separator, delete the current one
+                    array[index + 1]?.type === 'separator' ||
+                    // If the current separator is the last one, delete the current one
+                    index === array.length - 1
+                ) {
+                    return false;
+                }
+            }
+            return true;
+        });
+};
+
+export const useSettings = (): SettingItem[] => {
+    const { workspaceId, pageId } = useWorkspaceAndPageId();
+    const navigate = useNavigate();
+    const settingFlags = useSettingFlags();
+    const { toggleReadingMode, readingMode } = useReadingMode();
+
+    const settings: SettingItem[] = [
+        {
+            type: 'switch',
+            name: 'Reading Mode',
+            value: readingMode,
+            onChange: () => {
+                toggleReadingMode();
+            },
+        },
+        {
+            type: 'separator',
+        },
+        {
+            type: 'button',
+            name: 'Duplicate Page',
+            onClick: async () => {
+                const newPageInfo = await duplicatePage({
+                    workspaceId,
+                    pageId,
+                });
+                navigate(`/${newPageInfo.workspaceId}/${newPageInfo.pageId}`);
+            },
+        },
+        {
+            type: 'button',
+            name: 'Copy Page Link',
+            onClick: () => copyToClipboard(window.location.href),
+        },
+        {
+            type: 'separator',
+        },
+        {
+            type: 'button',
+            name: 'Export As Markdown',
+            onClick: async () => {
+                const title = await getPageTitle({ workspaceId, pageId });
+                exportMarkdown({ workspaceId, rootBlockId: pageId, title });
+            },
+            flag: 'booleanExportMarkdown',
+        },
+        {
+            type: 'button',
+            name: 'Export As HTML',
+            onClick: async () => {
+                const title = await getPageTitle({ workspaceId, pageId });
+                exportHtml({ workspaceId, rootBlockId: pageId, title });
+            },
+            flag: 'booleanExportHtml',
+        },
+        {
+            type: 'button',
+            name: 'Export As PDF (Unsupported)',
+            onClick: () => console.log('Export As PDF'),
+            flag: 'booleanExportPdf',
+        },
+        {
+            type: 'separator',
+        },
+        {
+            type: 'button',
+            name: 'Import Workspace',
+            onClick: () => importWorkspace(workspaceId),
+            flag: 'booleanImportWorkspace',
+        },
+        {
+            type: 'button',
+            name: 'Export Workspace',
+            onClick: () => exportWorkspace(),
+            flag: 'booleanExportWorkspace',
+        },
+    ];
+
+    return filterSettings(settings, settingFlags);
+};
diff --git a/libs/components/layout/src/settings-sidebar/Settings/util/duplicate-page.ts b/libs/components/layout/src/settings-sidebar/Settings/util/duplicate-page.ts
new file mode 100644
index 000000000..7ddb0c114
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Settings/util/duplicate-page.ts
@@ -0,0 +1,29 @@
+import { services } from '@toeverything/datasource/db-service';
+
+interface DuplicatePageProps {
+    workspaceId: string;
+    pageId: string;
+}
+export const duplicatePage = async ({
+    workspaceId,
+    pageId,
+}: DuplicatePageProps) => {
+    //create page
+    const newPage = await services.api.editorBlock.create({
+        workspace: workspaceId,
+        type: 'page' as const,
+    });
+    //add page to tree
+    await services.api.pageTree.addNextPageToWorkspace(
+        workspaceId,
+        pageId,
+        newPage.id
+    );
+    //copy source page to new page
+    await services.api.editorBlock.copyPage(workspaceId, pageId, newPage.id);
+
+    return {
+        workspaceId,
+        pageId: newPage.id,
+    };
+};
diff --git a/libs/components/layout/src/settings-sidebar/Settings/util/file-exporter.ts b/libs/components/layout/src/settings-sidebar/Settings/util/file-exporter.ts
new file mode 100644
index 000000000..99b17d885
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Settings/util/file-exporter.ts
@@ -0,0 +1,57 @@
+import TurndownService from 'turndown';
+
+export const fileExporter = {
+    exportFile: (filename: string, text: string, format: string) => {
+        const element = document.createElement('a');
+        element.setAttribute(
+            'href',
+            'data:' + format + ';charset=utf-8,' + encodeURIComponent(text)
+        );
+        element.setAttribute('download', filename);
+
+        element.style.display = 'none';
+        document.body.appendChild(element);
+
+        element.click();
+
+        document.body.removeChild(element);
+    },
+    decorateHtml: (pageTitle: string, htmlContent: string) => {
+        return `<!DOCTYPE html>
+        <html lang="en">
+        <head>
+          <meta charset="UTF-8">
+          <title>${pageTitle}</title>
+          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
+        </head>
+        <body>
+            <div style="margin:20px auto;width:800px" >
+               <div style="background-color: #fff;box-shadow: 0px 0px 5px #ccc;padding: 10px;">
+                 ${htmlContent}
+               </div>
+            </div>
+        </body>
+        </html>`;
+    },
+    decoreateAffineBrand: (pageTitle: string) => {
+        return pageTitle + ` Created in Affine`;
+    },
+    exportHtml: (pageTitle: string, htmlContent: string) => {
+        fileExporter.exportFile(
+            fileExporter.decoreateAffineBrand(pageTitle) + '.html',
+            fileExporter.decorateHtml(pageTitle, htmlContent),
+            'text/html'
+        );
+    },
+
+    exportMarkdown: (pageTitle: string, htmlContent: string) => {
+        const turndownService = new TurndownService();
+        const markdown = turndownService.turndown(htmlContent);
+
+        fileExporter.exportFile(
+            fileExporter.decoreateAffineBrand(pageTitle) + '.md',
+            markdown,
+            'text/plain'
+        );
+    },
+};
diff --git a/libs/components/layout/src/settings-sidebar/Settings/util/get-page-info.ts b/libs/components/layout/src/settings-sidebar/Settings/util/get-page-info.ts
new file mode 100644
index 000000000..d945c751a
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Settings/util/get-page-info.ts
@@ -0,0 +1,50 @@
+import { useState, useEffect } from 'react';
+import { services } from '@toeverything/datasource/db-service';
+
+const UNTITLED = 'untitled';
+
+interface GetPageTitleProps {
+    workspaceId: string;
+    pageId: string;
+}
+
+export const getPageTitle = async ({
+    workspaceId,
+    pageId,
+}: GetPageTitleProps) => {
+    return await services.api.editorBlock
+        .get({ workspace: workspaceId, ids: [pageId] })
+        .then(blockData => {
+            if (!blockData?.[0]) {
+                return UNTITLED;
+            }
+            return blockData[0].properties.text.value.map(v => v.text).join('');
+        });
+};
+
+const getPageLastUpdated = async ({
+    workspaceId,
+    pageId,
+}: GetPageTitleProps) => {
+    return await services.api.editorBlock
+        .getBlock(workspaceId, pageId)
+        .then(block => {
+            if (!block) {
+                return null;
+            }
+            return block.lastUpdated;
+        });
+};
+
+export const usePageLastUpdated = ({
+    workspaceId,
+    pageId,
+}: GetPageTitleProps) => {
+    const [lastUpdated, setLastUpdated] = useState<number>(Date.now());
+    useEffect(() => {
+        getPageLastUpdated({ workspaceId, pageId }).then(d => {
+            setLastUpdated(d ? d : Date.now());
+        });
+    }, [workspaceId, pageId]);
+    return lastUpdated;
+};
diff --git a/libs/components/layout/src/settings-sidebar/Settings/util/handle-export.ts b/libs/components/layout/src/settings-sidebar/Settings/util/handle-export.ts
new file mode 100644
index 000000000..37888237b
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Settings/util/handle-export.ts
@@ -0,0 +1,42 @@
+import { ClipboardParse } from '@toeverything/components/editor-core';
+import { createEditor } from '@toeverything/components/affine-editor';
+import { fileExporter } from './file-exporter';
+
+interface CreateClipboardParseProps {
+    workspaceId: string;
+    rootBlockId: string;
+}
+
+const createClipboardParse = ({
+    workspaceId,
+    rootBlockId,
+}: CreateClipboardParseProps) => {
+    const editor = createEditor(workspaceId);
+    editor.setRootBlockId(rootBlockId);
+
+    return new ClipboardParse(editor);
+};
+
+interface ExportHandlerProps extends CreateClipboardParseProps {
+    title: string;
+}
+
+export const exportHtml = async ({
+    workspaceId,
+    rootBlockId,
+    title,
+}: ExportHandlerProps) => {
+    const clipboardParse = createClipboardParse({ workspaceId, rootBlockId });
+    const htmlContent = await clipboardParse.page2html();
+    fileExporter.exportHtml(title, htmlContent);
+};
+
+export const exportMarkdown = async ({
+    workspaceId,
+    rootBlockId,
+    title,
+}: ExportHandlerProps) => {
+    const clipboardParse = createClipboardParse({ workspaceId, rootBlockId });
+    const htmlContent = await clipboardParse.page2html();
+    fileExporter.exportMarkdown(title, htmlContent);
+};
diff --git a/libs/components/layout/src/settings-sidebar/Settings/util/index.ts b/libs/components/layout/src/settings-sidebar/Settings/util/index.ts
new file mode 100644
index 000000000..3b947bdd9
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Settings/util/index.ts
@@ -0,0 +1,6 @@
+export { duplicatePage } from './duplicate-page';
+export { exportHtml, exportMarkdown } from './handle-export';
+export { getPageTitle, usePageLastUpdated } from './get-page-info';
+export { importWorkspace, exportWorkspace } from './inspector-workspace';
+export { useWorkspaceAndPageId } from './use-workspace-page';
+export { useReadingMode } from './use-reading-mode';
diff --git a/libs/components/layout/src/settings-sidebar/Settings/util/inspector-workspace.ts b/libs/components/layout/src/settings-sidebar/Settings/util/inspector-workspace.ts
new file mode 100644
index 000000000..ee851dc90
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Settings/util/inspector-workspace.ts
@@ -0,0 +1,32 @@
+/**
+ * @deprecated debugging method, deprecated
+ */
+export const importWorkspace = (workspaceId: string) => {
+    //@ts-ignore
+    window.client
+        .inspector()
+        .load()
+        .then(() => {
+            window.location.href = `/${workspaceId}/`;
+        });
+};
+
+/**
+ * @deprecated debugging method, deprecated
+ */
+export const exportWorkspace = () => {
+    //@ts-ignore
+    window.client.inspector().save();
+};
+
+/**
+ * @deprecated debugging method, deprecated
+ */
+export const clearWorkspace = async workspaceId => {
+    //@ts-ignore
+    if (window.confirm('Are you sure you want to clear the workspace?')) {
+        //@ts-ignore
+        await window.client.inspector().clear();
+        window.location.href = `/${workspaceId}/`;
+    }
+};
diff --git a/libs/components/layout/src/settings-sidebar/Settings/util/use-reading-mode.ts b/libs/components/layout/src/settings-sidebar/Settings/util/use-reading-mode.ts
new file mode 100644
index 000000000..31b89aa44
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Settings/util/use-reading-mode.ts
@@ -0,0 +1,23 @@
+import {
+    useShowSettingsSidebar,
+    useShowSpaceSidebar,
+} from '@toeverything/datasource/state';
+
+/**
+ * TODO: This is not Reading Mode, it needs to be discussed later, so I will write it now
+ */
+export const useReadingMode = () => {
+    const { setShowSettingsSidebar } = useShowSettingsSidebar();
+    const { fixedDisplay, toggleSpaceSidebar } = useShowSpaceSidebar();
+    const readingMode = !fixedDisplay;
+
+    const toggleReadingMode = () => {
+        toggleSpaceSidebar();
+        setShowSettingsSidebar(readingMode);
+    };
+
+    return {
+        readingMode,
+        toggleReadingMode,
+    };
+};
diff --git a/libs/components/layout/src/settings-sidebar/Settings/util/use-workspace-page.ts b/libs/components/layout/src/settings-sidebar/Settings/util/use-workspace-page.ts
new file mode 100644
index 000000000..b9048e3ff
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/Settings/util/use-workspace-page.ts
@@ -0,0 +1,16 @@
+import { useParams } from 'react-router-dom';
+
+interface UseWorkspaceAndPageIdReturn {
+    workspaceId?: string;
+    pageId?: string;
+}
+
+export const useWorkspaceAndPageId = (): UseWorkspaceAndPageIdReturn => {
+    const params = useParams();
+    const workspaceId = params['workspace_id'];
+    const pageId = params['*'].split('/')[0];
+    return {
+        workspaceId,
+        pageId,
+    };
+};
diff --git a/libs/components/layout/src/settings-sidebar/SettingsSidebar.tsx b/libs/components/layout/src/settings-sidebar/SettingsSidebar.tsx
new file mode 100644
index 000000000..01e02fd24
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/SettingsSidebar.tsx
@@ -0,0 +1,33 @@
+import { styled } from '@toeverything/components/ui';
+import { useShowSettingsSidebar } from '@toeverything/datasource/state';
+import { ContainerTabs } from './ContainerTabs';
+
+const SETTINGS_SIDEBAR_WIDTH = 370;
+
+export const SettingsSidebar = () => {
+    const { showSettingsSidebar } = useShowSettingsSidebar();
+
+    return (
+        <StyledContainerForSidebar
+            isShow={showSettingsSidebar}
+            id="id-side-panel"
+        >
+            {showSettingsSidebar ? <ContainerTabs /> : null}
+        </StyledContainerForSidebar>
+    );
+};
+
+const StyledContainerForSidebar = styled('div', {
+    shouldForwardProp: (prop: string) => !['isShow'].includes(prop),
+})<{ isShow?: boolean }>(({ theme, isShow }) => {
+    return {
+        flex: 'none',
+        width: isShow ? SETTINGS_SIDEBAR_WIDTH : 0,
+        // TODO: animation not working
+        transition: 'all 300ms ease-in-out',
+        borderLeft: `1px solid ${theme.affine.palette.menuSeparator}`,
+        zIndex: 100,
+        backgroundColor: 'white',
+        overflow: 'hidden',
+    };
+});
diff --git a/libs/components/layout/src/settings-sidebar/index.ts b/libs/components/layout/src/settings-sidebar/index.ts
new file mode 100644
index 000000000..61f27d5e1
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/index.ts
@@ -0,0 +1 @@
+export { SettingsSidebar } from './SettingsSidebar';
diff --git a/libs/components/layout/src/settings-sidebar/use-settings-sidebar.ts b/libs/components/layout/src/settings-sidebar/use-settings-sidebar.ts
new file mode 100644
index 000000000..a401460ec
--- /dev/null
+++ b/libs/components/layout/src/settings-sidebar/use-settings-sidebar.ts
@@ -0,0 +1,5 @@
+export const useSettingsSidebar = () => {
+    return {
+        show: false,
+    };
+};
diff --git a/libs/components/layout/src/workspace-sidebar/activities/activities.tsx b/libs/components/layout/src/workspace-sidebar/activities/activities.tsx
new file mode 100644
index 000000000..9efe5ebd5
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/activities/activities.tsx
@@ -0,0 +1,114 @@
+import { services } from '@toeverything/datasource/db-service';
+import { useUserAndSpaces } from '@toeverything/datasource/state';
+import { useCallback, useEffect, useState } from 'react';
+import { styled } from '@toeverything/components/ui';
+import {
+    MuiList as List,
+    MuiListItem as ListItem,
+    MuiListItemText as ListItemText,
+    MuiListItemButton as ListItemButton,
+} from '@toeverything/components/ui';
+import { useNavigate } from 'react-router';
+import { formatDistanceToNow } from 'date-fns';
+
+const StyledWrapper = styled('div')({
+    margin: '0 16px 0 32px',
+    span: {
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+    },
+    '.item': {
+        display: 'flex',
+        alignItems: 'center',
+        ustifyContent: 'space-between',
+        padding: '7px 0px',
+        whiteSpace: 'nowrap',
+    },
+    '.itemButton': {
+        padding: 0,
+        height: 32,
+    },
+    '.itemLeft': {
+        color: '#4c6275',
+        marginRight: '20px',
+        span: {
+            fontSize: 14,
+        },
+    },
+    '.itemRight': {
+        color: '#B6C7D3',
+        flex: 'none',
+        span: {
+            fontSize: 12,
+        },
+    },
+});
+
+export const Activities = () => {
+    const { user, currentSpaceId } = useUserAndSpaces();
+    const [recenPages, setRecentPages] = useState([]);
+
+    const fetchRecentPages = useCallback(async () => {
+        if (!user || !currentSpaceId) {
+            return;
+        }
+        const recent_pages = await services.api.userConfig.getRecentPages(
+            currentSpaceId,
+            user.id
+        );
+        setRecentPages(recent_pages);
+    }, [user, currentSpaceId]);
+
+    useEffect(() => {
+        fetchRecentPages();
+    }, [user, currentSpaceId]);
+
+    useEffect(() => {
+        let unobserve: () => void;
+        const observe = async () => {
+            unobserve = await services.api.userConfig.observe(
+                { workspace: currentSpaceId },
+                () => {
+                    fetchRecentPages();
+                }
+            );
+        };
+        observe();
+
+        return () => {
+            unobserve?.();
+        };
+    }, [currentSpaceId, fetchRecentPages]);
+
+    const navigate = useNavigate();
+
+    return (
+        <StyledWrapper>
+            <List>
+                {recenPages.map(({ id, title, lastOpenTime }) => {
+                    return (
+                        <ListItem className="item" key={id}>
+                            <ListItemButton
+                                className="itemButton"
+                                onClick={() => {
+                                    navigate(`/${currentSpaceId}/${id}`);
+                                }}
+                            >
+                                <ListItemText
+                                    className="itemLeft"
+                                    primary={title}
+                                />
+                                <ListItemText
+                                    className="itemRight"
+                                    primary={formatDistanceToNow(lastOpenTime, {
+                                        includeSeconds: true,
+                                    })}
+                                />
+                            </ListItemButton>
+                        </ListItem>
+                    );
+                })}
+            </List>
+        </StyledWrapper>
+    );
+};
diff --git a/libs/components/layout/src/workspace-sidebar/activities/index.ts b/libs/components/layout/src/workspace-sidebar/activities/index.ts
new file mode 100644
index 000000000..00e586bc4
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/activities/index.ts
@@ -0,0 +1 @@
+export * from './activities';
diff --git a/libs/components/layout/src/workspace-sidebar/calendar-heatmap/CalendarHeatmap.tsx b/libs/components/layout/src/workspace-sidebar/calendar-heatmap/CalendarHeatmap.tsx
new file mode 100644
index 000000000..ca737f58c
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/calendar-heatmap/CalendarHeatmap.tsx
@@ -0,0 +1,100 @@
+import { ComponentType, useEffect } from 'react';
+import {
+    styled,
+    MuiBox as Box,
+    MuiTextField as TextField,
+    // CalendarPickerSkeleton,
+    LocalizationProvider,
+    AdapterDateFns,
+    StaticDatePicker,
+} from '@toeverything/components/ui';
+
+import type { Theme } from './types';
+import { useCalendarHeatmap } from './use-calendar-heatmap';
+
+export type CalendarHeatmapProps = {
+    calendarTheme?: Theme;
+};
+
+/** Calendar heat map component, different colors represent the number of operation records on the day */
+export function CalendarHeatmap({ calendarTheme }: CalendarHeatmapProps) {
+    const {
+        fetchHighlightedDays,
+        pickDay,
+        setPickDay,
+        handleMonthChange,
+        renderDayWithHeatmap,
+    } = useCalendarHeatmap({ calendarTheme });
+
+    useEffect(() => {
+        fetchHighlightedDays();
+    }, [fetchHighlightedDays]);
+
+    return (
+        <Box
+            id="affineCalendarHeatmapContainer"
+            sx={{
+                // flex: 1,
+                '.MuiPickerStaticWrapper-root': {
+                    minWidth: 240,
+                },
+                '.MuiCalendarPicker-root': {
+                    width: 280,
+                    margin: 0,
+                    marginLeft: '-8px',
+                    '& > div': {
+                        marginTop: 0,
+                    },
+                    '& .PrivatePickersFadeTransitionGroup-root > div': {
+                        color: '#98acbd',
+                        fontSize: '0.8rem',
+                    },
+                    "& > div > div[role='presentation']": {
+                        marginLeft: '8px',
+                    },
+                    "& div[role='presentation'] > button:first-of-type": {
+                        display: 'none',
+                    },
+                    '& .PrivatePickersSlideTransition-root': {
+                        minHeight: 290,
+                    },
+                    '& .MuiIconButton-sizeSmall svg': {
+                        color: '#98acbd',
+                    },
+                    "& div[class][style*='cubic-bezier']": {
+                        marginRight: '8px',
+                    },
+                    "& div[class][style*='cubic-bezier'] > div": {
+                        width: '8px',
+                    },
+                    '& .PrivatePickersFadeTransitionGroup-root.MuiCalendarPicker-viewTransitionContainer':
+                        {
+                            height: 260,
+                        },
+                    '& .MuiCalendarPicker-viewTransitionContainer .MuiTypography-caption':
+                        {
+                            width: 30,
+                            height: 30,
+                        },
+                },
+            }}
+        >
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+                <StaticDatePicker
+                    value={pickDay}
+                    onChange={setPickDay}
+                    displayStaticWrapperAs="desktop"
+                    onMonthChange={handleMonthChange}
+                    label="Week picker"
+                    inputFormat="'Week of' MMM d"
+                    renderInput={params => <TextField {...(params as any)} />}
+                    renderDay={renderDayWithHeatmap}
+                    disableHighlightToday={true}
+                    autoFocus={false}
+                    // loading={loading}
+                    // renderLoading={() => <CalendarPickerSkeleton />}
+                />
+            </LocalizationProvider>
+        </Box>
+    );
+}
diff --git a/libs/components/layout/src/workspace-sidebar/calendar-heatmap/HeatedDay.tsx b/libs/components/layout/src/workspace-sidebar/calendar-heatmap/HeatedDay.tsx
new file mode 100644
index 000000000..6762b841f
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/calendar-heatmap/HeatedDay.tsx
@@ -0,0 +1,48 @@
+import type { ComponentType } from 'react';
+import {
+    styled,
+    PickersDay,
+    type PickersDayProps,
+} from '@toeverything/components/ui';
+
+import type { Theme } from './types';
+import { DEFAULT_THEME } from './utils';
+
+type HeatedDayProps = PickersDayProps<Date> & {
+    activitiesOfDay: number;
+    calendarTheme: Theme;
+};
+
+export const HeatedDay = styled(PickersDay, {
+    shouldForwardProp: (prop: string) =>
+        !['activitiesOfDay', 'calendarTheme'].includes(prop),
+})<HeatedDayProps>(({ calendarTheme = DEFAULT_THEME, activitiesOfDay }) => ({
+    ...{
+        width: 30,
+        height: 30,
+        margin: '0 2.5px 16px 2.5px',
+        borderRadius: 3,
+        backgroundColor: '#fff',
+        color: '#4E687C',
+        // fontSize: '0.8rem'
+    },
+    ...(activitiesOfDay > 0 && {
+        backgroundColor: calendarTheme.level1,
+        '&:hover': {
+            backgroundColor: calendarTheme.level1,
+        },
+    }),
+    ...(activitiesOfDay > 3 && {
+        backgroundColor: calendarTheme.level2,
+        '&:hover': {
+            backgroundColor: calendarTheme.level2,
+        },
+    }),
+    ...(activitiesOfDay > 6 && {
+        backgroundColor: calendarTheme.level3,
+        color: '#fff',
+        '&:hover': {
+            backgroundColor: calendarTheme.level3,
+        },
+    }),
+})) as unknown as ComponentType<HeatedDayProps>;
diff --git a/libs/components/layout/src/workspace-sidebar/calendar-heatmap/index.ts b/libs/components/layout/src/workspace-sidebar/calendar-heatmap/index.ts
new file mode 100644
index 000000000..d42d4c714
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/calendar-heatmap/index.ts
@@ -0,0 +1,2 @@
+export { CalendarHeatmap } from './CalendarHeatmap';
+export { useCalendarHeatmap } from './use-calendar-heatmap';
diff --git a/libs/components/layout/src/workspace-sidebar/calendar-heatmap/types.ts b/libs/components/layout/src/workspace-sidebar/calendar-heatmap/types.ts
new file mode 100644
index 000000000..92081796c
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/calendar-heatmap/types.ts
@@ -0,0 +1,17 @@
+export type CalendarDay = {
+    level?: Level;
+    /** Date number, 1-31 */
+    dayInMonth: number;
+    /** The number of current operation records, currently using the number of pages currently created */
+    activitiesOfDay: number;
+};
+
+export type Level = 1 | 2 | 3 | 4 | 5;
+
+export type Theme = {
+    readonly level1: string;
+    readonly level2: string;
+    readonly level3: string;
+    readonly level4?: string;
+    readonly level5?: string;
+};
diff --git a/libs/components/layout/src/workspace-sidebar/calendar-heatmap/use-calendar-heatmap.ts b/libs/components/layout/src/workspace-sidebar/calendar-heatmap/use-calendar-heatmap.ts
new file mode 100644
index 000000000..830a4d9cd
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/calendar-heatmap/use-calendar-heatmap.ts
@@ -0,0 +1,99 @@
+import { useCallback, useEffect, useState, createElement } from 'react';
+import { atom, useAtom } from 'jotai';
+import type { PickersDayProps } from '@toeverything/components/ui';
+
+import type { CalendarDay } from './types';
+import type { CalendarHeatmapProps } from './CalendarHeatmap';
+import { HeatedDay } from './HeatedDay';
+import { fakeFetch, fetchActivitiesHeatmap } from './utils';
+// import { usePageTree } from 'PageTree';
+
+const highlightedDaysAtom = atom<CalendarDay[] | undefined>([]);
+
+export const useCalendarHeatmap = ({
+    calendarTheme,
+}: CalendarHeatmapProps = {}) => {
+    const [loading, setLoading] = useState(false);
+    const [highlightedDays, setHighlightedDays] = useAtom(highlightedDaysAtom);
+    const [pickDay, setPickDay] = useState<Date | null>(null);
+
+    // const { flattenedItems } = usePageTree();
+
+    const fetchHighlightedDays = useCallback(
+        async (date?: Date) => {
+            // const { daysToHighlight } = await fetchActivitiesHeatmap(db, date || new Date(), flattenedItems);
+            // setHighlightedDays(daysToHighlight);
+            setHighlightedDays([]);
+            // setLoading(false);
+        },
+        [setHighlightedDays]
+    );
+
+    const handleMonthChange = useCallback(
+        (date: Date) => {
+            // setLoading(true);
+            // setHighlightedDays([]);
+            fetchHighlightedDays(date);
+        },
+        [fetchHighlightedDays]
+    );
+
+    const addPageToday = useCallback(() => {
+        const foundToday = highlightedDays?.find(
+            hDay => hDay.dayInMonth === new Date().getDate()
+        );
+        if (foundToday) {
+            setHighlightedDays([
+                ...highlightedDays.filter(
+                    day => day.dayInMonth !== foundToday.dayInMonth
+                ),
+                {
+                    ...foundToday,
+                    activitiesOfDay: foundToday.activitiesOfDay + 1,
+                },
+            ]);
+        } else {
+            setHighlightedDays([
+                ...highlightedDays,
+                { dayInMonth: new Date().getDate(), activitiesOfDay: 1 },
+            ]);
+        }
+    }, [highlightedDays, setHighlightedDays]);
+
+    const renderDayWithHeatmap = useCallback(
+        (
+            day: Date,
+            selectedDates: Array<Date | null>,
+            pickersDayProps: PickersDayProps<Date>
+        ) => {
+            const foundDay = highlightedDays?.find(
+                hDay => hDay.dayInMonth === day.getDate()
+            );
+            const isSelected = !pickersDayProps.outsideCurrentMonth && foundDay;
+
+            return createElement(HeatedDay, {
+                ...pickersDayProps,
+                calendarTheme,
+                activitiesOfDay: isSelected ? foundDay.activitiesOfDay : 0,
+            });
+            // return (
+            //     <HeatedDay
+            //         {...pickersDayProps}
+            //         calendarTheme={calendarTheme}
+            //         activitiesOfDay={isSelected ? foundDay.activitiesOfDay : 0}
+            //     />
+            // );
+        },
+        [highlightedDays, calendarTheme]
+    );
+
+    return {
+        loading,
+        fetchHighlightedDays,
+        pickDay,
+        setPickDay,
+        handleMonthChange,
+        renderDayWithHeatmap,
+        addPageToday,
+    };
+};
diff --git a/libs/components/layout/src/workspace-sidebar/calendar-heatmap/utils.ts b/libs/components/layout/src/workspace-sidebar/calendar-heatmap/utils.ts
new file mode 100644
index 000000000..428d4999d
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/calendar-heatmap/utils.ts
@@ -0,0 +1,125 @@
+import type {
+    BlockClientInstance,
+    BlockImplInstance,
+} from '@toeverything/datasource/jwt';
+import { getDateIsoStringWithTimezone } from '@toeverything/utils';
+import getDaysInMonth from 'date-fns/getDaysInMonth';
+import color, { ColorInput } from 'tinycolor2';
+
+import type { Theme, CalendarDay } from './types';
+
+// export const DEFAULT_THEME = createCalendarTheme('#3E6FDB');
+export const DEFAULT_THEME: Theme = {
+    level4: '#3E6FDB',
+    level3: 'rgba(62, 111, 219)',
+    level2: 'rgba(62, 111, 219, 0.5)',
+    level1: 'rgba(62, 111, 219, 0.2)',
+};
+
+export function createCalendarTheme(
+    baseColor: ColorInput,
+    emptyColor = color('white').darken(8).toHslString()
+): Theme {
+    const base = color(baseColor);
+
+    if (!base.isValid()) {
+        return DEFAULT_THEME;
+    }
+
+    return {
+        level4: base.setAlpha(0.92).toHslString(),
+        level3: base.setAlpha(0.76).toHslString(),
+        level2: base.setAlpha(0.6).toHslString(),
+        level1: base.setAlpha(0.44).toHslString(),
+        // level0: emptyColor
+    };
+}
+
+function getRandomNumber(min: number, max: number) {
+    return Math.round(Math.random() * (max - min) + min);
+}
+
+export async function fetchActivitiesHeatmap(
+    db: BlockClientInstance,
+    date: Date,
+    flattenedItems: any[]
+): Promise<{ daysToHighlight: CalendarDay[] }> {
+    // const pages = await db.getByType('page');
+    const pages_with_ids = (await Promise.all(
+        flattenedItems.map(async (page_item: any) => {
+            const page_id = page_item.id;
+            return [page_id, await db.get(page_id as 'page')];
+        })
+    )) as [string, BlockImplInstance][];
+    const pages = new Map(pages_with_ids);
+
+    const blocks = pages.values();
+    const pages_by_month = {} as Record<string, BlockImplInstance[]>;
+
+    for (const page of blocks) {
+        const page_created_month = getDateIsoStringWithTimezone(
+            page.created
+        ).slice(0, 7);
+        if (!pages_by_month[page_created_month]) {
+            pages_by_month[page_created_month] = [page];
+        } else {
+            pages_by_month[page_created_month].push(page);
+        }
+    }
+
+    const result_date_key = getDateIsoStringWithTimezone(date.getTime()).slice(
+        0,
+        7
+    );
+    if (!pages_by_month[result_date_key]) {
+        return { daysToHighlight: [] };
+    }
+
+    const pages_by_day = {} as Record<string, BlockImplInstance[]>;
+    const daysToHighlight = [] as CalendarDay[];
+    pages_by_month[result_date_key].forEach(page => {
+        const page_created_date = new Date(page.created).getDate();
+        if (!pages_by_day[page_created_date]) {
+            pages_by_day[page_created_date] = [page];
+        } else {
+            pages_by_day[page_created_date].push(page);
+        }
+    });
+
+    Object.keys(pages_by_day).forEach(day => {
+        daysToHighlight.push({
+            dayInMonth: Number(day),
+            activitiesOfDay: pages_by_day[day].length,
+        });
+    });
+
+    return { daysToHighlight };
+}
+
+export async function fakeFetch(
+    date: Date,
+    { signal }: { signal?: AbortSignal } = {}
+): Promise<{ daysToHighlight: CalendarDay[] }> {
+    return new Promise((resolve, reject) => {
+        // const timeout = setTimeout(() => {
+        const daysInMonth = getDaysInMonth(date);
+        const daysToHighlight = Array(7)
+            .fill(1)
+            .map(() => {
+                const countOfDay = getRandomNumber(1, daysInMonth);
+                return {
+                    dayInMonth: countOfDay,
+                    activitiesOfDay: countOfDay,
+                };
+            });
+        resolve({ daysToHighlight });
+        // }, 0);
+
+        if (signal) {
+            signal.onabort = () => {
+                // clearTimeout(timeout);
+                reject(new DOMException('aborted', 'AbortError'));
+            };
+        }
+    });
+}
diff --git a/libs/components/layout/src/workspace-sidebar/index.ts b/libs/components/layout/src/workspace-sidebar/index.ts
new file mode 100644
index 000000000..267622fe2
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/index.ts
@@ -0,0 +1,3 @@
+export * from './page-tree';
+export * from './calendar-heatmap';
+export * from './activities';
diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx b/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx
new file mode 100755
index 000000000..11ba52b01
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx
@@ -0,0 +1,142 @@
+import React, { useMemo } from 'react';
+
+import {
+    DndContext,
+    DragOverlay,
+    DropAnimation,
+    MeasuringStrategy,
+    PointerSensor,
+    defaultDropAnimation,
+    useSensor,
+    useSensors,
+} from '@dnd-kit/core';
+import {
+    SortableContext,
+    verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+
+import { DndTreeItem } from './tree-item';
+import type { TreeItems } from './types';
+import { usePageTree } from './use-page-tree';
+import { getChildCount } from './utils';
+
+const measuring = {
+    droppable: {
+        strategy: MeasuringStrategy.Always,
+    },
+};
+
+const dropAnimation: DropAnimation = {
+    ...defaultDropAnimation,
+    // dragSourceOpacity: 0.5,
+};
+
+export type DndTreeProps = {
+    defaultItems?: TreeItems;
+    indentationWidth?: number;
+    collapsible?: boolean;
+    removable?: boolean;
+    showDragIndicator?: boolean;
+};
+
+/**
+ * Currently does not support drag and drop using the keyboard.
+ */
+export function DndTree(props: DndTreeProps) {
+    const {
+        indentationWidth = 16,
+        collapsible,
+        removable,
+        showDragIndicator,
+    } = props;
+
+    const sensors = useSensors(
+        useSensor(PointerSensor, { activationConstraint: { distance: 8 } })
+    );
+
+    const {
+        items,
+        activeId,
+        flattenedItems,
+        projected,
+        handleDragStart,
+        handleDragMove,
+        handleDragOver,
+        handleDragEnd,
+        handleDragCancel,
+        handleRemove,
+        handleCollapse,
+    } = usePageTree(props);
+
+    const sortedIds = useMemo(
+        () => flattenedItems.map(({ id }) => id),
+        [flattenedItems]
+    );
+
+    const activeItem = useMemo(
+        () =>
+            activeId ? flattenedItems.find(({ id }) => id === activeId) : null,
+        [activeId, flattenedItems]
+    );
+
+    return (
+        <DndContext
+            sensors={sensors}
+            measuring={measuring}
+            onDragStart={handleDragStart}
+            onDragMove={handleDragMove}
+            onDragOver={handleDragOver}
+            onDragEnd={handleDragEnd}
+            onDragCancel={handleDragCancel}
+        >
+            <SortableContext
+                items={sortedIds}
+                strategy={verticalListSortingStrategy}
+            >
+                {/* <button onClick={() => handleAdd()}> add top node</button> */}
+                {flattenedItems.map(
+                    ({ id, title, children, collapsed, depth }) => (
+                        <DndTreeItem
+                            key={id}
+                            id={id}
+                            // value={id}
+                            value={title}
+                            collapsed={Boolean(collapsed && children.length)}
+                            depth={
+                                id === activeId && projected
+                                    ? projected.depth
+                                    : depth
+                            }
+                            indentationWidth={indentationWidth}
+                            indicator={showDragIndicator}
+                            onCollapse={
+                                collapsible && children.length
+                                    ? () => handleCollapse(id)
+                                    : undefined
+                            }
+                            onRemove={
+                                removable ? () => handleRemove(id) : undefined
+                            }
+                        />
+                    )
+                )}
+                <DragOverlay
+                    dropAnimation={dropAnimation}
+                    style={{ marginTop: '-65px' }}
+                >
+                    {activeId && activeItem ? (
+                        <DndTreeItem
+                            id={activeId}
+                            // value={activeId}
+                            value={activeItem.title}
+                            depth={activeItem.depth}
+                            clone={true}
+                            childCount={getChildCount(items, activeId) + 1}
+                            indentationWidth={indentationWidth}
+                        />
+                    ) : null}
+                </DragOverlay>
+            </SortableContext>
+        </DndContext>
+    );
+}
diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/block-page.ts b/libs/components/layout/src/workspace-sidebar/page-tree/block-page.ts
new file mode 100644
index 000000000..e74dd6eb4
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/page-tree/block-page.ts
@@ -0,0 +1,170 @@
+// import type {
+//     ArrayOperation,
+//     BlockClientInstance,
+//     BlockImplInstance,
+//     MapOperation,
+// } from '@toeverything/datasource/jwt';
+// import { getDateIsoStringWithTimezone } from '@toeverything/utils';
+
+// export async function getRecentPages(
+//     db: BlockClientInstance,
+//     userId: string
+// ): Promise<string[]> {
+//     try {
+//         const config = await db.getWorkspaceConfig<MapOperation<string>>();
+//         const recent_pages = config.get('recent_pages');
+//         if (recent_pages?.get(userId)) {
+//             return [recent_pages.get(userId) as string];
+//         }
+//     } catch (e) {
+//         console.error(e);
+//     }
+
+//     return [''];
+// }
+
+// /** Mark the article corresponding to pageId as the most recently accessed article */
+// export async function setRecentPages(
+//     db: BlockClientInstance,
+//     userId: string,
+//     pageId: string
+// ): Promise<void> {
+//     try {
+//         const config = await db.getWorkspaceConfig<MapOperation<string>>();
+//         const recent_pages = config.get('recent_pages');
+//         if (recent_pages && recent_pages.get(userId)) {
+//             recent_pages.set(userId, pageId);
+//         } else {
+//             const map = config.createMap<string>();
+//             map.set(userId, pageId);
+//             config.set('recent_pages', map);
+//         }
+//     } catch (e) {
+//         console.error(e);
+//     }
+// }
+
+// export async function setPageTree<TreeItem>(
+//     db: BlockClientInstance,
+//     treeData: TreeItem[]
+// ): Promise<void> {
+//     try {
+//         const config = await db.getWorkspaceConfig();
+//         const array = config.createArray<TreeItem>();
+//         array.push((treeData as any[]) || []);
+//         config.set('page_tree', array);
+//     } catch (e) {
+//         console.error(e);
+//     }
+// }
+
+// async function update_tree_items_title<
+//     TreeItem extends { id: string; title: string; children: TreeItem[] }
+// >(
+//     db: BlockClientInstance,
+//     items: TreeItem[],
+//     cache: Record<string, string>
+// ): Promise<TreeItem[]> {
+//     for (const item of items) {
+//         if (cache[item.id]) {
+//             item.title = cache[item.id];
+//         } else {
+//             const page = await db.get(item.id as 'page');
+//             item.title =
+//                 page.getDecoration<Array<{ text: string }>>('text')?.[0]
+//                     ?.text ||
+//                 'Untitled ' +
+//                     getDateIsoStringWithTimezone(page.created)
+//                         .slice(11)
+//                         .replace('T', ' ');
+//             cache[item.id] = item.title;
+//         }
+
+//         if (item.children.length) {
+//             item.children = await update_tree_items_title(
+//                 db,
+//                 item.children,
+//                 cache
+//             );
+//         }
+//     }
+
+//     return [...items];
+// }
+
+// export async function getPageTree<TreeItem>(
+//     db: BlockClientInstance
+// ): Promise<TreeItem[]> {
+//     try {
+//         const config = await db.getWorkspaceConfig();
+//         const page_tree = config.get('page_tree') as ArrayOperation<TreeItem>;
+//         const page_tree_items = page_tree?.slice();
+//         if (page_tree && page_tree_items?.length) {
+//             const pages = await update_tree_items_title(
+//                 db,
+//                 page_tree_items as [],
+//                 {}
+//             );
+//             return pages;
+//         }
+//     } catch (e) {
+//         console.error(e);
+//     }
+
+//     return [];
+// }
+
+// export async function getWorkspaceConfig(
+//     db: BlockClientInstance,
+//     userId: string,
+//     name: string
+// ): Promise<string> {
+//     try {
+//         // const config = await db.getWorkspaceConfig();
+//         // const map = config.get_map<string>(name);
+//         // if (map && map.get(userId)) {
+//         //     return map.get(userId)!;
+//         // }
+//     } catch (e) {
+//         console.error(e);
+//     }
+
+//     return '';
+// }
+
+// export async function setWorkspaceConfig(
+//     db: BlockClientInstance,
+//     userId: string,
+//     name: string,
+//     value: string
+// ): Promise<void> {
+//     try {
+//         // const config = await db.getWorkspaceConfig();
+//         // const map = config.get_map<string>(name);
+//         // map.set(userId, value === undefined || value === null ? '' : value);
+//     } catch (e) {
+//         console.error(e);
+//     }
+// }
+
+// export async function createPage(
+//     db: BlockClientInstance,
+//     title?: string,
+//     content?: string,
+//     metadata?: Record<string, string>
+// ): Promise<BlockImplInstance | undefined> {
+//     if (db) {
+//         const page: BlockImplInstance = await db.get('page');
+//         if (title) {
+//             page.getContent<string>().set('title', title);
+//         }
+//         if (metadata) {
+//             Object.keys(metadata).forEach(property =>
+//                 page.getContent<string>().set(property, metadata[property])
+//             );
+//         }
+//         return page;
+//     }
+
+//     return undefined;
+// }
diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/index.ts b/libs/components/layout/src/workspace-sidebar/page-tree/index.ts
new file mode 100644
index 000000000..b16107ca8
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/page-tree/index.ts
@@ -0,0 +1,6 @@
+export { PageTree } from './page-tree';
+export { usePageTree } from './use-page-tree';
+
+export * from './types';
+
+// export { getRecentPages, setRecentPages } from './block-page';
diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/page-tree.tsx b/libs/components/layout/src/workspace-sidebar/page-tree/page-tree.tsx
new file mode 100755
index 000000000..3d7109b66
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/page-tree/page-tree.tsx
@@ -0,0 +1,22 @@
+import style9 from 'style9';
+
+import { DndTree } from './DndTree';
+import { useDndTreeAutoUpdate } from './use-page-tree';
+
+const styles = style9.create({
+    root: {
+        minWidth: 160,
+        maxWidth: 260,
+        marginLeft: 18,
+        marginRight: 6,
+    },
+});
+
+export const PageTree = () => {
+    useDndTreeAutoUpdate();
+    return (
+        <div className={styles('root')}>
+            <DndTree collapsible removable />
+        </div>
+    );
+};
diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/DndTreeItem.tsx b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/DndTreeItem.tsx
new file mode 100755
index 000000000..4ab24aadb
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/DndTreeItem.tsx
@@ -0,0 +1,47 @@
+import React, { CSSProperties } from 'react';
+
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+import { iOS } from '../utils';
+import { TreeItem, TreeItemProps } from './TreeItem';
+
+type DndTreeItemProps = TreeItemProps & {
+    id: string;
+};
+
+export function DndTreeItem({ id, depth, ...props }: DndTreeItemProps) {
+    const {
+        attributes,
+        isDragging,
+        isSorting,
+        listeners,
+        setDraggableNodeRef,
+        setDroppableNodeRef,
+        transform,
+        transition,
+    } = useSortable({ id });
+
+    const style: CSSProperties = {
+        transform: CSS.Translate.toString(transform),
+        transition,
+    };
+
+    return (
+        <TreeItem
+            ref={setDraggableNodeRef}
+            wrapperRef={setDroppableNodeRef}
+            pageId={id}
+            style={style}
+            depth={depth}
+            ghost={isDragging}
+            disableSelection={iOS}
+            disableInteraction={isSorting}
+            handleProps={{
+                ...attributes,
+                ...listeners,
+            }}
+            {...props}
+        />
+    );
+}
diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/MoreActions.tsx b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/MoreActions.tsx
new file mode 100644
index 000000000..d797f146b
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/MoreActions.tsx
@@ -0,0 +1,262 @@
+import styles from './tree-item.module.scss';
+import {
+    MuiSnackbar as Snackbar,
+    Cascader,
+    CascaderItemProps,
+    MuiDivider as Divider,
+} from '@toeverything/components/ui';
+import React from 'react';
+import { NavLink, useNavigate } from 'react-router-dom';
+import { copyToClipboard } from '@toeverything/utils';
+import { services, TemplateFactory } from '@toeverything/datasource/db-service';
+import { NewFromTemplatePortal } from './NewFromTemplatePortal';
+import { useFlag } from '@toeverything/datasource/feature-flags';
+const MESSAGES = {
+    COPY_LINK_SUCCESS: 'Copyed link to clipboard',
+};
+interface ActionsProps {
+    workspaceId: string;
+    pageId: string;
+    onRemove: () => void;
+}
+function DndTreeItemMoreActions(props: ActionsProps) {
+    const [alert_open, set_alert_open] = React.useState(false);
+    const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
+
+    const navigate = useNavigate();
+    const workspaceId = props.workspaceId;
+    const pageId = props.pageId;
+    const blockUrl = window.location.origin + `/${workspaceId}/${pageId}`;
+
+    const redirect_to_page = (new_workspaceId: string, newPageId: string) => {
+        navigate('/' + new_workspaceId + '/' + newPageId);
+    };
+
+    const handle_alert_close = () => {
+        set_alert_open(false);
+    };
+    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const open = Boolean(anchorEl);
+    const handle_copy_link = () => {
+        copyToClipboard(blockUrl);
+        set_alert_open(true);
+        handleClose();
+    };
+    const handle_delete = () => {
+        props.onRemove();
+        handleClose();
+    };
+    const handle_new_child_page = async () => {
+        const new_page = await services.api.editorBlock.create({
+            workspace: workspaceId,
+            type: 'page' as const,
+        });
+        await services.api.pageTree.addChildPageToWorkspace(
+            workspaceId,
+            pageId,
+            new_page.id
+        );
+        redirect_to_page(workspaceId, new_page.id);
+
+        handleClose();
+    };
+    const handle_new_prev_page = async () => {
+        const new_page = await services.api.editorBlock.create({
+            workspace: workspaceId,
+            type: 'page' as const,
+        });
+        await services.api.pageTree.addPrevPageToWorkspace(
+            workspaceId,
+            pageId,
+            new_page.id
+        );
+
+        redirect_to_page(workspaceId, new_page.id);
+
+        handleClose();
+    };
+    const handle_new_next_page = async () => {
+        const new_page = await services.api.editorBlock.create({
+            workspace: workspaceId,
+            type: 'page' as const,
+        });
+        await services.api.pageTree.addNextPageToWorkspace(
+            workspaceId,
+            pageId,
+            new_page.id
+        );
+
+        redirect_to_page(workspaceId, new_page.id);
+
+        handleClose();
+    };
+
+    const handle_duplicate_page = async () => {
+        //create page
+        const new_page = await services.api.editorBlock.create({
+            workspace: workspaceId,
+            type: 'page' as const,
+        });
+        //add page to tree
+        await services.api.pageTree.addNextPageToWorkspace(
+            workspaceId,
+            pageId,
+            new_page.id
+        );
+        //copy source page to new page
+        await services.api.editorBlock.copyPage(
+            workspaceId,
+            pageId,
+            new_page.id
+        );
+
+        redirect_to_page(workspaceId, new_page.id);
+
+        handleClose();
+    };
+
+    const redirectToPage = (newWorkspaceId: string, newPageId: string) => {
+        navigate('/' + newWorkspaceId + '/' + newPageId);
+    };
+
+    const handleNewFromTemplate = async template => {
+        const newPage = await services.api.editorBlock.create({
+            workspace: workspaceId,
+            type: 'page' as const,
+        });
+
+        await services.api.pageTree.addNextPageToWorkspace(
+            workspaceId,
+            pageId,
+            newPage.id
+        );
+
+        await services.api.editorBlock.copyTemplateToPage(
+            workspaceId,
+            newPage.id,
+            TemplateFactory.generatePageTemplateByGroupKeys({
+                name: template.name,
+                groupKeys: template.groupKeys,
+            })
+        );
+
+        redirectToPage(workspaceId, newPage.id);
+    };
+
+    const templateList = useFlag(
+        'JSONTemplateList',
+        TemplateFactory.defaultTemplateList
+    );
+
+    const templateMenuList: CascaderItemProps[] = templateList.map(
+        (template, index) => {
+            const item = {
+                title: template.name,
+                callback: () => {
+                    handleNewFromTemplate(template);
+                },
+            };
+            return item;
+        }
+    );
+
+    const menuList = [
+        {
+            title: 'Duplicate Page',
+            callback: () => {
+                handle_duplicate_page();
+            },
+        },
+        {
+            title: '',
+            isDivide: true,
+        },
+        {
+            title: 'New Child Page',
+            callback: () => {
+                handle_new_child_page();
+            },
+        },
+        {
+            title: 'New Prev Page',
+            callback: () => {
+                handle_new_prev_page();
+            },
+        },
+        {
+            title: 'New Next Page',
+            callback: () => {
+                handle_new_next_page();
+            },
+        },
+        {
+            title: 'New From Template',
+            subItems: templateMenuList,
+        },
+        {
+            title: '',
+            isDivide: true,
+        },
+        {
+            title: 'Open In New Tab',
+            callback: () => {
+                const new_window = window.open(
+                    `/${workspaceId}/${pageId}`,
+                    '_blank'
+                );
+                if (new_window) {
+                    new_window.focus();
+                }
+            },
+        },
+        {
+            title: '',
+            isDivide: true,
+        },
+        {
+            title: 'Copy Link',
+            callback: () => {
+                handle_copy_link();
+            },
+        },
+        {
+            title: 'Delete',
+            callback: () => {
+                handle_delete();
+            },
+        },
+    ];
+
+    return (
+        <>
+            <span
+                className={styles['TreeItemMoreActions']}
+                onClick={handleClick}
+            >
+                ···
+            </span>
+            <Cascader
+                items={menuList}
+                anchorEl={anchorEl}
+                placement="right-start"
+                open={open}
+                onClose={handleClose}
+            ></Cascader>
+            <Snackbar
+                anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+                open={alert_open}
+                message={MESSAGES.COPY_LINK_SUCCESS}
+                key={'bottomcenter'}
+                autoHideDuration={2000}
+                onClose={handle_alert_close}
+            />
+        </>
+    );
+}
+
+export default DndTreeItemMoreActions;
diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/NewFromTemplatePortal.tsx b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/NewFromTemplatePortal.tsx
new file mode 100644
index 000000000..c60864f34
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/NewFromTemplatePortal.tsx
@@ -0,0 +1,149 @@
+import React, {
+    useState,
+    MouseEvent,
+    useCallback,
+    useEffect,
+    useRef,
+} from 'react';
+import { services, TemplateFactory } from '@toeverything/datasource/db-service';
+import { useParams, useNavigate } from 'react-router-dom';
+
+import { copyToClipboard } from '@toeverything/utils';
+import { ViewSidebarIcon } from '@toeverything/components/common';
+import {
+    MuiSnackbar as Snackbar,
+    MuiPopover as Popover,
+    ListButton,
+    MuiDivider as Divider,
+    MuiSwitch as Switch,
+    styled,
+    BaseButton,
+} from '@toeverything/components/ui';
+import { useUserAndSpaces } from '@toeverything/datasource/state';
+import { useFlag } from '@toeverything/datasource/feature-flags';
+const NewFromTemplatePortalContainer = styled('div')({
+    width: '320p',
+    padding: '15px',
+    '.textDescription': {
+        height: '22px',
+        lineHeight: '22px',
+        marginLeft: '30px',
+        fontSize: '14px',
+        color: '#ccc',
+        p: {
+            margin: 0,
+        },
+    },
+    '.switchDescription': {
+        color: '#ccc',
+        fontSize: '14px',
+        paddingLeft: '30px',
+    },
+});
+
+const BtnPageSettingContainer = styled('div')({
+    width: '24px',
+    height: '24px',
+});
+
+const MESSAGES = {
+    COPY_LINK: ' Copy Link',
+    INVITE: 'Add people,emails, or groups',
+    COPY_LINK_SUCCESS: 'Copyed link to clipboard',
+};
+
+interface NewFromTemplatePortalProps {
+    workspaceId: string;
+    pageId: string;
+}
+function NewFromTemplatePortal(props: NewFromTemplatePortalProps) {
+    const [alertOpen, setAlertOpen] = useState(false);
+    const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
+
+    const params = useParams();
+    const navigate = useNavigate();
+    const { user } = useUserAndSpaces();
+
+    const workspaceId = props.workspaceId;
+    const pageId = props.pageId;
+    const handleAlertClose = () => {
+        setAlertOpen(false);
+    };
+    const redirectToPage = (newWorkspaceId: string, newPageId: string) => {
+        navigate('/' + newWorkspaceId + '/' + newPageId);
+    };
+
+    const handleNewFromTemplate = async template => {
+        const newPage = await services.api.editorBlock.create({
+            workspace: workspaceId,
+            type: 'page' as const,
+        });
+
+        await services.api.pageTree.addNextPageToWorkspace(
+            workspaceId,
+            pageId,
+            newPage.id
+        );
+
+        await services.api.editorBlock.copyTemplateToPage(
+            workspaceId,
+            newPage.id,
+            TemplateFactory.generatePageTemplateByGroupKeys({
+                name: template.name,
+                groupKeys: template.groupKeys,
+            })
+        );
+
+        redirectToPage(workspaceId, newPage.id);
+
+        handleClose();
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const open = Boolean(anchorEl);
+    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const newFromTemplateRef = useRef();
+    const templateList = useFlag(
+        'JSONTemplateList',
+        TemplateFactory.defaultTemplateList
+    );
+    return (
+        <>
+            <div ref={newFromTemplateRef} onClick={handleClick}>
+                <ListButton content="New From Template" onClick={() => {}} />
+            </div>
+
+            <Popover
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }}
+                open={open}
+                anchorEl={anchorEl}
+                onClose={handleClose}
+            >
+                <NewFromTemplatePortalContainer>
+                    <>
+                        {templateList.map((template, index) => {
+                            return (
+                                <div
+                                    key={index}
+                                    onClick={() => {
+                                        handleNewFromTemplate(template);
+                                    }}
+                                >
+                                    <BaseButton>{template.name}</BaseButton>
+                                </div>
+                            );
+                        })}
+                    </>
+                </NewFromTemplatePortalContainer>
+            </Popover>
+        </>
+    );
+}
+
+export { NewFromTemplatePortal };
diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx
new file mode 100755
index 000000000..4769bde6b
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx
@@ -0,0 +1,184 @@
+import React, {
+    forwardRef,
+    type CSSProperties,
+    type HTMLAttributes,
+} from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import cx from 'clsx';
+import { CloseIcon, DocumentIcon } from '@toeverything/components/common';
+import {
+    ArrowDropDownIcon,
+    ArrowRightIcon,
+} from '@toeverything/components/icons';
+
+import styles from './tree-item.module.scss';
+import { useFlag } from '@toeverything/datasource/feature-flags';
+
+import MoreActions from './MoreActions';
+export type TreeItemProps = {
+    /** The main text to display on this line */
+    value: string;
+    /** The layer number of the node, 0, 1, 2 */
+    depth: number;
+    /** The item in the DragOverlay is clone, the one in the normal list is not clone, and the delete icon is displayed through the clone control */
+    clone?: boolean;
+    pageId?: string;
+    childCount?: number;
+    collapsed?: boolean;
+    disableInteraction?: boolean;
+    disableSelection?: boolean;
+    /** isDragging */
+    ghost?: boolean;
+    handleProps?: any;
+    indicator?: boolean;
+    indentationWidth: number;
+    onCollapse?(): void;
+    onRemove?(): void;
+    /** The ref of the outermost container is often used as droppaHTMLAttributes<HTMLLIElement>ble-node; the ref of the inner dom is often used as draggable-node */
+    wrapperRef?(node: HTMLLIElement): void;
+} & HTMLAttributes<HTMLLIElement>;
+
+export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
+    (
+        {
+            childCount,
+            clone,
+            depth,
+            disableSelection,
+            disableInteraction,
+            ghost,
+            handleProps,
+            indentationWidth,
+            indicator,
+            collapsed,
+            onCollapse,
+            onRemove,
+            style,
+            value,
+            wrapperRef,
+            pageId,
+            ...props
+        },
+        ref
+    ) => {
+        const { workspace_id } = useParams();
+        const navigate = useNavigate();
+        const BooleanPageTreeItemMoreActions = useFlag(
+            'BooleanPageTreeItemMoreActions',
+            false
+        );
+        return (
+            <li
+                ref={wrapperRef}
+                className={cx(
+                    styles['Wrapper'],
+                    clone && styles['clone'],
+                    ghost && styles['ghost'],
+                    indicator && styles['indicator'],
+                    disableSelection && styles['disableSelection'],
+                    disableInteraction && styles['disableInteraction']
+                )}
+                style={
+                    {
+                        '--spacing': `${indentationWidth * depth}px`,
+                    } as CSSProperties
+                }
+                {...props}
+            >
+                <div
+                    ref={ref}
+                    className={styles['TreeItem']}
+                    style={style}
+                    title={value}
+                >
+                    <Action onClick={onCollapse}>
+                        {collapsed ? <ArrowRightIcon /> : <ArrowDropDownIcon />}
+                    </Action>
+                    <Action>
+                        <DocumentIcon />
+                    </Action>
+                    <span
+                        className={styles['Text']}
+                        {...handleProps}
+                        onClick={() => {
+                            navigate(`/${workspace_id}/${pageId}`);
+                        }}
+                    >
+                        {value}
+                    </span>
+                    {BooleanPageTreeItemMoreActions && (
+                        <MoreActions
+                            workspaceId={workspace_id}
+                            pageId={pageId}
+                            onRemove={onRemove}
+                        />
+                    )}
+
+                    {!clone && onRemove && <Remove onClick={onRemove} />}
+                    {clone && childCount && childCount > 1 ? (
+                        <span className={styles['Count']}>{childCount}</span>
+                    ) : null}
+                </div>
+            </li>
+        );
+    }
+);
+
+export interface ActionProps extends React.HTMLAttributes<HTMLButtonElement> {
+    active?: {
+        fill: string;
+        background: string;
+    };
+    // cursor?: CSSProperties['cursor'];
+    cursor?: 'pointer' | 'grab';
+}
+
+/** Customizable buttons */
+export function Action({
+    active,
+    className,
+    cursor,
+    style,
+    ...props
+}: ActionProps) {
+    return (
+        <button
+            {...props}
+            className={cx(styles['Action'], className)}
+            tabIndex={0}
+            style={
+                {
+                    ...style,
+                    // cursor,
+                    '--fill': active?.fill,
+                    '--background': active?.background,
+                } as CSSProperties
+            }
+        />
+    );
+}
+
+export function Handle(props: ActionProps) {
+    return (
+        <Action cursor="grab" data-cypress="draggable-handle" {...props}>
+            <ArrowDropDownIcon />
+        </Action>
+    );
+}
+
+export function Remove(props: ActionProps) {
+    return (
+        <Action
+            {...props}
+            active={{
+                fill: 'rgba(255, 70, 70, 0.95)',
+                background: 'rgba(255, 70, 70, 0.1)',
+            }}
+        >
+            <CloseIcon style={{ fontSize: 12 }} />
+            {/* <svg width="8" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
+                <path d="M2.99998 -0.000206962C2.7441 -0.000206962 2.48794 0.0972617 2.29294 0.292762L0.292945 2.29276C-0.0980552 2.68376 -0.0980552 3.31682 0.292945 3.70682L7.58591 10.9998L0.292945 18.2928C-0.0980552 18.6838 -0.0980552 19.3168 0.292945 19.7068L2.29294 21.7068C2.68394 22.0978 3.31701 22.0978 3.70701 21.7068L11 14.4139L18.2929 21.7068C18.6829 22.0978 19.317 22.0978 19.707 21.7068L21.707 19.7068C22.098 19.3158 22.098 18.6828 21.707 18.2928L14.414 10.9998L21.707 3.70682C22.098 3.31682 22.098 2.68276 21.707 2.29276L19.707 0.292762C19.316 -0.0982383 18.6829 -0.0982383 18.2929 0.292762L11 7.58573L3.70701 0.292762C3.51151 0.0972617 3.25585 -0.000206962 2.99998 -0.000206962Z" />
+            </svg> */}
+        </Action>
+    );
+}
diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/index.ts b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/index.ts
new file mode 100755
index 000000000..830b31124
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/index.ts
@@ -0,0 +1,2 @@
+export { DndTreeItem } from './DndTreeItem';
+export { TreeItem } from './TreeItem';
diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/tree-item.module.scss b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/tree-item.module.scss
new file mode 100755
index 000000000..74512207c
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/tree-item.module.scss
@@ -0,0 +1,182 @@
+.Wrapper {
+    box-sizing: border-box;
+    padding-left: var(--spacing);
+    margin-bottom: -1px;
+    list-style: none;
+    padding: 6px 0;
+    font-size: 14px;
+
+    &.clone {
+        display: inline-block;
+        padding: 0;
+        margin-left: 10px;
+        margin-top: 5px;
+        pointer-events: none;
+
+        .TreeItem {
+            padding-right: 20px;
+            border-radius: 4px;
+            box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
+        }
+    }
+
+    &.ghost {
+        &.indicator {
+            opacity: 1;
+            position: relative;
+            z-index: 1;
+            margin-bottom: -1px;
+
+            .TreeItem {
+                position: relative;
+                padding: 0;
+                height: 8px;
+                border-color: #2389ff;
+                background-color: #56a1f8;
+
+                &:before {
+                    position: absolute;
+                    left: -8px;
+                    top: -4px;
+                    display: block;
+                    content: '';
+                    width: 12px;
+                    height: 12px;
+                    border-radius: 50%;
+                    border: 1px solid #2389ff;
+                    background-color: #ffffff;
+                }
+
+                > * {
+                    /* Items are hidden using height and opacity to retain focus */
+                    opacity: 0;
+                    height: 0;
+                }
+            }
+        }
+
+        &:not(.indicator) {
+            opacity: 0.5;
+        }
+
+        .TreeItem > * {
+            box-shadow: none;
+            background-color: transparent;
+        }
+    }
+}
+
+.TreeItem {
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 4px 0;
+    background-color: #fff;
+    color: #4c6275;
+
+    .TreeItemMoreActions {
+        visibility: hidden;
+        cursor: pointer;
+    }
+    &:hover {
+        .TreeItemMoreActions {
+            visibility: visible;
+            display: block;
+        }
+    }
+}
+
+.Text {
+    flex-grow: 1;
+    padding-left: 0.5rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.Count {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: #2389ff;
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: #fff;
+}
+
+.disableInteraction {
+    pointer-events: none;
+}
+
+.disableSelection,
+.clone {
+    .Text,
+    .Count {
+        user-select: none;
+        -webkit-user-select: none;
+    }
+}
+
+.Collapse {
+    svg {
+        transition: transform 250ms ease;
+    }
+
+    &.collapsed svg {
+        transform: rotate(-90deg);
+    }
+}
+
+.Action {
+    display: flex;
+    width: 12px;
+    padding: 0 15px;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    touch-action: none;
+    cursor: pointer;
+    border-radius: 5px;
+    border: none;
+    outline: none;
+    appearance: none;
+    background-color: transparent;
+    -webkit-tap-highlight-color: transparent;
+
+    &:hover {
+        background-color: var(--action-background, rgba(0, 0, 0, 0.05));
+
+        svg {
+            fill: #6f7b88;
+        }
+    }
+
+    svg {
+        flex: 0 0 auto;
+        margin: auto;
+        height: 100%;
+        overflow: visible;
+        fill: #919eab;
+    }
+
+    &:active {
+        background-color: var(--background, rgba(0, 0, 0, 0.05));
+
+        svg {
+            fill: var(--fill, #788491);
+        }
+    }
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0px 0px 2px #4c9ffe;
+    }
+}
diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/types.ts b/libs/components/layout/src/workspace-sidebar/page-tree/types.ts
new file mode 100755
index 000000000..e7a4c9949
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/page-tree/types.ts
@@ -0,0 +1,25 @@
+import type { MutableRefObject } from 'react';
+
+export type TreeItem = {
+    /** page id */
+    id: string;
+    /** page title */
+    title?: string;
+    /** sub pages */
+    children: TreeItem[];
+    collapsed?: boolean;
+};
+
+export type TreeItems = TreeItem[];
+
+export type FlattenedItem = TreeItem & {
+    index: number;
+    /** parent page id */
+    parentId: string | null;
+    depth: number;
+};
+
+export type SensorContext = MutableRefObject<{
+    items: FlattenedItem[];
+    offset: number;
+}>;
diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/use-page-tree.ts b/libs/components/layout/src/workspace-sidebar/page-tree/use-page-tree.ts
new file mode 100755
index 000000000..1cea945cc
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/page-tree/use-page-tree.ts
@@ -0,0 +1,215 @@
+import { useCallback, useMemo, useState, useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { atom, useAtom } from 'jotai';
+import type {
+    DragEndEvent,
+    DragMoveEvent,
+    DragOverEvent,
+    DragStartEvent,
+} from '@dnd-kit/core';
+import { arrayMove } from '@dnd-kit/sortable';
+
+import { services } from '@toeverything/datasource/db-service';
+import type { DndTreeProps } from './DndTree';
+import type { FlattenedItem, TreeItem, TreeItems } from './types';
+import {
+    buildTree,
+    flattenTree,
+    getProjection,
+    removeChildrenOf,
+    removeItem,
+    setProperty,
+} from './utils';
+
+const page_tree_atom = atom<TreeItems | undefined>([]);
+
+export const usePageTree = ({ indentationWidth = 16 }: DndTreeProps = {}) => {
+    const { workspace_id, page_id } = useParams();
+    const navigate = useNavigate();
+    const [items] = useAtom(page_tree_atom);
+    const [activeId, setActiveId] = useState<string | undefined>(undefined);
+    const [overId, setOverId] = useState<string | undefined>(undefined);
+    const [offsetLeft, setOffsetLeft] = useState<number>(0);
+
+    const flattenedItems = useMemo(() => {
+        const flattenedTree = flattenTree(items);
+        const collapsedItems = flattenedTree.reduce<string[]>(
+            (acc, { children, collapsed, id }) =>
+                collapsed && children.length ? [...acc, id] : acc,
+            []
+        );
+        return removeChildrenOf(
+            flattenedTree,
+            activeId ? [activeId, ...collapsedItems] : collapsedItems
+        );
+    }, [activeId, items]);
+
+    const projected = useMemo(
+        () =>
+            activeId && overId
+                ? getProjection(
+                      flattenedItems,
+                      activeId,
+                      overId,
+                      offsetLeft,
+                      indentationWidth
+                  )
+                : null,
+        [activeId, flattenedItems, indentationWidth, offsetLeft, overId]
+    );
+
+    const savePageTreeData = useCallback(
+        async (treeData?: TreeItem[]) => {
+            await services.api.pageTree.setPageTree<TreeItem>(
+                workspace_id,
+                treeData || []
+            );
+        },
+        [workspace_id]
+    );
+
+    const resetState = useCallback(() => {
+        setOverId(undefined);
+        setActiveId(undefined);
+        setOffsetLeft(0);
+
+        document.body.style.setProperty('cursor', '');
+    }, []);
+
+    const handleDragStart = useCallback(({ active: { id: activeId } }) => {
+        setActiveId(activeId);
+        setOverId(activeId);
+
+        document.body.style.setProperty('cursor', 'grabbing');
+    }, []);
+
+    const handleDragMove = useCallback(({ delta }: DragMoveEvent) => {
+        setOffsetLeft(delta.x);
+    }, []);
+
+    const handleDragOver = useCallback(({ over }) => {
+        setOverId(over?.id ?? null);
+    }, []);
+
+    const handleDragEnd = useCallback(
+        async ({ active, over }: DragEndEvent) => {
+            resetState();
+
+            if (projected && over) {
+                const { depth, parentId } = projected;
+                const clonedItems: FlattenedItem[] = JSON.parse(
+                    JSON.stringify(flattenTree(items))
+                );
+                const overIndex = clonedItems.findIndex(
+                    ({ id }) => id === over.id
+                );
+                const activeIndex = clonedItems.findIndex(
+                    ({ id }) => id === active.id
+                );
+                const activeTreeItem = clonedItems[activeIndex];
+
+                clonedItems[activeIndex] = {
+                    ...activeTreeItem,
+                    depth,
+                    parentId,
+                };
+
+                const sortedItems = arrayMove(
+                    clonedItems,
+                    activeIndex,
+                    overIndex
+                );
+                const newItems = buildTree(sortedItems);
+
+                await savePageTreeData(newItems);
+            }
+        },
+        [items, projected, resetState, savePageTreeData]
+    );
+
+    const handleDragCancel = useCallback(() => {
+        resetState();
+    }, [resetState]);
+
+    const handleRemove = useCallback(
+        async (id: string) => {
+            await savePageTreeData(removeItem(items, id));
+            await services.api.userConfig.removePage(workspace_id, id);
+            //remove page from jwst
+            await services.api.pageTree.removePage(workspace_id, id);
+            if (id === page_id) {
+                navigate(`/${workspace_id}`);
+            }
+        },
+        [items, savePageTreeData, workspace_id]
+    );
+
+    const handleAddPage = useCallback(
+        async (page_id?: string) => {
+            await savePageTreeData([{ id: page_id, children: [] }, ...items]);
+        },
+        [items, savePageTreeData]
+    );
+
+    const handleCollapse = useCallback(
+        async (id: string) => {
+            await savePageTreeData(
+                setProperty(items, id, 'collapsed', value => {
+                    return !value;
+                })
+            );
+        },
+        [items, savePageTreeData]
+    );
+
+    return {
+        items,
+        activeId,
+        overId,
+        offsetLeft,
+        flattenedItems,
+        projected,
+        handleAddPage,
+        handleDragStart,
+        handleDragMove,
+        handleDragOver,
+        handleDragEnd,
+        handleDragCancel,
+        handleRemove,
+        handleCollapse,
+    };
+};
+
+export const useDndTreeAutoUpdate = () => {
+    const [, set_items] = useAtom(page_tree_atom);
+    const { workspace_id, page_id } = useParams();
+
+    const fetch_page_tree_data = useCallback(async () => {
+        const pages = await services.api.pageTree.getPageTree<TreeItem>(
+            workspace_id
+        );
+        set_items(pages);
+    }, [set_items, workspace_id]);
+
+    useEffect(() => {
+        fetch_page_tree_data();
+    }, [fetch_page_tree_data]);
+
+    useEffect(() => {
+        if (!page_id) return () => {};
+        let unobserve: () => void;
+        const auto_update_page_tree = async () => {
+            unobserve = await services.api.pageTree.observe(
+                { workspace: workspace_id, page: page_id },
+                () => {
+                    fetch_page_tree_data();
+                }
+            );
+        };
+        auto_update_page_tree();
+
+        return () => {
+            unobserve?.();
+        };
+    }, [fetch_page_tree_data, page_id, workspace_id]);
+};
diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/utils.ts b/libs/components/layout/src/workspace-sidebar/page-tree/utils.ts
new file mode 100755
index 000000000..f09d236dc
--- /dev/null
+++ b/libs/components/layout/src/workspace-sidebar/page-tree/utils.ts
@@ -0,0 +1,214 @@
+import { arrayMove } from '@dnd-kit/sortable';
+
+import type { FlattenedItem, TreeItem, TreeItems } from './types';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const iOS = /iPad|iPhone|iPod/.test(navigator.platform);
+
+function getDragDepth(offset: number, indentationWidth: number) {
+    return Math.round(offset / indentationWidth);
+}
+
+export function getProjection(
+    items: FlattenedItem[],
+    activeId: string,
+    overId: string,
+    dragOffset: number,
+    indentationWidth: number
+) {
+    const overItemIndex = items.findIndex(({ id }) => id === overId);
+    const activeItemIndex = items.findIndex(({ id }) => id === activeId);
+    const activeItem = items[activeItemIndex];
+    const newItems = arrayMove(items, activeItemIndex, overItemIndex);
+    const previousItem = newItems[overItemIndex - 1];
+    const nextItem = newItems[overItemIndex + 1];
+    const dragDepth = getDragDepth(dragOffset, indentationWidth);
+    const projectedDepth = activeItem.depth + dragDepth;
+    const maxDepth = getMaxDepth({
+        previousItem,
+    });
+    const minDepth = getMinDepth({ nextItem });
+    let depth = projectedDepth;
+
+    if (projectedDepth >= maxDepth) {
+        depth = maxDepth;
+    } else if (projectedDepth < minDepth) {
+        depth = minDepth;
+    }
+
+    return { depth, maxDepth, minDepth, parentId: getParentId() };
+
+    function getParentId() {
+        if (depth === 0 || !previousItem) {
+            return null;
+        }
+
+        if (depth === previousItem.depth) {
+            return previousItem.parentId;
+        }
+
+        if (depth > previousItem.depth) {
+            return previousItem.id;
+        }
+
+        const newParent = newItems
+            .slice(0, overItemIndex)
+            .reverse()
+            .find(item => item.depth === depth)?.parentId;
+
+        return newParent ?? null;
+    }
+}
+
+function getMaxDepth({ previousItem }: { previousItem: FlattenedItem }) {
+    if (previousItem) {
+        return previousItem.depth + 1;
+    }
+
+    return 0;
+}
+
+function getMinDepth({ nextItem }: { nextItem: FlattenedItem }) {
+    if (nextItem) {
+        return nextItem.depth;
+    }
+
+    return 0;
+}
+
+function flatten(
+    items: TreeItems,
+    parentId: string | null = null,
+    depth = 0
+): FlattenedItem[] {
+    return items.reduce<FlattenedItem[]>((acc, item, index) => {
+        return [
+            ...acc,
+            { ...item, parentId, depth, index },
+            ...flatten(item.children, item.id, depth + 1),
+        ];
+    }, []);
+}
+
+export function flattenTree(items: TreeItems): FlattenedItem[] {
+    return flatten(items);
+}
+
+export function buildTree(flattenedItems: FlattenedItem[]): TreeItems {
+    const root: TreeItem = { id: 'root', children: [] };
+    const nodes: Record<string, TreeItem> = { [root.id]: root };
+    const items = flattenedItems.map(item => ({ ...item, children: [] }));
+
+    for (const item of items) {
+        const { id, children } = item;
+        const parentId = item.parentId ?? root.id;
+        const parent = nodes[parentId] ?? findItem(items, parentId);
+
+        nodes[id] = { id, children };
+        parent.children.push(item);
+    }
+
+    return root.children;
+}
+
+export function findItem(items: TreeItem[], itemId: string) {
+    return items.find(({ id }) => id === itemId);
+}
+
+export function findItemDeep(
+    items: TreeItems,
+    itemId: string
+): TreeItem | undefined {
+    for (const item of items) {
+        const { id, children } = item;
+
+        if (id === itemId) {
+            return item;
+        }
+
+        if (children.length) {
+            const child = findItemDeep(children, itemId);
+
+            if (child) {
+                return child;
+            }
+        }
+    }
+
+    return undefined;
+}
+
+/** Recursively remove id objects from items */
+export function removeItem(items: TreeItems, id: string) {
+    const newItems = [];
+
+    for (const item of items) {
+        if (item.id === id) {
+            continue;
+        }
+
+        if (item.children.length) {
+            item.children = removeItem(item.children, id);
+        }
+
+        newItems.push(item);
+    }
+
+    return newItems;
+}
+
+/** Recursively modify the attribute value of the id node in the tree, returning a new array */
+export function setProperty<T extends keyof TreeItem>(
+    items: TreeItems,
+    id: string,
+    property: T,
+    setter: (value: TreeItem[T]) => TreeItem[T]
+) {
+    for (const item of items) {
+        if (item.id === id) {
+            item[property] = setter(item[property]);
+            continue;
+        }
+
+        if (item.children.length) {
+            item.children = setProperty(item.children, id, property, setter);
+        }
+    }
+
+    return [...items];
+}
+
+function countChildren(items: TreeItem[], count = 0): number {
+    return items.reduce((acc, { children }) => {
+        if (children.length) {
+            return countChildren(children, acc + 1);
+        }
+
+        return acc + 1;
+    }, count);
+}
+
+export function getChildCount(items: TreeItems, id: string) {
+    if (!id) {
+        return 0;
+    }
+
+    const item = findItemDeep(items, id);
+
+    return item ? countChildren(item.children) : 0;
+}
+
+export function removeChildrenOf(items: FlattenedItem[], ids: string[]) {
+    const excludeParentIds = [...ids];
+
+    return items.filter(item => {
+        if (item.parentId && excludeParentIds.includes(item.parentId)) {
+            if (item.children.length) {
+                excludeParentIds.push(item.id);
+            }
+            return false;
+        }
+
+        return true;
+    });
+}
diff --git a/libs/components/layout/tsconfig.json b/libs/components/layout/tsconfig.json
new file mode 100644
index 000000000..29a75d607
--- /dev/null
+++ b/libs/components/layout/tsconfig.json
@@ -0,0 +1,26 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noImplicitAny": false,
+        "noFallthroughCasesInSwitch": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/components/layout/tsconfig.lib.json b/libs/components/layout/tsconfig.lib.json
new file mode 100644
index 000000000..0dda33329
--- /dev/null
+++ b/libs/components/layout/tsconfig.lib.json
@@ -0,0 +1,22 @@
+{
+    "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": [
+        "**/*.spec.ts",
+        "**/*.test.ts",
+        "**/*.spec.tsx",
+        "**/*.test.tsx",
+        "**/*.spec.js",
+        "**/*.test.js",
+        "**/*.spec.jsx",
+        "**/*.test.jsx"
+    ],
+    "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/libs/components/layout/tsconfig.spec.json b/libs/components/layout/tsconfig.spec.json
new file mode 100644
index 000000000..ee70363dc
--- /dev/null
+++ b/libs/components/layout/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "module": "commonjs",
+        "types": ["jest", "node"]
+    },
+    "include": [
+        "**/*.test.ts",
+        "**/*.spec.ts",
+        "**/*.test.tsx",
+        "**/*.spec.tsx",
+        "**/*.test.js",
+        "**/*.spec.js",
+        "**/*.test.jsx",
+        "**/*.spec.jsx",
+        "**/*.d.ts"
+    ]
+}
diff --git a/libs/components/ui/.babelrc b/libs/components/ui/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/components/ui/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/components/ui/.eslintrc.json b/libs/components/ui/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/components/ui/.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": {}
+        }
+    ]
+}
diff --git a/libs/components/ui/README.md b/libs/components/ui/README.md
new file mode 100644
index 000000000..8989a4b31
--- /dev/null
+++ b/libs/components/ui/README.md
@@ -0,0 +1,7 @@
+# components-ui
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test components-ui` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/components/ui/jest.config.ts b/libs/components/ui/jest.config.ts
new file mode 100644
index 000000000..2ff5e8716
--- /dev/null
+++ b/libs/components/ui/jest.config.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+    displayName: 'components-ui',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/components/ui',
+};
diff --git a/libs/components/ui/package.json b/libs/components/ui/package.json
new file mode 100644
index 000000000..a1b2bc97d
--- /dev/null
+++ b/libs/components/ui/package.json
@@ -0,0 +1,19 @@
+{
+    "name": "@toeverything/components/ui",
+    "version": "0.0.1",
+    "license": "MIT",
+    "dependencies": {
+        "@emotion/is-prop-valid": "^1.1.3",
+        "@emotion/react": "^11.9.3",
+        "@emotion/styled": "^11.9.3",
+        "@floating-ui/dom": "^0.5.4",
+        "@mui/base": "^5.0.0-alpha.87",
+        "@mui/material": "^5.8.6",
+        "@mui/system": "^5.8.6",
+        "@mui/x-date-pickers": "^5.0.0-alpha.7",
+        "@mui/x-date-pickers-pro": "^5.0.0-alpha.7",
+        "@types/react-date-range": "^1.4.4",
+        "clsx": "^1.2.0",
+        "react-date-range": "^1.4.0"
+    }
+}
diff --git a/libs/components/ui/project.json b/libs/components/ui/project.json
new file mode 100644
index 000000000..093d6f19d
--- /dev/null
+++ b/libs/components/ui/project.json
@@ -0,0 +1,43 @@
+{
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/components/ui/src",
+    "projectType": "library",
+    "tags": ["components:ui"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/components/ui",
+                "tsConfig": "libs/components/ui/tsconfig.lib.json",
+                "project": "libs/components/ui/package.json",
+                "entryFile": "libs/components/ui/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "libs/rollup-ts-checker.config.cjs",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/components/ui/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": ["libs/components/ui/**/*.{ts,tsx,js,jsx}"]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/components/ui"],
+            "options": {
+                "jestConfig": "libs/components/ui/jest.config.ts",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/components/ui/src/autocomplete/index.tsx b/libs/components/ui/src/autocomplete/index.tsx
new file mode 100644
index 000000000..b296cfb9d
--- /dev/null
+++ b/libs/components/ui/src/autocomplete/index.tsx
@@ -0,0 +1,3 @@
+/* eslint-disable no-restricted-imports */
+export { autocompleteClasses } from '@mui/material/Autocomplete';
+export { useAutocomplete } from '@mui/material';
diff --git a/libs/components/ui/src/button/IconButton.tsx b/libs/components/ui/src/button/IconButton.tsx
new file mode 100644
index 000000000..bfbc79265
--- /dev/null
+++ b/libs/components/ui/src/button/IconButton.tsx
@@ -0,0 +1,98 @@
+import type {
+    FC,
+    MouseEventHandler,
+    CSSProperties,
+    PropsWithChildren,
+} from 'react';
+import { styled } from '../styled';
+import { buttonStatus } from './constants';
+import { cx } from '../clsx';
+
+/* Temporary solution, needs to be adjusted */
+const SIZE_SMALL = 'small' as const;
+const SIZE_MIDDLE = 'middle' as const;
+const SIZE_LARGE = 'large' as const;
+
+const SIZE_CONFIG = {
+    [SIZE_SMALL]: {
+        iconSize: '14px',
+        areaSize: '20px',
+    },
+    [SIZE_MIDDLE]: {
+        iconSize: '20px',
+        areaSize: '32px',
+    },
+    [SIZE_LARGE]: {
+        iconSize: '24px',
+        areaSize: '36px',
+    },
+} as const;
+
+type SizeType = keyof typeof SIZE_CONFIG;
+
+interface IconButtonProps {
+    onClick?: MouseEventHandler;
+    disabled?: boolean;
+    style?: CSSProperties;
+    className?: string;
+}
+
+export const IconButton: FC<PropsWithChildren<IconButtonProps>> = ({
+    children,
+    disabled,
+    onClick,
+    className,
+    ...props
+}) => {
+    return (
+        <Container
+            {...props}
+            onClick={disabled ? undefined : onClick}
+            disabled={disabled}
+            className={cx({ [buttonStatus.disabled]: disabled }, className)}
+        >
+            {children}
+        </Container>
+    );
+};
+
+const Container = styled('button')(({ theme }) => {
+    return {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '32px',
+        height: '32px',
+        backgroundColor: theme.affine.palette.white,
+        color: theme.affine.palette.icons,
+        padding: theme.affine.spacing.iconPadding,
+        borderRadius: '5px',
+
+        '& svg': {
+            width: '20px',
+            height: '20px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+
+        '&:hover': {
+            backgroundColor: theme.affine.palette.hover,
+        },
+
+        [`&${buttonStatus.hover}`]: {
+            backgroundColor: theme.affine.palette.hover,
+        },
+
+        '&:focus': {
+            color: theme.affine.palette.primary,
+        },
+        [`&.${buttonStatus.focus}`]: {
+            color: theme.affine.palette.primary,
+        },
+
+        [`&${buttonStatus.disabled}`]: {
+            cursor: 'not-allowed',
+        },
+    };
+});
diff --git a/libs/components/ui/src/button/base-button.ts b/libs/components/ui/src/button/base-button.ts
new file mode 100644
index 000000000..5d1df09e5
--- /dev/null
+++ b/libs/components/ui/src/button/base-button.ts
@@ -0,0 +1,31 @@
+import ButtonUnstyled, {
+    buttonUnstyledClasses,
+} from '@mui/base/ButtonUnstyled';
+import { styled } from '../styled';
+
+export const BaseButton = styled(ButtonUnstyled)`
+    fontFamily: 'Helvetica,Arial,"Microsoft Yahei",SimHei,sans-serif',
+    font-size: 0.875rem;
+    border-radius: 8px;
+    padding: 4px 8px;
+    transition: all 150ms ease;
+    cursor: pointer;
+    border: none;
+
+    &:hover {
+    }
+
+    &.${buttonUnstyledClasses.active} {
+    }
+
+    &.${buttonUnstyledClasses.focusVisible} {
+        box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1),
+            0 0 0 5px rgba(0, 127, 255, 0.5);
+        outline: none;
+    }
+
+    &.${buttonUnstyledClasses.disabled} {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+`;
diff --git a/libs/components/ui/src/button/constants.ts b/libs/components/ui/src/button/constants.ts
new file mode 100644
index 000000000..22ec35c5d
--- /dev/null
+++ b/libs/components/ui/src/button/constants.ts
@@ -0,0 +1,6 @@
+export const buttonStatus = {
+    hover: '.hover',
+    focus: '.focus',
+    active: '.focus',
+    disabled: '.disabled',
+};
diff --git a/libs/components/ui/src/button/index.ts b/libs/components/ui/src/button/index.ts
new file mode 100644
index 000000000..f6a56b47c
--- /dev/null
+++ b/libs/components/ui/src/button/index.ts
@@ -0,0 +1,3 @@
+export { BaseButton } from './base-button';
+export { ListButton } from './list-button';
+export { IconButton } from './IconButton';
diff --git a/libs/components/ui/src/button/list-button.tsx b/libs/components/ui/src/button/list-button.tsx
new file mode 100644
index 000000000..47fcefe1a
--- /dev/null
+++ b/libs/components/ui/src/button/list-button.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import clsx from 'clsx';
+import style9 from 'style9';
+
+import { BaseButton } from './base-button';
+import { SvgIconProps } from '../svg-icon';
+
+const styles = style9.create({
+    item: {
+        display: 'flex',
+        alignItems: 'center',
+        width: '220px',
+        paddingLeft: '22px',
+        paddingTop: '4px',
+        paddingBottom: '4px',
+        marginTop: '6px',
+        marginBottom: '6px',
+        borderRadius: '5px',
+        color: '#98ACBD',
+    },
+    item_hover: {
+        backgroundColor: 'rgba(152, 172, 189, 0.1)',
+    },
+    item_text: {
+        fontSize: '15px',
+        lineHeight: '17px',
+        textAlign: 'justify',
+        letterSpacing: '1.5px',
+        marginLeft: '21px',
+        color: '#4C6275',
+    },
+});
+
+type ListButtonProps = {
+    className?: string;
+    onClick: () => void;
+    onMouseOver?: () => void;
+    content?: string;
+    children?: () => JSX.Element;
+    hover?: boolean;
+    icon?: React.FC<SvgIconProps>;
+};
+
+export const ListButton = (props: ListButtonProps) => {
+    const MenuIcon = props.icon;
+    return (
+        <BaseButton
+            onClick={props.onClick}
+            onMouseOver={props.onMouseOver}
+            className={clsx(
+                styles('item', { item_hover: props.hover }),
+                props.className
+            )}
+        >
+            {MenuIcon && <MenuIcon sx={{ width: 20, height: 20 }} />}
+            <span className={styles('item_text')}>{props.content}</span>
+            {props.children}
+        </BaseButton>
+    );
+};
diff --git a/libs/components/ui/src/cascader/Cascader.tsx b/libs/components/ui/src/cascader/Cascader.tsx
new file mode 100644
index 000000000..5ff6fe608
--- /dev/null
+++ b/libs/components/ui/src/cascader/Cascader.tsx
@@ -0,0 +1,187 @@
+import { useRef, useState, ReactElement } from 'react';
+import {
+    MuiGrow as Grow,
+    MuiPopper as Popper,
+    MuiPopperPlacementType as PopperPlacementType,
+} from '../mui';
+import { styled } from '../styled';
+import { ArrowRightIcon } from '@toeverything/components/icons';
+import { Divider } from '../divider';
+
+export interface CascaderItemProps {
+    title: string;
+    shortcut?: string;
+    callback?: () => void;
+    subItems?: CascaderItemProps[];
+    children?: ReactElement | Array<never>;
+    icon?: ReactElement;
+    isDivide?: boolean;
+}
+
+interface ItemProps extends CascaderItemProps {
+    onClose?: () => void;
+}
+
+interface CascaderProps {
+    items: ItemProps[];
+    anchorEl: Element;
+    placement: PopperPlacementType;
+    open: boolean;
+    onClose: () => void;
+    children?: ReactElement | never[];
+    icon?: ReactElement;
+}
+
+function CascaderItem(props: ItemProps) {
+    const { title, subItems, callback, onClose, children, icon, isDivide } =
+        props;
+    const item_ref = useRef(null);
+    const [open, setOpen] = useState(false);
+
+    if (isDivide) {
+        return <Divider></Divider>;
+    }
+
+    const on_click_item = () => {
+        if ((subItems && subItems.length > 0) || children) {
+            return;
+        }
+        callback && callback();
+        onClose();
+    };
+    return (
+        <CascaderMenuItem
+            ref={item_ref}
+            onMouseEnter={() => setOpen(true)}
+            onMouseLeave={() => setOpen(false)}
+            onClick={() => on_click_item()}
+        >
+            <IconContainer>{icon}</IconContainer>
+            <div style={{ display: 'flex', flexGrow: 1 }}>
+                <div
+                    style={{
+                        flexGrow: 1,
+                    }}
+                >
+                    {title}
+                </div>
+                {children || (subItems && subItems.length > 0) ? (
+                    <Triangle>
+                        <ArrowRightIcon />
+                    </Triangle>
+                ) : null}
+            </div>
+            {((subItems && subItems.length > 0) || children) && (
+                <Cascader
+                    items={subItems}
+                    anchorEl={item_ref.current}
+                    placement="right-start"
+                    open={open}
+                    onClose={onClose}
+                    children={children}
+                />
+            )}
+        </CascaderMenuItem>
+    );
+}
+
+export function Cascader(props: CascaderProps) {
+    const { items, anchorEl, placement, open, onClose, children } = props;
+    return (
+        <Popper
+            open={open}
+            anchorEl={anchorEl}
+            role={undefined}
+            placement={placement}
+            transition
+            style={{ zIndex: 1000 }}
+            onMouseLeave={onClose}
+        >
+            {({ TransitionProps }) => (
+                <Grow
+                    {...TransitionProps}
+                    style={{
+                        transformOrigin: 'left bottom',
+                    }}
+                >
+                    <MenuPaper>
+                        {children ? children : null}
+                        <ul>
+                            {items.map(item => {
+                                return (
+                                    <CascaderItem
+                                        key={item.title}
+                                        title={item.title}
+                                        shortcut={item.shortcut}
+                                        callback={item.callback}
+                                        subItems={item.subItems || []}
+                                        onClose={onClose}
+                                        children={item.children}
+                                        icon={item.icon}
+                                        isDivide={item.isDivide}
+                                    />
+                                );
+                            })}
+                        </ul>
+                    </MenuPaper>
+                </Grow>
+            )}
+        </Popper>
+    );
+}
+
+const MenuPaper = styled('div')(({ theme }) => ({
+    fontFamily: 'PingFang SC',
+    background: '#FFF',
+    boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    borderRadius: '10px 0px 10px 10px',
+    color: '#4C6275',
+    fontWeight: '400',
+    padding: '4px 8px',
+}));
+
+const CascaderMenuItem = styled('li')(({ theme }) => ({
+    fontWeight: '400 !important',
+    width: '268px',
+    height: '32px',
+    lineHeight: '32px',
+    display: 'flex',
+    fontSize: '14px',
+    borderRadius: '5px',
+    cursor: 'pointer',
+    '&:hover': {
+        backgroundColor: '#F5F7F8',
+    },
+}));
+
+const IconContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    height: '32px',
+    margin: '0 8px',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    lineHeight: '32px',
+    fontSize: '20px',
+    '&, & > svg': {
+        width: '20px',
+    },
+    '& > svg': {
+        height: '20px',
+    },
+}));
+
+const Triangle = styled('div')(({ theme }) => ({
+    display: 'flex',
+    height: '32px',
+    marginRight: '8px',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    lineHeight: '32px',
+    fontSize: '20px',
+    '&, & > svg': {
+        width: '20px',
+    },
+    '& > svg': {
+        height: '20px',
+    },
+}));
diff --git a/libs/components/ui/src/cascader/index.ts b/libs/components/ui/src/cascader/index.ts
new file mode 100644
index 000000000..9da1b7038
--- /dev/null
+++ b/libs/components/ui/src/cascader/index.ts
@@ -0,0 +1 @@
+export * from './Cascader';
diff --git a/libs/components/ui/src/checkbox/Checkbox.tsx b/libs/components/ui/src/checkbox/Checkbox.tsx
new file mode 100644
index 000000000..e3d7121a4
--- /dev/null
+++ b/libs/components/ui/src/checkbox/Checkbox.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+/* eslint-disable no-restricted-imports */
+import MuiCheckbox, { type CheckboxProps } from '@mui/material/Checkbox';
+import {
+    CheckBoxUncheckIcon,
+    CheckBoxCheckIcon,
+} from '@toeverything/components/icons';
+import { styled } from '../styled';
+
+export { CheckboxProps };
+
+export const Checkbox = (props: CheckboxProps) => {
+    return (
+        <StyledCheckbox
+            icon={<CheckBoxUncheckIcon />}
+            checkedIcon={<CheckBoxCheckIcon />}
+            {...props}
+        />
+    );
+};
+
+const StyledCheckbox = styled(MuiCheckbox)`
+    padding: 0;
+    color: #b9cad5;
+    &.Mui-checked {
+        color: #b9cad5;
+    }
+`;
diff --git a/libs/components/ui/src/checkbox/index.tsx b/libs/components/ui/src/checkbox/index.tsx
new file mode 100644
index 000000000..43aaf9250
--- /dev/null
+++ b/libs/components/ui/src/checkbox/index.tsx
@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
diff --git a/libs/components/ui/src/classname/index.ts b/libs/components/ui/src/classname/index.ts
new file mode 100644
index 000000000..ac4bb27c3
--- /dev/null
+++ b/libs/components/ui/src/classname/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Caution! this module must not include unstyled components import from `@mui/base`, otherwise, it will break the ClassNameGenerator.
+ * ❌ import { ... } from '@mui/base';
+ * ✅ import { ... } from '@mui/base/utils'; // must be specific base module
+ *
+ * Issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401
+ */
+
+// eslint-disable-next-line import/prefer-default-export
+export { unstable_ClassNameGenerator } from '@mui/base/className';
diff --git a/libs/components/ui/src/clickable/Clickable.tsx b/libs/components/ui/src/clickable/Clickable.tsx
new file mode 100644
index 000000000..9f789ded9
--- /dev/null
+++ b/libs/components/ui/src/clickable/Clickable.tsx
@@ -0,0 +1,21 @@
+import { styled } from '../styled';
+
+interface ClickableProps {
+    active?: boolean;
+}
+
+export const Clickable = styled('div')<ClickableProps>(({ theme, active }) => {
+    return {
+        ...theme.affine.typography.sm,
+        backgroundColor: active
+            ? theme.affine.palette.hover
+            : theme.affine.palette.white,
+        cursor: 'pointer',
+        color: theme.affine.palette.menu,
+        borderRadius: '5px',
+
+        '&:hover': {
+            backgroundColor: theme.affine.palette.hover,
+        },
+    };
+});
diff --git a/libs/components/ui/src/clickable/index.ts b/libs/components/ui/src/clickable/index.ts
new file mode 100644
index 000000000..5687cc5d4
--- /dev/null
+++ b/libs/components/ui/src/clickable/index.ts
@@ -0,0 +1 @@
+export { Clickable } from './Clickable';
diff --git a/libs/components/ui/src/clsx.ts b/libs/components/ui/src/clsx.ts
new file mode 100644
index 000000000..fada348f0
--- /dev/null
+++ b/libs/components/ui/src/clsx.ts
@@ -0,0 +1,2 @@
+import clsx from 'clsx';
+export const cx = clsx;
diff --git a/libs/components/ui/src/date/Calendar.tsx b/libs/components/ui/src/date/Calendar.tsx
new file mode 100644
index 000000000..9104544b4
--- /dev/null
+++ b/libs/components/ui/src/date/Calendar.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import {
+    Calendar as ReactCalendar,
+    type CalendarProps,
+} from 'react-date-range';
+import { useTheme } from '../theme';
+
+export { CalendarProps };
+
+export const Calendar = (props: CalendarProps) => {
+    const theme = useTheme();
+
+    return <ReactCalendar color={theme.affine.palette.primary} {...props} />;
+};
diff --git a/libs/components/ui/src/date/DateRange.tsx b/libs/components/ui/src/date/DateRange.tsx
new file mode 100644
index 000000000..d9077eb09
--- /dev/null
+++ b/libs/components/ui/src/date/DateRange.tsx
@@ -0,0 +1,20 @@
+import {
+    DateRange as ReactDateRange,
+    type DateRangeProps,
+    type Range,
+} from 'react-date-range';
+import { useTheme } from '../theme';
+
+export { DateRangeProps, Range };
+
+export const DateRange = (props: DateRangeProps) => {
+    const theme = useTheme();
+
+    return (
+        <ReactDateRange
+            color={theme.affine.palette.primary}
+            rangeColors={[theme.affine.palette.primary]}
+            {...props}
+        />
+    );
+};
diff --git a/libs/components/ui/src/date/index.ts b/libs/components/ui/src/date/index.ts
new file mode 100644
index 000000000..3582a9204
--- /dev/null
+++ b/libs/components/ui/src/date/index.ts
@@ -0,0 +1,11 @@
+import 'react-date-range/dist/styles.css'; // main css file
+import 'react-date-range/dist/theme/default.css'; // theme css file
+
+// export { DateRange } from 'react-date-range';
+export { DateRange } from './DateRange';
+export { Calendar } from './Calendar';
+
+export type { DateRangeProps, Range } from './DateRange';
+export type { CalendarProps } from './Calendar';
+
+// export const NewDateRange = DateRange;
diff --git a/libs/components/ui/src/divider/Divider.tsx b/libs/components/ui/src/divider/Divider.tsx
new file mode 100644
index 000000000..62b74c4eb
--- /dev/null
+++ b/libs/components/ui/src/divider/Divider.tsx
@@ -0,0 +1,52 @@
+import type { FC, ReactNode, CSSProperties } from 'react';
+import { styled } from '../styled';
+import { MuiDivider } from '../mui';
+import type { MuiDividerProps } from '../mui';
+
+interface DividerProps {
+    orientation?: 'horizontal' | 'vertical';
+    textAlign?: 'center' | 'start' | 'end';
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+
+const _textAlignMap: Record<
+    DividerProps['textAlign'],
+    MuiDividerProps['textAlign']
+> = {
+    center: 'center',
+    start: 'left',
+    end: 'right',
+};
+
+export const Divider: FC<DividerProps> = ({
+    orientation = 'horizontal',
+    textAlign = 'center',
+    children,
+}) => {
+    return (
+        <StyledMuiDivider
+            orientation={orientation}
+            textAlign={_textAlignMap[textAlign]}
+            variant="fullWidth"
+        >
+            {children}
+        </StyledMuiDivider>
+    );
+};
+
+const StyledMuiDivider = styled(MuiDivider)<Pick<DividerProps, 'orientation'>>(
+    ({ orientation }) => {
+        if (orientation === 'horizontal') {
+            return {
+                marginTop: '6px',
+                marginBottom: '6px',
+            };
+        }
+        return {
+            marginLeft: '6px',
+            marginRight: '6px',
+        };
+    }
+);
diff --git a/libs/components/ui/src/divider/index.ts b/libs/components/ui/src/divider/index.ts
new file mode 100644
index 000000000..1f84888dc
--- /dev/null
+++ b/libs/components/ui/src/divider/index.ts
@@ -0,0 +1 @@
+export * from './Divider';
diff --git a/libs/components/ui/src/event-away/index.ts b/libs/components/ui/src/event-away/index.ts
new file mode 100644
index 000000000..155e71ad5
--- /dev/null
+++ b/libs/components/ui/src/event-away/index.ts
@@ -0,0 +1,62 @@
+import { useState, useEffect, useRef } from 'react';
+
+type Equal<X, Y, TrueValue, FalseValue> =
+    // prettier-ignore
+    (<T>() => T extends X ? 1 : 2) extends (<T>() => T extends Y ? 1 : 2)
+    ? TrueValue
+    : FalseValue;
+
+type ExtractEvent<K extends keyof DocumentEventMap, E> = Equal<
+    DocumentEventMap[K],
+    E,
+    K,
+    never
+>;
+
+type MouseEventName = {
+    [K in keyof DocumentEventMap]: ExtractEvent<K, MouseEvent>;
+}[keyof DocumentEventMap];
+
+type TouchEventName = {
+    [K in keyof DocumentEventMap]: ExtractEvent<K, TouchEvent>;
+}[keyof DocumentEventMap];
+
+type PointerEventName = {
+    [K in keyof DocumentEventMap]: ExtractEvent<K, PointerEvent>;
+}[keyof DocumentEventMap];
+
+interface EventAwayProps {
+    eventName: MouseEventName | TouchEventName | PointerEventName;
+    anchor: HTMLElement | HTMLElement[];
+}
+
+export const useEventAway = ({ eventName, anchor }: EventAwayProps) => {
+    const [away, set_away] = useState(true);
+    const anchors = useRef<HTMLElement[]>([]);
+    anchors.current = Array.isArray(anchor) ? anchor : [anchor];
+
+    useEffect(() => {
+        const listener = (event: MouseEvent | TouchEvent | PointerEvent) => {
+            if (event.composedPath) {
+                const composed_path = event.composedPath();
+                const found = composed_path.find(node =>
+                    anchors.current.includes(node as HTMLElement)
+                );
+                set_away(!found);
+            } else {
+                const found = anchors.current.find(anchor =>
+                    anchor.contains(event.target as HTMLElement)
+                );
+                set_away(!found);
+            }
+        };
+
+        document.addEventListener(eventName, listener);
+
+        return () => {
+            document.removeEventListener(eventName, listener);
+        };
+    }, [eventName]);
+
+    return { away };
+};
diff --git a/libs/components/ui/src/index.ts b/libs/components/ui/src/index.ts
new file mode 100644
index 000000000..24e76564c
--- /dev/null
+++ b/libs/components/ui/src/index.ts
@@ -0,0 +1,52 @@
+// Base abstract feature for all UI components
+export { Theme, useTheme, withTheme, ThemeProvider } from './theme';
+export { styled } from './styled';
+export type { SxProps } from './styled';
+
+export * from './mui';
+export * from './svg-icon';
+
+export { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
+export { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+export { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+export {
+    PickersDay,
+    type PickersDayProps,
+} from '@mui/x-date-pickers/PickersDay';
+
+// Components
+export { BaseButton, ListButton, IconButton } from './button';
+export { TransitionsModal } from './model';
+export { Popover, PopoverContainer } from './popover';
+export type { PopoverProps } from './popover';
+export { Popper } from './popper';
+export type { PopperProps, PopperHandler } from './popper';
+
+export { OldSelect, Select, Option } from './select';
+export { message } from './message';
+export { Input } from './input';
+export type { InputProps } from './input';
+export { Tooltip } from './tooltip';
+export { usePatchNodes } from './patch-elements';
+export type { PatchNode, UnPatchNode } from './patch-elements';
+export { Tag } from './tag';
+export type { TagProps } from './tag';
+export { Divider } from './divider';
+export { autocompleteClasses, useAutocomplete } from './autocomplete';
+export { Slider } from './slider';
+export { Typography } from './typography';
+export { ListItem, ListIcon } from './list';
+export { Clickable } from './clickable';
+export { DateRange, Calendar } from './date';
+export type { DateRangeProps, Range, CalendarProps } from './date';
+export { Radio } from './radio';
+export type { RadioProps } from './radio';
+export { Checkbox } from './checkbox';
+export type { CheckboxProps } from './checkbox';
+export * from './cascader';
+export { Switch } from './switch';
+export type { SwitchProps } from './switch';
+/* types */
+export type { SvgIconProps } from './svg-icon';
+
+export * from './clsx';
diff --git a/libs/components/ui/src/input/Input.tsx b/libs/components/ui/src/input/Input.tsx
new file mode 100644
index 000000000..b80dcbe88
--- /dev/null
+++ b/libs/components/ui/src/input/Input.tsx
@@ -0,0 +1,64 @@
+import { forwardRef, type ForwardedRef } from 'react';
+/* eslint-disable no-restricted-imports */
+import InputUnstyled, {
+    inputUnstyledClasses,
+    type InputUnstyledProps,
+} from '@mui/base/InputUnstyled';
+import { styled } from '../styled';
+
+/**
+ *  Input is extend by mui InputUnstyled
+ *
+ * InputUnstyled Demos:
+ *
+ * - [Input](https://mui.com/base/react-input/)
+ *
+ * InputUnstyled API:
+ *
+ * - [InputUnstyled API](https://mui.com/base/api/input-unstyled/)
+ *
+ * **/
+export type InputProps = InputUnstyledProps;
+
+export const Input = forwardRef(function CustomInput(
+    props: InputUnstyledProps,
+    ref: ForwardedRef<HTMLDivElement>
+) {
+    const { components, ...other } = props;
+    return (
+        <InputUnstyled
+            components={{
+                Root: StyledInputRoot,
+                Input: StyledInputElement,
+                ...components,
+            }}
+            {...other}
+            ref={ref}
+        />
+    );
+});
+
+const StyledInputRoot = styled('div')(({ theme }) => ({
+    height: '32px',
+    display: 'flex',
+    border: `1px solid ${theme.affine.palette.borderColor}`,
+    borderRadius: '10px',
+    color: `${theme.affine.palette.secondaryText}`,
+    padding: '0 12px',
+    fontSize: '14px',
+    lineHeight: '1.5',
+    transition: 'border .1s',
+    [`&.${inputUnstyledClasses.focused}`]: {
+        borderColor: `${theme.affine.palette.primary}`,
+    },
+}));
+
+const StyledInputElement = styled('input')(({ theme }) => ({
+    fontSize: '14px',
+    lineHeight: '1.5',
+    color: `${theme.affine.palette.secondaryText}`,
+    flexGrow: 1,
+    '&::placeholder': {
+        color: `${theme.affine.palette.borderColor}`,
+    },
+}));
diff --git a/libs/components/ui/src/input/index.tsx b/libs/components/ui/src/input/index.tsx
new file mode 100644
index 000000000..785490f49
--- /dev/null
+++ b/libs/components/ui/src/input/index.tsx
@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export type { InputProps } from './Input';
diff --git a/libs/components/ui/src/list/ListIcon.tsx b/libs/components/ui/src/list/ListIcon.tsx
new file mode 100644
index 000000000..8685039cd
--- /dev/null
+++ b/libs/components/ui/src/list/ListIcon.tsx
@@ -0,0 +1,12 @@
+import { styled } from '../styled';
+
+export const ListIcon = styled('div')(({ theme }) => {
+    return {
+        color: theme.affine.palette.icons,
+        height: '20px',
+
+        '& svg': {
+            fontSize: '20px',
+        },
+    };
+});
diff --git a/libs/components/ui/src/list/ListItem.tsx b/libs/components/ui/src/list/ListItem.tsx
new file mode 100644
index 000000000..2aa0dbae9
--- /dev/null
+++ b/libs/components/ui/src/list/ListItem.tsx
@@ -0,0 +1,35 @@
+import type { FC, PropsWithChildren, CSSProperties } from 'react';
+import { Clickable } from '../clickable';
+import { styled } from '../styled';
+
+interface ListItemProps {
+    active?: boolean;
+    onClick?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}
+
+export const ListItem: FC<PropsWithChildren<ListItemProps>> = ({
+    active,
+    children,
+    onClick,
+    className,
+    style,
+}) => {
+    return (
+        <Container
+            active={active}
+            onClick={onClick}
+            className={className}
+            style={style}
+        >
+            {children}
+        </Container>
+    );
+};
+
+const Container = styled(Clickable)({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '6px 12px',
+});
diff --git a/libs/components/ui/src/list/index.ts b/libs/components/ui/src/list/index.ts
new file mode 100644
index 000000000..bf332e9e8
--- /dev/null
+++ b/libs/components/ui/src/list/index.ts
@@ -0,0 +1,2 @@
+export { ListItem } from './ListItem';
+export { ListIcon } from './ListIcon';
diff --git a/libs/components/ui/src/message/base.tsx b/libs/components/ui/src/message/base.tsx
new file mode 100644
index 000000000..c65901e62
--- /dev/null
+++ b/libs/components/ui/src/message/base.tsx
@@ -0,0 +1,48 @@
+import type { FC, ReactNode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { styled } from '../styled';
+
+import type { ContainerProps } from './types';
+
+interface ShowProps {
+    Container: FC<ContainerProps>;
+    /**
+     * 自动关闭延时，单位毫秒。设为 0 时，不自动关闭。默认 2000
+     */
+    duration?: number;
+    content: ReactNode;
+}
+
+export const show = ({ Container, duration = 2000, content }: ShowProps) => {
+    const root_element = document.createElement('div');
+    document.body.appendChild(root_element);
+
+    function close() {
+        document.body.removeChild(root_element);
+    }
+
+    const react_root = createRoot(root_element);
+
+    react_root.render(
+        <PortalContainer>
+            <Container content={content} duration={duration} close={close} />
+        </PortalContainer>
+    );
+
+    if (duration > 0) {
+        setTimeout(() => {
+            close();
+        }, duration);
+    }
+
+    return close;
+};
+
+const PortalContainer = styled('div')({
+    position: 'fixed',
+    top: '100px',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    backgroundColor: '#fff',
+    zIndex: 100,
+});
diff --git a/libs/components/ui/src/message/index.tsx b/libs/components/ui/src/message/index.tsx
new file mode 100644
index 000000000..1061f37d4
--- /dev/null
+++ b/libs/components/ui/src/message/index.tsx
@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+
+import { show } from './base';
+import { Success } from './success';
+
+interface SuccessProps {
+    /**
+     * 自动关闭延时，单位毫秒。默认2000
+     */
+    duration?: number;
+    content: ReactNode;
+}
+
+export const message = {
+    success({ duration, content }: SuccessProps) {
+        return show({ Container: Success, duration, content });
+    },
+};
diff --git a/libs/components/ui/src/message/success.tsx b/libs/components/ui/src/message/success.tsx
new file mode 100644
index 000000000..ee452b9b3
--- /dev/null
+++ b/libs/components/ui/src/message/success.tsx
@@ -0,0 +1,14 @@
+import type { FC } from 'react';
+import { styled } from '../styled';
+import type { ContainerProps } from './types';
+
+export const Success: FC<ContainerProps> = ({ content }) => {
+    return <Container>{content}</Container>;
+};
+
+const Container = styled('div')({
+    maxWidth: '200px',
+    backgroundColor: 'rgba(64, 223, 155)',
+    borderRadius: '4px',
+    padding: '8px',
+});
diff --git a/libs/components/ui/src/message/types.ts b/libs/components/ui/src/message/types.ts
new file mode 100644
index 000000000..e0f2d510d
--- /dev/null
+++ b/libs/components/ui/src/message/types.ts
@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+
+export interface ContainerProps {
+    content: ReactNode;
+    duration: number;
+    close: () => void;
+}
diff --git a/libs/components/ui/src/model/index.tsx b/libs/components/ui/src/model/index.tsx
new file mode 100644
index 000000000..7211dfed3
--- /dev/null
+++ b/libs/components/ui/src/model/index.tsx
@@ -0,0 +1,44 @@
+import { useState } from 'react';
+
+import { styled } from '@mui/system';
+import ModalUnstyled from '@mui/base/ModalUnstyled';
+// eslint-disable-next-line no-restricted-imports
+import Fade from '@mui/material/Fade';
+
+import { MuiClickAwayListener } from '../mui';
+
+const Modal = styled(ModalUnstyled)`
+    position: fixed;
+    z-index: 1300;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+
+type TransitionsModalProps = {
+    open: boolean;
+    onClose: () => void;
+    children: JSX.Element;
+};
+
+export const TransitionsModal = (props: TransitionsModalProps) => {
+    return (
+        <Modal
+            aria-labelledby="transition-modal-title"
+            aria-describedby="transition-modal-description"
+            open={props.open}
+            onClose={props.onClose}
+            closeAfterTransition
+        >
+            <MuiClickAwayListener onClickAway={props.onClose}>
+                <Fade in={props.open} timeout={300}>
+                    {props.children}
+                </Fade>
+            </MuiClickAwayListener>
+        </Modal>
+    );
+};
diff --git a/libs/components/ui/src/mui.ts b/libs/components/ui/src/mui.ts
new file mode 100644
index 000000000..509a774f5
--- /dev/null
+++ b/libs/components/ui/src/mui.ts
@@ -0,0 +1,240 @@
+/**
+ * There are many places that rely on Mui in the current project, which are gathered in this file
+ */
+
+/* eslint-disable no-restricted-imports */
+
+import {
+    Box,
+    Collapse,
+    IconButton,
+    CircularProgress,
+    Divider,
+    Typography,
+    Menu,
+    MenuItem,
+    Avatar,
+    Popover,
+    TextField,
+    Modal,
+    Button,
+    List,
+    ListItem,
+    ListItemText,
+    Tooltip,
+    tooltipClasses,
+    Tabs,
+    Tab,
+    OutlinedInput,
+    InputAdornment,
+    Grow,
+    Paper,
+    MenuList,
+    ClickAwayListener,
+    Popper,
+    Select,
+    Switch,
+    Grid,
+    Container,
+    Snackbar,
+    InputBase,
+    FormControlLabel,
+    Checkbox,
+    Input,
+    Radio,
+    Zoom,
+} from '@mui/material';
+
+import type {
+    PopoverProps,
+    PopperPlacementType,
+    SelectChangeEvent,
+    TooltipProps,
+    DividerProps,
+} from '@mui/material';
+import { ListItemButton } from '@mui/material';
+
+export { alpha } from '@mui/system';
+
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export type MuiPopoverProps = PopoverProps;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export type MuiPopperPlacementType = PopperPlacementType;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export type MuiSelectChangeEvent<T = string> = SelectChangeEvent<T>;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export type MuiTooltipProps = TooltipProps;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export type MuiDividerProps = DividerProps;
+
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiBox = Box;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiCollapse = Collapse;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiIconButton = IconButton;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiCircularProgress = CircularProgress;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiDivider = Divider;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiTypography = Typography;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiMenu = Menu;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiMenuItem = MenuItem;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiAvatar = Avatar;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiPopover = Popover;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiTextField = TextField;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiModal = Modal;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiButton = Button;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiList = List;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiListItem = ListItem;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiListItemText = ListItemText;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiListItemButton = ListItemButton;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiTooltip = Tooltip;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiTabs = Tabs;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiTab = Tab;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiOutlinedInput = OutlinedInput;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiInputAdornment = InputAdornment;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiGrow = Grow;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiPaper = Paper;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiMenuList = MenuList;
+
+export const MuiClickAwayListener = ClickAwayListener;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiPopper = Popper;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiSelect = Select;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiSwitch = Switch;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiGrid = Grid;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiContainer = Container;
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const muiTooltipClasses = tooltipClasses;
+
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiSnackbar = Snackbar;
+
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiInputBase = InputBase;
+
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiFormControlLabel = FormControlLabel;
+
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiCheckbox = Checkbox;
+
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiInput = Input;
+
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiZoom = Zoom;
+
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiRadio = Radio;
diff --git a/libs/components/ui/src/patch-elements/index.tsx b/libs/components/ui/src/patch-elements/index.tsx
new file mode 100644
index 000000000..46794e841
--- /dev/null
+++ b/libs/components/ui/src/patch-elements/index.tsx
@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import { useState, Fragment } from 'react';
+import { has } from '@toeverything/utils';
+
+export type UnPatchNode = () => void;
+export type PatchNode = (key: string, node: ReactNode) => UnPatchNode;
+
+export const usePatchNodes = () => {
+    const [nodes, set_nodes] = useState<Record<string, ReactNode>>({});
+
+    const patch_node: PatchNode = (key: string, node: ReactNode) => {
+        set_nodes(oldNodes => ({ ...oldNodes, [key]: node }));
+        return () => {
+            set_nodes(oldNodes => {
+                const nodes = { ...oldNodes };
+                delete nodes[key];
+                return nodes;
+            });
+        };
+    };
+
+    const has_node = (key: string) => {
+        return has(nodes, key);
+    };
+
+    const patched_nodes = (
+        <>
+            {Object.entries(nodes).map(([key, node]) => {
+                return <Fragment key={key}>{node}</Fragment>;
+            })}
+        </>
+    );
+
+    return {
+        patch: patch_node,
+        has: has_node,
+        patchedNodes: patched_nodes,
+    };
+};
diff --git a/libs/components/ui/src/popover/Popover.tsx b/libs/components/ui/src/popover/Popover.tsx
new file mode 100644
index 000000000..e165d8324
--- /dev/null
+++ b/libs/components/ui/src/popover/Popover.tsx
@@ -0,0 +1,52 @@
+import type { MuiPopperPlacementType as PopperPlacementType } from '../mui';
+import React, { forwardRef, type PropsWithChildren } from 'react';
+import { type PopperHandler, Popper } from '../popper';
+import { PopoverContainer } from './container';
+import type { PopoverProps, PopoverDirection } from './interface';
+
+const placementToContainerDirection: Record<
+    PopperPlacementType,
+    PopoverDirection
+> = {
+    top: 'none',
+    'top-start': 'left-bottom',
+    'top-end': 'right-bottom',
+    right: 'none',
+    'right-start': 'left-top',
+    'right-end': 'left-bottom',
+    bottom: 'none',
+    'bottom-start': 'left-top',
+    'bottom-end': 'right-top',
+    left: 'none',
+    'left-start': 'right-top',
+    'left-end': 'right-bottom',
+    auto: 'none',
+    'auto-start': 'none',
+    'auto-end': 'none',
+};
+
+export const Popover = forwardRef<
+    PopperHandler,
+    PropsWithChildren<PopoverProps>
+>((props, ref) => {
+    const { popoverDirection, placement, content, children, style } = props;
+    return (
+        <Popper
+            {...props}
+            ref={ref}
+            content={
+                <PopoverContainer
+                    style={style}
+                    direction={
+                        popoverDirection ||
+                        placementToContainerDirection[placement]
+                    }
+                >
+                    {content}
+                </PopoverContainer>
+            }
+        >
+            {children}
+        </Popper>
+    );
+});
diff --git a/libs/components/ui/src/popover/container.tsx b/libs/components/ui/src/popover/container.tsx
new file mode 100644
index 000000000..f91e95b02
--- /dev/null
+++ b/libs/components/ui/src/popover/container.tsx
@@ -0,0 +1,27 @@
+import { styled } from '../styled';
+import { PopoverContainerProps } from './interface';
+
+const border_radius_map: Record<PopoverContainerProps['direction'], string> = {
+    none: '10px',
+    'left-top': '0 10px 10px 10px',
+    'left-bottom': '10px 10px 10px 0',
+    'right-top': '10px 0 10px 10px',
+    'right-bottom': '10px 10px 0 10px',
+};
+
+export const PopoverContainer = styled('div')<
+    Pick<PopoverContainerProps, 'direction'>
+>(({ theme, direction, style }) => {
+    const shadow = theme.affine.shadows.shadowSxDownLg;
+    const white = theme.affine.palette.white;
+
+    const border_radius =
+        border_radius_map[direction] || border_radius_map['left-top'];
+    return {
+        boxShadow: shadow,
+        borderRadius: border_radius,
+        padding: '8px 4px',
+        backgroundColor: white,
+        ...style,
+    };
+});
diff --git a/libs/components/ui/src/popover/index.tsx b/libs/components/ui/src/popover/index.tsx
new file mode 100644
index 000000000..c829b413b
--- /dev/null
+++ b/libs/components/ui/src/popover/index.tsx
@@ -0,0 +1,3 @@
+export * from './Popover';
+export * from './interface';
+export { PopoverContainer } from './container';
diff --git a/libs/components/ui/src/popover/interface.ts b/libs/components/ui/src/popover/interface.ts
new file mode 100644
index 000000000..d26ebc7f4
--- /dev/null
+++ b/libs/components/ui/src/popover/interface.ts
@@ -0,0 +1,23 @@
+import type { ReactNode, CSSProperties } from 'react';
+import { PopperProps } from '../popper';
+
+export type PopoverDirection =
+    | 'none'
+    | 'left-top'
+    | 'left-bottom'
+    | 'right-top'
+    | 'right-bottom';
+
+export interface PopoverContainerProps {
+    children?: ReactNode;
+    /**
+     * The pop-up window points to. The pop-up window has three rounded corners, one is a right angle, and the right angle is the direction of the pop-up window.
+     */
+    direction?: PopoverDirection;
+    style?: CSSProperties;
+}
+export type PopoverProps = {
+    // Popover border-radius style will auto set by placement, popoverDirection can custom set it
+    popoverDirection?: PopoverDirection;
+    style?: CSSProperties;
+} & PopperProps;
diff --git a/libs/components/ui/src/popper/PopoverArrow.tsx b/libs/components/ui/src/popper/PopoverArrow.tsx
new file mode 100644
index 000000000..148202eff
--- /dev/null
+++ b/libs/components/ui/src/popper/PopoverArrow.tsx
@@ -0,0 +1,92 @@
+import React, { forwardRef } from 'react';
+import { PopperArrowProps } from './interface';
+import { styled } from '../styled';
+
+export const PopperArrow = forwardRef<HTMLElement, PopperArrowProps>(
+    ({ placement }, ref) => {
+        return <StyledArrow placement={placement} ref={ref} />;
+    }
+);
+
+const getArrowStyle = (placement: PopperArrowProps['placement']) => {
+    if (placement.indexOf('bottom') === 0) {
+        return {
+            top: 0,
+            left: 0,
+            marginTop: '-0.9em',
+            width: '3em',
+            height: '1em',
+            '&::before': {
+                borderWidth: '0 1em 1em 1em',
+                borderColor: `transparent transparent #98ACBD transparent`,
+            },
+        };
+    }
+
+    if (placement.indexOf('top') === 0) {
+        return {
+            bottom: 0,
+            left: 0,
+            marginBottom: '-0.9em',
+            width: '3em',
+            height: '1em',
+            '&::before': {
+                borderWidth: '1em 1em 0 1em',
+                borderColor: `#98ACBD transparent transparent transparent`,
+            },
+        };
+    }
+    if (placement.indexOf('left') === 0) {
+        return {
+            right: 0,
+            marginRight: '-0.9em',
+            height: '3em',
+            width: '1em',
+            '&::before': {
+                borderWidth: '1em 0 1em 1em',
+                borderColor: `transparent transparent transparent #98ACBD`,
+            },
+        };
+    }
+    if (placement.indexOf('right') === 0) {
+        return {
+            left: 0,
+            marginLeft: '-0.9em',
+            height: '3em',
+            width: '1em',
+            '&::before': {
+                borderWidth: '1em 1em 1em 0',
+                borderColor: `transparent #98ACBD transparent transparent`,
+            },
+        };
+    }
+
+    return {
+        display: 'none',
+    };
+};
+
+const StyledArrow = styled('span')<{
+    placement: PopperArrowProps['placement'];
+}>(({ placement }) => {
+    return {
+        position: 'absolute',
+        fontSize: '7px',
+        width: '3em',
+        '::before': {
+            content: '""',
+            margin: 'auto',
+            display: 'block',
+            width: 0,
+            height: 0,
+            borderStyle: 'solid',
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+        },
+
+        ...getArrowStyle(placement),
+    };
+});
diff --git a/libs/components/ui/src/popper/Popper.tsx b/libs/components/ui/src/popper/Popper.tsx
new file mode 100644
index 000000000..b0ca99686
--- /dev/null
+++ b/libs/components/ui/src/popper/Popper.tsx
@@ -0,0 +1,186 @@
+import React, {
+    forwardRef,
+    useEffect,
+    useImperativeHandle,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import type { PropsWithChildren } from 'react';
+
+import {
+    MuiPopper,
+    MuiClickAwayListener as ClickAwayListener,
+    MuiGrow as Grow,
+} from '../mui';
+import { styled } from '../styled';
+
+import { PopperProps, PopperHandler, VirtualElement } from './interface';
+import { useTheme } from '../theme';
+import { PopperArrow } from './PopoverArrow';
+export const Popper = forwardRef<PopperHandler, PropsWithChildren<PopperProps>>(
+    (
+        {
+            children,
+            content,
+            anchor: propsAnchor,
+            placement = 'top-start',
+            defaultVisible = false,
+            container,
+            keepMounted = false,
+            visible: propsVisible,
+            trigger = 'hover',
+            pointerEnterDelay = 100,
+            pointerLeaveDelay = 100,
+            onVisibleChange,
+            popoverStyle,
+            popoverClassName,
+            anchorStyle,
+            anchorClassName,
+            zIndex,
+            offset = [0, 5],
+            showArrow = false,
+        },
+        ref
+    ) => {
+        const [anchorEl, setAnchorEl] = useState<VirtualElement>(null);
+        const [visible, setVisible] = useState(defaultVisible);
+        const [arrowRef, setArrowRef] = useState<HTMLElement>(null);
+
+        const pointerLeaveTimer = useRef<number>();
+        const pointerEnterTimer = useRef<number>();
+
+        const visibleControlledByParent = typeof propsVisible !== 'undefined';
+        const isAnchorCustom = typeof propsAnchor !== 'undefined';
+
+        const hasHoverTrigger = useMemo(() => {
+            return (
+                trigger === 'hover' ||
+                (Array.isArray(trigger) && trigger.includes('hover'))
+            );
+        }, [trigger]);
+
+        const hasClickTrigger = useMemo(() => {
+            return (
+                trigger === 'click' ||
+                (Array.isArray(trigger) && trigger.includes('click'))
+            );
+        }, [trigger]);
+
+        const theme = useTheme();
+
+        const onPointerEnterHandler = () => {
+            if (!hasHoverTrigger || visibleControlledByParent) {
+                return;
+            }
+            window.clearTimeout(pointerLeaveTimer.current);
+
+            pointerEnterTimer.current = window.setTimeout(() => {
+                setVisible(true);
+            }, pointerEnterDelay);
+        };
+
+        const onPointerLeaveHandler = () => {
+            if (!hasHoverTrigger || visibleControlledByParent) {
+                return;
+            }
+            window.clearTimeout(pointerEnterTimer.current);
+            pointerLeaveTimer.current = window.setTimeout(() => {
+                setVisible(false);
+            }, pointerLeaveDelay);
+        };
+
+        useEffect(() => {
+            onVisibleChange?.(visible);
+        }, [visible, onVisibleChange]);
+
+        useImperativeHandle(ref, () => {
+            return {
+                setVisible: (visible: boolean) => {
+                    !visibleControlledByParent && setVisible(visible);
+                },
+            };
+        });
+
+        return (
+            <ClickAwayListener
+                onClickAway={() => {
+                    setVisible(false);
+                }}
+            >
+                <Container>
+                    {isAnchorCustom ? null : (
+                        <div
+                            ref={(dom: HTMLDivElement) => setAnchorEl(dom)}
+                            onClick={() => {
+                                if (
+                                    !hasClickTrigger ||
+                                    visibleControlledByParent
+                                ) {
+                                    return;
+                                }
+                                setVisible(!visible);
+                            }}
+                            onPointerEnter={onPointerEnterHandler}
+                            onPointerLeave={onPointerLeaveHandler}
+                            style={anchorStyle}
+                            className={anchorClassName}
+                        >
+                            {children}
+                        </div>
+                    )}
+                    <MuiPopper
+                        open={
+                            visibleControlledByParent ? propsVisible : visible
+                        }
+                        sx={{ zIndex: zIndex || theme.affine.zIndex.popover }}
+                        anchorEl={isAnchorCustom ? propsAnchor : anchorEl}
+                        placement={placement}
+                        container={container}
+                        keepMounted={keepMounted}
+                        transition
+                        modifiers={[
+                            {
+                                name: 'offset',
+                                options: {
+                                    offset,
+                                },
+                            },
+                            {
+                                name: 'arrow',
+                                enabled: showArrow,
+                                options: {
+                                    element: arrowRef,
+                                },
+                            },
+                        ]}
+                    >
+                        {({ TransitionProps }) => (
+                            <Grow {...TransitionProps}>
+                                <div
+                                    onPointerEnter={onPointerEnterHandler}
+                                    onPointerLeave={onPointerLeaveHandler}
+                                    style={popoverStyle}
+                                    className={popoverClassName}
+                                >
+                                    {showArrow && (
+                                        <PopperArrow
+                                            placement={placement}
+                                            ref={setArrowRef}
+                                        />
+                                    )}
+                                    {content}
+                                </div>
+                            </Grow>
+                        )}
+                    </MuiPopper>
+                </Container>
+            </ClickAwayListener>
+        );
+    }
+);
+
+// The children of ClickAwayListener must be a DOM Node to judge whether the click is outside, use node.contains
+const Container = styled('div')({
+    display: 'contents',
+});
diff --git a/libs/components/ui/src/popper/index.ts b/libs/components/ui/src/popper/index.ts
new file mode 100644
index 000000000..8d8b52cd2
--- /dev/null
+++ b/libs/components/ui/src/popper/index.ts
@@ -0,0 +1,2 @@
+export * from './Popper';
+export * from './interface';
diff --git a/libs/components/ui/src/popper/interface.ts b/libs/components/ui/src/popper/interface.ts
new file mode 100644
index 000000000..6c41b7036
--- /dev/null
+++ b/libs/components/ui/src/popper/interface.ts
@@ -0,0 +1,70 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { MuiPopperPlacementType as PopperPlacementType } from '../mui';
+
+export type VirtualElement = {
+    getBoundingClientRect: () => ClientRect | DOMRect;
+    contextElement?: Element;
+};
+
+export type PopperHandler = {
+    setVisible: (visible: boolean) => void;
+};
+
+export type PopperArrowProps = {
+    placement: PopperPlacementType;
+};
+
+export type PopperProps = {
+    // Popover content
+    content: ReactNode;
+    // Position of Popover
+    placement?: PopperPlacementType;
+
+    // The popover will pop up based on the anchor position
+    // And if this parameter is passed, children will not be rendered
+    anchor?: VirtualElement | (() => VirtualElement);
+
+    // Whether the default is implicit
+    defaultVisible?: boolean;
+
+    // Used to manually control the visibility of the Popover
+    visible?: boolean;
+
+    // A HTML element or function that returns one. The container will have the portal children appended to it.
+    // By default, it uses the body of the top-level document object, so it's simply document.body most of the time.
+    container?: HTMLElement;
+
+    // Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Popper
+    keepMounted?: boolean;
+
+    // TODO: support focus
+    trigger?: 'hover' | 'click' | 'focus' | ('click' | 'hover' | 'focus')[];
+
+    // How long does it take for the mouse to display the Popover, in milliseconds
+    pointerEnterDelay?: number;
+
+    // How long does it take to hide the Popover after the mouse moves out, in milliseconds
+    pointerLeaveDelay?: number;
+
+    // Callback fired when the component closed or open
+    onVisibleChange?: (visible: boolean) => void;
+
+    // Popover container style
+    popoverStyle?: CSSProperties;
+
+    // Popover container class name
+    popoverClassName?: string;
+
+    // Anchor style
+    anchorStyle?: CSSProperties;
+
+    // Anchor class name
+    anchorClassName?: string;
+
+    // Popover z-index
+    zIndex?: number;
+
+    offset?: [number, number];
+
+    showArrow?: boolean;
+};
diff --git a/libs/components/ui/src/radio/Radio.tsx b/libs/components/ui/src/radio/Radio.tsx
new file mode 100644
index 000000000..f31a319f8
--- /dev/null
+++ b/libs/components/ui/src/radio/Radio.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+/* eslint-disable no-restricted-imports */
+import MuiRadio, { type RadioProps } from '@mui/material/Radio';
+import { styled } from '../styled';
+
+// TODO: sync online icon
+// import {
+//     SingleSelectBoxUncheckIcon,
+//     SingleSelectBoxCheckIcon,
+// } from '@toeverything/components/icons';
+
+export { RadioProps };
+
+export const Radio = (props: RadioProps) => {
+    return (
+        <StyledRadio
+            // icon={<SingleSelectBoxUncheckIcon />}
+            // checkedIcon={<SingleSelectBoxCheckIcon />}
+            {...props}
+        />
+    );
+};
+
+const StyledRadio = styled(MuiRadio)`
+    padding: 0;
+    color: #b9cad5;
+    &.Mui-checked {
+        color: #b9cad5;
+    }
+`;
diff --git a/libs/components/ui/src/radio/index.ts b/libs/components/ui/src/radio/index.ts
new file mode 100644
index 000000000..ec0e90722
--- /dev/null
+++ b/libs/components/ui/src/radio/index.ts
@@ -0,0 +1,2 @@
+export { Radio } from './Radio';
+export type { RadioProps } from './Radio';
diff --git a/libs/components/ui/src/select/OldSelect.tsx b/libs/components/ui/src/select/OldSelect.tsx
new file mode 100644
index 000000000..79b486ef5
--- /dev/null
+++ b/libs/components/ui/src/select/OldSelect.tsx
@@ -0,0 +1,48 @@
+import { useCallback } from 'react';
+import { styled } from '../styled';
+import type { FC, CSSProperties, ChangeEvent } from 'react';
+
+/**
+ * WARNING: This component is about to be deprecated, use Select replace
+ *
+ * **/
+const StyledSelect = styled('select')({
+    border: '1px solid #aaa',
+});
+
+interface Props {
+    value: string;
+    options?: Array<{ label?: string; value?: string; key?: string }>;
+    onChange: (value: string) => void;
+    extraStyle?: CSSProperties;
+}
+
+export const OldSelect: FC<Props> = ({
+    value,
+    options,
+    onChange,
+    extraStyle,
+}: Props) => {
+    const onSelectChange = useCallback(
+        (e: ChangeEvent<HTMLSelectElement>) => {
+            onChange(e.target.value);
+        },
+        [onChange]
+    );
+
+    return (
+        <StyledSelect
+            style={extraStyle}
+            value={value}
+            onChange={onSelectChange}
+        >
+            {options?.map(option => {
+                return (
+                    <option key={option.value} value={option.value}>
+                        {option.label}
+                    </option>
+                );
+            })}
+        </StyledSelect>
+    );
+};
diff --git a/libs/components/ui/src/select/Option.tsx b/libs/components/ui/src/select/Option.tsx
new file mode 100644
index 000000000..f35119e1f
--- /dev/null
+++ b/libs/components/ui/src/select/Option.tsx
@@ -0,0 +1,45 @@
+/* eslint-disable no-restricted-imports */
+import OptionUnstyled, {
+    optionUnstyledClasses,
+} from '@mui/base/OptionUnstyled';
+
+import { styled } from '../styled';
+
+/**
+ *  Option is extend by mui OptionUnstyled
+ *
+ * OptionUnstyled API:
+ *
+ * - [SelectUnstyled API](https://mui.com/zh/base/api/option-unstyled/)
+ *
+ * **/
+
+export const Option = styled(OptionUnstyled)(({ theme }) => ({
+    height: '32px',
+    listStyle: 'none',
+    padding: '0 12px',
+    borderRadius: '5px',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    '&:last-of-type': {
+        borderBottom: 'none',
+    },
+
+    [`&.${optionUnstyledClasses.selected}`]: {
+        backgroundColor: '#F5F7F8',
+    },
+
+    [`&.${optionUnstyledClasses.highlighted}`]: {
+        backgroundColor: '#F5F7F8',
+    },
+
+    [`&.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected}`]:
+        {},
+
+    [`&.${optionUnstyledClasses.disabled}`]: {},
+
+    [`&:hover:not(.${optionUnstyledClasses.disabled})`]: {
+        backgroundColor: '#F5F7F8',
+    },
+}));
diff --git a/libs/components/ui/src/select/OptionGroup.tsx b/libs/components/ui/src/select/OptionGroup.tsx
new file mode 100644
index 000000000..69c931d64
--- /dev/null
+++ b/libs/components/ui/src/select/OptionGroup.tsx
@@ -0,0 +1,47 @@
+import { forwardRef, type ForwardedRef } from 'react';
+/* eslint-disable no-restricted-imports */
+import OptionGroupUnstyled, {
+    OptionGroupUnstyledProps,
+} from '@mui/base/OptionGroupUnstyled';
+import { styled } from '../styled';
+
+const StyledGroupRoot = styled('li')`
+    list-style: none;
+`;
+
+const StyledGroupHeader = styled('span')`
+    display: block;
+    padding: 15px 0 5px 10px;
+    font-size: 0.75em;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05rem;
+    color: #6f7e8c;
+`;
+
+const StyledGroupOptions = styled('ul')`
+    list-style: none;
+    margin-left: 0;
+    padding: 0;
+
+    > li {
+        padding-left: 20px;
+    }
+`;
+
+/**
+ * TODO: The designer has not yet given a style for OptionGroup, the sample style is used here
+ * **/
+export const OptionGroup = forwardRef(function CustomOptionGroup(
+    props: OptionGroupUnstyledProps,
+    ref: ForwardedRef<HTMLLIElement>
+) {
+    const components: OptionGroupUnstyledProps['components'] = {
+        Root: StyledGroupRoot,
+        Label: StyledGroupHeader,
+        List: StyledGroupOptions,
+        ...props.components,
+    };
+
+    return <OptionGroupUnstyled {...props} ref={ref} components={components} />;
+});
diff --git a/libs/components/ui/src/select/Select.tsx b/libs/components/ui/src/select/Select.tsx
new file mode 100644
index 000000000..ebbf585e1
--- /dev/null
+++ b/libs/components/ui/src/select/Select.tsx
@@ -0,0 +1,129 @@
+import {
+    forwardRef,
+    type CSSProperties,
+    type ForwardedRef,
+    type RefAttributes,
+    type ReactNode,
+} from 'react';
+/* eslint-disable no-restricted-imports */
+import SelectUnstyled, {
+    type SelectUnstyledProps,
+    selectUnstyledClasses,
+} from '@mui/base/SelectUnstyled';
+/* eslint-disable no-restricted-imports */
+import PopperUnstyled from '@mui/base/PopperUnstyled';
+import { styled } from '../styled';
+
+type ExtendSelectProps = {
+    // Width is always used custom, it will be set to root button and popover
+    width?: number | string;
+    style?: CSSProperties;
+    listboxStyle?: CSSProperties;
+    placeholder?: ReactNode;
+};
+
+/**
+ *  Select is extend by mui SelectUnstyled
+ *
+ *  SelectUnstyled Demos:
+ *
+ * - [SelectUnstyled](https://mui.com/zh/base/react-select/)
+ *
+ * SelectUnstyled API:
+ *
+ * - [SelectUnstyled API](https://mui.com/zh/base/api/select-unstyled/)
+ *
+ * **/
+export const Select = forwardRef(function CustomSelect<TValue>(
+    props: ExtendSelectProps & SelectUnstyledProps<TValue>,
+    ref: ForwardedRef<HTMLUListElement>
+) {
+    const { width = '100%', style, listboxStyle, placeholder } = props;
+    const components: SelectUnstyledProps<TValue>['components'] = {
+        // Root: generateStyledRoot({ width, ...style }),
+        Root: forwardRef((rootProps, rootRef) => (
+            <StyledRoot
+                ref={rootRef}
+                {...rootProps}
+                style={{
+                    width,
+                    ...style,
+                }}
+            >
+                {rootProps.children || (
+                    <StyledPlaceholder>{placeholder}</StyledPlaceholder>
+                )}
+            </StyledRoot>
+        )),
+        Listbox: forwardRef((listboxProps, listboxRef) => (
+            <StyledListbox
+                ref={listboxRef}
+                {...listboxProps}
+                style={{ width, ...listboxStyle }}
+            />
+        )),
+        Popper: StyledPopper,
+        ...props.components,
+    };
+
+    return <SelectUnstyled {...props} ref={ref} components={components} />;
+}) as <TValue>(
+    props: ExtendSelectProps &
+        SelectUnstyledProps<TValue> &
+        RefAttributes<HTMLUListElement>
+) => JSX.Element;
+
+const StyledRoot = styled('div')(({ theme }) => ({
+    height: '32px',
+    border: `1px solid ${theme.affine.palette.borderColor}`,
+    borderRadius: '10px',
+    color: theme.affine.palette.secondaryText,
+    padding: '0 12px',
+    fontSize: '14px',
+    transition: 'border .1s',
+    textAlign: 'left',
+    paddingLeft: '12px',
+    paddingRight: ' 30px',
+    background: '#fff',
+    display: 'flex',
+    alignItems: 'center',
+    position: 'relative',
+
+    '&:hover': {},
+
+    [`&.${selectUnstyledClasses.focusVisible}`]: {},
+
+    [`&.${selectUnstyledClasses.expanded}`]: {
+        borderColor: `${theme.affine.palette.primary}`,
+        '&::after': {
+            content: '"▴"',
+        },
+    },
+    '&::after': {
+        content: '"▾"',
+        position: ' absolute',
+        top: '0',
+        bottom: '0',
+        right: '12px',
+        margin: 'auto',
+        lineHeight: '32px',
+    },
+}));
+
+const StyledListbox = styled('ul')(({ theme }) => ({
+    fontSize: '14px',
+    padding: '8px 4px',
+    color: theme.affine.palette.secondaryText,
+    background: '#fff',
+    borderRadius: '10px',
+    overflow: 'auto',
+    boxShadow: theme.affine.shadows.shadowSxDownLg,
+}));
+
+const StyledPopper = styled(PopperUnstyled)`
+    z-index: 1;
+`;
+
+const StyledPlaceholder = styled('div')(({ theme }) => ({
+    color: `${theme.affine.palette.borderColor}`,
+}));
diff --git a/libs/components/ui/src/select/index.ts b/libs/components/ui/src/select/index.ts
new file mode 100644
index 000000000..afea72a2b
--- /dev/null
+++ b/libs/components/ui/src/select/index.ts
@@ -0,0 +1,4 @@
+export { Select } from './Select';
+export { Option } from './Option';
+export { OptionGroup } from './OptionGroup';
+export { OldSelect } from './OldSelect';
diff --git a/libs/components/ui/src/slider/Slider.tsx b/libs/components/ui/src/slider/Slider.tsx
new file mode 100644
index 000000000..b9cb98bb8
--- /dev/null
+++ b/libs/components/ui/src/slider/Slider.tsx
@@ -0,0 +1,115 @@
+import type { FC } from 'react';
+import { SliderUnstyled, sliderUnstyledClasses } from '@mui/base';
+import type { SliderUnstyledProps } from '@mui/base';
+import { alpha } from '@mui/system';
+import { styled } from '../styled';
+
+interface SliderProps {
+    defaultValue?: SliderUnstyledProps['defaultValue'];
+    step?: number;
+    min?: number;
+    max?: number;
+    marks?: SliderUnstyledProps['marks'];
+    value?: SliderUnstyledProps['value'];
+    onChange?: SliderUnstyledProps['onChange'];
+}
+
+export const Slider: FC<SliderProps> = props => {
+    return <StyledSlider {...props} />;
+};
+
+const StyledSlider = styled(SliderUnstyled)(
+    ({ theme }) => `
+    color: ${theme.affine.palette.primaryText};
+    height: 2px;
+    width: 100%;
+    padding: 13px 0;
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+    touch-action: none;
+    -webkit-tap-highlight-color: transparent;
+    opacity: 0.75;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &.${sliderUnstyledClasses.disabled} {
+      pointer-events: none;
+      cursor: default;
+      color: #bdbdbd;
+    }
+
+    & .${sliderUnstyledClasses.rail} {
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 1px;
+      border-radius: 2px;
+      background-color: ${theme.affine.palette.tagHover};
+      opacity: 0.38;
+    }
+
+    & .${sliderUnstyledClasses.track} {
+      display: block;
+      position: absolute;
+      height: 1px;
+      border-radius: 2px;
+      background-color: currentColor;
+    }
+
+    & .${sliderUnstyledClasses.thumb} {
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      margin-left: -6px;
+      margin-top: -5px;
+      box-sizing: border-box;
+      border-radius: 50%;
+      outline: 0;
+      background-color: currentColor;
+      top: 50%;
+      transform: translateY(10%);
+
+      :hover,
+      &.${sliderUnstyledClasses.focusVisible} {
+        box-shadow: 0 0 0 0.25rem ${alpha(
+            theme.palette.mode === 'light' ? '#1976d2' : '#90caf9',
+            0.15
+        )};
+      }
+
+      &.${sliderUnstyledClasses.active} {
+        box-shadow: 0 0 0 0.25rem ${alpha(
+            theme.palette.mode === 'light' ? '#1976d2' : '#90caf9',
+            0.3
+        )};
+      }
+    }
+
+    & .${sliderUnstyledClasses.mark} {
+      position: absolute;
+      width: 4px;
+      height: 4px;
+      border-radius: 50%;
+      background-color: ${theme.affine.palette.tagHover};
+      top: 50%;
+      transform: translate(-50%, -40%);
+    }
+
+    & .${sliderUnstyledClasses.markActive} {
+      background-color: ${theme.affine.palette.primaryText};
+    }
+
+    & .${sliderUnstyledClasses.valueLabel} {
+      font-family: IBM Plex Sans;
+      font-size: 14px;
+      display: block;
+      position: relative;
+      top: -1.6em;
+      text-align: center;
+      transform: translateX(-50%);
+    }
+    `
+);
diff --git a/libs/components/ui/src/slider/index.ts b/libs/components/ui/src/slider/index.ts
new file mode 100644
index 000000000..f84acd84c
--- /dev/null
+++ b/libs/components/ui/src/slider/index.ts
@@ -0,0 +1 @@
+export { Slider } from './Slider';
diff --git a/libs/components/ui/src/styled/index.ts b/libs/components/ui/src/styled/index.ts
new file mode 100644
index 000000000..f4f57597b
--- /dev/null
+++ b/libs/components/ui/src/styled/index.ts
@@ -0,0 +1,73 @@
+// eslint-disable-next-line no-restricted-imports
+import { styled as muiStyled } from '@mui/material/styles';
+import { ReactHTML, ReactSVG } from 'react';
+import isPropValid from '@emotion/is-prop-valid';
+export type { SxProps } from '@mui/system';
+
+// Props that will be passed to DOM
+const ALLOW_LIST_PROPS: string[] = [];
+
+const isSimpleElement = (
+    component: unknown
+): component is keyof ReactHTML | keyof ReactSVG => {
+    // TODO: improve this
+    return typeof component === 'string';
+};
+
+// See https://emotion.sh/docs/typescript#forwarding-props
+const isValidProp = (prop: string): boolean =>
+    isPropValid(prop) || ALLOW_LIST_PROPS.includes(prop);
+
+/**
+ * Forward prop except transient prop
+ *
+ * Support [Transient props](https://styled-components.com/docs/api#transient-props)
+ * See https://github.com/styled-components/styled-components/pull/3052
+ */
+const isNotTransientProp = (prop: string): boolean => !prop.startsWith('$'); // || prop !== 'as';
+
+/**
+ * Workaround for the [Unknown Prop Warning](https://reactjs.org/warnings/unknown-prop.html) when passing custom props to styled components
+ *
+ * > React does not recognize the `xxxxxx` prop on a DOM element.
+ * If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `xxxxx` instead.
+ * If you accidentally passed it from a parent component,
+ * remove it from the DOM element.
+ *
+ * For a detailed discussion, see https://github.com/emotion-js/emotion/issues/655
+ *
+ * We simulate the behavior of the [styled-components](https://github.com/styled-components).
+ *
+ * > If the styled target is a simple element (e.g. styled.div),
+ *  styled-components passes through any known HTML attribute to the DOM.
+ *  If it is a custom React component (e.g. styled(MyComponent)),
+ *  styled-components passes through all props.
+ *
+ * See https://styled-components.com/docs/basics#passed-props
+ */
+export const styled: typeof muiStyled = (
+    component: Parameters<typeof muiStyled>[0],
+    options?: Parameters<typeof muiStyled>[1]
+): ReturnType<typeof muiStyled> => {
+    // @ts-ignore Fix https://github.com/nrwl/nx/issues/4508
+    if (options?.shouldForwardProp) {
+        // Explicitly declared, no need handle
+        return muiStyled(component, options);
+    }
+    if (!options) {
+        options = {};
+    }
+
+    if (!isSimpleElement(component)) {
+        // Is custom React component, pass props except transient props through
+        // @ts-ignore Fix https://github.com/nrwl/nx/issues/4508
+        options.shouldForwardProp = isNotTransientProp;
+
+        return muiStyled(component, options);
+    }
+
+    // Is simple element, pass only valid props
+    // @ts-ignore Fix https://github.com/nrwl/nx/issues/4508
+    options.shouldForwardProp = isValidProp;
+    return muiStyled(component, options);
+};
diff --git a/libs/components/ui/src/svg-icon/index.ts b/libs/components/ui/src/svg-icon/index.ts
new file mode 100644
index 000000000..dea461fec
--- /dev/null
+++ b/libs/components/ui/src/svg-icon/index.ts
@@ -0,0 +1,8 @@
+/* eslint-disable no-restricted-imports */
+
+import type { SvgIconProps as MuiSvgIconProps } from '@mui/material';
+
+export { SvgIcon } from '@mui/material';
+export interface SvgIconProps extends Omit<MuiSvgIconProps, 'color'> {
+    color?: string;
+}
diff --git a/libs/components/ui/src/switch/Switch.tsx b/libs/components/ui/src/switch/Switch.tsx
new file mode 100644
index 000000000..fd48070a6
--- /dev/null
+++ b/libs/components/ui/src/switch/Switch.tsx
@@ -0,0 +1,119 @@
+import type { CSSProperties } from 'react';
+import { styled } from '../styled';
+import { useSwitch, UseSwitchParameters } from '@mui/base/SwitchUnstyled';
+import { ReactNode } from 'react';
+
+/**
+ *  Switch is extend by mui SwitchUnstyled
+ *
+ * SwitchUnstyled Demos:
+ * - [SwitchUnstyled](https://mui.com/zh/base/react-switch/)
+ *
+ * SwitchUnstyled API:
+ * - [SwitchUnstyled API](https://mui.com/zh/base/api/switch-unstyled/)
+ *
+ * Add some props to use in business:
+ * - `checkedLabel` and `uncheckedLabel` is used to show switch label, and you can write label custom by props `label`
+ * - `width` is used to limit the wrapper, it should always set if `checkedLabel` and `uncheckedLabel`  is different，otherwise wrapper will shake when label change
+ *
+ * Easy Demo:
+ * ```jsx
+ *      <Switch checkedLabel="ON" uncheckedLabel="OFF" width={50} />
+ * ```
+ *
+ * **/
+export type SwitchProps = {
+    label?: (params: { checked: boolean; disabled: boolean }) => ReactNode;
+    checkedLabel?: string;
+    uncheckedLabel?: string;
+    style?: CSSProperties;
+    width?: number | string;
+} & UseSwitchParameters;
+
+export const Switch = (props: SwitchProps) => {
+    const { label, checkedLabel, uncheckedLabel, style, width } = props;
+    const { getInputProps, checked, disabled } = useSwitch(props);
+
+    return (
+        <StyledWrapper style={{ ...style, width }}>
+            <StyledLabel checked={checked} disable={disabled}>
+                {checked ? checkedLabel : uncheckedLabel}
+                {label?.({ checked, disabled })}
+            </StyledLabel>
+            <StyledRoot>
+                <StyleTrack checked={checked}>
+                    <StyledThumb checked={checked} disable={disabled} />
+                </StyleTrack>
+                <StyledSwitchInput {...getInputProps()} />
+            </StyledRoot>
+        </StyledWrapper>
+    );
+};
+
+const StyledRoot = styled('span')`
+    display: inline-block;
+    position: relative;
+    width: 22px;
+    height: 12px;
+`;
+
+const StyledSwitchInput = styled('input')`
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    z-index: 1;
+    margin: 0;
+    cursor: pointer;
+`;
+
+const StyledThumb = styled('span')<{
+    disable: boolean;
+    checked: boolean;
+}>(({ theme, checked, disable }) => {
+    return {
+        position: 'absolute',
+        display: 'block',
+        backgroundColor: checked ? '#fff' : theme.affine.palette.primary,
+        width: '8px',
+        height: '8px',
+        borderRadius: '2px',
+        top: '2px',
+        left: '2px',
+        transform: checked ? 'translateX(10px)' : '',
+        transition:
+            'transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color .15s',
+    };
+});
+
+const StyleTrack = styled('span')<{ checked: boolean }>(
+    ({ theme, checked }) => ({
+        backgroundColor: checked ? theme.affine.palette.primary : '#fff',
+        border: `1px solid ${theme.affine.palette.primary}`,
+        borderRadius: '3px',
+        width: '100%',
+        height: '100%',
+        display: 'block',
+        transition: 'background-color .15s, border-color .15s',
+    })
+);
+
+const StyledWrapper = styled('label')`
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+`;
+
+const StyledLabel = styled('div')<{ disable: boolean; checked: boolean }>(
+    ({ theme, disable, checked }) => {
+        return {
+            display: 'inline-flex',
+            color: theme.affine.palette.primary,
+            fontSize: '12px',
+            marginRight: '5px',
+        };
+    }
+);
diff --git a/libs/components/ui/src/switch/index.ts b/libs/components/ui/src/switch/index.ts
new file mode 100644
index 000000000..c33419dc3
--- /dev/null
+++ b/libs/components/ui/src/switch/index.ts
@@ -0,0 +1,2 @@
+export { Switch } from './Switch';
+export type { SwitchProps } from './Switch';
diff --git a/libs/components/ui/src/tag/Tag.tsx b/libs/components/ui/src/tag/Tag.tsx
new file mode 100644
index 000000000..7ef614e81
--- /dev/null
+++ b/libs/components/ui/src/tag/Tag.tsx
@@ -0,0 +1,57 @@
+import type {
+    FC,
+    ChangeEventHandler,
+    PropsWithChildren,
+    CSSProperties,
+    ReactNode,
+} from 'react';
+
+import { MouseEventHandler } from 'react';
+import CloseIcon from '@mui/icons-material/Close';
+import { StyledTag } from './style';
+
+export interface TagProps {
+    style?: CSSProperties;
+    onClick?: MouseEventHandler;
+    closeable?: boolean;
+    onClose?: () => void;
+    startElement?: ReactNode;
+    endElement?: ReactNode;
+}
+
+export const Tag: FC<PropsWithChildren<TagProps>> = ({
+    onClick,
+    style,
+    children,
+    closeable,
+    onClose,
+    startElement,
+    endElement,
+}) => {
+    return (
+        <StyledTag
+            className={`affine-tag ${closeable ? 'affine-tag--closeable' : ''}`}
+            style={{
+                ...style,
+            }}
+            onClick={onClick}
+        >
+            <div className="affine-tag__wrapper">
+                {startElement}
+                <div className="affine-tag__content">{children}</div>
+                {endElement}
+                {closeable && (
+                    <div
+                        className="affine-tag__closeWrapper"
+                        onClick={e => {
+                            e.stopPropagation();
+                            onClose?.();
+                        }}
+                    >
+                        <CloseIcon style={{ fontSize: 12 }} />
+                    </div>
+                )}
+            </div>
+        </StyledTag>
+    );
+};
diff --git a/libs/components/ui/src/tag/index.tsx b/libs/components/ui/src/tag/index.tsx
new file mode 100644
index 000000000..1312f7a7d
--- /dev/null
+++ b/libs/components/ui/src/tag/index.tsx
@@ -0,0 +1,2 @@
+export { Tag } from './Tag';
+export type { TagProps } from './Tag';
diff --git a/libs/components/ui/src/tag/style.ts b/libs/components/ui/src/tag/style.ts
new file mode 100644
index 000000000..e6caa4fb7
--- /dev/null
+++ b/libs/components/ui/src/tag/style.ts
@@ -0,0 +1,53 @@
+import { styled } from '../styled';
+
+export const StyledTag = styled('div')`
+    height: 20px;
+    display: inline-flex;
+    align-items: center;
+    border-radius: 11px;
+    padding: 0 8px;
+    font-size: 12px;
+    cursor: pointer;
+    position: relative;
+
+    .affine-tag__wrapper {
+        display: flex;
+        align-items: center;
+        align-content: center;
+    }
+    .affine-tag__content {
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        line-height: 20px;
+        flex-grow: 1;
+    }
+
+    .affine-tag__closeWrapper {
+        height: 100%;
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        display: flex;
+        align-items: center;
+        padding: 0 5px;
+        opacity: 0;
+        transition: opacity 0.15s;
+        pointer-events: none;
+    }
+
+    &.affine-tag--closeable {
+        &:hover {
+            .affine-tag__wrapper {
+                width: calc(100% - 8px);
+            }
+            .affine-tag__closeWrapper {
+                opacity: 1;
+                pointer-events: auto;
+            }
+        }
+    }
+`;
diff --git a/libs/components/ui/src/theme/README.md b/libs/components/ui/src/theme/README.md
new file mode 100644
index 000000000..f0864b570
--- /dev/null
+++ b/libs/components/ui/src/theme/README.md
@@ -0,0 +1,5 @@
+# Theme
+
+## Size
+
+xs(extra-small) < sm(small) < md(middle) < lg(large) < xl(extra-large)
diff --git a/libs/components/ui/src/theme/color.ts b/libs/components/ui/src/theme/color.ts
new file mode 100644
index 000000000..49f6941ea
--- /dev/null
+++ b/libs/components/ui/src/theme/color.ts
@@ -0,0 +1,231 @@
+export default {
+    inherit: 'inherit',
+    transparent: 'transparent',
+    black: '#000',
+    white: '#fff',
+    primary: '#3E6FDB',
+    danger: '#f87171',
+    success: '#4ade80',
+    warning: '#facc15',
+    info: '#7dd3fc',
+    'slate-50': '#f8fafc',
+    'slate-100': '#f1f5f9',
+    'slate-200': '#e2e8f0',
+    'slate-300': '#cbd5e1',
+    'slate-400': '#94a3b8',
+    'slate-500': '#64748b',
+    'slate-600': '#475569',
+    'slate-700': '#334155',
+    'slate-800': '#1e293b',
+    'slate-900': '#0f172a',
+    'gray-50': '#f9fafb',
+    'gray-100': '#f3f4f6',
+    'gray-200': '#e5e7eb',
+    'gray-300': '#d1d5db',
+    'gray-400': '#9ca3af',
+    'gray-500': '#6b7280',
+    'gray-600': '#4b5563',
+    'gray-700': '#374151',
+    'gray-800': '#1f2937',
+    'gray-900': '#111827',
+    'zinc-50': '#fafafa',
+    'zinc-100': '#f4f4f5',
+    'zinc-200': '#e4e4e7',
+    'zinc-300': '#d4d4d8',
+    'zinc-400': '#a1a1aa',
+    'zinc-500': '#71717a',
+    'zinc-600': '#52525b',
+    'zinc-700': '#3f3f46',
+    'zinc-800': '#27272a',
+    'zinc-900': '#18181b',
+    'neutral-50': '#fafafa',
+    'neutral-100': '#f5f5f5',
+    'neutral-200': '#e5e5e5',
+    'neutral-300': '#d4d4d4',
+    'neutral-400': '#a3a3a3',
+    'neutral-500': '#737373',
+    'neutral-600': '#525252',
+    'neutral-700': '#404040',
+    'neutral-800': '#262626',
+    'neutral-900': '#171717',
+    'stone-50': '#fafaf9',
+    'stone-100': '#f5f5f4',
+    'stone-200': '#e7e5e4',
+    'stone-300': '#d6d3d1',
+    'stone-400': '#a8a29e',
+    'stone-500': '#78716c',
+    'stone-600': '#57534e',
+    'stone-700': '#44403c',
+    'stone-800': '#292524',
+    'stone-900': '#1c1917',
+    'red-50': '#fef2f2',
+    'red-100': '#fee2e2',
+    'red-200': '#fecaca',
+    'red-300': '#fca5a5',
+    'red-400': '#f87171',
+    'red-500': '#ef4444',
+    'red-600': '#dc2626',
+    'red-700': '#b91c1c',
+    'red-800': '#991b1b',
+    'red-900': '#7f1d1d',
+    'orange-50': '#fff7ed',
+    'orange-100': '#ffedd5',
+    'orange-200': '#fed7aa',
+    'orange-300': '#fdba74',
+    'orange-400': '#fb923c',
+    'orange-500': '#f97316',
+    'orange-600': '#ea580c',
+    'orange-700': '#c2410c',
+    'orange-800': '#9a3412',
+    'orange-900': '#7c2d12',
+    'amber-50': '#fffbeb',
+    'amber-100': '#fef3c7',
+    'amber-200': '#fde68a',
+    'amber-300': '#fcd34d',
+    'amber-400': '#fbbf24',
+    'amber-500': '#f59e0b',
+    'amber-600': '#d97706',
+    'amber-700': '#b45309',
+    'amber-800': '#92400e',
+    'amber-900': '#78350f',
+    'yellow-50': '#fefce8',
+    'yellow-100': '#fef9c3',
+    'yellow-200': '#fef08a',
+    'yellow-300': '#fde047',
+    'yellow-400': '#facc15',
+    'yellow-500': '#eab308',
+    'yellow-600': '#ca8a04',
+    'yellow-700': '#a16207',
+    'yellow-800': '#854d0e',
+    'yellow-900': '#713f12',
+    'lime-50': '#f7fee7',
+    'lime-100': '#ecfccb',
+    'lime-200': '#d9f99d',
+    'lime-300': '#bef264',
+    'lime-400': '#a3e635',
+    'lime-500': '#84cc16',
+    'lime-600': '#65a30d',
+    'lime-700': '#4d7c0f',
+    'lime-800': '#3f6212',
+    'lime-900': '#365314',
+    'green-50': '#f0fdf4',
+    'green-100': '#dcfce7',
+    'green-200': '#bbf7d0',
+    'green-300': '#86efac',
+    'green-400': '#4ade80',
+    'green-500': '#22c55e',
+    'green-600': '#16a34a',
+    'green-700': '#15803d',
+    'green-800': '#166534',
+    'green-900': '#14532d',
+    'emerald-50': '#ecfdf5',
+    'emerald-100': '#d1fae5',
+    'emerald-200': '#a7f3d0',
+    'emerald-300': '#6ee7b7',
+    'emerald-400': '#34d399',
+    'emerald-500': '#10b981',
+    'emerald-600': '#059669',
+    'emerald-700': '#047857',
+    'emerald-800': '#065f46',
+    'emerald-900': '#064e3b',
+    'teal-50': '#f0fdfa',
+    'teal-100': '#ccfbf1',
+    'teal-200': '#99f6e4',
+    'teal-300': '#5eead4',
+    'teal-400': '#2dd4bf',
+    'teal-500': '#14b8a6',
+    'teal-600': '#0d9488',
+    'teal-700': '#0f766e',
+    'teal-800': '#115e59',
+    'teal-900': '#134e4a',
+    'cyan-50': '#ecfeff',
+    'cyan-100': '#cffafe',
+    'cyan-200': '#a5f3fc',
+    'cyan-300': '#67e8f9',
+    'cyan-400': '#22d3ee',
+    'cyan-500': '#06b6d4',
+    'cyan-600': '#0891b2',
+    'cyan-700': '#0e7490',
+    'cyan-800': '#155e75',
+    'cyan-900': '#164e63',
+    'sky-50': '#f0f9ff',
+    'sky-100': '#e0f2fe',
+    'sky-200': '#bae6fd',
+    'sky-300': '#7dd3fc',
+    'sky-400': '#38bdf8',
+    'sky-500': '#0ea5e9',
+    'sky-600': '#0284c7',
+    'sky-700': '#0369a1',
+    'sky-800': '#075985',
+    'sky-900': '#0c4a6e',
+    'blue-50': '#eff6ff',
+    'blue-100': '#dbeafe',
+    'blue-200': '#bfdbfe',
+    'blue-300': '#93c5fd',
+    'blue-400': '#60a5fa',
+    'blue-500': '#3b82f6',
+    'blue-600': '#2563eb',
+    'blue-700': '#1d4ed8',
+    'blue-800': '#1e40af',
+    'blue-900': '#1e3a8a',
+    'indigo-50': '#eef2ff',
+    'indigo-100': '#e0e7ff',
+    'indigo-200': '#c7d2fe',
+    'indigo-300': '#a5b4fc',
+    'indigo-400': '#818cf8',
+    'indigo-500': '#6366f1',
+    'indigo-600': '#4f46e5',
+    'indigo-700': '#4338ca',
+    'indigo-800': '#3730a3',
+    'indigo-900': '#312e81',
+    'violet-50': '#f5f3ff',
+    'violet-100': '#ede9fe',
+    'violet-200': '#ddd6fe',
+    'violet-300': '#c4b5fd',
+    'violet-400': '#a78bfa',
+    'violet-500': '#8b5cf6',
+    'violet-600': '#7c3aed',
+    'violet-700': '#6d28d9',
+    'violet-800': '#5b21b6',
+    'violet-900': '#4c1d95',
+    'purple-50': '#faf5ff',
+    'purple-100': '#f3e8ff',
+    'purple-200': '#e9d5ff',
+    'purple-300': '#d8b4fe',
+    'purple-400': '#c084fc',
+    'purple-500': '#a855f7',
+    'purple-600': '#9333ea',
+    'purple-700': '#7e22ce',
+    'purple-800': '#6b21a8',
+    'purple-900': '#581c87',
+    'fuchsia-50': '#fdf4ff',
+    'fuchsia-100': '#fae8ff',
+    'fuchsia-200': '#f5d0fe',
+    'fuchsia-300': '#f0abfc',
+    'fuchsia-400': '#e879f9',
+    'fuchsia-500': '#d946ef',
+    'fuchsia-600': '#c026d3',
+    'fuchsia-700': '#a21caf',
+    'fuchsia-800': '#86198f',
+    'fuchsia-900': '#701a75',
+    'pink-50': '#fdf2f8',
+    'pink-100': '#fce7f3',
+    'pink-200': '#fbcfe8',
+    'pink-300': '#f9a8d4',
+    'pink-400': '#f472b6',
+    'pink-500': '#ec4899',
+    'pink-600': '#db2777',
+    'pink-700': '#be185d',
+    'pink-800': '#9d174d',
+    'pink-900': '#831843',
+    'rose-50': '#fff1f2',
+    'rose-100': '#ffe4e6',
+    'rose-200': '#fecdd3',
+    'rose-300': '#fda4af',
+    'rose-400': '#fb7185',
+    'rose-500': '#f43f5e',
+    'rose-600': '#e11d48',
+    'rose-700': '#be123c',
+    'rose-800': '#9f1239',
+    'rose-900': '#881337',
+};
diff --git a/libs/components/ui/src/theme/index.ts b/libs/components/ui/src/theme/index.ts
new file mode 100644
index 000000000..a9c53bb1e
--- /dev/null
+++ b/libs/components/ui/src/theme/index.ts
@@ -0,0 +1,7 @@
+import { Theme as theme } from './theme';
+export { ThemeProvider, useTheme, withTheme } from './utils';
+
+/**
+ * @deprecated use useTheme / withTheme instead
+ */
+export const Theme = theme;
diff --git a/libs/components/ui/src/theme/theme.ts b/libs/components/ui/src/theme/theme.ts
new file mode 100644
index 000000000..a51bca882
--- /dev/null
+++ b/libs/components/ui/src/theme/theme.ts
@@ -0,0 +1,253 @@
+import ColorObject from './color';
+// import { ThemeOptions } from '@mui/material/styles';
+/**
+ * @deprecated Please use the new {@link ThemeOptions} type.
+ */
+interface ThemeOptionsLegacy {
+    palette: Palette;
+    typography: Typography;
+    shadows?: Shadows;
+    border?: StringWithNone;
+    spacing?: Spacing;
+    shape?: Shape;
+}
+
+interface Shape {
+    xsBorderRadius?: string;
+    borderRadius?: string;
+    smBorderRadius?: string;
+    lgBorderRadius?: string;
+}
+interface Spacing {
+    xsSpacing: string;
+    smSpacing?: string;
+    main?: string;
+    lgSpacing?: string;
+}
+interface Palette {
+    primary?: Action;
+    success?: Action;
+    info?: Action;
+    error?: Action;
+    warning?: Action;
+    text?: Action;
+}
+interface Action {
+    main: string;
+    active?: string;
+    hover?: string;
+    hoverOpacity?: number;
+    selected?: string;
+    selectedOpacity?: number;
+    disabled?: string;
+    disabledOpacity?: number;
+    disabledBackground?: string;
+    focus?: string;
+    focusOpacity?: number;
+    activatedOpacity?: number;
+}
+interface Typography {
+    fontSize?: string;
+    fontFamily?: string;
+    xsFontSize?: string;
+    lgFontSize?: string;
+    fontWeight?: number;
+    xsFontWeight?: number;
+    lineHeight?: string;
+    lgFontWeight?: number;
+    button?: Font;
+    body1?: Font;
+    body2?: Font;
+    h1?: Font;
+    h2?: Font;
+    h3?: Font;
+    h4?: Font;
+    h5?: Font;
+    page?: Font;
+    quote?: Font;
+    callout?: Font;
+}
+
+interface Shadows {
+    none: 'none';
+    shadowSxDownLg: string;
+}
+
+type StringWithNone = [
+    'none',
+    string?,
+    string?,
+    string?,
+    string?,
+    string?,
+    string?,
+    string?,
+    string?,
+    string?,
+    string?,
+    string?,
+    string?,
+    string?,
+    string?,
+    string?,
+    string?,
+    string?,
+    string?,
+    string?,
+    string?,
+    string?,
+    string?,
+    string?,
+    string?
+];
+interface Font {
+    fontSize?: string;
+    lineHeight?: string;
+    fontFamily?: string;
+    fontWeight?: number;
+}
+
+export const Theme = {
+    palette: {
+        /**
+         * figma: white
+         */
+        white: '#ffffff',
+        /**
+         * figma: icons
+         */
+        icons: '#98ACBD',
+        /**
+         * figma: T-menu
+         */
+        menu: '#4C6275',
+        /** separator line color for menus and icons */
+        menuSeparator: '#E0E6EB',
+        /**
+         * figma: hover
+         */
+        hover: '#F5F7F8',
+        /**
+         * figma: tag hover
+         */
+        tagHover: '#E0E6EB',
+        borderColor: '#E0E6EB',
+        placeholderColor: '#E0E6EB',
+        /**
+         * figma: brand color
+         */
+        primary: '#3E6FDB',
+        /**
+         * figma: operation failed
+         */
+        error: '#F1675E',
+        /**
+         * figma: warning color
+         */
+        warning: '#F1BE5E',
+        /**
+         * figma: operation succeeded
+         */
+        success: '#40DF9B',
+        /**
+         * figma: text
+         */
+        primaryText: '#3A4C5C',
+        /**
+         * figma: subtext color
+         */
+        secondaryText: '#4C6275',
+        /**
+         * selected
+         */
+        textSelected: 'rgba(152, 172, 189, 0.1)',
+        /**
+         * text hover
+         */
+        textHover: '#ECF1FB',
+    },
+    typography: {
+        button: {
+            fontSize: '16px',
+        },
+        body1: {
+            fontSize: '16px',
+            lineHeight: '22px',
+        },
+        h1: {
+            fontSize: '28px',
+            lineHeight: '40px',
+        },
+        h2: {
+            fontSize: '24px',
+            lineHeight: '34px',
+        },
+        h3: {
+            fontSize: '20px',
+            lineHeight: '28px',
+        },
+        h4: {
+            fontSize: '16px',
+            lineHeight: '22px',
+        },
+        page: {
+            fontSize: '36px',
+            lineHeight: '44px',
+        },
+        callout: {
+            fontSize: '36px',
+            lineHeight: '54px',
+        },
+        quote: {
+            fontSize: '36px',
+            lineHeight: '54px',
+        },
+        tooltip: {
+            fontSize: '12px',
+            lineHeight: '18px',
+        },
+        sm: {
+            fontSize: '14px',
+            lineHeight: '20px',
+        },
+        xs: {
+            fontSize: '12px',
+            lineHeight: '18px',
+        },
+        base: {
+            fontSize: '16px',
+            lineHeight: '22px',
+        },
+        articleTitle: {
+            fontSize: '36px',
+            lineHeight: '54px',
+        },
+    },
+    shadows: {
+        none: 'none',
+        shadowSxDownLg: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    },
+    border: ['none'],
+    spacing: {
+        xsSpacing: '4px',
+        smSpacing: '12px',
+        main: '16px',
+        lgSpacing: '20px',
+        iconPadding: '6px',
+    },
+    shape: {
+        borderRadius: '10px',
+        xsBorderRadius: '4px',
+        smBorderRadius: '8px',
+        lgBorderRadius: '20px',
+    },
+    zIndex: {
+        header: 100,
+        popover: 200,
+        tooltip: 300,
+        modal: 400,
+        message: 500,
+    },
+} as const;
+
+export type ThemeOptions = typeof Theme;
diff --git a/libs/components/ui/src/theme/utils.tsx b/libs/components/ui/src/theme/utils.tsx
new file mode 100644
index 000000000..35d6148e5
--- /dev/null
+++ b/libs/components/ui/src/theme/utils.tsx
@@ -0,0 +1,39 @@
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import {
+    createTheme,
+    ThemeProvider as MuiThemeProvider,
+    useTheme as muiUseTheme,
+    Theme as MuiTheme,
+} from '@mui/material/styles';
+import type { ThemeOptions as AffineThemeOptions } from './theme';
+import { Theme } from './theme';
+
+declare module '@mui/material/styles' {
+    interface Theme {
+        affine: AffineThemeOptions;
+    }
+    // allow configuration using `createTheme`
+    interface ThemeOptions {
+        affine: AffineThemeOptions;
+    }
+}
+
+const theme = createTheme({
+    affine: Theme,
+});
+
+export const ThemeProvider: FC<{ children?: ReactNode }> = ({ children }) => {
+    return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
+};
+
+export const useTheme = () => muiUseTheme();
+
+export const withTheme = <T,>(
+    Component: FC<T & { theme: MuiTheme }>
+): FC<T> => {
+    return props => {
+        const theme = useTheme();
+        return <Component {...props} theme={theme} />;
+    };
+};
diff --git a/libs/components/ui/src/tooltip/Tooltip.tsx b/libs/components/ui/src/tooltip/Tooltip.tsx
new file mode 100644
index 000000000..6954fe2cc
--- /dev/null
+++ b/libs/components/ui/src/tooltip/Tooltip.tsx
@@ -0,0 +1,36 @@
+import React, {
+    forwardRef,
+    type PropsWithChildren,
+    type CSSProperties,
+    useState,
+} from 'react';
+import { type PopperHandler, type PopperProps, Popper } from '../popper';
+import type { TooltipProps } from './interface';
+import { useTheme } from '../theme';
+
+const useTooltipStyle = (): CSSProperties => {
+    const theme = useTheme();
+    return {
+        backgroundColor: theme.affine.palette.icons,
+        color: theme.affine.palette.white,
+        ...theme.affine.typography.tooltip,
+        padding: '4px 8px',
+        borderRadius: theme.shape.borderRadius,
+    };
+};
+
+export const Tooltip = forwardRef<
+    PopperHandler,
+    PropsWithChildren<PopperProps & TooltipProps>
+>((props, ref) => {
+    const style = useTooltipStyle();
+    return (
+        <Popper
+            ref={ref}
+            popoverStyle={style}
+            placement="top"
+            showArrow
+            {...props}
+        />
+    );
+});
diff --git a/libs/components/ui/src/tooltip/index.tsx b/libs/components/ui/src/tooltip/index.tsx
new file mode 100644
index 000000000..7594a8f06
--- /dev/null
+++ b/libs/components/ui/src/tooltip/index.tsx
@@ -0,0 +1 @@
+export * from './Tooltip';
diff --git a/libs/components/ui/src/tooltip/interface.ts b/libs/components/ui/src/tooltip/interface.ts
new file mode 100644
index 000000000..f7dc5fcb0
--- /dev/null
+++ b/libs/components/ui/src/tooltip/interface.ts
@@ -0,0 +1,3 @@
+export type TooltipProps = {
+    showArrow?: boolean;
+};
diff --git a/libs/components/ui/src/typography/Typo.tsx b/libs/components/ui/src/typography/Typo.tsx
new file mode 100644
index 000000000..4f0dfc6a4
--- /dev/null
+++ b/libs/components/ui/src/typography/Typo.tsx
@@ -0,0 +1,17 @@
+import { styled } from '../styled';
+import type { ThemeOptions } from '../theme/theme';
+
+type TypographyType = keyof ThemeOptions['typography'];
+
+interface TypographyProps {
+    /**
+     * Binding with typography in theme.
+     * Default: sm
+     */
+    type?: TypographyType;
+}
+
+export const Typography = styled('span')<TypographyProps>(({ theme, type }) => {
+    const config = theme.affine.typography[type] || theme.affine.typography.sm;
+    return config;
+});
diff --git a/libs/components/ui/src/typography/index.ts b/libs/components/ui/src/typography/index.ts
new file mode 100644
index 000000000..5ec74be31
--- /dev/null
+++ b/libs/components/ui/src/typography/index.ts
@@ -0,0 +1 @@
+export { Typography } from './Typo';
diff --git a/libs/components/ui/tsconfig.json b/libs/components/ui/tsconfig.json
new file mode 100644
index 000000000..0dddb5a9e
--- /dev/null
+++ b/libs/components/ui/tsconfig.json
@@ -0,0 +1,26 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "noImplicitAny": false
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/components/ui/tsconfig.lib.json b/libs/components/ui/tsconfig.lib.json
new file mode 100644
index 000000000..6a4378740
--- /dev/null
+++ b/libs/components/ui/tsconfig.lib.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"]
+}
diff --git a/libs/components/ui/tsconfig.spec.json b/libs/components/ui/tsconfig.spec.json
new file mode 100644
index 000000000..24b3ac659
--- /dev/null
+++ b/libs/components/ui/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+    "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"
+    ]
+}
diff --git a/libs/datasource/commands/.babelrc b/libs/datasource/commands/.babelrc
new file mode 100644
index 000000000..fe7ab2616
--- /dev/null
+++ b/libs/datasource/commands/.babelrc
@@ -0,0 +1,10 @@
+{
+    "presets": [
+        [
+            "@nrwl/web/babel",
+            {
+                "useBuiltIns": "usage"
+            }
+        ]
+    ]
+}
diff --git a/libs/datasource/commands/.eslintrc.json b/libs/datasource/commands/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/datasource/commands/.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": {}
+        }
+    ]
+}
diff --git a/libs/datasource/commands/README.md b/libs/datasource/commands/README.md
new file mode 100644
index 000000000..e0e8a5bb7
--- /dev/null
+++ b/libs/datasource/commands/README.md
@@ -0,0 +1,11 @@
+# datasource-commands
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build datasource-commands` to build the library.
+
+## Running unit tests
+
+Run `nx test datasource-commands` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/datasource/commands/jest.config.ts b/libs/datasource/commands/jest.config.ts
new file mode 100644
index 000000000..e3cd1f449
--- /dev/null
+++ b/libs/datasource/commands/jest.config.ts
@@ -0,0 +1,15 @@
+/* eslint-disable */
+export default {
+    displayName: 'datasource-commands',
+    preset: '../../../jest.preset.js',
+    globals: {
+        'ts-jest': {
+            tsconfig: '<rootDir>/tsconfig.spec.json',
+        },
+    },
+    transform: {
+        '^.+\\.[tj]s$': 'ts-jest',
+    },
+    moduleFileExtensions: ['ts', 'js', 'html'],
+    coverageDirectory: '../../../coverage/libs/datasource/commands',
+};
diff --git a/libs/datasource/commands/package.json b/libs/datasource/commands/package.json
new file mode 100644
index 000000000..010c1d8f0
--- /dev/null
+++ b/libs/datasource/commands/package.json
@@ -0,0 +1,7 @@
+{
+    "name": "@toeverything/datasource/commands",
+    "version": "0.0.1",
+    "license": "MIT",
+    "type": "commonjs",
+    "dependencies": {}
+}
diff --git a/libs/datasource/commands/project.json b/libs/datasource/commands/project.json
new file mode 100644
index 000000000..52fdb5134
--- /dev/null
+++ b/libs/datasource/commands/project.json
@@ -0,0 +1,33 @@
+{
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/datasource/commands/src",
+    "projectType": "library",
+    "tags": ["datasource:commands"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/js:tsc",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/datasource/commands",
+                "main": "libs/datasource/commands/src/index.ts",
+                "tsConfig": "libs/datasource/commands/tsconfig.lib.json",
+                "assets": ["libs/datasource/commands/*.md"]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": ["libs/datasource/commands/**/*.ts"]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/datasource/commands"],
+            "options": {
+                "jestConfig": "libs/datasource/commands/jest.config.ts",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/datasource/commands/src/index.ts b/libs/datasource/commands/src/index.ts
new file mode 100644
index 000000000..85020cae8
--- /dev/null
+++ b/libs/datasource/commands/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/datasource-commands';
diff --git a/libs/datasource/commands/src/lib/commands/block-command.ts b/libs/datasource/commands/src/lib/commands/block-command.ts
new file mode 100644
index 000000000..45fb1d6a0
--- /dev/null
+++ b/libs/datasource/commands/src/lib/commands/block-command.ts
@@ -0,0 +1,48 @@
+import { BlockFlavors } from '@toeverything/datasource/db-service';
+
+/**
+ *
+ * commands for control blocks
+ * @export
+ * @class BlockCommands
+ */
+export class BlockCommands {
+    private _workspace: string;
+    constructor(workspace: string) {
+        this._workspace = workspace;
+    }
+    /**
+     *
+     * create a block after typed id
+     * @param {keyof BlockFlavors} type
+     * @param {string} blockId
+     * @return {*}
+     * @memberof BlockCommands
+     */
+    public async createNextBlock(
+        type: keyof BlockFlavors = 'text',
+        blockId: string
+    ) {
+        // const block = await this._editor.getBlockById(blockId);
+        // if (block) {
+        //     const next_block = await this._editor.createBlock(type);
+        //     await block.after(next_block);
+        //     this._editor.selectionManager.activeNodeByNodeId(next_block.id);
+        //     return next_block;
+        // }
+        // return undefined;
+    }
+
+    /**
+     *
+     * remove block by block id
+     * @param {string} blockId
+     * @memberof BlockCommands
+     */
+    public async removeBlock(blockId: string) {
+        // const block = await this._editor.getBlockById(blockId);
+        // if (block) {
+        //     block.remove();
+        // }
+    }
+}
diff --git a/libs/datasource/commands/src/lib/commands/index.ts b/libs/datasource/commands/src/lib/commands/index.ts
new file mode 100644
index 000000000..9c7643750
--- /dev/null
+++ b/libs/datasource/commands/src/lib/commands/index.ts
@@ -0,0 +1,2 @@
+export * from './block-command';
+export * from './text-command';
diff --git a/libs/datasource/commands/src/lib/commands/text-command.ts b/libs/datasource/commands/src/lib/commands/text-command.ts
new file mode 100644
index 000000000..620d98799
--- /dev/null
+++ b/libs/datasource/commands/src/lib/commands/text-command.ts
@@ -0,0 +1,43 @@
+/**
+ *
+ * commands for control text and text styles
+ * @export
+ * @class TextCommand
+ */
+
+export class TextCommands {
+    private _workspace: string;
+    constructor(workspace: string) {
+        this._workspace = workspace;
+    }
+
+    /**
+     *
+     * get block text by block id
+     * @param {string} blockId
+     * @return {*}
+     * @memberof TextCommand
+     */
+    public async getBlockText(blockId: string) {
+        // let string = '';
+        // const block = await this._editor.getBlockById(blockId);
+        // if (block) {
+        //     string = block.getProperty('text')?.value[0]?.text || '';
+        // }
+        // return string;
+    }
+
+    /**
+     *
+     * set block text by block id
+     * @param {string} blockId
+     * @param {string} text
+     * @memberof TextCommand
+     */
+    public async setBlockText(blockId: string, text: string) {
+        // const block = await this._editor.getBlockById(blockId);
+        // if (block) {
+        //     block.setProperty('text', { value: [{ text: text }] });
+        // }
+    }
+}
diff --git a/libs/datasource/commands/src/lib/datasource-commands.spec.ts b/libs/datasource/commands/src/lib/datasource-commands.spec.ts
new file mode 100644
index 000000000..53e79658b
--- /dev/null
+++ b/libs/datasource/commands/src/lib/datasource-commands.spec.ts
@@ -0,0 +1,7 @@
+import { EditorCommands } from './datasource-commands';
+
+describe('datasourceCommands', () => {
+    // it('should work', () => {
+    //     expect(EditorCommands()).toEqual('datasource-commands');
+    // });
+});
diff --git a/libs/datasource/commands/src/lib/datasource-commands.ts b/libs/datasource/commands/src/lib/datasource-commands.ts
new file mode 100644
index 000000000..eca84d25a
--- /dev/null
+++ b/libs/datasource/commands/src/lib/datasource-commands.ts
@@ -0,0 +1,16 @@
+import { BlockCommands, TextCommands } from './commands';
+
+/**
+ *
+ * commands for operate servers
+ * @export
+ * @class Commands
+ */
+export class Commands {
+    public blockCommands: BlockCommands;
+    public textCommands: TextCommands;
+    constructor(workspace: string) {
+        this.blockCommands = new BlockCommands(workspace);
+        this.textCommands = new TextCommands(workspace);
+    }
+}
diff --git a/libs/datasource/commands/tsconfig.json b/libs/datasource/commands/tsconfig.json
new file mode 100644
index 000000000..842ea18da
--- /dev/null
+++ b/libs/datasource/commands/tsconfig.json
@@ -0,0 +1,23 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "module": "commonjs",
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "strictNullChecks": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/datasource/commands/tsconfig.lib.json b/libs/datasource/commands/tsconfig.lib.json
new file mode 100644
index 000000000..76f7af1d2
--- /dev/null
+++ b/libs/datasource/commands/tsconfig.lib.json
@@ -0,0 +1,10 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "declaration": true,
+        "types": []
+    },
+    "include": ["**/*.ts"],
+    "exclude": ["jest.config.ts", "**/*.spec.ts", "**/*.test.ts"]
+}
diff --git a/libs/datasource/commands/tsconfig.spec.json b/libs/datasource/commands/tsconfig.spec.json
new file mode 100644
index 000000000..33a6d7a86
--- /dev/null
+++ b/libs/datasource/commands/tsconfig.spec.json
@@ -0,0 +1,9 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "module": "commonjs",
+        "types": ["jest", "node"]
+    },
+    "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]
+}
diff --git a/libs/datasource/db-service/.babelrc b/libs/datasource/db-service/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/datasource/db-service/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/datasource/db-service/.eslintrc.json b/libs/datasource/db-service/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/datasource/db-service/.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": {}
+        }
+    ]
+}
diff --git a/libs/datasource/db-service/README.md b/libs/datasource/db-service/README.md
new file mode 100644
index 000000000..b953e3e80
--- /dev/null
+++ b/libs/datasource/db-service/README.md
@@ -0,0 +1,7 @@
+# datasource-db-service
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test datasource-db-service` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/datasource/db-service/jest.config.js b/libs/datasource/db-service/jest.config.js
new file mode 100644
index 000000000..7dd2f7bc8
--- /dev/null
+++ b/libs/datasource/db-service/jest.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+    displayName: 'datasource-db-service',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/datasource/db-service',
+};
diff --git a/libs/datasource/db-service/package.json b/libs/datasource/db-service/package.json
new file mode 100644
index 000000000..9c2b7e461
--- /dev/null
+++ b/libs/datasource/db-service/package.json
@@ -0,0 +1,12 @@
+{
+    "name": "@toeverything/datasource/db-service",
+    "version": "0.0.1",
+    "license": "MIT",
+    "dependencies": {
+        "diff": "^5.1.0",
+        "nanoid": "^4.0.0"
+    },
+    "devDependencies": {
+        "@types/diff": "^5.0.2"
+    }
+}
diff --git a/libs/datasource/db-service/project.json b/libs/datasource/db-service/project.json
new file mode 100644
index 000000000..1188d1c02
--- /dev/null
+++ b/libs/datasource/db-service/project.json
@@ -0,0 +1,44 @@
+{
+    "sourceRoot": "libs/datasource/db-service/src",
+    "projectType": "library",
+    "tags": ["datasource:db-services"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/datasource/db-service",
+                "tsConfig": "libs/datasource/db-service/tsconfig.lib.json",
+                "project": "libs/datasource/db-service/package.json",
+                "entryFile": "libs/datasource/db-service/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/datasource/db-service/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/datasource/db-service/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/datasource/db-service"],
+            "options": {
+                "jestConfig": "libs/datasource/db-service/jest.config.js",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/datasource/db-service/src/index.ts b/libs/datasource/db-service/src/index.ts
new file mode 100644
index 000000000..304552820
--- /dev/null
+++ b/libs/datasource/db-service/src/index.ts
@@ -0,0 +1,62 @@
+import { diContainer, serviceMapByCallName } from './services';
+import type { DbServicesMap } from './services';
+export type { Template } from './services/editor-block/templates/types';
+export {
+    TemplateFactory,
+    type TemplateMeta,
+} from './services/editor-block/templates';
+
+export type { ReturnUnobserve } from './services/database';
+export type { Comment, CommentReply } from './services/comment/types';
+
+const api = new Proxy<DbServicesMap>({} as DbServicesMap, {
+    get(target, prop) {
+        const token = serviceMapByCallName[prop as string]?.token;
+        if (!token) {
+            return undefined;
+        }
+        return diContainer.getDependency(token);
+    },
+});
+
+export const services = {
+    api,
+};
+(window as any)['services'] = services;
+
+export type {
+    CreateEditorBlock,
+    ReturnEditorBlock,
+    GetEditorBlock,
+    UpdateEditorBlock,
+    DeleteEditorBlock,
+    BlockFlavors,
+    BlockFlavorKeys,
+    Column,
+    ContentColumn,
+    NumberColumn,
+    EnumColumn,
+    DateColumn,
+    BooleanColumn,
+    FileColumn,
+    DefaultColumnsValue,
+    ContentColumnValue,
+    NumberColumnValue,
+    EnumColumnValue,
+    BooleanColumnValue,
+    DateColumnValue,
+    FileColumnValue,
+    StringColumnValue,
+} from './services';
+export {
+    ColumnType,
+    isBooleanColumn,
+    isContentColumn,
+    isDateColumn,
+    isFileColumn,
+    isNumberColumn,
+    isEnumColumn,
+    isStringColumn,
+} from './services';
+export { Protocol } from './protocol';
+export { DEFAULT_COLUMN_KEYS } from './services/editor-block/utils/column/default-config';
diff --git a/libs/datasource/db-service/src/protocol/index.ts b/libs/datasource/db-service/src/protocol/index.ts
new file mode 100644
index 000000000..606988c68
--- /dev/null
+++ b/libs/datasource/db-service/src/protocol/index.ts
@@ -0,0 +1,45 @@
+const Protocol = {
+    Block: {
+        Type: {
+            workspace: 'workspace',
+            page: 'page',
+            group: 'group',
+            title: 'title',
+            text: 'text',
+            heading1: 'heading1',
+            heading2: 'heading2',
+            heading3: 'heading3',
+            code: 'code',
+            todo: 'todo',
+            comments: 'comments',
+            tag: 'tag',
+            reference: 'reference',
+            image: 'image',
+            file: 'file',
+            audio: 'audio',
+            video: 'video',
+            shape: 'shape',
+            quote: 'quote',
+            toc: 'toc',
+            database: 'database',
+            whiteboard: 'whiteboard',
+            template: 'template',
+            discussion: 'discussion',
+            comment: 'comment',
+            activity: 'activity',
+            bullet: 'bullet',
+            numbered: 'numbered',
+            toggle: 'toggle',
+            callout: 'callout',
+            divider: 'divider',
+            groupDivider: 'groupDivider',
+            youtube: 'youtube',
+            figma: 'figma',
+            embedLink: 'embedLink',
+            grid: 'grid',
+            gridItem: 'gridItem',
+        },
+    },
+} as const;
+
+export { Protocol };
diff --git a/libs/datasource/db-service/src/services/base.ts b/libs/datasource/db-service/src/services/base.ts
new file mode 100644
index 000000000..d0788170b
--- /dev/null
+++ b/libs/datasource/db-service/src/services/base.ts
@@ -0,0 +1,168 @@
+import {
+    BlockClientInstance,
+    BlockInitOptions,
+    BlockImplInstance,
+    BlockMatcher,
+    BlockContentExporter,
+    QueryIndexMetadata,
+} from '@toeverything/datasource/jwt';
+import { DependencyCallOrConstructProps } from '@toeverything/utils';
+import { Database } from './database';
+import type { ObserveCallback, ReturnUnobserve } from './database/observer';
+
+export abstract class ServiceBaseClass {
+    protected database: Database;
+    protected get_dependency: DependencyCallOrConstructProps['getDependency'];
+    constructor(props: DependencyCallOrConstructProps) {
+        this.get_dependency = props.getDependency;
+        this.database = this.get_dependency(Database);
+    }
+
+    async getWorkspaceDbBlock(workspace: string, options?: BlockInitOptions) {
+        const db = await this.database.getDatabase(workspace, options);
+        return db.getWorkspace();
+    }
+
+    async onHistoryChange(
+        workspace: string,
+        name: string,
+        callback: (meta: Map<string, any>) => void
+    ) {
+        const db = await this.database.getDatabase(workspace);
+        db.history.onPush(name, callback);
+    }
+
+    async onHistoryRevoke(
+        workspace: string,
+        name: string,
+        callback: (meta: Map<string, any>) => void
+    ) {
+        const db = await this.database.getDatabase(workspace);
+        db.history.onPop(name, callback);
+    }
+
+    async undo(workspace: string) {
+        const db = await this.database.getDatabase(workspace);
+        return db.history.undo();
+    }
+
+    async redo(workspace: string) {
+        const db = await this.database.getDatabase(workspace);
+        return db.history.redo();
+    }
+
+    async search(
+        workspace: string,
+        query: Parameters<BlockClientInstance['searchPages']>[0]
+    ) {
+        const db = await this.database.getDatabase(workspace);
+        return db.searchPages(query);
+    }
+
+    async query(
+        workspace: string,
+        query: QueryIndexMetadata
+    ): Promise<null | any[]> {
+        const db = await this.database.getDatabase(workspace);
+        return db.query(query);
+    }
+
+    async clearUndoRedo(workspace: string) {
+        const db = await this.database.getDatabase(workspace);
+        return db.history.clear();
+    }
+
+    /**
+     * Get the block, unlike db.get, if the id does not exist, it will return undefined
+     * @param workspace
+     * @param blockId
+     * @returns
+     */
+    async getBlock(
+        workspace: string,
+        blockId: string
+    ): Promise<BlockImplInstance | undefined> {
+        const db = await this.database.getDatabase(workspace);
+        const db_block = await db.get(blockId as 'block');
+        if (db_block.id !== blockId) {
+            return undefined;
+        }
+        return db_block;
+    }
+
+    async registerContentExporter(
+        workspace: string,
+        name: string,
+        matcher: BlockMatcher,
+        exporter: BlockContentExporter
+    ) {
+        await this.database.registerContentExporter(
+            workspace,
+            name,
+            matcher,
+            exporter
+        );
+    }
+
+    async unregisterContentExporter(workspace: string, name: string) {
+        await this.database.unregisterContentExporter(workspace, name);
+    }
+
+    async registerMetadataExporter(
+        workspace: string,
+        name: string,
+        matcher: BlockMatcher,
+        exporter: BlockContentExporter<
+            Array<[string, number | string | string[]]>
+        >
+    ) {
+        await this.database.registerMetadataExporter(
+            workspace,
+            name,
+            matcher,
+            exporter
+        );
+    }
+
+    async unregisterMetadataExporter(workspace: string, name: string) {
+        await this.database.unregisterMetadataExporter(workspace, name);
+    }
+
+    async registerTagExporter(
+        workspace: string,
+        name: string,
+        matcher: BlockMatcher,
+        exporter: BlockContentExporter<string[]>
+    ) {
+        await this.database.registerTagExporter(
+            workspace,
+            name,
+            matcher,
+            exporter
+        );
+    }
+
+    async unregisterTagExporter(workspace: string, name: string) {
+        await this.database.unregisterTagExporter(workspace, name);
+    }
+
+    protected async _observe(
+        workspace: string,
+        blockId: string,
+        callback: ObserveCallback
+    ): Promise<ReturnUnobserve> {
+        return await this.database.observe(workspace, blockId, async states => {
+            const db = await this.database.getDatabase(workspace);
+            const new_block = await db.get(blockId as 'block');
+            callback(states, new_block);
+        });
+    }
+
+    protected async _unobserve(
+        workspace: string,
+        blockId: string,
+        callback?: ObserveCallback
+    ) {
+        return await this.database.unobserve(workspace, blockId, callback);
+    }
+}
diff --git a/libs/datasource/db-service/src/services/comment/comment.ts b/libs/datasource/db-service/src/services/comment/comment.ts
new file mode 100644
index 000000000..968e201cc
--- /dev/null
+++ b/libs/datasource/db-service/src/services/comment/comment.ts
@@ -0,0 +1,315 @@
+import { DependencyCallOrConstructProps } from '@toeverything/utils';
+import type { ReturnUnobserve } from '../database/observer';
+import {
+    DeleteEditorBlock,
+    GetEditorBlock,
+    ReturnEditorBlock,
+} from '../editor-block/types';
+import { EditorBlock, ObserveCallback } from '../editor-block';
+import {
+    CommentReply,
+    CreateCommentBlock,
+    CreateReplyBlock,
+    UpdateCommentBlock,
+    UpdateReplyBlock,
+    GetCommentsBlock,
+    Comment,
+} from './types';
+import { DefaultColumnsValue } from './../index';
+import { CommentColumnValue } from '../editor-block/utils/column/types';
+import { WORKSPACE_COMMENTS } from '../../utils';
+
+export class CommentService {
+    protected editor_block: EditorBlock;
+    protected get_dependency: DependencyCallOrConstructProps['getDependency'];
+    constructor(props: DependencyCallOrConstructProps) {
+        this.get_dependency = props.getDependency;
+        this.editor_block = this.get_dependency(EditorBlock);
+    }
+
+    async createComment({
+        workspace,
+        pageId,
+        attachedToBlocksIds,
+        quote,
+        content,
+    }: CreateCommentBlock): Promise<{ commentsId: string } | undefined> {
+        const rootCommentId = await this.get_root_comment_id({
+            workspace,
+            pageId,
+        });
+        const discussionBlock = await this.editor_block.create({
+            workspace: workspace,
+            type: 'comments',
+        });
+
+        if (!discussionBlock) {
+            return undefined;
+        }
+
+        const parentBlock = await this.editor_block.get({
+            workspace,
+            ids: [rootCommentId],
+        });
+
+        if (parentBlock.length === 0) {
+            return undefined;
+        }
+
+        const children = parentBlock[0]?.children || [];
+        children.push(discussionBlock.id);
+        const success = await this.editor_block.update({
+            id: rootCommentId,
+            workspace: workspace,
+            children: children,
+        });
+        if (!success) {
+            return undefined;
+        }
+
+        let result = false;
+        result = await this.updateComment({
+            workspace: workspace,
+            id: discussionBlock.id,
+            attachedToBlocksIds: attachedToBlocksIds || [],
+            quote: quote,
+            pageId: pageId,
+        });
+        if (!result) {
+            return undefined;
+        }
+
+        const reply = await this.createReply({
+            workspace: workspace,
+            parentId: discussionBlock.id,
+            content: content,
+        });
+
+        return { commentsId: discussionBlock.id };
+    }
+
+    async createReply({
+        workspace,
+        parentId,
+        content,
+    }: CreateReplyBlock): Promise<boolean> {
+        const reply_block = await this.editor_block.create({
+            workspace: workspace,
+            type: 'comment',
+        });
+        if (!reply_block) {
+            return false;
+        }
+
+        const parent_block = await this.editor_block.get({
+            workspace,
+            ids: [parentId],
+        });
+
+        if (parent_block.length === 0) {
+            return false;
+        }
+
+        const children = parent_block[0]?.children || [];
+        children.push(reply_block.id);
+        const success = await this.editor_block.update({
+            id: parentId,
+            workspace: workspace,
+            children: children,
+        });
+        if (!success) {
+            return false;
+        }
+
+        return await this.updateReply({
+            workspace,
+            id: reply_block.id,
+            content,
+        });
+    }
+
+    async updateComment({
+        workspace,
+        id,
+        pageId,
+        attachedToBlocksIds,
+        quote,
+        resolve,
+    }: UpdateCommentBlock): Promise<boolean> {
+        const properties: Partial<DefaultColumnsValue> = {};
+        if (quote !== undefined) {
+            properties.text = quote;
+        }
+        const blocks = await this.editor_block.get({
+            workspace,
+            ids: [id],
+        });
+        if (blocks.length === 0) {
+            return false;
+        }
+        const commentValue: CommentColumnValue = {} as CommentColumnValue;
+        Object.assign(commentValue, blocks[0]?.properties?.comment);
+        if (pageId !== undefined) {
+            commentValue.pageId = pageId;
+        }
+        if (attachedToBlocksIds !== undefined) {
+            commentValue.attachedToBlocksIds = attachedToBlocksIds;
+        }
+        if (resolve !== undefined) {
+            commentValue.resolve = resolve;
+            commentValue.finishTime = resolve ? Date.now() : undefined;
+            commentValue.resolveUserId = resolve
+                ? await this.editor_block.getUserId(workspace)
+                : undefined;
+        }
+        properties.comment = commentValue;
+        return await this.editor_block.update({
+            id: id,
+            workspace: workspace,
+            properties: properties,
+        });
+    }
+
+    async updateReply({
+        workspace,
+        id,
+        content,
+    }: UpdateReplyBlock): Promise<boolean> {
+        return await this.editor_block.update({
+            id: id,
+            workspace: workspace,
+            properties: {
+                text: content,
+            },
+        });
+    }
+
+    async delete({ workspace, id }: DeleteEditorBlock): Promise<boolean> {
+        return await this.editor_block.delete({
+            workspace: workspace,
+            id: id,
+        });
+    }
+
+    async getPageComments({
+        workspace,
+        pageId,
+    }: GetCommentsBlock): Promise<Comment | null> {
+        const root_comment_id = await this.get_root_comment_id({
+            workspace,
+            pageId,
+        });
+        const comments = await this.getComments({
+            workspace,
+            ids: [root_comment_id],
+        });
+        return comments.length > 0 ? comments[0] : null;
+    }
+
+    async getComments({
+        workspace,
+        ids,
+    }: GetEditorBlock): Promise<Array<Comment>> {
+        const blocks = (await this.get({ workspace, ids })).filter(block => {
+            return (
+                block &&
+                block?.type === 'comments' &&
+                !block.properties?.comment?.resolve
+            );
+        }) as ReturnEditorBlock[];
+        const comments = blocks.map(block => {
+            return {
+                id: block.id,
+                workspace: block.workspace,
+                type: block.type,
+                parentId: block.parentId,
+                attachedToBlocksIds:
+                    block.properties?.comment?.attachedToBlocksIds || [],
+                children: block.children,
+                quote: block.properties?.text || [],
+                resolve: block.properties?.comment?.resolve || false,
+                resolveUserId: block.properties?.comment?.resolveUserId || '',
+                created: block.created,
+                lastUpdated: block.lastUpdated,
+                creator: block.creator,
+            } as Comment;
+        });
+        return comments;
+    }
+
+    async getReplyList({
+        workspace,
+        ids,
+    }: GetEditorBlock): Promise<Array<CommentReply>> {
+        const blocks = (await this.editor_block.get({ workspace, ids })).filter(
+            block => block?.type === 'comment'
+        ) as ReturnEditorBlock[];
+
+        const replyList = blocks.map(block => {
+            return {
+                id: block.id,
+                workspace: block.workspace,
+                type: block.type,
+                parentId: block.parentId,
+                children: block.children,
+                content: block.properties?.text || [],
+                created: block.created,
+                lastUpdated: block.lastUpdated,
+                creator: block.creator,
+            } as CommentReply;
+        });
+        return replyList;
+    }
+
+    async get({
+        workspace,
+        ids,
+    }: GetEditorBlock): Promise<Array<ReturnEditorBlock | null>> {
+        const blocks = await this.editor_block.get({
+            workspace,
+            ids,
+        });
+        return blocks;
+    }
+
+    async observe(
+        { workspace, id }: DeleteEditorBlock,
+        callback: ObserveCallback
+    ): Promise<ReturnUnobserve> {
+        return await this.editor_block.observe({ workspace, id }, callback);
+    }
+
+    async unobserve({ workspace, id }: DeleteEditorBlock) {
+        await this.editor_block.unobserve({ workspace, id });
+    }
+
+    private async get_root_comment_id({
+        workspace,
+        pageId,
+    }: GetCommentsBlock): Promise<string> {
+        const workspace_db_block = await this.editor_block.getWorkspaceDbBlock(
+            workspace
+        );
+        const workspace_comments: any[] =
+            workspace_db_block.getDecoration(WORKSPACE_COMMENTS) || [];
+        let root_comment = workspace_comments.find(
+            item => item.pageId === pageId
+        );
+        if (!root_comment) {
+            const discussion_block = await this.editor_block.create({
+                workspace: workspace,
+                type: 'comments',
+            });
+            root_comment = {
+                pageId: pageId,
+                rootCommentId: discussion_block.id,
+            };
+            workspace_comments.push(root_comment);
+            workspace_db_block.setDecoration(
+                WORKSPACE_COMMENTS,
+                workspace_comments
+            );
+        }
+        return root_comment.rootCommentId;
+    }
+}
diff --git a/libs/datasource/db-service/src/services/comment/index.ts b/libs/datasource/db-service/src/services/comment/index.ts
new file mode 100644
index 000000000..ff962ed54
--- /dev/null
+++ b/libs/datasource/db-service/src/services/comment/index.ts
@@ -0,0 +1,2 @@
+export * from './comment';
+export * from './types';
diff --git a/libs/datasource/db-service/src/services/comment/types.ts b/libs/datasource/db-service/src/services/comment/types.ts
new file mode 100644
index 000000000..d69206385
--- /dev/null
+++ b/libs/datasource/db-service/src/services/comment/types.ts
@@ -0,0 +1,64 @@
+import { ContentColumnValue, BlockFlavorKeys } from '../index';
+export interface CommentReply {
+    id: string;
+    workspace: string;
+    type: BlockFlavorKeys;
+    parentId?: string;
+    children: string[];
+    content: ContentColumnValue;
+    created: number;
+    lastUpdated: number;
+    creator?: string;
+}
+
+export interface Comment {
+    id: string;
+    workspace: string;
+    type: BlockFlavorKeys;
+    parentId?: string;
+    /** store the block-ids where comment is on,
+     * useful when comment is not page level but on a specific block in page  */
+    attachedToBlocksIds?: string[];
+    children: string[];
+    quote: ContentColumnValue;
+    resolve: boolean;
+    resolveUserId?: string;
+    created: number;
+    lastUpdated: number;
+    creator?: string;
+}
+
+export interface CreateCommentBlock {
+    workspace: string;
+    pageId: string;
+    attachedToBlocksIds?: string[];
+    quote: ContentColumnValue;
+    content: ContentColumnValue;
+}
+
+export interface CreateReplyBlock {
+    workspace: string;
+    parentId: string;
+    content: ContentColumnValue;
+}
+
+export interface UpdateCommentBlock {
+    workspace: string;
+    id: string;
+    pageId?: string;
+    attachedToBlocksIds?: string[];
+    quote?: ContentColumnValue;
+    resolve?: boolean;
+}
+
+export interface UpdateReplyBlock {
+    workspace: string;
+    id: string;
+    content: ContentColumnValue;
+    parentId?: string;
+}
+
+export interface GetCommentsBlock {
+    workspace: string;
+    pageId: string;
+}
diff --git a/libs/datasource/db-service/src/services/database/index.ts b/libs/datasource/db-service/src/services/database/index.ts
new file mode 100644
index 000000000..a7cfe952b
--- /dev/null
+++ b/libs/datasource/db-service/src/services/database/index.ts
@@ -0,0 +1,180 @@
+import { getAuth, type User } from 'firebase/auth';
+
+import {
+    BlockClient,
+    BlockClientInstance,
+    BlockContentExporter,
+    BlockMatcher,
+    BlockInitOptions,
+} from '@toeverything/datasource/jwt';
+import { sleep } from '@toeverything/utils';
+
+import { ObserverManager, getObserverName } from './observer';
+import type { ObserveCallback, ReturnUnobserve } from './observer';
+export type { ObserveCallback, ReturnUnobserve } from './observer';
+
+const workspaces: Record<string, BlockClientInstance> = {};
+
+const loading = new Set();
+
+const waitLoading = async (key: string) => {
+    while (loading.has(key)) {
+        await sleep();
+    }
+};
+
+async function _getCurrentToken() {
+    if (process.env['NX_FREE_LOGIN']) {
+        return 'NX_FREE_LOGIN';
+    }
+    const token = await getAuth().currentUser?.getIdToken();
+    if (token) return token;
+    return new Promise<string>(resolve => {
+        getAuth().onIdTokenChanged((user: User | null) => {
+            if (user) resolve(user.getIdToken());
+        });
+    });
+}
+
+async function _getBlockDatabase(
+    workspace: string,
+    options?: BlockInitOptions
+) {
+    if (loading.has(workspace)) {
+        await waitLoading(workspace);
+    }
+
+    // if (
+    //     options?.userId &&
+    //     workspaces[workspace]?.getUserId() !== options?.userId
+    // ) {
+    //     delete workspaces[workspace];
+    // }
+
+    if (!workspaces[workspace]) {
+        loading.add(workspace);
+
+        workspaces[workspace] = await BlockClient.init(workspace, {
+            ...options,
+            token: await _getCurrentToken(),
+        });
+        (window as any).client = workspaces[workspace];
+        await workspaces[workspace].buildIndex();
+        loading.delete(workspace);
+    }
+    return workspaces[workspace];
+}
+
+interface DatabaseProps {
+    options?: BlockInitOptions;
+}
+
+export class Database {
+    readonly #observers = new ObserverManager();
+
+    readonly #options?: BlockInitOptions;
+    constructor(props: DatabaseProps) {
+        this.#options = props.options;
+    }
+
+    async getDatabase(workspace: string, options?: BlockInitOptions) {
+        const db = await _getBlockDatabase(workspace, options);
+        return db;
+    }
+
+    async registerContentExporter(
+        workspace: string,
+        name: string,
+        matcher: BlockMatcher,
+        exporter: BlockContentExporter
+    ) {
+        const db = await this.getDatabase(workspace);
+        db.registerContentExporter(name, matcher, exporter);
+    }
+
+    async unregisterContentExporter(workspace: string, name: string) {
+        const db = await this.getDatabase(workspace);
+        db.unregisterContentExporter(name);
+    }
+
+    async registerMetadataExporter(
+        workspace: string,
+        name: string,
+        matcher: BlockMatcher,
+        exporter: BlockContentExporter<
+            Array<[string, number | string | string[]]>
+        >
+    ) {
+        const db = await this.getDatabase(workspace);
+        db.registerMetadataExporter(name, matcher, exporter);
+    }
+
+    async unregisterMetadataExporter(workspace: string, name: string) {
+        const db = await this.getDatabase(workspace);
+        db.unregisterMetadataExporter(name);
+    }
+
+    async registerTagExporter(
+        workspace: string,
+        name: string,
+        matcher: BlockMatcher,
+        exporter: BlockContentExporter<string[]>
+    ) {
+        const db = await this.getDatabase(workspace);
+        db.registerTagExporter(name, matcher, exporter);
+    }
+
+    async unregisterTagExporter(workspace: string, name: string) {
+        const db = await this.getDatabase(workspace);
+        db.unregisterTagExporter(name);
+    }
+
+    async observe(
+        workspace: string,
+        blockId: string,
+        callback: ObserveCallback
+    ): Promise<ReturnUnobserve> {
+        const observer_name = getObserverName(workspace, blockId);
+        const unobserve = this.#observers.addCallback(observer_name, callback);
+        if (this.#observers.getStatus(observer_name) === 'observing') {
+            return unobserve;
+        }
+        const db = await this.getDatabase(workspace, this.#options);
+        const block = await db.get(blockId as 'block');
+        if (block) {
+            const listener: Parameters<
+                typeof block['on']
+            >[2] = async states => {
+                const new_block = await db.get(blockId as 'block');
+                this.#observers.getCallbacks(observer_name).forEach(cb => {
+                    cb(states, new_block);
+                });
+            };
+
+            block.on('children', observer_name, listener);
+            block.on('content', observer_name, listener);
+            block.on('parent', observer_name, listener);
+        }
+        this.#observers.setStatus(observer_name, 'observing');
+
+        return unobserve;
+    }
+
+    async unobserve(
+        workspace: string,
+        blockId: string,
+        callback?: ObserveCallback
+    ) {
+        const observer_name = getObserverName(workspace, blockId);
+        this.#observers.removeCallback(observer_name, callback);
+        if (!this.#observers.getCallbacks(observer_name).length) {
+            const db = await this.getDatabase(workspace, this.#options);
+            const block = await db.get(blockId as 'block');
+            if (block) {
+                block.off('children', observer_name);
+                block.off('content', observer_name);
+                block.off('parent', observer_name);
+            }
+        }
+    }
+}
diff --git a/libs/datasource/db-service/src/services/database/observer.ts b/libs/datasource/db-service/src/services/database/observer.ts
new file mode 100644
index 000000000..feabf57d1
--- /dev/null
+++ b/libs/datasource/db-service/src/services/database/observer.ts
@@ -0,0 +1,69 @@
+import { ChangedStates, BlockImplInstance } from '@toeverything/datasource/jwt';
+
+export type ObserveCallback = (
+    changeStates: ChangedStates,
+    block: BlockImplInstance
+) => void;
+export type ReturnUnobserve = () => void;
+
+type ObserverStatus = {
+    status: 'observing' | 'removing' | 'none';
+    callbacks: ObserveCallback[];
+};
+
+export class ObserverManager {
+    private observe_callbacks: Record<string, ObserverStatus | undefined> = {};
+    addCallback(key: string, callback: ObserveCallback) {
+        if (!this.observe_callbacks[key]) {
+            this.observe_callbacks[key] = {
+                status: 'none',
+                callbacks: [],
+            };
+        }
+
+        const observer = this.observe_callbacks[key] as ObserverStatus;
+        observer.callbacks.push(callback);
+        return () => {
+            const index = observer.callbacks.indexOf(callback);
+            if (index > -1) {
+                observer.callbacks.splice(index, 1);
+            }
+        };
+    }
+    removeCallback(key: string, callback?: ObserveCallback) {
+        const observer = this.observe_callbacks[key];
+        if (!observer) {
+            return;
+        }
+        if (callback) {
+            const index = observer.callbacks.indexOf(callback);
+            if (index > -1) {
+                observer.callbacks.splice(index, 1);
+            }
+        } else {
+            observer.callbacks = [];
+        }
+    }
+    getCallbacks(key: string) {
+        return this.observe_callbacks[key]?.callbacks || [];
+    }
+    getStatus(key: string) {
+        return this.observe_callbacks[key]?.status || 'none';
+    }
+    setStatus(key: string, status: 'observing' | 'removing' | 'none') {
+        if (!this.observe_callbacks[key]) {
+            this.observe_callbacks[key] = {
+                status: 'none',
+                callbacks: [],
+            };
+        }
+        (this.observe_callbacks[key] as ObserverStatus).status = status;
+    }
+    removeObserve(key: string) {
+        this.observe_callbacks[key] = undefined;
+    }
+}
+
+export function getObserverName(workspace: string, blockId: string) {
+    return `${workspace}_${blockId}`;
+}
diff --git a/libs/datasource/db-service/src/services/editor-block/index.ts b/libs/datasource/db-service/src/services/editor-block/index.ts
new file mode 100644
index 000000000..3ff930802
--- /dev/null
+++ b/libs/datasource/db-service/src/services/editor-block/index.ts
@@ -0,0 +1,431 @@
+import { diffArrays } from 'diff';
+import { has } from '@toeverything/utils';
+import { ServiceBaseClass } from '../base';
+import type { ReturnUnobserve } from '../database/observer';
+import {
+    CreateEditorBlock,
+    ReturnEditorBlock,
+    GetEditorBlock,
+    UpdateEditorBlock,
+    DeleteEditorBlock,
+    AddColumnProps,
+    RemoveColumnProps,
+    UpdateColumnProps,
+    BlockFlavorKeys,
+} from './types';
+import {
+    dbBlock2BusinessBlock,
+    serializeColumnConfig,
+    deserializeColumnConfig,
+    getOrInitBlockContentColumnsField,
+    addColumn,
+    Column,
+} from './utils';
+import { BlockImplInstance, MapOperation } from '@toeverything/datasource/jwt';
+import { TemplateProperties, Template } from './templates/types';
+export type ObserveCallback = (businessBlock: ReturnEditorBlock) => void;
+export class EditorBlock extends ServiceBaseClass {
+    async create({
+        workspace,
+        type,
+        parentId,
+    }: CreateEditorBlock): Promise<ReturnEditorBlock> {
+        const db = await this.database.getDatabase(workspace);
+        const dbBlock = await db.get(type as 'block');
+        if (parentId) {
+            const parentBlock = await db.get(parentId as 'block');
+            if (parentBlock.id === parentId) {
+                parentBlock.insertChildren(dbBlock);
+            }
+        }
+        // Initialize the columns field of the block
+        getOrInitBlockContentColumnsField(dbBlock);
+        return dbBlock2BusinessBlock({
+            workspace,
+            dbBlock,
+        }) as ReturnEditorBlock;
+    }
+
+    async get({
+        workspace,
+        ids,
+    }: GetEditorBlock): Promise<Array<ReturnEditorBlock | null>> {
+        const blocks = await Promise.all(
+            ids.map(async id => {
+                const block = await this.getBlock(workspace, id);
+                return dbBlock2BusinessBlock({
+                    workspace,
+                    dbBlock: block,
+                });
+            })
+        );
+        return blocks;
+    }
+
+    async getBlockByFlavor(
+        workspace: string,
+        flavor: BlockFlavorKeys
+    ): Promise<string[]> {
+        const db = await this.database.getDatabase(workspace);
+        const keys: string[] = await db.getBlockByFlavor(flavor);
+        return keys;
+    }
+
+    async getUserId(workspace: string): Promise<string> {
+        const db = await this.database.getDatabase(workspace);
+        return db.getUserId();
+    }
+
+    async update(businessBlock: UpdateEditorBlock): Promise<boolean> {
+        const db = await this.database.getDatabase(businessBlock.workspace);
+        if (!businessBlock.id) {
+            return false;
+        }
+        const db_block = await this.getBlock(
+            businessBlock.workspace,
+            businessBlock.id as 'block'
+        );
+        if (!db_block) {
+            return false;
+        }
+        if (
+            has(businessBlock, 'type') &&
+            businessBlock.type !== db_block.flavor
+        ) {
+            db_block.setFlavor(businessBlock.type as 'text');
+        }
+        if (
+            has(businessBlock, 'parentId') &&
+            businessBlock.parentId !== db_block.parent?.id
+        ) {
+            db_block.remove();
+            const parent = await db.get(businessBlock.id as 'block');
+            if (!parent) {
+                return false;
+            }
+            parent.append(db_block);
+        }
+        if (
+            has(businessBlock, 'children') &&
+            businessBlock.children !== db_block.children
+        ) {
+            const patches = diffArrays(
+                db_block.children || [],
+                businessBlock.children || []
+            );
+            let position = 0;
+            for (let i = 0; i < patches.length; i++) {
+                const patch = patches[i];
+                if (patch.added) {
+                    if (patch.value.length) {
+                        for (let i = 0; i < patch.value.length; i++) {
+                            const child = await db.get(
+                                patch.value[i] as 'block'
+                            );
+                            if (child && child.id === patch.value[i]) {
+                                db_block.insertChildren(child, {
+                                    pos: position,
+                                });
+                                position = position + 1;
+                            }
+                        }
+                    }
+                } else if (patch.removed) {
+                    patch.value.forEach(child_id => {
+                        db_block.removeChildren(child_id);
+                    });
+                } else if (patch.count) {
+                    position = position + patch.count;
+                }
+            }
+        }
+
+        const decorations = db_block.getDecorations();
+        Object.entries(businessBlock.properties || {}).forEach(
+            ([key, value]) => {
+                if (decorations[key] !== value) {
+                    db_block.setDecoration(key, value);
+                }
+            }
+        );
+        return true;
+    }
+
+    async delete({ workspace, id }: DeleteEditorBlock): Promise<boolean> {
+        const db = await this.database.getDatabase(workspace);
+        const db_block = await db.get(id as 'block');
+        if (!db_block) {
+            return false;
+        }
+        db_block.remove();
+        return true;
+    }
+    async suspend(workspace: string, flag: boolean): Promise<void> {
+        const db = await this.database.getDatabase(workspace);
+        db.suspend(flag);
+    }
+
+    async addColumn({
+        workspace,
+        blockId,
+        column,
+    }: AddColumnProps): Promise<boolean> {
+        const db_block = await this.getBlock(workspace, blockId);
+        if (!db_block) {
+            return false;
+        }
+        const columns = getOrInitBlockContentColumnsField(db_block);
+        if (!columns) {
+            return false;
+        }
+        addColumn({
+            block: db_block,
+            columns,
+            columnConfig: column,
+        });
+        return true;
+    }
+
+    async updateColumn({
+        workspace,
+        blockId,
+        columnId,
+        column,
+    }: UpdateColumnProps): Promise<boolean> {
+        const db_block = await this.getBlock(workspace, blockId);
+        if (!db_block) {
+            return false;
+        }
+        const columns = getOrInitBlockContentColumnsField(db_block);
+        if (!columns) {
+            return false;
+        }
+        const old_column = columns.find<MapOperation<string>>(col => {
+            // @ts-ignore TODO: don't know why
+            return col.get('id') === columnId;
+        });
+        if (!old_column) {
+            return false;
+        }
+        const column_config = {
+            // @ts-ignore TODO: don't know why
+            ...deserializeColumnConfig(old_column?.get('config') as string),
+            ...column,
+        };
+        old_column?.set(
+            'config',
+            // @ts-ignore TODO: don't know why
+            serializeColumnConfig(column_config as Column)
+        );
+        return true;
+    }
+
+    async removeColumn({
+        workspace,
+        blockId,
+        columnId,
+    }: RemoveColumnProps): Promise<boolean> {
+        const db_block = await this.getBlock(workspace, blockId);
+        if (!db_block) {
+            return false;
+        }
+        const columns = getOrInitBlockContentColumnsField(db_block);
+        if (columns?.length) {
+            // @ts-ignore TODO: don't know why
+            const idx = columns?.findIndex(col => col.get('id') === columnId);
+            if (idx > -1) {
+                columns.delete(idx, 1);
+            }
+        }
+        return true;
+    }
+    private async decorate_page_title(
+        page_block: BlockImplInstance,
+        prefix: string
+    ) {
+        const text = page_block.getDecoration('text');
+        if (page_block && text) {
+            const new_text = JSON.parse(JSON.stringify(text));
+            //@ts-ignore
+            new_text.value[0].text = prefix + new_text.value[0].text;
+            page_block.setDecoration('text', new_text);
+        }
+    }
+    private async update_page_title(
+        pageBlock: BlockImplInstance,
+        title: string
+    ) {
+        if (title) {
+            pageBlock.setDecoration('text', { value: [{ text: title }] });
+        }
+    }
+    async copyPage(
+        workspace_id: string,
+        source_page_id: string,
+        new_page_id: string
+    ): Promise<boolean> {
+        const db = await this.database.getDatabase(workspace_id);
+
+        const source_page = await this.getBlock(
+            workspace_id,
+            source_page_id as 'block'
+        );
+        const new_page = await this.getBlock(
+            workspace_id,
+            new_page_id as 'block'
+        );
+        if (!source_page) {
+            return false;
+        }
+        const source_page_children = source_page.children;
+        const decorations = source_page.getDecorations();
+        Object.entries(decorations).forEach(([key, value]) => {
+            new_page?.setDecoration(key, source_page.getDecoration(key));
+        });
+
+        //@ts-ignore
+        this.decorate_page_title(new_page, 'copy from ');
+
+        for (let i = 0; i < source_page_children.length; i++) {
+            const source_page_child = await db.get(
+                source_page_children[i] as 'block'
+            );
+            new_page?.insertChildren(source_page_child);
+        }
+        return true;
+    }
+    async copyTemplateToPage(
+        workspace: string,
+        sourcePageId: string,
+        templateData: Template
+    ) {
+        const db = await this.database.getDatabase(workspace);
+        const sourcePage = await this.getBlock(
+            workspace,
+            sourcePageId as 'block'
+        );
+
+        if (!sourcePage) {
+            return false;
+        }
+        if (templateData.properties && templateData.properties.text) {
+            this.update_page_title(
+                sourcePage,
+                templateData.properties.text?.value[0].text
+            );
+        }
+
+        this.update_block_properies(sourcePage, templateData.properties);
+        if (!templateData.blocks) return false;
+        for (let i = 0; i < templateData.blocks.length; i++) {
+            const blockData = templateData.blocks[i];
+            const sourcPageChild = await db.get(blockData.type as 'block');
+
+            this.update_block_properies(sourcPageChild, blockData.properties);
+
+            sourcePage?.insertChildren(sourcPageChild);
+
+            await this.copyTemplateToBlocks(
+                workspace,
+                sourcPageChild.id,
+                blockData
+            );
+        }
+        return true;
+    }
+    private update_block_properies(
+        block: BlockImplInstance,
+        properties: TemplateProperties
+    ) {
+        Object.entries(properties).forEach(([key, value]) => {
+            block.setDecoration(key, value);
+        });
+    }
+    async copyTemplateToBlocks(
+        workspace: string,
+        parentBlockId: string,
+        template: Template
+    ) {
+        const db = await this.database.getDatabase(workspace);
+        const parentBlock = await this.getBlock(
+            workspace,
+            parentBlockId as 'block'
+        );
+
+        if (!parentBlock) {
+            return false;
+        }
+        if (!template.blocks) return true;
+        for (let i = 0; i < template.blocks.length; i++) {
+            const blockData = template.blocks[i];
+            const sourcPageChild = await db.get(blockData.type as 'block');
+
+            this.update_block_properies(sourcPageChild, blockData.properties);
+
+            parentBlock?.insertChildren(sourcPageChild);
+            if (blockData.blocks) {
+                this.copyTemplateToBlocks(
+                    workspace,
+                    sourcPageChild.id,
+                    blockData
+                );
+            }
+        }
+        return true;
+    }
+    async observe(
+        { workspace, id }: DeleteEditorBlock,
+        callback: ObserveCallback
+    ): Promise<ReturnUnobserve> {
+        return await this._observe(workspace, id, async (states, block) => {
+            callback(
+                dbBlock2BusinessBlock({
+                    workspace,
+                    dbBlock: block,
+                }) as ReturnEditorBlock
+            );
+        });
+    }
+
+    async unobserve({ workspace, id }: DeleteEditorBlock) {
+        await this._unobserve(workspace, id);
+    }
+}
+
+export type {
+    CreateEditorBlock,
+    ReturnEditorBlock,
+    GetEditorBlock,
+    UpdateEditorBlock,
+    DeleteEditorBlock,
+    BlockFlavors,
+    BlockFlavorKeys,
+} from './types';
+
+export type {
+    Column,
+    ContentColumn,
+    NumberColumn,
+    EnumColumn,
+    DateColumn,
+    BooleanColumn,
+    FileColumn,
+    DefaultColumnsValue,
+    ContentColumnValue,
+    NumberColumnValue,
+    EnumColumnValue,
+    BooleanColumnValue,
+    DateColumnValue,
+    FileColumnValue,
+    StringColumnValue,
+} from './utils/column';
+export {
+    ColumnType,
+    isBooleanColumn,
+    isContentColumn,
+    isDateColumn,
+    isFileColumn,
+    isNumberColumn,
+    isEnumColumn,
+    isStringColumn,
+} from './utils/column';
diff --git a/libs/datasource/db-service/src/services/editor-block/templates/group-templates.ts b/libs/datasource/db-service/src/services/editor-block/templates/group-templates.ts
new file mode 100644
index 000000000..b7b27ef00
--- /dev/null
+++ b/libs/datasource/db-service/src/services/editor-block/templates/group-templates.ts
@@ -0,0 +1,604 @@
+//@ts-nocheck
+import { GroupTemplate } from './types';
+type GroupTemplateMap = Record<GroupTemplateKeys, GroupTemplate>;
+const groupTemplateMap: GroupTemplateMap = {
+    empty: {
+        type: 'group',
+        properties: {},
+        blocks: [
+            {
+                type: 'text',
+                properties: {
+                    text: {
+                        value: [{ text: '' }],
+                    },
+                },
+                blocks: [],
+            },
+        ],
+    },
+    todolist: {
+        type: 'group',
+        properties: {},
+        blocks: [
+            {
+                type: 'heading1',
+                properties: {
+                    text: {
+                        value: [{ text: '🎓Graduating from the project' }],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'todo',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: 'Congratulations! Now you can start create your own projects!',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'todo',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: 'To start using workspaces and folders hit the ',
+                            },
+                            {
+                                bold: true,
+                                text: 'button at the top left of the screen',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'todo',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: '',
+                            },
+                            {
+                                text: 'At any time if you feel lost do visit our 📚Blog: ',
+                            },
+                            {
+                                type: 'link',
+                                url: 'https://blog.affine.pro/',
+                                id: 'link.qx4yhw81or54',
+                                children: [
+                                    {
+                                        text: 'https://blog.affine.pro',
+                                    },
+                                ],
+                            },
+                            {
+                                text: '',
+                            },
+                        ],
+                    },
+                    collapsed: {
+                        value: false,
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'todo',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: '',
+                            },
+                            {
+                                text: 'If you have any suggestions drop a post in our Reddit Channel：',
+                            },
+                            {
+                                type: 'link',
+                                url: 'https://www.reddit.com/r/Affine/',
+                                id: 'link.zeafc4ogfvrb',
+                                children: [
+                                    {
+                                        text: 'https://www.reddit.com/r/Affine/',
+                                    },
+                                ],
+                            },
+                            {
+                                text: ' ',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'heading2',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: '🎉 The Essentials. Check things off after you tried them!',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'todo',
+                properties: {
+                    text: {
+                        value: [
+                            { text: ' ✅ ' },
+                            { bold: true, text: 'Check' },
+                            {
+                                text: ' the text box here to complete the task!',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'todo',
+                properties: {
+                    text: {
+                        value: [
+                            { text: '' },
+                            { text: '' },
+                            { text: ' 👋 ' },
+                            { bold: true, text: 'Drag' },
+                            {
+                                text: ' the ⠟ button left of the checkbox to reorder tasks',
+                            },
+                            { text: '' },
+                            { text: '' },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'todo',
+                properties: {
+                    text: {
+                        value: [
+                            { text: '' },
+                            { text: '' },
+                            { text: ' ➡️ ' },
+                            { bold: true, text: 'Fold' },
+                            { text: ' and ' },
+                            { bold: true, text: 'Unfold' },
+                            {
+                                text: ' a task to simplify your list using the arrow on the right ⤵️',
+                            },
+                        ],
+                    },
+                    numberType: 'type1',
+                    collapsed: { value: false },
+                },
+                blocks: [
+                    {
+                        type: 'figma',
+                        properties: {
+                            embedLink: {
+                                value: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2F7pyx5gMz6CN0qSRADmScQ7%2FAFFINE%3Fnode-id%3D40%253A2',
+                                name: 'figma',
+                            },
+                        },
+                        blocks: [],
+                    },
+                ],
+            },
+        ],
+    },
+    blog: {
+        type: 'group',
+        properties: {},
+        blocks: [
+            {
+                type: 'text',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: 'As a collaborative real-time editor, Affine aims to resolve problems in three situations:',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'bullet',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: 'Multi-master replication: the synchronization of data between equipment and applications;',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'bullet',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: 'Eventual consistency: the consistence of data regardless of network latency and outage;',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'bullet',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: 'Conflict resolution: the resolution of conflict between simultaneous edits.',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'text',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: 'To achieve these aims, a proper collaborative algorithm should be used. There are hundreds of collaborative algorithms being invented over the past three decades, but they usually fall into two categories: either operational transformation (OT) or conflict-free replicated data type (CRDT). We think CRDT is a better choice.',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'heading1',
+                properties: {
+                    text: {
+                        value: [{ bold: true, text: 'What does CRDT do' }],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'text',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: 'CRDT is capable of discovering and resolving conflicts while ensuring the effective distribution and merge of date. It may sound like magic, but think about historical study, it is very possible to discover the truth from scattered evidence.',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'text',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: 'For CRDT, every piece of data is like a "historic fragment". We keep collecting the fragments from other clients and then restore the truth by excluding repeated data and correcting false information.',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'heading1',
+                properties: {
+                    text: {
+                        value: [{ bold: true, text: 'Why CRDT is better' }],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'text',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: 'In contrast to OT, CRDT possesses three big advantages:',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'heading2',
+                properties: {
+                    text: {
+                        value: [{ bold: true, text: 'Flexibility' }],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'text',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: 'CRDT supports more data types. For example, Yjs supports Array, Map, and Treelike, and therefore applies to more business scenarios.',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'heading2',
+                properties: {
+                    text: {
+                        value: [{ bold: true, text: 'Performance' }],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'text',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: 'CRDT tolerates higher latency and can wait longer for solving conflicts, whereas the calculation of OT in the same condition may become too overwhelming for a server to sustain.',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'heading2',
+                properties: {
+                    text: {
+                        value: [{ bold: true, text: 'Extensibility' }],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'text',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: 'Because CRDT supports more data types and editor elements, it is more extensible.',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'heading1',
+                properties: {
+                    text: { value: [{ text: 'Conclusion' }] },
+                },
+                blocks: [],
+            },
+            {
+                type: 'text',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: 'Collaborative algorithm is still a foreign concept for many developers. There are some introductions to it, but as to how it shall be used, there is still lack of clear explanation. I hope this article helps. If you also work for a startup company and want some suggestions, CRDT, especially Yjs, should be a better choice.',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'text',
+                properties: { text: { value: [{ text: '' }] } },
+                blocks: [],
+            },
+            {
+                type: 'text',
+                properties: {
+                    text: {
+                        value: [
+                            { text: '' },
+                            {
+                                type: 'link',
+                                url: 'https://blog.affine.pro/',
+                                id: 'link.stubssslo0rq',
+                                children: [{ text: '← View all posts' }],
+                            },
+                            { text: '' },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+        ],
+    },
+    grid: {
+        type: 'group',
+        properties: {},
+        blocks: [
+            {
+                type: 'heading2',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                bold: true,
+                                text: 'Performance',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'text',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: 'CRDT tolerates higher latency and can wait longer for solving conflicts, whereas the calculation of OT in the same condition may become too overwhelming for a server to sustain.',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'heading2',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                bold: true,
+                                text: 'Extensibility',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'text',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: 'Because CRDT supports more data types and editor elements, it is more extensible.',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'heading1',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: 'Conclusion',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'grid',
+                properties: {},
+                blocks: [
+                    {
+                        type: 'gridItem',
+                        properties: {
+                            gridItemWidth: '50%',
+                        },
+                        blocks: [
+                            {
+                                type: 'text',
+                                properties: {
+                                    text: {
+                                        value: [
+                                            {
+                                                text: 'Collaborative algorithm is still a foreign concept for many developers. There are some introductions to it, but as to how it shall be used, there is still lack of clear explanation. I hope this article helps. If you also work for a startup company and want some suggestions, CRDT, especially Yjs, should be a better choice.',
+                                            },
+                                        ],
+                                    },
+                                },
+                                blocks: [],
+                            },
+                        ],
+                    },
+                    {
+                        type: 'gridItem',
+                        properties: {
+                            gridItemWidth: '50%',
+                        },
+                        blocks: [
+                            {
+                                type: 'text',
+                                properties: {
+                                    text: {
+                                        value: [
+                                            {
+                                                text: 'Collaborative algorithm is still a foreign concept for many developers. There are some introductions to it, but as to how it shall be used, there is still lack of clear explanation. I hope this article helps. If you also work for a startup company and want some suggestions, CRDT, especially Yjs, should be a better choice.',
+                                            },
+                                        ],
+                                    },
+                                },
+                                blocks: [],
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                type: 'text',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: '',
+                            },
+                        ],
+                    },
+                },
+                blocks: [],
+            },
+            {
+                type: 'text',
+                properties: {
+                    text: {
+                        value: [
+                            {
+                                text: '',
+                            },
+                            {
+                                type: 'link',
+                                url: 'https://blog.affine.pro/',
+                                id: 'link.stubssslo0rq',
+                                children: [
+                                    {
+                                        text: '← View all posts',
+                                    },
+                                ],
+                            },
+                            {
+                                text: '',
+                            },
+                        ],
+                    },
+                },
+            },
+        ],
+    },
+};
+
+export type GroupTemplateKeys = 'todolist' | 'blog' | 'empty' | 'grid';
+export { groupTemplateMap };
diff --git a/libs/datasource/db-service/src/services/editor-block/templates/index.ts b/libs/datasource/db-service/src/services/editor-block/templates/index.ts
new file mode 100644
index 000000000..a4e0e8230
--- /dev/null
+++ b/libs/datasource/db-service/src/services/editor-block/templates/index.ts
@@ -0,0 +1,3 @@
+export { TemplateFactory } from './template-factory';
+
+export * from './types';
diff --git a/libs/datasource/db-service/src/services/editor-block/templates/template-factory.ts b/libs/datasource/db-service/src/services/editor-block/templates/template-factory.ts
new file mode 100644
index 000000000..5a381b175
--- /dev/null
+++ b/libs/datasource/db-service/src/services/editor-block/templates/template-factory.ts
@@ -0,0 +1,40 @@
+import { groupTemplateMap } from './group-templates';
+import { Template, TemplateMeta } from './types';
+const defaultTemplateList: Array<TemplateMeta> = [
+    {
+        name: 'New From Quick Start',
+        groupKeys: ['todolist'],
+    },
+    { name: 'New From Grid System', groupKeys: ['grid'] },
+    { name: 'New From Blog', groupKeys: ['blog'] },
+    { name: ' New Todolist', groupKeys: ['todolist'] },
+    { name: ' New Empty Page', groupKeys: ['empty'] },
+];
+const TemplateFactory = {
+    defaultTemplateList: defaultTemplateList,
+    generatePageTemplateByGroupKeys(props: TemplateMeta): Template {
+        const newTitle = props.name || 'Get Started with Affine';
+        const keys = props.groupKeys || [];
+        const blankPage: Template = {
+            type: 'page',
+            properties: {
+                text: { value: [{ text: newTitle }] },
+                fullWidthChecked: false,
+            },
+            blocks: [],
+        };
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            if (key in groupTemplateMap) {
+                blankPage.blocks = blankPage.blocks || [];
+                if (groupTemplateMap[key]) {
+                    blankPage.blocks.push(groupTemplateMap[key]);
+                }
+            }
+        }
+
+        return blankPage;
+    },
+};
+
+export { TemplateFactory };
diff --git a/libs/datasource/db-service/src/services/editor-block/templates/types.ts b/libs/datasource/db-service/src/services/editor-block/templates/types.ts
new file mode 100644
index 000000000..54b680adf
--- /dev/null
+++ b/libs/datasource/db-service/src/services/editor-block/templates/types.ts
@@ -0,0 +1,25 @@
+import { DefaultColumnsValue, BlockFlavorKeys } from './../index';
+import { groupTemplateMap, GroupTemplateKeys } from './group-templates';
+
+// interface Block {
+//     type: BlockFlavorKeys;
+//     properties: Partial<DefaultColumnsValue>;
+// }
+export type TemplateProperties = Partial<DefaultColumnsValue>;
+export interface Template {
+    type: BlockFlavorKeys;
+    properties: TemplateProperties;
+    blocks?: Template[];
+}
+
+export interface GroupTemplate {
+    type: BlockFlavorKeys;
+    properties: TemplateProperties;
+    blocks?: Template[];
+}
+export interface TemplateMeta {
+    name: string | null;
+    groupKeys: Array<GroupTemplateKeys> | [];
+}
+
+// export { Template, TemplateProperties };
diff --git a/libs/datasource/db-service/src/services/editor-block/types.ts b/libs/datasource/db-service/src/services/editor-block/types.ts
new file mode 100644
index 000000000..e2bb7922b
--- /dev/null
+++ b/libs/datasource/db-service/src/services/editor-block/types.ts
@@ -0,0 +1,75 @@
+import { Protocol } from '../../protocol';
+import { Column, DefaultColumnsValue } from './utils/column';
+
+export type BlockFlavors = typeof Protocol.Block.Type;
+export type BlockFlavorKeys = keyof typeof Protocol.Block.Type;
+
+export interface CreateEditorBlock {
+    workspace: string;
+    type: keyof BlockFlavors;
+    parentId?: string;
+}
+
+export interface ReturnEditorBlock {
+    id: string;
+    workspace: string;
+    type: BlockFlavorKeys;
+    parentId?: string;
+    pageId?: string;
+    closestGroupId?: string;
+    columns?: Column[];
+    children: string[];
+    properties?: Partial<DefaultColumnsValue>;
+    created: number;
+    lastUpdated: number;
+    creator?: string;
+}
+
+export interface GetEditorBlock {
+    ids: string[];
+    workspace: string;
+}
+
+export interface UpdateEditorBlock
+    extends Partial<
+        Pick<ReturnEditorBlock, 'type' | 'parentId' | 'children' | 'properties'>
+    > {
+    id: string;
+    workspace: string;
+}
+
+export interface DeleteEditorBlock {
+    id: string;
+    workspace: string;
+}
+
+export interface AddColumnProps {
+    workspace: string;
+    /**
+     * block id
+     * Support group, page block setting columns
+     */
+    blockId: string;
+    column: Column;
+}
+
+export interface UpdateColumnProps {
+    workspace: string;
+    /**
+     * block id
+     * Support group, page block setting columns
+     */
+    blockId: string;
+    columnId: string;
+    column: Partial<Column>;
+}
+
+export interface RemoveColumnProps {
+    workspace: string;
+    /**
+     * block id
+     * Support group, page block setting columns
+     */
+    blockId: string;
+    columnId: string;
+}
diff --git a/libs/datasource/db-service/src/services/editor-block/utils/column/default-config.ts b/libs/datasource/db-service/src/services/editor-block/utils/column/default-config.ts
new file mode 100644
index 000000000..2577c94ce
--- /dev/null
+++ b/libs/datasource/db-service/src/services/editor-block/utils/column/default-config.ts
@@ -0,0 +1,192 @@
+import {
+    Column,
+    ColumnType,
+    ContentColumnValue,
+    BooleanColumnValue,
+    StringColumnValue,
+    FileColumnValue,
+    DateColumnValue,
+    EnumColumnValue,
+    CommentColumnValue,
+    FilterConstraint,
+    SorterConstraint,
+} from './types';
+
+export enum GroupScene {
+    page = 'page',
+    table = 'table',
+    kanban = 'kanban',
+    whiteboard = 'whiteboard',
+}
+
+/**
+ * @deprecated
+ */
+export enum BlockStatus {
+    notStart = 'notStart',
+    progress = 'progress',
+    done = 'done',
+}
+
+/**
+ * @deprecated
+ */
+export type DefaultColumnsValue = {
+    scene: string;
+    visibleColumnKeys: EnumColumnValue;
+    shapeProps: StringColumnValue;
+    text: ContentColumnValue;
+    textStyle: Record<'textAlign', string>;
+    checked: BooleanColumnValue;
+    collapsed: BooleanColumnValue;
+    embedLink: StringColumnValue;
+    image: FileColumnValue;
+    file: FileColumnValue;
+    endDate: DateColumnValue;
+    status: EnumColumnValue<BlockStatus>;
+    gridItemWidth: string;
+    reference: string;
+    numberType: any;
+    image_style: any;
+    lang: any;
+    fullWidthChecked: boolean;
+    comment: CommentColumnValue;
+    filterConstraint: FilterConstraint;
+    filterWeakSqlConstraint: string;
+    sorterConstraint: SorterConstraint;
+};
+
+export const DEFAULT_COLUMN_KEYS = {
+    Text: 'text',
+    Checked: 'checked',
+} as const;
+
+/**
+ * @deprecated
+ */
+export const DEFAULT_COLUMNS: Column[] = [
+    /** System internal variables */ {
+        // Display mode of group / page
+        name: 'Scene',
+        type: ColumnType.enum,
+        key: 'scene',
+        multiple: 1,
+        options: [
+            { id: 'todo', name: 'Todo List', value: GroupScene.page },
+            { id: 'page', name: 'Table', value: GroupScene.table },
+        ],
+        innerColumn: true,
+    },
+    {
+        // block selected displayed columns
+        name: 'visibleColumnKeys',
+        type: ColumnType.enum,
+        key: 'scene',
+        multiple: 1,
+        /**
+         * All columns that the user can see, empty means unlimited options
+         */
+        options: [],
+        innerColumn: true,
+    },
+    {
+        name: 'collapsed',
+        type: ColumnType.boolean,
+        key: 'collapsed',
+        innerColumn: true,
+    },
+    {
+        name: 'shapeProps',
+        type: ColumnType.string,
+        key: 'shapeProps',
+        mode: 'text',
+        innerColumn: true,
+    },
+    {
+        // text content
+        name: 'Content',
+        type: ColumnType.content,
+        key: DEFAULT_COLUMN_KEYS.Text,
+    },
+    {
+        name: 'Status',
+        type: ColumnType.enum,
+        key: 'status',
+        options: [
+            {
+                id: 'notStart',
+                name: 'Not Start',
+                value: BlockStatus.notStart,
+                color: '#E53535',
+                background: '#FFCECE',
+            },
+            {
+                id: 'progress',
+                name: 'Progress',
+                value: BlockStatus.progress,
+                color: '#A77F1A',
+                background: '#FFF5AB',
+            },
+            {
+                id: 'done',
+                name: 'Done',
+                value: BlockStatus.done,
+                color: '#3C8867',
+                background: '#C5FBE0',
+            },
+        ],
+        multiple: 1,
+        innerColumn: true,
+    },
+    {
+        name: 'Checked',
+        type: ColumnType.boolean,
+        key: DEFAULT_COLUMN_KEYS.Checked,
+        options: [
+            { id: 'checked', name: 'checked', value: true },
+            { id: 'unChecked', name: 'unChecked', value: false },
+        ],
+        sorter: true,
+    },
+    {
+        name: 'Embed Link',
+        type: ColumnType.string,
+        key: 'embedLink',
+        mode: 'url',
+        supportAsTag: true,
+        innerColumn: true,
+    },
+    {
+        name: 'Image',
+        type: ColumnType.file,
+        key: 'image',
+        accept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
+        multiple: 1,
+        supportAsTag: true,
+        innerColumn: true,
+    },
+    {
+        name: 'File',
+        type: ColumnType.file,
+        key: 'file',
+        multiple: 1,
+        supportAsTag: true,
+        innerColumn: true,
+    },
+    {
+        name: 'Start Date',
+        type: ColumnType.date,
+        key: 'startDate',
+        format: 'YYYY-MM-dd HH:mm:ss',
+        supportAsTag: true,
+        innerColumn: true,
+    },
+    {
+        name: 'End Date',
+        type: ColumnType.date,
+        key: 'endDate',
+        format: 'YYYY-MM-dd HH:mm:ss',
+        supportAsTag: true,
+        innerColumn: true,
+    },
+];
diff --git a/libs/datasource/db-service/src/services/editor-block/utils/column/index.ts b/libs/datasource/db-service/src/services/editor-block/utils/column/index.ts
new file mode 100644
index 000000000..25809f8b0
--- /dev/null
+++ b/libs/datasource/db-service/src/services/editor-block/utils/column/index.ts
@@ -0,0 +1,117 @@
+import { nanoid } from 'nanoid';
+import {
+    BlockImplInstance,
+    MapOperation,
+    ArrayOperation,
+} from '@toeverything/datasource/jwt';
+import type { Column } from './types';
+import { DEFAULT_COLUMNS } from './default-config';
+export const serializeColumnConfig = (column: Column): string => {
+    // TODO: Do the type check of the column parameter here
+    return JSON.stringify(column);
+};
+
+export const deserializeColumnConfig = (config: string): Column => {
+    // TODO: do the column check here
+    return JSON.parse(config) as Column;
+};
+
+/**
+ * Support for adding column blocks
+ */
+const SUPPORT_COLUMN_FLAVORS = ['group', 'page'];
+
+interface AddColumnProps {
+    block: BlockImplInstance;
+    columns: ArrayOperation<MapOperation<string>>;
+    columnConfig: Column;
+}
+
+export const addColumn = ({ block, columns, columnConfig }: AddColumnProps) => {
+    const content = block.getContent();
+
+    const column_id = nanoid(16);
+    const config = serializeColumnConfig({
+        ...columnConfig,
+        id: column_id,
+    });
+
+    const db_column = content.createMap<string>();
+    // @ts-ignore TODO: don't know why
+    db_column.set('id', column_id);
+    // @ts-ignore TODO: don't know why
+    db_column.set('config', config);
+    columns?.insert(columns.length, [db_column]);
+};
+
+/**
+ * @deprecated
+ */
+export const getOrInitBlockContentColumnsField = (
+    block: BlockImplInstance
+): ArrayOperation<MapOperation<string>> | undefined => {
+    if (!SUPPORT_COLUMN_FLAVORS.includes(block.flavor)) {
+        return undefined;
+    }
+    const content = block.getContent();
+    if (!content.has('columns')) {
+        const columns = content.createArray();
+        content.set('columns', columns);
+        DEFAULT_COLUMNS.forEach(col => {
+            addColumn({
+                block,
+                columns: columns.asArray() as ArrayOperation<
+                    MapOperation<string>
+                >,
+                columnConfig: col,
+            });
+        });
+    }
+    return content.get('columns')?.asArray();
+};
+
+export const getBlockColumns = (
+    block: BlockImplInstance
+): Column[] | undefined => {
+    const columns = getOrInitBlockContentColumnsField(block)?.map<Column>(
+        column => {
+            const config_string = column.get('config') as unknown as string;
+            return {
+                id: column.get('id'),
+                ...(config_string
+                    ? deserializeColumnConfig(config_string)
+                    : {}),
+            } as Column;
+        }
+    );
+    return columns;
+};
+
+export type {
+    Column,
+    ContentColumn,
+    NumberColumn,
+    EnumColumn,
+    DateColumn,
+    BooleanColumn,
+    FileColumn,
+    ContentColumnValue,
+    NumberColumnValue,
+    EnumColumnValue,
+    BooleanColumnValue,
+    DateColumnValue,
+    FileColumnValue,
+    StringColumnValue,
+} from './types';
+export { ColumnType } from './types';
+export type { DefaultColumnsValue } from './default-config';
+
+export {
+    isContentColumn,
+    isDateColumn,
+    isFileColumn,
+    isNumberColumn,
+    isEnumColumn,
+    isStringColumn,
+    isBooleanColumn,
+} from './utils';
diff --git a/libs/datasource/db-service/src/services/editor-block/utils/column/types.ts b/libs/datasource/db-service/src/services/editor-block/utils/column/types.ts
new file mode 100644
index 000000000..d5c15ebaa
--- /dev/null
+++ b/libs/datasource/db-service/src/services/editor-block/utils/column/types.ts
@@ -0,0 +1,204 @@
+/** Column */
+import type { CSSProperties } from 'react';
+
+export enum ColumnType {
+    /**
+     * the content of the text base block
+     */
+    content = 'content',
+    number = 'number',
+    enum = 'enum',
+    date = 'date',
+    boolean = 'boolean',
+    file = 'file',
+    string = 'string',
+}
+interface BaseColumn {
+    id?: string;
+    name: string;
+    /**
+     * key when assigning
+     */
+    key: string;
+    /**
+     * Properties used by the program, not as the display column of the Table
+     * @deprecated
+     */
+    innerColumn?: boolean;
+    /**
+     * Whether to support adding to the tag below the block
+     */
+    supportAsTag?: boolean;
+}
+export interface ContentColumn extends BaseColumn {
+    type: ColumnType.content;
+}
+
+export interface NumberColumn extends BaseColumn {
+    type: ColumnType.number;
+    /** not implemented */
+    format: 'number' | 'percent';
+}
+
+export interface SelectOption {
+    id: string;
+    name: string;
+    background?: string;
+    value: string | boolean;
+    color?: string;
+}
+
+export interface EnumColumn extends BaseColumn {
+    type: ColumnType.enum;
+    options: SelectOption[];
+    /**
+     * Limit the number of choices, if it is 1, it is a single choice
+     */
+    multiple: number;
+}
+
+export interface DateColumn extends BaseColumn {
+    type: ColumnType.date;
+    /**
+     * Date format, such as: YYYY-MM-DD hh:mm:ss
+     *ref: https://date-fns.org/v2.28.0/docs/format
+     */
+    format: string;
+}
+
+export interface BooleanColumn extends BaseColumn {
+    type: ColumnType.boolean;
+    options?: SelectOption[];
+    sorter?: boolean;
+}
+
+export interface FileColumn extends BaseColumn {
+    type: ColumnType.file;
+    /**
+     *ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
+     */
+    accept?: string;
+    /**
+     * Limit the number of choices, you can only choose one at a time, you can choose multiple times
+     */
+    multiple: number;
+}
+
+export interface StringColumn extends BaseColumn {
+    type: ColumnType.string;
+    mode: 'text' | 'url';
+}
+
+/**
+ * @deprecated
+ */
+export type Column =
+    | ContentColumn
+    | NumberColumn
+    | EnumColumn
+    | DateColumn
+    | BooleanColumn
+    | FileColumn
+    | StringColumn;
+
+/**
+ * ColumnValue
+ * @deprecated
+ */
+export interface ContentColumnValue {
+    value: Array<{ text: string; bold?: boolean }>;
+}
+
+/**
+ * @deprecated
+ */
+export interface NumberColumnValue {
+    value: number;
+}
+
+/**
+ * @deprecated
+ */
+export interface EnumColumnValue<T = string> {
+    value: T[];
+}
+
+/**
+ * @deprecated
+ */
+type Timestamp = number;
+
+/**
+ * @deprecated
+ */
+export interface DateColumnValue {
+    value: Timestamp;
+}
+
+/**
+ * @deprecated
+ */
+export interface BooleanColumnValue {
+    value: boolean;
+}
+
+/**
+ * @deprecated
+ */
+type FileBlockId = string;
+
+/**
+ * @deprecated
+ */
+type UrlString = string;
+
+/**
+ * @deprecated
+ */
+export interface FileColumnValue {
+    value: FileBlockId;
+    url?: UrlString;
+    name: string;
+    /**
+     * the size of the file in bytes
+     */
+    size: number;
+    /**
+     * ref file.type: https://developer.mozilla.org/en-US/docs/Web/API/File
+     */
+    type: string;
+    height?: number;
+    width?: number;
+}
+
+/**
+ * @deprecated
+ */
+export interface StringColumnValue {
+    value: string;
+    name?: string;
+}
+
+export interface CommentColumnValue {
+    pageId: string;
+    attachedToBlocksIds?: string[];
+    resolve: boolean;
+    resolveUserId?: string;
+    finishTime?: number;
+}
+export type FilterConstraint = Array<{
+    key: string;
+    checked: boolean;
+    type: string;
+    fieldValue: string;
+    opSelectValue: string;
+    valueSelectValue:
+        | string
+        | string[]
+        | { title?: string; value?: string | boolean }[];
+}>;
+
+export type SorterConstraint = Array<{
+    field: string;
+    rule: string;
+}>;
diff --git a/libs/datasource/db-service/src/services/editor-block/utils/column/utils.ts b/libs/datasource/db-service/src/services/editor-block/utils/column/utils.ts
new file mode 100644
index 000000000..77822235a
--- /dev/null
+++ b/libs/datasource/db-service/src/services/editor-block/utils/column/utils.ts
@@ -0,0 +1,38 @@
+import type {
+    Column,
+    ContentColumn,
+    StringColumn,
+    NumberColumn,
+    EnumColumn,
+    DateColumn,
+    FileColumn,
+    BooleanColumn,
+} from './types';
+
+export const isContentColumn = (column: Column): column is ContentColumn => {
+    return column.type === 'content';
+};
+
+export const isStringColumn = (column: Column): column is StringColumn => {
+    return column.type === 'string';
+};
+
+export const isNumberColumn = (column: Column): column is NumberColumn => {
+    return column.type === 'number';
+};
+
+export const isEnumColumn = (column: Column): column is EnumColumn => {
+    return column.type === 'enum';
+};
+
+export const isDateColumn = (column: Column): column is DateColumn => {
+    return column.type === 'date';
+};
+
+export const isFileColumn = (column: Column): column is FileColumn => {
+    return column.type === 'file';
+};
+
+export const isBooleanColumn = (column: Column): column is BooleanColumn => {
+    return column.type === 'boolean';
+};
diff --git a/libs/datasource/db-service/src/services/editor-block/utils/common.ts b/libs/datasource/db-service/src/services/editor-block/utils/common.ts
new file mode 100644
index 000000000..87bc6af55
--- /dev/null
+++ b/libs/datasource/db-service/src/services/editor-block/utils/common.ts
@@ -0,0 +1,58 @@
+import { BlockImplInstance } from '@toeverything/datasource/jwt';
+
+type Condition = (block: BlockImplInstance | undefined) => boolean;
+/**
+ * Find the block closest to the block up
+ * @param block
+ * @param condition conditional function, return true to indicate found
+ * @returns
+ */
+export const getClosestBlock = (
+    block: BlockImplInstance,
+    condition: Condition
+): BlockImplInstance | undefined => {
+    let group: BlockImplInstance | undefined = block;
+    while (!condition(group)) {
+        group = group?.parent;
+    }
+    return group;
+};
+
+/**
+ * Find the closest Page up
+ * @param block
+ * @returns
+ */
+export const getClosestPage = (
+    block: BlockImplInstance
+): BlockImplInstance | undefined => {
+    return getClosestBlock(block, block => {
+        return !block || block.flavor === 'page';
+    });
+};
+
+/**
+ * Find the closest group up
+ * @param block
+ * @returns
+ */
+export const getClosestGroup = (
+    block: BlockImplInstance
+): BlockImplInstance | undefined => {
+    return getClosestBlock(block, block => {
+        return !block || block.flavor === 'group';
+    });
+};
+
+/**
+ * Look up the group or page closest to the block
+ * @param block
+ * @returns
+ */
+export const getClosestGroupOrPage = (
+    block: BlockImplInstance
+): BlockImplInstance | undefined => {
+    return getClosestBlock(block, block => {
+        return !block || ['group', 'page'].includes(block?.flavor);
+    });
+};
diff --git a/libs/datasource/db-service/src/services/editor-block/utils/index.ts b/libs/datasource/db-service/src/services/editor-block/utils/index.ts
new file mode 100644
index 000000000..400c59214
--- /dev/null
+++ b/libs/datasource/db-service/src/services/editor-block/utils/index.ts
@@ -0,0 +1,57 @@
+import type { BlockImplInstance } from '@toeverything/datasource/jwt';
+import { ReturnEditorBlock } from '../types';
+import { getClosestGroup } from './common';
+import { getBlockColumns } from './column';
+
+interface DbBlock2BusinessBlockProps {
+    workspace: string;
+    dbBlock?: BlockImplInstance | null;
+}
+
+export const dbBlock2BusinessBlock = ({
+    workspace,
+    dbBlock,
+}: DbBlock2BusinessBlockProps): ReturnEditorBlock | null => {
+    if (!dbBlock) {
+        return null;
+    }
+    const block = {} as ReturnEditorBlock;
+    block.id = dbBlock.id;
+    block.type = dbBlock.flavor;
+    block.workspace = workspace;
+    block.parentId = dbBlock.parent?.id;
+    block.closestGroupId = getClosestGroup(dbBlock)?.id;
+    block.children = dbBlock.children || [];
+    block.properties = dbBlock.getDecorations();
+    block.created = dbBlock.created;
+    block.lastUpdated = dbBlock.lastUpdated;
+    block.columns = getBlockColumns(dbBlock);
+    block.creator = dbBlock.creator;
+    return block;
+};
+
+export {
+    getOrInitBlockContentColumnsField,
+    serializeColumnConfig,
+    deserializeColumnConfig,
+    addColumn,
+    ColumnType,
+    isBooleanColumn,
+    isContentColumn,
+    isDateColumn,
+    isFileColumn,
+    isNumberColumn,
+    isEnumColumn,
+    isStringColumn,
+} from './column';
+export type {
+    Column,
+    DefaultColumnsValue,
+    ContentColumnValue,
+    NumberColumnValue,
+    EnumColumnValue,
+    BooleanColumnValue,
+    DateColumnValue,
+    FileColumnValue,
+    StringColumnValue,
+} from './column';
diff --git a/libs/datasource/db-service/src/services/file/index.ts b/libs/datasource/db-service/src/services/file/index.ts
new file mode 100644
index 000000000..fb478bc1d
--- /dev/null
+++ b/libs/datasource/db-service/src/services/file/index.ts
@@ -0,0 +1,52 @@
+import { ServiceBaseClass } from '../base';
+
+interface CreateParams {
+    file: File;
+    workspace: string;
+}
+
+interface ImageResult {
+    id: string;
+    url: string;
+}
+export class FileService extends ServiceBaseClass {
+    urlMap: Record<string, string> = {};
+
+    async create(params: CreateParams): Promise<ImageResult> {
+        const { file, workspace } = params;
+        // Get the current workspace block
+        const workspace_db_block = await this.getWorkspaceDbBlock(workspace);
+        // Get the workspace database link
+        const db = await this.database.getDatabase(workspace);
+        const binary = await file.arrayBuffer();
+        // create a block of type file
+        const file_db_block = await db.get('binary', {
+            flavor: 'file',
+            binary,
+        });
+        // add the file block to the workspace
+        workspace_db_block.append(file_db_block);
+        // cache the file
+        const file_key = file_db_block.id + workspace;
+        this.urlMap[file_key] = URL.createObjectURL(new Blob([binary]));
+        return { id: file_db_block.id, url: this.urlMap[file_key] };
+    }
+    async get(file_block_id: string, workspace: string): Promise<ImageResult> {
+        const file_key = file_block_id + workspace;
+        if (this.urlMap[file_key]) {
+            // lookup cache
+            return { id: file_block_id, url: this.urlMap[file_key] };
+        }
+        const db = await this.database.getDatabase(workspace);
+        const file_block = await db.get(file_block_id as 'binary');
+        const file_buffer = file_block.getBinary();
+        if (file_buffer) {
+            this.urlMap[file_key] = URL.createObjectURL(
+                new Blob([file_buffer])
+            );
+        } else {
+            this.urlMap[file_key] = '';
+        }
+        return { id: file_block.id, url: this.urlMap[file_key] };
+    }
+}
diff --git a/libs/datasource/db-service/src/services/index.ts b/libs/datasource/db-service/src/services/index.ts
new file mode 100644
index 000000000..827f90ebe
--- /dev/null
+++ b/libs/datasource/db-service/src/services/index.ts
@@ -0,0 +1,108 @@
+import { DiContainer } from '@toeverything/utils';
+import type { RegisterDependencyConfig } from '@toeverything/utils';
+import { Database } from './database';
+import { PageTree } from './workspace/page-tree';
+import { UserConfig } from './workspace/user-config';
+import { EditorBlock } from './editor-block';
+import { FileService } from './file';
+import { CommentService } from './comment';
+
+export type {
+    CreateEditorBlock,
+    ReturnEditorBlock,
+    GetEditorBlock,
+    DeleteEditorBlock,
+    UpdateEditorBlock,
+    BlockFlavors,
+    BlockFlavorKeys,
+    Column,
+    ContentColumn,
+    NumberColumn,
+    EnumColumn,
+    DateColumn,
+    BooleanColumn,
+    FileColumn,
+    DefaultColumnsValue,
+    ContentColumnValue,
+    NumberColumnValue,
+    EnumColumnValue,
+    BooleanColumnValue,
+    DateColumnValue,
+    FileColumnValue,
+    StringColumnValue,
+} from './editor-block';
+export {
+    ColumnType,
+    isBooleanColumn,
+    isContentColumn,
+    isDateColumn,
+    isFileColumn,
+    isNumberColumn,
+    isEnumColumn,
+    isStringColumn,
+} from './editor-block';
+
+export interface DbServicesMap {
+    editorBlock: EditorBlock;
+    pageTree: PageTree;
+    userConfig: UserConfig;
+    file: FileService;
+    commentService: CommentService;
+}
+
+interface RegisterDependencyConfigWithName extends RegisterDependencyConfig {
+    callName: string;
+}
+
+const dbServiceConfig: RegisterDependencyConfigWithName[] = [
+    {
+        type: 'value',
+        callName: 'database',
+        token: Database,
+        value: new Database({}),
+        dependencies: [],
+    },
+    {
+        type: 'class',
+        callName: 'editorBlock',
+        token: EditorBlock,
+        value: EditorBlock,
+        dependencies: [{ token: Database }],
+    },
+    {
+        type: 'class',
+        callName: 'pageTree',
+        token: PageTree,
+        value: PageTree,
+        dependencies: [{ token: Database }],
+    },
+    {
+        type: 'class',
+        callName: 'userConfig',
+        token: UserConfig,
+        value: UserConfig,
+        dependencies: [{ token: Database }, { token: PageTree, lazy: true }],
+    },
+    {
+        type: 'class',
+        callName: 'file',
+        token: FileService,
+        value: FileService,
+        dependencies: [{ token: Database }],
+    },
+    {
+        type: 'class',
+        callName: 'commentService',
+        token: CommentService,
+        value: CommentService,
+        dependencies: [{ token: EditorBlock }],
+    },
+];
+
+export const serviceMapByCallName = dbServiceConfig.reduce((acc, cur) => {
+    acc[cur.callName] = cur;
+    return acc;
+}, {} as Record<string, RegisterDependencyConfigWithName>);
+
+export const diContainer = new DiContainer();
+diContainer.register(dbServiceConfig);
diff --git a/libs/datasource/db-service/src/services/workspace/page-tree.ts b/libs/datasource/db-service/src/services/workspace/page-tree.ts
new file mode 100644
index 000000000..89e85b999
--- /dev/null
+++ b/libs/datasource/db-service/src/services/workspace/page-tree.ts
@@ -0,0 +1,225 @@
+import type { BlockClientInstance } from '@toeverything/datasource/jwt';
+import { PAGE_TREE } from '../../utils';
+import type { ReturnUnobserve } from '../database/observer';
+import { ServiceBaseClass } from '../base';
+import { TreeItem } from './types';
+
+export type ObserveCallback = () => void;
+
+export class PageTree extends ServiceBaseClass {
+    private async fetch_page_tree<TreeItem>(workspace: string) {
+        const workspace_db_block = await this.getWorkspaceDbBlock(workspace);
+        const page_tree_config =
+            workspace_db_block.getDecoration<TreeItem[]>(PAGE_TREE);
+        return page_tree_config;
+    }
+
+    async getPageTree<TreeItem>(workspace: string): Promise<TreeItem[]> {
+        try {
+            const page_tree = await this.fetch_page_tree(workspace);
+            if (page_tree && page_tree.length) {
+                const db = await this.database.getDatabase(workspace);
+
+                const pages = await update_tree_items_title(
+                    db,
+                    page_tree as [],
+                    {}
+                );
+                return pages;
+            }
+        } catch (e) {
+            console.error(e);
+        }
+
+        return [];
+    }
+
+    /** @deprecated should implement more fine-grained crud methods instead of replacing each time with a new array */
+    async setPageTree<TreeItem>(workspace: string, treeData: TreeItem[]) {
+        const workspace_db_block = await this.getWorkspaceDbBlock(workspace);
+        workspace_db_block.setDecoration(PAGE_TREE, treeData);
+    }
+
+    async addPage<TreeItem>(workspace: string, treeData: TreeItem[] | string) {
+        // TODO: rewrite
+        if (typeof treeData === 'string') {
+            await this.setPageTree(workspace, [{ id: treeData, children: [] }]);
+        }
+    }
+    async removePage(workspace: string, blockId: string) {
+        const dbBlock = await this.getBlock(workspace, blockId);
+        await dbBlock?.remove();
+    }
+
+    async addPageToWorkspacee(
+        target_workspace_id: string,
+        new_page_id: string
+    ) {
+        const items = await this.getPageTree<TreeItem>(target_workspace_id);
+        await this.setPageTree(target_workspace_id, [
+            { id: new_page_id, children: [] },
+            ...items,
+        ]);
+    }
+
+    async addChildPageToWorkspace(
+        target_workspace_id: string,
+        parent_page_id: string,
+        new_page_id: string
+    ) {
+        const pages = await this.getPageTree<TreeItem>(target_workspace_id);
+        this.build_items_for_child_page(parent_page_id, new_page_id, pages);
+
+        await this.setPageTree<TreeItem>(target_workspace_id, [...pages]);
+    }
+    async addPrevPageToWorkspace(
+        target_workspace_id: string,
+        parent_page_id: string,
+        new_page_id: string
+    ) {
+        const pages = await this.getPageTree<TreeItem>(target_workspace_id);
+        this.build_items_for_prev_page(parent_page_id, new_page_id, pages);
+        await this.setPageTree<TreeItem>(target_workspace_id, [...pages]);
+    }
+    async addNextPageToWorkspace(
+        target_workspace_id: string,
+        parent_page_id: string,
+        new_page_id: string
+    ) {
+        const pages = await this.getPageTree<TreeItem>(target_workspace_id);
+        this.build_items_for_next_page(parent_page_id, new_page_id, pages);
+        await this.setPageTree<TreeItem>(target_workspace_id, [...pages]);
+    }
+    private build_items_for_next_page(
+        parent_page_id: string,
+        new_page_id: string,
+        children: TreeItem[]
+    ) {
+        for (let i = 0; i < children.length; i++) {
+            const child_page = children[i];
+            if (child_page.id === parent_page_id) {
+                const new_page = {
+                    id: new_page_id,
+                    title: 'Untitled',
+                    children: [] as TreeItem[],
+                };
+                children = children.splice(i + 1, 0, new_page);
+            } else if (child_page.children && child_page.children.length) {
+                this.build_items_for_next_page(
+                    parent_page_id,
+                    new_page_id,
+                    child_page.children
+                );
+            }
+        }
+    }
+    private build_items_for_prev_page(
+        parent_page_id: string,
+        new_page_id: string,
+        children: TreeItem[]
+    ) {
+        for (let i = 0; i < children.length; i++) {
+            const child_page = children[i];
+            if (child_page.id === parent_page_id) {
+                const new_page = {
+                    id: new_page_id,
+                    title: 'Untitled',
+                    children: [] as TreeItem[],
+                };
+                children = children.splice(i - 1, 0, new_page);
+            } else if (child_page.children && child_page.children.length) {
+                this.build_items_for_prev_page(
+                    parent_page_id,
+                    new_page_id,
+                    child_page.children
+                );
+            }
+        }
+    }
+    private build_items_for_child_page(
+        parent_page_id: string,
+        new_page_id: string,
+        children: TreeItem[]
+    ) {
+        for (let i = 0; i < children.length; i++) {
+            const child_page = children[i];
+            if (child_page.id === parent_page_id) {
+                child_page.children = child_page.children || [];
+                child_page.children.push({
+                    id: new_page_id,
+                    title: 'Untitled',
+                    children: [],
+                });
+            } else if (child_page.children && child_page.children.length) {
+                this.build_items_for_child_page(
+                    parent_page_id,
+                    new_page_id,
+                    child_page.children
+                );
+            }
+        }
+    }
+    // TODO: handles unobserve
+    async observe(
+        { workspace, page }: { workspace: string; page: string },
+        callback: ObserveCallback
+    ): Promise<ReturnUnobserve> {
+        const workspace_db_block = await this.getWorkspaceDbBlock(workspace);
+        const unobserveWorkspace = await this._observe(
+            workspace,
+            workspace_db_block.id,
+            (states, block) => {
+                callback();
+            }
+        );
+        const unobservePage = await this._observe(
+            workspace,
+            page,
+            (states, block) => {
+                callback();
+            }
+        );
+
+        return () => {
+            unobserveWorkspace();
+            unobservePage();
+        };
+    }
+
+    async unobserve({ workspace }: { workspace: string }) {
+        const workspace_db_block = await this.getWorkspaceDbBlock(workspace);
+        await this._unobserve(workspace, workspace_db_block.id);
+    }
+}
+
+async function update_tree_items_title<
+    TreeItem extends { id: string; title: string; children: TreeItem[] }
+>(
+    db: BlockClientInstance,
+    items: TreeItem[],
+    cache: Record<string, string>
+): Promise<TreeItem[]> {
+    for (const item of items) {
+        if (cache[item.id]) {
+            item.title = cache[item.id];
+        } else {
+            const page = await db.get(item.id as 'page');
+            item.title =
+                page
+                    .getDecoration<{ value: Array<{ text: string }> }>('text')
+                    ?.value?.map(v => v.text)
+                    .join('') || 'Untitled';
+            cache[item.id] = item.title;
+        }
+
+        if (item.children.length) {
+            item.children = await update_tree_items_title(
+                db,
+                item.children,
+                cache
+            );
+        }
+    }
+
+    return [...items];
+}
diff --git a/libs/datasource/db-service/src/services/workspace/types.ts b/libs/datasource/db-service/src/services/workspace/types.ts
new file mode 100644
index 000000000..d018b8dac
--- /dev/null
+++ b/libs/datasource/db-service/src/services/workspace/types.ts
@@ -0,0 +1,13 @@
+interface TreeItem {
+    id: string;
+    title: string;
+    children?: TreeItem[];
+}
+
+interface PageConfigItem {
+    id: string;
+    title?: string;
+    lastOpenTime: number;
+}
+
+export type { TreeItem, PageConfigItem };
diff --git a/libs/datasource/db-service/src/services/workspace/user-config.ts b/libs/datasource/db-service/src/services/workspace/user-config.ts
new file mode 100644
index 000000000..0977ee909
--- /dev/null
+++ b/libs/datasource/db-service/src/services/workspace/user-config.ts
@@ -0,0 +1,124 @@
+import { RECENT_PAGES, WORKSPACE_CONFIG } from '../../utils';
+import { ServiceBaseClass } from '../base';
+import { ObserveCallback, ReturnUnobserve } from '../database';
+import { PageTree } from './page-tree';
+import { PageConfigItem } from './types';
+
+/** Operate the user configuration at the workspace level */
+export class UserConfig extends ServiceBaseClass {
+    private async fetch_recent_pages(
+        workspace: string
+    ): Promise<Record<string, Array<PageConfigItem>>> {
+        const workspace_db_block = await this.getWorkspaceDbBlock(workspace);
+        const recent_work_pages =
+            workspace_db_block.getDecoration<
+                Record<string, Array<PageConfigItem>>
+            >(RECENT_PAGES) || {};
+        return recent_work_pages;
+    }
+
+    private async save_recent_pages(
+        workspace: string,
+        recentPages: Record<string, Array<PageConfigItem>>
+    ) {
+        const workspace_db_block = await this.getWorkspaceDbBlock(workspace);
+        workspace_db_block.setDecoration(RECENT_PAGES, recentPages);
+    }
+
+    async getUserInitialPage(
+        workspace: string,
+        userId: string
+    ): Promise<string> {
+        const recent_pages = await this.getRecentPages(workspace, userId);
+        if (recent_pages.length > 0) {
+            return recent_pages[0].id;
+        }
+
+        const db = await this.database.getDatabase(workspace);
+        const new_page = await db.get('page');
+
+        await this.get_dependency(PageTree).addPage(workspace, new_page.id);
+        await this.addRecentPage(workspace, userId, new_page.id);
+        return new_page.id;
+    }
+
+    async getRecentPages(
+        workspace: string,
+        userId: string,
+        topNumber = 5
+    ): Promise<PageConfigItem[]> {
+        const recent_work_pages = await this.fetch_recent_pages(workspace);
+        const recent_pages = (recent_work_pages[userId] || []).slice(
+            0,
+            topNumber
+        );
+        const db = await this.database.getDatabase(workspace);
+        for (const item of recent_pages) {
+            const page = await db.get(item.id as 'page');
+            item.title =
+                page
+                    .getDecoration<{ value: Array<{ text: string }> }>('text')
+                    ?.value?.map(v => v.text)
+                    .join('') || 'Untitled';
+        }
+        return recent_pages;
+    }
+
+    async addRecentPage(workspace: string, userId: string, pageId: string) {
+        const recent_work_pages = await this.fetch_recent_pages(workspace);
+        let recent_pages = recent_work_pages[userId] || [];
+        recent_pages = recent_pages.filter(item => item.id !== pageId);
+        recent_pages.unshift({
+            id: pageId,
+            lastOpenTime: Date.now(),
+        });
+        recent_work_pages[userId] = recent_pages;
+        await this.save_recent_pages(workspace, recent_work_pages);
+    }
+
+    async removePage(workspace: string, pageId: string) {
+        const recent_work_pages = await this.fetch_recent_pages(workspace);
+        for (const key in recent_work_pages) {
+            recent_work_pages[key] = recent_work_pages[key].filter(
+                item => item.id !== pageId
+            );
+        }
+        await this.save_recent_pages(workspace, recent_work_pages);
+    }
+
+    async observe(
+        { workspace }: { workspace: string },
+        callback: ObserveCallback
+    ): Promise<ReturnUnobserve> {
+        const workspace_db_block = await this.getWorkspaceDbBlock(workspace);
+        const unobserveWorkspace = await this._observe(
+            workspace,
+            workspace_db_block.id,
+            (states, block) => {
+                callback(states, block);
+            }
+        );
+
+        return () => {
+            unobserveWorkspace();
+        };
+    }
+
+    async unobserve({ workspace }: { workspace: string }) {
+        const workspace_db_block = await this.getWorkspaceDbBlock(workspace);
+        await this._unobserve(workspace, workspace_db_block.id);
+    }
+
+    async getWorkspaceName(workspace: string): Promise<string> {
+        const workspace_db_block = await this.getWorkspaceDbBlock(workspace);
+        const workspaceName =
+            workspace_db_block.getDecoration<string>(WORKSPACE_CONFIG) ||
+            workspace_db_block.id;
+        return workspaceName;
+    }
+
+    async setWorkspaceName(workspace: string, workspaceName: string) {
+        const workspace_db_block = await this.getWorkspaceDbBlock(workspace);
+        workspace_db_block.setDecoration(WORKSPACE_CONFIG, workspaceName);
+    }
+}
diff --git a/libs/datasource/db-service/src/utils/constants.ts b/libs/datasource/db-service/src/utils/constants.ts
new file mode 100644
index 000000000..ca69333e5
--- /dev/null
+++ b/libs/datasource/db-service/src/utils/constants.ts
@@ -0,0 +1,5 @@
+// blockdb configuration item related property name key
+export const PAGE_TREE = 'page_tree';
+export const RECENT_PAGES = 'activities';
+export const WORKSPACE_COMMENTS = 'workspace_comments';
+export const WORKSPACE_CONFIG = 'workspace_config';
diff --git a/libs/datasource/db-service/src/utils/index.ts b/libs/datasource/db-service/src/utils/index.ts
new file mode 100644
index 000000000..c94f80f84
--- /dev/null
+++ b/libs/datasource/db-service/src/utils/index.ts
@@ -0,0 +1 @@
+export * from './constants';
diff --git a/libs/datasource/db-service/tsconfig.json b/libs/datasource/db-service/tsconfig.json
new file mode 100644
index 000000000..e48fbc3f0
--- /dev/null
+++ b/libs/datasource/db-service/tsconfig.json
@@ -0,0 +1,24 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        // "noImplicitAny": true,
+        "strictNullChecks": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/datasource/db-service/tsconfig.lib.json b/libs/datasource/db-service/tsconfig.lib.json
new file mode 100644
index 000000000..0dda33329
--- /dev/null
+++ b/libs/datasource/db-service/tsconfig.lib.json
@@ -0,0 +1,22 @@
+{
+    "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": [
+        "**/*.spec.ts",
+        "**/*.test.ts",
+        "**/*.spec.tsx",
+        "**/*.test.tsx",
+        "**/*.spec.js",
+        "**/*.test.js",
+        "**/*.spec.jsx",
+        "**/*.test.jsx"
+    ],
+    "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/libs/datasource/db-service/tsconfig.spec.json b/libs/datasource/db-service/tsconfig.spec.json
new file mode 100644
index 000000000..ee70363dc
--- /dev/null
+++ b/libs/datasource/db-service/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "module": "commonjs",
+        "types": ["jest", "node"]
+    },
+    "include": [
+        "**/*.test.ts",
+        "**/*.spec.ts",
+        "**/*.test.tsx",
+        "**/*.spec.tsx",
+        "**/*.test.js",
+        "**/*.spec.js",
+        "**/*.test.jsx",
+        "**/*.spec.jsx",
+        "**/*.d.ts"
+    ]
+}
diff --git a/libs/datasource/feature-flags/.babelrc b/libs/datasource/feature-flags/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/datasource/feature-flags/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/datasource/feature-flags/.eslintrc.json b/libs/datasource/feature-flags/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/datasource/feature-flags/.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": {}
+        }
+    ]
+}
diff --git a/libs/datasource/feature-flags/README.md b/libs/datasource/feature-flags/README.md
new file mode 100644
index 000000000..f5c59f4e1
--- /dev/null
+++ b/libs/datasource/feature-flags/README.md
@@ -0,0 +1,55 @@
+# Feature Flags
+
+## Usage
+
+-   set provider
+
+```tsx
+import { FeatureFlagsProvider } from '@toeverything/datasource/feature-flags';
+
+const App = () => {
+    return (
+        <FeatureFlagsProvider>
+            <Page />
+        </FeatureFlagsProvider>
+    );
+};
+```
+
+-   use flag
+
+```ts
+import { useFlag } from '@toeverything/datasource/feature-flags';
+
+const App = () => {
+    //                   flag key, default value
+    const flag1 = useFlag('flag1', false);
+    // ^? boolean
+    const flag2 = useFlag<boolean>('flag2');
+    // ^? boolean | undefined
+    return flag1 && <div>The flag1 is enable!</div>;
+};
+```
+
+## How to add a new feature flag?
+
+-   Enter [Portal](https://portal.featureflag.co/switch-manage)
+-   Click `New Switch` button
+    -   Input `Switch Name`, and Enter
+    -   Adjust data and save
+
+# Test flags
+
+**When entering development mode feature flag will NOT be updated in real time**
+
+-   `activateFfcDevMode()` play with feature flags locally
+-   `quitFfcDevMode()` quit dev mode
+
+## Running unit tests
+
+Run `nx test datasource/feature-flags` to execute the unit tests via [Jest](https://jestjs.io).
+
+## References
+
+-   [Feature Flag Portal](https://portal.featureflag.co/)
+-   [Feature Flag React Web APP DEMO](https://featureflag.moyincloud.com/ksrm/React_Web_APP.html)
diff --git a/libs/datasource/feature-flags/jest.config.ts b/libs/datasource/feature-flags/jest.config.ts
new file mode 100644
index 000000000..61eb6827a
--- /dev/null
+++ b/libs/datasource/feature-flags/jest.config.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+    displayName: 'datasource-feature-flags',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/datasource/feature-flags',
+};
diff --git a/libs/datasource/feature-flags/package.json b/libs/datasource/feature-flags/package.json
new file mode 100644
index 000000000..21c449c4c
--- /dev/null
+++ b/libs/datasource/feature-flags/package.json
@@ -0,0 +1,8 @@
+{
+    "name": "@toeverything/datasource/feature-flags",
+    "version": "0.0.1",
+    "license": "MIT",
+    "dependencies": {
+        "ffc-js-client-side-sdk": "^1.1.4"
+    }
+}
diff --git a/libs/datasource/feature-flags/project.json b/libs/datasource/feature-flags/project.json
new file mode 100644
index 000000000..352991b39
--- /dev/null
+++ b/libs/datasource/feature-flags/project.json
@@ -0,0 +1,45 @@
+{
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/datasource/feature-flags/src",
+    "projectType": "library",
+    "tags": ["library:feature-flags"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/datasource/feature-flags",
+                "tsConfig": "libs/datasource/feature-flags/tsconfig.lib.json",
+                "project": "libs/datasource/feature-flags/package.json",
+                "entryFile": "libs/datasource/feature-flags/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/datasource/feature-flags/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/datasource/feature-flags/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/datasource/feature-flags"],
+            "options": {
+                "jestConfig": "libs/datasource/feature-flags/jest.config.ts",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/datasource/feature-flags/src/Context.tsx b/libs/datasource/feature-flags/src/Context.tsx
new file mode 100644
index 000000000..eccca8709
--- /dev/null
+++ b/libs/datasource/feature-flags/src/Context.tsx
@@ -0,0 +1,63 @@
+import ffcClient, { Ffc } from 'ffc-js-client-side-sdk';
+import type {
+    IFeatureFlagSet,
+    IOption,
+} from 'ffc-js-client-side-sdk/esm/types';
+import { createContext, ReactNode, useEffect, useState } from 'react';
+import { config } from './config';
+
+/**
+ * Init `ffcClient`
+ * Ported from https://github.com/feature-flags-co/ffc-js-client-side-sdk-react-jotai-demo/blob/main/src/ffc/hooks.ts
+ * @private
+ */
+export const useInitFfcEffect = (featureFlagClient: Ffc, option: IOption) => {
+    const [flags, setFlags] = useState<Record<string, IFeatureFlagSet>>({});
+
+    useEffect(() => {
+        featureFlagClient.init(option);
+
+        featureFlagClient.on('ff_update', (changes: unknown[]) => {
+            if (changes.length) {
+                setFlags(featureFlagClient.getAllFeatureFlags());
+            }
+        });
+
+        featureFlagClient.waitUntilReady().then((data: unknown[]) => {
+            if (data.length) {
+                setFlags(featureFlagClient.getAllFeatureFlags());
+            }
+        });
+        return () => {
+            // FIX destroy ffcClient
+            // ffcClient.logout();
+        };
+    }, [featureFlagClient, option, setFlags]);
+    return flags;
+};
+
+export const FeatureFlagsContext = createContext<{
+    ffcClient: Ffc;
+    flags: IFeatureFlagSet;
+    // TODO use genErrorObj
+}>({} as any);
+
+/**
+ * @example
+ * ```ts
+ * const App = () => (
+ *   <FeatureFlagsProvider>
+ *       <Page />
+ *   </FeatureFlagsProvider>
+ * );
+ * ```
+ */
+export const FeatureFlagsProvider = ({ children }: { children: ReactNode }) => {
+    const flags = useInitFfcEffect(ffcClient, config);
+
+    return (
+        <FeatureFlagsContext.Provider value={{ ffcClient, flags }}>
+            {children}
+        </FeatureFlagsContext.Provider>
+    );
+};
diff --git a/libs/datasource/feature-flags/src/config.ts b/libs/datasource/feature-flags/src/config.ts
new file mode 100644
index 000000000..864c79765
--- /dev/null
+++ b/libs/datasource/feature-flags/src/config.ts
@@ -0,0 +1,11 @@
+import type { IOption } from 'ffc-js-client-side-sdk/esm/types';
+
+export const config: IOption = {
+    secret: process.env['AFFINE_FEATURE_FLAG_TOKEN'],
+    anonymous: true,
+    // user: {
+    //   userName: 'the user's user name',
+    //   id: 'the user's unique identifier'
+    // }
+    devModePassword: '-',
+};
diff --git a/libs/datasource/feature-flags/src/index.ts b/libs/datasource/feature-flags/src/index.ts
new file mode 100644
index 000000000..5b65afba9
--- /dev/null
+++ b/libs/datasource/feature-flags/src/index.ts
@@ -0,0 +1,111 @@
+// Feature Flags
+// Website https://featureflag.co/
+// SDK doc https://github.com/feature-flags-co/ffc-js-client-side-sdk
+// Demo https://github.com/feature-flags-co/ffc-js-client-side-sdk-react-jotai-demo
+
+import type { IUser } from 'ffc-js-client-side-sdk/esm/types';
+import { useContext } from 'react';
+import { FeatureFlagsContext } from './Context';
+
+/**
+ * The `ffcClient` should not export to external modules.
+ * Do not export this please.
+ *
+ * @private
+ */
+const useFfcClient = () => {
+    const { ffcClient } = useContext(FeatureFlagsContext);
+    return ffcClient;
+};
+
+/**
+ * NOTICE: The hook can no trigger the `Ffc.sendFeatureFlagInsight`,
+ * may lead to inaccurate telemetry data.
+ *
+ * Use it discreetly.
+ */
+const useFlags = () => {
+    const { flags } = useContext(FeatureFlagsContext);
+    return flags;
+};
+
+type UseFlagFn = (<T = unknown>(flag: string) => T | undefined) &
+    (<T = unknown>(flag: string, defaultValue: T) => T) &
+    // Workaround for infers boolean as true or false
+    // Remove this after the issue fixed
+    // See https://github.com/microsoft/TypeScript/issues/29400
+    ((flag: string, defaultValue: false) => boolean) &
+    ((flag: string, defaultValue: true) => boolean);
+
+/**
+ * Returns the specified flag.
+ *
+ * The parameter defaultValue should have the same data type with flag type.
+ *
+ * @public
+ * @example
+ * ```ts
+ * const App = () => {
+ *   const flag1 = useFlag('flag1', 'default value');
+ *   // ^? string
+ *   const flag2 = useFlag<boolean>('flag2');
+ *   // ^? boolean | undefined
+ *   return <div>flag1: {flag1}</div>
+ * }
+ * ```
+ */
+export const useFlag = ((flag: string, defaultValue: unknown) => {
+    const flags = useFlags();
+    const ffcClient = useFfcClient();
+    // @ts-expect-error This is a BUG for ffc-js-client. ffc-js-client supported typed flag now.
+    ffcClient.sendFeatureFlagInsight(flag, defaultValue);
+    const value: unknown = flags[flag];
+
+    if (defaultValue === undefined) {
+        // Can not guess the type, return the flag value directly
+        return value;
+    }
+
+    if (value === undefined) {
+        return defaultValue;
+    }
+
+    if (typeof value !== typeof defaultValue) {
+        console.error(
+            `[Feature Flags] Flag "${flag}" type mismatch! Make ensure you have set the correct type in feature flag portal! flag type: "${typeof value}", defaultValue type: "${typeof defaultValue}"`,
+            'flag:',
+            value,
+            'defaultValue:',
+            defaultValue
+        );
+        return defaultValue;
+    }
+    return value;
+}) as UseFlagFn;
+
+/**
+ * Set the user after initialization
+ *
+ * If the user parameter cannot be passed by the init method,
+ * the following method can be used to set the user after initialization.
+ *
+ * See https://github.com/feature-flags-co/ffc-js-client-side-sdk#set-the-user-after-initialization
+ */
+export const useIdentifyUser = () => {
+    const ffcClient = useFfcClient();
+    return (user: IUser) => ffcClient.identify(user);
+};
+
+/**
+ * Set the user to anonymous user
+ *
+ * We can manually call the method logout, which will switch the current user back to anonymous user if exists already or create a new anonymous user.
+ *
+ * See https://github.com/feature-flags-co/ffc-js-client-side-sdk#set-the-user-to-anonymous-user
+ */
+export const useLogout = () => {
+    const ffcClient = useFfcClient();
+    return () => ffcClient.logout();
+};
+
+export { FeatureFlagsProvider } from './Context';
diff --git a/libs/datasource/feature-flags/tsconfig.json b/libs/datasource/feature-flags/tsconfig.json
new file mode 100644
index 000000000..6266af761
--- /dev/null
+++ b/libs/datasource/feature-flags/tsconfig.json
@@ -0,0 +1,27 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "strictNullChecks": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "importsNotUsedAsValues": "error"
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/datasource/feature-flags/tsconfig.lib.json b/libs/datasource/feature-flags/tsconfig.lib.json
new file mode 100644
index 000000000..6a4378740
--- /dev/null
+++ b/libs/datasource/feature-flags/tsconfig.lib.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"]
+}
diff --git a/libs/datasource/feature-flags/tsconfig.spec.json b/libs/datasource/feature-flags/tsconfig.spec.json
new file mode 100644
index 000000000..24b3ac659
--- /dev/null
+++ b/libs/datasource/feature-flags/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+    "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"
+    ]
+}
diff --git a/libs/datasource/jwt-rpc/.babelrc b/libs/datasource/jwt-rpc/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/datasource/jwt-rpc/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/datasource/jwt-rpc/.eslintrc.json b/libs/datasource/jwt-rpc/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/datasource/jwt-rpc/.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": {}
+        }
+    ]
+}
diff --git a/libs/datasource/jwt-rpc/jest.config.ts b/libs/datasource/jwt-rpc/jest.config.ts
new file mode 100644
index 000000000..d18cffd6c
--- /dev/null
+++ b/libs/datasource/jwt-rpc/jest.config.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+    displayName: 'datasource-jwt-rpc',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/datasource/jwt-rpc',
+};
diff --git a/libs/datasource/jwt-rpc/package.json b/libs/datasource/jwt-rpc/package.json
new file mode 100644
index 000000000..71c7c6328
--- /dev/null
+++ b/libs/datasource/jwt-rpc/package.json
@@ -0,0 +1,11 @@
+{
+    "name": "@toeverything/datasource/jwt-rpc",
+    "version": "0.0.1",
+    "license": "MIT",
+    "author": "DarkSky <darksky2048@gmail.com>",
+    "dependencies": {
+        "lib0": "^0.2.51",
+        "yjs": "^13.5.39",
+        "y-protocols": "^1.0.5"
+    }
+}
diff --git a/libs/datasource/jwt-rpc/project.json b/libs/datasource/jwt-rpc/project.json
new file mode 100644
index 000000000..b22d579ec
--- /dev/null
+++ b/libs/datasource/jwt-rpc/project.json
@@ -0,0 +1,45 @@
+{
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/datasource/jwt-rpc/src",
+    "projectType": "library",
+    "tags": ["datasource:jwt-rpc"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/datasource/jwt-rpc",
+                "tsConfig": "libs/datasource/jwt-rpc/tsconfig.lib.json",
+                "project": "libs/datasource/jwt-rpc/package.json",
+                "entryFile": "libs/datasource/jwt-rpc/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/datasource/jwt-rpc/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/datasource/jwt-rpc/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/datasource/jwt-rpc"],
+            "options": {
+                "jestConfig": "libs/datasource/jwt-rpc/jest.config.ts",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/datasource/jwt-rpc/src/connector.ts b/libs/datasource/jwt-rpc/src/connector.ts
new file mode 100644
index 000000000..a27652d9f
--- /dev/null
+++ b/libs/datasource/jwt-rpc/src/connector.ts
@@ -0,0 +1,347 @@
+import * as Y from 'yjs';
+import * as bc from 'lib0/broadcastchannel';
+import * as time from 'lib0/time';
+import * as encoding from 'lib0/encoding';
+import * as decoding from 'lib0/decoding';
+import * as syncProtocol from 'y-protocols/sync';
+import * as awarenessProtocol from 'y-protocols/awareness';
+import * as math from 'lib0/math';
+
+import { WebsocketProvider } from './provider';
+import { Message } from './handler';
+
+export const readMessage = (
+    provider: WebsocketProvider,
+    buf: Uint8Array,
+    emitSynced: boolean
+): encoding.Encoder => {
+    const decoder = decoding.createDecoder(buf);
+    const encoder = encoding.createEncoder();
+    const messageType = decoding.readVarUint(decoder) as Message;
+    const messageHandler = provider.messageHandlers[messageType];
+    if (/** @type {any} */ messageHandler) {
+        messageHandler(encoder, decoder, provider, emitSynced, messageType);
+    } else {
+        console.error('Unable to compute message');
+    }
+    return encoder;
+};
+
+export const registerBroadcastSubscriber = (
+    provider: WebsocketProvider,
+    awareness: awarenessProtocol.Awareness,
+    document: Y.Doc
+) => {
+    const channel = provider.broadcastChannel;
+
+    const subscriber = (data: ArrayBuffer, origin: any) => {
+        if (origin !== provider) {
+            const encoder = readMessage(provider, new Uint8Array(data), false);
+            if (encoding.length(encoder) > 1) {
+                bc.publish(channel, encoding.toUint8Array(encoder), provider);
+            }
+        }
+    };
+
+    bc.subscribe(channel, subscriber);
+    let connected = true;
+
+    // send sync step1 to bc
+    // write sync step 1
+    const encoderSync = encoding.createEncoder();
+    encoding.writeVarUint(encoderSync, Message.sync);
+    syncProtocol.writeSyncStep1(encoderSync, document);
+    bc.publish(channel, encoding.toUint8Array(encoderSync), this);
+    // broadcast local state
+    const encoderState = encoding.createEncoder();
+    encoding.writeVarUint(encoderState, Message.sync);
+    syncProtocol.writeSyncStep2(encoderState, document);
+    bc.publish(channel, encoding.toUint8Array(encoderState), this);
+    // write queryAwareness
+    const encoderAwarenessQuery = encoding.createEncoder();
+    encoding.writeVarUint(encoderAwarenessQuery, Message.queryAwareness);
+    bc.publish(channel, encoding.toUint8Array(encoderAwarenessQuery), this);
+    // broadcast local awareness state
+    const encoderAwarenessState = encoding.createEncoder();
+    encoding.writeVarUint(encoderAwarenessState, Message.awareness);
+    encoding.writeVarUint8Array(
+        encoderAwarenessState,
+        awarenessProtocol.encodeAwarenessUpdate(awareness, [document.clientID])
+    );
+    bc.publish(channel, encoding.toUint8Array(encoderAwarenessState), this);
+
+    const broadcastMessage = (buf: ArrayBuffer) => {
+        if (connected) bc.publish(channel, buf, provider);
+    };
+
+    const disconnect = () => {
+        const encoder = encoding.createEncoder();
+        encoding.writeVarUint(encoder, Message.awareness);
+        encoding.writeVarUint8Array(
+            encoder,
+            awarenessProtocol.encodeAwarenessUpdate(
+                awareness,
+                [document.clientID],
+                new Map()
+            )
+        );
+        broadcastMessage(encoding.toUint8Array(encoder));
+        if (connected) {
+            bc.unsubscribe(channel, subscriber);
+            connected = false;
+        }
+    };
+
+    return { broadcastMessage, disconnect };
+};
+
+export const registerUpdateHandler = (
+    provider: WebsocketProvider,
+    awareness: awarenessProtocol.Awareness,
+    doc: Y.Doc,
+    broadcastMessage: (buf: ArrayBuffer) => void
+) => {
+    const beforeUnloadHandler = () => {
+        awarenessProtocol.removeAwarenessStates(
+            awareness,
+            [doc.clientID],
+            'window unload'
+        );
+    };
+
+    const awarenessUpdateHandler = ({ added, updated, removed }: any) => {
+        const changedClients = added.concat(updated).concat(removed);
+        const encoder = encoding.createEncoder();
+        encoding.writeVarUint(encoder, Message.awareness);
+        encoding.writeVarUint8Array(
+            encoder,
+            awarenessProtocol.encodeAwarenessUpdate(awareness, changedClients)
+        );
+        broadcastMessage(encoding.toUint8Array(encoder));
+    };
+
+    //  Listens to Yjs updates and sends them to remote peers (ws and broadcastchannel)
+    const documentUpdateHandler = (update: Uint8Array, origin: any) => {
+        if (origin !== provider) {
+            const encoder = encoding.createEncoder();
+            encoding.writeVarUint(encoder, Message.sync);
+            syncProtocol.writeUpdate(encoder, update);
+            broadcastMessage(encoding.toUint8Array(encoder));
+        }
+    };
+
+    if (typeof window !== 'undefined') {
+        window.addEventListener('beforeunload', beforeUnloadHandler);
+    } else if (typeof process !== 'undefined') {
+        process.on('exit', beforeUnloadHandler);
+    }
+
+    awareness.on('update', awarenessUpdateHandler);
+    doc.on('update', documentUpdateHandler);
+    return () => {
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('beforeunload', beforeUnloadHandler);
+        } else if (typeof process !== 'undefined') {
+            process.off('exit', beforeUnloadHandler);
+        }
+
+        awareness.off('update', awarenessUpdateHandler);
+        doc.off('update', documentUpdateHandler);
+    };
+};
+
+enum WebSocketState {
+    disconnected = 0,
+    connecting,
+    connected,
+}
+
+// @todo - this should depend on awareness.outdatedTime
+const WEBSOCKET_RECONNECT = 30000;
+
+const _getToken = async (
+    remote: string,
+    token: string,
+    existsProtocol?: string,
+    reconnect = 3
+) => {
+    if (existsProtocol && reconnect > 0) {
+        return { protocol: existsProtocol };
+    }
+    const url = new URL(remote);
+    url.protocol = window.location.protocol;
+    return fetch(url, { method: 'POST', headers: { token } }).then(r =>
+        r.json()
+    );
+};
+
+export const registerWebsocket = (
+    provider: WebsocketProvider,
+    token: string,
+    resync = -1,
+    reconnect = 3,
+    existsProtocol?: string
+) => {
+    let state = WebSocketState.disconnected;
+    let lastMessageReceived = 0;
+
+    let websocket: WebSocket | undefined = undefined;
+
+    _getToken(provider.url, token, existsProtocol, reconnect)
+        .then(({ protocol }) => {
+            websocket = new WebSocket(provider.url, protocol);
+            websocket.binaryType = 'arraybuffer';
+            state = WebSocketState.connecting;
+
+            provider.synced = false;
+
+            websocket.onmessage = event => {
+                lastMessageReceived = time.getUnixTime();
+                const encoder = readMessage(
+                    provider,
+                    new Uint8Array(event.data),
+                    true
+                );
+                if (encoding.length(encoder) > 1) {
+                    websocket?.send(encoding.toUint8Array(encoder));
+                }
+            };
+            websocket.onerror = event => {
+                provider.emit('connection-error', [event, provider]);
+            };
+            websocket.onclose = event => {
+                provider.emit('connection-close', [event, provider]);
+                websocket = undefined;
+
+                if (
+                    [
+                        WebSocketState.connecting,
+                        WebSocketState.connected,
+                    ].includes(state)
+                ) {
+                    state = WebSocketState.disconnected;
+                    provider.synced = false;
+                    // update awareness (all users except local left)
+                    awarenessProtocol.removeAwarenessStates(
+                        provider.awareness,
+                        Array.from(
+                            provider.awareness.getStates().keys()
+                        ).filter(client => client !== provider.doc.clientID),
+                        provider
+                    );
+                    provider.emit('status', [{ status: 'disconnected' }]);
+                } else {
+                    provider.wsUnsuccessfulReconnects++;
+                }
+                if (reconnect <= 0) {
+                    provider.emit('lost-connection', []);
+                }
+                // Start with no reconnect timeout and increase timeout by
+                // using exponential backoff starting with 100ms
+                setTimeout(
+                    registerWebsocket,
+                    math.min(
+                        math.pow(2, provider.wsUnsuccessfulReconnects) * 100,
+                        provider.maxBackOffTime
+                    ),
+                    provider,
+                    token,
+                    resyncInterval,
+                    reconnect > 0 ? reconnect - 1 : 3,
+                    protocol
+                );
+            };
+            websocket.onopen = () => {
+                lastMessageReceived = time.getUnixTime();
+                state = WebSocketState.connected;
+                provider.wsUnsuccessfulReconnects = 0;
+                provider.emit('status', [{ status: 'connected' }]);
+                // always send sync step 1 when connected
+                const encoder = encoding.createEncoder();
+                encoding.writeVarUint(encoder, Message.sync);
+                syncProtocol.writeSyncStep1(encoder, provider.doc);
+                websocket?.send(encoding.toUint8Array(encoder));
+                // broadcast local awareness state
+                if (provider.awareness.getLocalState() !== null) {
+                    const encoderAwarenessState = encoding.createEncoder();
+                    encoding.writeVarUint(
+                        encoderAwarenessState,
+                        Message.awareness
+                    );
+                    encoding.writeVarUint8Array(
+                        encoderAwarenessState,
+                        awarenessProtocol.encodeAwarenessUpdate(
+                            provider.awareness,
+                            [provider.doc.clientID]
+                        )
+                    );
+                    websocket?.send(
+                        encoding.toUint8Array(encoderAwarenessState)
+                    );
+                }
+            };
+
+            provider.emit('status', [{ status: 'connecting' }]);
+        })
+        .catch(err => {
+            if (reconnect <= 0) {
+                provider.emit('lost-connection', []);
+            }
+            provider.wsUnsuccessfulReconnects++;
+            setTimeout(
+                registerWebsocket,
+                math.min(
+                    math.pow(2, provider.wsUnsuccessfulReconnects) * 100,
+                    provider.maxBackOffTime
+                ),
+                provider,
+                token,
+                resyncInterval,
+                reconnect > 0 ? reconnect - 1 : 3
+            );
+        });
+
+    let resyncInterval = 0;
+    if (resync > 0) {
+        resyncInterval = setInterval(() => {
+            if (websocket?.readyState === WebSocket.OPEN) {
+                // resend sync step 1
+                const encoder = encoding.createEncoder();
+                encoding.writeVarUint(encoder, Message.sync);
+                syncProtocol.writeSyncStep1(encoder, provider.doc);
+                websocket.send(encoding.toUint8Array(encoder));
+            }
+        }, resync) as unknown as number;
+    }
+
+    const checkInterval = setInterval(() => {
+        if (
+            state === WebSocketState.connected &&
+            WEBSOCKET_RECONNECT < time.getUnixTime() - lastMessageReceived
+        ) {
+            // no message received in a long time - not even your own awareness
+            // updates (which are updated every 15 seconds)
+            websocket?.close();
+        }
+    }, WEBSOCKET_RECONNECT / 10);
+
+    const broadcastMessage = (buf: ArrayBuffer) => {
+        if (state === WebSocketState.connected) {
+            websocket?.send(buf);
+        }
+    };
+
+    const disconnect = () => {
+        if (websocket != null) {
+            websocket.close();
+            websocket = undefined;
+            state = WebSocketState.disconnected;
+            if (resyncInterval !== 0) {
+                clearInterval(resyncInterval);
+            }
+            clearInterval(checkInterval);
+        }
+    };
+
+    return { broadcastMessage, disconnect };
+};
diff --git a/libs/datasource/jwt-rpc/src/handler.ts b/libs/datasource/jwt-rpc/src/handler.ts
new file mode 100644
index 000000000..4bfd5a20f
--- /dev/null
+++ b/libs/datasource/jwt-rpc/src/handler.ts
@@ -0,0 +1,82 @@
+import * as encoding from 'lib0/encoding';
+import * as decoding from 'lib0/decoding';
+import * as authProtocol from 'y-protocols/auth';
+import * as awarenessProtocol from 'y-protocols/awareness';
+import * as syncProtocol from 'y-protocols/sync';
+
+import { WebsocketProvider } from './provider';
+
+const permissionDeniedHandler = (provider: WebsocketProvider, reason: string) =>
+    console.warn(`Permission denied to access ${provider.url}.\n${reason}`);
+
+export enum Message {
+    sync = 0,
+    queryAwareness,
+    awareness,
+    auth,
+}
+
+export type MessageCallback = (
+    encoder: encoding.Encoder,
+    decoder: decoding.Decoder,
+    provider: WebsocketProvider,
+    emitSynced: boolean,
+    messageType: number
+) => void;
+
+export const handler: Record<Message, MessageCallback> = {
+    [Message.sync]: (encoder, decoder, provider, emitSynced, messageType) => {
+        encoding.writeVarUint(encoder, Message.sync);
+        const syncMessageType = syncProtocol.readSyncMessage(
+            decoder,
+            encoder,
+            provider.doc,
+            provider
+        );
+        if (
+            emitSynced &&
+            syncMessageType === syncProtocol.messageYjsSyncStep2 &&
+            !provider.synced
+        ) {
+            provider.synced = true;
+        }
+    },
+    [Message.queryAwareness]: (
+        encoder,
+        decoder,
+        provider,
+        emitSynced,
+        messageType
+    ) => {
+        encoding.writeVarUint(encoder, Message.queryAwareness);
+        encoding.writeVarUint8Array(
+            encoder,
+            awarenessProtocol.encodeAwarenessUpdate(
+                provider.awareness,
+                Array.from(provider.awareness.getStates().keys())
+            )
+        );
+    },
+
+    [Message.awareness]: (
+        encoder,
+        decoder,
+        provider,
+        emitSynced,
+        messageType
+    ) => {
+        awarenessProtocol.applyAwarenessUpdate(
+            provider.awareness,
+            decoding.readVarUint8Array(decoder),
+            provider
+        );
+    },
+
+    [Message.auth]: (encoder, decoder, provider, emitSynced, messageType) => {
+        authProtocol.readAuthMessage(
+            decoder,
+            provider.doc,
+            permissionDeniedHandler
+        );
+    },
+};
diff --git a/libs/datasource/jwt-rpc/src/index.ts b/libs/datasource/jwt-rpc/src/index.ts
new file mode 100644
index 000000000..fd2c87cd6
--- /dev/null
+++ b/libs/datasource/jwt-rpc/src/index.ts
@@ -0,0 +1 @@
+export { WebsocketProvider } from './provider';
diff --git a/libs/datasource/jwt-rpc/src/provider.ts b/libs/datasource/jwt-rpc/src/provider.ts
new file mode 100644
index 000000000..9839e3a2f
--- /dev/null
+++ b/libs/datasource/jwt-rpc/src/provider.ts
@@ -0,0 +1,134 @@
+import * as Y from 'yjs';
+
+import { Observable } from 'lib0/observable';
+import * as url from 'lib0/url';
+
+import * as awarenessProtocol from 'y-protocols/awareness';
+
+import { handler } from './handler';
+import {
+    registerBroadcastSubscriber,
+    registerUpdateHandler,
+    registerWebsocket,
+} from './connector';
+
+/**
+ * Websocket Provider for Yjs. Creates a websocket connection to sync the shared document.
+ * The document name is attached to the provided url. I.e. the following example
+ * creates a websocket connection to http://localhost:3000/my-document-name
+ *
+ * @example
+ *   import * as Y from 'yjs'
+ *   import { WebsocketProvider } from 'jwt-rpc'
+ *   const doc = new Y.Doc()
+ *   const provider = new WebsocketProvider('http://localhost:3000', 'my-document-name', doc)
+ */
+export class WebsocketProvider extends Observable<string> {
+    maxBackOffTime: number;
+    url: string;
+    roomName: string;
+
+    awareness: awarenessProtocol.Awareness;
+    doc: Y.Doc;
+
+    wsUnsuccessfulReconnects: number;
+    private _synced: boolean;
+
+    broadcastChannel: string;
+    private _broadcast?: {
+        broadcastMessage: (buf: ArrayBuffer) => void;
+        disconnect: () => void;
+    };
+
+    private _websocket?: {
+        broadcastMessage: (buf: ArrayBuffer) => void;
+        disconnect: () => void;
+    };
+
+    private _updateHandlerDestroy: () => void;
+
+    constructor(
+        token: string,
+        serverUrl: string,
+        roomName: string,
+        doc: Y.Doc,
+        {
+            awareness = new awarenessProtocol.Awareness(doc),
+            params = {},
+            resyncInterval = -1,
+            maxBackOffTime = 2500,
+        } = {}
+    ) {
+        super();
+
+        this.roomName = roomName;
+        // ensure that url is always ends with /
+        while (serverUrl[serverUrl.length - 1] === '/') {
+            serverUrl = serverUrl.slice(0, serverUrl.length - 1);
+        }
+        this.broadcastChannel = serverUrl + '/' + roomName;
+        const encodedParams = url.encodeQueryParams(params);
+        this.url =
+            this.broadcastChannel +
+            (encodedParams.length === 0 ? '' : '?' + encodedParams);
+
+        this.awareness = awareness;
+        this.doc = doc;
+
+        this.maxBackOffTime = maxBackOffTime;
+        this.wsUnsuccessfulReconnects = 0;
+
+        this._synced = false;
+
+        this._websocket = registerWebsocket(this, token, resyncInterval);
+        // TODO: The current implementation will cause a broadcast storm, and then re-implement one, or just go websocket synchronization
+        // this._broadcast = registerBroadcastSubscriber(
+        //     this,
+        //     this.awareness,
+        //     this.doc
+        // );
+
+        this._updateHandlerDestroy = registerUpdateHandler(
+            this,
+            awareness,
+            doc,
+            buf => {
+                this._websocket?.broadcastMessage(buf);
+                this._broadcast?.broadcastMessage(buf);
+            }
+        );
+    }
+
+    get messageHandlers() {
+        return handler;
+    }
+
+    get synced() {
+        return this._synced;
+    }
+
+    set synced(state) {
+        if (this._synced !== state) {
+            this._synced = state;
+            this.emit('synced', [state]);
+            this.emit('sync', [state]);
+        }
+    }
+
+    override destroy() {
+        if (this._broadcast) {
+            const disconnect = this._broadcast.disconnect;
+            this._broadcast = undefined;
+            disconnect();
+        }
+
+        if (this._websocket) {
+            const disconnect = this._websocket.disconnect;
+            this._websocket = undefined;
+            disconnect();
+        }
+
+        this._updateHandlerDestroy?.();
+        super.destroy();
+    }
+}
diff --git a/libs/datasource/jwt-rpc/tsconfig.json b/libs/datasource/jwt-rpc/tsconfig.json
new file mode 100644
index 000000000..83d582232
--- /dev/null
+++ b/libs/datasource/jwt-rpc/tsconfig.json
@@ -0,0 +1,27 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/datasource/jwt-rpc/tsconfig.lib.json b/libs/datasource/jwt-rpc/tsconfig.lib.json
new file mode 100644
index 000000000..6a4378740
--- /dev/null
+++ b/libs/datasource/jwt-rpc/tsconfig.lib.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"]
+}
diff --git a/libs/datasource/jwt-rpc/tsconfig.spec.json b/libs/datasource/jwt-rpc/tsconfig.spec.json
new file mode 100644
index 000000000..24b3ac659
--- /dev/null
+++ b/libs/datasource/jwt-rpc/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+    "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"
+    ]
+}
diff --git a/libs/datasource/jwt/.babelrc b/libs/datasource/jwt/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/datasource/jwt/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/datasource/jwt/.eslintrc.json b/libs/datasource/jwt/.eslintrc.json
new file mode 100644
index 000000000..867bc6c9b
--- /dev/null
+++ b/libs/datasource/jwt/.eslintrc.json
@@ -0,0 +1,27 @@
+{
+    "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
+    "ignorePatterns": ["!**/*"],
+    "overrides": [
+        {
+            "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+            "rules": {}
+        },
+        {
+            "files": ["*.ts", "*.tsx"],
+            "rules": {
+                "@typescript-eslint/no-unused-vars": [
+                    "error",
+                    {
+                        "vars": "all",
+                        "args": "after-used",
+                        "ignoreRestSiblings": false
+                    }
+                ]
+            }
+        },
+        {
+            "files": ["*.js", "*.jsx"],
+            "rules": {}
+        }
+    ]
+}
diff --git a/libs/datasource/jwt/jest.config.js b/libs/datasource/jwt/jest.config.js
new file mode 100644
index 000000000..7268a6696
--- /dev/null
+++ b/libs/datasource/jwt/jest.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+    displayName: 'datasource-jwt',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/datasource/jwt',
+};
diff --git a/libs/datasource/jwt/package.json b/libs/datasource/jwt/package.json
new file mode 100644
index 000000000..1788d382e
--- /dev/null
+++ b/libs/datasource/jwt/package.json
@@ -0,0 +1,33 @@
+{
+    "name": "@toeverything/datasource/jwt",
+    "version": "0.0.1",
+    "license": "MIT",
+    "author": "DarkSky <darksky2048@gmail.com>",
+    "devDependencies": {
+        "@types/debug": "^4.1.7",
+        "@types/file-saver": "^2.0.5",
+        "@types/uuid": "^8.3.4",
+        "@types/wicg-file-system-access": "^2020.9.5",
+        "file-saver": "^2.0.5",
+        "file-selector": "^0.6.0",
+        "flexsearch": "^0.7.21",
+        "lib0": "^0.2.51",
+        "lru-cache": "^7.12.0",
+        "ts-debounce": "^4.0.0",
+        "y-indexeddb": "^9.0.8"
+    },
+    "dependencies": {
+        "@types/flexsearch": "^0.7.3",
+        "buffer": "^6.0.3",
+        "debug": "^4.3.4",
+        "fflate": "^0.7.3",
+        "idb-keyval": "^6.2.0",
+        "immer": "^9.0.15",
+        "nanoid": "^4.0.0",
+        "sha3": "^2.1.4",
+        "sift": "^16.0.0",
+        "uuid": "^8.3.2",
+        "y-protocols": "^1.0.5",
+        "yjs": "^13.5.39"
+    }
+}
diff --git a/libs/datasource/jwt/project.json b/libs/datasource/jwt/project.json
new file mode 100644
index 000000000..b250e05de
--- /dev/null
+++ b/libs/datasource/jwt/project.json
@@ -0,0 +1,43 @@
+{
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/datasource/jwt/src",
+    "projectType": "library",
+    "tags": ["datasource:jwt"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/datasource/jwt",
+                "tsConfig": "libs/datasource/jwt/tsconfig.lib.json",
+                "project": "libs/datasource/jwt/package.json",
+                "entryFile": "libs/datasource/jwt/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/datasource/jwt/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": ["libs/datasource/jwt/**/*.{ts,tsx,js,jsx}"]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/datasource/jwt"],
+            "options": {
+                "jestConfig": "libs/datasource/jwt/jest.config.js",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/datasource/jwt/src/adapter/index.ts b/libs/datasource/jwt/src/adapter/index.ts
new file mode 100644
index 000000000..101808a71
--- /dev/null
+++ b/libs/datasource/jwt/src/adapter/index.ts
@@ -0,0 +1,161 @@
+import { AbstractType as YAbstractType } from 'yjs';
+
+import { BlockItem } from '../types';
+
+export type ChangedStateKeys = 'add' | 'update' | 'delete';
+export type ChangedStates<S = ChangedStateKeys> = Map<string, S>;
+
+export type BlockListener<S = ChangedStateKeys, R = unknown> = (
+    states: ChangedStates<S>
+) => Promise<R> | R;
+
+export type Operable<T, Base = YAbstractType<any>> = T extends Base
+    ? ContentOperation
+    : T;
+
+export interface InternalPlainObject {}
+
+export type BaseTypes = string | number | boolean | InternalPlainObject;
+
+export type ContentTypes = BaseTypes | ContentOperation;
+
+interface ContentOperation {
+    get length(): number;
+    createText(): TextOperation;
+    createArray<T extends ContentTypes = ContentOperation>(): ArrayOperation<T>;
+    createMap<T extends ContentTypes = ContentOperation>(): MapOperation<T>;
+    asText(): TextOperation | undefined;
+    asArray<T extends ContentTypes = ContentOperation>():
+        | ArrayOperation<T>
+        | undefined;
+    asMap<T extends ContentTypes = ContentOperation>():
+        | MapOperation<T>
+        | undefined;
+    autoGet(
+        root: ThisType<ContentOperation> | Record<string, unknown>,
+        path: string[]
+    ): unknown | undefined;
+    autoSet(
+        root: ThisType<ContentOperation>,
+        path: string[],
+        data: unknown,
+        partial?: boolean
+    ): void;
+}
+
+type TextAttributes = Record<string, string>;
+
+export type TextToken = {
+    insert: string;
+    attributes?: TextAttributes;
+};
+
+export interface TextOperation extends ContentOperation {
+    insert(
+        index: number,
+        content: string,
+        format?: Record<string, string>
+    ): void;
+    format(index: number, length: number, format: Record<string, string>): void;
+    delete(index: number, length: number): void;
+    setAttribute(name: string, value: BaseTypes): void;
+    getAttribute<T extends BaseTypes = string>(name: string): T | undefined;
+    toString(): TextToken[];
+}
+
+export interface ArrayOperation<T extends ContentTypes = ContentOperation>
+    extends ContentOperation {
+    insert(index: number, content: Array<Operable<T>>): void;
+    delete(index: number, length: number): void;
+    push(content: Array<Operable<T>>): void;
+    unshift(content: Array<Operable<T>>): void;
+    get(index: number): Operable<T> | undefined;
+    slice(start?: number, end?: number): Array<Operable<T>>;
+    map<R = unknown>(callback: (value: T, index: number) => R): Array<R>;
+    forEach(callback: (value: T, index: number) => boolean | void): void;
+    find<R = unknown>(
+        callback: (value: T, index: number) => boolean
+    ): R | undefined;
+    findIndex(callback: (value: T, index: number) => boolean): number;
+}
+
+export interface MapOperation<T extends ContentTypes = ContentOperation>
+    extends ContentOperation {
+    set(key: string, value: Operable<T>): void;
+    get(key: string): Operable<T> | undefined;
+    delete(key: string): void;
+    has(key: string): boolean;
+}
+
+export type HistoryCallback<T = unknown> = (map: Map<string, T>) => void;
+
+export interface HistoryManager {
+    onPush<T = unknown>(name: string, callback: HistoryCallback<T>): void;
+    offPush(name: string): boolean;
+    onPop<T = unknown>(name: string, callback: HistoryCallback<T>): void;
+    offPop(name: string): boolean;
+    undo<T = unknown>(): Map<string, T> | undefined;
+    redo<T = unknown>(): Map<string, T> | undefined;
+    clear(): void;
+}
+
+type BlockPosition = { pos?: number; before?: string; after?: string };
+
+interface BlockInstance<C extends ContentOperation> {
+    get id(): string;
+    get type(): BlockItem<C>['type'];
+    get flavor(): BlockItem<C>['flavor'];
+    // TODO: flavor needs optimization
+    setFlavor(flavor: BlockItem<C>['flavor']): void;
+    get created(): BlockItem<C>['created'];
+    get updated(): number; // update time, UTC timestamp, read only
+    get creator(): string | undefined; // creator id
+    get children(): string[];
+    getChildren(block_ids: (string | undefined)[]): BlockInstance<C>[];
+    hasChildren(block_id: string): boolean;
+    insertChildren(
+        block: ThisType<BlockInstance<C>>,
+        pos?: BlockPosition
+    ): void;
+    removeChildren(block_ids: (string | undefined)[]): void;
+    get content(): BlockItem<C>['content'];
+    on(
+        key: 'children' | 'content',
+        name: string,
+        listener: BlockListener
+    ): void;
+    off(key: 'children' | 'content', name: string): void;
+    addChildrenListener(name: string, listener: BlockListener): void;
+    removeChildrenListener(name: string): void;
+    addContentListener(name: string, listener: BlockListener): void;
+    removeContentListener(name: string): void;
+    scopedHistory(scope: any[]): HistoryManager;
+}
+
+interface AsyncDatabaseAdapter<C extends ContentOperation> {
+    inspector(): Record<string, any>;
+    createBlock(
+        options: Pick<BlockItem<C>, 'type' | 'flavor'> & {
+            binary?: ArrayBuffer;
+            uuid?: string;
+        }
+    ): Promise<BlockInstance<C>>;
+    getBlock(id: string): Promise<BlockInstance<C> | undefined>;
+    getBlockByFlavor(flavor: BlockItem<C>['flavor']): Promise<string[]>;
+    getBlockByType(type: BlockItem<C>['type']): Promise<string[]>;
+    checkBlocks(keys: string[]): Promise<boolean>;
+    deleteBlocks(keys: string[]): Promise<string[]>;
+    on<S, R>(key: 'editing' | 'updated', listener: BlockListener<S, R>): void;
+    suspend(suspend: boolean): void;
+    history(): HistoryManager;
+    getUserId(): string;
+}
+
+export type {
+    AsyncDatabaseAdapter,
+    BlockPosition,
+    BlockInstance,
+    ContentOperation,
+};
+export type { YjsInitOptions, YjsContentOperation } from './yjs';
+export { YjsAdapter } from './yjs';
diff --git a/libs/datasource/jwt/src/adapter/yjs/binary.ts b/libs/datasource/jwt/src/adapter/yjs/binary.ts
new file mode 100644
index 000000000..d475cd05f
--- /dev/null
+++ b/libs/datasource/jwt/src/adapter/yjs/binary.ts
@@ -0,0 +1,66 @@
+import { Array as YArray, Map as YMap } from 'yjs';
+
+import { RemoteKvService } from '@toeverything/datasource/remote-kv';
+
+export class YjsRemoteBinaries {
+    readonly #binaries: YMap<YArray<ArrayBuffer>>; // binary instance
+    readonly #remote_storage?: RemoteKvService;
+
+    constructor(binaries: YMap<YArray<ArrayBuffer>>, remote_token?: string) {
+        this.#binaries = binaries;
+        if (remote_token) {
+            this.#remote_storage = new RemoteKvService(remote_token);
+        } else {
+            console.warn(`Remote storage is not ready`);
+        }
+    }
+
+    has(name: string): boolean {
+        return this.#binaries.has(name);
+    }
+
+    async get(name: string): Promise<YArray<ArrayBuffer> | undefined> {
+        if (this.#binaries.has(name)) {
+            return this.#binaries.get(name);
+        } else {
+            // TODO: Remote Load
+            try {
+                const file = await this.#remote_storage?.instance.getBuffData(
+                    name
+                );
+                console.log(file);
+                // return file;
+            } catch (e) {
+                throw new Error(`Binary ${name} not found`);
+            }
+            return undefined;
+        }
+    }
+
+    async set(name: string, binary: YArray<ArrayBuffer>) {
+        if (!this.#binaries.has(name)) {
+            console.log(name, 'name');
+            if (binary.length === 1) {
+                this.#binaries.set(name, binary);
+                if (this.#remote_storage) {
+                    // TODO: Remote Save, if there is an object with the same name remotely, the upload is skipped, because the file name is the hash of the file content
+                    const has_file = this.#remote_storage.instance.exist(name);
+                    if (!has_file) {
+                        const upload_file = new File(binary.toArray(), name);
+                        await this.#remote_storage.instance
+                            .upload(upload_file)
+                            .catch(err => {
+                                throw new Error(`${err} upload error`);
+                            });
+                    }
+                } else {
+                    console.warn(`Remote storage is not ready`);
+                }
+                return;
+            } else {
+                console.log('err');
+            }
+            throw new Error(`Binary ${name} is invalid`);
+        }
+    }
+}
diff --git a/libs/datasource/jwt/src/adapter/yjs/block.ts b/libs/datasource/jwt/src/adapter/yjs/block.ts
new file mode 100644
index 000000000..2faf3b80f
--- /dev/null
+++ b/libs/datasource/jwt/src/adapter/yjs/block.ts
@@ -0,0 +1,293 @@
+import {
+    AbstractType as YAbstractType,
+    Array as YArray,
+    Map as YMap,
+    transact,
+} from 'yjs';
+
+import { BlockInstance, BlockListener, HistoryManager } from '../index';
+import { BlockItem, BlockTypes } from '../../types';
+
+import { YjsContentOperation } from './operation';
+import { ChildrenListenerHandler, ContentListenerHandler } from './listener';
+import { YjsHistoryManager } from './history';
+
+const GET_BLOCK_ITEM = Symbol('GET_BLOCK_ITEM');
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const getMapFromYArray = (array: YArray<string>) =>
+    new Map(array.map((child, index) => [child, index]));
+
+type YjsBlockInstanceProps = {
+    id: string;
+    block: YMap<unknown>;
+    binary?: YArray<ArrayBuffer>;
+    setBlock: (
+        id: string,
+        block: BlockItem<YjsContentOperation>
+    ) => Promise<void>;
+    getUpdated: (id: string) => number | undefined;
+    getCreator: (id: string) => string | undefined;
+    getBlockInstance: (id: string) => YjsBlockInstance | undefined;
+};
+
+export class YjsBlockInstance implements BlockInstance<YjsContentOperation> {
+    readonly #id: string;
+    readonly #block: YMap<unknown>;
+    readonly #binary?: YArray<ArrayBuffer>;
+    readonly #children: YArray<string>;
+    readonly #set_block: (
+        id: string,
+        block: BlockItem<YjsContentOperation>
+    ) => Promise<void>;
+    readonly #get_updated: (id: string) => number | undefined;
+    readonly #get_creator: (id: string) => string | undefined;
+    readonly #get_block_instance: (id: string) => YjsBlockInstance | undefined;
+    readonly #children_listeners: Map<string, BlockListener>;
+    readonly #content_listeners: Map<string, BlockListener>;
+
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    #children_map: Map<string, number>;
+
+    constructor(props: YjsBlockInstanceProps) {
+        this.#id = props.id;
+        this.#block = props.block;
+        this.#binary = props.binary;
+
+        this.#children = props.block.get('children') as YArray<string>;
+        this.#children_map = getMapFromYArray(this.#children);
+        this.#set_block = props.setBlock;
+        this.#get_updated = props.getUpdated;
+        this.#get_creator = props.getCreator;
+        this.#get_block_instance = props.getBlockInstance;
+
+        this.#children_listeners = new Map();
+        this.#content_listeners = new Map();
+
+        const content = this.#block.get('content') as YMap<unknown>;
+
+        this.#children.observe(event =>
+            ChildrenListenerHandler(this.#children_listeners, event)
+        );
+        content?.observeDeep(events =>
+            ContentListenerHandler(this.#content_listeners, events)
+        );
+        // TODO: flavor needs optimization
+        this.#block.observeDeep(events =>
+            ContentListenerHandler(this.#content_listeners, events)
+        );
+    }
+
+    on(
+        key: 'children' | 'content',
+        name: string,
+        listener: BlockListener
+    ): void {
+        if (key === 'children') {
+            this.addChildrenListener(name, listener);
+        } else if (key === 'content') {
+            this.addContentListener(name, listener);
+        }
+    }
+
+    off(key: 'children' | 'content', name: string): void {
+        if (key === 'children') {
+            this.removeChildrenListener(name);
+        } else if (key === 'content') {
+            this.removeContentListener(name);
+        }
+    }
+
+    addChildrenListener(name: string, listener: BlockListener): void {
+        this.#children_listeners.set(name, listener);
+    }
+
+    removeChildrenListener(name: string): void {
+        this.#children_listeners.delete(name);
+    }
+
+    addContentListener(name: string, listener: BlockListener): void {
+        this.#content_listeners.set(name, listener);
+    }
+
+    removeContentListener(name: string): void {
+        this.#content_listeners.delete(name);
+    }
+
+    get id() {
+        return this.#id;
+    }
+
+    get content(): YjsContentOperation {
+        if (this.type === BlockTypes.block) {
+            const content = this.#block.get('content');
+            if (content instanceof YAbstractType) {
+                return new YjsContentOperation(content);
+            } else {
+                throw new Error(`Invalid content type: ${typeof content}`);
+            }
+        } else if (this.type === BlockTypes.binary && this.#binary) {
+            return new YjsContentOperation(this.#binary);
+        }
+        throw new Error(
+            `Invalid content type: ${this.type}, ${this.#block.get(
+                'content'
+            )}, ${this.#binary}`
+        );
+    }
+
+    get type(): BlockItem<YjsContentOperation>['type'] {
+        return this.#block.get(
+            'type'
+        ) as BlockItem<YjsContentOperation>['type'];
+    }
+
+    get flavor(): BlockItem<YjsContentOperation>['flavor'] {
+        return this.#block.get(
+            'flavor'
+        ) as BlockItem<YjsContentOperation>['flavor'];
+    }
+
+    // TODO: bad case. Need to optimize.
+    setFlavor(flavor: BlockItem<YjsContentOperation>['flavor']) {
+        this.#block.set('flavor', flavor);
+    }
+
+    get created(): BlockItem<YjsContentOperation>['created'] {
+        return this.#block.get(
+            'created'
+        ) as BlockItem<YjsContentOperation>['created'];
+    }
+
+    get updated(): number {
+        return this.#get_updated(this.#id) || this.created;
+    }
+
+    get creator(): string | undefined {
+        return this.#get_creator(this.#id);
+    }
+
+    get children(): string[] {
+        return this.#children.toArray();
+    }
+
+    getChildren(ids?: (string | undefined)[]): YjsBlockInstance[] {
+        const query_ids = ids?.filter((id): id is string => !!id) || [];
+        const exists_ids = this.#children.map(id => id);
+        const filter_ids = query_ids.length ? query_ids : exists_ids;
+        return exists_ids
+            .filter(id => filter_ids.includes(id))
+            .map(id => this.#get_block_instance(id))
+            .filter((v): v is YjsBlockInstance => !!v);
+    }
+
+    hasChildren(id: string): boolean {
+        if (this.children.includes(id)) return true;
+        return this.getChildren().some(block => block.hasChildren(id));
+    }
+
+    private position_calculator(
+        max_pos: number,
+        position?: { pos?: number; before?: string; after?: string }
+    ) {
+        const { pos, before, after } = position || {};
+        if (typeof pos === 'number' && Number.isInteger(pos)) {
+            if (pos >= 0 && pos < max_pos) {
+                return pos;
+            }
+        } else if (before) {
+            const current_pos = this.#children_map.get(before || '');
+            if (
+                typeof current_pos === 'number' &&
+                Number.isInteger(current_pos)
+            ) {
+                const prev_pos = current_pos;
+                if (prev_pos >= 0 && prev_pos < max_pos) {
+                    return prev_pos;
+                }
+            }
+        } else if (after) {
+            const current_pos = this.#children_map.get(after || '');
+            if (
+                typeof current_pos === 'number' &&
+                Number.isInteger(current_pos)
+            ) {
+                const next_pos = current_pos + 1;
+                if (next_pos >= 0 && next_pos < max_pos) {
+                    return next_pos;
+                }
+            }
+        }
+        return undefined;
+    }
+
+    async insertChildren(
+        block: YjsBlockInstance,
+        pos?: { pos?: number; before?: string; after?: string }
+    ): Promise<void> {
+        const content = block[GET_BLOCK_ITEM]();
+        if (content) {
+            const lastIndex = this.#children_map.get(block.id);
+            if (typeof lastIndex === 'number') {
+                this.#children.delete(lastIndex);
+                this.#children_map = getMapFromYArray(this.#children);
+            }
+
+            const position = this.position_calculator(
+                this.#children_map.size,
+                pos
+            );
+            if (typeof position === 'number') {
+                this.#children.insert(position, [block.id]);
+            } else {
+                this.#children.push([block.id]);
+            }
+            await this.#set_block(block.id, content);
+            this.#children_map = getMapFromYArray(this.#children);
+        }
+    }
+
+    removeChildren(ids: (string | undefined)[]): Promise<string[]> {
+        return new Promise(resolve => {
+            if (this.#children.doc) {
+                transact(this.#children.doc, () => {
+                    const failed = [];
+                    for (const id of ids) {
+                        let idx = -1;
+                        for (const block_id of this.#children) {
+                            idx += 1;
+                            if (block_id === id) {
+                                this.#children.delete(idx);
+                                break;
+                            }
+                        }
+                        if (id) failed.push(id);
+                    }
+
+                    this.#children_map = getMapFromYArray(this.#children);
+                    resolve(failed);
+                });
+            } else {
+                resolve(ids.filter((id): id is string => !!id));
+            }
+        });
+    }
+
+    public scopedHistory(scope: any[]): HistoryManager {
+        return new YjsHistoryManager(this.#block, scope);
+    }
+
+    [GET_BLOCK_ITEM]() {
+        // check null & undefined
+        if (this.content != null) {
+            return {
+                type: this.type,
+                flavor: this.flavor,
+                children: this.#children.slice(),
+                created: this.created,
+                content: this.content,
+            };
+        }
+        return undefined;
+    }
+}
diff --git a/libs/datasource/jwt/src/adapter/yjs/gatekeeper.ts b/libs/datasource/jwt/src/adapter/yjs/gatekeeper.ts
new file mode 100644
index 000000000..1dd739de4
--- /dev/null
+++ b/libs/datasource/jwt/src/adapter/yjs/gatekeeper.ts
@@ -0,0 +1,53 @@
+import { Map as YMap } from 'yjs';
+
+export class GateKeeper {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    #user_id: string;
+    #creators: YMap<string>;
+    #common: YMap<string>;
+
+    constructor(userId: string, creators: YMap<string>, common: YMap<string>) {
+        this.#user_id = userId;
+        this.#creators = creators;
+        this.#common = common;
+    }
+
+    getCreator(block_id: string): string | undefined {
+        return this.#creators.get(block_id) || this.#common.get(block_id);
+    }
+
+    setCreator(block_id: string) {
+        if (!this.#creators.get(block_id)) {
+            this.#creators.set(block_id, this.#user_id);
+        }
+    }
+
+    setCommon(block_id: string) {
+        if (!this.#creators.get(block_id) && !this.#common.get(block_id)) {
+            this.#common.set(block_id, this.#user_id);
+        }
+    }
+
+    private check_delete(block_id: string): boolean {
+        const creator = this.#creators.get(block_id);
+        return creator === this.#user_id || !!this.#common.get(block_id);
+    }
+
+    checkDeleteLists(block_ids: string[]) {
+        const success = [];
+        const fail = [];
+        for (const block_id of block_ids) {
+            if (this.check_delete(block_id)) {
+                success.push(block_id);
+            } else {
+                fail.push(block_id);
+            }
+        }
+        return [success, fail];
+    }
+
+    clear() {
+        this.#creators.clear();
+        this.#common.clear();
+    }
+}
diff --git a/libs/datasource/jwt/src/adapter/yjs/history.ts b/libs/datasource/jwt/src/adapter/yjs/history.ts
new file mode 100644
index 000000000..0434d340d
--- /dev/null
+++ b/libs/datasource/jwt/src/adapter/yjs/history.ts
@@ -0,0 +1,73 @@
+import { Map as YMap, UndoManager } from 'yjs';
+
+import { HistoryCallback, HistoryManager } from '../../adapter';
+
+type StackItem = UndoManager['undoStack'][0];
+
+export class YjsHistoryManager implements HistoryManager {
+    readonly #blocks: YMap<any>;
+    readonly #history_manager: UndoManager;
+    readonly #push_listeners: Map<string, HistoryCallback<any>>;
+    readonly #pop_listeners: Map<string, HistoryCallback<any>>;
+
+    constructor(scope: YMap<any>, tracker?: any[]) {
+        this.#blocks = scope;
+        this.#history_manager = new UndoManager(scope, {
+            trackedOrigins: tracker ? new Set(tracker) : undefined,
+        });
+
+        this.#push_listeners = new Map();
+        this.#history_manager.on(
+            'stack-item-added',
+            (event: { stackItem: StackItem }) => {
+                const meta = event.stackItem.meta;
+                for (const listener of this.#push_listeners.values()) {
+                    listener(meta);
+                }
+            }
+        );
+
+        this.#pop_listeners = new Map();
+        this.#history_manager.on(
+            'stack-item-popped',
+            (event: { stackItem: StackItem }) => {
+                const meta = event.stackItem.meta;
+                for (const listener of this.#pop_listeners.values()) {
+                    listener(new Map(meta));
+                }
+            }
+        );
+    }
+
+    onPush<T = unknown>(name: string, callback: HistoryCallback<T>): void {
+        this.#push_listeners.set(name, callback);
+    }
+
+    offPush(name: string): boolean {
+        return this.#push_listeners.delete(name);
+    }
+
+    onPop<T = unknown>(name: string, callback: HistoryCallback<T>): void {
+        this.#pop_listeners.set(name, callback);
+    }
+
+    offPop(name: string): boolean {
+        return this.#pop_listeners.delete(name);
+    }
+
+    break(): void {
+        // this.#history_manager.
+    }
+
+    undo<T = unknown>(): Map<string, T> | undefined {
+        return this.#history_manager.undo()?.meta;
+    }
+
+    redo<T = unknown>(): Map<string, T> | undefined {
+        return this.#history_manager.redo()?.meta;
+    }
+
+    clear(): void {
+        return this.#history_manager.clear();
+    }
+}
diff --git a/libs/datasource/jwt/src/adapter/yjs/index.ts b/libs/datasource/jwt/src/adapter/yjs/index.ts
new file mode 100644
index 000000000..81ab0adc2
--- /dev/null
+++ b/libs/datasource/jwt/src/adapter/yjs/index.ts
@@ -0,0 +1,605 @@
+/* eslint-disable max-lines */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/// <reference types="wicg-file-system-access" />
+import { Buffer } from 'buffer';
+import { saveAs } from 'file-saver';
+import { fromEvent } from 'file-selector';
+import LRUCache from 'lru-cache';
+import { debounce } from 'ts-debounce';
+import { nanoid } from 'nanoid';
+import { IndexeddbPersistence } from 'y-indexeddb';
+import { Awareness } from 'y-protocols/awareness.js';
+import {
+    Doc,
+    Array as YArray,
+    Map as YMap,
+    transact,
+    encodeStateAsUpdate,
+    applyUpdate,
+} from 'yjs';
+
+import { WebsocketProvider } from '@toeverything/datasource/jwt-rpc';
+
+import {
+    AsyncDatabaseAdapter,
+    BlockListener,
+    ChangedStateKeys,
+    HistoryManager,
+} from '../../adapter';
+import { BucketBackend, BlockItem, BlockTypes } from '../../types';
+import { getLogger, sha3, sleep } from '../../utils';
+
+import { YjsRemoteBinaries } from './binary';
+import { YjsBlockInstance } from './block';
+import { GateKeeper } from './gatekeeper';
+import {
+    YjsContentOperation,
+    DO_NOT_USE_THIS_OR_YOU_WILL_BE_FIRED_SYMBOL_INTO_INNER as INTO_INNER,
+} from './operation';
+import { EmitEvents, Suspend } from './listener';
+import { YjsHistoryManager } from './history';
+
+declare const JWT_DEV: boolean;
+const logger = getLogger('BlockDB:yjs');
+
+type YjsProviders = {
+    awareness: Awareness;
+    idb: IndexeddbPersistence;
+    binariesIdb: IndexeddbPersistence;
+    ws?: WebsocketProvider;
+    backend: string;
+    gatekeeper: GateKeeper;
+    userId: string;
+    remoteToken?: string; // remote storage token
+};
+const _yjsDatabaseInstance = new Map<string, YjsProviders>();
+
+async function _initWebsocketProvider(
+    url: string,
+    room: string,
+    doc: Doc,
+    token?: string,
+    params?: YjsInitOptions['params']
+): Promise<[Awareness, WebsocketProvider | undefined]> {
+    const awareness = new Awareness(doc);
+    if (token && !process.env['NX_FREE_LOGIN']) {
+        const ws = new WebsocketProvider(token, url, room, doc, {
+            awareness,
+            params,
+        }) as any; // TODO: type is erased after cascading references
+
+        // Wait for ws synchronization to complete, otherwise the data will be modified in reverse, which can be optimized later
+        return new Promise((resolve, reject) => {
+            // TODO: synced will also be triggered on reconnection after losing sync
+            // There needs to be an event mechanism to emit the synchronization state to the upper layer
+            ws.once('synced', () => resolve([awareness, ws]));
+            ws.once('lost-connection', () => resolve([awareness, ws]));
+            ws.on('connection-error', reject);
+        });
+    } else {
+        return [awareness, undefined];
+    }
+}
+
+const _asyncInitLoading = new Set<string>();
+const _waitLoading = async (workspace: string) => {
+    while (_asyncInitLoading.has(workspace)) {
+        await sleep();
+    }
+};
+
+async function _initYjsDatabase(
+    backend: string,
+    workspace: string,
+    options: {
+        params: YjsInitOptions['params'];
+        userId: string;
+        token?: string;
+    }
+): Promise<YjsProviders> {
+    if (_asyncInitLoading.has(workspace)) {
+        await _waitLoading(workspace);
+    }
+    const instance = _yjsDatabaseInstance.get(workspace);
+    // tTODO:odo temporarily handle this
+    if (
+        instance &&
+        (instance.userId === options.userId || options.userId === 'default')
+    ) {
+        return instance;
+    }
+    // if (instance) return instance;
+    _asyncInitLoading.add(workspace);
+    const { params, userId, token: remoteToken } = options;
+
+    const doc = new Doc({ autoLoad: true, shouldLoad: true });
+
+    const idb = await new IndexeddbPersistence(workspace, doc).whenSynced;
+    const [awareness, ws] = await _initWebsocketProvider(
+        backend,
+        workspace,
+        doc,
+        remoteToken,
+        params
+    );
+
+    const binaries = new Doc({ autoLoad: true, shouldLoad: true });
+    const binariesIdb = await new IndexeddbPersistence(
+        `${workspace}_binaries`,
+        binaries
+    ).whenSynced;
+
+    const gatekeeper = new GateKeeper(
+        userId,
+        doc.getMap('creators'),
+        doc.getMap('common')
+    );
+
+    _yjsDatabaseInstance.set(workspace, {
+        awareness,
+        idb,
+        binariesIdb,
+        ws,
+        backend,
+        gatekeeper,
+        userId,
+        remoteToken,
+    });
+    _asyncInitLoading.delete(workspace);
+
+    return {
+        awareness,
+        idb,
+        binariesIdb,
+        ws,
+        backend,
+        gatekeeper,
+        userId,
+        remoteToken,
+    };
+}
+
+export type { YjsBlockInstance } from './block';
+export type { YjsContentOperation } from './operation';
+
+export type YjsInitOptions = {
+    backend: typeof BucketBackend[keyof typeof BucketBackend];
+    params?: Record<string, string>;
+    userId?: string;
+    token?: string;
+};
+
+export class YjsAdapter implements AsyncDatabaseAdapter<YjsContentOperation> {
+    readonly #provider: YjsProviders;
+    readonly #doc: Doc; // doc instance
+    readonly #awareness: Awareness; // lightweight state synchronization
+    readonly #gatekeeper: GateKeeper; // Simple access control
+    readonly #history: YjsHistoryManager;
+
+    // Block Collection
+    // key is a randomly generated global id
+    readonly #blocks: YMap<YMap<unknown>>;
+    readonly #block_updated: YMap<number>;
+    // Maximum cache Block 1024, ttl 10 minutes
+    readonly #block_caches: LRUCache<string, YjsBlockInstance>;
+
+    readonly #binaries: YjsRemoteBinaries;
+
+    readonly #listener: Map<string, BlockListener<any>>;
+
+    static async init(
+        workspace: string,
+        options: YjsInitOptions
+    ): Promise<YjsAdapter> {
+        const { backend, params = {}, userId = 'default', token } = options;
+        const providers = await _initYjsDatabase(backend, workspace, {
+            params,
+            userId,
+            token,
+        });
+        return new YjsAdapter(providers);
+    }
+
+    private constructor(providers: YjsProviders) {
+        this.#provider = providers;
+        this.#doc = providers.idb.doc;
+        this.#awareness = providers.awareness;
+        this.#gatekeeper = providers.gatekeeper;
+
+        this.#blocks = this.#doc.getMap('blocks');
+        this.#block_updated = this.#doc.getMap('block_updated');
+        this.#block_caches = new LRUCache({ max: 1024, ttl: 1000 * 60 * 10 });
+        this.#binaries = new YjsRemoteBinaries(
+            providers.binariesIdb.doc.getMap(),
+            providers.remoteToken
+        );
+        this.#history = new YjsHistoryManager(this.#blocks);
+
+        this.#listener = new Map();
+
+        const debounced_editing_notifier = debounce(
+            () => {
+                const listener: BlockListener<Set<string>> | undefined =
+                    this.#listener.get('editing');
+                if (listener) {
+                    const mapping = this.#awareness.getStates();
+                    const editing_mapping: Record<string, string[]> = {};
+                    for (const {
+                        userId,
+                        editing,
+                        updated,
+                    } of mapping.values()) {
+                        // Only return the status with refresh time within 10 seconds
+                        if (
+                            userId &&
+                            editing &&
+                            updated &&
+                            typeof updated === 'number' &&
+                            updated + 1000 * 10 > Date.now()
+                        ) {
+                            if (!editing_mapping[editing])
+                                editing_mapping[editing] = [];
+                            editing_mapping[editing].push(userId);
+                        }
+                    }
+                    listener(
+                        new Map(
+                            Object.entries(editing_mapping).map(([k, v]) => [
+                                k,
+                                new Set(v),
+                            ])
+                        )
+                    );
+                }
+            },
+            200,
+            { maxWait: 1000 }
+        );
+
+        this.#awareness.setLocalStateField('userId', providers.userId);
+
+        this.#awareness.on('update', debounced_editing_notifier);
+
+        this.#blocks.observeDeep(events => {
+            const now = Date.now();
+
+            const keys = events.flatMap(e => {
+                if ((e.path?.length | 0) > 0) {
+                    return [
+                        [e.path[0], 'update'] as [string, ChangedStateKeys],
+                    ];
+                } else {
+                    return Array.from(e.changes.keys.entries()).map(
+                        ([k, { action }]) =>
+                            [k, action] as [string, ChangedStateKeys]
+                    );
+                }
+            });
+
+            EmitEvents(keys, this.#listener.get('updated'));
+
+            transact(this.#doc, () => {
+                for (const [key, action] of keys) {
+                    if (action === 'delete') {
+                        this.#block_updated.delete(key);
+                    } else {
+                        this.#block_updated.set(key, now);
+                    }
+                }
+            });
+        });
+    }
+
+    getUserId(): string {
+        return this.#provider.userId;
+    }
+
+    inspector() {
+        const resolve_block = (blocks: Record<string, any>, id: string) => {
+            const block = blocks[id];
+            if (block) {
+                return {
+                    ...block,
+                    children: block.children.map((id: string) =>
+                        resolve_block(blocks, id)
+                    ),
+                };
+            }
+        };
+
+        return {
+            save: () => {
+                const binary = encodeStateAsUpdate(this.#doc);
+                saveAs(
+                    new Blob([binary]),
+                    `affine_workspace_${new Date().toDateString()}.apk`
+                );
+            },
+            load: async () => {
+                const handles = await window.showOpenFilePicker({
+                    types: [
+                        {
+                            description: 'Affine Package',
+                            accept: {
+                                // eslint-disable-next-line @typescript-eslint/naming-convention
+                                'application/affine': ['.apk'],
+                            },
+                        },
+                    ],
+                });
+                const [file] = (await fromEvent(handles)) as File[];
+                const binary = await file.arrayBuffer();
+                await this.#provider.idb.clearData();
+                const doc = new Doc({ autoLoad: true, shouldLoad: true });
+                let updated = 0;
+                let isUpdated = false;
+                doc.on('update', () => {
+                    isUpdated = true;
+                    updated += 1;
+                });
+                setInterval(() => {
+                    if (updated > 0) updated -= 1;
+                }, 500);
+
+                const update_check = new Promise<void>(resolve => {
+                    const check = async () => {
+                        while (!isUpdated || updated > 0) {
+                            await sleep();
+                        }
+                        resolve();
+                    };
+                    check();
+                });
+                await new IndexeddbPersistence(this.#provider.idb.name, doc)
+                    .whenSynced;
+                applyUpdate(doc, new Uint8Array(binary));
+                await update_check;
+                console.log('load success');
+            },
+            parse: () => this.#doc.toJSON(),
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            parse_page: (page_id: string) => {
+                const blocks = this.#blocks.toJSON();
+                return resolve_block(blocks, page_id);
+            },
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            parse_pages: (resolve = false) => {
+                const blocks = this.#blocks.toJSON();
+                return Object.fromEntries(
+                    Object.entries(blocks)
+                        .filter(([, block]) => block.flavor === 'page')
+                        .map(([key, block]) => {
+                            if (resolve) {
+                                return resolve_block(blocks, key);
+                            } else {
+                                return [key, block];
+                            }
+                        })
+                );
+            },
+            clear: () => {
+                this.#blocks.clear();
+                this.#block_updated.clear();
+                this.#gatekeeper.clear();
+            },
+        };
+    }
+
+    async createBlock(
+        options: Pick<BlockItem<YjsContentOperation>, 'type' | 'flavor'> & {
+            uuid?: string;
+            binary?: ArrayBufferLike;
+        }
+    ): Promise<YjsBlockInstance> {
+        const uuid = options.uuid || `affine${nanoid(16)}`;
+        if (options.type === BlockTypes.binary) {
+            if (options.binary && options.binary instanceof ArrayBuffer) {
+                const array = new YArray();
+                array.insert(0, [options.binary]);
+                const block = {
+                    type: options.type,
+                    flavor: options.flavor,
+                    children: [] as string[],
+                    created: Date.now(),
+                    content: new YjsContentOperation(array),
+                    hash: sha3(Buffer.from(options.binary)),
+                };
+                await this.set_block(uuid, block);
+                return (await this.getBlock(uuid))!;
+            } else {
+                throw new Error(`Invalid binary type: ${options.binary}`);
+            }
+        } else {
+            const block = {
+                type: options.type,
+                flavor: options.flavor,
+                children: [] as string[],
+                created: Date.now(),
+                content: new YjsContentOperation(new YMap()),
+            };
+            await this.set_block(uuid, block);
+            return (await this.getBlock(uuid))!;
+        }
+    }
+
+    private get_updated(id: string) {
+        return this.#block_updated.get(id);
+    }
+
+    private get_creator(id: string) {
+        return this.#gatekeeper.getCreator(id);
+    }
+
+    private get_block_sync(id: string): YjsBlockInstance | undefined {
+        const cached = this.#block_caches.get(id);
+        if (cached) {
+            // Synchronous read cannot read binary
+            if (cached.type === BlockTypes.block) {
+                return cached;
+            }
+            return undefined;
+        }
+
+        const block = this.#blocks.get(id);
+
+        // Synchronous read cannot read binary
+        if (block && block.get('type') === BlockTypes.block) {
+            return new YjsBlockInstance({
+                id,
+                block,
+                setBlock: this.set_block.bind(this),
+                getUpdated: this.get_updated.bind(this),
+                getCreator: this.get_creator.bind(this),
+                getBlockInstance: this.get_block_sync.bind(this),
+            });
+        }
+
+        return undefined;
+    }
+
+    async getBlock(id: string): Promise<YjsBlockInstance | undefined> {
+        const block_instance = this.get_block_sync(id);
+        if (block_instance) return block_instance;
+        const block = this.#blocks.get(id);
+        if (block && block.get('type') === BlockTypes.binary) {
+            const binary = await this.#binaries.get(
+                block.get('hash') as string
+            );
+            if (binary) {
+                return new YjsBlockInstance({
+                    id,
+                    block,
+                    binary,
+                    setBlock: this.set_block.bind(this),
+                    getUpdated: this.get_updated.bind(this),
+                    getCreator: this.get_creator.bind(this),
+                    getBlockInstance: this.get_block_sync.bind(this),
+                });
+            }
+        }
+        return undefined;
+    }
+
+    async getBlockByFlavor(
+        flavor: BlockItem<YjsContentOperation>['flavor']
+    ): Promise<string[]> {
+        const keys: string[] = [];
+        this.#blocks.forEach((doc, key) => {
+            if (doc.get('flavor') === flavor) {
+                keys.push(key);
+            }
+        });
+
+        return keys;
+    }
+
+    async getBlockByType(
+        type: BlockItem<YjsContentOperation>['type']
+    ): Promise<string[]> {
+        const keys: string[] = [];
+        this.#blocks.forEach((doc, key) => {
+            if (doc.get('type') === type) {
+                keys.push(key);
+            }
+        });
+
+        return keys;
+    }
+
+    private async set_block(
+        key: string,
+        item: BlockItem<YjsContentOperation> & { hash?: string }
+    ): Promise<void> {
+        return new Promise<void>((resolve, reject) => {
+            const block = this.#blocks.get(key) || new YMap();
+            transact(this.#doc, () => {
+                // Insert only if the block doesn't exist yet
+                // Other modification operations are done in the block instance
+                let uploaded: Promise<void> | undefined;
+                if (!block.size) {
+                    const content = item.content[INTO_INNER]();
+                    if (!content) return reject();
+
+                    const children = new YArray();
+                    children.push(item.children);
+
+                    block.set('type', item.type);
+                    block.set('flavor', item.flavor);
+                    block.set('children', children);
+                    block.set('created', item.created);
+                    if (item.type === BlockTypes.block) {
+                        block.set('content', content);
+                    } else if (item.type === BlockTypes.binary && item.hash) {
+                        if (content instanceof YArray) {
+                            block.set('hash', item.hash);
+                            if (!this.#binaries.has(item.hash)) {
+                                uploaded = this.#binaries.set(
+                                    item.hash,
+                                    content
+                                );
+                            }
+                        } else {
+                            throw new Error(
+                                'binary content must be an buffer yarray'
+                            );
+                        }
+                    } else {
+                        throw new Error('invalid block type: ' + item.type);
+                    }
+
+                    this.#blocks.set(key, block);
+                }
+
+                if (item.flavor === 'page') {
+                    this.#awareness.setLocalStateField('editing', key);
+                    this.#awareness.setLocalStateField('updated', Date.now());
+                }
+                // References do not add delete restrictions
+                if (item.flavor === 'reference') {
+                    this.#gatekeeper.setCommon(key);
+                } else {
+                    this.#gatekeeper.setCreator(key);
+                }
+
+                if (uploaded) {
+                    // TODO: there should be a mechanism to retry the upload
+                    uploaded.catch(err => {
+                        // undo set on failure
+                        console.error('Failed to upload object: ', err);
+                        this.deleteBlocks([key]);
+                        reject(err);
+                    });
+                }
+                resolve();
+            });
+        });
+    }
+
+    async checkBlocks(keys: string[]): Promise<boolean> {
+        return (
+            keys.filter(key => !!this.#blocks.get(key)).length === keys.length
+        );
+    }
+
+    async deleteBlocks(keys: string[]): Promise<string[]> {
+        const [success, fail] = this.#gatekeeper.checkDeleteLists(keys);
+        transact(this.#doc, () => {
+            for (const key of success) {
+                this.#blocks.delete(key);
+            }
+        });
+        return fail;
+    }
+
+    on<S, R>(key: 'editing' | 'updated', listener: BlockListener<S, R>): void {
+        this.#listener.set(key, listener);
+    }
+
+    suspend(suspend: boolean) {
+        Suspend(suspend);
+    }
+
+    public history(): HistoryManager {
+        return this.#history;
+    }
+}
diff --git a/libs/datasource/jwt/src/adapter/yjs/listener.ts b/libs/datasource/jwt/src/adapter/yjs/listener.ts
new file mode 100644
index 000000000..d9b4de123
--- /dev/null
+++ b/libs/datasource/jwt/src/adapter/yjs/listener.ts
@@ -0,0 +1,96 @@
+import { produce } from 'immer';
+import { debounce } from 'ts-debounce';
+import { YEvent } from 'yjs';
+import { BlockListener, ChangedStateKeys } from '../index';
+
+let listener_suspend = false;
+
+let listener_map = new Map<BlockListener, [string, ChangedStateKeys][]>();
+
+const debounced_suspend_notifier = debounce(
+    (listener?: BlockListener) => {
+        if (listener) {
+            listener_map = produce(listener_map, draft => {
+                const events = draft.get(listener);
+                if (events) {
+                    listener(new Map(events));
+                    draft.delete(listener);
+                }
+            });
+        }
+    },
+    500,
+    { maxWait: 2000 }
+);
+
+/**
+ * Suspend instant update event dispatch, extend to at least 500ms once, and up to 2000ms once when triggered continuously
+ * @param suspend true: suspend monitoring, false: resume monitoring
+ */
+export function Suspend(suspend: boolean) {
+    listener_suspend = produce(listener_suspend, draft => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        draft = suspend;
+    });
+    if (!suspend && listener_map.size) {
+        listener_map = produce(listener_map, draft => {
+            for (const [listener, events] of draft) {
+                listener(new Map(events));
+            }
+            draft.clear();
+        });
+    }
+}
+
+export function EmitEvents(
+    events: [string, ChangedStateKeys][],
+    listener?: BlockListener
+) {
+    if (listener) {
+        if (listener_suspend) {
+            listener_map = produce(listener_map, draft => {
+                const old_events = listener_map.get(listener) || [];
+                draft.set(listener, [...old_events, ...events]);
+            });
+            debounced_suspend_notifier(listener);
+        } else {
+            listener(new Map(events));
+        }
+    }
+}
+
+export function ChildrenListenerHandler(
+    listeners: Map<string, BlockListener>,
+    event: YEvent<any>
+) {
+    if (listeners.size) {
+        const keys = Array.from(event.keys.entries()).map(
+            ([key, { action }]) => [key, action] as [string, ChangedStateKeys]
+        );
+        for (const listener of listeners.values()) {
+            EmitEvents(keys, listener);
+        }
+    }
+}
+
+export function ContentListenerHandler(
+    listeners: Map<string, BlockListener>,
+    events: YEvent<any>[]
+) {
+    if (listeners.size) {
+        const keys = events.flatMap(e => {
+            if ((e.path?.length | 0) > 0) {
+                return [[e.path[0], 'update'] as [string, 'update']];
+            } else {
+                return Array.from(e.changes.keys.entries()).map(
+                    ([k, { action }]) => [k, action] as [string, typeof action]
+                );
+            }
+        });
+        if (keys.length) {
+            for (const listener of listeners.values()) {
+                EmitEvents(keys, listener);
+            }
+        }
+    }
+}
diff --git a/libs/datasource/jwt/src/adapter/yjs/operation.ts b/libs/datasource/jwt/src/adapter/yjs/operation.ts
new file mode 100644
index 000000000..8cb825ad3
--- /dev/null
+++ b/libs/datasource/jwt/src/adapter/yjs/operation.ts
@@ -0,0 +1,388 @@
+/* eslint-disable max-lines */
+import {
+    AbstractType as YAbstractType,
+    Array as YArray,
+    Map as YMap,
+    Text as YText,
+} from 'yjs';
+
+import {
+    ArrayOperation,
+    BaseTypes,
+    BlockListener,
+    ContentOperation,
+    ContentTypes,
+    MapOperation,
+    Operable,
+    TextOperation,
+    TextToken,
+} from '../index';
+import { ChildrenListenerHandler, ContentListenerHandler } from './listener';
+
+const INTO_INNER = Symbol('INTO_INNER');
+
+export const DO_NOT_USE_THIS_OR_YOU_WILL_BE_FIRED_SYMBOL_INTO_INNER: typeof INTO_INNER =
+    INTO_INNER;
+
+function auto_get(root: ContentOperation, key: string): unknown | undefined {
+    const array = root.asArray();
+    if (array && !Number.isNaN(Number(key))) return array.get(Number(key));
+    const map = root.asMap();
+    if (map) return map.get(key);
+    const text = root.asText();
+    if (text) return text.toString();
+    console.error('auto_get unknown root', root, key);
+    return undefined;
+}
+
+function auto_set(root: ContentOperation, key: string, data: BaseTypes): void {
+    const array = root.asArray<BaseTypes>();
+    if (array && !Number.isNaN(Number(key))) {
+        return array.insert(Number(key), [data]);
+    }
+    const map = root.asMap<BaseTypes>();
+    if (map) {
+        return map.set(key, data);
+    }
+    const text = root.asText();
+    if (text && !Number.isNaN(Number(key)) && typeof data === 'string') {
+        return text.insert(Number(key), data);
+    }
+    console.error('autoSet unknown root or path', root, key, data);
+}
+
+export class YjsContentOperation implements ContentOperation {
+    readonly #content: YAbstractType<unknown>;
+
+    constructor(content: YAbstractType<any>) {
+        this.#content = content;
+    }
+
+    get length(): number {
+        if (this.#content instanceof YMap) {
+            return this.#content.size;
+        }
+        if (this.#content instanceof YArray || this.#content instanceof YText) {
+            return this.#content.length;
+        }
+        return 0;
+    }
+
+    createText(): YjsTextOperation {
+        return new YjsTextOperation(new YText());
+    }
+
+    createArray<
+        T extends ContentTypes = ContentOperation
+    >(): YjsArrayOperation<T> {
+        return new YjsArrayOperation(new YArray());
+    }
+
+    createMap<T extends ContentTypes = ContentOperation>(): YjsMapOperation<T> {
+        return new YjsMapOperation(new YMap());
+    }
+
+    asText(): YjsTextOperation | undefined {
+        if (this.#content instanceof YText) {
+            return new YjsTextOperation(this.#content);
+        }
+        return undefined;
+    }
+
+    asArray<T extends ContentTypes = ContentOperation>():
+        | YjsArrayOperation<T>
+        | undefined {
+        if (this.#content instanceof YArray) {
+            return new YjsArrayOperation(this.#content);
+        }
+        return undefined;
+    }
+
+    asMap<T extends ContentTypes = ContentOperation>():
+        | YjsMapOperation<T>
+        | undefined {
+        if (this.#content instanceof YMap) {
+            return new YjsMapOperation(this.#content);
+        }
+        return undefined;
+    }
+
+    autoGet(
+        root: ThisType<ContentOperation> | Record<string, unknown>,
+        path: string[]
+    ): unknown | undefined {
+        if (root) {
+            if (path.length === 0) {
+                return root;
+            } else if (root instanceof YjsContentOperation) {
+                const [key, ...rest] = path;
+                const new_root = auto_get(root, key);
+                if (new_root) {
+                    return this.autoGet(new_root as typeof root, rest);
+                }
+            } else if (typeof root === 'object') {
+                throw new Error(
+                    'autoGet must not get a non-value type, this is a deprecated behavior'
+                );
+            }
+        }
+        console.error('autoGet unknown root', root, path);
+        return undefined;
+    }
+
+    autoSet(
+        root: ThisType<ContentOperation>,
+        path: string[],
+        data: BaseTypes,
+        partial?: boolean
+    ): void {
+        if (root) {
+            if (path.length === 0) {
+                if (data && typeof data === 'object') {
+                    throw new Error(
+                        'autoSet must not set a non-value type, this is a deprecated behavior'
+                    );
+                } else {
+                    console.error('autoSet unknown data', root, path, data);
+                }
+                return;
+            }
+            if (root instanceof YjsContentOperation) {
+                if (path.length === 1) {
+                    const [key] = path;
+                    if (key) return auto_set(root, key, data);
+                    console.error('autoSet unknown path', root, path, data);
+                    return;
+                }
+                const [key, ...rest] = path;
+                const new_root = auto_get(root, key);
+                if (new_root && new_root instanceof YjsContentOperation) {
+                    return this.autoSet(new_root, rest, data, partial);
+                } else {
+                    throw new Error(
+                        'autoSet must not set a non-value type, this is a deprecated behavior'
+                    );
+                }
+            }
+        }
+        console.error('autoSet unknown root', root, path);
+    }
+
+    protected into_inner<T>(content: Operable<T>): T {
+        if (content instanceof YjsContentOperation) {
+            return content[INTO_INNER]() as unknown as T;
+        } else {
+            return content as T;
+        }
+    }
+
+    protected to_operable<T>(content: T): Operable<T> {
+        if (content instanceof YAbstractType) {
+            return new YjsContentOperation(content) as unknown as Operable<T>;
+        }
+        return content as Operable<T>;
+    }
+
+    [INTO_INNER](): YAbstractType<unknown> | undefined {
+        if (this.#content instanceof YAbstractType) {
+            return this.#content;
+        }
+        return undefined;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    private toJSON() {
+        return this.#content.toJSON();
+    }
+}
+
+class YjsTextOperation extends YjsContentOperation implements TextOperation {
+    readonly #content: YText;
+
+    constructor(content: YText) {
+        super(content);
+        this.#content = content;
+    }
+
+    insert(
+        index: number,
+        content: string,
+        format?: Record<string, string>
+    ): void {
+        this.#content.insert(index, content, format);
+    }
+
+    format(
+        index: number,
+        length: number,
+        format: Record<string, string>
+    ): void {
+        this.#content.format(index, length, format);
+    }
+
+    delete(index: number, length: number): void {
+        this.#content.delete(index, length);
+    }
+
+    setAttribute(name: string, value: BaseTypes) {
+        this.#content.setAttribute(name, value);
+    }
+
+    getAttribute<T extends BaseTypes = string>(name: string): T | undefined {
+        return this.#content.getAttribute(name);
+    }
+
+    override toString(): TextToken[] {
+        return this.#content.toDelta();
+    }
+}
+
+class YjsArrayOperation<T extends ContentTypes>
+    extends YjsContentOperation
+    implements ArrayOperation<T>
+{
+    readonly #content: YArray<T>;
+    readonly #listeners: Map<string, BlockListener>;
+
+    constructor(content: YArray<T>) {
+        super(content);
+        this.#content = content;
+        this.#listeners = new Map();
+
+        this.#content.observe(event =>
+            ChildrenListenerHandler(this.#listeners, event)
+        );
+    }
+
+    on(name: string, listener: BlockListener) {
+        this.#listeners.set(name, listener);
+    }
+
+    off(name: string) {
+        this.#listeners.delete(name);
+    }
+
+    insert(index: number, content: Array<Operable<T>>): void {
+        this.#content.insert(
+            index,
+            content.map(v => this.into_inner(v))
+        );
+    }
+
+    delete(index: number, length: number): void {
+        this.#content.delete(index, length);
+    }
+
+    push(content: Array<Operable<T>>): void {
+        this.#content.push(content.map(v => this.into_inner(v)));
+    }
+
+    unshift(content: Array<Operable<T>>): void {
+        this.#content.unshift(content.map(v => this.into_inner(v)));
+    }
+
+    get(index: number): Operable<T> | undefined {
+        const content = this.#content.get(index);
+        if (content) return this.to_operable(content);
+        return undefined;
+    }
+
+    private get_internal(index: number): T {
+        return this.#content.get(index);
+    }
+
+    slice(start?: number, end?: number): Operable<T>[] {
+        return this.#content.slice(start, end).map(v => this.to_operable(v));
+    }
+
+    map<R = unknown>(callback: (value: T, index: number) => R): R[] {
+        return this.#content.map((value, index) => callback(value, index));
+    }
+
+    // Traverse, if callback returns false, stop traversing
+    forEach(callback: (value: T, index: number) => boolean) {
+        for (let i = 0; i < this.#content.length; i++) {
+            const ret = callback(this.get_internal(i), i);
+            if (ret === false) {
+                break;
+            }
+        }
+    }
+
+    find<R = unknown>(
+        callback: (value: T, index: number) => boolean
+    ): R | undefined {
+        let result: R | undefined = undefined;
+        this.forEach((value, i) => {
+            const found = callback(value, i);
+            if (found) {
+                result = value as unknown as R;
+                return false;
+            }
+            return true;
+        });
+        return result;
+    }
+
+    findIndex(callback: (value: T, index: number) => boolean): number {
+        let position = -1;
+        this.forEach((value, i) => {
+            const found = callback(value, i);
+            if (found) {
+                position = i;
+                return false;
+            }
+            return true;
+        });
+        return position;
+    }
+}
+
+class YjsMapOperation<T extends ContentTypes>
+    extends YjsContentOperation
+    implements MapOperation<T>
+{
+    readonly #content: YMap<T>;
+    readonly #listeners: Map<string, BlockListener>;
+
+    constructor(content: YMap<T>) {
+        super(content);
+        this.#content = content;
+        this.#listeners = new Map();
+
+        content?.observeDeep(events =>
+            ContentListenerHandler(this.#listeners, events)
+        );
+    }
+
+    on(name: string, listener: BlockListener) {
+        this.#listeners.set(name, listener);
+    }
+
+    off(name: string) {
+        this.#listeners.delete(name);
+    }
+
+    set(key: string, value: Operable<T>): void {
+        if (value instanceof YjsContentOperation) {
+            const content = value[INTO_INNER]();
+            if (content) this.#content.set(key, content as unknown as T);
+        } else {
+            this.#content.set(key, value as T);
+        }
+    }
+
+    get(key: string): Operable<T> | undefined {
+        const content = this.#content.get(key);
+        if (content) return this.to_operable(content);
+        return undefined;
+    }
+
+    delete(key: string): void {
+        this.#content.delete(key);
+    }
+
+    has(key: string): boolean {
+        return this.#content.has(key);
+    }
+}
diff --git a/libs/datasource/jwt/src/block/abstract.ts b/libs/datasource/jwt/src/block/abstract.ts
new file mode 100644
index 000000000..30da2ffc5
--- /dev/null
+++ b/libs/datasource/jwt/src/block/abstract.ts
@@ -0,0 +1,372 @@
+import {
+    BlockInstance,
+    BlockListener,
+    BlockPosition,
+    ContentOperation,
+    ContentTypes,
+    HistoryManager,
+    MapOperation,
+} from '../adapter';
+import {
+    BlockTypes,
+    BlockTypeKeys,
+    BlockFlavors,
+    BlockFlavorKeys,
+} from '../types';
+import { getLogger } from '../utils';
+
+declare const JWT_DEV: boolean;
+const logger = getLogger('BlockDB:block');
+const logger_debug = getLogger('debug:BlockDB:block');
+
+const GET_BLOCK = Symbol('GET_BLOCK');
+const SET_PARENT = Symbol('SET_PARENT');
+
+export class AbstractBlock<
+    B extends BlockInstance<C>,
+    C extends ContentOperation
+> {
+    readonly #id: string;
+    readonly #block: BlockInstance<C>;
+    readonly #history: HistoryManager;
+    readonly #root?: AbstractBlock<B, C>;
+    readonly #parent_listener: Map<string, BlockListener>;
+
+    #parent?: AbstractBlock<B, C>;
+
+    constructor(
+        block: B,
+        root?: AbstractBlock<B, C>,
+        parent?: AbstractBlock<B, C>
+    ) {
+        this.#id = block.id;
+        this.#block = block;
+        this.#history = this.#block.scopedHistory([this.#id]);
+
+        this.#root = root;
+        this.#parent_listener = new Map();
+        this.#parent = parent;
+        JWT_DEV && logger_debug(`init: exists ${this.#id}`);
+    }
+
+    public get root() {
+        return this.#root;
+    }
+
+    protected get parent_node() {
+        return this.#parent;
+    }
+
+    protected _getParentPage(warning = true): string | undefined {
+        if (this.flavor === 'page') {
+            return this.#block.id;
+        } else if (!this.#parent) {
+            if (warning && this.flavor !== 'workspace') {
+                console.warn('parent not found');
+            }
+            return undefined;
+        } else {
+            return this.#parent.parent_page;
+        }
+    }
+
+    public get parent_page(): string | undefined {
+        return this._getParentPage();
+    }
+
+    public on(
+        event: 'content' | 'children' | 'parent',
+        name: string,
+        callback: BlockListener
+    ) {
+        if (event === 'parent') {
+            this.#parent_listener.set(name, callback);
+        } else {
+            this.#block.on(event, name, callback);
+        }
+    }
+
+    public off(event: 'content' | 'children' | 'parent', name: string) {
+        if (event === 'parent') {
+            this.#parent_listener.delete(name);
+        } else {
+            this.#block.off(event, name);
+        }
+    }
+
+    public addChildrenListener(name: string, listener: BlockListener) {
+        this.#block.addChildrenListener(name, listener);
+    }
+
+    public removeChildrenListener(name: string) {
+        this.#block.removeChildrenListener(name);
+    }
+
+    public addContentListener(name: string, listener: BlockListener) {
+        this.#block.addContentListener(name, listener);
+    }
+
+    public removeContentListener(name: string) {
+        this.#block.removeContentListener(name);
+    }
+
+    public getContent<
+        T extends ContentTypes = ContentOperation
+    >(): MapOperation<T> {
+        if (this.#block.type === BlockTypes.block) {
+            return this.#block.content.asMap() as MapOperation<T>;
+        }
+        throw new Error(
+            `this block not a structured block: ${this.#id}, ${
+                this.#block.type
+            }`
+        );
+    }
+
+    public getBinary(): ArrayBuffer | undefined {
+        if (this.#block.type === BlockTypes.binary) {
+            return this.#block.content.asArray<ArrayBuffer>()?.get(0);
+        }
+        throw new Error('this block not a binary block');
+    }
+
+    public get<R = unknown>(path: string[]): R {
+        const content = this.getContent();
+        return content.autoGet(content, path) as R;
+    }
+
+    public set<V = unknown>(path: string[], value: V, partial?: boolean) {
+        const content = this.getContent();
+        content.autoSet(content, path, value, partial);
+    }
+
+    private get_date_text(timestamp?: number): string | undefined {
+        try {
+            if (timestamp && !Number.isNaN(timestamp)) {
+                return new Date(timestamp)
+                    .toISOString()
+                    .split('T')[0]
+                    .replace(/-/g, '');
+            }
+            // eslint-disable-next-line no-empty
+        } catch (e) {}
+        return undefined;
+    }
+
+    // Last update UTC time
+    public get lastUpdated(): number {
+        return this.#block.updated || this.#block.created;
+    }
+
+    private get last_updated_date(): string | undefined {
+        return this.get_date_text(this.lastUpdated);
+    }
+
+    // create UTC time
+    public get created(): number {
+        return this.#block.created;
+    }
+
+    private get created_date(): string | undefined {
+        return this.get_date_text(this.created);
+    }
+
+    // creator id
+    public get creator(): string | undefined {
+        return this.#block.creator;
+    }
+
+    [GET_BLOCK]() {
+        return this.#block;
+    }
+
+    [SET_PARENT](parent: AbstractBlock<B, C>) {
+        this.#parent = parent;
+        const states: Map<string, 'update'> = new Map([[parent.id, 'update']]);
+        for (const listener of this.#parent_listener.values()) {
+            listener(states);
+        }
+    }
+
+    /**
+     * Get document index tags
+     */
+    public getTags(): string[] {
+        const created = this.created_date;
+        const updated = this.last_updated_date;
+
+        return [
+            `id:${this.#id}`,
+            `type:${this.type}`,
+            `type:${this.flavor}`,
+            this.flavor === BlockFlavors.page && `type:doc`, // normal documentation
+            this.flavor === BlockFlavors.tag && `type:card`, // tag document
+            // this.type === ??? && `type:theorem`, // global marked math formula
+            created && `created:${created}`,
+            updated && `updated:${updated}`,
+        ].filter((v): v is string => !!v);
+    }
+
+    /**
+     * current document instance id
+     */
+    public get id(): string {
+        return this.#id;
+    }
+
+    /**
+     * current block type
+     */
+    public get type(): typeof BlockTypes[BlockTypeKeys] {
+        return this.#block.type;
+    }
+
+    /**
+     * current block flavor
+     */
+    public get flavor(): typeof BlockFlavors[BlockFlavorKeys] {
+        return this.#block.flavor;
+    }
+
+    // TODO: flavor needs optimization
+    setFlavor(flavor: typeof BlockFlavors[BlockFlavorKeys]) {
+        this.#block.setFlavor(flavor);
+    }
+
+    public get children(): string[] {
+        return this.#block.children;
+    }
+
+    /**
+     * Insert sub-Block
+     * @param block Block instance
+     * @param position Insertion position, if it is empty, it will be inserted at the end. If the block already exists, the position will be moved
+     * @returns
+     */
+    public async insertChildren(
+        block: AbstractBlock<B, C>,
+        position?: BlockPosition
+    ) {
+        JWT_DEV && logger(`insertChildren: start`);
+
+        if (block.id === this.#id) return; // avoid self-reference
+        if (
+            this.type !== BlockTypes.block || // binary cannot insert subblocks
+            (block.type !== BlockTypes.block &&
+                this.flavor !== BlockFlavors.workspace) // binary can only be inserted into workspace
+        ) {
+            throw new Error('insertChildren: binary not allow insert children');
+        }
+
+        this.#block.insertChildren(block[GET_BLOCK](), position);
+        block[SET_PARENT](this);
+    }
+
+    public hasChildren(id: string): boolean {
+        return this.#block.hasChildren(id);
+    }
+
+    /**
+     * Get an instance of the child Block
+     * @param blockId block id
+     * @returns
+     */
+    protected get_children(blockId?: string): BlockInstance<C>[] {
+        JWT_DEV && logger(`get children: ${blockId}`);
+        return this.#block.getChildren([blockId]);
+    }
+
+    public removeChildren(blockId?: string) {
+        this.#block.removeChildren([blockId]);
+    }
+
+    public remove() {
+        JWT_DEV && logger(`remove: ${this.id}`);
+        if (this.flavor !== BlockFlavors.workspace) {
+            // Pages other than workspace have parents
+            this.parent_node!.removeChildren(this.id);
+        }
+    }
+
+    public update(path: string[], value: Record<string, any>) {
+        this.set(path, value);
+    }
+
+    private insert_blocks(
+        parentNode: AbstractBlock<B, C> | undefined,
+        blocks: AbstractBlock<B, C>[],
+        placement: 'before' | 'after',
+        referenceNode?: AbstractBlock<B, C>
+    ) {
+        if (!blocks || blocks.length === 0 || !parentNode) {
+            return;
+        }
+        // TODO: array equal
+        if (
+            !referenceNode &&
+            parentNode.children.join('') ===
+                blocks.map(node => node.id).join('')
+        ) {
+            return;
+        }
+        blocks.forEach(block => {
+            if (block.parent_node) {
+                block.remove();
+            }
+
+            const placement_info = {
+                [placement]:
+                    referenceNode?.id ||
+                    (parentNode.hasChildNodes() &&
+                        parentNode.children[
+                            placement === 'before'
+                                ? 0
+                                : parentNode.children.length - 1
+                        ]),
+            };
+
+            parentNode.insertChildren(
+                block,
+                placement_info[placement] ? placement_info : undefined
+            );
+        });
+    }
+
+    prepend(...blocks: AbstractBlock<B, C>[]) {
+        this.insert_blocks(this, blocks.reverse(), 'before');
+    }
+
+    append(...blocks: AbstractBlock<B, C>[]) {
+        this.insert_blocks(this, blocks, 'after');
+    }
+
+    before(...blocks: AbstractBlock<B, C>[]) {
+        this.insert_blocks(this.parent_node, blocks, 'before', this);
+    }
+
+    after(...blocks: AbstractBlock<B, C>[]) {
+        this.insert_blocks(this.parent_node, blocks.reverse(), 'after', this);
+    }
+
+    hasChildNodes() {
+        return this.children.length > 0;
+    }
+
+    hasParent(blockId?: string) {
+        let parent = this.parent_node;
+        while (parent) {
+            if (parent.id === blockId) {
+                return true;
+            }
+            parent = parent.parent_node;
+        }
+        return false;
+    }
+
+    /**
+     * TODO: scoped history
+     */
+    public get history(): HistoryManager {
+        return this.#history;
+    }
+}
diff --git a/libs/datasource/jwt/src/block/base.ts b/libs/datasource/jwt/src/block/base.ts
new file mode 100644
index 000000000..23a251fe2
--- /dev/null
+++ b/libs/datasource/jwt/src/block/base.ts
@@ -0,0 +1,321 @@
+import {
+    ArrayOperation,
+    BlockInstance,
+    ContentOperation,
+    ContentTypes,
+    InternalPlainObject,
+    MapOperation,
+} from '../adapter';
+import { BlockItem } from '../types';
+import { getLogger } from '../utils';
+
+import { AbstractBlock } from './abstract';
+import { BlockCapability } from './capability';
+
+const logger = getLogger('BlockDB:block');
+
+// TODO
+export interface Decoration extends InternalPlainObject {
+    key: string;
+    value: unknown;
+}
+
+type Validator = <T>(value: T | undefined) => boolean | void;
+
+export type IndexMetadata = Readonly<{
+    content?: string;
+    reference?: string;
+    tags: string[];
+}>;
+export type QueryMetadata = Readonly<
+    {
+        [key: string]: number | string | string[] | undefined;
+    } & Omit<BlockItem<any>, 'content'>
+>;
+
+export type ReadableContentExporter<
+    R = string,
+    T extends ContentTypes = ContentOperation
+> = (content: MapOperation<T>) => R;
+type GetExporter<R> = (
+    block: BlockInstance<any>
+) => Readonly<[string, ReadableContentExporter<R, any>]>[];
+
+type Exporters = {
+    content: GetExporter<string>;
+    metadata: GetExporter<Array<[string, number | string | string[]]>>;
+    tag: GetExporter<string[]>;
+};
+
+export class BaseBlock<
+    B extends BlockInstance<C>,
+    C extends ContentOperation
+> extends AbstractBlock<B, C> {
+    readonly #exporters?: Exporters;
+    readonly #content_exporters_getter: () => Map<
+        string,
+        ReadableContentExporter<string, any>
+    >;
+    readonly #metadata_exporters_getter: () => Map<
+        string,
+        ReadableContentExporter<
+            Array<[string, number | string | string[]]>,
+            any
+        >
+    >;
+    readonly #tag_exporters_getter: () => Map<
+        string,
+        ReadableContentExporter<string[], any>
+    >;
+
+    #validators: Map<string, Validator> = new Map();
+
+    constructor(
+        block: B,
+        root?: AbstractBlock<B, C>,
+        parent?: AbstractBlock<B, C>,
+        exporters?: Exporters
+    ) {
+        super(block, root, parent);
+
+        this.#exporters = exporters;
+        this.#content_exporters_getter = () =>
+            new Map(exporters?.content(block));
+        this.#metadata_exporters_getter = () =>
+            new Map(exporters?.metadata(block));
+        this.#tag_exporters_getter = () => new Map(exporters?.tag(block));
+    }
+
+    get parent() {
+        return this.parent_node as BaseBlock<B, C> | undefined;
+    }
+
+    private get decoration(): ArrayOperation<Decoration> | undefined {
+        const content = this.getContent<ArrayOperation<Decoration>>();
+        if (!content.has('decoration')) {
+            const decoration = content.createArray<Decoration>();
+            content.set('decoration', decoration);
+        }
+        return content.get('decoration')?.asArray();
+    }
+
+    getDecoration<T = unknown>(key: string): T | undefined {
+        const decoration = this.decoration?.find<Decoration>(
+            decoration => decoration.key === key
+        );
+        if (this.validate(key, decoration?.value)) {
+            return decoration?.value as T;
+        }
+        return undefined;
+    }
+
+    getDecorations<T = Record<string, unknown>>(): T {
+        const decorations = {} as T;
+        this.decoration?.forEach(decoration => {
+            const value = this.validate(decoration.key, decoration.value)
+                ? decoration.value
+                : undefined;
+            // @ts-ignore
+            decorations[decoration.key] = value;
+        });
+        return decorations;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    getCapability<T extends BlockCapability>(key: string): T | undefined {
+        // TODO: Capability api design
+        return undefined;
+    }
+
+    setDecoration(key: string, value: unknown) {
+        if (!this.validate(key, value)) {
+            throw new Error(`set [${key}] error: validate error.`);
+        }
+        const decoration = { key, value };
+        const index =
+            this.decoration?.findIndex(decoration => decoration.key === key) ??
+            -1;
+        if (index > -1) {
+            this.decoration?.delete(index, 1);
+            this.decoration?.insert(index, [decoration]);
+        } else {
+            this.decoration?.insert(this.decoration?.length, [decoration]);
+        }
+    }
+
+    removeDecoration(key: string) {
+        const index =
+            this.decoration?.findIndex(decoration => decoration.key === key) ??
+            -1;
+        if (index > -1) {
+            this.decoration?.delete(index, 1);
+        }
+    }
+
+    clearDecoration() {
+        this.decoration?.delete(0, this.decoration?.length);
+    }
+
+    setValidator(key: string, validator?: Validator) {
+        if (validator) {
+            this.#validators.set(key, validator);
+        } else {
+            this.#validators.delete(key);
+        }
+    }
+
+    private validate(key: string, value: unknown): boolean {
+        const validate = this.#validators.get(key);
+        if (validate) {
+            return validate(value) === false ? false : true;
+        }
+        return true;
+    }
+
+    get group(): BaseBlock<B, C> | undefined {
+        if (this.flavor === 'group') {
+            return this;
+        }
+        return this.parent?.group;
+    }
+
+    /**
+     * Get an instance of the child Block
+     * @param blockId block id
+     */
+    private get_children_instance(blockId?: string): BaseBlock<B, C>[] {
+        return this.get_children(blockId).map(
+            block => new BaseBlock(block, this.root, this, this.#exporters)
+        );
+    }
+
+    private get_indexable_metadata() {
+        const metadata: Record<string, number | string | string[]> = {};
+        for (const [name, exporter] of this.#metadata_exporters_getter()) {
+            try {
+                for (const [key, val] of exporter(this.getContent())) {
+                    metadata[key] = val;
+                }
+            } catch (err) {
+                logger(`Failed to export metadata: ${name}`, err);
+            }
+        }
+        try {
+            const parent_page = this._getParentPage(false);
+            if (parent_page) metadata['page'] = parent_page;
+            if (this.group) metadata['group'] = this.group.id;
+            if (this.parent) metadata['parent'] = this.parent.id;
+        } catch (e) {
+            logger(`Failed to export default metadata`, e);
+        }
+
+        return metadata;
+    }
+
+    public getQueryMetadata(): QueryMetadata {
+        return {
+            type: this.type,
+            flavor: this.flavor,
+            creator: this.creator,
+            children: this.children,
+            created: this.created,
+            updated: this.lastUpdated,
+            ...this.get_indexable_metadata(),
+        };
+    }
+
+    private get_indexable_content(): string | undefined {
+        const contents = [];
+        for (const [name, exporter] of this.#content_exporters_getter()) {
+            try {
+                const content = exporter(this.getContent());
+                if (content) contents.push(content);
+            } catch (err) {
+                logger(`Failed to export content: ${name}`, err);
+            }
+        }
+        if (!contents.length) {
+            try {
+                const content = this.getContent() as any;
+                return JSON.stringify(content['toJSON']());
+                // eslint-disable-next-line no-empty
+            } catch (e) {}
+        }
+        return contents.join('\n');
+    }
+
+    private get_indexable_tags(): string[] {
+        const tags: string[] = [];
+        for (const [name, exporter] of this.#tag_exporters_getter()) {
+            try {
+                tags.push(...exporter(this.getContent()));
+            } catch (err) {
+                logger(`Failed to export tags: ${name}`, err);
+            }
+        }
+
+        return tags;
+    }
+
+    public getIndexMetadata(): IndexMetadata {
+        return {
+            content: this.get_indexable_content(),
+            reference: '', // TODO: bibliography
+            tags: [...this.getTags(), ...this.get_indexable_tags()],
+        };
+    }
+
+    // ======================================
+    // DOM like apis
+    // ======================================
+
+    get firstChild() {
+        return this.get_children_instance(this.children[0]);
+    }
+
+    get lastChild() {
+        const children = this.children;
+        return this.get_children_instance(children[children.length - 1]);
+    }
+
+    get nextSibling(): BaseBlock<B, C> | undefined {
+        if (this.parent) {
+            const parent = this.parent;
+            const children = parent.children;
+            const index = children.indexOf(this.id);
+            return parent.get_children_instance(children[index + 1])[0];
+        }
+        return undefined;
+    }
+
+    get nextSiblings(): BaseBlock<B, C>[] {
+        if (this.parent) {
+            const parent = this.parent;
+            const children = parent.children;
+            const index = children.indexOf(this.id);
+            return (
+                children
+                    .slice(index + 1)
+                    .flatMap(id => parent.get_children_instance(id)) || []
+            );
+        }
+        return [];
+    }
+
+    get previousSibling(): BaseBlock<B, C> | undefined {
+        if (this.parent) {
+            const parent = this.parent;
+            const children = parent.children;
+            const index = children.indexOf(this.id);
+            return parent.get_children_instance(children[index - 1])[0];
+        }
+        return undefined;
+    }
+
+    contains(block: AbstractBlock<B, C>) {
+        if (this === block) {
+            return true;
+        }
+        return this.hasChildren(block.id);
+    }
+}
diff --git a/libs/datasource/jwt/src/block/capability.ts b/libs/datasource/jwt/src/block/capability.ts
new file mode 100644
index 000000000..6506102bb
--- /dev/null
+++ b/libs/datasource/jwt/src/block/capability.ts
@@ -0,0 +1,15 @@
+import { BlockSearchItem } from './index';
+
+export class BlockCapability {
+    // Accept a block instance, check its type, content data structure
+    // Does it meet the structural requirements of the current capability
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    protected check_block(block: BlockSearchItem): boolean {
+        return true;
+    }
+
+    // data structure upgrade
+    protected migration(): void {
+        // TODO: need to override
+    }
+}
diff --git a/libs/datasource/jwt/src/block/index.ts b/libs/datasource/jwt/src/block/index.ts
new file mode 100644
index 000000000..a23b29fb1
--- /dev/null
+++ b/libs/datasource/jwt/src/block/index.ts
@@ -0,0 +1,12 @@
+import type { BlockMetadata } from './indexer';
+
+export type BlockSearchItem = Partial<
+    BlockMetadata & {
+        readonly content: string;
+    }
+>;
+
+export { BaseBlock } from './base';
+export type { Decoration, ReadableContentExporter } from './base';
+export { BlockIndexer } from './indexer';
+export type { BlockCapability } from './capability';
diff --git a/libs/datasource/jwt/src/block/indexer.ts b/libs/datasource/jwt/src/block/indexer.ts
new file mode 100644
index 000000000..cc887eb6e
--- /dev/null
+++ b/libs/datasource/jwt/src/block/indexer.ts
@@ -0,0 +1,316 @@
+import { deflateSync, inflateSync, strToU8, strFromU8 } from 'fflate';
+import { Document as DocumentIndexer, DocumentSearchOptions } from 'flexsearch';
+import { get, set, keys, del, createStore } from 'idb-keyval';
+import produce from 'immer';
+import LRUCache from 'lru-cache';
+import sift, { Query } from 'sift';
+
+import {
+    AsyncDatabaseAdapter,
+    BlockInstance,
+    ChangedStates,
+    ContentOperation,
+} from '../adapter';
+import { BlockFlavors } from '../types';
+import { BlockEventBus, getLogger } from '../utils';
+
+import { BaseBlock, IndexMetadata, QueryMetadata } from './base';
+
+declare const JWT_DEV: boolean;
+
+const logger = getLogger('BlockDB:indexing');
+const logger_debug = getLogger('debug:BlockDB:indexing');
+
+type ChangedState = ChangedStates extends Map<unknown, infer R> ? R : never;
+
+export type BlockMetadata = QueryMetadata & { readonly id: string };
+
+function tokenizeZh(text: string) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const tokenizer = Intl?.['v8BreakIterator'];
+    if (tokenizer) {
+        const it = tokenizer(['zh-CN'], { type: 'word' });
+        it.adoptText(text);
+        const words = [];
+
+        let cur = 0,
+            prev = 0;
+
+        while (cur < text.length) {
+            prev = cur;
+            cur = it.next();
+            words.push(text.substring(prev, cur));
+        }
+
+        return words;
+    }
+    // eslint-disable-next-line no-control-regex
+    return text.replace(/[\x00-\x7F]/g, '').split('');
+}
+
+type IdbInstance = {
+    get: (key: string) => Promise<ArrayBufferLike | undefined>;
+    set: (key: string, value: ArrayBufferLike) => Promise<void>;
+    keys: () => Promise<string[]>;
+    delete: (key: string) => Promise<void>;
+};
+
+type BlockIdbInstance = {
+    index: IdbInstance;
+    metadata: IdbInstance;
+};
+
+function initIndexIdb(workspace: string): BlockIdbInstance {
+    const index = createStore(`${workspace}_index`, 'index');
+    const metadata = createStore(`${workspace}_metadata`, 'metadata');
+    return {
+        index: {
+            get: (key: string) => get<ArrayBufferLike>(key, index),
+            set: (key: string, value: ArrayBufferLike) =>
+                set(key, value, index),
+            keys: () => keys(index),
+            delete: (key: string) => del(key, index),
+        },
+        metadata: {
+            get: (key: string) => get<ArrayBufferLike>(key, metadata),
+            set: (key: string, value: ArrayBufferLike) =>
+                set(key, value, metadata),
+            keys: () => keys(metadata),
+            delete: (key: string) => del(key, metadata),
+        },
+    };
+}
+
+type BlockIndexedContent = {
+    index: IndexMetadata;
+    query: QueryMetadata;
+};
+
+export type QueryIndexMetadata = Query<QueryMetadata>;
+
+export class BlockIndexer<
+    A extends AsyncDatabaseAdapter<C>,
+    B extends BlockInstance<C>,
+    C extends ContentOperation
+> {
+    readonly #adapter: A;
+    readonly #idb: BlockIdbInstance;
+
+    readonly #block_indexer: DocumentIndexer<IndexMetadata>;
+    readonly #block_metadata: LRUCache<string, QueryMetadata>;
+    readonly #event_bus: BlockEventBus;
+
+    readonly #block_builder: (
+        block: BlockInstance<C>
+    ) => Promise<BaseBlock<B, C>>;
+
+    readonly #delay_index: { documents: Map<string, BaseBlock<B, C>> };
+
+    constructor(
+        adapter: A,
+        workspace: string,
+        block_builder: (block: BlockInstance<C>) => Promise<BaseBlock<B, C>>,
+        event_bus: BlockEventBus
+    ) {
+        this.#adapter = adapter;
+        this.#idb = initIndexIdb(workspace);
+
+        this.#block_indexer = new DocumentIndexer({
+            document: {
+                id: 'id',
+                index: ['content', 'reference'],
+                tag: 'tags',
+            },
+            encode: tokenizeZh,
+            tokenize: 'forward',
+            context: true,
+        });
+        this.#block_metadata = new LRUCache({
+            max: 10240,
+            ttl: 1000 * 60 * 30,
+        });
+
+        this.#block_builder = block_builder;
+        this.#event_bus = event_bus;
+
+        this.#delay_index = { documents: new Map() };
+
+        this.#event_bus
+            .topic('reindex')
+            .on('reindex', this.content_reindex.bind(this), {
+                debounce: { wait: 1000, maxWait: 1000 * 10 },
+            });
+
+        this.#event_bus
+            .topic('save_index')
+            .on('save_index', this.save_index.bind(this), {
+                debounce: { wait: 1000 * 10, maxWait: 1000 * 20 },
+            });
+    }
+
+    private async content_reindex() {
+        const paddings: Record<string, BlockIndexedContent> = {};
+
+        this.#delay_index.documents = produce(
+            this.#delay_index.documents,
+            draft => {
+                for (const [k, block] of draft) {
+                    paddings[k] = {
+                        index: block.getIndexMetadata(),
+                        query: block.getQueryMetadata(),
+                    };
+                    draft.delete(k);
+                }
+            }
+        );
+        for (const [key, { index, query }] of Object.entries(paddings)) {
+            if (index.content) {
+                await this.#block_indexer.addAsync(key, index);
+                this.#block_metadata.set(key, query);
+            }
+        }
+        this.#event_bus.topic('save_index').emit();
+    }
+
+    private async refresh_index(block: BaseBlock<B, C>) {
+        const filter: string[] = [
+            BlockFlavors.page,
+            BlockFlavors.title,
+            BlockFlavors.heading1,
+            BlockFlavors.heading2,
+            BlockFlavors.heading3,
+            BlockFlavors.text,
+            BlockFlavors.todo,
+            BlockFlavors.reference,
+        ];
+        if (filter.includes(block.flavor)) {
+            this.#delay_index.documents = produce(
+                this.#delay_index.documents,
+                draft => {
+                    draft.set(block.id, block);
+                }
+            );
+
+            this.#event_bus.topic('reindex').emit();
+            return true;
+        }
+        logger_debug(`skip index ${block.flavor}: ${block.id}`);
+        return false;
+    }
+
+    async refreshIndex(id: string, state: ChangedState) {
+        JWT_DEV && logger(`refreshArticleIndex: ${id}`);
+        if (state === 'delete') {
+            this.#delay_index.documents = produce(
+                this.#delay_index.documents,
+                draft => {
+                    this.#block_indexer.remove(id);
+                    this.#block_metadata.delete(id);
+                    draft.delete(id);
+                }
+            );
+            return;
+        }
+        const block = await this.#adapter.getBlock(id);
+        if (block?.id === id) {
+            if (await this.refresh_index(await this.#block_builder(block))) {
+                JWT_DEV &&
+                    logger(
+                        state
+                            ? `refresh index: ${id}, ${state}`
+                            : `indexing: ${id}`
+                    );
+            } else {
+                JWT_DEV && logger(`skip index: ${id}, ${block.flavor}`);
+            }
+        } else {
+            JWT_DEV && logger(`refreshArticleIndex: ${id} not exists`);
+        }
+    }
+
+    async loadIndex() {
+        for (const key of await this.#idb.index.keys()) {
+            const content = await this.#idb.index.get(key);
+            if (content) {
+                const decoded = strFromU8(inflateSync(new Uint8Array(content)));
+                try {
+                    await this.#block_indexer.import(key, decoded as any);
+                } catch (e) {
+                    console.error(`Failed to load index ${key}`, e);
+                }
+            }
+        }
+        for (const key of await this.#idb.metadata.keys()) {
+            const content = await this.#idb.metadata.get(key);
+            if (content) {
+                const decoded = strFromU8(inflateSync(new Uint8Array(content)));
+                try {
+                    await this.#block_indexer.import(key, JSON.parse(decoded));
+                } catch (e) {
+                    console.error(`Failed to load index ${key}`, e);
+                }
+            }
+        }
+        return Array.from(this.#block_metadata.keys());
+    }
+
+    private async save_index() {
+        const idb = this.#idb;
+        await idb.index
+            .keys()
+            .then(keys => Promise.all(keys.map(key => idb.index.delete(key))));
+        await this.#block_indexer.export((key, data) => {
+            return idb.index.set(
+                String(key),
+                deflateSync(strToU8(data as any))
+            );
+        });
+        const metadata = this.#block_metadata;
+        await idb.metadata
+            .keys()
+            .then(keys =>
+                Promise.all(
+                    keys
+                        .filter(key => !metadata.has(key))
+                        .map(key => idb.metadata.delete(key))
+                )
+            );
+        for (const [key, data] of metadata.entries()) {
+            await idb.metadata.set(
+                key,
+                deflateSync(strToU8(JSON.stringify(data)))
+            );
+        }
+    }
+
+    public async inspectIndex() {
+        const index: Record<string | number, any> = {};
+        await this.#block_indexer.export((key, data) => {
+            index[key] = data;
+        });
+    }
+
+    public search(
+        part_of_title_or_content:
+            | string
+            | Partial<DocumentSearchOptions<boolean>>
+    ) {
+        return this.#block_indexer.search(part_of_title_or_content as string);
+    }
+
+    public query(query: QueryIndexMetadata) {
+        const matches: string[] = [];
+        const filter = sift<QueryMetadata>(query);
+        this.#block_metadata.forEach((value, key) => {
+            if (filter(value)) matches.push(key);
+        });
+        return matches;
+    }
+
+    public getMetadata(ids: string[]): Array<BlockMetadata> {
+        return ids
+            .filter(id => this.#block_metadata.has(id))
+            .map(id => ({ ...this.#block_metadata.get(id)!, id }));
+    }
+}
diff --git a/libs/datasource/jwt/src/index.ts b/libs/datasource/jwt/src/index.ts
new file mode 100644
index 000000000..b092bf977
--- /dev/null
+++ b/libs/datasource/jwt/src/index.ts
@@ -0,0 +1,592 @@
+/* eslint-disable max-lines */
+import { DocumentSearchOptions } from 'flexsearch';
+import LRUCache from 'lru-cache';
+
+import {
+    AsyncDatabaseAdapter,
+    YjsAdapter,
+    YjsInitOptions,
+    YjsContentOperation,
+    ChangedStates,
+    BlockListener,
+    BlockInstance,
+    ContentOperation,
+    HistoryManager,
+    ContentTypes,
+} from './adapter';
+import { YjsBlockInstance } from './adapter/yjs';
+import {
+    BaseBlock,
+    BlockIndexer,
+    BlockSearchItem,
+    ReadableContentExporter,
+} from './block';
+import { QueryIndexMetadata } from './block/indexer';
+import {
+    BlockTypes,
+    BlockTypeKeys,
+    BlockFlavors,
+    BucketBackend,
+    UUID,
+    BlockFlavorKeys,
+    BlockItem,
+    ExcludeFunction,
+} from './types';
+import { BlockEventBus, genUUID, getLogger } from './utils';
+
+declare const JWT_DEV: boolean;
+
+const logger = getLogger('BlockDB:client');
+// const logger_debug = getLogger('debug:BlockDB:client');
+
+const namedUuid = Symbol('namedUUID');
+
+type BlockUuid<T extends string> = T extends UUID<T> ? T : never;
+type BlockUuidOrType<T extends string> = T extends
+    | BlockTypeKeys
+    | BlockFlavorKeys
+    ? T
+    : T extends string
+    ? BlockUuid<T>
+    : never;
+
+type BlockInstanceValue = ExcludeFunction<BlockInstance<any>>;
+export type BlockMatcher = Partial<BlockInstanceValue>;
+
+type BlockExporters<R> = Map<
+    string,
+    [BlockMatcher, ReadableContentExporter<R, any>]
+>;
+type BlockClientOptions = {
+    content?: BlockExporters<string>;
+    metadata?: BlockExporters<Array<[string, number | string | string[]]>>;
+    tagger?: BlockExporters<string[]>;
+};
+
+export class BlockClient<
+    A extends AsyncDatabaseAdapter<C>,
+    B extends BlockInstance<C>,
+    C extends ContentOperation
+> {
+    readonly #adapter: A;
+    readonly #workspace: string;
+
+    // Maximum cache Block 8192, ttl 30 minutes
+    readonly #block_caches: LRUCache<string, BaseBlock<B, C>>;
+    readonly #block_indexer: BlockIndexer<A, B, C>;
+
+    readonly #exporters: {
+        readonly content: BlockExporters<string>;
+        readonly metadata: BlockExporters<
+            Array<[string, number | string | string[]]>
+        >;
+        readonly tag: BlockExporters<string[]>;
+    };
+
+    readonly #event_bus: BlockEventBus;
+
+    readonly #parent_mapping: Map<string, string[]>;
+    readonly #page_mapping: Map<string, string>;
+
+    readonly #root: { node?: BaseBlock<B, C> };
+
+    private constructor(
+        adapter: A,
+        workspace: string,
+        options?: BlockClientOptions
+    ) {
+        this.#adapter = adapter;
+        this.#workspace = workspace;
+
+        this.#block_caches = new LRUCache({ max: 8192, ttl: 1000 * 60 * 30 });
+
+        this.#exporters = {
+            content: options?.content || new Map(),
+            metadata: options?.metadata || new Map(),
+            tag: options?.tagger || new Map(),
+        };
+
+        this.#event_bus = new BlockEventBus();
+
+        this.#block_indexer = new BlockIndexer(
+            this.#adapter,
+            this.#workspace,
+            this.block_builder.bind(this),
+            this.#event_bus.topic('indexer')
+        );
+
+        this.#parent_mapping = new Map();
+        this.#page_mapping = new Map();
+        this.#adapter.on('editing', (states: ChangedStates) =>
+            this.#event_bus.topic('editing').emit(states)
+        );
+        this.#adapter.on('updated', (states: ChangedStates) =>
+            this.#event_bus.topic('updated').emit(states)
+        );
+
+        this.#event_bus
+            .topic<string[]>('rebuild_index')
+            .on('rebuild_index', this.rebuild_index.bind(this), {
+                debounce: { wait: 1000, maxWait: 1000 },
+            });
+
+        this.#root = {};
+    }
+
+    public addBlockListener(tag: string, listener: BlockListener) {
+        const bus = this.#event_bus.topic<ChangedStates>('updated');
+        if (tag !== 'index' || !bus.has(tag)) bus.on(tag, listener);
+        else console.error(`block listener ${tag} is reserved`);
+    }
+
+    public removeBlockListener(tag: string) {
+        this.#event_bus.topic('updated').off(tag);
+    }
+
+    public addEditingListener(
+        tag: string,
+        listener: BlockListener<Set<string>>
+    ) {
+        const bus =
+            this.#event_bus.topic<ChangedStates<Set<string>>>('editing');
+        if (tag !== 'index' || !bus.has(tag)) bus.on(tag, listener);
+        else console.error(`editing listener ${tag} is reserved`);
+    }
+
+    public removeEditingListener(tag: string) {
+        this.#event_bus.topic('editing').off(tag);
+    }
+
+    private inspector() {
+        return {
+            ...this.#adapter.inspector(),
+            indexed: () => this.#block_indexer.inspectIndex(),
+        };
+    }
+
+    private async rebuild_index(exists_ids?: string[]) {
+        JWT_DEV && logger(`rebuild index`);
+        const blocks = await this.#adapter.getBlockByType(BlockTypes.block);
+        const excluded = exists_ids || [];
+        await Promise.all(
+            blocks
+                .filter(id => !excluded.includes(id))
+                .map(id => this.#block_indexer.refreshIndex(id, 'add'))
+        );
+    }
+
+    public async buildIndex() {
+        JWT_DEV && logger(`buildIndex: start`);
+        // Skip the block index that exists in the metadata, assuming that the index of the block existing in the metadata is the latest, and modify this part if there is a problem
+        // Although there may be cases where the index is refreshed but the metadata is not refreshed, re-indexing will be automatically triggered after the block is changed
+        const exists_ids = await this.#block_indexer.loadIndex();
+        await this.rebuild_index(exists_ids);
+        this.addBlockListener('index', async states => {
+            await Promise.allSettled(
+                Array.from(states.entries()).map(([id, state]) => {
+                    if (state === 'delete') this.#block_caches.delete(id);
+                    return this.#block_indexer.refreshIndex(id, state);
+                })
+            );
+        });
+    }
+
+    /**
+     * Get a specific type of block, currently only the article type is supported
+     * @param block_type block type
+     * @returns
+     */
+    public async getByType(
+        block_type: BlockTypeKeys | BlockFlavorKeys
+    ): Promise<Map<string, BaseBlock<B, C>>> {
+        JWT_DEV && logger(`getByType: ${block_type}`);
+        const ids = [
+            ...this.#block_indexer.query({
+                type: BlockTypes[block_type as BlockTypeKeys],
+            }),
+            ...this.#block_indexer.query({
+                flavor: BlockFlavors[block_type as BlockFlavorKeys],
+            }),
+        ];
+        const docs = await Promise.all(
+            ids.map(id =>
+                this.get(id as BlockUuidOrType<typeof id>).then(
+                    doc => [id, doc] as const
+                )
+            )
+        );
+        return new Map(docs.filter(([, doc]) => doc.children.length));
+    }
+
+    /**
+     * research all
+     * @param part_of_title_or_content Title or content keyword, support Chinese
+     * @param part_of_title_or_content.index search range, optional values: title, ttl, content, reference
+     * @param part_of_title_or_content.tag tag, string or array of strings, supports multiple tags
+     * @param part_of_title_or_content.query keyword, support Chinese
+     * @param part_of_title_or_content.limit The limit of the number of search results, the default is 100
+     * @param part_of_title_or_content.offset search result offset, used for page turning, default is 0
+     * @param part_of_title_or_content.suggest Fuzzy matching, after enabling the content including some keywords can also be searched, the default is false
+     * @returns array of search results, each array is a list of attributed block ids
+     */
+    public search(
+        part_of_title_or_content:
+            | string
+            | Partial<DocumentSearchOptions<boolean>>
+    ) {
+        return this.#block_indexer.search(part_of_title_or_content);
+    }
+
+    /**
+     * Full text search, the returned results are grouped by page dimension
+     * @param part_of_title_or_content Title or content keyword, support Chinese
+     * @param part_of_title_or_content.index search range, optional values: title, ttl, content, reference
+     * @param part_of_title_or_content.tag tag, string or array of strings, supports multiple tags
+     * @param part_of_title_or_content.query keyword, support Chinese
+     * @param part_of_title_or_content.limit The limit of the number of search results, the default is 100
+     * @param part_of_title_or_content.offset search result offset, used for page turning, default is 0
+     * @param part_of_title_or_content.suggest Fuzzy matching, after enabling the content including some keywords can also be searched, the default is false
+     * @returns array of search results, each array is a page
+     */
+    public async searchPages(
+        part_of_title_or_content:
+            | string
+            | Partial<DocumentSearchOptions<boolean>>
+    ): Promise<BlockSearchItem[]> {
+        const promised_pages = await Promise.all(
+            this.search(part_of_title_or_content).flatMap(({ result }) =>
+                result.map(async id => {
+                    const page = this.#page_mapping.get(id as string);
+                    if (page) return page;
+                    const block = await this.get(id as BlockTypeKeys);
+                    return this.set_page(block);
+                })
+            )
+        );
+        const pages = [
+            ...new Set(promised_pages.filter((v): v is string => !!v)),
+        ];
+        return Promise.all(
+            this.#block_indexer.getMetadata(pages).map(async page => ({
+                content: this.get_decoded_content(
+                    await this.#adapter.getBlock(page.id)
+                ),
+                ...page,
+            }))
+        );
+    }
+
+    /**
+     * Inquire
+     * @returns array of search results
+     */
+    public query(query: QueryIndexMetadata): string[] {
+        return this.#block_indexer.query(query);
+    }
+
+    /**
+     * Get a fixed name, which has the same UUID in each workspace, and is automatically created when it does not exist
+     * Generally used to store workspace-level global configuration
+     * @param name block name
+     * @returns block instance
+     */
+    private async get_named_block(
+        name: string,
+        options?: { workspace?: boolean }
+    ): Promise<BaseBlock<B, C>> {
+        const block = await this.get(genUUID(name), {
+            flavor: options?.workspace
+                ? BlockFlavors.workspace
+                : BlockFlavors.page,
+            [namedUuid]: true,
+        });
+        return block;
+    }
+
+    /**
+     * Get the workspace block of the current instance
+     * @returns block instance
+     */
+    public async getWorkspace() {
+        if (!this.#root.node) {
+            this.#root.node = await this.get_named_block(this.#workspace, {
+                workspace: true,
+            });
+        }
+        return this.#root.node;
+    }
+
+    /**
+     * @deprecated custom data including access to ws configuration is unified through baseBlock.get/setDecoration(key).
+     * - Get the config of the workspace block of the current instance
+     * @returns MapOperation
+     */
+    public async getWorkspaceConfig<T = unknown>() {
+        return (await this.getWorkspace()).getContent<T>();
+    }
+
+    private async get_parent(id: string) {
+        const parents = this.#parent_mapping.get(id);
+        if (parents) {
+            const parent_block_id = parents[0];
+            if (!this.#block_caches.has(parent_block_id)) {
+                this.#block_caches.set(
+                    parent_block_id,
+                    await this.get(parent_block_id as BlockTypeKeys)
+                );
+            }
+            return this.#block_caches.get(parent_block_id);
+        }
+        return undefined;
+    }
+
+    private set_parent(parent: string, child: string) {
+        const parents = this.#parent_mapping.get(child);
+        if (parents?.length) {
+            if (!parents.includes(parent)) {
+                console.error('parent already exists', child, parents);
+                this.#parent_mapping.set(child, [...parents, parent]);
+            }
+        } else {
+            this.#parent_mapping.set(child, [parent]);
+        }
+    }
+
+    private set_page(block: BaseBlock<B, C>) {
+        const page = this.#page_mapping.get(block.id);
+        if (page) return page;
+        const parent_page = block.parent_page;
+        if (parent_page) {
+            this.#page_mapping.set(block.id, parent_page);
+            return parent_page;
+        }
+        return undefined;
+    }
+
+    registerContentExporter<T extends ContentTypes>(
+        name: string,
+        matcher: BlockMatcher,
+        exporter: ReadableContentExporter<string, T>
+    ) {
+        this.#exporters.content.set(name, [matcher, exporter]);
+        this.#event_bus.topic('rebuild_index').emit(); // // rebuild the index every time the content exporter is registered
+    }
+
+    unregisterContentExporter(name: string) {
+        this.#exporters.content.delete(name);
+        this.#event_bus.topic('rebuild_index').emit(); // Rebuild indexes every time content exporter logs out
+    }
+
+    registerMetadataExporter<T extends ContentTypes>(
+        name: string,
+        matcher: BlockMatcher,
+        exporter: ReadableContentExporter<
+            Array<[string, number | string | string[]]>,
+            T
+        >
+    ) {
+        this.#exporters.metadata.set(name, [matcher, exporter]);
+        this.#event_bus.topic('rebuild_index').emit(); // // rebuild the index every time the content exporter is registered
+    }
+
+    unregisterMetadataExporter(name: string) {
+        this.#exporters.metadata.delete(name);
+        this.#event_bus.topic('rebuild_index').emit(); // Rebuild indexes every time content exporter logs out
+    }
+
+    registerTagExporter<T extends ContentTypes>(
+        name: string,
+        matcher: BlockMatcher,
+        exporter: ReadableContentExporter<string[], T>
+    ) {
+        this.#exporters.tag.set(name, [matcher, exporter]);
+        this.#event_bus.topic('rebuild_index').emit(); // Reindex every tag exporter registration
+    }
+
+    unregisterTagExporter(name: string) {
+        this.#exporters.tag.delete(name);
+        this.#event_bus.topic('rebuild_index').emit(); // Reindex every time tag exporter logs out
+    }
+
+    private get_exporters<R>(
+        exporter_map: BlockExporters<R>,
+        block: BlockInstance<C>
+    ): Readonly<[string, ReadableContentExporter<R, any>]>[] {
+        const exporters = [];
+        for (const [name, [cond, exporter]] of exporter_map) {
+            const conditions = Object.entries(cond);
+            let matched = 0;
+            for (const [key, value] of conditions) {
+                if (block[key as keyof BlockInstanceValue] === value) {
+                    matched += 1;
+                }
+            }
+            if (matched === conditions.length)
+                exporters.push([name, exporter] as const);
+        }
+
+        return exporters;
+    }
+
+    private get_decoded_content(block?: BlockInstance<C>) {
+        if (block) {
+            const [exporter] = this.get_exporters(
+                this.#exporters.content,
+                block
+            );
+            if (exporter) {
+                const op = block.content.asMap();
+                if (op) return exporter[1](op);
+            }
+        }
+        return undefined;
+    }
+
+    private async block_builder(
+        block: BlockInstance<C>,
+        root?: BaseBlock<B, C>
+    ) {
+        return new BaseBlock(
+            block,
+            root,
+            (await this.get_parent(block.id)) || root,
+            {
+                content: block =>
+                    this.get_exporters(this.#exporters.content, block),
+                metadata: block =>
+                    this.get_exporters(this.#exporters.metadata, block),
+                tag: block => this.get_exporters(this.#exporters.tag, block),
+            }
+        );
+    }
+
+    /**
+     * Get a Block, which is automatically created if it does not exist
+     * @param block_id_or_type block id, create a new text block when BlockTypes/BlockFlavors are not provided, does not exist or is provided. If BlockTypes/BlockFlavors are provided, create a block of the corresponding type
+     * @param options.type The type of block created when block does not exist, the default is block
+     * @param options.flavor The flavor of the block created when the block does not exist, the default is text
+     * @param options.binary content of binary block, must be provided when type or block_id_or_type is binary
+     * @returns block instance
+     */
+    public async get<S extends string>(
+        block_id_or_type?: BlockUuidOrType<S>,
+        options?: {
+            type?: BlockItem<C>['type'];
+            flavor: BlockItem<C>['flavor'];
+            binary?: ArrayBuffer;
+            [namedUuid]?: boolean;
+        }
+    ): Promise<BaseBlock<B, C>> {
+        JWT_DEV && logger(`get: ${block_id_or_type}`);
+        const {
+            type = BlockTypes.block,
+            flavor = BlockFlavors.text,
+            binary,
+            [namedUuid]: is_named_uuid,
+        } = options || {};
+        if (block_id_or_type && this.#block_caches.has(block_id_or_type)) {
+            return this.#block_caches.get(block_id_or_type) as BaseBlock<B, C>;
+        } else {
+            const block =
+                (block_id_or_type &&
+                    (await this.#adapter.getBlock(block_id_or_type))) ||
+                (await this.#adapter.createBlock({
+                    uuid: is_named_uuid ? block_id_or_type : undefined,
+                    binary,
+                    type:
+                        block_id_or_type &&
+                        BlockTypes[block_id_or_type as BlockTypeKeys]
+                            ? BlockTypes[block_id_or_type as BlockTypeKeys]
+                            : type,
+                    flavor:
+                        block_id_or_type &&
+                        BlockFlavors[block_id_or_type as BlockFlavorKeys]
+                            ? BlockFlavors[block_id_or_type as BlockFlavorKeys]
+                            : flavor,
+                }));
+
+            const root = is_named_uuid ? undefined : await this.getWorkspace();
+
+            for (const child of block.children) {
+                this.set_parent(block.id, child);
+            }
+
+            const abstract_block = await this.block_builder(block, root);
+            this.set_page(abstract_block);
+            abstract_block.on('parent', 'client_hook', state => {
+                const [parent] = state.keys();
+                this.set_parent(parent, abstract_block.id);
+                this.set_page(abstract_block);
+            });
+            this.#block_caches.set(abstract_block.id, abstract_block);
+            return abstract_block;
+        }
+    }
+
+    public async getBlockByFlavor(
+        flavor: BlockItem<C>['flavor']
+    ): Promise<string[]> {
+        return await this.#adapter.getBlockByFlavor(flavor);
+    }
+
+    public getUserId(): string {
+        return this.#adapter.getUserId();
+    }
+
+    public has(block_ids: string[]): Promise<boolean> {
+        return this.#adapter.checkBlocks(block_ids);
+    }
+
+    /**
+     * Suspend instant update event dispatch, extend to a maximum of 500ms once, and a maximum of 2000ms when triggered continuously
+     * @param suspend true: suspend monitoring, false: resume monitoring
+     */
+    suspend(suspend: boolean) {
+        this.#adapter.suspend(suspend);
+    }
+
+    public get history(): HistoryManager {
+        return this.#adapter.history();
+    }
+
+    public static async init(
+        workspace: string,
+        options: Partial<YjsInitOptions & BlockClientOptions> = {}
+    ): Promise<BlockClientInstance> {
+        const instance = await YjsAdapter.init(workspace, {
+            backend: BucketBackend.YjsWebSocketAffine,
+            ...options,
+        });
+        return new BlockClient(instance, workspace, options);
+    }
+}
+
+export type BlockImplInstance = BaseBlock<
+    YjsBlockInstance,
+    YjsContentOperation
+>;
+export type BlockClientInstance = BlockClient<
+    YjsAdapter,
+    YjsBlockInstance,
+    YjsContentOperation
+>;
+
+export type BlockInitOptions = NonNullable<
+    Parameters<typeof BlockClient.init>[1]
+>;
+
+export type {
+    TextOperation,
+    ArrayOperation,
+    MapOperation,
+    ChangedStates,
+} from './adapter';
+export type {
+    BlockSearchItem,
+    Decoration as BlockDecoration,
+    ReadableContentExporter as BlockContentExporter,
+} from './block';
+export type { BlockTypeKeys } from './types';
+export { BlockTypes, BucketBackend as BlockBackend } from './types';
+export { isBlock } from './utils';
+export type { QueryIndexMetadata };
diff --git a/libs/datasource/jwt/src/types/block.ts b/libs/datasource/jwt/src/types/block.ts
new file mode 100644
index 000000000..cd0300e5a
--- /dev/null
+++ b/libs/datasource/jwt/src/types/block.ts
@@ -0,0 +1,81 @@
+import { ContentOperation } from '../adapter';
+import { RefMetadata } from './metadata';
+import { UUID } from './uuid';
+// base type of block
+// y_block: tree structure expression with YAbstractType as root
+// y_binary: arbitrary binary data
+export const BlockTypes = {
+    block: 'y_block' as const, // data block
+    binary: 'y_binary' as const, // binary data
+};
+
+// block flavor
+// block has the same basic structure
+// But different flavors provide different parsing of their content
+// TODO, how do blockdb BlockFlavors synchronize with the protocol of '@toeverything/components/editor-blocks'?
+export const BlockFlavors = {
+    workspace: 'workspace' as const, // workspace
+    page: 'page' as const, // page
+    group: 'group' as const, // group
+    title: 'title' as const, // title
+    text: 'text' as const, // text
+    heading1: 'heading1' as const, // heading 1
+    heading2: 'heading2' as const, // heading 2
+    heading3: 'heading3' as const, // heading 3
+    code: 'code' as const, // code block
+    todo: 'todo' as const, // todo
+    numbered: 'numbered' as const, // numbered list
+    bullet: 'bullet' as const, // bullet list
+    comments: 'comments' as const, // comments
+    tag: 'tag' as const, // tag
+    reference: 'reference' as const, // reference
+    image: 'image' as const, // image
+    file: 'file' as const, //file
+    audio: 'audio' as const, // audio
+    video: 'video' as const, // video
+    shape: 'shape' as const, // artboard shape
+    quote: 'quote' as const, // quote
+    toc: 'toc' as const, //directory
+    database: 'database' as const, //Multidimensional table
+    whiteboard: 'whiteboard' as const, // whiteboard
+    template: 'template' as const, // template
+    discussion: 'discussion' as const, // comment header
+    comment: 'comment' as const, // comment details
+    activity: 'activity' as const, // dynamic message
+    divider: 'divider' as const, // divider line
+    groupDivider: 'groupDivider' as const, // group divider
+    youtube: 'youtube' as const, // Youtube
+    figma: 'figma' as const, // figma
+    embedLink: 'embedLink' as const, //embed link
+    toggle: 'toggle' as const, // collapse the list
+    callout: 'callout' as const, // reminder
+    grid: 'grid' as const, // grid layout
+    gridItem: 'gridItem' as const, // grid layout children
+};
+
+export type BlockTypeKeys = keyof typeof BlockTypes;
+export type BlockFlavorKeys = keyof typeof BlockFlavors;
+
+export type BlockItem<C extends ContentOperation> = {
+    readonly type: typeof BlockTypes[BlockTypeKeys];
+    flavor: typeof BlockFlavors[BlockFlavorKeys];
+    children: string[];
+    readonly created: number; // creation time, UTC timestamp
+    readonly updated?: number; // update time, UTC timestamp
+    readonly creator?: string; // creator id
+    content: C; // Essentially what is stored here is either Uint8Array (binary resource) or YDoc (structured resource)
+};
+
+export type BlockPage = {
+    title?: string;
+    description?: string;
+    // preview
+    preview?: UUID<'00000000-0000-0000-0000-000000000000'>;
+    // Whether it is a draft, the draft will not be indexed
+    draft?: string;
+    // Expiration time, documents that exceed this time will be deleted
+    ttl?: number;
+    // Metadata, currently only bibtex definitions
+    // When metadata exists, it will be treated as a reference and can be searched by tag reference
+    metadata?: RefMetadata;
+};
diff --git a/libs/datasource/jwt/src/types/index.ts b/libs/datasource/jwt/src/types/index.ts
new file mode 100644
index 000000000..d23b301f3
--- /dev/null
+++ b/libs/datasource/jwt/src/types/index.ts
@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+export { BlockTypes, BlockFlavors } from './block';
+export type { BlockTypeKeys, BlockFlavorKeys, BlockItem } from './block';
+export type { UUID } from './uuid';
+export type { ExcludeFunction } from './utils';
+
+function getLocation() {
+    try {
+        const { protocol, host } = window.location;
+        return { protocol, host };
+    } catch (e) {
+        return { protocol: 'http:', host: 'localhost' };
+    }
+}
+
+function getCollaborationPoint() {
+    const { protocol, host } = getLocation();
+    const ws = protocol.startsWith('https') ? 'wss' : 'ws';
+    const isOnline = host.endsWith('affine.pro');
+    const site = isOnline ? host : 'localhost:4200';
+    return `${ws}://${site}/collaboration/`;
+}
+
+export const BucketBackend = {
+    IndexedDB: 'idb',
+    WebSQL: 'websql',
+    YjsWebSocketAffine: getCollaborationPoint(),
+};
diff --git a/libs/datasource/jwt/src/types/metadata.ts b/libs/datasource/jwt/src/types/metadata.ts
new file mode 100644
index 000000000..ff2437311
--- /dev/null
+++ b/libs/datasource/jwt/src/types/metadata.ts
@@ -0,0 +1,203 @@
+export type BibTexArticle = {
+    entry: 'article';
+    author: string;
+    title: string;
+    journal: string;
+    year: string;
+    volume?: string;
+    number?: string;
+    pages?: string;
+    month?: string;
+    note?: string;
+};
+
+export type BibTexBook = {
+    entry: 'book';
+    author: string;
+    editor?: string;
+    title: string;
+    publisher: string;
+    year: string;
+    volume?: string;
+    number?: string;
+    series?: string;
+    address?: string;
+    edition?: string;
+    month?: string;
+    note?: string;
+};
+
+export type BibTexBooklet = {
+    entry: 'booklet';
+    title: string;
+    author?: string;
+    howpublished?: string;
+    address?: string;
+    month?: string;
+    year?: string;
+    note?: string;
+};
+
+export type BibTexConference = {
+    entry: 'conference' | 'inproceedings';
+    author: string;
+    title: string;
+    booktitle: string;
+    year: string;
+    editor?: string;
+    volume?: string;
+    number?: string;
+    series?: string;
+    pages?: string;
+    address?: string;
+    month?: string;
+    organization?: string;
+    publisher?: string;
+    note?: string;
+};
+
+export type BibTexInBook = {
+    entry: 'inbook';
+    author: string;
+    editor: string;
+    title: string;
+    chapter: string;
+    pages?: string;
+    publisher: string;
+    year: string;
+    volume?: string;
+    number?: string;
+    series?: string;
+    type?: string;
+    address?: string;
+    edition?: string;
+    month?: string;
+    note?: string;
+};
+
+export type BibTexInCollection = {
+    entry: 'incollection';
+    author: string;
+    title: string;
+    booktitle: string;
+    publisher: string;
+    year: string;
+    editor?: string;
+    volume?: string;
+    number?: string;
+    series?: string;
+    type?: string;
+    chapter?: string;
+    pages?: string;
+    address?: string;
+    edition?: string;
+    month?: string;
+    note?: string;
+};
+
+export type BibTexManual = {
+    entry: 'manual';
+    title: string;
+    author?: string;
+    organization?: string;
+    address?: string;
+    edition?: string;
+    month?: string;
+    year?: string;
+    note?: string;
+};
+
+export type BibTexMastersThesis = {
+    entry: 'mastersthesis';
+    author: string;
+    title: string;
+    school: string;
+    year: string;
+    type?: string;
+    address?: string;
+    month?: string;
+    note?: string;
+};
+
+export type BibTexMisc = {
+    entry: 'misc';
+    author?: string;
+    title?: string;
+    howpublished?: string;
+    month?: string;
+    year?: string;
+    note?: string;
+};
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export type BibTexPHDThesis = {
+    entry: 'phdthesis';
+    author: string;
+    title: string;
+    year: string;
+    school: string;
+    address?: string;
+    month?: string;
+    keywords?: string[];
+    note?: string;
+};
+
+export type BibTexProceedings = {
+    entry: 'proceedings';
+    title: string;
+    year: string;
+    editor?: string;
+    volume?: string;
+    number?: string;
+    series?: string;
+    address?: string;
+    month?: string;
+    organization?: string;
+    publisher?: string;
+    note?: string;
+};
+
+export type BibTexTechReport = {
+    entry: 'techreport';
+    author: string;
+    title: string;
+    institution: string;
+    year: string;
+    type?: string;
+    number?: string;
+    address?: string;
+    month?: string;
+    note?: string;
+};
+
+export type BibTexUnpublished = {
+    entry: 'unpublished';
+    author: string;
+    title: string;
+    note: string;
+    month?: string;
+    year?: string;
+};
+
+export type BibTexMetadata =
+    | BibTexArticle
+    | BibTexBook
+    | BibTexBooklet
+    | BibTexConference
+    | BibTexInBook
+    | BibTexInCollection
+    | BibTexManual
+    | BibTexMastersThesis
+    | BibTexMisc
+    | BibTexPHDThesis
+    | BibTexProceedings
+    | BibTexTechReport
+    | BibTexUnpublished;
+
+type CustomMetadata = {
+    custom?: {
+        [key: string]: string;
+    };
+};
+
+export type RefMetadata = BibTexMetadata & CustomMetadata;
diff --git a/libs/datasource/jwt/src/types/utils.ts b/libs/datasource/jwt/src/types/utils.ts
new file mode 100644
index 000000000..e4356adad
--- /dev/null
+++ b/libs/datasource/jwt/src/types/utils.ts
@@ -0,0 +1,8 @@
+type ValueOf<T> = T[keyof T];
+export type ExcludeFunction<T> = Pick<
+    T,
+    ValueOf<{
+        // eslint-disable-next-line @typescript-eslint/ban-types
+        [K in keyof T]: T[K] extends Function ? never : K;
+    }>
+>;
diff --git a/libs/datasource/jwt/src/types/uuid.ts b/libs/datasource/jwt/src/types/uuid.ts
new file mode 100644
index 000000000..8f380e6a9
--- /dev/null
+++ b/libs/datasource/jwt/src/types/uuid.ts
@@ -0,0 +1,76 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+type VersionChar = '1' | '2' | '3' | '4' | '5';
+
+type Char =
+    | '0'
+    | '1'
+    | '2'
+    | '3'
+    | '4'
+    | '5'
+    | '6'
+    | '7'
+    | '8'
+    | '9'
+    | 'a'
+    | 'b'
+    | 'c'
+    | 'd'
+    | 'e'
+    | 'f';
+
+type Prev<X extends number> = [
+    never,
+    0,
+    1,
+    2,
+    3,
+    4,
+    5,
+    6,
+    7,
+    8,
+    9,
+    10,
+    11,
+    ...never[]
+][X];
+
+type HasLength<S extends string, Len extends number> = [Len] extends [0]
+    ? S extends ''
+        ? true
+        : never
+    : S extends `${infer C}${infer Rest}`
+    ? Lowercase<C> extends Char
+        ? HasLength<Rest, Prev<Len>>
+        : never
+    : never;
+
+type Char4<S extends string> = true extends HasLength<S, 4> ? S : never;
+type Char8<S extends string> = true extends HasLength<S, 8> ? S : never;
+type Char12<S extends string> = true extends HasLength<S, 12> ? S : never;
+
+type VersionGroup<S extends string> = S extends `${infer Version}${infer Rest}`
+    ? Version extends VersionChar
+        ? true extends HasLength<Rest, 3>
+            ? S
+            : never
+        : never
+    : never;
+
+type NilUUID = '00000000-0000-0000-0000-000000000000';
+export type UUID<S extends string> = S extends NilUUID
+    ? S
+    : S extends `${infer S8}-${infer S4_1}-${infer S4_2}-${infer S4_3}-${infer S12}`
+    ? S8 extends Char8<S8>
+        ? S4_1 extends Char4<S4_1>
+            ? S4_2 extends VersionGroup<S4_2>
+                ? S4_3 extends Char4<S4_3>
+                    ? S12 extends Char12<S12>
+                        ? S
+                        : never
+                    : never
+                : never
+            : never
+        : never
+    : never;
diff --git a/libs/datasource/jwt/src/utils/event-bus.ts b/libs/datasource/jwt/src/utils/event-bus.ts
new file mode 100644
index 000000000..e37c41404
--- /dev/null
+++ b/libs/datasource/jwt/src/utils/event-bus.ts
@@ -0,0 +1,107 @@
+import { debounce } from 'ts-debounce';
+
+import { getLogger } from './index';
+
+declare const JWT_DEV: boolean;
+
+const logger = getLogger('BlockDB:event_bus');
+
+export class BlockEventBus {
+    readonly #event_bus: EventTarget;
+    readonly #event_callback_cache: Map<string, any>;
+    readonly #scoped_cache: Map<string, BlockScopedEventBus<any>>;
+
+    constructor(event_bus?: EventTarget) {
+        this.#event_bus = event_bus || new EventTarget();
+        this.#event_callback_cache = new Map();
+        this.#scoped_cache = new Map();
+    }
+
+    protected on_listener(
+        topic: string,
+        name: string,
+        listener: (e: Event) => void
+    ) {
+        const handler_name = `${topic}/${name}`;
+        if (!this.#event_callback_cache.has(handler_name)) {
+            this.#event_bus.addEventListener(topic, listener);
+            this.#event_callback_cache.set(handler_name, listener);
+        } else {
+            JWT_DEV && logger(`event handler ${handler_name} is existing`);
+        }
+    }
+
+    protected off_listener(topic: string, name: string) {
+        const handler_name = `${topic}/${name}`;
+        const listener = this.#event_callback_cache.get(handler_name);
+        if (listener) {
+            this.#event_bus.removeEventListener(topic, listener);
+            this.#event_callback_cache.delete(handler_name);
+        } else {
+            JWT_DEV && logger(`event handler ${handler_name} is not existing`);
+        }
+    }
+
+    protected has_listener(topic: string, name: string) {
+        return this.#event_callback_cache.has(`${topic}/${name}`);
+    }
+
+    protected emit_event<T>(topic: string, detail?: T) {
+        this.#event_bus.dispatchEvent(new CustomEvent(topic, { detail }));
+    }
+
+    topic<T = unknown>(topic: string): BlockScopedEventBus<T> {
+        return (
+            this.#scoped_cache.get(topic) ||
+            new BlockScopedEventBus<T>(topic, this.#event_bus)
+        );
+    }
+}
+
+type DebounceOptions = {
+    wait: number;
+    maxWait?: number;
+};
+
+type ListenerOptions = {
+    debounce?: DebounceOptions;
+};
+
+class BlockScopedEventBus<T> extends BlockEventBus {
+    readonly #topic: string;
+
+    constructor(topic: string, event_bus?: EventTarget) {
+        super(event_bus);
+        this.#topic = topic;
+    }
+
+    on(
+        name: string,
+        listener: ((e: T) => Promise<void>) | ((e: T) => void),
+        options?: ListenerOptions
+    ) {
+        if (options?.debounce) {
+            const { wait, maxWait } = options.debounce;
+            const debounced = debounce(listener, wait, { maxWait });
+            this.on_listener(this.#topic, name, e => {
+                debounced((e as CustomEvent)?.detail);
+            });
+        } else {
+            this.on_listener(this.#topic, name, e => {
+                listener((e as CustomEvent)?.detail);
+            });
+        }
+    }
+
+    off(name: string) {
+        this.off_listener(this.#topic, name);
+    }
+
+    has(name: string) {
+        return this.has_listener(this.#topic, name);
+    }
+
+    emit(detail?: T) {
+        this.emit_event(this.#topic, detail);
+    }
+}
diff --git a/libs/datasource/jwt/src/utils/index.ts b/libs/datasource/jwt/src/utils/index.ts
new file mode 100644
index 000000000..99218cae1
--- /dev/null
+++ b/libs/datasource/jwt/src/utils/index.ts
@@ -0,0 +1,57 @@
+import { Buffer } from 'buffer';
+import debug from 'debug';
+import { enableAllPlugins } from 'immer';
+import { SHAKE } from 'sha3';
+import { v5 as UUIDv5 } from 'uuid';
+import { AbstractBlock } from '../block/abstract';
+
+import { UUID } from '../types';
+
+declare const JWT_DEV: boolean;
+
+enableAllPlugins();
+
+const hash = new SHAKE(128);
+
+// sha3-256(toeverythinguuid) -> truncate 128 bits
+// e66a34f77a3b09d2020eb20e1f77e3c56250c19788ed2c70993ad2c495e55de6
+const UUID_NAMESPACE = Uint8Array.from([
+    0xe6, 0x6a, 0x34, 0xf7, 0x7a, 0x3b, 0x09, 0xd2, 0x02, 0x0e, 0xb2, 0x0e,
+    0x1f, 0x77, 0xe3, 0xc5,
+]);
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function genUUID(workspace: string): UUID<string> {
+    return UUIDv5(workspace, UUID_NAMESPACE) as UUID<string>;
+}
+
+export function sha3(buffer: Buffer): string {
+    hash.reset();
+    hash.update(buffer);
+    return hash
+        .digest('base64')
+        .replace(/=/g, '')
+        .replace(/\+/g, '-')
+        .replace(/\//g, '_');
+}
+
+export function getLogger(namespace: string) {
+    if (JWT_DEV) {
+        const logger = debug(namespace);
+        logger.log = console.log.bind(console);
+        if (JWT_DEV === ('testing' as any)) logger.enabled = true;
+        return logger;
+    } else {
+        return () => {};
+    }
+}
+
+export function isBlock(obj: any) {
+    return obj && obj instanceof AbstractBlock;
+}
+
+export function sleep() {
+    return new Promise(resolve => setTimeout(resolve, 500));
+}
+
+export { BlockEventBus } from './event-bus';
diff --git a/libs/datasource/jwt/tsconfig.json b/libs/datasource/jwt/tsconfig.json
new file mode 100644
index 000000000..0a63fd598
--- /dev/null
+++ b/libs/datasource/jwt/tsconfig.json
@@ -0,0 +1,24 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        // "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/datasource/jwt/tsconfig.lib.json b/libs/datasource/jwt/tsconfig.lib.json
new file mode 100644
index 000000000..0dda33329
--- /dev/null
+++ b/libs/datasource/jwt/tsconfig.lib.json
@@ -0,0 +1,22 @@
+{
+    "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": [
+        "**/*.spec.ts",
+        "**/*.test.ts",
+        "**/*.spec.tsx",
+        "**/*.test.tsx",
+        "**/*.spec.js",
+        "**/*.test.js",
+        "**/*.spec.jsx",
+        "**/*.test.jsx"
+    ],
+    "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/libs/datasource/jwt/tsconfig.spec.json b/libs/datasource/jwt/tsconfig.spec.json
new file mode 100644
index 000000000..ee70363dc
--- /dev/null
+++ b/libs/datasource/jwt/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "module": "commonjs",
+        "types": ["jest", "node"]
+    },
+    "include": [
+        "**/*.test.ts",
+        "**/*.spec.ts",
+        "**/*.test.tsx",
+        "**/*.spec.tsx",
+        "**/*.test.js",
+        "**/*.spec.js",
+        "**/*.test.jsx",
+        "**/*.spec.jsx",
+        "**/*.d.ts"
+    ]
+}
diff --git a/libs/datasource/remote-kv/.babelrc b/libs/datasource/remote-kv/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/datasource/remote-kv/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/datasource/remote-kv/.eslintrc.json b/libs/datasource/remote-kv/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/datasource/remote-kv/.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": {}
+        }
+    ]
+}
diff --git a/libs/datasource/remote-kv/README.md b/libs/datasource/remote-kv/README.md
new file mode 100644
index 000000000..6d3c0e4f7
--- /dev/null
+++ b/libs/datasource/remote-kv/README.md
@@ -0,0 +1,128 @@
+## Attachment module documentation
+
+### describe
+
+The attachment system currently provides AWS S3 object storage service, using the default IAM account for read and write operations;
+
+###Instructions for use
+
+**Initialize attachment system**
+
+```javascript
+// Initialize the accessory system, the platorm configuration is as follows, for reference
+const PLATFORM_CONFIG = {
+    AWSS3: 'awss3', // key replace with uuid
+    ALIYUN: 'ailiyun',
+};
+
+// It is recommended not to pass the platform type for initialization, AWS S3 is used by default
+import { upload, multipartUpload } from '@toeverything/components/attachment';
+```
+
+**Instance methods**
+
+_In the function description, if "batch" is not marked, the default is a single file operation; _
+
+-   upload: file upload
+
+    -   Type definition
+
+        ```typescript
+        type upload = (file: File) => Promise<Error | Url>;
+        ```
+
+    -   Usage example
+
+        ```javascript
+        const onChange = async info => {
+            const { file } = info;
+            const url = await upload(file.originFileObj);
+            console.log(url);
+        };
+
+        // or
+        const onChange = async info => {
+            const { file } = info;
+            const [err, url] = await toAsync(upload(file.originFileObj));
+
+            if (err) {
+                return;
+            }
+
+            console.log(url);
+        };
+        ```
+
+-   multipartUpload: file upload in parts
+
+    -   Type definition
+
+        ```typescript
+        type multipartUpload = (file: File) => Promise<Error | Url>;
+        ```
+
+    -   Usage example
+
+        ```javascript
+        const onChange = async info => {
+            const { file } = info;
+            const url = await multipartUpload(file.originFileObj);
+            console.log(url);
+        };
+        ```
+
+-   batchUpload: **batch** upload
+
+    -   Type definition
+
+        ```typescript
+        interface data {
+            success: Array<{ name: string; url: string }>;
+            failed: Array<{ name: string; reason: string }>;
+        }
+
+        type batchUpload = (fileList: File[]) => Promise<Error | data>;
+        ```
+
+    -   Usage example
+
+        ```javascript
+        const onChange = async info => {
+            const fileList = info.fileList.map(file => file.originFileObj);
+            const { success } = await batchUpload(fileList);
+            const urls = success.map(item => item.url);
+        };
+        ```
+
+-   download: file download
+
+    -   Type definition
+
+        ```typescript
+        type download = (fileName: string) => Promise<Error | true>;
+        ```
+
+    -   Usage example
+
+        ```javascript
+        const onChange = async fileName => {
+            // browser download
+            await download(fileName);
+        };
+        ```
+
+-   recovery: file deletion
+
+    -   Type definition
+
+        ```typescript
+        type recovery = (fileName: string) => Promise<Error | true>;
+        ```
+
+    -   Usage example
+
+        ```javascript
+        const onChange = async fileName => {
+            await recovery(fileName);
+        };
+        ```
diff --git a/libs/datasource/remote-kv/jest.config.js b/libs/datasource/remote-kv/jest.config.js
new file mode 100644
index 000000000..5276740f2
--- /dev/null
+++ b/libs/datasource/remote-kv/jest.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+    displayName: 'components-attachment',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/components/attachment',
+};
diff --git a/libs/datasource/remote-kv/package.json b/libs/datasource/remote-kv/package.json
new file mode 100644
index 000000000..e6e6e9217
--- /dev/null
+++ b/libs/datasource/remote-kv/package.json
@@ -0,0 +1,13 @@
+{
+    "name": "@toeverything/datasource/remote-kv",
+    "version": "0.0.1",
+    "license": "MIT",
+    "dependencies": {
+        "aws-sdk": "^2.1167.0",
+        "file-saver": "^2.0.5",
+        "util": "^0.12.4"
+    },
+    "devDependencies": {
+        "@types/file-saver": "^2.0.5"
+    }
+}
diff --git a/libs/datasource/remote-kv/project.json b/libs/datasource/remote-kv/project.json
new file mode 100644
index 000000000..7a3438551
--- /dev/null
+++ b/libs/datasource/remote-kv/project.json
@@ -0,0 +1,45 @@
+{
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/datasource/remote-kv/src",
+    "projectType": "library",
+    "tags": ["datasource:remote-kv"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/datasource/remote-kv",
+                "tsConfig": "libs/datasource/remote-kv/tsconfig.lib.json",
+                "project": "libs/datasource/remote-kv/package.json",
+                "entryFile": "libs/datasource/remote-kv/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/datasource/remote-kv/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/datasource/remote-kv/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/datasource/remote-kv"],
+            "options": {
+                "jestConfig": "libs/datasource/remote-kv/jest.config.js",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/datasource/remote-kv/src/aws/aws-attachment.ts b/libs/datasource/remote-kv/src/aws/aws-attachment.ts
new file mode 100644
index 000000000..3aa8a566f
--- /dev/null
+++ b/libs/datasource/remote-kv/src/aws/aws-attachment.ts
@@ -0,0 +1,272 @@
+
+import * as AWS from 'aws-sdk';
+import type { Credentials } from 'aws-sdk';
+import type { ManagedUpload } from 'aws-sdk/lib/s3/managed_upload';
+import { saveAs } from 'file-saver';
+
+import {
+    bucketName,
+    bucketRegion,
+    folderName,
+    identityPoolId,
+    keyCreator,
+} from './aws-config';
+import toAsync from '../utils/to-async';
+import { MESSAGE_INFO } from '../constant/message-info';
+
+export default class AwsAttachment {
+    readonly #s3;
+
+    constructor(token?: string) {
+        if (token) {
+            AWS.config.region = bucketRegion;
+            AWS.config.credentials = new AWS.CognitoIdentityCredentials({
+                IdentityPoolId: identityPoolId,
+                WebIdentityToken: token,
+            });
+
+            /**
+             * get credentials，used when uploading from the server
+             */
+            (AWS.config.credentials as Credentials).get(err => {
+                if (err) {
+                    throw err;
+                }
+
+                // console.log('authing:', AWS.config.credentials);
+            });
+
+            this.#s3 = new AWS.S3({
+                apiVersion: '2006-03-01',
+                params: { Bucket: bucketName },
+            });
+            // this.#s3 = new AWS.S3Client({
+            //     region: bucketRegion,
+            //     credentials: fromCognitoIdentityPool({
+            //         clientConfig: { region: bucketRegion }, // Configure the underlying CognitoIdentityClient.
+            //         identityPoolId: identityPoolId,
+            //         logins: {
+            //             'affine.us.authing.co/oidc/': token
+            //         }
+            //     })
+            // });
+        } else {
+            throw new Error(MESSAGE_INFO.NO_AUTH.FAILURE);
+        }
+    }
+
+    /**
+     * upload
+     * @param file
+     * @returns {Promise<unknown>}
+     */
+    upload = (file: File) => {
+        const params = {
+            Bucket: bucketName,
+            Key: `${encodeURIComponent(folderName)}/${file.name}`,
+            Body: file,
+        };
+
+        return new Promise((resolve, reject) => {
+            this.#s3.upload(
+                params,
+                (err: Error, data: ManagedUpload.SendData) => {
+                    if (err) {
+                        return reject(`${MESSAGE_INFO.UPLOAD.FAILURE}: ${err}`);
+                    }
+
+                    resolve(data.Location);
+                }
+            );
+        });
+    };
+
+    // multipart upload
+    multipartUpload = (file: File): Promise<unknown> => {
+        const upload = new AWS.S3.ManagedUpload({
+            params: {
+                Bucket: bucketName,
+                Key: keyCreator(file.name),
+                Body: file,
+            },
+        });
+
+        return new Promise((resolve, reject) => {
+            upload.promise().then(
+                data => {
+                    resolve(data.Location);
+                },
+                (err: Error) => {
+                    reject(`${MESSAGE_INFO.UPLOAD.FAILURE}: ${err}`);
+                }
+            );
+        });
+    };
+
+    // file upload creator
+    uploadPromiseCreator = (fileList: File[]): Promise<string>[] => {
+        return fileList.map(file => {
+            const params = {
+                Bucket: bucketName,
+                Key: keyCreator(file.name),
+                Body: file,
+            };
+
+            return (() =>
+                new Promise((resolve, reject) => {
+                    this.#s3.upload(
+                        params,
+                        (err: Error, data: ManagedUpload.SendData) => {
+                            if (err) {
+                                reject(
+                                    `${MESSAGE_INFO.UPLOAD.FAILURE}: ${err}`
+                                );
+                            }
+
+                            resolve(data.Location);
+                        }
+                    );
+                }))();
+        });
+    };
+
+    /**
+     * bath upload
+     * @param fileList
+     * @returns {Promise<Array<{}>>}
+     */
+    batchUpload = async (fileList: File[]) => {
+        /**
+         * file upload creator
+         * @param fileList
+         * @returns {*}
+         */
+
+        const handleList = this.uploadPromiseCreator(fileList);
+        const [err, data_source] = await toAsync(
+            Promise.allSettled(handleList)
+        );
+
+        return new Promise((resolve, reject) => {
+            if (err) {
+                return reject(`${MESSAGE_INFO.UPLOAD.FAILURE}: ${err}`);
+            }
+
+            const result = data_source.reduce(
+                (
+                    {
+                        success,
+                        failed,
+                    }: {
+                        success: Array<{ name: string; url: string }>;
+                        failed: Array<{ name: string; reason: string }>;
+                    },
+                    current: Record<string, string>,
+                    index: number
+                ) => {
+                    const { name } = fileList[index];
+                    const { value, reason } = current;
+
+                    value
+                        ? success.push({ name, url: value })
+                        : failed.push({ name, reason });
+
+                    return { success, failed };
+                },
+                { success: [], failed: [] }
+            );
+
+            resolve(result);
+        });
+    };
+
+    /**
+     * get file object from AWS
+     * @param fileName
+     * @returns {Promise<unknown>}
+     */
+    getBuffData = (fileName: string) => {
+        const params = {
+            Bucket: bucketName,
+            Key: keyCreator(fileName),
+        };
+
+        return new Promise((resolve, reject) => {
+            this.#s3.getObject(params, (err: Error, data) => {
+                if (err) {
+                    return reject(`${MESSAGE_INFO.GET.FAILURE}: ${err}`);
+                }
+
+                resolve(data.Body);
+            });
+        });
+    };
+
+    /**
+     * download file form AWS
+     * @param fileName
+     * @returns {Promise<unknown>}
+     */
+    download = async (fileName: string) => {
+        const [err, buff] = await toAsync(this.getBuffData(fileName));
+
+        return new Promise((resolve, reject) => {
+            if (err) {
+                return reject(`${MESSAGE_INFO.DOWNLOAD.FAILURE}: ${err}`);
+            }
+
+            // Browser download
+            saveAs(new Blob([buff], { type: 'arraybuffer' }), fileName);
+
+            resolve(true);
+        });
+    };
+
+    /**
+     * check object is exist on AWS
+     * @param fileName
+     * @returns {Promise<unknown>}
+     */
+    exist = (fileName: string) => {
+        const params = {
+            Bucket: bucketName,
+            Key: keyCreator(fileName),
+        };
+
+        return new Promise((resolve, reject) => {
+            this.#s3.headObject(params, (err: Error) => {
+                if (err && err.name === 'NotFound') {
+                    return resolve(false);
+                }
+
+                if (err) {
+                    return reject(err);
+                }
+
+                resolve(true);
+            });
+        });
+    };
+
+    /**
+     * delete file on AWS
+     * @param fileName
+     * @returns {Promise<unknown>}
+     */
+    recovery = (fileName: string) => {
+        const params = {
+            Bucket: bucketName,
+            Key: keyCreator(fileName),
+        };
+
+        return new Promise((resolve, reject) => {
+            this.#s3.deleteObject(params, (err: Error) => {
+                if (err) {
+                    return reject(`${MESSAGE_INFO.DELETE.FAILURE} ${err}`);
+                }
+
+                resolve(true);
+            });
+        });
+    };
+}
diff --git a/libs/datasource/remote-kv/src/aws/aws-config.ts b/libs/datasource/remote-kv/src/aws/aws-config.ts
new file mode 100644
index 000000000..377313b89
--- /dev/null
+++ b/libs/datasource/remote-kv/src/aws/aws-config.ts
@@ -0,0 +1,9 @@
+const bucketRegion = 'us-east-1';
+const identityPoolId = 'us-east-1:a03b5510-f924-4f55-94f6-ed7fa9aeebca';
+const bucketName = 'affine-uploads';
+const folderName = 'mvp';
+
+export const keyCreator = (fileName: string) =>
+    `${encodeURIComponent(folderName)}/${fileName}`;
+
+export { bucketRegion, identityPoolId, bucketName, folderName };
diff --git a/libs/datasource/remote-kv/src/constant/message-info.ts b/libs/datasource/remote-kv/src/constant/message-info.ts
new file mode 100644
index 000000000..bb2a278ec
--- /dev/null
+++ b/libs/datasource/remote-kv/src/constant/message-info.ts
@@ -0,0 +1,22 @@
+export const MESSAGE_INFO = {
+    UPLOAD: {
+        SUCCESS: '',
+        FAILURE: 'Failed to upload file',
+    },
+    DOWNLOAD: {
+        SUCCESS: '',
+        FAILURE: 'Failed to download file',
+    },
+    GET: {
+        SUCCESS: '',
+        FAILURE: 'Failed to get object',
+    },
+    DELETE: {
+        SUCCESS: '',
+        FAILURE: 'Failed to delete file',
+    },
+    NO_AUTH: {
+        SUCCESS: '',
+        FAILURE: 'Failed to auth',
+    },
+};
diff --git a/libs/datasource/remote-kv/src/index.ts b/libs/datasource/remote-kv/src/index.ts
new file mode 100644
index 000000000..d357e807b
--- /dev/null
+++ b/libs/datasource/remote-kv/src/index.ts
@@ -0,0 +1,21 @@
+import AWSAttachment from './aws/aws-attachment';
+
+const PLATFORM_CONFIG = {
+    AWS_S3: 'aws_s3', // key replace with uuid
+};
+
+const PLATFORM = {
+    [PLATFORM_CONFIG.AWS_S3]: AWSAttachment,
+};
+
+export class RemoteKvService {
+    readonly #case;
+
+    constructor(token?: string, platform = PLATFORM_CONFIG.AWS_S3) {
+        this.#case = new PLATFORM[platform](token);
+    }
+
+    get instance() {
+        return this.#case;
+    }
+}
diff --git a/libs/datasource/remote-kv/src/utils/to-async.ts b/libs/datasource/remote-kv/src/utils/to-async.ts
new file mode 100644
index 000000000..547ebde94
--- /dev/null
+++ b/libs/datasource/remote-kv/src/utils/to-async.ts
@@ -0,0 +1,4 @@
+const toAsync = (promise: Promise<unknown>) =>
+    promise.then(data => [null, data]).catch(err => [err]);
+
+export default toAsync;
diff --git a/libs/datasource/remote-kv/tsconfig.json b/libs/datasource/remote-kv/tsconfig.json
new file mode 100644
index 000000000..83d582232
--- /dev/null
+++ b/libs/datasource/remote-kv/tsconfig.json
@@ -0,0 +1,27 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/datasource/remote-kv/tsconfig.lib.json b/libs/datasource/remote-kv/tsconfig.lib.json
new file mode 100644
index 000000000..0dda33329
--- /dev/null
+++ b/libs/datasource/remote-kv/tsconfig.lib.json
@@ -0,0 +1,22 @@
+{
+    "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": [
+        "**/*.spec.ts",
+        "**/*.test.ts",
+        "**/*.spec.tsx",
+        "**/*.test.tsx",
+        "**/*.spec.js",
+        "**/*.test.js",
+        "**/*.spec.jsx",
+        "**/*.test.jsx"
+    ],
+    "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/libs/datasource/remote-kv/tsconfig.spec.json b/libs/datasource/remote-kv/tsconfig.spec.json
new file mode 100644
index 000000000..ee70363dc
--- /dev/null
+++ b/libs/datasource/remote-kv/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "module": "commonjs",
+        "types": ["jest", "node"]
+    },
+    "include": [
+        "**/*.test.ts",
+        "**/*.spec.ts",
+        "**/*.test.tsx",
+        "**/*.spec.tsx",
+        "**/*.test.js",
+        "**/*.spec.js",
+        "**/*.test.jsx",
+        "**/*.spec.jsx",
+        "**/*.d.ts"
+    ]
+}
diff --git a/libs/datasource/state/.babelrc b/libs/datasource/state/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/datasource/state/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/datasource/state/.eslintrc.json b/libs/datasource/state/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/datasource/state/.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": {}
+        }
+    ]
+}
diff --git a/libs/datasource/state/README.md b/libs/datasource/state/README.md
new file mode 100644
index 000000000..afd715f2c
--- /dev/null
+++ b/libs/datasource/state/README.md
@@ -0,0 +1,3 @@
+# datasource-state
+
+> global state management for ligo-virgo
diff --git a/libs/datasource/state/jest.config.js b/libs/datasource/state/jest.config.js
new file mode 100644
index 000000000..c107fffdf
--- /dev/null
+++ b/libs/datasource/state/jest.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+    displayName: 'datasource-state',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/datasource/state',
+};
diff --git a/libs/datasource/state/package.json b/libs/datasource/state/package.json
new file mode 100644
index 000000000..95ae66817
--- /dev/null
+++ b/libs/datasource/state/package.json
@@ -0,0 +1,12 @@
+{
+    "name": "@toeverything/datasource/state",
+    "version": "0.0.1",
+    "license": "MIT",
+    "dependencies": {
+        "jotai": "^1.7.4"
+    },
+    "devDependencies": {
+        "authing-js-sdk": "^4.23.33",
+        "firebase": "^9.8.4"
+    }
+}
diff --git a/libs/datasource/state/project.json b/libs/datasource/state/project.json
new file mode 100644
index 000000000..bf9aa2c2c
--- /dev/null
+++ b/libs/datasource/state/project.json
@@ -0,0 +1,44 @@
+{
+    "sourceRoot": "libs/datasource/state/src",
+    "projectType": "library",
+    "tags": ["datasource:state"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/datasource/state",
+                "tsConfig": "libs/datasource/state/tsconfig.lib.json",
+                "project": "libs/datasource/state/package.json",
+                "entryFile": "libs/datasource/state/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "libs/rollup-ts-checker.config.cjs",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/datasource/state/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/datasource/state/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/datasource/state"],
+            "options": {
+                "jestConfig": "libs/datasource/state/jest.config.js",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/datasource/state/src/index.ts b/libs/datasource/state/src/index.ts
new file mode 100644
index 000000000..19ee32136
--- /dev/null
+++ b/libs/datasource/state/src/index.ts
@@ -0,0 +1,3 @@
+export * from './ui';
+export * from './user';
+export * from './page';
diff --git a/libs/datasource/state/src/page.ts b/libs/datasource/state/src/page.ts
new file mode 100644
index 000000000..39ed1b0ab
--- /dev/null
+++ b/libs/datasource/state/src/page.ts
@@ -0,0 +1,28 @@
+import { useCallback, useEffect } from 'react';
+import { useParams, useLocation } from 'react-router-dom';
+import { atom, useAtom } from 'jotai';
+// import { Virgo } from '@toeverything/components/editor-core';
+
+// type EditorsMap = Record<string, Virgo>;
+type EditorsMap = Record<string, any>;
+
+const _currentEditors = atom<EditorsMap>({} as EditorsMap);
+
+/** hook for using editors outside page */
+export const useCurrentEditors = () => {
+    const { workspace_id: workspaceId, page_id: pageId } = useParams();
+    const { pathname } = useLocation();
+    const [currentEditors, setCurrentEditors] = useAtom(_currentEditors);
+
+    useEffect(() => {
+        if (!workspaceId || !pageId) return;
+        if (pathname.split('/').length >= 3) {
+            setCurrentEditors({});
+        }
+    }, [pageId, pathname, setCurrentEditors, workspaceId]);
+
+    return {
+        currentEditors,
+        setCurrentEditors,
+    };
+};
diff --git a/libs/datasource/state/src/ui.ts b/libs/datasource/state/src/ui.ts
new file mode 100644
index 000000000..a47c0498d
--- /dev/null
+++ b/libs/datasource/state/src/ui.ts
@@ -0,0 +1,51 @@
+import { useCallback } from 'react';
+import { atom, useAtom } from 'jotai';
+
+const _showSpaceSidebarAtom = atom<boolean>(true);
+const _fixedDisplayAtom = atom<boolean>(true);
+
+/** workspace panel status including page-tree, default open */
+export const useShowSpaceSidebar = () => {
+    const [showSpaceSidebar, setShowSpaceSidebar] = useAtom(
+        _showSpaceSidebarAtom
+    );
+
+    const [fixedDisplay, setAlltime] = useAtom(_fixedDisplayAtom);
+
+    const toggleSpaceSidebar = useCallback(() => {
+        setAlltime(prev => !prev);
+        setShowSpaceSidebar(false);
+    }, [setAlltime, setShowSpaceSidebar]);
+
+    const setSpaceSidebarVisible = useCallback(
+        (visible: boolean) => setShowSpaceSidebar(visible),
+        [setShowSpaceSidebar]
+    );
+
+    return {
+        showSpaceSidebar,
+        fixedDisplay,
+        toggleSpaceSidebar,
+        setSpaceSidebarVisible,
+    };
+};
+
+const _showSettingsSidebarAtom = atom<boolean>(false);
+
+/** settings/layout/comment side panel status, default closed  */
+export const useShowSettingsSidebar = () => {
+    const [showSettingsSidebar, setShowSettingsSidebar] = useAtom(
+        _showSettingsSidebarAtom
+    );
+
+    const toggleSettingsSidebar = useCallback(
+        () => setShowSettingsSidebar(prev => !prev),
+        [setShowSettingsSidebar]
+    );
+
+    return {
+        showSettingsSidebar,
+        setShowSettingsSidebar,
+        toggleSettingsSidebar,
+    };
+};
diff --git a/libs/datasource/state/src/user.ts b/libs/datasource/state/src/user.ts
new file mode 100644
index 000000000..ce362cc72
--- /dev/null
+++ b/libs/datasource/state/src/user.ts
@@ -0,0 +1,83 @@
+import {
+    getAuth,
+    onAuthStateChanged,
+    User as FirebaseUser,
+} from 'firebase/auth';
+import { atom, useAtom } from 'jotai';
+import { useEffect, useMemo } from 'react';
+
+import { useIdentifyUser } from '@toeverything/datasource/feature-flags';
+import { UserInfo } from '@toeverything/utils';
+
+function _fromFirebaseUser(firebaseUser: FirebaseUser): UserInfo {
+    return {
+        id: firebaseUser.uid,
+        nickname: firebaseUser.displayName,
+        username: firebaseUser.displayName,
+        email: firebaseUser.email,
+        photo: firebaseUser.photoURL,
+    };
+}
+
+const _userAtom = atom<UserInfo | undefined>(undefined as UserInfo);
+const _loadingAtom = atom<boolean>(true);
+
+const _useUserAndSpace = () => {
+    const [user, setUser] = useAtom(_userAtom);
+    const [loading, setLoading] = useAtom(_loadingAtom);
+    const identifyUser = useIdentifyUser();
+
+    useEffect(() => {
+        if (loading) {
+            const auth = getAuth();
+            const oncePromise = new Promise<void>(resolve => {
+                // let resolved = false;
+                onAuthStateChanged(auth, async fbuser => {
+                    if (fbuser) {
+                        const user = _fromFirebaseUser(fbuser);
+                        await identifyUser({
+                            userName: user.nickname,
+                            id: user.id,
+                            email: user.email,
+                            // country: user.city
+                        });
+                        setUser(user);
+                        setLoading(false);
+                    }
+                    resolve();
+                });
+            });
+            Promise.all([oncePromise]).finally(() => {
+                setLoading(false);
+            });
+        }
+    }, []);
+
+    const currentSpaceId: string | undefined = useMemo(() => user?.id, [user]);
+
+    return {
+        user,
+        currentSpaceId,
+        loading,
+    };
+};
+
+const _useUserAndSpacesForFreeLogin = () => {
+    const [loading] = useAtom(_loadingAtom);
+
+    useEffect(() => setLoading(false), []);
+    const BRAND_ID = 'AFFiNE';
+    return {
+        user: {
+            photo: '',
+            id: BRAND_ID,
+            nickname: BRAND_ID,
+            email: '',
+        } as UserInfo,
+        currentSpaceId: BRAND_ID,
+        loading,
+    };
+};
+export const useUserAndSpaces = process.env['NX_FREE_LOGIN']
+    ? _useUserAndSpacesForFreeLogin
+    : _useUserAndSpace;
diff --git a/libs/datasource/state/tsconfig.json b/libs/datasource/state/tsconfig.json
new file mode 100644
index 000000000..0dddb5a9e
--- /dev/null
+++ b/libs/datasource/state/tsconfig.json
@@ -0,0 +1,26 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "noImplicitAny": false
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/datasource/state/tsconfig.lib.json b/libs/datasource/state/tsconfig.lib.json
new file mode 100644
index 000000000..0dda33329
--- /dev/null
+++ b/libs/datasource/state/tsconfig.lib.json
@@ -0,0 +1,22 @@
+{
+    "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": [
+        "**/*.spec.ts",
+        "**/*.test.ts",
+        "**/*.spec.tsx",
+        "**/*.test.tsx",
+        "**/*.spec.js",
+        "**/*.test.js",
+        "**/*.spec.jsx",
+        "**/*.test.jsx"
+    ],
+    "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/libs/datasource/state/tsconfig.spec.json b/libs/datasource/state/tsconfig.spec.json
new file mode 100644
index 000000000..ee70363dc
--- /dev/null
+++ b/libs/datasource/state/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "module": "commonjs",
+        "types": ["jest", "node"]
+    },
+    "include": [
+        "**/*.test.ts",
+        "**/*.spec.ts",
+        "**/*.test.tsx",
+        "**/*.spec.tsx",
+        "**/*.test.js",
+        "**/*.spec.js",
+        "**/*.test.jsx",
+        "**/*.spec.jsx",
+        "**/*.d.ts"
+    ]
+}
diff --git a/libs/framework/virgo/.babelrc b/libs/framework/virgo/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/framework/virgo/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/framework/virgo/.eslintrc.json b/libs/framework/virgo/.eslintrc.json
new file mode 100644
index 000000000..bd2c1567c
--- /dev/null
+++ b/libs/framework/virgo/.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": {}
+        }
+    ]
+}
diff --git a/libs/framework/virgo/README.md b/libs/framework/virgo/README.md
new file mode 100644
index 000000000..0c10bef71
--- /dev/null
+++ b/libs/framework/virgo/README.md
@@ -0,0 +1,7 @@
+# framework-virgo
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test framework-virgo` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/framework/virgo/jest.config.js b/libs/framework/virgo/jest.config.js
new file mode 100644
index 000000000..25892e6de
--- /dev/null
+++ b/libs/framework/virgo/jest.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+    displayName: 'framework-virgo',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/framework/virgo',
+};
diff --git a/libs/framework/virgo/package.json b/libs/framework/virgo/package.json
new file mode 100644
index 000000000..79dee4c3b
--- /dev/null
+++ b/libs/framework/virgo/package.json
@@ -0,0 +1,6 @@
+{
+    "name": "@toeverything/framework/virgo",
+    "version": "0.0.1",
+    "license": "MIT",
+    "dependencies": {}
+}
diff --git a/libs/framework/virgo/project.json b/libs/framework/virgo/project.json
new file mode 100644
index 000000000..aa7fda7da
--- /dev/null
+++ b/libs/framework/virgo/project.json
@@ -0,0 +1,48 @@
+{
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/framework/virgo/src",
+    "projectType": "library",
+    "tags": ["framework:editor"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/framework/virgo",
+                "tsConfig": "libs/framework/virgo/tsconfig.lib.json",
+                "project": "libs/framework/virgo/package.json",
+                "entryFile": "libs/framework/virgo/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/framework/virgo/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "libs/framework/virgo/**/*.{ts,tsx,js,jsx}"
+                ]
+            }
+        },
+        "check": {
+            "executor": "./tools/executors/tsCheck:tsCheck"
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/framework/virgo"],
+            "options": {
+                "jestConfig": "libs/framework/virgo/jest.config.js",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/framework/virgo/src/index.ts b/libs/framework/virgo/src/index.ts
new file mode 100644
index 000000000..47a061c40
--- /dev/null
+++ b/libs/framework/virgo/src/index.ts
@@ -0,0 +1,4 @@
+// Workaround for build error
+// Error during bundle: Error: /app/libs/framework/virgo/src/index.ts(1,15): semantic error TS7016: Could not find a declaration file for module '@toeverything/components/editor-core'. '/app/dist/libs/components/editor-core/index.js' implicitly has an 'any' type.
+// @ts-ignore
+export * from '@toeverything/components/editor-core';
diff --git a/libs/framework/virgo/tsconfig.json b/libs/framework/virgo/tsconfig.json
new file mode 100644
index 000000000..45ee85200
--- /dev/null
+++ b/libs/framework/virgo/tsconfig.json
@@ -0,0 +1,27 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true
+        // TODO: add back
+        // "strictNullChecks": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/framework/virgo/tsconfig.lib.json b/libs/framework/virgo/tsconfig.lib.json
new file mode 100644
index 000000000..0dda33329
--- /dev/null
+++ b/libs/framework/virgo/tsconfig.lib.json
@@ -0,0 +1,22 @@
+{
+    "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": [
+        "**/*.spec.ts",
+        "**/*.test.ts",
+        "**/*.spec.tsx",
+        "**/*.test.tsx",
+        "**/*.spec.js",
+        "**/*.test.js",
+        "**/*.spec.jsx",
+        "**/*.test.jsx"
+    ],
+    "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/libs/framework/virgo/tsconfig.spec.json b/libs/framework/virgo/tsconfig.spec.json
new file mode 100644
index 000000000..ee70363dc
--- /dev/null
+++ b/libs/framework/virgo/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "module": "commonjs",
+        "types": ["jest", "node"]
+    },
+    "include": [
+        "**/*.test.ts",
+        "**/*.spec.ts",
+        "**/*.test.tsx",
+        "**/*.spec.tsx",
+        "**/*.test.js",
+        "**/*.spec.js",
+        "**/*.test.jsx",
+        "**/*.spec.jsx",
+        "**/*.d.ts"
+    ]
+}
diff --git a/libs/rollup-ts-checker.config.cjs b/libs/rollup-ts-checker.config.cjs
new file mode 100644
index 000000000..4dd39b2f8
--- /dev/null
+++ b/libs/rollup-ts-checker.config.cjs
@@ -0,0 +1,32 @@
+const nrwlConfig = require('@nrwl/react/plugins/bundle-rollup');
+const style9 = require('style9/rollup');
+
+module.exports = config => {
+    const nxConfig = nrwlConfig(config);
+    const padding = [];
+
+    const postcssIndex = nxConfig.plugins.findIndex(p => p?.name === 'postcss');
+    if (postcssIndex !== -1) {
+        const postcss = nxConfig.plugins[postcssIndex];
+
+        padding.push(postcss);
+        nxConfig.plugins.splice(postcssIndex, 1);
+
+        const style9Plugin = style9({
+            minifyProperties: true,
+            incrementalClassnames: true,
+        });
+        padding.push(style9Plugin);
+
+        const rpt2Index = nxConfig.plugins.findIndex(p => p?.name === 'rpt2');
+        if (rpt2Index !== -1) {
+            padding.push(nxConfig.plugins[rpt2Index]);
+            nxConfig.plugins.splice(rpt2Index, 1);
+        }
+    }
+
+    return {
+        ...nxConfig,
+        plugins: [...padding, ...nxConfig.plugins].filter(v => v),
+    };
+};
diff --git a/libs/rollup.config.cjs b/libs/rollup.config.cjs
new file mode 100644
index 000000000..630ef6063
--- /dev/null
+++ b/libs/rollup.config.cjs
@@ -0,0 +1,32 @@
+const nrwlConfig = require('@nrwl/react/plugins/bundle-rollup');
+const style9 = require('style9/rollup');
+
+module.exports = config => {
+    const nxConfig = nrwlConfig(config);
+    const padding = [];
+
+    const postcssIndex = nxConfig.plugins.findIndex(p => p?.name === 'postcss');
+    if (postcssIndex !== -1) {
+        const postcss = nxConfig.plugins[postcssIndex];
+
+        padding.push(postcss);
+        nxConfig.plugins.splice(postcssIndex, 1);
+
+        const style9Plugin = style9({
+            minifyProperties: true,
+            incrementalClassnames: true,
+        });
+        padding.push(style9Plugin);
+
+        const rpt2Index = nxConfig.plugins.findIndex(p => p?.name === 'rpt2');
+        if (rpt2Index !== -1) {
+            // padding.push(nxConfig.plugins[rpt2Index]);
+            nxConfig.plugins.splice(rpt2Index, 1);
+        }
+    }
+
+    return {
+        ...nxConfig,
+        plugins: [...padding, ...nxConfig.plugins].filter(v => v),
+    };
+};
diff --git a/libs/utils/.babelrc b/libs/utils/.babelrc
new file mode 100644
index 000000000..ac4757ac3
--- /dev/null
+++ b/libs/utils/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}
diff --git a/libs/utils/.eslintrc.json b/libs/utils/.eslintrc.json
new file mode 100644
index 000000000..1f5ec76fb
--- /dev/null
+++ b/libs/utils/.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": {}
+        }
+    ]
+}
diff --git a/libs/utils/jest.config.js b/libs/utils/jest.config.js
new file mode 100644
index 000000000..142c35bfa
--- /dev/null
+++ b/libs/utils/jest.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+    displayName: 'utils',
+    preset: '../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]sx?$': 'babel-jest',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../coverage/libs/utils',
+};
diff --git a/libs/utils/package.json b/libs/utils/package.json
new file mode 100644
index 000000000..dab11feeb
--- /dev/null
+++ b/libs/utils/package.json
@@ -0,0 +1,14 @@
+{
+    "name": "@toeverything/utils",
+    "version": "0.0.1",
+    "license": "MIT",
+    "dependencies": {
+        "copy-to-clipboard": "^3.3.1",
+        "ffc-js-client-side-sdk": "^1.1.4",
+        "js-logger": "^1.6.1",
+        "lodash-es": "^4.17.21"
+    },
+    "devDependencies": {
+        "@types/lodash-es": "^4.17.6"
+    }
+}
diff --git a/libs/utils/project.json b/libs/utils/project.json
new file mode 100644
index 000000000..9ab439f38
--- /dev/null
+++ b/libs/utils/project.json
@@ -0,0 +1,42 @@
+{
+    "sourceRoot": "libs/utils/src",
+    "projectType": "library",
+    "tags": ["library:utils"],
+    "targets": {
+        "build": {
+            "executor": "@nrwl/web:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/utils",
+                "tsConfig": "libs/utils/tsconfig.lib.json",
+                "project": "libs/utils/package.json",
+                "entryFile": "libs/utils/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "libs/rollup-ts-checker.config.cjs",
+                "compiler": "babel",
+                "assets": [
+                    {
+                        "glob": "libs/utils/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": ["libs/utils/**/*.{ts,tsx,js,jsx}"]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["coverage/libs/utils"],
+            "options": {
+                "jestConfig": "libs/utils/jest.config.js",
+                "passWithNoTests": true
+            }
+        }
+    }
+}
diff --git a/libs/utils/src/constants.ts b/libs/utils/src/constants.ts
new file mode 100644
index 000000000..976736e78
--- /dev/null
+++ b/libs/utils/src/constants.ts
@@ -0,0 +1,10 @@
+export const AFFINE_MAIN_SERVER = '/api/v1';
+// export const AFFINE_MAIN_SERVER = 'http://localhost:3001/api/v1';
+
+export const AUTHING_APP_ID_CN = '61961a7b8b90af37e7c422e0';
+export const AUTHING_APP_ID_US = '626941ad32dea590043903d8';
+export const AUTHING_APP_HOST_US = 'https://affine.us.authing.co';
+
+export const USER_AUTH_LOCAL_KEY = '_authing_token';
+export const LOGOUT_LOCAL_STORAGE = [USER_AUTH_LOCAL_KEY, '_authing_user'];
+export const LOGOUT_COOKIES = ['authing_session'];
diff --git a/libs/utils/src/copy-to-clipboard.ts b/libs/utils/src/copy-to-clipboard.ts
new file mode 100644
index 000000000..85d4dcb8f
--- /dev/null
+++ b/libs/utils/src/copy-to-clipboard.ts
@@ -0,0 +1,3 @@
+import copy from 'copy-to-clipboard';
+
+export const copyToClipboard = copy;
diff --git a/libs/utils/src/date.ts b/libs/utils/src/date.ts
new file mode 100644
index 000000000..097a13d1b
--- /dev/null
+++ b/libs/utils/src/date.ts
@@ -0,0 +1,14 @@
+/**
+ * Get the current time in ISO format, the return value example is 2021-11-17T15:45:56, the return value can be directly used to create a Date object
+ */
+export function getDateIsoStringWithTimezone(dateMilliseconds?: number) {
+    if (dateMilliseconds === undefined || dateMilliseconds === null) {
+        dateMilliseconds = Date.now();
+    }
+    //offset in milliseconds
+    const timezoneOffset = new Date().getTimezoneOffset() * 60000;
+    const date_iso_string = new Date(
+        dateMilliseconds - timezoneOffset
+    ).toISOString();
+    return date_iso_string.slice(0, -5);
+}
diff --git a/libs/utils/src/di/di.ts b/libs/utils/src/di/di.ts
new file mode 100644
index 000000000..ba61da5b4
--- /dev/null
+++ b/libs/utils/src/di/di.ts
@@ -0,0 +1,124 @@
+type Token = any;
+
+interface DependencyConfig {
+    token: Token;
+    lazy?: boolean;
+}
+
+export interface Value<T> {
+    value: T;
+}
+
+export interface DependencyCallOrConstructProps {
+    getDependency: <R, T = any>(
+        token: T | (new (...p: any[]) => T)
+    ) => R extends Value<infer A> ? A : T;
+}
+
+interface DependencyCallOrConstruct {
+    new (props: DependencyCallOrConstructProps): any;
+    (props: DependencyCallOrConstructProps): any;
+}
+
+export interface RegisterDependencyConfig {
+    type: 'value' | 'function' | 'class';
+    value: DependencyCallOrConstruct | any;
+    dependencies?: DependencyConfig[];
+    /**
+     * The unique identifier of the injection, if not passed, the value is equal to value
+     */
+    token: Token;
+}
+
+export class DiContainer {
+    private dependency_config = new Map<Token, RegisterDependencyConfig>();
+    private dependency_map = new Map<Token, any>();
+    private dependency_status = new Map<Token, 'loading' | 'loaded'>();
+
+    private get_create_params(
+        config: RegisterDependencyConfig
+    ): DependencyCallOrConstructProps {
+        const get_dependency: DependencyCallOrConstructProps['getDependency'] =
+            token => {
+                const found = config.dependencies?.find(
+                    dep => dep.token === token
+                );
+                if (!found) {
+                    return null;
+                }
+                if (found.lazy) {
+                    this.load(found.token);
+                }
+                return this.dependency_map.get(token);
+            };
+
+        return {
+            getDependency: get_dependency,
+        };
+    }
+
+    private load(token: Token) {
+        if (this.dependency_map.has(token)) {
+            return;
+        }
+        if (this.dependency_status.get(token) === 'loading') {
+            throw new Error('Circular dependency', token);
+        }
+        this.dependency_status.set(token, 'loading');
+        const config = this.dependency_config.get(token);
+        if (!config) {
+            throw new Error('No dependencies found', token);
+        }
+        switch (config.type) {
+            case 'value': {
+                this.dependency_map.set(token, config.value);
+                break;
+            }
+            case 'class': {
+                const deps = config.dependencies || [];
+                deps.forEach(dep => {
+                    if (!dep.lazy && !this.dependency_map.has(dep.token)) {
+                        this.load(dep.token);
+                    }
+                });
+                this.dependency_map.set(
+                    token,
+                    new config.value(this.get_create_params(config))
+                );
+                break;
+            }
+            case 'function': {
+                const deps = config.dependencies || [];
+                deps.forEach(dep => {
+                    if (!dep.lazy && !this.dependency_map.has(dep.token)) {
+                        this.load(dep.token);
+                    }
+                });
+                this.dependency_map.set(
+                    token,
+                    config.value(this.get_create_params(config))
+                );
+                break;
+            }
+            default: {
+                console.error(
+                    'Unknown type of dependency',
+                    config.token,
+                    config.type
+                );
+            }
+        }
+        this.dependency_status.set(token, 'loaded');
+    }
+
+    register(dependencyConfigs: RegisterDependencyConfig[]) {
+        dependencyConfigs.forEach(config => {
+            this.dependency_config.set(config.token, config);
+        });
+    }
+
+    getDependency: DependencyCallOrConstructProps['getDependency'] = token => {
+        this.load(token);
+        return this.dependency_map.get(token);
+    };
+}
diff --git a/libs/utils/src/di/index.ts b/libs/utils/src/di/index.ts
new file mode 100644
index 000000000..4f423f0cd
--- /dev/null
+++ b/libs/utils/src/di/index.ts
@@ -0,0 +1,6 @@
+export { DiContainer } from './di';
+export type {
+    Value,
+    DependencyCallOrConstructProps,
+    RegisterDependencyConfig,
+} from './di';
diff --git a/libs/utils/src/dom.ts b/libs/utils/src/dom.ts
new file mode 100644
index 000000000..0d373b715
--- /dev/null
+++ b/libs/utils/src/dom.ts
@@ -0,0 +1,112 @@
+/**
+ * Get the position information of the dom element based on ClientRect
+ * @param {HTMLElement} dom
+ * @param {HTMLElement=} parent
+ * @returns
+ */
+export function getBoundingOffsetRect(
+    dom: HTMLElement | Element,
+    parent?: HTMLElement
+): DOMRect {
+    const dom_rect = dom.getBoundingClientRect();
+    if (!parent) {
+        return dom_rect;
+    }
+    const parent_rect = parent.getBoundingClientRect();
+    const x = dom_rect.x - parent_rect.x;
+    const y = dom_rect.y - parent_rect.y;
+    const rect = {
+        width: dom_rect.width,
+        height: dom_rect.height,
+        x,
+        y,
+        left: x,
+        top: y,
+        right: x + dom_rect.width,
+        bottom: y + dom_rect.height,
+    };
+    return {
+        ...rect,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        toJSON() {
+            return rect;
+        },
+    };
+}
+
+/**
+ *
+ * get block`s id from element or node
+ * @export
+ * @param {(HTMLElement | Node)} node
+ * @return {*}
+ */
+export function getBlockIdByDom(node: HTMLElement | Node): string | undefined {
+    let element;
+    if (node instanceof HTMLElement) {
+        element = node;
+    }
+    if (node instanceof Node) {
+        element = node.parentElement;
+    }
+    return element
+        ?.closest('[data-block-id]')
+        ?.attributes.getNamedItem('data-block-id')?.value;
+}
+
+export function removeDomPaddingFromDomRect(
+    dom: HTMLElement | Element,
+    rect: DOMRect
+): DOMRect {
+    const client_rect = {
+        x: rect.x,
+        y: rect.y,
+        left: rect.left,
+        top: rect.top,
+        bottom: rect.bottom,
+        right: rect.right,
+        width: rect.width,
+        height: rect.height,
+    };
+    const computed_style = window.getComputedStyle(dom);
+    const padding_left = parseInt(computed_style.paddingLeft);
+    const padding_right = parseInt(computed_style.paddingRight);
+    const padding_top = parseInt(computed_style.paddingTop);
+    const padding_bottom = parseInt(computed_style.paddingBottom);
+
+    if (client_rect) {
+        client_rect.left += padding_left;
+        client_rect.right -= padding_right;
+        client_rect.top += padding_top;
+        client_rect.bottom -= padding_bottom;
+        client_rect.x = client_rect.left;
+        client_rect.y = client_rect.top;
+        client_rect.width = client_rect.right - client_rect.left;
+        client_rect.height = client_rect.bottom - client_rect.top;
+    }
+    return {
+        ...client_rect,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        toJSON() {
+            return client_rect;
+        },
+    };
+}
+
+export const withUnit = (text: string | number, unit = 'px') => {
+    return `${text}${unit}`;
+};
+
+export const withPx = (text: string | number) => withUnit(text, 'px');
+
+export const ownerDocument = (node: Node | null | undefined): Document => {
+    return (node && node.ownerDocument) || document;
+};
+
+export const getBlockIdByNode = (node: Node) => {
+    return (
+        node.parentElement
+            ?.closest('[data-block-id]')
+            ?.attributes.getNamedItem('data-block-id')?.value ?? undefined
+    );
+};
diff --git a/libs/utils/src/env.ts b/libs/utils/src/env.ts
new file mode 100644
index 000000000..3d1c1e594
--- /dev/null
+++ b/libs/utils/src/env.ts
@@ -0,0 +1 @@
+export const isDev = process.env['NODE_ENV'] === 'development';
diff --git a/libs/utils/src/error-boundary.tsx b/libs/utils/src/error-boundary.tsx
new file mode 100644
index 000000000..aab130fc9
--- /dev/null
+++ b/libs/utils/src/error-boundary.tsx
@@ -0,0 +1,177 @@
+import * as React from 'react';
+
+const changedArray = (a: Array<unknown> = [], b: Array<unknown> = []) =>
+    a.length !== b.length ||
+    a.some((item, index) => !Object.is(item, b[index]));
+
+interface FallbackProps {
+    error: Error;
+    resetErrorBoundary: (...args: Array<unknown>) => void;
+}
+
+interface ErrorBoundaryPropsWithComponent {
+    onResetKeysChange?: (
+        prevResetKeys: Array<unknown> | undefined,
+        resetKeys: Array<unknown> | undefined
+    ) => void;
+    onReset?: (...args: Array<unknown>) => void;
+    onError?: (error: Error, info: { componentStack: string }) => void;
+    resetKeys?: Array<unknown>;
+    fallback?: never;
+    FallbackComponent: React.ComponentType<FallbackProps>;
+    fallbackRender?: never;
+}
+
+declare function FallbackRender(
+    props: FallbackProps
+): React.ReactElement<
+    unknown,
+    string | React.FunctionComponent | typeof React.Component
+> | null;
+
+interface ErrorBoundaryPropsWithRender {
+    onResetKeysChange?: (
+        prevResetKeys: Array<unknown> | undefined,
+        resetKeys: Array<unknown> | undefined
+    ) => void;
+    onReset?: (...args: Array<unknown>) => void;
+    onError?: (error: Error, info: { componentStack: string }) => void;
+    resetKeys?: Array<unknown>;
+    fallback?: never;
+    FallbackComponent?: never;
+    fallbackRender: typeof FallbackRender;
+}
+
+interface ErrorBoundaryPropsWithFallback {
+    onResetKeysChange?: (
+        prevResetKeys: Array<unknown> | undefined,
+        resetKeys: Array<unknown> | undefined
+    ) => void;
+    onReset?: (...args: Array<unknown>) => void;
+    onError?: (error: Error, info: { componentStack: string }) => void;
+    resetKeys?: Array<unknown>;
+    fallback: React.ReactElement<
+        unknown,
+        string | React.FunctionComponent | typeof React.Component
+    > | null;
+    FallbackComponent?: never;
+    fallbackRender?: never;
+}
+
+type ErrorBoundaryProps =
+    | ErrorBoundaryPropsWithFallback
+    | ErrorBoundaryPropsWithComponent
+    | ErrorBoundaryPropsWithRender;
+
+type ErrorBoundaryState = { error: Error | null };
+
+const initialState: ErrorBoundaryState = { error: null };
+
+class ErrorBoundary extends React.Component<
+    React.PropsWithRef<React.PropsWithChildren<ErrorBoundaryProps>>,
+    ErrorBoundaryState
+> {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    static getDerivedStateFromError(error: Error) {
+        return { error };
+    }
+
+    override state = initialState;
+    resetErrorBoundary = (...args: Array<unknown>) => {
+        this.props.onReset?.(...args);
+        this.reset();
+    };
+
+    reset() {
+        this.setState(initialState);
+    }
+
+    override componentDidCatch(error: Error, info: React.ErrorInfo) {
+        this.props.onError?.(error, info);
+    }
+
+    override componentDidUpdate(
+        prevProps: ErrorBoundaryProps,
+        prevState: ErrorBoundaryState
+    ) {
+        const { error } = this.state;
+        const { resetKeys } = this.props;
+
+        // There's an edge case where if the thing that triggered the error
+        // happens to *also* be in the resetKeys array, we'd end up resetting
+        // the error boundary immediately. This would likely trigger a second
+        // error to be thrown.
+        // So we make sure that we don't check the resetKeys on the first call
+        // of cDU after the error is set
+
+        if (
+            error !== null &&
+            prevState.error !== null &&
+            changedArray(prevProps.resetKeys, resetKeys)
+        ) {
+            this.props.onResetKeysChange?.(prevProps.resetKeys, resetKeys);
+            this.reset();
+        }
+    }
+
+    override render() {
+        const { error } = this.state;
+
+        const { fallbackRender, FallbackComponent, fallback } = this.props;
+
+        if (error !== null) {
+            const props = {
+                error,
+                resetErrorBoundary: this.resetErrorBoundary,
+            };
+            if (React.isValidElement(fallback)) {
+                return fallback;
+            } else if (typeof fallbackRender === 'function') {
+                return fallbackRender(props);
+            } else if (FallbackComponent) {
+                return <FallbackComponent {...props} />;
+            } else {
+                throw new Error(
+                    'react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop'
+                );
+            }
+        }
+
+        return this.props.children;
+    }
+}
+
+function withErrorBoundary<P>(
+    Component: React.ComponentType<P>,
+    errorBoundaryProps: ErrorBoundaryProps
+): React.ComponentType<P> {
+    const Wrapped: React.ComponentType<P> = props => {
+        return (
+            <ErrorBoundary {...errorBoundaryProps}>
+                <Component {...props} />
+            </ErrorBoundary>
+        );
+    };
+
+    // Format for display in DevTools
+    const name = Component.displayName || Component.name || 'Unknown';
+    Wrapped.displayName = `withErrorBoundary(${name})`;
+
+    return Wrapped;
+}
+
+function useErrorHandler(givenError?: unknown): (error: unknown) => void {
+    const [error, setError] = React.useState<unknown>(null);
+    if (givenError != null) throw givenError;
+    if (error != null) throw error;
+    return setError;
+}
+
+export { ErrorBoundary, withErrorBoundary, useErrorHandler };
+export type {
+    FallbackProps,
+    ErrorBoundaryPropsWithComponent,
+    ErrorBoundaryPropsWithRender,
+    ErrorBoundaryPropsWithFallback,
+    ErrorBoundaryProps,
+};
diff --git a/libs/utils/src/function.ts b/libs/utils/src/function.ts
new file mode 100644
index 000000000..6645e0fd0
--- /dev/null
+++ b/libs/utils/src/function.ts
@@ -0,0 +1,17 @@
+import { log } from './logger';
+
+interface CreateNoopWithMessageProps {
+    module?: string;
+    message: string;
+    level?: 'info' | 'warn' | 'error';
+}
+
+export function createNoopWithMessage(
+    props: CreateNoopWithMessageProps
+): (...p: any[]) => any {
+    const { message, level = 'info', module } = props;
+    const module_log = module ? log.get(module) : log;
+    return () => {
+        module_log[level](message);
+    };
+}
diff --git a/libs/utils/src/index.ts b/libs/utils/src/index.ts
new file mode 100644
index 000000000..328458be7
--- /dev/null
+++ b/libs/utils/src/index.ts
@@ -0,0 +1,35 @@
+export * from './types';
+
+export * from './constants';
+
+export * from './error-boundary';
+
+export * from './date';
+
+export * from './utils';
+
+export * from './dom';
+
+// eslint-disable-next-line no-restricted-imports
+export * from './lodash';
+
+export * from './rect';
+
+export * from './keyboard';
+
+export * from './useragent';
+
+export { isDev } from './env';
+
+export { log } from './logger';
+
+export { createNoopWithMessage } from './function';
+
+export { DiContainer } from './di';
+export type {
+    Value as DiValue,
+    DependencyCallOrConstructProps,
+    RegisterDependencyConfig,
+} from './di';
+
+export { copyToClipboard } from './copy-to-clipboard';
diff --git a/libs/utils/src/keyboard.ts b/libs/utils/src/keyboard.ts
new file mode 100644
index 000000000..af9e5f189
--- /dev/null
+++ b/libs/utils/src/keyboard.ts
@@ -0,0 +1,20 @@
+import { KeyboardEvent } from 'react';
+
+class KeyboardHelper {
+    public eventHelper: EventHelper;
+
+    constructor() {
+        this.eventHelper = new EventHelper();
+    }
+}
+
+class EventHelper {
+    isSelectAll(event: KeyboardEvent) {
+        if ((event.ctrlKey || event.metaKey) && event.code === 'KeyA') {
+            return true;
+        }
+        return false;
+    }
+}
+
+export const keyboardHelper = new KeyboardHelper();
diff --git a/libs/utils/src/lodash.ts b/libs/utils/src/lodash.ts
new file mode 100644
index 000000000..593d52ba4
--- /dev/null
+++ b/libs/utils/src/lodash.ts
@@ -0,0 +1,24 @@
+// eslint-disable-next-line no-restricted-imports
+export {
+    debounce,
+    throttle,
+    cloneDeep,
+    isEqual,
+    sum,
+    has,
+    forEach,
+    upperFirst,
+    curry,
+    isFunction,
+    isString,
+    isPlainObject,
+    noop,
+    lowerFirst,
+    last,
+    first,
+    without,
+    difference,
+    escape,
+    countBy,
+    maxBy,
+} from 'lodash-es';
diff --git a/libs/utils/src/logger.ts b/libs/utils/src/logger.ts
new file mode 100644
index 000000000..75b9aad98
--- /dev/null
+++ b/libs/utils/src/logger.ts
@@ -0,0 +1,4 @@
+import Logger from 'js-logger';
+// eslint-disable-next-line react-hooks/rules-of-hooks
+Logger.useDefaults();
+export const log = Logger;
diff --git a/libs/utils/src/rect.ts b/libs/utils/src/rect.ts
new file mode 100644
index 000000000..d13b08fa7
--- /dev/null
+++ b/libs/utils/src/rect.ts
@@ -0,0 +1,172 @@
+export class Point {
+    public x: number;
+    public y: number;
+
+    constructor(x: number, y: number) {
+        this.x = x;
+        this.y = y;
+    }
+
+    public equals({ x, y }: Point) {
+        return this.x === x && this.y === y;
+    }
+
+    public xDistance({ x }: Point) {
+        return this.x - x;
+    }
+
+    public yDistance({ y }: Point) {
+        return this.y - y;
+    }
+
+    public xDistanceAbsolute(point: Point) {
+        return Math.abs(this.xDistance(point));
+    }
+
+    public yDistanceAbsolute(point: Point) {
+        return Math.abs(this.yDistance(point));
+    }
+
+    public distance(point: Point) {
+        return Math.sqrt(
+            Math.pow(this.xDistance(point), 2) +
+                Math.pow(this.yDistance(point), 2)
+        );
+    }
+}
+
+export class Rect {
+    private _left: number;
+    private _top: number;
+    private _right: number;
+    private _bottom: number;
+
+    constructor(left: number, top: number, right: number, bottom: number) {
+        const [physicTop, physicBottom] =
+            top <= bottom ? [top, bottom] : [bottom, top];
+        const [physicLeft, physicRight] =
+            left <= right ? [left, right] : [right, left];
+        this._top = physicTop;
+        this._right = physicRight;
+        this._left = physicLeft;
+        this._bottom = physicBottom;
+    }
+
+    get width() {
+        return Math.abs(this._left - this._right);
+    }
+
+    get height() {
+        return Math.abs(this._bottom - this._top);
+    }
+
+    get top() {
+        return this._top;
+    }
+
+    get left() {
+        return this._left;
+    }
+
+    get bottom() {
+        return this._bottom;
+    }
+
+    get right() {
+        return this._right;
+    }
+
+    equals({ top, left, bottom, right }: Rect) {
+        return (
+            top === this._top &&
+            bottom === this._bottom &&
+            left === this._left &&
+            right === this._right
+        );
+    }
+
+    isContainPoint({ x, y }: Point) {
+        return (
+            y >= this._top &&
+            y <= this._bottom &&
+            x >= this.left &&
+            x <= this._right
+        );
+    }
+
+    isContain({ top, left, bottom, right }: Rect) {
+        return (
+            top >= this._top &&
+            top <= this._bottom &&
+            bottom >= this._top &&
+            bottom <= this._bottom &&
+            left >= this._left &&
+            left <= this.right &&
+            right >= this.left &&
+            right <= this._right
+        );
+    }
+
+    isIntersect(rect: Rect) {
+        const { left: x1, top: y1, width: w1, height: h1 } = rect;
+        const { left: x2, top: y2, width: w2, height: h2 } = this;
+        const maxX = x1 + w1 >= x2 + w2 ? x1 + w1 : x2 + w2;
+        const maxY = y1 + h1 >= y2 + h2 ? y1 + h1 : y2 + h2;
+        const minX = x1 <= x2 ? x1 : x2;
+        const minY = y1 <= y2 ? y1 : y2;
+        if (maxX - minX <= w1 + w2 && maxY - minY <= h1 + h2) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    isPointDown({ y }: Point) {
+        return this.bottom < y;
+    }
+
+    isPointUp({ y }: Point) {
+        return y < this.top;
+    }
+
+    isPointLeft({ x }: Point) {
+        return x < this.left;
+    }
+
+    isPointRight({ x }: Point) {
+        return x > this.right;
+    }
+
+    fromNewLeft(left: number) {
+        this._left = left;
+        return new Rect(left, this.top, this.right, this.bottom);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    static fromLTRB(left: number, top: number, right: number, bottom: number) {
+        return new Rect(left, top, right, bottom);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    static fromLWTH(left: number, width: number, top: number, height: number) {
+        return new Rect(left, top, left + width, top + height);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    static fromPoints(startPoint: Point, endPoint: Point) {
+        const { y: top, x: left } = startPoint;
+        const { y: bottom, x: right } = endPoint;
+        return Rect.fromLTRB(left, top, right, bottom);
+    }
+}
+
+export const pointsToRect = (startPoint: Point, endPoint: Point) => {
+    const { y: top, x: left } = startPoint;
+    const { y: bottom, x: right } = endPoint;
+    return Rect.fromLTRB(left, top, right, bottom);
+};
+
+export const domToRect = (dom: HTMLElement) => {
+    const { top, width, left, height } = dom.getBoundingClientRect();
+    return Rect.fromLWTH(left, width, top, height);
+};
diff --git a/libs/utils/src/types/index.ts b/libs/utils/src/types/index.ts
new file mode 100644
index 000000000..e77d922f4
--- /dev/null
+++ b/libs/utils/src/types/index.ts
@@ -0,0 +1,2 @@
+export * from './user-workspace';
+export * from './tools';
diff --git a/libs/utils/src/types/tools.ts b/libs/utils/src/types/tools.ts
new file mode 100644
index 000000000..1f2fe0528
--- /dev/null
+++ b/libs/utils/src/types/tools.ts
@@ -0,0 +1,32 @@
+/**
+ * get all value`s type of a object
+ *
+ * @example
+ * ```ts
+ * // except: type Values = 1 | '2'
+ * type Values = ValueOf<{a: 1, b: '2'}>
+ * ```
+ */
+export type ValueOf<X extends Record<string, unknown>> = X[keyof X];
+
+/**
+ * get type of a array by index
+ *
+ * @example
+ * ```ts
+ * // except: type FirstType = string;
+ * type FirstType = First<[string], 0>
+ * ```
+ */
+export type IndexOf<X extends unknown[], I extends number> = X[I];
+
+/**
+ * get first type of a array
+ *
+ * @example
+ * ```ts
+ * // except: type FirstType = string;
+ * type FirstType = First<[string]>
+ * ```
+ */
+export type First<X extends unknown[]> = IndexOf<X, 0>;
diff --git a/libs/utils/src/types/user-workspace.ts b/libs/utils/src/types/user-workspace.ts
new file mode 100644
index 000000000..e6d4fc58c
--- /dev/null
+++ b/libs/utils/src/types/user-workspace.ts
@@ -0,0 +1,8 @@
+/** user model for Affine */
+export type UserInfo = {
+    id: string;
+    nickname: string;
+    username: string;
+    email: string;
+    photo: string;
+};
diff --git a/libs/utils/src/useragent.ts b/libs/utils/src/useragent.ts
new file mode 100644
index 000000000..02e0a2b20
--- /dev/null
+++ b/libs/utils/src/useragent.ts
@@ -0,0 +1,74 @@
+const get_ua = () => {
+    const ua = navigator.userAgent;
+    const uas = ua.toLowerCase();
+    const mobile =
+        /mobile|tablet|ip(ad|hone|od)|android/i.test(ua) ||
+        (uas.indexOf('safari') > -1 &&
+            /Mac OS/i.test(ua) &&
+            /Macintosh/i.test(ua));
+    const android =
+        (mobile &&
+            (uas.indexOf('android') > -1 || uas.indexOf('linux') > -1)) ||
+        uas.indexOf('adr') > -1;
+    const ios = mobile && !android && /Mac OS/i.test(ua);
+    const iphone = ios && uas.indexOf('iphone') > -1;
+    const ipad = ios && !iphone;
+    const wx = /MicroMessenger/i.test(ua);
+    const chrome = /CriOS/i.test(ua) || /Chrome/i.test(ua);
+    const tiktok = mobile && /aweme/i.test(ua);
+    const weibo = mobile && /Weibo/i.test(ua);
+    const safari =
+        ios &&
+        !chrome &&
+        !wx &&
+        !weibo &&
+        !tiktok &&
+        /Safari|Macintosh/i.test(ua);
+    const firefox = /Firefox/.test(ua);
+    const win = /windows|win32|win64|wow32|wow64/.test(uas);
+    const linux = /linux/.test(uas);
+    return {
+        ua,
+        mobile,
+        android,
+        ios,
+        wx,
+        chrome,
+        iphone,
+        ipad,
+        safari,
+        tiktok,
+        weibo,
+        win,
+        linux,
+        firefox,
+    };
+};
+
+class UaHelper {
+    private ua_map;
+    public isLinux = false;
+    public isMacOs = false;
+    public isSafari = false;
+    public isWindows = false;
+    public isFireFox = false;
+
+    constructor() {
+        this.ua_map = get_ua();
+        this.init_ua_flags();
+    }
+
+    public checkUseragent(isUseragent: keyof ReturnType<typeof get_ua>) {
+        return Boolean(this.ua_map[isUseragent]);
+    }
+
+    private init_ua_flags() {
+        this.isLinux = this.checkUseragent('linux');
+        this.isMacOs = this.checkUseragent('ios');
+        this.isSafari = this.checkUseragent('safari');
+        this.isWindows = this.checkUseragent('win');
+        this.isFireFox = this.checkUseragent('firefox');
+    }
+}
+
+export const uaHelper = new UaHelper();
diff --git a/libs/utils/src/utils.ts b/libs/utils/src/utils.ts
new file mode 100644
index 000000000..96235fece
--- /dev/null
+++ b/libs/utils/src/utils.ts
@@ -0,0 +1,78 @@
+import type { UserInfo } from './types';
+
+export function getUserDisplayName(user?: UserInfo) {
+    const { nickname, username, email } = user || {};
+    return nickname || username || email || 'Unknown User';
+}
+
+/**
+ * Get workspace_id from URL
+ * @returns workspace_id
+ */
+export function getWorkspaceId() {
+    const path = window.location.pathname.match(/\/(\w+)\//);
+    return path ? path[1] : undefined;
+}
+
+/**
+ * Get page_id from URL
+ * @returns page_id
+ */
+export function getPageId() {
+    const path = window.location.pathname.match(/\/(\w+)\/(\w+)/);
+    return path ? path[2] : undefined;
+}
+
+export async function sleep(delay?: number) {
+    return new Promise(res => {
+        window.setTimeout(() => {
+            res(true);
+        }, delay);
+    });
+}
+
+export function isInternalPageUrl(url: string) {
+    if (!url) return false;
+    return (
+        url.startsWith(window.location.origin) &&
+        /^https?:\/\/(localhost:4200|(nightly|app)\.affine\.pro|.*?\.ligo-virgo\.pages\.dev)/.test(
+            url
+        )
+    );
+}
+
+export function getRelativeUrlForInternalPageUrl(url: string) {
+    if (url?.startsWith(window.location.origin)) {
+        return url.slice(window.location.origin.length);
+    }
+
+    return url;
+}
+
+/**
+ * Generate a fragile object that will throw error at any operation.
+ */
+export const genErrorObj = (
+    ...args: ConstructorParameters<ErrorConstructor>
+): unknown =>
+    new Proxy(
+        {},
+        {
+            get(target, prop, receiver) {
+                console.error('You are trying to access a property', prop);
+                throw new Error(...args);
+            },
+            set(target, prop, val, receiver) {
+                console.error('You are trying to set a property', prop, val);
+                throw new Error(...args);
+            },
+            apply(target, thisArg, argumentsList) {
+                console.error(
+                    'You are trying to call a function',
+                    thisArg,
+                    argumentsList
+                );
+                throw new Error(...args);
+            },
+        }
+    );
diff --git a/libs/utils/tsconfig.json b/libs/utils/tsconfig.json
new file mode 100644
index 000000000..9ce9d2c70
--- /dev/null
+++ b/libs/utils/tsconfig.json
@@ -0,0 +1,24 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "strictNullChecks": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/utils/tsconfig.lib.json b/libs/utils/tsconfig.lib.json
new file mode 100644
index 000000000..6d3f1cc6f
--- /dev/null
+++ b/libs/utils/tsconfig.lib.json
@@ -0,0 +1,22 @@
+{
+    "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": [
+        "**/*.spec.ts",
+        "**/*.test.ts",
+        "**/*.spec.tsx",
+        "**/*.test.tsx",
+        "**/*.spec.js",
+        "**/*.test.js",
+        "**/*.spec.jsx",
+        "**/*.test.jsx"
+    ],
+    "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/libs/utils/tsconfig.spec.json b/libs/utils/tsconfig.spec.json
new file mode 100644
index 000000000..2c1fb69d9
--- /dev/null
+++ b/libs/utils/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../dist/out-tsc",
+        "module": "commonjs",
+        "types": ["jest", "node"]
+    },
+    "include": [
+        "**/*.test.ts",
+        "**/*.spec.ts",
+        "**/*.test.tsx",
+        "**/*.spec.tsx",
+        "**/*.test.js",
+        "**/*.spec.js",
+        "**/*.test.jsx",
+        "**/*.spec.jsx",
+        "**/*.d.ts"
+    ]
+}
diff --git a/nx.json b/nx.json
new file mode 100644
index 000000000..7c46b2142
--- /dev/null
+++ b/nx.json
@@ -0,0 +1,56 @@
+{
+    "npmScope": "toeverything",
+    "affected": {
+        "defaultBase": "master"
+    },
+    "cli": {
+        "defaultCollection": "@nrwl/react"
+    },
+    "implicitDependencies": {
+        "package.json": {
+            "dependencies": "*",
+            "devDependencies": "*"
+        },
+        ".eslintrc.json": "*"
+    },
+    "tasksRunnerOptions": {
+        "default": {
+            "runner": "@nrwl/nx-cloud",
+            "options": {
+                "cacheableOperations": ["build", "lint", "test", "e2e"],
+                "accessToken": "NjllM2VkOGItNjJhOS00M2RhLWJjMGYtNzAyNGI3MjFmZWI2fHJlYWQ="
+            }
+        }
+    },
+    "targetDependencies": {
+        "build": [
+            {
+                "target": "build",
+                "projects": "dependencies"
+            }
+        ]
+    },
+    "generators": {
+        "@nrwl/react": {
+            "application": {
+                "style": "css",
+                "linter": "eslint",
+                "babel": true
+            },
+            "component": {
+                "style": "css"
+            },
+            "library": {
+                "style": "css",
+                "linter": "eslint"
+            }
+        },
+        "@nrwl/next": {
+            "application": {
+                "style": "styled-jsx",
+                "linter": "eslint"
+            }
+        }
+    },
+    "defaultProject": "ligo-virgo"
+}
diff --git a/package.json b/package.json
new file mode 100644
index 000000000..c28a290af
--- /dev/null
+++ b/package.json
@@ -0,0 +1,153 @@
+{
+    "name": "toeverything",
+    "version": "0.0.0",
+    "license": "MIT",
+    "author": "AFFiNE <developer@affine.pro>",
+    "scripts": {
+        "start": "nx serve ligo-virgo",
+        "start:free": "env-cmd -f .free.env nx serve ligo-virgo",
+        "build": "nx build ligo-virgo",
+        "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",
+        "add:components": "nx generate @nrwl/react:library --directory=components --buildable --no-component --no-routing --tags=components",
+        "add:datasource": "nx generate @nrwl/react:library --style=none --directory=datasource --buildable --no-component --no-routing --tags=datasource",
+        "add:framework": "nx generate @nrwl/react:library --style=none --directory=framework --buildable --no-component --no-routing --tags=framework",
+        "add:library": "nx generate @nrwl/react:library --style=none --buildable --no-component --no-routing --tags=library",
+        "notify": "node --experimental-modules tools/notify.mjs",
+        "lint": "nx run-many --target=lint --all --fix --skip-nx-cache --exclude=components-common,theme",
+        "lint:with-cache": "nx run-many --target=lint --all --exclude=components-common,theme",
+        "format": "nx format",
+        "format:ci": "nx format:check",
+        "type:check": "nx build ligo-virgo",
+        "prepare": "husky install"
+    },
+    "private": true,
+    "engines": {
+        "node": ">=16",
+        "npm": "please-use-pnpm",
+        "yarn": "please-use-pnpm",
+        "pnpm": ">=7"
+    },
+    "husky": {
+        "hooks": {
+            "prepare-commit-msg": "exec < /dev/tty && git-cz || true"
+        }
+    },
+    "engineStrict": true,
+    "pnpm": {
+        "peerDependencyRules": {
+            "ignoreMissing": [
+                "@babel/core",
+                "@babel/preset-env",
+                "@emotion/react",
+                "@mui/material",
+                "babel-loader",
+                "jest-environment-node",
+                "rollup",
+                "webpack",
+                "react",
+                "react-dom",
+                "reflect-metadata",
+                "rxjs"
+            ]
+        }
+    },
+    "dependencies": {
+        "@emotion/react": "^11.9.3",
+        "@emotion/styled": "^11.9.3",
+        "@mui/icons-material": "^5.8.4",
+        "@mui/material": "^5.8.6",
+        "assert": "^2.0.0",
+        "clsx": "^1.2.0",
+        "core-js": "^3.23.3",
+        "got": "^12.1.0",
+        "level": "^8.0.0",
+        "level-read-stream": "1.1.0",
+        "next": "12.2.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-router": "^6.3.0",
+        "react-router-dom": "^6.3.0",
+        "regenerator-runtime": "^0.13.9",
+        "rxjs": "^7.5.5",
+        "style9": "^0.13.3",
+        "tslib": "^2.4.0"
+    },
+    "devDependencies": {
+        "@firebase/auth": "^0.20.4",
+        "@headlessui/react": "^1.6.5",
+        "@heroicons/react": "^1.0.6",
+        "@nrwl/cli": "^14.4.0",
+        "@nrwl/eslint-plugin-nx": "^14.4.0",
+        "@nrwl/jest": "^14.4.0",
+        "@nrwl/js": "^14.4.0",
+        "@nrwl/linter": "^14.4.0",
+        "@nrwl/nest": "^14.4.0",
+        "@nrwl/next": "^14.4.0",
+        "@nrwl/node": "^14.4.0",
+        "@nrwl/nx-cloud": "^14.2.0",
+        "@nrwl/react": "^14.4.0",
+        "@nrwl/tao": "^14.4.0",
+        "@nrwl/web": "^14.4.0",
+        "@nrwl/workspace": "^14.4.0",
+        "@portabletext/react": "^1.0.6",
+        "@svgr/core": "^6.2.1",
+        "@swc/cli": "^0.1.57",
+        "@swc/core": "^1.2.208",
+        "@swc/helpers": "^0.4.3",
+        "@swc/jest": "^0.2.21",
+        "@testing-library/react": "^13.3.0",
+        "@testing-library/react-hooks": "^8.0.1",
+        "@types/jest": "^28.1.4",
+        "@types/node": "^18.0.1",
+        "@types/react": "^18.0.14",
+        "@types/react-dom": "^18.0.5",
+        "@types/react-router-dom": "^5.3.3",
+        "@typescript-eslint/eslint-plugin": "^5.30.4",
+        "@typescript-eslint/parser": "^5.30.4",
+        "babel-jest": "^28.1.2",
+        "babel-plugin-open-source": "^1.3.4",
+        "change-case": "^4.1.2",
+        "compression-webpack-plugin": "^10.0.0",
+        "cross-env": "^7.0.3",
+        "css-minimizer-webpack-plugin": "^4.0.0",
+        "cz-customizable": "^5.3.0",
+        "env-cmd": "^10.1.0",
+        "eslint": "^8.19.0",
+        "eslint-config-next": "12.2.0",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-filename-rules": "^1.2.0",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-jsx-a11y": "^6.6.0",
+        "eslint-plugin-prettier": "^4.2.1",
+        "eslint-plugin-react": "^7.30.1",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "firebase": "^9.8.4",
+        "fs-extra": "^10.1.0",
+        "html-webpack-plugin": "^5.5.0",
+        "husky": "^8.0.1",
+        "jest": "^28.1.2",
+        "lint-staged": "^13.0.3",
+        "nx": "^14.4.0",
+        "prettier": "^2.7.1",
+        "react-test-renderer": "^18.2.0",
+        "svgo": "^2.8.0",
+        "terser-webpack-plugin": "^5.3.3",
+        "ts-jest": "^28.0.5",
+        "ts-node": "^10.8.2",
+        "typescript": "^4.7.4",
+        "webpack": "^5.73.0",
+        "webpack-bundle-analyzer": "^4.5.0"
+    },
+    "lint-staged": {
+        "**/*.{ts,tsx}": [
+            "eslint --fix"
+        ]
+    },
+    "config": {
+        "commitizen": {
+            "path": "node_modules/cz-customizable"
+        }
+    }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 000000000..b905d9464
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,17261 @@
+lockfileVersion: 5.4
+
+importers:
+
+  .:
+    specifiers:
+      '@emotion/react': ^11.9.3
+      '@emotion/styled': ^11.9.3
+      '@firebase/auth': ^0.20.4
+      '@headlessui/react': ^1.6.5
+      '@heroicons/react': ^1.0.6
+      '@mui/icons-material': ^5.8.4
+      '@mui/material': ^5.8.6
+      '@nrwl/cli': ^14.4.0
+      '@nrwl/eslint-plugin-nx': ^14.4.0
+      '@nrwl/jest': ^14.4.0
+      '@nrwl/js': ^14.4.0
+      '@nrwl/linter': ^14.4.0
+      '@nrwl/nest': ^14.4.0
+      '@nrwl/next': ^14.4.0
+      '@nrwl/node': ^14.4.0
+      '@nrwl/nx-cloud': ^14.2.0
+      '@nrwl/react': ^14.4.0
+      '@nrwl/tao': ^14.4.0
+      '@nrwl/web': ^14.4.0
+      '@nrwl/workspace': ^14.4.0
+      '@portabletext/react': ^1.0.6
+      '@svgr/core': ^6.2.1
+      '@swc/cli': ^0.1.57
+      '@swc/core': ^1.2.208
+      '@swc/helpers': ^0.4.3
+      '@swc/jest': ^0.2.21
+      '@testing-library/react': ^13.3.0
+      '@testing-library/react-hooks': ^8.0.1
+      '@types/jest': ^28.1.4
+      '@types/node': ^18.0.1
+      '@types/react': ^18.0.14
+      '@types/react-dom': ^18.0.5
+      '@types/react-router-dom': ^5.3.3
+      '@typescript-eslint/eslint-plugin': ^5.30.4
+      '@typescript-eslint/parser': ^5.30.4
+      assert: ^2.0.0
+      babel-jest: ^28.1.2
+      babel-plugin-open-source: ^1.3.4
+      change-case: ^4.1.2
+      clsx: ^1.2.0
+      compression-webpack-plugin: ^10.0.0
+      core-js: ^3.23.3
+      cross-env: ^7.0.3
+      css-minimizer-webpack-plugin: ^4.0.0
+      cz-customizable: ^5.3.0
+      env-cmd: ^10.1.0
+      eslint: ^8.19.0
+      eslint-config-next: 12.2.0
+      eslint-config-prettier: ^8.5.0
+      eslint-plugin-filename-rules: ^1.2.0
+      eslint-plugin-import: ^2.26.0
+      eslint-plugin-jsx-a11y: ^6.6.0
+      eslint-plugin-prettier: ^4.2.1
+      eslint-plugin-react: ^7.30.1
+      eslint-plugin-react-hooks: ^4.6.0
+      firebase: ^9.8.4
+      fs-extra: ^10.1.0
+      got: ^12.1.0
+      html-webpack-plugin: ^5.5.0
+      husky: ^8.0.1
+      jest: ^28.1.2
+      level: ^8.0.0
+      level-read-stream: 1.1.0
+      lint-staged: ^13.0.3
+      next: 12.2.0
+      nx: ^14.4.0
+      prettier: ^2.7.1
+      react: ^18.2.0
+      react-dom: ^18.2.0
+      react-router: ^6.3.0
+      react-router-dom: ^6.3.0
+      react-test-renderer: ^18.2.0
+      regenerator-runtime: ^0.13.9
+      rxjs: ^7.5.5
+      style9: ^0.13.3
+      svgo: ^2.8.0
+      terser-webpack-plugin: ^5.3.3
+      ts-jest: ^28.0.5
+      ts-node: ^10.8.2
+      tslib: ^2.4.0
+      typescript: ^4.7.4
+      webpack: ^5.73.0
+      webpack-bundle-analyzer: ^4.5.0
+    dependencies:
+      '@emotion/react': 11.9.3_4jaruczdv2uxjj3lb2xbkiuci4
+      '@emotion/styled': 11.9.3_toiz7tndcw4z2b7gxmmeo5fkcu
+      '@mui/icons-material': 5.8.4_vdnh4jyrnjwcar5vg6k35n5t6e
+      '@mui/material': 5.8.7_h2u6a3oivtyocvjxeke7xcvlfa
+      assert: 2.0.0
+      clsx: 1.2.0
+      core-js: 3.23.3
+      got: 12.1.0
+      level: 8.0.0
+      level-read-stream: 1.1.0
+      next: 12.2.0_beenoklgwfttvph5dgxj7na7aq
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-router: 6.3.0_react@18.2.0
+      react-router-dom: 6.3.0_biqbaboplfbrettd7655fr4n2y
+      regenerator-runtime: 0.13.9
+      rxjs: 7.5.5
+      style9: 0.13.3_ihjcsad5a6ctfdqu3bmghkncdi
+      tslib: 2.4.0
+    devDependencies:
+      '@firebase/auth': 0.20.4_@firebase+app@0.7.27
+      '@headlessui/react': 1.6.5_biqbaboplfbrettd7655fr4n2y
+      '@heroicons/react': 1.0.6_react@18.2.0
+      '@nrwl/cli': 14.4.2_@swc+core@1.2.210
+      '@nrwl/eslint-plugin-nx': 14.4.2_afsbewstkdex5d4fc6xnpjlnau
+      '@nrwl/jest': 14.4.2_dltevkctzdxkrvyldbyepwbdle
+      '@nrwl/js': 14.4.2_gtbxvtmh5ipj3piki3xg57n5fe
+      '@nrwl/linter': 14.4.2_jqnzvbaca4rx3byobgjku3onji
+      '@nrwl/nest': 14.4.2_e6qtqvxbhokjbvzxuqyvhc6pli
+      '@nrwl/next': 14.4.2_gys3iieb7yvbrdlbm6wxfyhrsy
+      '@nrwl/node': 14.4.2_ehspof47b5bphcyk4536mwaw4u
+      '@nrwl/nx-cloud': 14.2.0
+      '@nrwl/react': 14.4.2_46t6z7wulh2zjyi5wmxujdm57y
+      '@nrwl/tao': 14.4.2_@swc+core@1.2.210
+      '@nrwl/web': 14.4.2_7ggz7ibmlwrqtwusxeq53zzcym
+      '@nrwl/workspace': 14.4.2_a22ftc74wzukohhtmp6cnnvzoq
+      '@portabletext/react': 1.0.6_react@18.2.0
+      '@svgr/core': 6.2.1
+      '@swc/cli': 0.1.57_@swc+core@1.2.210
+      '@swc/core': 1.2.210
+      '@swc/helpers': 0.4.3
+      '@swc/jest': 0.2.21_@swc+core@1.2.210
+      '@testing-library/react': 13.3.0_biqbaboplfbrettd7655fr4n2y
+      '@testing-library/react-hooks': 8.0.1_5qggqhesezyescxqnsg4rpj6qa
+      '@types/jest': 28.1.4
+      '@types/node': 18.0.1
+      '@types/react': 18.0.14
+      '@types/react-dom': 18.0.6
+      '@types/react-router-dom': 5.3.3
+      '@typescript-eslint/eslint-plugin': 5.30.5_6zdoc3rn4mpiddqwhppni2mnnm
+      '@typescript-eslint/parser': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
+      babel-jest: 28.1.2_@babel+core@7.18.6
+      babel-plugin-open-source: 1.3.4
+      change-case: 4.1.2
+      compression-webpack-plugin: 10.0.0_webpack@5.73.0
+      cross-env: 7.0.3
+      css-minimizer-webpack-plugin: 4.0.0_webpack@5.73.0
+      cz-customizable: 5.10.0
+      env-cmd: 10.1.0
+      eslint: 8.19.0
+      eslint-config-next: 12.2.0_4x5o4skxv6sl53vpwefgt23khm
+      eslint-config-prettier: 8.5.0_eslint@8.19.0
+      eslint-plugin-filename-rules: 1.2.0
+      eslint-plugin-import: 2.26.0_iom7pm3yknyiblqpw2vvqvxs5i
+      eslint-plugin-jsx-a11y: 6.6.0_eslint@8.19.0
+      eslint-plugin-prettier: 4.2.1_7uxdfn2xinezdgvmbammh6ev5i
+      eslint-plugin-react: 7.30.1_eslint@8.19.0
+      eslint-plugin-react-hooks: 4.6.0_eslint@8.19.0
+      firebase: 9.8.4
+      fs-extra: 10.1.0
+      html-webpack-plugin: 5.5.0_webpack@5.73.0
+      husky: 8.0.1
+      jest: 28.1.2_hxaxlvfys2pc3hefxwkmyo5cpq
+      lint-staged: 13.0.3
+      nx: 14.4.2_@swc+core@1.2.210
+      prettier: 2.7.1
+      react-test-renderer: 18.2.0_react@18.2.0
+      svgo: 2.8.0
+      terser-webpack-plugin: 5.3.3_cr5ideiic2hpdwwauzasyctjxa
+      ts-jest: 28.0.5_dvf3gqad2lwurck7yyca7j3d3i
+      ts-node: 10.8.2_y42jqzo3jkzuv3kp7opavo2xbi
+      typescript: 4.7.4
+      webpack: 5.73.0_@swc+core@1.2.210
+      webpack-bundle-analyzer: 4.5.0
+
+  apps/ligo-virgo:
+    specifiers:
+      '@mui/icons-material': ^5.8.4
+      firebase: ^9.8.4
+      mini-css-extract-plugin: ^2.6.1
+      webpack: ^5.73.0
+    dependencies:
+      '@mui/icons-material': 5.8.4
+    devDependencies:
+      firebase: 9.8.4
+      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
+      '@emotion/styled': ^11.9.3
+      authing-js-sdk: ^4.23.33
+    dependencies:
+      '@authing/react-ui-components': 3.1.25
+      '@emotion/styled': 11.9.3
+    devDependencies:
+      authing-js-sdk: 4.23.33
+
+  libs/components/affine-board:
+    specifiers: {}
+
+  libs/components/affine-editor:
+    specifiers: {}
+
+  libs/components/board-commands:
+    specifiers:
+      '@tldraw/core': ^1.12.0
+      '@tldraw/intersect': ^1.7.1
+      '@tldraw/vec': ^1.7.0
+    dependencies:
+      '@tldraw/core': 1.14.1_mobx@6.6.1
+      '@tldraw/intersect': 1.7.1
+      '@tldraw/vec': 1.7.1
+
+  libs/components/board-draw:
+    specifiers:
+      '@mui/icons-material': ^5.8.0
+      '@tldraw/core': ^1.12.0
+      '@tldraw/intersect': ^1.7.1
+      '@tldraw/vec': ^1.7.0
+      mobx: ^6.6.0
+      react-error-boundary: ^3.1.4
+      react-hotkeys-hook: ^3.4.6
+    dependencies:
+      '@mui/icons-material': 5.8.4
+      '@tldraw/core': 1.14.1_mobx@6.6.1
+      '@tldraw/intersect': 1.7.1
+      '@tldraw/vec': 1.7.1
+      mobx: 6.6.1
+      react-error-boundary: 3.1.4
+      react-hotkeys-hook: 3.4.6
+
+  libs/components/board-sessions:
+    specifiers:
+      '@tldraw/core': ^1.12.0
+      '@tldraw/intersect': ^1.7.1
+      '@tldraw/vec': ^1.7.0
+    dependencies:
+      '@tldraw/core': 1.14.1_mobx@6.6.1
+      '@tldraw/intersect': 1.7.1
+      '@tldraw/vec': 1.7.1
+
+  libs/components/board-shapes:
+    specifiers:
+      '@tldraw/core': ^1.12.0
+      '@tldraw/intersect': ^1.7.1
+      '@tldraw/vec': ^1.7.0
+      perfect-freehand: ^1.0.16
+    dependencies:
+      '@tldraw/core': 1.14.1_mobx@6.6.1
+      '@tldraw/intersect': 1.7.1
+      '@tldraw/vec': 1.7.1
+      perfect-freehand: 1.1.0
+
+  libs/components/board-state:
+    specifiers:
+      '@tldraw/core': ^1.12.0
+      '@tldraw/intersect': ^1.7.1
+      '@tldraw/vec': ^1.7.0
+      idb-keyval: ^6.2.0
+      zustand: ^3.7.2
+    dependencies:
+      '@tldraw/core': 1.14.1_mobx@6.6.1
+      '@tldraw/intersect': 1.7.1
+      '@tldraw/vec': 1.7.1
+      idb-keyval: 6.2.0
+      zustand: 3.7.2
+
+  libs/components/board-tools:
+    specifiers:
+      '@tldraw/core': ^1.12.0
+      '@tldraw/intersect': ^1.7.1
+      '@tldraw/vec': ^1.7.0
+    dependencies:
+      '@tldraw/core': 1.14.1_mobx@6.6.1
+      '@tldraw/intersect': 1.7.1
+      '@tldraw/vec': 1.7.1
+
+  libs/components/board-types:
+    specifiers:
+      '@tldraw/core': ^1.12.0
+      '@tldraw/intersect': ^1.7.1
+      '@tldraw/vec': ^1.7.0
+    dependencies:
+      '@tldraw/core': 1.14.1_mobx@6.6.1
+      '@tldraw/intersect': 1.7.1
+      '@tldraw/vec': 1.7.1
+
+  libs/components/common:
+    specifiers:
+      '@emotion/react': ^11.9.3
+      '@emotion/styled': ^11.9.3
+      '@mui/icons-material': ^5.8.4
+      '@mui/material': ^5.8.6
+      '@mui/x-data-grid': ^5.12.3
+      '@types/is-hotkey': ^0.1.7
+      '@types/is-url': ^1.2.30
+      '@types/tinycolor2': ^1.4.3
+      is-hotkey: ^0.2.0
+      is-url: ^1.2.4
+      slate: ^0.81.1
+      slate-react: ^0.81.0
+      tinycolor2: ^1.4.2
+    dependencies:
+      '@emotion/react': 11.9.3
+      '@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
+      is-hotkey: 0.2.0
+      is-url: 1.2.4
+      slate: 0.81.1
+      slate-react: 0.81.0_slate@0.81.1
+      tinycolor2: 1.4.2
+    devDependencies:
+      '@types/is-hotkey': 0.1.7
+      '@types/is-url': 1.2.30
+      '@types/tinycolor2': 1.4.3
+
+  libs/components/editor-blocks:
+    specifiers:
+      '@codemirror/commands': ^6.0.1
+      '@codemirror/lang-cpp': ~6.0.1
+      '@codemirror/lang-css': ^6.0.0
+      '@codemirror/lang-html': ~6.1.0
+      '@codemirror/lang-java': ~6.0.0
+      '@codemirror/lang-javascript': ~6.0.1
+      '@codemirror/lang-json': ~6.0.0
+      '@codemirror/lang-lezer': ~6.0.0
+      '@codemirror/lang-markdown': ~6.0.0
+      '@codemirror/lang-php': ~6.0.0
+      '@codemirror/lang-python': ~6.0.0
+      '@codemirror/lang-rust': ~6.0.0
+      '@codemirror/lang-sql': ~6.0.0
+      '@codemirror/lang-xml': ~6.0.0
+      '@codemirror/language': ^6.2.0
+      '@codemirror/legacy-modes': ~6.1.0
+      '@codemirror/next': ^0.16.0
+      '@codemirror/state': ^6.1.0
+      '@codemirror/theme-one-dark': ^6.0.0
+      '@codemirror/view': ^6.0.2
+      '@dnd-kit/core': ^6.0.5
+      '@dnd-kit/sortable': ^7.0.1
+      '@dnd-kit/utilities': ^3.2.0
+      '@emotion/react': ^11.9.3
+      '@emotion/styled': ^11.9.3
+      '@mui/system': ^5.8.6
+      '@types/codemirror': ^5.60.5
+      '@types/react-resizable': ^3.0.1
+      '@types/react-window': ^1.8.5
+      code-example: ^3.3.6
+      codemirror: 6.0.1
+      keymap: link:@codemirror/next/keymap
+      react-resizable: ^3.0.4
+      react-window: ^1.8.7
+      slate: ^0.81.1
+      slate-react: ^0.81.0
+      style9: ^0.13.3
+    dependencies:
+      '@codemirror/commands': 6.0.1
+      '@codemirror/lang-cpp': 6.0.1
+      '@codemirror/lang-css': 6.0.0
+      '@codemirror/lang-html': 6.1.0
+      '@codemirror/lang-java': 6.0.0
+      '@codemirror/lang-javascript': 6.0.1
+      '@codemirror/lang-json': 6.0.0
+      '@codemirror/lang-lezer': 6.0.0
+      '@codemirror/lang-markdown': 6.0.0
+      '@codemirror/lang-php': 6.0.0
+      '@codemirror/lang-python': 6.0.0
+      '@codemirror/lang-rust': 6.0.0
+      '@codemirror/lang-sql': 6.0.0
+      '@codemirror/lang-xml': 6.0.0
+      '@codemirror/language': 6.2.0
+      '@codemirror/legacy-modes': 6.1.0
+      '@codemirror/next': 0.16.0
+      '@codemirror/state': 6.1.0
+      '@codemirror/theme-one-dark': 6.0.0
+      '@codemirror/view': 6.0.2
+      '@dnd-kit/core': 6.0.5
+      '@dnd-kit/sortable': 7.0.1_@dnd-kit+core@6.0.5
+      '@dnd-kit/utilities': 3.2.0
+      '@emotion/react': 11.9.3_@babel+core@7.18.6
+      '@emotion/styled': 11.9.3_dc5dh2wp562rsjxvguwi2i3yzq
+      '@mui/system': 5.8.7_d6menda4vqwq6peqnkbe7mkj4i
+      code-example: 3.3.6
+      codemirror: 6.0.1
+      keymap: link:@codemirror/next/keymap
+      react-resizable: 3.0.4
+      react-window: 1.8.7
+      slate: 0.81.1
+      slate-react: 0.81.0_slate@0.81.1
+      style9: 0.13.3
+    devDependencies:
+      '@types/codemirror': 5.60.5
+      '@types/react-resizable': 3.0.1
+      '@types/react-window': 1.8.5
+
+  libs/components/editor-core:
+    specifiers:
+      '@mui/icons-material': ^5.8.4
+      date-fns: ^2.28.0
+      eventemitter3: ^4.0.7
+      hotkeys-js: ^3.9.4
+      lru-cache: ^7.10.1
+      nanoid: ^4.0.0
+      slate: ^0.81.0
+      style9: ^0.13.3
+    dependencies:
+      '@mui/icons-material': 5.8.4
+      date-fns: 2.28.0
+      eventemitter3: 4.0.7
+      hotkeys-js: 3.9.4
+      lru-cache: 7.12.0
+      nanoid: 4.0.0
+      slate: 0.81.1
+      style9: 0.13.3
+
+  libs/components/editor-plugins:
+    specifiers:
+      '@mui/icons-material': ^5.8.4
+      date-fns: ^2.28.0
+      style9: ^0.13.3
+    dependencies:
+      '@mui/icons-material': 5.8.4
+      date-fns: 2.28.0
+      style9: 0.13.3
+
+  libs/components/icons:
+    specifiers: {}
+
+  libs/components/layout:
+    specifiers:
+      '@date-io/date-fns': ^2.14.0
+      '@dnd-kit/core': ^6.0.5
+      '@dnd-kit/modifiers': ^6.0.0
+      '@dnd-kit/sortable': ^7.0.1
+      '@dnd-kit/utilities': ^3.2.0
+      '@mui/icons-material': ^5.8.4
+      '@types/tinycolor2': ^1.4.3
+      '@types/turndown': ^5.0.1
+      clsx: ^1.2.1
+      date-fns: ^2.28.0
+      jotai: ^1.7.4
+      tinycolor2: ^1.4.2
+      turndown: 7.1.1
+    dependencies:
+      '@date-io/date-fns': 2.14.0_date-fns@2.28.0
+      '@dnd-kit/core': 6.0.5
+      '@dnd-kit/modifiers': 6.0.0_@dnd-kit+core@6.0.5
+      '@dnd-kit/sortable': 7.0.1_@dnd-kit+core@6.0.5
+      '@dnd-kit/utilities': 3.2.0
+      '@mui/icons-material': 5.8.4
+      clsx: 1.2.1
+      date-fns: 2.28.0
+      jotai: 1.7.4
+      tinycolor2: 1.4.2
+      turndown: 7.1.1
+    devDependencies:
+      '@types/tinycolor2': 1.4.3
+      '@types/turndown': 5.0.1
+
+  libs/components/ui:
+    specifiers:
+      '@emotion/is-prop-valid': ^1.1.3
+      '@emotion/react': ^11.9.3
+      '@emotion/styled': ^11.9.3
+      '@floating-ui/dom': ^0.5.4
+      '@mui/base': ^5.0.0-alpha.87
+      '@mui/material': ^5.8.6
+      '@mui/system': ^5.8.6
+      '@mui/x-date-pickers': ^5.0.0-alpha.7
+      '@mui/x-date-pickers-pro': ^5.0.0-alpha.7
+      '@types/react-date-range': ^1.4.4
+      clsx: ^1.2.0
+      react-date-range: ^1.4.0
+    dependencies:
+      '@emotion/is-prop-valid': 1.1.3
+      '@emotion/react': 11.9.3
+      '@emotion/styled': 11.9.3_@emotion+react@11.9.3
+      '@floating-ui/dom': 0.5.4
+      '@mui/base': 5.0.0-alpha.88
+      '@mui/material': 5.8.7_d6menda4vqwq6peqnkbe7mkj4i
+      '@mui/system': 5.8.7_d6menda4vqwq6peqnkbe7mkj4i
+      '@mui/x-date-pickers': 5.0.0-alpha.7_3ze6eywwrphmf4xmeajh7ll6xm
+      '@mui/x-date-pickers-pro': 5.0.0-alpha.7_3ze6eywwrphmf4xmeajh7ll6xm
+      '@types/react-date-range': 1.4.4
+      clsx: 1.2.0
+      react-date-range: 1.4.0_date-fns@2.28.0
+
+  libs/datasource/commands:
+    specifiers: {}
+
+  libs/datasource/db-service:
+    specifiers:
+      '@types/diff': ^5.0.2
+      diff: ^5.1.0
+      nanoid: ^4.0.0
+    dependencies:
+      diff: 5.1.0
+      nanoid: 4.0.0
+    devDependencies:
+      '@types/diff': 5.0.2
+
+  libs/datasource/feature-flags:
+    specifiers:
+      ffc-js-client-side-sdk: ^1.1.4
+    dependencies:
+      ffc-js-client-side-sdk: 1.1.5
+
+  libs/datasource/jwt:
+    specifiers:
+      '@types/debug': ^4.1.7
+      '@types/file-saver': ^2.0.5
+      '@types/flexsearch': ^0.7.3
+      '@types/uuid': ^8.3.4
+      '@types/wicg-file-system-access': ^2020.9.5
+      buffer: ^6.0.3
+      debug: ^4.3.4
+      fflate: ^0.7.3
+      file-saver: ^2.0.5
+      file-selector: ^0.6.0
+      flexsearch: ^0.7.21
+      idb-keyval: ^6.2.0
+      immer: ^9.0.15
+      lib0: ^0.2.51
+      lru-cache: ^7.12.0
+      nanoid: ^4.0.0
+      sha3: ^2.1.4
+      sift: ^16.0.0
+      ts-debounce: ^4.0.0
+      uuid: ^8.3.2
+      y-indexeddb: ^9.0.8
+      y-protocols: ^1.0.5
+      yjs: ^13.5.39
+    dependencies:
+      '@types/flexsearch': 0.7.3
+      buffer: 6.0.3
+      debug: 4.3.4
+      fflate: 0.7.3
+      idb-keyval: 6.2.0
+      immer: 9.0.15
+      nanoid: 4.0.0
+      sha3: 2.1.4
+      sift: 16.0.0
+      uuid: 8.3.2
+      y-protocols: 1.0.5
+      yjs: 13.5.39
+    devDependencies:
+      '@types/debug': 4.1.7
+      '@types/file-saver': 2.0.5
+      '@types/uuid': 8.3.4
+      '@types/wicg-file-system-access': 2020.9.5
+      file-saver: 2.0.5
+      file-selector: 0.6.0
+      flexsearch: 0.7.21
+      lib0: 0.2.51
+      lru-cache: 7.12.0
+      ts-debounce: 4.0.0
+      y-indexeddb: 9.0.8_yjs@13.5.39
+
+  libs/datasource/jwt-rpc:
+    specifiers:
+      lib0: ^0.2.51
+      y-protocols: ^1.0.5
+      yjs: ^13.5.39
+    dependencies:
+      lib0: 0.2.51
+      y-protocols: 1.0.5
+      yjs: 13.5.39
+
+  libs/datasource/remote-kv:
+    specifiers:
+      '@types/file-saver': ^2.0.5
+      aws-sdk: ^2.1167.0
+      file-saver: ^2.0.5
+      util: ^0.12.4
+    dependencies:
+      aws-sdk: 2.1168.0
+      file-saver: 2.0.5
+      util: 0.12.4
+    devDependencies:
+      '@types/file-saver': 2.0.5
+
+  libs/datasource/state:
+    specifiers:
+      authing-js-sdk: ^4.23.33
+      firebase: ^9.8.4
+      jotai: ^1.7.4
+    dependencies:
+      jotai: 1.7.4
+    devDependencies:
+      authing-js-sdk: 4.23.33
+      firebase: 9.8.4
+
+  libs/framework/virgo:
+    specifiers: {}
+
+  libs/utils:
+    specifiers:
+      '@types/lodash-es': ^4.17.6
+      copy-to-clipboard: ^3.3.1
+      ffc-js-client-side-sdk: ^1.1.4
+      js-logger: ^1.6.1
+      lodash-es: ^4.17.21
+    dependencies:
+      copy-to-clipboard: 3.3.1
+      ffc-js-client-side-sdk: 1.1.5
+      js-logger: 1.6.1
+      lodash-es: 4.17.21
+    devDependencies:
+      '@types/lodash-es': 4.17.6
+
+packages:
+
+  /@ampproject/remapping/2.2.0:
+    resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.1.1
+      '@jridgewell/trace-mapping': 0.3.14
+
+  /@angular-devkit/core/13.3.5:
+    resolution: {integrity: sha512-w7vzK4VoYP9rLgxJ2SwEfrkpKybdD+QgQZlsDBzT0C6Ebp7b4gkNcNVFo8EiZvfDl6Yplw2IAP7g7fs3STn0hQ==}
+    engines: {node: ^12.20.0 || ^14.15.0 || >=16.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
+    peerDependencies:
+      chokidar: ^3.5.2
+    peerDependenciesMeta:
+      chokidar:
+        optional: true
+    dependencies:
+      ajv: 8.9.0
+      ajv-formats: 2.1.1
+      fast-json-stable-stringify: 2.1.0
+      magic-string: 0.25.7
+      rxjs: 6.6.7
+      source-map: 0.7.3
+    dev: true
+
+  /@angular-devkit/schematics/13.3.5:
+    resolution: {integrity: sha512-0N/kL/Vfx0yVAEwa3HYxNx9wYb+G9r1JrLjJQQzDp+z9LtcojNf7j3oey6NXrDUs1WjVZOa/AIdRl3/DuaoG5w==}
+    engines: {node: ^12.20.0 || ^14.15.0 || >=16.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
+    dependencies:
+      '@angular-devkit/core': 13.3.5
+      jsonc-parser: 3.0.0
+      magic-string: 0.25.7
+      ora: 5.4.1
+      rxjs: 6.6.7
+    transitivePeerDependencies:
+      - chokidar
+    dev: true
+
+  /@ant-design/colors/6.0.0:
+    resolution: {integrity: sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==}
+    dependencies:
+      '@ctrl/tinycolor': 3.4.1
+    dev: false
+
+  /@ant-design/icons-svg/4.2.1:
+    resolution: {integrity: sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw==}
+    dev: false
+
+  /@ant-design/icons/4.7.0:
+    resolution: {integrity: sha512-aoB4Z7JA431rt6d4u+8xcNPPCrdufSRMUOpxa1ab6mz1JCQZOEVolj2WVs/tDFmN62zzK30mNelEsprLYsSF3g==}
+    engines: {node: '>=8'}
+    peerDependencies:
+      react: '>=16.0.0'
+      react-dom: '>=16.0.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@ant-design/colors': 6.0.0
+      '@ant-design/icons-svg': 4.2.1
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-util: 5.22.5
+    dev: false
+
+  /@ant-design/react-slick/0.29.2:
+    resolution: {integrity: sha512-kgjtKmkGHa19FW21lHnAfyyH9AAoh35pBdcJ53rHmQ3O+cfFHGHnUbj/HFrRNJ5vIts09FKJVAD8RpaC+RaWfA==}
+    peerDependencies:
+      react: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      json2mq: 0.2.0
+      lodash: 4.17.21
+      resize-observer-polyfill: 1.5.1
+    dev: false
+
+  /@authing/react-ui-components/3.1.25:
+    resolution: {integrity: sha512-t9CbZmegnoLQAy1RZjNbrvDZZo7q0/8MLE3XIO64t9UqRw+IHWFOjIIDpdbFAOg2gREB1/aRFMU6xNrMakZoDQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      antd: 4.21.5
+      authing-js-sdk: 4.23.32
+      fastclick: 1.0.6
+      global: 4.4.0
+      phone: 3.1.22
+      qs: 6.11.0
+      react-responsive: 9.0.0-beta.10
+      react-use: 17.4.0
+      ua-parser-js: 1.0.2
+      wildcard: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@babel/code-frame/7.18.6:
+    resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/highlight': 7.18.6
+
+  /@babel/compat-data/7.18.6:
+    resolution: {integrity: sha512-tzulrgDT0QD6U7BJ4TKVk2SDDg7wlP39P9yAx1RfLy7vP/7rsDRlWVfbWxElslu56+r7QOhB2NSDsabYYruoZQ==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/core/7.18.6:
+    resolution: {integrity: sha512-cQbWBpxcbbs/IUredIPkHiAGULLV8iwgNRMFzvbhEXISp4f3rUUXE5+TIw6KwUWUR3DwyI6gmBRnmAtYaWehwQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@ampproject/remapping': 2.2.0
+      '@babel/code-frame': 7.18.6
+      '@babel/generator': 7.18.7
+      '@babel/helper-compilation-targets': 7.18.6_@babel+core@7.18.6
+      '@babel/helper-module-transforms': 7.18.6
+      '@babel/helpers': 7.18.6
+      '@babel/parser': 7.18.6
+      '@babel/template': 7.18.6
+      '@babel/traverse': 7.18.6
+      '@babel/types': 7.18.7
+      convert-source-map: 1.8.0
+      debug: 4.3.4
+      gensync: 1.0.0-beta.2
+      json5: 2.2.1
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+
+  /@babel/generator/7.18.7:
+    resolution: {integrity: sha512-shck+7VLlY72a2w9c3zYWuE1pwOKEiQHV7GTUbSnhyl5eu3i04t30tBY82ZRWrDfo3gkakCFtevExnxbkf2a3A==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.18.7
+      '@jridgewell/gen-mapping': 0.3.2
+      jsesc: 2.5.2
+
+  /@babel/helper-annotate-as-pure/7.18.6:
+    resolution: {integrity: sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.18.7
+    dev: true
+
+  /@babel/helper-builder-binary-assignment-operator-visitor/7.18.6:
+    resolution: {integrity: sha512-KT10c1oWEpmrIRYnthbzHgoOf6B+Xd6a5yhdbNtdhtG7aO1or5HViuf1TQR36xY/QprXA5nvxO6nAjhJ4y38jw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-explode-assignable-expression': 7.18.6
+      '@babel/types': 7.18.7
+    dev: true
+
+  /@babel/helper-compilation-targets/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-vFjbfhNCzqdeAtZflUFrG5YIFqGTqsctrtkZ1D/NB0mDW9TwW3GmmUepYY4G9wCET5rY5ugz4OGTcLd614IzQg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/compat-data': 7.18.6
+      '@babel/core': 7.18.6
+      '@babel/helper-validator-option': 7.18.6
+      browserslist: 4.21.1
+      semver: 6.3.0
+
+  /@babel/helper-create-class-features-plugin/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-YfDzdnoxHGV8CzqHGyCbFvXg5QESPFkXlHtvdCkesLjjVMT2Adxe4FGUR5ChIb3DxSaXO12iIOCWoXdsUVwnqw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-environment-visitor': 7.18.6
+      '@babel/helper-function-name': 7.18.6
+      '@babel/helper-member-expression-to-functions': 7.18.6
+      '@babel/helper-optimise-call-expression': 7.18.6
+      '@babel/helper-replace-supers': 7.18.6
+      '@babel/helper-split-export-declaration': 7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-create-regexp-features-plugin/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-7LcpH1wnQLGrI+4v+nPp+zUvIkF9x0ddv1Hkdue10tg3gmRnLy97DXh4STiOf1qeIInyD69Qv5kKSZzKD8B/7A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-annotate-as-pure': 7.18.6
+      regexpu-core: 5.1.0
+    dev: true
+
+  /@babel/helper-define-polyfill-provider/0.3.1_@babel+core@7.18.6:
+    resolution: {integrity: sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==}
+    peerDependencies:
+      '@babel/core': ^7.4.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-compilation-targets': 7.18.6_@babel+core@7.18.6
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/traverse': 7.18.6
+      debug: 4.3.4
+      lodash.debounce: 4.0.8
+      resolve: 1.22.1
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-environment-visitor/7.18.6:
+    resolution: {integrity: sha512-8n6gSfn2baOY+qlp+VSzsosjCVGFqWKmDF0cCWOybh52Dw3SEyoWR1KrhMJASjLwIEkkAufZ0xvr+SxLHSpy2Q==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-explode-assignable-expression/7.18.6:
+    resolution: {integrity: sha512-eyAYAsQmB80jNfg4baAtLeWAQHfHFiR483rzFK+BhETlGZaQC9bsfrugfXDCbRHLQbIA7U5NxhhOxN7p/dWIcg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.18.7
+    dev: true
+
+  /@babel/helper-function-name/7.18.6:
+    resolution: {integrity: sha512-0mWMxV1aC97dhjCah5U5Ua7668r5ZmSC2DLfH2EZnf9c3/dHZKiFa5pRLMH5tjSl471tY6496ZWk/kjNONBxhw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.18.6
+      '@babel/types': 7.18.7
+
+  /@babel/helper-hoist-variables/7.18.6:
+    resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.18.7
+
+  /@babel/helper-member-expression-to-functions/7.18.6:
+    resolution: {integrity: sha512-CeHxqwwipekotzPDUuJOfIMtcIHBuc7WAzLmTYWctVigqS5RktNMQ5bEwQSuGewzYnCtTWa3BARXeiLxDTv+Ng==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.18.7
+    dev: true
+
+  /@babel/helper-module-imports/7.18.6:
+    resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.18.7
+
+  /@babel/helper-module-transforms/7.18.6:
+    resolution: {integrity: sha512-L//phhB4al5uucwzlimruukHB3jRd5JGClwRMD/ROrVjXfLqovYnvQrK/JK36WYyVwGGO7OD3kMyVTjx+WVPhw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-environment-visitor': 7.18.6
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/helper-simple-access': 7.18.6
+      '@babel/helper-split-export-declaration': 7.18.6
+      '@babel/helper-validator-identifier': 7.18.6
+      '@babel/template': 7.18.6
+      '@babel/traverse': 7.18.6
+      '@babel/types': 7.18.7
+    transitivePeerDependencies:
+      - supports-color
+
+  /@babel/helper-optimise-call-expression/7.18.6:
+    resolution: {integrity: sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.18.7
+    dev: true
+
+  /@babel/helper-plugin-utils/7.18.6:
+    resolution: {integrity: sha512-gvZnm1YAAxh13eJdkb9EWHBnF3eAub3XTLCZEehHT2kWxiKVRL64+ae5Y6Ivne0mVHmMYKT+xWgZO+gQhuLUBg==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-remap-async-to-generator/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-z5wbmV55TveUPZlCLZvxWHtrjuJd+8inFhk7DG0WW87/oJuGDcjDiu7HIvGcpf5464L6xKCg3vNkmlVVz9hwyQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-environment-visitor': 7.18.6
+      '@babel/helper-wrap-function': 7.18.6
+      '@babel/types': 7.18.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-replace-supers/7.18.6:
+    resolution: {integrity: sha512-fTf7zoXnUGl9gF25fXCWE26t7Tvtyn6H4hkLSYhATwJvw2uYxd3aoXplMSe0g9XbwK7bmxNes7+FGO0rB/xC0g==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-environment-visitor': 7.18.6
+      '@babel/helper-member-expression-to-functions': 7.18.6
+      '@babel/helper-optimise-call-expression': 7.18.6
+      '@babel/traverse': 7.18.6
+      '@babel/types': 7.18.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-simple-access/7.18.6:
+    resolution: {integrity: sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.18.7
+
+  /@babel/helper-skip-transparent-expression-wrappers/7.18.6:
+    resolution: {integrity: sha512-4KoLhwGS9vGethZpAhYnMejWkX64wsnHPDwvOsKWU6Fg4+AlK2Jz3TyjQLMEPvz+1zemi/WBdkYxCD0bAfIkiw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.18.7
+    dev: true
+
+  /@babel/helper-split-export-declaration/7.18.6:
+    resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.18.7
+
+  /@babel/helper-validator-identifier/7.18.6:
+    resolution: {integrity: sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-validator-option/7.18.6:
+    resolution: {integrity: sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-wrap-function/7.18.6:
+    resolution: {integrity: sha512-I5/LZfozwMNbwr/b1vhhuYD+J/mU+gfGAj5td7l5Rv9WYmH6i3Om69WGKNmlIpsVW/mF6O5bvTKbvDQZVgjqOw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-function-name': 7.18.6
+      '@babel/template': 7.18.6
+      '@babel/traverse': 7.18.6
+      '@babel/types': 7.18.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helpers/7.18.6:
+    resolution: {integrity: sha512-vzSiiqbQOghPngUYt/zWGvK3LAsPhz55vc9XNN0xAl2gV4ieShI2OQli5duxWHD+72PZPTKAcfcZDE1Cwc5zsQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.18.6
+      '@babel/traverse': 7.18.6
+      '@babel/types': 7.18.7
+    transitivePeerDependencies:
+      - supports-color
+
+  /@babel/highlight/7.18.6:
+    resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.18.6
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+
+  /@babel/parser/7.18.6:
+    resolution: {integrity: sha512-uQVSa9jJUe/G/304lXspfWVpKpK4euFLgGiMQFOCpM/bgcAdeoHwi/OQz23O9GK2osz26ZiXRRV9aV+Yl1O8tw==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.18.7
+
+  /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-Udgu8ZRgrBrttVz6A0EVL0SJ1z+RLbIeqsu632SA1hf0awEppD6TvdznoH+orIF8wtFFAV/Enmw9Y+9oV8TQcw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.13.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-skip-transparent-expression-wrappers': 7.18.6
+      '@babel/plugin-proposal-optional-chaining': 7.18.6_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-proposal-async-generator-functions/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-WAz4R9bvozx4qwf74M+sfqPMKfSqwM0phxPTR6iJIi8robgzXwkEgmeJG1gEKhm6sDqT/U9aV3lfcqybIpev8w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-environment-visitor': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-remap-async-to-generator': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-proposal-class-properties/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-create-class-features-plugin': 7.18.6_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-proposal-class-static-block/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-+I3oIiNxrCpup3Gi8n5IGMwj0gOCAjcJUSQEcotNnCCPMEnixawOQ+KeJPlgfjzx+FKQ1QSyZOWe7wmoJp7vhw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.12.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-create-class-features-plugin': 7.18.6_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/plugin-syntax-class-static-block': 7.14.5_@babel+core@7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-proposal-decorators/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-gAdhsjaYmiZVxx5vTMiRfj31nB7LhwBJFMSLzeDxc7X4tKLixup0+k9ughn0RcpBrv9E3PBaXJW7jF5TCihAOg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-create-class-features-plugin': 7.18.6_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-replace-supers': 7.18.6
+      '@babel/helper-split-export-declaration': 7.18.6
+      '@babel/plugin-syntax-decorators': 7.18.6_@babel+core@7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-proposal-dynamic-import/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-proposal-export-namespace-from/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-zr/QcUlUo7GPo6+X1wC98NJADqmy5QTFWWhqeQWiki4XHafJtLl/YMGkmRB2szDD2IYJCCdBTd4ElwhId9T7Xw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/plugin-syntax-export-namespace-from': 7.8.3_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-proposal-json-strings/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/plugin-syntax-json-strings': 7.8.3_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-proposal-logical-assignment-operators/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-zMo66azZth/0tVd7gmkxOkOjs2rpHyhpcFo565PUP37hSp6hSd9uUKIfTDFMz58BwqgQKhJ9YxtM5XddjXVn+Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-proposal-nullish-coalescing-operator/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-proposal-numeric-separator/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/plugin-syntax-numeric-separator': 7.10.4_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-proposal-object-rest-spread/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-9yuM6wr4rIsKa1wlUAbZEazkCrgw2sMPEXCr4Rnwetu7cEW1NydkCWytLuYletbf8vFxdJxFhwEZqMpOx2eZyw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/compat-data': 7.18.6
+      '@babel/core': 7.18.6
+      '@babel/helper-compilation-targets': 7.18.6_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-transform-parameters': 7.18.6_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-proposal-optional-catch-binding/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-proposal-optional-chaining/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-PatI6elL5eMzoypFAiYDpYQyMtXTn+iMhuxxQt5mAXD4fEmKorpSI3PHd+i3JXBJN3xyA6MvJv7at23HffFHwA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-skip-transparent-expression-wrappers': 7.18.6
+      '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-proposal-private-methods/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-create-class-features-plugin': 7.18.6_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-proposal-private-property-in-object/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-create-class-features-plugin': 7.18.6_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5_@babel+core@7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-proposal-unicode-property-regex/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-create-regexp-features-plugin': 7.18.6_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-syntax-async-generators/7.8.4_@babel+core@7.18.6:
+    resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-syntax-bigint/7.8.3_@babel+core@7.18.6:
+    resolution: {integrity: sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-syntax-class-properties/7.12.13_@babel+core@7.18.6:
+    resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-syntax-class-static-block/7.14.5_@babel+core@7.18.6:
+    resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-syntax-decorators/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-fqyLgjcxf/1yhyZ6A+yo1u9gJ7eleFQod2lkaUsF9DQ7sbbY3Ligym3L0+I2c0WmqNKDpoD9UTb1AKP3qRMOAQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-syntax-dynamic-import/7.8.3_@babel+core@7.18.6:
+    resolution: {integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-syntax-export-namespace-from/7.8.3_@babel+core@7.18.6:
+    resolution: {integrity: sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-syntax-import-assertions/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-/DU3RXad9+bZwrgWJQKbr39gYbJpLJHezqEzRzi/BHRlJ9zsQb4CK2CA/5apllXNomwA1qHwzvHl+AdEmC5krQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-syntax-import-meta/7.10.4_@babel+core@7.18.6:
+    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-syntax-json-strings/7.8.3_@babel+core@7.18.6:
+    resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-syntax-jsx/7.18.6:
+    resolution: {integrity: sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: false
+
+  /@babel/plugin-syntax-jsx/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+
+  /@babel/plugin-syntax-logical-assignment-operators/7.10.4_@babel+core@7.18.6:
+    resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-syntax-nullish-coalescing-operator/7.8.3_@babel+core@7.18.6:
+    resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-syntax-numeric-separator/7.10.4_@babel+core@7.18.6:
+    resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-syntax-object-rest-spread/7.8.3_@babel+core@7.18.6:
+    resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-syntax-optional-catch-binding/7.8.3_@babel+core@7.18.6:
+    resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-syntax-optional-chaining/7.8.3_@babel+core@7.18.6:
+    resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-syntax-private-property-in-object/7.14.5_@babel+core@7.18.6:
+    resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-syntax-top-level-await/7.14.5_@babel+core@7.18.6:
+    resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-syntax-typescript/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-mAWAuq4rvOepWCBid55JuRNvpTNf2UGVgoz4JV0fXEKolsVZDzsa4NqCef758WZJj/GDu0gVGItjKFiClTAmZA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-arrow-functions/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-9S9X9RUefzrsHZmKMbDXxweEH+YlE8JJEuat9FdvW9Qh1cw7W64jELCtWNkPBPX5En45uy28KGvA/AySqUh8CQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-async-to-generator/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-ARE5wZLKnTgPW7/1ftQmSi1CmkqqHo2DNmtztFhvgtOWSDfq0Cq9/9L+KnZNYSNrydBekhW3rwShduf59RoXag==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-remap-async-to-generator': 7.18.6_@babel+core@7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-block-scoped-functions/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-block-scoping/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-pRqwb91C42vs1ahSAWJkxOxU1RHWDn16XAa6ggQ72wjLlWyYeAcLvTtE0aM8ph3KNydy9CQF2nLYcjq1WysgxQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-classes/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-XTg8XW/mKpzAF3actL554Jl/dOYoJtv3l8fxaEczpgz84IeeVf+T1u2CSvPHuZbt0w3JkIx4rdn/MRQI7mo0HQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-environment-visitor': 7.18.6
+      '@babel/helper-function-name': 7.18.6
+      '@babel/helper-optimise-call-expression': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-replace-supers': 7.18.6
+      '@babel/helper-split-export-declaration': 7.18.6
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-computed-properties/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-9repI4BhNrR0KenoR9vm3/cIc1tSBIo+u1WVjKCAynahj25O8zfbiE6JtAtHPGQSs4yZ+bA8mRasRP+qc+2R5A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-destructuring/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-tgy3u6lRp17ilY8r1kP4i2+HDUwxlVqq3RTc943eAWSzGgpU1qhiKpqZ5CMyHReIYPHdo3Kg8v8edKtDqSVEyQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-dotall-regex/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-create-regexp-features-plugin': 7.18.6_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-duplicate-keys/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-NJU26U/208+sxYszf82nmGYqVF9QN8py2HFTblPT9hbawi8+1C5a9JubODLTGFuT0qlkqVinmkwOD13s0sZktg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-exponentiation-operator/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-builder-binary-assignment-operator-visitor': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-for-of/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-WAjoMf4wIiSsy88KmG7tgj2nFdEK7E46tArVtcgED7Bkj6Fg/tG5SbvNIOKxbFS2VFgNh6+iaPswBeQZm4ox8w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-function-name/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-kJha/Gbs5RjzIu0CxZwf5e3aTTSlhZnHMT8zPWnJMjNpLOUgqevg+PN5oMH68nMCXnfiMo4Bhgxqj59KHTlAnA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-compilation-targets': 7.18.6_@babel+core@7.18.6
+      '@babel/helper-function-name': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-literals/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-x3HEw0cJZVDoENXOp20HlypIHfl0zMIhMVZEBVTfmqbObIpsMxMbmU5nOEO8R7LYT+z5RORKPlTI5Hj4OsO9/Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-member-expression-literals/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-modules-amd/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-Pra5aXsmTsOnjM3IajS8rTaLCy++nGM4v3YR4esk5PCsyg9z8NA5oQLwxzMUtDBd8F+UmVza3VxoAaWCbzH1rg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-module-transforms': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      babel-plugin-dynamic-import-node: 2.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-modules-commonjs/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-Qfv2ZOWikpvmedXQJDSbxNqy7Xr/j2Y8/KfijM0iJyKkBTmWuvCA1yeH1yDM7NJhBW/2aXxeucLj6i80/LAJ/Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-module-transforms': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-simple-access': 7.18.6
+      babel-plugin-dynamic-import-node: 2.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-modules-systemjs/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-UbPYpXxLjTw6w6yXX2BYNxF3p6QY225wcTkfQCy3OMnSlS/C3xGtwUjEzGkldb/sy6PWLiCQ3NbYfjWUTI3t4g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-hoist-variables': 7.18.6
+      '@babel/helper-module-transforms': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-validator-identifier': 7.18.6
+      babel-plugin-dynamic-import-node: 2.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-modules-umd/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-module-transforms': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-named-capturing-groups-regex/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-UmEOGF8XgaIqD74bC8g7iV3RYj8lMf0Bw7NJzvnS9qQhM4mg+1WHKotUIdjxgD2RGrgFLZZPCFPFj3P/kVDYhg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-create-regexp-features-plugin': 7.18.6_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-new-target/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-object-super/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-replace-supers': 7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-parameters/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-FjdqgMv37yVl/gwvzkcB+wfjRI8HQmc5EgOG9iGNvUY1ok+TjsoaMP7IqCDZBhkFcM5f3OPVMs6Dmp03C5k4/A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-property-literals/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-react-constant-elements/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-4g5H1bonF1dqgMe+wQ2fvDlRZ/mN/KwArk13teDv+xxn+pUDEiiDluQd6D2B30MJcL1u3qr0WZpfq0mw9/zSqA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-react-display-name/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-TV4sQ+T013n61uMoygyMRm+xf04Bd5oqFpv2jAEQwSZ8NwQA7zeRPg1LMVg2PWi3zWBz+CLKD+v5bcpZ/BS0aA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-react-jsx-development/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-SA6HEjwYFKF7WDjWcMcMGUimmw/nhNRDWxr+KaLSCrkD/LMDBvWRmHAYgE1HDeF8KUuI8OAu+RT6EOtKxSW2qA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/plugin-transform-react-jsx': 7.18.6_@babel+core@7.18.6
+    dev: true
+
+  /@babel/plugin-transform-react-jsx/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-Mz7xMPxoy9kPS/JScj6fJs03TZ/fZ1dJPlMjRAgTaxaS0fUBk8FV/A2rRgfPsVCZqALNwMexD+0Uaf5zlcKPpw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.18.6
+      '@babel/types': 7.18.7
+    dev: true
+
+  /@babel/plugin-transform-react-pure-annotations/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-I8VfEPg9r2TRDdvnHgPepTKvuRomzA8+u+nhY7qSI1fR2hRNebasZEETLyM5mAUr0Ku56OkXJ0I7NHJnO6cJiQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-regenerator/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-poqRI2+qiSdeldcz4wTSTXBRryoq3Gc70ye7m7UD5Ww0nE29IXqMl6r7Nd15WBgRd74vloEMlShtH6CKxVzfmQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      regenerator-transform: 0.15.0
+    dev: true
+
+  /@babel/plugin-transform-reserved-words/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-runtime/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-8uRHk9ZmRSnWqUgyae249EJZ94b0yAGLBIqzZzl+0iEdbno55Pmlt/32JZsHwXD9k/uZj18Aqqk35wBX4CBTXA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      babel-plugin-polyfill-corejs2: 0.3.1_@babel+core@7.18.6
+      babel-plugin-polyfill-corejs3: 0.5.2_@babel+core@7.18.6
+      babel-plugin-polyfill-regenerator: 0.3.1_@babel+core@7.18.6
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-shorthand-properties/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-spread/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-ayT53rT/ENF8WWexIRg9AiV9h0aIteyWn5ptfZTZQrjk/+f3WdrJGCY4c9wcgl2+MKkKPhzbYp97FTsquZpDCw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-skip-transparent-expression-wrappers': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-sticky-regex/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-template-literals/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-UuqlRrQmT2SWRvahW46cGSany0uTlcj8NYOS5sRGYi8FxPYPoLd5DDmMd32ZXEj2Jq+06uGVQKHxa/hJx2EzKw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-typeof-symbol/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-7m71iS/QhsPk85xSjFPovHPcH3H9qeyzsujhTc+vcdnsXavoWYJ74zx0lP5RhpC5+iDnVLO+PPMHzC11qels1g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-typescript/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-ijHNhzIrLj5lQCnI6aaNVRtGVuUZhOXFLRVFs7lLrkXTHip4FKty5oAuQdk4tywG0/WjXmjTfQCWmuzrvFer1w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-create-class-features-plugin': 7.18.6_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/plugin-syntax-typescript': 7.18.6_@babel+core@7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-unicode-escapes/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-XNRwQUXYMP7VLuy54cr/KS/WeL3AZeORhrmeZ7iewgu+X2eBqmpaLI/hzqr9ZxCeUoq0ASK4GUzSM0BDhZkLFw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/plugin-transform-unicode-regex/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-create-regexp-features-plugin': 7.18.6_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /@babel/preset-env/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-WrthhuIIYKrEFAwttYzgRNQ5hULGmwTj+D6l7Zdfsv5M7IWV/OZbUfbeL++Qrzx1nVJwWROIFhCHRYQV4xbPNw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/compat-data': 7.18.6
+      '@babel/core': 7.18.6
+      '@babel/helper-compilation-targets': 7.18.6_@babel+core@7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-validator-option': 7.18.6
+      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-async-generator-functions': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-class-properties': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-class-static-block': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-dynamic-import': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-export-namespace-from': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-json-strings': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-logical-assignment-operators': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-numeric-separator': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-object-rest-spread': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-optional-catch-binding': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-optional-chaining': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-private-methods': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-private-property-in-object': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-unicode-property-regex': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.18.6
+      '@babel/plugin-syntax-class-properties': 7.12.13_@babel+core@7.18.6
+      '@babel/plugin-syntax-class-static-block': 7.14.5_@babel+core@7.18.6
+      '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-syntax-export-namespace-from': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-syntax-import-assertions': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-syntax-json-strings': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4_@babel+core@7.18.6
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-syntax-numeric-separator': 7.10.4_@babel+core@7.18.6
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5_@babel+core@7.18.6
+      '@babel/plugin-syntax-top-level-await': 7.14.5_@babel+core@7.18.6
+      '@babel/plugin-transform-arrow-functions': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-async-to-generator': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-block-scoped-functions': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-block-scoping': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-classes': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-computed-properties': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-destructuring': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-dotall-regex': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-duplicate-keys': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-exponentiation-operator': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-for-of': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-function-name': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-literals': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-member-expression-literals': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-modules-amd': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-modules-commonjs': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-modules-systemjs': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-modules-umd': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-new-target': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-object-super': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-parameters': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-property-literals': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-regenerator': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-reserved-words': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-shorthand-properties': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-spread': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-sticky-regex': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-template-literals': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-typeof-symbol': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-unicode-escapes': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-unicode-regex': 7.18.6_@babel+core@7.18.6
+      '@babel/preset-modules': 0.1.5_@babel+core@7.18.6
+      '@babel/types': 7.18.7
+      babel-plugin-polyfill-corejs2: 0.3.1_@babel+core@7.18.6
+      babel-plugin-polyfill-corejs3: 0.5.2_@babel+core@7.18.6
+      babel-plugin-polyfill-regenerator: 0.3.1_@babel+core@7.18.6
+      core-js-compat: 3.23.3
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/preset-modules/0.1.5_@babel+core@7.18.6:
+    resolution: {integrity: sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/plugin-proposal-unicode-property-regex': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-dotall-regex': 7.18.6_@babel+core@7.18.6
+      '@babel/types': 7.18.7
+      esutils: 2.0.3
+    dev: true
+
+  /@babel/preset-react/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-zXr6atUmyYdiWRVLOZahakYmOBHtWc2WGCkP8PYTgZi0iJXDY2CN180TdrIW4OGOAdLc7TifzDIvtx6izaRIzg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-validator-option': 7.18.6
+      '@babel/plugin-transform-react-display-name': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-react-jsx': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-react-jsx-development': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-react-pure-annotations': 7.18.6_@babel+core@7.18.6
+    dev: true
+
+  /@babel/preset-typescript/7.18.6_@babel+core@7.18.6:
+    resolution: {integrity: sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/helper-validator-option': 7.18.6
+      '@babel/plugin-transform-typescript': 7.18.6_@babel+core@7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/runtime-corejs3/7.18.6:
+    resolution: {integrity: sha512-cOu5wH2JFBgMjje+a+fz2JNIWU4GzYpl05oSob3UDvBEh6EuIn+TXFHMmBbhSb+k/4HMzgKCQfEEDArAWNF9Cw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      core-js-pure: 3.23.3
+      regenerator-runtime: 0.13.9
+    dev: true
+
+  /@babel/runtime/7.18.6:
+    resolution: {integrity: sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.13.9
+
+  /@babel/template/7.18.6:
+    resolution: {integrity: sha512-JoDWzPe+wgBsTTgdnIma3iHNFC7YVJoPssVBDjiHfNlyt4YcunDtcDOUmfVDfCK5MfdsaIoX9PkijPhjH3nYUw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@babel/parser': 7.18.6
+      '@babel/types': 7.18.7
+
+  /@babel/traverse/7.18.6:
+    resolution: {integrity: sha512-zS/OKyqmD7lslOtFqbscH6gMLFYOfG1YPqCKfAW5KrTeolKqvB8UelR49Fpr6y93kYkW2Ik00mT1LOGiAGvizw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@babel/generator': 7.18.7
+      '@babel/helper-environment-visitor': 7.18.6
+      '@babel/helper-function-name': 7.18.6
+      '@babel/helper-hoist-variables': 7.18.6
+      '@babel/helper-split-export-declaration': 7.18.6
+      '@babel/parser': 7.18.6
+      '@babel/types': 7.18.7
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+
+  /@babel/types/7.18.7:
+    resolution: {integrity: sha512-QG3yxTcTIBoAcQmkCs+wAPYZhu7Dk9rXKacINfNbdJDNERTbLQbHGyVG8q/YGMPeCJRIhSY0+fTc5+xuh6WPSQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.18.6
+      to-fast-properties: 2.0.0
+
+  /@bcoe/v8-coverage/0.2.3:
+    resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
+    dev: true
+
+  /@codemirror/autocomplete/6.0.3:
+    resolution: {integrity: sha512-JTSBDC4tUyR8iRmCwQJaYpTXtOZmRn4gKjw1Fu4xIatFPqTJ7m0QRCdkdbzlvMovzjTiuHp4a8WUEB1c/LtiHg==}
+    dependencies:
+      '@codemirror/language': 6.2.0
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.0.2
+      '@lezer/common': 1.0.0
+    dev: false
+
+  /@codemirror/commands/6.0.1:
+    resolution: {integrity: sha512-iNHDByicYqQjs0Wo1MKGfqNbMYMyhS9WV6EwMVwsHXImlFemgEUC+c5X22bXKBStN3qnwg4fArNZM+gkv22baQ==}
+    dependencies:
+      '@codemirror/language': 6.2.0
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.0.2
+      '@lezer/common': 1.0.0
+    dev: false
+
+  /@codemirror/lang-cpp/6.0.1:
+    resolution: {integrity: sha512-46p3ohfhjzkLWJ3VwvzX0aqlXh8UkEqX1xo2Eds9l6Ql3uDoxI2IZEjR9cgJaGOZTXCkDzQuQH7sfYAxMvzLjA==}
+    dependencies:
+      '@codemirror/language': 6.2.0
+      '@lezer/cpp': 1.0.0
+    dev: false
+
+  /@codemirror/lang-css/6.0.0:
+    resolution: {integrity: sha512-jBqc+BTuwhNOTlrimFghLlSrN6iFuE44HULKWoR4qKYObhOIl9Lci1iYj6zMIte1XTQmZguNvjXMyr43LUKwSw==}
+    dependencies:
+      '@codemirror/autocomplete': 6.0.3
+      '@codemirror/language': 6.2.0
+      '@codemirror/state': 6.1.0
+      '@lezer/css': 1.0.0
+    dev: false
+
+  /@codemirror/lang-html/6.1.0:
+    resolution: {integrity: sha512-gA7NmJxqvnhwza05CvR7W/39Ap9r/4Vs9uiC0IeFYo1hSlJzc/8N6Evviz6vTW1x8SpHcRYyqKOf6rpl6LfWtg==}
+    dependencies:
+      '@codemirror/autocomplete': 6.0.3
+      '@codemirror/lang-css': 6.0.0
+      '@codemirror/lang-javascript': 6.0.1
+      '@codemirror/language': 6.2.0
+      '@codemirror/state': 6.1.0
+      '@lezer/common': 1.0.0
+      '@lezer/html': 1.0.0
+    dev: false
+
+  /@codemirror/lang-java/6.0.0:
+    resolution: {integrity: sha512-aeWq+ikUS6Eubk6RBbiMgxuBIT4Ih8Asb1qc2pSiMcstrwr4ODbazPXsBHbLBYg3aObvFyOm2bNQncbQJjZ3sQ==}
+    dependencies:
+      '@codemirror/language': 6.2.0
+      '@lezer/java': 1.0.0
+    dev: false
+
+  /@codemirror/lang-javascript/6.0.1:
+    resolution: {integrity: sha512-kjGbBEosl+ozDU5ruDV48w4v3H6KECTFiDjqMLT0KhVwESPfv3wOvnDrTT0uaMOg3YRGnBWsyiIoKHl/tNWWDg==}
+    dependencies:
+      '@codemirror/autocomplete': 6.0.3
+      '@codemirror/language': 6.2.0
+      '@codemirror/lint': 6.0.0
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.0.2
+      '@lezer/common': 1.0.0
+      '@lezer/javascript': 1.0.1
+    dev: false
+
+  /@codemirror/lang-json/6.0.0:
+    resolution: {integrity: sha512-DvTcYTKLmg2viADXlTdufrT334M9jowe1qO02W28nvm+nejcvhM5vot5mE8/kPrxYw/HJHhwu1z2PyBpnMLCNQ==}
+    dependencies:
+      '@codemirror/language': 6.2.0
+      '@lezer/json': 1.0.0
+    dev: false
+
+  /@codemirror/lang-lezer/6.0.0:
+    resolution: {integrity: sha512-ZZMAVo/P5Qk2iUdylUJk6afDjOMpwNlm5x4KAbH2v0jlMyMG8LclTvNiQa/d6rw81cNXz4zYoXea1V+mdNu9Zw==}
+    dependencies:
+      '@codemirror/language': 6.2.0
+      '@codemirror/state': 6.1.0
+      '@lezer/common': 1.0.0
+      '@lezer/lezer': 1.1.0
+    dev: false
+
+  /@codemirror/lang-markdown/6.0.0:
+    resolution: {integrity: sha512-ozJaO1W4WgGlwWOoYCSYzbVhhM0YM/4lAWLrNsBbmhh5Ztpl0qm4CgEQRl3t8/YcylTZYBIXiskui8sHNGd4dg==}
+    dependencies:
+      '@codemirror/lang-html': 6.1.0
+      '@codemirror/language': 6.2.0
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.0.2
+      '@lezer/common': 1.0.0
+      '@lezer/markdown': 1.0.1
+    dev: false
+
+  /@codemirror/lang-php/6.0.0:
+    resolution: {integrity: sha512-96CEjq0xEgbzc6bdFPwILPfZ6m8917JRbh2oPszZJABlYxG4Y+eYjtYkUTDb4yuyjQKyigHoeGC6zoIOYA1NWA==}
+    dependencies:
+      '@codemirror/lang-html': 6.1.0
+      '@codemirror/language': 6.2.0
+      '@codemirror/state': 6.1.0
+      '@lezer/common': 1.0.0
+      '@lezer/php': 1.0.0
+    dev: false
+
+  /@codemirror/lang-python/6.0.0:
+    resolution: {integrity: sha512-wI448yup4Y2Xxq/7r3Q4eEmth74ud263ABcexumEFEcoU+0c1k5XRKXp1aT5PrrVavlAKxWQMEvgi+x+HBU4zQ==}
+    dependencies:
+      '@codemirror/language': 6.2.0
+      '@lezer/python': 1.0.0
+    dev: false
+
+  /@codemirror/lang-rust/6.0.0:
+    resolution: {integrity: sha512-VQql3Qk1BwoXb3SUkeWll/EEwhsgQWc1bpia7CFqqp2PhQBb5A6r4Vj2JCkU/nE6A7TDPSGHTOoqJSG5s/VXtQ==}
+    dependencies:
+      '@codemirror/language': 6.2.0
+      '@lezer/rust': 1.0.0
+    dev: false
+
+  /@codemirror/lang-sql/6.0.0:
+    resolution: {integrity: sha512-mq4NwTDbbo7QZktfgPsS+ms0FmAceH4WM2jLbgf+N28FoKUy0JzGe3XJymgnTewXnNUwujKBxArQzibxSDdVyQ==}
+    dependencies:
+      '@codemirror/autocomplete': 6.0.3
+      '@codemirror/language': 6.2.0
+      '@codemirror/state': 6.1.0
+      '@lezer/highlight': 1.0.0
+      '@lezer/lr': 1.2.0
+    dev: false
+
+  /@codemirror/lang-xml/6.0.0:
+    resolution: {integrity: sha512-M/HLWxIiP956xGjtrxkeHkCmDGVQGKu782x8pOH5CLJIMkWtiB1DWfDoDHqpFjdEE9dkfcqPWvYfVi6GbhuXEg==}
+    dependencies:
+      '@codemirror/autocomplete': 6.0.3
+      '@codemirror/language': 6.2.0
+      '@codemirror/state': 6.1.0
+      '@lezer/common': 1.0.0
+      '@lezer/xml': 1.0.0
+    dev: false
+
+  /@codemirror/language/6.2.0:
+    resolution: {integrity: sha512-tabB0Ef/BflwoEmTB4a//WZ9P90UQyne9qWB9YFsmeS4bnEqSys7UpGk/da1URMXhyfuzWCwp+AQNMhvu8SfnA==}
+    dependencies:
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.0.2
+      '@lezer/common': 1.0.0
+      '@lezer/highlight': 1.0.0
+      '@lezer/lr': 1.2.0
+      style-mod: 4.0.0
+    dev: false
+
+  /@codemirror/legacy-modes/6.1.0:
+    resolution: {integrity: sha512-V/PgGpndkZeTn3Hdlg/gd8MLFdyvTCIX+iwJzjUw5iNziWiNsAY8X0jvf7m3gSfxnKkNzmid6l0g4rYSpiDaCw==}
+    dependencies:
+      '@codemirror/language': 6.2.0
+    dev: false
+
+  /@codemirror/lint/6.0.0:
+    resolution: {integrity: sha512-nUUXcJW1Xp54kNs+a1ToPLK8MadO0rMTnJB8Zk4Z8gBdrN0kqV7uvUraU/T2yqg+grDNR38Vmy/MrhQN/RgwiA==}
+    dependencies:
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.0.2
+      crelt: 1.0.5
+    dev: false
+
+  /@codemirror/next/0.16.0:
+    resolution: {integrity: sha512-l45zvRlWL1wBHse8OSCXYIxQbeYaIO/DPcqyzUQQBYYdk/tM8ZaCmDqLS15dvLbN2EFkj8RgURg0srDlO6aYJw==}
+    deprecated: The mono-package is no longer being upgraded. Use the package names without /next (i.e. @codemirror/view) instead.
+    dependencies:
+      crelt: 1.0.5
+      lezer: 0.13.5
+      lezer-cpp: 0.13.2
+      lezer-css: 0.13.1
+      lezer-html: 0.13.6
+      lezer-java: 0.13.2
+      lezer-javascript: 0.13.4
+      lezer-json: 0.13.2
+      lezer-markdown: 0.13.0
+      lezer-python: 0.13.7
+      lezer-rust: 0.13.1
+      lezer-tree: 0.13.2
+      lezer-xml: 0.13.4
+      style-mod: 3.2.2
+      w3c-keyname: 2.2.4
+    dev: false
+
+  /@codemirror/search/6.0.0:
+    resolution: {integrity: sha512-rL0rd3AhI0TAsaJPUaEwC63KHLO7KL0Z/dYozXj6E7L3wNHRyx7RfE0/j5HsIf912EE5n2PCb4Vg0rGYmDv4UQ==}
+    dependencies:
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.0.2
+      crelt: 1.0.5
+    dev: false
+
+  /@codemirror/state/6.1.0:
+    resolution: {integrity: sha512-qbUr94DZTe6/V1VS7LDLz11rM/1t/nJxR1El4I6UaxDEdc0aZZvq6JCLJWiRmUf95NRAnDH6fhXn+PWp9wGCIg==}
+    dev: false
+
+  /@codemirror/theme-one-dark/6.0.0:
+    resolution: {integrity: sha512-jTCfi1I8QT++3m21Ui6sU8qwu3F/hLv161KLxfvkV1cYWSBwyUanmQFs89ChobQjBHi2x7s2k71wF9WYvE8fdw==}
+    dependencies:
+      '@codemirror/language': 6.2.0
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.0.2
+      '@lezer/highlight': 1.0.0
+    dev: false
+
+  /@codemirror/view/6.0.2:
+    resolution: {integrity: sha512-mnVT/q1JvKPjpmjXJNeCi/xHyaJ3abGJsumIVpdQ1nE1MXAyHf7GHWt8QpWMUvDiqF0j+inkhVR2OviTdFFX7Q==}
+    dependencies:
+      '@codemirror/state': 6.1.0
+      style-mod: 4.0.0
+      w3c-keyname: 2.2.4
+    dev: false
+
+  /@cspotcode/source-map-support/0.8.1:
+    resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.9
+    dev: true
+
+  /@ctrl/tinycolor/3.4.1:
+    resolution: {integrity: sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==}
+    engines: {node: '>=10'}
+    dev: false
+
+  /@cypress/webpack-preprocessor/5.12.0_fn4zy6wxmwni62n6gsuqjrjamy:
+    resolution: {integrity: sha512-D/eLKKlgx6c/307FaCmjZGjFA64G29aA8KcCy6WqpNK/bSnRdPquMW2plemIsT/B80TK2DDKzZX/H3FcS41ZDA==}
+    peerDependencies:
+      '@babel/core': ^7.0.1
+      '@babel/preset-env': ^7.0.0
+      babel-loader: ^8.0.2
+      webpack: ^4 || ^5
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      '@babel/preset-env':
+        optional: true
+      babel-loader:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/preset-env': 7.18.6_@babel+core@7.18.6
+      babel-loader: 8.2.5_fswvdo7jykdwhfxrdcvghfn6pa
+      bluebird: 3.7.1
+      debug: 4.3.4
+      lodash: 4.17.21
+      webpack: 5.73.0_@swc+core@1.2.210
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@date-io/core/2.14.0:
+    resolution: {integrity: sha512-qFN64hiFjmlDHJhu+9xMkdfDG2jLsggNxKXglnekUpXSq8faiqZgtHm2lsHCUuaPDTV6wuXHcCl8J1GQ5wLmPw==}
+    dev: false
+
+  /@date-io/date-fns/2.14.0_date-fns@2.28.0:
+    resolution: {integrity: sha512-4fJctdVyOd5cKIKGaWUM+s3MUXMuzkZaHuTY15PH70kU1YTMrCoauA7hgQVx9qj0ZEbGrH9VSPYJYnYro7nKiA==}
+    peerDependencies:
+      date-fns: ^2.0.0
+    peerDependenciesMeta:
+      date-fns:
+        optional: true
+    dependencies:
+      '@date-io/core': 2.14.0
+      date-fns: 2.28.0
+    dev: false
+
+  /@date-io/dayjs/2.14.0:
+    resolution: {integrity: sha512-4fRvNWaOh7AjvOyJ4h6FYMS7VHLQnIEeAV5ahv6sKYWx+1g1UwYup8h7+gPuoF+sW2hTScxi7PVaba2Jk/U8Og==}
+    peerDependencies:
+      dayjs: ^1.8.17
+    peerDependenciesMeta:
+      dayjs:
+        optional: true
+    dependencies:
+      '@date-io/core': 2.14.0
+    dev: false
+
+  /@date-io/luxon/2.14.0:
+    resolution: {integrity: sha512-KmpBKkQFJ/YwZgVd0T3h+br/O0uL9ZdE7mn903VPAG2ZZncEmaUfUdYKFT7v7GyIKJ4KzCp379CRthEbxevEVg==}
+    peerDependencies:
+      luxon: ^1.21.3 || ^2.x
+    peerDependenciesMeta:
+      luxon:
+        optional: true
+    dependencies:
+      '@date-io/core': 2.14.0
+    dev: false
+
+  /@date-io/moment/2.14.0:
+    resolution: {integrity: sha512-VsoLXs94GsZ49ecWuvFbsa081zEv2xxG7d+izJsqGa2L8RPZLlwk27ANh87+SNnOUpp+qy2AoCAf0mx4XXhioA==}
+    peerDependencies:
+      moment: ^2.24.0
+    peerDependenciesMeta:
+      moment:
+        optional: true
+    dependencies:
+      '@date-io/core': 2.14.0
+    dev: false
+
+  /@dnd-kit/accessibility/3.0.1:
+    resolution: {integrity: sha512-HXRrwS9YUYQO9lFRc/49uO/VICbM+O+ZRpFDe9Pd1rwVv2PCNkRiTZRdxrDgng/UkvdC3Re9r2vwPpXXrWeFzg==}
+    peerDependencies:
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      tslib: 2.4.0
+    dev: false
+
+  /@dnd-kit/core/6.0.5:
+    resolution: {integrity: sha512-3nL+Zy5cT+1XwsWdlXIvGIFvbuocMyB4NBxTN74DeBaBqeWdH9JsnKwQv7buZQgAHmAH+eIENfS1ginkvW6bCw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@dnd-kit/accessibility': 3.0.1
+      '@dnd-kit/utilities': 3.2.0
+      tslib: 2.4.0
+    dev: false
+
+  /@dnd-kit/modifiers/6.0.0_@dnd-kit+core@6.0.5:
+    resolution: {integrity: sha512-V3+JSo6/BTcgPRHiNUTSKgqVv/doKXg+T4Z0QvKiiXp+uIyJTUtPkQOBRQApUWi3ApBhnoWljyt/3xxY4fTd0Q==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.0.0
+    dependencies:
+      '@dnd-kit/core': 6.0.5
+      '@dnd-kit/utilities': 3.2.0
+      tslib: 2.4.0
+    transitivePeerDependencies:
+      - react
+    dev: false
+
+  /@dnd-kit/sortable/7.0.1_@dnd-kit+core@6.0.5:
+    resolution: {integrity: sha512-n77qAzJQtMMywu25sJzhz3gsHnDOUlEjTtnRl8A87rWIhnu32zuP+7zmFjwGgvqfXmRufqiHOSlH7JPC/tnJ8Q==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.0.4
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      '@dnd-kit/core': 6.0.5
+      '@dnd-kit/utilities': 3.2.0
+      tslib: 2.4.0
+    dev: false
+
+  /@dnd-kit/utilities/3.2.0:
+    resolution: {integrity: sha512-h65/pn2IPCCIWwdlR2BMLqRkDxpTEONA+HQW3n765HBijLYGyrnTCLa2YQt8VVjjSQD6EfFlTE6aS2Q/b6nb2g==}
+    peerDependencies:
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      tslib: 2.4.0
+    dev: false
+
+  /@emotion/babel-plugin/11.9.2:
+    resolution: {integrity: sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==}
+    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.8.0
+      '@emotion/memoize': 0.7.5
+      '@emotion/serialize': 1.0.4
+      babel-plugin-macros: 2.8.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_@babel+core@7.18.6:
+    resolution: {integrity: sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.18.6
+      '@babel/runtime': 7.18.6
+      '@emotion/hash': 0.8.0
+      '@emotion/memoize': 0.7.5
+      '@emotion/serialize': 1.0.4
+      babel-plugin-macros: 2.8.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/cache/11.9.3:
+    resolution: {integrity: sha512-0dgkI/JKlCXa+lEXviaMtGBL0ynpx4osh7rjOXE71q9bIF8G+XhJgvi+wDu0B0IdCVx37BffiwXlN9I3UuzFvg==}
+    dependencies:
+      '@emotion/memoize': 0.7.5
+      '@emotion/sheet': 1.1.1
+      '@emotion/utils': 1.1.0
+      '@emotion/weak-memoize': 0.2.5
+      stylis: 4.0.13
+    dev: false
+
+  /@emotion/hash/0.8.0:
+    resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
+    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/memoize/0.7.5:
+    resolution: {integrity: sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==}
+    dev: false
+
+  /@emotion/react/11.9.3:
+    resolution: {integrity: sha512-g9Q1GcTOlzOEjqwuLF/Zd9LC+4FljjPjDfxSM7KmEakm+hsHXk+bYZ2q+/hTJzr0OUNkujo72pXLQvXj6H+GJQ==}
+    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.9.2
+      '@emotion/cache': 11.9.3
+      '@emotion/serialize': 1.0.4
+      '@emotion/utils': 1.1.0
+      '@emotion/weak-memoize': 0.2.5
+      hoist-non-react-statics: 3.3.2
+    dev: false
+
+  /@emotion/react/11.9.3_4jaruczdv2uxjj3lb2xbkiuci4:
+    resolution: {integrity: sha512-g9Q1GcTOlzOEjqwuLF/Zd9LC+4FljjPjDfxSM7KmEakm+hsHXk+bYZ2q+/hTJzr0OUNkujo72pXLQvXj6H+GJQ==}
+    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/core': 7.18.6
+      '@babel/runtime': 7.18.6
+      '@emotion/babel-plugin': 11.9.2_@babel+core@7.18.6
+      '@emotion/cache': 11.9.3
+      '@emotion/serialize': 1.0.4
+      '@emotion/utils': 1.1.0
+      '@emotion/weak-memoize': 0.2.5
+      '@types/react': 18.0.14
+      hoist-non-react-statics: 3.3.2
+      react: 18.2.0
+    dev: false
+
+  /@emotion/react/11.9.3_@babel+core@7.18.6:
+    resolution: {integrity: sha512-g9Q1GcTOlzOEjqwuLF/Zd9LC+4FljjPjDfxSM7KmEakm+hsHXk+bYZ2q+/hTJzr0OUNkujo72pXLQvXj6H+GJQ==}
+    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/core': 7.18.6
+      '@babel/runtime': 7.18.6
+      '@emotion/babel-plugin': 11.9.2_@babel+core@7.18.6
+      '@emotion/cache': 11.9.3
+      '@emotion/serialize': 1.0.4
+      '@emotion/utils': 1.1.0
+      '@emotion/weak-memoize': 0.2.5
+      hoist-non-react-statics: 3.3.2
+    dev: false
+
+  /@emotion/serialize/1.0.4:
+    resolution: {integrity: sha512-1JHamSpH8PIfFwAMryO2bNka+y8+KA5yga5Ocf2d7ZEiJjb7xlLW7aknBGZqJLajuLOvJ+72vN+IBSwPlXD1Pg==}
+    dependencies:
+      '@emotion/hash': 0.8.0
+      '@emotion/memoize': 0.7.5
+      '@emotion/unitless': 0.7.5
+      '@emotion/utils': 1.1.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/styled/11.9.3:
+    resolution: {integrity: sha512-o3sBNwbtoVz9v7WB1/Y/AmXl69YHmei2mrVnK7JgyBJ//Rst5yqPZCecEJlMlJrFeWHp+ki/54uN265V2pEcXA==}
+    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.9.2
+      '@emotion/is-prop-valid': 1.1.3
+      '@emotion/serialize': 1.0.4
+      '@emotion/utils': 1.1.0
+    dev: false
+
+  /@emotion/styled/11.9.3_@emotion+react@11.9.3:
+    resolution: {integrity: sha512-o3sBNwbtoVz9v7WB1/Y/AmXl69YHmei2mrVnK7JgyBJ//Rst5yqPZCecEJlMlJrFeWHp+ki/54uN265V2pEcXA==}
+    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.9.2
+      '@emotion/is-prop-valid': 1.1.3
+      '@emotion/react': 11.9.3
+      '@emotion/serialize': 1.0.4
+      '@emotion/utils': 1.1.0
+    dev: false
+
+  /@emotion/styled/11.9.3_dc5dh2wp562rsjxvguwi2i3yzq:
+    resolution: {integrity: sha512-o3sBNwbtoVz9v7WB1/Y/AmXl69YHmei2mrVnK7JgyBJ//Rst5yqPZCecEJlMlJrFeWHp+ki/54uN265V2pEcXA==}
+    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/core': 7.18.6
+      '@babel/runtime': 7.18.6
+      '@emotion/babel-plugin': 11.9.2_@babel+core@7.18.6
+      '@emotion/is-prop-valid': 1.1.3
+      '@emotion/react': 11.9.3_@babel+core@7.18.6
+      '@emotion/serialize': 1.0.4
+      '@emotion/utils': 1.1.0
+    dev: false
+
+  /@emotion/styled/11.9.3_toiz7tndcw4z2b7gxmmeo5fkcu:
+    resolution: {integrity: sha512-o3sBNwbtoVz9v7WB1/Y/AmXl69YHmei2mrVnK7JgyBJ//Rst5yqPZCecEJlMlJrFeWHp+ki/54uN265V2pEcXA==}
+    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/core': 7.18.6
+      '@babel/runtime': 7.18.6
+      '@emotion/babel-plugin': 11.9.2_@babel+core@7.18.6
+      '@emotion/is-prop-valid': 1.1.3
+      '@emotion/react': 11.9.3_4jaruczdv2uxjj3lb2xbkiuci4
+      '@emotion/serialize': 1.0.4
+      '@emotion/utils': 1.1.0
+      '@types/react': 18.0.14
+      react: 18.2.0
+    dev: false
+
+  /@emotion/unitless/0.7.5:
+    resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==}
+    dev: false
+
+  /@emotion/utils/1.1.0:
+    resolution: {integrity: sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==}
+    dev: false
+
+  /@emotion/weak-memoize/0.2.5:
+    resolution: {integrity: sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==}
+    dev: false
+
+  /@eslint/eslintrc/1.3.0:
+    resolution: {integrity: sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.3.4
+      espree: 9.3.2
+      globals: 13.16.0
+      ignore: 5.2.0
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@firebase/analytics-compat/0.1.12_ikt45rtbctnl5l4y6p3bca5464:
+    resolution: {integrity: sha512-mXR02p/4C9Xx07prhzr9nwocH6Xn3vpcO7DMGUMNB0qKdJADOaBow6LDlDY3u8ILhmHqNS8qPY3sKnhoTWzz8A==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+    dependencies:
+      '@firebase/analytics': 0.7.11_@firebase+app@0.7.27
+      '@firebase/analytics-types': 0.7.0
+      '@firebase/app-compat': 0.1.28
+      '@firebase/component': 0.5.16
+      '@firebase/util': 1.6.2
+      tslib: 2.4.0
+    transitivePeerDependencies:
+      - '@firebase/app'
+    dev: true
+
+  /@firebase/analytics-types/0.7.0:
+    resolution: {integrity: sha512-DNE2Waiwy5+zZnCfintkDtBfaW6MjIG883474v6Z0K1XZIvl76cLND4iv0YUb48leyF+PJK1KO2XrgHb/KpmhQ==}
+    dev: true
+
+  /@firebase/analytics/0.7.11_@firebase+app@0.7.27:
+    resolution: {integrity: sha512-rEGBmZdvD+biSAcMztrIftc/vS8Wgexau8Ok2aFqo3n3IkKDdBq2tdhh6tXsugBt755+q56HGQOHRWboaqG3LQ==}
+    peerDependencies:
+      '@firebase/app': 0.x
+    dependencies:
+      '@firebase/app': 0.7.27
+      '@firebase/component': 0.5.16
+      '@firebase/installations': 0.5.11_@firebase+app@0.7.27
+      '@firebase/logger': 0.3.3
+      '@firebase/util': 1.6.2
+      tslib: 2.4.0
+    dev: true
+
+  /@firebase/app-check-compat/0.2.10_ikt45rtbctnl5l4y6p3bca5464:
+    resolution: {integrity: sha512-NNxroiY3BVaEGkKs8W4dzv2WnJ4PbeBL7DpF1MlRHEZHa/48YPZv8xKx3QcKbH0T+31s7ponPYnRYsNY+j4CaA==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+    dependencies:
+      '@firebase/app-check': 0.5.10_@firebase+app@0.7.27
+      '@firebase/app-check-types': 0.4.0
+      '@firebase/app-compat': 0.1.28
+      '@firebase/component': 0.5.16
+      '@firebase/logger': 0.3.3
+      '@firebase/util': 1.6.2
+      tslib: 2.4.0
+    transitivePeerDependencies:
+      - '@firebase/app'
+    dev: true
+
+  /@firebase/app-check-interop-types/0.1.0:
+    resolution: {integrity: sha512-uZfn9s4uuRsaX5Lwx+gFP3B6YsyOKUE+Rqa6z9ojT4VSRAsZFko9FRn6OxQUA1z5t5d08fY4pf+/+Dkd5wbdbA==}
+    dev: true
+
+  /@firebase/app-check-types/0.4.0:
+    resolution: {integrity: sha512-SsWafqMABIOu7zLgWbmwvHGOeQQVQlwm42kwwubsmfLmL4Sf5uGpBfDhQ0CAkpi7bkJ/NwNFKafNDL9prRNP0Q==}
+    dev: true
+
+  /@firebase/app-check/0.5.10_@firebase+app@0.7.27:
+    resolution: {integrity: sha512-q/rpvhPBU7utREWTlsw+Nr9aZAHKZieF9o/6EJkymqFvWDDmvN+hycKidKWwJ2OcnUYjOr7GuvWUEAfw8X8/tQ==}
+    peerDependencies:
+      '@firebase/app': 0.x
+    dependencies:
+      '@firebase/app': 0.7.27
+      '@firebase/component': 0.5.16
+      '@firebase/logger': 0.3.3
+      '@firebase/util': 1.6.2
+      tslib: 2.4.0
+    dev: true
+
+  /@firebase/app-compat/0.1.28:
+    resolution: {integrity: sha512-yo1A32zMSaFv+hG9XcSkquA1GD8ph+Hx6hxOp8XQjtzkXA+TJzA0ehvDp1YCL6owBXn9RXphUC6mofPdDEFJKQ==}
+    dependencies:
+      '@firebase/app': 0.7.27
+      '@firebase/component': 0.5.16
+      '@firebase/logger': 0.3.3
+      '@firebase/util': 1.6.2
+      tslib: 2.4.0
+    dev: true
+
+  /@firebase/app-types/0.7.0:
+    resolution: {integrity: sha512-6fbHQwDv2jp/v6bXhBw2eSRbNBpxHcd1NBF864UksSMVIqIyri9qpJB1Mn6sGZE+bnDsSQBC5j2TbMxYsJQkQg==}
+    dev: true
+
+  /@firebase/app/0.7.27:
+    resolution: {integrity: sha512-gLxy9wHymCsPAWuIWg2S/gOWoAN/Nbpto+IWSXPHzjVUtPRvmuBrr9rvh8D2V2zHxNb1WigoZVLy5acRAf2rHg==}
+    dependencies:
+      '@firebase/component': 0.5.16
+      '@firebase/logger': 0.3.3
+      '@firebase/util': 1.6.2
+      idb: 7.0.1
+      tslib: 2.4.0
+    dev: true
+
+  /@firebase/auth-compat/0.2.17_2whj6v3knk7rswcmdbn5bdkgna:
+    resolution: {integrity: sha512-GlEnDjziTEbFKqdILugBis9ZaQx57Y7bz5Uk41c793BusGXOgcZdrqjjM3DpNKPWBvi58rNbP0FdcAZA7DsWTw==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+    dependencies:
+      '@firebase/app-compat': 0.1.28
+      '@firebase/auth': 0.20.4_@firebase+app@0.7.27
+      '@firebase/auth-types': 0.11.0_ee7bhenjigpuz3jknhp5542foa
+      '@firebase/component': 0.5.16
+      '@firebase/util': 1.6.2
+      node-fetch: 2.6.7
+      selenium-webdriver: 4.1.2
+      tslib: 2.4.0
+    transitivePeerDependencies:
+      - '@firebase/app'
+      - '@firebase/app-types'
+      - bufferutil
+      - encoding
+      - utf-8-validate
+    dev: true
+
+  /@firebase/auth-interop-types/0.1.6_ee7bhenjigpuz3jknhp5542foa:
+    resolution: {integrity: sha512-etIi92fW3CctsmR9e3sYM3Uqnoq861M0Id9mdOPF6PWIg38BXL5k4upCNBggGUpLIS0H1grMOvy/wn1xymwe2g==}
+    peerDependencies:
+      '@firebase/app-types': 0.x
+      '@firebase/util': 1.x
+    dependencies:
+      '@firebase/app-types': 0.7.0
+      '@firebase/util': 1.6.2
+    dev: true
+
+  /@firebase/auth-types/0.11.0_ee7bhenjigpuz3jknhp5542foa:
+    resolution: {integrity: sha512-q7Bt6cx+ySj9elQHTsKulwk3+qDezhzRBFC9zlQ1BjgMueUOnGMcvqmU0zuKlQ4RhLSH7MNAdBV2znVaoN3Vxw==}
+    peerDependencies:
+      '@firebase/app-types': 0.x
+      '@firebase/util': 1.x
+    dependencies:
+      '@firebase/app-types': 0.7.0
+      '@firebase/util': 1.6.2
+    dev: true
+
+  /@firebase/auth/0.20.4_@firebase+app@0.7.27:
+    resolution: {integrity: sha512-pWIrPB635QpPPbr7GFt2JMvSu/+Mgz/wLnMMrX3hHaPl4UlRLKdycohPSIZF+EGgc7PLx6p9fJvcw1fGEFZNXQ==}
+    peerDependencies:
+      '@firebase/app': 0.x
+    dependencies:
+      '@firebase/app': 0.7.27
+      '@firebase/component': 0.5.16
+      '@firebase/logger': 0.3.3
+      '@firebase/util': 1.6.2
+      node-fetch: 2.6.7
+      selenium-webdriver: 4.1.2
+      tslib: 2.4.0
+    transitivePeerDependencies:
+      - bufferutil
+      - encoding
+      - utf-8-validate
+    dev: true
+
+  /@firebase/component/0.5.16:
+    resolution: {integrity: sha512-/pkl77mN9PT7dTSzNu1CrvIvd+z1CdePnEl+VITaeSBs9Ko7ZVvSIlzQLbSwqksXX3bAHpxej0Mg6mVKQiRVSw==}
+    dependencies:
+      '@firebase/util': 1.6.2
+      tslib: 2.4.0
+    dev: true
+
+  /@firebase/database-compat/0.2.2_@firebase+app-types@0.7.0:
+    resolution: {integrity: sha512-3wLHJ54WHMhrveCywCMbkspshFezN07PLOIsmqELM1+pmrg3bwMj9u/o3Equ0DwmESMnchp5sMxgzdBUOextJg==}
+    dependencies:
+      '@firebase/component': 0.5.16
+      '@firebase/database': 0.13.2_@firebase+app-types@0.7.0
+      '@firebase/database-types': 0.9.10
+      '@firebase/logger': 0.3.3
+      '@firebase/util': 1.6.2
+      tslib: 2.4.0
+    transitivePeerDependencies:
+      - '@firebase/app-types'
+    dev: true
+
+  /@firebase/database-types/0.9.10:
+    resolution: {integrity: sha512-2ji6nXRRsY+7hgU6zRhUtK0RmSjVWM71taI7Flgaw+BnopCo/lDF5HSwxp8z7LtiHlvQqeRA3Ozqx5VhlAbiKg==}
+    dependencies:
+      '@firebase/app-types': 0.7.0
+      '@firebase/util': 1.6.2
+    dev: true
+
+  /@firebase/database/0.13.2_@firebase+app-types@0.7.0:
+    resolution: {integrity: sha512-wKkBD4rq6PPv9gl1hNJNpl0R0bwJmXCJfDuvotjXmTcU7kV0AIaJ45GVhULkbSCApAAFC6QUJ91oasDUO1ZVxw==}
+    dependencies:
+      '@firebase/auth-interop-types': 0.1.6_ee7bhenjigpuz3jknhp5542foa
+      '@firebase/component': 0.5.16
+      '@firebase/logger': 0.3.3
+      '@firebase/util': 1.6.2
+      faye-websocket: 0.11.4
+      tslib: 2.4.0
+    transitivePeerDependencies:
+      - '@firebase/app-types'
+    dev: true
+
+  /@firebase/firestore-compat/0.1.20_2whj6v3knk7rswcmdbn5bdkgna:
+    resolution: {integrity: sha512-0+WAh+pjCi0t/DK5cefECiwQGiZbrAU2UenZ61Uly1w7L5ob932Qc61OQKk+Y2VD+IQ7YPcBpUM7X6JOSbgJ6g==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+    dependencies:
+      '@firebase/app-compat': 0.1.28
+      '@firebase/component': 0.5.16
+      '@firebase/firestore': 3.4.11_@firebase+app@0.7.27
+      '@firebase/firestore-types': 2.5.0_ee7bhenjigpuz3jknhp5542foa
+      '@firebase/util': 1.6.2
+      tslib: 2.4.0
+    transitivePeerDependencies:
+      - '@firebase/app'
+      - '@firebase/app-types'
+      - encoding
+    dev: true
+
+  /@firebase/firestore-types/2.5.0_ee7bhenjigpuz3jknhp5542foa:
+    resolution: {integrity: sha512-I6c2m1zUhZ5SH0cWPmINabDyH5w0PPFHk2UHsjBpKdZllzJZ2TwTkXbDtpHUZNmnc/zAa0WNMNMvcvbb/xJLKA==}
+    peerDependencies:
+      '@firebase/app-types': 0.x
+      '@firebase/util': 1.x
+    dependencies:
+      '@firebase/app-types': 0.7.0
+      '@firebase/util': 1.6.2
+    dev: true
+
+  /@firebase/firestore/3.4.11_@firebase+app@0.7.27:
+    resolution: {integrity: sha512-ZobzP2fQNiqT9Fh5x/8CmQVsWr3JJaM4l0xGHyaPc7vneRRC0Y0KcuKg3z3jBUXItXvlsIj7mGM4FucrxwhPzQ==}
+    engines: {node: '>=10.10.0'}
+    peerDependencies:
+      '@firebase/app': 0.x
+    dependencies:
+      '@firebase/app': 0.7.27
+      '@firebase/component': 0.5.16
+      '@firebase/logger': 0.3.3
+      '@firebase/util': 1.6.2
+      '@firebase/webchannel-wrapper': 0.6.2
+      '@grpc/grpc-js': 1.6.7
+      '@grpc/proto-loader': 0.6.13
+      node-fetch: 2.6.7
+      tslib: 2.4.0
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
+  /@firebase/functions-compat/0.2.3_2whj6v3knk7rswcmdbn5bdkgna:
+    resolution: {integrity: sha512-we6a5a6HcCwLMXzITNWfvBxxIlCqcXCeUsomEb0Gyf1/ecVod8L3dcsWNTZB87OYjTSpVS+Jn+H+NpjOMvrlmA==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+    dependencies:
+      '@firebase/app-compat': 0.1.28
+      '@firebase/component': 0.5.16
+      '@firebase/functions': 0.8.3_m3w7qpgfrijausz7l34kldvbjq
+      '@firebase/functions-types': 0.5.0
+      '@firebase/util': 1.6.2
+      tslib: 2.4.0
+    transitivePeerDependencies:
+      - '@firebase/app'
+      - '@firebase/app-types'
+      - encoding
+    dev: true
+
+  /@firebase/functions-types/0.5.0:
+    resolution: {integrity: sha512-qza0M5EwX+Ocrl1cYI14zoipUX4gI/Shwqv0C1nB864INAD42Dgv4v94BCyxGHBg2kzlWy8PNafdP7zPO8aJQA==}
+    dev: true
+
+  /@firebase/functions/0.8.3_m3w7qpgfrijausz7l34kldvbjq:
+    resolution: {integrity: sha512-0mc59I97S61fvDiVhqj/k5GwSDM/mSWe+xgyxT1UWD3vocvZ5JOx0bhPwbpa7lStI6DWCiWhZrEQlp16Y7i1yg==}
+    peerDependencies:
+      '@firebase/app': 0.x
+    dependencies:
+      '@firebase/app': 0.7.27
+      '@firebase/app-check-interop-types': 0.1.0
+      '@firebase/auth-interop-types': 0.1.6_ee7bhenjigpuz3jknhp5542foa
+      '@firebase/component': 0.5.16
+      '@firebase/messaging-interop-types': 0.1.0
+      '@firebase/util': 1.6.2
+      node-fetch: 2.6.7
+      tslib: 2.4.0
+    transitivePeerDependencies:
+      - '@firebase/app-types'
+      - encoding
+    dev: true
+
+  /@firebase/installations/0.5.11_@firebase+app@0.7.27:
+    resolution: {integrity: sha512-54pTWQXYHBNlwUwtHDitr/N4dFOBi/LYoBlpbyIrjlqdkXSk0WOVDMV15cMdfCyCZQgJVMW78c52ZrDZxwW05g==}
+    peerDependencies:
+      '@firebase/app': 0.x
+    dependencies:
+      '@firebase/app': 0.7.27
+      '@firebase/component': 0.5.16
+      '@firebase/util': 1.6.2
+      idb: 7.0.1
+      tslib: 2.4.0
+    dev: true
+
+  /@firebase/logger/0.3.3:
+    resolution: {integrity: sha512-POTJl07jOKTOevLXrTvJD/VZ0M6PnJXflbAh5J9VGkmtXPXNG6MdZ9fmRgqYhXKTaDId6AQenQ262uwgpdtO0Q==}
+    dependencies:
+      tslib: 2.4.0
+    dev: true
+
+  /@firebase/messaging-compat/0.1.15_ikt45rtbctnl5l4y6p3bca5464:
+    resolution: {integrity: sha512-f9xbp/V4onNgg7tTC9rY/9gb5F3S+1m1YMU39GHATXcoO4qVCN429VFbVSWQ9RI7f85HddPsULWX7Moq+MwzNw==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+    dependencies:
+      '@firebase/app-compat': 0.1.28
+      '@firebase/component': 0.5.16
+      '@firebase/messaging': 0.9.15_@firebase+app@0.7.27
+      '@firebase/util': 1.6.2
+      tslib: 2.4.0
+    transitivePeerDependencies:
+      - '@firebase/app'
+    dev: true
+
+  /@firebase/messaging-interop-types/0.1.0:
+    resolution: {integrity: sha512-DbvUl/rXAZpQeKBnwz0NYY5OCqr2nFA0Bj28Fmr3NXGqR4PAkfTOHuQlVtLO1Nudo3q0HxAYLa68ZDAcuv2uKQ==}
+    dev: true
+
+  /@firebase/messaging/0.9.15_@firebase+app@0.7.27:
+    resolution: {integrity: sha512-UEMbjj3UdsHipdljrFMNyasYLPzEOLXRfaZdpV7StHuqa5r3M9jKRM16tcszNMWXVNuiXT4k0VPXXGZPtiYQDQ==}
+    peerDependencies:
+      '@firebase/app': 0.x
+    dependencies:
+      '@firebase/app': 0.7.27
+      '@firebase/component': 0.5.16
+      '@firebase/installations': 0.5.11_@firebase+app@0.7.27
+      '@firebase/messaging-interop-types': 0.1.0
+      '@firebase/util': 1.6.2
+      idb: 7.0.1
+      tslib: 2.4.0
+    dev: true
+
+  /@firebase/performance-compat/0.1.11_ikt45rtbctnl5l4y6p3bca5464:
+    resolution: {integrity: sha512-M1paA6KG4j5OGvgpvg25Y6x5/lUIpSJVL6fyq4af3YjFcLoSijqiBq/KTiFEt3vLJWiOmK2p9Apu3MHiffBi0A==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+    dependencies:
+      '@firebase/app-compat': 0.1.28
+      '@firebase/component': 0.5.16
+      '@firebase/logger': 0.3.3
+      '@firebase/performance': 0.5.11_@firebase+app@0.7.27
+      '@firebase/performance-types': 0.1.0
+      '@firebase/util': 1.6.2
+      tslib: 2.4.0
+    transitivePeerDependencies:
+      - '@firebase/app'
+    dev: true
+
+  /@firebase/performance-types/0.1.0:
+    resolution: {integrity: sha512-6p1HxrH0mpx+622Ql6fcxFxfkYSBpE3LSuwM7iTtYU2nw91Hj6THC8Bc8z4nboIq7WvgsT/kOTYVVZzCSlXl8w==}
+    dev: true
+
+  /@firebase/performance/0.5.11_@firebase+app@0.7.27:
+    resolution: {integrity: sha512-neHlHi1bs0LkNCZgzSWBm+YBqkaKFkxj+JtD4E4EQTENdHsAAAL4JnSKPOP1c+4CQqDnRbYW9QMXPcDlL21pow==}
+    peerDependencies:
+      '@firebase/app': 0.x
+    dependencies:
+      '@firebase/app': 0.7.27
+      '@firebase/component': 0.5.16
+      '@firebase/installations': 0.5.11_@firebase+app@0.7.27
+      '@firebase/logger': 0.3.3
+      '@firebase/util': 1.6.2
+      tslib: 2.4.0
+    dev: true
+
+  /@firebase/polyfill/0.3.36:
+    resolution: {integrity: sha512-zMM9oSJgY6cT2jx3Ce9LYqb0eIpDE52meIzd/oe/y70F+v9u1LDqk5kUF5mf16zovGBWMNFmgzlsh6Wj0OsFtg==}
+    dependencies:
+      core-js: 3.6.5
+      promise-polyfill: 8.1.3
+      whatwg-fetch: 2.0.4
+    dev: true
+
+  /@firebase/remote-config-compat/0.1.11_ikt45rtbctnl5l4y6p3bca5464:
+    resolution: {integrity: sha512-75mjt2M+MXa/j2J9wuRVrUFDekFoKkK5/ogBPxckvjzSXGDDwbGmrrb0MwG6BdUSxSUaHrAeUYhEQ2vwNfa1Gw==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+    dependencies:
+      '@firebase/app-compat': 0.1.28
+      '@firebase/component': 0.5.16
+      '@firebase/logger': 0.3.3
+      '@firebase/remote-config': 0.3.10_@firebase+app@0.7.27
+      '@firebase/remote-config-types': 0.2.0
+      '@firebase/util': 1.6.2
+      tslib: 2.4.0
+    transitivePeerDependencies:
+      - '@firebase/app'
+    dev: true
+
+  /@firebase/remote-config-types/0.2.0:
+    resolution: {integrity: sha512-hqK5sCPeZvcHQ1D6VjJZdW6EexLTXNMJfPdTwbD8NrXUw6UjWC4KWhLK/TSlL0QPsQtcKRkaaoP+9QCgKfMFPw==}
+    dev: true
+
+  /@firebase/remote-config/0.3.10_@firebase+app@0.7.27:
+    resolution: {integrity: sha512-n55NDxX9kt6QoDH0z3Ryjbjx/S6xNobfjK/hdMN/3fNZh0WSuAZKMWUiw/59cnbZkFxQBncOGDN5Cc/bdp3bdg==}
+    peerDependencies:
+      '@firebase/app': 0.x
+    dependencies:
+      '@firebase/app': 0.7.27
+      '@firebase/component': 0.5.16
+      '@firebase/installations': 0.5.11_@firebase+app@0.7.27
+      '@firebase/logger': 0.3.3
+      '@firebase/util': 1.6.2
+      tslib: 2.4.0
+    dev: true
+
+  /@firebase/storage-compat/0.1.16_2whj6v3knk7rswcmdbn5bdkgna:
+    resolution: {integrity: sha512-YSK0QHPCyyALBiJHvtlejrmtrQKst7aJiHyEm1VkcyLdm5RMcZ6JkdObOeACxa9/qwATYQLNlwy/C+//RuzyrA==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+    dependencies:
+      '@firebase/app-compat': 0.1.28
+      '@firebase/component': 0.5.16
+      '@firebase/storage': 0.9.8_@firebase+app@0.7.27
+      '@firebase/storage-types': 0.6.0_ee7bhenjigpuz3jknhp5542foa
+      '@firebase/util': 1.6.2
+      tslib: 2.4.0
+    transitivePeerDependencies:
+      - '@firebase/app'
+      - '@firebase/app-types'
+      - encoding
+    dev: true
+
+  /@firebase/storage-types/0.6.0_ee7bhenjigpuz3jknhp5542foa:
+    resolution: {integrity: sha512-1LpWhcCb1ftpkP/akhzjzeFxgVefs6eMD2QeKiJJUGH1qOiows2w5o0sKCUSQrvrRQS1lz3SFGvNR1Ck/gqxeA==}
+    peerDependencies:
+      '@firebase/app-types': 0.x
+      '@firebase/util': 1.x
+    dependencies:
+      '@firebase/app-types': 0.7.0
+      '@firebase/util': 1.6.2
+    dev: true
+
+  /@firebase/storage/0.9.8_@firebase+app@0.7.27:
+    resolution: {integrity: sha512-tfRDVjDjTDIBHm7CTFcboZ7UC+GUKkBIhmoHt2tTVyZfEDKtE4ZPnHy7i6RSeY624wM+/IGWn5o+1CCf3uEEGQ==}
+    peerDependencies:
+      '@firebase/app': 0.x
+    dependencies:
+      '@firebase/app': 0.7.27
+      '@firebase/component': 0.5.16
+      '@firebase/util': 1.6.2
+      node-fetch: 2.6.7
+      tslib: 2.4.0
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
+  /@firebase/util/1.6.2:
+    resolution: {integrity: sha512-VYDqEf/+mS7n0nPj6qJDJYFtKIEfOaTtQeNDsd3x+xp8HWvrbygWOexzeGicLP1dvEzrKr3eQGcJmmmYN3TIsA==}
+    dependencies:
+      tslib: 2.4.0
+    dev: true
+
+  /@firebase/webchannel-wrapper/0.6.2:
+    resolution: {integrity: sha512-zThUKcqIU6utWzM93uEvhlh8qj8A5LMPFJPvk/ODb+8GSSif19xM2Lw1M2ijyBy8+6skSkQBbavPzOU5Oh/8tQ==}
+    dev: true
+
+  /@floating-ui/core/0.7.3:
+    resolution: {integrity: sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==}
+    dev: false
+
+  /@floating-ui/dom/0.5.4:
+    resolution: {integrity: sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==}
+    dependencies:
+      '@floating-ui/core': 0.7.3
+    dev: false
+
+  /@grpc/grpc-js/1.6.7:
+    resolution: {integrity: sha512-eBM03pu9hd3VqDQG+kHahiG1x80RGkkqqRb1Pchcwqej/KkAH95gAvKs6laqaHCycYaPK+TKuNQnOz9UXYA8qw==}
+    engines: {node: ^8.13.0 || >=10.10.0}
+    dependencies:
+      '@grpc/proto-loader': 0.6.13
+      '@types/node': 18.0.1
+    dev: true
+
+  /@grpc/proto-loader/0.6.13:
+    resolution: {integrity: sha512-FjxPYDRTn6Ec3V0arm1FtSpmP6V50wuph2yILpyvTKzjc76oDdoihXqM1DzOW5ubvCC8GivfCnNtfaRE8myJ7g==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dependencies:
+      '@types/long': 4.0.2
+      lodash.camelcase: 4.3.0
+      long: 4.0.0
+      protobufjs: 6.11.3
+      yargs: 16.2.0
+    dev: true
+
+  /@headlessui/react/1.6.5_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-3VkKteDxlxf3fE0KbfO9t60KC1lM7YNpZggLpwzVNg1J/zwL+h+4N7MBlFDVpInZI3rKlZGpNx0PWsG/9c2vQg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^16 || ^17 || ^18
+      react-dom: ^16 || ^17 || ^18
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: true
+
+  /@heroicons/react/1.0.6_react@18.2.0:
+    resolution: {integrity: sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==}
+    peerDependencies:
+      react: '>= 16'
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      react: 18.2.0
+    dev: true
+
+  /@humanwhocodes/config-array/0.9.5:
+    resolution: {integrity: sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==}
+    engines: {node: '>=10.10.0'}
+    dependencies:
+      '@humanwhocodes/object-schema': 1.2.1
+      debug: 4.3.4
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@humanwhocodes/object-schema/1.2.1:
+    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
+    dev: true
+
+  /@istanbuljs/load-nyc-config/1.1.0:
+    resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      camelcase: 5.3.1
+      find-up: 4.1.0
+      get-package-type: 0.1.0
+      js-yaml: 3.14.1
+      resolve-from: 5.0.0
+    dev: true
+
+  /@istanbuljs/schema/0.1.3:
+    resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /@jest/console/27.5.1:
+    resolution: {integrity: sha512-kZ/tNpS3NXn0mlXXXPNuDZnb4c0oZ20r4K5eemM2k30ZC3G0T02nXUvyhf5YdbXWHPEJLc9qGLxEZ216MdL+Zg==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/types': 27.5.1
+      '@types/node': 18.0.1
+      chalk: 4.1.0
+      jest-message-util: 27.5.1
+      jest-util: 27.5.1
+      slash: 3.0.0
+    dev: true
+
+  /@jest/console/28.1.1:
+    resolution: {integrity: sha512-0RiUocPVFEm3WRMOStIHbRWllG6iW6E3/gUPnf4lkrVFyXIIDeCe+vlKeYyFOMhB2EPE6FLFCNADSOOQMaqvyA==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/types': 28.1.1
+      '@types/node': 18.0.1
+      chalk: 4.1.2
+      jest-message-util: 28.1.1
+      jest-util: 28.1.1
+      slash: 3.0.0
+    dev: true
+
+  /@jest/core/28.1.2_ts-node@10.8.2:
+    resolution: {integrity: sha512-Xo4E+Sb/nZODMGOPt2G3cMmCBqL4/W2Ijwr7/mrXlq4jdJwcFQ/9KrrJZT2adQRk2otVBXXOz1GRQ4Z5iOgvRQ==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+    dependencies:
+      '@jest/console': 28.1.1
+      '@jest/reporters': 28.1.2
+      '@jest/test-result': 28.1.1
+      '@jest/transform': 28.1.2
+      '@jest/types': 28.1.1
+      '@types/node': 18.0.1
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      ci-info: 3.3.2
+      exit: 0.1.2
+      graceful-fs: 4.2.10
+      jest-changed-files: 28.0.2
+      jest-config: 28.1.2_hxaxlvfys2pc3hefxwkmyo5cpq
+      jest-haste-map: 28.1.1
+      jest-message-util: 28.1.1
+      jest-regex-util: 28.0.2
+      jest-resolve: 28.1.1
+      jest-resolve-dependencies: 28.1.2
+      jest-runner: 28.1.2
+      jest-runtime: 28.1.2
+      jest-snapshot: 28.1.2
+      jest-util: 28.1.1
+      jest-validate: 28.1.1
+      jest-watcher: 28.1.1
+      micromatch: 4.0.5
+      pretty-format: 28.1.1
+      rimraf: 3.0.2
+      slash: 3.0.0
+      strip-ansi: 6.0.1
+    transitivePeerDependencies:
+      - supports-color
+      - ts-node
+    dev: true
+
+  /@jest/create-cache-key-function/27.5.1:
+    resolution: {integrity: sha512-dmH1yW+makpTSURTy8VzdUwFnfQh1G8R+DxO2Ho2FFmBbKFEVm+3jWdvFhE2VqB/LATCTokkP0dotjyQyw5/AQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/types': 27.5.1
+    dev: true
+
+  /@jest/environment/27.5.1:
+    resolution: {integrity: sha512-/WQjhPJe3/ghaol/4Bq480JKXV/Rfw8nQdN7f41fM8VDHLcxKXou6QyXAh3EFr9/bVG3x74z1NWDkP87EiY8gA==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/fake-timers': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/node': 18.0.1
+      jest-mock: 27.5.1
+    dev: true
+
+  /@jest/environment/28.1.2:
+    resolution: {integrity: sha512-I0CR1RUMmOzd0tRpz10oUfaChBWs+/Hrvn5xYhMEF/ZqrDaaeHwS8yDBqEWCrEnkH2g+WE/6g90oBv3nKpcm8Q==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/fake-timers': 28.1.2
+      '@jest/types': 28.1.1
+      '@types/node': 18.0.1
+      jest-mock: 28.1.1
+    dev: true
+
+  /@jest/expect-utils/28.1.1:
+    resolution: {integrity: sha512-n/ghlvdhCdMI/hTcnn4qV57kQuV9OTsZzH1TTCVARANKhl6hXJqLKUkwX69ftMGpsbpt96SsDD8n8LD2d9+FRw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      jest-get-type: 28.0.2
+    dev: true
+
+  /@jest/expect/28.1.2:
+    resolution: {integrity: sha512-HBzyZBeFBiOelNbBKN0pilWbbrGvwDUwAqMC46NVJmWm8AVkuE58NbG1s7DR4cxFt4U5cVLxofAoHxgvC5MyOw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      expect: 28.1.1
+      jest-snapshot: 28.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@jest/fake-timers/27.5.1:
+    resolution: {integrity: sha512-/aPowoolwa07k7/oM3aASneNeBGCmGQsc3ugN4u6s4C/+s5M64MFo/+djTdiwcbQlRfFElGuDXWzaWj6QgKObQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/types': 27.5.1
+      '@sinonjs/fake-timers': 8.1.0
+      '@types/node': 18.0.1
+      jest-message-util: 27.5.1
+      jest-mock: 27.5.1
+      jest-util: 27.5.1
+    dev: true
+
+  /@jest/fake-timers/28.1.2:
+    resolution: {integrity: sha512-xSYEI7Y0D5FbZN2LsCUj/EKRR1zfQYmGuAUVh6xTqhx7V5JhjgMcK5Pa0iR6WIk0GXiHDe0Ke4A+yERKE9saqg==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/types': 28.1.1
+      '@sinonjs/fake-timers': 9.1.2
+      '@types/node': 18.0.1
+      jest-message-util: 28.1.1
+      jest-mock: 28.1.1
+      jest-util: 28.1.1
+    dev: true
+
+  /@jest/globals/27.5.1:
+    resolution: {integrity: sha512-ZEJNB41OBQQgGzgyInAv0UUfDDj3upmHydjieSxFvTRuZElrx7tXg/uVQ5hYVEwiXs3+aMsAeEc9X7xiSKCm4Q==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/environment': 27.5.1
+      '@jest/types': 27.5.1
+      expect: 27.5.1
+    dev: true
+
+  /@jest/globals/28.1.2:
+    resolution: {integrity: sha512-cz0lkJVDOtDaYhvT3Fv2U1B6FtBnV+OpEyJCzTHM1fdoTsU4QNLAt/H4RkiwEUU+dL4g/MFsoTuHeT2pvbo4Hg==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/environment': 28.1.2
+      '@jest/expect': 28.1.2
+      '@jest/types': 28.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@jest/reporters/27.5.1:
+    resolution: {integrity: sha512-cPXh9hWIlVJMQkVk84aIvXuBB4uQQmFqZiacloFuGiP3ah1sbCxCosidXFDfqG8+6fO1oR2dTJTlsOy4VFmUfw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+    dependencies:
+      '@bcoe/v8-coverage': 0.2.3
+      '@jest/console': 27.5.1
+      '@jest/test-result': 27.5.1
+      '@jest/transform': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/node': 18.0.1
+      chalk: 4.1.0
+      collect-v8-coverage: 1.0.1
+      exit: 0.1.2
+      glob: 7.2.3
+      graceful-fs: 4.2.10
+      istanbul-lib-coverage: 3.2.0
+      istanbul-lib-instrument: 5.2.0
+      istanbul-lib-report: 3.0.0
+      istanbul-lib-source-maps: 4.0.1
+      istanbul-reports: 3.1.4
+      jest-haste-map: 27.5.1
+      jest-resolve: 27.5.1
+      jest-util: 27.5.1
+      jest-worker: 27.5.1
+      slash: 3.0.0
+      source-map: 0.6.1
+      string-length: 4.0.2
+      terminal-link: 2.1.1
+      v8-to-istanbul: 8.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@jest/reporters/28.1.2:
+    resolution: {integrity: sha512-/whGLhiwAqeCTmQEouSigUZJPVl7sW8V26EiboImL+UyXznnr1a03/YZ2BX8OlFw0n+Zlwu+EZAITZtaeRTxyA==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+    dependencies:
+      '@bcoe/v8-coverage': 0.2.3
+      '@jest/console': 28.1.1
+      '@jest/test-result': 28.1.1
+      '@jest/transform': 28.1.2
+      '@jest/types': 28.1.1
+      '@jridgewell/trace-mapping': 0.3.14
+      '@types/node': 18.0.1
+      chalk: 4.1.2
+      collect-v8-coverage: 1.0.1
+      exit: 0.1.2
+      glob: 7.2.3
+      graceful-fs: 4.2.10
+      istanbul-lib-coverage: 3.2.0
+      istanbul-lib-instrument: 5.2.0
+      istanbul-lib-report: 3.0.0
+      istanbul-lib-source-maps: 4.0.1
+      istanbul-reports: 3.1.4
+      jest-message-util: 28.1.1
+      jest-util: 28.1.1
+      jest-worker: 28.1.1
+      slash: 3.0.0
+      string-length: 4.0.2
+      strip-ansi: 6.0.1
+      terminal-link: 2.1.1
+      v8-to-istanbul: 9.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@jest/schemas/28.0.2:
+    resolution: {integrity: sha512-YVDJZjd4izeTDkij00vHHAymNXQ6WWsdChFRK86qck6Jpr3DCL5W3Is3vslviRlP+bLuMYRLbdp98amMvqudhA==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@sinclair/typebox': 0.23.5
+    dev: true
+
+  /@jest/source-map/27.5.1:
+    resolution: {integrity: sha512-y9NIHUYF3PJRlHk98NdC/N1gl88BL08aQQgu4k4ZopQkCw9t9cV8mtl3TV8b/YCB8XaVTFrmUTAJvjsntDireg==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      callsites: 3.1.0
+      graceful-fs: 4.2.10
+      source-map: 0.6.1
+    dev: true
+
+  /@jest/source-map/28.1.2:
+    resolution: {integrity: sha512-cV8Lx3BeStJb8ipPHnqVw/IM2VCMWO3crWZzYodSIkxXnRcXJipCdx1JCK0K5MsJJouZQTH73mzf4vgxRaH9ww==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.14
+      callsites: 3.1.0
+      graceful-fs: 4.2.10
+    dev: true
+
+  /@jest/test-result/27.5.1:
+    resolution: {integrity: sha512-EW35l2RYFUcUQxFJz5Cv5MTOxlJIQs4I7gxzi2zVU7PJhOwfYq1MdC5nhSmYjX1gmMmLPvB3sIaC+BkcHRBfag==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/console': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/istanbul-lib-coverage': 2.0.4
+      collect-v8-coverage: 1.0.1
+    dev: true
+
+  /@jest/test-result/28.1.1:
+    resolution: {integrity: sha512-hPmkugBktqL6rRzwWAtp1JtYT4VHwv8OQ+9lE5Gymj6dHzubI/oJHMUpPOt8NrdVWSrz9S7bHjJUmv2ggFoUNQ==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/console': 28.1.1
+      '@jest/types': 28.1.1
+      '@types/istanbul-lib-coverage': 2.0.4
+      collect-v8-coverage: 1.0.1
+    dev: true
+
+  /@jest/test-sequencer/27.5.1:
+    resolution: {integrity: sha512-LCheJF7WB2+9JuCS7VB/EmGIdQuhtqjRNI9A43idHv3E4KltCTsPsLxvdaubFHSYwY/fNjMWjl6vNRhDiN7vpQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/test-result': 27.5.1
+      graceful-fs: 4.2.10
+      jest-haste-map: 27.5.1
+      jest-runtime: 27.5.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@jest/test-sequencer/28.1.1:
+    resolution: {integrity: sha512-nuL+dNSVMcWB7OOtgb0EGH5AjO4UBCt68SLP08rwmC+iRhyuJWS9MtZ/MpipxFwKAlHFftbMsydXqWre8B0+XA==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/test-result': 28.1.1
+      graceful-fs: 4.2.10
+      jest-haste-map: 28.1.1
+      slash: 3.0.0
+    dev: true
+
+  /@jest/transform/27.5.1:
+    resolution: {integrity: sha512-ipON6WtYgl/1329g5AIJVbUuEh0wZVbdpGwC99Jw4LwuoBNS95MVphU6zOeD9pDkon+LLbFL7lOQRapbB8SCHw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@babel/core': 7.18.6
+      '@jest/types': 27.5.1
+      babel-plugin-istanbul: 6.1.1
+      chalk: 4.1.0
+      convert-source-map: 1.8.0
+      fast-json-stable-stringify: 2.1.0
+      graceful-fs: 4.2.10
+      jest-haste-map: 27.5.1
+      jest-regex-util: 27.5.1
+      jest-util: 27.5.1
+      micromatch: 4.0.5
+      pirates: 4.0.5
+      slash: 3.0.0
+      source-map: 0.6.1
+      write-file-atomic: 3.0.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@jest/transform/28.1.2:
+    resolution: {integrity: sha512-3o+lKF6iweLeJFHBlMJysdaPbpoMmtbHEFsjzSv37HIq/wWt5ijTeO2Yf7MO5yyczCopD507cNwNLeX8Y/CuIg==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@babel/core': 7.18.6
+      '@jest/types': 28.1.1
+      '@jridgewell/trace-mapping': 0.3.14
+      babel-plugin-istanbul: 6.1.1
+      chalk: 4.1.2
+      convert-source-map: 1.8.0
+      fast-json-stable-stringify: 2.1.0
+      graceful-fs: 4.2.10
+      jest-haste-map: 28.1.1
+      jest-regex-util: 28.0.2
+      jest-util: 28.1.1
+      micromatch: 4.0.5
+      pirates: 4.0.5
+      slash: 3.0.0
+      write-file-atomic: 4.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@jest/types/27.5.1:
+    resolution: {integrity: sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@types/istanbul-lib-coverage': 2.0.4
+      '@types/istanbul-reports': 3.0.1
+      '@types/node': 18.0.1
+      '@types/yargs': 16.0.4
+      chalk: 4.1.2
+    dev: true
+
+  /@jest/types/28.1.1:
+    resolution: {integrity: sha512-vRXVqSg1VhDnB8bWcmvLzmg0Bt9CRKVgHPXqYwvWMX3TvAjeO+nRuK6+VdTKCtWOvYlmkF/HqNAL/z+N3B53Kw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/schemas': 28.0.2
+      '@types/istanbul-lib-coverage': 2.0.4
+      '@types/istanbul-reports': 3.0.1
+      '@types/node': 18.0.1
+      '@types/yargs': 17.0.10
+      chalk: 4.1.2
+    dev: true
+
+  /@jridgewell/gen-mapping/0.1.1:
+    resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.1.2
+      '@jridgewell/sourcemap-codec': 1.4.14
+
+  /@jridgewell/gen-mapping/0.3.2:
+    resolution: {integrity: sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.1.2
+      '@jridgewell/sourcemap-codec': 1.4.14
+      '@jridgewell/trace-mapping': 0.3.14
+
+  /@jridgewell/resolve-uri/3.0.8:
+    resolution: {integrity: sha512-YK5G9LaddzGbcucK4c8h5tWFmMPBvRZ/uyWmN1/SbBdIvqGUdWGkJ5BAaccgs6XbzVLsqbPJrBSFwKv3kT9i7w==}
+    engines: {node: '>=6.0.0'}
+
+  /@jridgewell/set-array/1.1.2:
+    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
+    engines: {node: '>=6.0.0'}
+
+  /@jridgewell/source-map/0.3.2:
+    resolution: {integrity: sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.2
+      '@jridgewell/trace-mapping': 0.3.14
+
+  /@jridgewell/sourcemap-codec/1.4.14:
+    resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
+
+  /@jridgewell/trace-mapping/0.3.14:
+    resolution: {integrity: sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.0.8
+      '@jridgewell/sourcemap-codec': 1.4.14
+
+  /@jridgewell/trace-mapping/0.3.9:
+    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.0.8
+      '@jridgewell/sourcemap-codec': 1.4.14
+    dev: true
+
+  /@leichtgewicht/ip-codec/2.0.4:
+    resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==}
+    dev: true
+
+  /@lezer/common/1.0.0:
+    resolution: {integrity: sha512-ohydQe+Hb+w4oMDvXzs8uuJd2NoA3D8YDcLiuDsLqH+yflDTPEpgCsWI3/6rH5C3BAedtH1/R51dxENldQceEA==}
+    dev: false
+
+  /@lezer/cpp/1.0.0:
+    resolution: {integrity: sha512-Klk3/AIEKoptmm6cNm7xTulNXjdTKkD+hVOEcz/NeRg8tIestP5hsGHJeFDR/XtyDTxsjoPjKZRIGohht7zbKw==}
+    dependencies:
+      '@lezer/highlight': 1.0.0
+      '@lezer/lr': 1.2.0
+    dev: false
+
+  /@lezer/css/1.0.0:
+    resolution: {integrity: sha512-616VqgDKumHmYIuxs3tnX1irEQmoDHgF/TlP4O5ICWwyHwLMErq+8iKVuzTkOdBqvYAVmObqThcDEAaaMJjAdg==}
+    dependencies:
+      '@lezer/highlight': 1.0.0
+      '@lezer/lr': 1.2.0
+    dev: false
+
+  /@lezer/highlight/1.0.0:
+    resolution: {integrity: sha512-nsCnNtim90UKsB5YxoX65v3GEIw3iCHw9RM2DtdgkiqAbKh9pCdvi8AWNwkYf10Lu6fxNhXPpkpHbW6mihhvJA==}
+    dependencies:
+      '@lezer/common': 1.0.0
+    dev: false
+
+  /@lezer/html/1.0.0:
+    resolution: {integrity: sha512-wZHBcieArLTxEi198hqRBBHMySzDKo5suWaESdUw0t44IXp01vkSRwX2brG1qBbKdwJ+C6U0iMl00vWNiyAROg==}
+    dependencies:
+      '@lezer/highlight': 1.0.0
+      '@lezer/lr': 1.2.0
+    dev: false
+
+  /@lezer/java/1.0.0:
+    resolution: {integrity: sha512-z2EA0JHq2WoiKfQy5uOOd4t17PJtq8guh58gPkSzOnNcQ7DNbkrU+Axak+jL8+Noinwyz2tRNOseQFj+Tg+P0A==}
+    dependencies:
+      '@lezer/highlight': 1.0.0
+      '@lezer/lr': 1.2.0
+    dev: false
+
+  /@lezer/javascript/1.0.1:
+    resolution: {integrity: sha512-t7fpf3+gi/jiAtW+Gv734TbKdpPg6b8qATH01/jprW9H2oR++Tb688IHwJvZbk9F4GjpCEv86beuHMpUyC1b5g==}
+    dependencies:
+      '@lezer/highlight': 1.0.0
+      '@lezer/lr': 1.2.0
+    dev: false
+
+  /@lezer/json/1.0.0:
+    resolution: {integrity: sha512-zbAuUY09RBzCoCA3lJ1+ypKw5WSNvLqGMtasdW6HvVOqZoCpPr8eWrsGnOVWGKGn8Rh21FnrKRVlJXrGAVUqRw==}
+    dependencies:
+      '@lezer/highlight': 1.0.0
+      '@lezer/lr': 1.2.0
+    dev: false
+
+  /@lezer/lezer/1.1.0:
+    resolution: {integrity: sha512-XTomM3C2MzHNuZwjYbyYZ44IRV6rHIOvi++yAD1O4djlDoKAnikx3BFoREK2g/z8zUIc/kyWuZO9W9xN4/OR1g==}
+    dependencies:
+      '@lezer/highlight': 1.0.0
+      '@lezer/lr': 1.2.0
+    dev: false
+
+  /@lezer/lr/1.2.0:
+    resolution: {integrity: sha512-TgEpfm9br2SX8JwtwKT8HsQZKuFkLRg6g+IRxObk9nVKQLKnkP3oMh+QGcTBL9GQsfQ2ADtKPbj2iGSMf3ytiA==}
+    dependencies:
+      '@lezer/common': 1.0.0
+    dev: false
+
+  /@lezer/markdown/1.0.1:
+    resolution: {integrity: sha512-LlpNWLqes3XQvd8TwpJTHf9ENl4fI6H32xQkMgltUITFMMdQpOASXQtDawWR03yS6hskh4bkhATQbgjdGMoUvA==}
+    dependencies:
+      '@lezer/common': 1.0.0
+      '@lezer/highlight': 1.0.0
+    dev: false
+
+  /@lezer/php/1.0.0:
+    resolution: {integrity: sha512-kFQu/mk/vmjpA+fjQU87d9eimqKJ9PFCa8CZCPFWGEwNnm7Ahpw32N+HYEU/YAQ0XcfmOAnW/YJCEa8WpUOMMw==}
+    dependencies:
+      '@lezer/highlight': 1.0.0
+      '@lezer/lr': 1.2.0
+    dev: false
+
+  /@lezer/python/1.0.0:
+    resolution: {integrity: sha512-UQtDPmNhXxQZ7/Uoh8mR6sckrFzeyrjCkTIy7WQY8Sjdfi8wmr49iPbgsThy1Jy0DDBTnqZRULDngXNJ5AWVqg==}
+    dependencies:
+      '@lezer/highlight': 1.0.0
+      '@lezer/lr': 1.2.0
+    dev: false
+
+  /@lezer/rust/1.0.0:
+    resolution: {integrity: sha512-IpGAxIjNxYmX9ra6GfQTSPegdCAWNeq23WNmrsMMQI7YNSvKtYxO4TX5rgZUmbhEucWn0KTBMeDEPXg99YKtTA==}
+    dependencies:
+      '@lezer/highlight': 1.0.0
+      '@lezer/lr': 1.2.0
+    dev: false
+
+  /@lezer/xml/1.0.0:
+    resolution: {integrity: sha512-73iI9UK8iqSvWtLlOEl/g+50ivwQn8Ge6foHVN66AXUS1RccFnAoc7BYU8b3c8/rP6dfCOGqAGaWLxBzhj60MA==}
+    dependencies:
+      '@lezer/highlight': 1.0.0
+      '@lezer/lr': 1.2.0
+    dev: false
+
+  /@mui/base/5.0.0-alpha.88:
+    resolution: {integrity: sha512-uL7ej2F/3GUnZewsDQSHUVHoSBT3AQcTIdfdy6QeCHy7X26mtbcIvTRcjl2PzbbNQplppavSTibPiQG/giJ+ng==}
+    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.1.3
+      '@mui/types': 7.1.4
+      '@mui/utils': 5.8.6
+      '@popperjs/core': 2.11.5
+      clsx: 1.2.0
+      prop-types: 15.8.1
+      react-is: 17.0.2
+    dev: false
+
+  /@mui/base/5.0.0-alpha.88_twyhzqqpkwvvgrmyeapdo6i4my:
+    resolution: {integrity: sha512-uL7ej2F/3GUnZewsDQSHUVHoSBT3AQcTIdfdy6QeCHy7X26mtbcIvTRcjl2PzbbNQplppavSTibPiQG/giJ+ng==}
+    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.1.3
+      '@mui/types': 7.1.4_@types+react@18.0.14
+      '@mui/utils': 5.8.6_react@18.2.0
+      '@popperjs/core': 2.11.5
+      '@types/react': 18.0.14
+      clsx: 1.2.0
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-is: 17.0.2
+    dev: false
+
+  /@mui/icons-material/5.8.4:
+    resolution: {integrity: sha512-9Z/vyj2szvEhGWDvb+gG875bOGm8b8rlHBKOD1+nA3PcgC3fV6W1AU6pfOorPeBfH2X4mb9Boe97vHvaSndQvA==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@mui/material': ^5.0.0
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@mui/material':
+        optional: true
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+    dev: false
+
+  /@mui/icons-material/5.8.4_@mui+material@5.8.7:
+    resolution: {integrity: sha512-9Z/vyj2szvEhGWDvb+gG875bOGm8b8rlHBKOD1+nA3PcgC3fV6W1AU6pfOorPeBfH2X4mb9Boe97vHvaSndQvA==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@mui/material': ^5.0.0
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@mui/material':
+        optional: true
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      '@mui/material': 5.8.7_d6menda4vqwq6peqnkbe7mkj4i
+    dev: false
+
+  /@mui/icons-material/5.8.4_vdnh4jyrnjwcar5vg6k35n5t6e:
+    resolution: {integrity: sha512-9Z/vyj2szvEhGWDvb+gG875bOGm8b8rlHBKOD1+nA3PcgC3fV6W1AU6pfOorPeBfH2X4mb9Boe97vHvaSndQvA==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@mui/material': ^5.0.0
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@mui/material':
+        optional: true
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      '@mui/material': 5.8.7_h2u6a3oivtyocvjxeke7xcvlfa
+      '@types/react': 18.0.14
+      react: 18.2.0
+    dev: false
+
+  /@mui/material/5.8.7_d6menda4vqwq6peqnkbe7mkj4i:
+    resolution: {integrity: sha512-Oo62UhrgEi+BMLr3nUEASJgScE2/hhq14CbBUmrVV3GQlEGtqMZsy26Vb0AqEmphFeN3TXlsbM9aeW5yq8ZFlw==}
+    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.9.3
+      '@emotion/styled': 11.9.3_@emotion+react@11.9.3
+      '@mui/base': 5.0.0-alpha.88
+      '@mui/system': 5.8.7_d6menda4vqwq6peqnkbe7mkj4i
+      '@mui/types': 7.1.4
+      '@mui/utils': 5.8.6
+      '@types/react-transition-group': 4.4.5
+      clsx: 1.2.0
+      csstype: 3.1.0
+      prop-types: 15.8.1
+      react-is: 17.0.2
+      react-transition-group: 4.4.2
+    dev: false
+
+  /@mui/material/5.8.7_h2u6a3oivtyocvjxeke7xcvlfa:
+    resolution: {integrity: sha512-Oo62UhrgEi+BMLr3nUEASJgScE2/hhq14CbBUmrVV3GQlEGtqMZsy26Vb0AqEmphFeN3TXlsbM9aeW5yq8ZFlw==}
+    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.9.3_4jaruczdv2uxjj3lb2xbkiuci4
+      '@emotion/styled': 11.9.3_toiz7tndcw4z2b7gxmmeo5fkcu
+      '@mui/base': 5.0.0-alpha.88_twyhzqqpkwvvgrmyeapdo6i4my
+      '@mui/system': 5.8.7_2n63gx4a5hafw7crejwh35wbou
+      '@mui/types': 7.1.4_@types+react@18.0.14
+      '@mui/utils': 5.8.6_react@18.2.0
+      '@types/react': 18.0.14
+      '@types/react-transition-group': 4.4.5
+      clsx: 1.2.0
+      csstype: 3.1.0
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-is: 17.0.2
+      react-transition-group: 4.4.2_biqbaboplfbrettd7655fr4n2y
+    dev: false
+
+  /@mui/private-theming/5.8.6:
+    resolution: {integrity: sha512-yHsJk1qU9r/q0DlnxGRJPHyM0Y/nUv8FTNgDTiI9I58GWuVuZqeTUr7JRvPh6ybeP/FLtW5eXEavRK9wxVk4uQ==}
+    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.8.6
+      prop-types: 15.8.1
+    dev: false
+
+  /@mui/private-theming/5.8.6_luyos4mouogwq6z3wafb3re4ce:
+    resolution: {integrity: sha512-yHsJk1qU9r/q0DlnxGRJPHyM0Y/nUv8FTNgDTiI9I58GWuVuZqeTUr7JRvPh6ybeP/FLtW5eXEavRK9wxVk4uQ==}
+    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.8.6_react@18.2.0
+      '@types/react': 18.0.14
+      prop-types: 15.8.1
+      react: 18.2.0
+    dev: false
+
+  /@mui/styled-engine/5.8.7_d6menda4vqwq6peqnkbe7mkj4i:
+    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.9.3_@babel+core@7.18.6
+      '@emotion/styled': 11.9.3_dc5dh2wp562rsjxvguwi2i3yzq
+      csstype: 3.1.0
+      prop-types: 15.8.1
+    dev: false
+
+  /@mui/styled-engine/5.8.7_fdnqutfacy7v3gmlcm66flps3q:
+    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.9.3_4jaruczdv2uxjj3lb2xbkiuci4
+      '@emotion/styled': 11.9.3_toiz7tndcw4z2b7gxmmeo5fkcu
+      csstype: 3.1.0
+      prop-types: 15.8.1
+      react: 18.2.0
+    dev: false
+
+  /@mui/system/5.8.7_2n63gx4a5hafw7crejwh35wbou:
+    resolution: {integrity: sha512-yFoFbfO42FWeSUDrFPixYjpqySQMqVMOSbSlAxiKnwFpvXGGn/bkfQTboCRNO31fvES29FJLQd4mwwMHd5mXng==}
+    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_4jaruczdv2uxjj3lb2xbkiuci4
+      '@emotion/styled': 11.9.3_toiz7tndcw4z2b7gxmmeo5fkcu
+      '@mui/private-theming': 5.8.6_luyos4mouogwq6z3wafb3re4ce
+      '@mui/styled-engine': 5.8.7_fdnqutfacy7v3gmlcm66flps3q
+      '@mui/types': 7.1.4_@types+react@18.0.14
+      '@mui/utils': 5.8.6_react@18.2.0
+      '@types/react': 18.0.14
+      clsx: 1.2.0
+      csstype: 3.1.0
+      prop-types: 15.8.1
+      react: 18.2.0
+    dev: false
+
+  /@mui/system/5.8.7_d6menda4vqwq6peqnkbe7mkj4i:
+    resolution: {integrity: sha512-yFoFbfO42FWeSUDrFPixYjpqySQMqVMOSbSlAxiKnwFpvXGGn/bkfQTboCRNO31fvES29FJLQd4mwwMHd5mXng==}
+    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.8.6
+      '@mui/styled-engine': 5.8.7_d6menda4vqwq6peqnkbe7mkj4i
+      '@mui/types': 7.1.4
+      '@mui/utils': 5.8.6
+      clsx: 1.2.0
+      csstype: 3.1.0
+      prop-types: 15.8.1
+    dev: false
+
+  /@mui/types/7.1.4:
+    resolution: {integrity: sha512-uveM3byMbthO+6tXZ1n2zm0W3uJCQYtwt/v5zV5I77v2v18u0ITkb8xwhsDD2i3V2Kye7SaNR6FFJ6lMuY/WqQ==}
+    peerDependencies:
+      '@types/react': '*'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dev: false
+
+  /@mui/types/7.1.4_@types+react@18.0.14:
+    resolution: {integrity: sha512-uveM3byMbthO+6tXZ1n2zm0W3uJCQYtwt/v5zV5I77v2v18u0ITkb8xwhsDD2i3V2Kye7SaNR6FFJ6lMuY/WqQ==}
+    peerDependencies:
+      '@types/react': '*'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.0.14
+    dev: false
+
+  /@mui/utils/5.8.6:
+    resolution: {integrity: sha512-QM2Sd1xZo2jOt2Vz5Rmro+pi2FLJyiv4+OjxkUwXR3oUM65KSMAMLl/KNYU55s3W3DLRFP5MVwE4FhAbHseHAg==}
+    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: 17.0.2
+    dev: false
+
+  /@mui/utils/5.8.6_react@18.2.0:
+    resolution: {integrity: sha512-QM2Sd1xZo2jOt2Vz5Rmro+pi2FLJyiv4+OjxkUwXR3oUM65KSMAMLl/KNYU55s3W3DLRFP5MVwE4FhAbHseHAg==}
+    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: 18.2.0
+      react-is: 17.0.2
+    dev: false
+
+  /@mui/x-data-grid/5.12.3_lc5g5arqxncq7hlh6olwtqg42u:
+    resolution: {integrity: sha512-57A2MkRR/uUNC/dECFV0YDJvi1Q+gQgmgw1OHmZ1uSnKh29PcHpswkdapO0LueLpxAy8tfH+fTtnnPDmYgJeUg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@mui/material': ^5.4.1
+      '@mui/system': ^5.4.1
+      react: ^17.0.2 || ^18.0.0
+      react-dom: ^17.0.2 || ^18.0.0
+    peerDependenciesMeta:
+      '@mui/material':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      '@mui/material': 5.8.7_d6menda4vqwq6peqnkbe7mkj4i
+      '@mui/system': 5.8.7_d6menda4vqwq6peqnkbe7mkj4i
+      '@mui/utils': 5.8.6
+      clsx: 1.2.0
+      prop-types: 15.8.1
+      reselect: 4.1.6
+    dev: false
+
+  /@mui/x-date-pickers-pro/5.0.0-alpha.7_3ze6eywwrphmf4xmeajh7ll6xm:
+    resolution: {integrity: sha512-Ni244FQNYmiPCGUS47E9FE5YYSTJZ4BxjUmQ8h2Mz0Ob+n+q2zXN+q2KzRjtuhBcH3w+VGjFD1zxvKxyAZkgbg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@mui/material': ^5.4.1
+      '@mui/system': ^5.4.1
+      date-fns: ^2.25.0
+      dayjs: ^1.10.7
+      luxon: ^1.28.0 || ^2.0.0
+      moment: ^2.29.1
+      react: ^17.0.2 || ^18.0.0
+    peerDependenciesMeta:
+      '@mui/material':
+        optional: true
+      date-fns:
+        optional: true
+      dayjs:
+        optional: true
+      luxon:
+        optional: true
+      moment:
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      '@date-io/date-fns': 2.14.0_date-fns@2.28.0
+      '@date-io/dayjs': 2.14.0
+      '@date-io/luxon': 2.14.0
+      '@date-io/moment': 2.14.0
+      '@mui/material': 5.8.7_d6menda4vqwq6peqnkbe7mkj4i
+      '@mui/system': 5.8.7_d6menda4vqwq6peqnkbe7mkj4i
+      '@mui/utils': 5.8.6
+      '@mui/x-date-pickers': 5.0.0-alpha.7_3ze6eywwrphmf4xmeajh7ll6xm
+      '@mui/x-license-pro': 5.12.1
+      clsx: 1.2.0
+      date-fns: 2.28.0
+      prop-types: 15.8.1
+      react-transition-group: 4.4.2
+      rifm: 0.12.1
+    transitivePeerDependencies:
+      - '@emotion/react'
+      - '@emotion/styled'
+      - react-dom
+    dev: false
+
+  /@mui/x-date-pickers/5.0.0-alpha.7_3ze6eywwrphmf4xmeajh7ll6xm:
+    resolution: {integrity: sha512-y+RAkuC9riyoPD8mt2/Y9nV3+MxwCYfUOh2o09nFVnIKUSud37hhOMiX8BzAbQRO/2JoRByN5jEj2zuWPW2zuw==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.9.0
+      '@emotion/styled': ^11.8.1
+      '@mui/material': ^5.4.1
+      '@mui/system': ^5.4.1
+      date-fns: ^2.25.0
+      dayjs: ^1.10.7
+      luxon: ^1.28.0 || ^2.0.0
+      moment: ^2.29.1
+      react: ^17.0.2 || ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+      '@mui/material':
+        optional: true
+      date-fns:
+        optional: true
+      dayjs:
+        optional: true
+      luxon:
+        optional: true
+      moment:
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      '@date-io/date-fns': 2.14.0_date-fns@2.28.0
+      '@date-io/dayjs': 2.14.0
+      '@date-io/luxon': 2.14.0
+      '@date-io/moment': 2.14.0
+      '@emotion/react': 11.9.3
+      '@emotion/styled': 11.9.3_@emotion+react@11.9.3
+      '@mui/material': 5.8.7_d6menda4vqwq6peqnkbe7mkj4i
+      '@mui/system': 5.8.7_d6menda4vqwq6peqnkbe7mkj4i
+      '@mui/utils': 5.8.6
+      clsx: 1.2.0
+      date-fns: 2.28.0
+      prop-types: 15.8.1
+      react-transition-group: 4.4.2
+      rifm: 0.12.1
+    transitivePeerDependencies:
+      - react-dom
+    dev: false
+
+  /@mui/x-license-pro/5.12.1:
+    resolution: {integrity: sha512-loiYFPr709tvWpIDLkDuNwsRoGVAkW1MlKDiurPlQaizVaS4w9YGw+oSHro7DTkXehuhkF2g2QTKorynazDu/Q==}
+    engines: {node: '>=12.0.0'}
+    hasBin: true
+    peerDependencies:
+      react: ^17.0.2 || ^18.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      '@mui/utils': 5.8.6
+      esm: 3.2.25
+      yargs: 17.5.1
+    dev: false
+
+  /@nestjs/schematics/8.0.11_typescript@4.7.4:
+    resolution: {integrity: sha512-W/WzaxgH5aE01AiIErE9QrQJ73VR/M/8p8pq0LZmjmNcjZqU5kQyOWUxZg13WYfSpJdOa62t6TZRtFDmgZPoIg==}
+    peerDependencies:
+      typescript: ^3.4.5 || ^4.3.5
+    dependencies:
+      '@angular-devkit/core': 13.3.5
+      '@angular-devkit/schematics': 13.3.5
+      fs-extra: 10.1.0
+      jsonc-parser: 3.0.0
+      pluralize: 8.0.0
+      typescript: 4.7.4
+    transitivePeerDependencies:
+      - chokidar
+    dev: true
+
+  /@next/env/12.2.0:
+    resolution: {integrity: sha512-/FCkDpL/8SodJEXvx/DYNlOD5ijTtkozf4PPulYPtkPOJaMPpBSOkzmsta4fnrnbdH6eZjbwbiXFdr6gSQCV4w==}
+
+  /@next/eslint-plugin-next/12.2.0:
+    resolution: {integrity: sha512-nIj5xV/z3dOfeBnE7qFAjUQZAi4pTlIMuusRM6s/T6lOz8x7mjY5s1ZkTUBmcjPVCb2VIv3CrMH0WZL6xfjZZg==}
+    dependencies:
+      glob: 7.1.7
+    dev: true
+
+  /@next/swc-android-arm-eabi/12.2.0:
+    resolution: {integrity: sha512-hbneH8DNRB2x0Nf5fPCYoL8a0osvdTCe4pvOc9Rv5CpDsoOlf8BWBs2OWpeP0U2BktGvIsuUhmISmdYYGyrvTw==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    optional: true
+
+  /@next/swc-android-arm64/12.2.0:
+    resolution: {integrity: sha512-1eEk91JHjczcJomxJ8X0XaUeNcp5Lx1U2Ic7j15ouJ83oRX+3GIslOuabW2oPkSgXbHkThMClhirKpvG98kwZg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    optional: true
+
+  /@next/swc-darwin-arm64/12.2.0:
+    resolution: {integrity: sha512-x5U5gJd7ZvrEtTFnBld9O2bUlX8opu7mIQUqRzj7KeWzBwPhrIzTTsQXAiNqsaMuaRPvyHBVW/5d/6g6+89Y8g==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
+  /@next/swc-darwin-x64/12.2.0:
+    resolution: {integrity: sha512-iwMNFsrAPjfedjKDv9AXPAV16PWIomP3qw/FfPaxkDVRbUls7BNdofBLzkQmqxqWh93WrawLwaqyXpJuAaiwJA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
+  /@next/swc-freebsd-x64/12.2.0:
+    resolution: {integrity: sha512-gRiAw8g3Akf6niTDLEm1Emfa7jXDjvaAj/crDO8hKASKA4Y1fS4kbi/tyWw5VtoFI4mUzRmCPmZ8eL0tBSG58A==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    optional: true
+
+  /@next/swc-linux-arm-gnueabihf/12.2.0:
+    resolution: {integrity: sha512-/TJZkxaIpeEwnXh6A40trgwd40C5+LJroLUOEQwMOJdavLl62PjCA6dGl1pgooWLCIb5YdBQ0EG4ylzvLwS2+Q==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@next/swc-linux-arm64-gnu/12.2.0:
+    resolution: {integrity: sha512-++WAB4ElXCSOKG9H8r4ENF8EaV+w0QkrpjehmryFkQXmt5juVXz+nKDVlCRMwJU7A1O0Mie82XyEoOrf6Np1pA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@next/swc-linux-arm64-musl/12.2.0:
+    resolution: {integrity: sha512-XrqkHi/VglEn5zs2CYK6ofJGQySrd+Lr4YdmfJ7IhsCnMKkQY1ma9Hv5THwhZVof3e+6oFHrQ9bWrw9K4WTjFA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@next/swc-linux-x64-gnu/12.2.0:
+    resolution: {integrity: sha512-MyhHbAKVjpn065WzRbqpLu2krj4kHLi6RITQdD1ee+uxq9r2yg5Qe02l24NxKW+1/lkmpusl4Y5Lks7rBiJn4w==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@next/swc-linux-x64-musl/12.2.0:
+    resolution: {integrity: sha512-Tz1tJZ5egE0S/UqCd5V6ZPJsdSzv/8aa7FkwFmIJ9neLS8/00za+OY5pq470iZQbPrkTwpKzmfTTIPRVD5iqDg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@next/swc-win32-arm64-msvc/12.2.0:
+    resolution: {integrity: sha512-0iRO/CPMCdCYUzuH6wXLnsfJX1ykBX4emOOvH0qIgtiZM0nVYbF8lkEyY2ph4XcsurpinS+ziWuYCXVqrOSqiw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    optional: true
+
+  /@next/swc-win32-ia32-msvc/12.2.0:
+    resolution: {integrity: sha512-8A26RJVcJHwIKm8xo/qk2ePRquJ6WCI2keV2qOW/Qm+ZXrPXHMIWPYABae/nKN243YFBNyPiHytjX37VrcpUhg==}
+    engines: {node: '>= 10'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    optional: true
+
+  /@next/swc-win32-x64-msvc/12.2.0:
+    resolution: {integrity: sha512-OI14ozFLThEV3ey6jE47zrzSTV/6eIMsvbwozo+XfdWqOPwQ7X00YkRx4GVMKMC0rM44oGS2gmwMKYpe4EblnA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    optional: true
+
+  /@nodelib/fs.scandir/2.1.5:
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+    dev: true
+
+  /@nodelib/fs.stat/2.0.5:
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+    dev: true
+
+  /@nodelib/fs.walk/1.2.8:
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.13.0
+    dev: true
+
+  /@nrwl/cli/14.4.2:
+    resolution: {integrity: sha512-JNV4kP9goZD4BlTQGKdKhCRc1bhiWYp1TaDJHdk4ZfhiLt1NzXNxxgc/eX2obFZ3Hw+KdM/gM5F7KfWBbtSGSw==}
+    dependencies:
+      nx: 14.4.2_@swc+core@1.2.210
+    dev: true
+
+  /@nrwl/cli/14.4.2_@swc+core@1.2.210:
+    resolution: {integrity: sha512-JNV4kP9goZD4BlTQGKdKhCRc1bhiWYp1TaDJHdk4ZfhiLt1NzXNxxgc/eX2obFZ3Hw+KdM/gM5F7KfWBbtSGSw==}
+    dependencies:
+      nx: 14.4.2_@swc+core@1.2.210
+    transitivePeerDependencies:
+      - '@swc-node/register'
+      - '@swc/core'
+    dev: true
+
+  /@nrwl/cypress/14.4.2_gtbxvtmh5ipj3piki3xg57n5fe:
+    resolution: {integrity: sha512-vek4tJYzaJwnLgeJLAJKWuCmtE+XWCq6IgmCl/4G/lWxTWGzlJ19ZK8MoCEiJqbnNYeoHZPxoaAGwyBAbVuO3w==}
+    peerDependencies:
+      cypress: '>= 3 < 10'
+    peerDependenciesMeta:
+      cypress:
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/preset-env': 7.18.6_@babel+core@7.18.6
+      '@cypress/webpack-preprocessor': 5.12.0_fn4zy6wxmwni62n6gsuqjrjamy
+      '@nrwl/devkit': 14.4.2_nx@14.4.2
+      '@nrwl/linter': 14.4.2_jqnzvbaca4rx3byobgjku3onji
+      '@nrwl/workspace': 14.4.2_a22ftc74wzukohhtmp6cnnvzoq
+      babel-loader: 8.2.5_fswvdo7jykdwhfxrdcvghfn6pa
+      chalk: 4.1.0
+      enhanced-resolve: 5.10.0
+      fork-ts-checker-webpack-plugin: 6.2.10_vzvrbkqxq2uhuknms22gvb2xwq
+      rxjs: 6.6.7
+      ts-loader: 9.3.1_3o2jfq6vfqxns3sz6wn2nnc3ei
+      tsconfig-paths: 3.14.1
+      tsconfig-paths-webpack-plugin: 3.5.2
+      tslib: 2.4.0
+      webpack: 5.73.0_@swc+core@1.2.210
+      webpack-node-externals: 3.0.0
+    transitivePeerDependencies:
+      - '@swc-node/register'
+      - '@swc/core'
+      - bufferutil
+      - canvas
+      - esbuild
+      - eslint
+      - node-notifier
+      - nx
+      - prettier
+      - supports-color
+      - ts-node
+      - typescript
+      - uglify-js
+      - utf-8-validate
+      - vue-template-compiler
+      - webpack-cli
+    dev: true
+
+  /@nrwl/devkit/14.4.2_nx@14.4.2:
+    resolution: {integrity: sha512-CJCczAbnZ7w6XZeOMHhb4aTQeDzU0pJOAAJvNU1EAzbj/nkP+QILn/sX+WQR6z94UT2Y9SMamnE4TjQC2F48vQ==}
+    peerDependencies:
+      nx: '>= 13.10 <= 15'
+    dependencies:
+      ejs: 3.1.8
+      ignore: 5.2.0
+      nx: 14.4.2_@swc+core@1.2.210
+      rxjs: 6.6.7
+      semver: 7.3.4
+      tslib: 2.4.0
+    dev: true
+
+  /@nrwl/eslint-plugin-nx/14.4.2_afsbewstkdex5d4fc6xnpjlnau:
+    resolution: {integrity: sha512-lYePXOoBWDbnzv/ltkT/ueE0rm30wJTaHaSJAZwI+csHR5Oj61l0zaCdXz4GlDOl6ZJLbS98/oOgufCnOSdMhw==}
+    peerDependencies:
+      '@typescript-eslint/parser': ^5.29.0
+      eslint-config-prettier: ^8.1.0
+    peerDependenciesMeta:
+      eslint-config-prettier:
+        optional: true
+    dependencies:
+      '@nrwl/devkit': 14.4.2_nx@14.4.2
+      '@nrwl/workspace': 14.4.2_a22ftc74wzukohhtmp6cnnvzoq
+      '@typescript-eslint/experimental-utils': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
+      '@typescript-eslint/parser': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
+      chalk: 4.1.0
+      confusing-browser-globals: 1.0.11
+      eslint-config-prettier: 8.5.0_eslint@8.19.0
+      semver: 7.3.4
+    transitivePeerDependencies:
+      - '@swc-node/register'
+      - '@swc/core'
+      - bufferutil
+      - canvas
+      - eslint
+      - node-notifier
+      - nx
+      - prettier
+      - supports-color
+      - ts-node
+      - typescript
+      - utf-8-validate
+    dev: true
+
+  /@nrwl/jest/14.4.2_dltevkctzdxkrvyldbyepwbdle:
+    resolution: {integrity: sha512-5BIbkChVRmJQ0ngNBdL1Fy3oSLm20zR1ec9XgBAktPDQ4ZMPz3ZWk9c5kKX2H2tOvyu98hbOqZ0HLbPXAbt/Ew==}
+    dependencies:
+      '@jest/reporters': 27.5.1
+      '@jest/test-result': 27.5.1
+      '@nrwl/devkit': 14.4.2_nx@14.4.2
+      '@phenomnomnominal/tsquery': 4.1.1_typescript@4.7.4
+      chalk: 4.1.0
+      identity-obj-proxy: 3.0.0
+      jest-config: 27.5.1_ts-node@10.8.2
+      jest-resolve: 27.5.1
+      jest-util: 27.5.1
+      resolve.exports: 1.1.0
+      rxjs: 6.6.7
+      tslib: 2.4.0
+    transitivePeerDependencies:
+      - bufferutil
+      - canvas
+      - node-notifier
+      - nx
+      - supports-color
+      - ts-node
+      - typescript
+      - utf-8-validate
+    dev: true
+
+  /@nrwl/js/14.4.2_gtbxvtmh5ipj3piki3xg57n5fe:
+    resolution: {integrity: sha512-kVi+DAm1iaEZ8XQ8+dViDlK9/2ZM4Eq0fhWXtWisvuVmgoTdWQ88DDzXyINbzv4cWtpMnKHeIWJeM/WMWAX36w==}
+    dependencies:
+      '@nrwl/devkit': 14.4.2_nx@14.4.2
+      '@nrwl/jest': 14.4.2_dltevkctzdxkrvyldbyepwbdle
+      '@nrwl/linter': 14.4.2_jqnzvbaca4rx3byobgjku3onji
+      '@nrwl/workspace': 14.4.2_a22ftc74wzukohhtmp6cnnvzoq
+      '@parcel/watcher': 2.0.4
+      chalk: 4.1.0
+      fast-glob: 3.2.7
+      fs-extra: 10.1.0
+      ignore: 5.2.0
+      js-tokens: 4.0.0
+      minimatch: 3.0.5
+      source-map-support: 0.5.19
+      tree-kill: 1.2.2
+    transitivePeerDependencies:
+      - '@swc-node/register'
+      - '@swc/core'
+      - bufferutil
+      - canvas
+      - eslint
+      - node-notifier
+      - nx
+      - prettier
+      - supports-color
+      - ts-node
+      - typescript
+      - utf-8-validate
+    dev: true
+
+  /@nrwl/linter/14.4.2_jqnzvbaca4rx3byobgjku3onji:
+    resolution: {integrity: sha512-K44C+mwwbq0Q3IECNqxO9WGB9J7vSKoyaOzx0BH0HgKtfTSTyALHuM6ylzZ9y9pNK0CDbkVraKoFwDZ42GtzCQ==}
+    peerDependencies:
+      eslint: ^8.0.0
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+    dependencies:
+      '@nrwl/devkit': 14.4.2_nx@14.4.2
+      '@nrwl/jest': 14.4.2_dltevkctzdxkrvyldbyepwbdle
+      '@phenomnomnominal/tsquery': 4.1.1_typescript@4.7.4
+      eslint: 8.19.0
+      nx: 14.4.2_@swc+core@1.2.210
+      tmp: 0.2.1
+      tslib: 2.4.0
+    transitivePeerDependencies:
+      - '@swc-node/register'
+      - '@swc/core'
+      - bufferutil
+      - canvas
+      - node-notifier
+      - supports-color
+      - ts-node
+      - typescript
+      - utf-8-validate
+    dev: true
+
+  /@nrwl/nest/14.4.2_e6qtqvxbhokjbvzxuqyvhc6pli:
+    resolution: {integrity: sha512-TVlY7UbWQLMjQyCwkos8IkLzhKz/58IPUqoE3Jr9syf8KJ+JCkVxndEcUSPMlEJWtfxdEjchNrOwZH5bWpZPBw==}
+    dependencies:
+      '@nestjs/schematics': 8.0.11_typescript@4.7.4
+      '@nrwl/devkit': 14.4.2_nx@14.4.2
+      '@nrwl/jest': 14.4.2_dltevkctzdxkrvyldbyepwbdle
+      '@nrwl/js': 14.4.2_gtbxvtmh5ipj3piki3xg57n5fe
+      '@nrwl/linter': 14.4.2_jqnzvbaca4rx3byobgjku3onji
+      '@nrwl/node': 14.4.2_ehspof47b5bphcyk4536mwaw4u
+    transitivePeerDependencies:
+      - '@swc-node/register'
+      - '@swc/core'
+      - '@swc/wasm'
+      - '@types/node'
+      - bufferutil
+      - canvas
+      - chokidar
+      - esbuild
+      - eslint
+      - node-notifier
+      - nx
+      - prettier
+      - supports-color
+      - ts-node
+      - typescript
+      - uglify-js
+      - utf-8-validate
+      - vue-template-compiler
+      - webpack-cli
+    dev: true
+
+  /@nrwl/next/14.4.2_gys3iieb7yvbrdlbm6wxfyhrsy:
+    resolution: {integrity: sha512-T8F8Fy7jJ7dNhLET14FhslD9lGzpUrzOQQfES5mb8LK0Y3kNyumGfCetAuFwkUEp/7aC5FxsZSc/32l4b6dxZA==}
+    peerDependencies:
+      next: ^12.1.0
+    dependencies:
+      '@babel/plugin-proposal-decorators': 7.18.6_@babel+core@7.18.6
+      '@nrwl/cypress': 14.4.2_gtbxvtmh5ipj3piki3xg57n5fe
+      '@nrwl/devkit': 14.4.2_nx@14.4.2
+      '@nrwl/jest': 14.4.2_dltevkctzdxkrvyldbyepwbdle
+      '@nrwl/linter': 14.4.2_jqnzvbaca4rx3byobgjku3onji
+      '@nrwl/react': 14.4.2_46t6z7wulh2zjyi5wmxujdm57y
+      '@nrwl/web': 14.4.2_7ggz7ibmlwrqtwusxeq53zzcym
+      '@nrwl/workspace': 14.4.2_a22ftc74wzukohhtmp6cnnvzoq
+      '@svgr/webpack': 6.2.1
+      chalk: 4.1.0
+      eslint-config-next: 12.2.0_4x5o4skxv6sl53vpwefgt23khm
+      fs-extra: 10.1.0
+      next: 12.2.0_beenoklgwfttvph5dgxj7na7aq
+      ts-node: 10.8.2_y42jqzo3jkzuv3kp7opavo2xbi
+      tsconfig-paths: 3.14.1
+      url-loader: 4.1.1_webpack@5.73.0
+      webpack-merge: 5.8.0
+    transitivePeerDependencies:
+      - '@babel/core'
+      - '@parcel/css'
+      - '@swc-node/register'
+      - '@swc/core'
+      - '@swc/wasm'
+      - '@types/babel__core'
+      - '@types/node'
+      - '@types/webpack'
+      - '@typescript-eslint/parser'
+      - bufferutil
+      - canvas
+      - clean-css
+      - csso
+      - cypress
+      - debug
+      - esbuild
+      - eslint
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - fibers
+      - file-loader
+      - html-webpack-plugin
+      - node-notifier
+      - node-sass
+      - nx
+      - prettier
+      - sass-embedded
+      - sockjs-client
+      - supports-color
+      - type-fest
+      - typescript
+      - uglify-js
+      - utf-8-validate
+      - vue-template-compiler
+      - webpack
+      - webpack-cli
+      - webpack-dev-server
+      - webpack-hot-middleware
+      - webpack-plugin-serve
+    dev: true
+
+  /@nrwl/node/14.4.2_ehspof47b5bphcyk4536mwaw4u:
+    resolution: {integrity: sha512-YMolQH3R/DTyPap3fQFWXvBaKJQG6l+msAUqzHp5OML3lPDg+zBYGW2kD1IsXpYq/ccpaot1ePS5K0JDpbZ8zQ==}
+    dependencies:
+      '@nrwl/devkit': 14.4.2_nx@14.4.2
+      '@nrwl/jest': 14.4.2_dltevkctzdxkrvyldbyepwbdle
+      '@nrwl/js': 14.4.2_gtbxvtmh5ipj3piki3xg57n5fe
+      '@nrwl/linter': 14.4.2_jqnzvbaca4rx3byobgjku3onji
+      '@nrwl/workspace': 14.4.2_a22ftc74wzukohhtmp6cnnvzoq
+      chalk: 4.1.0
+      copy-webpack-plugin: 9.1.0_webpack@5.73.0
+      enhanced-resolve: 5.10.0
+      fork-ts-checker-webpack-plugin: 6.2.10_vzvrbkqxq2uhuknms22gvb2xwq
+      fs-extra: 10.1.0
+      glob: 7.1.4
+      license-webpack-plugin: 4.0.2_webpack@5.73.0
+      rxjs: 6.6.7
+      rxjs-for-await: 0.0.2_rxjs@6.6.7
+      source-map-support: 0.5.19
+      terser-webpack-plugin: 5.3.3_cr5ideiic2hpdwwauzasyctjxa
+      tree-kill: 1.2.2
+      ts-loader: 9.3.1_3o2jfq6vfqxns3sz6wn2nnc3ei
+      ts-node: 10.8.2_y42jqzo3jkzuv3kp7opavo2xbi
+      tsconfig-paths: 3.14.1
+      tsconfig-paths-webpack-plugin: 3.5.2
+      tslib: 2.4.0
+      webpack: 5.73.0_@swc+core@1.2.210
+      webpack-merge: 5.8.0
+      webpack-node-externals: 3.0.0
+    transitivePeerDependencies:
+      - '@swc-node/register'
+      - '@swc/core'
+      - '@swc/wasm'
+      - '@types/node'
+      - bufferutil
+      - canvas
+      - esbuild
+      - eslint
+      - node-notifier
+      - nx
+      - prettier
+      - supports-color
+      - typescript
+      - uglify-js
+      - utf-8-validate
+      - vue-template-compiler
+      - webpack-cli
+    dev: true
+
+  /@nrwl/nx-cloud/14.2.0:
+    resolution: {integrity: sha512-KnrNFDCII9mbLwFp0HgyKVlhMTXoN90CQzGgdtCNPPBP/Wg84pttcpynGdWyupkrBJxdqMNTJEC7HGib0ipxew==}
+    hasBin: true
+    dependencies:
+      axios: 0.21.4
+      chalk: 4.1.0
+      node-machine-id: 1.1.12
+      strip-json-comments: 3.1.1
+      tar: 6.1.11
+    transitivePeerDependencies:
+      - debug
+    dev: true
+
+  /@nrwl/react/14.4.2_46t6z7wulh2zjyi5wmxujdm57y:
+    resolution: {integrity: sha512-5OlTpa5wRgADkNuP55Ii0myZLqzcefwR+lMRSBFquwOzxQ5VEU9JCyZVeO4pBdVr1ibbIJoj1EfO+NnVpCtELg==}
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/preset-react': 7.18.6_@babel+core@7.18.6
+      '@nrwl/cypress': 14.4.2_gtbxvtmh5ipj3piki3xg57n5fe
+      '@nrwl/devkit': 14.4.2_nx@14.4.2
+      '@nrwl/jest': 14.4.2_dltevkctzdxkrvyldbyepwbdle
+      '@nrwl/js': 14.4.2_gtbxvtmh5ipj3piki3xg57n5fe
+      '@nrwl/linter': 14.4.2_jqnzvbaca4rx3byobgjku3onji
+      '@nrwl/storybook': 14.4.2_evtlkmvush7gmjnqci7dwzbhpu
+      '@nrwl/web': 14.4.2_7ggz7ibmlwrqtwusxeq53zzcym
+      '@nrwl/workspace': 14.4.2_a22ftc74wzukohhtmp6cnnvzoq
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.7_ztqujotnm4vydlfjq6zgvv7opu
+      '@storybook/node-logger': 6.1.20
+      '@svgr/webpack': 6.2.1
+      chalk: 4.1.0
+      eslint-plugin-import: 2.26.0_iom7pm3yknyiblqpw2vvqvxs5i
+      eslint-plugin-jsx-a11y: 6.6.0_eslint@8.19.0
+      eslint-plugin-react: 7.30.0_eslint@8.19.0
+      eslint-plugin-react-hooks: 4.6.0_eslint@8.19.0
+      react-refresh: 0.10.0
+      semver: 7.3.4
+      url-loader: 4.1.1_webpack@5.73.0
+      webpack: 5.73.0_@swc+core@1.2.210
+      webpack-merge: 5.8.0
+    transitivePeerDependencies:
+      - '@parcel/css'
+      - '@swc-node/register'
+      - '@swc/core'
+      - '@swc/wasm'
+      - '@types/babel__core'
+      - '@types/node'
+      - '@types/webpack'
+      - '@typescript-eslint/parser'
+      - bufferutil
+      - canvas
+      - clean-css
+      - csso
+      - cypress
+      - debug
+      - esbuild
+      - eslint
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - fibers
+      - file-loader
+      - html-webpack-plugin
+      - node-notifier
+      - node-sass
+      - nx
+      - prettier
+      - sass-embedded
+      - sockjs-client
+      - supports-color
+      - ts-node
+      - type-fest
+      - typescript
+      - uglify-js
+      - utf-8-validate
+      - vue-template-compiler
+      - webpack-cli
+      - webpack-dev-server
+      - webpack-hot-middleware
+      - webpack-plugin-serve
+    dev: true
+
+  /@nrwl/storybook/14.4.2_evtlkmvush7gmjnqci7dwzbhpu:
+    resolution: {integrity: sha512-G6h3jQT+pIY0RAEbeclguEFSAIXsToRVKEeRyq1bk6fWJHy7y//bCeJrINL9xPf9zk12cWyKkjJvwsOcy0Z1Mw==}
+    dependencies:
+      '@nrwl/cypress': 14.4.2_gtbxvtmh5ipj3piki3xg57n5fe
+      '@nrwl/devkit': 14.4.2_nx@14.4.2
+      '@nrwl/linter': 14.4.2_jqnzvbaca4rx3byobgjku3onji
+      '@nrwl/workspace': 14.4.2_a22ftc74wzukohhtmp6cnnvzoq
+      core-js: 3.23.3
+      semver: 7.3.4
+      ts-loader: 9.3.1_3o2jfq6vfqxns3sz6wn2nnc3ei
+      tsconfig-paths-webpack-plugin: 3.5.2
+    transitivePeerDependencies:
+      - '@swc-node/register'
+      - '@swc/core'
+      - bufferutil
+      - canvas
+      - cypress
+      - esbuild
+      - eslint
+      - node-notifier
+      - nx
+      - prettier
+      - supports-color
+      - ts-node
+      - typescript
+      - uglify-js
+      - utf-8-validate
+      - vue-template-compiler
+      - webpack
+      - webpack-cli
+    dev: true
+
+  /@nrwl/tao/14.4.2_@swc+core@1.2.210:
+    resolution: {integrity: sha512-Ygw3skKZfFhi4MBHZKQ8A67pDQxeyDdY78tFWViMN0SEn9ExL41Q8V9aSMfir8VZYGca6ZOXX5MRhbeHdcgMLQ==}
+    hasBin: true
+    dependencies:
+      nx: 14.4.2_@swc+core@1.2.210
+    transitivePeerDependencies:
+      - '@swc-node/register'
+      - '@swc/core'
+    dev: true
+
+  /@nrwl/web/14.4.2_7ggz7ibmlwrqtwusxeq53zzcym:
+    resolution: {integrity: sha512-x00dE67yDRC3zmVEdO1HdtIbPezZ5gSKmNmEL2++PrA6AUz3a+f7/Ahhs4ALxnEPx1oDRLzM5OxRb5w6kLmGfw==}
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/plugin-proposal-class-properties': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-proposal-decorators': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-regenerator': 7.18.6_@babel+core@7.18.6
+      '@babel/plugin-transform-runtime': 7.18.6_@babel+core@7.18.6
+      '@babel/preset-env': 7.18.6_@babel+core@7.18.6
+      '@babel/preset-typescript': 7.18.6_@babel+core@7.18.6
+      '@babel/runtime': 7.18.6
+      '@nrwl/cypress': 14.4.2_gtbxvtmh5ipj3piki3xg57n5fe
+      '@nrwl/devkit': 14.4.2_nx@14.4.2
+      '@nrwl/jest': 14.4.2_dltevkctzdxkrvyldbyepwbdle
+      '@nrwl/js': 14.4.2_gtbxvtmh5ipj3piki3xg57n5fe
+      '@nrwl/linter': 14.4.2_jqnzvbaca4rx3byobgjku3onji
+      '@nrwl/workspace': 14.4.2_a22ftc74wzukohhtmp6cnnvzoq
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.7_suo2fv7mggvlsdll7dmmksinpe
+      '@rollup/plugin-babel': 5.3.1_fb3qe53zzddvqjqqltveoanfhe
+      '@rollup/plugin-commonjs': 20.0.0_rollup@2.75.7
+      '@rollup/plugin-image': 2.1.1_rollup@2.75.7
+      '@rollup/plugin-json': 4.1.0_rollup@2.75.7
+      '@rollup/plugin-node-resolve': 13.3.0_rollup@2.75.7
+      autoprefixer: 10.4.7_postcss@8.4.14
+      babel-loader: 8.2.5_fswvdo7jykdwhfxrdcvghfn6pa
+      babel-plugin-const-enum: 1.2.0_@babel+core@7.18.6
+      babel-plugin-macros: 2.8.0
+      babel-plugin-transform-async-to-promises: 0.8.18
+      babel-plugin-transform-typescript-metadata: 0.3.2
+      browserslist: 4.21.1
+      bytes: 3.1.2
+      caniuse-lite: 1.0.30001363
+      chalk: 4.1.0
+      chokidar: 3.5.3
+      copy-webpack-plugin: 9.1.0_webpack@5.73.0
+      core-js: 3.23.3
+      css-loader: 6.7.1_webpack@5.73.0
+      css-minimizer-webpack-plugin: 3.4.1_webpack@5.73.0
+      enhanced-resolve: 5.10.0
+      file-loader: 6.2.0_webpack@5.73.0
+      fork-ts-checker-webpack-plugin: 6.2.10_vzvrbkqxq2uhuknms22gvb2xwq
+      fs-extra: 10.1.0
+      http-server: 14.1.0
+      identity-obj-proxy: 3.0.0
+      ignore: 5.2.0
+      less: 3.12.2
+      less-loader: 10.2.0_less@3.12.2+webpack@5.73.0
+      license-webpack-plugin: 4.0.2_webpack@5.73.0
+      loader-utils: 1.2.3
+      mini-css-extract-plugin: 2.4.7_webpack@5.73.0
+      parse5: 4.0.0
+      parse5-html-rewriting-stream: 6.0.1
+      postcss: 8.4.14
+      postcss-import: 14.1.0_postcss@8.4.14
+      postcss-loader: 6.2.1_mepnsno3xmng6eyses4tepu7bu
+      raw-loader: 4.0.2_webpack@5.73.0
+      react-refresh: 0.10.0
+      rollup: 2.75.7
+      rollup-plugin-copy: 3.4.0
+      rollup-plugin-peer-deps-external: 2.2.4_rollup@2.75.7
+      rollup-plugin-postcss: 4.0.2_i7duc3lt6p42geuj2nwruihc6u
+      rollup-plugin-typescript2: 0.31.2_okefoyb4o5sittgqayreuhurei
+      rxjs: 6.6.7
+      rxjs-for-await: 0.0.2_rxjs@6.6.7
+      sass: 1.53.0
+      sass-loader: 12.6.0_sass@1.53.0+webpack@5.73.0
+      semver: 7.3.4
+      source-map: 0.7.3
+      source-map-loader: 3.0.1_webpack@5.73.0
+      style-loader: 3.3.1_webpack@5.73.0
+      stylus: 0.55.0
+      stylus-loader: 6.2.0_hlqotudbegd4e65xhpljfitz3y
+      terser-webpack-plugin: 5.3.3_cr5ideiic2hpdwwauzasyctjxa
+      ts-loader: 9.3.1_3o2jfq6vfqxns3sz6wn2nnc3ei
+      ts-node: 10.8.2_y42jqzo3jkzuv3kp7opavo2xbi
+      tsconfig-paths: 3.14.1
+      tsconfig-paths-webpack-plugin: 3.5.2
+      tslib: 2.4.0
+      webpack: 5.73.0_@swc+core@1.2.210
+      webpack-dev-server: 4.9.3_webpack@5.73.0
+      webpack-merge: 5.8.0
+      webpack-sources: 3.2.3
+      webpack-subresource-integrity: 5.1.0_vaqkluxv57wdoiytlozrwxzyse
+    transitivePeerDependencies:
+      - '@parcel/css'
+      - '@swc-node/register'
+      - '@swc/core'
+      - '@swc/wasm'
+      - '@types/babel__core'
+      - '@types/node'
+      - '@types/webpack'
+      - bufferutil
+      - canvas
+      - clean-css
+      - csso
+      - cypress
+      - debug
+      - esbuild
+      - eslint
+      - fibers
+      - html-webpack-plugin
+      - node-notifier
+      - node-sass
+      - nx
+      - prettier
+      - sass-embedded
+      - sockjs-client
+      - supports-color
+      - type-fest
+      - typescript
+      - uglify-js
+      - utf-8-validate
+      - vue-template-compiler
+      - webpack-cli
+      - webpack-hot-middleware
+      - webpack-plugin-serve
+    dev: true
+
+  /@nrwl/workspace/14.4.2_a22ftc74wzukohhtmp6cnnvzoq:
+    resolution: {integrity: sha512-D3EXkeg/39V3OeKINvymeOsr5QVRLZFwYOWHfvVcJh8iKpVrev/zMFOm6rSrHmdlpoLkJVAOW2QI+1MYl92Gig==}
+    peerDependencies:
+      prettier: ^2.6.2
+    peerDependenciesMeta:
+      prettier:
+        optional: true
+    dependencies:
+      '@nrwl/devkit': 14.4.2_nx@14.4.2
+      '@nrwl/jest': 14.4.2_dltevkctzdxkrvyldbyepwbdle
+      '@nrwl/linter': 14.4.2_jqnzvbaca4rx3byobgjku3onji
+      '@parcel/watcher': 2.0.4
+      chalk: 4.1.0
+      chokidar: 3.5.3
+      cli-cursor: 3.1.0
+      cli-spinners: 2.6.1
+      dotenv: 10.0.0
+      enquirer: 2.3.6
+      figures: 3.2.0
+      flat: 5.0.2
+      fs-extra: 10.1.0
+      glob: 7.1.4
+      ignore: 5.2.0
+      minimatch: 3.0.5
+      npm-run-path: 4.0.1
+      nx: 14.4.2_@swc+core@1.2.210
+      open: 8.4.0
+      prettier: 2.7.1
+      rxjs: 6.6.7
+      semver: 7.3.4
+      tmp: 0.2.1
+      tslib: 2.4.0
+      yargs: 17.5.1
+      yargs-parser: 21.0.1
+    transitivePeerDependencies:
+      - '@swc-node/register'
+      - '@swc/core'
+      - bufferutil
+      - canvas
+      - eslint
+      - node-notifier
+      - supports-color
+      - ts-node
+      - typescript
+      - utf-8-validate
+    dev: true
+
+  /@parcel/watcher/2.0.4:
+    resolution: {integrity: sha512-cTDi+FUDBIUOBKEtj+nhiJ71AZVlkAsQFuGQTun5tV9mwQBQgZvhCzG+URPQc8myeN32yRVZEfVAPCs1RW+Jvg==}
+    engines: {node: '>= 10.0.0'}
+    requiresBuild: true
+    dependencies:
+      node-addon-api: 3.2.1
+      node-gyp-build: 4.5.0
+    dev: true
+
+  /@phenomnomnominal/tsquery/4.1.1_typescript@4.7.4:
+    resolution: {integrity: sha512-jjMmK1tnZbm1Jq5a7fBliM4gQwjxMU7TFoRNwIyzwlO+eHPRCFv/Nv+H/Gi1jc3WR7QURG8D5d0Tn12YGrUqBQ==}
+    peerDependencies:
+      typescript: ^3 || ^4
+    dependencies:
+      esquery: 1.4.0
+      typescript: 4.7.4
+    dev: true
+
+  /@pmmmwh/react-refresh-webpack-plugin/0.5.7_suo2fv7mggvlsdll7dmmksinpe:
+    resolution: {integrity: sha512-bcKCAzF0DV2IIROp9ZHkRJa6O4jy7NlnHdWL3GmcUxYWNjLXkK5kfELELwEfSP5hXPfVL/qOGMAROuMQb9GG8Q==}
+    engines: {node: '>= 10.13'}
+    peerDependencies:
+      '@types/webpack': 4.x || 5.x
+      react-refresh: '>=0.10.0 <1.0.0'
+      sockjs-client: ^1.4.0
+      type-fest: '>=0.17.0 <3.0.0'
+      webpack: '>=4.43.0 <6.0.0'
+      webpack-dev-server: 3.x || 4.x
+      webpack-hot-middleware: 2.x
+      webpack-plugin-serve: 0.x || 1.x
+    peerDependenciesMeta:
+      '@types/webpack':
+        optional: true
+      sockjs-client:
+        optional: true
+      type-fest:
+        optional: true
+      webpack:
+        optional: true
+      webpack-dev-server:
+        optional: true
+      webpack-hot-middleware:
+        optional: true
+      webpack-plugin-serve:
+        optional: true
+    dependencies:
+      ansi-html-community: 0.0.8
+      common-path-prefix: 3.0.0
+      core-js-pure: 3.23.3
+      error-stack-parser: 2.1.4
+      find-up: 5.0.0
+      html-entities: 2.3.3
+      loader-utils: 2.0.2
+      react-refresh: 0.10.0
+      schema-utils: 3.1.1
+      source-map: 0.7.4
+      webpack: 5.73.0_@swc+core@1.2.210
+      webpack-dev-server: 4.9.3_webpack@5.73.0
+    dev: true
+
+  /@pmmmwh/react-refresh-webpack-plugin/0.5.7_ztqujotnm4vydlfjq6zgvv7opu:
+    resolution: {integrity: sha512-bcKCAzF0DV2IIROp9ZHkRJa6O4jy7NlnHdWL3GmcUxYWNjLXkK5kfELELwEfSP5hXPfVL/qOGMAROuMQb9GG8Q==}
+    engines: {node: '>= 10.13'}
+    peerDependencies:
+      '@types/webpack': 4.x || 5.x
+      react-refresh: '>=0.10.0 <1.0.0'
+      sockjs-client: ^1.4.0
+      type-fest: '>=0.17.0 <3.0.0'
+      webpack: '>=4.43.0 <6.0.0'
+      webpack-dev-server: 3.x || 4.x
+      webpack-hot-middleware: 2.x
+      webpack-plugin-serve: 0.x || 1.x
+    peerDependenciesMeta:
+      '@types/webpack':
+        optional: true
+      sockjs-client:
+        optional: true
+      type-fest:
+        optional: true
+      webpack:
+        optional: true
+      webpack-dev-server:
+        optional: true
+      webpack-hot-middleware:
+        optional: true
+      webpack-plugin-serve:
+        optional: true
+    dependencies:
+      ansi-html-community: 0.0.8
+      common-path-prefix: 3.0.0
+      core-js-pure: 3.23.3
+      error-stack-parser: 2.1.4
+      find-up: 5.0.0
+      html-entities: 2.3.3
+      loader-utils: 2.0.2
+      react-refresh: 0.10.0
+      schema-utils: 3.1.1
+      source-map: 0.7.4
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /@polka/url/1.0.0-next.21:
+    resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
+    dev: true
+
+  /@popperjs/core/2.11.5:
+    resolution: {integrity: sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==}
+    dev: false
+
+  /@portabletext/react/1.0.6_react@18.2.0:
+    resolution: {integrity: sha512-j6BprLiwFz3zr1Lo6BxM2sQ1b3g1JIjGwePeuxqSfbBiEYbGXn2izEckMJ02hSa1f7+RCEUJ+Bojvtzz6BBUaw==}
+    peerDependencies:
+      react: ^17 || ^18
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      '@portabletext/toolkit': 1.0.5
+      '@portabletext/types': 1.0.3
+      react: 18.2.0
+    dev: true
+
+  /@portabletext/toolkit/1.0.5:
+    resolution: {integrity: sha512-kwVOfVoquufDQNmzzhGxji9A+/T+dhLKKOHEHldM1kMUoNzY6wwrt5H/Plnw4xbdE780kkwqJqHxjxoSYr706A==}
+    dependencies:
+      '@portabletext/types': 1.0.3
+    dev: true
+
+  /@portabletext/types/1.0.3:
+    resolution: {integrity: sha512-SDDsdury2SaTI2D5Ea6o+Y39SSZMYHRMWJHxkxYl3yzFP0n/0EknOhoXcoaV+bxGr2dTTqZi2TOEj+uWYuavSw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: true
+
+  /@protobufjs/aspromise/1.1.2:
+    resolution: {integrity: sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==}
+    dev: true
+
+  /@protobufjs/base64/1.1.2:
+    resolution: {integrity: sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==}
+    dev: true
+
+  /@protobufjs/codegen/2.0.4:
+    resolution: {integrity: sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==}
+    dev: true
+
+  /@protobufjs/eventemitter/1.1.0:
+    resolution: {integrity: sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==}
+    dev: true
+
+  /@protobufjs/fetch/1.1.0:
+    resolution: {integrity: sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==}
+    dependencies:
+      '@protobufjs/aspromise': 1.1.2
+      '@protobufjs/inquire': 1.1.0
+    dev: true
+
+  /@protobufjs/float/1.0.2:
+    resolution: {integrity: sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==}
+    dev: true
+
+  /@protobufjs/inquire/1.1.0:
+    resolution: {integrity: sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==}
+    dev: true
+
+  /@protobufjs/path/1.1.2:
+    resolution: {integrity: sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==}
+    dev: true
+
+  /@protobufjs/pool/1.1.0:
+    resolution: {integrity: sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==}
+    dev: true
+
+  /@protobufjs/utf8/1.1.0:
+    resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
+    dev: true
+
+  /@rollup/plugin-babel/5.3.1_fb3qe53zzddvqjqqltveoanfhe:
+    resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
+    engines: {node: '>= 10.0.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+      '@types/babel__core': ^7.1.9
+      rollup: ^1.20.0||^2.0.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      '@types/babel__core':
+        optional: true
+      rollup:
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-module-imports': 7.18.6
+      '@rollup/pluginutils': 3.1.0_rollup@2.75.7
+      rollup: 2.75.7
+    dev: true
+
+  /@rollup/plugin-commonjs/20.0.0_rollup@2.75.7:
+    resolution: {integrity: sha512-5K0g5W2Ol8hAcTHqcTBHiA7M58tfmYi1o9KxeJuuRNpGaTa5iLjcyemBitCBcKXaHamOBBEH2dGom6v6Unmqjg==}
+    engines: {node: '>= 8.0.0'}
+    peerDependencies:
+      rollup: ^2.38.3
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 3.1.0_rollup@2.75.7
+      commondir: 1.0.1
+      estree-walker: 2.0.2
+      glob: 7.2.3
+      is-reference: 1.2.1
+      magic-string: 0.25.9
+      resolve: 1.22.1
+      rollup: 2.75.7
+    dev: true
+
+  /@rollup/plugin-image/2.1.1_rollup@2.75.7:
+    resolution: {integrity: sha512-AgP4U85zuQJdUopLUCM+hTf45RepgXeTb8EJsleExVy99dIoYpt3ZlDYJdKmAc2KLkNntCDg6BPJvgJU3uGF+g==}
+    engines: {node: '>= 8.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0 || ^2.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 3.1.0_rollup@2.75.7
+      mini-svg-data-uri: 1.4.4
+      rollup: 2.75.7
+    dev: true
+
+  /@rollup/plugin-json/4.1.0_rollup@2.75.7:
+    resolution: {integrity: sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==}
+    peerDependencies:
+      rollup: ^1.20.0 || ^2.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 3.1.0_rollup@2.75.7
+      rollup: 2.75.7
+    dev: true
+
+  /@rollup/plugin-node-resolve/13.3.0_rollup@2.75.7:
+    resolution: {integrity: sha512-Lus8rbUo1eEcnS4yTFKLZrVumLPY+YayBdWXgFSHYhTT2iJbMhoaaBL3xl5NCdeRytErGr8tZ0L71BMRmnlwSw==}
+    engines: {node: '>= 10.0.0'}
+    peerDependencies:
+      rollup: ^2.42.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 3.1.0_rollup@2.75.7
+      '@types/resolve': 1.17.1
+      deepmerge: 4.2.2
+      is-builtin-module: 3.1.0
+      is-module: 1.0.0
+      resolve: 1.22.1
+      rollup: 2.75.7
+    dev: true
+
+  /@rollup/pluginutils/3.1.0:
+    resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
+    engines: {node: '>= 8.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 0.0.39
+      estree-walker: 1.0.1
+      picomatch: 2.3.1
+    dev: false
+
+  /@rollup/pluginutils/3.1.0_rollup@2.75.7:
+    resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
+    engines: {node: '>= 8.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 0.0.39
+      estree-walker: 1.0.1
+      picomatch: 2.3.1
+      rollup: 2.75.7
+
+  /@rollup/pluginutils/4.2.1:
+    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
+    engines: {node: '>= 8.0.0'}
+    dependencies:
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    dev: true
+
+  /@rushstack/eslint-patch/1.1.4:
+    resolution: {integrity: sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==}
+    dev: true
+
+  /@sinclair/typebox/0.23.5:
+    resolution: {integrity: sha512-AFBVi/iT4g20DHoujvMH1aEDn8fGJh4xsRGCP6d8RpLPMqsNPvW01Jcn0QysXTsg++/xj25NmJsGyH9xug/wKg==}
+    dev: true
+
+  /@sindresorhus/is/4.6.0:
+    resolution: {integrity: sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==}
+    engines: {node: '>=10'}
+    dev: false
+
+  /@sinonjs/commons/1.8.3:
+    resolution: {integrity: sha512-xkNcLAn/wZaX14RPlwizcKicDk9G3F8m2nU3L7Ukm5zBgTwiT0wsoFAHx9Jq56fJA1z/7uKGtCRu16sOUCLIHQ==}
+    dependencies:
+      type-detect: 4.0.8
+    dev: true
+
+  /@sinonjs/fake-timers/8.1.0:
+    resolution: {integrity: sha512-OAPJUAtgeINhh/TAlUID4QTs53Njm7xzddaVlEs/SXwgtiD1tW22zAB/W1wdqfrpmikgaWQ9Fw6Ws+hsiRm5Vg==}
+    dependencies:
+      '@sinonjs/commons': 1.8.3
+    dev: true
+
+  /@sinonjs/fake-timers/9.1.2:
+    resolution: {integrity: sha512-BPS4ynJW/o92PUR4wgriz2Ud5gpST5vz6GQfMixEDK0Z8ZCUv2M7SkBLykH56T++Xs+8ln9zTGbOvNGIe02/jw==}
+    dependencies:
+      '@sinonjs/commons': 1.8.3
+    dev: true
+
+  /@storybook/node-logger/6.1.20:
+    resolution: {integrity: sha512-Z6337htb1mxIccvCx2Ai0v9LPDlBlmXzeWhap3q2Y6hg8g1p4+0W5Y6bG9RmXqJoXLaT1trO8uAXgGO7AN92yg==}
+    dependencies:
+      '@types/npmlog': 4.1.4
+      chalk: 4.1.0
+      core-js: 3.23.3
+      npmlog: 4.1.2
+      pretty-hrtime: 1.0.3
+    dev: true
+
+  /@svgr/babel-plugin-add-jsx-attribute/6.0.0_@babel+core@7.18.6:
+    resolution: {integrity: sha512-MdPdhdWLtQsjd29Wa4pABdhWbaRMACdM1h31BY+c6FghTZqNGT7pEYdBoaGeKtdTOBC/XNFQaKVj+r/Ei2ryWA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+    dev: true
+
+  /@svgr/babel-plugin-remove-jsx-attribute/6.0.0_@babel+core@7.18.6:
+    resolution: {integrity: sha512-aVdtfx9jlaaxc3unA6l+M9YRnKIZjOhQPthLKqmTXC8UVkBLDRGwPKo+r8n3VZN8B34+yVajzPTZ+ptTSuZZCw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+    dev: true
+
+  /@svgr/babel-plugin-remove-jsx-empty-expression/6.0.0_@babel+core@7.18.6:
+    resolution: {integrity: sha512-Ccj42ApsePD451AZJJf1QzTD1B/BOU392URJTeXFxSK709i0KUsGtbwyiqsKu7vsYxpTM0IA5clAKDyf9RCZyA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+    dev: true
+
+  /@svgr/babel-plugin-replace-jsx-attribute-value/6.0.0_@babel+core@7.18.6:
+    resolution: {integrity: sha512-88V26WGyt1Sfd1emBYmBJRWMmgarrExpKNVmI9vVozha4kqs6FzQJ/Kp5+EYli1apgX44518/0+t9+NU36lThQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+    dev: true
+
+  /@svgr/babel-plugin-svg-dynamic-title/6.0.0_@babel+core@7.18.6:
+    resolution: {integrity: sha512-F7YXNLfGze+xv0KMQxrl2vkNbI9kzT9oDK55/kUuymh1ACyXkMV+VZWX1zEhSTfEKh7VkHVZGmVtHg8eTZ6PRg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+    dev: true
+
+  /@svgr/babel-plugin-svg-em-dimensions/6.0.0_@babel+core@7.18.6:
+    resolution: {integrity: sha512-+rghFXxdIqJNLQK08kwPBD3Z22/0b2tEZ9lKiL/yTfuyj1wW8HUXu4bo/XkogATIYuXSghVQOOCwURXzHGKyZA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+    dev: true
+
+  /@svgr/babel-plugin-transform-react-native-svg/6.0.0_@babel+core@7.18.6:
+    resolution: {integrity: sha512-VaphyHZ+xIKv5v0K0HCzyfAaLhPGJXSk2HkpYfXIOKb7DjLBv0soHDxNv6X0vr2titsxE7klb++u7iOf7TSrFQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+    dev: true
+
+  /@svgr/babel-plugin-transform-svg-component/6.2.0_@babel+core@7.18.6:
+    resolution: {integrity: sha512-bhYIpsORb++wpsp91fymbFkf09Z/YEKR0DnFjxvN+8JHeCUD2unnh18jIMKnDJTWtvpTaGYPXELVe4OOzFI0xg==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+    dev: true
+
+  /@svgr/babel-preset/6.2.0_@babel+core@7.18.6:
+    resolution: {integrity: sha512-4WQNY0J71JIaL03DRn0vLiz87JXx0b9dYm2aA8XHlQJQoixMl4r/soYHm8dsaJZ3jWtkCiOYy48dp9izvXhDkQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@svgr/babel-plugin-add-jsx-attribute': 6.0.0_@babel+core@7.18.6
+      '@svgr/babel-plugin-remove-jsx-attribute': 6.0.0_@babel+core@7.18.6
+      '@svgr/babel-plugin-remove-jsx-empty-expression': 6.0.0_@babel+core@7.18.6
+      '@svgr/babel-plugin-replace-jsx-attribute-value': 6.0.0_@babel+core@7.18.6
+      '@svgr/babel-plugin-svg-dynamic-title': 6.0.0_@babel+core@7.18.6
+      '@svgr/babel-plugin-svg-em-dimensions': 6.0.0_@babel+core@7.18.6
+      '@svgr/babel-plugin-transform-react-native-svg': 6.0.0_@babel+core@7.18.6
+      '@svgr/babel-plugin-transform-svg-component': 6.2.0_@babel+core@7.18.6
+    dev: true
+
+  /@svgr/core/6.2.1:
+    resolution: {integrity: sha512-NWufjGI2WUyrg46mKuySfviEJ6IxHUOm/8a3Ph38VCWSp+83HBraCQrpEM3F3dB6LBs5x8OElS8h3C0oOJaJAA==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@svgr/plugin-jsx': 6.2.1_@svgr+core@6.2.1
+      camelcase: 6.3.0
+      cosmiconfig: 7.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@svgr/hast-util-to-babel-ast/6.2.1:
+    resolution: {integrity: sha512-pt7MMkQFDlWJVy9ULJ1h+hZBDGFfSCwlBNW1HkLnVi7jUhyEXUaGYWi1x6bM2IXuAR9l265khBT4Av4lPmaNLQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@babel/types': 7.18.7
+      entities: 3.0.1
+    dev: true
+
+  /@svgr/plugin-jsx/6.2.1_@svgr+core@6.2.1:
+    resolution: {integrity: sha512-u+MpjTsLaKo6r3pHeeSVsh9hmGRag2L7VzApWIaS8imNguqoUwDq/u6U/NDmYs/KAsrmtBjOEaAAPbwNGXXp1g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@svgr/core': ^6.0.0
+    dependencies:
+      '@babel/core': 7.18.6
+      '@svgr/babel-preset': 6.2.0_@babel+core@7.18.6
+      '@svgr/core': 6.2.1
+      '@svgr/hast-util-to-babel-ast': 6.2.1
+      svg-parser: 2.0.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@svgr/plugin-svgo/6.2.0_@svgr+core@6.2.1:
+    resolution: {integrity: sha512-oDdMQONKOJEbuKwuy4Np6VdV6qoaLLvoY86hjvQEgU82Vx1MSWRyYms6Sl0f+NtqxLI/rDVufATbP/ev996k3Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@svgr/core': ^6.0.0
+    dependencies:
+      '@svgr/core': 6.2.1
+      cosmiconfig: 7.0.1
+      deepmerge: 4.2.2
+      svgo: 2.8.0
+    dev: true
+
+  /@svgr/webpack/6.2.1:
+    resolution: {integrity: sha512-h09ngMNd13hnePwgXa+Y5CgOjzlCvfWLHg+MBnydEedAnuLRzUHUJmGS3o2OsrhxTOOqEsPOFt5v/f6C5Qulcw==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/plugin-transform-react-constant-elements': 7.18.6_@babel+core@7.18.6
+      '@babel/preset-env': 7.18.6_@babel+core@7.18.6
+      '@babel/preset-react': 7.18.6_@babel+core@7.18.6
+      '@babel/preset-typescript': 7.18.6_@babel+core@7.18.6
+      '@svgr/core': 6.2.1
+      '@svgr/plugin-jsx': 6.2.1_@svgr+core@6.2.1
+      '@svgr/plugin-svgo': 6.2.0_@svgr+core@6.2.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@swc/cli/0.1.57_@swc+core@1.2.210:
+    resolution: {integrity: sha512-HxM8TqYHhAg+zp7+RdTU69bnkl4MWdt1ygyp6BDIPjTiaJVH6Dizn2ezbgDS8mnFZI1FyhKvxU/bbaUs8XhzQg==}
+    engines: {node: '>= 12.13'}
+    hasBin: true
+    peerDependencies:
+      '@swc/core': ^1.2.66
+      chokidar: ^3.5.1
+    peerDependenciesMeta:
+      chokidar:
+        optional: true
+    dependencies:
+      '@swc/core': 1.2.210
+      commander: 7.2.0
+      fast-glob: 3.2.11
+      slash: 3.0.0
+      source-map: 0.7.4
+    dev: true
+
+  /@swc/core-android-arm-eabi/1.2.210:
+    resolution: {integrity: sha512-JGPcCM9XixJIbCHP/fbI79pXTuU9C3V6AxolTy0zEhgNe7r59CiSVcGWN5t5dgkEuwApAxN2iNjJRmz4z+ALAg==}
+    engines: {node: '>=10'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    optional: true
+
+  /@swc/core-android-arm64/1.2.210:
+    resolution: {integrity: sha512-oP2b8LjZiMNrzOnoC/mVomksSiqQDrIsm4LxPAGTK1fWnbtITLF/Wj/St1wnUu98jZf5kvQP9AH3p2d3J6UaDA==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    optional: true
+
+  /@swc/core-darwin-arm64/1.2.210:
+    resolution: {integrity: sha512-7PEHF1AHRpVcMtttfOVtyjZq73VUVaLsBnTWUqdFv1toRu42n+CmnXm3brmnSwyi7TTtCU/nahunWNmBbJeG8A==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
+  /@swc/core-darwin-x64/1.2.210:
+    resolution: {integrity: sha512-FEPSgnzRy7X9SaDWtAQKfoodttG90GOyTKqBC/915SPhvuprSf3/PpX2NP63E44/GVgEoNzmNGGiUzbL5k70Dg==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
+  /@swc/core-freebsd-x64/1.2.210:
+    resolution: {integrity: sha512-nehrNTikTfY4H08VUjp20/U5/bt4PC/hi8Zthjz1A0evcIdA0WHajByFj0um/0lYmdF1K6T7A9UuaoOwPEAZ0A==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    optional: true
+
+  /@swc/core-linux-arm-gnueabihf/1.2.210:
+    resolution: {integrity: sha512-vbSQxZcPBJC2WqVWHZhZIPpv+8xoNug/Qv6FLFPcl735MeNRzgciKC1LlXuy6DNA0RqoCPPyzaK2jnwJyq4bSw==}
+    engines: {node: '>=10'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@swc/core-linux-arm64-gnu/1.2.210:
+    resolution: {integrity: sha512-gfItagFmC06q5Uu7WHf/O3n1yKhA7uAo9VPUcNDKKrOh/WSkMI2dxtoeo4u5xOuJWKWedGCcdyJw46uhpYST0w==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@swc/core-linux-arm64-musl/1.2.210:
+    resolution: {integrity: sha512-3nlNHIYiuppJBB+bbaxLfGN/mnofaVvKVEwUQ9HPtghY87zFIsKl1RfNQtxcOlcarcWya1XAMSk9NXv2dFHWDg==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@swc/core-linux-x64-gnu/1.2.210:
+    resolution: {integrity: sha512-BmhfneSvUzIufUhPaql3YvoWlSrNZiAhpL3c5fPrfQxADywkZLljgh0kckxpeCi5R8iWIUlNSPFmo589QS2Jsg==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@swc/core-linux-x64-musl/1.2.210:
+    resolution: {integrity: sha512-0VT7FeF4Vc/u0oxVLplF/0hcApE+fwC4Njf49SFyvszgAMc9a+fyUNBX2NSqIrTQFwmifRcpQOeXDT8Edy0g6w==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@swc/core-win32-arm64-msvc/1.2.210:
+    resolution: {integrity: sha512-MwM35TtzMX7GS424y/Bk0CrwWsYRfZ/WX15QAi/Yz+fnPCDLtFNknRC7gAaTpDeqywu6dsXUFyErzK1FC8l8YA==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    optional: true
+
+  /@swc/core-win32-ia32-msvc/1.2.210:
+    resolution: {integrity: sha512-KpofYa0wqd8urFLrdsz0yQU2YkF7NEDU3+IzqUNnxwamlaEFg/C3l6rTgmiihHXIZuYQS9di4YwykyMVVXutOA==}
+    engines: {node: '>=10'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    optional: true
+
+  /@swc/core-win32-x64-msvc/1.2.210:
+    resolution: {integrity: sha512-bUhY0bK8s+B6LSdbNu9L0RKrO/rWrXICtIZyHZolUZKo326hfQ0Iwx+N/xuh6jYpON0RaY9pR0HAyaCDHugoRA==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    optional: true
+
+  /@swc/core/1.2.210:
+    resolution: {integrity: sha512-euiCxnx+dCnE6iDGM04hIvcLS2LADVgIDo0OGnxqRce4SwUNHZi/KcRxIT04YtJd3BdO5v+l4K8RHIx4jvn+TA==}
+    engines: {node: '>=10'}
+    hasBin: true
+    optionalDependencies:
+      '@swc/core-android-arm-eabi': 1.2.210
+      '@swc/core-android-arm64': 1.2.210
+      '@swc/core-darwin-arm64': 1.2.210
+      '@swc/core-darwin-x64': 1.2.210
+      '@swc/core-freebsd-x64': 1.2.210
+      '@swc/core-linux-arm-gnueabihf': 1.2.210
+      '@swc/core-linux-arm64-gnu': 1.2.210
+      '@swc/core-linux-arm64-musl': 1.2.210
+      '@swc/core-linux-x64-gnu': 1.2.210
+      '@swc/core-linux-x64-musl': 1.2.210
+      '@swc/core-win32-arm64-msvc': 1.2.210
+      '@swc/core-win32-ia32-msvc': 1.2.210
+      '@swc/core-win32-x64-msvc': 1.2.210
+
+  /@swc/helpers/0.4.2:
+    resolution: {integrity: sha512-556Az0VX7WR6UdoTn4htt/l3zPQ7bsQWK+HqdG4swV7beUCxo/BqmvbOpUkTIm/9ih86LIf1qsUnywNL3obGHw==}
+    dependencies:
+      tslib: 2.4.0
+
+  /@swc/helpers/0.4.3:
+    resolution: {integrity: sha512-6JrF+fdUK2zbGpJIlN7G3v966PQjyx/dPt1T9km2wj+EUBqgrxCk3uX4Kct16MIm9gGxfKRcfax2hVf5jvlTzA==}
+    dependencies:
+      tslib: 2.4.0
+    dev: true
+
+  /@swc/jest/0.2.21_@swc+core@1.2.210:
+    resolution: {integrity: sha512-/+NcExiZbxXANNhNPnIdFuGq62CeumulLS1bngwqIXd8H7d96LFUfrYzdt8tlTwLMel8tFtQ5aRjzVkyOTyPDw==}
+    engines: {npm: '>= 7.0.0'}
+    peerDependencies:
+      '@swc/core': '*'
+    dependencies:
+      '@jest/create-cache-key-function': 27.5.1
+      '@swc/core': 1.2.210
+    dev: true
+
+  /@szmarczak/http-timer/5.0.1:
+    resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==}
+    engines: {node: '>=14.16'}
+    dependencies:
+      defer-to-connect: 2.0.1
+    dev: false
+
+  /@testing-library/dom/8.14.0:
+    resolution: {integrity: sha512-m8FOdUo77iMTwVRCyzWcqxlEIk+GnopbrRI15a0EaLbpZSCinIVI4kSQzWhkShK83GogvEFJSsHF3Ws0z1vrqA==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@babel/runtime': 7.18.6
+      '@types/aria-query': 4.2.2
+      aria-query: 5.0.0
+      chalk: 4.1.2
+      dom-accessibility-api: 0.5.14
+      lz-string: 1.4.4
+      pretty-format: 27.5.1
+    dev: true
+
+  /@testing-library/react-hooks/8.0.1_5qggqhesezyescxqnsg4rpj6qa:
+    resolution: {integrity: sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      '@types/react': ^16.9.0 || ^17.0.0
+      react: ^16.9.0 || ^17.0.0
+      react-dom: ^16.9.0 || ^17.0.0
+      react-test-renderer: ^16.9.0 || ^17.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+      react-test-renderer:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      '@types/react': 18.0.14
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-error-boundary: 3.1.4_react@18.2.0
+      react-test-renderer: 18.2.0_react@18.2.0
+    dev: true
+
+  /@testing-library/react/13.3.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-DB79aA426+deFgGSjnf5grczDPiL4taK3hFaa+M5q7q20Kcve9eQottOG5kZ74KEr55v0tU2CQormSSDK87zYQ==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      '@testing-library/dom': 8.14.0
+      '@types/react-dom': 18.0.6
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: true
+
+  /@tldraw/core/1.14.1_mobx@6.6.1:
+    resolution: {integrity: sha512-FAiX/TD/tl5eMvTk0IHhFUSmldCe/UTTOnLL5aWQHqhicF/iTP5m3H12L6kyjN60yfssN8U9g4E/7y70TY7JxA==}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@tldraw/intersect': 1.7.1
+      '@tldraw/vec': 1.7.1
+      '@use-gesture/react': 10.2.16
+      mobx-react-lite: 3.4.0_mobx@6.6.1
+      perfect-freehand: 1.1.0
+      resize-observer-polyfill: 1.5.1
+    transitivePeerDependencies:
+      - mobx
+      - react-native
+    dev: false
+
+  /@tldraw/intersect/1.7.1:
+    resolution: {integrity: sha512-azJvJv4selqiQemipQE9Z1uax0j5XzIoHXQuRL4nm4EFiuS3n6jTTyWr9aQN3f7GgQbhcseq/ynytxfo9df02w==}
+    dependencies:
+      '@tldraw/vec': 1.7.1
+    dev: false
+
+  /@tldraw/vec/1.7.1:
+    resolution: {integrity: sha512-qM6Z9RvkLFFEzr91mmsA4HI14msyDgDDOu36csIzG5BYu2bFmEz5siQ8WntHgDtUjzJHP+VSSOTbAXhklEZHLA==}
+    dev: false
+
+  /@tootallnate/once/1.1.2:
+    resolution: {integrity: sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==}
+    engines: {node: '>= 6'}
+    dev: true
+
+  /@trysound/sax/0.2.0:
+    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
+    engines: {node: '>=10.13.0'}
+    dev: true
+
+  /@tsconfig/node10/1.0.9:
+    resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==}
+    dev: true
+
+  /@tsconfig/node12/1.0.11:
+    resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
+    dev: true
+
+  /@tsconfig/node14/1.0.3:
+    resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
+    dev: true
+
+  /@tsconfig/node16/1.0.3:
+    resolution: {integrity: sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==}
+    dev: true
+
+  /@types/aria-query/4.2.2:
+    resolution: {integrity: sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==}
+    dev: true
+
+  /@types/babel__core/7.1.19:
+    resolution: {integrity: sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw==}
+    dependencies:
+      '@babel/parser': 7.18.6
+      '@babel/types': 7.18.7
+      '@types/babel__generator': 7.6.4
+      '@types/babel__template': 7.4.1
+      '@types/babel__traverse': 7.17.1
+    dev: true
+
+  /@types/babel__generator/7.6.4:
+    resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==}
+    dependencies:
+      '@babel/types': 7.18.7
+    dev: true
+
+  /@types/babel__template/7.4.1:
+    resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==}
+    dependencies:
+      '@babel/parser': 7.18.6
+      '@babel/types': 7.18.7
+    dev: true
+
+  /@types/babel__traverse/7.17.1:
+    resolution: {integrity: sha512-kVzjari1s2YVi77D3w1yuvohV2idweYXMCDzqBiVNN63TcDWrIlTVOYpqVrvbbyOE/IyzBoTKF0fdnLPEORFxA==}
+    dependencies:
+      '@babel/types': 7.18.7
+    dev: true
+
+  /@types/body-parser/1.19.2:
+    resolution: {integrity: sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==}
+    dependencies:
+      '@types/connect': 3.4.35
+      '@types/node': 18.0.1
+    dev: true
+
+  /@types/bonjour/3.5.10:
+    resolution: {integrity: sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==}
+    dependencies:
+      '@types/node': 18.0.1
+    dev: true
+
+  /@types/cacheable-request/6.0.2:
+    resolution: {integrity: sha512-B3xVo+dlKM6nnKTcmm5ZtY/OL8bOAOd2Olee9M1zft65ox50OzjEHW91sDiU9j6cvW8Ejg1/Qkf4xd2kugApUA==}
+    dependencies:
+      '@types/http-cache-semantics': 4.0.1
+      '@types/keyv': 3.1.4
+      '@types/node': 18.0.1
+      '@types/responselike': 1.0.0
+    dev: false
+
+  /@types/codemirror/5.60.5:
+    resolution: {integrity: sha512-TiECZmm8St5YxjFUp64LK0c8WU5bxMDt9YaAek1UqUb9swrSCoJhh92fWu1p3mTEqlHjhB5sY7OFBhWroJXZVg==}
+    dependencies:
+      '@types/tern': 0.23.4
+    dev: true
+
+  /@types/connect-history-api-fallback/1.3.5:
+    resolution: {integrity: sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==}
+    dependencies:
+      '@types/express-serve-static-core': 4.17.29
+      '@types/node': 18.0.1
+    dev: true
+
+  /@types/connect/3.4.35:
+    resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==}
+    dependencies:
+      '@types/node': 18.0.1
+    dev: true
+
+  /@types/debug/4.1.7:
+    resolution: {integrity: sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==}
+    dependencies:
+      '@types/ms': 0.7.31
+    dev: true
+
+  /@types/diff/5.0.2:
+    resolution: {integrity: sha512-uw8eYMIReOwstQ0QKF0sICefSy8cNO/v7gOTiIy9SbwuHyEecJUm7qlgueOO5S1udZ5I/irVydHVwMchgzbKTg==}
+    dev: true
+
+  /@types/eslint-scope/3.7.4:
+    resolution: {integrity: sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==}
+    dependencies:
+      '@types/eslint': 8.4.5
+      '@types/estree': 0.0.51
+
+  /@types/eslint/8.4.5:
+    resolution: {integrity: sha512-dhsC09y1gpJWnK+Ff4SGvCuSnk9DaU0BJZSzOwa6GVSg65XtTugLBITDAAzRU5duGBoXBHpdR/9jHGxJjNflJQ==}
+    dependencies:
+      '@types/estree': 0.0.51
+      '@types/json-schema': 7.0.11
+
+  /@types/estree/0.0.39:
+    resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==}
+
+  /@types/estree/0.0.51:
+    resolution: {integrity: sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==}
+
+  /@types/estree/0.0.52:
+    resolution: {integrity: sha512-BZWrtCU0bMVAIliIV+HJO1f1PR41M7NKjfxrFJwwhKI1KwhwOxYw1SXg9ao+CIMt774nFuGiG6eU+udtbEI9oQ==}
+    dev: true
+
+  /@types/express-serve-static-core/4.17.29:
+    resolution: {integrity: sha512-uMd++6dMKS32EOuw1Uli3e3BPgdLIXmezcfHv7N4c1s3gkhikBplORPpMq3fuWkxncZN1reb16d5n8yhQ80x7Q==}
+    dependencies:
+      '@types/node': 18.0.1
+      '@types/qs': 6.9.7
+      '@types/range-parser': 1.2.4
+    dev: true
+
+  /@types/express/4.17.13:
+    resolution: {integrity: sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==}
+    dependencies:
+      '@types/body-parser': 1.19.2
+      '@types/express-serve-static-core': 4.17.29
+      '@types/qs': 6.9.7
+      '@types/serve-static': 1.13.10
+    dev: true
+
+  /@types/file-saver/2.0.5:
+    resolution: {integrity: sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==}
+    dev: true
+
+  /@types/flexsearch/0.7.3:
+    resolution: {integrity: sha512-HXwADeHEP4exXkCIwy2n1+i0f1ilP1ETQOH5KDOugjkTFZPntWo0Gr8stZOaebkxsdx+k0X/K6obU/+it07ocg==}
+    dev: false
+
+  /@types/fs-extra/8.1.2:
+    resolution: {integrity: sha512-SvSrYXfWSc7R4eqnOzbQF4TZmfpNSM9FrSWLU3EUnWBuyZqNBOrv1B1JA3byUDPUl9z4Ab3jeZG2eDdySlgNMg==}
+    dependencies:
+      '@types/node': 18.0.1
+    dev: true
+
+  /@types/glob/7.2.0:
+    resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
+    dependencies:
+      '@types/minimatch': 3.0.5
+      '@types/node': 18.0.1
+    dev: true
+
+  /@types/graceful-fs/4.1.5:
+    resolution: {integrity: sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==}
+    dependencies:
+      '@types/node': 18.0.1
+    dev: true
+
+  /@types/history/4.7.11:
+    resolution: {integrity: sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==}
+    dev: true
+
+  /@types/html-minifier-terser/6.1.0:
+    resolution: {integrity: sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==}
+    dev: true
+
+  /@types/http-cache-semantics/4.0.1:
+    resolution: {integrity: sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==}
+    dev: false
+
+  /@types/http-proxy/1.17.9:
+    resolution: {integrity: sha512-QsbSjA/fSk7xB+UXlCT3wHBy5ai9wOcNDWwZAtud+jXhwOM3l+EYZh8Lng4+/6n8uar0J7xILzqftJdJ/Wdfkw==}
+    dependencies:
+      '@types/node': 18.0.1
+    dev: true
+
+  /@types/is-hotkey/0.1.7:
+    resolution: {integrity: sha512-yB5C7zcOM7idwYZZ1wKQ3pTfjA9BbvFqRWvKB46GFddxnJtHwi/b9y84ykQtxQPg5qhdpg4Q/kWU3EGoCTmLzQ==}
+
+  /@types/is-url/1.2.30:
+    resolution: {integrity: sha512-AnlNFwjzC8XLda5VjRl4ItSd8qp8pSNowvsut0WwQyBWHpOxjxRJm8iO6uETWqEyLdYdb9/1j+Qd9gQ4l5I4fw==}
+    dev: true
+
+  /@types/istanbul-lib-coverage/2.0.4:
+    resolution: {integrity: sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==}
+    dev: true
+
+  /@types/istanbul-lib-report/3.0.0:
+    resolution: {integrity: sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==}
+    dependencies:
+      '@types/istanbul-lib-coverage': 2.0.4
+    dev: true
+
+  /@types/istanbul-reports/3.0.1:
+    resolution: {integrity: sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==}
+    dependencies:
+      '@types/istanbul-lib-report': 3.0.0
+    dev: true
+
+  /@types/jest/28.1.4:
+    resolution: {integrity: sha512-telv6G5N7zRJiLcI3Rs3o+ipZ28EnE+7EvF0pSrt2pZOMnAVI/f+6/LucDxOvcBcTeTL3JMF744BbVQAVBUQRA==}
+    dependencies:
+      jest-matcher-utils: 28.1.1
+      pretty-format: 28.1.1
+    dev: true
+
+  /@types/js-cookie/2.2.7:
+    resolution: {integrity: sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==}
+    dev: false
+
+  /@types/json-buffer/3.0.0:
+    resolution: {integrity: sha512-3YP80IxxFJB4b5tYC2SUPwkg0XQLiu0nWvhRgEatgjf+29IcWO9X1k8xRv5DGssJ/lCrjYTjQPcobJr2yWIVuQ==}
+    dev: false
+
+  /@types/json-schema/7.0.11:
+    resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
+
+  /@types/json5/0.0.29:
+    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+    dev: true
+
+  /@types/keyv/3.1.4:
+    resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
+    dependencies:
+      '@types/node': 18.0.1
+    dev: false
+
+  /@types/lodash-es/4.17.6:
+    resolution: {integrity: sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==}
+    dependencies:
+      '@types/lodash': 4.14.182
+    dev: true
+
+  /@types/lodash/4.14.182:
+    resolution: {integrity: sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==}
+
+  /@types/long/4.0.2:
+    resolution: {integrity: sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA==}
+    dev: true
+
+  /@types/mime/1.3.2:
+    resolution: {integrity: sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==}
+    dev: true
+
+  /@types/minimatch/3.0.5:
+    resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==}
+    dev: true
+
+  /@types/ms/0.7.31:
+    resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}
+    dev: true
+
+  /@types/node/18.0.1:
+    resolution: {integrity: sha512-CmR8+Tsy95hhwtZBKJBs0/FFq4XX7sDZHlGGf+0q+BRZfMbOTkzkj0AFAuTyXbObDIoanaBBW0+KEW+m3N16Wg==}
+
+  /@types/npmlog/4.1.4:
+    resolution: {integrity: sha512-WKG4gTr8przEZBiJ5r3s8ZIAoMXNbOgQ+j/d5O4X3x6kZJRLNvyUJuUK/KoG3+8BaOHPhp2m7WC6JKKeovDSzQ==}
+    dev: true
+
+  /@types/parse-json/4.0.0:
+    resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
+
+  /@types/prettier/2.6.3:
+    resolution: {integrity: sha512-ymZk3LEC/fsut+/Q5qejp6R9O1rMxz3XaRHDV6kX8MrGAhOSPqVARbDi+EZvInBpw+BnCX3TD240byVkOfQsHg==}
+    dev: true
+
+  /@types/prop-types/15.7.5:
+    resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
+
+  /@types/qs/6.9.7:
+    resolution: {integrity: sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==}
+    dev: true
+
+  /@types/range-parser/1.2.4:
+    resolution: {integrity: sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==}
+    dev: true
+
+  /@types/react-date-range/1.4.4:
+    resolution: {integrity: sha512-9Y9NyNgaCsEVN/+O4HKuxzPbVjRVBGdOKRxMDcsTRWVG62lpYgnxefNckTXDWup8FvczoqPW0+ESZR6R1yymDg==}
+    dependencies:
+      '@types/react': 18.0.14
+      date-fns: 2.28.0
+    dev: false
+
+  /@types/react-dom/18.0.6:
+    resolution: {integrity: sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==}
+    dependencies:
+      '@types/react': 18.0.14
+    dev: true
+
+  /@types/react-is/17.0.3:
+    resolution: {integrity: sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==}
+    dependencies:
+      '@types/react': 18.0.14
+    dev: false
+
+  /@types/react-resizable/3.0.1:
+    resolution: {integrity: sha512-3Wpj2j1XH+FrjTOb4C8K3e66XfJYTKAtZO7RUq3oTPEFiWsvsOijAheIgwyLMmrym4+Ky0CwFFh6OvEIV4DMng==}
+    dependencies:
+      '@types/react': 18.0.14
+    dev: true
+
+  /@types/react-router-dom/5.3.3:
+    resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==}
+    dependencies:
+      '@types/history': 4.7.11
+      '@types/react': 18.0.14
+      '@types/react-router': 5.1.18
+    dev: true
+
+  /@types/react-router/5.1.18:
+    resolution: {integrity: sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g==}
+    dependencies:
+      '@types/history': 4.7.11
+      '@types/react': 18.0.14
+    dev: true
+
+  /@types/react-transition-group/4.4.5:
+    resolution: {integrity: sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==}
+    dependencies:
+      '@types/react': 18.0.14
+    dev: false
+
+  /@types/react-window/1.8.5:
+    resolution: {integrity: sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==}
+    dependencies:
+      '@types/react': 18.0.14
+    dev: true
+
+  /@types/react/18.0.14:
+    resolution: {integrity: sha512-x4gGuASSiWmo0xjDLpm5mPb52syZHJx02VKbqUKdLmKtAwIh63XClGsiTI1K6DO5q7ox4xAsQrU+Gl3+gGXF9Q==}
+    dependencies:
+      '@types/prop-types': 15.7.5
+      '@types/scheduler': 0.16.2
+      csstype: 3.1.0
+
+  /@types/resolve/1.17.1:
+    resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
+    dependencies:
+      '@types/node': 18.0.1
+    dev: true
+
+  /@types/responselike/1.0.0:
+    resolution: {integrity: sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==}
+    dependencies:
+      '@types/node': 18.0.1
+    dev: false
+
+  /@types/retry/0.12.0:
+    resolution: {integrity: sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==}
+    dev: true
+
+  /@types/scheduler/0.16.2:
+    resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
+
+  /@types/serve-index/1.9.1:
+    resolution: {integrity: sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==}
+    dependencies:
+      '@types/express': 4.17.13
+    dev: true
+
+  /@types/serve-static/1.13.10:
+    resolution: {integrity: sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==}
+    dependencies:
+      '@types/mime': 1.3.2
+      '@types/node': 18.0.1
+    dev: true
+
+  /@types/sockjs/0.3.33:
+    resolution: {integrity: sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==}
+    dependencies:
+      '@types/node': 18.0.1
+    dev: true
+
+  /@types/stack-utils/2.0.1:
+    resolution: {integrity: sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==}
+    dev: true
+
+  /@types/tern/0.23.4:
+    resolution: {integrity: sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==}
+    dependencies:
+      '@types/estree': 0.0.52
+    dev: true
+
+  /@types/tinycolor2/1.4.3:
+    resolution: {integrity: sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ==}
+    dev: true
+
+  /@types/turndown/5.0.1:
+    resolution: {integrity: sha512-N8Ad4e3oJxh9n9BiZx9cbe/0M3kqDpOTm2wzj13wdDUxDPjfjloWIJaquZzWE1cYTAHpjOH3rcTnXQdpEfS/SQ==}
+    dev: true
+
+  /@types/uuid/8.3.4:
+    resolution: {integrity: sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==}
+    dev: true
+
+  /@types/wicg-file-system-access/2020.9.5:
+    resolution: {integrity: sha512-UYK244awtmcUYQfs7FR8710MJcefL2WvkyHMjA8yJzxd1mo0Gfn88sRZ1Bls7hiUhA2w7ne1gpJ9T5g3G0wOyA==}
+    dev: true
+
+  /@types/ws/8.5.3:
+    resolution: {integrity: sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==}
+    dependencies:
+      '@types/node': 18.0.1
+    dev: true
+
+  /@types/yargs-parser/21.0.0:
+    resolution: {integrity: sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==}
+    dev: true
+
+  /@types/yargs/16.0.4:
+    resolution: {integrity: sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==}
+    dependencies:
+      '@types/yargs-parser': 21.0.0
+    dev: true
+
+  /@types/yargs/17.0.10:
+    resolution: {integrity: sha512-gmEaFwpj/7f/ROdtIlci1R1VYU1J4j95m8T+Tj3iBgiBFKg1foE/PSl93bBd5T9LDXNPo8UlNN6W0qwD8O5OaA==}
+    dependencies:
+      '@types/yargs-parser': 21.0.0
+    dev: true
+
+  /@typescript-eslint/eslint-plugin/5.30.5_6zdoc3rn4mpiddqwhppni2mnnm:
+    resolution: {integrity: sha512-lftkqRoBvc28VFXEoRgyZuztyVUQ04JvUnATSPtIRFAccbXTWL6DEtXGYMcbg998kXw1NLUJm7rTQ9eUt+q6Ig==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^5.0.0
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
+      '@typescript-eslint/scope-manager': 5.30.5
+      '@typescript-eslint/type-utils': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
+      '@typescript-eslint/utils': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
+      debug: 4.3.4
+      eslint: 8.19.0
+      functional-red-black-tree: 1.0.1
+      ignore: 5.2.0
+      regexpp: 3.2.0
+      semver: 7.3.7
+      tsutils: 3.21.0_typescript@4.7.4
+      typescript: 4.7.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/experimental-utils/5.30.5_4x5o4skxv6sl53vpwefgt23khm:
+    resolution: {integrity: sha512-lsOedOkwAHWiJyvQsv9DtvWnANWecf28eO/L1EPNxLIBRoB7UCDa0uZF61IikZHYubGnDLLHDQ/6KFWl4Nrnjg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      '@typescript-eslint/utils': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
+      eslint: 8.19.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /@typescript-eslint/parser/5.30.5_4x5o4skxv6sl53vpwefgt23khm:
+    resolution: {integrity: sha512-zj251pcPXI8GO9NDKWWmygP6+UjwWmrdf9qMW/L/uQJBM/0XbU2inxe5io/234y/RCvwpKEYjZ6c1YrXERkK4Q==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/scope-manager': 5.30.5
+      '@typescript-eslint/types': 5.30.5
+      '@typescript-eslint/typescript-estree': 5.30.5_typescript@4.7.4
+      debug: 4.3.4
+      eslint: 8.19.0
+      typescript: 4.7.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/scope-manager/5.30.5:
+    resolution: {integrity: sha512-NJ6F+YHHFT/30isRe2UTmIGGAiXKckCyMnIV58cE3JkHmaD6e5zyEYm5hBDv0Wbin+IC0T1FWJpD3YqHUG/Ydg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      '@typescript-eslint/types': 5.30.5
+      '@typescript-eslint/visitor-keys': 5.30.5
+    dev: true
+
+  /@typescript-eslint/type-utils/5.30.5_4x5o4skxv6sl53vpwefgt23khm:
+    resolution: {integrity: sha512-k9+ejlv1GgwN1nN7XjVtyCgE0BTzhzT1YsQF0rv4Vfj2U9xnslBgMYYvcEYAFVdvhuEscELJsB7lDkN7WusErw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '*'
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/utils': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
+      debug: 4.3.4
+      eslint: 8.19.0
+      tsutils: 3.21.0_typescript@4.7.4
+      typescript: 4.7.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/types/5.30.5:
+    resolution: {integrity: sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
+  /@typescript-eslint/typescript-estree/5.30.5_typescript@4.7.4:
+    resolution: {integrity: sha512-qGTc7QZC801kbYjAr4AgdOfnokpwStqyhSbiQvqGBLixniAKyH+ib2qXIVo4P9NgGzwyfD9I0nlJN7D91E1VpQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 5.30.5
+      '@typescript-eslint/visitor-keys': 5.30.5
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      semver: 7.3.7
+      tsutils: 3.21.0_typescript@4.7.4
+      typescript: 4.7.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/utils/5.30.5_4x5o4skxv6sl53vpwefgt23khm:
+    resolution: {integrity: sha512-o4SSUH9IkuA7AYIfAvatldovurqTAHrfzPApOZvdUq01hHojZojCFXx06D/aFpKCgWbMPRdJBWAC3sWp3itwTA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      '@types/json-schema': 7.0.11
+      '@typescript-eslint/scope-manager': 5.30.5
+      '@typescript-eslint/types': 5.30.5
+      '@typescript-eslint/typescript-estree': 5.30.5_typescript@4.7.4
+      eslint: 8.19.0
+      eslint-scope: 5.1.1
+      eslint-utils: 3.0.0_eslint@8.19.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /@typescript-eslint/visitor-keys/5.30.5:
+    resolution: {integrity: sha512-D+xtGo9HUMELzWIUqcQc0p2PO4NyvTrgIOK/VnSH083+8sq0tiLozNRKuLarwHYGRuA6TVBQSuuLwJUDWd3aaA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      '@typescript-eslint/types': 5.30.5
+      eslint-visitor-keys: 3.3.0
+    dev: true
+
+  /@use-gesture/core/10.2.16:
+    resolution: {integrity: sha512-2J2GICmrSA6RwcowqzL0TY6S8bJY35KhLnE0YjBIVobQL2RilSDefXTKMxxyontp2mALDeeYAHh9ZLu+vMaq8Q==}
+    dev: false
+
+  /@use-gesture/react/10.2.16:
+    resolution: {integrity: sha512-kkWi97SHzj/F6XqRXSyrk5pLoSiuRgqvnQl2Bawmf05dWo2q6DL7v5LhnnyPNZRVkCm+WEb3e1nsR+iVza1vmg==}
+    peerDependencies:
+      react: '>= 16.8.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      '@use-gesture/core': 10.2.16
+    dev: false
+
+  /@webassemblyjs/ast/1.11.1:
+    resolution: {integrity: sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==}
+    dependencies:
+      '@webassemblyjs/helper-numbers': 1.11.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.11.1
+
+  /@webassemblyjs/floating-point-hex-parser/1.11.1:
+    resolution: {integrity: sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==}
+
+  /@webassemblyjs/helper-api-error/1.11.1:
+    resolution: {integrity: sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==}
+
+  /@webassemblyjs/helper-buffer/1.11.1:
+    resolution: {integrity: sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==}
+
+  /@webassemblyjs/helper-numbers/1.11.1:
+    resolution: {integrity: sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==}
+    dependencies:
+      '@webassemblyjs/floating-point-hex-parser': 1.11.1
+      '@webassemblyjs/helper-api-error': 1.11.1
+      '@xtuc/long': 4.2.2
+
+  /@webassemblyjs/helper-wasm-bytecode/1.11.1:
+    resolution: {integrity: sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==}
+
+  /@webassemblyjs/helper-wasm-section/1.11.1:
+    resolution: {integrity: sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==}
+    dependencies:
+      '@webassemblyjs/ast': 1.11.1
+      '@webassemblyjs/helper-buffer': 1.11.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.11.1
+      '@webassemblyjs/wasm-gen': 1.11.1
+
+  /@webassemblyjs/ieee754/1.11.1:
+    resolution: {integrity: sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==}
+    dependencies:
+      '@xtuc/ieee754': 1.2.0
+
+  /@webassemblyjs/leb128/1.11.1:
+    resolution: {integrity: sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==}
+    dependencies:
+      '@xtuc/long': 4.2.2
+
+  /@webassemblyjs/utf8/1.11.1:
+    resolution: {integrity: sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==}
+
+  /@webassemblyjs/wasm-edit/1.11.1:
+    resolution: {integrity: sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==}
+    dependencies:
+      '@webassemblyjs/ast': 1.11.1
+      '@webassemblyjs/helper-buffer': 1.11.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.11.1
+      '@webassemblyjs/helper-wasm-section': 1.11.1
+      '@webassemblyjs/wasm-gen': 1.11.1
+      '@webassemblyjs/wasm-opt': 1.11.1
+      '@webassemblyjs/wasm-parser': 1.11.1
+      '@webassemblyjs/wast-printer': 1.11.1
+
+  /@webassemblyjs/wasm-gen/1.11.1:
+    resolution: {integrity: sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==}
+    dependencies:
+      '@webassemblyjs/ast': 1.11.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.11.1
+      '@webassemblyjs/ieee754': 1.11.1
+      '@webassemblyjs/leb128': 1.11.1
+      '@webassemblyjs/utf8': 1.11.1
+
+  /@webassemblyjs/wasm-opt/1.11.1:
+    resolution: {integrity: sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==}
+    dependencies:
+      '@webassemblyjs/ast': 1.11.1
+      '@webassemblyjs/helper-buffer': 1.11.1
+      '@webassemblyjs/wasm-gen': 1.11.1
+      '@webassemblyjs/wasm-parser': 1.11.1
+
+  /@webassemblyjs/wasm-parser/1.11.1:
+    resolution: {integrity: sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==}
+    dependencies:
+      '@webassemblyjs/ast': 1.11.1
+      '@webassemblyjs/helper-api-error': 1.11.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.11.1
+      '@webassemblyjs/ieee754': 1.11.1
+      '@webassemblyjs/leb128': 1.11.1
+      '@webassemblyjs/utf8': 1.11.1
+
+  /@webassemblyjs/wast-printer/1.11.1:
+    resolution: {integrity: sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==}
+    dependencies:
+      '@webassemblyjs/ast': 1.11.1
+      '@xtuc/long': 4.2.2
+
+  /@xobotyi/scrollbar-width/1.9.5:
+    resolution: {integrity: sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==}
+    dev: false
+
+  /@xtuc/ieee754/1.2.0:
+    resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
+
+  /@xtuc/long/4.2.2:
+    resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
+
+  /@yarn-tool/resolve-package/1.0.47:
+    resolution: {integrity: sha512-Zaw58gQxjQceJqhqybJi1oUDaORT8i2GTgwICPs8v/X/Pkx35FXQba69ldHVg5pQZ6YLKpROXgyHvBaCJOFXiA==}
+    dependencies:
+      pkg-dir: 5.0.0
+      tslib: 2.4.0
+      upath2: 3.1.13
+    dev: true
+
+  /abab/2.0.6:
+    resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
+    dev: true
+
+  /abstract-level/1.0.3:
+    resolution: {integrity: sha512-t6jv+xHy+VYwc4xqZMn2Pa9DjcdzvzZmQGRjTFc8spIbRGHgBrEKbPq+rYXc7CCo0lxgYvSgKVg9qZAhpVQSjA==}
+    engines: {node: '>=12'}
+    dependencies:
+      buffer: 6.0.3
+      catering: 2.1.1
+      is-buffer: 2.0.5
+      level-supports: 4.0.1
+      level-transcoder: 1.0.1
+      module-error: 1.0.2
+      queue-microtask: 1.2.3
+    dev: false
+
+  /accepts/1.3.8:
+    resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-types: 2.1.35
+      negotiator: 0.6.3
+    dev: true
+
+  /acorn-globals/6.0.0:
+    resolution: {integrity: sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==}
+    dependencies:
+      acorn: 7.4.1
+      acorn-walk: 7.2.0
+    dev: true
+
+  /acorn-import-assertions/1.8.0_acorn@8.7.1:
+    resolution: {integrity: sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==}
+    peerDependencies:
+      acorn: ^8
+    dependencies:
+      acorn: 8.7.1
+
+  /acorn-jsx/5.3.2_acorn@8.7.1:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      acorn: 8.7.1
+    dev: true
+
+  /acorn-walk/7.2.0:
+    resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
+    engines: {node: '>=0.4.0'}
+    dev: true
+
+  /acorn-walk/8.2.0:
+    resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
+    engines: {node: '>=0.4.0'}
+    dev: true
+
+  /acorn/7.4.1:
+    resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: true
+
+  /acorn/8.7.1:
+    resolution: {integrity: sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  /agent-base/6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+    engines: {node: '>= 6.0.0'}
+    dependencies:
+      debug: 4.3.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /aggregate-error/3.1.0:
+    resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==}
+    engines: {node: '>=8'}
+    dependencies:
+      clean-stack: 2.2.0
+      indent-string: 4.0.0
+    dev: true
+
+  /ajv-formats/2.1.1:
+    resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+    dependencies:
+      ajv: 8.11.0
+    dev: true
+
+  /ajv-keywords/3.5.2_ajv@6.12.6:
+    resolution: {integrity: sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==}
+    peerDependencies:
+      ajv: ^6.9.1
+    dependencies:
+      ajv: 6.12.6
+
+  /ajv-keywords/5.1.0_ajv@8.11.0:
+    resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==}
+    peerDependencies:
+      ajv: ^8.8.2
+    dependencies:
+      ajv: 8.11.0
+      fast-deep-equal: 3.1.3
+    dev: true
+
+  /ajv/6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  /ajv/8.11.0:
+    resolution: {integrity: sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+      uri-js: 4.4.1
+    dev: true
+
+  /ajv/8.9.0:
+    resolution: {integrity: sha512-qOKJyNj/h+OWx7s5DePL6Zu1KeM9jPZhwBqs+7DzP6bGOvqzVCSf0xueYmVuaC/oQ/VtS2zLMLHdQFbkka+XDQ==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+      uri-js: 4.4.1
+    dev: true
+
+  /ansi-colors/4.1.3:
+    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /ansi-escapes/3.2.0:
+    resolution: {integrity: sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /ansi-escapes/4.3.2:
+    resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      type-fest: 0.21.3
+    dev: true
+
+  /ansi-html-community/0.0.8:
+    resolution: {integrity: sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==}
+    engines: {'0': node >= 0.8.0}
+    hasBin: true
+    dev: true
+
+  /ansi-regex/2.1.1:
+    resolution: {integrity: sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /ansi-regex/3.0.1:
+    resolution: {integrity: sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /ansi-regex/4.1.1:
+    resolution: {integrity: sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /ansi-regex/5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  /ansi-regex/6.0.1:
+    resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /ansi-styles/3.2.1:
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+    engines: {node: '>=4'}
+    dependencies:
+      color-convert: 1.9.3
+
+  /ansi-styles/4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+    dependencies:
+      color-convert: 2.0.1
+
+  /ansi-styles/5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /ansi-styles/6.1.0:
+    resolution: {integrity: sha512-VbqNsoz55SYGczauuup0MFUyXNQviSpFTj1RQtFzmQLk18qbVSpTFFGMT293rmDaQuKCT6InmbuEyUne4mTuxQ==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /antd/4.21.5:
+    resolution: {integrity: sha512-S6L29rmbiQvE4/kn1hPBscHFZ405Pbtuw3DCpXVnMt409JtY6sDaUbUcWfl4i21XkABEogKzqxjYVGogf1QIWQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@ant-design/colors': 6.0.0
+      '@ant-design/icons': 4.7.0
+      '@ant-design/react-slick': 0.29.2
+      '@babel/runtime': 7.18.6
+      '@ctrl/tinycolor': 3.4.1
+      classnames: 2.3.1
+      copy-to-clipboard: 3.3.1
+      lodash: 4.17.21
+      memoize-one: 6.0.0
+      moment: 2.29.3
+      rc-cascader: 3.6.1
+      rc-checkbox: 2.3.2
+      rc-collapse: 3.3.1
+      rc-dialog: 8.9.0
+      rc-drawer: 4.4.3
+      rc-dropdown: 4.0.1
+      rc-field-form: 1.26.7
+      rc-image: 5.7.0
+      rc-input: 0.0.1-alpha.7
+      rc-input-number: 7.3.4
+      rc-mentions: 1.8.0
+      rc-menu: 9.6.0
+      rc-motion: 2.6.0
+      rc-notification: 4.6.0
+      rc-pagination: 3.1.17
+      rc-picker: 2.6.10
+      rc-progress: 3.3.3
+      rc-rate: 2.9.2
+      rc-resize-observer: 1.2.0
+      rc-segmented: 2.1.0
+      rc-select: 14.1.8
+      rc-slider: 10.0.0
+      rc-steps: 4.1.4
+      rc-switch: 3.2.2
+      rc-table: 7.24.3
+      rc-tabs: 11.16.0
+      rc-textarea: 0.3.7
+      rc-tooltip: 5.1.1
+      rc-tree: 5.6.5
+      rc-tree-select: 5.4.0
+      rc-trigger: 5.3.1
+      rc-upload: 4.3.4
+      rc-util: 5.22.5
+      scroll-into-view-if-needed: 2.2.29
+    dev: false
+
+  /anymatch/3.1.2:
+    resolution: {integrity: sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==}
+    engines: {node: '>= 8'}
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+    dev: true
+
+  /aproba/1.2.0:
+    resolution: {integrity: sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==}
+    dev: true
+
+  /are-we-there-yet/1.1.7:
+    resolution: {integrity: sha512-nxwy40TuMiUGqMyRHgCSWZ9FM4VAoRP4xUYSTv5ImRog+h9yISPbVH7H8fASCIzYn9wlEv4zvFL7uKDMCFQm3g==}
+    dependencies:
+      delegates: 1.0.0
+      readable-stream: 2.3.7
+    dev: true
+
+  /arg/4.1.3:
+    resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
+    dev: true
+
+  /argparse/1.0.10:
+    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
+    dependencies:
+      sprintf-js: 1.0.3
+    dev: true
+
+  /argparse/2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+    dev: true
+
+  /aria-query/4.2.2:
+    resolution: {integrity: sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==}
+    engines: {node: '>=6.0'}
+    dependencies:
+      '@babel/runtime': 7.18.6
+      '@babel/runtime-corejs3': 7.18.6
+    dev: true
+
+  /aria-query/5.0.0:
+    resolution: {integrity: sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==}
+    engines: {node: '>=6.0'}
+    dev: true
+
+  /array-flatten/1.1.1:
+    resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
+    dev: true
+
+  /array-flatten/2.1.2:
+    resolution: {integrity: sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==}
+    dev: true
+
+  /array-includes/3.1.5:
+    resolution: {integrity: sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+      get-intrinsic: 1.1.2
+      is-string: 1.0.7
+    dev: true
+
+  /array-tree-filter/2.1.0:
+    resolution: {integrity: sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==}
+    dev: false
+
+  /array-union/2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /array.prototype.flat/1.3.0:
+    resolution: {integrity: sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+      es-shim-unscopables: 1.0.0
+    dev: true
+
+  /array.prototype.flatmap/1.3.0:
+    resolution: {integrity: sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+      es-shim-unscopables: 1.0.0
+    dev: true
+
+  /assert/2.0.0:
+    resolution: {integrity: sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==}
+    dependencies:
+      es6-object-assign: 1.1.0
+      is-nan: 1.3.2
+      object-is: 1.1.5
+      util: 0.12.4
+    dev: false
+
+  /ast-types-flow/0.0.7:
+    resolution: {integrity: sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==}
+    dev: true
+
+  /astral-regex/2.0.0:
+    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /async-validator/4.2.5:
+    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
+    dev: false
+
+  /async/2.6.4:
+    resolution: {integrity: sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==}
+    dependencies:
+      lodash: 4.17.21
+    dev: true
+
+  /async/3.2.4:
+    resolution: {integrity: sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==}
+    dev: true
+
+  /asynckit/0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+    dev: true
+
+  /at-least-node/1.0.0:
+    resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
+    engines: {node: '>= 4.0.0'}
+    dev: true
+
+  /atob/2.1.2:
+    resolution: {integrity: sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==}
+    engines: {node: '>= 4.5.0'}
+    hasBin: true
+    dev: true
+
+  /authing-js-sdk/4.23.32:
+    resolution: {integrity: sha512-zyUoRszXmdgCSn3S9fzVJSn8cMWMAmpUDtW+aYVMuIOdfyRFwfkGCVpffPbMHc3FcCrcE2AcUYOA9u78RXjs5w==}
+    engines: {node: '>=8.9'}
+    dependencies:
+      axios: 0.19.2
+      crypto-js: 4.1.1
+      jsencrypt: 3.2.1
+      jwt-decode: 2.2.0
+      sm-crypto: 0.3.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /authing-js-sdk/4.23.33:
+    resolution: {integrity: sha512-VdQa/5IWHv4CJGWbFmCsMhmmbjBhBI2lBDLYaCsdsGtOsPHzxFFpWV+k5riL4NcD7ALU1NCD367WpFBdQJpDuQ==}
+    engines: {node: '>=8.9'}
+    dependencies:
+      axios: 0.19.2
+      crypto-js: 4.1.1
+      jsencrypt: 3.2.1
+      jwt-decode: 2.2.0
+      sm-crypto: 0.3.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /autoprefixer/10.4.7_postcss@8.4.14:
+    resolution: {integrity: sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      browserslist: 4.21.1
+      caniuse-lite: 1.0.30001363
+      fraction.js: 4.2.0
+      normalize-range: 0.1.2
+      picocolors: 1.0.0
+      postcss: 8.4.14
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /available-typed-arrays/1.0.5:
+    resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
+    engines: {node: '>= 0.4'}
+    dev: false
+
+  /aws-sdk/2.1168.0:
+    resolution: {integrity: sha512-9+WYoYTHHjLqeWdSSLbNpmc/NgnZpX4LGiyYjXenh4WNRBXshXI0XioTK8BQgDscVzB978EJV8kG1nZGE3USzw==}
+    engines: {node: '>= 10.0.0'}
+    dependencies:
+      buffer: 4.9.2
+      events: 1.1.1
+      ieee754: 1.1.13
+      jmespath: 0.16.0
+      querystring: 0.2.0
+      sax: 1.2.1
+      url: 0.10.3
+      uuid: 8.0.0
+      xml2js: 0.4.19
+    dev: false
+
+  /axe-core/4.4.2:
+    resolution: {integrity: sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /axios/0.19.2:
+    resolution: {integrity: sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==}
+    deprecated: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410
+    dependencies:
+      follow-redirects: 1.5.10
+    transitivePeerDependencies:
+      - supports-color
+
+  /axios/0.21.4:
+    resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
+    dependencies:
+      follow-redirects: 1.15.1
+    transitivePeerDependencies:
+      - debug
+    dev: true
+
+  /axobject-query/2.2.0:
+    resolution: {integrity: sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==}
+    dev: true
+
+  /babel-jest/27.5.1_@babel+core@7.18.6:
+    resolution: {integrity: sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    peerDependencies:
+      '@babel/core': ^7.8.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@jest/transform': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/babel__core': 7.1.19
+      babel-plugin-istanbul: 6.1.1
+      babel-preset-jest: 27.5.1_@babel+core@7.18.6
+      chalk: 4.1.0
+      graceful-fs: 4.2.10
+      slash: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-jest/28.1.2_@babel+core@7.18.6:
+    resolution: {integrity: sha512-pfmoo6sh4L/+5/G2OOfQrGJgvH7fTa1oChnuYH2G/6gA+JwDvO8PELwvwnofKBMNrQsam0Wy/Rw+QSrBNewq2Q==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    peerDependencies:
+      '@babel/core': ^7.8.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@jest/transform': 28.1.2
+      '@types/babel__core': 7.1.19
+      babel-plugin-istanbul: 6.1.1
+      babel-preset-jest: 28.1.1_@babel+core@7.18.6
+      chalk: 4.1.2
+      graceful-fs: 4.2.10
+      slash: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-loader/8.2.5_fswvdo7jykdwhfxrdcvghfn6pa:
+    resolution: {integrity: sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==}
+    engines: {node: '>= 8.9'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+      webpack: '>=2'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      find-cache-dir: 3.3.2
+      loader-utils: 2.0.2
+      make-dir: 3.1.0
+      schema-utils: 2.7.1
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /babel-plugin-const-enum/1.2.0_@babel+core@7.18.6:
+    resolution: {integrity: sha512-o1m/6iyyFnp9MRsK1dHF3bneqyf3AlM2q3A/YbgQr2pCat6B6XJVDv2TXqzfY2RYUi4mak6WAksSBPlyYGx9dg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      '@babel/plugin-syntax-typescript': 7.18.6_@babel+core@7.18.6
+      '@babel/traverse': 7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-dynamic-import-node/2.3.3:
+    resolution: {integrity: sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==}
+    dependencies:
+      object.assign: 4.1.2
+    dev: true
+
+  /babel-plugin-istanbul/6.1.1:
+    resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@babel/helper-plugin-utils': 7.18.6
+      '@istanbuljs/load-nyc-config': 1.1.0
+      '@istanbuljs/schema': 0.1.3
+      istanbul-lib-instrument: 5.2.0
+      test-exclude: 6.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-jest-hoist/27.5.1:
+    resolution: {integrity: sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@babel/template': 7.18.6
+      '@babel/types': 7.18.7
+      '@types/babel__core': 7.1.19
+      '@types/babel__traverse': 7.17.1
+    dev: true
+
+  /babel-plugin-jest-hoist/28.1.1:
+    resolution: {integrity: sha512-NovGCy5Hn25uMJSAU8FaHqzs13cFoOI4lhIujiepssjCKRsAo3TA734RDWSGxuFTsUJXerYOqQQodlxgmtqbzw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@babel/template': 7.18.6
+      '@babel/types': 7.18.7
+      '@types/babel__core': 7.1.19
+      '@types/babel__traverse': 7.17.1
+    dev: true
+
+  /babel-plugin-macros/2.8.0:
+    resolution: {integrity: sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==}
+    dependencies:
+      '@babel/runtime': 7.18.6
+      cosmiconfig: 6.0.0
+      resolve: 1.22.1
+
+  /babel-plugin-open-source/1.3.4:
+    resolution: {integrity: sha512-7lsfY30y/XYYbK4vYHfPyC/aF2KM0vz2OFaz6+tDuAg6A3223is7vqzFYd0va7n/YTw5osScevR0bQ4hO8gPQg==}
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-plugin-utils': 7.18.6
+      dotenv: 16.0.1
+      find-git-root: 1.0.4
+      git-remote-origin-url: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-polyfill-corejs2/0.3.1_@babel+core@7.18.6:
+    resolution: {integrity: sha512-v7/T6EQcNfVLfcN2X8Lulb7DjprieyLWJK/zOWH5DUYcAgex9sP3h25Q+DLsX9TloXe3y1O8l2q2Jv9q8UVB9w==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/compat-data': 7.18.6
+      '@babel/core': 7.18.6
+      '@babel/helper-define-polyfill-provider': 0.3.1_@babel+core@7.18.6
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-polyfill-corejs3/0.5.2_@babel+core@7.18.6:
+    resolution: {integrity: sha512-G3uJih0XWiID451fpeFaYGVuxHEjzKTHtc9uGFEjR6hHrvNzeS/PX+LLLcetJcytsB5m4j+K3o/EpXJNb/5IEQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-define-polyfill-provider': 0.3.1_@babel+core@7.18.6
+      core-js-compat: 3.23.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-polyfill-regenerator/0.3.1_@babel+core@7.18.6:
+    resolution: {integrity: sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/helper-define-polyfill-provider': 0.3.1_@babel+core@7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-transform-async-to-promises/0.8.18:
+    resolution: {integrity: sha512-WpOrF76nUHijnNn10eBGOHZmXQC8JYRME9rOLxStOga7Av2VO53ehVFvVNImMksVtQuL2/7ZNxEgxnx7oo/3Hw==}
+    dev: true
+
+  /babel-plugin-transform-typescript-metadata/0.3.2:
+    resolution: {integrity: sha512-mWEvCQTgXQf48yDqgN7CH50waTyYBeP2Lpqx4nNWab9sxEpdXVeKgfj1qYI2/TgUPQtNFZ85i3PemRtnXVYYJg==}
+    dependencies:
+      '@babel/helper-plugin-utils': 7.18.6
+    dev: true
+
+  /babel-preset-current-node-syntax/1.0.1_@babel+core@7.18.6:
+    resolution: {integrity: sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.18.6
+      '@babel/plugin-syntax-bigint': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-syntax-class-properties': 7.12.13_@babel+core@7.18.6
+      '@babel/plugin-syntax-import-meta': 7.10.4_@babel+core@7.18.6
+      '@babel/plugin-syntax-json-strings': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4_@babel+core@7.18.6
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-syntax-numeric-separator': 7.10.4_@babel+core@7.18.6
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.18.6
+      '@babel/plugin-syntax-top-level-await': 7.14.5_@babel+core@7.18.6
+    dev: true
+
+  /babel-preset-jest/27.5.1_@babel+core@7.18.6:
+    resolution: {integrity: sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      babel-plugin-jest-hoist: 27.5.1
+      babel-preset-current-node-syntax: 1.0.1_@babel+core@7.18.6
+    dev: true
+
+  /babel-preset-jest/28.1.1_@babel+core@7.18.6:
+    resolution: {integrity: sha512-FCq9Oud0ReTeWtcneYf/48981aTfXYuB9gbU4rBNNJVBSQ6ssv7E6v/qvbBxtOWwZFXjLZwpg+W3q7J6vhH25g==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      babel-plugin-jest-hoist: 28.1.1
+      babel-preset-current-node-syntax: 1.0.1_@babel+core@7.18.6
+    dev: true
+
+  /balanced-match/1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+    dev: true
+
+  /base64-js/1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+
+  /basic-auth/2.0.1:
+    resolution: {integrity: sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      safe-buffer: 5.1.2
+    dev: true
+
+  /batch/0.6.1:
+    resolution: {integrity: sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==}
+    dev: true
+
+  /big.js/5.2.2:
+    resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
+
+  /binary-extensions/2.2.0:
+    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /bl/4.1.0:
+    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
+    dependencies:
+      buffer: 5.7.1
+      inherits: 2.0.4
+      readable-stream: 3.6.0
+    dev: true
+
+  /bluebird/3.7.1:
+    resolution: {integrity: sha512-DdmyoGCleJnkbp3nkbxTLJ18rjDsE4yCggEwKNXkeV123sPNfOCYeDoeuOY+F2FrSjO1YXcTU+dsy96KMy+gcg==}
+    dev: true
+
+  /body-parser/1.20.0:
+    resolution: {integrity: sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==}
+    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
+    dependencies:
+      bytes: 3.1.2
+      content-type: 1.0.4
+      debug: 2.6.9
+      depd: 2.0.0
+      destroy: 1.2.0
+      http-errors: 2.0.0
+      iconv-lite: 0.4.24
+      on-finished: 2.4.1
+      qs: 6.10.3
+      raw-body: 2.5.1
+      type-is: 1.6.18
+      unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /bonjour-service/1.0.13:
+    resolution: {integrity: sha512-LWKRU/7EqDUC9CTAQtuZl5HzBALoCYwtLhffW3et7vZMwv3bWLpJf8bRYlMD5OCcDpTfnPgNCV4yo9ZIaJGMiA==}
+    dependencies:
+      array-flatten: 2.1.2
+      dns-equal: 1.0.0
+      fast-deep-equal: 3.1.3
+      multicast-dns: 7.2.5
+    dev: true
+
+  /boolbase/1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+    dev: true
+
+  /brace-expansion/1.1.11:
+    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+    dev: true
+
+  /brace-expansion/2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+    dependencies:
+      balanced-match: 1.0.2
+    dev: true
+
+  /braces/3.0.2:
+    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
+    engines: {node: '>=8'}
+    dependencies:
+      fill-range: 7.0.1
+    dev: true
+
+  /browser-level/1.0.1:
+    resolution: {integrity: sha512-XECYKJ+Dbzw0lbydyQuJzwNXtOpbMSq737qxJN11sIRTErOMShvDpbzTlgju7orJKvx4epULolZAuJGLzCmWRQ==}
+    dependencies:
+      abstract-level: 1.0.3
+      catering: 2.1.1
+      module-error: 1.0.2
+      run-parallel-limit: 1.1.0
+    dev: false
+
+  /browser-process-hrtime/1.0.0:
+    resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==}
+    dev: true
+
+  /browserslist/4.21.1:
+    resolution: {integrity: sha512-Nq8MFCSrnJXSc88yliwlzQe3qNe3VntIjhsArW9IJOEPSHNx23FalwApUVbzAWABLhYJJ7y8AynWI/XM8OdfjQ==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001363
+      electron-to-chromium: 1.4.179
+      node-releases: 2.0.5
+      update-browserslist-db: 1.0.4_browserslist@4.21.1
+
+  /bs-logger/0.2.6:
+    resolution: {integrity: sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==}
+    engines: {node: '>= 6'}
+    dependencies:
+      fast-json-stable-stringify: 2.1.0
+    dev: true
+
+  /bser/2.1.1:
+    resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==}
+    dependencies:
+      node-int64: 0.4.0
+    dev: true
+
+  /buffer-from/1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+
+  /buffer/4.9.2:
+    resolution: {integrity: sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==}
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.1.13
+      isarray: 1.0.0
+    dev: false
+
+  /buffer/5.7.1:
+    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+    dev: true
+
+  /buffer/6.0.3:
+    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+    dev: false
+
+  /builtin-modules/3.3.0:
+    resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /bytes/3.0.0:
+    resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
+  /bytes/3.1.2:
+    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
+  /cacheable-lookup/6.0.4:
+    resolution: {integrity: sha512-mbcDEZCkv2CZF4G01kr8eBd/5agkt9oCqz75tJMSIsquvRZ2sL6Hi5zGVKi/0OSC9oO1GHfJ2AV0ZIOY9vye0A==}
+    engines: {node: '>=10.6.0'}
+    dev: false
+
+  /cacheable-request/7.0.2:
+    resolution: {integrity: sha512-pouW8/FmiPQbuGpkXQ9BAPv/Mo5xDGANgSNXzTzJ8DrKGuXOssM4wIQRjfanNRh3Yu5cfYPvcorqbhg2KIJtew==}
+    engines: {node: '>=8'}
+    dependencies:
+      clone-response: 1.0.2
+      get-stream: 5.2.0
+      http-cache-semantics: 4.1.0
+      keyv: 4.3.2
+      lowercase-keys: 2.0.0
+      normalize-url: 6.1.0
+      responselike: 2.0.0
+    dev: false
+
+  /call-bind/1.0.2:
+    resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
+    dependencies:
+      function-bind: 1.1.1
+      get-intrinsic: 1.1.2
+
+  /callsites/3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  /camel-case/4.1.2:
+    resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==}
+    dependencies:
+      pascal-case: 3.1.2
+      tslib: 2.4.0
+    dev: true
+
+  /camelcase/5.3.1:
+    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /camelcase/6.3.0:
+    resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /caniuse-api/3.0.0:
+    resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
+    dependencies:
+      browserslist: 4.21.1
+      caniuse-lite: 1.0.30001363
+      lodash.memoize: 4.1.2
+      lodash.uniq: 4.5.0
+    dev: true
+
+  /caniuse-lite/1.0.30001363:
+    resolution: {integrity: sha512-HpQhpzTGGPVMnCjIomjt+jvyUu8vNFo3TaDiZ/RcoTrlOq/5+tC8zHdsbgFB6MxmaY+jCpsH09aD80Bb4Ow3Sg==}
+
+  /capital-case/1.0.4:
+    resolution: {integrity: sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==}
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.4.0
+      upper-case-first: 2.0.2
+    dev: true
+
+  /catering/2.1.1:
+    resolution: {integrity: sha512-K7Qy8O9p76sL3/3m7/zLKbRkyOlSZAgzEaLhyj2mXS8PsCud2Eo4hAb8aLtZqHh0QGqLcb9dlJSu6lHRVENm1w==}
+    engines: {node: '>=6'}
+    dev: false
+
+  /chalk/2.4.2:
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+
+  /chalk/4.1.0:
+    resolution: {integrity: sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+    dev: true
+
+  /chalk/4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+    dev: true
+
+  /change-case/4.1.2:
+    resolution: {integrity: sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==}
+    dependencies:
+      camel-case: 4.1.2
+      capital-case: 1.0.4
+      constant-case: 3.0.4
+      dot-case: 3.0.4
+      header-case: 2.0.4
+      no-case: 3.0.4
+      param-case: 3.0.4
+      pascal-case: 3.1.2
+      path-case: 3.0.4
+      sentence-case: 3.0.4
+      snake-case: 3.0.4
+      tslib: 2.4.0
+    dev: true
+
+  /char-regex/1.0.2:
+    resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /chardet/0.7.0:
+    resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
+    dev: true
+
+  /chokidar/3.5.3:
+    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
+    engines: {node: '>= 8.10.0'}
+    dependencies:
+      anymatch: 3.1.2
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
+  /chownr/2.0.0:
+    resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /chrome-trace-event/1.0.3:
+    resolution: {integrity: sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==}
+    engines: {node: '>=6.0'}
+
+  /ci-info/3.3.2:
+    resolution: {integrity: sha512-xmDt/QIAdeZ9+nfdPsaBCpMvHNLFiLdjj59qjqn+6iPe6YmHGQ35sBnQ8uslRBXFmXkiZQOJRjvQeoGppoTjjg==}
+    dev: true
+
+  /cjs-module-lexer/1.2.2:
+    resolution: {integrity: sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==}
+    dev: true
+
+  /classic-level/1.2.0:
+    resolution: {integrity: sha512-qw5B31ANxSluWz9xBzklRWTUAJ1SXIdaVKTVS7HcTGKOAmExx65Wo5BUICW+YGORe2FOUaDghoI9ZDxj82QcFg==}
+    engines: {node: '>=12'}
+    requiresBuild: true
+    dependencies:
+      abstract-level: 1.0.3
+      catering: 2.1.1
+      module-error: 1.0.2
+      napi-macros: 2.0.0
+      node-gyp-build: 4.5.0
+    dev: false
+
+  /classnames/2.3.1:
+    resolution: {integrity: sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==}
+    dev: false
+
+  /clean-css/5.3.0:
+    resolution: {integrity: sha512-YYuuxv4H/iNb1Z/5IbMRoxgrzjWGhOEFfd+groZ5dMCVkpENiMZmwspdrzBo9286JjM1gZJPAyL7ZIdzuvu2AQ==}
+    engines: {node: '>= 10.0'}
+    dependencies:
+      source-map: 0.6.1
+    dev: true
+
+  /clean-stack/2.2.0:
+    resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /cli-cursor/2.1.0:
+    resolution: {integrity: sha512-8lgKz8LmCRYZZQDpRyT2m5rKJ08TnU4tR9FFFW2rxpxR1FzWi4PQ/NfyODchAatHaUgnSPVcx/R5w6NuTBzFiw==}
+    engines: {node: '>=4'}
+    dependencies:
+      restore-cursor: 2.0.0
+    dev: true
+
+  /cli-cursor/3.1.0:
+    resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
+    engines: {node: '>=8'}
+    dependencies:
+      restore-cursor: 3.1.0
+    dev: true
+
+  /cli-spinners/2.6.1:
+    resolution: {integrity: sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /cli-truncate/2.1.0:
+    resolution: {integrity: sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==}
+    engines: {node: '>=8'}
+    dependencies:
+      slice-ansi: 3.0.0
+      string-width: 4.2.3
+    dev: true
+
+  /cli-truncate/3.1.0:
+    resolution: {integrity: sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      slice-ansi: 5.0.0
+      string-width: 5.1.2
+    dev: true
+
+  /cli-width/2.2.1:
+    resolution: {integrity: sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==}
+    dev: true
+
+  /cliui/7.0.4:
+    resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==}
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  /clone-deep/4.0.1:
+    resolution: {integrity: sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      is-plain-object: 2.0.4
+      kind-of: 6.0.3
+      shallow-clone: 3.0.1
+    dev: true
+
+  /clone-response/1.0.2:
+    resolution: {integrity: sha512-yjLXh88P599UOyPTFX0POsd7WxnbsVsGohcwzHOLspIhhpalPw1BcqED8NblyZLKcGrL8dTgMlcaZxV2jAD41Q==}
+    dependencies:
+      mimic-response: 1.0.1
+    dev: false
+
+  /clone/1.0.4:
+    resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
+    engines: {node: '>=0.8'}
+    dev: true
+
+  /clsx/1.2.0:
+    resolution: {integrity: sha512-EPRP7XJsM1y0iCU3Z7C7jFKdQboXSeHgEfzQUTlz7m5NP3hDrlz48aUsmNGp4pC+JOW9WA3vIRqlYuo/bl4Drw==}
+    engines: {node: '>=6'}
+    dev: false
+
+  /clsx/1.2.1:
+    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
+    engines: {node: '>=6'}
+    dev: false
+
+  /co/4.6.0:
+    resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
+    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
+    dev: true
+
+  /code-example/3.3.6:
+    resolution: {integrity: sha512-JN7Fa6iwAUPyJC/h8myT4Dm+/Weu2TvaPzKcyl1qJ9yX7pmQsEszbF2D+23oFlR7jngCeU2KRkUiakbFTOobRA==}
+    dev: false
+
+  /code-point-at/1.1.0:
+    resolution: {integrity: sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /codemirror/6.0.1:
+    resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
+    dependencies:
+      '@codemirror/autocomplete': 6.0.3
+      '@codemirror/commands': 6.0.1
+      '@codemirror/language': 6.2.0
+      '@codemirror/lint': 6.0.0
+      '@codemirror/search': 6.0.0
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.0.2
+    dev: false
+
+  /collect-v8-coverage/1.0.1:
+    resolution: {integrity: sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==}
+    dev: true
+
+  /color-convert/1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+    dependencies:
+      color-name: 1.1.3
+
+  /color-convert/2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+    dependencies:
+      color-name: 1.1.4
+
+  /color-name/1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+
+  /color-name/1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  /colord/2.9.2:
+    resolution: {integrity: sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==}
+    dev: true
+
+  /colorette/1.4.0:
+    resolution: {integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==}
+    dev: true
+
+  /colorette/2.0.19:
+    resolution: {integrity: sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==}
+    dev: true
+
+  /combined-stream/1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      delayed-stream: 1.0.0
+    dev: true
+
+  /commander/2.20.3:
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+
+  /commander/4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+    dev: true
+
+  /commander/7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+    dev: true
+
+  /commander/8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+    dev: true
+
+  /commander/9.3.0:
+    resolution: {integrity: sha512-hv95iU5uXPbK83mjrJKuZyFM/LBAoCV/XhVGkS5Je6tl7sxr6A0ITMw5WoRV46/UaJ46Nllm3Xt7IaJhXTIkzw==}
+    engines: {node: ^12.20.0 || >=14}
+    dev: true
+
+  /common-path-prefix/3.0.0:
+    resolution: {integrity: sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==}
+    dev: true
+
+  /commondir/1.0.1:
+    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
+    dev: true
+
+  /compress-brotli/1.3.8:
+    resolution: {integrity: sha512-lVcQsjhxhIXsuupfy9fmZUFtAIdBmXA7EGY6GBdgZ++qkM9zG4YFT8iU7FoBxzryNDMOpD1HIFHUSX4D87oqhQ==}
+    engines: {node: '>= 12'}
+    dependencies:
+      '@types/json-buffer': 3.0.0
+      json-buffer: 3.0.1
+    dev: false
+
+  /compressible/2.0.18:
+    resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: 1.52.0
+    dev: true
+
+  /compression-webpack-plugin/10.0.0_webpack@5.73.0:
+    resolution: {integrity: sha512-wLXLIBwpul/ALcm7Aj+69X0pYT3BYt6DdPn3qrgBIh9YejV9Bju9ShhlAsjujLyWMo6SAweFIWaUoFmXZNuNrg==}
+    engines: {node: '>= 14.15.0'}
+    peerDependencies:
+      webpack: ^5.1.0
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+    dependencies:
+      schema-utils: 4.0.0
+      serialize-javascript: 6.0.0
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /compression/1.7.4:
+    resolution: {integrity: sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      accepts: 1.3.8
+      bytes: 3.0.0
+      compressible: 2.0.18
+      debug: 2.6.9
+      on-headers: 1.0.2
+      safe-buffer: 5.1.2
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /compute-scroll-into-view/1.0.17:
+    resolution: {integrity: sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg==}
+    dev: false
+
+  /concat-map/0.0.1:
+    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
+    dev: true
+
+  /concat-with-sourcemaps/1.1.0:
+    resolution: {integrity: sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==}
+    dependencies:
+      source-map: 0.6.1
+    dev: true
+
+  /confusing-browser-globals/1.0.11:
+    resolution: {integrity: sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==}
+    dev: true
+
+  /connect-history-api-fallback/2.0.0:
+    resolution: {integrity: sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==}
+    engines: {node: '>=0.8'}
+    dev: true
+
+  /console-control-strings/1.1.0:
+    resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
+    dev: true
+
+  /constant-case/3.0.4:
+    resolution: {integrity: sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==}
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.4.0
+      upper-case: 2.0.2
+    dev: true
+
+  /content-disposition/0.5.4:
+    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: true
+
+  /content-type/1.0.4:
+    resolution: {integrity: sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /convert-source-map/1.8.0:
+    resolution: {integrity: sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==}
+    dependencies:
+      safe-buffer: 5.1.2
+
+  /cookie-signature/1.0.6:
+    resolution: {integrity: sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==}
+    dev: true
+
+  /cookie/0.5.0:
+    resolution: {integrity: sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /copy-to-clipboard/3.3.1:
+    resolution: {integrity: sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==}
+    dependencies:
+      toggle-selection: 1.0.6
+    dev: false
+
+  /copy-webpack-plugin/9.1.0_webpack@5.73.0:
+    resolution: {integrity: sha512-rxnR7PaGigJzhqETHGmAcxKnLZSR5u1Y3/bcIv/1FnqXedcL/E2ewK7ZCNrArJKCiSv8yVXhTqetJh8inDvfsA==}
+    engines: {node: '>= 12.13.0'}
+    peerDependencies:
+      webpack: ^5.1.0
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+    dependencies:
+      fast-glob: 3.2.11
+      glob-parent: 6.0.2
+      globby: 11.1.0
+      normalize-path: 3.0.0
+      schema-utils: 3.1.1
+      serialize-javascript: 6.0.0
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /core-js-compat/3.23.3:
+    resolution: {integrity: sha512-WSzUs2h2vvmKsacLHNTdpyOC9k43AEhcGoFlVgCY4L7aw98oSBKtPL6vD0/TqZjRWRQYdDSLkzZIni4Crbbiqw==}
+    dependencies:
+      browserslist: 4.21.1
+      semver: 7.0.0
+    dev: true
+
+  /core-js-pure/3.23.3:
+    resolution: {integrity: sha512-XpoouuqIj4P+GWtdyV8ZO3/u4KftkeDVMfvp+308eGMhCrA3lVDSmAxO0c6GGOcmgVlaKDrgWVMo49h2ab/TDA==}
+    requiresBuild: true
+    dev: true
+
+  /core-js/3.23.3:
+    resolution: {integrity: sha512-oAKwkj9xcWNBAvGbT//WiCdOMpb9XQG92/Fe3ABFM/R16BsHgePG00mFOgKf7IsCtfj8tA1kHtf/VwErhriz5Q==}
+    requiresBuild: true
+
+  /core-js/3.6.5:
+    resolution: {integrity: sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==}
+    deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
+    requiresBuild: true
+    dev: true
+
+  /core-util-is/1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+    dev: true
+
+  /corser/2.0.1:
+    resolution: {integrity: sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==}
+    engines: {node: '>= 0.4.0'}
+    dev: true
+
+  /cosmiconfig/6.0.0:
+    resolution: {integrity: sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@types/parse-json': 4.0.0
+      import-fresh: 3.3.0
+      parse-json: 5.2.0
+      path-type: 4.0.0
+      yaml: 1.10.2
+
+  /cosmiconfig/7.0.1:
+    resolution: {integrity: sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@types/parse-json': 4.0.0
+      import-fresh: 3.3.0
+      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==}
+    dev: true
+
+  /crelt/1.0.5:
+    resolution: {integrity: sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==}
+    dev: false
+
+  /cross-env/7.0.3:
+    resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
+    engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
+    hasBin: true
+    dependencies:
+      cross-spawn: 7.0.3
+    dev: true
+
+  /cross-spawn/7.0.3:
+    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
+    engines: {node: '>= 8'}
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+    dev: true
+
+  /crypto-js/4.1.1:
+    resolution: {integrity: sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==}
+
+  /css-declaration-sorter/6.3.0_postcss@8.4.14:
+    resolution: {integrity: sha512-OGT677UGHJTAVMRhPO+HJ4oKln3wkBTwtDFH0ojbqm+MJm6xuDMHp2nkhh/ThaBqq20IbraBQSWKfSLNHQO9Og==}
+    engines: {node: ^10 || ^12 || >=14}
+    peerDependencies:
+      postcss: ^8.0.9
+    dependencies:
+      postcss: 8.4.14
+    dev: true
+
+  /css-in-js-utils/2.0.1:
+    resolution: {integrity: sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==}
+    dependencies:
+      hyphenate-style-name: 1.0.4
+      isobject: 3.0.1
+    dev: false
+
+  /css-loader/6.7.1_webpack@5.73.0:
+    resolution: {integrity: sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==}
+    engines: {node: '>= 12.13.0'}
+    peerDependencies:
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+    dependencies:
+      icss-utils: 5.1.0_postcss@8.4.14
+      postcss: 8.4.14
+      postcss-modules-extract-imports: 3.0.0_postcss@8.4.14
+      postcss-modules-local-by-default: 4.0.0_postcss@8.4.14
+      postcss-modules-scope: 3.0.0_postcss@8.4.14
+      postcss-modules-values: 4.0.0_postcss@8.4.14
+      postcss-value-parser: 4.2.0
+      semver: 7.3.7
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /css-mediaquery/0.1.2:
+    resolution: {integrity: sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==}
+    dev: false
+
+  /css-minimizer-webpack-plugin/3.4.1_webpack@5.73.0:
+    resolution: {integrity: sha512-1u6D71zeIfgngN2XNRJefc/hY7Ybsxd74Jm4qngIXyUEk7fss3VUzuHxLAq/R8NAba4QU9OUSaMZlbpRc7bM4Q==}
+    engines: {node: '>= 12.13.0'}
+    peerDependencies:
+      '@parcel/css': '*'
+      clean-css: '*'
+      csso: '*'
+      esbuild: '*'
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      '@parcel/css':
+        optional: true
+      clean-css:
+        optional: true
+      csso:
+        optional: true
+      esbuild:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      cssnano: 5.1.12_postcss@8.4.14
+      jest-worker: 27.5.1
+      postcss: 8.4.14
+      schema-utils: 4.0.0
+      serialize-javascript: 6.0.0
+      source-map: 0.6.1
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /css-minimizer-webpack-plugin/4.0.0_webpack@5.73.0:
+    resolution: {integrity: sha512-7ZXXRzRHvofv3Uac5Y+RkWRNo0ZMlcg8e9/OtrqUYmwDWJo+qs67GvdeFrXLsFb7czKNwjQhPkM0avlIYl+1nA==}
+    engines: {node: '>= 14.15.0'}
+    peerDependencies:
+      '@parcel/css': '*'
+      clean-css: '*'
+      csso: '*'
+      esbuild: '*'
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      '@parcel/css':
+        optional: true
+      clean-css:
+        optional: true
+      csso:
+        optional: true
+      esbuild:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      cssnano: 5.1.12_postcss@8.4.14
+      jest-worker: 27.5.1
+      postcss: 8.4.14
+      schema-utils: 4.0.0
+      serialize-javascript: 6.0.0
+      source-map: 0.6.1
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /css-select/4.3.0:
+    resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.1.0
+      domhandler: 4.3.1
+      domutils: 2.8.0
+      nth-check: 2.1.1
+    dev: true
+
+  /css-tree/1.1.3:
+    resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      mdn-data: 2.0.14
+      source-map: 0.6.1
+
+  /css-what/6.1.0:
+    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
+    engines: {node: '>= 6'}
+    dev: true
+
+  /css/3.0.0:
+    resolution: {integrity: sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==}
+    dependencies:
+      inherits: 2.0.4
+      source-map: 0.6.1
+      source-map-resolve: 0.6.0
+    dev: true
+
+  /cssesc/3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  /cssnano-preset-default/5.2.12_postcss@8.4.14:
+    resolution: {integrity: sha512-OyCBTZi+PXgylz9HAA5kHyoYhfGcYdwFmyaJzWnzxuGRtnMw/kR6ilW9XzlzlRAtB6PLT/r+prYgkef7hngFew==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      css-declaration-sorter: 6.3.0_postcss@8.4.14
+      cssnano-utils: 3.1.0_postcss@8.4.14
+      postcss: 8.4.14
+      postcss-calc: 8.2.4_postcss@8.4.14
+      postcss-colormin: 5.3.0_postcss@8.4.14
+      postcss-convert-values: 5.1.2_postcss@8.4.14
+      postcss-discard-comments: 5.1.2_postcss@8.4.14
+      postcss-discard-duplicates: 5.1.0_postcss@8.4.14
+      postcss-discard-empty: 5.1.1_postcss@8.4.14
+      postcss-discard-overridden: 5.1.0_postcss@8.4.14
+      postcss-merge-longhand: 5.1.6_postcss@8.4.14
+      postcss-merge-rules: 5.1.2_postcss@8.4.14
+      postcss-minify-font-values: 5.1.0_postcss@8.4.14
+      postcss-minify-gradients: 5.1.1_postcss@8.4.14
+      postcss-minify-params: 5.1.3_postcss@8.4.14
+      postcss-minify-selectors: 5.2.1_postcss@8.4.14
+      postcss-normalize-charset: 5.1.0_postcss@8.4.14
+      postcss-normalize-display-values: 5.1.0_postcss@8.4.14
+      postcss-normalize-positions: 5.1.1_postcss@8.4.14
+      postcss-normalize-repeat-style: 5.1.1_postcss@8.4.14
+      postcss-normalize-string: 5.1.0_postcss@8.4.14
+      postcss-normalize-timing-functions: 5.1.0_postcss@8.4.14
+      postcss-normalize-unicode: 5.1.0_postcss@8.4.14
+      postcss-normalize-url: 5.1.0_postcss@8.4.14
+      postcss-normalize-whitespace: 5.1.1_postcss@8.4.14
+      postcss-ordered-values: 5.1.3_postcss@8.4.14
+      postcss-reduce-initial: 5.1.0_postcss@8.4.14
+      postcss-reduce-transforms: 5.1.0_postcss@8.4.14
+      postcss-svgo: 5.1.0_postcss@8.4.14
+      postcss-unique-selectors: 5.1.1_postcss@8.4.14
+    dev: true
+
+  /cssnano-utils/3.1.0_postcss@8.4.14:
+    resolution: {integrity: sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.14
+    dev: true
+
+  /cssnano/5.1.12_postcss@8.4.14:
+    resolution: {integrity: sha512-TgvArbEZu0lk/dvg2ja+B7kYoD7BBCmn3+k58xD0qjrGHsFzXY/wKTo9M5egcUCabPol05e/PVoIu79s2JN4WQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      cssnano-preset-default: 5.2.12_postcss@8.4.14
+      lilconfig: 2.0.5
+      postcss: 8.4.14
+      yaml: 1.10.2
+    dev: true
+
+  /csso/4.2.0:
+    resolution: {integrity: sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      css-tree: 1.1.3
+    dev: true
+
+  /cssom/0.3.8:
+    resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
+    dev: true
+
+  /cssom/0.4.4:
+    resolution: {integrity: sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==}
+    dev: true
+
+  /cssstyle/2.3.0:
+    resolution: {integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==}
+    engines: {node: '>=8'}
+    dependencies:
+      cssom: 0.3.8
+    dev: true
+
+  /csstype/3.1.0:
+    resolution: {integrity: sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==}
+
+  /cz-customizable/5.10.0:
+    resolution: {integrity: sha512-8fzzmoXXAg3ydu5Uhx4g+XwgWNdjmvm/zycKzZejnhQn8Z+kvnqKwXhwm9thmFE67MIXDMS7n+A1wuMAEplddQ==}
+    dependencies:
+      editor: 1.0.0
+      find-config: 1.0.0
+      inquirer: 6.5.2
+      lodash: 4.17.21
+      temp: 0.9.4
+      word-wrap: 1.2.3
+    dev: true
+
+  /damerau-levenshtein/1.0.8:
+    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
+    dev: true
+
+  /data-urls/2.0.0:
+    resolution: {integrity: sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      abab: 2.0.6
+      whatwg-mimetype: 2.3.0
+      whatwg-url: 8.7.0
+    dev: true
+
+  /date-fns/2.28.0:
+    resolution: {integrity: sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==}
+    engines: {node: '>=0.11'}
+    dev: false
+
+  /dayjs/1.11.3:
+    resolution: {integrity: sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A==}
+    dev: false
+
+  /debug/2.6.9:
+    resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.0.0
+    dev: true
+
+  /debug/3.1.0:
+    resolution: {integrity: sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.0.0
+
+  /debug/3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.3
+    dev: true
+
+  /debug/4.3.4:
+    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+
+  /decimal.js/10.3.1:
+    resolution: {integrity: sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==}
+    dev: true
+
+  /decode-uri-component/0.2.0:
+    resolution: {integrity: sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==}
+    engines: {node: '>=0.10'}
+    dev: true
+
+  /decompress-response/6.0.0:
+    resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      mimic-response: 3.1.0
+    dev: false
+
+  /dedent/0.7.0:
+    resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==}
+    dev: true
+
+  /deep-is/0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+    dev: true
+
+  /deepmerge/4.2.2:
+    resolution: {integrity: sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /default-gateway/6.0.3:
+    resolution: {integrity: sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==}
+    engines: {node: '>= 10'}
+    dependencies:
+      execa: 5.1.1
+    dev: true
+
+  /defaults/1.0.3:
+    resolution: {integrity: sha512-s82itHOnYrN0Ib8r+z7laQz3sdE+4FP3d9Q7VLO7U+KRT+CR0GsWuyHxzdAY82I7cXv0G/twrqomTJLOssO5HA==}
+    dependencies:
+      clone: 1.0.4
+    dev: true
+
+  /defer-to-connect/2.0.1:
+    resolution: {integrity: sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==}
+    engines: {node: '>=10'}
+    dev: false
+
+  /define-lazy-prop/2.0.0:
+    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /define-properties/1.1.4:
+    resolution: {integrity: sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-property-descriptors: 1.0.0
+      object-keys: 1.1.1
+
+  /delayed-stream/1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+    dev: true
+
+  /delegates/1.0.0:
+    resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
+    dev: true
+
+  /depd/1.1.2:
+    resolution: {integrity: sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /depd/2.0.0:
+    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
+  /destroy/1.2.0:
+    resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
+    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
+    dev: true
+
+  /detect-newline/3.1.0:
+    resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /detect-node/2.1.0:
+    resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==}
+    dev: true
+
+  /diff-sequences/27.5.1:
+    resolution: {integrity: sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dev: true
+
+  /diff-sequences/28.1.1:
+    resolution: {integrity: sha512-FU0iFaH/E23a+a718l8Qa/19bF9p06kgE0KipMOMadwa3SjnaElKzPaUC0vnibs6/B/9ni97s61mcejk8W1fQw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dev: true
+
+  /diff/4.0.2:
+    resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
+    engines: {node: '>=0.3.1'}
+    dev: true
+
+  /diff/5.1.0:
+    resolution: {integrity: sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==}
+    engines: {node: '>=0.3.1'}
+    dev: false
+
+  /dir-glob/3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+    dependencies:
+      path-type: 4.0.0
+    dev: true
+
+  /direction/1.0.4:
+    resolution: {integrity: sha512-GYqKi1aH7PJXxdhTeZBFrg8vUBeKXi+cNprXsC1kpJcbcVnV9wBsrOu1cQEdG0WeQwlfHiy3XvnKfIrJ2R0NzQ==}
+    hasBin: true
+    dev: false
+
+  /dns-equal/1.0.0:
+    resolution: {integrity: sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg==}
+    dev: true
+
+  /dns-packet/5.4.0:
+    resolution: {integrity: sha512-EgqGeaBB8hLiHLZtp/IbaDQTL8pZ0+IvwzSHA6d7VyMDM+B9hgddEMa9xjK5oYnw0ci0JQ6g2XCD7/f6cafU6g==}
+    engines: {node: '>=6'}
+    dependencies:
+      '@leichtgewicht/ip-codec': 2.0.4
+    dev: true
+
+  /doctrine/2.1.0:
+    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      esutils: 2.0.3
+    dev: true
+
+  /doctrine/3.0.0:
+    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      esutils: 2.0.3
+    dev: true
+
+  /dom-accessibility-api/0.5.14:
+    resolution: {integrity: sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==}
+    dev: true
+
+  /dom-align/1.12.3:
+    resolution: {integrity: sha512-Gj9hZN3a07cbR6zviMUBOMPdWxYhbMI+x+WS0NAIu2zFZmbK8ys9R79g+iG9qLnlCwpFoaB+fKy8Pdv470GsPA==}
+    dev: false
+
+  /dom-converter/0.2.0:
+    resolution: {integrity: sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==}
+    dependencies:
+      utila: 0.4.0
+    dev: true
+
+  /dom-helpers/5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+    dependencies:
+      '@babel/runtime': 7.18.6
+      csstype: 3.1.0
+    dev: false
+
+  /dom-serializer/1.4.1:
+    resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 4.3.1
+      entities: 2.2.0
+    dev: true
+
+  /dom-walk/0.1.2:
+    resolution: {integrity: sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==}
+    dev: false
+
+  /domelementtype/2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+    dev: true
+
+  /domexception/2.0.1:
+    resolution: {integrity: sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==}
+    engines: {node: '>=8'}
+    dependencies:
+      webidl-conversions: 5.0.0
+    dev: true
+
+  /domhandler/4.3.1:
+    resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
+    engines: {node: '>= 4'}
+    dependencies:
+      domelementtype: 2.3.0
+    dev: true
+
+  /domino/2.1.6:
+    resolution: {integrity: sha512-3VdM/SXBZX2omc9JF9nOPCtDaYQ67BGp5CoLpIQlO2KCAPETs8TcDHacF26jXadGbvUteZzRTeos2fhID5+ucQ==}
+    dev: false
+
+  /domutils/2.8.0:
+    resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
+    dependencies:
+      dom-serializer: 1.4.1
+      domelementtype: 2.3.0
+      domhandler: 4.3.1
+    dev: true
+
+  /dot-case/3.0.4:
+    resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.4.0
+    dev: true
+
+  /dotenv/10.0.0:
+    resolution: {integrity: sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /dotenv/16.0.1:
+    resolution: {integrity: sha512-1K6hR6wtk2FviQ4kEiSjFiH5rpzEVi8WW0x96aztHVMhEspNpc4DVOUTEHtEva5VThQ8IaBX1Pe4gSzpVVUsKQ==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /duplexer/0.1.2:
+    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
+    dev: true
+
+  /eastasianwidth/0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+    dev: true
+
+  /editor/1.0.0:
+    resolution: {integrity: sha512-SoRmbGStwNYHgKfjOrX2L0mUvp9bUVv0uPppZSOMAntEbcFtoC3MKF5b3T6HQPXKIV+QGY3xPO3JK5it5lVkuw==}
+    dev: true
+
+  /ee-first/1.1.1:
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+    dev: true
+
+  /ejs/3.1.8:
+    resolution: {integrity: sha512-/sXZeMlhS0ArkfX2Aw780gJzXSMPnKjtspYZv+f3NiKLlubezAHDU5+9xz6gd3/NhG3txQCo6xlglmTS+oTGEQ==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+    dependencies:
+      jake: 10.8.5
+    dev: true
+
+  /electron-to-chromium/1.4.179:
+    resolution: {integrity: sha512-1XeTb/U/8Xgh2YgPOqhakLYsvCcU4U7jUjTMbEnhIJoIWd/Qt3yC8y0cbG+fHzn4zUNF99Ey1xiPf20bwgLO3Q==}
+
+  /emittery/0.10.2:
+    resolution: {integrity: sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /emittery/0.8.1:
+    resolution: {integrity: sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /emoji-regex/8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  /emoji-regex/9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+    dev: true
+
+  /emojis-list/2.1.0:
+    resolution: {integrity: sha512-knHEZMgs8BB+MInokmNTg/OyPlAddghe1YBgNwJBc5zsJi/uyIcXoSDsL/W9ymOsBoBGdPIHXYJ9+qKFwRwDng==}
+    engines: {node: '>= 0.10'}
+    dev: true
+
+  /emojis-list/3.0.0:
+    resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
+    engines: {node: '>= 4'}
+
+  /encodeurl/1.0.2:
+    resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
+  /end-of-stream/1.4.4:
+    resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
+    dependencies:
+      once: 1.4.0
+
+  /enhanced-resolve/5.10.0:
+    resolution: {integrity: sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      graceful-fs: 4.2.10
+      tapable: 2.2.1
+
+  /enquirer/2.3.6:
+    resolution: {integrity: sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==}
+    engines: {node: '>=8.6'}
+    dependencies:
+      ansi-colors: 4.1.3
+    dev: true
+
+  /entities/2.2.0:
+    resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
+    dev: true
+
+  /entities/3.0.1:
+    resolution: {integrity: sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==}
+    engines: {node: '>=0.12'}
+    dev: true
+
+  /env-cmd/10.1.0:
+    resolution: {integrity: sha512-mMdWTT9XKN7yNth/6N6g2GuKuJTsKMDHlQFUDacb/heQRRWOTIZ42t1rMHnQu4jYxU1ajdTeJM+9eEETlqToMA==}
+    engines: {node: '>=8.0.0'}
+    hasBin: true
+    dependencies:
+      commander: 4.1.1
+      cross-spawn: 7.0.3
+    dev: true
+
+  /errno/0.1.8:
+    resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      prr: 1.0.1
+    dev: true
+    optional: true
+
+  /error-ex/1.3.2:
+    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
+    dependencies:
+      is-arrayish: 0.2.1
+
+  /error-stack-parser/2.1.4:
+    resolution: {integrity: sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==}
+    dependencies:
+      stackframe: 1.3.4
+
+  /es-abstract/1.20.1:
+    resolution: {integrity: sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      es-to-primitive: 1.2.1
+      function-bind: 1.1.1
+      function.prototype.name: 1.1.5
+      get-intrinsic: 1.1.2
+      get-symbol-description: 1.0.0
+      has: 1.0.3
+      has-property-descriptors: 1.0.0
+      has-symbols: 1.0.3
+      internal-slot: 1.0.3
+      is-callable: 1.2.4
+      is-negative-zero: 2.0.2
+      is-regex: 1.1.4
+      is-shared-array-buffer: 1.0.2
+      is-string: 1.0.7
+      is-weakref: 1.0.2
+      object-inspect: 1.12.2
+      object-keys: 1.1.1
+      object.assign: 4.1.2
+      regexp.prototype.flags: 1.4.3
+      string.prototype.trimend: 1.0.5
+      string.prototype.trimstart: 1.0.5
+      unbox-primitive: 1.0.2
+
+  /es-module-lexer/0.9.3:
+    resolution: {integrity: sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==}
+
+  /es-shim-unscopables/1.0.0:
+    resolution: {integrity: sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==}
+    dependencies:
+      has: 1.0.3
+    dev: true
+
+  /es-to-primitive/1.2.1:
+    resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      is-callable: 1.2.4
+      is-date-object: 1.0.5
+      is-symbol: 1.0.4
+
+  /es6-object-assign/1.1.0:
+    resolution: {integrity: sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw==}
+    dev: false
+
+  /escalade/3.1.1:
+    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
+    engines: {node: '>=6'}
+
+  /escape-html/1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+    dev: true
+
+  /escape-string-regexp/1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+
+  /escape-string-regexp/2.0.0:
+    resolution: {integrity: sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /escape-string-regexp/4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  /escodegen/2.0.0:
+    resolution: {integrity: sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==}
+    engines: {node: '>=6.0'}
+    hasBin: true
+    dependencies:
+      esprima: 4.0.1
+      estraverse: 5.3.0
+      esutils: 2.0.3
+      optionator: 0.8.3
+    optionalDependencies:
+      source-map: 0.6.1
+    dev: true
+
+  /eslint-config-next/12.2.0_4x5o4skxv6sl53vpwefgt23khm:
+    resolution: {integrity: sha512-QWzNegadFXjQ0h3hixnLacRM9Kot85vQefyNsA8IeOnERZMz0Gvays1W6DMCjSxJbnCwuWaMXj9DCpar5IahRA==}
+    peerDependencies:
+      eslint: ^7.23.0 || ^8.0.0
+      typescript: '>=3.3.1'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@next/eslint-plugin-next': 12.2.0
+      '@rushstack/eslint-patch': 1.1.4
+      '@typescript-eslint/parser': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
+      eslint: 8.19.0
+      eslint-import-resolver-node: 0.3.6
+      eslint-import-resolver-typescript: 2.7.1_q2xwze32dd33a2fc2qubwr4ie4
+      eslint-plugin-import: 2.26.0_6o2fuefo7gfpbr7nbqwgu7w4mq
+      eslint-plugin-jsx-a11y: 6.6.0_eslint@8.19.0
+      eslint-plugin-react: 7.30.1_eslint@8.19.0
+      eslint-plugin-react-hooks: 4.6.0_eslint@8.19.0
+      typescript: 4.7.4
+    transitivePeerDependencies:
+      - eslint-import-resolver-webpack
+      - supports-color
+    dev: true
+
+  /eslint-config-prettier/8.5.0_eslint@8.19.0:
+    resolution: {integrity: sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==}
+    hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
+    dependencies:
+      eslint: 8.19.0
+    dev: true
+
+  /eslint-import-resolver-node/0.3.6:
+    resolution: {integrity: sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==}
+    dependencies:
+      debug: 3.2.7
+      resolve: 1.22.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-import-resolver-typescript/2.7.1_q2xwze32dd33a2fc2qubwr4ie4:
+    resolution: {integrity: sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      eslint: '*'
+      eslint-plugin-import: '*'
+    dependencies:
+      debug: 4.3.4
+      eslint: 8.19.0
+      eslint-plugin-import: 2.26.0_6o2fuefo7gfpbr7nbqwgu7w4mq
+      glob: 7.2.3
+      is-glob: 4.0.3
+      resolve: 1.22.1
+      tsconfig-paths: 3.14.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-module-utils/2.7.3_ea34krk32wbcqzxapvwr7rsjs4:
+    resolution: {integrity: sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
+      debug: 3.2.7
+      eslint-import-resolver-node: 0.3.6
+      find-up: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-module-utils/2.7.3_ngc5pgxzrdnldt43xbcfncn6si:
+    resolution: {integrity: sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
+      debug: 3.2.7
+      eslint-import-resolver-node: 0.3.6
+      eslint-import-resolver-typescript: 2.7.1_q2xwze32dd33a2fc2qubwr4ie4
+      find-up: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-filename-rules/1.2.0:
+    resolution: {integrity: sha512-iPVuHb+VZRt0k9r2ejBRSZM7n+LIJ1OWKiOj/E1ZQiII7AaKZ28JE0lVdxQ7LI2rBem7dqcmC/0QAnAyis0xTA==}
+    engines: {node: '>=6.0.0'}
+    dev: true
+
+  /eslint-plugin-import/2.26.0_6o2fuefo7gfpbr7nbqwgu7w4mq:
+    resolution: {integrity: sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
+      array-includes: 3.1.5
+      array.prototype.flat: 1.3.0
+      debug: 2.6.9
+      doctrine: 2.1.0
+      eslint: 8.19.0
+      eslint-import-resolver-node: 0.3.6
+      eslint-module-utils: 2.7.3_ngc5pgxzrdnldt43xbcfncn6si
+      has: 1.0.3
+      is-core-module: 2.9.0
+      is-glob: 4.0.3
+      minimatch: 3.1.2
+      object.values: 1.1.5
+      resolve: 1.22.1
+      tsconfig-paths: 3.14.1
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+    dev: true
+
+  /eslint-plugin-import/2.26.0_iom7pm3yknyiblqpw2vvqvxs5i:
+    resolution: {integrity: sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 5.30.5_4x5o4skxv6sl53vpwefgt23khm
+      array-includes: 3.1.5
+      array.prototype.flat: 1.3.0
+      debug: 2.6.9
+      doctrine: 2.1.0
+      eslint: 8.19.0
+      eslint-import-resolver-node: 0.3.6
+      eslint-module-utils: 2.7.3_ea34krk32wbcqzxapvwr7rsjs4
+      has: 1.0.3
+      is-core-module: 2.9.0
+      is-glob: 4.0.3
+      minimatch: 3.1.2
+      object.values: 1.1.5
+      resolve: 1.22.1
+      tsconfig-paths: 3.14.1
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+    dev: true
+
+  /eslint-plugin-jsx-a11y/6.6.0_eslint@8.19.0:
+    resolution: {integrity: sha512-kTeLuIzpNhXL2CwLlc8AHI0aFRwWHcg483yepO9VQiHzM9bZwJdzTkzBszbuPrbgGmq2rlX/FaT2fJQsjUSHsw==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
+    dependencies:
+      '@babel/runtime': 7.18.6
+      aria-query: 4.2.2
+      array-includes: 3.1.5
+      ast-types-flow: 0.0.7
+      axe-core: 4.4.2
+      axobject-query: 2.2.0
+      damerau-levenshtein: 1.0.8
+      emoji-regex: 9.2.2
+      eslint: 8.19.0
+      has: 1.0.3
+      jsx-ast-utils: 3.3.1
+      language-tags: 1.0.5
+      minimatch: 3.1.2
+      semver: 6.3.0
+    dev: true
+
+  /eslint-plugin-prettier/4.2.1_7uxdfn2xinezdgvmbammh6ev5i:
+    resolution: {integrity: sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      eslint: '>=7.28.0'
+      eslint-config-prettier: '*'
+      prettier: '>=2.0.0'
+    peerDependenciesMeta:
+      eslint-config-prettier:
+        optional: true
+    dependencies:
+      eslint: 8.19.0
+      eslint-config-prettier: 8.5.0_eslint@8.19.0
+      prettier: 2.7.1
+      prettier-linter-helpers: 1.0.0
+    dev: true
+
+  /eslint-plugin-react-hooks/4.6.0_eslint@8.19.0:
+    resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
+    dependencies:
+      eslint: 8.19.0
+    dev: true
+
+  /eslint-plugin-react/7.30.0_eslint@8.19.0:
+    resolution: {integrity: sha512-RgwH7hjW48BleKsYyHK5vUAvxtE9SMPDKmcPRQgtRCYaZA0XQPt5FSkrU3nhz5ifzMZcA8opwmRJ2cmOO8tr5A==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
+    dependencies:
+      array-includes: 3.1.5
+      array.prototype.flatmap: 1.3.0
+      doctrine: 2.1.0
+      eslint: 8.19.0
+      estraverse: 5.3.0
+      jsx-ast-utils: 3.3.1
+      minimatch: 3.1.2
+      object.entries: 1.1.5
+      object.fromentries: 2.0.5
+      object.hasown: 1.1.1
+      object.values: 1.1.5
+      prop-types: 15.8.1
+      resolve: 2.0.0-next.4
+      semver: 6.3.0
+      string.prototype.matchall: 4.0.7
+    dev: true
+
+  /eslint-plugin-react/7.30.1_eslint@8.19.0:
+    resolution: {integrity: sha512-NbEvI9jtqO46yJA3wcRF9Mo0lF9T/jhdHqhCHXiXtD+Zcb98812wvokjWpU7Q4QH5edo6dmqrukxVvWWXHlsUg==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
+    dependencies:
+      array-includes: 3.1.5
+      array.prototype.flatmap: 1.3.0
+      doctrine: 2.1.0
+      eslint: 8.19.0
+      estraverse: 5.3.0
+      jsx-ast-utils: 3.3.1
+      minimatch: 3.1.2
+      object.entries: 1.1.5
+      object.fromentries: 2.0.5
+      object.hasown: 1.1.1
+      object.values: 1.1.5
+      prop-types: 15.8.1
+      resolve: 2.0.0-next.4
+      semver: 6.3.0
+      string.prototype.matchall: 4.0.7
+    dev: true
+
+  /eslint-scope/5.1.1:
+    resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 4.3.0
+
+  /eslint-scope/7.1.1:
+    resolution: {integrity: sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+    dev: true
+
+  /eslint-utils/3.0.0_eslint@8.19.0:
+    resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
+    engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
+    peerDependencies:
+      eslint: '>=5'
+    dependencies:
+      eslint: 8.19.0
+      eslint-visitor-keys: 2.1.0
+    dev: true
+
+  /eslint-visitor-keys/2.1.0:
+    resolution: {integrity: sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /eslint-visitor-keys/3.3.0:
+    resolution: {integrity: sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
+  /eslint/8.19.0:
+    resolution: {integrity: sha512-SXOPj3x9VKvPe81TjjUJCYlV4oJjQw68Uek+AM0X4p+33dj2HY5bpTZOgnQHcG2eAm1mtCU9uNMnJi7exU/kYw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    hasBin: true
+    dependencies:
+      '@eslint/eslintrc': 1.3.0
+      '@humanwhocodes/config-array': 0.9.5
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.3
+      debug: 4.3.4
+      doctrine: 3.0.0
+      escape-string-regexp: 4.0.0
+      eslint-scope: 7.1.1
+      eslint-utils: 3.0.0_eslint@8.19.0
+      eslint-visitor-keys: 3.3.0
+      espree: 9.3.2
+      esquery: 1.4.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 6.0.1
+      functional-red-black-tree: 1.0.1
+      glob-parent: 6.0.2
+      globals: 13.16.0
+      ignore: 5.2.0
+      import-fresh: 3.3.0
+      imurmurhash: 0.1.4
+      is-glob: 4.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.1
+      regexpp: 3.2.0
+      strip-ansi: 6.0.1
+      strip-json-comments: 3.1.1
+      text-table: 0.2.0
+      v8-compile-cache: 2.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /esm/3.2.25:
+    resolution: {integrity: sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==}
+    engines: {node: '>=6'}
+    dev: false
+
+  /espree/9.3.2:
+    resolution: {integrity: sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      acorn: 8.7.1
+      acorn-jsx: 5.3.2_acorn@8.7.1
+      eslint-visitor-keys: 3.3.0
+    dev: true
+
+  /esprima/4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: true
+
+  /esquery/1.4.0:
+    resolution: {integrity: sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      estraverse: 5.3.0
+    dev: true
+
+  /esrecurse/4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+    dependencies:
+      estraverse: 5.3.0
+
+  /estraverse/4.3.0:
+    resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
+    engines: {node: '>=4.0'}
+
+  /estraverse/5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  /estree-walker/0.6.1:
+    resolution: {integrity: sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==}
+    dev: true
+
+  /estree-walker/1.0.1:
+    resolution: {integrity: sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==}
+
+  /estree-walker/2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+    dev: true
+
+  /esutils/2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /etag/1.8.1:
+    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /eventemitter3/4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+
+  /events/1.1.1:
+    resolution: {integrity: sha512-kEcvvCBByWXGnZy6JUlgAp2gBIUjfCAV6P6TgT1/aaQKcmuAEC4OZTV1I4EWQLz2gxZw76atuVyvHhTxvi0Flw==}
+    engines: {node: '>=0.4.x'}
+    dev: false
+
+  /events/3.3.0:
+    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
+    engines: {node: '>=0.8.x'}
+
+  /execa/5.1.1:
+    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
+    engines: {node: '>=10'}
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 6.0.1
+      human-signals: 2.1.0
+      is-stream: 2.0.1
+      merge-stream: 2.0.0
+      npm-run-path: 4.0.1
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+      strip-final-newline: 2.0.0
+    dev: true
+
+  /execa/6.1.0:
+    resolution: {integrity: sha512-QVWlX2e50heYJcCPG0iWtf8r0xjEYfz/OYLGDYH+IyjWezzPNxz63qNFOu0l4YftGWuizFVZHHs8PrLU5p2IDA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 6.0.1
+      human-signals: 3.0.1
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.1.0
+      onetime: 6.0.0
+      signal-exit: 3.0.7
+      strip-final-newline: 3.0.0
+    dev: true
+
+  /exit/0.1.2:
+    resolution: {integrity: sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==}
+    engines: {node: '>= 0.8.0'}
+    dev: true
+
+  /expect/27.5.1:
+    resolution: {integrity: sha512-E1q5hSUG2AmYQwQJ041nvgpkODHQvB+RKlB4IYdru6uJsyFTRyZAP463M+1lINorwbqAmUggi6+WwkD8lCS/Dw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/types': 27.5.1
+      jest-get-type: 27.5.1
+      jest-matcher-utils: 27.5.1
+      jest-message-util: 27.5.1
+    dev: true
+
+  /expect/28.1.1:
+    resolution: {integrity: sha512-/AANEwGL0tWBwzLNOvO0yUdy2D52jVdNXppOqswC49sxMN2cPWsGCQdzuIf9tj6hHoBQzNvx75JUYuQAckPo3w==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/expect-utils': 28.1.1
+      jest-get-type: 28.0.2
+      jest-matcher-utils: 28.1.1
+      jest-message-util: 28.1.1
+      jest-util: 28.1.1
+    dev: true
+
+  /express/4.18.1:
+    resolution: {integrity: sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==}
+    engines: {node: '>= 0.10.0'}
+    dependencies:
+      accepts: 1.3.8
+      array-flatten: 1.1.1
+      body-parser: 1.20.0
+      content-disposition: 0.5.4
+      content-type: 1.0.4
+      cookie: 0.5.0
+      cookie-signature: 1.0.6
+      debug: 2.6.9
+      depd: 2.0.0
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 1.2.0
+      fresh: 0.5.2
+      http-errors: 2.0.0
+      merge-descriptors: 1.0.1
+      methods: 1.1.2
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      path-to-regexp: 0.1.7
+      proxy-addr: 2.0.7
+      qs: 6.10.3
+      range-parser: 1.2.1
+      safe-buffer: 5.2.1
+      send: 0.18.0
+      serve-static: 1.15.0
+      setprototypeof: 1.2.0
+      statuses: 2.0.1
+      type-is: 1.6.18
+      utils-merge: 1.0.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /external-editor/3.1.0:
+    resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
+    engines: {node: '>=4'}
+    dependencies:
+      chardet: 0.7.0
+      iconv-lite: 0.4.24
+      tmp: 0.0.33
+    dev: true
+
+  /fast-deep-equal/3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  /fast-diff/1.2.0:
+    resolution: {integrity: sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==}
+    dev: true
+
+  /fast-glob/3.2.11:
+    resolution: {integrity: sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==}
+    engines: {node: '>=8.6.0'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.5
+    dev: true
+
+  /fast-glob/3.2.7:
+    resolution: {integrity: sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.5
+    dev: true
+
+  /fast-json-stable-stringify/2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  /fast-levenshtein/2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+    dev: true
+
+  /fast-shallow-equal/1.0.0:
+    resolution: {integrity: sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==}
+    dev: false
+
+  /fastclick/1.0.6:
+    resolution: {integrity: sha512-cXyDBT4g0uWl/Xe75QspBDAgAWQ0lkPi/zgp6YFEUHj6WV6VIZl7R6TiDZhdOVU3W4ehp/8tG61Jev1jit+ztQ==}
+    dev: false
+
+  /fastest-stable-stringify/2.0.2:
+    resolution: {integrity: sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==}
+    dev: false
+
+  /fastq/1.13.0:
+    resolution: {integrity: sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==}
+    dependencies:
+      reusify: 1.0.4
+    dev: true
+
+  /faye-websocket/0.11.4:
+    resolution: {integrity: sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==}
+    engines: {node: '>=0.8.0'}
+    dependencies:
+      websocket-driver: 0.7.4
+    dev: true
+
+  /fb-watchman/2.0.1:
+    resolution: {integrity: sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==}
+    dependencies:
+      bser: 2.1.1
+    dev: true
+
+  /ffc-js-client-side-sdk/1.1.5:
+    resolution: {integrity: sha512-xDsh/9+Xoh46O4aKZdR9e+nrBnOChmkQI4CoOGyvPd5x72u4CN66w12qChtVhG5e/0im8qu6ZARG28BSLJP8yw==}
+    dependencies:
+      string-replace-loader: 3.1.0
+    transitivePeerDependencies:
+      - webpack
+    dev: false
+
+  /fflate/0.7.3:
+    resolution: {integrity: sha512-0Zz1jOzJWERhyhsimS54VTqOteCNwRtIlh8isdL0AXLo0g7xNTfTL7oWrkmCnPhZGocKIkWHBistBrrpoNH3aw==}
+    dev: false
+
+  /figures/2.0.0:
+    resolution: {integrity: sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==}
+    engines: {node: '>=4'}
+    dependencies:
+      escape-string-regexp: 1.0.5
+    dev: true
+
+  /figures/3.2.0:
+    resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
+    engines: {node: '>=8'}
+    dependencies:
+      escape-string-regexp: 1.0.5
+    dev: true
+
+  /file-entry-cache/6.0.1:
+    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      flat-cache: 3.0.4
+    dev: true
+
+  /file-loader/6.2.0_webpack@5.73.0:
+    resolution: {integrity: sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      webpack: ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+    dependencies:
+      loader-utils: 2.0.2
+      schema-utils: 3.1.1
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /file-saver/2.0.5:
+    resolution: {integrity: sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==}
+
+  /file-selector/0.6.0:
+    resolution: {integrity: sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==}
+    engines: {node: '>= 12'}
+    dependencies:
+      tslib: 2.4.0
+    dev: true
+
+  /filelist/1.0.4:
+    resolution: {integrity: sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==}
+    dependencies:
+      minimatch: 5.1.0
+    dev: true
+
+  /fill-range/7.0.1:
+    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      to-regex-range: 5.0.1
+    dev: true
+
+  /finalhandler/1.2.0:
+    resolution: {integrity: sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      debug: 2.6.9
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.1
+      unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /find-cache-dir/3.3.2:
+    resolution: {integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==}
+    engines: {node: '>=8'}
+    dependencies:
+      commondir: 1.0.1
+      make-dir: 3.1.0
+      pkg-dir: 4.2.0
+    dev: true
+
+  /find-config/1.0.0:
+    resolution: {integrity: sha512-Z+suHH+7LSE40WfUeZPIxSxypCWvrzdVc60xAjUShZeT5eMWM0/FQUduq3HjluyfAHWvC/aOBkT1pTZktyF/jg==}
+    engines: {node: '>= 0.12'}
+    dependencies:
+      user-home: 2.0.0
+    dev: true
+
+  /find-git-root/1.0.4:
+    resolution: {integrity: sha512-468fmirKKgcrqfZfPn0xIpwZUUsZQcYXfx0RC2/jX39GPz83TwutQNZZhDrI6HqjO8cRejxQVaUY8GQdXopFfA==}
+    dev: true
+
+  /find-root/1.1.0:
+    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+    dev: false
+
+  /find-up/2.1.0:
+    resolution: {integrity: sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      locate-path: 2.0.0
+    dev: true
+
+  /find-up/4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+    dev: true
+
+  /find-up/5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+    dev: true
+
+  /firebase/9.8.4:
+    resolution: {integrity: sha512-fQigVEtSBprGBDLVTr485KQJ1YUWh/HeocMQvmhaUCL9dHUnW8GWfK+XkKOV2kcDB1Ur8xZPkjCxlmoTcykhgA==}
+    dependencies:
+      '@firebase/analytics': 0.7.11_@firebase+app@0.7.27
+      '@firebase/analytics-compat': 0.1.12_ikt45rtbctnl5l4y6p3bca5464
+      '@firebase/app': 0.7.27
+      '@firebase/app-check': 0.5.10_@firebase+app@0.7.27
+      '@firebase/app-check-compat': 0.2.10_ikt45rtbctnl5l4y6p3bca5464
+      '@firebase/app-compat': 0.1.28
+      '@firebase/app-types': 0.7.0
+      '@firebase/auth': 0.20.4_@firebase+app@0.7.27
+      '@firebase/auth-compat': 0.2.17_2whj6v3knk7rswcmdbn5bdkgna
+      '@firebase/database': 0.13.2_@firebase+app-types@0.7.0
+      '@firebase/database-compat': 0.2.2_@firebase+app-types@0.7.0
+      '@firebase/firestore': 3.4.11_@firebase+app@0.7.27
+      '@firebase/firestore-compat': 0.1.20_2whj6v3knk7rswcmdbn5bdkgna
+      '@firebase/functions': 0.8.3_m3w7qpgfrijausz7l34kldvbjq
+      '@firebase/functions-compat': 0.2.3_2whj6v3knk7rswcmdbn5bdkgna
+      '@firebase/installations': 0.5.11_@firebase+app@0.7.27
+      '@firebase/messaging': 0.9.15_@firebase+app@0.7.27
+      '@firebase/messaging-compat': 0.1.15_ikt45rtbctnl5l4y6p3bca5464
+      '@firebase/performance': 0.5.11_@firebase+app@0.7.27
+      '@firebase/performance-compat': 0.1.11_ikt45rtbctnl5l4y6p3bca5464
+      '@firebase/polyfill': 0.3.36
+      '@firebase/remote-config': 0.3.10_@firebase+app@0.7.27
+      '@firebase/remote-config-compat': 0.1.11_ikt45rtbctnl5l4y6p3bca5464
+      '@firebase/storage': 0.9.8_@firebase+app@0.7.27
+      '@firebase/storage-compat': 0.1.16_2whj6v3knk7rswcmdbn5bdkgna
+      '@firebase/util': 1.6.2
+    transitivePeerDependencies:
+      - bufferutil
+      - encoding
+      - utf-8-validate
+    dev: true
+
+  /flat-cache/3.0.4:
+    resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      flatted: 3.2.6
+      rimraf: 3.0.2
+    dev: true
+
+  /flat/5.0.2:
+    resolution: {integrity: sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==}
+    hasBin: true
+    dev: true
+
+  /flatted/3.2.6:
+    resolution: {integrity: sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ==}
+    dev: true
+
+  /flexsearch/0.7.21:
+    resolution: {integrity: sha512-W7cHV7Hrwjid6lWmy0IhsWDFQboWSng25U3VVywpHOTJnnAZNPScog67G+cVpeX9f7yDD21ih0WDrMMT+JoaYg==}
+    dev: true
+
+  /follow-redirects/1.15.1:
+    resolution: {integrity: sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dev: true
+
+  /follow-redirects/1.5.10:
+    resolution: {integrity: sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==}
+    engines: {node: '>=4.0'}
+    dependencies:
+      debug: 3.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  /for-each/0.3.3:
+    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
+    dependencies:
+      is-callable: 1.2.4
+    dev: false
+
+  /fork-ts-checker-webpack-plugin/6.2.10_vzvrbkqxq2uhuknms22gvb2xwq:
+    resolution: {integrity: sha512-HveFCHWSH2WlYU1tU3PkrupvW8lNFMTfH3Jk0TfC2mtktE9ibHGcifhCsCFvj+kqlDfNIlwmNLiNqR9jnSA7OQ==}
+    engines: {node: '>=10', yarn: '>=1.0.0'}
+    peerDependencies:
+      eslint: '>= 6'
+      typescript: '>= 2.7'
+      vue-template-compiler: '*'
+      webpack: '>= 4'
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+      vue-template-compiler:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@types/json-schema': 7.0.11
+      chalk: 4.1.0
+      chokidar: 3.5.3
+      cosmiconfig: 6.0.0
+      deepmerge: 4.2.2
+      eslint: 8.19.0
+      fs-extra: 9.1.0
+      glob: 7.2.3
+      memfs: 3.4.7
+      minimatch: 3.1.2
+      schema-utils: 2.7.0
+      semver: 7.3.7
+      tapable: 1.1.3
+      typescript: 4.7.4
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /form-data-encoder/1.7.1:
+    resolution: {integrity: sha512-EFRDrsMm/kyqbTQocNvRXMLjc7Es2Vk+IQFx/YW7hkUH1eBl4J1fqiP34l74Yt0pFLCNpc06fkbVk00008mzjg==}
+    dev: false
+
+  /form-data/3.0.1:
+    resolution: {integrity: sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==}
+    engines: {node: '>= 6'}
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+    dev: true
+
+  /forwarded/0.2.0:
+    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /fraction.js/4.2.0:
+    resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
+    dev: true
+
+  /fresh/0.5.2:
+    resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /fs-constants/1.0.0:
+    resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
+    dev: true
+
+  /fs-extra/10.1.0:
+    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      graceful-fs: 4.2.10
+      jsonfile: 6.1.0
+      universalify: 2.0.0
+    dev: true
+
+  /fs-extra/8.1.0:
+    resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
+    engines: {node: '>=6 <7 || >=8'}
+    dependencies:
+      graceful-fs: 4.2.10
+      jsonfile: 4.0.0
+      universalify: 0.1.2
+    dev: true
+
+  /fs-extra/9.1.0:
+    resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      at-least-node: 1.0.0
+      graceful-fs: 4.2.10
+      jsonfile: 6.1.0
+      universalify: 2.0.0
+    dev: true
+
+  /fs-minipass/2.1.0:
+    resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
+    engines: {node: '>= 8'}
+    dependencies:
+      minipass: 3.3.4
+    dev: true
+
+  /fs-monkey/1.0.3:
+    resolution: {integrity: sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==}
+    dev: true
+
+  /fs.realpath/1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+    dev: true
+
+  /fsevents/2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
+  /function-bind/1.1.1:
+    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
+
+  /function.prototype.name/1.1.5:
+    resolution: {integrity: sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+      functions-have-names: 1.2.3
+
+  /functional-red-black-tree/1.0.1:
+    resolution: {integrity: sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==}
+    dev: true
+
+  /functions-have-names/1.2.3:
+    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+
+  /gauge/2.7.4:
+    resolution: {integrity: sha512-14x4kjc6lkD3ltw589k0NrPD6cCNTD6CWoVUNpB85+DrtONoZn+Rug6xZU5RvSC4+TZPxA5AnBibQYAvZn41Hg==}
+    dependencies:
+      aproba: 1.2.0
+      console-control-strings: 1.1.0
+      has-unicode: 2.0.1
+      object-assign: 4.1.1
+      signal-exit: 3.0.7
+      string-width: 1.0.2
+      strip-ansi: 3.0.1
+      wide-align: 1.1.5
+    dev: true
+
+  /generic-names/4.0.0:
+    resolution: {integrity: sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==}
+    dependencies:
+      loader-utils: 3.2.0
+    dev: true
+
+  /gensync/1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  /get-caller-file/2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
+  /get-intrinsic/1.1.2:
+    resolution: {integrity: sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==}
+    dependencies:
+      function-bind: 1.1.1
+      has: 1.0.3
+      has-symbols: 1.0.3
+
+  /get-package-type/0.1.0:
+    resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
+    engines: {node: '>=8.0.0'}
+    dev: true
+
+  /get-stream/5.2.0:
+    resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
+    engines: {node: '>=8'}
+    dependencies:
+      pump: 3.0.0
+    dev: false
+
+  /get-stream/6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+
+  /get-symbol-description/1.0.0:
+    resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.1.2
+
+  /git-remote-origin-url/4.0.0:
+    resolution: {integrity: sha512-EAxDksNdjuWgmVW9pVvA9jQDi/dmTaiDONktIy7qiRRhBZUI4FQK1YvBvteuTSX24aNKg9lfgxNYJEeeSXe6DA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      gitconfiglocal: 2.1.0
+    dev: true
+
+  /gitconfiglocal/2.1.0:
+    resolution: {integrity: sha512-qoerOEliJn3z+Zyn1HW2F6eoYJqKwS6MgC9cztTLUB/xLWX8gD/6T60pKn4+t/d6tP7JlybI7Z3z+I572CR/Vg==}
+    dependencies:
+      ini: 1.3.8
+    dev: true
+
+  /glob-parent/5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+    dependencies:
+      is-glob: 4.0.3
+    dev: true
+
+  /glob-parent/6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      is-glob: 4.0.3
+    dev: true
+
+  /glob-to-regexp/0.4.1:
+    resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
+
+  /glob/7.1.4:
+    resolution: {integrity: sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+    dev: true
+
+  /glob/7.1.7:
+    resolution: {integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+    dev: true
+
+  /glob/7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+    dev: true
+
+  /global/4.4.0:
+    resolution: {integrity: sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==}
+    dependencies:
+      min-document: 2.19.0
+      process: 0.11.10
+    dev: false
+
+  /globals/11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
+
+  /globals/13.16.0:
+    resolution: {integrity: sha512-A1lrQfpNF+McdPOnnFqY3kSN0AFTy485bTi1bkLk4mVPODIUEcSfhHgRqA+QdXPksrSTTztYXx37NFV+GpGk3Q==}
+    engines: {node: '>=8'}
+    dependencies:
+      type-fest: 0.20.2
+    dev: true
+
+  /globby/10.0.1:
+    resolution: {integrity: sha512-sSs4inE1FB2YQiymcmTv6NWENryABjUNPeWhOvmn4SjtKybglsyPZxFB3U1/+L1bYi0rNZDqCLlHyLYDl1Pq5A==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@types/glob': 7.2.0
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.2.11
+      glob: 7.2.3
+      ignore: 5.2.0
+      merge2: 1.4.1
+      slash: 3.0.0
+    dev: true
+
+  /globby/11.1.0:
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
+    dependencies:
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.2.11
+      ignore: 5.2.0
+      merge2: 1.4.1
+      slash: 3.0.0
+    dev: true
+
+  /got/12.1.0:
+    resolution: {integrity: sha512-hBv2ty9QN2RdbJJMK3hesmSkFTjVIHyIDDbssCKnSmq62edGgImJWD10Eb1k77TiV1bxloxqcFAVK8+9pkhOig==}
+    engines: {node: '>=14.16'}
+    dependencies:
+      '@sindresorhus/is': 4.6.0
+      '@szmarczak/http-timer': 5.0.1
+      '@types/cacheable-request': 6.0.2
+      '@types/responselike': 1.0.0
+      cacheable-lookup: 6.0.4
+      cacheable-request: 7.0.2
+      decompress-response: 6.0.0
+      form-data-encoder: 1.7.1
+      get-stream: 6.0.1
+      http2-wrapper: 2.1.11
+      lowercase-keys: 3.0.0
+      p-cancelable: 3.0.0
+      responselike: 2.0.0
+    dev: false
+
+  /graceful-fs/4.2.10:
+    resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
+
+  /gzip-size/6.0.0:
+    resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
+    engines: {node: '>=10'}
+    dependencies:
+      duplexer: 0.1.2
+    dev: true
+
+  /handle-thing/2.0.1:
+    resolution: {integrity: sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==}
+    dev: true
+
+  /harmony-reflect/1.6.2:
+    resolution: {integrity: sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==}
+    dev: true
+
+  /has-bigints/1.0.2:
+    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
+
+  /has-flag/3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+
+  /has-flag/4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  /has-property-descriptors/1.0.0:
+    resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
+    dependencies:
+      get-intrinsic: 1.1.2
+
+  /has-symbols/1.0.3:
+    resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
+    engines: {node: '>= 0.4'}
+
+  /has-tostringtag/1.0.0:
+    resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-symbols: 1.0.3
+
+  /has-unicode/2.0.1:
+    resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==}
+    dev: true
+
+  /has/1.0.3:
+    resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
+    engines: {node: '>= 0.4.0'}
+    dependencies:
+      function-bind: 1.1.1
+
+  /he/1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+    dev: true
+
+  /header-case/2.0.4:
+    resolution: {integrity: sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==}
+    dependencies:
+      capital-case: 1.0.4
+      tslib: 2.4.0
+    dev: true
+
+  /history/5.3.0:
+    resolution: {integrity: sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==}
+    dependencies:
+      '@babel/runtime': 7.18.6
+    dev: false
+
+  /hoist-non-react-statics/3.3.2:
+    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+    dependencies:
+      react-is: 16.13.1
+    dev: false
+
+  /hotkeys-js/3.9.3:
+    resolution: {integrity: sha512-s+f0xyvDmf6+DyrFQ2SY+eA7lbvMbjqkqi0I0SpMgnN5tZx7DeH8nsWhkJR4KEq3pxDPHJppDUhdt1rZFW5LeQ==}
+    dev: false
+
+  /hotkeys-js/3.9.4:
+    resolution: {integrity: sha512-2zuLt85Ta+gIyvs4N88pCYskNrxf1TFv3LR9t5mdAZIX8BcgQQ48F2opUptvHa6m8zsy5v/a0i9mWzTrlNWU0Q==}
+    dev: false
+
+  /hpack.js/2.1.6:
+    resolution: {integrity: sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==}
+    dependencies:
+      inherits: 2.0.4
+      obuf: 1.1.2
+      readable-stream: 2.3.7
+      wbuf: 1.7.3
+    dev: true
+
+  /html-encoding-sniffer/2.0.1:
+    resolution: {integrity: sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      whatwg-encoding: 1.0.5
+    dev: true
+
+  /html-encoding-sniffer/3.0.0:
+    resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
+    engines: {node: '>=12'}
+    dependencies:
+      whatwg-encoding: 2.0.0
+    dev: true
+
+  /html-entities/2.3.3:
+    resolution: {integrity: sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==}
+    dev: true
+
+  /html-escaper/2.0.2:
+    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
+    dev: true
+
+  /html-minifier-terser/6.1.0:
+    resolution: {integrity: sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==}
+    engines: {node: '>=12'}
+    hasBin: true
+    dependencies:
+      camel-case: 4.1.2
+      clean-css: 5.3.0
+      commander: 8.3.0
+      he: 1.2.0
+      param-case: 3.0.4
+      relateurl: 0.2.7
+      terser: 5.14.1
+    dev: true
+
+  /html-webpack-plugin/5.5.0_webpack@5.73.0:
+    resolution: {integrity: sha512-sy88PC2cRTVxvETRgUHFrL4No3UxvcH8G1NepGhqaTT+GXN2kTamqasot0inS5hXeg1cMbFDt27zzo9p35lZVw==}
+    engines: {node: '>=10.13.0'}
+    peerDependencies:
+      webpack: ^5.20.0
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+    dependencies:
+      '@types/html-minifier-terser': 6.1.0
+      html-minifier-terser: 6.1.0
+      lodash: 4.17.21
+      pretty-error: 4.0.0
+      tapable: 2.2.1
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /htmlparser2/6.1.0:
+    resolution: {integrity: sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==}
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 4.3.1
+      domutils: 2.8.0
+      entities: 2.2.0
+    dev: true
+
+  /http-cache-semantics/4.1.0:
+    resolution: {integrity: sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==}
+    dev: false
+
+  /http-deceiver/1.2.7:
+    resolution: {integrity: sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==}
+    dev: true
+
+  /http-errors/1.6.3:
+    resolution: {integrity: sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      depd: 1.1.2
+      inherits: 2.0.3
+      setprototypeof: 1.1.0
+      statuses: 1.5.0
+    dev: true
+
+  /http-errors/2.0.0:
+    resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.1
+      toidentifier: 1.0.1
+    dev: true
+
+  /http-parser-js/0.5.8:
+    resolution: {integrity: sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==}
+    dev: true
+
+  /http-proxy-agent/4.0.1:
+    resolution: {integrity: sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==}
+    engines: {node: '>= 6'}
+    dependencies:
+      '@tootallnate/once': 1.1.2
+      agent-base: 6.0.2
+      debug: 4.3.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /http-proxy-middleware/2.0.6_@types+express@4.17.13:
+    resolution: {integrity: sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@types/express': ^4.17.13
+    peerDependenciesMeta:
+      '@types/express':
+        optional: true
+    dependencies:
+      '@types/express': 4.17.13
+      '@types/http-proxy': 1.17.9
+      http-proxy: 1.18.1
+      is-glob: 4.0.3
+      is-plain-obj: 3.0.0
+      micromatch: 4.0.5
+    transitivePeerDependencies:
+      - debug
+    dev: true
+
+  /http-proxy/1.18.1:
+    resolution: {integrity: sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      eventemitter3: 4.0.7
+      follow-redirects: 1.15.1
+      requires-port: 1.0.0
+    transitivePeerDependencies:
+      - debug
+    dev: true
+
+  /http-server/14.1.0:
+    resolution: {integrity: sha512-5lYsIcZtf6pdR8tCtzAHTWrAveo4liUlJdWc7YafwK/maPgYHs+VNP6KpCClmUnSorJrARVMXqtT055zBv11Yg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    dependencies:
+      basic-auth: 2.0.1
+      chalk: 4.1.2
+      corser: 2.0.1
+      he: 1.2.0
+      html-encoding-sniffer: 3.0.0
+      http-proxy: 1.18.1
+      mime: 1.6.0
+      minimist: 1.2.6
+      opener: 1.5.2
+      portfinder: 1.0.28
+      secure-compare: 3.0.1
+      union: 0.5.0
+      url-join: 4.0.1
+    transitivePeerDependencies:
+      - debug
+      - supports-color
+    dev: true
+
+  /http2-wrapper/2.1.11:
+    resolution: {integrity: sha512-aNAk5JzLturWEUiuhAN73Jcbq96R7rTitAoXV54FYMatvihnpD2+6PUgU4ce3D/m5VDbw+F5CsyKSF176ptitQ==}
+    engines: {node: '>=10.19.0'}
+    dependencies:
+      quick-lru: 5.1.1
+      resolve-alpn: 1.2.1
+    dev: false
+
+  /https-proxy-agent/5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+    engines: {node: '>= 6'}
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.3.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /human-signals/2.1.0:
+    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
+    engines: {node: '>=10.17.0'}
+    dev: true
+
+  /human-signals/3.0.1:
+    resolution: {integrity: sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==}
+    engines: {node: '>=12.20.0'}
+    dev: true
+
+  /husky/8.0.1:
+    resolution: {integrity: sha512-xs7/chUH/CKdOCs7Zy0Aev9e/dKOMZf3K1Az1nar3tzlv0jfqnYtu235bstsWTmXOR0EfINrPa97yy4Lz6RiKw==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
+
+  /hyphenate-style-name/1.0.4:
+    resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==}
+    dev: false
+
+  /iconv-lite/0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      safer-buffer: 2.1.2
+    dev: true
+
+  /iconv-lite/0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      safer-buffer: 2.1.2
+    dev: true
+
+  /icss-replace-symbols/1.1.0:
+    resolution: {integrity: sha512-chIaY3Vh2mh2Q3RGXttaDIzeiPvaVXJ+C4DAh/w3c37SKZ/U6PGMmuicR2EQQp9bKG8zLMCl7I+PtIoOOPp8Gg==}
+    dev: true
+
+  /icss-utils/5.1.0_postcss@8.4.14:
+    resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      postcss: 8.4.14
+    dev: true
+
+  /idb-keyval/6.2.0:
+    resolution: {integrity: sha512-uw+MIyQn2jl3+hroD7hF8J7PUviBU7BPKWw4f/ISf32D4LoGu98yHjrzWWJDASu9QNrX10tCJqk9YY0ClWm8Ng==}
+    dependencies:
+      safari-14-idb-fix: 3.0.0
+    dev: false
+
+  /idb/7.0.1:
+    resolution: {integrity: sha512-UUxlE7vGWK5RfB/fDwEGgRf84DY/ieqNha6msMV99UsEMQhJ1RwbCd8AYBj3QMgnE3VZnfQvm4oKVCJTYlqIgg==}
+    dev: true
+
+  /identity-obj-proxy/3.0.0:
+    resolution: {integrity: sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==}
+    engines: {node: '>=4'}
+    dependencies:
+      harmony-reflect: 1.6.2
+    dev: true
+
+  /ieee754/1.1.13:
+    resolution: {integrity: sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==}
+    dev: false
+
+  /ieee754/1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+
+  /ignore/5.2.0:
+    resolution: {integrity: sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==}
+    engines: {node: '>= 4'}
+    dev: true
+
+  /image-size/0.5.5:
+    resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /immediate/3.0.6:
+    resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
+    dev: true
+
+  /immer/9.0.15:
+    resolution: {integrity: sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ==}
+    dev: false
+
+  /immutable/4.1.0:
+    resolution: {integrity: sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==}
+    dev: true
+
+  /import-cwd/3.0.0:
+    resolution: {integrity: sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==}
+    engines: {node: '>=8'}
+    dependencies:
+      import-from: 3.0.0
+    dev: true
+
+  /import-fresh/3.3.0:
+    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
+    engines: {node: '>=6'}
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  /import-from/3.0.0:
+    resolution: {integrity: sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      resolve-from: 5.0.0
+    dev: true
+
+  /import-local/3.1.0:
+    resolution: {integrity: sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==}
+    engines: {node: '>=8'}
+    hasBin: true
+    dependencies:
+      pkg-dir: 4.2.0
+      resolve-cwd: 3.0.0
+    dev: true
+
+  /imurmurhash/0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+    dev: true
+
+  /indent-string/4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /inflight/1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+    dev: true
+
+  /inherits/2.0.3:
+    resolution: {integrity: sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==}
+    dev: true
+
+  /inherits/2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  /ini/1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+    dev: true
+
+  /inline-style-expand-shorthand/1.4.0:
+    resolution: {integrity: sha512-FBxbgh1+ziiPFA09s0JgYtB7gRYfbfVrcO1sTv2JnPwbbz0M35zSYVUR3oyrTfLo/S+sbY4JG1W16hY91Hbh/Q==}
+    dev: false
+
+  /inline-style-prefixer/6.0.1:
+    resolution: {integrity: sha512-AsqazZ8KcRzJ9YPN1wMH2aNM7lkWQ8tSPrW5uDk1ziYwiAPWSZnUsC7lfZq+BDqLqz0B4Pho5wscWcJzVvRzDQ==}
+    dependencies:
+      css-in-js-utils: 2.0.1
+    dev: false
+
+  /inquirer/6.5.2:
+    resolution: {integrity: sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      ansi-escapes: 3.2.0
+      chalk: 2.4.2
+      cli-cursor: 2.1.0
+      cli-width: 2.2.1
+      external-editor: 3.1.0
+      figures: 2.0.0
+      lodash: 4.17.21
+      mute-stream: 0.0.7
+      run-async: 2.4.1
+      rxjs: 6.6.7
+      string-width: 2.1.1
+      strip-ansi: 5.2.0
+      through: 2.3.8
+    dev: true
+
+  /internal-slot/1.0.3:
+    resolution: {integrity: sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      get-intrinsic: 1.1.2
+      has: 1.0.3
+      side-channel: 1.0.4
+
+  /ipaddr.js/1.9.1:
+    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
+    engines: {node: '>= 0.10'}
+    dev: true
+
+  /ipaddr.js/2.0.1:
+    resolution: {integrity: sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==}
+    engines: {node: '>= 10'}
+    dev: true
+
+  /is-arguments/1.1.1:
+    resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      has-tostringtag: 1.0.0
+    dev: false
+
+  /is-arrayish/0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
+  /is-bigint/1.0.4:
+    resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
+    dependencies:
+      has-bigints: 1.0.2
+
+  /is-binary-path/2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+    dependencies:
+      binary-extensions: 2.2.0
+    dev: true
+
+  /is-boolean-object/1.1.2:
+    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      has-tostringtag: 1.0.0
+
+  /is-buffer/2.0.5:
+    resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==}
+    engines: {node: '>=4'}
+    dev: false
+
+  /is-builtin-module/3.1.0:
+    resolution: {integrity: sha512-OV7JjAgOTfAFJmHZLvpSTb4qi0nIILDV1gWPYDnDJUTNFM5aGlRAhk4QcT8i7TuAleeEV5Fdkqn3t4mS+Q11fg==}
+    engines: {node: '>=6'}
+    dependencies:
+      builtin-modules: 3.3.0
+    dev: true
+
+  /is-callable/1.2.4:
+    resolution: {integrity: sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==}
+    engines: {node: '>= 0.4'}
+
+  /is-core-module/2.9.0:
+    resolution: {integrity: sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==}
+    dependencies:
+      has: 1.0.3
+
+  /is-date-object/1.0.5:
+    resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.0
+
+  /is-docker/2.2.1:
+    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+    dev: true
+
+  /is-extglob/2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /is-fullwidth-code-point/1.0.0:
+    resolution: {integrity: sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      number-is-nan: 1.0.1
+    dev: true
+
+  /is-fullwidth-code-point/2.0.0:
+    resolution: {integrity: sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /is-fullwidth-code-point/3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  /is-fullwidth-code-point/4.0.0:
+    resolution: {integrity: sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /is-generator-fn/2.1.0:
+    resolution: {integrity: sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /is-generator-function/1.0.10:
+    resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.0
+    dev: false
+
+  /is-glob/4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-extglob: 2.1.1
+    dev: true
+
+  /is-hotkey/0.1.8:
+    resolution: {integrity: sha512-qs3NZ1INIS+H+yeo7cD9pDfwYV/jqRh1JG9S9zYrNudkoUQg7OL7ziXqRKu+InFjUIDoP2o6HIkLYMh1pcWgyQ==}
+    dev: false
+
+  /is-hotkey/0.2.0:
+    resolution: {integrity: sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==}
+    dev: false
+
+  /is-interactive/1.0.0:
+    resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /is-module/1.0.0:
+    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
+    dev: true
+
+  /is-nan/1.3.2:
+    resolution: {integrity: sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+    dev: false
+
+  /is-negative-zero/2.0.2:
+    resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==}
+    engines: {node: '>= 0.4'}
+
+  /is-number-object/1.0.7:
+    resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.0
+
+  /is-number/7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+    dev: true
+
+  /is-plain-obj/3.0.0:
+    resolution: {integrity: sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /is-plain-object/2.0.4:
+    resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      isobject: 3.0.1
+    dev: true
+
+  /is-plain-object/3.0.1:
+    resolution: {integrity: sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /is-plain-object/5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /is-potential-custom-element-name/1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+    dev: true
+
+  /is-reference/1.2.1:
+    resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
+    dependencies:
+      '@types/estree': 0.0.52
+    dev: true
+
+  /is-regex/1.1.4:
+    resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      has-tostringtag: 1.0.0
+
+  /is-shared-array-buffer/1.0.2:
+    resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==}
+    dependencies:
+      call-bind: 1.0.2
+
+  /is-stream/2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /is-stream/3.0.0:
+    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: true
+
+  /is-string/1.0.7:
+    resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.0
+
+  /is-symbol/1.0.4:
+    resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-symbols: 1.0.3
+
+  /is-typed-array/1.1.9:
+    resolution: {integrity: sha512-kfrlnTTn8pZkfpJMUgYD7YZ3qzeJgWUn8XfVYBARc4wnmNOmLbmuuaAs3q5fvB0UJOn6yHAKaGTPM7d6ezoD/A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.5
+      call-bind: 1.0.2
+      es-abstract: 1.20.1
+      for-each: 0.3.3
+      has-tostringtag: 1.0.0
+    dev: false
+
+  /is-typedarray/1.0.0:
+    resolution: {integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==}
+    dev: true
+
+  /is-unicode-supported/0.1.0:
+    resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /is-url/1.2.4:
+    resolution: {integrity: sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==}
+    dev: false
+
+  /is-weakref/1.0.2:
+    resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
+    dependencies:
+      call-bind: 1.0.2
+
+  /is-wsl/2.2.0:
+    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
+    engines: {node: '>=8'}
+    dependencies:
+      is-docker: 2.2.1
+    dev: true
+
+  /isarray/1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+
+  /isexe/2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+    dev: true
+
+  /isobject/3.0.1:
+    resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
+    engines: {node: '>=0.10.0'}
+
+  /isomorphic.js/0.2.5:
+    resolution: {integrity: sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==}
+
+  /istanbul-lib-coverage/3.2.0:
+    resolution: {integrity: sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /istanbul-lib-instrument/5.2.0:
+    resolution: {integrity: sha512-6Lthe1hqXHBNsqvgDzGO6l03XNeu3CrG4RqQ1KM9+l5+jNGpEJfIELx1NS3SEHmJQA8np/u+E4EPRKRiu6m19A==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/parser': 7.18.6
+      '@istanbuljs/schema': 0.1.3
+      istanbul-lib-coverage: 3.2.0
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /istanbul-lib-report/3.0.0:
+    resolution: {integrity: sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==}
+    engines: {node: '>=8'}
+    dependencies:
+      istanbul-lib-coverage: 3.2.0
+      make-dir: 3.1.0
+      supports-color: 7.2.0
+    dev: true
+
+  /istanbul-lib-source-maps/4.0.1:
+    resolution: {integrity: sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==}
+    engines: {node: '>=10'}
+    dependencies:
+      debug: 4.3.4
+      istanbul-lib-coverage: 3.2.0
+      source-map: 0.6.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /istanbul-reports/3.1.4:
+    resolution: {integrity: sha512-r1/DshN4KSE7xWEknZLLLLDn5CJybV3nw01VTkp6D5jzLuELlcbudfj/eSQFvrKsJuTVCGnePO7ho82Nw9zzfw==}
+    engines: {node: '>=8'}
+    dependencies:
+      html-escaper: 2.0.2
+      istanbul-lib-report: 3.0.0
+    dev: true
+
+  /jake/10.8.5:
+    resolution: {integrity: sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      async: 3.2.4
+      chalk: 4.1.0
+      filelist: 1.0.4
+      minimatch: 3.1.2
+    dev: true
+
+  /jest-changed-files/28.0.2:
+    resolution: {integrity: sha512-QX9u+5I2s54ZnGoMEjiM2WeBvJR2J7w/8ZUmH2um/WLAuGAYFQcsVXY9+1YL6k0H/AGUdH8pXUAv6erDqEsvIA==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      execa: 5.1.1
+      throat: 6.0.1
+    dev: true
+
+  /jest-circus/27.5.1:
+    resolution: {integrity: sha512-D95R7x5UtlMA5iBYsOHFFbMD/GVA4R/Kdq15f7xYWUfWHBto9NYRsOvnSauTgdF+ogCpJ4tyKOXhUifxS65gdw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/environment': 27.5.1
+      '@jest/test-result': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/node': 18.0.1
+      chalk: 4.1.0
+      co: 4.6.0
+      dedent: 0.7.0
+      expect: 27.5.1
+      is-generator-fn: 2.1.0
+      jest-each: 27.5.1
+      jest-matcher-utils: 27.5.1
+      jest-message-util: 27.5.1
+      jest-runtime: 27.5.1
+      jest-snapshot: 27.5.1
+      jest-util: 27.5.1
+      pretty-format: 27.5.1
+      slash: 3.0.0
+      stack-utils: 2.0.5
+      throat: 6.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /jest-circus/28.1.2:
+    resolution: {integrity: sha512-E2vdPIJG5/69EMpslFhaA46WkcrN74LI5V/cSJ59L7uS8UNoXbzTxmwhpi9XrIL3zqvMt5T0pl5k2l2u2GwBNQ==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/environment': 28.1.2
+      '@jest/expect': 28.1.2
+      '@jest/test-result': 28.1.1
+      '@jest/types': 28.1.1
+      '@types/node': 18.0.1
+      chalk: 4.1.2
+      co: 4.6.0
+      dedent: 0.7.0
+      is-generator-fn: 2.1.0
+      jest-each: 28.1.1
+      jest-matcher-utils: 28.1.1
+      jest-message-util: 28.1.1
+      jest-runtime: 28.1.2
+      jest-snapshot: 28.1.2
+      jest-util: 28.1.1
+      pretty-format: 28.1.1
+      slash: 3.0.0
+      stack-utils: 2.0.5
+      throat: 6.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /jest-cli/28.1.2_hxaxlvfys2pc3hefxwkmyo5cpq:
+    resolution: {integrity: sha512-l6eoi5Do/IJUXAFL9qRmDiFpBeEJAnjJb1dcd9i/VWfVWbp3mJhuH50dNtX67Ali4Ecvt4eBkWb4hXhPHkAZTw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    hasBin: true
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+    dependencies:
+      '@jest/core': 28.1.2_ts-node@10.8.2
+      '@jest/test-result': 28.1.1
+      '@jest/types': 28.1.1
+      chalk: 4.1.2
+      exit: 0.1.2
+      graceful-fs: 4.2.10
+      import-local: 3.1.0
+      jest-config: 28.1.2_hxaxlvfys2pc3hefxwkmyo5cpq
+      jest-util: 28.1.1
+      jest-validate: 28.1.1
+      prompts: 2.4.2
+      yargs: 17.5.1
+    transitivePeerDependencies:
+      - '@types/node'
+      - supports-color
+      - ts-node
+    dev: true
+
+  /jest-config/27.5.1_ts-node@10.8.2:
+    resolution: {integrity: sha512-5sAsjm6tGdsVbW9ahcChPAFCk4IlkQUknH5AvKjuLTSlcO/wCZKyFdn7Rg0EkC+OGgWODEy2hDpWB1PgzH0JNA==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    peerDependencies:
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      ts-node:
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@jest/test-sequencer': 27.5.1
+      '@jest/types': 27.5.1
+      babel-jest: 27.5.1_@babel+core@7.18.6
+      chalk: 4.1.0
+      ci-info: 3.3.2
+      deepmerge: 4.2.2
+      glob: 7.2.3
+      graceful-fs: 4.2.10
+      jest-circus: 27.5.1
+      jest-environment-jsdom: 27.5.1
+      jest-environment-node: 27.5.1
+      jest-get-type: 27.5.1
+      jest-jasmine2: 27.5.1
+      jest-regex-util: 27.5.1
+      jest-resolve: 27.5.1
+      jest-runner: 27.5.1
+      jest-util: 27.5.1
+      jest-validate: 27.5.1
+      micromatch: 4.0.5
+      parse-json: 5.2.0
+      pretty-format: 27.5.1
+      slash: 3.0.0
+      strip-json-comments: 3.1.1
+      ts-node: 10.8.2_y42jqzo3jkzuv3kp7opavo2xbi
+    transitivePeerDependencies:
+      - bufferutil
+      - canvas
+      - supports-color
+      - utf-8-validate
+    dev: true
+
+  /jest-config/28.1.2_hxaxlvfys2pc3hefxwkmyo5cpq:
+    resolution: {integrity: sha512-g6EfeRqddVbjPVBVY4JWpUY4IvQoFRIZcv4V36QkqzE0IGhEC/VkugFeBMAeUE7PRgC8KJF0yvJNDeQRbamEVA==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    peerDependencies:
+      '@types/node': '*'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      ts-node:
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      '@jest/test-sequencer': 28.1.1
+      '@jest/types': 28.1.1
+      '@types/node': 18.0.1
+      babel-jest: 28.1.2_@babel+core@7.18.6
+      chalk: 4.1.2
+      ci-info: 3.3.2
+      deepmerge: 4.2.2
+      glob: 7.2.3
+      graceful-fs: 4.2.10
+      jest-circus: 28.1.2
+      jest-environment-node: 28.1.2
+      jest-get-type: 28.0.2
+      jest-regex-util: 28.0.2
+      jest-resolve: 28.1.1
+      jest-runner: 28.1.2
+      jest-util: 28.1.1
+      jest-validate: 28.1.1
+      micromatch: 4.0.5
+      parse-json: 5.2.0
+      pretty-format: 28.1.1
+      slash: 3.0.0
+      strip-json-comments: 3.1.1
+      ts-node: 10.8.2_y42jqzo3jkzuv3kp7opavo2xbi
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /jest-diff/27.5.1:
+    resolution: {integrity: sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      chalk: 4.1.0
+      diff-sequences: 27.5.1
+      jest-get-type: 27.5.1
+      pretty-format: 27.5.1
+    dev: true
+
+  /jest-diff/28.1.1:
+    resolution: {integrity: sha512-/MUUxeR2fHbqHoMMiffe/Afm+U8U4olFRJ0hiVG2lZatPJcnGxx292ustVu7bULhjV65IYMxRdploAKLbcrsyg==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      chalk: 4.1.2
+      diff-sequences: 28.1.1
+      jest-get-type: 28.0.2
+      pretty-format: 28.1.1
+    dev: true
+
+  /jest-docblock/27.5.1:
+    resolution: {integrity: sha512-rl7hlABeTsRYxKiUfpHrQrG4e2obOiTQWfMEH3PxPjOtdsfLQO4ReWSZaQ7DETm4xu07rl4q/h4zcKXyU0/OzQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      detect-newline: 3.1.0
+    dev: true
+
+  /jest-docblock/28.1.1:
+    resolution: {integrity: sha512-3wayBVNiOYx0cwAbl9rwm5kKFP8yHH3d/fkEaL02NPTkDojPtheGB7HZSFY4wzX+DxyrvhXz0KSCVksmCknCuA==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      detect-newline: 3.1.0
+    dev: true
+
+  /jest-each/27.5.1:
+    resolution: {integrity: sha512-1Ff6p+FbhT/bXQnEouYy00bkNSY7OUpfIcmdl8vZ31A1UUaurOLPA8a8BbJOF2RDUElwJhmeaV7LnagI+5UwNQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/types': 27.5.1
+      chalk: 4.1.0
+      jest-get-type: 27.5.1
+      jest-util: 27.5.1
+      pretty-format: 27.5.1
+    dev: true
+
+  /jest-each/28.1.1:
+    resolution: {integrity: sha512-A042rqh17ZvEhRceDMi784ppoXR7MWGDEKTXEZXb4svt0eShMZvijGxzKsx+yIjeE8QYmHPrnHiTSQVhN4nqaw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/types': 28.1.1
+      chalk: 4.1.2
+      jest-get-type: 28.0.2
+      jest-util: 28.1.1
+      pretty-format: 28.1.1
+    dev: true
+
+  /jest-environment-jsdom/27.5.1:
+    resolution: {integrity: sha512-TFBvkTC1Hnnnrka/fUb56atfDtJ9VMZ94JkjTbggl1PEpwrYtUBKMezB3inLmWqQsXYLcMwNoDQwoBTAvFfsfw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/environment': 27.5.1
+      '@jest/fake-timers': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/node': 18.0.1
+      jest-mock: 27.5.1
+      jest-util: 27.5.1
+      jsdom: 16.7.0
+    transitivePeerDependencies:
+      - bufferutil
+      - canvas
+      - supports-color
+      - utf-8-validate
+    dev: true
+
+  /jest-environment-node/27.5.1:
+    resolution: {integrity: sha512-Jt4ZUnxdOsTGwSRAfKEnE6BcwsSPNOijjwifq5sDFSA2kesnXTvNqKHYgM0hDq3549Uf/KzdXNYn4wMZJPlFLw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/environment': 27.5.1
+      '@jest/fake-timers': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/node': 18.0.1
+      jest-mock: 27.5.1
+      jest-util: 27.5.1
+    dev: true
+
+  /jest-environment-node/28.1.2:
+    resolution: {integrity: sha512-oYsZz9Qw27XKmOgTtnl0jW7VplJkN2oeof+SwAwKFQacq3CLlG9u4kTGuuLWfvu3J7bVutWlrbEQMOCL/jughw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/environment': 28.1.2
+      '@jest/fake-timers': 28.1.2
+      '@jest/types': 28.1.1
+      '@types/node': 18.0.1
+      jest-mock: 28.1.1
+      jest-util: 28.1.1
+    dev: true
+
+  /jest-get-type/27.5.1:
+    resolution: {integrity: sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dev: true
+
+  /jest-get-type/28.0.2:
+    resolution: {integrity: sha512-ioj2w9/DxSYHfOm5lJKCdcAmPJzQXmbM/Url3rhlghrPvT3tt+7a/+oXc9azkKmLvoiXjtV83bEWqi+vs5nlPA==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dev: true
+
+  /jest-haste-map/27.5.1:
+    resolution: {integrity: sha512-7GgkZ4Fw4NFbMSDSpZwXeBiIbx+t/46nJ2QitkOjvwPYyZmqttu2TDSimMHP1EkPOi4xUZAN1doE5Vd25H4Jng==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/types': 27.5.1
+      '@types/graceful-fs': 4.1.5
+      '@types/node': 18.0.1
+      anymatch: 3.1.2
+      fb-watchman: 2.0.1
+      graceful-fs: 4.2.10
+      jest-regex-util: 27.5.1
+      jest-serializer: 27.5.1
+      jest-util: 27.5.1
+      jest-worker: 27.5.1
+      micromatch: 4.0.5
+      walker: 1.0.8
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
+  /jest-haste-map/28.1.1:
+    resolution: {integrity: sha512-ZrRSE2o3Ezh7sb1KmeLEZRZ4mgufbrMwolcFHNRSjKZhpLa8TdooXOOFlSwoUzlbVs1t0l7upVRW2K7RWGHzbQ==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/types': 28.1.1
+      '@types/graceful-fs': 4.1.5
+      '@types/node': 18.0.1
+      anymatch: 3.1.2
+      fb-watchman: 2.0.1
+      graceful-fs: 4.2.10
+      jest-regex-util: 28.0.2
+      jest-util: 28.1.1
+      jest-worker: 28.1.1
+      micromatch: 4.0.5
+      walker: 1.0.8
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
+  /jest-jasmine2/27.5.1:
+    resolution: {integrity: sha512-jtq7VVyG8SqAorDpApwiJJImd0V2wv1xzdheGHRGyuT7gZm6gG47QEskOlzsN1PG/6WNaCo5pmwMHDf3AkG2pQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/environment': 27.5.1
+      '@jest/source-map': 27.5.1
+      '@jest/test-result': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/node': 18.0.1
+      chalk: 4.1.0
+      co: 4.6.0
+      expect: 27.5.1
+      is-generator-fn: 2.1.0
+      jest-each: 27.5.1
+      jest-matcher-utils: 27.5.1
+      jest-message-util: 27.5.1
+      jest-runtime: 27.5.1
+      jest-snapshot: 27.5.1
+      jest-util: 27.5.1
+      pretty-format: 27.5.1
+      throat: 6.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /jest-leak-detector/27.5.1:
+    resolution: {integrity: sha512-POXfWAMvfU6WMUXftV4HolnJfnPOGEu10fscNCA76KBpRRhcMN2c8d3iT2pxQS3HLbA+5X4sOUPzYO2NUyIlHQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      jest-get-type: 27.5.1
+      pretty-format: 27.5.1
+    dev: true
+
+  /jest-leak-detector/28.1.1:
+    resolution: {integrity: sha512-4jvs8V8kLbAaotE+wFR7vfUGf603cwYtFf1/PYEsyX2BAjSzj8hQSVTP6OWzseTl0xL6dyHuKs2JAks7Pfubmw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      jest-get-type: 28.0.2
+      pretty-format: 28.1.1
+    dev: true
+
+  /jest-matcher-utils/27.5.1:
+    resolution: {integrity: sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      chalk: 4.1.0
+      jest-diff: 27.5.1
+      jest-get-type: 27.5.1
+      pretty-format: 27.5.1
+    dev: true
+
+  /jest-matcher-utils/28.1.1:
+    resolution: {integrity: sha512-NPJPRWrbmR2nAJ+1nmnfcKKzSwgfaciCCrYZzVnNoxVoyusYWIjkBMNvu0RHJe7dNj4hH3uZOPZsQA+xAYWqsw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      chalk: 4.1.2
+      jest-diff: 28.1.1
+      jest-get-type: 28.0.2
+      pretty-format: 28.1.1
+    dev: true
+
+  /jest-message-util/27.5.1:
+    resolution: {integrity: sha512-rMyFe1+jnyAAf+NHwTclDz0eAaLkVDdKVHHBFWsBWHnnh5YeJMNWWsv7AbFYXfK3oTqvL7VTWkhNLu1jX24D+g==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@jest/types': 27.5.1
+      '@types/stack-utils': 2.0.1
+      chalk: 4.1.0
+      graceful-fs: 4.2.10
+      micromatch: 4.0.5
+      pretty-format: 27.5.1
+      slash: 3.0.0
+      stack-utils: 2.0.5
+    dev: true
+
+  /jest-message-util/28.1.1:
+    resolution: {integrity: sha512-xoDOOT66fLfmTRiqkoLIU7v42mal/SqwDKvfmfiWAdJMSJiU+ozgluO7KbvoAgiwIrrGZsV7viETjc8GNrA/IQ==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@jest/types': 28.1.1
+      '@types/stack-utils': 2.0.1
+      chalk: 4.1.2
+      graceful-fs: 4.2.10
+      micromatch: 4.0.5
+      pretty-format: 28.1.1
+      slash: 3.0.0
+      stack-utils: 2.0.5
+    dev: true
+
+  /jest-mock/27.5.1:
+    resolution: {integrity: sha512-K4jKbY1d4ENhbrG2zuPWaQBvDly+iZ2yAW+T1fATN78hc0sInwn7wZB8XtlNnvHug5RMwV897Xm4LqmPM4e2Og==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/types': 27.5.1
+      '@types/node': 18.0.1
+    dev: true
+
+  /jest-mock/28.1.1:
+    resolution: {integrity: sha512-bDCb0FjfsmKweAvE09dZT59IMkzgN0fYBH6t5S45NoJfd2DHkS3ySG2K+hucortryhO3fVuXdlxWcbtIuV/Skw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/types': 28.1.1
+      '@types/node': 18.0.1
+    dev: true
+
+  /jest-pnp-resolver/1.2.2_jest-resolve@27.5.1:
+    resolution: {integrity: sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==}
+    engines: {node: '>=6'}
+    peerDependencies:
+      jest-resolve: '*'
+    peerDependenciesMeta:
+      jest-resolve:
+        optional: true
+    dependencies:
+      jest-resolve: 27.5.1
+    dev: true
+
+  /jest-pnp-resolver/1.2.2_jest-resolve@28.1.1:
+    resolution: {integrity: sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==}
+    engines: {node: '>=6'}
+    peerDependencies:
+      jest-resolve: '*'
+    peerDependenciesMeta:
+      jest-resolve:
+        optional: true
+    dependencies:
+      jest-resolve: 28.1.1
+    dev: true
+
+  /jest-regex-util/27.5.1:
+    resolution: {integrity: sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dev: true
+
+  /jest-regex-util/28.0.2:
+    resolution: {integrity: sha512-4s0IgyNIy0y9FK+cjoVYoxamT7Zeo7MhzqRGx7YDYmaQn1wucY9rotiGkBzzcMXTtjrCAP/f7f+E0F7+fxPNdw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dev: true
+
+  /jest-resolve-dependencies/28.1.2:
+    resolution: {integrity: sha512-OXw4vbOZuyRTBi3tapWBqdyodU+T33ww5cPZORuTWkg+Y8lmsxQlVu3MWtJh6NMlKRTHQetF96yGPv01Ye7Mbg==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      jest-regex-util: 28.0.2
+      jest-snapshot: 28.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /jest-resolve/27.5.1:
+    resolution: {integrity: sha512-FFDy8/9E6CV83IMbDpcjOhumAQPDyETnU2KZ1O98DwTnz8AOBsW/Xv3GySr1mOZdItLR+zDZ7I/UdTFbgSOVCw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/types': 27.5.1
+      chalk: 4.1.0
+      graceful-fs: 4.2.10
+      jest-haste-map: 27.5.1
+      jest-pnp-resolver: 1.2.2_jest-resolve@27.5.1
+      jest-util: 27.5.1
+      jest-validate: 27.5.1
+      resolve: 1.22.1
+      resolve.exports: 1.1.0
+      slash: 3.0.0
+    dev: true
+
+  /jest-resolve/28.1.1:
+    resolution: {integrity: sha512-/d1UbyUkf9nvsgdBildLe6LAD4DalgkgZcKd0nZ8XUGPyA/7fsnaQIlKVnDiuUXv/IeZhPEDrRJubVSulxrShA==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      chalk: 4.1.2
+      graceful-fs: 4.2.10
+      jest-haste-map: 28.1.1
+      jest-pnp-resolver: 1.2.2_jest-resolve@28.1.1
+      jest-util: 28.1.1
+      jest-validate: 28.1.1
+      resolve: 1.22.1
+      resolve.exports: 1.1.0
+      slash: 3.0.0
+    dev: true
+
+  /jest-runner/27.5.1:
+    resolution: {integrity: sha512-g4NPsM4mFCOwFKXO4p/H/kWGdJp9V8kURY2lX8Me2drgXqG7rrZAx5kv+5H7wtt/cdFIjhqYx1HrlqWHaOvDaQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/console': 27.5.1
+      '@jest/environment': 27.5.1
+      '@jest/test-result': 27.5.1
+      '@jest/transform': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/node': 18.0.1
+      chalk: 4.1.0
+      emittery: 0.8.1
+      graceful-fs: 4.2.10
+      jest-docblock: 27.5.1
+      jest-environment-jsdom: 27.5.1
+      jest-environment-node: 27.5.1
+      jest-haste-map: 27.5.1
+      jest-leak-detector: 27.5.1
+      jest-message-util: 27.5.1
+      jest-resolve: 27.5.1
+      jest-runtime: 27.5.1
+      jest-util: 27.5.1
+      jest-worker: 27.5.1
+      source-map-support: 0.5.21
+      throat: 6.0.1
+    transitivePeerDependencies:
+      - bufferutil
+      - canvas
+      - supports-color
+      - utf-8-validate
+    dev: true
+
+  /jest-runner/28.1.2:
+    resolution: {integrity: sha512-6/k3DlAsAEr5VcptCMdhtRhOoYClZQmxnVMZvZ/quvPGRpN7OBQYPIC32tWSgOnbgqLXNs5RAniC+nkdFZpD4A==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/console': 28.1.1
+      '@jest/environment': 28.1.2
+      '@jest/test-result': 28.1.1
+      '@jest/transform': 28.1.2
+      '@jest/types': 28.1.1
+      '@types/node': 18.0.1
+      chalk: 4.1.2
+      emittery: 0.10.2
+      graceful-fs: 4.2.10
+      jest-docblock: 28.1.1
+      jest-environment-node: 28.1.2
+      jest-haste-map: 28.1.1
+      jest-leak-detector: 28.1.1
+      jest-message-util: 28.1.1
+      jest-resolve: 28.1.1
+      jest-runtime: 28.1.2
+      jest-util: 28.1.1
+      jest-watcher: 28.1.1
+      jest-worker: 28.1.1
+      source-map-support: 0.5.13
+      throat: 6.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /jest-runtime/27.5.1:
+    resolution: {integrity: sha512-o7gxw3Gf+H2IGt8fv0RiyE1+r83FJBRruoA+FXrlHw6xEyBsU8ugA6IPfTdVyA0w8HClpbK+DGJxH59UrNMx8A==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/environment': 27.5.1
+      '@jest/fake-timers': 27.5.1
+      '@jest/globals': 27.5.1
+      '@jest/source-map': 27.5.1
+      '@jest/test-result': 27.5.1
+      '@jest/transform': 27.5.1
+      '@jest/types': 27.5.1
+      chalk: 4.1.0
+      cjs-module-lexer: 1.2.2
+      collect-v8-coverage: 1.0.1
+      execa: 5.1.1
+      glob: 7.2.3
+      graceful-fs: 4.2.10
+      jest-haste-map: 27.5.1
+      jest-message-util: 27.5.1
+      jest-mock: 27.5.1
+      jest-regex-util: 27.5.1
+      jest-resolve: 27.5.1
+      jest-snapshot: 27.5.1
+      jest-util: 27.5.1
+      slash: 3.0.0
+      strip-bom: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /jest-runtime/28.1.2:
+    resolution: {integrity: sha512-i4w93OsWzLOeMXSi9epmakb2+3z0AchZtUQVF1hesBmcQQy4vtaql5YdVe9KexdJaVRyPDw8DoBR0j3lYsZVYw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/environment': 28.1.2
+      '@jest/fake-timers': 28.1.2
+      '@jest/globals': 28.1.2
+      '@jest/source-map': 28.1.2
+      '@jest/test-result': 28.1.1
+      '@jest/transform': 28.1.2
+      '@jest/types': 28.1.1
+      chalk: 4.1.2
+      cjs-module-lexer: 1.2.2
+      collect-v8-coverage: 1.0.1
+      execa: 5.1.1
+      glob: 7.2.3
+      graceful-fs: 4.2.10
+      jest-haste-map: 28.1.1
+      jest-message-util: 28.1.1
+      jest-mock: 28.1.1
+      jest-regex-util: 28.0.2
+      jest-resolve: 28.1.1
+      jest-snapshot: 28.1.2
+      jest-util: 28.1.1
+      slash: 3.0.0
+      strip-bom: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /jest-serializer/27.5.1:
+    resolution: {integrity: sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@types/node': 18.0.1
+      graceful-fs: 4.2.10
+    dev: true
+
+  /jest-snapshot/27.5.1:
+    resolution: {integrity: sha512-yYykXI5a0I31xX67mgeLw1DZ0bJB+gpq5IpSuCAoyDi0+BhgU/RIrL+RTzDmkNTchvDFWKP8lp+w/42Z3us5sA==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/generator': 7.18.7
+      '@babel/plugin-syntax-typescript': 7.18.6_@babel+core@7.18.6
+      '@babel/traverse': 7.18.6
+      '@babel/types': 7.18.7
+      '@jest/transform': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/babel__traverse': 7.17.1
+      '@types/prettier': 2.6.3
+      babel-preset-current-node-syntax: 1.0.1_@babel+core@7.18.6
+      chalk: 4.1.0
+      expect: 27.5.1
+      graceful-fs: 4.2.10
+      jest-diff: 27.5.1
+      jest-get-type: 27.5.1
+      jest-haste-map: 27.5.1
+      jest-matcher-utils: 27.5.1
+      jest-message-util: 27.5.1
+      jest-util: 27.5.1
+      natural-compare: 1.4.0
+      pretty-format: 27.5.1
+      semver: 7.3.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /jest-snapshot/28.1.2:
+    resolution: {integrity: sha512-wzrieFttZYfLvrCVRJxX+jwML2YTArOUqFpCoSVy1QUapx+LlV9uLbV/mMEhYj4t7aMeE9aSQFHSvV/oNoDAMA==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/generator': 7.18.7
+      '@babel/plugin-syntax-typescript': 7.18.6_@babel+core@7.18.6
+      '@babel/traverse': 7.18.6
+      '@babel/types': 7.18.7
+      '@jest/expect-utils': 28.1.1
+      '@jest/transform': 28.1.2
+      '@jest/types': 28.1.1
+      '@types/babel__traverse': 7.17.1
+      '@types/prettier': 2.6.3
+      babel-preset-current-node-syntax: 1.0.1_@babel+core@7.18.6
+      chalk: 4.1.2
+      expect: 28.1.1
+      graceful-fs: 4.2.10
+      jest-diff: 28.1.1
+      jest-get-type: 28.0.2
+      jest-haste-map: 28.1.1
+      jest-matcher-utils: 28.1.1
+      jest-message-util: 28.1.1
+      jest-util: 28.1.1
+      natural-compare: 1.4.0
+      pretty-format: 28.1.1
+      semver: 7.3.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /jest-util/27.5.1:
+    resolution: {integrity: sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/types': 27.5.1
+      '@types/node': 18.0.1
+      chalk: 4.1.0
+      ci-info: 3.3.2
+      graceful-fs: 4.2.10
+      picomatch: 2.3.1
+    dev: true
+
+  /jest-util/28.1.1:
+    resolution: {integrity: sha512-FktOu7ca1DZSyhPAxgxB6hfh2+9zMoJ7aEQA759Z6p45NuO8mWcqujH+UdHlCm/V6JTWwDztM2ITCzU1ijJAfw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/types': 28.1.1
+      '@types/node': 18.0.1
+      chalk: 4.1.2
+      ci-info: 3.3.2
+      graceful-fs: 4.2.10
+      picomatch: 2.3.1
+    dev: true
+
+  /jest-validate/27.5.1:
+    resolution: {integrity: sha512-thkNli0LYTmOI1tDB3FI1S1RTp/Bqyd9pTarJwL87OIBFuqEb5Apv5EaApEudYg4g86e3CT6kM0RowkhtEnCBQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/types': 27.5.1
+      camelcase: 6.3.0
+      chalk: 4.1.0
+      jest-get-type: 27.5.1
+      leven: 3.1.0
+      pretty-format: 27.5.1
+    dev: true
+
+  /jest-validate/28.1.1:
+    resolution: {integrity: sha512-Kpf6gcClqFCIZ4ti5++XemYJWUPCFUW+N2gknn+KgnDf549iLul3cBuKVe1YcWRlaF8tZV8eJCap0eECOEE3Ug==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/types': 28.1.1
+      camelcase: 6.3.0
+      chalk: 4.1.2
+      jest-get-type: 28.0.2
+      leven: 3.1.0
+      pretty-format: 28.1.1
+    dev: true
+
+  /jest-watcher/28.1.1:
+    resolution: {integrity: sha512-RQIpeZ8EIJMxbQrXpJQYIIlubBnB9imEHsxxE41f54ZwcqWLysL/A0ZcdMirf+XsMn3xfphVQVV4EW0/p7i7Ug==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/test-result': 28.1.1
+      '@jest/types': 28.1.1
+      '@types/node': 18.0.1
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      emittery: 0.10.2
+      jest-util: 28.1.1
+      string-length: 4.0.2
+    dev: true
+
+  /jest-worker/27.5.1:
+    resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
+    engines: {node: '>= 10.13.0'}
+    dependencies:
+      '@types/node': 18.0.1
+      merge-stream: 2.0.0
+      supports-color: 8.1.1
+
+  /jest-worker/28.1.1:
+    resolution: {integrity: sha512-Au7slXB08C6h+xbJPp7VIb6U0XX5Kc9uel/WFc6/rcTzGiaVCBRngBExSYuXSLFPULPSYU3cJ3ybS988lNFQhQ==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@types/node': 18.0.1
+      merge-stream: 2.0.0
+      supports-color: 8.1.1
+    dev: true
+
+  /jest/28.1.2_hxaxlvfys2pc3hefxwkmyo5cpq:
+    resolution: {integrity: sha512-Tuf05DwLeCh2cfWCQbcz9UxldoDyiR1E9Igaei5khjonKncYdc6LDfynKCEWozK0oLE3GD+xKAo2u8x/0s6GOg==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    hasBin: true
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+    dependencies:
+      '@jest/core': 28.1.2_ts-node@10.8.2
+      '@jest/types': 28.1.1
+      import-local: 3.1.0
+      jest-cli: 28.1.2_hxaxlvfys2pc3hefxwkmyo5cpq
+    transitivePeerDependencies:
+      - '@types/node'
+      - supports-color
+      - ts-node
+    dev: true
+
+  /jmespath/0.16.0:
+    resolution: {integrity: sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==}
+    engines: {node: '>= 0.6.0'}
+    dev: false
+
+  /jotai/1.7.4:
+    resolution: {integrity: sha512-PvkjL6DA4I0GFNFWt/1MKouTpN6Ohj0qyfuV4LoYGBHQRlf38qF6cPILozYsYZi2Nfeap9MdzWVGSYu1qBElKQ==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      '@babel/template': '*'
+      '@urql/core': '*'
+      immer: '*'
+      optics-ts: '*'
+      react: '>=16.8'
+      react-query: '*'
+      valtio: '*'
+      wonka: '*'
+      xstate: '*'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      '@babel/template':
+        optional: true
+      '@urql/core':
+        optional: true
+      immer:
+        optional: true
+      optics-ts:
+        optional: true
+      react:
+        optional: true
+      react-query:
+        optional: true
+      valtio:
+        optional: true
+      wonka:
+        optional: true
+      xstate:
+        optional: true
+    dev: false
+
+  /js-cookie/2.2.1:
+    resolution: {integrity: sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==}
+    dev: false
+
+  /js-logger/1.6.1:
+    resolution: {integrity: sha512-yTgMCPXVjhmg28CuUH8CKjU+cIKL/G+zTu4Fn4lQxs8mRFH/03QTNvEFngcxfg/gRDiQAOoyCKmMTOm9ayOzXA==}
+    dev: false
+
+  /js-tokens/4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  /js-yaml/3.14.1:
+    resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
+    hasBin: true
+    dependencies:
+      argparse: 1.0.10
+      esprima: 4.0.1
+    dev: true
+
+  /js-yaml/4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+    dev: true
+
+  /jsbn/1.1.0:
+    resolution: {integrity: sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==}
+
+  /jsdom/16.7.0:
+    resolution: {integrity: sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      canvas: ^2.5.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+    dependencies:
+      abab: 2.0.6
+      acorn: 8.7.1
+      acorn-globals: 6.0.0
+      cssom: 0.4.4
+      cssstyle: 2.3.0
+      data-urls: 2.0.0
+      decimal.js: 10.3.1
+      domexception: 2.0.1
+      escodegen: 2.0.0
+      form-data: 3.0.1
+      html-encoding-sniffer: 2.0.1
+      http-proxy-agent: 4.0.1
+      https-proxy-agent: 5.0.1
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.1
+      parse5: 6.0.1
+      saxes: 5.0.1
+      symbol-tree: 3.2.4
+      tough-cookie: 4.0.0
+      w3c-hr-time: 1.0.2
+      w3c-xmlserializer: 2.0.0
+      webidl-conversions: 6.1.0
+      whatwg-encoding: 1.0.5
+      whatwg-mimetype: 2.3.0
+      whatwg-url: 8.7.0
+      ws: 7.5.8
+      xml-name-validator: 3.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: true
+
+  /jsencrypt/3.2.1:
+    resolution: {integrity: sha512-k1sD5QV0KPn+D8uG9AdGzTQuamt82QZ3A3l6f7TRwMU6Oi2Vg0BsL+wZIQBONcraO1pc78ExMdvmBBJ8WhNYUA==}
+
+  /jsesc/0.5.0:
+    resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
+    hasBin: true
+    dev: true
+
+  /jsesc/2.5.2:
+    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  /json-buffer/3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+    dev: false
+
+  /json-parse-even-better-errors/2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
+  /json-schema-traverse/0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  /json-schema-traverse/1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+    dev: true
+
+  /json-stable-stringify-without-jsonify/1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+    dev: true
+
+  /json2mq/0.2.0:
+    resolution: {integrity: sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==}
+    dependencies:
+      string-convert: 0.2.1
+    dev: false
+
+  /json5/1.0.1:
+    resolution: {integrity: sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.6
+
+  /json5/2.2.0:
+    resolution: {integrity: sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.6
+    dev: false
+
+  /json5/2.2.1:
+    resolution: {integrity: sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  /jsonc-parser/3.0.0:
+    resolution: {integrity: sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==}
+    dev: true
+
+  /jsonfile/4.0.0:
+    resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
+    optionalDependencies:
+      graceful-fs: 4.2.10
+    dev: true
+
+  /jsonfile/6.1.0:
+    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
+    dependencies:
+      universalify: 2.0.0
+    optionalDependencies:
+      graceful-fs: 4.2.10
+    dev: true
+
+  /jsx-ast-utils/3.3.1:
+    resolution: {integrity: sha512-pxrjmNpeRw5wwVeWyEAk7QJu2GnBO3uzPFmHCKJJFPKK2Cy0cWL23krGtLdnMmbIi6/FjlrQpPyfQI19ByPOhQ==}
+    engines: {node: '>=4.0'}
+    dependencies:
+      array-includes: 3.1.5
+      object.assign: 4.1.2
+    dev: true
+
+  /jszip/3.10.0:
+    resolution: {integrity: sha512-LDfVtOLtOxb9RXkYOwPyNBTQDL4eUbqahtoY6x07GiDJHwSYvn8sHHIw8wINImV3MqbMNve2gSuM1DDqEKk09Q==}
+    dependencies:
+      lie: 3.3.0
+      pako: 1.0.11
+      readable-stream: 2.3.7
+      setimmediate: 1.0.5
+    dev: true
+
+  /jwt-decode/2.2.0:
+    resolution: {integrity: sha512-86GgN2vzfUu7m9Wcj63iUkuDzFNYFVmjeDm2GzWpUk+opB0pEpMsw6ePCMrhYkumz2C1ihqtZzOMAg7FiXcNoQ==}
+
+  /keyv/4.3.2:
+    resolution: {integrity: sha512-kn8WmodVBe12lmHpA6W8OY7SNh6wVR+Z+wZESF4iF5FCazaVXGWOtnbnvX0tMQ1bO+/TmOD9LziuYMvrIIs0xw==}
+    dependencies:
+      compress-brotli: 1.3.8
+      json-buffer: 3.0.1
+    dev: false
+
+  /kind-of/6.0.3:
+    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /kleur/3.0.3:
+    resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /klona/2.0.5:
+    resolution: {integrity: sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==}
+    engines: {node: '>= 8'}
+    dev: true
+
+  /known-css-properties/0.19.0:
+    resolution: {integrity: sha512-eYboRV94Vco725nKMlpkn3nV2+96p9c3gKXRsYqAJSswSENvBhN7n5L+uDhY58xQa0UukWsDMTGELzmD8Q+wTA==}
+    dev: false
+
+  /language-subtag-registry/0.3.22:
+    resolution: {integrity: sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==}
+    dev: true
+
+  /language-tags/1.0.5:
+    resolution: {integrity: sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==}
+    dependencies:
+      language-subtag-registry: 0.3.22
+    dev: true
+
+  /less-loader/10.2.0_less@3.12.2+webpack@5.73.0:
+    resolution: {integrity: sha512-AV5KHWvCezW27GT90WATaDnfXBv99llDbtaj4bshq6DvAihMdNjaPDcUMa6EXKLRF+P2opFenJp89BXg91XLYg==}
+    engines: {node: '>= 12.13.0'}
+    peerDependencies:
+      less: ^3.5.0 || ^4.0.0
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+    dependencies:
+      klona: 2.0.5
+      less: 3.12.2
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /less/3.12.2:
+    resolution: {integrity: sha512-+1V2PCMFkL+OIj2/HrtrvZw0BC0sYLMICJfbQjuj/K8CEnlrFX6R5cKKgzzttsZDHyxQNL1jqMREjKN3ja/E3Q==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dependencies:
+      tslib: 1.14.1
+    optionalDependencies:
+      errno: 0.1.8
+      graceful-fs: 4.2.10
+      image-size: 0.5.5
+      make-dir: 2.1.0
+      mime: 1.6.0
+      native-request: 1.1.0
+      source-map: 0.6.1
+    dev: true
+
+  /level-read-stream/1.1.0:
+    resolution: {integrity: sha512-pVRftTUgsJHH3O1o+cXRTZuRGPnTMyuocxpfl+b5L/papZhV810zhunAxn4mgvfDWzqxM5Df76z7C1Y0QQSLBw==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      abstract-level: ^1.0.0
+    peerDependenciesMeta:
+      abstract-level:
+        optional: true
+    dependencies:
+      readable-stream: 3.6.0
+    dev: false
+
+  /level-supports/4.0.1:
+    resolution: {integrity: sha512-PbXpve8rKeNcZ9C1mUicC9auIYFyGpkV9/i6g76tLgANwWhtG2v7I4xNBUlkn3lE2/dZF3Pi0ygYGtLc4RXXdA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /level-transcoder/1.0.1:
+    resolution: {integrity: sha512-t7bFwFtsQeD8cl8NIoQ2iwxA0CL/9IFw7/9gAjOonH0PWTTiRfY7Hq+Ejbsxh86tXobDQ6IOiddjNYIfOBs06w==}
+    engines: {node: '>=12'}
+    dependencies:
+      buffer: 6.0.3
+      module-error: 1.0.2
+    dev: false
+
+  /level/8.0.0:
+    resolution: {integrity: sha512-ypf0jjAk2BWI33yzEaaotpq7fkOPALKAgDBxggO6Q9HGX2MRXn0wbP1Jn/tJv1gtL867+YOjOB49WaUF3UoJNQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      browser-level: 1.0.1
+      classic-level: 1.2.0
+    dev: false
+
+  /leven/3.1.0:
+    resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /levn/0.3.0:
+    resolution: {integrity: sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.1.2
+      type-check: 0.3.2
+    dev: true
+
+  /levn/0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+    dev: true
+
+  /lezer-cpp/0.13.2:
+    resolution: {integrity: sha512-YVlFzs2jkX6nRBu5ivDm1b0pNLmPgQv0rXuLkDZyc+TSdAirtDixANlT00FCOLOGbxIS/1V2Rx5i4/X+lGgOKQ==}
+    deprecated: This package has been replaced by @lezer/cpp
+    dependencies:
+      lezer: 0.13.5
+    dev: false
+
+  /lezer-css/0.13.1:
+    resolution: {integrity: sha512-ke56tjG17IZ+EFiY50P2WinjhgZQB7OecRVZmYQbVuwv5iUdLemA4vLjaFsAbgoSg+4pfOms7Ns9nItoJcmFpg==}
+    deprecated: This package has been replaced by @lezer/css
+    dependencies:
+      lezer: 0.13.5
+    dev: false
+
+  /lezer-html/0.13.6:
+    resolution: {integrity: sha512-FY8ULPsyrbxSCre95hqU69ydCIbjRKoAwWSYbuBL7om6XmQ0C/M9PxV2NToWIgYGK5Yr5MzrsK/H7vsdJGpB2g==}
+    deprecated: This package has been replaced by @lezer/html
+    dependencies:
+      lezer: 0.13.5
+    dev: false
+
+  /lezer-java/0.13.2:
+    resolution: {integrity: sha512-+BMv172xMTK5zZK0O3BM8SbQ0NK7Z99O5/QWnwt46j6fTGr79HO4n/nuxzzCmq0mQFcweqV2x3QG/L/6zRb7dQ==}
+    deprecated: This package has been replaced by @lezer/java
+    dependencies:
+      lezer: 0.13.5
+    dev: false
+
+  /lezer-javascript/0.13.4:
+    resolution: {integrity: sha512-nhRbeSwPZo2xVYq6TWyUhi/r9j0CFSUpkuA5J992Az2AYZFw2HnGVjixfP43DKufL+npJwSy0qcCcAHFQ2bFOQ==}
+    deprecated: This package has been replaced by @lezer/javascript
+    dependencies:
+      lezer: 0.13.5
+    dev: false
+
+  /lezer-json/0.13.2:
+    resolution: {integrity: sha512-J5wc5KpYywJroIQ7A2+bW0e3JiSo2wX4uDgbCni2Ww5bvTD/iV2tvZ0cHBLmMU/p5qS4dD5bAPysSqHMS9eNAg==}
+    deprecated: This package has been replaced by @lezer/json
+    dependencies:
+      lezer: 0.13.5
+    dev: false
+
+  /lezer-markdown/0.13.0:
+    resolution: {integrity: sha512-NrWO7skcqqWAr1ui8x1Sh1vMIYlE8re4bpMcno+8/V0zsjPSKgfFqNb9NB9tUK4PJpObJab7+VG1WmCncQrLUg==}
+    deprecated: This package has been replaced by @lezer/markdown
+    dependencies:
+      lezer-html: 0.13.6
+      lezer-tree: 0.13.2
+    dev: false
+
+  /lezer-python/0.13.7:
+    resolution: {integrity: sha512-IoUdd88Hj2rdzV74xis5/NLWe69+GRe8wTI1z8ZIl/0IbyMAWEEvSHzAKqBGNGTuBIpBaW+l8awbW4gSZqrjIw==}
+    deprecated: This package has been replaced by @lezer/python
+    dependencies:
+      lezer: 0.13.5
+    dev: false
+
+  /lezer-rust/0.13.1:
+    resolution: {integrity: sha512-mn27bruCQfgKsyUV4vW/cUcUtZ0TjwNOFR299ZQxfxKSs4UUg0b6Jvu436ROYo5lxquKXf2BQdFWSttMoSlysg==}
+    deprecated: This package has been replaced by @lezer/rust
+    dependencies:
+      lezer: 0.13.5
+    dev: false
+
+  /lezer-tree/0.13.2:
+    resolution: {integrity: sha512-15ZxW8TxVNAOkHIo43Iouv4zbSkQQ5chQHBpwXcD2bBFz46RB4jYLEEww5l1V0xyIx9U2clSyyrLes+hAUFrGQ==}
+    deprecated: This package has been replaced by @lezer/common
+    dev: false
+
+  /lezer-xml/0.13.4:
+    resolution: {integrity: sha512-mgA6ZfsxBWTG993vkVRonaHaSY4H78IChFI9+H6PiH8mJEG9OP2W1EiZmGbiv32OawF02vWzvTp3Lm3b9P1g9A==}
+    deprecated: This package has been replaced by @lezer/xml
+    dependencies:
+      lezer: 0.13.5
+    dev: false
+
+  /lezer/0.13.5:
+    resolution: {integrity: sha512-cAiMQZGUo2BD8mpcz7Nv1TlKzWP7YIdIRrX41CiP5bk5t4GHxskOxWUx2iAOuHlz8dO+ivbuXr0J1bfHsWD+lQ==}
+    deprecated: This package has been replaced by @lezer/lr
+    dependencies:
+      lezer-tree: 0.13.2
+    dev: false
+
+  /lib0/0.2.51:
+    resolution: {integrity: sha512-05Erb3465CxJa38LQlMz4EbetNvRna1S3BzqEjC0/pmp5cQuQSfNNmeS0722Wev1dRlMUp2Cql0gQ55krSXf2Q==}
+    engines: {node: '>=12'}
+    dependencies:
+      isomorphic.js: 0.2.5
+
+  /license-webpack-plugin/4.0.2_webpack@5.73.0:
+    resolution: {integrity: sha512-771TFWFD70G1wLTC4oU2Cw4qvtmNrIw+wRvBtn+okgHl7slJVi7zfNcdmqDL72BojM30VNJ2UHylr1o77U37Jw==}
+    peerDependencies:
+      webpack: '*'
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+      webpack-sources:
+        optional: true
+    dependencies:
+      webpack: 5.73.0_@swc+core@1.2.210
+      webpack-sources: 3.2.3
+    dev: true
+
+  /lie/3.3.0:
+    resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
+    dependencies:
+      immediate: 3.0.6
+    dev: true
+
+  /lilconfig/2.0.5:
+    resolution: {integrity: sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /lines-and-columns/1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  /lint-staged/13.0.3:
+    resolution: {integrity: sha512-9hmrwSCFroTSYLjflGI8Uk+GWAwMB4OlpU4bMJEAT5d/llQwtYKoim4bLOyLCuWFAhWEupE0vkIFqtw/WIsPug==}
+    engines: {node: ^14.13.1 || >=16.0.0}
+    hasBin: true
+    dependencies:
+      cli-truncate: 3.1.0
+      colorette: 2.0.19
+      commander: 9.3.0
+      debug: 4.3.4
+      execa: 6.1.0
+      lilconfig: 2.0.5
+      listr2: 4.0.5
+      micromatch: 4.0.5
+      normalize-path: 3.0.0
+      object-inspect: 1.12.2
+      pidtree: 0.6.0
+      string-argv: 0.3.1
+      yaml: 2.1.1
+    transitivePeerDependencies:
+      - enquirer
+      - supports-color
+    dev: true
+
+  /listr2/4.0.5:
+    resolution: {integrity: sha512-juGHV1doQdpNT3GSTs9IUN43QJb7KHdF9uqg7Vufs/tG9VTzpFphqF4pm/ICdAABGQxsyNn9CiYA3StkI6jpwA==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      enquirer: '>= 2.3.0 < 3'
+    peerDependenciesMeta:
+      enquirer:
+        optional: true
+    dependencies:
+      cli-truncate: 2.1.0
+      colorette: 2.0.19
+      log-update: 4.0.0
+      p-map: 4.0.0
+      rfdc: 1.3.0
+      rxjs: 7.5.5
+      through: 2.3.8
+      wrap-ansi: 7.0.0
+    dev: true
+
+  /loader-runner/4.3.0:
+    resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
+    engines: {node: '>=6.11.5'}
+
+  /loader-utils/1.2.3:
+    resolution: {integrity: sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==}
+    engines: {node: '>=4.0.0'}
+    dependencies:
+      big.js: 5.2.2
+      emojis-list: 2.1.0
+      json5: 1.0.1
+    dev: true
+
+  /loader-utils/1.4.0:
+    resolution: {integrity: sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==}
+    engines: {node: '>=4.0.0'}
+    dependencies:
+      big.js: 5.2.2
+      emojis-list: 3.0.0
+      json5: 1.0.1
+    dev: false
+
+  /loader-utils/2.0.2:
+    resolution: {integrity: sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==}
+    engines: {node: '>=8.9.0'}
+    dependencies:
+      big.js: 5.2.2
+      emojis-list: 3.0.0
+      json5: 2.2.1
+
+  /loader-utils/3.2.0:
+    resolution: {integrity: sha512-HVl9ZqccQihZ7JM85dco1MvO9G+ONvxoGa9rkhzFsneGLKSUg1gJf9bWzhRhcvm2qChhWpebQhP44qxjKIUCaQ==}
+    engines: {node: '>= 12.13.0'}
+    dev: true
+
+  /locate-path/2.0.0:
+    resolution: {integrity: sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==}
+    engines: {node: '>=4'}
+    dependencies:
+      p-locate: 2.0.0
+      path-exists: 3.0.0
+    dev: true
+
+  /locate-path/5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+    dependencies:
+      p-locate: 4.1.0
+    dev: true
+
+  /locate-path/6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-locate: 5.0.0
+    dev: true
+
+  /lodash-es/4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
+
+  /lodash.camelcase/4.3.0:
+    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
+    dev: true
+
+  /lodash.debounce/4.0.8:
+    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
+    dev: true
+
+  /lodash.memoize/4.1.2:
+    resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
+    dev: true
+
+  /lodash.merge/4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+    dev: true
+
+  /lodash.uniq/4.5.0:
+    resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
+    dev: true
+
+  /lodash/4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  /log-symbols/4.1.0:
+    resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
+    engines: {node: '>=10'}
+    dependencies:
+      chalk: 4.1.2
+      is-unicode-supported: 0.1.0
+    dev: true
+
+  /log-update/4.0.0:
+    resolution: {integrity: sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-escapes: 4.3.2
+      cli-cursor: 3.1.0
+      slice-ansi: 4.0.0
+      wrap-ansi: 6.2.0
+    dev: true
+
+  /long/4.0.0:
+    resolution: {integrity: sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==}
+    dev: true
+
+  /loose-envify/1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+    dependencies:
+      js-tokens: 4.0.0
+
+  /lower-case/2.0.2:
+    resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
+    dependencies:
+      tslib: 2.4.0
+    dev: true
+
+  /lowercase-keys/2.0.0:
+    resolution: {integrity: sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==}
+    engines: {node: '>=8'}
+    dev: false
+
+  /lowercase-keys/3.0.0:
+    resolution: {integrity: sha512-ozCC6gdQ+glXOQsveKD0YsDy8DSQFjDTz4zyzEHNV5+JP5D62LmfDZ6o1cycFx9ouG940M5dE8C8CTewdj2YWQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: false
+
+  /lru-cache/6.0.0:
+    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
+    engines: {node: '>=10'}
+    dependencies:
+      yallist: 4.0.0
+    dev: true
+
+  /lru-cache/7.12.0:
+    resolution: {integrity: sha512-OIP3DwzRZDfLg9B9VP/huWBlpvbkmbfiBy8xmsXp4RPmE4A3MhwNozc5ZJ3fWnSg8fDcdlE/neRTPG2ycEKliw==}
+    engines: {node: '>=12'}
+
+  /lz-string/1.4.4:
+    resolution: {integrity: sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==}
+    hasBin: true
+    dev: true
+
+  /magic-string/0.25.7:
+    resolution: {integrity: sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==}
+    dependencies:
+      sourcemap-codec: 1.4.8
+    dev: true
+
+  /magic-string/0.25.9:
+    resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
+    dependencies:
+      sourcemap-codec: 1.4.8
+    dev: true
+
+  /make-dir/2.1.0:
+    resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dependencies:
+      pify: 4.0.1
+      semver: 5.7.1
+    dev: true
+    optional: true
+
+  /make-dir/3.1.0:
+    resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
+    engines: {node: '>=8'}
+    dependencies:
+      semver: 6.3.0
+    dev: true
+
+  /make-error/1.3.6:
+    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
+    dev: true
+
+  /makeerror/1.0.12:
+    resolution: {integrity: sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==}
+    dependencies:
+      tmpl: 1.0.5
+    dev: true
+
+  /matchmediaquery/0.3.1:
+    resolution: {integrity: sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==}
+    dependencies:
+      css-mediaquery: 0.1.2
+    dev: false
+
+  /mdn-data/2.0.14:
+    resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
+
+  /media-typer/0.3.0:
+    resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /memfs/3.4.7:
+    resolution: {integrity: sha512-ygaiUSNalBX85388uskeCyhSAoOSgzBbtVCr9jA2RROssFL9Q19/ZXFqS+2Th2sr1ewNIWgFdLzLC3Yl1Zv+lw==}
+    engines: {node: '>= 4.0.0'}
+    dependencies:
+      fs-monkey: 1.0.3
+    dev: true
+
+  /memoize-one/5.2.1:
+    resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
+    dev: false
+
+  /memoize-one/6.0.0:
+    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
+    dev: false
+
+  /merge-descriptors/1.0.1:
+    resolution: {integrity: sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==}
+    dev: true
+
+  /merge-stream/2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+
+  /merge2/1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+    dev: true
+
+  /methods/1.1.2:
+    resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /micromatch/4.0.5:
+    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
+    engines: {node: '>=8.6'}
+    dependencies:
+      braces: 3.0.2
+      picomatch: 2.3.1
+    dev: true
+
+  /mime-db/1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  /mime-types/2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: 1.52.0
+
+  /mime/1.6.0:
+    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: true
+
+  /mimic-fn/1.2.0:
+    resolution: {integrity: sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /mimic-fn/2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /mimic-fn/4.0.0:
+    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /mimic-response/1.0.1:
+    resolution: {integrity: sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==}
+    engines: {node: '>=4'}
+    dev: false
+
+  /mimic-response/3.1.0:
+    resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==}
+    engines: {node: '>=10'}
+    dev: false
+
+  /min-document/2.19.0:
+    resolution: {integrity: sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==}
+    dependencies:
+      dom-walk: 0.1.2
+    dev: false
+
+  /mini-css-extract-plugin/1.6.2:
+    resolution: {integrity: sha512-WhDvO3SjGm40oV5y26GjMJYjd2UMqrLAGKy5YS2/3QKJy2F7jgynuHTir/tgUUOiNQu5saXHdc8reo7YuhhT4Q==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      webpack: ^4.4.0 || ^5.0.0
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+    dependencies:
+      loader-utils: 2.0.2
+      schema-utils: 3.1.1
+      webpack-sources: 1.4.3
+    dev: false
+
+  /mini-css-extract-plugin/1.6.2_webpack@5.73.0:
+    resolution: {integrity: sha512-WhDvO3SjGm40oV5y26GjMJYjd2UMqrLAGKy5YS2/3QKJy2F7jgynuHTir/tgUUOiNQu5saXHdc8reo7YuhhT4Q==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      webpack: ^4.4.0 || ^5.0.0
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+    dependencies:
+      loader-utils: 2.0.2
+      schema-utils: 3.1.1
+      webpack: 5.73.0_@swc+core@1.2.210
+      webpack-sources: 1.4.3
+    dev: false
+
+  /mini-css-extract-plugin/2.4.7_webpack@5.73.0:
+    resolution: {integrity: sha512-euWmddf0sk9Nv1O0gfeeUAvAkoSlWncNLF77C0TP2+WoPvy8mAHKOzMajcCz2dzvyt3CNgxb1obIEVFIRxaipg==}
+    engines: {node: '>= 12.13.0'}
+    peerDependencies:
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+    dependencies:
+      schema-utils: 4.0.0
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /mini-css-extract-plugin/2.6.1_webpack@5.73.0:
+    resolution: {integrity: sha512-wd+SD57/K6DiV7jIR34P+s3uckTRuQvx0tKPcvjFlrEylk6P4mQ2KSWk1hblj1Kxaqok7LogKOieygXqBczNlg==}
+    engines: {node: '>= 12.13.0'}
+    peerDependencies:
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+    dependencies:
+      schema-utils: 4.0.0
+      webpack: 5.73.0
+    dev: true
+
+  /mini-svg-data-uri/1.4.4:
+    resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
+    hasBin: true
+    dev: true
+
+  /minimalistic-assert/1.0.1:
+    resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
+    dev: true
+
+  /minimatch/3.0.5:
+    resolution: {integrity: sha512-tUpxzX0VAzJHjLu0xUfFv1gwVp9ba3IOuRAVH2EGuRW8a5emA2FlACLqiT/lDVtS1W+TGNwqz3sWaNyLgDJWuw==}
+    dependencies:
+      brace-expansion: 1.1.11
+    dev: true
+
+  /minimatch/3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+    dependencies:
+      brace-expansion: 1.1.11
+    dev: true
+
+  /minimatch/5.1.0:
+    resolution: {integrity: sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==}
+    engines: {node: '>=10'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
+  /minimist/1.2.6:
+    resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
+
+  /minipass/3.3.4:
+    resolution: {integrity: sha512-I9WPbWHCGu8W+6k1ZiGpPu0GkoKBeorkfKNuAFBNS1HNFJvke82sxvI5bzcCNpWPorkOO5QQ+zomzzwRxejXiw==}
+    engines: {node: '>=8'}
+    dependencies:
+      yallist: 4.0.0
+    dev: true
+
+  /minizlib/2.1.2:
+    resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
+    engines: {node: '>= 8'}
+    dependencies:
+      minipass: 3.3.4
+      yallist: 4.0.0
+    dev: true
+
+  /mkdirp/0.5.6:
+    resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.6
+    dev: true
+
+  /mkdirp/1.0.4:
+    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dev: true
+
+  /mobx-react-lite/3.4.0_mobx@6.6.1:
+    resolution: {integrity: sha512-bRuZp3C0itgLKHu/VNxi66DN/XVkQG7xtoBVWxpvC5FhAqbOCP21+nPhULjnzEqd7xBMybp6KwytdUpZKEgpIQ==}
+    peerDependencies:
+      mobx: ^6.1.0
+      react: ^16.8.0 || ^17 || ^18
+      react-dom: '*'
+      react-native: '*'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+    dependencies:
+      mobx: 6.6.1
+    dev: false
+
+  /mobx/6.6.1:
+    resolution: {integrity: sha512-7su3UZv5JF+ohLr2opabjbUAERfXstMY+wiBtey8yNAPoB8H187RaQXuhFjNkH8aE4iHbDWnhDFZw0+5ic4nGQ==}
+    dev: false
+
+  /module-error/1.0.2:
+    resolution: {integrity: sha512-0yuvsqSCv8LbaOKhnsQ/T5JhyFlCYLPXK3U2sgV10zoKQwzs/MyfuQUOZQ1V/6OCOJsK/TRgNVrPuPDqtdMFtA==}
+    engines: {node: '>=10'}
+    dev: false
+
+  /moment/2.29.3:
+    resolution: {integrity: sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw==}
+    dev: false
+
+  /mrmime/1.0.1:
+    resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /ms/2.0.0:
+    resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
+
+  /ms/2.1.2:
+    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
+
+  /ms/2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+    dev: true
+
+  /multicast-dns/7.2.5:
+    resolution: {integrity: sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==}
+    hasBin: true
+    dependencies:
+      dns-packet: 5.4.0
+      thunky: 1.1.0
+    dev: true
+
+  /murmurhash-js/1.0.0:
+    resolution: {integrity: sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==}
+    dev: false
+
+  /mute-stream/0.0.7:
+    resolution: {integrity: sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=}
+    dev: true
+
+  /nano-css/5.3.5:
+    resolution: {integrity: sha512-vSB9X12bbNu4ALBu7nigJgRViZ6ja3OU7CeuiV1zMIbXOdmkLahgtPmh3GBOlDxbKY0CitqlPdOReGlBLSp+yg==}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      css-tree: 1.1.3
+      csstype: 3.1.0
+      fastest-stable-stringify: 2.0.2
+      inline-style-prefixer: 6.0.1
+      rtl-css-js: 1.15.0
+      sourcemap-codec: 1.4.8
+      stacktrace-js: 2.0.2
+      stylis: 4.1.1
+    dev: false
+
+  /nanoid/3.3.4:
+    resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  /nanoid/4.0.0:
+    resolution: {integrity: sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==}
+    engines: {node: ^14 || ^16 || >=18}
+    hasBin: true
+    dev: false
+
+  /napi-macros/2.0.0:
+    resolution: {integrity: sha512-A0xLykHtARfueITVDernsAWdtIMbOJgKgcluwENp3AlsKN/PloyO10HtmoqnFAQAcxPkgZN7wdfPfEd0zNGxbg==}
+    dev: false
+
+  /native-request/1.1.0:
+    resolution: {integrity: sha512-uZ5rQaeRn15XmpgE0xoPL8YWqcX90VtCFglYwAgkvKM5e8fog+vePLAhHxuuv/gRkrQxIeh5U3q9sMNUrENqWw==}
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /natural-compare/1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+    dev: true
+
+  /negotiator/0.6.3:
+    resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /neo-async/2.6.2:
+    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
+
+  /next/12.2.0_beenoklgwfttvph5dgxj7na7aq:
+    resolution: {integrity: sha512-B4j7D3SHYopLYx6/Ark0fenwIar9tEaZZFAaxmKjgcMMexhVJzB3jt7X+6wcdXPPMeUD6r09weUtnDpjox/vIA==}
+    engines: {node: '>=12.22.0'}
+    hasBin: true
+    peerDependencies:
+      fibers: '>= 3.1.0'
+      node-sass: ^6.0.0 || ^7.0.0
+      react: ^17.0.2 || ^18.0.0-0
+      react-dom: ^17.0.2 || ^18.0.0-0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      fibers:
+        optional: true
+      node-sass:
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+      sass:
+        optional: true
+    dependencies:
+      '@next/env': 12.2.0
+      '@swc/helpers': 0.4.2
+      caniuse-lite: 1.0.30001363
+      postcss: 8.4.5
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      styled-jsx: 5.0.2_2sb3a56iojvze2npkgcccbebf4
+      use-sync-external-store: 1.1.0_react@18.2.0
+    optionalDependencies:
+      '@next/swc-android-arm-eabi': 12.2.0
+      '@next/swc-android-arm64': 12.2.0
+      '@next/swc-darwin-arm64': 12.2.0
+      '@next/swc-darwin-x64': 12.2.0
+      '@next/swc-freebsd-x64': 12.2.0
+      '@next/swc-linux-arm-gnueabihf': 12.2.0
+      '@next/swc-linux-arm64-gnu': 12.2.0
+      '@next/swc-linux-arm64-musl': 12.2.0
+      '@next/swc-linux-x64-gnu': 12.2.0
+      '@next/swc-linux-x64-musl': 12.2.0
+      '@next/swc-win32-arm64-msvc': 12.2.0
+      '@next/swc-win32-ia32-msvc': 12.2.0
+      '@next/swc-win32-x64-msvc': 12.2.0
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+
+  /no-case/3.0.4:
+    resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
+    dependencies:
+      lower-case: 2.0.2
+      tslib: 2.4.0
+    dev: true
+
+  /node-addon-api/3.2.1:
+    resolution: {integrity: sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==}
+    dev: true
+
+  /node-fetch/2.6.7:
+    resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: true
+
+  /node-forge/1.3.1:
+    resolution: {integrity: sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==}
+    engines: {node: '>= 6.13.0'}
+    dev: true
+
+  /node-gyp-build/4.5.0:
+    resolution: {integrity: sha512-2iGbaQBV+ITgCz76ZEjmhUKAKVf7xfY1sRl4UiKQspfZMH2h06SyhNsnSVy50cwkFQDGLyif6m/6uFXHkOZ6rg==}
+    hasBin: true
+
+  /node-int64/0.4.0:
+    resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==}
+    dev: true
+
+  /node-machine-id/1.1.12:
+    resolution: {integrity: sha512-QNABxbrPa3qEIfrE6GOJ7BYIuignnJw7iQ2YPbc3Nla1HzRJjXzZOiikfF8m7eAMfichLt3M4VgLOetqgDmgGQ==}
+    dev: true
+
+  /node-releases/2.0.5:
+    resolution: {integrity: sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q==}
+
+  /normalize-path/3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /normalize-range/0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /normalize-url/6.1.0:
+    resolution: {integrity: sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==}
+    engines: {node: '>=10'}
+
+  /npm-run-path/4.0.1:
+    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
+    engines: {node: '>=8'}
+    dependencies:
+      path-key: 3.1.1
+    dev: true
+
+  /npm-run-path/5.1.0:
+    resolution: {integrity: sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      path-key: 4.0.0
+    dev: true
+
+  /npmlog/4.1.2:
+    resolution: {integrity: sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==}
+    dependencies:
+      are-we-there-yet: 1.1.7
+      console-control-strings: 1.1.0
+      gauge: 2.7.4
+      set-blocking: 2.0.0
+    dev: true
+
+  /nth-check/2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+    dependencies:
+      boolbase: 1.0.0
+    dev: true
+
+  /number-is-nan/1.0.1:
+    resolution: {integrity: sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /nwsapi/2.2.1:
+    resolution: {integrity: sha512-JYOWTeFoS0Z93587vRJgASD5Ut11fYl5NyihP3KrYBvMe1FRRs6RN7m20SA/16GM4P6hTnZjT+UmDOt38UeXNg==}
+    dev: true
+
+  /nx/14.4.2_@swc+core@1.2.210:
+    resolution: {integrity: sha512-bYO//HuwQL4X8y+2BjUPtkPLDiYI1zMejQo6+uJl3+VdYPcsjwW/ca581tBPHiPH95XnHiBartnMrMJtn11grw==}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@swc-node/register': ^1.4.2
+      '@swc/core': ^1.2.173
+    peerDependenciesMeta:
+      '@swc-node/register':
+        optional: true
+      '@swc/core':
+        optional: true
+    dependencies:
+      '@nrwl/cli': 14.4.2
+      '@nrwl/tao': 14.4.2_@swc+core@1.2.210
+      '@parcel/watcher': 2.0.4
+      '@swc/core': 1.2.210
+      chalk: 4.1.0
+      chokidar: 3.5.3
+      cli-cursor: 3.1.0
+      cli-spinners: 2.6.1
+      cliui: 7.0.4
+      dotenv: 10.0.0
+      enquirer: 2.3.6
+      fast-glob: 3.2.7
+      figures: 3.2.0
+      flat: 5.0.2
+      fs-extra: 10.1.0
+      glob: 7.1.4
+      ignore: 5.2.0
+      js-yaml: 4.1.0
+      jsonc-parser: 3.0.0
+      minimatch: 3.0.5
+      npm-run-path: 4.0.1
+      open: 8.4.0
+      semver: 7.3.4
+      string-width: 4.2.3
+      tar-stream: 2.2.0
+      tmp: 0.2.1
+      tsconfig-paths: 3.14.1
+      tslib: 2.4.0
+      v8-compile-cache: 2.3.0
+      yargs: 17.5.1
+      yargs-parser: 21.0.1
+    dev: true
+
+  /object-assign/4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  /object-inspect/1.12.2:
+    resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==}
+
+  /object-is/1.1.5:
+    resolution: {integrity: sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+    dev: false
+
+  /object-keys/1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+
+  /object.assign/4.1.2:
+    resolution: {integrity: sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      has-symbols: 1.0.3
+      object-keys: 1.1.1
+
+  /object.entries/1.1.5:
+    resolution: {integrity: sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+    dev: true
+
+  /object.fromentries/2.0.5:
+    resolution: {integrity: sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+    dev: true
+
+  /object.hasown/1.1.1:
+    resolution: {integrity: sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==}
+    dependencies:
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+    dev: true
+
+  /object.values/1.1.5:
+    resolution: {integrity: sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+    dev: true
+
+  /obuf/1.1.2:
+    resolution: {integrity: sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==}
+    dev: true
+
+  /on-finished/2.4.1:
+    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      ee-first: 1.1.1
+    dev: true
+
+  /on-headers/1.0.2:
+    resolution: {integrity: sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
+  /once/1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+    dependencies:
+      wrappy: 1.0.2
+
+  /onetime/2.0.1:
+    resolution: {integrity: sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      mimic-fn: 1.2.0
+    dev: true
+
+  /onetime/5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+    dependencies:
+      mimic-fn: 2.1.0
+    dev: true
+
+  /onetime/6.0.0:
+    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      mimic-fn: 4.0.0
+    dev: true
+
+  /open/8.4.0:
+    resolution: {integrity: sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==}
+    engines: {node: '>=12'}
+    dependencies:
+      define-lazy-prop: 2.0.0
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+    dev: true
+
+  /opener/1.5.2:
+    resolution: {integrity: sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==}
+    hasBin: true
+    dev: true
+
+  /optionator/0.8.3:
+    resolution: {integrity: sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.3.0
+      prelude-ls: 1.1.2
+      type-check: 0.3.2
+      word-wrap: 1.2.3
+    dev: true
+
+  /optionator/0.9.1:
+    resolution: {integrity: sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.3
+    dev: true
+
+  /ora/5.4.1:
+    resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      bl: 4.1.0
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-spinners: 2.6.1
+      is-interactive: 1.0.0
+      is-unicode-supported: 0.1.0
+      log-symbols: 4.1.0
+      strip-ansi: 6.0.1
+      wcwidth: 1.0.1
+    dev: true
+
+  /os-homedir/1.0.2:
+    resolution: {integrity: sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /os-tmpdir/1.0.2:
+    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /p-cancelable/3.0.0:
+    resolution: {integrity: sha512-mlVgR3PGuzlo0MmTdk4cXqXWlwQDLnONTAg6sm62XkMJEiRxN3GL3SffkYvqwonbkJBcrI7Uvv5Zh9yjvn2iUw==}
+    engines: {node: '>=12.20'}
+    dev: false
+
+  /p-finally/1.0.0:
+    resolution: {integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /p-limit/1.3.0:
+    resolution: {integrity: sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==}
+    engines: {node: '>=4'}
+    dependencies:
+      p-try: 1.0.0
+    dev: true
+
+  /p-limit/2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+    dependencies:
+      p-try: 2.2.0
+    dev: true
+
+  /p-limit/3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      yocto-queue: 0.1.0
+    dev: true
+
+  /p-locate/2.0.0:
+    resolution: {integrity: sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==}
+    engines: {node: '>=4'}
+    dependencies:
+      p-limit: 1.3.0
+    dev: true
+
+  /p-locate/4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+    dependencies:
+      p-limit: 2.3.0
+    dev: true
+
+  /p-locate/5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-limit: 3.1.0
+    dev: true
+
+  /p-map/4.0.0:
+    resolution: {integrity: sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      aggregate-error: 3.1.0
+    dev: true
+
+  /p-queue/6.6.2:
+    resolution: {integrity: sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      eventemitter3: 4.0.7
+      p-timeout: 3.2.0
+    dev: true
+
+  /p-retry/4.6.2:
+    resolution: {integrity: sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@types/retry': 0.12.0
+      retry: 0.13.1
+    dev: true
+
+  /p-timeout/3.2.0:
+    resolution: {integrity: sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==}
+    engines: {node: '>=8'}
+    dependencies:
+      p-finally: 1.0.0
+    dev: true
+
+  /p-try/1.0.0:
+    resolution: {integrity: sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /p-try/2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /pako/1.0.11:
+    resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
+    dev: true
+
+  /param-case/3.0.4:
+    resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
+    dependencies:
+      dot-case: 3.0.4
+      tslib: 2.4.0
+    dev: true
+
+  /parent-module/1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+    dependencies:
+      callsites: 3.1.0
+
+  /parse-json/5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      error-ex: 1.3.2
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+
+  /parse5-html-rewriting-stream/6.0.1:
+    resolution: {integrity: sha512-vwLQzynJVEfUlURxgnf51yAJDQTtVpNyGD8tKi2Za7m+akukNHxCcUQMAa/mUGLhCeicFdpy7Tlvj8ZNKadprg==}
+    dependencies:
+      parse5: 6.0.1
+      parse5-sax-parser: 6.0.1
+    dev: true
+
+  /parse5-sax-parser/6.0.1:
+    resolution: {integrity: sha512-kXX+5S81lgESA0LsDuGjAlBybImAChYRMT+/uKCEXFBFOeEhS52qUCydGhU3qLRD8D9DVjaUo821WK7DM4iCeg==}
+    dependencies:
+      parse5: 6.0.1
+    dev: true
+
+  /parse5/4.0.0:
+    resolution: {integrity: sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==}
+    dev: true
+
+  /parse5/6.0.1:
+    resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
+    dev: true
+
+  /parseurl/1.3.3:
+    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
+  /pascal-case/3.1.2:
+    resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.4.0
+    dev: true
+
+  /path-case/3.0.4:
+    resolution: {integrity: sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==}
+    dependencies:
+      dot-case: 3.0.4
+      tslib: 2.4.0
+    dev: true
+
+  /path-exists/3.0.0:
+    resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /path-exists/4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /path-is-absolute/1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /path-is-network-drive/1.0.15:
+    resolution: {integrity: sha512-bJGs1SxUne+q29P1xCLMkNBhMetku+vPN+yVQu8FGL/7diHesCSSIKoF4Wq42tcbwm7rK72XrGfK8FUXN00LLQ==}
+    dependencies:
+      tslib: 2.4.0
+    dev: true
+
+  /path-key/3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /path-key/4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /path-parse/1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  /path-strip-sep/1.0.12:
+    resolution: {integrity: sha512-EJZSC5WBjVlA9XHLCiluiyisYg6yzeMJ4nY3BQVCuedyEHA/I2crcHWdwuQ74h3V599U9nEbEZUTvvSxOK3vbQ==}
+    dependencies:
+      tslib: 2.4.0
+    dev: true
+
+  /path-to-regexp/0.1.7:
+    resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
+    dev: true
+
+  /path-type/4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
+  /perfect-freehand/1.1.0:
+    resolution: {integrity: sha512-nVWukMN9qlii1dQsQHVvfaNpeOAWVLgTZP6e/tFcU6cWlLo+6YdvfRGBL2u5pU11APlPbHeB0SpMcGA8ZjPgcQ==}
+    dev: false
+
+  /phone/3.1.22:
+    resolution: {integrity: sha512-0Qr2cCgheYvwWY6zDHRCRcsWT0nyDaRREEfr9wvmTH8X306fD3Q4f334Q6vp5eMBC16zH6bGNKBUZNsOFjtFPQ==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /picocolors/1.0.0:
+    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
+
+  /picomatch/2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  /pidtree/0.6.0:
+    resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+    dev: true
+
+  /pify/2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /pify/4.0.1:
+    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
+    engines: {node: '>=6'}
+    dev: true
+    optional: true
+
+  /pify/5.0.0:
+    resolution: {integrity: sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /pirates/4.0.5:
+    resolution: {integrity: sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==}
+    engines: {node: '>= 6'}
+    dev: true
+
+  /pkg-dir/4.2.0:
+    resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      find-up: 4.1.0
+    dev: true
+
+  /pkg-dir/5.0.0:
+    resolution: {integrity: sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==}
+    engines: {node: '>=10'}
+    dependencies:
+      find-up: 5.0.0
+    dev: true
+
+  /pluralize/8.0.0:
+    resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /portfinder/1.0.28:
+    resolution: {integrity: sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==}
+    engines: {node: '>= 0.12.0'}
+    dependencies:
+      async: 2.6.4
+      debug: 3.2.7
+      mkdirp: 0.5.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /postcss-calc/8.2.4_postcss@8.4.14:
+    resolution: {integrity: sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==}
+    peerDependencies:
+      postcss: ^8.2.2
+    dependencies:
+      postcss: 8.4.14
+      postcss-selector-parser: 6.0.10
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-colormin/5.3.0_postcss@8.4.14:
+    resolution: {integrity: sha512-WdDO4gOFG2Z8n4P8TWBpshnL3JpmNmJwdnfP2gbk2qBA8PWwOYcmjmI/t3CmMeL72a7Hkd+x/Mg9O2/0rD54Pg==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      browserslist: 4.21.1
+      caniuse-api: 3.0.0
+      colord: 2.9.2
+      postcss: 8.4.14
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-convert-values/5.1.2_postcss@8.4.14:
+    resolution: {integrity: sha512-c6Hzc4GAv95B7suy4udszX9Zy4ETyMCgFPUDtWjdFTKH1SE9eFY/jEpHSwTH1QPuwxHpWslhckUQWbNRM4ho5g==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      browserslist: 4.21.1
+      postcss: 8.4.14
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-discard-comments/5.1.2_postcss@8.4.14:
+    resolution: {integrity: sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.14
+    dev: true
+
+  /postcss-discard-duplicates/5.1.0_postcss@8.4.14:
+    resolution: {integrity: sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.14
+
+  /postcss-discard-empty/5.1.1_postcss@8.4.14:
+    resolution: {integrity: sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.14
+    dev: true
+
+  /postcss-discard-overridden/5.1.0_postcss@8.4.14:
+    resolution: {integrity: sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.14
+    dev: true
+
+  /postcss-import/14.1.0_postcss@8.4.14:
+    resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.4.14
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.1
+    dev: true
+
+  /postcss-load-config/3.1.4_i7duc3lt6p42geuj2nwruihc6u:
+    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+    dependencies:
+      lilconfig: 2.0.5
+      postcss: 8.4.14
+      ts-node: 10.8.2_y42jqzo3jkzuv3kp7opavo2xbi
+      yaml: 1.10.2
+    dev: true
+
+  /postcss-loader/6.2.1_mepnsno3xmng6eyses4tepu7bu:
+    resolution: {integrity: sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==}
+    engines: {node: '>= 12.13.0'}
+    peerDependencies:
+      postcss: ^7.0.0 || ^8.0.1
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+    dependencies:
+      cosmiconfig: 7.0.1
+      klona: 2.0.5
+      postcss: 8.4.14
+      semver: 7.3.7
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /postcss-merge-longhand/5.1.6_postcss@8.4.14:
+    resolution: {integrity: sha512-6C/UGF/3T5OE2CEbOuX7iNO63dnvqhGZeUnKkDeifebY0XqkkvrctYSZurpNE902LDf2yKwwPFgotnfSoPhQiw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.14
+      postcss-value-parser: 4.2.0
+      stylehacks: 5.1.0_postcss@8.4.14
+    dev: true
+
+  /postcss-merge-rules/5.1.2_postcss@8.4.14:
+    resolution: {integrity: sha512-zKMUlnw+zYCWoPN6yhPjtcEdlJaMUZ0WyVcxTAmw3lkkN/NDMRkOkiuctQEoWAOvH7twaxUUdvBWl0d4+hifRQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      browserslist: 4.21.1
+      caniuse-api: 3.0.0
+      cssnano-utils: 3.1.0_postcss@8.4.14
+      postcss: 8.4.14
+      postcss-selector-parser: 6.0.10
+    dev: true
+
+  /postcss-minify-font-values/5.1.0_postcss@8.4.14:
+    resolution: {integrity: sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.14
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-minify-gradients/5.1.1_postcss@8.4.14:
+    resolution: {integrity: sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      colord: 2.9.2
+      cssnano-utils: 3.1.0_postcss@8.4.14
+      postcss: 8.4.14
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-minify-params/5.1.3_postcss@8.4.14:
+    resolution: {integrity: sha512-bkzpWcjykkqIujNL+EVEPOlLYi/eZ050oImVtHU7b4lFS82jPnsCb44gvC6pxaNt38Els3jWYDHTjHKf0koTgg==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      browserslist: 4.21.1
+      cssnano-utils: 3.1.0_postcss@8.4.14
+      postcss: 8.4.14
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-minify-selectors/5.2.1_postcss@8.4.14:
+    resolution: {integrity: sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.14
+      postcss-selector-parser: 6.0.10
+    dev: true
+
+  /postcss-modules-extract-imports/3.0.0_postcss@8.4.14:
+    resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      postcss: 8.4.14
+    dev: true
+
+  /postcss-modules-local-by-default/4.0.0_postcss@8.4.14:
+    resolution: {integrity: sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      icss-utils: 5.1.0_postcss@8.4.14
+      postcss: 8.4.14
+      postcss-selector-parser: 6.0.10
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-modules-scope/3.0.0_postcss@8.4.14:
+    resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      postcss: 8.4.14
+      postcss-selector-parser: 6.0.10
+    dev: true
+
+  /postcss-modules-values/4.0.0_postcss@8.4.14:
+    resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      icss-utils: 5.1.0_postcss@8.4.14
+      postcss: 8.4.14
+    dev: true
+
+  /postcss-modules/4.3.1_postcss@8.4.14:
+    resolution: {integrity: sha512-ItUhSUxBBdNamkT3KzIZwYNNRFKmkJrofvC2nWab3CPKhYBQ1f27XXh1PAPE27Psx58jeelPsxWB/+og+KEH0Q==}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      generic-names: 4.0.0
+      icss-replace-symbols: 1.1.0
+      lodash.camelcase: 4.3.0
+      postcss: 8.4.14
+      postcss-modules-extract-imports: 3.0.0_postcss@8.4.14
+      postcss-modules-local-by-default: 4.0.0_postcss@8.4.14
+      postcss-modules-scope: 3.0.0_postcss@8.4.14
+      postcss-modules-values: 4.0.0_postcss@8.4.14
+      string-hash: 1.1.3
+    dev: true
+
+  /postcss-normalize-charset/5.1.0_postcss@8.4.14:
+    resolution: {integrity: sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.14
+    dev: true
+
+  /postcss-normalize-display-values/5.1.0_postcss@8.4.14:
+    resolution: {integrity: sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.14
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-normalize-positions/5.1.1_postcss@8.4.14:
+    resolution: {integrity: sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.14
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-normalize-repeat-style/5.1.1_postcss@8.4.14:
+    resolution: {integrity: sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.14
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-normalize-string/5.1.0_postcss@8.4.14:
+    resolution: {integrity: sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.14
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-normalize-timing-functions/5.1.0_postcss@8.4.14:
+    resolution: {integrity: sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.14
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-normalize-unicode/5.1.0_postcss@8.4.14:
+    resolution: {integrity: sha512-J6M3MizAAZ2dOdSjy2caayJLQT8E8K9XjLce8AUQMwOrCvjCHv24aLC/Lps1R1ylOfol5VIDMaM/Lo9NGlk1SQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      browserslist: 4.21.1
+      postcss: 8.4.14
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-normalize-url/5.1.0_postcss@8.4.14:
+    resolution: {integrity: sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      normalize-url: 6.1.0
+      postcss: 8.4.14
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-normalize-whitespace/5.1.1_postcss@8.4.14:
+    resolution: {integrity: sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.14
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-ordered-values/5.1.3_postcss@8.4.14:
+    resolution: {integrity: sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      cssnano-utils: 3.1.0_postcss@8.4.14
+      postcss: 8.4.14
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-reduce-initial/5.1.0_postcss@8.4.14:
+    resolution: {integrity: sha512-5OgTUviz0aeH6MtBjHfbr57tml13PuedK/Ecg8szzd4XRMbYxH4572JFG067z+FqBIf6Zp/d+0581glkvvWMFw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      browserslist: 4.21.1
+      caniuse-api: 3.0.0
+      postcss: 8.4.14
+    dev: true
+
+  /postcss-reduce-transforms/5.1.0_postcss@8.4.14:
+    resolution: {integrity: sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.14
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-selector-parser/6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  /postcss-svgo/5.1.0_postcss@8.4.14:
+    resolution: {integrity: sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.14
+      postcss-value-parser: 4.2.0
+      svgo: 2.8.0
+    dev: true
+
+  /postcss-unique-selectors/5.1.1_postcss@8.4.14:
+    resolution: {integrity: sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.14
+      postcss-selector-parser: 6.0.10
+    dev: true
+
+  /postcss-value-parser/4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+    dev: true
+
+  /postcss/8.4.14:
+    resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.4
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+
+  /postcss/8.4.5:
+    resolution: {integrity: sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.4
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+
+  /prelude-ls/1.1.2:
+    resolution: {integrity: sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==}
+    engines: {node: '>= 0.8.0'}
+    dev: true
+
+  /prelude-ls/1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+    dev: true
+
+  /prettier-linter-helpers/1.0.0:
+    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      fast-diff: 1.2.0
+    dev: true
+
+  /prettier/2.7.1:
+    resolution: {integrity: sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dev: true
+
+  /pretty-error/4.0.0:
+    resolution: {integrity: sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==}
+    dependencies:
+      lodash: 4.17.21
+      renderkid: 3.0.0
+    dev: true
+
+  /pretty-format/27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+    dev: true
+
+  /pretty-format/28.1.1:
+    resolution: {integrity: sha512-wwJbVTGFHeucr5Jw2bQ9P+VYHyLdAqedFLEkdQUVaBF/eiidDwH5OpilINq4mEfhbCjLnirt6HTTDhv1HaTIQw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/schemas': 28.0.2
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 18.2.0
+    dev: true
+
+  /pretty-hrtime/1.0.3:
+    resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
+  /process-nextick-args/2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+    dev: true
+
+  /process/0.11.10:
+    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
+    engines: {node: '>= 0.6.0'}
+    dev: false
+
+  /promise-polyfill/8.1.3:
+    resolution: {integrity: sha512-MG5r82wBzh7pSKDRa9y+vllNHz3e3d4CNj1PQE4BQYxLme0gKYYBm9YENq+UkEikyZ0XbiGWxYlVw3Rl9O/U8g==}
+    dev: true
+
+  /promise.series/0.2.0:
+    resolution: {integrity: sha512-VWQJyU2bcDTgZw8kpfBpB/ejZASlCrzwz5f2hjb/zlujOEB4oeiAhHygAWq8ubsX2GVkD4kCU5V2dwOTaCY5EQ==}
+    engines: {node: '>=0.12'}
+    dev: true
+
+  /prompts/2.4.2:
+    resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
+    engines: {node: '>= 6'}
+    dependencies:
+      kleur: 3.0.3
+      sisteransi: 1.0.5
+    dev: true
+
+  /prop-types/15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+
+  /protobufjs/6.11.3:
+    resolution: {integrity: sha512-xL96WDdCZYdU7Slin569tFX712BxsxslWwAfAhCYjQKGTq7dAU91Lomy6nLLhh/dyGhk/YH4TwTSRxTzhuHyZg==}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      '@protobufjs/aspromise': 1.1.2
+      '@protobufjs/base64': 1.1.2
+      '@protobufjs/codegen': 2.0.4
+      '@protobufjs/eventemitter': 1.1.0
+      '@protobufjs/fetch': 1.1.0
+      '@protobufjs/float': 1.0.2
+      '@protobufjs/inquire': 1.1.0
+      '@protobufjs/path': 1.1.2
+      '@protobufjs/pool': 1.1.0
+      '@protobufjs/utf8': 1.1.0
+      '@types/long': 4.0.2
+      '@types/node': 18.0.1
+      long: 4.0.0
+    dev: true
+
+  /proxy-addr/2.0.7:
+    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
+    engines: {node: '>= 0.10'}
+    dependencies:
+      forwarded: 0.2.0
+      ipaddr.js: 1.9.1
+    dev: true
+
+  /prr/1.0.1:
+    resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
+    dev: true
+    optional: true
+
+  /psl/1.9.0:
+    resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
+    dev: true
+
+  /pump/3.0.0:
+    resolution: {integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==}
+    dependencies:
+      end-of-stream: 1.4.4
+      once: 1.4.0
+    dev: false
+
+  /punycode/1.3.2:
+    resolution: {integrity: sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==}
+    dev: false
+
+  /punycode/2.1.1:
+    resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
+    engines: {node: '>=6'}
+
+  /qs/6.10.3:
+    resolution: {integrity: sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==}
+    engines: {node: '>=0.6'}
+    dependencies:
+      side-channel: 1.0.4
+    dev: true
+
+  /qs/6.11.0:
+    resolution: {integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==}
+    engines: {node: '>=0.6'}
+    dependencies:
+      side-channel: 1.0.4
+
+  /querystring/0.2.0:
+    resolution: {integrity: sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g==}
+    engines: {node: '>=0.4.x'}
+    deprecated: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
+    dev: false
+
+  /queue-microtask/1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  /quick-lru/5.1.1:
+    resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
+    engines: {node: '>=10'}
+    dev: false
+
+  /randombytes/2.1.0:
+    resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
+    dependencies:
+      safe-buffer: 5.2.1
+
+  /range-parser/1.2.1:
+    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /raw-body/2.5.1:
+    resolution: {integrity: sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.0
+      iconv-lite: 0.4.24
+      unpipe: 1.0.0
+    dev: true
+
+  /raw-loader/4.0.2_webpack@5.73.0:
+    resolution: {integrity: sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      webpack: ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+    dependencies:
+      loader-utils: 2.0.2
+      schema-utils: 3.1.1
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /rc-align/4.0.12:
+    resolution: {integrity: sha512-3DuwSJp8iC/dgHzwreOQl52soj40LchlfUHtgACOUtwGuoFIOVh6n/sCpfqCU8kO5+iz6qR0YKvjgB8iPdE3aQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      dom-align: 1.12.3
+      lodash: 4.17.21
+      rc-util: 5.22.5
+      resize-observer-polyfill: 1.5.1
+    dev: false
+
+  /rc-cascader/3.6.1:
+    resolution: {integrity: sha512-+GmN2Z0IybKT45t0Z94jkjmsOHGxAliobR2tzt05/Gw0AKBYLHX5bdvsVXR7abPnarYyYzZ/cWe8CoFgDjAFNw==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      array-tree-filter: 2.1.0
+      classnames: 2.3.1
+      rc-select: 14.1.8
+      rc-tree: 5.6.5
+      rc-util: 5.22.5
+    dev: false
+
+  /rc-checkbox/2.3.2:
+    resolution: {integrity: sha512-afVi1FYiGv1U0JlpNH/UaEXdh6WUJjcWokj/nUN2TgG80bfG+MDdbfHKlLcNNba94mbjy2/SXJ1HDgrOkXGAjg==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+    dev: false
+
+  /rc-collapse/3.3.1:
+    resolution: {integrity: sha512-cOJfcSe3R8vocrF8T+PgaHDrgeA1tX+lwfhwSj60NX9QVRidsILIbRNDLD6nAzmcvVC5PWiIRiR4S1OobxdhCg==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-motion: 2.6.0
+      rc-util: 5.22.5
+      shallowequal: 1.1.0
+    dev: false
+
+  /rc-dialog/8.9.0:
+    resolution: {integrity: sha512-Cp0tbJnrvPchJfnwIvOMWmJ4yjX3HWFatO6oBFD1jx8QkgsQCR0p8nUWAKdd3seLJhEC39/v56kZaEjwp9muoQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-motion: 2.6.0
+      rc-util: 5.22.5
+    dev: false
+
+  /rc-drawer/4.4.3:
+    resolution: {integrity: sha512-FYztwRs3uXnFOIf1hLvFxIQP9MiZJA+0w+Os8dfDh/90X7z/HqP/Yg+noLCIeHEbKln1Tqelv8ymCAN24zPcfQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-util: 5.22.5
+    dev: false
+
+  /rc-dropdown/4.0.1:
+    resolution: {integrity: sha512-OdpXuOcme1rm45cR0Jzgfl1otzmU4vuBVb+etXM8vcaULGokAKVpKlw8p6xzspG7jGd/XxShvq+N3VNEfk/l5g==}
+    peerDependencies:
+      react: '>=16.11.0'
+      react-dom: '>=16.11.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-trigger: 5.3.1
+      rc-util: 5.22.5
+    dev: false
+
+  /rc-field-form/1.26.7:
+    resolution: {integrity: sha512-CIb7Gw+DG9R+g4HxaDGYHhOjhjQoU2mGU4y+UM2+KQ3uRz9HrrNgTspGvNynn3UamsYcYcaPWZJmiJ6VklkT/w==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      async-validator: 4.2.5
+      rc-util: 5.22.5
+    dev: false
+
+  /rc-image/5.7.0:
+    resolution: {integrity: sha512-v6dzSgYfYrH4liKmOZKZZO+x21sJ9KPXNinBfkAoQg2Ihcd5QZ+P/JjB7v60X981XTPGjegy8U17Z8VUX4V36g==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-dialog: 8.9.0
+      rc-util: 5.22.5
+    dev: false
+
+  /rc-input-number/7.3.4:
+    resolution: {integrity: sha512-W9uqSzuvJUnz8H8vsVY4kx+yK51SsAxNTwr8SNH4G3XqQNocLVmKIibKFRjocnYX1RDHMND9FFbgj2h7E7nvGA==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-util: 5.22.5
+    dev: false
+
+  /rc-input/0.0.1-alpha.7:
+    resolution: {integrity: sha512-eozaqpCYWSY5LBMwlHgC01GArkVEP+XlJ84OMvdkwUnJBSv83Yxa15pZpn7vACAj84uDC4xOA2CoFdbLuqB08Q==}
+    peerDependencies:
+      react: '>=16.0.0'
+      react-dom: '>=16.0.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-util: 5.22.5
+    dev: false
+
+  /rc-mentions/1.8.0:
+    resolution: {integrity: sha512-ch7yfMMvx2UXy+EvE4axm0Vp6VlVZ30WLrZtLtV/Eb1ty7rQQRzNzCwAHAMyw6tNKTMs9t9sF68AVjAzQ0rvJw==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-menu: 9.6.0
+      rc-textarea: 0.3.7
+      rc-trigger: 5.3.1
+      rc-util: 5.22.5
+    dev: false
+
+  /rc-menu/9.6.0:
+    resolution: {integrity: sha512-d26waws42U/rVwW/+rOE2FN9pX6wUc9bDy38vVQYoie6gE85auWIpl5oChGlnW6nE2epnTwUsgWl8ipOPgmnUA==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-motion: 2.6.0
+      rc-overflow: 1.2.6
+      rc-trigger: 5.3.1
+      rc-util: 5.22.5
+      shallowequal: 1.1.0
+    dev: false
+
+  /rc-motion/2.6.0:
+    resolution: {integrity: sha512-1MDWA9+i174CZ0SIDenSYm2Wb9YbRkrexjZWR0CUFu7D6f23E8Y0KsTgk9NGOLJsGak5ELZK/Y5lOlf5wQdzbw==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-util: 5.22.5
+    dev: false
+
+  /rc-notification/4.6.0:
+    resolution: {integrity: sha512-xF3MKgIoynzjQAO4lqsoraiFo3UXNYlBfpHs0VWvwF+4pimen9/H1DYLN2mfRWhHovW6gRpla73m2nmyIqAMZQ==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-motion: 2.6.0
+      rc-util: 5.22.5
+    dev: false
+
+  /rc-overflow/1.2.6:
+    resolution: {integrity: sha512-YqbocgzuQxfq2wZy72vdAgrgzzEuM/5d4gF9TBEodCpXPbUeXGrUXNm1J6G1MSkCU2N0ePIgCEu5qD/0Ldi63Q==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-resize-observer: 1.2.0
+      rc-util: 5.22.5
+    dev: false
+
+  /rc-pagination/3.1.17:
+    resolution: {integrity: sha512-/BQ5UxcBnW28vFAcP2hfh+Xg15W0QZn8TWYwdCApchMH1H0CxiaUUcULP8uXcFM1TygcdKWdt3JqsL9cTAfdkQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+    dev: false
+
+  /rc-picker/2.6.10:
+    resolution: {integrity: sha512-9wYtw0DFWs9FO92Qh2D76P0iojUr8ZhLOtScUeOit6ks/F+TBLrOC1uze3IOu+u9gbDAjmosNWLKbBzx/Yuv2w==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      date-fns: 2.28.0
+      dayjs: 1.11.3
+      moment: 2.29.3
+      rc-trigger: 5.3.1
+      rc-util: 5.22.5
+      shallowequal: 1.1.0
+    dev: false
+
+  /rc-progress/3.3.3:
+    resolution: {integrity: sha512-MDVNVHzGanYtRy2KKraEaWeZLri2ZHWIRyaE1a9MQ2MuJ09m+Wxj5cfcaoaR6z5iRpHpA59YeUxAlpML8N4PJw==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-util: 5.22.5
+    dev: false
+
+  /rc-rate/2.9.2:
+    resolution: {integrity: sha512-SaiZFyN8pe0Fgphv8t3+kidlej+cq/EALkAJAc3A0w0XcPaH2L1aggM8bhe1u6GAGuQNAoFvTLjw4qLPGRKV5g==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-util: 5.22.5
+    dev: false
+
+  /rc-resize-observer/1.2.0:
+    resolution: {integrity: sha512-6W+UzT3PyDM0wVCEHfoW3qTHPTvbdSgiA43buiy8PzmeMnfgnDeb9NjdimMXMl3/TcrvvWl5RRVdp+NqcR47pQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-util: 5.22.5
+      resize-observer-polyfill: 1.5.1
+    dev: false
+
+  /rc-segmented/2.1.0:
+    resolution: {integrity: sha512-hUlonro+pYoZcwrH6Vm56B2ftLfQh046hrwif/VwLIw1j3zGt52p5mREBwmeVzXnSwgnagpOpfafspzs1asjGw==}
+    peerDependencies:
+      react: '>=16.0.0'
+      react-dom: '>=16.0.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-motion: 2.6.0
+      rc-util: 5.22.5
+    dev: false
+
+  /rc-select/14.1.8:
+    resolution: {integrity: sha512-1kU/7ZCggyR5r5jVEQfAiN6Sq3LGLD2b6FNz5GWel3TOEQZYyDn0o4FAoIRqS6Y5ldWmkFxtd834ilPnG6NV6w==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-motion: 2.6.0
+      rc-overflow: 1.2.6
+      rc-trigger: 5.3.1
+      rc-util: 5.22.5
+      rc-virtual-list: 3.4.8
+    dev: false
+
+  /rc-slider/10.0.0:
+    resolution: {integrity: sha512-Bk54UIKWW4wyhHcL8ehAxt+wX+n69dscnHTX6Uv0FMxSke/TGrlkZz1LSIWblCpfE2zr/dwR2Ca8nZGk3U+Tbg==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-tooltip: 5.1.1
+      rc-util: 5.22.5
+      shallowequal: 1.1.0
+    dev: false
+
+  /rc-steps/4.1.4:
+    resolution: {integrity: sha512-qoCqKZWSpkh/b03ASGx1WhpKnuZcRWmvuW+ZUu4mvMdfvFzVxblTwUM+9aBd0mlEUFmt6GW8FXhMpHkK3Uzp3w==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-util: 5.22.5
+    dev: false
+
+  /rc-switch/3.2.2:
+    resolution: {integrity: sha512-+gUJClsZZzvAHGy1vZfnwySxj+MjLlGRyXKXScrtCTcmiYNPzxDFOxdQ/3pK1Kt/0POvwJ/6ALOR8gwdXGhs+A==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-util: 5.22.5
+    dev: false
+
+  /rc-table/7.24.3:
+    resolution: {integrity: sha512-3Z74jeIpQ2t0i/PQ3iSKXsl1WGT809yzq3KzIDzEB7SIA0zat+rqwI+OnrwfhJVRp7GTjeT7sJyCatXpw1YJdg==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-resize-observer: 1.2.0
+      rc-util: 5.22.5
+      shallowequal: 1.1.0
+    dev: false
+
+  /rc-tabs/11.16.0:
+    resolution: {integrity: sha512-CIDPv3lHaXSHTJevmFP2eHoD3Hq9psfKbOZYf6D4FYPACloNGHpz44y3RGeJgataQ7omFLrGBm3dOBMUki87tA==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-dropdown: 4.0.1
+      rc-menu: 9.6.0
+      rc-resize-observer: 1.2.0
+      rc-util: 5.22.5
+    dev: false
+
+  /rc-textarea/0.3.7:
+    resolution: {integrity: sha512-yCdZ6binKmAQB13hc/oehh0E/QRwoPP1pjF21aHBxlgXO3RzPF6dUu4LG2R4FZ1zx/fQd2L1faktulrXOM/2rw==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-resize-observer: 1.2.0
+      rc-util: 5.22.5
+      shallowequal: 1.1.0
+    dev: false
+
+  /rc-tooltip/5.1.1:
+    resolution: {integrity: sha512-alt8eGMJulio6+4/uDm7nvV+rJq9bsfxFDCI0ljPdbuoygUscbsMYb6EQgwib/uqsXQUvzk+S7A59uYHmEgmDA==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      rc-trigger: 5.3.1
+    dev: false
+
+  /rc-tree-select/5.4.0:
+    resolution: {integrity: sha512-reRbOqC7Ic/nQocJAJeCl4n6nJUY3NoqiwRXKvhjgZJU7NGr9vIccXEsY+Lghkw5UMpPoxGsIJB0jiAvM18XYA==}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-select: 14.1.8
+      rc-tree: 5.6.5
+      rc-util: 5.22.5
+    dev: false
+
+  /rc-tree/5.6.5:
+    resolution: {integrity: sha512-Bnyen46B251APyRZ9D/jYeTnSqbSEvK2AkU5B4vWkNYgUJNPrxO+VMgcDRedP/8N7YcsgdDT9hxqVvNOq7oCAQ==}
+    engines: {node: '>=10.x'}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-motion: 2.6.0
+      rc-util: 5.22.5
+      rc-virtual-list: 3.4.8
+    dev: false
+
+  /rc-trigger/5.3.1:
+    resolution: {integrity: sha512-5gaFbDkYSefZ14j2AdzucXzlWgU2ri5uEjkHvsf1ynRhdJbKxNOnw4PBZ9+FVULNGFiDzzlVF8RJnR9P/xrnKQ==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-align: 4.0.12
+      rc-motion: 2.6.0
+      rc-util: 5.22.5
+    dev: false
+
+  /rc-upload/4.3.4:
+    resolution: {integrity: sha512-uVbtHFGNjHG/RyAfm9fluXB6pvArAGyAx8z7XzXXyorEgVIWj6mOlriuDm0XowDHYz4ycNK0nE0oP3cbFnzxiQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      classnames: 2.3.1
+      rc-util: 5.22.5
+    dev: false
+
+  /rc-util/5.22.5:
+    resolution: {integrity: sha512-awD2TGMGU97OZftT2R3JwrHWjR8k/xIwqjwcivPskciweUdgXE7QsyXkBKVSBHXS+c17AWWMDWuKWsJSheQy8g==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      react-is: 16.13.1
+      shallowequal: 1.1.0
+    dev: false
+
+  /rc-virtual-list/3.4.8:
+    resolution: {integrity: sha512-qSN+Rv4i/E7RCTvTMr1uZo7f3crJJg/5DekoCagydo9zsXrxj07zsFSxqizqW+ldGA16lwa8So/bIbV9Ofjddg==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      classnames: 2.3.1
+      rc-resize-observer: 1.2.0
+      rc-util: 5.22.5
+    dev: false
+
+  /react-date-range/1.4.0_date-fns@2.28.0:
+    resolution: {integrity: sha512-+9t0HyClbCqw1IhYbpWecjsiaftCeRN5cdhsi9v06YdimwyMR2yYHWcgVn3URwtN/txhqKpEZB6UX1fHpvK76w==}
+    peerDependencies:
+      date-fns: 2.0.0-alpha.7 || >=2.0.0
+      react: ^0.14 || ^15.0.0-rc || >=15.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      classnames: 2.3.1
+      date-fns: 2.28.0
+      prop-types: 15.8.1
+      react-list: 0.8.17
+      shallow-equal: 1.2.1
+    dev: false
+
+  /react-dom/18.2.0_react@18.2.0:
+    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
+    peerDependencies:
+      react: ^18.2.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.2.0
+      scheduler: 0.23.0
+
+  /react-draggable/4.4.5:
+    resolution: {integrity: sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==}
+    peerDependencies:
+      react: '>= 16.3.0'
+      react-dom: '>= 16.3.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      clsx: 1.2.0
+      prop-types: 15.8.1
+    dev: false
+
+  /react-error-boundary/3.1.4:
+    resolution: {integrity: sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==}
+    engines: {node: '>=10', npm: '>=6'}
+    peerDependencies:
+      react: '>=16.13.1'
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+    dev: false
+
+  /react-error-boundary/3.1.4_react@18.2.0:
+    resolution: {integrity: sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==}
+    engines: {node: '>=10', npm: '>=6'}
+    peerDependencies:
+      react: '>=16.13.1'
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      react: 18.2.0
+    dev: true
+
+  /react-hotkeys-hook/3.4.6:
+    resolution: {integrity: sha512-SiGKHnauaAQglRA7qeiW5LTa0KoT2ssv8YGYKZQoM3P9v5JFEHJdXOSFml1N6K86oKQ8dLCLlxqBqGlSJWGmxQ==}
+    peerDependencies:
+      react: '>=16.8.1'
+      react-dom: '>=16.8.1'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      hotkeys-js: 3.9.3
+    dev: false
+
+  /react-is/16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
+  /react-is/17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+
+  /react-is/18.2.0:
+    resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
+    dev: true
+
+  /react-list/0.8.17:
+    resolution: {integrity: sha512-pgmzGi0G5uGrdHzMhgO7KR1wx5ZXVvI3SsJUmkblSAKtewIhMwbQiMuQiTE83ozo04BQJbe0r3WIWzSO0dR1xg==}
+    peerDependencies:
+      react: 0.14 || 15 - 18
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      prop-types: 15.8.1
+    dev: false
+
+  /react-refresh/0.10.0:
+    resolution: {integrity: sha512-PgidR3wST3dDYKr6b4pJoqQFpPGNKDSCDx4cZoshjXipw3LzO7mG1My2pwEzz2JVkF+inx3xRpDeQLFQGH/hsQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /react-resizable/3.0.4:
+    resolution: {integrity: sha512-StnwmiESiamNzdRHbSSvA65b0ZQJ7eVQpPusrSmcpyGKzC0gojhtO62xxH6YOBmepk9dQTBi9yxidL3W4s3EBA==}
+    peerDependencies:
+      react: '>= 16.3'
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      prop-types: 15.8.1
+      react-draggable: 4.4.5
+    transitivePeerDependencies:
+      - react-dom
+    dev: false
+
+  /react-responsive/9.0.0-beta.10:
+    resolution: {integrity: sha512-41H8g4FYP46ln16rsHvs9/0ZoZxAPfnNiHET86/5pgS+Vw8fSKfLBuOS2SAquaxOxq7DgPviFoHmybgVvSKCNQ==}
+    engines: {node: '>=0.10'}
+    peerDependencies:
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      hyphenate-style-name: 1.0.4
+      matchmediaquery: 0.3.1
+      prop-types: 15.8.1
+      shallow-equal: 1.2.1
+    dev: false
+
+  /react-router-dom/6.3.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      history: 5.3.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-router: 6.3.0_react@18.2.0
+    dev: false
+
+  /react-router/6.3.0_react@18.2.0:
+    resolution: {integrity: sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==}
+    peerDependencies:
+      react: '>=16.8'
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      history: 5.3.0
+      react: 18.2.0
+    dev: false
+
+  /react-shallow-renderer/16.15.0_react@18.2.0:
+    resolution: {integrity: sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==}
+    peerDependencies:
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      object-assign: 4.1.1
+      react: 18.2.0
+      react-is: 18.2.0
+    dev: true
+
+  /react-test-renderer/18.2.0_react@18.2.0:
+    resolution: {integrity: sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==}
+    peerDependencies:
+      react: ^18.2.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      react: 18.2.0
+      react-is: 18.2.0
+      react-shallow-renderer: 16.15.0_react@18.2.0
+      scheduler: 0.23.0
+    dev: true
+
+  /react-transition-group/4.4.2:
+    resolution: {integrity: sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==}
+    peerDependencies:
+      react: '>=16.6.0'
+      react-dom: '>=16.6.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+    dev: false
+
+  /react-transition-group/4.4.2_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==}
+    peerDependencies:
+      react: '>=16.6.0'
+      react-dom: '>=16.6.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /react-universal-interface/0.6.2_tslib@2.4.0:
+    resolution: {integrity: sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==}
+    peerDependencies:
+      react: '*'
+      tslib: '*'
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      tslib: 2.4.0
+    dev: false
+
+  /react-use/17.4.0:
+    resolution: {integrity: sha512-TgbNTCA33Wl7xzIJegn1HndB4qTS9u03QUwyNycUnXaweZkE4Kq2SB+Yoxx8qbshkZGYBDvUXbXWRUmQDcZZ/Q==}
+    peerDependencies:
+      react: ^16.8.0  || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0  || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@types/js-cookie': 2.2.7
+      '@xobotyi/scrollbar-width': 1.9.5
+      copy-to-clipboard: 3.3.1
+      fast-deep-equal: 3.1.3
+      fast-shallow-equal: 1.0.0
+      js-cookie: 2.2.1
+      nano-css: 5.3.5
+      react-universal-interface: 0.6.2_tslib@2.4.0
+      resize-observer-polyfill: 1.5.1
+      screenfull: 5.2.0
+      set-harmonic-interval: 1.0.1
+      throttle-debounce: 3.0.1
+      ts-easing: 0.2.0
+      tslib: 2.4.0
+    dev: false
+
+  /react-window/1.8.7:
+    resolution: {integrity: sha512-JHEZbPXBpKMmoNO1bNhoXOOLg/ujhL/BU4IqVU9r8eQPcy5KQnGHIHDRkJ0ns9IM5+Aq5LNwt3j8t3tIrePQzA==}
+    engines: {node: '>8.0.0'}
+    peerDependencies:
+      react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.6
+      memoize-one: 5.2.1
+    dev: false
+
+  /react/18.2.0:
+    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      loose-envify: 1.4.0
+
+  /read-cache/1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+    dependencies:
+      pify: 2.3.0
+    dev: true
+
+  /readable-stream/2.3.7:
+    resolution: {integrity: sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==}
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 1.0.0
+      process-nextick-args: 2.0.1
+      safe-buffer: 5.1.2
+      string_decoder: 1.1.1
+      util-deprecate: 1.0.2
+    dev: true
+
+  /readable-stream/3.6.0:
+    resolution: {integrity: sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==}
+    engines: {node: '>= 6'}
+    dependencies:
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
+
+  /readdirp/3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      picomatch: 2.3.1
+    dev: true
+
+  /regenerate-unicode-properties/10.0.1:
+    resolution: {integrity: sha512-vn5DU6yg6h8hP/2OkQo3K7uVILvY4iu0oI4t3HFa81UPkhGJwkRwM10JEc3upjdhHjs/k8GJY1sRBhk5sr69Bw==}
+    engines: {node: '>=4'}
+    dependencies:
+      regenerate: 1.4.2
+    dev: true
+
+  /regenerate/1.4.2:
+    resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==}
+    dev: true
+
+  /regenerator-runtime/0.13.9:
+    resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==}
+
+  /regenerator-transform/0.15.0:
+    resolution: {integrity: sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg==}
+    dependencies:
+      '@babel/runtime': 7.18.6
+    dev: true
+
+  /regexp.prototype.flags/1.4.3:
+    resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      functions-have-names: 1.2.3
+
+  /regexpp/3.2.0:
+    resolution: {integrity: sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /regexpu-core/5.1.0:
+    resolution: {integrity: sha512-bb6hk+xWd2PEOkj5It46A16zFMs2mv86Iwpdu94la4S3sJ7C973h2dHpYKwIBGaWSO7cIRJ+UX0IeMaWcO4qwA==}
+    engines: {node: '>=4'}
+    dependencies:
+      regenerate: 1.4.2
+      regenerate-unicode-properties: 10.0.1
+      regjsgen: 0.6.0
+      regjsparser: 0.8.4
+      unicode-match-property-ecmascript: 2.0.0
+      unicode-match-property-value-ecmascript: 2.0.0
+    dev: true
+
+  /regjsgen/0.6.0:
+    resolution: {integrity: sha512-ozE883Uigtqj3bx7OhL1KNbCzGyW2NQZPl6Hs09WTvCuZD5sTI4JY58bkbQWa/Y9hxIsvJ3M8Nbf7j54IqeZbA==}
+    dev: true
+
+  /regjsparser/0.8.4:
+    resolution: {integrity: sha512-J3LABycON/VNEu3abOviqGHuB/LOtOQj8SKmfP9anY5GfAVw/SPjwzSjxGjbZXIxbGfqTHtJw58C2Li/WkStmA==}
+    hasBin: true
+    dependencies:
+      jsesc: 0.5.0
+    dev: true
+
+  /relateurl/0.2.7:
+    resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
+    engines: {node: '>= 0.10'}
+    dev: true
+
+  /renderkid/3.0.0:
+    resolution: {integrity: sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==}
+    dependencies:
+      css-select: 4.3.0
+      dom-converter: 0.2.0
+      htmlparser2: 6.1.0
+      lodash: 4.17.21
+      strip-ansi: 6.0.1
+    dev: true
+
+  /require-directory/2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  /require-from-string/2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /requires-port/1.0.0:
+    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
+    dev: true
+
+  /reselect/4.1.6:
+    resolution: {integrity: sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ==}
+    dev: false
+
+  /resize-observer-polyfill/1.5.1:
+    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
+    dev: false
+
+  /resolve-alpn/1.2.1:
+    resolution: {integrity: sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==}
+    dev: false
+
+  /resolve-cwd/3.0.0:
+    resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==}
+    engines: {node: '>=8'}
+    dependencies:
+      resolve-from: 5.0.0
+    dev: true
+
+  /resolve-from/4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  /resolve-from/5.0.0:
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /resolve.exports/1.1.0:
+    resolution: {integrity: sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /resolve/1.22.1:
+    resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.9.0
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  /resolve/2.0.0-next.4:
+    resolution: {integrity: sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.9.0
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+    dev: true
+
+  /responselike/2.0.0:
+    resolution: {integrity: sha512-xH48u3FTB9VsZw7R+vvgaKeLKzT6jOogbQhEe/jewwnZgzPcnyWui2Av6JpoYZF/91uueC+lqhWqeURw5/qhCw==}
+    dependencies:
+      lowercase-keys: 2.0.0
+    dev: false
+
+  /restore-cursor/2.0.0:
+    resolution: {integrity: sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==}
+    engines: {node: '>=4'}
+    dependencies:
+      onetime: 2.0.1
+      signal-exit: 3.0.7
+    dev: true
+
+  /restore-cursor/3.1.0:
+    resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
+    engines: {node: '>=8'}
+    dependencies:
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+    dev: true
+
+  /retry/0.13.1:
+    resolution: {integrity: sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==}
+    engines: {node: '>= 4'}
+    dev: true
+
+  /reusify/1.0.4:
+    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+    dev: true
+
+  /rfdc/1.3.0:
+    resolution: {integrity: sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==}
+    dev: true
+
+  /rifm/0.12.1:
+    resolution: {integrity: sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==}
+    peerDependencies:
+      react: '>=16.8'
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dev: false
+
+  /rimraf/2.6.3:
+    resolution: {integrity: sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==}
+    hasBin: true
+    dependencies:
+      glob: 7.2.3
+    dev: true
+
+  /rimraf/3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    hasBin: true
+    dependencies:
+      glob: 7.2.3
+    dev: true
+
+  /rollup-plugin-copy/3.4.0:
+    resolution: {integrity: sha512-rGUmYYsYsceRJRqLVlE9FivJMxJ7X6jDlP79fmFkL8sJs7VVMSVyA2yfyL+PGyO/vJs4A87hwhgVfz61njI+uQ==}
+    engines: {node: '>=8.3'}
+    dependencies:
+      '@types/fs-extra': 8.1.2
+      colorette: 1.4.0
+      fs-extra: 8.1.0
+      globby: 10.0.1
+      is-plain-object: 3.0.1
+    dev: true
+
+  /rollup-plugin-peer-deps-external/2.2.4_rollup@2.75.7:
+    resolution: {integrity: sha512-AWdukIM1+k5JDdAqV/Cxd+nejvno2FVLVeZ74NKggm3Q5s9cbbcOgUPGdbxPi4BXu7xGaZ8HG12F+thImYu/0g==}
+    peerDependencies:
+      rollup: '*'
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      rollup: 2.75.7
+    dev: true
+
+  /rollup-plugin-postcss/4.0.2_i7duc3lt6p42geuj2nwruihc6u:
+    resolution: {integrity: sha512-05EaY6zvZdmvPUDi3uCcAQoESDcYnv8ogJJQRp6V5kZ6J6P7uAVJlrTZcaaA20wTH527YTnKfkAoPxWI/jPp4w==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      postcss: 8.x
+    dependencies:
+      chalk: 4.1.2
+      concat-with-sourcemaps: 1.1.0
+      cssnano: 5.1.12_postcss@8.4.14
+      import-cwd: 3.0.0
+      p-queue: 6.6.2
+      pify: 5.0.0
+      postcss: 8.4.14
+      postcss-load-config: 3.1.4_i7duc3lt6p42geuj2nwruihc6u
+      postcss-modules: 4.3.1_postcss@8.4.14
+      promise.series: 0.2.0
+      resolve: 1.22.1
+      rollup-pluginutils: 2.8.2
+      safe-identifier: 0.4.2
+      style-inject: 0.3.0
+    transitivePeerDependencies:
+      - ts-node
+    dev: true
+
+  /rollup-plugin-typescript2/0.31.2_okefoyb4o5sittgqayreuhurei:
+    resolution: {integrity: sha512-hRwEYR1C8xDGVVMFJQdEVnNAeWRvpaY97g5mp3IeLnzhNXzSVq78Ye/BJ9PAaUfN4DXa/uDnqerifMOaMFY54Q==}
+    peerDependencies:
+      rollup: '>=1.26.3'
+      typescript: '>=2.4.0'
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@yarn-tool/resolve-package': 1.0.47
+      find-cache-dir: 3.3.2
+      fs-extra: 10.1.0
+      resolve: 1.22.1
+      rollup: 2.75.7
+      tslib: 2.4.0
+      typescript: 4.7.4
+    dev: true
+
+  /rollup-pluginutils/2.8.2:
+    resolution: {integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==}
+    dependencies:
+      estree-walker: 0.6.1
+    dev: true
+
+  /rollup/2.75.7:
+    resolution: {integrity: sha512-VSE1iy0eaAYNCxEXaleThdFXqZJ42qDBatAwrfnPlENEZ8erQ+0LYX4JXOLPceWfZpV1VtZwZ3dFCuOZiSyFtQ==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.2
+
+  /rtl-css-js/1.15.0:
+    resolution: {integrity: sha512-99Cu4wNNIhrI10xxUaABHsdDqzalrSRTie4GeCmbGVuehm4oj+fIy8fTzB+16pmKe8Bv9rl+hxIBez6KxExTew==}
+    dependencies:
+      '@babel/runtime': 7.18.6
+    dev: false
+
+  /run-async/2.4.1:
+    resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
+    engines: {node: '>=0.12.0'}
+    dev: true
+
+  /run-parallel-limit/1.1.0:
+    resolution: {integrity: sha512-jJA7irRNM91jaKc3Hcl1npHsFLOXOoTkPCUL1JEa1R82O2miplXXRaGdjW/KM/98YQWDhJLiSs793CnXfblJUw==}
+    dependencies:
+      queue-microtask: 1.2.3
+    dev: false
+
+  /run-parallel/1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+    dependencies:
+      queue-microtask: 1.2.3
+    dev: true
+
+  /rxjs-for-await/0.0.2_rxjs@6.6.7:
+    resolution: {integrity: sha512-IJ8R/ZCFMHOcDIqoABs82jal00VrZx8Xkgfe7TOKoaRPAW5nH/VFlG23bXpeGdrmtqI9UobFPgUKgCuFc7Lncw==}
+    peerDependencies:
+      rxjs: ^6.0.0
+    peerDependenciesMeta:
+      rxjs:
+        optional: true
+    dependencies:
+      rxjs: 6.6.7
+    dev: true
+
+  /rxjs/6.6.7:
+    resolution: {integrity: sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==}
+    engines: {npm: '>=2.0.0'}
+    dependencies:
+      tslib: 1.14.1
+    dev: true
+
+  /rxjs/7.5.5:
+    resolution: {integrity: sha512-sy+H0pQofO95VDmFLzyaw9xNJU4KTRSwQIGM6+iG3SypAtCiLDzpeG8sJrNCWn2Up9km+KhkvTdbkrdy+yzZdw==}
+    dependencies:
+      tslib: 2.4.0
+
+  /safari-14-idb-fix/3.0.0:
+    resolution: {integrity: sha512-eBNFLob4PMq8JA1dGyFn6G97q3/WzNtFK4RnzT1fnLq+9RyrGknzYiM/9B12MnKAxuj1IXr7UKYtTNtjyKMBog==}
+    dev: false
+
+  /safe-buffer/5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+
+  /safe-buffer/5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  /safe-identifier/0.4.2:
+    resolution: {integrity: sha512-6pNbSMW6OhAi9j+N8V+U715yBQsaWJ7eyEUaOrawX+isg5ZxhUlV1NipNtgaKHmFGiABwt+ZF04Ii+3Xjkg+8w==}
+    dev: true
+
+  /safer-buffer/2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+    dev: true
+
+  /sass-loader/12.6.0_sass@1.53.0+webpack@5.73.0:
+    resolution: {integrity: sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==}
+    engines: {node: '>= 12.13.0'}
+    peerDependencies:
+      fibers: '>= 3.1.0'
+      node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+      sass: ^1.3.0
+      sass-embedded: '*'
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      fibers:
+        optional: true
+      node-sass:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      klona: 2.0.5
+      neo-async: 2.6.2
+      sass: 1.53.0
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /sass/1.53.0:
+    resolution: {integrity: sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==}
+    engines: {node: '>=12.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.1.0
+      source-map-js: 1.0.2
+    dev: true
+
+  /sax/1.2.1:
+    resolution: {integrity: sha512-8I2a3LovHTOpm7NV5yOyO8IHqgVsfK4+UuySrXU8YXkSRX7k6hCV9b3HrkKCr3nMpgj+0bmocaJJWpvp1oc7ZA==}
+    dev: false
+
+  /sax/1.2.4:
+    resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
+    dev: true
+
+  /saxes/5.0.1:
+    resolution: {integrity: sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==}
+    engines: {node: '>=10'}
+    dependencies:
+      xmlchars: 2.2.0
+    dev: true
+
+  /scheduler/0.23.0:
+    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
+    dependencies:
+      loose-envify: 1.4.0
+
+  /schema-utils/2.7.0:
+    resolution: {integrity: sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==}
+    engines: {node: '>= 8.9.0'}
+    dependencies:
+      '@types/json-schema': 7.0.11
+      ajv: 6.12.6
+      ajv-keywords: 3.5.2_ajv@6.12.6
+    dev: true
+
+  /schema-utils/2.7.1:
+    resolution: {integrity: sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==}
+    engines: {node: '>= 8.9.0'}
+    dependencies:
+      '@types/json-schema': 7.0.11
+      ajv: 6.12.6
+      ajv-keywords: 3.5.2_ajv@6.12.6
+    dev: true
+
+  /schema-utils/3.1.1:
+    resolution: {integrity: sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==}
+    engines: {node: '>= 10.13.0'}
+    dependencies:
+      '@types/json-schema': 7.0.11
+      ajv: 6.12.6
+      ajv-keywords: 3.5.2_ajv@6.12.6
+
+  /schema-utils/4.0.0:
+    resolution: {integrity: sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==}
+    engines: {node: '>= 12.13.0'}
+    dependencies:
+      '@types/json-schema': 7.0.11
+      ajv: 8.11.0
+      ajv-formats: 2.1.1
+      ajv-keywords: 5.1.0_ajv@8.11.0
+    dev: true
+
+  /screenfull/5.2.0:
+    resolution: {integrity: sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /scroll-into-view-if-needed/2.2.29:
+    resolution: {integrity: sha512-hxpAR6AN+Gh53AdAimHM6C8oTN1ppwVZITihix+WqalywBeFcQ6LdQP5ABNl26nX8GTEL7VT+b8lKpdqq65wXg==}
+    dependencies:
+      compute-scroll-into-view: 1.0.17
+    dev: false
+
+  /secure-compare/3.0.1:
+    resolution: {integrity: sha1-8aAymzCLIh+uN7mXTz1XjQypmeM=}
+    dev: true
+
+  /select-hose/2.0.0:
+    resolution: {integrity: sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==}
+    dev: true
+
+  /selenium-webdriver/4.1.2:
+    resolution: {integrity: sha512-e4Ap8vQvhipgBB8Ry9zBiKGkU6kHKyNnWiavGGLKkrdW81Zv7NVMtFOL/j3yX0G8QScM7XIXijKssNd4EUxSOw==}
+    engines: {node: '>= 10.15.0'}
+    dependencies:
+      jszip: 3.10.0
+      tmp: 0.2.1
+      ws: 8.8.0
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+    dev: true
+
+  /selfsigned/2.0.1:
+    resolution: {integrity: sha512-LmME957M1zOsUhG+67rAjKfiWFox3SBxE/yymatMZsAx+oMrJ0YQ8AToOnyCm7xbeg2ep37IHLxdu0o2MavQOQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      node-forge: 1.3.1
+    dev: true
+
+  /semver/5.7.1:
+    resolution: {integrity: sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==}
+    hasBin: true
+    dev: true
+    optional: true
+
+  /semver/6.3.0:
+    resolution: {integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==}
+    hasBin: true
+
+  /semver/7.0.0:
+    resolution: {integrity: sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==}
+    hasBin: true
+    dev: true
+
+  /semver/7.3.4:
+    resolution: {integrity: sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      lru-cache: 6.0.0
+    dev: true
+
+  /semver/7.3.7:
+    resolution: {integrity: sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      lru-cache: 6.0.0
+    dev: true
+
+  /send/0.18.0:
+    resolution: {integrity: sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      debug: 2.6.9
+      depd: 2.0.0
+      destroy: 1.2.0
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 0.5.2
+      http-errors: 2.0.0
+      mime: 1.6.0
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /sentence-case/3.0.4:
+    resolution: {integrity: sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==}
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.4.0
+      upper-case-first: 2.0.2
+    dev: true
+
+  /serialize-javascript/6.0.0:
+    resolution: {integrity: sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==}
+    dependencies:
+      randombytes: 2.1.0
+
+  /serve-index/1.9.1:
+    resolution: {integrity: sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      accepts: 1.3.8
+      batch: 0.6.1
+      debug: 2.6.9
+      escape-html: 1.0.3
+      http-errors: 1.6.3
+      mime-types: 2.1.35
+      parseurl: 1.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /serve-static/1.15.0:
+    resolution: {integrity: sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 0.18.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /set-blocking/2.0.0:
+    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+    dev: true
+
+  /set-harmonic-interval/1.0.1:
+    resolution: {integrity: sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==}
+    engines: {node: '>=6.9'}
+    dev: false
+
+  /setimmediate/1.0.5:
+    resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
+    dev: true
+
+  /setprototypeof/1.1.0:
+    resolution: {integrity: sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==}
+    dev: true
+
+  /setprototypeof/1.2.0:
+    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
+    dev: true
+
+  /sha3/2.1.4:
+    resolution: {integrity: sha512-S8cNxbyb0UGUM2VhRD4Poe5N58gJnJsLJ5vC7FYWGUmGhcsj4++WaIOBFVDxlG0W3To6xBuiRh+i0Qp2oNCOtg==}
+    dependencies:
+      buffer: 6.0.3
+    dev: false
+
+  /shallow-clone/3.0.1:
+    resolution: {integrity: sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==}
+    engines: {node: '>=8'}
+    dependencies:
+      kind-of: 6.0.3
+    dev: true
+
+  /shallow-equal/1.2.1:
+    resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==}
+    dev: false
+
+  /shallowequal/1.1.0:
+    resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==}
+    dev: false
+
+  /shebang-command/2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+    dependencies:
+      shebang-regex: 3.0.0
+    dev: true
+
+  /shebang-regex/3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /side-channel/1.0.4:
+    resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.1.2
+      object-inspect: 1.12.2
+
+  /sift/16.0.0:
+    resolution: {integrity: sha512-ILTjdP2Mv9V1kIxWMXeMTIRbOBrqKc4JAXmFMnFq3fKeyQ2Qwa3Dw1ubcye3vR+Y6ofA0b9gNDr/y2t6eUeIzQ==}
+    dev: false
+
+  /signal-exit/3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+    dev: true
+
+  /sirv/1.0.19:
+    resolution: {integrity: sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@polka/url': 1.0.0-next.21
+      mrmime: 1.0.1
+      totalist: 1.1.0
+    dev: true
+
+  /sisteransi/1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+    dev: true
+
+  /slash/3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /slate-react/0.81.0_slate@0.81.1:
+    resolution: {integrity: sha512-bwryad4EvOmc7EFKb8aGg9DWNDh3KvToaggGieIgGTTbHJYHc9ADFC3A87Ittlpd5XUVopR0MpChQ3g3ODyvqw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+      slate: '>=0.65.3'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@types/is-hotkey': 0.1.7
+      '@types/lodash': 4.14.182
+      direction: 1.0.4
+      is-hotkey: 0.1.8
+      is-plain-object: 5.0.0
+      lodash: 4.17.21
+      scroll-into-view-if-needed: 2.2.29
+      slate: 0.81.1
+      tiny-invariant: 1.0.6
+    dev: false
+
+  /slate/0.81.1:
+    resolution: {integrity: sha512-nmqphQb2qnlJpPMKsoxeWShpa+pOlKfy6XVdmlTuOtgWeGethM6SMPSRTrhh5UF/G+3/IoXhfbKF7o3iDZCbWw==}
+    dependencies:
+      immer: 9.0.15
+      is-plain-object: 5.0.0
+      tiny-warning: 1.0.3
+    dev: false
+
+  /slice-ansi/3.0.0:
+    resolution: {integrity: sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      ansi-styles: 4.3.0
+      astral-regex: 2.0.0
+      is-fullwidth-code-point: 3.0.0
+    dev: true
+
+  /slice-ansi/4.0.0:
+    resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      astral-regex: 2.0.0
+      is-fullwidth-code-point: 3.0.0
+    dev: true
+
+  /slice-ansi/5.0.0:
+    resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      ansi-styles: 6.1.0
+      is-fullwidth-code-point: 4.0.0
+    dev: true
+
+  /sm-crypto/0.3.8:
+    resolution: {integrity: sha512-BEF+VQMD5EH96ouBBVNoJ6URDkLp8zIvQY7wLh1ZPFlbt/vpXxlb35hKFb2+UDiHGGdV/rxNVqvGjhxuhLd9mA==}
+    dependencies:
+      jsbn: 1.1.0
+
+  /snake-case/3.0.4:
+    resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
+    dependencies:
+      dot-case: 3.0.4
+      tslib: 2.4.0
+    dev: true
+
+  /sockjs/0.3.24:
+    resolution: {integrity: sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==}
+    dependencies:
+      faye-websocket: 0.11.4
+      uuid: 8.3.2
+      websocket-driver: 0.7.4
+    dev: true
+
+  /sort-css-media-queries/2.0.4:
+    resolution: {integrity: sha512-PAIsEK/XupCQwitjv7XxoMvYhT7EAfyzI3hsy/MyDgTvc+Ft55ctdkctJLOy6cQejaIC+zjpUL4djFVm2ivOOw==}
+    engines: {node: '>= 6.3.0'}
+    dev: false
+
+  /source-list-map/2.0.1:
+    resolution: {integrity: sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==}
+    dev: false
+
+  /source-map-js/1.0.2:
+    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
+    engines: {node: '>=0.10.0'}
+
+  /source-map-loader/3.0.1_webpack@5.73.0:
+    resolution: {integrity: sha512-Vp1UsfyPvgujKQzi4pyDiTOnE3E4H+yHvkVRN3c/9PJmQS4CQJExvcDvaX/D+RV+xQben9HJ56jMJS3CgUeWyA==}
+    engines: {node: '>= 12.13.0'}
+    peerDependencies:
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+    dependencies:
+      abab: 2.0.6
+      iconv-lite: 0.6.3
+      source-map-js: 1.0.2
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /source-map-resolve/0.6.0:
+    resolution: {integrity: sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==}
+    deprecated: See https://github.com/lydell/source-map-resolve#deprecated
+    dependencies:
+      atob: 2.1.2
+      decode-uri-component: 0.2.0
+    dev: true
+
+  /source-map-support/0.5.13:
+    resolution: {integrity: sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==}
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+    dev: true
+
+  /source-map-support/0.5.19:
+    resolution: {integrity: sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==}
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+    dev: true
+
+  /source-map-support/0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+
+  /source-map/0.5.6:
+    resolution: {integrity: sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /source-map/0.5.7:
+    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /source-map/0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  /source-map/0.7.3:
+    resolution: {integrity: sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==}
+    engines: {node: '>= 8'}
+    dev: true
+
+  /source-map/0.7.4:
+    resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
+    engines: {node: '>= 8'}
+    dev: true
+
+  /sourcemap-codec/1.4.8:
+    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
+
+  /spdy-transport/3.0.0:
+    resolution: {integrity: sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==}
+    dependencies:
+      debug: 4.3.4
+      detect-node: 2.1.0
+      hpack.js: 2.1.6
+      obuf: 1.1.2
+      readable-stream: 3.6.0
+      wbuf: 1.7.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /spdy/4.0.2:
+    resolution: {integrity: sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      debug: 4.3.4
+      handle-thing: 2.0.1
+      http-deceiver: 1.2.7
+      select-hose: 2.0.0
+      spdy-transport: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /sprintf-js/1.0.3:
+    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
+    dev: true
+
+  /stable/0.1.8:
+    resolution: {integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==}
+    deprecated: 'Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility'
+    dev: true
+
+  /stack-generator/2.0.10:
+    resolution: {integrity: sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==}
+    dependencies:
+      stackframe: 1.3.4
+    dev: false
+
+  /stack-utils/2.0.5:
+    resolution: {integrity: sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==}
+    engines: {node: '>=10'}
+    dependencies:
+      escape-string-regexp: 2.0.0
+    dev: true
+
+  /stackframe/1.3.4:
+    resolution: {integrity: sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==}
+
+  /stacktrace-gps/3.1.2:
+    resolution: {integrity: sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==}
+    dependencies:
+      source-map: 0.5.6
+      stackframe: 1.3.4
+    dev: false
+
+  /stacktrace-js/2.0.2:
+    resolution: {integrity: sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==}
+    dependencies:
+      error-stack-parser: 2.1.4
+      stack-generator: 2.0.10
+      stacktrace-gps: 3.1.2
+    dev: false
+
+  /statuses/1.5.0:
+    resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /statuses/2.0.1:
+    resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
+  /string-argv/0.3.1:
+    resolution: {integrity: sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==}
+    engines: {node: '>=0.6.19'}
+    dev: true
+
+  /string-convert/0.2.1:
+    resolution: {integrity: sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==}
+    dev: false
+
+  /string-hash/1.1.3:
+    resolution: {integrity: sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==}
+    dev: true
+
+  /string-length/4.0.2:
+    resolution: {integrity: sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      char-regex: 1.0.2
+      strip-ansi: 6.0.1
+    dev: true
+
+  /string-replace-loader/3.1.0:
+    resolution: {integrity: sha512-5AOMUZeX5HE/ylKDnEa/KKBqvlnFmRZudSOjVJHxhoJg9QYTwl1rECx7SLR8BBH7tfxb4Rp7EM2XVfQFxIhsbQ==}
+    peerDependencies:
+      webpack: ^5
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+    dependencies:
+      loader-utils: 2.0.2
+      schema-utils: 3.1.1
+    dev: false
+
+  /string-width/1.0.2:
+    resolution: {integrity: sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      code-point-at: 1.1.0
+      is-fullwidth-code-point: 1.0.0
+      strip-ansi: 3.0.1
+    dev: true
+
+  /string-width/2.1.1:
+    resolution: {integrity: sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==}
+    engines: {node: '>=4'}
+    dependencies:
+      is-fullwidth-code-point: 2.0.0
+      strip-ansi: 4.0.0
+    dev: true
+
+  /string-width/4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  /string-width/5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.0.1
+    dev: true
+
+  /string.prototype.matchall/4.0.7:
+    resolution: {integrity: sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+      get-intrinsic: 1.1.2
+      has-symbols: 1.0.3
+      internal-slot: 1.0.3
+      regexp.prototype.flags: 1.4.3
+      side-channel: 1.0.4
+    dev: true
+
+  /string.prototype.trimend/1.0.5:
+    resolution: {integrity: sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+
+  /string.prototype.trimstart/1.0.5:
+    resolution: {integrity: sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.20.1
+
+  /string_decoder/1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+    dependencies:
+      safe-buffer: 5.1.2
+    dev: true
+
+  /string_decoder/1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+    dependencies:
+      safe-buffer: 5.2.1
+
+  /strip-ansi/3.0.1:
+    resolution: {integrity: sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      ansi-regex: 2.1.1
+    dev: true
+
+  /strip-ansi/4.0.0:
+    resolution: {integrity: sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==}
+    engines: {node: '>=4'}
+    dependencies:
+      ansi-regex: 3.0.1
+    dev: true
+
+  /strip-ansi/5.2.0:
+    resolution: {integrity: sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==}
+    engines: {node: '>=6'}
+    dependencies:
+      ansi-regex: 4.1.1
+    dev: true
+
+  /strip-ansi/6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+    dependencies:
+      ansi-regex: 5.0.1
+
+  /strip-ansi/7.0.1:
+    resolution: {integrity: sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==}
+    engines: {node: '>=12'}
+    dependencies:
+      ansi-regex: 6.0.1
+    dev: true
+
+  /strip-bom/3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /strip-bom/4.0.0:
+    resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /strip-final-newline/2.0.0:
+    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /strip-final-newline/3.0.0:
+    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /strip-json-comments/3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /style-inject/0.3.0:
+    resolution: {integrity: sha512-IezA2qp+vcdlhJaVm5SOdPPTUu0FCEqfNSli2vRuSIBbu5Nq5UvygTk/VzeCqfLz2Atj3dVII5QBKGZRZ0edzw==}
+    dev: true
+
+  /style-loader/3.3.1_webpack@5.73.0:
+    resolution: {integrity: sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==}
+    engines: {node: '>= 12.13.0'}
+    peerDependencies:
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+    dependencies:
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /style-mod/3.2.2:
+    resolution: {integrity: sha512-7X3zF+GjUSQ/opNrzuEOqM+lF+4SOkG5aWxrNw/5rwBrHytsH1Ly8/o9e6Wnqoul2lLT1Pmue63LgiE6mEZAGw==}
+    dev: false
+
+  /style-mod/4.0.0:
+    resolution: {integrity: sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==}
+    dev: false
+
+  /style9/0.13.3:
+    resolution: {integrity: sha512-mQ39P2a4o5vHzy80vdpG4JfolQkBNxjvIvQen2JkM4/EdF4KEl0vOBCobD4Dd43aW2HoOzFuEVYHmsdmJoMs2g==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/types': 7.18.7
+      '@rollup/pluginutils': 3.1.0
+      csstype: 3.1.0
+      fast-json-stable-stringify: 2.1.0
+      inline-style-expand-shorthand: 1.4.0
+      json5: 2.2.0
+      known-css-properties: 0.19.0
+      loader-utils: 1.4.0
+      mini-css-extract-plugin: 1.6.2
+      murmurhash-js: 1.0.0
+      postcss: 8.4.14
+      postcss-discard-duplicates: 5.1.0_postcss@8.4.14
+      postcss-selector-parser: 6.0.10
+      sort-css-media-queries: 2.0.4
+      webpack-sources: 2.3.1
+      webpack-virtual-modules: 0.4.4
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - webpack
+    dev: false
+
+  /style9/0.13.3_ihjcsad5a6ctfdqu3bmghkncdi:
+    resolution: {integrity: sha512-mQ39P2a4o5vHzy80vdpG4JfolQkBNxjvIvQen2JkM4/EdF4KEl0vOBCobD4Dd43aW2HoOzFuEVYHmsdmJoMs2g==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@babel/core': 7.18.6
+      '@babel/types': 7.18.7
+      '@rollup/pluginutils': 3.1.0_rollup@2.75.7
+      csstype: 3.1.0
+      fast-json-stable-stringify: 2.1.0
+      inline-style-expand-shorthand: 1.4.0
+      json5: 2.2.0
+      known-css-properties: 0.19.0
+      loader-utils: 1.4.0
+      mini-css-extract-plugin: 1.6.2_webpack@5.73.0
+      murmurhash-js: 1.0.0
+      postcss: 8.4.14
+      postcss-discard-duplicates: 5.1.0_postcss@8.4.14
+      postcss-selector-parser: 6.0.10
+      sort-css-media-queries: 2.0.4
+      webpack-sources: 2.3.1
+      webpack-virtual-modules: 0.4.4
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - webpack
+    dev: false
+
+  /styled-jsx/5.0.2_2sb3a56iojvze2npkgcccbebf4:
+    resolution: {integrity: sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      react: 18.2.0
+
+  /stylehacks/5.1.0_postcss@8.4.14:
+    resolution: {integrity: sha512-SzLmvHQTrIWfSgljkQCw2++C9+Ne91d/6Sp92I8c5uHTcy/PgeHamwITIbBW9wnFTY/3ZfSXR9HIL6Ikqmcu6Q==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      browserslist: 4.21.1
+      postcss: 8.4.14
+      postcss-selector-parser: 6.0.10
+    dev: true
+
+  /stylis/4.0.13:
+    resolution: {integrity: sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==}
+    dev: false
+
+  /stylis/4.1.1:
+    resolution: {integrity: sha512-lVrM/bNdhVX2OgBFNa2YJ9Lxj7kPzylieHd3TNjuGE0Re9JB7joL5VUKOVH1kdNNJTgGPpT8hmwIAPLaSyEVFQ==}
+    dev: false
+
+  /stylus-loader/6.2.0_hlqotudbegd4e65xhpljfitz3y:
+    resolution: {integrity: sha512-5dsDc7qVQGRoc6pvCL20eYgRUxepZ9FpeK28XhdXaIPP6kXr6nI1zAAKFQgP5OBkOfKaURp4WUpJzspg1f01Gg==}
+    engines: {node: '>= 12.13.0'}
+    peerDependencies:
+      stylus: '>=0.52.4'
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+    dependencies:
+      fast-glob: 3.2.11
+      klona: 2.0.5
+      normalize-path: 3.0.0
+      stylus: 0.55.0
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /stylus/0.55.0:
+    resolution: {integrity: sha512-MuzIIVRSbc8XxHH7FjkvWqkIcr1BvoMZoR/oFuAJDlh7VSaNJzrB4uJ38GRQa+mWjLXODAMzeDe0xi9GYbGwnw==}
+    hasBin: true
+    dependencies:
+      css: 3.0.0
+      debug: 3.1.0
+      glob: 7.2.3
+      mkdirp: 1.0.4
+      safer-buffer: 2.1.2
+      sax: 1.2.4
+      semver: 6.3.0
+      source-map: 0.7.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /supports-color/5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+    dependencies:
+      has-flag: 3.0.0
+
+  /supports-color/7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+    dependencies:
+      has-flag: 4.0.0
+    dev: true
+
+  /supports-color/8.1.1:
+    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
+    engines: {node: '>=10'}
+    dependencies:
+      has-flag: 4.0.0
+
+  /supports-hyperlinks/2.2.0:
+    resolution: {integrity: sha512-6sXEzV5+I5j8Bmq9/vUphGRM/RJNT9SCURJLjwfOg51heRtguGWDzcaBlgAzKhQa0EVNpPEKzQuBwZ8S8WaCeQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      has-flag: 4.0.0
+      supports-color: 7.2.0
+    dev: true
+
+  /supports-preserve-symlinks-flag/1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  /svg-parser/2.0.4:
+    resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==}
+    dev: true
+
+  /svgo/2.8.0:
+    resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dependencies:
+      '@trysound/sax': 0.2.0
+      commander: 7.2.0
+      css-select: 4.3.0
+      css-tree: 1.1.3
+      csso: 4.2.0
+      picocolors: 1.0.0
+      stable: 0.1.8
+    dev: true
+
+  /symbol-tree/3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+    dev: true
+
+  /tapable/1.1.3:
+    resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /tapable/2.2.1:
+    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
+    engines: {node: '>=6'}
+
+  /tar-stream/2.2.0:
+    resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      bl: 4.1.0
+      end-of-stream: 1.4.4
+      fs-constants: 1.0.0
+      inherits: 2.0.4
+      readable-stream: 3.6.0
+    dev: true
+
+  /tar/6.1.11:
+    resolution: {integrity: sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==}
+    engines: {node: '>= 10'}
+    dependencies:
+      chownr: 2.0.0
+      fs-minipass: 2.1.0
+      minipass: 3.3.4
+      minizlib: 2.1.2
+      mkdirp: 1.0.4
+      yallist: 4.0.0
+    dev: true
+
+  /temp/0.9.4:
+    resolution: {integrity: sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      mkdirp: 0.5.6
+      rimraf: 2.6.3
+    dev: true
+
+  /terminal-link/2.1.1:
+    resolution: {integrity: sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      ansi-escapes: 4.3.2
+      supports-hyperlinks: 2.2.0
+    dev: true
+
+  /terser-webpack-plugin/5.3.3_cr5ideiic2hpdwwauzasyctjxa:
+    resolution: {integrity: sha512-Fx60G5HNYknNTNQnzQ1VePRuu89ZVYWfjRAeT5rITuCY/1b08s49e5kSQwHDirKZWuoKOBRFS98EUUoZ9kLEwQ==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      '@swc/core': '*'
+      esbuild: '*'
+      uglify-js: '*'
+      webpack: ^5.1.0
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      esbuild:
+        optional: true
+      uglify-js:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.14
+      '@swc/core': 1.2.210
+      jest-worker: 27.5.1
+      schema-utils: 3.1.1
+      serialize-javascript: 6.0.0
+      terser: 5.14.1
+      webpack: 5.73.0_@swc+core@1.2.210
+
+  /terser-webpack-plugin/5.3.3_webpack@5.73.0:
+    resolution: {integrity: sha512-Fx60G5HNYknNTNQnzQ1VePRuu89ZVYWfjRAeT5rITuCY/1b08s49e5kSQwHDirKZWuoKOBRFS98EUUoZ9kLEwQ==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      '@swc/core': '*'
+      esbuild: '*'
+      uglify-js: '*'
+      webpack: ^5.1.0
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      esbuild:
+        optional: true
+      uglify-js:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.14
+      jest-worker: 27.5.1
+      schema-utils: 3.1.1
+      serialize-javascript: 6.0.0
+      terser: 5.14.1
+      webpack: 5.73.0
+    dev: true
+
+  /terser/5.14.1:
+    resolution: {integrity: sha512-+ahUAE+iheqBTDxXhTisdA8hgvbEG1hHOQ9xmNjeUJSoi6DU/gMrKNcfZjHkyY6Alnuyc+ikYJaxxfHkT3+WuQ==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      '@jridgewell/source-map': 0.3.2
+      acorn: 8.7.1
+      commander: 2.20.3
+      source-map-support: 0.5.21
+
+  /test-exclude/6.0.0:
+    resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@istanbuljs/schema': 0.1.3
+      glob: 7.2.3
+      minimatch: 3.1.2
+    dev: true
+
+  /text-table/0.2.0:
+    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
+    dev: true
+
+  /throat/6.0.1:
+    resolution: {integrity: sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==}
+    dev: true
+
+  /throttle-debounce/3.0.1:
+    resolution: {integrity: sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==}
+    engines: {node: '>=10'}
+    dev: false
+
+  /through/2.3.8:
+    resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
+    dev: true
+
+  /thunky/1.1.0:
+    resolution: {integrity: sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==}
+    dev: true
+
+  /tiny-invariant/1.0.6:
+    resolution: {integrity: sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==}
+    dev: false
+
+  /tiny-warning/1.0.3:
+    resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==}
+    dev: false
+
+  /tinycolor2/1.4.2:
+    resolution: {integrity: sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==}
+    dev: false
+
+  /tmp/0.0.33:
+    resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
+    engines: {node: '>=0.6.0'}
+    dependencies:
+      os-tmpdir: 1.0.2
+    dev: true
+
+  /tmp/0.2.1:
+    resolution: {integrity: sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==}
+    engines: {node: '>=8.17.0'}
+    dependencies:
+      rimraf: 3.0.2
+    dev: true
+
+  /tmpl/1.0.5:
+    resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==}
+    dev: true
+
+  /to-fast-properties/2.0.0:
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
+    engines: {node: '>=4'}
+
+  /to-regex-range/5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+    dependencies:
+      is-number: 7.0.0
+    dev: true
+
+  /toggle-selection/1.0.6:
+    resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
+    dev: false
+
+  /toidentifier/1.0.1:
+    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
+    engines: {node: '>=0.6'}
+    dev: true
+
+  /totalist/1.1.0:
+    resolution: {integrity: sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /tough-cookie/4.0.0:
+    resolution: {integrity: sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==}
+    engines: {node: '>=6'}
+    dependencies:
+      psl: 1.9.0
+      punycode: 2.1.1
+      universalify: 0.1.2
+    dev: true
+
+  /tr46/0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+    dev: true
+
+  /tr46/2.1.0:
+    resolution: {integrity: sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==}
+    engines: {node: '>=8'}
+    dependencies:
+      punycode: 2.1.1
+    dev: true
+
+  /tree-kill/1.2.2:
+    resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
+    hasBin: true
+    dev: true
+
+  /ts-debounce/4.0.0:
+    resolution: {integrity: sha512-+1iDGY6NmOGidq7i7xZGA4cm8DAa6fqdYcvO5Z6yBevH++Bdo9Qt/mN0TzHUgcCcKv1gmh9+W5dHqz8pMWbCbg==}
+    dev: true
+
+  /ts-easing/0.2.0:
+    resolution: {integrity: sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==}
+    dev: false
+
+  /ts-jest/28.0.5_dvf3gqad2lwurck7yyca7j3d3i:
+    resolution: {integrity: sha512-Sx9FyP9pCY7pUzQpy4FgRZf2bhHY3za576HMKJFs+OnQ9jS96Du5vNsDKkyedQkik+sEabbKAnCliv9BEsHZgQ==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    hasBin: true
+    peerDependencies:
+      '@babel/core': '>=7.0.0-beta.0 <8'
+      babel-jest: ^28.0.0
+      esbuild: '*'
+      jest: ^28.0.0
+      typescript: '>=4.3'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-jest:
+        optional: true
+      esbuild:
+        optional: true
+    dependencies:
+      '@babel/core': 7.18.6
+      babel-jest: 28.1.2_@babel+core@7.18.6
+      bs-logger: 0.2.6
+      fast-json-stable-stringify: 2.1.0
+      jest: 28.1.2_hxaxlvfys2pc3hefxwkmyo5cpq
+      jest-util: 28.1.1
+      json5: 2.2.1
+      lodash.memoize: 4.1.2
+      make-error: 1.3.6
+      semver: 7.3.7
+      typescript: 4.7.4
+      yargs-parser: 21.0.1
+    dev: true
+
+  /ts-loader/9.3.1_3o2jfq6vfqxns3sz6wn2nnc3ei:
+    resolution: {integrity: sha512-OkyShkcZTsTwyS3Kt7a4rsT/t2qvEVQuKCTg4LJmpj9fhFR7ukGdZwV6Qq3tRUkqcXtfGpPR7+hFKHCG/0d3Lw==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      typescript: '*'
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+    dependencies:
+      chalk: 4.1.0
+      enhanced-resolve: 5.10.0
+      micromatch: 4.0.5
+      semver: 7.3.7
+      typescript: 4.7.4
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /ts-node/10.8.2_y42jqzo3jkzuv3kp7opavo2xbi:
+    resolution: {integrity: sha512-LYdGnoGddf1D6v8REPtIH+5iq/gTDuZqv2/UJUU7tKjuEU8xVZorBM+buCGNjj+pGEud+sOoM4CX3/YzINpENA==}
+    hasBin: true
+    peerDependencies:
+      '@swc/core': '>=1.2.50'
+      '@swc/wasm': '>=1.2.50'
+      '@types/node': '*'
+      typescript: '>=2.7'
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      '@swc/wasm':
+        optional: true
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@swc/core': 1.2.210
+      '@tsconfig/node10': 1.0.9
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.3
+      '@types/node': 18.0.1
+      acorn: 8.7.1
+      acorn-walk: 8.2.0
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 4.7.4
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+    dev: true
+
+  /tsconfig-paths-webpack-plugin/3.5.2:
+    resolution: {integrity: sha512-EhnfjHbzm5IYI9YPNVIxx1moxMI4bpHD2e0zTXeDNQcwjjRaGepP7IhTHJkyDBG0CAOoxRfe7jCG630Ou+C6Pw==}
+    dependencies:
+      chalk: 4.1.0
+      enhanced-resolve: 5.10.0
+      tsconfig-paths: 3.14.1
+    dev: true
+
+  /tsconfig-paths/3.14.1:
+    resolution: {integrity: sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==}
+    dependencies:
+      '@types/json5': 0.0.29
+      json5: 1.0.1
+      minimist: 1.2.6
+      strip-bom: 3.0.0
+    dev: true
+
+  /tslib/1.14.1:
+    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
+    dev: true
+
+  /tslib/2.4.0:
+    resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
+
+  /tsutils/3.21.0_typescript@4.7.4:
+    resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
+    engines: {node: '>= 6'}
+    peerDependencies:
+      typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
+    dependencies:
+      tslib: 1.14.1
+      typescript: 4.7.4
+    dev: true
+
+  /turndown/7.1.1:
+    resolution: {integrity: sha512-BEkXaWH7Wh7e9bd2QumhfAXk5g34+6QUmmWx+0q6ThaVOLuLUqsnkq35HQ5SBHSaxjSfSM7US5o4lhJNH7B9MA==}
+    dependencies:
+      domino: 2.1.6
+    dev: false
+
+  /type-check/0.3.2:
+    resolution: {integrity: sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.1.2
+    dev: true
+
+  /type-check/0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.2.1
+    dev: true
+
+  /type-detect/4.0.8:
+    resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /type-fest/0.20.2:
+    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /type-fest/0.21.3:
+    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /type-is/1.6.18:
+    resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      media-typer: 0.3.0
+      mime-types: 2.1.35
+    dev: true
+
+  /typed-assert/1.0.9:
+    resolution: {integrity: sha512-KNNZtayBCtmnNmbo5mG47p1XsCyrx6iVqomjcZnec/1Y5GGARaxPs6r49RnSPeUP3YjNYiU9sQHAtY4BBvnZwg==}
+    dev: true
+
+  /typedarray-to-buffer/3.1.5:
+    resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==}
+    dependencies:
+      is-typedarray: 1.0.0
+    dev: true
+
+  /typescript/4.7.4:
+    resolution: {integrity: sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==}
+    engines: {node: '>=4.2.0'}
+    hasBin: true
+    dev: true
+
+  /ua-parser-js/1.0.2:
+    resolution: {integrity: sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg==}
+    dev: false
+
+  /unbox-primitive/1.0.2:
+    resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
+    dependencies:
+      call-bind: 1.0.2
+      has-bigints: 1.0.2
+      has-symbols: 1.0.3
+      which-boxed-primitive: 1.0.2
+
+  /unicode-canonical-property-names-ecmascript/2.0.0:
+    resolution: {integrity: sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /unicode-match-property-ecmascript/2.0.0:
+    resolution: {integrity: sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==}
+    engines: {node: '>=4'}
+    dependencies:
+      unicode-canonical-property-names-ecmascript: 2.0.0
+      unicode-property-aliases-ecmascript: 2.0.0
+    dev: true
+
+  /unicode-match-property-value-ecmascript/2.0.0:
+    resolution: {integrity: sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /unicode-property-aliases-ecmascript/2.0.0:
+    resolution: {integrity: sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /union/0.5.0:
+    resolution: {integrity: sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      qs: 6.11.0
+    dev: true
+
+  /universalify/0.1.2:
+    resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
+    engines: {node: '>= 4.0.0'}
+    dev: true
+
+  /universalify/2.0.0:
+    resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
+    engines: {node: '>= 10.0.0'}
+    dev: true
+
+  /unpipe/1.0.0:
+    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
+  /upath2/3.1.13:
+    resolution: {integrity: sha512-M88uBoqgzrkXvXrF/+oSIPsTmL21uRwGhPVJKODrl+3lXkQ5NPKrTYuSBZVa+lgPGFoI6qYyHlSKACFHO0AoNw==}
+    dependencies:
+      '@types/node': 18.0.1
+      path-is-network-drive: 1.0.15
+      path-strip-sep: 1.0.12
+      tslib: 2.4.0
+    dev: true
+
+  /update-browserslist-db/1.0.4_browserslist@4.21.1:
+    resolution: {integrity: sha512-jnmO2BEGUjsMOe/Fg9u0oczOe/ppIDZPebzccl1yDWGLFP16Pa1/RM5wEoKYPG2zstNcDuAStejyxsOuKINdGA==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.21.1
+      escalade: 3.1.1
+      picocolors: 1.0.0
+
+  /upper-case-first/2.0.2:
+    resolution: {integrity: sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==}
+    dependencies:
+      tslib: 2.4.0
+    dev: true
+
+  /upper-case/2.0.2:
+    resolution: {integrity: sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==}
+    dependencies:
+      tslib: 2.4.0
+    dev: true
+
+  /uri-js/4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+    dependencies:
+      punycode: 2.1.1
+
+  /url-join/4.0.1:
+    resolution: {integrity: sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==}
+    dev: true
+
+  /url-loader/4.1.1_webpack@5.73.0:
+    resolution: {integrity: sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      file-loader: '*'
+      webpack: ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      file-loader:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      loader-utils: 2.0.2
+      mime-types: 2.1.35
+      schema-utils: 3.1.1
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /url/0.10.3:
+    resolution: {integrity: sha512-hzSUW2q06EqL1gKM/a+obYHLIO6ct2hwPuviqTTOcfFVc61UbfJ2Q32+uGL/HCPxKqrdGB5QUwIe7UqlDgwsOQ==}
+    dependencies:
+      punycode: 1.3.2
+      querystring: 0.2.0
+    dev: false
+
+  /use-sync-external-store/1.1.0_react@18.2.0:
+    resolution: {integrity: sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      react: 18.2.0
+
+  /user-home/2.0.0:
+    resolution: {integrity: sha512-KMWqdlOcjCYdtIJpicDSFBQ8nFwS2i9sslAd6f4+CBGcU4gist2REnr2fxj2YocvJFxSF3ZOHLYLVZnUxv4BZQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      os-homedir: 1.0.2
+    dev: true
+
+  /util-deprecate/1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  /util/0.12.4:
+    resolution: {integrity: sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==}
+    dependencies:
+      inherits: 2.0.4
+      is-arguments: 1.1.1
+      is-generator-function: 1.0.10
+      is-typed-array: 1.1.9
+      safe-buffer: 5.2.1
+      which-typed-array: 1.1.8
+    dev: false
+
+  /utila/0.4.0:
+    resolution: {integrity: sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==}
+    dev: true
+
+  /utils-merge/1.0.1:
+    resolution: {integrity: sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=}
+    engines: {node: '>= 0.4.0'}
+    dev: true
+
+  /uuid/8.0.0:
+    resolution: {integrity: sha512-jOXGuXZAWdsTH7eZLtyXMqUb9EcWMGZNbL9YcGBJl4MH4nrxHmZJhEHvyLFrkxo+28uLb/NYRcStH48fnD0Vzw==}
+    hasBin: true
+    dev: false
+
+  /uuid/8.3.2:
+    resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
+    hasBin: true
+
+  /v8-compile-cache-lib/3.0.1:
+    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
+    dev: true
+
+  /v8-compile-cache/2.3.0:
+    resolution: {integrity: sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==}
+    dev: true
+
+  /v8-to-istanbul/8.1.1:
+    resolution: {integrity: sha512-FGtKtv3xIpR6BYhvgH8MI/y78oT7d8Au3ww4QIxymrCtZEh5b8gCw2siywE+puhEmuWKDtmfrvF5UlB298ut3w==}
+    engines: {node: '>=10.12.0'}
+    dependencies:
+      '@types/istanbul-lib-coverage': 2.0.4
+      convert-source-map: 1.8.0
+      source-map: 0.7.4
+    dev: true
+
+  /v8-to-istanbul/9.0.1:
+    resolution: {integrity: sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==}
+    engines: {node: '>=10.12.0'}
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.14
+      '@types/istanbul-lib-coverage': 2.0.4
+      convert-source-map: 1.8.0
+    dev: true
+
+  /vary/1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
+  /w3c-hr-time/1.0.2:
+    resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
+    dependencies:
+      browser-process-hrtime: 1.0.0
+    dev: true
+
+  /w3c-keyname/2.2.4:
+    resolution: {integrity: sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw==}
+    dev: false
+
+  /w3c-xmlserializer/2.0.0:
+    resolution: {integrity: sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==}
+    engines: {node: '>=10'}
+    dependencies:
+      xml-name-validator: 3.0.0
+    dev: true
+
+  /walker/1.0.8:
+    resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}
+    dependencies:
+      makeerror: 1.0.12
+    dev: true
+
+  /watchpack/2.4.0:
+    resolution: {integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.10
+
+  /wbuf/1.7.3:
+    resolution: {integrity: sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==}
+    dependencies:
+      minimalistic-assert: 1.0.1
+    dev: true
+
+  /wcwidth/1.0.1:
+    resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
+    dependencies:
+      defaults: 1.0.3
+    dev: true
+
+  /webidl-conversions/3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+    dev: true
+
+  /webidl-conversions/5.0.0:
+    resolution: {integrity: sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /webidl-conversions/6.1.0:
+    resolution: {integrity: sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==}
+    engines: {node: '>=10.4'}
+    dev: true
+
+  /webpack-bundle-analyzer/4.5.0:
+    resolution: {integrity: sha512-GUMZlM3SKwS8Z+CKeIFx7CVoHn3dXFcUAjT/dcZQQmfSZGvitPfMob2ipjai7ovFFqPvTqkEZ/leL4O0YOdAYQ==}
+    engines: {node: '>= 10.13.0'}
+    hasBin: true
+    dependencies:
+      acorn: 8.7.1
+      acorn-walk: 8.2.0
+      chalk: 4.1.2
+      commander: 7.2.0
+      gzip-size: 6.0.0
+      lodash: 4.17.21
+      opener: 1.5.2
+      sirv: 1.0.19
+      ws: 7.5.8
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+    dev: true
+
+  /webpack-dev-middleware/5.3.3_webpack@5.73.0:
+    resolution: {integrity: sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==}
+    engines: {node: '>= 12.13.0'}
+    peerDependencies:
+      webpack: ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+    dependencies:
+      colorette: 2.0.19
+      memfs: 3.4.7
+      mime-types: 2.1.35
+      range-parser: 1.2.1
+      schema-utils: 4.0.0
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /webpack-dev-server/4.9.3_webpack@5.73.0:
+    resolution: {integrity: sha512-3qp/eoboZG5/6QgiZ3llN8TUzkSpYg1Ko9khWX1h40MIEUNS2mDoIa8aXsPfskER+GbTvs/IJZ1QTBBhhuetSw==}
+    engines: {node: '>= 12.13.0'}
+    hasBin: true
+    peerDependencies:
+      webpack: ^4.37.0 || ^5.0.0
+      webpack-cli: '*'
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+      webpack-cli:
+        optional: true
+    dependencies:
+      '@types/bonjour': 3.5.10
+      '@types/connect-history-api-fallback': 1.3.5
+      '@types/express': 4.17.13
+      '@types/serve-index': 1.9.1
+      '@types/serve-static': 1.13.10
+      '@types/sockjs': 0.3.33
+      '@types/ws': 8.5.3
+      ansi-html-community: 0.0.8
+      bonjour-service: 1.0.13
+      chokidar: 3.5.3
+      colorette: 2.0.19
+      compression: 1.7.4
+      connect-history-api-fallback: 2.0.0
+      default-gateway: 6.0.3
+      express: 4.18.1
+      graceful-fs: 4.2.10
+      html-entities: 2.3.3
+      http-proxy-middleware: 2.0.6_@types+express@4.17.13
+      ipaddr.js: 2.0.1
+      open: 8.4.0
+      p-retry: 4.6.2
+      rimraf: 3.0.2
+      schema-utils: 4.0.0
+      selfsigned: 2.0.1
+      serve-index: 1.9.1
+      sockjs: 0.3.24
+      spdy: 4.0.2
+      webpack: 5.73.0_@swc+core@1.2.210
+      webpack-dev-middleware: 5.3.3_webpack@5.73.0
+      ws: 8.8.0
+    transitivePeerDependencies:
+      - bufferutil
+      - debug
+      - supports-color
+      - utf-8-validate
+    dev: true
+
+  /webpack-merge/5.8.0:
+    resolution: {integrity: sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==}
+    engines: {node: '>=10.0.0'}
+    dependencies:
+      clone-deep: 4.0.1
+      wildcard: 2.0.0
+    dev: true
+
+  /webpack-node-externals/3.0.0:
+    resolution: {integrity: sha512-LnL6Z3GGDPht/AigwRh2dvL9PQPFQ8skEpVrWZXLWBYmqcaojHNN0onvHzie6rq7EWKrrBfPYqNEzTJgiwEQDQ==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /webpack-sources/1.4.3:
+    resolution: {integrity: sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==}
+    dependencies:
+      source-list-map: 2.0.1
+      source-map: 0.6.1
+    dev: false
+
+  /webpack-sources/2.3.1:
+    resolution: {integrity: sha512-y9EI9AO42JjEcrTJFOYmVywVZdKVUfOvDUPsJea5GIr1JOEGFVqwlY2K098fFoIjOkDzHn2AjRvM8dsBZu+gCA==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      source-list-map: 2.0.1
+      source-map: 0.6.1
+    dev: false
+
+  /webpack-sources/3.2.3:
+    resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
+    engines: {node: '>=10.13.0'}
+
+  /webpack-subresource-integrity/5.1.0_vaqkluxv57wdoiytlozrwxzyse:
+    resolution: {integrity: sha512-sacXoX+xd8r4WKsy9MvH/q/vBtEHr86cpImXwyg74pFIpERKt6FmB8cXpeuh0ZLgclOlHI4Wcll7+R5L02xk9Q==}
+    engines: {node: '>= 12'}
+    peerDependencies:
+      html-webpack-plugin: '>= 5.0.0-beta.1 < 6'
+      webpack: ^5.12.0
+    peerDependenciesMeta:
+      html-webpack-plugin:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      html-webpack-plugin: 5.5.0_webpack@5.73.0
+      typed-assert: 1.0.9
+      webpack: 5.73.0_@swc+core@1.2.210
+    dev: true
+
+  /webpack-virtual-modules/0.4.4:
+    resolution: {integrity: sha512-h9atBP/bsZohWpHnr+2sic8Iecb60GxftXsWNLLLSqewgIsGzByd2gcIID4nXcG+3tNe4GQG3dLcff3kXupdRA==}
+    dev: false
+
+  /webpack/5.73.0:
+    resolution: {integrity: sha512-svjudQRPPa0YiOYa2lM/Gacw0r6PvxptHj4FuEKQ2kX05ZLkjbVc5MnPs6its5j7IZljnIqSVo/OsY2X0IpHGA==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    peerDependencies:
+      webpack-cli: '*'
+    peerDependenciesMeta:
+      webpack-cli:
+        optional: true
+    dependencies:
+      '@types/eslint-scope': 3.7.4
+      '@types/estree': 0.0.51
+      '@webassemblyjs/ast': 1.11.1
+      '@webassemblyjs/wasm-edit': 1.11.1
+      '@webassemblyjs/wasm-parser': 1.11.1
+      acorn: 8.7.1
+      acorn-import-assertions: 1.8.0_acorn@8.7.1
+      browserslist: 4.21.1
+      chrome-trace-event: 1.0.3
+      enhanced-resolve: 5.10.0
+      es-module-lexer: 0.9.3
+      eslint-scope: 5.1.1
+      events: 3.3.0
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.10
+      json-parse-even-better-errors: 2.3.1
+      loader-runner: 4.3.0
+      mime-types: 2.1.35
+      neo-async: 2.6.2
+      schema-utils: 3.1.1
+      tapable: 2.2.1
+      terser-webpack-plugin: 5.3.3_webpack@5.73.0
+      watchpack: 2.4.0
+      webpack-sources: 3.2.3
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - uglify-js
+    dev: true
+
+  /webpack/5.73.0_@swc+core@1.2.210:
+    resolution: {integrity: sha512-svjudQRPPa0YiOYa2lM/Gacw0r6PvxptHj4FuEKQ2kX05ZLkjbVc5MnPs6its5j7IZljnIqSVo/OsY2X0IpHGA==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    peerDependencies:
+      webpack-cli: '*'
+    peerDependenciesMeta:
+      webpack-cli:
+        optional: true
+    dependencies:
+      '@types/eslint-scope': 3.7.4
+      '@types/estree': 0.0.51
+      '@webassemblyjs/ast': 1.11.1
+      '@webassemblyjs/wasm-edit': 1.11.1
+      '@webassemblyjs/wasm-parser': 1.11.1
+      acorn: 8.7.1
+      acorn-import-assertions: 1.8.0_acorn@8.7.1
+      browserslist: 4.21.1
+      chrome-trace-event: 1.0.3
+      enhanced-resolve: 5.10.0
+      es-module-lexer: 0.9.3
+      eslint-scope: 5.1.1
+      events: 3.3.0
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.10
+      json-parse-even-better-errors: 2.3.1
+      loader-runner: 4.3.0
+      mime-types: 2.1.35
+      neo-async: 2.6.2
+      schema-utils: 3.1.1
+      tapable: 2.2.1
+      terser-webpack-plugin: 5.3.3_cr5ideiic2hpdwwauzasyctjxa
+      watchpack: 2.4.0
+      webpack-sources: 3.2.3
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - uglify-js
+
+  /websocket-driver/0.7.4:
+    resolution: {integrity: sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==}
+    engines: {node: '>=0.8.0'}
+    dependencies:
+      http-parser-js: 0.5.8
+      safe-buffer: 5.2.1
+      websocket-extensions: 0.1.4
+    dev: true
+
+  /websocket-extensions/0.1.4:
+    resolution: {integrity: sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==}
+    engines: {node: '>=0.8.0'}
+    dev: true
+
+  /whatwg-encoding/1.0.5:
+    resolution: {integrity: sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==}
+    dependencies:
+      iconv-lite: 0.4.24
+    dev: true
+
+  /whatwg-encoding/2.0.0:
+    resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
+    engines: {node: '>=12'}
+    dependencies:
+      iconv-lite: 0.6.3
+    dev: true
+
+  /whatwg-fetch/2.0.4:
+    resolution: {integrity: sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==}
+    dev: true
+
+  /whatwg-mimetype/2.3.0:
+    resolution: {integrity: sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==}
+    dev: true
+
+  /whatwg-url/5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+    dev: true
+
+  /whatwg-url/8.7.0:
+    resolution: {integrity: sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==}
+    engines: {node: '>=10'}
+    dependencies:
+      lodash: 4.17.21
+      tr46: 2.1.0
+      webidl-conversions: 6.1.0
+    dev: true
+
+  /which-boxed-primitive/1.0.2:
+    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
+    dependencies:
+      is-bigint: 1.0.4
+      is-boolean-object: 1.1.2
+      is-number-object: 1.0.7
+      is-string: 1.0.7
+      is-symbol: 1.0.4
+
+  /which-typed-array/1.1.8:
+    resolution: {integrity: sha512-Jn4e5PItbcAHyLoRDwvPj1ypu27DJbtdYXUa5zsinrUx77Uvfb0cXwwnGMTn7cjUfhhqgVQnVJCwF+7cgU7tpw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.5
+      call-bind: 1.0.2
+      es-abstract: 1.20.1
+      for-each: 0.3.3
+      has-tostringtag: 1.0.0
+      is-typed-array: 1.1.9
+    dev: false
+
+  /which/2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+    dependencies:
+      isexe: 2.0.0
+    dev: true
+
+  /wide-align/1.1.5:
+    resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==}
+    dependencies:
+      string-width: 1.0.2
+    dev: true
+
+  /wildcard/1.1.2:
+    resolution: {integrity: sha512-DXukZJxpHA8LuotRwL0pP1+rS6CS7FF2qStDDE1C7DDg2rLud2PXRMuEDYIPhgEezwnlHNL4c+N6MfMTjCGTng==}
+    dev: false
+
+  /wildcard/2.0.0:
+    resolution: {integrity: sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==}
+    dev: true
+
+  /word-wrap/1.2.3:
+    resolution: {integrity: sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /wrap-ansi/6.2.0:
+    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
+    engines: {node: '>=8'}
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+    dev: true
+
+  /wrap-ansi/7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  /wrappy/1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  /write-file-atomic/3.0.3:
+    resolution: {integrity: sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==}
+    dependencies:
+      imurmurhash: 0.1.4
+      is-typedarray: 1.0.0
+      signal-exit: 3.0.7
+      typedarray-to-buffer: 3.1.5
+    dev: true
+
+  /write-file-atomic/4.0.1:
+    resolution: {integrity: sha512-nSKUxgAbyioruk6hU87QzVbY279oYT6uiwgDoujth2ju4mJ+TZau7SQBhtbTmUyuNYTuXnSyRn66FV0+eCgcrQ==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16}
+    dependencies:
+      imurmurhash: 0.1.4
+      signal-exit: 3.0.7
+    dev: true
+
+  /ws/7.5.8:
+    resolution: {integrity: sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw==}
+    engines: {node: '>=8.3.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: ^5.0.2
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+    dev: true
+
+  /ws/8.8.0:
+    resolution: {integrity: sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: ^5.0.2
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+    dev: true
+
+  /xml-name-validator/3.0.0:
+    resolution: {integrity: sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==}
+    dev: true
+
+  /xml2js/0.4.19:
+    resolution: {integrity: sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==}
+    dependencies:
+      sax: 1.2.1
+      xmlbuilder: 9.0.7
+    dev: false
+
+  /xmlbuilder/9.0.7:
+    resolution: {integrity: sha512-7YXTQc3P2l9+0rjaUbLwMKRhtmwg1M1eDf6nag7urC7pIPYLD9W/jmzQ4ptRSUbodw5S0jfoGTflLemQibSpeQ==}
+    engines: {node: '>=4.0'}
+    dev: false
+
+  /xmlchars/2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+    dev: true
+
+  /y-indexeddb/9.0.8_yjs@13.5.39:
+    resolution: {integrity: sha512-PWjvuL/hjeGwvBI45U4Xe6j8o6RpOIxxSR8oUgd31Bas2susFeVDB088ev8Ijpxo3ZO7Q91PYE3I0eLBaNO/Lw==}
+    peerDependencies:
+      yjs: ^13.0.0
+    dependencies:
+      lib0: 0.2.51
+      yjs: 13.5.39
+    dev: true
+
+  /y-protocols/1.0.5:
+    resolution: {integrity: sha512-Wil92b7cGk712lRHDqS4T90IczF6RkcvCwAD0A2OPg+adKmOe+nOiT/N2hvpQIWS3zfjmtL4CPaH5sIW1Hkm/A==}
+    dependencies:
+      lib0: 0.2.51
+    dev: false
+
+  /y18n/5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
+  /yallist/4.0.0:
+    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+    dev: true
+
+  /yaml/1.10.2:
+    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+    engines: {node: '>= 6'}
+
+  /yaml/2.1.1:
+    resolution: {integrity: sha512-o96x3OPo8GjWeSLF+wOAbrPfhFOGY0W00GNaxCDv+9hkcDJEnev1yh8S7pgHF0ik6zc8sQLuL8hjHjJULZp8bw==}
+    engines: {node: '>= 14'}
+    dev: true
+
+  /yargs-parser/20.2.9:
+    resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /yargs-parser/21.0.1:
+    resolution: {integrity: sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg==}
+    engines: {node: '>=12'}
+
+  /yargs/16.2.0:
+    resolution: {integrity: sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==}
+    engines: {node: '>=10'}
+    dependencies:
+      cliui: 7.0.4
+      escalade: 3.1.1
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 20.2.9
+    dev: true
+
+  /yargs/17.5.1:
+    resolution: {integrity: sha512-t6YAJcxDkNX7NFYiVtKvWUz8l+PaKTLiL63mJYWR2GnHq2gjEWISzsLp9wg3aY36dY1j+gfIEL3pIF+XlJJfbA==}
+    engines: {node: '>=12'}
+    dependencies:
+      cliui: 7.0.4
+      escalade: 3.1.1
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.0.1
+
+  /yjs/13.5.39:
+    resolution: {integrity: sha512-EoVT856l301lomtjjVspgTdSRiFqZ7gNKnmVPX4/V8NHI5EYS39/MdjB9iNv0Mw1weKDZRU8NgxgerqwJ3y2xA==}
+    dependencies:
+      lib0: 0.2.51
+
+  /yn/3.1.1:
+    resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /yocto-queue/0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /zustand/3.7.2:
+    resolution: {integrity: sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      react: '>=16.8'
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dev: false
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 000000000..c7dae2aa0
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+packages:
+    - 'apps/**'
+    - 'libs/**'
diff --git a/tools/executors/figmaRes/download.js b/tools/executors/figmaRes/download.js
new file mode 100644
index 000000000..6abfda179
--- /dev/null
+++ b/tools/executors/figmaRes/download.js
@@ -0,0 +1,45 @@
+const path = require('path');
+const process = require('process');
+const downloadIcons = require('./figma');
+const patchStyles = require('./patch-styles');
+
+/**
+ * @param {*} options
+ * @param {array} options.assets
+ * @param {string} options.assets.fileId
+ * @param {string} options.assets.nodeId
+ * @param {string} options.assets.folder
+ * @param {*} context
+ * @returns
+ */
+exports['default'] = async function downloadFigmaRes(options, context) {
+    const libRoot = context.workspace.projects[context.projectName].root;
+    const token = process.env.FIGMA_TOKEN;
+    if (!token) {
+        throw new Error(
+            'FIGMA_TOKEN is not defined. Please set it in your .env.local file.'
+        );
+    }
+    await Promise.allSettled(
+        (options.assets || []).map(async (asset, index) => {
+            const fileId = asset.fileId;
+            const nodeId = asset.nodeId;
+            const folder =
+                asset.folder || `./src/icon${index > 0 ? index : ''}`;
+            if (!token || !fileId || !nodeId) {
+                const message = `Please check if token/fileId/nodeId exists (No.${index}).`;
+                console.error(message);
+                throw new Error(message);
+            }
+            await downloadIcons({
+                token,
+                fileId,
+                nodeId,
+                folder: path.resolve(libRoot, folder),
+                patchStyles,
+            });
+        })
+    );
+
+    return { success: true };
+};
diff --git a/tools/executors/figmaRes/executor.json b/tools/executors/figmaRes/executor.json
new file mode 100644
index 000000000..c1178bdcb
--- /dev/null
+++ b/tools/executors/figmaRes/executor.json
@@ -0,0 +1,9 @@
+{
+    "executors": {
+        "figmaRes": {
+            "implementation": "./download.js",
+            "schema": "./schema.json",
+            "description": "Run `figmaRes` (to download figma icons and pictures)."
+        }
+    }
+}
diff --git a/tools/executors/figmaRes/figma/api.js b/tools/executors/figmaRes/figma/api.js
new file mode 100644
index 000000000..7255fec86
--- /dev/null
+++ b/tools/executors/figmaRes/figma/api.js
@@ -0,0 +1,56 @@
+const PREFIX_URL = 'https://api.figma.com/v1/';
+async function initializeApi(token) {
+    const got = await import('got');
+    const api = got.got.extend({
+        prefixUrl: PREFIX_URL,
+        headers: {
+            'X-Figma-Token': token,
+        },
+    });
+
+    return {
+        async getChildren(fileId, nodeId) {
+            const decodedNodeId = decodeURIComponent(nodeId);
+            console.log(
+                `Fetching: ${`${PREFIX_URL}files/${fileId}/nodes?ids=${decodedNodeId}`}`
+            );
+            let data;
+            try {
+                data = await api({
+                    url: `files/${fileId}/nodes?ids=${decodedNodeId}`,
+                }).json();
+            } catch (error) {
+                console.log(`Error: ${error}`);
+            }
+
+            return data.nodes[decodedNodeId].document.children;
+        },
+
+        async getIconsUrl(fileId, iconId) {
+            console.log(
+                `Fetching: ${`${PREFIX_URL}images/${fileId}/?ids=${iconId}&format=svg`}`
+            );
+
+            let body;
+            try {
+                body = await api({
+                    url: `images/${fileId}/?ids=${iconId}&format=svg`,
+                }).json();
+            } catch (error) {
+                console.log(`Error: ${error}`);
+            }
+
+            return body.images;
+        },
+
+        async downloadIcon(iconUrl) {
+            const { body } = await got.got({
+                url: iconUrl,
+            });
+
+            return body;
+        },
+    };
+}
+
+module.exports = initializeApi;
diff --git a/tools/executors/figmaRes/figma/generateReactIcon.js b/tools/executors/figmaRes/figma/generateReactIcon.js
new file mode 100644
index 000000000..dfc481f64
--- /dev/null
+++ b/tools/executors/figmaRes/figma/generateReactIcon.js
@@ -0,0 +1,126 @@
+const svgr = require('@svgr/core');
+const util = require('./util');
+
+function getColors(colorCount) {
+    return colorCount > 0
+        ? Array(colorCount)
+              .fill(0)
+              .reduce((acc, _, index) => {
+                  acc.push({
+                      type: 'string',
+                      value: `--color-${index}`,
+                      propName: `color${index}`,
+                  });
+
+                  if (index === 0) {
+                      acc.push({
+                          type: 'string',
+                          value: `--color-${index}`,
+                          propName: 'primaryColor',
+                      });
+                  }
+
+                  if (index === 1) {
+                      acc.push({
+                          type: 'string',
+                          value: `--color-${index}`,
+                          propName: 'secondaryColor',
+                      });
+                  }
+                  return acc;
+              }, [])
+        : [
+              {
+                  type: 'string',
+                  value: 'color',
+                  propName: 'color',
+              },
+          ];
+}
+
+function getColorsInterfaceProps(colors) {
+    return colors
+        .map(color => {
+            return `${color.propName}?: ${color.type}`;
+        })
+        .join('\n    ');
+}
+
+function getRestColors(colors) {
+    return colors.map(color => color.propName).join(', ');
+}
+
+function getPropNameToColorValue(colors) {
+    const maps = colors.reduce((acc, color) => {
+        if (acc[color.value]) {
+            acc[color.value] = `${acc[color.value]} || ${color.propName}`;
+        } else {
+            acc[color.value] = color.propName;
+        }
+        return acc;
+    }, {});
+    const kvString = Object.entries(maps)
+        .map(kv => {
+            return `"${kv[0]}": ${kv[1]}`;
+        })
+        .join(', ');
+    return `{${kvString}}`;
+}
+
+/**
+ * get icon component template
+ *
+ * @param {string} name
+ * @param {string} svgCode svg original code
+ * @param {Object} customStyles custom style properties
+ */
+module.exports = async function generateReactIcon(name, svgCode, customStyles) {
+    let svgrContent = '';
+    try {
+        svgrContent = await svgr.transform(
+            svgCode,
+            {
+                icon: true,
+                typescript: true,
+            },
+            { componentName: `${name}Icon1` }
+        );
+    } catch (err) {
+        console.error(err);
+    }
+    let svgContent = svgrContent.match(/<svg [^\>]+>([\s\S]*?)<\/svg>/)[1];
+
+    let colorIdx = 0;
+    if (util.isDuotone(name)) {
+        svgContent = svgContent.replace(
+            /fill="#[A-Za-z0-9]+"/g,
+            () => `style={{fill: 'var(--color-${colorIdx++})'}}`
+        );
+    }
+    const colors = getColors(colorIdx);
+
+    return `
+import { FC } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import type { SvgIconProps } from '@mui/material';
+
+export interface ${name}IconProps extends Omit<SvgIconProps, 'color'> {
+    ${getColorsInterfaceProps(colors)}
+}
+
+export const ${name}Icon: FC<${name}IconProps> = ({ ${getRestColors(
+        colors
+    )}, style, ...props}) => {
+    const propsStyles = ${getPropNameToColorValue(colors)};
+    const customStyles = ${JSON.stringify(customStyles || {})};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        ${svgContent}
+        </SvgIcon>
+    )
+};
+`;
+};
diff --git a/tools/executors/figmaRes/figma/index.js b/tools/executors/figmaRes/figma/index.js
new file mode 100644
index 000000000..c70a25632
--- /dev/null
+++ b/tools/executors/figmaRes/figma/index.js
@@ -0,0 +1,119 @@
+const path = require('path');
+const fs = require('fs-extra');
+const { pascalCase, paramCase } = require('change-case');
+const initializeApi = require('./api');
+const svgo = require('./svgo');
+const util = require('./util');
+const generateReactIcon = require('./generateReactIcon');
+
+function getRemoveAttrs(name) {
+    if (util.isBrands(name)) {
+        return {
+            name: 'removeAttrs',
+            params: {
+                attrs: '',
+            },
+        };
+    }
+    return {
+        name: 'removeAttrs',
+        params: {
+            attrs: util.isDuotone(name) ? 'stroke' : '(stroke|fill)',
+        },
+    };
+}
+
+async function generateImportEntry(iconNodes, folder) {
+    const fileWithImportsPath = path.resolve(folder, 'index.ts');
+
+    const importsContent = iconNodes
+        .map(iconNode => {
+            const iconName = paramCase(iconNode.name);
+            if (!iconName) {
+                return `// Error: ${iconNode.name}`;
+            }
+
+            return `export * from './${iconName}/${iconName}';`;
+        })
+        .join('\n');
+
+    await fs.writeFile(
+        fileWithImportsPath,
+        `export const timestamp = ${Date.now()};\n${importsContent}`,
+        { encoding: 'utf8' }
+    );
+}
+
+function filterIcons(icons, iconsUrl) {
+    const icon_name_set = new Set();
+    const icons_filtered = icons.filter(i => {
+        if (icon_name_set.has(paramCase(i.name))) {
+            console.warn(
+                `\nWarn: There is an icon with the same name: ${i.name}`
+            );
+            return false;
+        }
+        icon_name_set.add(paramCase(i.name));
+        return iconsUrl[i.id];
+    });
+    return icons_filtered;
+}
+
+async function downloadFigmaIcons(props) {
+    const { token, fileId, nodeId, folder, patchStyles } = props;
+    await fs.ensureDir(folder);
+    await fs.emptyDir(folder);
+    const api = await initializeApi(token);
+    let icons = await api.getChildren(fileId, nodeId);
+    const iconsUrl = await api.getIconsUrl(
+        fileId,
+        icons.map(i => i.id).join(',')
+    );
+    icons = filterIcons(icons, iconsUrl);
+    const generateIcons = icons.map(async icon => {
+        const iconUrl = iconsUrl[icon.id];
+        const iconName = paramCase(icon.name);
+        let originSvg;
+        try {
+            originSvg = await api.downloadIcon(iconUrl);
+        } catch (err) {
+            console.error(err);
+        }
+        let optimizedSvg;
+        try {
+            const data = await svgo.optimize(
+                originSvg,
+                getRemoveAttrs(iconName)
+            );
+            optimizedSvg = data.data;
+        } catch (err) {
+            console.error(err);
+            console.log(iconName);
+        }
+
+        const iconFolder = path.resolve(folder, iconName);
+        const JSXContent = await generateReactIcon(
+            pascalCase(icon.name),
+            optimizedSvg,
+            patchStyles?.[iconName]
+        );
+        await Promise.all([
+            fs.outputFile(
+                path.resolve(iconFolder, `${iconName || icon.name}.svg`),
+                optimizedSvg,
+                { encoding: 'utf8' }
+            ),
+            fs.outputFile(
+                path.resolve(iconFolder, `${iconName || icon.name}.tsx`),
+                JSXContent,
+                { encoding: 'utf8', flag: '' }
+            ),
+        ]);
+    });
+    await Promise.allSettled([
+        ...generateIcons,
+        generateImportEntry(icons, folder),
+    ]);
+}
+
+module.exports = downloadFigmaIcons;
diff --git a/tools/executors/figmaRes/figma/svgo.js b/tools/executors/figmaRes/figma/svgo.js
new file mode 100644
index 000000000..35a41434e
--- /dev/null
+++ b/tools/executors/figmaRes/figma/svgo.js
@@ -0,0 +1,44 @@
+const svgo = require('svgo');
+
+module.exports = {
+    optimize(input, removeAttrs) {
+        return svgo.optimize(input, {
+            plugins: [
+                'cleanupAttrs',
+                'removeDoctype',
+                'removeXMLProcInst',
+                'removeComments',
+                'removeMetadata',
+                'removeTitle',
+                'removeDesc',
+                'removeUselessDefs',
+                'removeEditorsNSData',
+                'removeEmptyAttrs',
+                'removeHiddenElems',
+                'removeEmptyText',
+                'removeEmptyContainers',
+                'removeViewBox',
+                'cleanupEnableBackground',
+                'convertStyleToAttrs',
+                'convertColors',
+                'convertPathData',
+                'convertTransform',
+                'removeUnknownsAndDefaults',
+                'removeNonInheritableGroupAttrs',
+                'removeUselessStrokeAndFill',
+                'removeUnusedNS',
+                'cleanupIDs',
+                'cleanupNumericValues',
+                'moveElemsAttrsToGroup',
+                'moveGroupAttrsToElems',
+                'collapseGroups',
+                'removeRasterImages',
+                'mergePaths',
+                'convertShapeToPath',
+                'sortAttrs',
+                'removeDimensions',
+                removeAttrs,
+            ],
+        });
+    },
+};
diff --git a/tools/executors/figmaRes/figma/util.js b/tools/executors/figmaRes/figma/util.js
new file mode 100644
index 000000000..d325d4edb
--- /dev/null
+++ b/tools/executors/figmaRes/figma/util.js
@@ -0,0 +1,9 @@
+// Determine whether it is a two-color icon
+module.exports.isDuotone = function isDuotone(name) {
+    return /[Dd]{1}uotone$/.test(name);
+};
+
+// Determine whether it is a brand trademark
+module.exports.isBrands = function isBrands(name) {
+    return ['figma', 'youtube'].includes(name.toLowerCase());
+};
diff --git a/tools/executors/figmaRes/package.json b/tools/executors/figmaRes/package.json
new file mode 100644
index 000000000..721ff1df5
--- /dev/null
+++ b/tools/executors/figmaRes/package.json
@@ -0,0 +1,3 @@
+{
+    "executors": "./executor.json"
+}
diff --git a/tools/executors/figmaRes/patch-styles.js b/tools/executors/figmaRes/patch-styles.js
new file mode 100644
index 000000000..b6e2db6b1
--- /dev/null
+++ b/tools/executors/figmaRes/patch-styles.js
@@ -0,0 +1,41 @@
+/**
+ * Some icons may be downloaded with incorrect styles, and some styles need to be added.
+ * key is the name of the icon's kebab-case.
+ */
+const patchStyles = {
+    // add: {
+    //     fill: 'none',
+    //     fillOpacity: 0,
+    //     stroke: 'currentColor'
+    // },
+    // text: {
+    //     stroke: 'currentColor'
+    // },
+    // rectangle: {
+    //     fill: 'none',
+    //     fillOpacity: 0,
+    //     stroke: 'currentColor'
+    // },
+    // ellipse: {
+    //     fill: 'none',
+    //     fillOpacity: 0,
+    //     stroke: 'currentColor'
+    // },
+    // triangle: {
+    //     fill: 'none',
+    //     fillOpacity: 0,
+    //     stroke: 'currentColor'
+    // },
+    // polygon: {
+    //     fill: 'none',
+    //     fillOpacity: 0,
+    //     stroke: 'currentColor'
+    // },
+    // shape: {
+    //     fill: 'none',
+    //     fillOpacity: 0,
+    //     stroke: 'currentColor'
+    // }
+};
+
+module.exports = patchStyles;
diff --git a/tools/executors/figmaRes/schema.json b/tools/executors/figmaRes/schema.json
new file mode 100644
index 000000000..8832a320a
--- /dev/null
+++ b/tools/executors/figmaRes/schema.json
@@ -0,0 +1,11 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "type": "object",
+    "cli": "nx",
+    "properties": {
+        "figmaRes": {
+            "type": "string",
+            "description": "Download figma icons and pictures."
+        }
+    }
+}
diff --git a/tools/executors/svgOptimize/executor.json b/tools/executors/svgOptimize/executor.json
new file mode 100644
index 000000000..1c19a2f9c
--- /dev/null
+++ b/tools/executors/svgOptimize/executor.json
@@ -0,0 +1,9 @@
+{
+    "executors": {
+        "svgOptimize": {
+            "implementation": "./svgo.js",
+            "schema": "./schema.json",
+            "description": "Run `svgo` (to optimize svg)."
+        }
+    }
+}
diff --git a/tools/executors/svgOptimize/package.json b/tools/executors/svgOptimize/package.json
new file mode 100644
index 000000000..721ff1df5
--- /dev/null
+++ b/tools/executors/svgOptimize/package.json
@@ -0,0 +1,3 @@
+{
+    "executors": "./executor.json"
+}
diff --git a/tools/executors/svgOptimize/schema.json b/tools/executors/svgOptimize/schema.json
new file mode 100644
index 000000000..dc2fdc029
--- /dev/null
+++ b/tools/executors/svgOptimize/schema.json
@@ -0,0 +1,11 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "type": "object",
+    "cli": "nx",
+    "properties": {
+        "svgOptimize": {
+            "type": "string",
+            "description": "optimize svg"
+        }
+    }
+}
diff --git a/tools/executors/svgOptimize/svgo.js b/tools/executors/svgOptimize/svgo.js
new file mode 100644
index 000000000..6235fadb6
--- /dev/null
+++ b/tools/executors/svgOptimize/svgo.js
@@ -0,0 +1,138 @@
+const path = require('path');
+const svgo = require('svgo');
+const { readdir, readFile, writeFile, exists } = require('fs/promises');
+const { pascalCase, paramCase } = require('change-case');
+const svgr = require('@svgr/core');
+
+function isDuotone(name) {
+    return name.endsWith('Duotone');
+}
+
+async function optimizeSvg(folder) {
+    try {
+        const icons = await readdir(folder);
+        const generateIcons = icons
+            .filter(n => n.endsWith('.svg'))
+            .map(async icon => {
+                let originSvg;
+                try {
+                    originSvg = await readFile(path.resolve(folder, icon));
+                } catch (err) {
+                    console.error(err);
+                }
+                let optimizedSvg;
+                try {
+                    const data = optimize(originSvg);
+                    optimizedSvg = data.data;
+                } catch (err) {
+                    console.error(err);
+                }
+
+                const JSXContent = await getJSXContent(
+                    pascalCase(icon),
+                    optimizedSvg
+                );
+
+                const iconName = path.basename(icon, '.svg');
+                await writeFile(
+                    path.resolve(folder, `${iconName}.tsx`),
+                    JSXContent,
+                    { encoding: 'utf8', flag: '' }
+                );
+
+                console.log('Generated:', iconName);
+            });
+
+        await Promise.allSettled([
+            ...generateIcons,
+            generateImportEntry(icons, folder),
+        ]);
+    } catch (err) {
+        console.error(err);
+    }
+}
+
+function optimize(input) {
+    return svgo.optimize(input, {
+        plugins: [
+            'preset-default',
+            'prefixIds',
+            {
+                name: 'sortAttrs',
+                params: {
+                    xmlnsOrder: 'alphabetical',
+                },
+            },
+        ],
+    });
+}
+
+/**
+ * get icon component template
+ *
+ * @param {string} name
+ */
+async function getJSXContent(name, svgCode) {
+    let svgrContent = '';
+    try {
+        svgrContent = await svgr.transform(
+            svgCode,
+            {
+                icon: true,
+                typescript: true,
+            },
+            { componentName: `${name}Icon1` }
+        );
+    } catch (err) {
+        console.error(err);
+    }
+    let matcher = svgrContent.match(/<svg ([^\>]+)>([\s\S]*?)<\/svg>/);
+    return `
+import { FC } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+export const ${name}Icon: FC<SvgIconProps> = (props) => (
+    <SvgIcon  ${matcher[1]}>
+    ${matcher[2]}
+    </SvgIcon>
+);
+`;
+}
+
+async function generateImportEntry(iconNodes, folder) {
+    const fileWithImportsPath = path.resolve(folder, 'index.ts');
+
+    const importsContent = iconNodes
+        .map(iconNode => {
+            const iconName = paramCase(iconNode.name);
+            if (!iconName) {
+                return `// Error: ${iconNode.name}`;
+            }
+
+            return `export * from './${iconName}/${iconName}';`;
+        })
+        .join('\n');
+
+    await fs.writeFile(
+        fileWithImportsPath,
+        `export const timestamp = ${Date.now()};\n${importsContent}`,
+        { encoding: 'utf8' }
+    );
+}
+
+/**
+ * @param {*} options
+ * @param {array} options.assets
+ * @param {string} options.assets.folder
+ * @param {*} context
+ * @returns
+ */
+exports['default'] = async function svgo(options, context) {
+    const libRoot = context.workspace.projects[context.projectName].root;
+    await Promise.allSettled(
+        (options.assets || []).map(async (asset, index) => {
+            await optimizeSvg(path.resolve(libRoot, asset.folder));
+        })
+    );
+
+    return { success: true };
+};
diff --git a/tools/executors/tsCheck/executor.json b/tools/executors/tsCheck/executor.json
new file mode 100644
index 000000000..682ec59be
--- /dev/null
+++ b/tools/executors/tsCheck/executor.json
@@ -0,0 +1,9 @@
+{
+    "executors": {
+        "tsCheck": {
+            "implementation": "./tsCheck.js",
+            "schema": "./schema.json",
+            "description": "Runs `tsCheck`."
+        }
+    }
+}
diff --git a/tools/executors/tsCheck/package.json b/tools/executors/tsCheck/package.json
new file mode 100644
index 000000000..721ff1df5
--- /dev/null
+++ b/tools/executors/tsCheck/package.json
@@ -0,0 +1,3 @@
+{
+    "executors": "./executor.json"
+}
diff --git a/tools/executors/tsCheck/schema.json b/tools/executors/tsCheck/schema.json
new file mode 100644
index 000000000..4117d29b9
--- /dev/null
+++ b/tools/executors/tsCheck/schema.json
@@ -0,0 +1,11 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "type": "object",
+    "cli": "nx",
+    "properties": {
+        "tsCheck": {
+            "type": "string",
+            "description": "Typescript check"
+        }
+    }
+}
diff --git a/tools/executors/tsCheck/tsCheck.js b/tools/executors/tsCheck/tsCheck.js
new file mode 100644
index 000000000..1a8d4ffa8
--- /dev/null
+++ b/tools/executors/tsCheck/tsCheck.js
@@ -0,0 +1,18 @@
+const {
+    detectPackageManager,
+} = require('@nrwl/tao/src/shared/package-manager');
+const { spawn } = require('child_process');
+
+exports['default'] = async function tscExecutor(_, context) {
+    const libRoot = context.workspace.projects[context.projectName].root;
+
+    const executionCode = await new Promise(resolve => {
+        const child = spawn('pnpm', ['exec', 'tsc', '-b', libRoot], {
+            stdio: 'inherit',
+        });
+        child.on('data', args => console.log(args));
+        child.on('close', code => resolve(code));
+    });
+
+    return { success: executionCode === 0 };
+};
diff --git a/tools/generators/.gitkeep b/tools/generators/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/tools/notify.mjs b/tools/notify.mjs
new file mode 100644
index 000000000..32fe55e6d
--- /dev/null
+++ b/tools/notify.mjs
@@ -0,0 +1,16 @@
+import got from 'got';
+
+const STAGE_HOST = 'https://nightly.affine.pro/';
+if (process.env.CF_PAGES_BRANCH === 'master') {
+    const message = `Daily builds: New deployment of Ligo-Virgo version [${process.env.CF_PAGES_COMMIT_SHA}](${STAGE_HOST}), this [${STAGE_HOST}](${STAGE_HOST}) link always points to the latest version deployment, to access the old version, please go to Github to view the deployment record.`;
+    const url = `https://api.telegram.org/bot${process.env.BOT_TOKEN}/sendMessage`;
+
+    got.post(url, {
+        json: {
+            chat_id: process.env.CHAT_ID,
+            text: message,
+            parse_mode: 'Markdown',
+            disable_notification: true,
+        },
+    }).then(r => console.log(r.body));
+}
diff --git a/tools/tsconfig.tools.json b/tools/tsconfig.tools.json
new file mode 100644
index 000000000..a80907244
--- /dev/null
+++ b/tools/tsconfig.tools.json
@@ -0,0 +1,12 @@
+{
+    "extends": "../tsconfig.base.json",
+    "compilerOptions": {
+        "outDir": "../dist/out-tsc/tools",
+        "rootDir": ".",
+        "module": "commonjs",
+        "target": "es5",
+        "types": ["node"],
+        "importHelpers": false
+    },
+    "include": ["**/*.ts"]
+}
diff --git a/tsconfig.base.json b/tsconfig.base.json
new file mode 100644
index 000000000..261d74894
--- /dev/null
+++ b/tsconfig.base.json
@@ -0,0 +1,98 @@
+{
+    "compileOnSave": false,
+    "compilerOptions": {
+        "rootDir": ".",
+        "sourceMap": true,
+        "declaration": false,
+        "moduleResolution": "node",
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "importHelpers": true,
+        "target": "es2020",
+        "module": "esnext",
+        "lib": ["esnext", "dom"],
+        "skipLibCheck": true,
+        "skipDefaultLibCheck": true,
+        "baseUrl": ".",
+        "paths": {
+            "@toeverything/components/account": [
+                "libs/components/account/src/index.ts"
+            ],
+            "@toeverything/components/affine-board": [
+                "libs/components/affine-board/src/index.ts"
+            ],
+            "@toeverything/components/affine-editor": [
+                "libs/components/affine-editor/src/index.ts"
+            ],
+            "@toeverything/components/board-commands": [
+                "libs/components/board-commands/src/index.ts"
+            ],
+            "@toeverything/components/board-draw": [
+                "libs/components/board-draw/src/index.ts"
+            ],
+            "@toeverything/components/board-sessions": [
+                "libs/components/board-sessions/src/index.ts"
+            ],
+            "@toeverything/components/board-shapes": [
+                "libs/components/board-shapes/src/index.ts"
+            ],
+            "@toeverything/components/board-state": [
+                "libs/components/board-state/src/index.ts"
+            ],
+            "@toeverything/components/board-tools": [
+                "libs/components/board-tools/src/index.ts"
+            ],
+            "@toeverything/components/board-types": [
+                "libs/components/board-types/src/index.ts"
+            ],
+            "@toeverything/components/common": [
+                "libs/components/common/src/index.ts"
+            ],
+            "@toeverything/components/editor-blocks": [
+                "libs/components/editor-blocks/src/index.ts"
+            ],
+            "@toeverything/components/editor-core": [
+                "libs/components/editor-core/src/index.ts"
+            ],
+            "@toeverything/components/editor-plugins": [
+                "libs/components/editor-plugins/src/index.ts"
+            ],
+            "@toeverything/components/icons": [
+                "libs/components/icons/src/index.ts"
+            ],
+            "@toeverything/components/layout": [
+                "libs/components/layout/src/index.ts"
+            ],
+            "@toeverything/components/ui": ["libs/components/ui/src/index.ts"],
+            "@toeverything/datasource/commands": [
+                "libs/datasource/commands/src/index.ts"
+            ],
+            "@toeverything/datasource/db-service": [
+                "libs/datasource/db-service/src/index.ts"
+            ],
+            "@toeverything/datasource/feature-flags": [
+                "libs/datasource/feature-flags/src/index.ts"
+            ],
+            "@toeverything/datasource/jwt": [
+                "libs/datasource/jwt/src/index.ts"
+            ],
+            "@toeverything/datasource/jwt-rpc": [
+                "libs/datasource/jwt-rpc/src/index.ts"
+            ],
+            "@toeverything/datasource/remote-kv": [
+                "libs/datasource/remote-kv/src/index.ts"
+            ],
+            "@toeverything/datasource/state": [
+                "libs/datasource/state/src/index.ts"
+            ],
+            "@toeverything/framework/virgo": [
+                "libs/framework/virgo/src/index.ts"
+            ],
+            "@toeverything/test": ["libs/test/src/index.ts"],
+            "@toeverything/utils": ["libs/utils/src/index.ts"]
+        },
+        "noImplicitAny": true,
+        "strictNullChecks": false
+    },
+    "exclude": ["node_modules", "tmp"]
+}
diff --git a/workspace.json b/workspace.json
new file mode 100644
index 000000000..5124ddcf9
--- /dev/null
+++ b/workspace.json
@@ -0,0 +1,32 @@
+{
+    "version": 2,
+    "projects": {
+        "components-account": "libs/components/account",
+        "components-affine-board": "libs/components/affine-board",
+        "components-affine-editor": "libs/components/affine-editor",
+        "components-board-commands": "libs/components/board-commands",
+        "components-board-draw": "libs/components/board-draw",
+        "components-board-sessions": "libs/components/board-sessions",
+        "components-board-shapes": "libs/components/board-shapes",
+        "components-board-state": "libs/components/board-state",
+        "components-board-tools": "libs/components/board-tools",
+        "components-board-types": "libs/components/board-types",
+        "components-common": "libs/components/common",
+        "components-editor-blocks": "libs/components/editor-blocks",
+        "components-editor-core": "libs/components/editor-core",
+        "components-editor-plugins": "libs/components/editor-plugins",
+        "components-icons": "libs/components/icons",
+        "components-layout": "libs/components/layout",
+        "components-ui": "libs/components/ui",
+        "datasource-commands": "libs/datasource/commands",
+        "datasource-db-service": "libs/datasource/db-service",
+        "datasource-feature-flags": "libs/datasource/feature-flags",
+        "datasource-jwt": "libs/datasource/jwt",
+        "datasource-jwt-rpc": "libs/datasource/jwt-rpc",
+        "datasource-remote-kv": "libs/datasource/remote-kv",
+        "datasource-state": "libs/datasource/state",
+        "framework-virgo": "libs/framework/virgo",
+        "ligo-virgo": "apps/ligo-virgo",
+        "utils": "libs/utils"
+    }
+}