chore: test result

.docker/selfhost/schema.json

@@ -31,13 +31,9 @@
       "properties": {
         "queue": {
           "type": "object",
-          "description": "The config for job queues\n@default {\"attempts\":5,\"backoff\":{\"type\":\"exponential\",\"delay\":1000},\"removeOnComplete\":true,\"removeOnFail\":{\"age\":86400,\"count\":500}}\n@link https://api.docs.bullmq.io/interfaces/v5.QueueOptions.html",
+          "description": "The config for job queues\n@default {\"attempts\":5,\"removeOnComplete\":true,\"removeOnFail\":{\"age\":86400,\"count\":500}}\n@link https://api.docs.bullmq.io/interfaces/v5.QueueOptions.html",
           "default": {
             "attempts": 5,
-            "backoff": {
-              "type": "exponential",
-              "delay": 1000
-            },
             "removeOnComplete": true,
             "removeOnFail": {
               "age": 86400,
@@ -52,14 +48,14 @@
         },
         "queues.copilot": {
           "type": "object",
-          "description": "The config for copilot job queue\n@default {\"concurrency\":10}",
+          "description": "The config for copilot job queue\n@default {\"concurrency\":5}",
           "properties": {
             "concurrency": {
               "type": "number"
             }
           },
           "default": {
-            "concurrency": 10
+            "concurrency": 5
           }
         },
         "queues.doc": {
@@ -643,41 +639,6 @@
             "apiKey": ""
           }
         },
-        "providers.geminiVertex": {
-          "type": "object",
-          "description": "The config for the google vertex provider.\n@default {}",
-          "properties": {
-            "location": {
-              "type": "string",
-              "description": "The location of the google vertex provider."
-            },
-            "project": {
-              "type": "string",
-              "description": "The project name of the google vertex provider."
-            },
-            "googleAuthOptions": {
-              "type": "object",
-              "description": "The google auth options for the google vertex provider.",
-              "properties": {
-                "credentials": {
-                  "type": "object",
-                  "description": "The credentials for the google vertex provider.",
-                  "properties": {
-                    "client_email": {
-                      "type": "string",
-                      "description": "The client email for the google vertex provider."
-                    },
-                    "private_key": {
-                      "type": "string",
-                      "description": "The private key for the google vertex provider."
-                    }
-                  }
-                }
-              }
-            }
-          },
-          "default": {}
-        },
         "providers.perplexity": {
           "type": "object",
           "description": "The config for the perplexity provider.\n@default {\"apiKey\":\"\"}",
@@ -692,41 +653,6 @@
             "apiKey": ""
           }
         },
-        "providers.anthropicVertex": {
-          "type": "object",
-          "description": "The config for the google vertex provider.\n@default {}",
-          "properties": {
-            "location": {
-              "type": "string",
-              "description": "The location of the google vertex provider."
-            },
-            "project": {
-              "type": "string",
-              "description": "The project name of the google vertex provider."
-            },
-            "googleAuthOptions": {
-              "type": "object",
-              "description": "The google auth options for the google vertex provider.",
-              "properties": {
-                "credentials": {
-                  "type": "object",
-                  "description": "The credentials for the google vertex provider.",
-                  "properties": {
-                    "client_email": {
-                      "type": "string",
-                      "description": "The client email for the google vertex provider."
-                    },
-                    "private_key": {
-                      "type": "string",
-                      "description": "The private key for the google vertex provider."
-                    }
-                  }
-                }
-              }
-            }
-          },
-          "default": {}
-        },
         "unsplash": {
           "type": "object",
           "description": "The config for the unsplash key.\n@default {\"key\":\"\"}",
@@ -886,8 +812,8 @@
       "properties": {
         "enabled": {
           "type": "boolean",
-          "description": "Enable indexer plugin\n@default false\n@environment `AFFINE_INDEXER_ENABLED`",
-          "default": false
+          "description": "Enable indexer plugin\n@default true\n@environment `AFFINE_INDEXER_ENABLED`",
+          "default": true
         },
         "provider.type": {
           "type": "string",

.github/actions/server-test-env/action.yml

@@ -29,7 +29,11 @@ runs:
 
     - name: Import config
       shell: bash
-      env:
-        DEFAULT_CONFIG: '{}'
       run: |
-        printf '%s\n' "${SERVER_CONFIG:-$DEFAULT_CONFIG}" > ./packages/backend/server/config.json
+        printf '{"copilot":{"enabled":true,"providers.fal":{"apiKey":"%s"},"providers.gemini":{"apiKey":"%s"},"providers.openai":{"apiKey":"%s"},"providers.perplexity":{"apiKey":"%s"},"providers.anthropic":{"apiKey":"%s"},"exa":{"key":"%s"}}}' \
+        "$COPILOT_FAL_API_KEY" \
+        "$COPILOT_GOOGLE_API_KEY" \
+        "$COPILOT_OPENAI_API_KEY" \
+        "$COPILOT_PERPLEXITY_API_KEY" \
+        "$COPILOT_ANTHROPIC_API_KEY" \
+        "$COPILOT_EXA_API_KEY" > ./packages/backend/server/config.json

.github/helm/affine/charts/doc/templates/monitoring.yaml

@@ -1,12 +1,11 @@
 {{- if eq .Values.global.deployment.platform "gcp" -}}
 apiVersion: monitoring.googleapis.com/v1
-kind: PodMonitoring
+kind: ClusterPodMonitoring
 metadata:
-  name: "{{ .Release.Name }}-monitoring"
+  name: "{{ include "doc.fullname" . }}"
 spec:
   selector:
-    matchLabels:
-      app.kubernetes.io/instance: {{ .Release.Name }}
+    {{- include "doc.selectorLabels" . | nindent 4 }}
   endpoints:
     - port: 9464
       interval: 30s

.github/helm/affine/charts/graphql/templates/monitoring.yaml

@@ -0,0 +1,12 @@
+{{- if eq .Values.global.deployment.platform "gcp" -}}
+apiVersion: monitoring.googleapis.com/v1
+kind: ClusterPodMonitoring
+metadata:
+  name: "{{ include "graphql.fullname" . }}"
+spec:
+  selector:
+    {{- include "graphql.selectorLabels" . | nindent 4 }}
+  endpoints:
+    - port: 9464
+      interval: 30s
+{{- end }}

.github/helm/affine/charts/renderer/templates/monitoring.yaml

@@ -0,0 +1,12 @@
+{{- if eq .Values.global.deployment.platform "gcp" -}}
+apiVersion: monitoring.googleapis.com/v1
+kind: ClusterPodMonitoring
+metadata:
+  name: "{{ include "renderer.fullname" . }}"
+spec:
+  selector:
+    {{- include "renderer.selectorLabels" . | nindent 4 }}
+  endpoints:
+    - port: 9464
+      interval: 30s	
+{{- end }}

.github/helm/affine/charts/sync/templates/monitoring.yaml

@@ -0,0 +1,12 @@
+{{- if eq .Values.global.deployment.platform "gcp" -}}
+apiVersion: monitoring.googleapis.com/v1
+kind: ClusterPodMonitoring
+metadata:
+  name: "{{ include "sync.fullname" . }}"
+spec:
+  selector:
+    {{- include "sync.selectorLabels" . | nindent 4 }}
+  endpoints:
+    - port: 9464
+      interval: 30s
+{{- end }}

.github/workflows/build-images.yml

@@ -113,7 +113,6 @@ jobs:
   build-server-native:
     name: Build Server native - ${{ matrix.targets.name }}
     runs-on: ubuntu-latest
-    environment: ${{ github.event.inputs.flavor }}
     strategy:
       fail-fast: false
       matrix:
@@ -139,7 +138,6 @@ jobs:
         uses: ./.github/actions/build-rust
         env:
           AFFINE_PRO_PUBLIC_KEY: ${{ secrets.AFFINE_PRO_PUBLIC_KEY }}
-          AFFINE_PRO_LICENSE_AES_KEY: ${{ secrets.AFFINE_PRO_LICENSE_AES_KEY }}
         with:
           target: ${{ matrix.targets.name }}
           package: '@affine/server-native'

.github/workflows/build-test.yml

@@ -20,7 +20,6 @@ env:
   COVERAGE: true
   MACOSX_DEPLOYMENT_TARGET: '10.13'
   DEPLOYMENT_TYPE: affine
-  AFFINE_INDEXER_ENABLED: true
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -152,8 +151,7 @@ jobs:
       - name: Clippy
         run: |
           rustup component add clippy
-          cargo clippy --workspace --exclude affine_server_native --all-targets --all-features -- -D warnings
-          cargo clippy -p affine_server_native --all-targets --all-features -- -D warnings
+          cargo clippy --all-targets --all-features -- -D warnings
 
   check-git-status:
     name: Check Git Status
@@ -925,7 +923,7 @@ jobs:
         uses: taiki-e/install-action@nextest
 
       - name: Run tests
-        run: cargo nextest run --workspace --exclude affine_server_native --features use-as-lib --release --no-fail-fast
+        run: cargo nextest run --release --no-fail-fast
 
   copilot-api-test:
     name: Server Copilot Api Test
@@ -1003,7 +1001,12 @@ jobs:
       - name: Prepare Server Test Environment
         if: ${{ steps.check-blocksuite-update.outputs.skip != 'true' || steps.apifilter.outputs.changed == 'true' }}
         env:
-          SERVER_CONFIG: ${{ secrets.TEST_SERVER_CONFIG }}
+          COPILOT_OPENAI_API_KEY: ${{ secrets.COPILOT_OPENAI_API_KEY }}
+          COPILOT_GOOGLE_API_KEY: ${{ secrets.COPILOT_GOOGLE_API_KEY }}
+          COPILOT_FAL_API_KEY: ${{ secrets.COPILOT_FAL_API_KEY }}
+          COPILOT_PERPLEXITY_API_KEY: ${{ secrets.COPILOT_PERPLEXITY_API_KEY }}
+          COPILOT_ANTHROPIC_API_KEY: ${{ secrets.COPILOT_ANTHROPIC_API_KEY }}
+          COPILOT_EXA_API_KEY: ${{ secrets.COPILOT_EXA_API_KEY }}
         uses: ./.github/actions/server-test-env
 
       - name: Run server tests
@@ -1102,7 +1105,12 @@ jobs:
       - name: Prepare Server Test Environment
         if: ${{ steps.check-blocksuite-update.outputs.skip != 'true' || steps.e2efilter.outputs.changed == 'true' }}
         env:
-          SERVER_CONFIG: ${{ secrets.TEST_SERVER_CONFIG }}
+          COPILOT_OPENAI_API_KEY: ${{ secrets.COPILOT_OPENAI_API_KEY }}
+          COPILOT_GOOGLE_API_KEY: ${{ secrets.COPILOT_GOOGLE_API_KEY }}
+          COPILOT_FAL_API_KEY: ${{ secrets.COPILOT_FAL_API_KEY }}
+          COPILOT_PERPLEXITY_API_KEY: ${{ secrets.COPILOT_PERPLEXITY_API_KEY }}
+          COPILOT_ANTHROPIC_API_KEY: ${{ secrets.COPILOT_ANTHROPIC_API_KEY }}
+          COPILOT_EXA_API_KEY: ${{ secrets.COPILOT_EXA_API_KEY }}
         uses: ./.github/actions/server-test-env
 
       - name: Run Copilot E2E Test ${{ matrix.shardIndex }}/${{ matrix.shardTotal }}

.github/workflows/copilot-test.yml

@@ -81,7 +81,12 @@ jobs:
 
       - name: Prepare Server Test Environment
         env:
-          SERVER_CONFIG: ${{ secrets.TEST_SERVER_CONFIG }}
+          COPILOT_OPENAI_API_KEY: ${{ secrets.COPILOT_OPENAI_API_KEY }}
+          COPILOT_FAL_API_KEY: ${{ secrets.COPILOT_FAL_API_KEY }}
+          COPILOT_GOOGLE_API_KEY: ${{ secrets.COPILOT_GOOGLE_API_KEY }}
+          COPILOT_PERPLEXITY_API_KEY: ${{ secrets.COPILOT_PERPLEXITY_API_KEY }}
+          COPILOT_ANTHROPIC_API_KEY: ${{ secrets.COPILOT_ANTHROPIC_API_KEY }}
+          COPILOT_EXA_API_KEY: ${{ secrets.COPILOT_EXA_API_KEY }}
         uses: ./.github/actions/server-test-env
 
       - name: Run server tests
@@ -151,7 +156,12 @@ jobs:
 
       - name: Prepare Server Test Environment
         env:
-          SERVER_CONFIG: ${{ secrets.TEST_SERVER_CONFIG }}
+          COPILOT_OPENAI_API_KEY: ${{ secrets.COPILOT_OPENAI_API_KEY }}
+          COPILOT_FAL_API_KEY: ${{ secrets.COPILOT_FAL_API_KEY }}
+          COPILOT_GOOGLE_API_KEY: ${{ secrets.COPILOT_GOOGLE_API_KEY }}
+          COPILOT_PERPLEXITY_API_KEY: ${{ secrets.COPILOT_PERPLEXITY_API_KEY }}
+          COPILOT_ANTHROPIC_API_KEY: ${{ secrets.COPILOT_ANTHROPIC_API_KEY }}
+          COPILOT_EXA_API_KEY: ${{ secrets.COPILOT_EXA_API_KEY }}
         uses: ./.github/actions/server-test-env
 
       - name: Run Copilot E2E Test ${{ matrix.shardIndex }}/${{ matrix.shardTotal }}

.github/workflows/release-mobile.yml

@@ -117,10 +117,31 @@ jobs:
           name: android
           path: packages/frontend/apps/android/dist
 
-  ios:
-    runs-on: ${{ github.ref_name == 'canary' && 'macos-latest' || 'blaze/macos-14' }}
+  determine-ios-runner:
+    runs-on: ubuntu-latest
     needs:
       - build-ios-web
+    outputs:
+      RUNNER: ${{ steps.runner.outputs.RUNNER }}
+    steps:
+      - name: Determine Runner
+        id: runner
+        # Randomly pick runner with 80% chance for blaze/macos-14 and 20% chance for namespace-profile-macos
+        # blaze/macos-14 is free but has limited concurrency
+        run: |
+          RANDOM_NUMBER=$(( $RANDOM % 100 + 1 ))
+          if [ $RANDOM_NUMBER -le 20 ]; then
+            echo "Selected namespace-profile-macos (20% probability)"
+            echo "RUNNER=namespace-profile-macos" >> $GITHUB_OUTPUT
+          else
+            echo "Selected blaze/macos-14 (80% probability)"
+            echo "RUNNER=blaze/macos-14" >> $GITHUB_OUTPUT
+          fi
+
+  ios:
+    runs-on: ${{ github.ref_name == 'canary' && 'macos-latest' || needs.determine-ios-runner.outputs.RUNNER }}
+    needs:
+      - determine-ios-runner
     steps:
       - uses: actions/checkout@v4
       - name: Download mobile artifact

Cargo.toml

@@ -47,9 +47,9 @@ log                    = "0.4"
 loom                   = { version = "0.7", features = ["checkpoint"] }
 mimalloc               = "0.1"
 nanoid                 = "0.4"
-napi                   = { version = "3.0.0-beta.3", features = ["async", "chrono_date", "error_anyhow", "napi9", "serde"] }
+napi                   = { version = "3.0.0-alpha.31", features = ["async", "chrono_date", "error_anyhow", "napi9", "serde"] }
 napi-build             = { version = "2" }
-napi-derive            = { version = "3.0.0-beta.3" }
+napi-derive            = { version = "3.0.0-alpha.28" }
 nom                    = "8"
 notify                 = { version = "8", features = ["serde"] }
 objc2                  = "0.6"
@@ -57,7 +57,7 @@ objc2-foundation       = "0.3"
 once_cell              = "1"
 ordered-float          = "5"
 parking_lot            = "0.12"
-path-ext               = "0.1.2"
+path-ext               = "0.1.1"
 pdf-extract            = { git = "https://github.com/toeverything/pdf-extract", branch = "darksky/improve-font-decoding" }
 phf                    = { version = "0.11", features = ["macros"] }
 proptest               = "1.3"
@@ -77,12 +77,12 @@ smol_str               = "0.3"
 sqlx                   = { version = "0.8", default-features = false, features = ["chrono", "macros", "migrate", "runtime-tokio", "sqlite", "tls-rustls"] }
 strum_macros           = "0.27.0"
 symphonia              = { version = "0.5", features = ["all", "opt-simd"] }
-text-splitter          = "0.27"
+text-splitter          = "0.25"
 thiserror              = "2"
-tiktoken-rs            = "0.7"
-tokio                  = "1.45"
+tiktoken-rs            = "0.6"
+tokio                  = "1.37"
 tree-sitter            = { version = "0.25" }
-tree-sitter-c          = { version = "0.24" }
+tree-sitter-c          = { version = "0.23" }
 tree-sitter-c-sharp    = { version = "0.23" }
 tree-sitter-cpp        = { version = "0.23" }
 tree-sitter-go         = { version = "0.23" }

blocksuite/affine/all/src/__tests__/adapters/markdown.unit.spec.ts

@@ -4393,61 +4393,6 @@ hhh
           },
           children: [],
         },
-        {
-          type: 'block',
-          id: 'matchesReplaceMap[2]',
-          flavour: 'affine:paragraph',
-          props: {
-            type: 'h6',
-            text: {
-              '$blocksuite:internal:text$': true,
-              delta: [
-                {
-                  insert: 'Sources',
-                },
-              ],
-            },
-            collapsed: true,
-          },
-          children: [],
-        },
-        {
-          type: 'block',
-          id: 'matchesReplaceMap[3]',
-          flavour: 'affine:bookmark',
-          props: {
-            style: 'citation',
-            url,
-            title,
-            description,
-            icon: favicon,
-            footnoteIdentifier: '1',
-          },
-          children: [],
-        },
-        {
-          type: 'block',
-          id: 'matchesReplaceMap[4]',
-          flavour: 'affine:embed-linked-doc',
-          props: {
-            style: 'citation',
-            pageId: 'deadbeef',
-            footnoteIdentifier: '2',
-          },
-          children: [],
-        },
-        {
-          type: 'block',
-          id: 'matchesReplaceMap[5]',
-          flavour: 'affine:attachment',
-          props: {
-            name: 'test.txt',
-            sourceId: 'abcdefg',
-            footnoteIdentifier: '3',
-            style: 'citation',
-          },
-          children: [],
-        },
       ],
     };
 
@@ -4524,38 +4469,6 @@ hhh
             },
             children: [],
           },
-          {
-            type: 'block',
-            id: 'matchesReplaceMap[2]',
-            flavour: 'affine:paragraph',
-            props: {
-              type: 'h6',
-              text: {
-                '$blocksuite:internal:text$': true,
-                delta: [
-                  {
-                    insert: 'Sources',
-                  },
-                ],
-              },
-              collapsed: true,
-            },
-            children: [],
-          },
-          {
-            type: 'block',
-            id: 'matchesReplaceMap[3]',
-            flavour: 'affine:bookmark',
-            props: {
-              style: 'citation',
-              url,
-              title,
-              description,
-              icon: favicon,
-              footnoteIdentifier: '1',
-            },
-            children: [],
-          },
         ],
       };
 

blocksuite/affine/blocks/attachment/package.json

@@ -23,7 +23,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.14",
     "file-type": "^21.0.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

blocksuite/affine/blocks/attachment/src/adapters/markdown.ts

@@ -10,6 +10,7 @@ import {
   isFootnoteDefinitionNode,
   type MarkdownAST,
 } from '@blocksuite/affine-shared/adapters';
+import { FeatureFlagService } from '@blocksuite/affine-shared/services';
 import { nanoid } from '@blocksuite/store';
 
 const isAttachmentFootnoteDefinitionNode = (node: MarkdownAST) => {
@@ -35,7 +36,15 @@ export const attachmentBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher
     fromMatch: o => o.node.flavour === AttachmentBlockSchema.model.flavour,
     toBlockSnapshot: {
       enter: (o, context) => {
-        if (!isFootnoteDefinitionNode(o.node)) {
+        const { provider } = context;
+        let enableCitation = false;
+        try {
+          const featureFlagService = provider?.get(FeatureFlagService);
+          enableCitation = !!featureFlagService?.getFlag('enable_citation');
+        } catch {
+          enableCitation = false;
+        }
+        if (!isFootnoteDefinitionNode(o.node) || !enableCitation) {
           return;
         }
 
@@ -64,7 +73,6 @@ export const attachmentBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher
                   name: fileName,
                   sourceId: blobId,
                   footnoteIdentifier,
-                  style: 'citation',
                 },
                 children: [],
               },

blocksuite/affine/blocks/attachment/src/attachment-block.ts

@@ -4,7 +4,7 @@ import {
 } from '@blocksuite/affine-components/caption';
 import {
   getAttachmentFileIcon,
-  LoadingIcon,
+  getLoadingIconWith,
 } from '@blocksuite/affine-components/icons';
 import { Peekable } from '@blocksuite/affine-components/peek';
 import {
@@ -17,10 +17,10 @@ import {
   AttachmentBlockStyles,
 } from '@blocksuite/affine-model';
 import {
-  CitationProvider,
   DocModeProvider,
   FileSizeLimitProvider,
   TelemetryProvider,
+  ThemeProvider,
 } from '@blocksuite/affine-shared/services';
 import { formatSize } from '@blocksuite/affine-shared/utils';
 import {
@@ -38,7 +38,6 @@ import { type ClassInfo, classMap } from 'lit/directives/class-map.js';
 import { guard } from 'lit/directives/guard.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
-import { filter } from 'rxjs/operators';
 
 import { AttachmentEmbedProvider } from './embed';
 import { styles } from './styles';
@@ -66,11 +65,6 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
     return this.resourceController.blobUrl$.value;
   }
 
-  get filetype() {
-    const name = this.model.props.name$.value;
-    return name.split('.').pop() ?? '';
-  }
-
   protected containerStyleMap = styleMap({
     position: 'relative',
     width: '100%',
@@ -81,12 +75,8 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
     return this.std.get(FileSizeLimitProvider).maxFileSize;
   }
 
-  get citationService() {
-    return this.std.get(CitationProvider);
-  }
-
   get isCitation() {
-    return this.citationService.isCitationModel(this.model);
+    return !!this.model.props.footnoteIdentifier;
   }
 
   convertTo = () => {
@@ -145,34 +135,6 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
     selectionManager.setGroup('note', [blockSelection]);
   }
 
-  private readonly _trackCitationDeleteEvent = () => {
-    // Check citation delete event
-    this._disposables.add(
-      this.std.store.slots.blockUpdated
-        .pipe(
-          filter(payload => {
-            if (!payload.isLocal) return false;
-
-            const { flavour, id, type } = payload;
-            if (
-              type !== 'delete' ||
-              flavour !== this.model.flavour ||
-              id !== this.model.id
-            )
-              return false;
-
-            const { model } = payload;
-            if (!this.citationService.isCitationModel(model)) return false;
-
-            return true;
-          })
-        )
-        .subscribe(() => {
-          this.citationService.trackEvent('Delete');
-        })
-    );
-  };
-
   override connectedCallback() {
     super.connectedCallback();
 
@@ -196,8 +158,6 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
         });
       });
     }
-
-    this._trackCitationDeleteEvent();
   }
 
   override firstUpdated() {
@@ -253,23 +213,13 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
     );
   };
 
-  protected renderNormalButton = (needUpload: boolean) => {
-    const label = needUpload ? 'retry' : 'reload';
-    const run = async () => {
-      if (needUpload) {
-        await this.resourceController.upload();
-        return;
-      }
-
-      this.refreshData();
-    };
-
+  protected renderReloadButton = () => {
     return html`
       <button
         class="affine-attachment-content-button"
         @click=${(event: MouseEvent) => {
           event.stopPropagation();
-          run().catch(console.error);
+          this.refreshData();
 
           {
             const mode =
@@ -281,28 +231,21 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
                 segment,
                 page: `${segment} editor`,
                 module: 'attachment',
-                control: label,
+                control: 'reload',
                 category: 'card',
-                type: this.filetype,
+                type: this.model.props.name.split('.').pop() ?? '',
               });
           }
         }}
       >
-        ${ResetIcon()} ${label}
+        ${ResetIcon()} Reload
       </button>
     `;
   };
 
   protected renderWithHorizontal(
     classInfo: ClassInfo,
-    {
-      icon,
-      title,
-      description,
-      kind,
-      state,
-      needUpload,
-    }: AttachmentResolvedStateInfo
+    { icon, title, description, kind, state }: AttachmentResolvedStateInfo
   ) {
     return html`
       <div class=${classMap(classInfo)}>
@@ -319,7 +262,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
               ${description}
             </div>
             ${choose(state, [
-              ['error', () => this.renderNormalButton(needUpload)],
+              ['error', this.renderReloadButton],
               ['error:oversize', this.renderUpgradeButton],
             ])}
           </div>
@@ -332,14 +275,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
 
   protected renderWithVertical(
     classInfo: ClassInfo,
-    {
-      icon,
-      title,
-      description,
-      kind,
-      state,
-      needUpload,
-    }: AttachmentResolvedStateInfo
+    { icon, title, description, kind, state }: AttachmentResolvedStateInfo
   ) {
     return html`
       <div class=${classMap(classInfo)}>
@@ -359,7 +295,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
         <div class="affine-attachment-banner">
           ${kind}
           ${choose(state, [
-            ['error', () => this.renderNormalButton(needUpload)],
+            ['error', this.renderReloadButton],
             ['error:oversize', this.renderUpgradeButton],
           ])}
         </div>
@@ -368,12 +304,15 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
   }
 
   protected resolvedState$ = computed<AttachmentResolvedStateInfo>(() => {
+    const theme = this.std.get(ThemeProvider).theme$.value;
+    const loadingIcon = getLoadingIconWith(theme);
+
     const size = this.model.props.size;
     const name = this.model.props.name$.value;
-    const kind = getAttachmentFileIcon(this.filetype);
+    const kind = getAttachmentFileIcon(name.split('.').pop() ?? '');
 
     const resolvedState = this.resourceController.resolveStateWith({
-      loadingIcon: LoadingIcon(),
+      loadingIcon,
       errorIcon: WarningIcon(),
       icon: AttachmentIcon(),
       title: name,
@@ -424,16 +363,11 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
         const message = resolvedState.description;
         if (!message) return null;
 
-        const needUpload = resolvedState.needUpload;
-        const action = () =>
-          needUpload ? this.resourceController.upload() : this.reload();
-
         return html`
           <affine-resource-status
             class="affine-attachment-embed-status"
             .message=${message}
-            .needUpload=${needUpload}
-            .action=${action}
+            .reload=${() => this.reload()}
           ></affine-resource-status>
         `;
       })}
@@ -442,10 +376,10 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
 
   private readonly _renderCitation = () => {
     const { name, footnoteIdentifier } = this.model.props;
-    const icon = getAttachmentFileIcon(this.filetype);
-
+    const fileType = name.split('.').pop() ?? '';
+    const fileTypeIcon = getAttachmentFileIcon(fileType);
     return html`<affine-citation-card
-      .icon=${icon}
+      .icon=${fileTypeIcon}
       .citationTitle=${name}
       .citationIdentifier=${footnoteIdentifier}
       .active=${this.selected$.value}

blocksuite/affine/blocks/attachment/src/components/rename-model.ts

@@ -1,7 +1,6 @@
 import { ConfirmIcon } from '@blocksuite/affine-components/icons';
 import { toast } from '@blocksuite/affine-components/toast';
 import type { AttachmentBlockModel } from '@blocksuite/affine-model';
-import { CitationProvider } from '@blocksuite/affine-shared/services';
 import type { EditorHost } from '@blocksuite/std';
 import { html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
@@ -34,7 +33,6 @@ export const RenameModal = ({
 
   let fileName = includeExtension ? nameWithoutExtension : originalName;
   const extension = includeExtension ? originalExtension : '';
-  const citationService = editorHost.std.get(CitationProvider);
 
   const abort = () => abortController.abort();
   const onConfirm = () => {
@@ -46,9 +44,6 @@ export const RenameModal = ({
     model.store.updateBlock(model, {
       name: newFileName,
     });
-    if (citationService.isCitationModel(model)) {
-      citationService.trackEvent('Edit');
-    }
     abort();
   };
   const onInput = (e: InputEvent) => {

blocksuite/affine/blocks/attachment/src/configs/slash-menu.ts

@@ -1,4 +1,4 @@
-import { openSingleFileWith } from '@blocksuite/affine-shared/utils';
+import { openFileOrFiles } from '@blocksuite/affine-shared/utils';
 import { type SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu';
 import { ExportToPdfIcon, FileIcon } from '@blocksuite/icons/lit';
 
@@ -21,7 +21,7 @@ export const attachmentSlashMenuConfig: SlashMenuConfig = {
         model.store.schema.flavourSchemaMap.has('affine:attachment'),
       action: ({ std, model }) => {
         (async () => {
-          const file = await openSingleFileWith();
+          const file = await openFileOrFiles();
           if (!file) return;
 
           await addSiblingAttachmentBlocks(std, [file], model);
@@ -44,7 +44,7 @@ export const attachmentSlashMenuConfig: SlashMenuConfig = {
         model.store.schema.flavourSchemaMap.has('affine:attachment'),
       action: ({ std, model }) => {
         (async () => {
-          const file = await openSingleFileWith();
+          const file = await openFileOrFiles();
           if (!file) return;
 
           await addSiblingAttachmentBlocks(std, [file], model);

blocksuite/affine/blocks/attachment/src/styles.ts

@@ -47,10 +47,11 @@ export const styles = css`
 
   .affine-attachment-content-title-icon {
     display: flex;
+    width: 16px;
+    height: 16px;
     align-items: center;
     justify-content: center;
     color: var(--affine-text-primary-color);
-    font-size: 16px;
   }
 
   .affine-attachment-content-title-text {
@@ -91,7 +92,6 @@ export const styles = css`
     font-size: var(--affine-font-xs);
     font-style: normal;
     font-weight: 500;
-    text-transform: capitalize;
     line-height: 20px;
 
     svg {
@@ -107,7 +107,7 @@ export const styles = css`
 
   .affine-attachment-card.loading {
     .affine-attachment-content-title-text {
-      color: ${unsafeCSSVarV2('text/placeholder')};
+      color: var(--affine-placeholder-color);
     }
   }
 

blocksuite/affine/blocks/bookmark/package.json

@@ -24,7 +24,7 @@
     "@blocksuite/store": "workspace:*",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.14",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "rxjs": "^7.8.1",

blocksuite/affine/blocks/bookmark/src/adapters/markdown/markdown.ts

@@ -10,6 +10,7 @@ import {
   isFootnoteDefinitionNode,
   type MarkdownAST,
 } from '@blocksuite/affine-shared/adapters';
+import { FeatureFlagService } from '@blocksuite/affine-shared/services';
 import { nanoid } from '@blocksuite/store';
 
 const isUrlFootnoteDefinitionNode = (node: MarkdownAST) => {
@@ -32,7 +33,15 @@ export const bookmarkBlockMarkdownAdapterMatcher =
     toMatch: o => isUrlFootnoteDefinitionNode(o.node),
     toBlockSnapshot: {
       enter: (o, context) => {
-        if (!isFootnoteDefinitionNode(o.node)) {
+        const { provider } = context;
+        let enableCitation = false;
+        try {
+          const featureFlagService = provider?.get(FeatureFlagService);
+          enableCitation = !!featureFlagService?.getFlag('enable_citation');
+        } catch {
+          enableCitation = false;
+        }
+        if (!isFootnoteDefinitionNode(o.node) || !enableCitation) {
           return;
         }
 

blocksuite/affine/blocks/bookmark/src/bookmark-block.ts

@@ -8,7 +8,6 @@ import type {
 } from '@blocksuite/affine-model';
 import { ImageProxyService } from '@blocksuite/affine-shared/adapters';
 import {
-  CitationProvider,
   DocModeProvider,
   LinkPreviewServiceIdentifier,
 } from '@blocksuite/affine-shared/services';
@@ -19,7 +18,6 @@ import { html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { type ClassInfo, classMap } from 'lit/directives/class-map.js';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
-import { filter } from 'rxjs/operators';
 
 import { refreshBookmarkUrlData } from './utils.js';
 
@@ -116,12 +114,11 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
     );
   };
 
-  get citationService() {
-    return this.std.get(CitationProvider);
-  }
-
   get isCitation() {
-    return this.citationService.isCitationModel(this.model);
+    return (
+      !!this.model.props.footnoteIdentifier &&
+      this.model.props.style === 'citation'
+    );
   }
 
   get imageProxyService() {
@@ -169,31 +166,6 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
     ></bookmark-card>`;
   };
 
-  private readonly _trackCitationDeleteEvent = () => {
-    // Check citation delete event
-    this._disposables.add(
-      this.std.store.slots.blockUpdated
-        .pipe(
-          filter(payload => {
-            if (!payload.isLocal) return false;
-            const { flavour, id, type } = payload;
-            if (
-              type !== 'delete' ||
-              flavour !== this.model.flavour ||
-              id !== this.model.id
-            )
-              return false;
-            const { model } = payload;
-            if (!this.citationService.isCitationModel(model)) return false;
-            return true;
-          })
-        )
-        .subscribe(() => {
-          this.citationService.trackEvent('Delete');
-        })
-    );
-  };
-
   override connectedCallback() {
     super.connectedCallback();
 
@@ -231,8 +203,6 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
         }
       })
     );
-
-    this._trackCitationDeleteEvent();
   }
 
   override disconnectedCallback(): void {

blocksuite/affine/blocks/bookmark/src/bookmark-edgeless-block.ts

@@ -29,15 +29,6 @@ export class BookmarkEdgelessBlockComponent extends toGfxBlockComponent(
     };
   }
 
-  override connectedCallback(): void {
-    super.connectedCallback();
-    this.disposables.add(
-      this.gfx.selection.slots.updated.subscribe(() => {
-        this.requestUpdate();
-      })
-    );
-  }
-
   override renderGfxBlock() {
     const style = this.model.props.style$.value;
     const width = EMBED_CARD_WIDTH[style];
@@ -45,14 +36,12 @@ export class BookmarkEdgelessBlockComponent extends toGfxBlockComponent(
     const bound = this.model.elementBound;
     const scaleX = bound.w / width;
     const scaleY = bound.h / height;
-    const isSelected = this.gfx.selection.has(this.model.id);
 
     this.containerStyleMap = styleMap({
       width: `100%`,
       height: `100%`,
       transform: `scale(${scaleX}, ${scaleY})`,
       transformOrigin: '0 0',
-      pointerEvents: isSelected ? 'auto' : 'none',
     });
 
     return this.renderPageContent();

blocksuite/affine/blocks/bookmark/src/components/bookmark-card.ts

@@ -1,5 +1,5 @@
 import { getEmbedCardIcons } from '@blocksuite/affine-block-embed';
-import { LoadingIcon, WebIcon16 } from '@blocksuite/affine-components/icons';
+import { WebIcon16 } from '@blocksuite/affine-components/icons';
 import { ImageProxyService } from '@blocksuite/affine-shared/adapters';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { getHostName } from '@blocksuite/affine-shared/utils';
@@ -60,11 +60,11 @@ export class BookmarkCard extends SignalWatcher(
         : title;
 
     const theme = this.bookmark.std.get(ThemeProvider).theme;
-    const { EmbedCardBannerIcon } = getEmbedCardIcons(theme);
+    const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
     const imageProxyService = this.bookmark.store.get(ImageProxyService);
 
     const titleIcon = this.loading
-      ? LoadingIcon()
+      ? LoadingIcon
       : icon
         ? html`<img src=${imageProxyService.buildUrl(icon)} alt="icon" />`
         : WebIcon16;

blocksuite/affine/blocks/bookmark/src/configs/toolbar.ts

@@ -407,7 +407,7 @@ const builtinSurfaceToolbarConfig = {
               if (options?.viewType !== 'embed') return;
 
               const { flavour, styles } = options;
-              let style: EmbedCardStyle = model.props.style;
+              let { style } = model.props;
 
               if (!styles.includes(style)) {
                 style = styles[0];
@@ -482,26 +482,24 @@ const builtinSurfaceToolbarConfig = {
     } satisfies ToolbarActionGroup<ToolbarAction>,
     {
       id: 'b.style',
-      actions: (
-        [
-          {
-            id: 'horizontal',
-            label: 'Large horizontal style',
-          },
-          {
-            id: 'list',
-            label: 'Small horizontal style',
-          },
-          {
-            id: 'vertical',
-            label: 'Large vertical style',
-          },
-          {
-            id: 'cube',
-            label: 'Small vertical style',
-          },
-        ] as const
-      ).filter(action => BookmarkStyles.includes(action.id)),
+      actions: [
+        {
+          id: 'horizontal',
+          label: 'Large horizontal style',
+        },
+        {
+          id: 'list',
+          label: 'Small horizontal style',
+        },
+        {
+          id: 'vertical',
+          label: 'Large vertical style',
+        },
+        {
+          id: 'cube',
+          label: 'Small vertical style',
+        },
+      ].filter(action => BookmarkStyles.includes(action.id as EmbedCardStyle)),
       content(ctx) {
         const model = ctx.getCurrentModelByType(BookmarkBlockModel);
         if (!model) return null;

blocksuite/affine/blocks/callout/package.json

@@ -25,7 +25,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.14",
     "@types/mdast": "^4.0.4",
     "emoji-mart": "^5.6.0",
     "lit": "^3.2.0",

blocksuite/affine/blocks/callout/src/callout-block.ts

@@ -12,7 +12,6 @@ import type { BlockComponent } from '@blocksuite/std';
 import { flip, offset } from '@floating-ui/dom';
 import { css, html } from 'lit';
 import { query } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
 export class CalloutBlockComponent extends CaptionedBlockComponent<CalloutBlockModel> {
   static override styles = css`
     :host {
@@ -110,18 +109,14 @@ export class CalloutBlockComponent extends CaptionedBlockComponent<CalloutBlockM
   }
 
   override renderBlock() {
-    const emoji = this.model.props.emoji$.value;
     return html`
       <div class="affine-callout-block-container">
         <div
           @click=${this._toggleEmojiMenu}
           contenteditable="false"
           class="affine-callout-emoji-container"
-          style=${styleMap({
-            display: emoji.length === 0 ? 'none' : undefined,
-          })}
         >
-          <span class="affine-callout-emoji">${emoji}</span>
+          <span class="affine-callout-emoji">${this.model.props.emoji$}</span>
         </div>
         <div class="affine-callout-children">
           ${this.renderChildren(this.model)}

blocksuite/affine/blocks/code/package.json

@@ -27,7 +27,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.14",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

blocksuite/affine/blocks/code/src/code-block.ts

@@ -40,16 +40,6 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
 
   private _inlineRangeProvider: InlineRangeProvider | null = null;
 
-  private readonly _localPreview$ = signal<boolean | null>(null);
-
-  preview$: Signal<boolean> = computed(() => {
-    const modelPreview = !!this.model.props.preview$.value;
-    if (this.store.readonly) {
-      return this._localPreview$.value ?? modelPreview;
-    }
-    return modelPreview;
-  });
-
   highlightTokens$: Signal<ThemedToken[][]> = signal([]);
 
   languageName$: Signal<string> = computed(() => {
@@ -403,7 +393,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
         true) &&
       (this.model.props.lineNumber ?? true);
 
-    const preview = this.preview$.value;
+    const preview = !!this.model.props.preview;
     const previewContext = this.std.getOptional(
       CodeBlockPreviewIdentifier(this.model.props.language ?? '')
     );
@@ -471,14 +461,6 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
   override accessor useCaptionEditor = true;
 
   override accessor useZeroWidth = true;
-
-  setPreviewState(preview: boolean) {
-    if (this.store.readonly) {
-      this._localPreview$.value = preview;
-    } else {
-      this.store.updateBlock(this.model, { preview });
-    }
-  }
 }
 
 declare global {

blocksuite/affine/blocks/code/src/code-toolbar/components/code-toolbar.ts

@@ -35,10 +35,14 @@ export class AffineCodeToolbar extends WithDisposable(LitElement) {
 
     .code-toolbar-button {
       color: ${unsafeCSSVarV2('icon/primary')};
-      background-color: ${unsafeCSSVarV2('button/secondary')};
+      background-color: ${unsafeCSSVarV2('segment/background')};
       box-shadow: var(--affine-shadow-1);
       border-radius: 4px;
     }
+
+    .copy-code {
+      margin-left: auto;
+    }
   `;
 
   private _currentOpenMenu: AbortController | null = null;

blocksuite/affine/blocks/code/src/code-toolbar/components/lang-button.ts

@@ -4,10 +4,6 @@ import {
   showPopFilterableList,
 } from '@blocksuite/affine-components/filterable-list';
 import { ArrowDownIcon } from '@blocksuite/affine-components/icons';
-import {
-  DocModeProvider,
-  TelemetryProvider,
-} from '@blocksuite/affine-shared/services';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import { noop } from '@blocksuite/global/utils';
@@ -77,18 +73,6 @@ export class LanguageListButton extends WithDisposable(
         this.blockComponent.store.transact(() => {
           this.blockComponent.model.props.language$.value = item.name;
         });
-
-        const std = this.blockComponent.std;
-        const mode =
-          std.getOptional(DocModeProvider)?.getEditorMode() ?? 'page';
-        const telemetryService = std.getOptional(TelemetryProvider);
-        if (!telemetryService) return;
-        telemetryService.track('codeBlockLanguageSelect', {
-          page: mode,
-          segment: 'code block',
-          module: 'language selector',
-          control: item.name,
-        });
       },
       active: item => item.name === this.blockComponent.model.props.language,
       items: this._sortedBundledLanguages,

blocksuite/affine/blocks/code/src/code-toolbar/components/preview-button.ts

@@ -1,7 +1,3 @@
-import {
-  DocModeProvider,
-  TelemetryProvider,
-} from '@blocksuite/affine-shared/services';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import { css, html, LitElement, nothing } from 'lit';
@@ -13,10 +9,6 @@ import { CodeBlockPreviewIdentifier } from '../../code-preview-extension';
 
 export class PreviewButton extends WithDisposable(SignalWatcher(LitElement)) {
   static override styles = css`
-    :host {
-      margin-right: auto;
-    }
-
     .preview-toggle-container {
       display: flex;
       padding: 2px;
@@ -58,22 +50,15 @@ export class PreviewButton extends WithDisposable(SignalWatcher(LitElement)) {
   `;
 
   private readonly _toggle = (value: boolean) => {
-    this.blockComponent.setPreviewState(value);
+    if (this.blockComponent.store.readonly) return;
 
-    const std = this.blockComponent.std;
-    const mode = std.getOptional(DocModeProvider)?.getEditorMode() ?? 'page';
-    const telemetryService = std.getOptional(TelemetryProvider);
-    if (!telemetryService) return;
-    telemetryService.track('htmlBlockTogglePreview', {
-      page: mode,
-      segment: 'code block',
-      module: 'code toolbar container',
-      control: 'preview toggle button',
+    this.blockComponent.store.updateBlock(this.blockComponent.model, {
+      preview: value,
     });
   };
 
   get preview() {
-    return this.blockComponent.preview$.value;
+    return !!this.blockComponent.model.props.preview$.value;
   }
 
   override render() {

blocksuite/affine/blocks/code/src/code-toolbar/config.ts

@@ -117,12 +117,13 @@ export const PRIMARY_GROUPS: MenuItemGroup<CodeBlockToolbarContext>[] = [
   },
 ];
 
-export const toggleGroup: MenuItemGroup<CodeBlockToolbarContext> = {
-  type: 'toggle',
+// Clipboard Group
+export const clipboardGroup: MenuItemGroup<CodeBlockToolbarContext> = {
+  type: 'clipboard',
   items: [
     {
       type: 'wrap',
-      generate: ({ blockComponent }) => {
+      generate: ({ blockComponent, close }) => {
         return {
           action: () => {},
           render: () => {
@@ -133,6 +134,7 @@ export const toggleGroup: MenuItemGroup<CodeBlockToolbarContext> = {
               <editor-menu-action
                 @click=${() => {
                   blockComponent.setWrap(!wrapped);
+                  close();
                 }}
                 aria-label=${label}
               >
@@ -153,7 +155,7 @@ export const toggleGroup: MenuItemGroup<CodeBlockToolbarContext> = {
       when: ({ std }) =>
         std.getOptional(CodeBlockConfigExtension.identifier)?.showLineNumbers ??
         true,
-      generate: ({ blockComponent }) => {
+      generate: ({ blockComponent, close }) => {
         return {
           action: () => {},
           render: () => {
@@ -165,6 +167,8 @@ export const toggleGroup: MenuItemGroup<CodeBlockToolbarContext> = {
                   blockComponent.store.updateBlock(blockComponent.model, {
                     lineNumber: !lineNumber,
                   });
+
+                  close();
                 }}
                 aria-label=${label}
               >
@@ -180,13 +184,6 @@ export const toggleGroup: MenuItemGroup<CodeBlockToolbarContext> = {
         };
       },
     },
-  ],
-};
-
-// Clipboard Group
-export const clipboardGroup: MenuItemGroup<CodeBlockToolbarContext> = {
-  type: 'clipboard',
-  items: [
     {
       type: 'duplicate',
       label: 'Duplicate',
@@ -236,7 +233,6 @@ export const deleteGroup: MenuItemGroup<CodeBlockToolbarContext> = {
 };
 
 export const MORE_GROUPS: MenuItemGroup<CodeBlockToolbarContext>[] = [
-  toggleGroup,
   clipboardGroup,
   deleteGroup,
 ];

blocksuite/affine/blocks/data-view/package.json

@@ -24,7 +24,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.14",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

blocksuite/affine/blocks/data-view/src/data-view-block.ts

@@ -23,9 +23,9 @@ import {
   createRecordDetail,
   createUniComponentFromWebComponent,
   type DataSource,
+  DataView,
   dataViewCommonStyle,
   type DataViewProps,
-  DataViewRootUILogic,
   type DataViewSelection,
   type DataViewWidget,
   type DataViewWidgetProps,
@@ -133,6 +133,8 @@ export class DataViewBlockComponent extends CaptionedBlockComponent<DataViewBloc
 
   private _dataSource?: DataSource;
 
+  private readonly dataView = new DataView();
+
   _bindHotkey: DataViewProps['bindHotkey'] = hotkeys => {
     return {
       dispose: this.host.event.bindHotkey(hotkeys, {
@@ -230,6 +232,10 @@ export class DataViewBlockComponent extends CaptionedBlockComponent<DataViewBloc
     return this.rootComponent;
   }
 
+  get view() {
+    return this.dataView.expose;
+  }
+
   private renderDatabaseOps() {
     if (this.store.readonly) {
       return nothing;
@@ -244,68 +250,68 @@ export class DataViewBlockComponent extends CaptionedBlockComponent<DataViewBloc
 
     this.setAttribute(RANGE_SYNC_EXCLUDE_ATTR, 'true');
   }
-  private readonly dataViewRootLogic = new DataViewRootUILogic({
-    virtualPadding$: signal(0),
-    bindHotkey: this._bindHotkey,
-    handleEvent: this._handleEvent,
-    selection$: this.selection$,
-    setSelection: this.setSelection,
-    dataSource: this.dataSource,
-    headerWidget: this.headerWidget,
-    clipboard: this.std.clipboard,
-    notification: {
-      toast: message => {
-        const notification = this.std.getOptional(NotificationProvider);
-        if (notification) {
-          notification.toast(message);
-        } else {
-          toast(this.host, message);
-        }
-      },
-    },
-    eventTrace: (key, params) => {
-      const telemetryService = this.std.getOptional(TelemetryProvider);
-      telemetryService?.track(key, {
-        ...(params as TelemetryEventMap[typeof key]),
-        blockId: this.blockId,
-      });
-    },
-    detailPanelConfig: {
-      openDetailPanel: (target, data) => {
-        const peekViewService = this.std.getOptional(PeekViewProvider);
-        if (peekViewService) {
-          const template = createRecordDetail({
-            ...data,
-            openDoc: () => {},
-            detail: {
-              header: uniMap(
-                createUniComponentFromWebComponent(BlockRenderer),
-                props => ({
-                  ...props,
-                  host: this.host,
-                })
-              ),
-              note: uniMap(
-                createUniComponentFromWebComponent(NoteRenderer),
-                props => ({
-                  ...props,
-                  model: this.model,
-                  host: this.host,
-                })
-              ),
-            },
-          });
-          return peekViewService.peek({ target, template });
-        } else {
-          return Promise.resolve();
-        }
-      },
-    },
-  });
+
   override renderBlock() {
+    const peekViewService = this.std.getOptional(PeekViewProvider);
+    const telemetryService = this.std.getOptional(TelemetryProvider);
     return html`
       <div contenteditable="false" style="position: relative">
-        ${this.dataViewRootLogic.render()}
+        ${this.dataView.render({
+          virtualPadding$: signal(0),
+          bindHotkey: this._bindHotkey,
+          handleEvent: this._handleEvent,
+          selection$: this.selection$,
+          setSelection: this.setSelection,
+          dataSource: this.dataSource,
+          headerWidget: this.headerWidget,
+          clipboard: this.std.clipboard,
+          notification: {
+            toast: message => {
+              const notification = this.std.getOptional(NotificationProvider);
+              if (notification) {
+                notification.toast(message);
+              } else {
+                toast(this.host, message);
+              }
+            },
+          },
+          eventTrace: (key, params) => {
+            telemetryService?.track(key, {
+              ...(params as TelemetryEventMap[typeof key]),
+              blockId: this.blockId,
+            });
+          },
+          detailPanelConfig: {
+            openDetailPanel: (target, data) => {
+              if (peekViewService) {
+                const template = createRecordDetail({
+                  ...data,
+                  openDoc: () => {},
+                  detail: {
+                    header: uniMap(
+                      createUniComponentFromWebComponent(BlockRenderer),
+                      props => ({
+                        ...props,
+                        host: this.host,
+                      })
+                    ),
+                    note: uniMap(
+                      createUniComponentFromWebComponent(NoteRenderer),
+                      props => ({
+                        ...props,
+                        model: this.model,
+                        host: this.host,
+                      })
+                    ),
+                  },
+                });
+                return peekViewService.peek({ target, template });
+              } else {
+                return Promise.resolve();
+              }
+            },
+          },
+        })}
       </div>
     `;
   }

blocksuite/affine/blocks/database/package.json

@@ -28,7 +28,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.14",
     "@types/mdast": "^4.0.4",
     "date-fns": "^4.0.0",
     "lit": "^3.2.0",

blocksuite/affine/blocks/database/src/components/title/index.ts

@@ -1,19 +1,15 @@
 import { stopPropagation } from '@blocksuite/affine-shared/utils';
-import type { DataViewUILogicBase } from '@blocksuite/data-view';
-import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
+import { WithDisposable } from '@blocksuite/global/lit';
 import { ShadowlessElement } from '@blocksuite/std';
 import type { Text } from '@blocksuite/store';
-import { signal } from '@preact/signals-core';
 import { css, html } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import type { DatabaseBlockComponent } from '../../database-block.js';
 
-export class DatabaseTitle extends SignalWatcher(
-  WithDisposable(ShadowlessElement)
-) {
+export class DatabaseTitle extends WithDisposable(ShadowlessElement) {
   static override styles = css`
     .affine-database-title {
       position: relative;
@@ -75,23 +71,22 @@ export class DatabaseTitle extends SignalWatcher(
   `;
 
   private readonly compositionEnd = () => {
-    this.isComposing$.value = false;
     this.titleText.replace(0, this.titleText.length, this.input.value);
   };
 
   private readonly onBlur = () => {
-    this.isFocus$.value = false;
+    this.isFocus = false;
   };
 
   private readonly onFocus = () => {
-    this.isFocus$.value = true;
-    if (this.dataViewLogic.selection$.value) {
-      this.dataViewLogic.setSelection(undefined);
+    this.isFocus = true;
+    if (this.database?.viewSelection$?.value) {
+      this.database?.setSelection(undefined);
     }
   };
 
   private readonly onInput = (e: InputEvent) => {
-    this.text$.value = this.input.value;
+    this.text = this.input.value;
     if (!e.isComposing) {
       this.titleText.replace(0, this.titleText.length, this.input.value);
     }
@@ -107,9 +102,9 @@ export class DatabaseTitle extends SignalWatcher(
   };
 
   updateText = () => {
-    if (!this.isFocus$.value) {
+    if (!this.isFocus) {
       this.input.value = this.titleText.toString();
-      this.text$.value = this.input.value;
+      this.text = this.input.value;
     }
   };
 
@@ -129,25 +124,25 @@ export class DatabaseTitle extends SignalWatcher(
   }
 
   override render() {
-    const isEmpty = !this.text$.value;
+    const isEmpty = !this.text;
 
     const classList = classMap({
       'affine-database-title': true,
-      ellipsis: !this.isFocus$.value,
+      ellipsis: !this.isFocus,
     });
     const untitledStyle = styleMap({
       height: isEmpty ? 'auto' : 0,
-      opacity: isEmpty && !this.isFocus$.value ? 1 : 0,
+      opacity: isEmpty && !this.isFocus ? 1 : 0,
     });
     return html` <div
       class="${classList}"
       data-title-empty="${isEmpty}"
-      data-title-focus="${this.isFocus$.value}"
+      data-title-focus="${this.isFocus}"
     >
       <div class="text" style="${untitledStyle}">Untitled</div>
-      <div class="text">${this.text$.value}</div>
+      <div class="text">${this.text}</div>
       <textarea
-        .disabled="${this.readonly$.value}"
+        .disabled="${this.readonly}"
         @input="${this.onInput}"
         @keydown="${this.onKeyDown}"
         @copy="${stopPropagation}"
@@ -164,24 +159,23 @@ export class DatabaseTitle extends SignalWatcher(
   @query('textarea')
   private accessor input!: HTMLTextAreaElement;
 
-  private readonly isComposing$ = signal(false);
-  private readonly isFocus$ = signal(false);
+  @state()
+  accessor isComposing = false;
 
-  private onPressEnterKey() {
-    this.dataViewLogic.addRow?.('start');
-  }
+  @state()
+  private accessor isFocus = false;
 
-  get readonly$() {
-    return this.dataViewLogic.view.readonly$;
-  }
+  @property({ attribute: false })
+  accessor onPressEnterKey: (() => void) | undefined = undefined;
 
-  private readonly text$ = signal('');
+  @property({ attribute: false })
+  accessor readonly!: boolean;
+
+  @state()
+  private accessor text = '';
 
   @property({ attribute: false })
   accessor titleText!: Text;
-
-  @property({ attribute: false })
-  accessor dataViewLogic!: DataViewUILogicBase;
 }
 
 declare global {

blocksuite/affine/blocks/database/src/database-block-styles.ts

@@ -1,73 +0,0 @@
-import { css } from '@emotion/css';
-import { cssVarV2 } from '@toeverything/theme/v2';
-
-export const databaseBlockStyles = css({
-  display: 'block',
-  borderRadius: '8px',
-  backgroundColor: 'var(--affine-background-primary-color)',
-  padding: '8px',
-  margin: '8px -8px -8px',
-});
-
-export const databaseBlockSelectedStyles = css({
-  backgroundColor: 'var(--affine-hover-color)',
-  borderRadius: '4px',
-});
-
-export const databaseOpsStyles = css({
-  padding: '2px',
-  borderRadius: '4px',
-  display: 'flex',
-  cursor: 'pointer',
-  alignItems: 'center',
-  height: 'max-content',
-  fontSize: '16px',
-  color: cssVarV2.icon.primary,
-  ':hover': {
-    backgroundColor: 'var(--affine-hover-color)',
-  },
-
-  '@media print': {
-    display: 'none',
-  },
-});
-
-export const databaseHeaderBarStyles = css({
-  '@media print': {
-    display: 'none !important',
-  },
-});
-
-export const databaseTitleStyles = css({
-  overflow: 'hidden',
-});
-
-export const databaseHeaderContainerStyles = css({
-  marginBottom: '16px',
-  display: 'flex',
-  flexDirection: 'column',
-});
-
-export const databaseTitleRowStyles = css({
-  display: 'flex',
-  gap: '12px',
-  marginBottom: '8px',
-  alignItems: 'center',
-});
-
-export const databaseToolbarRowStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  gap: '12px',
-});
-
-export const databaseViewBarContainerStyles = css({
-  flex: 1,
-});
-
-export const databaseContentStyles = css({
-  position: 'relative',
-  backgroundColor: 'var(--affine-background-primary-color)',
-  borderRadius: '4px',
-});

blocksuite/affine/blocks/database/src/database-block.ts

@@ -19,14 +19,15 @@ import { getDropResult } from '@blocksuite/affine-widget-drag-handle';
 import {
   createRecordDetail,
   createUniComponentFromWebComponent,
-  DataViewRootUILogic,
+  DataView,
+  dataViewCommonStyle,
+  type DataViewInstance,
+  type DataViewProps,
   type DataViewSelection,
-  type DataViewUILogicBase,
   type DataViewWidget,
   type DataViewWidgetProps,
   defineUniComponent,
   ExternalGroupByConfigProvider,
-  lazy,
   renderUniLit,
   type SingleView,
   uniMap,
@@ -43,23 +44,12 @@ import { RANGE_SYNC_EXCLUDE_ATTR } from '@blocksuite/std/inline';
 import { Slice } from '@blocksuite/store';
 import { autoUpdate } from '@floating-ui/dom';
 import { computed, signal } from '@preact/signals-core';
-import { html, nothing } from 'lit';
+import { css, html, nothing, unsafeCSS } from 'lit';
 
 import { popSideDetail } from './components/layout.js';
 import { DatabaseConfigExtension } from './config.js';
 import { EditorHostKey } from './context/host-context.js';
 import { DatabaseBlockDataSource } from './data-source.js';
-import {
-  databaseBlockStyles,
-  databaseContentStyles,
-  databaseHeaderBarStyles,
-  databaseHeaderContainerStyles,
-  databaseOpsStyles,
-  databaseTitleRowStyles,
-  databaseTitleStyles,
-  databaseToolbarRowStyles,
-  databaseViewBarContainerStyles,
-} from './database-block-styles.js';
 import { BlockRenderer } from './detail-panel/block-renderer.js';
 import { NoteRenderer } from './detail-panel/note-renderer.js';
 import { DatabaseSelection } from './selection.js';
@@ -68,7 +58,52 @@ import { getSingleDocIdFromText } from './utils/title-doc.js';
 import type { DatabaseViewExtensionOptions } from './view';
 
 export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBlockModel> {
-  private readonly clickDatabaseOps = (e: MouseEvent) => {
+  static override styles = css`
+    ${unsafeCSS(dataViewCommonStyle('affine-database'))}
+    affine-database {
+      display: block;
+      border-radius: 8px;
+      background-color: var(--affine-background-primary-color);
+      padding: 8px;
+      margin: 8px -8px -8px;
+    }
+
+    .database-block-selected {
+      background-color: var(--affine-hover-color);
+      border-radius: 4px;
+    }
+
+    .database-ops {
+      padding: 2px;
+      border-radius: 4px;
+      display: flex;
+      cursor: pointer;
+      align-items: center;
+      height: max-content;
+    }
+
+    .database-ops svg {
+      width: 16px;
+      height: 16px;
+      color: var(--affine-icon-color);
+    }
+
+    .database-ops:hover {
+      background-color: var(--affine-hover-color);
+    }
+
+    @media print {
+      .database-ops {
+        display: none;
+      }
+
+      .database-header-bar {
+        display: none !important;
+      }
+    }
+  `;
+
+  private readonly _clickDatabaseOps = (e: MouseEvent) => {
     const options = this.optionsConfig.configure(this.model, {
       items: [
         menu.input({
@@ -120,33 +155,36 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     });
   };
 
-  private readonly dataSource = lazy(() => {
-    const dataSource = new DatabaseBlockDataSource(this.model, dataSource => {
-      dataSource.serviceSet(EditorHostKey, this.host);
-      this.std.provider
-        .getAll(ExternalGroupByConfigProvider)
-        .forEach(config => {
-          dataSource.serviceSet(
-            ExternalGroupByConfigProvider(config.name),
-            config
-          );
-        });
-    });
-    const id = currentViewStorage.getCurrentView(this.model.id);
-    if (id && dataSource.viewManager.viewGet(id)) {
-      dataSource.viewManager.setCurrentView(id);
-    }
-    return dataSource;
-  });
+  private _dataSource?: DatabaseBlockDataSource;
 
-  private readonly renderTitle = (dataViewLogic: DataViewUILogicBase) => {
+  private readonly dataView = new DataView();
+
+  private readonly renderTitle = (dataViewMethod: DataViewInstance) => {
+    const addRow = () => dataViewMethod.addRow?.('start');
     return html` <affine-database-title
-      class="${databaseTitleStyles}"
+      style="overflow: hidden"
       .titleText="${this.model.props.title}"
-      .dataViewLogic="${dataViewLogic}"
+      .readonly="${this.dataSource.readonly$.value}"
+      .onPressEnterKey="${addRow}"
     ></affine-database-title>`;
   };
 
+  _bindHotkey: DataViewProps['bindHotkey'] = hotkeys => {
+    return {
+      dispose: this.host.event.bindHotkey(hotkeys, {
+        blockId: this.topContenteditableElement?.blockId ?? this.blockId,
+      }),
+    };
+  };
+
+  _handleEvent: DataViewProps['handleEvent'] = (name, handler) => {
+    return {
+      dispose: this.host.event.add(name, handler, {
+        blockId: this.blockId,
+      }),
+    };
+  };
+
   createTemplate = (
     data: {
       view: SingleView;
@@ -180,12 +218,18 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
   headerWidget: DataViewWidget = defineUniComponent(
     (props: DataViewWidgetProps) => {
       return html`
-        <div class="${databaseHeaderContainerStyles}">
-          <div class="${databaseTitleRowStyles}">
-            ${this.renderTitle(props.dataViewLogic)} ${this.renderDatabaseOps()}
+        <div style="margin-bottom: 16px;display:flex;flex-direction: column">
+          <div
+            style="display:flex;gap:12px;margin-bottom: 8px;align-items: center"
+          >
+            ${this.renderTitle(props.dataViewInstance)}
+            ${this.renderDatabaseOps()}
           </div>
-          <div class="${databaseToolbarRowStyles} ${databaseHeaderBarStyles}">
-            <div class="${databaseViewBarContainerStyles}">
+          <div
+            style="display:flex;align-items:center;justify-content: space-between;gap: 12px"
+            class="database-header-bar"
+          >
+            <div style="flex:1">
               ${renderUniLit(widgetPresets.viewBar, {
                 ...props,
                 onChangeView: id => {
@@ -240,9 +284,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     return () => {};
   };
 
-  private readonly setSelection = (
-    selection: DataViewSelection | undefined
-  ) => {
+  setSelection = (selection: DataViewSelection | undefined) => {
     if (selection) {
       getSelection()?.removeAllRanges();
     }
@@ -259,7 +301,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     );
   };
 
-  private readonly toolsWidget: DataViewWidget = widgetPresets.createTools({
+  toolsWidget: DataViewWidget = widgetPresets.createTools({
     table: [
       widgetPresets.tools.filter,
       widgetPresets.tools.sort,
@@ -276,7 +318,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     ],
   });
 
-  private readonly viewSelection$ = computed(() => {
+  viewSelection$ = computed(() => {
     const databaseSelection = this.selection.value.find(
       (selection): selection is DatabaseSelection => {
         if (selection.blockId !== this.blockId) {
@@ -288,7 +330,28 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     return databaseSelection?.viewSelection;
   });
 
-  private readonly virtualPadding$ = signal(0);
+  virtualPadding$ = signal(0);
+
+  get dataSource(): DatabaseBlockDataSource {
+    if (!this._dataSource) {
+      this._dataSource = new DatabaseBlockDataSource(this.model, dataSource => {
+        dataSource.serviceSet(EditorHostKey, this.host);
+        this.std.provider
+          .getAll(ExternalGroupByConfigProvider)
+          .forEach(config => {
+            dataSource.serviceSet(
+              ExternalGroupByConfigProvider(config.name),
+              config
+            );
+          });
+      });
+      const id = currentViewStorage.getCurrentView(this.model.id);
+      if (id && this.dataSource.viewManager.viewGet(id)) {
+        this.dataSource.viewManager.setCurrentView(id);
+      }
+    }
+    return this._dataSource;
+  }
 
   get optionsConfig(): DatabaseViewExtensionOptions {
     return {
@@ -306,15 +369,15 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     return this.rootComponent;
   }
 
+  get view() {
+    return this.dataView.expose;
+  }
+
   private renderDatabaseOps() {
-    if (this.dataSource.value.readonly$.value) {
+    if (this.dataSource.readonly$.value) {
       return nothing;
     }
-    return html` <div
-      data-testid="database-ops"
-      class="${databaseOpsStyles}"
-      @click="${this.clickDatabaseOps}"
-    >
+    return html` <div class="database-ops" @click="${this._clickDatabaseOps}">
       ${MoreHorizontalIcon()}
     </div>`;
   }
@@ -323,7 +386,6 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     super.connectedCallback();
 
     this.setAttribute(RANGE_SYNC_EXCLUDE_ATTR, 'true');
-    this.classList.add(databaseBlockStyles);
     this.listenFullWidthChange();
   }
 
@@ -340,97 +402,85 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
       })
     );
   }
-  private readonly dataViewRootLogic = lazy(
-    () =>
-      new DataViewRootUILogic({
-        virtualPadding$: this.virtualPadding$,
-        bindHotkey: hotkeys => {
-          return {
-            dispose: this.host.event.bindHotkey(hotkeys, {
-              blockId: this.topContenteditableElement?.blockId ?? this.blockId,
-            }),
-          };
-        },
-        handleEvent: (name, handler) => {
-          return {
-            dispose: this.host.event.add(name, handler, {
-              blockId: this.blockId,
-            }),
-          };
-        },
-        selection$: this.viewSelection$,
-        setSelection: this.setSelection,
-        dataSource: this.dataSource.value,
-        headerWidget: this.headerWidget,
-        onDrag: this.onDrag,
-        clipboard: this.std.clipboard,
-        notification: {
-          toast: message => {
-            const notification = this.std.getOptional(NotificationProvider);
-            if (notification) {
-              notification.toast(message);
-            } else {
-              toast(this.host, message);
-            }
-          },
-        },
-        eventTrace: (key, params) => {
-          const telemetryService = this.std.getOptional(TelemetryProvider);
-          telemetryService?.track(key, {
-            ...(params as TelemetryEventMap[typeof key]),
-            blockId: this.blockId,
-          });
-        },
-        detailPanelConfig: {
-          openDetailPanel: (target, data) => {
-            const peekViewService = this.std.getOptional(PeekViewProvider);
-            if (peekViewService) {
-              const openDoc = (docId: string) => {
-                return peekViewService.peek({
-                  docId,
-                  databaseId: this.blockId,
-                  databaseDocId: this.model.store.id,
-                  databaseRowId: data.rowId,
-                  target: this,
-                });
-              };
-              const doc = getSingleDocIdFromText(
-                this.model.store.getBlock(data.rowId)?.model?.text
-              );
-              if (doc) {
-                return openDoc(doc);
-              }
-              const abort = new AbortController();
-              return new Promise<void>(focusBack => {
-                peekViewService
-                  .peek(
-                    {
-                      target,
-                      template: this.createTemplate(data, docId => {
-                        // abort.abort();
-                        openDoc(docId).then(focusBack).catch(focusBack);
-                      }),
-                    },
-                    { abortSignal: abort.signal }
-                  )
-                  .then(focusBack)
-                  .catch(focusBack);
-              });
-            } else {
-              return popSideDetail(
-                this.createTemplate(data, () => {
-                  //
-                })
-              );
-            }
-          },
-        },
-      })
-  );
+
   override renderBlock() {
+    const peekViewService = this.std.getOptional(PeekViewProvider);
+    const telemetryService = this.std.getOptional(TelemetryProvider);
     return html`
-      <div contenteditable="false" class="${databaseContentStyles}">
-        ${this.dataViewRootLogic.value.render()}
+      <div
+        contenteditable="false"
+        style="position: relative;background-color: var(--affine-background-primary-color);border-radius: 4px"
+      >
+        ${this.dataView.render({
+          virtualPadding$: this.virtualPadding$,
+          bindHotkey: this._bindHotkey,
+          handleEvent: this._handleEvent,
+          selection$: this.viewSelection$,
+          setSelection: this.setSelection,
+          dataSource: this.dataSource,
+          headerWidget: this.headerWidget,
+          onDrag: this.onDrag,
+          clipboard: this.std.clipboard,
+          notification: {
+            toast: message => {
+              const notification = this.std.getOptional(NotificationProvider);
+              if (notification) {
+                notification.toast(message);
+              } else {
+                toast(this.host, message);
+              }
+            },
+          },
+          eventTrace: (key, params) => {
+            telemetryService?.track(key, {
+              ...(params as TelemetryEventMap[typeof key]),
+              blockId: this.blockId,
+            });
+          },
+          detailPanelConfig: {
+            openDetailPanel: (target, data) => {
+              if (peekViewService) {
+                const openDoc = (docId: string) => {
+                  return peekViewService.peek({
+                    docId,
+                    databaseId: this.blockId,
+                    databaseDocId: this.model.store.id,
+                    databaseRowId: data.rowId,
+                    target: this,
+                  });
+                };
+                const doc = getSingleDocIdFromText(
+                  this.model.store.getBlock(data.rowId)?.model?.text
+                );
+                if (doc) {
+                  return openDoc(doc);
+                }
+                const abort = new AbortController();
+                return new Promise<void>(focusBack => {
+                  peekViewService
+                    .peek(
+                      {
+                        target,
+                        template: this.createTemplate(data, docId => {
+                          // abort.abort();
+                          openDoc(docId).then(focusBack).catch(focusBack);
+                        }),
+                      },
+                      { abortSignal: abort.signal }
+                    )
+                    .then(focusBack)
+                    .catch(focusBack);
+                });
+              } else {
+                return popSideDetail(
+                  this.createTemplate(data, () => {
+                    //
+                  })
+                );
+              }
+            },
+          },
+        })}
       </div>
     `;
   }

blocksuite/affine/blocks/divider/package.json

@@ -20,7 +20,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.14",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

blocksuite/affine/blocks/edgeless-text/package.json

@@ -26,7 +26,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.14",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "rxjs": "^7.8.1",

blocksuite/affine/blocks/edgeless-text/src/edgeless-text-block.ts

@@ -22,7 +22,10 @@ import {
   GfxBlockComponent,
   TextSelection,
 } from '@blocksuite/std';
-import { GfxViewInteractionExtension } from '@blocksuite/std/gfx';
+import {
+  GfxViewInteractionExtension,
+  type SelectedContext,
+} from '@blocksuite/std/gfx';
 import { computed } from '@preact/signals-core';
 import { css, html } from 'lit';
 import { query, state } from 'lit/decorators.js';
@@ -279,6 +282,69 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
     };
   }
 
+  override onSelected(context: SelectedContext): void | boolean {
+    const { selected, multiSelect, event: e } = context;
+    const { editing } = this.gfx.selection;
+    const alreadySelected = this.gfx.selection.has(this.model.id);
+
+    if (!multiSelect && selected && (alreadySelected || editing)) {
+      if (this.model.isLocked()) return;
+
+      if (alreadySelected && editing) {
+        return;
+      }
+
+      this.gfx.selection.set({
+        elements: [this.model.id],
+        editing: true,
+      });
+
+      this.updateComplete
+        .then(() => {
+          if (!this.isConnected) {
+            return;
+          }
+
+          if (this.model.children.length === 0) {
+            const blockId = this.store.addBlock(
+              'affine:paragraph',
+              { type: 'text' },
+              this.model.id
+            );
+
+            if (blockId) {
+              focusTextModel(this.std, blockId);
+            }
+          } else {
+            const rect = this.querySelector(
+              '.affine-block-children-container'
+            )?.getBoundingClientRect();
+
+            if (rect) {
+              const offsetY = 8 * this.gfx.viewport.zoom;
+              const offsetX = 2 * this.gfx.viewport.zoom;
+              const x = clamp(
+                e.clientX,
+                rect.left + offsetX,
+                rect.right - offsetX
+              );
+              const y = clamp(
+                e.clientY,
+                rect.top + offsetY,
+                rect.bottom - offsetY
+              );
+              handleNativeRangeAtPoint(x, y);
+            } else {
+              handleNativeRangeAtPoint(e.clientX, e.clientY);
+            }
+          }
+        })
+        .catch(console.error);
+    } else {
+      return super.onSelected(context);
+    }
+  }
+
   override renderGfxBlock() {
     const { model } = this;
     const { rotate, hasMaxWidth } = model.props;
@@ -440,73 +506,5 @@ export const EdgelessTextInteraction =
           },
         };
       },
-
-      handleSelection: context => {
-        const { gfx, std, view, model } = context;
-        return {
-          onSelect(context) {
-            const { selected, multiSelect, event: e } = context;
-            const { editing } = gfx.selection;
-            const alreadySelected = gfx.selection.has(model.id);
-
-            if (!multiSelect && selected && (alreadySelected || editing)) {
-              if (model.isLocked()) return;
-
-              if (alreadySelected && editing) {
-                return;
-              }
-
-              gfx.selection.set({
-                elements: [model.id],
-                editing: true,
-              });
-
-              view.updateComplete
-                .then(() => {
-                  if (!view.isConnected) {
-                    return;
-                  }
-
-                  if (model.children.length === 0) {
-                    const blockId = std.store.addBlock(
-                      'affine:paragraph',
-                      { type: 'text' },
-                      model.id
-                    );
-
-                    if (blockId) {
-                      focusTextModel(std, blockId);
-                    }
-                  } else {
-                    const rect = view
-                      .querySelector('.affine-block-children-container')
-                      ?.getBoundingClientRect();
-
-                    if (rect) {
-                      const offsetY = 8 * gfx.viewport.zoom;
-                      const offsetX = 2 * gfx.viewport.zoom;
-                      const x = clamp(
-                        e.clientX,
-                        rect.left + offsetX,
-                        rect.right - offsetX
-                      );
-                      const y = clamp(
-                        e.clientY,
-                        rect.top + offsetY,
-                        rect.bottom - offsetY
-                      );
-                      handleNativeRangeAtPoint(x, y);
-                    } else {
-                      handleNativeRangeAtPoint(e.clientX, e.clientY);
-                    }
-                  }
-                })
-                .catch(console.error);
-            } else {
-              return context.default(context);
-            }
-          },
-        };
-      },
     }
   );

blocksuite/affine/blocks/embed-doc/package.json

@@ -26,7 +26,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "lit": "^3.2.0",
     "lodash-es": "^4.17.21",

blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/adapters/markdown.ts

@@ -11,6 +11,7 @@ import {
   isFootnoteDefinitionNode,
   type MarkdownAST,
 } from '@blocksuite/affine-shared/adapters';
+import { FeatureFlagService } from '@blocksuite/affine-shared/services';
 import { nanoid } from '@blocksuite/store';
 
 const isLinkedDocFootnoteDefinitionNode = (node: MarkdownAST) => {
@@ -35,7 +36,15 @@ export const embedLinkedDocBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatc
     fromMatch: o => o.node.flavour === EmbedLinkedDocBlockSchema.model.flavour,
     toBlockSnapshot: {
       enter: (o, context) => {
-        if (!isFootnoteDefinitionNode(o.node)) {
+        const { provider } = context;
+        let enableCitation = false;
+        try {
+          const featureFlagService = provider?.get(FeatureFlagService);
+          enableCitation = !!featureFlagService?.getFlag('enable_citation');
+        } catch {
+          enableCitation = false;
+        }
+        if (!isFootnoteDefinitionNode(o.node) || !enableCitation) {
           return;
         }
 

blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/configs/toolbar.ts

@@ -13,6 +13,7 @@ import {
   ActionPlacement,
   DocDisplayMetaProvider,
   EditorSettingProvider,
+  FeatureFlagService,
   type LinkEventType,
   type OpenDocMode,
   type ToolbarAction,
@@ -215,7 +216,12 @@ const conversionsActionGroup = {
       run(ctx) {
         const block = ctx.getCurrentBlockByType(EmbedLinkedDocBlockComponent);
 
-        if (isGfxBlockComponent(block)) {
+        if (
+          ctx.std
+            .get(FeatureFlagService)
+            .getFlag('enable_embed_doc_with_alias') &&
+          isGfxBlockComponent(block)
+        ) {
           const editorSetting = ctx.std.getOptional(EditorSettingProvider);
           editorSetting?.set?.(
             'docCanvasPreferView',
@@ -259,18 +265,18 @@ const builtinToolbarConfig = {
     conversionsActionGroup,
     {
       id: 'c.style',
-      actions: (
-        [
-          {
-            id: 'horizontal',
-            label: 'Large horizontal style',
-          },
-          {
-            id: 'list',
-            label: 'Small horizontal style',
-          },
-        ] as const
-      ).filter(action => EmbedLinkedDocStyles.includes(action.id)),
+      actions: [
+        {
+          id: 'horizontal',
+          label: 'Large horizontal style',
+        },
+        {
+          id: 'list',
+          label: 'Small horizontal style',
+        },
+      ].filter(action =>
+        EmbedLinkedDocStyles.includes(action.id as EmbedCardStyle)
+      ),
       content(ctx) {
         const model = ctx.getCurrentModelByType(EmbedLinkedDocModel);
         if (!model) return null;
@@ -368,26 +374,26 @@ const builtinSurfaceToolbarConfig = {
     conversionsActionGroup,
     {
       id: 'c.style',
-      actions: (
-        [
-          {
-            id: 'horizontal',
-            label: 'Large horizontal style',
-          },
-          {
-            id: 'list',
-            label: 'Small horizontal style',
-          },
-          {
-            id: 'vertical',
-            label: 'Large vertical style',
-          },
-          {
-            id: 'cube',
-            label: 'Small vertical style',
-          },
-        ] as const
-      ).filter(action => EmbedLinkedDocStyles.includes(action.id)),
+      actions: [
+        {
+          id: 'horizontal',
+          label: 'Large horizontal style',
+        },
+        {
+          id: 'list',
+          label: 'Small horizontal style',
+        },
+        {
+          id: 'vertical',
+          label: 'Large vertical style',
+        },
+        {
+          id: 'cube',
+          label: 'Small vertical style',
+        },
+      ].filter(action =>
+        EmbedLinkedDocStyles.includes(action.id as EmbedCardStyle)
+      ),
       content(ctx) {
         const model = ctx.getCurrentModelByType(EmbedLinkedDocModel);
         if (!model) return null;

blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/embed-linked-doc-block.ts

@@ -3,7 +3,6 @@ import {
   RENDER_CARD_THROTTLE_MS,
 } from '@blocksuite/affine-block-embed';
 import { SurfaceBlockModel } from '@blocksuite/affine-block-surface';
-import { LoadingIcon } from '@blocksuite/affine-components/icons';
 import { isPeekable, Peekable } from '@blocksuite/affine-components/peek';
 import { RefNodeSlotsProvider } from '@blocksuite/affine-inline-reference';
 import type {
@@ -17,7 +16,6 @@ import {
   REFERENCE_NODE,
 } from '@blocksuite/affine-shared/consts';
 import {
-  CitationProvider,
   DocDisplayMetaProvider,
   DocModeProvider,
   OpenDocExtensionIdentifier,
@@ -33,7 +31,6 @@ import {
   referenceToNode,
 } from '@blocksuite/affine-shared/utils';
 import { Bound } from '@blocksuite/global/gfx';
-import { ResetIcon } from '@blocksuite/icons/lit';
 import { BlockSelection } from '@blocksuite/std';
 import { Text } from '@blocksuite/store';
 import { computed } from '@preact/signals-core';
@@ -44,7 +41,6 @@ import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
 import throttle from 'lodash-es/throttle';
-import { filter } from 'rxjs/operators';
 import * as Y from 'yjs';
 
 import { renderLinkedDocInCard } from '../common/render-linked-doc';
@@ -256,12 +252,11 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
     return this.store.readonly;
   }
 
-  get citationService() {
-    return this.std.get(CitationProvider);
-  }
-
   get isCitation() {
-    return this.citationService.isCitationModel(this.model);
+    return (
+      !!this.model.props.footnoteIdentifier &&
+      this.model.props.style === 'citation'
+    );
   }
 
   private readonly _handleDoubleClick = (event: MouseEvent) => {
@@ -342,6 +337,8 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
 
     const theme = this.std.get(ThemeProvider).theme;
     const {
+      LoadingIcon,
+      ReloadIcon,
       LinkedDocDeletedBanner,
       LinkedDocEmptyBanner,
       SyncedDocErrorBanner,
@@ -350,7 +347,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
     const icon = isError
       ? SyncedDocErrorIcon
       : isLoading
-        ? LoadingIcon()
+        ? LoadingIcon
         : this.icon$.value;
     const title = isLoading ? 'Loading...' : this.title$;
     const description = this.model.props.description$;
@@ -387,6 +384,10 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
       () => html`
         <div
           class="affine-embed-linked-doc-block ${cardClassMap}"
+          style=${styleMap({
+            transform: `scale(${this._scale})`,
+            transformOrigin: '0 0',
+          })}
           @click=${this._handleClick}
           @dblclick=${this._handleDoubleClick}
         >
@@ -432,7 +433,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
                       class="affine-embed-linked-doc-card-content-reload-button"
                       @click=${this.refreshData}
                     >
-                      ${ResetIcon()} <span>Reload</span>
+                      ${ReloadIcon} <span>Reload</span>
                     </div>
                   </div>
                 `
@@ -457,31 +458,6 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
     );
   };
 
-  private readonly _trackCitationDeleteEvent = () => {
-    // Check citation delete event
-    this._disposables.add(
-      this.std.store.slots.blockUpdated
-        .pipe(
-          filter(payload => {
-            if (!payload.isLocal) return false;
-            const { flavour, id, type } = payload;
-            if (
-              type !== 'delete' ||
-              flavour !== this.model.flavour ||
-              id !== this.model.id
-            )
-              return false;
-            const { model } = payload;
-            if (!this.citationService.isCitationModel(model)) return false;
-            return true;
-          })
-        )
-        .subscribe(() => {
-          this.citationService.trackEvent('Delete');
-        })
-    );
-  };
-
   override connectedCallback() {
     super.connectedCallback();
 
@@ -560,8 +536,6 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
         }
       })
     );
-
-    this._trackCitationDeleteEvent();
   }
 
   getInitialState(): {

blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts

@@ -124,11 +124,11 @@ export const styles = css`
     align-items: center;
     gap: 4px;
     cursor: pointer;
-    color: ${unsafeCSSVarV2('button/primary')};
   }
   .affine-embed-linked-doc-card-content-reload-button svg {
     width: 12px;
     height: 12px;
+    fill: var(--affine-background-primary-color);
   }
   .affine-embed-linked-doc-card-content-reload-button > span {
     display: -webkit-box;
@@ -138,6 +138,7 @@ export const styles = css`
     white-space: normal;
     overflow: hidden;
     text-overflow: ellipsis;
+    color: var(--affine-brand-color);
     font-family: var(--affine-font-family);
     font-size: var(--affine-font-xs);
     font-style: normal;
@@ -304,6 +305,7 @@ export const styles = css`
 
     .affine-embed-linked-doc-content-note {
       -webkit-line-clamp: 16;
+      max-height: 320px;
     }
 
     .affine-embed-linked-doc-content-date {

blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/utils.ts

@@ -1,6 +1,8 @@
 import {
   EmbedEdgelessIcon,
   EmbedPageIcon,
+  getLoadingIconWith,
+  ReloadIcon,
 } from '@blocksuite/affine-components/icons';
 import {
   ColorScheme,
@@ -33,6 +35,8 @@ import {
 } from './styles.js';
 
 type EmbedCardImages = {
+  LoadingIcon: TemplateResult<1>;
+  ReloadIcon: TemplateResult<1>;
   LinkedDocIcon: TemplateResult<1>;
   LinkedDocDeletedIcon: TemplateResult<1>;
   LinkedDocEmptyBanner: TemplateResult<1>;
@@ -46,9 +50,12 @@ export function getEmbedLinkedDocIcons(
   style: (typeof EmbedLinkedDocStyles)[number]
 ): EmbedCardImages {
   const small = style !== 'vertical';
+  const LoadingIcon = getLoadingIconWith(theme);
   if (editorMode === 'page') {
     if (theme === ColorScheme.Light) {
       return {
+        LoadingIcon,
+        ReloadIcon,
         LinkedDocIcon: EmbedPageIcon,
         LinkedDocDeletedIcon,
         LinkedDocEmptyBanner: small
@@ -61,6 +68,8 @@ export function getEmbedLinkedDocIcons(
       };
     } else {
       return {
+        ReloadIcon,
+        LoadingIcon,
         LinkedDocIcon: EmbedPageIcon,
         LinkedDocDeletedIcon,
         LinkedDocEmptyBanner: small
@@ -75,6 +84,8 @@ export function getEmbedLinkedDocIcons(
   } else {
     if (theme === ColorScheme.Light) {
       return {
+        ReloadIcon,
+        LoadingIcon,
         LinkedDocIcon: EmbedEdgelessIcon,
         LinkedDocDeletedIcon,
         LinkedDocEmptyBanner: small
@@ -87,6 +98,8 @@ export function getEmbedLinkedDocIcons(
       };
     } else {
       return {
+        ReloadIcon,
+        LoadingIcon,
         LinkedDocIcon: EmbedEdgelessIcon,
         LinkedDocDeletedIcon,
         LinkedDocEmptyBanner: small

blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/components/embed-synced-doc-card.ts

@@ -1,8 +1,6 @@
 import { RENDER_CARD_THROTTLE_MS } from '@blocksuite/affine-block-embed';
-import { LoadingIcon } from '@blocksuite/affine-components/icons';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { WithDisposable } from '@blocksuite/global/lit';
-import { ResetIcon } from '@blocksuite/icons/lit';
 import {
   BlockSelection,
   isGfxBlockComponent,
@@ -150,7 +148,9 @@ export class EmbedSyncedDocCard extends WithDisposable(ShadowlessElement) {
 
     const theme = this.std.get(ThemeProvider).theme;
     const {
+      LoadingIcon,
       SyncedDocErrorIcon,
+      ReloadIcon,
       SyncedDocEmptyBanner,
       SyncedDocErrorBanner,
       SyncedDocDeletedBanner,
@@ -159,7 +159,7 @@ export class EmbedSyncedDocCard extends WithDisposable(ShadowlessElement) {
     const icon = error
       ? SyncedDocErrorIcon
       : isLoading
-        ? LoadingIcon()
+        ? LoadingIcon
         : this.block.icon$.value;
     const title = isLoading ? 'Loading...' : this.block.title$;
 
@@ -216,7 +216,7 @@ export class EmbedSyncedDocCard extends WithDisposable(ShadowlessElement) {
                     class="affine-embed-synced-doc-card-content-reload-button"
                     @click=${() => this.block.refreshData()}
                   >
-                    ${ResetIcon()} <span>Reload</span>
+                    ${ReloadIcon} <span>Reload</span>
                   </div>
                 </div>
               `

blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/configs/toolbar.ts

@@ -17,6 +17,7 @@ import { REFERENCE_NODE } from '@blocksuite/affine-shared/consts';
 import {
   ActionPlacement,
   EditorSettingProvider,
+  FeatureFlagService,
   type LinkEventType,
   type OpenDocMode,
   type ToolbarAction,
@@ -162,7 +163,12 @@ const conversionsActionGroup = {
       label: 'Card view',
       run(ctx) {
         const block = ctx.getCurrentBlockByType(EmbedSyncedDocBlockComponent);
-        if (isGfxBlockComponent(block)) {
+        if (
+          ctx.std
+            .get(FeatureFlagService)
+            .getFlag('enable_embed_doc_with_alias') &&
+          isGfxBlockComponent(block)
+        ) {
           const editorSetting = ctx.std.getOptional(EditorSettingProvider);
           editorSetting?.set?.(
             'docCanvasPreferView',
@@ -290,6 +296,8 @@ const builtinSurfaceToolbarConfig = {
       label: 'Insert to page',
       tooltip: 'Insert to page',
       icon: InsertIntoPageIcon(),
+      when: ({ std }) =>
+        std.get(FeatureFlagService).getFlag('enable_embed_doc_with_alias'),
       run: ctx => {
         const model = ctx.getCurrentModelByType(EmbedSyncedDocModel);
         if (!model) return;
@@ -326,6 +334,8 @@ const builtinSurfaceToolbarConfig = {
       tooltip:
         'Duplicate as note to create an editable copy, the original remains unchanged.',
       icon: DuplicateIcon(),
+      when: ({ std }) =>
+        std.get(FeatureFlagService).getFlag('enable_embed_doc_with_alias'),
       run: ctx => {
         const { gfx } = ctx;
 

blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/styles.ts

@@ -303,11 +303,11 @@ export const cardStyles = css`
     align-items: center;
     gap: 4px;
     cursor: pointer;
-    color: ${unsafeCSSVarV2('button/primary')};
   }
   .affine-embed-synced-doc-card-content-reload-button svg {
     width: 12px;
     height: 12px;
+    fill: var(--affine-background-primary-color);
   }
   .affine-embed-synced-doc-card-content-reload-button > span {
     display: -webkit-box;
@@ -317,6 +317,7 @@ export const cardStyles = css`
     white-space: normal;
     overflow: hidden;
     text-overflow: ellipsis;
+    color: var(--affine-brand-color);
     font-family: var(--affine-font-family);
     font-size: var(--affine-font-xs);
     font-style: normal;

blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/utils.ts

@@ -1,6 +1,8 @@
 import {
   EmbedEdgelessIcon,
   EmbedPageIcon,
+  getLoadingIconWith,
+  ReloadIcon,
 } from '@blocksuite/affine-components/icons';
 import { ColorScheme } from '@blocksuite/affine-model';
 import type { BlockComponent } from '@blocksuite/std';
@@ -19,9 +21,11 @@ import {
 } from './styles.js';
 
 type SyncedCardImages = {
+  LoadingIcon: TemplateResult<1>;
   SyncedDocIcon: TemplateResult<1>;
   SyncedDocErrorIcon: TemplateResult<1>;
   SyncedDocDeletedIcon: TemplateResult<1>;
+  ReloadIcon: TemplateResult<1>;
   SyncedDocEmptyBanner: TemplateResult<1>;
   SyncedDocErrorBanner: TemplateResult<1>;
   SyncedDocDeletedBanner: TemplateResult<1>;
@@ -31,20 +35,25 @@ export function getSyncedDocIcons(
   theme: ColorScheme,
   editorMode: 'page' | 'edgeless'
 ): SyncedCardImages {
+  const LoadingIcon = getLoadingIconWith(theme);
   if (theme === ColorScheme.Light) {
     return {
+      LoadingIcon,
       SyncedDocIcon: editorMode === 'page' ? EmbedPageIcon : EmbedEdgelessIcon,
       SyncedDocErrorIcon,
       SyncedDocDeletedIcon,
+      ReloadIcon,
       SyncedDocEmptyBanner: LightSyncedDocEmptyBanner,
       SyncedDocErrorBanner: LightSyncedDocErrorBanner,
       SyncedDocDeletedBanner: LightSyncedDocDeletedBanner,
     };
   } else {
     return {
+      LoadingIcon,
       SyncedDocIcon: editorMode === 'page' ? EmbedPageIcon : EmbedEdgelessIcon,
       SyncedDocErrorIcon,
       SyncedDocDeletedIcon,
+      ReloadIcon,
       SyncedDocEmptyBanner: DarkSyncedDocEmptyBanner,
       SyncedDocErrorBanner: DarkSyncedDocErrorBanner,
       SyncedDocDeletedBanner: DarkSyncedDocDeletedBanner,

blocksuite/affine/blocks/embed/package.json

@@ -26,7 +26,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "lit": "^3.2.0",
     "lodash-es": "^4.17.21",

blocksuite/affine/blocks/embed/src/common/embed-block-element.ts

@@ -50,6 +50,12 @@ export class EmbedBlockComponent<
 
   _cardStyle: EmbedCardStyle = 'horizontal';
 
+  /**
+   * The actual rendered scale of the embed card.
+   * By default, it is set to 1.
+   */
+  protected _scale = 1;
+
   blockDraggable = true;
 
   /**

blocksuite/affine/blocks/embed/src/common/to-edgeless-embed-block.ts

@@ -68,6 +68,7 @@ export function toEdgelessEmbedBlock<
       this.blockContainerStyles = {
         width: `${bound.w}px`,
       };
+      this._scale = bound.w / this._cardWidth;
 
       return this.renderPageContent();
     }

blocksuite/affine/blocks/embed/src/common/utils.ts

@@ -9,11 +9,13 @@ import {
   EmbedCardLightHorizontalIcon,
   EmbedCardLightListIcon,
   EmbedCardLightVerticalIcon,
+  getLoadingIconWith,
 } from '@blocksuite/affine-components/icons';
 import { ColorScheme } from '@blocksuite/affine-model';
 import type { TemplateResult } from 'lit';
 
 type EmbedCardIcons = {
+  LoadingIcon: TemplateResult<1>;
   EmbedCardBannerIcon: TemplateResult<1>;
   EmbedCardHorizontalIcon: TemplateResult<1>;
   EmbedCardListIcon: TemplateResult<1>;
@@ -22,8 +24,11 @@ type EmbedCardIcons = {
 };
 
 export function getEmbedCardIcons(theme: ColorScheme): EmbedCardIcons {
+  const LoadingIcon = getLoadingIconWith(theme);
+
   if (theme === ColorScheme.Light) {
     return {
+      LoadingIcon,
       EmbedCardBannerIcon: EmbedCardLightBannerIcon,
       EmbedCardHorizontalIcon: EmbedCardLightHorizontalIcon,
       EmbedCardListIcon: EmbedCardLightListIcon,
@@ -32,6 +37,7 @@ export function getEmbedCardIcons(theme: ColorScheme): EmbedCardIcons {
     };
   } else {
     return {
+      LoadingIcon,
       EmbedCardBannerIcon: EmbedCardDarkBannerIcon,
       EmbedCardHorizontalIcon: EmbedCardDarkHorizontalIcon,
       EmbedCardListIcon: EmbedCardDarkListIcon,

blocksuite/affine/blocks/embed/src/configs/toolbar.ts

@@ -153,7 +153,7 @@ function createBuiltinToolbarConfigForExternal(
                 .get(EmbedOptionProvider)
                 .getEmbedBlockOptions(url);
 
-              let style: EmbedCardStyle = model.props.style;
+              let { style } = model.props;
               let flavour = 'affine:bookmark';
 
               if (options?.viewType === 'card') {
@@ -227,7 +227,7 @@ function createBuiltinToolbarConfigForExternal(
               if (options?.viewType !== 'embed') return;
 
               const { flavour, styles } = options;
-              let style: EmbedCardStyle = model.props.style;
+              let { style } = model.props;
 
               if (!styles.includes(style)) {
                 style =
@@ -441,11 +441,7 @@ const createBuiltinSurfaceToolbarConfigForExternal = (
               let { style } = model.props;
               let flavour = 'affine:bookmark';
 
-              if (
-                !BookmarkStyles.includes(
-                  style as (typeof BookmarkStyles)[number]
-                )
-              ) {
+              if (!BookmarkStyles.includes(style)) {
                 style = BookmarkStyles[0];
               }
 
@@ -521,26 +517,26 @@ const createBuiltinSurfaceToolbarConfigForExternal = (
       } satisfies ToolbarActionGroup<ToolbarAction>,
       {
         id: 'c.style',
-        actions: (
-          [
-            {
-              id: 'horizontal',
-              label: 'Large horizontal style',
-            },
-            {
-              id: 'list',
-              label: 'Small horizontal style',
-            },
-            {
-              id: 'vertical',
-              label: 'Large vertical style',
-            },
-            {
-              id: 'cube',
-              label: 'Small vertical style',
-            },
-          ] as const
-        ).filter(action => EmbedGithubStyles.includes(action.id)),
+        actions: [
+          {
+            id: 'horizontal',
+            label: 'Large horizontal style',
+          },
+          {
+            id: 'list',
+            label: 'Small horizontal style',
+          },
+          {
+            id: 'vertical',
+            label: 'Large vertical style',
+          },
+          {
+            id: 'cube',
+            label: 'Small vertical style',
+          },
+        ].filter(action =>
+          EmbedGithubStyles.includes(action.id as EmbedCardStyle)
+        ),
         when(ctx) {
           return Boolean(ctx.getCurrentModelByType(EmbedGithubModel));
         },

blocksuite/affine/blocks/embed/src/embed-figma-block/embed-figma-block.ts

@@ -6,6 +6,7 @@ import type {
 import { BlockSelection } from '@blocksuite/std';
 import { html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 import { EmbedBlockComponent } from '../common/embed-block-element.js';
 import { FigmaIcon, styles } from './styles.js';
@@ -75,6 +76,10 @@ export class EmbedFigmaBlockComponent extends EmbedBlockComponent<EmbedFigmaMode
             'affine-embed-figma-block': true,
             selected: this.selected$.value,
           })}
+          style=${styleMap({
+            transform: `scale(${this._scale})`,
+            transformOrigin: '0 0',
+          })}
           @click=${this._handleClick}
           @dblclick=${this._handleDoubleClick}
         >

blocksuite/affine/blocks/embed/src/embed-github-block/embed-github-block.ts

@@ -1,4 +1,4 @@
-import { LoadingIcon, OpenIcon } from '@blocksuite/affine-components/icons';
+import { OpenIcon } from '@blocksuite/affine-components/icons';
 import type {
   EmbedGithubModel,
   EmbedGithubStyles,
@@ -133,8 +133,8 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent<
     const loading = this.loading;
     const theme = this.std.get(ThemeProvider).theme;
     const imageProxyService = this.store.get(ImageProxyService);
-    const { EmbedCardBannerIcon } = getEmbedCardIcons(theme);
-    const titleIcon = loading ? LoadingIcon() : GithubIcon;
+    const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
+    const titleIcon = loading ? LoadingIcon : GithubIcon;
     const statusIcon = status
       ? getGithubStatusIcon(githubType, status, statusReason)
       : nothing;

blocksuite/affine/blocks/embed/src/embed-iframe-block/components/embed-iframe-loading-card.ts

@@ -1,4 +1,4 @@
-import { LoadingIcon } from '@blocksuite/affine-components/icons';
+import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { EmbedIcon } from '@blocksuite/icons/lit';
 import { type BlockStdScope } from '@blocksuite/std';
@@ -7,6 +7,7 @@ import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import { getEmbedCardIcons } from '../../common/utils';
 import { LOADING_CARD_DEFAULT_HEIGHT } from '../consts';
 import type { EmbedIframeStatusCardOptions } from '../types';
 
@@ -155,6 +156,9 @@ export class EmbedIframeLoadingCard extends LitElement {
   `;
 
   override render() {
+    const theme = this.std.get(ThemeProvider).theme;
+    const { LoadingIcon } = getEmbedCardIcons(theme);
+
     const { layout, width, height } = this.options;
     const cardClasses = classMap({
       'affine-embed-iframe-loading-card': true,
@@ -172,7 +176,7 @@ export class EmbedIframeLoadingCard extends LitElement {
     return html`
       <div class=${cardClasses} style=${cardStyle}>
         <div class="loading-content">
-          <div class="loading-spinner">${LoadingIcon()}</div>
+          <div class="loading-spinner">${LoadingIcon}</div>
           <div class="loading-text">Loading...</div>
         </div>
         <div class="loading-banner">

blocksuite/affine/blocks/embed/src/embed-loom-block/embed-loom-block.ts

@@ -1,4 +1,4 @@
-import { LoadingIcon, OpenIcon } from '@blocksuite/affine-components/icons';
+import { OpenIcon } from '@blocksuite/affine-components/icons';
 import type { EmbedLoomModel, EmbedLoomStyles } from '@blocksuite/affine-model';
 import { ImageProxyService } from '@blocksuite/affine-shared/adapters';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
@@ -94,8 +94,8 @@ export class EmbedLoomBlockComponent extends EmbedBlockComponent<
     const loading = this.loading;
     const theme = this.std.get(ThemeProvider).theme;
     const imageProxyService = this.store.get(ImageProxyService);
-    const { EmbedCardBannerIcon } = getEmbedCardIcons(theme);
-    const titleIcon = loading ? LoadingIcon() : LoomIcon;
+    const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
+    const titleIcon = loading ? LoadingIcon : LoomIcon;
     const titleText = loading ? 'Loading...' : title;
     const descriptionText = loading ? '' : description;
     const bannerImage =
@@ -112,6 +112,7 @@ export class EmbedLoomBlockComponent extends EmbedBlockComponent<
             selected: this.selected$.value,
           })}
           style=${styleMap({
+            transform: `scale(${this._scale})`,
             transformOrigin: '0 0',
           })}
           @click=${this._handleClick}

blocksuite/affine/blocks/embed/src/embed-youtube-block/embed-youtube-block.ts

@@ -1,4 +1,4 @@
-import { LoadingIcon, OpenIcon } from '@blocksuite/affine-components/icons';
+import { OpenIcon } from '@blocksuite/affine-components/icons';
 import type {
   EmbedYoutubeModel,
   EmbedYoutubeStyles,
@@ -108,8 +108,8 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
     const loading = this.loading;
     const theme = this.std.get(ThemeProvider).theme;
     const imageProxyService = this.store.get(ImageProxyService);
-    const { EmbedCardBannerIcon } = getEmbedCardIcons(theme);
-    const titleIcon = loading ? LoadingIcon() : YoutubeIcon;
+    const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
+    const titleIcon = loading ? LoadingIcon : YoutubeIcon;
     const titleText = loading ? 'Loading...' : title;
     const descriptionText = loading ? null : description;
     const bannerImage =

blocksuite/affine/blocks/frame/package.json

@@ -25,7 +25,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.14",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

blocksuite/affine/blocks/frame/src/edgeless-toolbar/presentation-toolbar.ts

@@ -205,11 +205,10 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
       !forceMove
     ) {
       // Clear the flag so future navigations behave normally
-      // Here we modify the tool's activated option to avoid triggering setTool update
-      const currentTool = this.gfx.tool.currentTool$.peek();
-      if (currentTool?.activatedOption) {
-        currentTool.activatedOption.restoredAfterPan = false;
-      }
+      this.gfx.tool.setTool(PresentTool, {
+        ...toolOptions,
+        restoredAfterPan: false,
+      });
       return;
     }
 

blocksuite/affine/blocks/frame/src/frame-block.ts

@@ -3,7 +3,6 @@ import {
   DefaultTheme,
   type FrameBlockModel,
   FrameBlockSchema,
-  isTransparent,
 } from '@blocksuite/affine-model';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { Bound } from '@blocksuite/global/gfx';
@@ -12,11 +11,11 @@ import {
   type BoxSelectionContext,
   getTopElements,
   GfxViewInteractionExtension,
+  type SelectedContext,
 } from '@blocksuite/std/gfx';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { html } from 'lit';
 import { state } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import {
@@ -69,6 +68,22 @@ export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> {
     };
   }
 
+  override onSelected(context: SelectedContext): boolean | void {
+    const { x, y } = context.position;
+
+    if (
+      !context.fallback &&
+      // if the frame is selected by title, then ignore it because the title selection is handled by the title widget
+      (this.model.externalBound?.containsPoint([x, y]) ||
+        // otherwise if the frame has title, then ignore it because in this case the frame cannot be selected by frame body
+        this.model.props.title.length)
+    ) {
+      return false;
+    }
+
+    return super.onSelected(context);
+  }
+
   override onBoxSelected(context: BoxSelectionContext) {
     const { box } = context;
     const bound = new Bound(box.x, box.y, box.w, box.h);
@@ -88,12 +103,6 @@ export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> {
       this.gfx.tool.currentToolName$.value === 'frameNavigator';
     const frameIndex = this.gfx.layer.getZIndex(model);
 
-    const widgets = html`${repeat(
-      Object.entries(this.widgets),
-      ([id]) => id,
-      ([_, widget]) => widget
-    )}`;
-
     return html`
       <div
         class="affine-frame-container"
@@ -109,7 +118,6 @@ export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> {
               : `1px solid ${cssVarV2('edgeless/frame/border/default')}`,
         })}
       ></div>
-      ${widgets}
     `;
   }
 
@@ -181,28 +189,5 @@ export const FrameBlockInteraction =
           },
         };
       },
-      handleSelection: () => {
-        return {
-          selectable(context) {
-            const { model } = context;
-
-            const onTitle =
-              model.externalBound?.containsPoint([
-                context.position.x,
-                context.position.y,
-              ]) ?? false;
-
-            return (
-              context.default(context) &&
-              (model.isLocked() ||
-                !isTransparent(model.props.background) ||
-                onTitle)
-            );
-          },
-          onSelect(context) {
-            return context.default(context);
-          },
-        };
-      },
     }
   );

blocksuite/affine/blocks/frame/src/frame-manager.ts

@@ -241,35 +241,20 @@ export class EdgelessFrameManager extends GfxExtension {
       surfaceModel.elementAdded.subscribe(({ id, local }) => {
         const element = surfaceModel.getElementById(id);
         if (element && local) {
-          // The entire frame detection logic must be in microtask for timing reasons:
-          //
-          // 1. For connectors: When elementAdded fires, connectors have invalid bounds [0,0,0,0]
-          //    because their path/bounds are calculated in a separate microtask of updateConnectorPath by connector-watcher.
-          //    We need to wait for that calculation to complete before frame detection.
-          //
-          // 2. For shapes: Although they have valid bounds immediately, processing them in microtask
-          //    ensures consistent timing and allows other initialization to complete first.
-          //
-          // 3. Group compatibility: Some elements may need to establish their group relationships
-          //    before being considered for frame membership.
-          //
-          // By embedding the entire logic in microtask, we ensure:
-          // - Connectors have proper bounds calculated (not [0,0,0,0])
-          // - getFrameFromPoint() works correctly with valid element centers
-          // - All element initialization is complete before frame detection
+          const frame = this.getFrameFromPoint(element.elementBound.center);
+
+          // if the container created with a frame, skip it.
+          if (
+            isGfxGroupCompatibleModel(element) &&
+            frame &&
+            element.hasChild(frame)
+          ) {
+            return;
+          }
+
+          // new element may intended to be added to other group
+          // so we need to wait for the next microtask to check if the element can be added to the frame
           queueMicrotask(() => {
-            const frame = this.getFrameFromPoint(element.elementBound.center);
-
-            // if the container created with a frame, skip it.
-            if (
-              isGfxGroupCompatibleModel(element) &&
-              frame &&
-              element.hasChild(frame)
-            ) {
-              return;
-            }
-
-            // Only add elements that aren't already grouped and have a valid frame
             if (!element.group && frame) {
               this.addElementsToFrame(frame, [element]);
             }

blocksuite/affine/blocks/image/package.json

@@ -25,7 +25,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.14",
     "file-type": "^21.0.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

blocksuite/affine/blocks/image/src/components/page-image-block.ts

@@ -46,19 +46,12 @@ export class ImageBlockPageComponent extends SignalWatcher(
       justify-content: center;
       position: absolute;
       top: 4px;
-      left: 4px;
-      width: 36px;
-      height: 36px;
-      padding: 5px;
-      border-radius: 8px;
-      background: ${unsafeCSSVarV2(
-        'loading/imageLoadingBackground',
-        '#92929238'
-      )};
-
-      & > svg {
-        font-size: 25.71px;
-      }
+      right: 4px;
+      width: 20px;
+      height: 20px;
+      padding: 4px;
+      border-radius: 4px;
+      background: ${unsafeCSSVarV2('loading/backgroundLayer')};
     }
 
     affine-page-image .affine-image-status {
@@ -359,9 +352,7 @@ export class ImageBlockPageComponent extends SignalWatcher(
       ? ImageSelectedRect(this._doc.readonly)
       : null;
 
-    const blobUrl = this.block.blobUrl;
-    const caption = this.block.model.props.caption$.value ?? 'Image';
-    const { loading, error, icon, description, needUpload } = this.state;
+    const { loading, error, icon, description } = this.state;
 
     return html`
       <div class="resizable-img" style=${styleMap(imageSize)}>
@@ -369,8 +360,8 @@ export class ImageBlockPageComponent extends SignalWatcher(
           class="drag-target"
           draggable="false"
           loading="lazy"
-          src=${blobUrl}
-          alt=${caption}
+          src=${this.block.blobUrl}
+          alt=${this.block.model.props.caption$.value ?? 'Image'}
           @error=${this._handleError}
         />
 
@@ -379,16 +370,12 @@ export class ImageBlockPageComponent extends SignalWatcher(
 
       ${when(loading, () => html`<div class="loading">${icon}</div>`)}
       ${when(
-        Boolean(error && description),
+        error && description,
         () =>
           html`<affine-resource-status
             class="affine-image-status"
             .message=${description}
-            .needUpload=${needUpload}
-            .action=${() =>
-              needUpload
-                ? this.block.resourceController.upload()
-                : this.block.refreshData()}
+            .reload=${() => this.block.refreshData()}
           ></affine-resource-status>`
       )}
     `;

blocksuite/affine/blocks/image/src/image-block.ts

@@ -1,17 +1,19 @@
 import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
 import { whenHover } from '@blocksuite/affine-components/hover';
-import { LoadingIcon } from '@blocksuite/affine-components/icons';
+import { getLoadingIconWith } from '@blocksuite/affine-components/icons';
 import { Peekable } from '@blocksuite/affine-components/peek';
 import { ResourceController } from '@blocksuite/affine-components/resource';
 import type { ImageBlockModel } from '@blocksuite/affine-model';
 import { ImageSelection } from '@blocksuite/affine-shared/selection';
-import { ToolbarRegistryIdentifier } from '@blocksuite/affine-shared/services';
+import {
+  ThemeProvider,
+  ToolbarRegistryIdentifier,
+} from '@blocksuite/affine-shared/services';
 import { formatSize } from '@blocksuite/affine-shared/utils';
 import { IS_MOBILE } from '@blocksuite/global/env';
 import { BrokenImageIcon, ImageIcon } from '@blocksuite/icons/lit';
 import { BlockSelection } from '@blocksuite/std';
 import { computed } from '@preact/signals-core';
-import { cssVarV2 } from '@toeverything/theme/v2';
 import { html } from 'lit';
 import { query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -124,6 +126,9 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
   }
 
   override renderBlock() {
+    const theme = this.std.get(ThemeProvider).theme$.value;
+    const loadingIcon = getLoadingIconWith(theme);
+
     const blobUrl = this.blobUrl;
     const { size = 0 } = this.model.props;
 
@@ -133,10 +138,7 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
     });
 
     const resovledState = this.resourceController.resolveStateWith({
-      loadingIcon: LoadingIcon({
-        strokeColor: cssVarV2('button/pureWhiteText'),
-        ringColor: cssVarV2('loading/imageLoadingLayer', '#ffffff8f'),
-      }),
+      loadingIcon,
       errorIcon: BrokenImageIcon(),
       icon: ImageIcon(),
       title: 'Image',

blocksuite/affine/blocks/image/src/image-edgeless-block.ts

@@ -1,12 +1,13 @@
 import type { BlockCaptionEditor } from '@blocksuite/affine-components/caption';
-import { LoadingIcon } from '@blocksuite/affine-components/icons';
+import { getLoadingIconWith } from '@blocksuite/affine-components/icons';
 import { Peekable } from '@blocksuite/affine-components/peek';
 import { ResourceController } from '@blocksuite/affine-components/resource';
 import {
   type ImageBlockModel,
   ImageBlockSchema,
 } from '@blocksuite/affine-model';
-import { cssVarV2, unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { ThemeProvider } from '@blocksuite/affine-shared/services';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { formatSize } from '@blocksuite/affine-shared/utils';
 import { BrokenImageIcon, ImageIcon } from '@blocksuite/icons/lit';
 import { GfxBlockComponent } from '@blocksuite/std';
@@ -38,18 +39,11 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
       position: absolute;
       top: 4px;
       right: 4px;
-      width: 36px;
-      height: 36px;
-      padding: 5px;
-      border-radius: 8px;
-      background: ${unsafeCSSVarV2(
-        'loading/imageLoadingBackground',
-        '#92929238'
-      )};
-
-      & > svg {
-        font-size: 25.71px;
-      }
+      width: 20px;
+      height: 20px;
+      padding: 4px;
+      border-radius: 4px;
+      background: ${unsafeCSSVarV2('loading/backgroundLayer')};
     }
 
     affine-edgeless-image .affine-image-status {
@@ -114,6 +108,9 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
   }
 
   override renderGfxBlock() {
+    const theme = this.std.get(ThemeProvider).theme$.value;
+    const loadingIcon = getLoadingIconWith(theme);
+
     const blobUrl = this.blobUrl;
     const { rotate = 0, size = 0, caption = 'Image' } = this.model.props;
 
@@ -127,18 +124,13 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
     });
 
     const resovledState = this.resourceController.resolveStateWith({
-      loadingIcon: LoadingIcon({
-        strokeColor: cssVarV2('button/pureWhiteText'),
-        ringColor: cssVarV2('loading/imageLoadingLayer', '#ffffff8f'),
-      }),
+      loadingIcon,
       errorIcon: BrokenImageIcon(),
       icon: ImageIcon(),
       title: 'Image',
       description: formatSize(size),
     });
 
-    const { loading, icon, description, error, needUpload } = resovledState;
-
     return html`
       <div class="affine-image-container" style=${containerStyleMap}>
         ${when(
@@ -154,18 +146,17 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
                 @error=${this._handleError}
               />
             </div>
-            ${when(loading, () => html`<div class="loading">${icon}</div>`)}
             ${when(
-              Boolean(error && description),
+              resovledState.loading,
+              () => html`<div class="loading">${loadingIcon}</div>`
+            )}
+            ${when(
+              resovledState.error && resovledState.description,
               () =>
                 html`<affine-resource-status
                   class="affine-image-status"
-                  .message=${description}
-                  .needUpload=${needUpload}
-                  .action=${() =>
-                    needUpload
-                      ? this.resourceController.upload()
-                      : this.refreshData()}
+                  .message=${resovledState.description}
+                  .reload=${() => this.refreshData()}
                 ></affine-resource-status>`
             )}
           `,

blocksuite/affine/blocks/latex/package.json

@@ -25,7 +25,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.14",
     "@types/katex": "^0.16.7",
     "@types/mdast": "^4.0.4",
     "katex": "^0.16.11",

blocksuite/affine/blocks/latex/src/commands.ts

@@ -1,8 +1,4 @@
 import type { LatexProps } from '@blocksuite/affine-model';
-import {
-  DocModeProvider,
-  TelemetryProvider,
-} from '@blocksuite/affine-shared/services';
 import type { Command } from '@blocksuite/std';
 import type { BlockModel } from '@blocksuite/store';
 
@@ -52,21 +48,6 @@ export const insertLatexBlockCommand: Command<
         if (blockComponent instanceof LatexBlockComponent) {
           await blockComponent.updateComplete;
           blockComponent.toggleEditor();
-
-          const mode = std.get(DocModeProvider).getEditorMode() ?? 'page';
-          const ifEdgelessText = blockComponent.closest('affine-edgeless-text');
-          std.getOptional(TelemetryProvider)?.track('Latex', {
-            from:
-              mode === 'page'
-                ? 'doc'
-                : ifEdgelessText
-                  ? 'edgeless text'
-                  : 'edgeless note',
-            page: mode === 'page' ? 'doc' : 'edgeless',
-            segment: mode === 'page' ? 'doc' : 'whiteboard',
-            module: 'equation',
-            control: 'create equation',
-          });
         }
       }
       return result[0];

blocksuite/affine/blocks/latex/src/latex-block.ts

@@ -58,6 +58,7 @@ export class LatexBlockComponent extends CaptionedBlockComponent<LatexBlockModel
           try {
             katex.render(latex, katexContainer, {
               displayMode: true,
+              output: 'mathml',
             });
           } catch {
             katexContainer.replaceChildren();
@@ -73,16 +74,19 @@ export class LatexBlockComponent extends CaptionedBlockComponent<LatexBlockModel
         }
       })
     );
-  }
 
-  private _handleClick() {
-    if (this.store.readonly) return;
+    this.disposables.addFromEvent(this, 'click', () => {
+      // should not open editor or select block in readonly mode
+      if (this.store.readonly) {
+        return;
+      }
 
-    if (this.isBlockSelected) {
-      this.toggleEditor();
-    } else {
-      this.selectBlock();
-    }
+      if (this.isBlockSelected) {
+        this.toggleEditor();
+      } else {
+        this.selectBlock();
+      }
+    });
   }
 
   removeEditor(portal: HTMLDivElement) {
@@ -91,11 +95,7 @@ export class LatexBlockComponent extends CaptionedBlockComponent<LatexBlockModel
 
   override renderBlock() {
     return html`
-      <div
-        contenteditable="false"
-        class="latex-block-container"
-        @click=${this._handleClick}
-      >
+      <div contenteditable="false" class="latex-block-container">
         <div class="katex"></div>
       </div>
     `;

blocksuite/affine/blocks/list/package.json

@@ -24,7 +24,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.14",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

blocksuite/affine/blocks/list/src/styles.ts

@@ -40,11 +40,6 @@ export const listBlockStyles = css`
     font-size: var(--affine-font-base);
   }
 
-  affine-list code {
-    font-size: calc(var(--affine-font-base) - 3px);
-    padding: 0px 4px 2px;
-  }
-
   .affine-list-block-container {
     box-sizing: border-box;
     border-radius: 4px;

blocksuite/affine/blocks/note/package.json

@@ -27,7 +27,7 @@
     "@blocksuite/store": "workspace:*",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "@types/mdast": "^4.0.4",
     "@vanilla-extract/css": "^1.17.0",

blocksuite/affine/blocks/note/src/adapters/markdown.ts

@@ -6,6 +6,7 @@ import {
   isFootnoteDefinitionNode,
   type MarkdownAST,
 } from '@blocksuite/affine-shared/adapters';
+import { FeatureFlagService } from '@blocksuite/affine-shared/services';
 import type { Root } from 'mdast';
 
 const isRootNode = (node: MarkdownAST): node is Root => node.type === 'root';
@@ -65,19 +66,34 @@ const createNoteBlockMarkdownAdapterMatcher = (
         }
       });
 
-      // if there are footnoteDefinition nodes, add a heading node to the noteAst before the first footnoteDefinition node
-      const footnoteDefinitionIndex = noteAst.children.findIndex(child =>
-        isFootnoteDefinitionNode(child)
-      );
-      if (footnoteDefinitionIndex !== -1) {
-        noteAst.children.splice(footnoteDefinitionIndex, 0, {
-          type: 'heading',
-          depth: 6,
-          data: {
-            collapsed: true,
-          },
-          children: [{ type: 'text', value: 'Sources' }],
-        });
+      const { provider } = context;
+      let enableCitation = false;
+      try {
+        const featureFlagService = provider?.get(FeatureFlagService);
+        enableCitation = !!featureFlagService?.getFlag('enable_citation');
+      } catch {
+        enableCitation = false;
+      }
+      if (enableCitation) {
+        // if there are footnoteDefinition nodes, add a heading node to the noteAst before the first footnoteDefinition node
+        const footnoteDefinitionIndex = noteAst.children.findIndex(child =>
+          isFootnoteDefinitionNode(child)
+        );
+        if (footnoteDefinitionIndex !== -1) {
+          noteAst.children.splice(footnoteDefinitionIndex, 0, {
+            type: 'heading',
+            depth: 6,
+            data: {
+              collapsed: true,
+            },
+            children: [{ type: 'text', value: 'Sources' }],
+          });
+        }
+      } else {
+        // Remove the footnoteDefinition node from the noteAst
+        noteAst.children = noteAst.children.filter(
+          child => !isFootnoteDefinitionNode(child)
+        );
       }
     },
   },

blocksuite/affine/blocks/note/src/components/edgeless-note-background.ts

@@ -26,9 +26,10 @@ import {
 import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
 import type { BlockModel } from '@blocksuite/store';
 import { consume } from '@lit/context';
-import { computed, effect } from '@preact/signals-core';
-import { nothing } from 'lit';
+import { computed } from '@preact/signals-core';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 import { NoteConfigExtension } from '../config';
 import * as styles from './edgeless-note-background.css';
@@ -149,20 +150,15 @@ export class EdgelessNoteBackground extends SignalWatcher(
     return header;
   }
 
-  override connectedCallback() {
-    super.connectedCallback();
-    this.classList.add(styles.background);
-    this.disposables.add(
-      effect(() => {
-        Object.assign(this.style, this.backgroundStyle$.value);
-      })
-    );
-    this.disposables.addFromEvent(this, 'pointerdown', stopPropagation);
-    this.disposables.addFromEvent(this, 'click', this._handleClickAtBackground);
-  }
-
   override render() {
-    return this.note.isPageBlock() ? this._renderHeader() : nothing;
+    return html`<div
+      class=${styles.background}
+      style=${styleMap(this.backgroundStyle$.value)}
+      @pointerdown=${stopPropagation}
+      @click=${this._handleClickAtBackground}
+    >
+      ${this.note.isPageBlock() ? this._renderHeader() : nothing}
+    </div>`;
   }
 
   @consume({ context: stdContext })

blocksuite/affine/blocks/note/src/note-edgeless-block.ts

@@ -13,6 +13,7 @@ import { toGfxBlockComponent } from '@blocksuite/std';
 import {
   type BoxSelectionContext,
   GfxViewInteractionExtension,
+  type SelectedContext,
 } from '@blocksuite/std/gfx';
 import { html, nothing, type PropertyValues } from 'lit';
 import { query, state } from 'lit/decorators.js';
@@ -341,6 +342,69 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
     `;
   }
 
+  override onSelected(context: SelectedContext) {
+    const { selected, multiSelect, event: e } = context;
+    const { editing } = this.gfx.selection;
+    const alreadySelected = this.gfx.selection.has(this.model.id);
+
+    if (!multiSelect && selected && (alreadySelected || editing)) {
+      if (this.model.isLocked()) return;
+
+      if (alreadySelected && editing) {
+        return;
+      }
+
+      this.gfx.selection.set({
+        elements: [this.model.id],
+        editing: true,
+      });
+
+      this.updateComplete
+        .then(() => {
+          if (!this.isConnected) {
+            return;
+          }
+
+          if (this.model.children.length === 0) {
+            const blockId = this.store.addBlock(
+              'affine:paragraph',
+              { type: 'text' },
+              this.model.id
+            );
+
+            if (blockId) {
+              focusTextModel(this.std, blockId);
+            }
+          } else {
+            const rect = this.querySelector(
+              '.affine-block-children-container'
+            )?.getBoundingClientRect();
+
+            if (rect) {
+              const offsetY = 8 * this.gfx.viewport.zoom;
+              const offsetX = 2 * this.gfx.viewport.zoom;
+              const x = clamp(
+                e.clientX,
+                rect.left + offsetX,
+                rect.right - offsetX
+              );
+              const y = clamp(
+                e.clientY,
+                rect.top + offsetY,
+                rect.bottom - offsetY
+              );
+              handleNativeRangeAtPoint(x, y);
+            } else {
+              handleNativeRangeAtPoint(e.clientX, e.clientY);
+            }
+          }
+        })
+        .catch(console.error);
+    } else {
+      super.onSelected(context);
+    }
+  }
+
   override onBoxSelected(_: BoxSelectionContext) {
     return this.model.props.displayMode !== NoteDisplayMode.DocOnly;
   }
@@ -400,7 +464,7 @@ export const EdgelessNoteInteraction =
 
           onResizeMove(context): void {
             const { originalBound, newBound, lockRatio, constraint } = context;
-            const { minWidth, minHeight, maxHeight, maxWidth } = constraint;
+            const { minWidth, minHeight } = constraint;
 
             let scale = initialScale;
             let edgelessProp = { ...model.props.edgeless };
@@ -411,8 +475,8 @@ export const EdgelessNoteInteraction =
               edgelessProp.scale = scale;
             }
 
-            newBound.w = clamp(newBound.w, minWidth * scale, maxWidth);
-            newBound.h = clamp(newBound.h, minHeight * scale, maxHeight);
+            newBound.w = clamp(newBound.w, minWidth, Number.MAX_SAFE_INTEGER);
+            newBound.h = clamp(newBound.h, minHeight, Number.MAX_SAFE_INTEGER);
 
             if (newBound.h > minHeight * scale) {
               edgelessProp.collapse = true;
@@ -429,71 +493,5 @@ export const EdgelessNoteInteraction =
           },
         };
       },
-      handleSelection: ({ std, gfx, view, model }) => {
-        return {
-          onSelect(context) {
-            const { selected, multiSelect, event: e } = context;
-            const { editing } = gfx.selection;
-            const alreadySelected = gfx.selection.has(model.id);
-
-            if (!multiSelect && selected && (alreadySelected || editing)) {
-              if (model.isLocked()) return;
-
-              if (alreadySelected && editing) {
-                return;
-              }
-
-              gfx.selection.set({
-                elements: [model.id],
-                editing: true,
-              });
-
-              view.updateComplete
-                .then(() => {
-                  if (!view.isConnected) {
-                    return;
-                  }
-
-                  if (model.children.length === 0) {
-                    const blockId = std.store.addBlock(
-                      'affine:paragraph',
-                      { type: 'text' },
-                      model.id
-                    );
-
-                    if (blockId) {
-                      focusTextModel(std, blockId);
-                    }
-                  } else {
-                    const rect = view
-                      .querySelector('.affine-block-children-container')
-                      ?.getBoundingClientRect();
-
-                    if (rect) {
-                      const offsetY = 8 * gfx.viewport.zoom;
-                      const offsetX = 2 * gfx.viewport.zoom;
-                      const x = clamp(
-                        e.clientX,
-                        rect.left + offsetX,
-                        rect.right - offsetX
-                      );
-                      const y = clamp(
-                        e.clientY,
-                        rect.top + offsetY,
-                        rect.bottom - offsetY
-                      );
-                      handleNativeRangeAtPoint(x, y);
-                    } else {
-                      handleNativeRangeAtPoint(e.clientX, e.clientY);
-                    }
-                  }
-                })
-                .catch(console.error);
-            } else {
-              context.default(context);
-            }
-          },
-        };
-      },
     }
   );

blocksuite/affine/blocks/paragraph/package.json

@@ -23,7 +23,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.14",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

blocksuite/affine/blocks/paragraph/src/paragraph-block.ts

@@ -7,10 +7,7 @@ import {
   BLOCK_CHILDREN_CONTAINER_PADDING_LEFT,
   EDGELESS_TOP_CONTENTEDITABLE_SELECTOR,
 } from '@blocksuite/affine-shared/consts';
-import {
-  CitationProvider,
-  DocModeProvider,
-} from '@blocksuite/affine-shared/services';
+import { DocModeProvider } from '@blocksuite/affine-shared/services';
 import {
   calculateCollapsedSiblings,
   getNearestHeadingBefore,
@@ -66,10 +63,6 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
       ?.getPlaceholder(this.model);
   }
 
-  get citationService() {
-    return this.std.get(CitationProvider);
-  }
-
   get attributeRenderer() {
     return this.inlineManager.getRenderer();
   }
@@ -101,12 +94,6 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
     return this.std.get(DefaultInlineManagerExtension.identifier);
   }
 
-  get hasCitationSiblings() {
-    return this.collapsedSiblings.some(sibling =>
-      this.citationService.isCitationModel(sibling)
-    );
-  }
-
   override get topContenteditableElement() {
     if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
       return this.closest<BlockComponent>(
@@ -299,13 +286,6 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
                         collapsed: value,
                       });
                     }
-
-                    if (this.hasCitationSiblings) {
-                      this.citationService.trackEvent('Expand', {
-                        control: 'Source Button',
-                        type: value ? 'Hide' : 'Show',
-                      });
-                    }
                   }}
                 ></blocksuite-toggle-button>
               `

blocksuite/affine/blocks/root/package.json

@@ -44,7 +44,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "dompurify": "^3.2.4",
     "html2canvas": "^1.4.1",

blocksuite/affine/blocks/root/src/edgeless/clipboard/clipboard.ts

@@ -9,10 +9,7 @@ import {
   getSurfaceComponent,
 } from '@blocksuite/affine-block-surface';
 import { splitIntoLines } from '@blocksuite/affine-gfx-text';
-import type {
-  EmbedCardStyle,
-  ShapeElementModel,
-} from '@blocksuite/affine-model';
+import type { ShapeElementModel } from '@blocksuite/affine-model';
 import {
   BookmarkStyles,
   DEFAULT_NOTE_HEIGHT,
@@ -239,7 +236,7 @@ export class EdgelessClipboardController extends PageClipboard {
       const options: Record<string, unknown> = {};
 
       let flavour = 'affine:bookmark';
-      let style: EmbedCardStyle = BookmarkStyles[0];
+      let style = BookmarkStyles[0];
       let isInternalLink = false;
       let isLinkedBlock = false;
 

blocksuite/affine/blocks/root/src/edgeless/edgeless-keyboard.ts

@@ -1,9 +1,6 @@
 import { insertLinkByQuickSearchCommand } from '@blocksuite/affine-block-bookmark';
 import { EdgelessTextBlockComponent } from '@blocksuite/affine-block-edgeless-text';
-import {
-  FrameTool,
-  type PresentToolOption,
-} from '@blocksuite/affine-block-frame';
+import { FrameTool } from '@blocksuite/affine-block-frame';
 import {
   DefaultTool,
   EdgelessLegacySlotIdentifier,
@@ -475,6 +472,9 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
         const selection = gfx.selection;
 
         if (event.code === 'Space' && !event.repeat) {
+          const currentToolName =
+            this.rootComponent.gfx.tool.currentToolName$.peek();
+          if (currentToolName === 'frameNavigator') return false;
           this._space(event);
         } else if (
           !selection.editing &&
@@ -512,6 +512,9 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
       ctx => {
         const event = ctx.get('keyboardState').raw;
         if (event.code === 'Space' && !event.repeat) {
+          const currentToolName =
+            this.rootComponent.gfx.tool.currentToolName$.peek();
+          if (currentToolName === 'frameNavigator') return false;
           this._space(event);
         }
         return false;
@@ -709,18 +712,10 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
 
     const revertToPrevTool = (ev: KeyboardEvent) => {
       if (ev.code === 'Space') {
-        const toolConstructor = currentTool.constructor as typeof DefaultTool;
-        let finalOptions = currentTool?.activatedOption;
-
-        // Handle frameNavigator (PresentTool) restoration after space pan
-        if (currentTool.toolName === 'frameNavigator') {
-          finalOptions = {
-            ...currentTool?.activatedOption,
-            restoredAfterPan: true,
-          } as PresentToolOption;
-        }
-
-        this._setEdgelessTool(toolConstructor, finalOptions);
+        this._setEdgelessTool(
+          (currentTool as DefaultTool).constructor as typeof DefaultTool,
+          currentTool?.activatedOption
+        );
         selection.set(currentSel);
         document.removeEventListener('keyup', revertToPrevTool, false);
       }
@@ -733,14 +728,6 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
       ) {
         return;
       }
-
-      // If in presentation mode, disable black background during space drag
-      if (currentTool.toolName === 'frameNavigator') {
-        this.slots.navigatorSettingUpdated.next({
-          blackBackground: false,
-        });
-      }
-
       this._setEdgelessTool(PanTool, { panning: false });
 
       this.std.event.disposables.addFromEvent(

blocksuite/affine/blocks/root/src/edgeless/edgeless-root-block.ts

@@ -129,7 +129,7 @@ export class EdgelessRootBlockComponent extends BlockComponent<
     ) as SurfaceBlockModel;
   }
 
-  get viewportElement(): HTMLElement {
+  private get _viewportElement(): HTMLElement {
     return this.std.get(ViewportElementProvider).viewportElement;
   }
 
@@ -267,7 +267,7 @@ export class EdgelessRootBlockComponent extends BlockComponent<
       this.gfx.viewport.onResize();
     });
 
-    resizeObserver.observe(this.viewportElement);
+    resizeObserver.observe(this._viewportElement);
     this._resizeObserver = resizeObserver;
   }
 

blocksuite/affine/blocks/root/src/edgeless/edgeless-root-service.ts

@@ -16,6 +16,7 @@ import type {
   GfxController,
   GfxModel,
   LayerManager,
+  PointTestOptions,
   ReorderingDirection,
 } from '@blocksuite/std/gfx';
 import {
@@ -167,6 +168,19 @@ export class EdgelessRootService
     this._initReadonlyListener();
   }
 
+  /**
+   * This method is used to pick element in group, if the picked element is in a
+   * group, we will pick the group instead. If that picked group is currently selected, then
+   * we will pick the element itself.
+   */
+  pickElementInGroup(
+    x: number,
+    y: number,
+    options?: PointTestOptions
+  ): GfxModel | null {
+    return this.gfx.getElementInGroup(x, y, options);
+  }
+
   removeElement(id: string | GfxModel) {
     id = typeof id === 'string' ? id : id.id;
 

blocksuite/affine/blocks/surface-ref/package.json

@@ -25,7 +25,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "fractional-indexing": "^3.2.0",
     "lit": "^3.2.0",

blocksuite/affine/blocks/surface/package.json

@@ -20,7 +20,7 @@
     "@blocksuite/store": "workspace:*",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "fractional-indexing": "^3.2.0",
     "html2canvas": "^1.4.1",

blocksuite/affine/blocks/surface/src/extensions/connector-dom-renderer.ts

@@ -0,0 +1,3 @@
+import { ConnectorDomRendererExtension } from '../renderer/dom-elements/index.js';
+
+export { ConnectorDomRendererExtension };

blocksuite/affine/blocks/surface/src/extensions/index.ts

@@ -1,4 +1,5 @@
 export * from './clipboard-config';
+export * from './connector-dom-renderer';
 export * from './crud-extension';
 export * from './dom-element-renderer';
 export * from './edit-props-middleware-builder';

blocksuite/affine/blocks/surface/src/renderer/dom-elements/connector.ts

@@ -0,0 +1,398 @@
+import type { ConnectorElementModel } from '@blocksuite/affine-model';
+import { ConnectorMode, DefaultTheme } from '@blocksuite/affine-model';
+import {
+  getBezierParameters,
+  type PointLocation,
+} from '@blocksuite/global/gfx';
+
+import { DomElementRendererExtension } from '../../extensions/dom-element-renderer.js';
+import type { DomRenderer } from '../dom-renderer.js';
+import type { DomElementRenderer } from './index.js';
+
+/**
+ * DOM renderer for connector elements.
+ * Uses SVG to render connector paths, endpoints, and labels.
+ */
+export const connectorDomRenderer: DomElementRenderer<ConnectorElementModel> = (
+  elementModel,
+  domElement,
+  renderer
+) => {
+  const {
+    mode,
+    path: points,
+    strokeStyle,
+    frontEndpointStyle,
+    rearEndpointStyle,
+    strokeWidth,
+    stroke,
+    w,
+    h,
+  } = elementModel;
+
+  // Clear previous content
+  domElement.innerHTML = '';
+
+  // Points might not be built yet in some scenarios (undo/redo, copy/paste)
+  if (!points.length || points.length < 2) {
+    return;
+  }
+
+  // Create SVG element
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.style.width = `${w * renderer.viewport.zoom}px`;
+  svg.style.height = `${h * renderer.viewport.zoom}px`;
+  svg.style.position = 'absolute';
+  svg.style.top = '0';
+  svg.style.left = '0';
+  svg.style.pointerEvents = 'none';
+  svg.style.overflow = 'visible';
+
+  const strokeColor = renderer.getColorValue(
+    stroke,
+    DefaultTheme.connectorColor,
+    true
+  );
+
+  // Render connector path
+  renderConnectorPath(
+    svg,
+    points,
+    mode,
+    strokeStyle,
+    strokeWidth,
+    strokeColor,
+    renderer.viewport.zoom
+  );
+
+  // Render endpoints
+  if (frontEndpointStyle && frontEndpointStyle !== 'None') {
+    renderEndpoint(
+      svg,
+      points,
+      frontEndpointStyle,
+      'front',
+      strokeWidth,
+      strokeColor,
+      mode,
+      renderer.viewport.zoom
+    );
+  }
+
+  if (rearEndpointStyle && rearEndpointStyle !== 'None') {
+    renderEndpoint(
+      svg,
+      points,
+      rearEndpointStyle,
+      'rear',
+      strokeWidth,
+      strokeColor,
+      mode,
+      renderer.viewport.zoom
+    );
+  }
+
+  // Render label if exists
+  if (elementModel.hasLabel()) {
+    renderConnectorLabel(elementModel, domElement, renderer);
+  }
+
+  domElement.appendChild(svg);
+};
+
+function renderConnectorPath(
+  svg: SVGSVGElement,
+  points: PointLocation[],
+  mode: ConnectorMode,
+  strokeStyle: string,
+  strokeWidth: number,
+  strokeColor: string,
+  zoom: number
+) {
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+
+  let pathData = '';
+
+  if (mode === ConnectorMode.Curve) {
+    // Bezier curve
+    const bezierParams = getBezierParameters(points);
+    const [p0, p1, p2, p3] = bezierParams;
+    pathData = `M ${p0[0]} ${p0[1]} C ${p1[0]} ${p1[1]} ${p2[0]} ${p2[1]} ${p3[0]} ${p3[1]}`;
+  } else {
+    // Straight or orthogonal lines
+    pathData = `M ${points[0][0]} ${points[0][1]}`;
+    for (let i = 1; i < points.length; i++) {
+      pathData += ` L ${points[i][0]} ${points[i][1]}`;
+    }
+  }
+
+  path.setAttribute('d', pathData);
+  path.setAttribute('stroke', strokeColor);
+  path.setAttribute('stroke-width', (strokeWidth * zoom).toString());
+  path.setAttribute('fill', 'none');
+  path.setAttribute('stroke-linecap', 'round');
+  path.setAttribute('stroke-linejoin', 'round');
+
+  if (strokeStyle === 'dash') {
+    const dashArray = `${12 * zoom},${12 * zoom}`;
+    path.setAttribute('stroke-dasharray', dashArray);
+  }
+
+  svg.appendChild(path);
+}
+
+function renderEndpoint(
+  svg: SVGSVGElement,
+  points: PointLocation[],
+  endpointStyle: string,
+  position: 'front' | 'rear',
+  strokeWidth: number,
+  strokeColor: string,
+  mode: ConnectorMode,
+  zoom: number
+) {
+  const pointIndex = position === 'rear' ? points.length - 1 : 0;
+  const point = points[pointIndex];
+  const size = 15 * (strokeWidth / 2) * zoom;
+
+  // Calculate tangent direction for endpoint orientation
+  let tangent: [number, number];
+  if (mode === ConnectorMode.Curve) {
+    const bezierParams = getBezierParameters(points);
+    // For curve mode, use bezier tangent
+    if (position === 'rear') {
+      const lastIdx = points.length - 1;
+      const prevPoint = points[lastIdx - 1];
+      tangent = [point[0] - prevPoint[0], point[1] - prevPoint[1]];
+    } else {
+      const nextPoint = points[1];
+      tangent = [nextPoint[0] - point[0], nextPoint[1] - point[1]];
+    }
+  } else {
+    // For straight/orthogonal mode
+    if (position === 'rear') {
+      const prevPoint = points[points.length - 2];
+      tangent = [point[0] - prevPoint[0], point[1] - prevPoint[1]];
+    } else {
+      const nextPoint = points[1];
+      tangent = [nextPoint[0] - point[0], nextPoint[1] - point[1]];
+    }
+  }
+
+  // Normalize tangent
+  const length = Math.sqrt(tangent[0] * tangent[0] + tangent[1] * tangent[1]);
+  if (length > 0) {
+    tangent[0] /= length;
+    tangent[1] /= length;
+  }
+
+  // Adjust tangent direction for front endpoint
+  if (position === 'front') {
+    tangent[0] = -tangent[0];
+    tangent[1] = -tangent[1];
+  }
+
+  switch (endpointStyle) {
+    case 'Arrow':
+      renderArrowEndpoint(svg, point, tangent, size, strokeColor, zoom);
+      break;
+    case 'Triangle':
+      renderTriangleEndpoint(svg, point, tangent, size, strokeColor, zoom);
+      break;
+    case 'Circle':
+      renderCircleEndpoint(svg, point, tangent, size, strokeColor, zoom);
+      break;
+    case 'Diamond':
+      renderDiamondEndpoint(svg, point, tangent, size, strokeColor, zoom);
+      break;
+  }
+}
+
+function renderArrowEndpoint(
+  svg: SVGSVGElement,
+  point: PointLocation,
+  tangent: [number, number],
+  size: number,
+  color: string,
+  zoom: number
+) {
+  const angle = Math.PI / 4; // 45 degrees
+  const arrowPath = document.createElementNS(
+    'http://www.w3.org/2000/svg',
+    'path'
+  );
+
+  // Calculate arrow points
+  const cos1 = Math.cos(angle);
+  const sin1 = Math.sin(angle);
+  const cos2 = Math.cos(-angle);
+  const sin2 = Math.sin(-angle);
+
+  const x1 = point[0] + size * (tangent[0] * cos1 - tangent[1] * sin1);
+  const y1 = point[1] + size * (tangent[0] * sin1 + tangent[1] * cos1);
+  const x2 = point[0] + size * (tangent[0] * cos2 - tangent[1] * sin2);
+  const y2 = point[1] + size * (tangent[0] * sin2 + tangent[1] * cos2);
+
+  const pathData = `M ${x1} ${y1} L ${point[0]} ${point[1]} L ${x2} ${y2}`;
+  arrowPath.setAttribute('d', pathData);
+  arrowPath.setAttribute('stroke', color);
+  arrowPath.setAttribute('stroke-width', (2 * zoom).toString());
+  arrowPath.setAttribute('fill', 'none');
+  arrowPath.setAttribute('stroke-linecap', 'round');
+  arrowPath.setAttribute('stroke-linejoin', 'round');
+
+  svg.appendChild(arrowPath);
+}
+
+function renderTriangleEndpoint(
+  svg: SVGSVGElement,
+  point: PointLocation,
+  tangent: [number, number],
+  size: number,
+  color: string,
+  zoom: number
+) {
+  const triangle = document.createElementNS(
+    'http://www.w3.org/2000/svg',
+    'polygon'
+  );
+
+  const angle = Math.PI / 3; // 60 degrees
+  const cos1 = Math.cos(angle);
+  const sin1 = Math.sin(angle);
+  const cos2 = Math.cos(-angle);
+  const sin2 = Math.sin(-angle);
+
+  const x1 = point[0] + size * (tangent[0] * cos1 - tangent[1] * sin1);
+  const y1 = point[1] + size * (tangent[0] * sin1 + tangent[1] * cos1);
+  const x2 = point[0] + size * (tangent[0] * cos2 - tangent[1] * sin2);
+  const y2 = point[1] + size * (tangent[0] * sin2 + tangent[1] * cos2);
+
+  const points = `${point[0]},${point[1]} ${x1},${y1} ${x2},${y2}`;
+  triangle.setAttribute('points', points);
+  triangle.setAttribute('fill', color);
+  triangle.setAttribute('stroke', color);
+  triangle.setAttribute('stroke-width', (1 * zoom).toString());
+
+  svg.appendChild(triangle);
+}
+
+function renderCircleEndpoint(
+  svg: SVGSVGElement,
+  point: PointLocation,
+  tangent: [number, number],
+  size: number,
+  color: string,
+  zoom: number
+) {
+  const circle = document.createElementNS(
+    'http://www.w3.org/2000/svg',
+    'circle'
+  );
+
+  const radius = size * 0.5;
+  const centerX = point[0] + radius * tangent[0];
+  const centerY = point[1] + radius * tangent[1];
+
+  circle.setAttribute('cx', centerX.toString());
+  circle.setAttribute('cy', centerY.toString());
+  circle.setAttribute('r', radius.toString());
+  circle.setAttribute('fill', color);
+  circle.setAttribute('stroke', color);
+  circle.setAttribute('stroke-width', (1 * zoom).toString());
+
+  svg.appendChild(circle);
+}
+
+function renderDiamondEndpoint(
+  svg: SVGSVGElement,
+  point: PointLocation,
+  tangent: [number, number],
+  size: number,
+  color: string,
+  zoom: number
+) {
+  const diamond = document.createElementNS(
+    'http://www.w3.org/2000/svg',
+    'polygon'
+  );
+
+  // Calculate diamond points
+  const perpX = -tangent[1]; // Perpendicular to tangent
+  const perpY = tangent[0];
+
+  const halfSize = size * 0.5;
+  const x1 = point[0] + halfSize * tangent[0]; // Front point
+  const y1 = point[1] + halfSize * tangent[1];
+  const x2 = point[0] + halfSize * perpX; // Right point
+  const y2 = point[1] + halfSize * perpY;
+  const x3 = point[0] - halfSize * tangent[0]; // Back point
+  const y3 = point[1] - halfSize * tangent[1];
+  const x4 = point[0] - halfSize * perpX; // Left point
+  const y4 = point[1] - halfSize * perpY;
+
+  const points = `${x1},${y1} ${x2},${y2} ${x3},${y3} ${x4},${y4}`;
+  diamond.setAttribute('points', points);
+  diamond.setAttribute('fill', color);
+  diamond.setAttribute('stroke', color);
+  diamond.setAttribute('stroke-width', (1 * zoom).toString());
+
+  svg.appendChild(diamond);
+}
+
+function renderConnectorLabel(
+  elementModel: ConnectorElementModel,
+  domElement: HTMLElement,
+  renderer: DomRenderer
+) {
+  if (!elementModel.text || !elementModel.labelXYWH) {
+    return;
+  }
+
+  const labelElement = document.createElement('div');
+  const [lx, ly, lw, lh] = elementModel.labelXYWH;
+  const { x, y } = elementModel;
+
+  // Position label relative to the connector
+  const relativeX = (lx - x) * renderer.viewport.zoom;
+  const relativeY = (ly - y) * renderer.viewport.zoom;
+
+  labelElement.style.position = 'absolute';
+  labelElement.style.left = `${relativeX}px`;
+  labelElement.style.top = `${relativeY}px`;
+  labelElement.style.width = `${lw * renderer.viewport.zoom}px`;
+  labelElement.style.height = `${lh * renderer.viewport.zoom}px`;
+  labelElement.style.pointerEvents = 'auto';
+  labelElement.style.display = 'flex';
+  labelElement.style.alignItems = 'center';
+  labelElement.style.justifyContent = 'center';
+  labelElement.style.backgroundColor = 'white';
+  labelElement.style.border = '1px solid #e0e0e0';
+  labelElement.style.borderRadius = '4px';
+  labelElement.style.padding = '2px 4px';
+  labelElement.style.fontSize = `${(elementModel.labelStyle?.fontSize || 16) * renderer.viewport.zoom}px`;
+  labelElement.style.fontFamily =
+    elementModel.labelStyle?.fontFamily || 'Inter';
+  labelElement.style.color = renderer.getColorValue(
+    elementModel.labelStyle?.color || DefaultTheme.black,
+    DefaultTheme.black,
+    true
+  );
+  labelElement.style.textAlign = elementModel.labelStyle?.textAlign || 'center';
+  labelElement.style.overflow = 'hidden';
+  labelElement.style.whiteSpace = 'nowrap';
+  labelElement.style.textOverflow = 'ellipsis';
+
+  // Set label text content
+  labelElement.textContent = elementModel.text.toString();
+
+  domElement.appendChild(labelElement);
+}
+
+// Export the extension
+import { DomElementRendererExtension } from '../../extensions/dom-element-renderer.js';
+
+export const ConnectorDomRendererExtension = DomElementRendererExtension(
+  'connector',
+  connectorDomRenderer
+);

blocksuite/affine/blocks/surface/src/renderer/dom-elements/index.ts

@@ -29,3 +29,9 @@ export const DomElementRendererIdentifier = (type: string) =>
 export type DomElementRenderer<
   T extends SurfaceElementModel = SurfaceElementModel,
 > = (elementModel: T, domElement: HTMLElement, renderer: DomRenderer) => void;
+
+// Export the connector DOM renderer
+export {
+  connectorDomRenderer,
+  ConnectorDomRendererExtension,
+} from './connector.js';

blocksuite/affine/blocks/surface/src/renderer/dom-renderer.ts

@@ -43,25 +43,6 @@ type RendererOptions = {
   surfaceModel: SurfaceBlockModel;
 };
 
-const UpdateType = {
-  ELEMENT_ADDED: 'element-added',
-  ELEMENT_REMOVED: 'element-removed',
-  ELEMENT_UPDATED: 'element-updated',
-  VIEWPORT_CHANGED: 'viewport-changed',
-  SIZE_CHANGED: 'size-changed',
-  ZOOM_STATE_CHANGED: 'zoom-state-changed',
-} as const;
-
-type UpdateType = (typeof UpdateType)[keyof typeof UpdateType];
-
-interface IncrementalUpdateState {
-  dirtyElementIds: Set<string>;
-  viewportDirty: boolean;
-  sizeDirty: boolean;
-  usePlaceholderDirty: boolean;
-  pendingUpdates: Map<string, UpdateType[]>;
-}
-
 const PLACEHOLDER_RESET_STYLES = {
   border: 'none',
   borderRadius: '0',
@@ -100,53 +81,6 @@ function getOpacity(elementModel: SurfaceElementModel) {
   return { opacity: `${elementModel.opacity ?? 1}` };
 }
 
-/**
- * @class DomRenderer
- * Renders surface elements directly to the DOM using HTML elements and CSS.
- *
- * This renderer supports an extension mechanism to handle different types of surface elements.
- * To add rendering support for a new element type (e.g., 'my-custom-element'), follow these steps:
- *
- * 1.  **Define the Renderer Function**:
- *     Create a function that implements the rendering logic for your element.
- *     This function will receive the element's model, the target HTMLElement, and the DomRenderer instance.
- *     Signature: `(model: MyCustomElementModel, domElement: HTMLElement, renderer: DomRenderer) => void;`
- *     Example: `shapeDomRenderer` in `blocksuite/affine/gfx/shape/src/element-renderer/shape-dom/index.ts`.
- *     In this function, you'll apply styles and attributes to the `domElement` based on the `model`.
- *
- * 2.  **Create the Renderer Extension**:
- *     Create a new file (e.g., `my-custom-element-dom-renderer.extension.ts`).
- *     Import `DomElementRendererExtension` (e.g., from `@blocksuite/affine-block-surface` or its source location
- *     `blocksuite/affine/blocks/surface/src/extensions/dom-element-renderer.ts`).
- *     Import your renderer function (from step 1).
- *     Use the factory to create your extension:
- *     `export const MyCustomElementDomRendererExtension = DomElementRendererExtension('my-custom-element', myCustomElementRendererFn);`
- *     Example: `ShapeDomRendererExtension` in `blocksuite/affine/gfx/shape/src/element-renderer/shape-dom.ts`.
- *
- * 3.  **Register the Extension**:
- *     In your application setup where BlockSuite services and view extensions are registered (e.g., a `ViewExtensionProvider`
- *     or a central DI configuration place), import your new extension (from step 2) and register it with the
- *     dependency injection container.
- *     Example: `context.register(MyCustomElementDomRendererExtension);`
- *     As seen with `ShapeDomRendererExtension` being registered in `blocksuite/affine/gfx/shape/src/view.ts`.
- *
- * 4.  **Core Infrastructure (Provided by DomRenderer System)**:
- *     -   `DomElementRenderer` (type): The function signature for renderers, defined in
- *         `blocksuite/affine/blocks/surface/src/renderer/dom-elements/index.ts`.
- *     -   `DomElementRendererIdentifier` (function): Creates unique service identifiers for DI,
- *         used by `DomRenderer` to look up specific renderers. Defined in the same file.
- *     -   `DomElementRendererExtension` (factory): A helper to create extension objects for easy registration.
- *         (e.g., from `@blocksuite/affine-block-surface` or its source).
- *     -   `DomRenderer._renderElement()`: This method automatically looks up the registered renderer using
- *         `DomElementRendererIdentifier(elementType)` and calls it if found.
- *
- * 5.  **Ensure Exports**:
- *     -   The `DomRenderer` class itself should be accessible (e.g., exported from `@blocksuite/affine/blocks/surface`).
- *     -   The `DomElementRendererExtension` factory should be accessible.
- *
- * By following these steps, `DomRenderer` will automatically pick up and use your custom rendering logic
- * when it encounters elements of 'my-custom-element' type.
- */
 export class DomRenderer {
   private _container!: HTMLElement;
 
@@ -160,18 +94,6 @@ export class DomRenderer {
 
   private _sizeUpdatedRafId: number | null = null;
 
-  private readonly _updateState: IncrementalUpdateState = {
-    dirtyElementIds: new Set(),
-    viewportDirty: false,
-    sizeDirty: false,
-    usePlaceholderDirty: false,
-    pendingUpdates: new Map(),
-  };
-
-  private _lastViewportBounds: Bound | null = null;
-  private _lastZoom: number | null = null;
-  private _lastUsePlaceholder: boolean = false;
-
   rootElement: HTMLElement;
 
   private readonly _elementsMap = new Map<string, HTMLElement>();
@@ -217,7 +139,6 @@ export class DomRenderer {
   private _initViewport() {
     this._disposables.add(
       this.viewport.viewportUpdated.subscribe(() => {
-        this._markViewportDirty();
         this.refresh();
       })
     );
@@ -227,7 +148,6 @@ export class DomRenderer {
         if (this._sizeUpdatedRafId) return;
         this._sizeUpdatedRafId = requestConnectedFrame(() => {
           this._sizeUpdatedRafId = null;
-          this._markSizeDirty();
           this._resetSize();
           this._render();
           this.refresh();
@@ -241,7 +161,6 @@ export class DomRenderer {
 
         if (this.usePlaceholder !== shouldRenderPlaceholders) {
           this.usePlaceholder = shouldRenderPlaceholders;
-          this._markUsePlaceholderDirty();
           this.refresh();
         }
       })
@@ -341,292 +260,6 @@ export class DomRenderer {
   }
 
   private _render() {
-    this._renderIncremental();
-  }
-
-  private _watchSurface(surfaceModel: SurfaceBlockModel) {
-    this._disposables.add(
-      surfaceModel.elementAdded.subscribe(payload => {
-        this._markElementDirty(payload.id, UpdateType.ELEMENT_ADDED);
-        this.refresh();
-      })
-    );
-    this._disposables.add(
-      surfaceModel.elementRemoved.subscribe(payload => {
-        this._markElementDirty(payload.id, UpdateType.ELEMENT_REMOVED);
-        this.refresh();
-      })
-    );
-    this._disposables.add(
-      surfaceModel.localElementAdded.subscribe(payload => {
-        this._markElementDirty(payload.id, UpdateType.ELEMENT_ADDED);
-        this.refresh();
-      })
-    );
-    this._disposables.add(
-      surfaceModel.localElementDeleted.subscribe(payload => {
-        this._markElementDirty(payload.id, UpdateType.ELEMENT_REMOVED);
-        this.refresh();
-      })
-    );
-    this._disposables.add(
-      surfaceModel.localElementUpdated.subscribe(payload => {
-        this._markElementDirty(payload.model.id, UpdateType.ELEMENT_UPDATED);
-        this.refresh();
-      })
-    );
-
-    this._disposables.add(
-      surfaceModel.elementUpdated.subscribe(payload => {
-        // ignore externalXYWH update cause it's updated by the renderer
-        if (payload.props['externalXYWH']) return;
-        this._markElementDirty(payload.id, UpdateType.ELEMENT_UPDATED);
-        this.refresh();
-      })
-    );
-  }
-
-  addOverlay = (overlay: Overlay) => {
-    overlay.setRenderer(null);
-    this._overlays.add(overlay);
-    this.refresh();
-  };
-
-  attach = (container: HTMLElement) => {
-    this._container = container;
-    container.append(this.rootElement);
-
-    this._resetSize();
-    this.refresh();
-  };
-
-  dispose = () => {
-    this._overlays.forEach(overlay => overlay.dispose());
-    this._overlays.clear();
-    this._disposables.dispose();
-
-    if (this._refreshRafId) {
-      cancelAnimationFrame(this._refreshRafId);
-      this._refreshRafId = null;
-    }
-    if (this._sizeUpdatedRafId) {
-      cancelAnimationFrame(this._sizeUpdatedRafId);
-      this._sizeUpdatedRafId = null;
-    }
-
-    this.rootElement.remove();
-    this._elementsMap.clear();
-  };
-
-  generateColorProperty = (color: Color, fallback?: Color) => {
-    return (
-      this.provider.generateColorProperty?.(color, fallback) ?? 'transparent'
-    );
-  };
-
-  getColorScheme = () => {
-    return this.provider.getColorScheme?.() ?? ColorScheme.Light;
-  };
-
-  getColorValue = (color: Color, fallback?: Color, real?: boolean) => {
-    return (
-      this.provider.getColorValue?.(color, fallback, real) ?? 'transparent'
-    );
-  };
-
-  getPropertyValue = (property: string) => {
-    return this.provider.getPropertyValue?.(property) ?? '';
-  };
-
-  refresh = () => {
-    if (this._refreshRafId !== null) return;
-
-    this._refreshRafId = requestConnectedFrame(() => {
-      this._refreshRafId = null;
-      this._render();
-    }, this._container);
-  };
-
-  removeOverlay = (overlay: Overlay) => {
-    if (!this._overlays.has(overlay)) {
-      return;
-    }
-
-    this._overlays.delete(overlay);
-    this.refresh();
-  };
-
-  /**
-   * Mark a specific element as dirty for incremental updates
-   * @param elementId - The ID of the element to mark as dirty
-   * @param updateType - The type of update (optional, defaults to ELEMENT_UPDATED)
-   */
-  markElementDirty = (
-    elementId: string,
-    updateType: UpdateType = UpdateType.ELEMENT_UPDATED
-  ) => {
-    this._markElementDirty(elementId, updateType);
-  };
-
-  /**
-   * Force a full re-render of all elements
-   */
-  forceFullRender = () => {
-    this._updateState.viewportDirty = true;
-    this.refresh();
-  };
-
-  private _markElementDirty(elementId: string, updateType: UpdateType) {
-    this._updateState.dirtyElementIds.add(elementId);
-    const currentUpdates =
-      this._updateState.pendingUpdates.get(elementId) || [];
-    if (!currentUpdates.includes(updateType)) {
-      currentUpdates.push(updateType);
-      this._updateState.pendingUpdates.set(elementId, currentUpdates);
-    }
-  }
-
-  private _markViewportDirty() {
-    this._updateState.viewportDirty = true;
-  }
-
-  private _markSizeDirty() {
-    this._updateState.sizeDirty = true;
-  }
-
-  private _markUsePlaceholderDirty() {
-    this._updateState.usePlaceholderDirty = true;
-  }
-
-  private _clearUpdateState() {
-    this._updateState.dirtyElementIds.clear();
-    this._updateState.viewportDirty = false;
-    this._updateState.sizeDirty = false;
-    this._updateState.usePlaceholderDirty = false;
-    this._updateState.pendingUpdates.clear();
-  }
-
-  private _isViewportChanged(): boolean {
-    const { viewportBounds, zoom } = this.viewport;
-
-    if (!this._lastViewportBounds || !this._lastZoom) {
-      return true;
-    }
-
-    return (
-      this._lastViewportBounds.x !== viewportBounds.x ||
-      this._lastViewportBounds.y !== viewportBounds.y ||
-      this._lastViewportBounds.w !== viewportBounds.w ||
-      this._lastViewportBounds.h !== viewportBounds.h ||
-      this._lastZoom !== zoom
-    );
-  }
-
-  private _isUsePlaceholderChanged(): boolean {
-    return this._lastUsePlaceholder !== this.usePlaceholder;
-  }
-
-  private _updateLastState() {
-    const { viewportBounds, zoom } = this.viewport;
-    this._lastViewportBounds = {
-      x: viewportBounds.x,
-      y: viewportBounds.y,
-      w: viewportBounds.w,
-      h: viewportBounds.h,
-    } as Bound;
-    this._lastZoom = zoom;
-    this._lastUsePlaceholder = this.usePlaceholder;
-  }
-
-  private _renderIncremental() {
-    const { viewportBounds, zoom } = this.viewport;
-    const addedElements: HTMLElement[] = [];
-    const elementsToRemove: HTMLElement[] = [];
-
-    const needsFullRender =
-      this._isViewportChanged() ||
-      this._isUsePlaceholderChanged() ||
-      this._updateState.sizeDirty ||
-      this._updateState.viewportDirty ||
-      this._updateState.usePlaceholderDirty;
-
-    if (needsFullRender) {
-      this._renderFull();
-      this._updateLastState();
-      this._clearUpdateState();
-      return;
-    }
-
-    // Only update dirty elements
-    const elementsFromGrid = this.grid.search(viewportBounds, {
-      filter: ['canvas', 'local'],
-    }) as SurfaceElementModel[];
-
-    const visibleElementIds = new Set<string>();
-
-    // 1. Update dirty elements
-    for (const elementModel of elementsFromGrid) {
-      const display = (elementModel.display ?? true) && !elementModel.hidden;
-      if (
-        display &&
-        intersects(getBoundWithRotation(elementModel), viewportBounds)
-      ) {
-        visibleElementIds.add(elementModel.id);
-
-        // Only update dirty elements
-        if (this._updateState.dirtyElementIds.has(elementModel.id)) {
-          if (
-            this.usePlaceholder &&
-            !(elementModel as GfxCompatibleInterface).forceFullRender
-          ) {
-            this._renderOrUpdatePlaceholder(
-              elementModel,
-              viewportBounds,
-              zoom,
-              addedElements
-            );
-          } else {
-            this._renderOrUpdateFullElement(
-              elementModel,
-              viewportBounds,
-              zoom,
-              addedElements
-            );
-          }
-        }
-      }
-    }
-
-    // 2. Remove elements that are no longer in the grid
-    for (const elementId of this._updateState.dirtyElementIds) {
-      const updateTypes = this._updateState.pendingUpdates.get(elementId) || [];
-      if (
-        updateTypes.includes(UpdateType.ELEMENT_REMOVED) ||
-        !visibleElementIds.has(elementId)
-      ) {
-        const domElem = this._elementsMap.get(elementId);
-        if (domElem) {
-          domElem.remove();
-          this._elementsMap.delete(elementId);
-          elementsToRemove.push(domElem);
-        }
-      }
-    }
-
-    // 3. Notify changes
-    if (addedElements.length > 0 || elementsToRemove.length > 0) {
-      this.elementsUpdated.next({
-        elements: Array.from(this._elementsMap.values()),
-        added: addedElements,
-        removed: elementsToRemove,
-      });
-    }
-
-    this._updateLastState();
-    this._clearUpdateState();
-  }
-
-  private _renderFull() {
     const { viewportBounds, zoom } = this.viewport;
     const addedElements: HTMLElement[] = [];
     const elementsToRemove: HTMLElement[] = [];
@@ -707,4 +340,100 @@ export class DomRenderer {
       });
     }
   }
+
+  private _watchSurface(surfaceModel: SurfaceBlockModel) {
+    this._disposables.add(
+      surfaceModel.elementAdded.subscribe(() => this.refresh())
+    );
+    this._disposables.add(
+      surfaceModel.elementRemoved.subscribe(() => this.refresh())
+    );
+    this._disposables.add(
+      surfaceModel.localElementAdded.subscribe(() => this.refresh())
+    );
+    this._disposables.add(
+      surfaceModel.localElementDeleted.subscribe(() => this.refresh())
+    );
+    this._disposables.add(
+      surfaceModel.localElementUpdated.subscribe(() => this.refresh())
+    );
+
+    this._disposables.add(
+      surfaceModel.elementUpdated.subscribe(payload => {
+        // ignore externalXYWH update cause it's updated by the renderer
+        if (payload.props['externalXYWH']) return;
+        this.refresh();
+      })
+    );
+  }
+
+  addOverlay(overlay: Overlay) {
+    overlay.setRenderer(null);
+    this._overlays.add(overlay);
+    this.refresh();
+  }
+
+  attach(container: HTMLElement) {
+    this._container = container;
+    container.append(this.rootElement);
+
+    this._resetSize();
+    this.refresh();
+  }
+
+  dispose(): void {
+    this._overlays.forEach(overlay => overlay.dispose());
+    this._overlays.clear();
+    this._disposables.dispose();
+
+    if (this._refreshRafId) {
+      cancelAnimationFrame(this._refreshRafId);
+      this._refreshRafId = null;
+    }
+    if (this._sizeUpdatedRafId) {
+      cancelAnimationFrame(this._sizeUpdatedRafId);
+      this._sizeUpdatedRafId = null;
+    }
+
+    this.rootElement.remove();
+    this._elementsMap.clear();
+  }
+
+  generateColorProperty(color: Color, fallback?: Color) {
+    return (
+      this.provider.generateColorProperty?.(color, fallback) ?? 'transparent'
+    );
+  }
+
+  getColorScheme() {
+    return this.provider.getColorScheme?.() ?? ColorScheme.Light;
+  }
+
+  getColorValue(color: Color, fallback?: Color, real?: boolean) {
+    return (
+      this.provider.getColorValue?.(color, fallback, real) ?? 'transparent'
+    );
+  }
+
+  getPropertyValue(property: string) {
+    return this.provider.getPropertyValue?.(property) ?? '';
+  }
+
+  refresh() {
+    if (this._refreshRafId !== null) return;
+
+    this._refreshRafId = requestConnectedFrame(() => {
+      this._refreshRafId = null;
+      this._render();
+    }, this._container);
+  }
+
+  removeOverlay(overlay: Overlay) {
+    if (!this._overlays.has(overlay)) {
+      return;
+    }
+
+    this._overlays.delete(overlay);
+    this.refresh();
+  }
 }

blocksuite/affine/blocks/surface/src/renderer/overlay.ts

@@ -35,9 +35,7 @@ export abstract class Overlay extends Extension {
     ]);
   }
 
-  clear() {
-    this.refresh();
-  }
+  clear() {}
 
   dispose() {}
 

blocksuite/affine/blocks/surface/src/tool/default-tool.ts

@@ -154,6 +154,32 @@ export class DefaultTool extends BaseTool {
   private _determineDragType(evt: PointerEventState): DefaultModeDragType {
     const { x, y } = this.controller.lastMousePos$.peek();
     if (this.selection.isInSelectedRect(x, y)) {
+      if (this.selection.selectedElements.length === 1) {
+        const currentHoveredElem = this._getElementInGroup(x, y);
+        let curSelected = this.selection.selectedElements[0];
+
+        // If one of the following condition is true, keep the selection:
+        // 1. if group is currently selected
+        // 2. if the selected element is descendant of the hovered element
+        // 3. not hovering any element or hovering the same element
+        //
+        // Otherwise, we update the selection to the current hovered element
+        const shouldKeepSelection =
+          isGfxGroupCompatibleModel(curSelected) ||
+          (isGfxGroupCompatibleModel(currentHoveredElem) &&
+            currentHoveredElem.hasDescendant(curSelected)) ||
+          !currentHoveredElem ||
+          currentHoveredElem === curSelected;
+
+        if (!shouldKeepSelection) {
+          curSelected = currentHoveredElem;
+          this.selection.set({
+            elements: [curSelected.id],
+            editing: false,
+          });
+        }
+      }
+
       return this.selection.editing
         ? DefaultModeDragType.NativeEditing
         : DefaultModeDragType.ContentMoving;
@@ -168,6 +194,17 @@ export class DefaultTool extends BaseTool {
     }
   }
 
+  private _getElementInGroup(modelX: number, modelY: number) {
+    const tryGetLockedAncestor = (e: GfxModel | null) => {
+      if (e?.isLockedByAncestor()) {
+        return e.groups.findLast(group => group.isLocked());
+      }
+      return e;
+    };
+
+    return tryGetLockedAncestor(this.gfx.getElementInGroup(modelX, modelY));
+  }
+
   private initializeDragState(
     dragType: DefaultModeDragType,
     event: PointerEventState

blocksuite/affine/blocks/surface/src/view.ts

@@ -7,6 +7,7 @@ import { literal } from 'lit/static-html.js';
 
 import { effects } from './effects';
 import {
+  ConnectorDomRendererExtension,
   EdgelessCRUDExtension,
   EdgelessLegacySlotExtension,
   EditPropsMiddlewareBuilder,
@@ -26,6 +27,7 @@ export class SurfaceViewExtension extends ViewExtensionProvider {
     super.setup(context);
     context.register([
       FlavourExtension('affine:surface'),
+      ConnectorDomRendererExtension,
       EdgelessCRUDExtension,
       EdgelessLegacySlotExtension,
       ExportManagerExtension,

blocksuite/affine/blocks/table/src/selection-schema.ts

@@ -67,8 +67,6 @@ export class TableSelection extends BaseSelection {
 
   static override type = 'table';
 
-  static override recoverable = true;
-
   readonly data: TableSelectionData;
 
   constructor({

blocksuite/affine/components/package.json

@@ -21,7 +21,7 @@
     "@lit/context": "^1.1.2",
     "@lottiefiles/dotlottie-wc": "^0.5.0",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.14",
     "@types/hast": "^3.0.4",
     "@types/katex": "^0.16.7",
     "@types/lodash-es": "^4.17.12",

blocksuite/affine/components/src/context-menu/input.ts

@@ -111,7 +111,6 @@ export class MenuInput extends MenuFocusable {
       }}"
       @input="${this.onInput}"
       placeholder="${this.data.placeholder ?? ''}"
-      @keypress="${this.stopPropagation}"
       @keydown="${this.onKeydown}"
       @copy="${this.stopPropagation}"
       @paste="${this.stopPropagation}"

blocksuite/affine/components/src/filterable-list/index.ts

@@ -92,7 +92,6 @@ export class FilterableListComponent<Props = unknown> extends WithDisposable(
     const isFlip = !!this.placement?.startsWith('top');
 
     const _handleInputKeydown = (ev: KeyboardEvent) => {
-      ev.stopPropagation();
       switch (ev.key) {
         case 'ArrowUp': {
           ev.preventDefault();