fix(server): oauth should follow sign up restriction (#12683)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
	- Enforced signup restrictions for OAuth login based on configuration settings. Users will not be able to sign up via OAuth if signup is disabled by the administrator.
- **Bug Fixes**
	- Improved error handling during OAuth login when signup is not permitted.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

.docker/selfhost/schema.json

@@ -31,9 +31,13 @@
       "properties": {
         "queue": {
           "type": "object",
-          "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",
+          "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",
           "default": {
             "attempts": 5,
+            "backoff": {
+              "type": "exponential",
+              "delay": 1000
+            },
             "removeOnComplete": true,
             "removeOnFail": {
               "age": 86400,
@@ -48,14 +52,14 @@
         },
         "queues.copilot": {
           "type": "object",
-          "description": "The config for copilot job queue\n@default {\"concurrency\":5}",
+          "description": "The config for copilot job queue\n@default {\"concurrency\":10}",
           "properties": {
             "concurrency": {
               "type": "number"
             }
           },
           "default": {
-            "concurrency": 5
+            "concurrency": 10
           }
         },
         "queues.doc": {
@@ -639,6 +643,41 @@
             "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\":\"\"}",
@@ -653,6 +692,41 @@
             "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\":\"\"}",

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

@@ -29,11 +29,7 @@ runs:
 
     - name: Import config
       shell: bash
+      env:
+        DEFAULT_CONFIG: '{}'
       run: |
-        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
+        printf '%s\n' "${SERVER_CONFIG:-$DEFAULT_CONFIG}" > ./packages/backend/server/config.json

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

@@ -1,12 +0,0 @@
-{{- 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

@@ -1,12 +0,0 @@
-{{- 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

@@ -1,12 +0,0 @@
-{{- 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/helm/affine/templates/monitoring.yaml

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

.github/workflows/build-images.yml

@@ -138,6 +138,7 @@ 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

@@ -151,7 +151,8 @@ jobs:
       - name: Clippy
         run: |
           rustup component add clippy
-          cargo clippy --all-targets --all-features -- -D warnings
+          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
 
   check-git-status:
     name: Check Git Status
@@ -923,7 +924,7 @@ jobs:
         uses: taiki-e/install-action@nextest
 
       - name: Run tests
-        run: cargo nextest run --release --no-fail-fast
+        run: cargo nextest run --workspace --exclude affine_server_native --features use-as-lib --release --no-fail-fast
 
   copilot-api-test:
     name: Server Copilot Api Test
@@ -1001,12 +1002,7 @@ jobs:
       - name: Prepare Server Test Environment
         if: ${{ steps.check-blocksuite-update.outputs.skip != 'true' || steps.apifilter.outputs.changed == 'true' }}
         env:
-          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 }}
+          SERVER_CONFIG: ${{ secrets.TEST_SERVER_CONFIG }}
         uses: ./.github/actions/server-test-env
 
       - name: Run server tests
@@ -1105,12 +1101,7 @@ jobs:
       - name: Prepare Server Test Environment
         if: ${{ steps.check-blocksuite-update.outputs.skip != 'true' || steps.e2efilter.outputs.changed == 'true' }}
         env:
-          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 }}
+          SERVER_CONFIG: ${{ secrets.TEST_SERVER_CONFIG }}
         uses: ./.github/actions/server-test-env
 
       - name: Run Copilot E2E Test ${{ matrix.shardIndex }}/${{ matrix.shardTotal }}

.github/workflows/copilot-test.yml

@@ -81,12 +81,7 @@ jobs:
 
       - name: Prepare Server Test Environment
         env:
-          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 }}
+          SERVER_CONFIG: ${{ secrets.TEST_SERVER_CONFIG }}
         uses: ./.github/actions/server-test-env
 
       - name: Run server tests
@@ -156,12 +151,7 @@ jobs:
 
       - name: Prepare Server Test Environment
         env:
-          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 }}
+          SERVER_CONFIG: ${{ secrets.TEST_SERVER_CONFIG }}
         uses: ./.github/actions/server-test-env
 
       - name: Run Copilot E2E Test ${{ matrix.shardIndex }}/${{ matrix.shardTotal }}

.github/workflows/release-mobile.yml

@@ -117,31 +117,10 @@ jobs:
           name: android
           path: packages/frontend/apps/android/dist
 
-  determine-ios-runner:
-    runs-on: ubuntu-latest
+  ios:
+    runs-on: ${{ github.ref_name == 'canary' && 'macos-latest' || 'blaze/macos-14' }}
     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.lock

@@ -20,8 +20,7 @@ checksum = "512761e0bb2578dd7380c6baaa0f4ce03e84f95e960231d1dec8bf4d7d6e2627"
 [[package]]
 name = "adobe-cmap-parser"
 version = "0.4.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ae8abfa9a4688de8fc9f42b3f013b6fffec18ed8a554f5f113577e0b9b3212a3"
+source = "git+https://github.com/darkskygit/adobe-cmap-parser#610513ae6035c63eab69f33299b86c43693cabb4"
 dependencies = [
  "pom",
 ]
@@ -282,12 +281,12 @@ dependencies = [
 
 [[package]]
 name = "anstyle-wincon"
-version = "3.0.7"
+version = "3.0.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ca3534e77181a9cc07539ad51f2141fe32f6c3ffd4df76db8ad92346b003ae4e"
+checksum = "6680de5231bd6ee4c6191b8a1325daa282b415391ec9d3a37bd34f2060dc73fa"
 dependencies = [
  "anstyle",
- "once_cell",
+ "once_cell_polyfill",
  "windows-sys 0.59.0",
 ]
 
@@ -497,7 +496,7 @@ version = "0.70.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f49d8fed880d473ea71efb9bf597651e77201bdd4893efe54c9e5d65ae04ce6f"
 dependencies = [
- "bitflags 2.9.0",
+ "bitflags 2.9.1",
  "cexpr",
  "clang-sys",
  "itertools 0.13.0",
@@ -547,9 +546,9 @@ checksum = "bef38d45163c2f1dde094a7dfd33ccf595c92905c8f8f4fdc18d06fb1037718a"
 
 [[package]]
 name = "bitflags"
-version = "2.9.0"
+version = "2.9.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5c8214115b7bf84099f1309324e63141d4c5d7cc26862f97a0a857dbefe165bd"
+checksum = "1b8e56985ec62d17e9c1001dc89c88ecd7dc08e47eba5ec7c29c7b5eeecde967"
 dependencies = [
  "serde",
 ]
@@ -604,9 +603,9 @@ dependencies = [
 
 [[package]]
 name = "bpaf"
-version = "0.9.19"
+version = "0.9.20"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4848ed5727d39a7573551c205bcb1ccd88c8cad4ed2c80f62e2316f208196b8d"
+checksum = "473976d7a8620bb1e06dcdd184407c2363fe4fec8e983ee03ed9197222634a31"
 
 [[package]]
 name = "bstr"
@@ -698,9 +697,9 @@ dependencies = [
 
 [[package]]
 name = "cc"
-version = "1.2.22"
+version = "1.2.24"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "32db95edf998450acc7881c932f94cd9b05c87b4b2599e8bab064753da4acfd1"
+checksum = "16595d3be041c03b09d08d0858631facccee9221e579704070e6e9e4915d3bc7"
 dependencies = [
  "shlex",
 ]
@@ -816,9 +815,9 @@ dependencies = [
 
 [[package]]
 name = "clap"
-version = "4.5.38"
+version = "4.5.39"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ed93b9805f8ba930df42c2590f05453d5ec36cbb85d018868a5b24d31f6ac000"
+checksum = "fd60e63e9be68e5fb56422e397cf9baddded06dae1d2e523401542383bc72a9f"
 dependencies = [
  "clap_builder",
  "clap_derive",
@@ -826,9 +825,9 @@ dependencies = [
 
 [[package]]
 name = "clap_builder"
-version = "4.5.38"
+version = "4.5.39"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "379026ff283facf611b0ea629334361c4211d1b12ee01024eec1591133b04120"
+checksum = "89cc6392a1f72bbeb820d71f32108f61fdaf18bc526e1d23954168a67759ef51"
 dependencies = [
  "anstream",
  "anstyle",
@@ -902,9 +901,9 @@ dependencies = [
 
 [[package]]
 name = "core-foundation"
-version = "0.10.0"
+version = "0.10.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b55271e5c8c478ad3f38ad24ef34923091e0548492a266d19b3c0b4d82574c63"
+checksum = "b2a6cd9ae233e7f62ba4e9353e81a88df7fc8a5987b8d445b4d90c879bd156f6"
 dependencies = [
  "core-foundation-sys",
  "libc",
@@ -923,7 +922,7 @@ version = "0.24.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "fa95a34622365fa5bbf40b20b75dba8dfa8c94c734aea8ac9a5ca38af14316f1"
 dependencies = [
- "bitflags 2.9.0",
+ "bitflags 2.9.1",
  "core-foundation",
  "core-graphics-types",
  "foreign-types",
@@ -936,7 +935,7 @@ version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3d44a101f213f6c4cdc1853d4b78aef6db6bdfa3468798cc1d9912f4735013eb"
 dependencies = [
- "bitflags 2.9.0",
+ "bitflags 2.9.1",
  "core-foundation",
  "libc",
 ]
@@ -1242,7 +1241,7 @@ version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "89a09f22a6c6069a18470eb92d2298acf25463f14256d24778e1230d789a2aec"
 dependencies = [
- "bitflags 2.9.0",
+ "bitflags 2.9.1",
  "block2",
  "libc",
  "objc2",
@@ -1273,9 +1272,9 @@ dependencies = [
 
 [[package]]
 name = "docx-rust"
-version = "0.1.9"
+version = "0.1.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e6a8e9647d314f66d467a705715111d045955949b5dbcf2dc7aee89e078af83d"
+checksum = "75463cd42bd579fdf76cf10ff1c4fb5988568c726f8ed4c2ed3921ddb6ef5c89"
 dependencies = [
  "derive_more",
  "hard-xml",
@@ -1340,9 +1339,9 @@ checksum = "877a4ace8713b0bcf2a4e7eec82529c029f1d0619886d18145fea96c3ffe5c0f"
 
 [[package]]
 name = "errno"
-version = "0.3.11"
+version = "0.3.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "976dd42dc7e85965fe702eb8164f21f450704bdde31faefd6471dba214cb594e"
+checksum = "cea14ef9355e3beab063703aa9dab15afd25f0667c341310c1e5274bb1d0da18"
 dependencies = [
  "libc",
  "windows-sys 0.59.0",
@@ -1596,15 +1595,16 @@ dependencies = [
 
 [[package]]
 name = "generator"
-version = "0.8.4"
+version = "0.8.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cc6bd114ceda131d3b1d665eba35788690ad37f5916457286b32ab6fd3c438dd"
+checksum = "d18470a76cb7f8ff746cf1f7470914f900252ec36bbc40b569d74b1258446827"
 dependencies = [
+ "cc",
  "cfg-if",
  "libc",
  "log",
  "rustversion",
- "windows 0.58.0",
+ "windows 0.61.1",
 ]
 
 [[package]]
@@ -1690,9 +1690,9 @@ dependencies = [
 
 [[package]]
 name = "hard-xml"
-version = "1.39.0"
+version = "1.41.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "18b4f798dc293307dc5445b47403a317adc8131782963f3ad4700a836bd26c93"
+checksum = "3b07b8ba970e18a03dbb79f6786b6e4d6f198a0ac839aa5182017001bb8dee17"
 dependencies = [
  "hard-xml-derive",
  "jetscii",
@@ -1703,11 +1703,11 @@ dependencies = [
 
 [[package]]
 name = "hard-xml-derive"
-version = "1.39.0"
+version = "1.41.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5ef0ad18601a1563729b311c9d49e5d46b1c987dc0353742cb8219f61f4339a6"
+checksum = "f0c43e7c3212bd992c11b6b9796563388170950521ae8487f5cdf6f6e792f1c8"
 dependencies = [
- "bitflags 2.9.0",
+ "bitflags 2.9.1",
  "proc-macro2",
  "quote",
  "syn 1.0.109",
@@ -1826,7 +1826,7 @@ dependencies = [
  "js-sys",
  "log",
  "wasm-bindgen",
- "windows-core 0.61.0",
+ "windows-core 0.57.0",
 ]
 
 [[package]]
@@ -1911,9 +1911,9 @@ checksum = "00210d6893afc98edb752b664b8890f0ef174c8adbb8d0be9710fa66fbbf72d3"
 
 [[package]]
 name = "icu_properties"
-version = "2.0.0"
+version = "2.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2549ca8c7241c82f59c80ba2a6f415d931c5b58d24fb8412caa1a1f02c49139a"
+checksum = "016c619c1eeb94efb86809b015c58f479963de65bdb6253345c1a1276f22e32b"
 dependencies = [
  "displaydoc",
  "icu_collections 2.0.0",
@@ -1927,9 +1927,9 @@ dependencies = [
 
 [[package]]
 name = "icu_properties_data"
-version = "2.0.0"
+version = "2.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8197e866e47b68f8f7d95249e172903bec06004b18b2937f1095d40a0c57de04"
+checksum = "298459143998310acd25ffe6810ed544932242d3f07083eee1084d83a71bd632"
 
 [[package]]
 name = "icu_provider"
@@ -2050,15 +2050,14 @@ dependencies = [
 
 [[package]]
 name = "io-surface"
-version = "0.16.0"
+version = "0.16.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8283575d5f0b2e7447ec0840363879d71c0fa325d4c699d5b45208ea4a51f45e"
+checksum = "554b8c5d64ec09a3a520fe58e4d48a73e00ff32899cdcbe32a4877afd4968b8e"
 dependencies = [
  "cgl",
  "core-foundation",
  "core-foundation-sys",
  "leaky-cow",
- "libc",
 ]
 
 [[package]]
@@ -2189,12 +2188,12 @@ checksum = "d750af042f7ef4f724306de029d18836c26c1765a54a6a3f094cbd23a7267ffa"
 
 [[package]]
 name = "libloading"
-version = "0.8.7"
+version = "0.8.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6a793df0d7afeac54f95b471d3af7f0d4fb975699f972341a4b76988d49cdf0c"
+checksum = "07033963ba89ebaf1584d767badaa2e8fcec21aedea6b8c0346d487d49c28667"
 dependencies = [
  "cfg-if",
- "windows-targets 0.53.0",
+ "windows-targets 0.48.5",
 ]
 
 [[package]]
@@ -2280,7 +2279,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "59fa2559e99ba0f26a12458aabc754432c805bbb8cba516c427825a997af1fb7"
 dependencies = [
  "aes",
- "bitflags 2.9.0",
+ "bitflags 2.9.1",
  "cbc",
  "ecb",
  "encoding_rs",
@@ -2391,13 +2390,13 @@ dependencies = [
 
 [[package]]
 name = "mio"
-version = "1.0.3"
+version = "1.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2886843bf800fba2e3377cff24abf6379b4c4d5c6681eaf9ea5b0d15090450bd"
+checksum = "78bed444cc8a2160f01cbcf811ef18cac863ad68ae8ca62092e8db51d51c761c"
 dependencies = [
  "libc",
  "wasi 0.11.0+wasi-snapshot-preview1",
- "windows-sys 0.52.0",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -2411,12 +2410,12 @@ dependencies = [
 
 [[package]]
 name = "napi"
-version = "3.0.0-alpha.33"
+version = "3.0.0-beta.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c857a2b38c994db8bec785554ab4216d45ad63469832070c86a992be0b5491ad"
+checksum = "2a5c343e6e1fb57bf3ea3386638c4affb394ee932708128840a56aaac3d6a8ab"
 dependencies = [
  "anyhow",
- "bitflags 2.9.0",
+ "bitflags 2.9.1",
  "chrono",
  "ctor",
  "napi-build",
@@ -2427,17 +2426,18 @@ dependencies = [
 
 [[package]]
 name = "napi-build"
-version = "2.1.6"
+version = "2.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e28acfa557c083f6e254a786e01ba253fc56f18ee000afcd4f79af735f73a6da"
+checksum = "03acbfa4f156a32188bfa09b86dc11a431b5725253fc1fc6f6df5bed273382c4"
 
 [[package]]
 name = "napi-derive"
-version = "3.0.0-alpha.29"
+version = "3.0.0-beta.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c7165d931d54f68115e651330d5fe0ae0081133d3f4ee3ab55b0b808f0c23f71"
+checksum = "08d23065ee795a4b1a8755fdf4a39c2a229679f01f923a8feea33f045d6d96cb"
 dependencies = [
  "convert_case 0.8.0",
+ "ctor",
  "napi-derive-backend",
  "proc-macro2",
  "quote",
@@ -2446,9 +2446,9 @@ dependencies = [
 
 [[package]]
 name = "napi-derive-backend"
-version = "2.0.0-alpha.28"
+version = "2.0.0-beta.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ce3f36354262054df8e1c3a73bdcd36ea13f130feb1e4d86b67cab9e10d6ef6d"
+checksum = "348aaac2c51b5d11cf90cf7670b470c7f4d1607d15c338efd4d3db361003e4f5"
 dependencies = [
  "convert_case 0.8.0",
  "proc-macro2",
@@ -2459,9 +2459,9 @@ dependencies = [
 
 [[package]]
 name = "napi-sys"
-version = "3.0.0-alpha.1"
+version = "3.0.0-alpha.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4cc061b99c514ad4b7abc99d4db1ca24b9542b7ff48b4760bd9f82b24611534d"
+checksum = "b443b980b2258dbaa31b99115e74da6c0866e537278309d566b4672a2f8df516"
 dependencies = [
  "libloading",
 ]
@@ -2478,7 +2478,7 @@ version = "0.29.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "71e2746dc3a24dd78b3cfcb7be93368c6de9963d30f43a6a73998a9cf4b17b46"
 dependencies = [
- "bitflags 2.9.0",
+ "bitflags 2.9.1",
  "cfg-if",
  "cfg_aliases",
  "libc",
@@ -2626,7 +2626,7 @@ version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1c10c2894a6fed806ade6027bcd50662746363a9589d3ec9d9bef30a4e4bc166"
 dependencies = [
- "bitflags 2.9.0",
+ "bitflags 2.9.1",
  "dispatch2",
  "objc2",
 ]
@@ -2643,7 +2643,7 @@ version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "900831247d2fe1a09a683278e5384cfb8c80c79fe6b166f9d14bfdde0ea1b03c"
 dependencies = [
- "bitflags 2.9.0",
+ "bitflags 2.9.1",
  "block2",
  "libc",
  "objc2",
@@ -2674,6 +2674,12 @@ version = "1.21.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "42f5e15c9953c5e4ccceeb2e7382a716482c34515315f7b03532b8b4e8393d2d"
 
+[[package]]
+name = "once_cell_polyfill"
+version = "1.70.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a4895175b425cb1f87721b59f0f286c2092bd4af812243672510e1ac53e2e0ad"
+
 [[package]]
 name = "oorandom"
 version = "11.1.5"
@@ -2737,9 +2743,9 @@ dependencies = [
 
 [[package]]
 name = "path-ext"
-version = "0.1.1"
+version = "0.1.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0de7a86239a8b87b5094977b64893fcf0ed768072744dd4ee0df237686b2d815"
+checksum = "7603010004b5cdecf8006605bf7b6f07b0e59d3003010f52b767e91bf2582a45"
 dependencies = [
  "path-slash",
  "walkdir",
@@ -2754,7 +2760,7 @@ checksum = "1e91099d4268b0e11973f036e885d652fb0b21fedcf69738c627f94db6a44f42"
 [[package]]
 name = "pdf-extract"
 version = "0.8.2"
-source = "git+https://github.com/toeverything/pdf-extract?branch=darksky%2Fimprove-font-decoding#e74beed894e1b8dc228c2bf078ed92814b27759f"
+source = "git+https://github.com/toeverything/pdf-extract?branch=darksky%2Fimprove-font-decoding#040751a61aba51e7a28217b758c18db4415c3ee4"
 dependencies = [
  "adobe-cmap-parser",
  "cff-parser",
@@ -2763,6 +2769,7 @@ dependencies = [
  "log",
  "lopdf",
  "postscript",
+ "rust-embed",
  "type1-encoding-parser",
  "unicode-normalization",
 ]
@@ -2943,9 +2950,12 @@ checksum = "60f6ce597ecdcc9a098e7fddacb1065093a3d66446fa16c675e7e71d1b5c28e6"
 
 [[package]]
 name = "postscript"
-version = "0.14.1"
+version = "0.19.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "78451badbdaebaf17f053fd9152b3ffb33b516104eacb45e7864aaa9c712f306"
+checksum = "9a2238e788cf2c9b6edc23b83cf8ccdd4a6380cc9bf0598cc220fac42a55def6"
+dependencies = [
+ "typeface",
+]
 
 [[package]]
 name = "potential_utf"
@@ -3006,7 +3016,7 @@ checksum = "14cae93065090804185d3b75f0bf93b8eeda30c7a9b4a33d3bdb3988d6229e50"
 dependencies = [
  "bit-set 0.8.0",
  "bit-vec 0.8.0",
- "bitflags 2.9.0",
+ "bitflags 2.9.1",
  "lazy_static",
  "num-traits",
  "rand 0.8.5",
@@ -3035,7 +3045,7 @@ version = "0.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1e8bbe1a966bd2f362681a44f6edce3c2310ac21e4d5067a6e7ec396297a6ea0"
 dependencies = [
- "bitflags 2.9.0",
+ "bitflags 2.9.1",
  "memchr",
  "unicase",
 ]
@@ -3240,7 +3250,7 @@ version = "0.5.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "928fca9cf2aa042393a8325b9ead81d2f0df4cb12e1e24cef072922ccd99c5af"
 dependencies = [
- "bitflags 2.9.0",
+ "bitflags 2.9.1",
 ]
 
 [[package]]
@@ -3333,6 +3343,40 @@ dependencies = [
  "realfft",
 ]
 
+[[package]]
+name = "rust-embed"
+version = "8.7.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "025908b8682a26ba8d12f6f2d66b987584a4a87bc024abc5bbc12553a8cd178a"
+dependencies = [
+ "rust-embed-impl",
+ "rust-embed-utils",
+ "walkdir",
+]
+
+[[package]]
+name = "rust-embed-impl"
+version = "8.7.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6065f1a4392b71819ec1ea1df1120673418bf386f50de1d6f54204d836d4349c"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "rust-embed-utils",
+ "syn 2.0.101",
+ "walkdir",
+]
+
+[[package]]
+name = "rust-embed-utils"
+version = "8.7.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f6cc0c81648b20b70c491ff8cce00c1c3b223bb8ed2b5d41f0e54c6c4c0a3594"
+dependencies = [
+ "sha2",
+ "walkdir",
+]
+
 [[package]]
 name = "rustc-demangle"
 version = "0.1.24"
@@ -3381,7 +3425,7 @@ version = "1.0.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c71e83d6afe7ff64890ec6b71d6a69bb8a610ab78ce364b3352876bb4c801266"
 dependencies = [
- "bitflags 2.9.0",
+ "bitflags 2.9.1",
  "errno",
  "libc",
  "linux-raw-sys",
@@ -3424,9 +3468,9 @@ dependencies = [
 
 [[package]]
 name = "rustversion"
-version = "1.0.20"
+version = "1.0.21"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "eded382c5f5f786b989652c49544c4877d9f015cc22e145a5ea8ea66c2921cd2"
+checksum = "8a0d197bd2c9dc6e53b84da9556a69ba4cdfab8619eb41a8bd1cc2027a0f6b1d"
 
 [[package]]
 name = "rusty-fork"
@@ -3680,9 +3724,9 @@ dependencies = [
 
 [[package]]
 name = "socket2"
-version = "0.5.9"
+version = "0.5.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4f5fd57c80058a56cf5c777ab8a126398ece8e442983605d280a44ce79d0edef"
+checksum = "e22376abed350d73dd1cd119b57ffccad95b4e585a7cda43e286245ce23c0678"
 dependencies = [
  "libc",
  "windows-sys 0.52.0",
@@ -3709,9 +3753,9 @@ dependencies = [
 
 [[package]]
 name = "sqlx"
-version = "0.8.5"
+version = "0.8.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f3c3a85280daca669cfd3bcb68a337882a8bc57ec882f72c5d13a430613a738e"
+checksum = "1fefb893899429669dcdd979aff487bd78f4064e5e7907e4269081e0ef7d97dc"
 dependencies = [
  "sqlx-core",
  "sqlx-macros",
@@ -3722,9 +3766,9 @@ dependencies = [
 
 [[package]]
 name = "sqlx-core"
-version = "0.8.5"
+version = "0.8.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f743f2a3cea30a58cd479013f75550e879009e3a02f616f18ca699335aa248c3"
+checksum = "ee6798b1838b6a0f69c007c133b8df5866302197e404e8b6ee8ed3e3a5e68dc6"
 dependencies = [
  "base64 0.22.1",
  "bytes",
@@ -3759,9 +3803,9 @@ dependencies = [
 
 [[package]]
 name = "sqlx-macros"
-version = "0.8.5"
+version = "0.8.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7f4200e0fde19834956d4252347c12a083bdcb237d7a1a1446bffd8768417dce"
+checksum = "a2d452988ccaacfbf5e0bdbc348fb91d7c8af5bee192173ac3636b5fb6e6715d"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -3772,9 +3816,9 @@ dependencies = [
 
 [[package]]
 name = "sqlx-macros-core"
-version = "0.8.5"
+version = "0.8.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "882ceaa29cade31beca7129b6beeb05737f44f82dbe2a9806ecea5a7093d00b7"
+checksum = "19a9c1841124ac5a61741f96e1d9e2ec77424bf323962dd894bdb93f37d5219b"
 dependencies = [
  "dotenvy",
  "either",
@@ -3791,20 +3835,19 @@ dependencies = [
  "sqlx-postgres",
  "sqlx-sqlite",
  "syn 2.0.101",
- "tempfile",
  "tokio",
  "url",
 ]
 
 [[package]]
 name = "sqlx-mysql"
-version = "0.8.5"
+version = "0.8.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0afdd3aa7a629683c2d750c2df343025545087081ab5942593a5288855b1b7a7"
+checksum = "aa003f0038df784eb8fecbbac13affe3da23b45194bd57dba231c8f48199c526"
 dependencies = [
  "atoi",
  "base64 0.22.1",
- "bitflags 2.9.0",
+ "bitflags 2.9.1",
  "byteorder",
  "bytes",
  "chrono",
@@ -3841,13 +3884,13 @@ dependencies = [
 
 [[package]]
 name = "sqlx-postgres"
-version = "0.8.5"
+version = "0.8.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a0bedbe1bbb5e2615ef347a5e9d8cd7680fb63e77d9dafc0f29be15e53f1ebe6"
+checksum = "db58fcd5a53cf07c184b154801ff91347e4c30d17a3562a635ff028ad5deda46"
 dependencies = [
  "atoi",
  "base64 0.22.1",
- "bitflags 2.9.0",
+ "bitflags 2.9.1",
  "byteorder",
  "chrono",
  "crc",
@@ -3879,9 +3922,9 @@ dependencies = [
 
 [[package]]
 name = "sqlx-sqlite"
-version = "0.8.5"
+version = "0.8.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c26083e9a520e8eb87a06b12347679b142dc2ea29e6e409f805644a7a979a5bc"
+checksum = "c2d12fe70b2c1b4401038055f90f151b78208de1f9f89a7dbfd41587a10c3eea"
 dependencies = [
  "atoi",
  "chrono",
@@ -4395,9 +4438,9 @@ checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"
 
 [[package]]
 name = "tokio"
-version = "1.45.0"
+version = "1.45.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2513ca694ef9ede0fb23fe71a4ee4107cb102b9dc1930f6d0fd77aae068ae165"
+checksum = "75ef51a33ef1da925cea3e4eb122833cb377c61439ca401b770f54902b806779"
 dependencies = [
  "backtrace",
  "bytes",
@@ -4533,9 +4576,9 @@ dependencies = [
 
 [[package]]
 name = "tree-sitter"
-version = "0.25.4"
+version = "0.25.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "69aff09fea9a41fb061ae6b206cb87cac1b8db07df31be3ba271fbc26760f213"
+checksum = "ac5fff5c47490dfdf473b5228039bfacad9d765d9b6939d26bf7cc064c1c7822"
 dependencies = [
  "cc",
  "regex",
@@ -4670,6 +4713,12 @@ dependencies = [
  "pom",
 ]
 
+[[package]]
+name = "typeface"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f4f6b49e025f4dc953a29b83e4f5a905089117d09fa53491015d7678951b8be1"
+
 [[package]]
 name = "typenum"
 version = "1.18.0"
@@ -4892,11 +4941,13 @@ checksum = "06abde3611657adf66d383f00b093d7faecc7fa57071cce2578660c9f1010821"
 
 [[package]]
 name = "uuid"
-version = "1.16.0"
+version = "1.17.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "458f7a779bf54acc9f347480ac654f68407d3aab21269a6e3c9f922acd9e2da9"
+checksum = "3cf4199d1e5d15ddd86a694e4d0dffa9c323ce759fea589f00fef9d81cc1931d"
 dependencies = [
  "getrandom 0.3.3",
+ "js-sys",
+ "wasm-bindgen",
 ]
 
 [[package]]
@@ -5072,9 +5123,9 @@ dependencies = [
 
 [[package]]
 name = "weezl"
-version = "0.1.8"
+version = "0.1.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "53a85b86a771b1c87058196170769dd264f66c0782acf1ae6cc51bfd64b39082"
+checksum = "a751b3277700db47d3e574514de2eced5e54dc8a5436a3bf7a0b248b2cee16f3"
 
 [[package]]
 name = "whoami"
@@ -5114,7 +5165,7 @@ version = "0.1.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cf221c93e13a30d793f7645a0e7762c55d169dbb0a49671918a2319d289b10bb"
 dependencies = [
- "windows-sys 0.59.0",
+ "windows-sys 0.48.0",
 ]
 
 [[package]]
@@ -5135,12 +5186,24 @@ dependencies = [
 
 [[package]]
 name = "windows"
-version = "0.58.0"
+version = "0.61.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dd04d41d93c4992d421894c18c8b43496aa748dd4c081bac0dc93eb0489272b6"
+checksum = "c5ee8f3d025738cb02bad7868bbb5f8a6327501e870bf51f1b455b0a2454a419"
 dependencies = [
- "windows-core 0.58.0",
- "windows-targets 0.52.6",
+ "windows-collections",
+ "windows-core 0.61.2",
+ "windows-future",
+ "windows-link",
+ "windows-numerics",
+]
+
+[[package]]
+name = "windows-collections"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3beeceb5e5cfd9eb1d76b381630e82c4241ccd0d27f1a39ed41b2760b255c5e8"
+dependencies = [
+ "windows-core 0.61.2",
 ]
 
 [[package]]
@@ -5157,28 +5220,26 @@ dependencies = [
 
 [[package]]
 name = "windows-core"
-version = "0.58.0"
+version = "0.61.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6ba6d44ec8c2591c134257ce647b7ea6b20335bf6379a27dac5f1641fcf59f99"
-dependencies = [
- "windows-implement 0.58.0",
- "windows-interface 0.58.0",
- "windows-result 0.2.0",
- "windows-strings 0.1.0",
- "windows-targets 0.52.6",
-]
-
-[[package]]
-name = "windows-core"
-version = "0.61.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4763c1de310c86d75a878046489e2e5ba02c649d185f21c67d4cf8a56d098980"
+checksum = "c0fdd3ddb90610c7638aa2b3a3ab2904fb9e5cdbecc643ddb3647212781c4ae3"
 dependencies = [
  "windows-implement 0.60.0",
  "windows-interface 0.59.1",
  "windows-link",
- "windows-result 0.3.2",
- "windows-strings 0.4.0",
+ "windows-result 0.3.4",
+ "windows-strings",
+]
+
+[[package]]
+name = "windows-future"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fc6a41e98427b19fe4b73c550f060b59fa592d7d686537eebf9385621bfbad8e"
+dependencies = [
+ "windows-core 0.61.2",
+ "windows-link",
+ "windows-threading",
 ]
 
 [[package]]
@@ -5192,17 +5253,6 @@ dependencies = [
  "syn 2.0.101",
 ]
 
-[[package]]
-name = "windows-implement"
-version = "0.58.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2bbd5b46c938e506ecbce286b6628a02171d56153ba733b6c741fc627ec9579b"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn 2.0.101",
-]
-
 [[package]]
 name = "windows-implement"
 version = "0.60.0"
@@ -5225,17 +5275,6 @@ dependencies = [
  "syn 2.0.101",
 ]
 
-[[package]]
-name = "windows-interface"
-version = "0.58.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "053c4c462dc91d3b1504c6fe5a726dd15e216ba718e84a0e46a88fbe5ded3515"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn 2.0.101",
-]
-
 [[package]]
 name = "windows-interface"
 version = "0.59.1"
@@ -5253,6 +5292,16 @@ version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "76840935b766e1b0a05c0066835fb9ec80071d4c09a16f6bd5f7e655e3c14c38"
 
+[[package]]
+name = "windows-numerics"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9150af68066c4c5c07ddc0ce30421554771e528bde427614c61038bc2c92c2b1"
+dependencies = [
+ "windows-core 0.61.2",
+ "windows-link",
+]
+
 [[package]]
 name = "windows-result"
 version = "0.1.2"
@@ -5264,37 +5313,18 @@ dependencies = [
 
 [[package]]
 name = "windows-result"
-version = "0.2.0"
+version = "0.3.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1d1043d8214f791817bab27572aaa8af63732e11bf84aa21a45a78d6c317ae0e"
-dependencies = [
- "windows-targets 0.52.6",
-]
-
-[[package]]
-name = "windows-result"
-version = "0.3.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c64fd11a4fd95df68efcfee5f44a294fe71b8bc6a91993e2791938abcc712252"
+checksum = "56f42bd332cc6c8eac5af113fc0c1fd6a8fd2aa08a0119358686e5160d0586c6"
 dependencies = [
  "windows-link",
 ]
 
 [[package]]
 name = "windows-strings"
-version = "0.1.0"
+version = "0.4.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4cd9b125c486025df0eabcb585e62173c6c9eddcec5d117d3b6e8c30e2ee4d10"
-dependencies = [
- "windows-result 0.2.0",
- "windows-targets 0.52.6",
-]
-
-[[package]]
-name = "windows-strings"
-version = "0.4.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7a2ba9642430ee452d5a7aa78d72907ebe8cfda358e8cb7918a2050581322f97"
+checksum = "56e6c93f3a0c3b36176cb1327a4958a0353d5d166c2a35cb268ace15e91d3b57"
 dependencies = [
  "windows-link",
 ]
@@ -5350,7 +5380,7 @@ dependencies = [
  "windows_aarch64_gnullvm 0.52.6",
  "windows_aarch64_msvc 0.52.6",
  "windows_i686_gnu 0.52.6",
- "windows_i686_gnullvm 0.52.6",
+ "windows_i686_gnullvm",
  "windows_i686_msvc 0.52.6",
  "windows_x86_64_gnu 0.52.6",
  "windows_x86_64_gnullvm 0.52.6",
@@ -5358,19 +5388,12 @@ dependencies = [
 ]
 
 [[package]]
-name = "windows-targets"
-version = "0.53.0"
+name = "windows-threading"
+version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b1e4c7e8ceaaf9cb7d7507c974735728ab453b67ef8f18febdd7c11fe59dca8b"
+checksum = "b66463ad2e0ea3bbf808b7f1d371311c80e115c0b71d60efc142cafbcfb057a6"
 dependencies = [
- "windows_aarch64_gnullvm 0.53.0",
- "windows_aarch64_msvc 0.53.0",
- "windows_i686_gnu 0.53.0",
- "windows_i686_gnullvm 0.53.0",
- "windows_i686_msvc 0.53.0",
- "windows_x86_64_gnu 0.53.0",
- "windows_x86_64_gnullvm 0.53.0",
- "windows_x86_64_msvc 0.53.0",
+ "windows-link",
 ]
 
 [[package]]
@@ -5385,12 +5408,6 @@ version = "0.52.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "32a4622180e7a0ec044bb555404c800bc9fd9ec262ec147edd5989ccd0c02cd3"
 
-[[package]]
-name = "windows_aarch64_gnullvm"
-version = "0.53.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "86b8d5f90ddd19cb4a147a5fa63ca848db3df085e25fee3cc10b39b6eebae764"
-
 [[package]]
 name = "windows_aarch64_msvc"
 version = "0.48.5"
@@ -5403,12 +5420,6 @@ version = "0.52.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "09ec2a7bb152e2252b53fa7803150007879548bc709c039df7627cabbd05d469"
 
-[[package]]
-name = "windows_aarch64_msvc"
-version = "0.53.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c7651a1f62a11b8cbd5e0d42526e55f2c99886c77e007179efff86c2b137e66c"
-
 [[package]]
 name = "windows_i686_gnu"
 version = "0.48.5"
@@ -5421,24 +5432,12 @@ version = "0.52.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8e9b5ad5ab802e97eb8e295ac6720e509ee4c243f69d781394014ebfe8bbfa0b"
 
-[[package]]
-name = "windows_i686_gnu"
-version = "0.53.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c1dc67659d35f387f5f6c479dc4e28f1d4bb90ddd1a5d3da2e5d97b42d6272c3"
-
 [[package]]
 name = "windows_i686_gnullvm"
 version = "0.52.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0eee52d38c090b3caa76c563b86c3a4bd71ef1a819287c19d586d7334ae8ed66"
 
-[[package]]
-name = "windows_i686_gnullvm"
-version = "0.53.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9ce6ccbdedbf6d6354471319e781c0dfef054c81fbc7cf83f338a4296c0cae11"
-
 [[package]]
 name = "windows_i686_msvc"
 version = "0.48.5"
@@ -5451,12 +5450,6 @@ version = "0.52.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "240948bc05c5e7c6dabba28bf89d89ffce3e303022809e73deaefe4f6ec56c66"
 
-[[package]]
-name = "windows_i686_msvc"
-version = "0.53.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "581fee95406bb13382d2f65cd4a908ca7b1e4c2f1917f143ba16efe98a589b5d"
-
 [[package]]
 name = "windows_x86_64_gnu"
 version = "0.48.5"
@@ -5469,12 +5462,6 @@ version = "0.52.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "147a5c80aabfbf0c7d901cb5895d1de30ef2907eb21fbbab29ca94c5b08b1a78"
 
-[[package]]
-name = "windows_x86_64_gnu"
-version = "0.53.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2e55b5ac9ea33f2fc1716d1742db15574fd6fc8dadc51caab1c16a3d3b4190ba"
-
 [[package]]
 name = "windows_x86_64_gnullvm"
 version = "0.48.5"
@@ -5487,12 +5474,6 @@ version = "0.52.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "24d5b23dc417412679681396f2b49f3de8c1473deb516bd34410872eff51ed0d"
 
-[[package]]
-name = "windows_x86_64_gnullvm"
-version = "0.53.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0a6e035dd0599267ce1ee132e51c27dd29437f63325753051e71dd9e42406c57"
-
 [[package]]
 name = "windows_x86_64_msvc"
 version = "0.48.5"
@@ -5505,12 +5486,6 @@ version = "0.52.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "589f6da84c646204747d1270a2a5661ea66ed1cced2631d546fdfb155959f9ec"
 
-[[package]]
-name = "windows_x86_64_msvc"
-version = "0.53.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "271414315aff87387382ec3d271b52d7ae78726f5d44ac98b4f4030c91880486"
-
 [[package]]
 name = "winnow"
 version = "0.7.10"
@@ -5526,7 +5501,7 @@ version = "0.39.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6f42320e61fe2cfd34354ecb597f86f413484a798ba44a8ca1165c58d42da6c1"
 dependencies = [
- "bitflags 2.9.0",
+ "bitflags 2.9.1",
 ]
 
 [[package]]
@@ -5595,7 +5570,7 @@ dependencies = [
  "serde_json",
  "smol_str",
  "thiserror 2.0.12",
- "yrs 0.23.1",
+ "yrs 0.23.4",
 ]
 
 [[package]]
@@ -5626,7 +5601,7 @@ dependencies = [
  "regex",
  "y-octo",
  "y-sync",
- "yrs 0.23.1",
+ "yrs 0.23.4",
 ]
 
 [[package]]
@@ -5704,9 +5679,9 @@ dependencies = [
 
 [[package]]
 name = "yrs"
-version = "0.23.1"
+version = "0.23.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4a7cab84724ae7f361a8c92465f5160922cbb941a499e1a8cacd103351ab9c78"
+checksum = "bb1d740a98b12112352f05ddfc06c1505b66fca116601f9388b84be45d21f84d"
 dependencies = [
  "arc-swap",
  "async-lock",
@@ -5717,7 +5692,7 @@ dependencies = [
  "serde_json",
  "smallstr",
  "smallvec",
- "thiserror 1.0.69",
+ "thiserror 2.0.12",
 ]
 
 [[package]]

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-alpha.31", features = ["async", "chrono_date", "error_anyhow", "napi9", "serde"] }
+napi                   = { version = "3.0.0-beta.3", features = ["async", "chrono_date", "error_anyhow", "napi9", "serde"] }
 napi-build             = { version = "2" }
-napi-derive            = { version = "3.0.0-alpha.28" }
+napi-derive            = { version = "3.0.0-beta.3" }
 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.1"
+path-ext               = "0.1.2"
 pdf-extract            = { git = "https://github.com/toeverything/pdf-extract", branch = "darksky/improve-font-decoding" }
 phf                    = { version = "0.11", features = ["macros"] }
 proptest               = "1.3"
@@ -80,7 +80,7 @@ symphonia              = { version = "0.5", features = ["all", "opt-simd"] }
 text-splitter          = "0.25"
 thiserror              = "2"
 tiktoken-rs            = "0.6"
-tokio                  = "1.37"
+tokio                  = "1.45"
 tree-sitter            = { version = "0.25" }
 tree-sitter-c          = { version = "0.23" }
 tree-sitter-c-sharp    = { version = "0.23" }

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

@@ -4393,6 +4393,61 @@ 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: [],
+        },
       ],
     };
 
@@ -4469,6 +4524,38 @@ 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.14",
+    "@toeverything/theme": "^1.1.15",
     "file-type": "^21.0.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

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

@@ -10,7 +10,6 @@ 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) => {
@@ -36,15 +35,7 @@ export const attachmentBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher
     fromMatch: o => o.node.flavour === AttachmentBlockSchema.model.flavour,
     toBlockSnapshot: {
       enter: (o, context) => {
-        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) {
+        if (!isFootnoteDefinitionNode(o.node)) {
           return;
         }
 
@@ -73,6 +64,7 @@ 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,
-  getLoadingIconWith,
+  LoadingIcon,
 } from '@blocksuite/affine-components/icons';
 import { Peekable } from '@blocksuite/affine-components/peek';
 import {
@@ -20,7 +20,6 @@ import {
   DocModeProvider,
   FileSizeLimitProvider,
   TelemetryProvider,
-  ThemeProvider,
 } from '@blocksuite/affine-shared/services';
 import { formatSize } from '@blocksuite/affine-shared/utils';
 import {
@@ -65,6 +64,11 @@ 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%',
@@ -213,13 +217,23 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
     );
   };
 
-  protected renderReloadButton = () => {
+  protected renderNormalButton = (needUpload: boolean) => {
+    const label = needUpload ? 'retry' : 'reload';
+    const run = async () => {
+      if (needUpload) {
+        await this.resourceController.upload();
+        return;
+      }
+
+      this.refreshData();
+    };
+
     return html`
       <button
         class="affine-attachment-content-button"
         @click=${(event: MouseEvent) => {
           event.stopPropagation();
-          this.refreshData();
+          run().catch(console.error);
 
           {
             const mode =
@@ -231,21 +245,28 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
                 segment,
                 page: `${segment} editor`,
                 module: 'attachment',
-                control: 'reload',
+                control: label,
                 category: 'card',
-                type: this.model.props.name.split('.').pop() ?? '',
+                type: this.filetype,
               });
           }
         }}
       >
-        ${ResetIcon()} Reload
+        ${ResetIcon()} ${label}
       </button>
     `;
   };
 
   protected renderWithHorizontal(
     classInfo: ClassInfo,
-    { icon, title, description, kind, state }: AttachmentResolvedStateInfo
+    {
+      icon,
+      title,
+      description,
+      kind,
+      state,
+      needUpload,
+    }: AttachmentResolvedStateInfo
   ) {
     return html`
       <div class=${classMap(classInfo)}>
@@ -262,7 +283,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
               ${description}
             </div>
             ${choose(state, [
-              ['error', this.renderReloadButton],
+              ['error', () => this.renderNormalButton(needUpload)],
               ['error:oversize', this.renderUpgradeButton],
             ])}
           </div>
@@ -275,7 +296,14 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
 
   protected renderWithVertical(
     classInfo: ClassInfo,
-    { icon, title, description, kind, state }: AttachmentResolvedStateInfo
+    {
+      icon,
+      title,
+      description,
+      kind,
+      state,
+      needUpload,
+    }: AttachmentResolvedStateInfo
   ) {
     return html`
       <div class=${classMap(classInfo)}>
@@ -295,7 +323,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
         <div class="affine-attachment-banner">
           ${kind}
           ${choose(state, [
-            ['error', this.renderReloadButton],
+            ['error', () => this.renderNormalButton(needUpload)],
             ['error:oversize', this.renderUpgradeButton],
           ])}
         </div>
@@ -304,15 +332,12 @@ 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(name.split('.').pop() ?? '');
+    const kind = getAttachmentFileIcon(this.filetype);
 
     const resolvedState = this.resourceController.resolveStateWith({
-      loadingIcon,
+      loadingIcon: LoadingIcon(),
       errorIcon: WarningIcon(),
       icon: AttachmentIcon(),
       title: name,
@@ -363,11 +388,16 @@ 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}
-            .reload=${() => this.reload()}
+            .needUpload=${needUpload}
+            .action=${action}
           ></affine-resource-status>
         `;
       })}
@@ -376,10 +406,10 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
 
   private readonly _renderCitation = () => {
     const { name, footnoteIdentifier } = this.model.props;
-    const fileType = name.split('.').pop() ?? '';
-    const fileTypeIcon = getAttachmentFileIcon(fileType);
+    const icon = getAttachmentFileIcon(this.filetype);
+
     return html`<affine-citation-card
-      .icon=${fileTypeIcon}
+      .icon=${icon}
       .citationTitle=${name}
       .citationIdentifier=${footnoteIdentifier}
       .active=${this.selected$.value}

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

@@ -1,4 +1,4 @@
-import { openFileOrFiles } from '@blocksuite/affine-shared/utils';
+import { openSingleFileWith } 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 openFileOrFiles();
+          const file = await openSingleFileWith();
           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 openFileOrFiles();
+          const file = await openSingleFileWith();
           if (!file) return;
 
           await addSiblingAttachmentBlocks(std, [file], model);

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

@@ -47,11 +47,10 @@ 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 {
@@ -92,6 +91,7 @@ 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: var(--affine-placeholder-color);
+      color: ${unsafeCSSVarV2('text/placeholder')};
     }
   }
 

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.14",
+    "@toeverything/theme": "^1.1.15",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "rxjs": "^7.8.1",

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

@@ -10,7 +10,6 @@ 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) => {
@@ -33,15 +32,7 @@ export const bookmarkBlockMarkdownAdapterMatcher =
     toMatch: o => isUrlFootnoteDefinitionNode(o.node),
     toBlockSnapshot: {
       enter: (o, context) => {
-        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) {
+        if (!isFootnoteDefinitionNode(o.node)) {
           return;
         }
 

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

@@ -29,6 +29,15 @@ 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];
@@ -36,12 +45,14 @@ 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 { WebIcon16 } from '@blocksuite/affine-components/icons';
+import { LoadingIcon, 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 { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
+    const { 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 } = model.props;
+              let style: EmbedCardStyle = model.props.style;
 
               if (!styles.includes(style)) {
                 style = styles[0];
@@ -482,24 +482,26 @@ 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',
-        },
-      ].filter(action => BookmarkStyles.includes(action.id as EmbedCardStyle)),
+      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)),
       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.14",
+    "@toeverything/theme": "^1.1.15",
     "@types/mdast": "^4.0.4",
     "emoji-mart": "^5.6.0",
     "lit": "^3.2.0",

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

@@ -12,6 +12,7 @@ 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 {
@@ -109,14 +110,18 @@ 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">${this.model.props.emoji$}</span>
+          <span class="affine-callout-emoji">${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.14",
+    "@toeverything/theme": "^1.1.15",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

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

@@ -35,14 +35,10 @@ export class AffineCodeToolbar extends WithDisposable(LitElement) {
 
     .code-toolbar-button {
       color: ${unsafeCSSVarV2('icon/primary')};
-      background-color: ${unsafeCSSVarV2('segment/background')};
+      background-color: ${unsafeCSSVarV2('button/secondary')};
       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,6 +4,10 @@ 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';
@@ -73,6 +77,18 @@ 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,3 +1,7 @@
+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';
@@ -9,6 +13,10 @@ 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;
@@ -55,6 +63,17 @@ export class PreviewButton extends WithDisposable(SignalWatcher(LitElement)) {
     this.blockComponent.store.updateBlock(this.blockComponent.model, {
       preview: value,
     });
+
+    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',
+    });
   };
 
   get preview() {

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

@@ -117,13 +117,12 @@ export const PRIMARY_GROUPS: MenuItemGroup<CodeBlockToolbarContext>[] = [
   },
 ];
 
-// Clipboard Group
-export const clipboardGroup: MenuItemGroup<CodeBlockToolbarContext> = {
-  type: 'clipboard',
+export const toggleGroup: MenuItemGroup<CodeBlockToolbarContext> = {
+  type: 'toggle',
   items: [
     {
       type: 'wrap',
-      generate: ({ blockComponent, close }) => {
+      generate: ({ blockComponent }) => {
         return {
           action: () => {},
           render: () => {
@@ -134,7 +133,6 @@ export const clipboardGroup: MenuItemGroup<CodeBlockToolbarContext> = {
               <editor-menu-action
                 @click=${() => {
                   blockComponent.setWrap(!wrapped);
-                  close();
                 }}
                 aria-label=${label}
               >
@@ -155,7 +153,7 @@ export const clipboardGroup: MenuItemGroup<CodeBlockToolbarContext> = {
       when: ({ std }) =>
         std.getOptional(CodeBlockConfigExtension.identifier)?.showLineNumbers ??
         true,
-      generate: ({ blockComponent, close }) => {
+      generate: ({ blockComponent }) => {
         return {
           action: () => {},
           render: () => {
@@ -167,8 +165,6 @@ export const clipboardGroup: MenuItemGroup<CodeBlockToolbarContext> = {
                   blockComponent.store.updateBlock(blockComponent.model, {
                     lineNumber: !lineNumber,
                   });
-
-                  close();
                 }}
                 aria-label=${label}
               >
@@ -184,6 +180,13 @@ export const clipboardGroup: MenuItemGroup<CodeBlockToolbarContext> = {
         };
       },
     },
+  ],
+};
+
+// Clipboard Group
+export const clipboardGroup: MenuItemGroup<CodeBlockToolbarContext> = {
+  type: 'clipboard',
+  items: [
     {
       type: 'duplicate',
       label: 'Duplicate',
@@ -233,6 +236,7 @@ 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.14",
+    "@toeverything/theme": "^1.1.15",
     "@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,8 +133,6 @@ 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, {
@@ -232,10 +230,6 @@ export class DataViewBlockComponent extends CaptionedBlockComponent<DataViewBloc
     return this.rootComponent;
   }
 
-  get view() {
-    return this.dataView.expose;
-  }
-
   private renderDatabaseOps() {
     if (this.store.readonly) {
       return nothing;
@@ -250,68 +244,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.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();
-              }
-            },
-          },
-        })}
+        ${this.dataViewRootLogic.render()}
       </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.14",
+    "@toeverything/theme": "^1.1.15",
     "@types/mdast": "^4.0.4",
     "date-fns": "^4.0.0",
     "lit": "^3.2.0",

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

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

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

@@ -0,0 +1,73 @@
+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,15 +19,14 @@ import { getDropResult } from '@blocksuite/affine-widget-drag-handle';
 import {
   createRecordDetail,
   createUniComponentFromWebComponent,
-  DataView,
-  dataViewCommonStyle,
-  type DataViewInstance,
-  type DataViewProps,
+  DataViewRootUILogic,
   type DataViewSelection,
+  type DataViewUILogicBase,
   type DataViewWidget,
   type DataViewWidgetProps,
   defineUniComponent,
   ExternalGroupByConfigProvider,
+  lazy,
   renderUniLit,
   type SingleView,
   uniMap,
@@ -44,12 +43,23 @@ 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 { css, html, nothing, unsafeCSS } from 'lit';
+import { html, nothing } 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';
@@ -58,52 +68,7 @@ import { getSingleDocIdFromText } from './utils/title-doc.js';
 import type { DatabaseViewExtensionOptions } from './view';
 
 export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBlockModel> {
-  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) => {
+  private readonly clickDatabaseOps = (e: MouseEvent) => {
     const options = this.optionsConfig.configure(this.model, {
       items: [
         menu.input({
@@ -155,36 +120,33 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     });
   };
 
-  private _dataSource?: DatabaseBlockDataSource;
+  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 readonly dataView = new DataView();
-
-  private readonly renderTitle = (dataViewMethod: DataViewInstance) => {
-    const addRow = () => dataViewMethod.addRow?.('start');
+  private readonly renderTitle = (dataViewLogic: DataViewUILogicBase) => {
     return html` <affine-database-title
-      style="overflow: hidden"
+      class="${databaseTitleStyles}"
       .titleText="${this.model.props.title}"
-      .readonly="${this.dataSource.readonly$.value}"
-      .onPressEnterKey="${addRow}"
+      .dataViewLogic="${dataViewLogic}"
     ></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;
@@ -218,18 +180,12 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
   headerWidget: DataViewWidget = defineUniComponent(
     (props: DataViewWidgetProps) => {
       return html`
-        <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 class="${databaseHeaderContainerStyles}">
+          <div class="${databaseTitleRowStyles}">
+            ${this.renderTitle(props.dataViewLogic)} ${this.renderDatabaseOps()}
           </div>
-          <div
-            style="display:flex;align-items:center;justify-content: space-between;gap: 12px"
-            class="database-header-bar"
-          >
-            <div style="flex:1">
+          <div class="${databaseToolbarRowStyles} ${databaseHeaderBarStyles}">
+            <div class="${databaseViewBarContainerStyles}">
               ${renderUniLit(widgetPresets.viewBar, {
                 ...props,
                 onChangeView: id => {
@@ -284,7 +240,9 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     return () => {};
   };
 
-  setSelection = (selection: DataViewSelection | undefined) => {
+  private readonly setSelection = (
+    selection: DataViewSelection | undefined
+  ) => {
     if (selection) {
       getSelection()?.removeAllRanges();
     }
@@ -301,7 +259,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     );
   };
 
-  toolsWidget: DataViewWidget = widgetPresets.createTools({
+  private readonly toolsWidget: DataViewWidget = widgetPresets.createTools({
     table: [
       widgetPresets.tools.filter,
       widgetPresets.tools.sort,
@@ -318,7 +276,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     ],
   });
 
-  viewSelection$ = computed(() => {
+  private readonly viewSelection$ = computed(() => {
     const databaseSelection = this.selection.value.find(
       (selection): selection is DatabaseSelection => {
         if (selection.blockId !== this.blockId) {
@@ -330,28 +288,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     return databaseSelection?.viewSelection;
   });
 
-  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;
-  }
+  private readonly virtualPadding$ = signal(0);
 
   get optionsConfig(): DatabaseViewExtensionOptions {
     return {
@@ -369,15 +306,15 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     return this.rootComponent;
   }
 
-  get view() {
-    return this.dataView.expose;
-  }
-
   private renderDatabaseOps() {
-    if (this.dataSource.readonly$.value) {
+    if (this.dataSource.value.readonly$.value) {
       return nothing;
     }
-    return html` <div class="database-ops" @click="${this._clickDatabaseOps}">
+    return html` <div
+      data-testid="database-ops"
+      class="${databaseOpsStyles}"
+      @click="${this.clickDatabaseOps}"
+    >
       ${MoreHorizontalIcon()}
     </div>`;
   }
@@ -386,6 +323,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     super.connectedCallback();
 
     this.setAttribute(RANGE_SYNC_EXCLUDE_ATTR, 'true');
+    this.classList.add(databaseBlockStyles);
     this.listenFullWidthChange();
   }
 
@@ -402,85 +340,97 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
       })
     );
   }
-
-  override renderBlock() {
-    const peekViewService = this.std.getOptional(PeekViewProvider);
-    const telemetryService = this.std.getOptional(TelemetryProvider);
-    return html`
-      <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]),
+  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);
+            }
           },
-          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);
+        },
+        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,
                 });
-              } else {
-                return popSideDetail(
-                  this.createTemplate(data, () => {
-                    //
-                  })
-                );
+              };
+              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() {
+    return html`
+      <div contenteditable="false" class="${databaseContentStyles}">
+        ${this.dataViewRootLogic.value.render()}
       </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.14",
+    "@toeverything/theme": "^1.1.15",
     "@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.14",
+    "@toeverything/theme": "^1.1.15",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "rxjs": "^7.8.1",

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

@@ -22,10 +22,7 @@ import {
   GfxBlockComponent,
   TextSelection,
 } from '@blocksuite/std';
-import {
-  GfxViewInteractionExtension,
-  type SelectedContext,
-} from '@blocksuite/std/gfx';
+import { GfxViewInteractionExtension } from '@blocksuite/std/gfx';
 import { computed } from '@preact/signals-core';
 import { css, html } from 'lit';
 import { query, state } from 'lit/decorators.js';
@@ -282,69 +279,6 @@ 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;
@@ -506,5 +440,73 @@ 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.14",
+    "@toeverything/theme": "^1.1.15",
     "@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,7 +11,6 @@ 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) => {
@@ -36,15 +35,7 @@ export const embedLinkedDocBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatc
     fromMatch: o => o.node.flavour === EmbedLinkedDocBlockSchema.model.flavour,
     toBlockSnapshot: {
       enter: (o, context) => {
-        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) {
+        if (!isFootnoteDefinitionNode(o.node)) {
           return;
         }
 

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

@@ -13,7 +13,6 @@ import {
   ActionPlacement,
   DocDisplayMetaProvider,
   EditorSettingProvider,
-  FeatureFlagService,
   type LinkEventType,
   type OpenDocMode,
   type ToolbarAction,
@@ -216,12 +215,7 @@ const conversionsActionGroup = {
       run(ctx) {
         const block = ctx.getCurrentBlockByType(EmbedLinkedDocBlockComponent);
 
-        if (
-          ctx.std
-            .get(FeatureFlagService)
-            .getFlag('enable_embed_doc_with_alias') &&
-          isGfxBlockComponent(block)
-        ) {
+        if (isGfxBlockComponent(block)) {
           const editorSetting = ctx.std.getOptional(EditorSettingProvider);
           editorSetting?.set?.(
             'docCanvasPreferView',
@@ -265,18 +259,18 @@ const builtinToolbarConfig = {
     conversionsActionGroup,
     {
       id: 'c.style',
-      actions: [
-        {
-          id: 'horizontal',
-          label: 'Large horizontal style',
-        },
-        {
-          id: 'list',
-          label: 'Small horizontal style',
-        },
-      ].filter(action =>
-        EmbedLinkedDocStyles.includes(action.id as EmbedCardStyle)
-      ),
+      actions: (
+        [
+          {
+            id: 'horizontal',
+            label: 'Large horizontal style',
+          },
+          {
+            id: 'list',
+            label: 'Small horizontal style',
+          },
+        ] as const
+      ).filter(action => EmbedLinkedDocStyles.includes(action.id)),
       content(ctx) {
         const model = ctx.getCurrentModelByType(EmbedLinkedDocModel);
         if (!model) return null;
@@ -374,26 +368,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',
-        },
-      ].filter(action =>
-        EmbedLinkedDocStyles.includes(action.id as EmbedCardStyle)
-      ),
+      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)),
       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,6 +3,7 @@ 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 {
@@ -31,6 +32,7 @@ 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';
@@ -337,8 +339,6 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
 
     const theme = this.std.get(ThemeProvider).theme;
     const {
-      LoadingIcon,
-      ReloadIcon,
       LinkedDocDeletedBanner,
       LinkedDocEmptyBanner,
       SyncedDocErrorBanner,
@@ -347,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$;
@@ -384,10 +384,6 @@ 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}
         >
@@ -433,7 +429,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
                       class="affine-embed-linked-doc-card-content-reload-button"
                       @click=${this.refreshData}
                     >
-                      ${ReloadIcon} <span>Reload</span>
+                      ${ResetIcon()} <span>Reload</span>
                     </div>
                   </div>
                 `

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,7 +138,6 @@ 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;
@@ -305,7 +304,6 @@ 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,8 +1,6 @@
 import {
   EmbedEdgelessIcon,
   EmbedPageIcon,
-  getLoadingIconWith,
-  ReloadIcon,
 } from '@blocksuite/affine-components/icons';
 import {
   ColorScheme,
@@ -35,8 +33,6 @@ import {
 } from './styles.js';
 
 type EmbedCardImages = {
-  LoadingIcon: TemplateResult<1>;
-  ReloadIcon: TemplateResult<1>;
   LinkedDocIcon: TemplateResult<1>;
   LinkedDocDeletedIcon: TemplateResult<1>;
   LinkedDocEmptyBanner: TemplateResult<1>;
@@ -50,12 +46,9 @@ 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
@@ -68,8 +61,6 @@ export function getEmbedLinkedDocIcons(
       };
     } else {
       return {
-        ReloadIcon,
-        LoadingIcon,
         LinkedDocIcon: EmbedPageIcon,
         LinkedDocDeletedIcon,
         LinkedDocEmptyBanner: small
@@ -84,8 +75,6 @@ export function getEmbedLinkedDocIcons(
   } else {
     if (theme === ColorScheme.Light) {
       return {
-        ReloadIcon,
-        LoadingIcon,
         LinkedDocIcon: EmbedEdgelessIcon,
         LinkedDocDeletedIcon,
         LinkedDocEmptyBanner: small
@@ -98,8 +87,6 @@ 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,6 +1,8 @@
 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,
@@ -148,9 +150,7 @@ 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()}
                   >
-                    ${ReloadIcon} <span>Reload</span>
+                    ${ResetIcon()} <span>Reload</span>
                   </div>
                 </div>
               `

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

@@ -17,7 +17,6 @@ import { REFERENCE_NODE } from '@blocksuite/affine-shared/consts';
 import {
   ActionPlacement,
   EditorSettingProvider,
-  FeatureFlagService,
   type LinkEventType,
   type OpenDocMode,
   type ToolbarAction,
@@ -163,12 +162,7 @@ const conversionsActionGroup = {
       label: 'Card view',
       run(ctx) {
         const block = ctx.getCurrentBlockByType(EmbedSyncedDocBlockComponent);
-        if (
-          ctx.std
-            .get(FeatureFlagService)
-            .getFlag('enable_embed_doc_with_alias') &&
-          isGfxBlockComponent(block)
-        ) {
+        if (isGfxBlockComponent(block)) {
           const editorSetting = ctx.std.getOptional(EditorSettingProvider);
           editorSetting?.set?.(
             'docCanvasPreferView',
@@ -296,8 +290,6 @@ 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;
@@ -334,8 +326,6 @@ 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,7 +317,6 @@ 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,8 +1,6 @@
 import {
   EmbedEdgelessIcon,
   EmbedPageIcon,
-  getLoadingIconWith,
-  ReloadIcon,
 } from '@blocksuite/affine-components/icons';
 import { ColorScheme } from '@blocksuite/affine-model';
 import type { BlockComponent } from '@blocksuite/std';
@@ -21,11 +19,9 @@ 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>;
@@ -35,25 +31,20 @@ 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.14",
+    "@toeverything/theme": "^1.1.15",
     "@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,12 +50,6 @@ 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,7 +68,6 @@ 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,13 +9,11 @@ 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>;
@@ -24,11 +22,8 @@ type EmbedCardIcons = {
 };
 
 export function getEmbedCardIcons(theme: ColorScheme): EmbedCardIcons {
-  const LoadingIcon = getLoadingIconWith(theme);
-
   if (theme === ColorScheme.Light) {
     return {
-      LoadingIcon,
       EmbedCardBannerIcon: EmbedCardLightBannerIcon,
       EmbedCardHorizontalIcon: EmbedCardLightHorizontalIcon,
       EmbedCardListIcon: EmbedCardLightListIcon,
@@ -37,7 +32,6 @@ 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 } = model.props;
+              let style: EmbedCardStyle = model.props.style;
               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 } = model.props;
+              let style: EmbedCardStyle = model.props.style;
 
               if (!styles.includes(style)) {
                 style =
@@ -441,7 +441,11 @@ const createBuiltinSurfaceToolbarConfigForExternal = (
               let { style } = model.props;
               let flavour = 'affine:bookmark';
 
-              if (!BookmarkStyles.includes(style)) {
+              if (
+                !BookmarkStyles.includes(
+                  style as (typeof BookmarkStyles)[number]
+                )
+              ) {
                 style = BookmarkStyles[0];
               }
 
@@ -517,26 +521,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',
-          },
-        ].filter(action =>
-          EmbedGithubStyles.includes(action.id as EmbedCardStyle)
-        ),
+        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)),
         when(ctx) {
           return Boolean(ctx.getCurrentModelByType(EmbedGithubModel));
         },

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

@@ -6,7 +6,6 @@ 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';
@@ -76,10 +75,6 @@ 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 { OpenIcon } from '@blocksuite/affine-components/icons';
+import { LoadingIcon, 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 { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
-    const titleIcon = loading ? LoadingIcon : GithubIcon;
+    const { 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 { ThemeProvider } from '@blocksuite/affine-shared/services';
+import { LoadingIcon } from '@blocksuite/affine-components/icons';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { EmbedIcon } from '@blocksuite/icons/lit';
 import { type BlockStdScope } from '@blocksuite/std';
@@ -7,7 +7,6 @@ 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';
 
@@ -156,9 +155,6 @@ 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,
@@ -176,7 +172,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 { OpenIcon } from '@blocksuite/affine-components/icons';
+import { LoadingIcon, 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 { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
-    const titleIcon = loading ? LoadingIcon : LoomIcon;
+    const { EmbedCardBannerIcon } = getEmbedCardIcons(theme);
+    const titleIcon = loading ? LoadingIcon() : LoomIcon;
     const titleText = loading ? 'Loading...' : title;
     const descriptionText = loading ? '' : description;
     const bannerImage =
@@ -112,7 +112,6 @@ 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 { OpenIcon } from '@blocksuite/affine-components/icons';
+import { LoadingIcon, 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 { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
-    const titleIcon = loading ? LoadingIcon : YoutubeIcon;
+    const { 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.14",
+    "@toeverything/theme": "^1.1.15",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

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

@@ -205,10 +205,11 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
       !forceMove
     ) {
       // Clear the flag so future navigations behave normally
-      this.gfx.tool.setTool(PresentTool, {
-        ...toolOptions,
-        restoredAfterPan: false,
-      });
+      // 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;
+      }
       return;
     }
 

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

@@ -3,6 +3,7 @@ import {
   DefaultTheme,
   type FrameBlockModel,
   FrameBlockSchema,
+  isTransparent,
 } from '@blocksuite/affine-model';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { Bound } from '@blocksuite/global/gfx';
@@ -11,11 +12,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 {
@@ -68,22 +69,6 @@ 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);
@@ -103,6 +88,12 @@ 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"
@@ -118,6 +109,7 @@ export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> {
               : `1px solid ${cssVarV2('edgeless/frame/border/default')}`,
         })}
       ></div>
+      ${widgets}
     `;
   }
 
@@ -189,5 +181,28 @@ 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,20 +241,35 @@ export class EdgelessFrameManager extends GfxExtension {
       surfaceModel.elementAdded.subscribe(({ id, local }) => {
         const element = surfaceModel.getElementById(id);
         if (element && local) {
-          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
+          // 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
           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.14",
+    "@toeverything/theme": "^1.1.15",
     "file-type": "^21.0.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

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

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

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

@@ -1,19 +1,17 @@
 import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
 import { whenHover } from '@blocksuite/affine-components/hover';
-import { getLoadingIconWith } from '@blocksuite/affine-components/icons';
+import { LoadingIcon } 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 {
-  ThemeProvider,
-  ToolbarRegistryIdentifier,
-} from '@blocksuite/affine-shared/services';
+import { 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';
@@ -126,9 +124,6 @@ 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;
 
@@ -138,7 +133,10 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
     });
 
     const resovledState = this.resourceController.resolveStateWith({
-      loadingIcon,
+      loadingIcon: LoadingIcon({
+        strokeColor: cssVarV2('button/pureWhiteText'),
+        ringColor: cssVarV2('loading/imageLoadingLayer', '#ffffff8f'),
+      }),
       errorIcon: BrokenImageIcon(),
       icon: ImageIcon(),
       title: 'Image',

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

@@ -1,13 +1,12 @@
 import type { BlockCaptionEditor } from '@blocksuite/affine-components/caption';
-import { getLoadingIconWith } from '@blocksuite/affine-components/icons';
+import { LoadingIcon } 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 { ThemeProvider } from '@blocksuite/affine-shared/services';
-import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { cssVarV2, 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';
@@ -39,11 +38,18 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
       position: absolute;
       top: 4px;
       right: 4px;
-      width: 20px;
-      height: 20px;
-      padding: 4px;
-      border-radius: 4px;
-      background: ${unsafeCSSVarV2('loading/backgroundLayer')};
+      width: 36px;
+      height: 36px;
+      padding: 5px;
+      border-radius: 8px;
+      background: ${unsafeCSSVarV2(
+        'loading/imageLoadingBackground',
+        '#92929238'
+      )};
+
+      & > svg {
+        font-size: 25.71px;
+      }
     }
 
     affine-edgeless-image .affine-image-status {
@@ -108,9 +114,6 @@ 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;
 
@@ -124,13 +127,18 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
     });
 
     const resovledState = this.resourceController.resolveStateWith({
-      loadingIcon,
+      loadingIcon: LoadingIcon({
+        strokeColor: cssVarV2('button/pureWhiteText'),
+        ringColor: cssVarV2('loading/imageLoadingLayer', '#ffffff8f'),
+      }),
       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(
@@ -146,17 +154,18 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
                 @error=${this._handleError}
               />
             </div>
+            ${when(loading, () => html`<div class="loading">${icon}</div>`)}
             ${when(
-              resovledState.loading,
-              () => html`<div class="loading">${loadingIcon}</div>`
-            )}
-            ${when(
-              resovledState.error && resovledState.description,
+              Boolean(error && description),
               () =>
                 html`<affine-resource-status
                   class="affine-image-status"
-                  .message=${resovledState.description}
-                  .reload=${() => this.refreshData()}
+                  .message=${description}
+                  .needUpload=${needUpload}
+                  .action=${() =>
+                    needUpload
+                      ? this.resourceController.upload()
+                      : 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.14",
+    "@toeverything/theme": "^1.1.15",
     "@types/katex": "^0.16.7",
     "@types/mdast": "^4.0.4",
     "katex": "^0.16.11",

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

@@ -1,4 +1,8 @@
 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';
 
@@ -48,6 +52,21 @@ 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,7 +58,6 @@ export class LatexBlockComponent extends CaptionedBlockComponent<LatexBlockModel
           try {
             katex.render(latex, katexContainer, {
               displayMode: true,
-              output: 'mathml',
             });
           } catch {
             katexContainer.replaceChildren();
@@ -74,19 +73,16 @@ export class LatexBlockComponent extends CaptionedBlockComponent<LatexBlockModel
         }
       })
     );
+  }
 
-    this.disposables.addFromEvent(this, 'click', () => {
-      // should not open editor or select block in readonly mode
-      if (this.store.readonly) {
-        return;
-      }
+  private _handleClick() {
+    if (this.store.readonly) return;
 
-      if (this.isBlockSelected) {
-        this.toggleEditor();
-      } else {
-        this.selectBlock();
-      }
-    });
+    if (this.isBlockSelected) {
+      this.toggleEditor();
+    } else {
+      this.selectBlock();
+    }
   }
 
   removeEditor(portal: HTMLDivElement) {
@@ -95,7 +91,11 @@ export class LatexBlockComponent extends CaptionedBlockComponent<LatexBlockModel
 
   override renderBlock() {
     return html`
-      <div contenteditable="false" class="latex-block-container">
+      <div
+        contenteditable="false"
+        class="latex-block-container"
+        @click=${this._handleClick}
+      >
         <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.14",
+    "@toeverything/theme": "^1.1.15",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

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

@@ -40,6 +40,11 @@ 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.14",
+    "@toeverything/theme": "^1.1.15",
     "@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,7 +6,6 @@ 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';
@@ -66,34 +65,19 @@ const createNoteBlockMarkdownAdapterMatcher = (
         }
       });
 
-      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)
-        );
+      // 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' }],
+        });
       }
     },
   },

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

@@ -26,10 +26,9 @@ import {
 import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
 import type { BlockModel } from '@blocksuite/store';
 import { consume } from '@lit/context';
-import { computed } from '@preact/signals-core';
-import { html, nothing } from 'lit';
+import { computed, effect } from '@preact/signals-core';
+import { 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';
@@ -150,15 +149,20 @@ 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 html`<div
-      class=${styles.background}
-      style=${styleMap(this.backgroundStyle$.value)}
-      @pointerdown=${stopPropagation}
-      @click=${this._handleClickAtBackground}
-    >
-      ${this.note.isPageBlock() ? this._renderHeader() : nothing}
-    </div>`;
+    return this.note.isPageBlock() ? this._renderHeader() : nothing;
   }
 
   @consume({ context: stdContext })

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

@@ -13,7 +13,6 @@ 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';
@@ -342,69 +341,6 @@ 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;
   }
@@ -464,7 +400,7 @@ export const EdgelessNoteInteraction =
 
           onResizeMove(context): void {
             const { originalBound, newBound, lockRatio, constraint } = context;
-            const { minWidth, minHeight } = constraint;
+            const { minWidth, minHeight, maxHeight, maxWidth } = constraint;
 
             let scale = initialScale;
             let edgelessProp = { ...model.props.edgeless };
@@ -475,8 +411,8 @@ export const EdgelessNoteInteraction =
               edgelessProp.scale = scale;
             }
 
-            newBound.w = clamp(newBound.w, minWidth, Number.MAX_SAFE_INTEGER);
-            newBound.h = clamp(newBound.h, minHeight, Number.MAX_SAFE_INTEGER);
+            newBound.w = clamp(newBound.w, minWidth * scale, maxWidth);
+            newBound.h = clamp(newBound.h, minHeight * scale, maxHeight);
 
             if (newBound.h > minHeight * scale) {
               edgelessProp.collapse = true;
@@ -493,5 +429,71 @@ 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.14",
+    "@toeverything/theme": "^1.1.15",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

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.14",
+    "@toeverything/theme": "^1.1.15",
     "@types/lodash-es": "^4.17.12",
     "dompurify": "^3.2.4",
     "html2canvas": "^1.4.1",

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

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

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

@@ -1,6 +1,9 @@
 import { insertLinkByQuickSearchCommand } from '@blocksuite/affine-block-bookmark';
 import { EdgelessTextBlockComponent } from '@blocksuite/affine-block-edgeless-text';
-import { FrameTool } from '@blocksuite/affine-block-frame';
+import {
+  FrameTool,
+  type PresentToolOption,
+} from '@blocksuite/affine-block-frame';
 import {
   DefaultTool,
   EdgelessLegacySlotIdentifier,
@@ -472,9 +475,6 @@ 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,9 +512,6 @@ 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;
@@ -712,10 +709,18 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
 
     const revertToPrevTool = (ev: KeyboardEvent) => {
       if (ev.code === 'Space') {
-        this._setEdgelessTool(
-          (currentTool as DefaultTool).constructor as typeof DefaultTool,
-          currentTool?.activatedOption
-        );
+        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);
         selection.set(currentSel);
         document.removeEventListener('keyup', revertToPrevTool, false);
       }
@@ -728,6 +733,14 @@ 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;
   }
 
-  private get _viewportElement(): HTMLElement {
+  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,7 +16,6 @@ import type {
   GfxController,
   GfxModel,
   LayerManager,
-  PointTestOptions,
   ReorderingDirection,
 } from '@blocksuite/std/gfx';
 import {
@@ -168,19 +167,6 @@ 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.14",
+    "@toeverything/theme": "^1.1.15",
     "@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.14",
+    "@toeverything/theme": "^1.1.15",
     "@types/lodash-es": "^4.17.12",
     "fractional-indexing": "^3.2.0",
     "html2canvas": "^1.4.1",

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

@@ -43,6 +43,25 @@ 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',
@@ -141,6 +160,18 @@ 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>();
@@ -186,6 +217,7 @@ export class DomRenderer {
   private _initViewport() {
     this._disposables.add(
       this.viewport.viewportUpdated.subscribe(() => {
+        this._markViewportDirty();
         this.refresh();
       })
     );
@@ -195,6 +227,7 @@ export class DomRenderer {
         if (this._sizeUpdatedRafId) return;
         this._sizeUpdatedRafId = requestConnectedFrame(() => {
           this._sizeUpdatedRafId = null;
+          this._markSizeDirty();
           this._resetSize();
           this._render();
           this.refresh();
@@ -208,6 +241,7 @@ export class DomRenderer {
 
         if (this.usePlaceholder !== shouldRenderPlaceholders) {
           this.usePlaceholder = shouldRenderPlaceholders;
+          this._markUsePlaceholderDirty();
           this.refresh();
         }
       })
@@ -307,6 +341,292 @@ 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[] = [];
@@ -387,100 +707,4 @@ 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,7 +35,9 @@ export abstract class Overlay extends Extension {
     ]);
   }
 
-  clear() {}
+  clear() {
+    this.refresh();
+  }
 
   dispose() {}
 

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

@@ -154,32 +154,6 @@ 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;
@@ -194,17 +168,6 @@ 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/table/src/selection-schema.ts

@@ -67,6 +67,8 @@ 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.14",
+    "@toeverything/theme": "^1.1.15",
     "@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,6 +111,7 @@ 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,6 +92,7 @@ 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();

blocksuite/affine/components/src/icons/loading.ts

@@ -1,14 +1,25 @@
-import { ColorScheme } from '@blocksuite/affine-model';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { html } from 'lit';
 
-const LoadingIcon = (color: string) =>
+export const LoadingIcon = ({
+  size = '1em',
+  progress = 0.2,
+  ringColor = cssVarV2('loading/background'),
+  strokeColor = cssVarV2('loading/foreground'),
+}: {
+  size?: string;
+  progress?: number;
+  ringColor?: string;
+  strokeColor?: string;
+} = {}) =>
   html`<svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
+    width="${size}"
+    height="${size}"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
+    fill="none"
   >
-    <style xmlns="http://www.w3.org/2000/svg">
+    <style>
       .spinner {
         transform-origin: center;
         animation: spinner_animate 0.75s infinite linear;
@@ -19,21 +30,18 @@ const LoadingIcon = (color: string) =>
         }
       }
     </style>
-    <path
-      d="M14.6666 8.00004C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00004C1.33325 4.31814 4.31802 1.33337 7.99992 1.33337C11.6818 1.33337 14.6666 4.31814 14.6666 8.00004ZM3.30003 8.00004C3.30003 10.5957 5.40424 12.6999 7.99992 12.6999C10.5956 12.6999 12.6998 10.5957 12.6998 8.00004C12.6998 5.40436 10.5956 3.30015 7.99992 3.30015C5.40424 3.30015 3.30003 5.40436 3.30003 8.00004Z"
-      fill="${color}"
-      fill-opacity="0.1"
-    />
-    <path
-      d="M13.6833 8.00004C14.2263 8.00004 14.674 7.55745 14.5942 7.02026C14.5142 6.48183 14.3684 5.954 14.1591 5.44882C13.8241 4.63998 13.333 3.90505 12.714 3.286C12.0949 2.66694 11.36 2.17588 10.5511 1.84084C10.046 1.63159 9.51812 1.48576 8.9797 1.40576C8.44251 1.32595 7.99992 1.77363 7.99992 2.31671C7.99992 2.85979 8.44486 3.28974 8.9761 3.40253C9.25681 3.46214 9.53214 3.54746 9.79853 3.65781C10.3688 3.894 10.8869 4.2402 11.3233 4.67664C11.7598 5.11307 12.106 5.6312 12.3422 6.20143C12.4525 6.46782 12.5378 6.74315 12.5974 7.02386C12.7102 7.5551 13.1402 8.00004 13.6833 8.00004Z"
-      fill="#1C9EE4"
+    <circle cx="12" cy="12" r="8" stroke="${ringColor}" stroke-width="4" />
+    <circle
       class="spinner"
+      cx="12"
+      cy="12"
+      r="8"
+      stroke="${strokeColor}"
+      stroke-width="4"
+      stroke-linecap="round"
+      stroke-dasharray="${2 * Math.PI * 8 * progress} ${2 *
+      Math.PI *
+      8 *
+      (1 - progress)}"
     />
   </svg>`;
-
-export const LightLoadingIcon = LoadingIcon('black');
-
-export const DarkLoadingIcon = LoadingIcon('white');
-
-export const getLoadingIconWith = (theme: ColorScheme = ColorScheme.Light) =>
-  theme === ColorScheme.Light ? LightLoadingIcon : DarkLoadingIcon;

blocksuite/affine/components/src/icons/text.ts

@@ -840,28 +840,6 @@ export const EmbedCardDarkCubeIcon = html`
   </svg>
 `;
 
-export const ReloadIcon = html`<svg
-  width="12"
-  height="12"
-  viewBox="0 0 12 12"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <g clip-path="url(#clip0_6505_24239)">
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M1.625 6C1.625 3.58375 3.58375 1.625 6 1.625C7.12028 1.625 8.14299 2.04656 8.91676 2.7391L8.91796 2.74017L9.625 3.37847V2C9.625 1.79289 9.79289 1.625 10 1.625C10.2071 1.625 10.375 1.79289 10.375 2V4.22222C10.375 4.42933 10.2071 4.59722 10 4.59722H7.77778C7.57067 4.59722 7.40278 4.42933 7.40278 4.22222C7.40278 4.01512 7.57067 3.84722 7.77778 3.84722H9.025L8.41657 3.29795C8.41637 3.29777 8.41617 3.29759 8.41597 3.29741C7.77447 2.7235 6.92838 2.375 6 2.375C3.99797 2.375 2.375 3.99797 2.375 6C2.375 8.00203 3.99797 9.625 6 9.625C7.72469 9.625 9.16888 8.42017 9.53518 6.80591C9.58101 6.60393 9.78189 6.47736 9.98386 6.52319C10.1858 6.56902 10.3124 6.7699 10.2666 6.97187C9.82447 8.92025 8.08257 10.375 6 10.375C3.58375 10.375 1.625 8.41625 1.625 6Z"
-      fill="#1E96EB"
-    />
-  </g>
-  <defs>
-    <clipPath id="clip0_6505_24239">
-      <rect width="12" height="12" fill="white" />
-    </clipPath>
-  </defs>
-</svg>`;
-
 export const EmbedPageIcon = icons.LinkedPageIcon({
   width: '16',
   height: '16',

blocksuite/affine/components/src/open-doc-dropdown-menu/dropdown-menu.ts

@@ -29,12 +29,6 @@ export class OpenDocDropdownMenu extends SignalWatcher(
       gap: unset !important;
     }
 
-    editor-icon-button {
-      .label {
-        font-weight: 400;
-      }
-    }
-
     div[data-orientation] {
       width: 264px;
       gap: 4px;

blocksuite/affine/components/src/resource/resource.ts

@@ -28,6 +28,7 @@ export type ResolvedStateInfoPart = {
   error: boolean;
   state: StateKind;
   url: string | null;
+  needUpload: boolean;
 };
 
 export type ResolvedStateInfo = StateInfo & ResolvedStateInfoPart;
@@ -41,6 +42,7 @@ export class ResourceController implements Disposable {
   readonly resolvedState$ = computed<ResolvedStateInfoPart>(() => {
     const url = this.blobUrl$.value;
     const {
+      needUpload = false,
       uploading = false,
       downloading = false,
       overSize = false,
@@ -57,7 +59,13 @@ export class ResourceController implements Disposable {
 
     const loading = state === 'uploading' || state === 'loading';
 
-    return { error: hasError, loading, state, url };
+    return {
+      error: hasError,
+      needUpload,
+      loading,
+      state,
+      url,
+    };
   });
 
   private engine?: BlobEngine;
@@ -92,7 +100,8 @@ export class ResourceController implements Disposable {
       errorIcon?: TemplateResult;
     } & StateInfo
   ): ResolvedStateInfo {
-    const { error, loading, state, url } = this.resolvedState$.value;
+    const { error, loading, state, url, needUpload } =
+      this.resolvedState$.value;
 
     const { icon, title, description, loadingIcon, errorIcon } = info;
 
@@ -104,11 +113,11 @@ export class ResourceController implements Disposable {
       title,
       description,
       url,
+      needUpload,
     };
 
     if (loading) {
       result.icon = loadingIcon ?? icon;
-      result.title = state === 'uploading' ? 'Uploading...' : 'Loading...';
     } else if (error) {
       result.icon = errorIcon ?? icon;
       result.description = this.state$.value.errorMessage ?? description;
@@ -130,13 +139,15 @@ export class ResourceController implements Disposable {
       if (!blobState$) return;
 
       const subscription = blobState$.subscribe(state => {
-        let { uploading, downloading } = state;
-        if (state.overSize || state.errorMessage) {
+        let { uploading, downloading, errorMessage } = state;
+        if (state.overSize) {
           uploading = false;
           downloading = false;
+        } else if ((uploading || downloading) && errorMessage) {
+          errorMessage = null;
         }
 
-        this.updateState({ ...state, uploading, downloading });
+        this.updateState({ ...state, uploading, downloading, errorMessage });
       });
 
       return () => subscription.unsubscribe();
@@ -178,6 +189,9 @@ export class ResourceController implements Disposable {
   }
 
   async refreshUrlWith(type?: string) {
+    // Resets the state.
+    this.state$.value = {};
+
     const url = await this.createUrlWith(type);
     if (!url) return;
 
@@ -191,6 +205,21 @@ export class ResourceController implements Disposable {
     URL.revokeObjectURL(prevUrl);
   }
 
+  // Re-upload to the server.
+  async upload() {
+    const blobId = this.blobId$.peek();
+    if (!blobId) return;
+
+    const state = this.state$.peek();
+    if (!state.needUpload) return;
+    if (state.uploading) return;
+
+    // Resets the state.
+    this.state$.value = {};
+
+    return await this.engine?.upload(blobId);
+  }
+
   dispose() {
     const url = this.blobUrl$.peek();
     if (!url) return;

blocksuite/affine/components/src/resource/status.ts

@@ -2,7 +2,7 @@ import {
   fontBaseStyle,
   panelBaseColorsStyle,
 } from '@blocksuite/affine-shared/styles';
-import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { unsafeCSSVar, unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import {
   createButtonPopper,
   stopPropagation,
@@ -15,7 +15,8 @@ import { property, query } from 'lit/decorators.js';
 
 @requiredProperties({
   message: PropTypes.string,
-  reload: PropTypes.instanceOf(Function),
+  needUpload: PropTypes.boolean,
+  action: PropTypes.instanceOf(Function),
 })
 export class ResourceStatus extends WithDisposable(LitElement) {
   static override styles = css`
@@ -32,7 +33,7 @@ export class ResourceStatus extends WithDisposable(LitElement) {
       cursor: pointer;
       color: ${unsafeCSSVarV2('button/pureWhiteText')};
       background: ${unsafeCSSVarV2('status/error')};
-      box-shadow: var(--affine-overlay-shadow);
+      box-shadow: ${unsafeCSSVar('overlayShadow')};
     }
 
     ${panelBaseColorsStyle('.popper')}
@@ -43,28 +44,36 @@ export class ResourceStatus extends WithDisposable(LitElement) {
       padding: 8px;
       border-radius: 8px;
       width: 260px;
-      font-size: var(--affine-font-sm);
       font-style: normal;
       font-weight: 400;
       line-height: 22px;
+      font-size: ${unsafeCSSVar('fontSm')};
 
       &[data-show] {
         display: flex;
         flex-direction: column;
-        gap: 8px;
+        gap: 4px;
       }
     }
 
+    .header {
+      font-weight: 500;
+    }
+
     .content {
+      font-feature-settings:
+        'liga' off,
+        'clig' off;
       color: ${unsafeCSSVarV2('text/primary')};
     }
 
     .footer {
       display: flex;
       justify-content: flex-end;
+      margin-top: 4px;
     }
 
-    button.reload {
+    button.action {
       display: flex;
       align-items: center;
       padding: 2px 12px;
@@ -102,23 +111,35 @@ export class ResourceStatus extends WithDisposable(LitElement) {
       this._popper?.toggle();
     });
     this.disposables.addFromEvent(
-      this._reloadButton,
+      this._actionButton,
       'click',
       (_: MouseEvent) => {
         this._popper?.hide();
-        this.reload();
+        this.action();
       }
     );
     this.disposables.add(() => this._popper?.dispose());
   }
 
   override render() {
+    const { message, needUpload } = this;
+    const { type, label } = needUpload
+      ? {
+          type: 'Upload',
+          label: 'Retry',
+        }
+      : {
+          type: 'Download',
+          label: 'Reload',
+        };
+
     return html`
       <button class="status">${InformationIcon()}</button>
       <div class="popper">
-        <div class="content">${this.message}</div>
+        <div class="header">${type} failed</div>
+        <div class="content">${message}</div>
         <div class="footer">
-          <button class="reload">Reload</button>
+          <button class="action">${label}</button>
         </div>
       </div>
     `;
@@ -130,12 +151,15 @@ export class ResourceStatus extends WithDisposable(LitElement) {
   @query('button.status')
   private accessor _trigger!: HTMLButtonElement;
 
-  @query('button.reload')
-  private accessor _reloadButton!: HTMLButtonElement;
+  @query('button.action')
+  private accessor _actionButton!: HTMLButtonElement;
 
   @property({ attribute: false })
   accessor message!: string;
 
   @property({ attribute: false })
-  accessor reload!: () => void;
+  accessor needUpload!: boolean;
+
+  @property({ attribute: false })
+  accessor action!: () => void;
 }

blocksuite/affine/components/src/slider/slider.ts

@@ -92,7 +92,7 @@ export class Slider extends WithDisposable(LitElement) {
 
     const dispose = on(this, 'pointermove', this._onPointerMove);
     this._disposables.add(once(this, 'pointerup', dispose));
-    this._disposables.add(once(this, 'pointerout', dispose));
+    this._disposables.add(once(this, 'pointerleave', dispose));
   };
 
   private readonly _onPointerMove = (e: PointerEvent) => {

blocksuite/affine/components/src/slider/styles.ts

@@ -2,6 +2,11 @@ import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { css } from 'lit';
 
 export const styles = css`
+  :host {
+    display: block;
+    touch-action: none;
+  }
+
   :host([disabled]) {
     opacity: 0.5;
     pointer-events: none;

blocksuite/affine/components/src/toolbar/styles.ts

@@ -9,6 +9,7 @@ const toolbarColorKeys: Array<keyof AffineCssVariables> = [
   '--affine-background-overlay-panel-color',
   '--affine-v2-layer-background-overlayPanel' as never,
   '--affine-v2-layer-insideBorder-blackBorder' as never,
+  '--affine-v2-icon-primary' as never,
   '--affine-background-error-color',
   '--affine-background-primary-color',
   '--affine-background-tertiary-color',

blocksuite/affine/data-view/package.json

@@ -21,7 +21,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.14",
+    "@toeverything/theme": "^1.1.15",
     "@types/lodash-es": "^4.17.12",
     "clsx": "^2.1.1",
     "date-fns": "^4.0.0",