chore: bump blocksuite (#8311)

This PR contains the following updates:

| Update | Change |
|---|---|
| lockFileMaintenance | All locks refreshed |

🔧 This Pull Request updates lock files to use the latest dependency versions.

---

### Configuration

📅 **Schedule**: Branch creation - "before 4am on Monday" (UTC), Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

👻 **Immortal**: This PR will be recreated if closed unmerged. Get [config help](https://redirect.github.com/renovatebot/renovate/discussions) if that's undesired.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/toeverything/AFFiNE).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzOC43NC4xIiwidXBkYXRlZEluVmVyIjoiMzguNzQuMSIsInRhcmdldEJyYW5jaCI6ImNhbmFyeSIsImxhYmVscyI6WyJkZXBlbmRlbmNpZXMiXX0=-->

.env.template

@@ -1,5 +1,4 @@
 CHANGELOG_URL=
-ENABLE_PRELOADING=
 ENABLE_NEW_SETTING_UNSTABLE_API=
 ENABLE_CAPTCHA=
 CAPTCHA_SITE_KEY=

.github/helm/affine/templates/ingress.yaml

@@ -60,15 +60,13 @@ spec:
                 name: affine-graphql
                 port:
                   number: {{ .Values.graphql.service.port }}
-          {{- if eq .Values.global.app.buildType "canary" }}
           - path: /workspace
             pathType: Prefix
             backend:
               service:
                 name: affine-renderer
                 port:
-                  number: {{ .Values.graphql.service.port }}
-          {{- end }}
+                  number: {{ .Values.renderer.service.port }}
           - path: /
             pathType: Prefix
             backend:
@@ -76,11 +74,4 @@ spec:
                 name: affine-web
                 port:
                   number: {{ .Values.web.service.port }}
-          - path: /js/worker.(.+).js
-            pathType: ImplementationSpecific
-            backend:
-              service:
-                name: affine-web
-                port:
-                  number: {{ .Values.web.service.port }}
 {{- end }}

.github/renovate.json

@@ -26,7 +26,8 @@
       "groupName": "blocksuite",
       "matchPackagePatterns": ["^@blocksuite"],
       "excludePackageNames": ["@blocksuite/icons"],
-      "rangeStrategy": "replace"
+      "rangeStrategy": "replace",
+      "changelogUrl": "https://github.com/toeverything/blocksuite/blob/master/packages/blocks/CHANGELOG.md"
     },
     {
       "groupName": "all non-major dependencies",
@@ -39,6 +40,10 @@
       "groupName": "rust toolchain",
       "matchManagers": ["custom.regex"],
       "matchDepNames": ["rustc"]
+    },
+    {
+      "groupName": "nestjs",
+      "matchPackagePatterns": ["^@nestjs"]
     }
   ],
   "commitMessagePrefix": "chore: ",

.github/workflows/build-test.yml

@@ -296,8 +296,8 @@ jobs:
           path: ./packages/backend/native/server-native.node
           if-no-files-found: error
 
-  build-web:
-    name: Build @affine/web
+  build-electron-renderer:
+    name: Build @affine/electron renderer
     runs-on: ubuntu-latest
 
     steps:
@@ -307,9 +307,9 @@ jobs:
         with:
           electron-install: false
           full-cache: true
-      - name: Build Web
+      - name: Build Electron renderer
         # always skip cache because its fast, and cache configuration is always changing
-        run: yarn nx build @affine/web --skip-nx-cache
+        run: yarn build
         env:
           DISTRIBUTION: desktop
       - name: zip web
@@ -520,7 +520,7 @@ jobs:
               test: true,
             }
     needs:
-      - build-web
+      - build-electron-renderer
       - build-native
     steps:
       - uses: actions/checkout@v4

.github/workflows/languages-sync.yml

@@ -1,35 +0,0 @@
-name: Languages Sync
-
-on:
-  push:
-    branches: ['canary']
-    paths:
-      - 'packages/frontend/i18n/**'
-      - '.github/workflows/languages-sync.yml'
-      - '!.github/actions/setup-node/action.yml'
-  pull_request_target:
-    branches: ['canary']
-    paths:
-      - 'packages/frontend/i18n/**'
-      - '.github/workflows/languages-sync.yml'
-      - '!.github/actions/setup-node/action.yml'
-  workflow_dispatch:
-
-jobs:
-  main:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Setup Node.js
-        uses: ./.github/actions/setup-node
-      - name: Check Language Key
-        if: github.ref != 'refs/heads/canary'
-        run: yarn workspace @affine/i18n run sync-languages:check
-        env:
-          TOLGEE_API_KEY: ${{ secrets.TOLGEE_API_KEY }}
-
-      - name: Sync Languages
-        if: github.ref == 'refs/heads/canary'
-        run: yarn workspace @affine/i18n run sync-languages
-        env:
-          TOLGEE_API_KEY: ${{ secrets.TOLGEE_API_KEY }}

.github/workflows/sync-i18n.yml

@@ -0,0 +1,38 @@
+name: Sync I18n with Crowdin
+
+on:
+  push:
+  workflow_dispatch:
+
+jobs:
+  synchronize-with-crowdin:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+      pull-requests: write
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: crowdin action
+        uses: crowdin/github-action@v2
+        with:
+          upload_sources: true
+          upload_translations: true
+          download_translations: true
+          auto_approve_imported: true
+          import_eq_suggestions: true
+          export_only_approved: true
+          skip_untranslated_strings: true
+          localization_branch_name: l10n_crowdin_translations
+          create_pull_request: true
+          pull_request_title: 'New Crowdin Translations'
+          pull_request_body: 'New Crowdin translations by [Crowdin GH Action](https://github.com/crowdin/github-action)'
+          pull_request_base_branch_name: 'canary'
+          config: packages/frontend/i18n/crowdin.yml
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

.yarnrc.yml

@@ -12,4 +12,4 @@ npmPublishAccess: public
 
 npmPublishRegistry: "https://registry.npmjs.org"
 
-yarnPath: .yarn/releases/yarn-4.4.1.cjs
+yarnPath: .yarn/releases/yarn-4.5.0.cjs

Cargo.lock

@@ -107,9 +107,9 @@ dependencies = [
 
 [[package]]
 name = "anyhow"
-version = "1.0.88"
+version = "1.0.89"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4e1496f8fb1fbf272686b8d37f523dab3e4a7443300055e74cdaa449f3114356"
+checksum = "86fdf8605db99b54d3cd748a44c6d04df638eb5dafb219b135d0149bd0db01f6"
 
 [[package]]
 name = "arbitrary"
@@ -244,15 +244,15 @@ checksum = "1fd0f2584146f6f2ef48085050886acf353beff7305ebd1ae69500e27c67f64b"
 
 [[package]]
 name = "bytes"
-version = "1.7.1"
+version = "1.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8318a53db07bb3f8dca91a600466bdb3f2eaadeedfdbcf02e1accbad9271ba50"
+checksum = "428d9aa8fbc0670b7b8d6030a7fadd0f86151cae55e4dbbece15f3780a3dfaf3"
 
 [[package]]
 name = "cc"
-version = "1.1.18"
+version = "1.1.21"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b62ac837cdb5cb22e10a256099b4fc502b1dfe560cb282963a974d7abd80e476"
+checksum = "07b1695e2c7e8fc85310cde85aeaab7e3097f593c91d209d3f9df76c928100f0"
 dependencies = [
  "shlex",
 ]
@@ -729,9 +729,9 @@ dependencies = [
 
 [[package]]
 name = "iana-time-zone"
-version = "0.1.60"
+version = "0.1.61"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e7ffbb5a1b541ea2561f8c41c087286cc091e21e556a4f09a8f6cbf17b69b141"
+checksum = "235e081f3925a06703c2d0117ea8b91f042756fd6e7a6e5d901e8ca1a996b220"
 dependencies = [
  "android_system_properties",
  "core-foundation-sys",
@@ -2166,9 +2166,9 @@ checksum = "e91b56cd4cadaeb79bbf1a5645f6b4f8dc5bde8834ad5894a8db35fda9efa1fe"
 
 [[package]]
 name = "unicode-normalization"
-version = "0.1.23"
+version = "0.1.24"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a56d1686db2308d901306f92a263857ef59ea39678a5458e7cb17f01415101f5"
+checksum = "5033c97c4262335cded6d6fc3e5c18ab755e1a3dc96376350f3d8e9f009ad956"
 dependencies = [
  "tinyvec",
 ]
@@ -2181,9 +2181,9 @@ checksum = "52ea75f83c0137a9b98608359a5f1af8144876eb67bcb1ce837368e906a9f524"
 
 [[package]]
 name = "unicode-segmentation"
-version = "1.11.0"
+version = "1.12.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d4c87d22b6e3f4a18d4d40ef354e97c90fcb14dd91d7dc0aa9d8a1172ebf7202"
+checksum = "f6ccf251212114b54433ec949fd6a7841275f9ada20dddd2f29e9ceea4501493"
 
 [[package]]
 name = "unicode_categories"
@@ -2322,9 +2322,9 @@ checksum = "c62a0a307cb4a311d3a07867860911ca130c3494e8c2719593806c08bc5d0484"
 
 [[package]]
 name = "webpki-roots"
-version = "0.26.5"
+version = "0.26.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0bd24728e5af82c6c4ec1b66ac4844bdf8156257fccda846ec58b42cd0cdbe6a"
+checksum = "841c67bff177718f1d4dfefde8d8f0e78f9b6589319ba88312f567fc5841a958"
 dependencies = [
  "rustls-pki-types",
 ]

nx.json

@@ -81,9 +81,6 @@
     "test": {
       "outputs": ["{workspaceRoot}/.nyc_output"],
       "inputs": [
-        {
-          "env": "ENABLE_PRELOADING"
-        },
         {
           "env": "COVERAGE"
         }
@@ -92,9 +89,6 @@
     "test:ui": {
       "outputs": ["{workspaceRoot}/.nyc_output"],
       "inputs": [
-        {
-          "env": "ENABLE_PRELOADING"
-        },
         {
           "env": "COVERAGE"
         }
@@ -102,11 +96,7 @@
     },
     "test:coverage": {
       "outputs": ["{workspaceRoot}/.nyc_output"],
-      "inputs": [
-        {
-          "env": "ENABLE_PRELOADING"
-        }
-      ]
+      "inputs": []
     }
   }
 }

package.json

@@ -19,8 +19,8 @@
   },
   "scripts": {
     "dev": "yarn workspace @affine/cli dev",
+    "build": "yarn workspace @affine/cli bundle",
     "dev:electron": "yarn workspace @affine/electron dev",
-    "build": "yarn nx build @affine/web",
     "build:electron": "yarn nx build @affine/electron",
     "build:server-native": "yarn nx run-many -t build -p @affine/server-native",
     "start:web-static": "yarn workspace @affine/web static-server",
@@ -57,7 +57,7 @@
     "@faker-js/faker": "^9.0.0",
     "@istanbuljs/schema": "^0.1.3",
     "@magic-works/i18n-codegen": "^0.6.0",
-    "@playwright/test": "=1.47.0",
+    "@playwright/test": "=1.47.1",
     "@taplo/cli": "^0.7.0",
     "@toeverything/infra": "workspace:*",
     "@types/affine__env": "workspace:*",
@@ -66,8 +66,8 @@
     "@typescript-eslint/eslint-plugin": "^7.6.0",
     "@typescript-eslint/parser": "^7.6.0",
     "@vanilla-extract/vite-plugin": "^4.0.7",
-    "@vitest/coverage-istanbul": "2.1.0",
-    "@vitest/ui": "2.1.0",
+    "@vitest/coverage-istanbul": "2.1.1",
+    "@vitest/ui": "2.1.1",
     "cross-env": "^7.0.3",
     "electron": "^32.0.0",
     "eslint": "^8.57.0",
@@ -85,16 +85,16 @@
     "lint-staged": "^15.2.2",
     "msw": "^2.3.0",
     "nx": "^19.0.0",
-    "oxlint": "0.9.5",
+    "oxlint": "0.9.6",
     "prettier": "^3.3.3",
     "semver": "^7.6.0",
     "serve": "^14.2.1",
     "typescript": "^5.4.5",
     "unplugin-swc": "^1.4.5",
     "vite": "^5.2.8",
-    "vitest": "2.1.0"
+    "vitest": "2.1.1"
   },
-  "packageManager": "yarn@4.4.1",
+  "packageManager": "yarn@4.5.0",
   "resolutions": {
     "array-buffer-byte-length": "npm:@nolyfill/array-buffer-byte-length@latest",
     "array-includes": "npm:@nolyfill/array-includes@latest",

packages/backend/server/src/core/doc-renderer/controller.ts

@@ -1,7 +1,7 @@
 import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
 
-import { Controller, Get, Logger, Param, Req, Res } from '@nestjs/common';
+import { Controller, Get, Logger, Req, Res } from '@nestjs/common';
 import type { Request, Response } from 'express';
 import isMobile from 'is-mobile';
 
@@ -18,6 +18,7 @@ interface RenderOptions {
 }
 
 interface HtmlAssets {
+  html: string;
   css: string[];
   js: string[];
   publicPath: string;
@@ -26,6 +27,7 @@ interface HtmlAssets {
 }
 
 const defaultAssets: HtmlAssets = {
+  html: '',
   css: [],
   js: [],
   publicPath: '/',
@@ -33,7 +35,17 @@ const defaultAssets: HtmlAssets = {
   description: '',
 };
 
-@Controller('/workspace/:workspaceId/:docId')
+// TODO(@forehalo): reuse routes with frontend
+const staticPaths = new Set([
+  'all',
+  'home',
+  'search',
+  'collection',
+  'tag',
+  'trash',
+]);
+
+@Controller('/workspace')
 export class DocRendererController {
   private readonly logger = new Logger(DocRendererController.name);
   private readonly webAssets: HtmlAssets = defaultAssets;
@@ -45,36 +57,23 @@ export class DocRendererController {
     private readonly config: Config,
     private readonly url: URLHelper
   ) {
-    try {
-      const webConfigMapsPath = join(
+    this.webAssets = this.readHtmlAssets(
+      join(
         this.config.projectRoot,
-        this.config.isSelfhosted ? 'static/selfhost' : 'static',
-        'assets-manifest.json'
-      );
-      const mobileConfigMapsPath = join(
+        this.config.isSelfhosted ? 'static/selfhost' : 'static'
+      )
+    );
+    this.mobileAssets = this.readHtmlAssets(
+      join(
         this.config.projectRoot,
-        this.config.isSelfhosted ? 'static/mobile/selfhost' : 'static/mobile',
-        'assets-manifest.json'
-      );
-      this.webAssets = JSON.parse(readFileSync(webConfigMapsPath, 'utf-8'));
-      this.mobileAssets = JSON.parse(
-        readFileSync(mobileConfigMapsPath, 'utf-8')
-      );
-    } catch (e) {
-      if (this.config.node.prod) {
-        throw e;
-      }
-    }
+        this.config.isSelfhosted ? 'static/mobile/selfhost' : 'static/mobile'
+      )
+    );
   }
 
   @Public()
-  @Get()
-  async render(
-    @Req() req: Request,
-    @Res() res: Response,
-    @Param('workspaceId') workspaceId: string,
-    @Param('docId') docId: string
-  ) {
+  @Get('/*')
+  async render(@Req() req: Request, @Res() res: Response) {
     const assets: HtmlAssets =
       this.config.affine.canary &&
       isMobile({
@@ -84,14 +83,20 @@ export class DocRendererController {
         : this.webAssets;
 
     let opts: RenderOptions | null = null;
-    try {
-      opts =
-        workspaceId === docId
-          ? await this.renderWorkspace(workspaceId)
-          : await this.getPageContent(workspaceId, docId);
-      metrics.doc.counter('render').add(1);
-    } catch (e) {
-      this.logger.error('failed to render page', e);
+    // /workspace/:workspaceId/{:docId | staticPaths}
+    const [, , workspaceId, subPath, ...restPaths] = req.path.split('/');
+
+    // /:workspaceId/:docId
+    if (workspaceId && !staticPaths.has(subPath) && restPaths.length === 0) {
+      try {
+        opts =
+          workspaceId === subPath
+            ? await this.getWorkspaceContent(workspaceId)
+            : await this.getPageContent(workspaceId, subPath);
+        metrics.doc.counter('render').add(1);
+      } catch (e) {
+        this.logger.error('failed to render page', e);
+      }
     }
 
     res.setHeader('Content-Type', 'text/html');
@@ -123,7 +128,7 @@ export class DocRendererController {
     return null;
   }
 
-  private async renderWorkspace(
+  private async getWorkspaceContent(
     workspaceId: string
   ): Promise<RenderOptions | null> {
     const allowUrlPreview = await this.permission.allowUrlPreview(workspaceId);
@@ -148,6 +153,10 @@ export class DocRendererController {
   }
 
   _render(opts: RenderOptions | null, assets: HtmlAssets): string {
+    if (!opts && assets.html) {
+      return assets.html;
+    }
+
     const title = opts?.title
       ? htmlSanitize(`${opts.title} | AFFiNE`)
       : 'AFFiNE';
@@ -199,4 +208,24 @@ export class DocRendererController {
 </html>
     `;
   }
+
+  /**
+   * Should only be called at startup time
+   */
+  private readHtmlAssets(path: string): HtmlAssets {
+    const manifestPath = join(path, 'assets-manifest.json');
+    const htmlPath = join(path, 'index.html');
+
+    try {
+      const assets = JSON.parse(readFileSync(manifestPath, 'utf-8'));
+      assets.html = readFileSync(htmlPath, 'utf-8');
+      return assets;
+    } catch (e) {
+      if (this.config.node.prod) {
+        throw e;
+      } else {
+        return defaultAssets;
+      }
+    }
+  }
 }

packages/common/debug/package.json

@@ -7,7 +7,7 @@
   },
   "devDependencies": {
     "@types/debug": "^4.1.12",
-    "vitest": "2.1.0"
+    "vitest": "2.1.1"
   },
   "version": "0.16.0"
 }

packages/common/env/package.json

@@ -3,9 +3,9 @@
   "private": true,
   "type": "module",
   "devDependencies": {
-    "@blocksuite/global": "0.17.10",
-    "@blocksuite/store": "0.17.10",
-    "vitest": "2.1.0"
+    "@blocksuite/global": "0.17.13",
+    "@blocksuite/store": "0.17.13",
+    "vitest": "2.1.1"
   },
   "exports": {
     "./automation": "./src/automation.ts",

packages/common/env/src/global.ts

@@ -31,12 +31,6 @@ export type BUILD_CONFIG_TYPE = {
   imageProxyUrl: string;
   linkPreviewUrl: string;
 
-  allowLocalWorkspace: boolean;
-  enablePreloading: boolean;
-  enableNewSettingUnstableApi: boolean;
-  enableExperimentalFeature: boolean;
-  enableThemeEditor: boolean;
-
   // TODO(@forehalo): remove
   isSelfHosted: boolean;
 };

packages/common/infra/package.json

@@ -14,10 +14,10 @@
     "@affine/debug": "workspace:*",
     "@affine/env": "workspace:*",
     "@affine/templates": "workspace:*",
-    "@blocksuite/blocks": "0.17.10",
-    "@blocksuite/global": "0.17.10",
-    "@blocksuite/presets": "0.17.10",
-    "@blocksuite/store": "0.17.10",
+    "@blocksuite/blocks": "0.17.13",
+    "@blocksuite/global": "0.17.13",
+    "@blocksuite/presets": "0.17.13",
+    "@blocksuite/store": "0.17.13",
     "@datastructures-js/binary-search-tree": "^5.3.2",
     "foxact": "^0.2.33",
     "fuse.js": "^7.0.0",
@@ -34,12 +34,12 @@
   "devDependencies": {
     "@affine-test/fixtures": "workspace:*",
     "@affine/templates": "workspace:*",
-    "@blocksuite/presets": "0.17.10",
+    "@blocksuite/presets": "0.17.13",
     "@testing-library/react": "^16.0.0",
     "fake-indexeddb": "^6.0.0",
     "react": "^18.2.0",
     "rxjs": "^7.8.1",
-    "vitest": "2.1.0"
+    "vitest": "2.1.1"
   },
   "peerDependencies": {
     "@affine/templates": "*",

packages/common/infra/src/atom/settings.ts

@@ -8,20 +8,9 @@ setupGlobal();
 
 const logger = new DebugLogger('affine:settings');
 
-export type DateFormats =
-  | 'MM/dd/YYYY'
-  | 'dd/MM/YYYY'
-  | 'YYYY-MM-dd'
-  | 'YYYY.MM.dd'
-  | 'YYYY/MM/dd'
-  | 'dd-MMM-YYYY'
-  | 'dd MMMM YYYY';
-
 export type AppSetting = {
   clientBorder: boolean;
   windowFrameStyle: 'frameless' | 'NativeTitleBar';
-  dateFormat: DateFormats;
-  startWeekOnMonday: boolean;
   enableBlurBackground: boolean;
   enableNoisyBackground: boolean;
   autoCheckUpdate: boolean;
@@ -33,21 +22,9 @@ export const windowFrameStyleOptions: AppSetting['windowFrameStyle'][] = [
   'NativeTitleBar',
 ];
 
-export const dateFormatOptions: DateFormats[] = [
-  'MM/dd/YYYY',
-  'dd/MM/YYYY',
-  'YYYY-MM-dd',
-  'YYYY.MM.dd',
-  'YYYY/MM/dd',
-  'dd-MMM-YYYY',
-  'dd MMMM YYYY',
-];
-
 const appSettingBaseAtom = atomWithStorage<AppSetting>('affine-settings', {
   clientBorder: BUILD_CONFIG.isElectron && !environment.isWindows,
   windowFrameStyle: 'frameless',
-  dateFormat: dateFormatOptions[0],
-  startWeekOnMonday: false,
   enableBlurBackground: true,
   enableNoisyBackground: true,
   autoCheckUpdate: true,
@@ -64,7 +41,7 @@ const appSettingEffect = atomEffect(get => {
   if (BUILD_CONFIG.isElectron) {
     logger.debug('sync settings to electron', settings);
     // this api type in @affine/electron-api, but it is circular dependency this package, use any here
-    (window as any).apis?.updater
+    (window as any).__apis?.updater
       .setConfig({
         autoCheckUpdate: settings.autoCheckUpdate,
         autoDownloadUpdate: settings.autoDownloadUpdate,

packages/common/infra/src/initialization/index.ts

@@ -1,28 +1,45 @@
-import type { Doc } from '@blocksuite/store';
+import type { SurfaceBlockProps } from '@blocksuite/block-std/gfx';
+import {
+  NoteDisplayMode,
+  type NoteProps,
+  type ParagraphProps,
+  type RootBlockProps,
+} from '@blocksuite/blocks';
+import { type Doc, Text } from '@blocksuite/store';
 
-export function initEmptyPage(page: Doc, title?: string) {
-  page.load(() => {
-    const pageBlockId = page.addBlock(
-      'affine:page' as keyof BlockSuite.BlockModels,
-      {
-        title: new page.Text(title ?? ''),
-      }
-    );
-    page.addBlock(
-      'affine:surface' as keyof BlockSuite.BlockModels,
-      {},
-      pageBlockId
-    );
-    const noteBlockId = page.addBlock(
-      'affine:note' as keyof BlockSuite.BlockModels,
-      {},
-      pageBlockId
-    );
-    page.addBlock(
-      'affine:paragraph' as keyof BlockSuite.BlockModels,
-      {},
-      noteBlockId
-    );
-    page.history.clear();
+export interface DocProps {
+  page?: Partial<RootBlockProps>;
+  surface?: Partial<SurfaceBlockProps>;
+  note?: Partial<NoteProps>;
+  paragraph?: Partial<ParagraphProps>;
+}
+
+export function initEmptyDoc(doc: Doc, title?: string) {
+  doc.load(() => {
+    initDocFromProps(doc, {
+      page: {
+        title: new Text(title),
+      },
+    });
+  });
+}
+
+export function initDocFromProps(doc: Doc, props?: DocProps) {
+  doc.load(() => {
+    const pageBlockId = doc.addBlock(
+      'affine:page',
+      props?.page || { title: new Text('') }
+    );
+    doc.addBlock('affine:surface', props?.surface || {}, pageBlockId);
+    const noteBlockId = doc.addBlock(
+      'affine:note',
+      {
+        ...props?.note,
+        displayMode: NoteDisplayMode.DocAndEdgeless,
+      },
+      pageBlockId
+    );
+    doc.addBlock('affine:paragraph', props?.paragraph || {}, noteBlockId);
+    doc.history.clear();
   });
 }

packages/common/infra/src/modules/doc/services/docs.ts

@@ -1,8 +1,8 @@
 import { Unreachable } from '@affine/env/constant';
-import type { DocMode } from '@blocksuite/blocks';
+import { type DocMode } from '@blocksuite/blocks';
 
 import { Service } from '../../../framework';
-import { initEmptyPage } from '../../../initialization';
+import { type DocProps, initDocFromProps } from '../../../initialization';
 import { ObjectPool } from '../../../utils';
 import type { Doc } from '../entities/doc';
 import { DocRecordList } from '../entities/record-list';
@@ -54,11 +54,11 @@ export class DocsService extends Service {
   createDoc(
     options: {
       primaryMode?: DocMode;
-      title?: string;
+      docProps?: DocProps;
     } = {}
   ) {
     const doc = this.store.createBlockSuiteDoc();
-    initEmptyPage(doc, options.title);
+    initDocFromProps(doc, options.docProps);
     this.store.markDocSyncStateAsReady(doc.id);
     const docRecord = this.list.doc$(doc.id).value;
     if (!docRecord) {

packages/common/infra/src/modules/feature-flag/constant.ts

@@ -79,8 +79,8 @@ export const AFFINE_FLAGS = {
     bsFlag: 'enable_mind_map_import',
     displayName: 'Mind Map Import',
     description: 'Enables mind map import.',
-    configurable: true,
-    defaultState: false,
+    configurable: false,
+    defaultState: true,
   },
   enable_multi_view: {
     category: 'affine',
@@ -102,14 +102,14 @@ export const AFFINE_FLAGS = {
     feedbackLink:
       'https://discord.com/channels/959027316334407691/1280014319865696351/1280014319865696351',
     configurable: true,
-    defaultState: false,
+    defaultState: true,
   },
   enable_editor_settings: {
     category: 'affine',
     displayName: 'Editor Settings',
     description: 'Enables editor settings.',
-    configurable: isNotStableBuild,
-    defaultState: isNotStableBuild,
+    configurable: false,
+    defaultState: true,
   },
   enable_offline_mode: {
     category: 'affine',
@@ -118,6 +118,20 @@ export const AFFINE_FLAGS = {
     configurable: isDesktopEnvironment,
     defaultState: false,
   },
+  enable_theme_editor: {
+    category: 'affine',
+    displayName: 'Theme Editor',
+    description: 'Enables theme editor.',
+    configurable: isCanaryBuild,
+    defaultState: isCanaryBuild,
+  },
+  enable_local_workspace: {
+    category: 'affine',
+    displayName: 'Allow create local workspace',
+    description: 'Allow create local workspace.',
+    configurable: isCanaryBuild,
+    defaultState: isDesktopEnvironment || isCanaryBuild,
+  },
 } satisfies { [key in string]: FlagInfo };
 
 export type AFFINE_FLAGS = typeof AFFINE_FLAGS;

packages/frontend/admin/package.json

@@ -60,7 +60,7 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "scripts": {
-    "build": "cross-env DISTRIBUTION=admin yarn workspace @affine/cli build",
+    "build": "cross-env DISTRIBUTION=admin yarn workspace @affine/cli bundle",
     "update-shadcn": "shadcn-ui add -p src/components/ui"
   },
   "exports": {

packages/frontend/apps/electron/package.json

@@ -28,7 +28,7 @@
     "@affine/core": "workspace:*",
     "@affine/i18n": "workspace:*",
     "@affine/native": "workspace:*",
-    "@blocksuite/global": "0.17.10",
+    "@blocksuite/global": "0.17.13",
     "@electron-forge/cli": "^7.3.0",
     "@electron-forge/core": "^7.3.0",
     "@electron-forge/core-utils": "^7.3.0",
@@ -65,7 +65,7 @@
     "tree-kill": "^1.2.2",
     "ts-node": "^10.9.2",
     "uuid": "^10.0.0",
-    "vitest": "2.1.0",
+    "vitest": "2.1.1",
     "zod": "^3.22.4"
   },
   "dependencies": {

packages/frontend/apps/electron/renderer/app.tsx

@@ -1,6 +1,3 @@
-import '@affine/component/theme/global.css';
-import '@affine/component/theme/theme.css';
-
 import { AffineContext } from '@affine/component/context';
 import { GlobalLoading } from '@affine/component/global-loading';
 import { AppFallback } from '@affine/core/components/affine/app-container';

packages/frontend/apps/electron/renderer/index.tsx

@@ -1,5 +1,4 @@
 import './setup';
-import './global.css';
 
 import { appConfigProxy } from '@affine/core/components/hooks/use-app-config-storage';
 import { apis, appInfo, events } from '@affine/electron-api';

packages/frontend/apps/electron/renderer/setup.ts

@@ -1,4 +1,6 @@
-import { setupBlocksuite, setupElectron } from '@affine/core/bootstrap';
+import '@affine/component/theme';
+import './global.css';
+
+import { setupElectron } from '@affine/core/bootstrap';
 
 setupElectron();
-setupBlocksuite();

packages/frontend/apps/electron/renderer/shell/app.css.ts

@@ -25,6 +25,7 @@ export const appTabsHeader = style({
 export const fallbackRoot = style({
   width: '100%',
   height: '100%',
+  paddingTop: 52,
 });
 
 export const splitViewFallback = style({

packages/frontend/apps/electron/renderer/shell/app.tsx

@@ -0,0 +1,42 @@
+import { ThemeProvider } from '@affine/component/theme-provider';
+import { ShellAppFallback } from '@affine/core/components/affine/app-container';
+import { useAppSettingHelper } from '@affine/core/components/hooks/affine/use-app-setting-helper';
+import {
+  AppTabsHeader,
+  configureAppTabsHeaderModule,
+} from '@affine/core/modules/app-tabs-header';
+import { configureElectronStateStorageImpls } from '@affine/core/modules/storage';
+import { SplitViewFallback } from '@affine/core/modules/workbench/view/split-view/split-view';
+import {
+  configureGlobalStorageModule,
+  Framework,
+  FrameworkRoot,
+} from '@toeverything/infra';
+
+import * as styles from './app.css';
+
+const framework = new Framework();
+configureGlobalStorageModule(framework);
+configureElectronStateStorageImpls(framework);
+configureAppTabsHeaderModule(framework);
+const frameworkProvider = framework.provider();
+
+export function App() {
+  const { appSettings } = useAppSettingHelper();
+  const translucent =
+    BUILD_CONFIG.isElectron &&
+    environment.isMacOs &&
+    appSettings.enableBlurBackground;
+  return (
+    <FrameworkRoot framework={frameworkProvider}>
+      <ThemeProvider>
+        <div className={styles.root} data-translucent={translucent}>
+          <AppTabsHeader mode="shell" className={styles.appTabsHeader} />
+          <ShellAppFallback className={styles.fallbackRoot}>
+            <SplitViewFallback className={styles.splitViewFallback} />
+          </ShellAppFallback>
+        </div>
+      </ThemeProvider>
+    </FrameworkRoot>
+  );
+}

packages/frontend/apps/electron/renderer/shell/index.tsx

@@ -1,34 +1,17 @@
-import '@affine/component/theme/global.css';
-import '@affine/component/theme/theme.css';
-import '../global.css';
 import './setup';
 
-import { ThemeProvider } from '@affine/component/theme-provider';
-import { configureAppTabsHeaderModule } from '@affine/core/modules/app-tabs-header';
-import { configureElectronStateStorageImpls } from '@affine/core/modules/storage';
 import { apis, events } from '@affine/electron-api';
 import { createI18n, setUpLanguage } from '@affine/i18n';
-import {
-  configureGlobalStorageModule,
-  Framework,
-  FrameworkRoot,
-} from '@toeverything/infra';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { ShellRoot } from './shell';
+import { App } from './app';
 
-const framework = new Framework();
-configureGlobalStorageModule(framework);
-configureElectronStateStorageImpls(framework);
-configureAppTabsHeaderModule(framework);
-const frameworkProvider = framework.provider();
-
-async function loadLanguage() {
+function loadLanguage() {
   const i18n = createI18n();
   document.documentElement.lang = i18n.language;
 
-  await setUpLanguage(i18n);
+  setUpLanguage(i18n).catch(console.error);
 }
 
 async function main() {
@@ -48,7 +31,7 @@ async function main() {
   events?.ui.onFullScreen(handleFullscreen);
   events?.ui.onTabShellViewActiveChange(handleActive);
 
-  await loadLanguage();
+  loadLanguage();
   mountApp();
 }
 
@@ -59,11 +42,7 @@ function mountApp() {
   }
   createRoot(root).render(
     <StrictMode>
-      <FrameworkRoot framework={frameworkProvider}>
-        <ThemeProvider>
-          <ShellRoot />
-        </ThemeProvider>
-      </FrameworkRoot>
+      <App />
     </StrictMode>
   );
 }

packages/frontend/apps/electron/renderer/shell/setup.ts

@@ -1,3 +1,6 @@
+import '@affine/component/theme';
+import '../global.css';
+
 import { setupElectron } from '@affine/core/bootstrap';
 
 setupElectron();

packages/frontend/apps/electron/renderer/shell/shell.tsx

@@ -1,22 +0,0 @@
-import { ShellAppFallback } from '@affine/core/components/affine/app-container';
-import { useAppSettingHelper } from '@affine/core/components/hooks/affine/use-app-setting-helper';
-import { AppTabsHeader } from '@affine/core/modules/app-tabs-header';
-import { SplitViewFallback } from '@affine/core/modules/workbench/view/split-view/split-view';
-
-import * as styles from './shell.css';
-
-export function ShellRoot() {
-  const { appSettings } = useAppSettingHelper();
-  const translucent =
-    BUILD_CONFIG.isElectron &&
-    environment.isMacOs &&
-    appSettings.enableBlurBackground;
-  return (
-    <div className={styles.root} data-translucent={translucent}>
-      <AppTabsHeader mode="shell" className={styles.appTabsHeader} />
-      <ShellAppFallback className={styles.fallbackRoot}>
-        <SplitViewFallback className={styles.splitViewFallback} />
-      </ShellAppFallback>
-    </div>
-  );
-}

packages/frontend/apps/electron/scripts/common.ts

@@ -16,23 +16,27 @@ export const mode = (process.env.NODE_ENV =
   process.env.NODE_ENV || 'development');
 
 export const config = (): BuildOptions => {
-  const define: Record<string, string> = {};
-
-  define['REPLACE_ME_BUILD_ENV'] = `"${process.env.BUILD_TYPE ?? 'stable'}"`;
-
-  define['BUILD_CONFIG'] = JSON.stringify(
-    getBuildConfig({
-      channel: (process.env.BUILD_TYPE as any) ?? 'canary',
-      distribution: 'desktop',
-      mode:
-        process.env.NODE_ENV === 'production' ? 'production' : 'development',
-      static: false,
-    })
-  );
-
-  if (process.env.GITHUB_SHA) {
-    define['process.env.GITHUB_SHA'] = `"${process.env.GITHUB_SHA}"`;
-  }
+  const define = {
+    'process.env.GITHUB_SHA': process.env.GITHUB_SHA,
+    'process.env.SENTRY_RELEASE': process.env.SENTRY_RELEASE,
+    'process.env.SENTRY_DSN': process.env.SENTRY_DSN,
+    REPLACE_ME_BUILD_ENV: process.env.BUILD_TYPE ?? 'stable',
+    ...Object.entries(
+      getBuildConfig({
+        channel: (process.env.BUILD_TYPE as any) ?? 'canary',
+        distribution: 'desktop',
+        mode:
+          process.env.NODE_ENV === 'production' ? 'production' : 'development',
+        static: false,
+      })
+    ).reduce(
+      (def, [key, val]) => {
+        def[`BUILD_CONFIG.${key}`] = val;
+        return def;
+      },
+      {} as Record<string, any>
+    ),
+  };
 
   const plugins: Plugin[] = [];
 
@@ -88,7 +92,17 @@ export const config = (): BuildOptions => {
     loader: {
       '.node': 'copy',
     },
-    define,
+    define: Object.entries(define).reduce(
+      (def, [key, val]) => {
+        def[key] =
+          JSON.stringify(val) ??
+          String(
+            val
+          ) /* JSON.stringify(undefined) == undefined, but we need 'undefined' */;
+        return def;
+      },
+      {} as Record<string, string>
+    ),
     assetNames: '[name]',
     treeShaking: true,
     sourcemap: 'linked',

packages/frontend/apps/electron/scripts/generate-assets.ts

@@ -47,12 +47,9 @@ process.env.DISTRIBUTION = 'desktop';
 
 const cwd = repoRootDir;
 
-const { SKIP_NX_CACHE } = process.env;
-const nxFlag = SKIP_NX_CACHE ? '--skip-nx-cache' : '';
-
 // step 1: build web dist
 if (!process.env.SKIP_WEB_BUILD) {
-  spawnSync('yarn', ['nx', 'build', '@affine/web', nxFlag], {
+  spawnSync('yarn', ['build'], {
     stdio: 'inherit',
     env: process.env,
     cwd,

packages/frontend/apps/electron/scripts/make-env.ts

@@ -7,7 +7,7 @@ const ReleaseTypeSchema = z.enum(['stable', 'beta', 'canary', 'internal']);
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
-const REPO_ROOT = path.resolve(__dirname, '..', '..', '..', '..');
+const REPO_ROOT = path.resolve(__dirname, '..', '..', '..', '..', '..');
 const ROOT = path.resolve(__dirname, '..');
 
 const envBuildType = (process.env.BUILD_TYPE || 'canary').trim().toLowerCase();

packages/frontend/apps/electron/src/main/windows-manager/main-window.ts

@@ -258,9 +258,7 @@ export async function openUrlInHiddenWindow(urlObj: URL) {
   });
 
   if (BUILD_CONFIG.debug) {
-    win.webContents.openDevTools({
-      mode: 'detach',
-    });
+    win.webContents.openDevTools();
   }
 
   win.on('close', e => {

packages/frontend/apps/electron/src/main/windows-manager/tab-views.ts

@@ -817,9 +817,7 @@ export class WebContentViewsManager {
 
       view.webContents.loadURL(shellViewUrl).catch(err => logger.error(err));
       if (isDev) {
-        view.webContents.openDevTools({
-          mode: 'detach',
-        });
+        view.webContents.openDevTools();
       }
     }
 
@@ -1003,17 +1001,13 @@ export const showDevTools = (id?: string) => {
   getCustomThemeWindow()
     .then(w => {
       if (w && w.isFocused()) {
-        w.webContents.openDevTools({
-          mode: 'detach',
-        });
+        w.webContents.openDevTools();
       } else {
         const view = id
           ? WebContentViewsManager.instance.getViewById(id)
           : WebContentViewsManager.instance.activeWorkbenchView;
         if (view) {
-          view.webContents.openDevTools({
-            mode: 'detach',
-          });
+          view.webContents.openDevTools();
         }
       }
     })

packages/frontend/apps/mobile/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "browser": "src/index.tsx",
   "scripts": {
-    "build": "cross-env DISTRIBUTION=mobile yarn workspace @affine/cli build",
+    "build": "cross-env DISTRIBUTION=mobile yarn workspace @affine/cli bundle",
     "dev": "yarn workspace @affine/cli dev",
     "static-server": "cross-env DISTRIBUTION=mobile yarn workspace @affine/cli dev --static"
   },
@@ -13,7 +13,7 @@
     "@affine/component": "workspace:*",
     "@affine/core": "workspace:*",
     "@affine/i18n": "workspace:*",
-    "@blocksuite/blocks": "0.17.10",
+    "@blocksuite/blocks": "0.17.13",
     "@blocksuite/icons": "^2.1.67",
     "@sentry/react": "^8.0.0",
     "react": "^18.2.0",

packages/frontend/apps/mobile/src/app.tsx

@@ -1,7 +1,3 @@
-import '@affine/component/theme/global.css';
-import '@affine/component/theme/theme.css';
-import '@affine/core/mobile/styles/mobile.css';
-
 import { AffineContext } from '@affine/component/context';
 import { AppFallback } from '@affine/core/components/affine/app-container';
 import { Telemetry } from '@affine/core/components/telemetry';

packages/frontend/apps/mobile/src/setup.ts

@@ -1,4 +1,6 @@
-import { setupBlocksuite, setupBrowser } from '@affine/core/bootstrap';
+import '@affine/component/theme';
+import '@affine/core/mobile/styles/mobile.css';
+
+import { setupBrowser } from '@affine/core/bootstrap';
 
 await setupBrowser();
-setupBlocksuite();

packages/frontend/apps/web/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "browser": "src/index.tsx",
   "scripts": {
-    "build": "cross-env DISTRIBUTION=web yarn workspace @affine/cli build",
+    "build": "cross-env DISTRIBUTION=web yarn workspace @affine/cli bundle",
     "dev": "yarn workspace @affine/cli dev",
     "static-server": "yarn workspace @affine/cli dev --static"
   },

packages/frontend/apps/web/src/app.tsx

@@ -1,6 +1,3 @@
-import '@affine/component/theme/global.css';
-import '@affine/component/theme/theme.css';
-
 import { AffineContext } from '@affine/component/context';
 import { GlobalLoading } from '@affine/component/global-loading';
 import { AppFallback } from '@affine/core/components/affine/app-container';

packages/frontend/apps/web/src/setup.ts

@@ -1,4 +1,5 @@
-import { setupBlocksuite, setupBrowser } from '@affine/core/bootstrap';
+import '@affine/component/theme';
+
+import { setupBrowser } from '@affine/core/bootstrap';
 
 await setupBrowser();
-setupBlocksuite();

packages/frontend/component/.storybook/preview.css.ts

@@ -1,4 +1,3 @@
-import { darkCssVariables, lightCssVariables } from '@toeverything/theme';
 import { globalStyle } from '@vanilla-extract/css';
 
 globalStyle('*', {
@@ -14,14 +13,6 @@ globalStyle('body', {
   backgroundColor: 'var(--affine-background-primary-color)',
 });
 
-globalStyle('html', {
-  vars: lightCssVariables,
-});
-
-globalStyle('html[data-theme="dark"]', {
-  vars: darkCssVariables,
-});
-
 globalStyle('.docs-story', {
   backgroundColor: 'var(--affine-background-primary-color)',
 });

packages/frontend/component/.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import './polyfill';
-import '../src/theme/global.css';
+import '../src/theme';
 import './preview.css';
 import { ThemeProvider } from 'next-themes';
 import type { ComponentType } from 'react';

packages/frontend/component/package.json

@@ -4,7 +4,7 @@
   "main": "./src/index.ts",
   "exports": {
     ".": "./src/index.ts",
-    "./theme/*": "./src/theme/*",
+    "./theme": "./src/theme/index.ts",
     "./ui/*": "./src/ui/*/index.ts",
     "./*": "./src/components/*/index.tsx"
   },
@@ -63,7 +63,7 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@blocksuite/global": "0.17.10",
+    "@blocksuite/global": "0.17.13",
     "@blocksuite/icons": "2.1.67",
     "@chromatic-com/storybook": "^2.0.0",
     "@storybook/addon-essentials": "^8.2.9",
@@ -80,7 +80,7 @@
     "typescript": "^5.4.5",
     "unplugin-swc": "^1.5.1",
     "vite": "^5.2.8",
-    "vitest": "2.1.0"
+    "vitest": "2.1.1"
   },
   "version": "0.16.0"
 }

packages/frontend/component/src/components/resize-panel/resize-panel.css.ts

@@ -50,7 +50,7 @@ export const resizeHandleContainer = style({
   right: resizeHandleOffsetVar,
   top: resizeHandleVerticalPadding,
   bottom: resizeHandleVerticalPadding,
-  width: 16,
+  width: 8,
   zIndex: '1',
   transform: 'translateX(50%)',
   backgroundColor: 'transparent',

packages/frontend/component/src/theme/global.css

@@ -1,6 +1,3 @@
-@import './fonts.css';
-@import '@toeverything/theme/style.css';
-
 * {
   -webkit-overflow-scrolling: touch;
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

packages/frontend/component/src/theme/index.ts

@@ -0,0 +1,4 @@
+import '@toeverything/theme/style.css';
+import './fonts.css';
+import './global.css';
+import './theme.css';

packages/frontend/component/src/theme/theme.css.ts

@@ -6,9 +6,3 @@ globalStyle('body', {
   fontFamily: cssVar('fontFamily'),
   fontSize: cssVar('fontBase'),
 });
-
-if (process.env.NODE_ENV === 'development') {
-  globalStyle('.undefined', {
-    border: '5px solid red !important',
-  });
-}

packages/frontend/component/src/ui/notification/styles.css.ts

@@ -61,17 +61,6 @@ export const actionButton = style({
   position: 'relative',
   background: 'transparent',
   border: 'none',
-  '::before': {
-    content: '""',
-    position: 'absolute',
-    inset: 0,
-    borderRadius: 'inherit',
-    backgroundColor: cssVar('black'),
-    opacity: 0.04,
-  },
-  ':hover': {
-    boxShadow: 'none !important',
-  },
 });
 export const closeButton = style({
   selectors: {

packages/frontend/core/package.json

@@ -16,13 +16,13 @@
     "@affine/i18n": "workspace:*",
     "@affine/templates": "workspace:*",
     "@affine/track": "workspace:*",
-    "@blocksuite/block-std": "0.17.10",
-    "@blocksuite/blocks": "0.17.10",
-    "@blocksuite/global": "0.17.10",
+    "@blocksuite/block-std": "0.17.13",
+    "@blocksuite/blocks": "0.17.13",
+    "@blocksuite/global": "0.17.13",
     "@blocksuite/icons": "2.1.67",
-    "@blocksuite/inline": "0.17.10",
-    "@blocksuite/presets": "0.17.10",
-    "@blocksuite/store": "0.17.10",
+    "@blocksuite/inline": "0.17.13",
+    "@blocksuite/presets": "0.17.13",
+    "@blocksuite/store": "0.17.13",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
@@ -91,6 +91,6 @@
     "@vanilla-extract/css": "^1.14.2",
     "fake-indexeddb": "^6.0.0",
     "lodash-es": "^4.17.21",
-    "vitest": "2.1.0"
+    "vitest": "2.1.1"
   }
 }

packages/frontend/core/src/blocksuite/presets/ai/_common/components/ask-ai-button.ts

@@ -1,16 +1,16 @@
 import './ask-ai-panel';
 
-import { type EditorHost, WithDisposable } from '@blocksuite/block-std';
+import { type EditorHost } from '@blocksuite/block-std';
 import {
   type AIItemGroupConfig,
   AIStarIcon,
   EdgelessRootService,
 } from '@blocksuite/blocks';
 import { createLitPortal, HoverController } from '@blocksuite/blocks';
-import { assertExists } from '@blocksuite/global/utils';
+import { assertExists, WithDisposable } from '@blocksuite/global/utils';
 import { flip, offset } from '@floating-ui/dom';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
@@ -38,7 +38,6 @@ export type AskAIButtonOptions = {
   panelWidth?: number;
 };
 
-@customElement('ask-ai-button')
 export class AskAIButton extends WithDisposable(LitElement) {
   get _edgeless() {
     const rootService = getRootService(this.host);

packages/frontend/core/src/blocksuite/presets/ai/_common/components/ask-ai-panel.ts

@@ -1,16 +1,16 @@
-import { type EditorHost, WithDisposable } from '@blocksuite/block-std';
+import { type EditorHost } from '@blocksuite/block-std';
 import {
   type AIItemGroupConfig,
   EdgelessRootService,
   scrollbarStyle,
 } from '@blocksuite/blocks';
+import { WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { getRootService } from '../../utils/selection-utils';
 
-@customElement('ask-ai-panel')
 export class AskAIPanel extends WithDisposable(LitElement) {
   static override styles = css`
     :host {

packages/frontend/core/src/blocksuite/presets/ai/_common/components/chat-action-list.ts

@@ -5,14 +5,13 @@ import type {
 } from '@blocksuite/block-std';
 import { type ImageSelection, NotificationProvider } from '@blocksuite/blocks';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 
 import { insertBelow } from '../../utils/editor-actions';
 import type { ChatAction } from '../chat-actions-handle';
 
-@customElement('chat-action-list')
 export class ChatActionList extends LitElement {
   static override styles = css`
     .actions-container {

packages/frontend/core/src/blocksuite/presets/ai/_common/components/copy-more.ts

@@ -3,15 +3,14 @@ import type {
   EditorHost,
   TextSelection,
 } from '@blocksuite/block-std';
-import { WithDisposable } from '@blocksuite/block-std';
 import {
   createButtonPopper,
   NotificationProvider,
   Tooltip,
 } from '@blocksuite/blocks';
-import { noop } from '@blocksuite/global/utils';
+import { noop, WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement, nothing, type PropertyValues } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
 import { type ChatAction } from '../../_common/chat-actions-handle';
@@ -20,7 +19,6 @@ import { copyText } from '../../utils/editor-actions';
 
 noop(Tooltip);
 
-@customElement('chat-copy-more')
 export class ChatCopyMore extends WithDisposable(LitElement) {
   static override styles = css`
     .copy-more {

packages/frontend/core/src/blocksuite/presets/ai/_common/markdown-utils.ts

@@ -1,75 +0,0 @@
-import type { EditorHost } from '@blocksuite/block-std';
-import { MarkdownAdapter, titleMiddleware } from '@blocksuite/blocks';
-import { assertExists } from '@blocksuite/global/utils';
-import { type BlockModel, Job, type Slice } from '@blocksuite/store';
-
-export async function getMarkdownFromSlice(host: EditorHost, slice: Slice) {
-  const job = new Job({
-    collection: host.std.doc.collection,
-    middlewares: [titleMiddleware],
-  });
-  const markdownAdapter = new MarkdownAdapter(job);
-  const markdown = await markdownAdapter.fromSlice(slice);
-  if (!markdown) {
-    return '';
-  }
-
-  return markdown.file;
-}
-export const markdownToSnapshot = async (
-  markdown: string,
-  host: EditorHost
-) => {
-  const job = new Job({ collection: host.std.doc.collection });
-  const markdownAdapter = new MarkdownAdapter(job);
-  const { blockVersions, workspaceVersion, pageVersion } =
-    host.std.doc.collection.meta;
-  if (!blockVersions || !workspaceVersion || !pageVersion)
-    throw new Error(
-      'Need blockVersions, workspaceVersion, pageVersion meta information to get slice'
-    );
-
-  const payload = {
-    file: markdown,
-    assets: job.assetsManager,
-    blockVersions,
-    pageVersion,
-    workspaceVersion,
-    workspaceId: host.std.doc.collection.id,
-    pageId: host.std.doc.id,
-  };
-
-  const snapshot = await markdownAdapter.toSliceSnapshot(payload);
-  assertExists(snapshot, 'import markdown failed, expected to get a snapshot');
-
-  return {
-    snapshot,
-    job,
-  };
-};
-export async function insertFromMarkdown(
-  host: EditorHost,
-  markdown: string,
-  parent?: string,
-  index?: number
-) {
-  const { snapshot, job } = await markdownToSnapshot(markdown, host);
-
-  const snapshots = snapshot.content[0].children;
-
-  const models: BlockModel[] = [];
-  for (let i = 0; i < snapshots.length; i++) {
-    const blockSnapshot = snapshots[i];
-    const model = await job.snapshotToBlock(
-      blockSnapshot,
-      host.std.doc,
-      parent,
-      (index ?? 0) + i
-    );
-    if (model) {
-      models.push(model);
-    }
-  }
-
-  return models;
-}

packages/frontend/core/src/blocksuite/presets/ai/_common/selection-utils.ts

@@ -1,120 +0,0 @@
-import type { EditorHost } from '@blocksuite/block-std';
-import {
-  BlocksUtils,
-  EdgelessRootService,
-  type FrameBlockModel,
-  type ImageBlockModel,
-  type SurfaceBlockComponent,
-} from '@blocksuite/blocks';
-import { assertExists } from '@blocksuite/global/utils';
-import { Slice } from '@blocksuite/store';
-
-import { getMarkdownFromSlice } from './markdown-utils';
-
-export const getRootService = (host: EditorHost) => {
-  return host.std.getService('affine:page');
-};
-
-export function getEdgelessRootFromEditor(editor: EditorHost) {
-  const edgelessRoot = editor.getElementsByTagName('affine-edgeless-root')[0];
-  if (!edgelessRoot) {
-    alert('Please switch to edgeless mode');
-    throw new Error('Please open switch to edgeless mode');
-  }
-  return edgelessRoot;
-}
-export function getEdgelessService(editor: EditorHost) {
-  const rootService = editor.std.getService('affine:page');
-  if (rootService instanceof EdgelessRootService) {
-    return rootService;
-  }
-  alert('Please switch to edgeless mode');
-  throw new Error('Please open switch to edgeless mode');
-}
-
-export async function selectedToCanvas(editor: EditorHost) {
-  const edgelessRoot = getEdgelessRootFromEditor(editor);
-  const { notes, frames, shapes, images } = BlocksUtils.splitElements(
-    edgelessRoot.service.selection.selectedElements
-  );
-  if (notes.length + frames.length + images.length + shapes.length === 0) {
-    return;
-  }
-  const canvas = await edgelessRoot.clipboardController.toCanvas(
-    [...notes, ...frames, ...images],
-    shapes
-  );
-  if (!canvas) {
-    return;
-  }
-  return canvas;
-}
-
-export async function frameToCanvas(
-  frame: FrameBlockModel,
-  editor: EditorHost
-) {
-  const edgelessRoot = getEdgelessRootFromEditor(editor);
-  const { notes, frames, shapes, images } = BlocksUtils.splitElements(
-    edgelessRoot.service.frame.getElementsInFrameBound(frame, true)
-  );
-  if (notes.length + frames.length + images.length + shapes.length === 0) {
-    return;
-  }
-  const canvas = await edgelessRoot.clipboardController.toCanvas(
-    [...notes, ...frames, ...images],
-    shapes
-  );
-  if (!canvas) {
-    return;
-  }
-  return canvas;
-}
-
-export async function selectedToPng(editor: EditorHost) {
-  return (await selectedToCanvas(editor))?.toDataURL('image/png');
-}
-
-export async function getSelectedTextContent(editorHost: EditorHost) {
-  const slice = Slice.fromModels(
-    editorHost.std.doc,
-    getRootService(editorHost)?.selectedModels ?? []
-  );
-  return getMarkdownFromSlice(editorHost, slice);
-}
-
-export const stopPropagation = (e: Event) => {
-  e.stopPropagation();
-};
-
-export function getSurfaceElementFromEditor(editor: EditorHost) {
-  const { doc } = editor;
-  const surfaceModel = doc.getBlockByFlavour('affine:surface')[0];
-  assertExists(surfaceModel);
-
-  const surfaceId = surfaceModel.id;
-  const surfaceElement = editor.querySelector(
-    `affine-surface[data-block-id="${surfaceId}"]`
-  ) as SurfaceBlockComponent;
-  assertExists(surfaceElement);
-
-  return surfaceElement;
-}
-
-export const getFirstImageInFrame = (
-  frame: FrameBlockModel,
-  editor: EditorHost
-) => {
-  const edgelessRoot = getEdgelessRootFromEditor(editor);
-  const elements = edgelessRoot.service.frame.getElementsInFrameBound(
-    frame,
-    false
-  );
-  const image = elements.find(ele => {
-    if (!BlocksUtils.isCanvasElement(ele)) {
-      return ele.flavour === 'affine:image';
-    }
-    return false;
-  }) as ImageBlockModel | undefined;
-  return image?.id;
-};

packages/frontend/core/src/blocksuite/presets/ai/actions/edgeless-response.ts

@@ -1,4 +1,3 @@
-import type { MindmapElementModel } from '@blocksuite/affine-block-surface';
 import type { EditorHost } from '@blocksuite/block-std';
 import type {
   AffineAIPanelWidget,
@@ -6,6 +5,7 @@ import type {
   EdgelessCopilotWidget,
   EdgelessElementToolbarWidget,
   EdgelessRootService,
+  MindmapElementModel,
   ShapeElementModel,
   SurfaceBlockModel,
 } from '@blocksuite/blocks';
@@ -19,6 +19,7 @@ import {
   ImageBlockModel,
   InsertBelowIcon,
   LightLoadingIcon,
+  MindmapUtils,
   NoteDisplayMode,
   ResetIcon,
   TelemetryProvider,
@@ -28,8 +29,6 @@ import { html, type TemplateResult } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { AIPenIcon, ChatWithAIIcon } from '../_common/icons';
-import { insertFromMarkdown } from '../_common/markdown-utils';
-import { getSurfaceElementFromEditor } from '../_common/selection-utils';
 import { getAIPanel } from '../ai-panel';
 import { AIProvider } from '../provider';
 import { reportResponse } from '../utils/action-reporter';
@@ -40,10 +39,12 @@ import {
 } from '../utils/edgeless';
 import { preprocessHtml } from '../utils/html';
 import { fetchImageToFile } from '../utils/image';
+import { insertFromMarkdown } from '../utils/markdown-utils';
 import {
   getCopilotSelectedElems,
   getEdgelessRootFromEditor,
   getEdgelessService,
+  getSurfaceElementFromEditor,
 } from '../utils/selection-utils';
 import { EXCLUDING_INSERT_ACTIONS, generatingStages } from './consts';
 import type { CtxRecord } from './types';
@@ -192,7 +193,7 @@ function insertBelow(
   parentId: string,
   index = 0
 ) {
-  insertFromMarkdown(host, markdown, parentId, index)
+  insertFromMarkdown(host, markdown, host.doc, parentId, index)
     .then(() => {
       const service = getService(host);
 
@@ -363,7 +364,7 @@ export const responses: {
 
     if (data.node.children) {
       data.node.children.forEach(childTree => {
-        mindmap.addTree(elements[0].id, childTree);
+        MindmapUtils.addTree(mindmap, elements[0].id, childTree);
       });
 
       const subtree = mindmap.getNode(elements[0].id);

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/actions/action-wrapper.ts

@@ -1,7 +1,7 @@
 import type { EditorHost } from '@blocksuite/block-std';
-import { WithDisposable } from '@blocksuite/block-std';
+import { WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 
 import {
   ActionIcon,
@@ -59,7 +59,6 @@ const icons: Record<string, TemplateResult<1>> = {
   'Convert to sticker': AIImageIcon,
 };
 
-@customElement('action-wrapper')
 export class ActionWrapper extends WithDisposable(LitElement) {
   static override styles = css`
     .action-name {

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/actions/chat-text.ts

@@ -1,13 +1,13 @@
 import './action-wrapper';
 
 import type { EditorHost } from '@blocksuite/block-std';
-import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
+import { ShadowlessElement } from '@blocksuite/block-std';
+import { WithDisposable } from '@blocksuite/global/utils';
 import { html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 
 import { createTextRenderer } from '../../messages/text';
 import { renderImages } from '../components/images';
-@customElement('chat-text')
 export class ChatText extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor host!: EditorHost;

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/actions/image-to-text.ts

@@ -1,15 +1,15 @@
 import './action-wrapper';
 
 import type { EditorHost } from '@blocksuite/block-std';
-import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
+import { ShadowlessElement } from '@blocksuite/block-std';
+import { WithDisposable } from '@blocksuite/global/utils';
 import { html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import type { ChatAction } from '../chat-context';
 import { renderImages } from '../components/images';
 
-@customElement('action-image-to-text')
 export class ActionImageToText extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor item!: ChatAction;

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/actions/image.ts

@@ -1,15 +1,15 @@
 import './action-wrapper';
 
 import type { EditorHost } from '@blocksuite/block-std';
-import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
+import { ShadowlessElement } from '@blocksuite/block-std';
+import { WithDisposable } from '@blocksuite/global/utils';
 import { html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import type { ChatAction } from '../chat-context';
 import { renderImages } from '../components/images';
 
-@customElement('action-image')
 export class ActionImage extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor item!: ChatAction;

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/actions/make-real.ts

@@ -1,15 +1,15 @@
 import './action-wrapper';
 
 import type { EditorHost } from '@blocksuite/block-std';
-import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
+import { ShadowlessElement } from '@blocksuite/block-std';
+import { WithDisposable } from '@blocksuite/global/utils';
 import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { createIframeRenderer } from '../../messages/wrapper';
 import type { ChatAction } from '../chat-context';
 
-@customElement('action-make-real')
 export class ActionMakeReal extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor item!: ChatAction;

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/actions/mindmap.ts

@@ -1,18 +1,17 @@
 import './action-wrapper';
 
 import type { EditorHost } from '@blocksuite/block-std';
-import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
+import { ShadowlessElement } from '@blocksuite/block-std';
 import { MiniMindmapPreview } from '@blocksuite/blocks';
-import { noop } from '@blocksuite/global/utils';
+import { noop, WithDisposable } from '@blocksuite/global/utils';
 import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import type { ChatAction } from '../chat-context';
 
 noop(MiniMindmapPreview);
 
-@customElement('action-mindmap')
 export class ActionMindmap extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor item!: ChatAction;

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/actions/slides.ts

@@ -2,14 +2,14 @@ import './action-wrapper';
 import '../../messages/slides-renderer';
 
 import type { EditorHost } from '@blocksuite/block-std';
-import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
+import { ShadowlessElement } from '@blocksuite/block-std';
+import { WithDisposable } from '@blocksuite/global/utils';
 import { html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import type { ChatAction } from '../chat-context';
 
-@customElement('action-slides')
 export class ActionSlides extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor item!: ChatAction;

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/actions/text.ts

@@ -1,15 +1,14 @@
 import './action-wrapper';
 
 import type { EditorHost } from '@blocksuite/block-std';
-import { WithDisposable } from '@blocksuite/block-std';
+import { WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { createTextRenderer } from '../../messages/text';
 import type { ChatAction } from '../chat-context';
 
-@customElement('action-text')
 export class ActionText extends WithDisposable(LitElement) {
   static override styles = css`
     .original-text {

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/ai-loading.ts

@@ -1,10 +1,9 @@
-import { WithDisposable } from '@blocksuite/block-std';
+import { WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 
 import { AIStarIconWithAnimation } from '../_common/icons';
 
-@customElement('ai-loading')
 export class AILoading extends WithDisposable(LitElement) {
   static override styles = css`
     :host {

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/chat-cards.ts

@@ -1,11 +1,11 @@
 import type { EditorHost } from '@blocksuite/block-std';
-import { WithDisposable } from '@blocksuite/block-std';
 import {
   type ImageBlockModel,
   isInsideEdgelessEditor,
   type NoteBlockModel,
   NoteDisplayMode,
 } from '@blocksuite/blocks';
+import { WithDisposable } from '@blocksuite/global/utils';
 import type { BlockModel } from '@blocksuite/store';
 import {
   css,
@@ -15,7 +15,7 @@ import {
   type PropertyValues,
   type TemplateResult,
 } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
@@ -94,7 +94,6 @@ type Card = CardText | CardImage | CardBlock;
 
 const MAX_CARDS = 3;
 
-@customElement('chat-cards')
 export class ChatCards extends WithDisposable(LitElement) {
   static override styles = css`
     :host {

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/chat-panel-input.ts

@@ -1,9 +1,8 @@
 import type { EditorHost } from '@blocksuite/block-std';
-import { WithDisposable } from '@blocksuite/block-std';
 import { type AIError, openFileOrFiles } from '@blocksuite/blocks';
-import { assertExists } from '@blocksuite/global/utils';
+import { assertExists, WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
 import {
@@ -25,7 +24,6 @@ function getFirstTwoLines(text: string) {
   return lines.slice(0, 2);
 }
 
-@customElement('chat-panel-input')
 export class ChatPanelInput extends WithDisposable(LitElement) {
   static override styles = css`
     .chat-panel-input {

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/chat-panel-messages.ts

@@ -14,7 +14,7 @@ import '../_common/components/chat-action-list';
 import '../_common/components/copy-more';
 
 import type { BaseSelection, EditorHost } from '@blocksuite/block-std';
-import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
+import { ShadowlessElement } from '@blocksuite/block-std';
 import {
   type AIError,
   DocModeProvider,
@@ -22,8 +22,9 @@ import {
   PaymentRequiredError,
   UnauthorizedError,
 } from '@blocksuite/blocks';
+import { WithDisposable } from '@blocksuite/global/utils';
 import { css, html, nothing, type PropertyValues } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
@@ -38,7 +39,6 @@ import type { ChatContextValue, ChatItem, ChatMessage } from './chat-context';
 import { HISTORY_IMAGE_ACTIONS } from './const';
 import { AIPreloadConfig } from './preload-config';
 
-@customElement('chat-panel-messages')
 export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
   static override styles = css`
     chat-panel-messages {

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/index.ts

@@ -2,12 +2,12 @@ import './chat-panel-input';
 import './chat-panel-messages';
 
 import type { EditorHost } from '@blocksuite/block-std';
-import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
+import { ShadowlessElement } from '@blocksuite/block-std';
 import { NotificationProvider } from '@blocksuite/blocks';
-import { debounce } from '@blocksuite/global/utils';
+import { debounce, WithDisposable } from '@blocksuite/global/utils';
 import type { Doc } from '@blocksuite/store';
 import { css, html, type PropertyValues } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { createRef, type Ref, ref } from 'lit/directives/ref.js';
 
 import { AIHelpIcon, SmallHintIcon } from '../_common/icons';
@@ -19,7 +19,6 @@ import {
 import type { ChatAction, ChatContextValue, ChatItem } from './chat-context';
 import type { ChatPanelMessages } from './chat-panel-messages';
 
-@customElement('chat-panel')
 export class ChatPanel extends WithDisposable(ShadowlessElement) {
   static override styles = css`
     chat-panel {

packages/frontend/core/src/blocksuite/presets/ai/index.ts

@@ -6,3 +6,4 @@ export * from './entries/index';
 export * from './messages/index';
 export { AIChatBlockPeekViewTemplate } from './peek-view/chat-block-peek-view';
 export * from './provider';
+export * from './setup';

packages/frontend/core/src/blocksuite/presets/ai/messages/error.ts

@@ -1,18 +1,18 @@
-import { type EditorHost, WithDisposable } from '@blocksuite/block-std';
+import { type EditorHost } from '@blocksuite/block-std';
 import {
   type AIError,
   PaymentRequiredError,
   UnauthorizedError,
 } from '@blocksuite/blocks';
+import { WithDisposable } from '@blocksuite/global/utils';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { ErrorTipIcon } from '../_common/icons';
 import { AIProvider } from '../provider';
 
-@customElement('ai-error-wrapper')
-class AIErrorWrapper extends WithDisposable(LitElement) {
+export class AIErrorWrapper extends WithDisposable(LitElement) {
   @property({ attribute: false })
   accessor text!: TemplateResult<1>;
 

packages/frontend/core/src/blocksuite/presets/ai/messages/slides-renderer.ts

@@ -1,14 +1,14 @@
 import { BlockStdScope, type EditorHost } from '@blocksuite/block-std';
-import { WithDisposable } from '@blocksuite/block-std';
 import {
   type AffineAIPanelWidgetConfig,
   EdgelessEditorBlockSpecs,
 } from '@blocksuite/blocks';
 import { AffineSchemas } from '@blocksuite/blocks/schemas';
+import { WithDisposable } from '@blocksuite/global/utils';
 import type { Doc } from '@blocksuite/store';
 import { DocCollection, Schema } from '@blocksuite/store';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { createRef, type Ref, ref } from 'lit/directives/ref.js';
 
 import { getAIPanel } from '../ai-panel';
@@ -48,7 +48,6 @@ export const createSlidesRenderer: (
   };
 };
 
-@customElement('ai-slides-renderer')
 export class AISlidesRenderer extends WithDisposable(LitElement) {
   static override styles = css``;
 

packages/frontend/core/src/blocksuite/presets/ai/messages/text.ts

@@ -1,8 +1,4 @@
-import {
-  BlockStdScope,
-  type EditorHost,
-  WithDisposable,
-} from '@blocksuite/block-std';
+import { BlockStdScope, type EditorHost } from '@blocksuite/block-std';
 import {
   type AffineAIPanelState,
   type AffineAIPanelWidgetConfig,
@@ -13,9 +9,10 @@ import {
   ListBlockComponent,
   ParagraphBlockComponent,
 } from '@blocksuite/blocks';
+import { WithDisposable } from '@blocksuite/global/utils';
 import { BlockViewType, type Doc, type Query } from '@blocksuite/store';
 import { css, html, LitElement, type PropertyValues } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { keyed } from 'lit/directives/keyed.js';
 
@@ -75,7 +72,6 @@ type TextRendererOptions = {
   customHeading?: boolean;
 };
 
-@customElement('ai-answer-text')
 export class AIAnswerText extends WithDisposable(LitElement) {
   static override styles = css`
     .ai-answer-text-editor.affine-page-viewport {

packages/frontend/core/src/blocksuite/presets/ai/messages/wrapper.ts

@@ -1,7 +1,7 @@
 import type { EditorHost } from '@blocksuite/block-std';
 import type { AffineAIPanelWidgetConfig } from '@blocksuite/blocks';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 
 import { getAIPanel } from '../ai-panel';
 import { preprocessHtml } from '../utils/html';
@@ -10,7 +10,6 @@ type AIAnswerWrapperOptions = {
   height: number;
 };
 
-@customElement('ai-answer-wrapper')
 export class AIAnswerWrapper extends LitElement {
   static override styles = css`
     :host {

packages/frontend/core/src/blocksuite/presets/ai/peek-view/chat-block-input.ts

@@ -2,7 +2,7 @@ import type { EditorHost } from '@blocksuite/block-std';
 import { type AIError, openFileOrFiles } from '@blocksuite/blocks';
 import { type ChatMessage } from '@blocksuite/presets';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 
@@ -20,7 +20,6 @@ import type { ChatContext } from './types';
 
 const MaximumImageCount = 8;
 
-@customElement('chat-block-input')
 export class ChatBlockInput extends LitElement {
   static override styles = css`
     :host {

packages/frontend/core/src/blocksuite/presets/ai/peek-view/chat-block-peek-view.ts

@@ -19,7 +19,7 @@ import {
   ChatMessagesSchema,
 } from '@blocksuite/presets';
 import { html, LitElement, nothing } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 
@@ -35,7 +35,6 @@ import { PeekViewStyles } from './styles';
 import type { ChatContext } from './types';
 import { calcChildBound } from './utils';
 
-@customElement('ai-chat-block-peek-view')
 export class AIChatBlockPeekView extends LitElement {
   static override styles = PeekViewStyles;
 

packages/frontend/core/src/blocksuite/presets/ai/peek-view/date-time.ts

@@ -1,8 +1,7 @@
 import { i18nTime } from '@affine/i18n';
 import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 
-@customElement('date-time')
 export class DateTime extends LitElement {
   static override styles = css`
     :host {

packages/frontend/core/src/blocksuite/presets/ai/setup.ts

@@ -0,0 +1,50 @@
+import { AskAIButton } from './_common/components/ask-ai-button';
+import { AskAIPanel } from './_common/components/ask-ai-panel';
+import { ChatActionList } from './_common/components/chat-action-list';
+import { ChatCopyMore } from './_common/components/copy-more';
+import { ChatPanel } from './chat-panel';
+import { ActionWrapper } from './chat-panel/actions/action-wrapper';
+import { ChatText } from './chat-panel/actions/chat-text';
+import { ActionImage } from './chat-panel/actions/image';
+import { ActionImageToText } from './chat-panel/actions/image-to-text';
+import { ActionMakeReal } from './chat-panel/actions/make-real';
+import { ActionMindmap } from './chat-panel/actions/mindmap';
+import { ActionSlides } from './chat-panel/actions/slides';
+import { ActionText } from './chat-panel/actions/text';
+import { AILoading } from './chat-panel/ai-loading';
+import { ChatCards } from './chat-panel/chat-cards';
+import { ChatPanelInput } from './chat-panel/chat-panel-input';
+import { ChatPanelMessages } from './chat-panel/chat-panel-messages';
+import { AIAnswerText, AIAnswerWrapper } from './messages';
+import { AIErrorWrapper } from './messages/error';
+import { AISlidesRenderer } from './messages/slides-renderer';
+import { ChatBlockInput } from './peek-view/chat-block-input';
+import { AIChatBlockPeekView } from './peek-view/chat-block-peek-view';
+import { DateTime } from './peek-view/date-time';
+
+export function registerAICustomComponents() {
+  customElements.define('ask-ai-button', AskAIButton);
+  customElements.define('ask-ai-panel', AskAIPanel);
+  customElements.define('chat-action-list', ChatActionList);
+  customElements.define('chat-copy-more', ChatCopyMore);
+  customElements.define('action-wrapper', ActionWrapper);
+  customElements.define('chat-text', ChatText);
+  customElements.define('action-image-to-text', ActionImageToText);
+  customElements.define('action-image', ActionImage);
+  customElements.define('action-make-real', ActionMakeReal);
+  customElements.define('action-mindmap', ActionMindmap);
+  customElements.define('action-slides', ActionSlides);
+  customElements.define('action-text', ActionText);
+  customElements.define('ai-loading', AILoading);
+  customElements.define('chat-cards', ChatCards);
+  customElements.define('chat-panel-input', ChatPanelInput);
+  customElements.define('chat-panel-messages', ChatPanelMessages);
+  customElements.define('chat-panel', ChatPanel);
+  customElements.define('ai-error-wrapper', AIErrorWrapper);
+  customElements.define('ai-slides-renderer', AISlidesRenderer);
+  customElements.define('ai-answer-wrapper', AIAnswerWrapper);
+  customElements.define('ai-answer-text', AIAnswerText);
+  customElements.define('chat-block-input', ChatBlockInput);
+  customElements.define('ai-chat-block-peek-view', AIChatBlockPeekView);
+  customElements.define('date-time', DateTime);
+}

packages/frontend/core/src/blocksuite/presets/ai/slides/index.ts

@@ -2,8 +2,8 @@ import type { EditorHost } from '@blocksuite/block-std';
 import type { EdgelessRootService } from '@blocksuite/blocks';
 import type { BlockSnapshot } from '@blocksuite/store';
 
-import { markdownToSnapshot } from '../_common/markdown-utils';
-import { getSurfaceElementFromEditor } from '../_common/selection-utils';
+import { markdownToSnapshot } from '../utils/markdown-utils';
+import { getSurfaceElementFromEditor } from '../utils/selection-utils';
 import {
   basicTheme,
   type PPTDoc,

packages/frontend/core/src/bootstrap/blocksuite.ts

@@ -1,13 +0,0 @@
-import { builtInTemplates as builtInEdgelessTemplates } from '@affine/templates/edgeless';
-import { builtInTemplates as builtInStickersTemplates } from '@affine/templates/stickers';
-import type { TemplateManager } from '@blocksuite/blocks';
-import { EdgelessTemplatePanel } from '@blocksuite/blocks';
-
-export function setupBlocksuite() {
-  EdgelessTemplatePanel.templates.extend(
-    builtInStickersTemplates as TemplateManager
-  );
-  EdgelessTemplatePanel.templates.extend(
-    builtInEdgelessTemplates as TemplateManager
-  );
-}

packages/frontend/core/src/bootstrap/index.ts

@@ -12,5 +12,3 @@ export async function setupBrowser() {
   await polyfillBrowser();
   setupEnvironment();
 }
-
-export { setupBlocksuite } from './blocksuite';

packages/frontend/core/src/components/affine/affine-error-boundary/affine-error-fallback.css.ts

@@ -2,4 +2,14 @@ import { style } from '@vanilla-extract/css';
 export const viewport = style({
   height: '100%',
   width: '100%',
+  position: 'relative',
+});
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
+  width: '100%',
 });

packages/frontend/core/src/components/affine/affine-error-boundary/affine-error-fallback.tsx

@@ -1,9 +1,12 @@
+import { useI18n } from '@affine/i18n';
 import { getCurrentStore } from '@toeverything/infra';
 import { Provider } from 'jotai/react';
 import type { FC } from 'react';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
+import { useRouteError } from 'react-router-dom';
 
 import * as styles from './affine-error-fallback.css';
+import { ErrorDetail } from './error-basic/error-detail';
 import type { FallbackProps } from './error-basic/fallback-creator';
 import { ERROR_REFLECT_KEY } from './error-basic/fallback-creator';
 import { DumpInfo } from './error-basic/info-logger';
@@ -44,3 +47,25 @@ export const AffineErrorFallback: FC<AffineErrorFallbackProps> = props => {
     </div>
   );
 };
+
+export const AffineErrorComponent = () => {
+  const error = useRouteError() as Error;
+
+  const t = useI18n();
+
+  const reloadPage = useCallback(() => {
+    document.location.reload();
+  }, []);
+
+  return (
+    <ErrorDetail
+      title={t['com.affine.error.unexpected-error.title']()}
+      resetError={reloadPage}
+      buttonText={t['com.affine.error.reload']()}
+      description={
+        'message' in (error as Error) ? (error as Error).message : `${error}`
+      }
+      error={error as Error}
+    />
+  );
+};

packages/frontend/core/src/components/affine/affine-error-boundary/error-assets/404-status.assets.svg

@@ -1,25 +0,0 @@
-<svg width="402" height="178" viewBox="0 0 402 178" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M93.7434 129.308H1L71.7965 15.1021V167.142" stroke="#121212" stroke-width="2" stroke-linecap="square" stroke-linejoin="bevel" />
-  <ellipse cx="71.4426" cy="14.7483" rx="3.89381" ry="3.88938" fill="#121212" />
-  <ellipse cx="93.3894" cy="129.308" rx="3.89381" ry="3.88938" fill="#121212" />
-  <path d="M140.357 27.1235L264.717 151.342" stroke="#E3E2E4" />
-  <rect x="140.392" y="27.1582" width="124.291" height="124.149" stroke="#E3E2E4" />
-  <path d="M264.339 89.4652C264.895 85.8242 265.183 82.0954 265.183 78.2995C265.183 37.7024 232.235 4.79199 191.592 4.79199C150.948 4.79199 118 37.7024 118 78.2995C118 118.897 150.948 151.807 191.592 151.807C195.23 151.807 198.807 151.543 202.304 151.034" stroke="#E3E2E4" />
-  <path d="M202.304 150.964C205.949 151.519 209.682 151.807 213.483 151.807C254.126 151.807 287.074 118.897 287.074 78.2995C287.074 37.7024 254.126 4.79199 213.483 4.79199C172.839 4.79199 139.892 37.7024 139.892 78.2995C139.892 82.0955 140.18 85.8242 140.735 89.4652" stroke="#E3E2E4" />
-  <path d="M140.2 89.4652C139.69 92.9584 139.426 96.5312 139.426 100.166C139.426 140.763 172.374 173.673 213.017 173.673C253.66 173.673 286.608 140.763 286.608 100.166C286.608 59.5686 253.66 26.6582 213.017 26.6582C209.378 26.6582 205.801 26.922 202.304 27.4314" stroke="#E3E2E4" />
-  <path d="M202.304 27.4314C198.807 26.922 195.23 26.6582 191.592 26.6582C150.948 26.6582 118 59.5686 118 100.166C118 140.763 150.948 173.673 191.592 173.673C232.235 173.673 265.183 140.763 265.183 100.166C265.183 96.5312 264.919 92.9584 264.409 89.4652" stroke="#E3E2E4" />
-  <path d="M264.717 27.1235L140.357 151.342" stroke="#E3E2E4" />
-  <path d="M139.892 89.4653H264.717" stroke="#E3E2E4" />
-  <path d="M202.304 26.6582V151.807" stroke="#E3E2E4" />
-  <ellipse cx="264.717" cy="89.4651" rx="3.72614" ry="3.7219" fill="#121212" />
-  <ellipse cx="264.717" cy="27.1233" rx="3.72614" ry="3.7219" fill="#121212" />
-  <ellipse cx="264.717" cy="151.807" rx="3.72614" ry="3.7219" fill="#121212" />
-  <ellipse cx="140.357" cy="151.807" rx="3.72613" ry="3.7219" fill="#121212" />
-  <ellipse cx="202.304" cy="89.4651" rx="3.72613" ry="3.7219" fill="#121212" />
-  <ellipse cx="202.304" cy="27.1233" rx="3.72613" ry="3.7219" fill="#121212" />
-  <ellipse cx="140.357" cy="89.4651" rx="3.72613" ry="3.7219" fill="#121212" />
-  <ellipse cx="140.357" cy="27.1233" rx="3.72613" ry="3.7219" fill="#121212" />
-  <ellipse cx="202.304" cy="151.807" rx="3.72613" ry="3.7219" fill="#121212" />
-  <path d="M401 127.187H308.257L379.053 12.9805V165.02" stroke="#121212" stroke-width="2" stroke-linecap="square" stroke-linejoin="bevel" />
-  <ellipse cx="379.407" cy="127.187" rx="3.89381" ry="3.88938" fill="#121212" />
-</svg>

packages/frontend/core/src/components/affine/affine-error-boundary/error-assets/dark-500-status.assets.svg

@@ -1,43 +0,0 @@
-<svg width="420" height="208" viewBox="0 0 420 208" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M13.744 133.603C13.7034 140.028 15.0861 145.722 17.8923 150.683C20.6984 155.645 24.5823 159.529 29.5439 162.335C34.5055 165.141 40.2195 166.544 46.6858 166.544C53.8842 166.544 60.2692 164.775 65.8409 161.237C71.4125 157.699 75.7844 152.88 78.9566 146.779C82.1288 140.679 83.7352 133.765 83.7758 126.038C83.8165 117.986 82.1084 110.97 78.6516 104.992C75.2354 98.973 70.6805 94.3164 64.9868 91.0222C59.3338 87.6874 53.1522 86.02 46.4418 86.02C41.4395 86.02 36.8643 86.8943 32.7161 88.6431C28.5678 90.3512 24.928 92.649 21.7965 95.5365H21.3084L27.6528 43.8057H79.6276" stroke="#EAEAEA" stroke-width="1.71785"/>
-  <ellipse cx="80.6482" cy="43.7108" rx="3.34449" ry="3.34069" fill="#EAEAEA"/>
-  <ellipse cx="13.6516" cy="133.897" rx="3.34449" ry="3.34069" fill="#EAEAEA"/>
-  <ellipse cx="27.3948" cy="43.7108" rx="3.34449" ry="3.34069" fill="#EAEAEA"/>
-  <ellipse cx="21.3821" cy="95.245" rx="3.34449" ry="3.34069" fill="#EAEAEA"/>
-  <path d="M129.77 50.7832L236.585 157.478" stroke="#727272" stroke-width="0.858927"/>
-  <rect x="129.799" y="50.8133" width="106.757" height="106.635" stroke="#727272" stroke-width="0.858927"/>
-  <path d="M236.261 104.331C236.738 101.203 236.985 98.0005 236.985 94.7401C236.985 59.8702 208.685 31.6025 173.776 31.6025C138.866 31.6025 110.566 59.8702 110.566 94.7401C110.566 129.61 138.866 157.878 173.776 157.878C176.901 157.878 179.973 157.651 182.977 157.213" stroke="#727272" stroke-width="0.858927"/>
-  <path d="M182.978 157.154C186.108 157.63 189.315 157.878 192.579 157.878C227.489 157.878 255.788 129.61 255.788 94.7401C255.788 59.8702 227.489 31.6025 192.579 31.6025C157.669 31.6025 129.37 59.8702 129.37 94.7401C129.37 98.0005 129.617 101.203 130.094 104.331" stroke="#727272" stroke-width="0.858927"/>
-  <path d="M129.634 104.33C129.196 107.331 128.969 110.4 128.969 113.521C128.969 148.391 157.269 176.659 192.179 176.659C227.088 176.659 255.388 148.391 255.388 113.521C255.388 78.6514 227.088 50.3838 192.179 50.3838C189.053 50.3838 185.981 50.6103 182.977 51.0479" stroke="#727272" stroke-width="0.858927"/>
-  <path d="M182.977 51.0479C179.973 50.6103 176.901 50.3838 173.776 50.3838C138.866 50.3838 110.566 78.6514 110.566 113.521C110.566 148.391 138.866 176.659 173.776 176.659C208.685 176.659 236.985 148.391 236.985 113.521C236.985 110.4 236.758 107.331 236.32 104.33" stroke="#727272" stroke-width="0.858927"/>
-  <path d="M236.585 50.7832L129.77 157.478" stroke="#727272" stroke-width="0.858927"/>
-  <path d="M129.37 104.33H236.585" stroke="#727272" stroke-width="0.858927"/>
-  <path d="M182.978 50.3838V157.877" stroke="#727272" stroke-width="0.858927"/>
-  <ellipse cx="236.585" cy="104.331" rx="3.20048" ry="3.19684" fill="#EAEAEA"/>
-  <ellipse cx="236.585" cy="50.7838" rx="3.20048" ry="3.19684" fill="#EAEAEA"/>
-  <ellipse cx="236.585" cy="157.878" rx="3.20048" ry="3.19684" fill="#EAEAEA"/>
-  <ellipse cx="129.77" cy="157.878" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
-  <ellipse cx="182.977" cy="104.331" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
-  <ellipse cx="182.977" cy="50.7838" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
-  <ellipse cx="129.77" cy="104.331" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
-  <ellipse cx="129.77" cy="50.7838" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
-  <ellipse cx="182.977" cy="157.878" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
-  <path d="M290.381 50.7812L397.197 157.476" stroke="#727272" stroke-width="0.858927"/>
-  <rect x="290.41" y="50.8113" width="106.757" height="106.635" stroke="#727272" stroke-width="0.858927"/>
-  <path d="M396.872 104.329C397.349 101.201 397.596 97.9986 397.596 94.7381C397.596 59.8682 369.297 31.6006 334.387 31.6006C299.478 31.6006 271.178 59.8682 271.178 94.7381C271.178 129.608 299.478 157.876 334.387 157.876C337.512 157.876 340.585 157.649 343.588 157.212" stroke="#727272" stroke-width="0.858927"/>
-  <path d="M343.589 157.152C346.72 157.629 349.926 157.876 353.19 157.876C388.1 157.876 416.4 129.608 416.4 94.7381C416.4 59.8682 388.1 31.6006 353.19 31.6006C318.281 31.6006 289.981 59.8682 289.981 94.7381C289.981 97.9986 290.228 101.201 290.705 104.329" stroke="#727272" stroke-width="0.858927"/>
-  <path d="M290.245 104.328C289.807 107.329 289.581 110.398 289.581 113.519C289.581 148.389 317.88 176.657 352.79 176.657C387.699 176.657 415.999 148.389 415.999 113.519C415.999 78.6495 387.699 50.3818 352.79 50.3818C349.665 50.3818 346.592 50.6084 343.589 51.046" stroke="#727272" stroke-width="0.858927"/>
-  <path d="M343.588 51.046C340.585 50.6084 337.512 50.3818 334.387 50.3818C299.478 50.3818 271.178 78.6495 271.178 113.519C271.178 148.389 299.478 176.657 334.387 176.657C369.297 176.657 397.596 148.389 397.596 113.519C397.596 110.398 397.37 107.329 396.932 104.328" stroke="#727272" stroke-width="0.858927"/>
-  <path d="M397.197 50.7812L290.381 157.476" stroke="#727272" stroke-width="0.858927"/>
-  <path d="M289.981 104.328H397.197" stroke="#727272" stroke-width="0.858927"/>
-  <path d="M343.589 50.3818V157.875" stroke="#727272" stroke-width="0.858927"/>
-  <ellipse cx="397.197" cy="104.329" rx="3.20048" ry="3.19684" fill="#EAEAEA"/>
-  <ellipse cx="397.197" cy="50.7818" rx="3.20048" ry="3.19684" fill="#EAEAEA"/>
-  <ellipse cx="397.197" cy="157.876" rx="3.20048" ry="3.19684" fill="#EAEAEA"/>
-  <ellipse cx="290.381" cy="157.876" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
-  <ellipse cx="343.589" cy="104.329" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
-  <ellipse cx="343.589" cy="50.7818" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
-  <ellipse cx="290.381" cy="104.329" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
-  <ellipse cx="290.381" cy="50.7818" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
-  <ellipse cx="343.589" cy="157.876" rx="3.20047" ry="3.19684" fill="#EAEAEA"/>
-</svg>

packages/frontend/core/src/components/affine/affine-error-boundary/error-assets/light-500-status.assets.svg

@@ -1,43 +0,0 @@
-<svg width="490" height="242" viewBox="0 0 490 242" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M16.5098 155.545C16.4625 163.027 18.0723 169.655 21.3393 175.432C24.6064 181.208 29.1282 185.73 34.9047 188.997C40.6812 192.264 47.3337 193.898 54.8621 193.898C63.2428 193.898 70.6765 191.838 77.1632 187.719C83.65 183.599 88.7399 177.989 92.4331 170.886C96.1263 163.784 97.9965 155.735 98.0439 146.739C98.0912 137.364 96.1026 129.196 92.078 122.236C88.1007 115.228 82.7977 109.807 76.1689 105.972C69.5875 102.089 62.3905 100.148 54.578 100.148C48.7541 100.148 43.4274 101.166 38.5979 103.202C33.7683 105.19 29.5306 107.866 25.8848 111.227H25.3166L32.703 51H93.2143" stroke="black" stroke-width="2"/>
-  <ellipse cx="94.4026" cy="50.8894" rx="3.89381" ry="3.88938" fill="#121212"/>
-  <ellipse cx="16.4026" cy="155.889" rx="3.89381" ry="3.88938" fill="#121212"/>
-  <ellipse cx="32.4026" cy="50.8894" rx="3.89381" ry="3.88938" fill="#121212"/>
-  <ellipse cx="25.4026" cy="110.889" rx="3.89381" ry="3.88938" fill="#121212"/>
-  <path d="M151.592 59.1235L275.951 183.342" stroke="#E3E2E4"/>
-  <rect x="151.626" y="59.1582" width="124.291" height="124.149" stroke="#E3E2E4"/>
-  <path d="M275.573 121.465C276.129 117.824 276.417 114.095 276.417 110.299C276.417 69.7024 243.469 36.792 202.826 36.792C162.183 36.792 129.235 69.7024 129.235 110.299C129.235 150.897 162.183 183.807 202.826 183.807C206.465 183.807 210.041 183.543 213.539 183.034" stroke="#E3E2E4"/>
-  <path d="M213.539 182.964C217.184 183.519 220.917 183.807 224.717 183.807C265.36 183.807 298.308 150.897 298.308 110.299C298.308 69.7024 265.36 36.792 224.717 36.792C184.074 36.792 151.126 69.7024 151.126 110.299C151.126 114.095 151.414 117.824 151.97 121.465" stroke="#E3E2E4"/>
-  <path d="M151.434 121.465C150.924 124.958 150.66 128.531 150.66 132.166C150.66 172.763 183.608 205.673 224.251 205.673C264.894 205.673 297.842 172.763 297.842 132.166C297.842 91.5686 264.894 58.6582 224.251 58.6582C220.613 58.6582 217.036 58.922 213.539 59.4314" stroke="#E3E2E4"/>
-  <path d="M213.539 59.4314C210.041 58.922 206.465 58.6582 202.826 58.6582C162.183 58.6582 129.235 91.5686 129.235 132.166C129.235 172.763 162.183 205.673 202.826 205.673C243.469 205.673 276.417 172.763 276.417 132.166C276.417 128.531 276.153 124.958 275.643 121.465" stroke="#E3E2E4"/>
-  <path d="M275.951 59.1235L151.592 183.342" stroke="#E3E2E4"/>
-  <path d="M151.126 121.465H275.951" stroke="#E3E2E4"/>
-  <path d="M213.539 58.6582V183.807" stroke="#E3E2E4"/>
-  <ellipse cx="275.951" cy="121.465" rx="3.72614" ry="3.7219" fill="#121212"/>
-  <ellipse cx="275.951" cy="59.1233" rx="3.72614" ry="3.7219" fill="#121212"/>
-  <ellipse cx="275.951" cy="183.807" rx="3.72614" ry="3.7219" fill="#121212"/>
-  <ellipse cx="151.592" cy="183.807" rx="3.72613" ry="3.7219" fill="#121212"/>
-  <ellipse cx="213.539" cy="121.465" rx="3.72613" ry="3.7219" fill="#121212"/>
-  <ellipse cx="213.539" cy="59.1233" rx="3.72613" ry="3.7219" fill="#121212"/>
-  <ellipse cx="151.592" cy="121.465" rx="3.72613" ry="3.7219" fill="#121212"/>
-  <ellipse cx="151.592" cy="59.1233" rx="3.72613" ry="3.7219" fill="#121212"/>
-  <ellipse cx="213.539" cy="183.807" rx="3.72613" ry="3.7219" fill="#121212"/>
-  <path d="M338.583 59.1235L462.943 183.342" stroke="#E3E2E4"/>
-  <rect x="338.617" y="59.1582" width="124.291" height="124.149" stroke="#E3E2E4"/>
-  <path d="M462.565 121.465C463.12 117.824 463.408 114.095 463.408 110.299C463.408 69.7024 430.46 36.792 389.817 36.792C349.174 36.792 316.226 69.7024 316.226 110.299C316.226 150.897 349.174 183.807 389.817 183.807C393.456 183.807 397.033 183.543 400.53 183.034" stroke="#E3E2E4"/>
-  <path d="M400.53 182.964C404.175 183.519 407.908 183.807 411.708 183.807C452.351 183.807 485.299 150.897 485.299 110.299C485.299 69.7024 452.351 36.792 411.708 36.792C371.065 36.792 338.117 69.7024 338.117 110.299C338.117 114.095 338.405 117.824 338.961 121.465" stroke="#E3E2E4"/>
-  <path d="M338.425 121.465C337.915 124.958 337.651 128.531 337.651 132.166C337.651 172.763 370.599 205.673 411.242 205.673C451.886 205.673 484.833 172.763 484.833 132.166C484.833 91.5686 451.886 58.6582 411.242 58.6582C407.604 58.6582 404.027 58.922 400.53 59.4314" stroke="#E3E2E4"/>
-  <path d="M400.53 59.4314C397.033 58.922 393.456 58.6582 389.817 58.6582C349.174 58.6582 316.226 91.5686 316.226 132.166C316.226 172.763 349.174 205.673 389.817 205.673C430.46 205.673 463.408 172.763 463.408 132.166C463.408 128.531 463.144 124.958 462.634 121.465" stroke="#E3E2E4"/>
-  <path d="M462.943 59.1235L338.583 183.342" stroke="#E3E2E4"/>
-  <path d="M338.117 121.465H462.943" stroke="#E3E2E4"/>
-  <path d="M400.53 58.6582V183.807" stroke="#E3E2E4"/>
-  <ellipse cx="462.942" cy="121.465" rx="3.72614" ry="3.7219" fill="#121212"/>
-  <ellipse cx="462.942" cy="59.1233" rx="3.72614" ry="3.7219" fill="#121212"/>
-  <ellipse cx="462.942" cy="183.807" rx="3.72614" ry="3.7219" fill="#121212"/>
-  <ellipse cx="338.583" cy="183.807" rx="3.72613" ry="3.7219" fill="#121212"/>
-  <ellipse cx="400.53" cy="121.465" rx="3.72613" ry="3.7219" fill="#121212"/>
-  <ellipse cx="400.53" cy="59.1233" rx="3.72613" ry="3.7219" fill="#121212"/>
-  <ellipse cx="338.583" cy="121.465" rx="3.72613" ry="3.7219" fill="#121212"/>
-  <ellipse cx="338.583" cy="59.1233" rx="3.72613" ry="3.7219" fill="#121212"/>
-  <ellipse cx="400.53" cy="183.807" rx="3.72613" ry="3.7219" fill="#121212"/>
-</svg>

packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/error-detail.css.ts

@@ -1,35 +1,97 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 export const errorLayout = style({
+  position: 'absolute',
   display: 'flex',
+  flexDirection: 'column',
   justifyContent: 'center',
   alignItems: 'center',
   height: '100%',
   width: '100%',
-  gap: '20px',
+  transition: 'all 0.3s ease-in-out',
 });
-export const errorDetailStyle = style({
+export const errorContainer = style({
   display: 'flex',
   flexDirection: 'column',
-  maxWidth: '420px',
-});
-export const errorTitle = style({
-  fontSize: '32px',
-  lineHeight: '44px',
-  fontWeight: 700,
-});
-export const errorImage = style({
-  height: '178px',
-  maxWidth: '400px',
-  flexGrow: 1,
-  backgroundSize: 'cover',
-});
-export const errorDescription = style({
-  marginTop: '24px',
-});
-export const errorFooter = style({
-  marginTop: '24px',
-});
-export const errorDivider = style({
-  width: '20px',
+  justifyContent: 'center',
+  alignItems: 'flex-start',
   height: '100%',
+  width: '100%',
+  gap: '8px',
+  padding: '16px',
+  maxWidth: '400px',
+  transition: 'max-width 0.3s ease-in-out',
+  selectors: {
+    '&[data-show-stack="true"]': {
+      maxWidth: '600px',
+    },
+  },
+});
+
+export const label = style({
+  width: '100%',
+  overflow: 'hidden',
+  textWrap: 'wrap',
+  wordBreak: 'break-word',
+});
+
+export const scrollArea = style({
+  height: 'auto',
+  maxHeight: 0,
+  transition: 'max-height 0.3s ease-in-out',
+  color: cssVarV2('text/secondary'),
+  fontSize: 14,
+  lineHeight: '22px',
+  fontWeight: 400,
+  selectors: {
+    '&[data-show-stack="true"]': {
+      maxHeight: '200px',
+    },
+  },
+});
+
+export const illustration = style({
+  maxWidth: '100%',
+  width: 300,
+  alignSelf: 'center',
+});
+
+export const text = style({
+  fontSize: 14,
+  lineHeight: '22px',
+  fontWeight: 400,
+  color: cssVarV2('text/primary'),
+  marginBottom: 4,
+});
+
+export const actionContainer = style({
+  display: 'flex',
+  marginTop: '16px',
+  width: '100%',
+  gap: '32px',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const actionButton = style({
+  padding: '4px 8px',
+  fontSize: 12,
+  minWidth: '120px',
+});
+
+export const actionContent = style({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const arrowIcon = style({
+  transition: 'transform 0.3s ease-in-out',
+  marginLeft: '8px',
+  width: '16px',
+  height: '16px',
+  selectors: {
+    '&[data-show-stack="true"]': {
+      transform: 'rotate(180deg)',
+    },
+  },
 });

packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/error-detail.tsx

@@ -1,13 +1,15 @@
-import { Button } from '@affine/component/ui/button';
+import { Scrollable, ThemedImg } from '@affine/component';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
 import { Trans, useI18n } from '@affine/i18n';
-import { useTheme } from 'next-themes';
+import { ArrowDownSmallIcon } from '@blocksuite/icons/rc';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 
-import imageUrlFor404 from '../error-assets/404-status.assets.svg';
-import imageUrlForDark500 from '../error-assets/dark-500-status.assets.svg';
-import imageUrlForLight500 from '../error-assets/light-500-status.assets.svg';
+import { ActionButton } from '../../empty/action-button';
+import imageUrlForDark404 from '../error-assets/404.dark.png';
+import imageUrlForLight404 from '../error-assets/404.light.png';
+import imageUrlForDark500 from '../error-assets/500.dark.png';
+import imageUrlForLight500 from '../error-assets/500.light.png';
 import * as styles from './error-detail.css';
 
 export enum ErrorStatus {
@@ -17,21 +19,20 @@ export enum ErrorStatus {
 
 export interface ErrorDetailProps extends PropsWithChildren {
   status?: ErrorStatus;
-  direction?: 'column' | 'row';
   title: string;
   description: ReactNode | Array<ReactNode>;
   buttonText?: string;
   onButtonClick?: () => void | Promise<void>;
   resetError?: () => void;
-  withoutImage?: boolean;
+  error?: Error;
 }
 
 const imageMap = new Map([
   [
     ErrorStatus.NotFound,
     {
-      light: imageUrlFor404, // TODO(@catsjuice): Ask designer for dark/light mode image.
-      dark: imageUrlFor404,
+      light: imageUrlForLight404,
+      dark: imageUrlForDark404,
     },
   ],
   [
@@ -49,16 +50,19 @@ const imageMap = new Map([
 export const ErrorDetail: FC<ErrorDetailProps> = props => {
   const {
     status = ErrorStatus.Unexpected,
-    direction = 'row',
     description,
     onButtonClick,
     resetError,
-    withoutImage,
+    error,
   } = props;
   const descriptions = Array.isArray(description) ? description : [description];
   const [isBtnLoading, setBtnLoading] = useState(false);
+  const [showStack, setShowStack] = useState(false);
   const t = useI18n();
-  const { resolvedTheme } = useTheme();
+
+  const onToggleStack = useCallback(() => {
+    setShowStack(!showStack);
+  }, [showStack]);
 
   const onBtnClick = useAsyncCallback(async () => {
     try {
@@ -70,36 +74,62 @@ export const ErrorDetail: FC<ErrorDetailProps> = props => {
     }
   }, [onButtonClick, resetError]);
 
+  const desc = descriptions.map((item, i) => (
+    <p key={i} className={styles.text}>
+      {item}
+    </p>
+  ));
+
   return (
-    <div className={styles.errorLayout} style={{ flexDirection: direction }}>
-      <div className={styles.errorDetailStyle}>
-        <h1 className={styles.errorTitle}>{props.title}</h1>
-        {descriptions.map((item, i) => (
-          <p key={i} className={styles.errorDescription}>
-            {item}
-          </p>
-        ))}
-        <div className={styles.errorFooter}>
-          <Button
-            variant="primary"
+    <div className={styles.errorLayout}>
+      <div className={styles.errorContainer} data-show-stack={showStack}>
+        <ThemedImg
+          style={{ width: '300px' }}
+          draggable={false}
+          className={styles.illustration}
+          lightSrc={imageMap.get(status)?.light || imageUrlForLight404}
+          darkSrc={imageMap.get(status)?.dark || imageUrlForDark404}
+        />
+
+        <div className={styles.label}>
+          <div className={styles.text}>{props.title}</div>
+          <div className={styles.text}>{desc}</div>
+        </div>
+        <Scrollable.Root
+          className={styles.scrollArea}
+          data-show-stack={showStack}
+        >
+          <Scrollable.Viewport>
+            {error?.stack || 'No detailed error stack is provided.'}
+          </Scrollable.Viewport>
+          <Scrollable.Scrollbar />
+        </Scrollable.Root>
+
+        <div className={styles.actionContainer}>
+          {error?.stack ? (
+            <ActionButton
+              onClick={onToggleStack}
+              className={styles.actionButton}
+            >
+              <div className={styles.actionContent}>
+                <span>{t['com.affine.error.hide-error']()}</span>
+                <ArrowDownSmallIcon
+                  data-show-stack={showStack}
+                  className={styles.arrowIcon}
+                />
+              </div>
+            </ActionButton>
+          ) : null}
+          <ActionButton
             onClick={onBtnClick}
+            className={styles.actionButton}
             loading={isBtnLoading}
-            size="extraLarge"
+            variant="primary"
           >
-            {props.buttonText ?? t['com.affine.error.retry']()}
-          </Button>
+            {props.buttonText ?? t['com.affine.error.reload']()}
+          </ActionButton>
         </div>
       </div>
-      {withoutImage ? null : (
-        <div
-          className={styles.errorImage}
-          style={{
-            backgroundImage: `url(${
-              imageMap.get(status)?.[resolvedTheme as 'light' | 'dark']
-            })`,
-          }}
-        />
-      )}
     </div>
   );
 };

packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/any-error-fallback.tsx

@@ -24,6 +24,7 @@ export const AnyErrorFallback: FC<FallbackProps> = props => {
       description={
         'message' in (error as Error) ? (error as Error).message : `${error}`
       }
+      error={error as Error}
     />
   );
 };

packages/frontend/core/src/components/affine/create-workspace-modal/index.css.ts

@@ -1,77 +0,0 @@
-import { cssVar } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
-
-export const header = style({
-  position: 'relative',
-  marginTop: '44px',
-});
-
-export const subTitle = style({
-  fontSize: cssVar('fontSm'),
-  color: cssVar('textPrimaryColor'),
-  fontWeight: 600,
-});
-
-export const avatarWrapper = style({
-  display: 'flex',
-  margin: '10px 0',
-});
-
-export const workspaceNameWrapper = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '8px',
-  padding: '12px 0',
-});
-export const affineCloudWrapper = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '6px',
-  paddingTop: '10px',
-});
-
-export const card = style({
-  padding: '12px',
-  display: 'flex',
-  alignItems: 'center',
-  borderRadius: '8px',
-  backgroundColor: cssVar('backgroundSecondaryColor'),
-  minHeight: '114px',
-  position: 'relative',
-});
-
-export const cardText = style({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  width: '100%',
-  gap: '12px',
-});
-
-export const cardTitle = style({
-  fontSize: cssVar('fontBase'),
-  color: cssVar('textPrimaryColor'),
-  display: 'flex',
-  justifyContent: 'space-between',
-});
-export const cardDescription = style({
-  fontSize: cssVar('fontXs'),
-  color: cssVar('textSecondaryColor'),
-  maxWidth: '288px',
-});
-
-export const cloudTips = style({
-  fontSize: cssVar('fontXs'),
-  color: cssVar('textSecondaryColor'),
-});
-
-export const cloudSvgContainer = style({
-  width: '146px',
-  display: 'flex',
-  justifyContent: 'flex-end',
-  alignItems: 'center',
-  position: 'absolute',
-  bottom: '0',
-  right: '0',
-  pointerEvents: 'none',
-});

packages/frontend/core/src/components/affine/create-workspace-modal/index.tsx

@@ -1,290 +0,0 @@
-import { Avatar, Input, Switch, toast } from '@affine/component';
-import type { ConfirmModalProps } from '@affine/component/ui/modal';
-import { ConfirmModal, Modal } from '@affine/component/ui/modal';
-import { authAtom } from '@affine/core/components/atoms';
-import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
-import { DebugLogger } from '@affine/debug';
-import { apis } from '@affine/electron-api';
-import { WorkspaceFlavour } from '@affine/env/workspace';
-import { useI18n } from '@affine/i18n';
-import { track } from '@affine/track';
-import {
-  DocsService,
-  useLiveData,
-  useService,
-  WorkspacesService,
-} from '@toeverything/infra';
-import { useSetAtom } from 'jotai';
-import type { KeyboardEvent } from 'react';
-import { useCallback, useLayoutEffect, useState } from 'react';
-
-import { buildShowcaseWorkspace } from '../../../bootstrap/first-app-data';
-import { AuthService } from '../../../modules/cloud';
-import { _addLocalWorkspace } from '../../../modules/workspace-engine';
-import { CloudSvg } from '../share-page-modal/cloud-svg';
-import * as styles from './index.css';
-
-type CreateWorkspaceStep =
-  | 'set-db-location'
-  | 'name-workspace'
-  | 'set-syncing-mode';
-
-export type CreateWorkspaceMode = 'add' | 'new' | false;
-
-const logger = new DebugLogger('CreateWorkspaceModal');
-
-interface ModalProps {
-  mode: CreateWorkspaceMode; // false means not open
-  onClose: () => void;
-  onCreate: (id: string, defaultDocId?: string) => void;
-}
-
-interface NameWorkspaceContentProps extends ConfirmModalProps {
-  loading: boolean;
-  onConfirmName: (
-    name: string,
-    workspaceFlavour: WorkspaceFlavour,
-    avatar?: File
-  ) => void;
-}
-
-const shouldEnableCloud = !BUILD_CONFIG.allowLocalWorkspace;
-
-const NameWorkspaceContent = ({
-  loading,
-  onConfirmName,
-  ...props
-}: NameWorkspaceContentProps) => {
-  const t = useI18n();
-  const [workspaceName, setWorkspaceName] = useState('');
-  const [enable, setEnable] = useState(shouldEnableCloud);
-  const session = useService(AuthService).session;
-  const loginStatus = useLiveData(session.status$);
-
-  const setOpenSignIn = useSetAtom(authAtom);
-
-  const openSignInModal = useCallback(() => {
-    setOpenSignIn(state => ({
-      ...state,
-      openModal: true,
-    }));
-  }, [setOpenSignIn]);
-
-  const onSwitchChange = useCallback(
-    (checked: boolean) => {
-      if (loginStatus !== 'authenticated') {
-        return openSignInModal();
-      }
-      return setEnable(checked);
-    },
-    [loginStatus, openSignInModal]
-  );
-
-  const handleCreateWorkspace = useCallback(() => {
-    onConfirmName(
-      workspaceName,
-      enable ? WorkspaceFlavour.AFFINE_CLOUD : WorkspaceFlavour.LOCAL
-    );
-  }, [enable, onConfirmName, workspaceName]);
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLInputElement>) => {
-      if (event.key === 'Enter' && workspaceName) {
-        handleCreateWorkspace();
-      }
-    },
-    [handleCreateWorkspace, workspaceName]
-  );
-
-  // Currently, when we create a new workspace and upload an avatar at the same time,
-  // an error occurs after the creation is successful: get blob 404 not found
-  return (
-    <ConfirmModal
-      defaultOpen={true}
-      title={t['com.affine.nameWorkspace.title']()}
-      description={t['com.affine.nameWorkspace.description']()}
-      cancelText={t['com.affine.nameWorkspace.button.cancel']()}
-      confirmText={t['com.affine.nameWorkspace.button.create']()}
-      confirmButtonOptions={{
-        variant: 'primary',
-        loading,
-        disabled: !workspaceName,
-        ['data-testid' as string]: 'create-workspace-create-button',
-      }}
-      closeButtonOptions={{
-        ['data-testid' as string]: 'create-workspace-close-button',
-      }}
-      onConfirm={handleCreateWorkspace}
-      {...props}
-    >
-      <div className={styles.avatarWrapper}>
-        <Avatar size={56} name={workspaceName} colorfulFallback />
-      </div>
-
-      <div className={styles.workspaceNameWrapper}>
-        <div className={styles.subTitle}>
-          {t['com.affine.nameWorkspace.subtitle.workspace-name']()}
-        </div>
-        <Input
-          autoFocus
-          data-testid="create-workspace-input"
-          onKeyDown={handleKeyDown}
-          placeholder={t['com.affine.nameWorkspace.placeholder']()}
-          maxLength={64}
-          minLength={0}
-          onChange={setWorkspaceName}
-          size="large"
-        />
-      </div>
-      <div className={styles.affineCloudWrapper}>
-        <div className={styles.subTitle}>{t['AFFiNE Cloud']()}</div>
-        <div className={styles.card}>
-          <div className={styles.cardText}>
-            <div className={styles.cardTitle}>
-              <span>{t['com.affine.nameWorkspace.affine-cloud.title']()}</span>
-              <Switch
-                checked={enable}
-                onChange={onSwitchChange}
-                disabled={shouldEnableCloud}
-              />
-            </div>
-            <div className={styles.cardDescription}>
-              {t['com.affine.nameWorkspace.affine-cloud.description']()}
-            </div>
-          </div>
-          <div className={styles.cloudSvgContainer}>
-            <CloudSvg />
-          </div>
-        </div>
-        {shouldEnableCloud ? (
-          <a
-            className={styles.cloudTips}
-            href={BUILD_CONFIG.downloadUrl}
-            target="_blank"
-            rel="noreferrer"
-          >
-            {t['com.affine.nameWorkspace.affine-cloud.web-tips']()}
-          </a>
-        ) : null}
-      </div>
-    </ConfirmModal>
-  );
-};
-
-export const CreateWorkspaceModal = ({
-  mode,
-  onClose,
-  onCreate,
-}: ModalProps) => {
-  const [step, setStep] = useState<CreateWorkspaceStep>();
-  const t = useI18n();
-  const workspacesService = useService(WorkspacesService);
-  const docsService = useService(DocsService);
-  const [loading, setLoading] = useState(false);
-
-  // TODO(@Peng): maybe refactor using xstate?
-  useLayoutEffect(() => {
-    let canceled = false;
-    // if mode changed, reset step
-    if (mode === 'add') {
-      // a hack for now
-      // when adding a workspace, we will immediately let user select a db file
-      // after it is done, it will effectively add a new workspace to app-data folder
-      // so after that, we will be able to load it via importLocalWorkspace
-      (async () => {
-        if (!apis) {
-          return;
-        }
-        logger.info('load db file');
-        setStep(undefined);
-        const result = await apis.dialog.loadDBFile();
-        if (result.workspaceId && !canceled) {
-          _addLocalWorkspace(result.workspaceId);
-          workspacesService.list.revalidate();
-          onCreate(result.workspaceId);
-        } else if (result.error || result.canceled) {
-          if (result.error) {
-            toast(t[result.error]());
-          }
-          onClose();
-        }
-      })().catch(err => {
-        console.error(err);
-      });
-    } else if (mode === 'new') {
-      setStep('name-workspace');
-    } else {
-      setStep(undefined);
-    }
-    return () => {
-      canceled = true;
-    };
-  }, [mode, onClose, onCreate, t, workspacesService]);
-
-  const onConfirmName = useAsyncCallback(
-    async (name: string, workspaceFlavour: WorkspaceFlavour) => {
-      track.$.$.$.createWorkspace({ flavour: workspaceFlavour });
-      if (loading) return;
-      setLoading(true);
-
-      // this will be the last step for web for now
-      // fix me later
-      if (BUILD_CONFIG.enablePreloading) {
-        const { meta, defaultDocId } = await buildShowcaseWorkspace(
-          workspacesService,
-          workspaceFlavour,
-          name
-        );
-        onCreate(meta.id, defaultDocId);
-      } else {
-        let defaultDocId: string | undefined = undefined;
-        const { id } = await workspacesService.create(
-          workspaceFlavour,
-          async workspace => {
-            workspace.meta.initialize();
-            workspace.meta.setName(name);
-            const page = docsService.createDoc();
-            defaultDocId = page.id;
-          }
-        );
-        onCreate(id, defaultDocId);
-      }
-
-      setLoading(false);
-    },
-    [docsService, loading, onCreate, workspacesService]
-  );
-
-  const onOpenChange = useCallback(
-    (open: boolean) => {
-      if (!open) {
-        onClose();
-      }
-    },
-    [onClose]
-  );
-
-  if (step === 'name-workspace') {
-    return (
-      <NameWorkspaceContent
-        loading={loading}
-        open={mode !== false && !!step}
-        onOpenChange={onOpenChange}
-        onConfirmName={onConfirmName}
-      />
-    );
-  }
-
-  return (
-    <Modal
-      open={mode !== false && !!step}
-      width={560}
-      onOpenChange={onOpenChange}
-      contentOptions={{
-        style: { padding: '10px' },
-      }}
-    >
-      <div className={styles.header}></div>
-    </Modal>
-  );
-};

packages/frontend/core/src/components/affine/page-properties/info-modal/links-row.css.ts

@@ -32,5 +32,6 @@ globalStyle(`${wrapper} span`, {
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  borderBottom: 'none',
+  // don't modify border width to avoid layout shift
+  borderBottomColor: 'transparent',
 });

packages/frontend/core/src/components/affine/page-properties/info-modal/links-row.tsx

@@ -1,8 +1,6 @@
 import type { Backlink, Link } from '@affine/core/modules/doc-link';
-import { useContext } from 'react';
 
 import { AffinePageReference } from '../../reference-link';
-import { managerContext } from '../common';
 import * as styles from './links-row.css';
 
 export const LinksRow = ({
@@ -16,20 +14,18 @@ export const LinksRow = ({
   className?: string;
   onClick?: () => void;
 }) => {
-  const manager = useContext(managerContext);
   return (
     <div className={className}>
       <div className={styles.title}>
         {label} · {references.length}
       </div>
-      {references.map(link => (
+      {references.map((link, index) => (
         <AffinePageReference
-          key={link.docId}
+          key={index}
           pageId={link.docId}
           wrapper={props => (
             <div className={styles.wrapper} onClick={onClick} {...props} />
           )}
-          docCollection={manager.workspace.docCollection}
         />
       ))}
     </div>

packages/frontend/core/src/components/affine/page-properties/table.tsx

@@ -379,8 +379,6 @@ export const PageBacklinksPopup = ({
   backlinks,
   children,
 }: PageBacklinksPopupProps) => {
-  const manager = useContext(managerContext);
-
   return (
     <Menu
       contentOptions={{
@@ -395,7 +393,6 @@ export const PageBacklinksPopup = ({
               key={link.docId + ':' + link.blockId}
               wrapper={MenuItem}
               pageId={link.docId}
-              docCollection={manager.workspace.docCollection}
             />
           ))}
         </div>

packages/frontend/core/src/components/affine/reference-link/index.tsx

@@ -1,5 +1,5 @@
-import { useDocMetaHelper } from '@affine/core/components/hooks/use-block-suite-page-meta';
-import { useJournalHelper } from '@affine/core/components/hooks/use-journal';
+import { useJournalInfoHelper } from '@affine/core/components/hooks/use-journal';
+import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
 import {
   PeekViewService,
   useInsidePeekView,
@@ -8,15 +8,8 @@ import { WorkbenchLink } from '@affine/core/modules/workbench';
 import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import type { DocMode } from '@blocksuite/blocks';
-import {
-  BlockLinkIcon,
-  DeleteIcon,
-  LinkedEdgelessIcon,
-  LinkedPageIcon,
-  TodayIcon,
-} from '@blocksuite/icons/rc';
 import type { DocCollection } from '@blocksuite/store';
-import { DocsService, useLiveData, useService } from '@toeverything/infra';
+import { useLiveData, useService } from '@toeverything/infra';
 import { nanoid } from 'nanoid';
 import {
   type PropsWithChildren,
@@ -29,77 +22,18 @@ import { Link } from 'react-router-dom';
 
 import * as styles from './styles.css';
 
-export interface PageReferenceRendererOptions {
-  pageId: string;
-  docCollection: DocCollection;
-  pageMetaHelper: ReturnType<typeof useDocMetaHelper>;
-  journalHelper: ReturnType<typeof useJournalHelper>;
-  t: ReturnType<typeof useI18n>;
-  docMode?: DocMode;
-  // Link to block or element
-  linkToNode?: boolean;
-}
-
-// use a function to be rendered in the lit renderer
-export function pageReferenceRenderer({
-  pageId,
-  pageMetaHelper,
-  journalHelper,
-  t,
-  docMode,
-  linkToNode = false,
-}: PageReferenceRendererOptions) {
-  const { isPageJournal, getLocalizedJournalDateString } = journalHelper;
-  const referencedPage = pageMetaHelper.getDocMeta(pageId);
-  let title =
-    referencedPage?.title ?? t['com.affine.editor.reference-not-found']();
-
-  let Icon = DeleteIcon;
-
-  if (referencedPage) {
-    if (docMode === 'edgeless') {
-      Icon = LinkedEdgelessIcon;
-    } else {
-      Icon = LinkedPageIcon;
-    }
-    if (linkToNode) {
-      Icon = BlockLinkIcon;
-    }
-  }
-
-  const isJournal = isPageJournal(pageId);
-  const localizedJournalDate = getLocalizedJournalDateString(pageId);
-  if (isJournal && localizedJournalDate) {
-    title = localizedJournalDate;
-    Icon = TodayIcon;
-  }
-
-  return (
-    <>
-      <Icon className={styles.pageReferenceIcon} />
-      <span className="affine-reference-title">
-        {title ? title : t['Untitled']()}
-      </span>
-    </>
-  );
-}
-
 export function AffinePageReference({
   pageId,
-  docCollection,
   wrapper: Wrapper,
   params,
 }: {
   pageId: string;
-  docCollection: DocCollection;
   wrapper?: React.ComponentType<PropsWithChildren>;
   params?: URLSearchParams;
 }) {
+  const docDisplayMetaService = useService(DocDisplayMetaService);
+  const journalHelper = useJournalInfoHelper();
   const t = useI18n();
-  const pageMetaHelper = useDocMetaHelper();
-  const journalHelper = useJournalHelper(docCollection);
-  const docsService = useService(DocsService);
-  const mode = useLiveData(docsService.list.primaryMode$(pageId));
 
   let linkWithMode: DocMode | null = null;
   let linkToNode = false;
@@ -111,15 +45,23 @@ export function AffinePageReference({
     linkToNode = params.has('blockIds') || params.has('elementIds');
   }
 
-  const el = pageReferenceRenderer({
-    docMode: linkWithMode ?? mode ?? 'page',
-    pageId,
-    pageMetaHelper,
-    journalHelper,
-    docCollection,
-    t,
-    linkToNode,
-  });
+  const Icon = useLiveData(
+    docDisplayMetaService.icon$(pageId, {
+      mode: linkWithMode ?? undefined,
+      reference: true,
+      referenceToNode: linkToNode,
+    })
+  );
+  const title = useLiveData(docDisplayMetaService.title$(pageId));
+
+  const el = (
+    <>
+      <Icon className={styles.pageReferenceIcon} />
+      <span className="affine-reference-title">
+        {typeof title === 'string' ? title : t[title.key]()}
+      </span>
+    </>
+  );
 
   const ref = useRef<HTMLAnchorElement>(null);
 
@@ -186,11 +128,9 @@ export function AffineSharedPageReference({
   wrapper?: React.ComponentType<PropsWithChildren>;
   params?: URLSearchParams;
 }) {
+  const docDisplayMetaService = useService(DocDisplayMetaService);
+  const journalHelper = useJournalInfoHelper();
   const t = useI18n();
-  const pageMetaHelper = useDocMetaHelper();
-  const journalHelper = useJournalHelper(docCollection);
-  const docsService = useService(DocsService);
-  const mode = useLiveData(docsService.list.primaryMode$(pageId));
 
   let linkWithMode: DocMode | null = null;
   let linkToNode = false;
@@ -202,15 +142,22 @@ export function AffineSharedPageReference({
     linkToNode = params.has('blockIds') || params.has('elementIds');
   }
 
-  const el = pageReferenceRenderer({
-    docMode: linkWithMode ?? mode ?? 'page',
-    pageId,
-    pageMetaHelper,
-    journalHelper,
-    docCollection,
-    t,
-    linkToNode,
-  });
+  const Icon = useLiveData(
+    docDisplayMetaService.icon$(pageId, {
+      mode: linkWithMode ?? undefined,
+      reference: true,
+      referenceToNode: linkToNode,
+    })
+  );
+  const title = useLiveData(docDisplayMetaService.title$(pageId));
+  const el = (
+    <>
+      <Icon className={styles.pageReferenceIcon} />
+      <span className="affine-reference-title">
+        {typeof title === 'string' ? title : t[title.key]()}
+      </span>
+    </>
+  );
 
   const ref = useRef<HTMLAnchorElement>(null);