feat(server): batch blob gc (#15183 )

fix(server): blob gc planning
fix(server): s3 metadata encode
2026-07-03 10:40:44 +08:00 · 2026-07-02 06:14:01 +08:00 · 2026-07-02 03:28:56 +08:00 · 2026-07-02 00:27:17 +08:00 · 2026-07-01 23:27:20 +08:00 · 2026-07-01 22:24:10 +08:00
1177 changed files with 81447 additions and 37997 deletions
@@ -121,6 +121,18 @@
          "default": {
            "concurrency": 1
          }
+        },
+        "queues.backendRuntime": {
+          "type": "object",
+          "description": "The config for backend runtime job queue\n@default {\"concurrency\":1}",
+          "properties": {
+            "concurrency": {
+              "type": "number"
+            }
+          },
+          "default": {
+            "concurrency": 1
+          }
        }
      }
    },
@@ -135,17 +147,17 @@
        },
        "throttlers.default": {
          "type": "object",
-          "description": "The config for the default throttler.\n@default {\"ttl\":60,\"limit\":120}",
+          "description": "The config for the default throttler.\n@default {\"ttl\":60000,\"limit\":120}",
          "default": {
-            "ttl": 60,
+            "ttl": 60000,
            "limit": 120
          }
        },
        "throttlers.strict": {
          "type": "object",
-          "description": "The config for the strict throttler.\n@default {\"ttl\":60,\"limit\":20}",
+          "description": "The config for the strict throttler.\n@default {\"ttl\":60000,\"limit\":20}",
          "default": {
-            "ttl": 60,
+            "ttl": 60000,
            "limit": 20
          }
        }
@@ -175,6 +187,11 @@
          "description": "Whether require email verification before accessing restricted resources(not implemented).\n@default true",
          "default": true
        },
+        "newAccountShareActionDelay": {
+          "type": "number",
+          "description": "Minimum account age in seconds before new accounts can invite members or create share links.\n@default 86400",
+          "default": 86400
+        },
        "passwordRequirements": {
          "type": "object",
          "description": "The password strength requirements when set new password.\n@default {\"min\":8,\"max\":32}",
@@ -300,6 +317,22 @@
        }
      }
    },
+    "permission": {
+      "type": "object",
+      "description": "Configuration for permission module",
+      "properties": {
+        "readModel": {
+          "type": "string",
+          "description": "Permission data source for Rust evaluation\n@default \"projection\"\n@environment `AFFINE_PERMISSION_READ_MODEL`",
+          "default": "projection"
+        },
+        "fallbackLegacyLoader": {
+          "type": "boolean",
+          "description": "Fallback from projection loader to legacy loader when projection input loading fails\n@default false\n@environment `AFFINE_PERMISSION_FALLBACK_LEGACY_LOADER`",
+          "default": false
+        }
+      }
+    },
    "storages": {
      "type": "object",
      "description": "Configuration for storages module",
@@ -472,6 +505,7 @@
                    "jurisdiction": {
                      "type": "string",
                      "enum": [
+                        "default",
                        "eu"
                      ],
                      "description": "Optional jurisdiction for the cloudflare r2 endpoint. Set to \"eu\" for EU buckets."
@@ -497,6 +531,36 @@
                  }
                }
              }
+            },
+            {
+              "type": "object",
+              "properties": {
+                "provider": {
+                  "type": "string",
+                  "enum": [
+                    "assetpack"
+                  ]
+                },
+                "bucket": {
+                  "type": "string"
+                },
+                "config": {
+                  "type": "object",
+                  "properties": {
+                    "path": {
+                      "type": "string"
+                    }
+                  },
+                  "required": [
+                    "path"
+                  ]
+                }
+              },
+              "required": [
+                "provider",
+                "bucket",
+                "config"
+              ]
            }
          ],
          "default": {
@@ -670,6 +734,7 @@
                    "jurisdiction": {
                      "type": "string",
                      "enum": [
+                        "default",
                        "eu"
                      ],
                      "description": "Optional jurisdiction for the cloudflare r2 endpoint. Set to \"eu\" for EU buckets."
@@ -695,6 +760,36 @@
                  }
                }
              }
+            },
+            {
+              "type": "object",
+              "properties": {
+                "provider": {
+                  "type": "string",
+                  "enum": [
+                    "assetpack"
+                  ]
+                },
+                "bucket": {
+                  "type": "string"
+                },
+                "config": {
+                  "type": "object",
+                  "properties": {
+                    "path": {
+                      "type": "string"
+                    }
+                  },
+                  "required": [
+                    "path"
+                  ]
+                }
+              },
+              "required": [
+                "provider",
+                "bucket",
+                "config"
+              ]
            }
          ],
          "default": {
@@ -1311,6 +1406,7 @@
                    "jurisdiction": {
                      "type": "string",
                      "enum": [
+                        "default",
                        "eu"
                      ],
                      "description": "Optional jurisdiction for the cloudflare r2 endpoint. Set to \"eu\" for EU buckets."
@@ -1336,6 +1432,36 @@
                  }
                }
              }
+            },
+            {
+              "type": "object",
+              "properties": {
+                "provider": {
+                  "type": "string",
+                  "enum": [
+                    "assetpack"
+                  ]
+                },
+                "bucket": {
+                  "type": "string"
+                },
+                "config": {
+                  "type": "object",
+                  "properties": {
+                    "path": {
+                      "type": "string"
+                    }
+                  },
+                  "required": [
+                    "path"
+                  ]
+                }
+              },
+              "required": [
+                "provider",
+                "bucket",
+                "config"
+              ]
            }
          ],
          "default": {
@@ -1389,22 +1515,6 @@
        }
      }
    },
-    "customerIo": {
-      "type": "object",
-      "description": "Configuration for customerIo module",
-      "properties": {
-        "enabled": {
-          "type": "boolean",
-          "description": "Enable customer.io integration\n@default false",
-          "default": false
-        },
-        "token": {
-          "type": "string",
-          "description": "Customer.io token\n@default \"\"",
-          "default": ""
-        }
-      }
-    },
    "oauth": {
      "type": "object",
      "description": "Configuration for oauth module",
@@ -1503,16 +1613,6 @@
          "description": "Whether enable lifetime price and allow user to pay for it.\n@default true",
          "default": true
        },
-        "apiKey": {
-          "type": "string",
-          "description": "[Deprecated] Stripe API key. Use payment.stripe.apiKey instead.\n@default \"\"\n@environment `STRIPE_API_KEY`",
-          "default": ""
-        },
-        "webhookKey": {
-          "type": "string",
-          "description": "[Deprecated] Stripe webhook key. Use payment.stripe.webhookKey instead.\n@default \"\"\n@environment `STRIPE_WEBHOOK_KEY`",
-          "default": ""
-        },
        "stripe": {
          "type": "object",
          "description": "Stripe sdk options and credentials\n@default {\"apiKey\":\"\",\"webhookKey\":\"\"}\n@link https://docs.stripe.com/api",
@@ -59,13 +59,20 @@ runs:
          echo "TARGET_CC=clang -D_BSD_SOURCE" >> "$GITHUB_ENV"
        fi

+    - name: Prepare cache key
+      id: cache-key
+      shell: bash
+      run: |
+        shared_key="$(printf '%s' "${{ inputs.target }}-${{ inputs.package }}" | tr -c 'A-Za-z0-9_.-' '-')"
+        echo "shared-key=$shared_key" >> "$GITHUB_OUTPUT"
+
    - name: Cache cargo
      uses: Swatinem/rust-cache@v2
      if: ${{ runner.os == 'Windows' }}
      with:
        workspaces: ${{ env.DEV_DRIVE_WORKSPACE }}
        save-if: ${{ github.ref_name == 'canary' }}
-        shared-key: ${{ inputs.target }}-${{ inputs.package }}
+        shared-key: ${{ steps.cache-key.outputs.shared-key }}
      env:
        CARGO_HOME: ${{ env.DEV_DRIVE }}/.cargo
        RUSTUP_HOME: ${{ env.DEV_DRIVE }}/.rustup
@@ -75,7 +82,7 @@ runs:
      if: ${{ runner.os != 'Windows' }}
      with:
        save-if: ${{ github.ref_name == 'canary' }}
-        shared-key: ${{ inputs.target }}-${{ inputs.package }}
+        shared-key: ${{ steps.cache-key.outputs.shared-key }}

    - name: Build
      shell: bash
@@ -3,4 +3,4 @@ name: affine
 description: AFFiNE cloud chart
 type: application
 version: 0.0.0
-appVersion: "0.26.3"
+appVersion: "0.27.0"
@@ -3,7 +3,7 @@ name: doc
 description: AFFiNE doc server
 type: application
 version: 0.0.0
-appVersion: "0.26.3"
+appVersion: "0.27.0"
 dependencies:
  - name: gcloud-sql-proxy
    version: 0.0.0
@@ -3,7 +3,7 @@ name: front
 description: AFFiNE front server
 type: application
 version: 0.0.0
-appVersion: "0.26.3"
+appVersion: "0.27.0"
 dependencies:
  - name: gcloud-sql-proxy
    version: 0.0.0
@@ -3,7 +3,7 @@ name: graphql
 description: AFFiNE GraphQL server
 type: application
 version: 0.0.0
-appVersion: "0.26.3"
+appVersion: "0.27.0"
 dependencies:
  - name: gcloud-sql-proxy
    version: 0.0.0
@@ -31,7 +31,7 @@
      "groupSlug": "all-minor-patch",
      "matchUpdateTypes": ["minor", "patch"],
      "matchManagers": ["npm"],
-      "matchPackageNames": ["*", "!/^@blocksuite//", "!/oxlint/"]
+      "excludePackagePatterns": ["^@blocksuite/", "^oxlint$"]
    },
    {
      "groupName": "all non-major dependencies",
@@ -135,6 +135,159 @@ jobs:
            echo "All changes are submitted"
          fi

+  mobile-native-build-filter:
+    name: Mobile native build filter
+    runs-on: ubuntu-latest
+    outputs:
+      run-android: ${{ steps.mobile-native-filter.outputs.android }}
+      run-ios: ${{ steps.mobile-native-filter.outputs.ios }}
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: dorny/paths-filter@v3
+        id: mobile-native-filter
+        with:
+          filters: |
+            android:
+              - '.github/workflows/build-test.yml'
+              - 'packages/frontend/apps/android/**'
+              - 'packages/frontend/mobile-native/**'
+              - '.cargo/**'
+              - 'Cargo.lock'
+              - 'Cargo.toml'
+              - 'rust-toolchain*'
+            ios:
+              - '.github/workflows/build-test.yml'
+              - 'packages/frontend/apps/ios/**'
+              - 'packages/frontend/mobile-native/**'
+              - '.cargo/**'
+              - 'Cargo.lock'
+              - 'Cargo.toml'
+              - 'rust-toolchain*'
+
+  build-android-app:
+    name: Build Android app
+    if: ${{ needs.mobile-native-build-filter.outputs.run-android == 'true' }}
+    runs-on: ubuntu-latest
+    needs:
+      - mobile-native-build-filter
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: ./.github/actions/setup-node
+        with:
+          extra-flags: workspaces focus @affine/monorepo @affine-tools/cli @affine/android
+          electron-install: false
+
+      - uses: actions/setup-java@v5
+        with:
+          distribution: 'temurin'
+          java-version: '21'
+          cache: 'gradle'
+
+      - name: Setup Rust
+        uses: ./.github/actions/build-rust
+        with:
+          target: 'aarch64-linux-android'
+          package: 'affine_mobile_native'
+          no-build: 'true'
+
+      - name: Build Android web assets
+        run: yarn affine @affine/android build
+        env:
+          PUBLIC_PATH: '/'
+
+      - name: Write CI Firebase config
+        run: |
+          cat > packages/frontend/apps/android/App/app/google-services.json <<'JSON'
+          {
+            "project_info": {
+              "project_number": "1",
+              "project_id": "affine-ci",
+              "storage_bucket": "affine-ci.appspot.com"
+            },
+            "client": [
+              {
+                "client_info": {
+                  "mobilesdk_app_id": "1:1:android:0000000000000000",
+                  "android_client_info": {
+                    "package_name": "app.affine.pro"
+                  }
+                },
+                "oauth_client": [],
+                "api_key": [
+                  {
+                    "current_key": "ci-placeholder"
+                  }
+                ],
+                "services": {
+                  "appinvite_service": {
+                    "other_platform_oauth_client": []
+                  }
+                }
+              }
+            ],
+            "configuration_version": "1"
+          }
+          JSON
+
+      - name: Cap sync
+        run: yarn workspace @affine/android cap sync
+
+      - name: Build Android debug app
+        working-directory: packages/frontend/apps/android/App
+        run: ./gradlew :app:assembleCanaryDebug --no-daemon --stacktrace
+
+  build-ios-app:
+    name: Build iOS app
+    if: ${{ needs.mobile-native-build-filter.outputs.run-ios == 'true' }}
+    runs-on: macos-15
+    needs:
+      - mobile-native-build-filter
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: ./.github/actions/setup-node
+        with:
+          extra-flags: workspaces focus @affine/monorepo @affine-tools/cli @affine/ios
+          electron-install: false
+          hard-link-nm: false
+
+      - uses: maxim-lobanov/setup-xcode@v1
+        with:
+          xcode-version: 26.2
+
+      - name: Setup Rust
+        uses: ./.github/actions/build-rust
+        with:
+          target: 'aarch64-apple-ios-sim'
+          package: 'affine_mobile_native'
+          no-build: 'true'
+
+      - name: Build iOS web assets
+        run: yarn affine @affine/ios build
+        env:
+          PUBLIC_PATH: '/'
+
+      - name: Cap sync
+        run: yarn workspace @affine/ios sync
+
+      - name: Build iOS simulator app
+        run: |
+          xcodebuild \
+            -workspace packages/frontend/apps/ios/App/App.xcworkspace \
+            -scheme App \
+            -configuration Debug \
+            -sdk iphonesimulator \
+            -destination 'generic/platform=iOS Simulator' \
+            ARCHS=arm64 \
+            ONLY_ACTIVE_ARCH=YES \
+            CODE_SIGNING_ALLOWED=NO \
+            CODE_SIGNING_REQUIRED=NO \
+            build
+
  rust-test-filter:
    name: Rust test filter
    runs-on: ubuntu-latest
@@ -795,99 +948,6 @@ jobs:
          name: affine
          fail_ci_if_error: false

-  miri:
-    name: miri code check
-    if: ${{ needs.rust-test-filter.outputs.run-rust == 'true' }}
-    runs-on: ubuntu-latest
-    needs:
-      - rust-test-filter
-    env:
-      RUST_BACKTRACE: full
-      CARGO_TERM_COLOR: always
-      MIRIFLAGS: -Zmiri-backtrace=full -Zmiri-tree-borrows
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Rust
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          toolchain: nightly
-          components: miri
-      - name: Install latest nextest release
-        uses: taiki-e/install-action@v2
-        with:
-          tool: nextest@0.9.98
-
-      - name: Miri Code Check
-        continue-on-error: true
-        run: |
-          cargo +nightly miri nextest run -p y-octo -j4
-
-  loom:
-    name: loom thread test
-    if: ${{ needs.rust-test-filter.outputs.run-rust == 'true' }}
-    runs-on: ubuntu-latest
-    needs:
-      - rust-test-filter
-    env:
-      RUSTFLAGS: --cfg loom
-      RUST_BACKTRACE: full
-      CARGO_TERM_COLOR: always
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Rust
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          toolchain: stable
-      - name: Install latest nextest release
-        uses: taiki-e/install-action@v2
-        with:
-          tool: nextest@0.9.98
-
-      - name: Loom Thread Test
-        run: |
-          cargo nextest run -p y-octo --lib
-
-  fuzzing:
-    name: fuzzing
-    if: ${{ needs.rust-test-filter.outputs.run-rust == 'true' }}
-    runs-on: ubuntu-latest
-    needs:
-      - rust-test-filter
-    env:
-      CARGO_TERM_COLOR: always
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Rust
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          toolchain: nightly
-
-      - name: fuzzing
-        working-directory: ./packages/common/y-octo/utils
-        run: |
-          cargo install cargo-fuzz
-          cargo +nightly fuzz run apply_update -- -max_total_time=30
-          cargo +nightly fuzz run codec_doc_any_struct -- -max_total_time=30
-          cargo +nightly fuzz run codec_doc_any -- -max_total_time=30
-          cargo +nightly fuzz run decode_bytes -- -max_total_time=30
-          cargo +nightly fuzz run i32_decode -- -max_total_time=30
-          cargo +nightly fuzz run i32_encode -- -max_total_time=30
-          cargo +nightly fuzz run ins_del_text -- -max_total_time=30
-          cargo +nightly fuzz run sync_message -- -max_total_time=30
-          cargo +nightly fuzz run u64_decode -- -max_total_time=30
-          cargo +nightly fuzz run u64_encode -- -max_total_time=30
-          cargo +nightly fuzz run apply_update -- -max_total_time=30
-
-      - name: upload fuzz artifacts
-        if: ${{ failure() }}
-        uses: actions/upload-artifact@v4
-        with:
-          name: fuzz-artifact
-          path: packages/common/y-octo/utils/fuzz/artifacts/**/*
-
  rust-test:
    name: Run native tests
    if: ${{ needs.rust-test-filter.outputs.run-rust == 'true' }}
@@ -1328,6 +1388,9 @@ jobs:
      - analyze
      - lint
      - typecheck
+      - mobile-native-build-filter
+      - build-android-app
+      - build-ios-app
      - lint-rust
      - check-git-status
      - check-yarn-binary
@@ -1342,9 +1405,6 @@ jobs:
      - build-server-native
      - build-electron-renderer
      - native-unit-test
-      - miri
-      - loom
-      - fuzzing
      - server-test
      - server-e2e-test
      - rust-test
@@ -101,7 +101,7 @@ jobs:

      - name: Signing By Apple Developer ID
        if: ${{ inputs.platform == 'darwin' && inputs.apple_codesign }}
-        uses: apple-actions/import-codesign-certs@v6
+        uses: apple-actions/import-codesign-certs@v7
        with:
          p12-file-base64: ${{ secrets.CERTIFICATES_P12 }}
          p12-password: ${{ secrets.CERTIFICATES_P12_PASSWORD }}
@@ -424,12 +424,10 @@ jobs:
    if: >-
      ${{
        always() &&
-        inputs.desktop_macos &&
-        inputs.desktop_linux &&
-        inputs.desktop_windows &&
+        (inputs.desktop_macos || inputs.desktop_linux || inputs.desktop_windows) &&
        needs.before-make.result == 'success' &&
-        needs.make-distribution-macos.result == 'success' &&
-        needs.make-distribution-linux.result == 'success' &&
+        (!inputs.desktop_macos || needs.make-distribution-macos.result == 'success') &&
+        (!inputs.desktop_linux || needs.make-distribution-linux.result == 'success') &&
        (
          !inputs.require-windows-signing ||
          (
@@ -457,11 +455,13 @@ jobs:
    steps:
      - uses: actions/checkout@v6
      - name: Download Artifacts (macos-x64)
+        if: ${{ inputs.desktop_macos }}
        uses: actions/download-artifact@v4
        with:
          name: affine-darwin-x64-builds
          path: ./release
      - name: Download Artifacts (macos-arm64)
+        if: ${{ inputs.desktop_macos }}
        uses: actions/download-artifact@v4
        with:
          name: affine-darwin-arm64-builds
@@ -479,6 +479,7 @@ jobs:
          name: affine-win32-arm64-builds
          path: ./release
      - name: Download Artifacts (linux-x64)
+        if: ${{ inputs.desktop_linux }}
        uses: actions/download-artifact@v4
        with:
          name: affine-linux-x64-builds
@@ -109,12 +109,15 @@ jobs:
      - uses: maxim-lobanov/setup-xcode@v1
        with:
          xcode-version: 26.2
+      - uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: '3.3'
      - name: Install Swiftformat
        run: brew install swiftformat
      - name: Cap sync
        run: yarn workspace @affine/ios sync
      - name: Signing By Apple Developer ID
-        uses: apple-actions/import-codesign-certs@v6
+        uses: apple-actions/import-codesign-certs@v7
        id: import-codesign-certs
        with:
          p12-file-base64: ${{ secrets.CERTIFICATES_P12_MOBILE }}
@@ -131,8 +134,10 @@ jobs:
          printf '%s' "$BUILD_PROVISION_PROFILE" | base64 --decode -o "$PP_PATH"
          mkdir -p "$HOME/Library/MobileDevice/Provisioning Profiles"
          cp "$PP_PATH" "$HOME/Library/MobileDevice/Provisioning Profiles"
-          fastlane beta
+          bundle install
+          bundle exec fastlane beta
        env:
+          BUNDLE_PATH: vendor/bundle
          BUILD_TARGET: distribution
          BUILD_PROVISION_PROFILE: ${{ secrets.BUILD_PROVISION_PROFILE }}
          PP_PATH: ${{ runner.temp }}/build_pp.mobileprovision
@@ -72,7 +72,7 @@ jobs:
    steps:
      - name: Decide whether to release
        id: decide
-        uses: actions/github-script@v8
+        uses: actions/github-script@v9
        with:
          script: |
            const buildType = '${{ needs.prepare.outputs.BUILD_TYPE }}'
@@ -195,7 +195,7 @@ jobs:
      desktop_macos: ${{ github.event_name != 'workflow_dispatch' || inputs.desktop_macos }}
      desktop_windows: ${{ github.event_name != 'workflow_dispatch' || inputs.desktop_windows }}
      desktop_linux: ${{ github.event_name != 'workflow_dispatch' || inputs.desktop_linux }}
-      require-windows-signing: ${{ needs.prepare.outputs.BUILD_TYPE == 'beta' || needs.prepare.outputs.BUILD_TYPE == 'stable' || (github.event_name == 'workflow_dispatch' && inputs.desktop_windows) }}
+      require-windows-signing: ${{ needs.prepare.outputs.BUILD_TYPE == 'stable' || (github.event_name == 'workflow_dispatch' && inputs.desktop_windows) }}

  mobile:
    name: Release Mobile
@@ -6,6 +6,7 @@
 !.yarn/releases
 !.yarn/sdks
 .yarn/versions
+.corepack-bin

 # compiled output
 *dist
@@ -49,6 +50,8 @@ testem.log
 tsconfig.tsbuildinfo
 .context
 /*.md
+.codex
+.cursor

 # System Files
 .DS_Store
@@ -93,3 +96,9 @@ af.cmd

 # playwright
 storageState.json
+/.understand-anything
+
+# local test/browser artifacts
+/.playwright-browsers/
+**/.vitest-attachments/
+/blocksuite/framework/std/src/__tests__/gfx/__screenshots__/
@@ -1 +1 @@
-22.22.2
+22.23.0
@@ -24,6 +24,7 @@
    ".git",
    ".vscode",
    ".context",
+    ".codex",
    ".yarnrc.yml",
    ".docker",
    "**/.storybook",
@@ -5,6 +5,7 @@
 .git
 .vscode
 .context
+.codex
 .yarnrc.yml
 .docker
 **/.storybook
@@ -2,8 +2,6 @@
 members = [
  "./packages/backend/native",
  "./packages/common/native",
-  "./packages/common/y-octo/core",
-  "./packages/common/y-octo/utils",
  "./packages/frontend/mobile-native",
  "./packages/frontend/native",
  "./packages/frontend/native/nbstore",
@@ -16,19 +14,15 @@ resolver = "3"
  edition = "2024"

  [workspace.dependencies]
+  aes-gcm = "0.10"
  affine_common = { path = "./packages/common/native" }
  affine_nbstore = { path = "./packages/frontend/native/nbstore" }
-  ahash = "0.8"
  anyhow = "1"
-  arbitrary = { version = "1.3", features = ["derive"] }
  assert-json-diff = "2.0"
-  async-lock = { version = "3.4.0", features = ["loom"] }
+  base64 = "0.22.1"
  base64-simd = "0.8"
-  bitvec = "1.0"
  block2 = "0.6"
-  byteorder = "1.5"
  chrono = "0.4"
-  clap = { version = "4.4", features = ["derive"] }
  core-foundation = "0.10"
  coreaudio-rs = "0.12"
  cpal = "0.15"
@@ -36,9 +30,10 @@ resolver = "3"
  criterion2 = { version = "3", default-features = false }
  crossbeam-channel = "0.5"
  dispatch2 = "0.3"
-  docx-parser = { git = "https://github.com/toeverything/docx-parser", rev = "380beea" }
+  doc_extractor = "0.1.0"
  dotenvy = "0.15"
  file-format = { version = "0.28", features = ["reader"] }
+  hex = "0.4"
  homedir = "0.3"
  image = { version = "0.25.9", default-features = false, features = [
    "bmp",
@@ -48,15 +43,10 @@ resolver = "3"
    "webp",
  ] }
  infer = { version = "0.19.0" }
-  lasso = { version = "0.7", features = ["multi-threaded"] }
-  lib0 = { version = "0.16", features = ["lib0-serde"] }
  libc = "0.2"
-  libwebp-sys = "0.14.2"
  little_exif = "0.6.23"
  llm_adapter = { version = "0.2", default-features = false }
  llm_runtime = { version = "0.2", default-features = false }
-  log = "0.4"
-  loom = { version = "0.7", features = ["checkpoint"] }
  lru = "0.16"
  matroska = "0.30"
  memory-indexer = "0.3.1"
@@ -73,59 +63,33 @@ resolver = "3"
  ] }
  napi-build = { version = "2" }
  napi-derive = { version = "3.4" }
-  nom = "8"
-  notify = { version = "8", features = ["serde"] }
  objc2 = "0.6"
  objc2-foundation = "0.3"
  ogg = "0.9"
  once_cell = "1"
-  ordered-float = "5"
-  parking_lot = "0.12"
-  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"
-  proptest-derive = "0.5"
+  p256 = { version = "0.13", features = ["ecdsa", "pem"] }
  pulldown-cmark = "0.13"
  rand = "0.9"
-  rand_chacha = "0.9"
-  rand_distr = "0.5"
  rayon = "1.10"
-  readability = { version = "0.3.0", default-features = false }
-  regex = "1.10"
  rubato = "0.16"
+  safefetch = "0.1.0"
  schemars = "0.8"
  screencapturekit = "0.3"
  serde = "1"
  serde_json = "1"
-  sha3 = "0.10"
-  smol_str = "0.3"
+  sha2 = "0.11"
+  sha3 = "0.11"
  sqlx = { version = "0.8", default-features = false, features = [
    "chrono",
    "macros",
    "migrate",
    "runtime-tokio",
    "sqlite",
-    "tls-rustls",
  ] }
-  strum_macros = "0.27.0"
  symphonia = { version = "0.5", features = ["all", "opt-simd"] }
-  text-splitter = "0.27"
  thiserror = "2"
  tiktoken-rs = "0.7"
  tokio = "1.45"
-  tree-sitter = { version = "0.25" }
-  tree-sitter-c = { version = "0.24" }
-  tree-sitter-c-sharp = { version = "0.23" }
-  tree-sitter-cpp = { version = "0.23" }
-  tree-sitter-go = { version = "0.23" }
-  tree-sitter-java = { version = "0.23" }
-  tree-sitter-javascript = { version = "0.23" }
-  tree-sitter-kotlin-ng = { version = "1.1" }
-  tree-sitter-python = { version = "0.23" }
-  tree-sitter-rust = { version = "0.24" }
-  tree-sitter-scala = { version = "0.24" }
-  tree-sitter-typescript = { version = "0.23" }
  typst = "0.14.2"
  typst-as-lib = { version = "0.15.4", default-features = false, features = [
    "packages",
@@ -151,9 +115,7 @@ resolver = "3"
    "Win32_UI_Shell_PropertiesSystem",
  ] }
  windows-core = { version = "0.61" }
-  y-octo = { path = "./packages/common/y-octo/core" }
-  y-sync = { version = "0.4" }
-  yrs = "0.23.0"
+  y-octo = "0.0.3"

 [profile.dev.package.sqlx-macros]
 opt-level = 3
@@ -1,170 +1,225 @@
-# AFFiNE
+<div align="center">
+
+<h1 style="border-bottom: none">
+    <b><a href="https://affine.pro">AFFiNE.Pro</a></b><br />
+    Write, Draw and Plan All at Once
+    <br>
+</h1>
+<a href="https://affine.pro/download">
+    <img alt="affine logo" src="https://cdn.affine.pro/Github_hero_image2.png" style="width: 100%">
+</a>
+<br/>
+<p align="center">
+  A privacy-focused, local-first, open-source, and ready-to-use alternative for Notion & Miro. <br />
+  One hyper-fused platform for wildly creative minds.
+</p>
+
+<br/>
+
+<br/>
+<a href="https://www.producthunt.com/posts/affine-3?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-affine&#0045;3" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=440671&theme=light" alt="AFFiNE - One&#0032;app&#0032;for&#0032;all&#0032;&#0045;&#0032;Where&#0032;Notion&#0032;meets&#0032;Miro | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+<br/>
+<br/>

 <div align="center">
-  <p><strong>The open-source, multimodal AI knowledge base for individuals and teams.</strong></p>
+    <a href="https://affine.pro">Home Page</a> |
+    <a href="https://affine.pro/redirect/discord">Discord</a> |
+    <a href="https://app.affine.pro">Live Demo</a> |
+    <a href="https://affine.pro/blog/">Blog</a> |
+    <a href="https://docs.affine.pro/">Documentation</a>
+</div>
+<br/>

-  <a href="https://affine.pro/download">
-    <img alt="AFFiNE — open-source, multimodal AI knowledge base" src="https://cdn.affine.pro/Github_hero_image2.png" style="width: 100%">
-  </a>
+[![Releases](https://img.shields.io/github/downloads/toeverything/AFFiNE/total)](https://github.com/toeverything/AFFiNE/releases/latest)
+[![All Contributors][all-contributors-badge]](#contributors)
+[![TypeScript-version-icon]](https://www.typescriptlang.org/)

-  <p>
-    <a href="https://github.com/toeverything/AFFiNE/releases/latest"><img alt="GitHub release downloads" src="https://img.shields.io/github/downloads/toeverything/AFFiNE/total?style=flat&color=brightgreen"></a>
-    <a href="https://github.com/toeverything/AFFiNE/graphs/contributors"><img alt="Contributors" src="https://img.shields.io/github/contributors/toeverything/AFFiNE?style=flat"></a>
-    <a href="./LICENSE"><img alt="License: MIT + EE" src="https://img.shields.io/badge/license-MIT%20%2B%20EE-blue?style=flat"></a>
-    <a href="https://github.com/sponsors/toeverything"><img alt="Sponsor AFFiNE" src="https://img.shields.io/badge/sponsor-GitHub%20Sponsors-ea4aaa?style=flat"></a>
-  </p>
-
-  <p>
-    <a href="https://app.affine.pro"><strong>Try AFFiNE</strong></a> ·
-    <a href="https://docs.affine.pro/self-host-affine"><strong>Self-host</strong></a> ·
-    <a href="https://github.com/toeverything/AFFiNE"><strong>Star on GitHub</strong></a>
-  </p>
-
-  <p>
-    <a href="https://affine.pro/download">Download</a> ·
-    <a href="https://docs.affine.pro">Docs</a> ·
-    <a href="https://affine.pro/redirect/discord">Discord</a> ·
-    <a href="https://github.com/toeverything/AFFiNE/discussions">Discussions</a>
-  </p>
 </div>

-> **TL;DR.** Docs, whiteboards, databases, files, collaboration, and AI context in one local-first workspace — synced across Web, Windows, macOS, Linux, Android, and iOS; self-hostable; BYOK Beta for eligible workspaces; and coming-soon programmable workflows for Claude Code and other agentic tools.
+<br />
+<div align="center">
+<em>Docs, canvas and tables are hyper-merged with AFFiNE - just like the word affine (əˈfʌɪn | a-fine).</em>
+</div>
+<br />

-## Choose your path
+<div align="center">
+<img src="https://github.com/toeverything/AFFiNE/assets/79301703/49a426bb-8d2b-4216-891a-fa5993642253" style="width: 100%"/>
+</div>

- Want a multimodal AI knowledge base? Try AFFiNE.
- Want an open-source Notion + Miro alternative? Use AFFiNE's docs, canvas, and databases together.
- Want private AI workflows? Use AFFiNE AI with BYOK Beta or self-host AFFiNE.
- Using Claude Code or AI agents? Track the coming-soon programmable knowledge workflows.
- Building collaborative editors? Explore BlockSuite and y-octo.
- Evaluating for a team? Start with Cloud, then choose self-host or enterprise controls.
+## Getting started & staying tuned with us.

-## What is AFFiNE?
+Star us, and you will receive all release notifications from GitHub without any delay!

-AFFiNE is an open-source, multimodal AI knowledge base for individuals and teams. It combines documents, whiteboards, databases, files, tasks, collaboration, and AI context in one block-based workspace. It syncs across Web, Windows, macOS, Linux, Android, and iOS, while giving users the flexibility of canvas thinking, the structure of documents and databases, and the control of local-first and self-hostable knowledge infrastructure.
+<img src="https://user-images.githubusercontent.com/79301703/230891830-0110681e-8c7e-483b-b6d9-9e42b291b9ef.gif" style="width: 100%"/>

-## Why AFFiNE is different
+## What is AFFiNE

- Docs, whiteboards, databases, and files share the same block-based workspace.
- Multimodal AI workflows can use supported workspace context across docs, canvas, attachments, files, and structured knowledge where available.
- Local-first design keeps your workspace usable and synced across Web, Windows, macOS, Linux, Android, and iOS.
- Self-hosting is a first-class deployment path, not an afterthought.
- Bring-Your-Own-Key (Beta) gives eligible workspaces more control over AI provider choice, cost, and policy.
+[AFFiNE](https://affine.pro) is an open-source, all-in-one workspace and an operating system for all the building blocks that assemble your knowledge base and much more -- wiki, knowledge management, presentation and digital assets. It's a better alternative to Notion and Miro.

-## Key features
+## Features

- Docs, whiteboards, databases, and files in one workspace.
- Multimodal AI workspace context across docs, canvas, images, attachments, databases, and structured knowledge where supported.
- **Bring Your Own Key (Beta).** Route AFFiNE AI through your own provider keys for eligible workspaces, with supported OpenAI, Anthropic, Gemini, and FAL provider routes where configured.
- Local-first storage and real-time collaboration.
- Cross-platform sync: Web, Windows, macOS, Linux, Android, and iOS.
- Self-hosting and private deployment.
- Coming-soon programmable knowledge workflows for Claude Code and agentic tools.
- Import/export and knowledge portability.
+**A true canvas for blocks in any form. Docs and whiteboard are now fully merged.**

-## Why developers care
+- Many editor apps claim to be a canvas for productivity, but AFFiNE is one of the very few which allows you to put any building block on an edgeless canvas -- rich text, sticky notes, any embedded web pages, multi-view databases, linked pages, shapes and even slides. We have it all.

- Open-source monorepo with a first-class self-hosting path.
- Local-first storage with both browser (IndexedDB) and native (SQLite) clients via [`nbstore`](./packages/common/nbstore).
- Block-based editor foundation via [`BlockSuite`](./blocksuite).
- CRDT-based real-time collaboration on top of Yjs and [`y-octo`](./packages/common/y-octo).
- NestJS + GraphQL + Prisma backend powering sync, cloud, self-hosting, and AI copilot.
- Cross-platform engineering and sync: Web, Electron desktop for Windows/macOS/Linux, plus Android and iOS clients.
- Workspace-aware AI plumbing with BYOK Beta, designed to extend toward programmable, agent-operable knowledge workflows.
+**Multimodal AI partner ready to kick in any work**

-## Coming soon: Claude Code-ready programmable knowledge workflows
+- Write up professional work report? Turn an outline into expressive and presentable slides? Summary an article into a well-structured mindmap? Sorting your job plan and backlog for tasks? Or... draw and code prototype apps and web pages directly all with one prompt? With you, [AFFiNE AI](https://affine.pro/ai) pushes your creativity to the edge of your imagination, just like [Canvas AI](https://affine.pro/blog/best-canvas-ai) to generate mind map for brainstorming.

-**Coming soon: Claude Code-ready programmable knowledge workflows.** We are making AFFiNE operable from terminal scripts and agentic coding tools such as Claude Code. The upcoming CLI-like mode is designed to let AI agents read, search, create, update, import, export, and organize your AFFiNE knowledge base from your computer — turning AFFiNE into a programmable, multimodal knowledge layer for personal and team workflows.
+**Local-first & Real-time collaborative**

-This is an actively building priority roadmap capability, not a shipped CLI feature yet. We do not publish commands here until they are available and verified.
+- We love the idea of local-first that you always own your data on your disk, in spite of the cloud. Furthermore, AFFiNE supports real-time sync and collaborations on web and cross-platform clients.

-## Run AFFiNE your way
+**Self-host & Shape your own AFFiNE**

- **Cloud** — Fastest way to start. Best for individuals and teams that want zero setup, automatic updates, and managed AFFiNE AI. → [app.affine.pro](https://app.affine.pro)
- **Desktop & Mobile** — Local-first daily workspace synced across Web, Windows, macOS, Linux, Android, and iOS. → [affine.pro/download](https://affine.pro/download)
- **Self-host** — Own your data and run AFFiNE in your infrastructure, with BYOK Beta for eligible self-hosted AI workflows where supported. → [docs.affine.pro/self-host-affine](https://docs.affine.pro/self-host-affine)
- **Team & Enterprise** — Admin, policy, security, and support, with workspace-level BYOK on eligible plans and priority-roadmap programmable workflows for agentic tools. → [affine.pro/pricing](https://affine.pro/pricing)
+- You have the freedom to manage, self-host, fork and build your own AFFiNE. Plugin community and third-party blocks are coming soon. More tractions on [Blocksuite](https://blocksuite.io). Check there to learn how to [self-host AFFiNE](https://docs.affine.pro/self-host-affine).

-## Get started
+## Acknowledgement

- **Try AFFiNE online:** [app.affine.pro](https://app.affine.pro)
- **Download apps:** [affine.pro/download](https://affine.pro/download)
- **Self-host with Docker:** [Self-host AFFiNE](https://docs.affine.pro/self-host-affine)
- **Build from source:** [docs/BUILDING.md](./docs/BUILDING.md)
- **Join the community:** [Discord](https://affine.pro/redirect/discord) or [GitHub Discussions](https://github.com/toeverything/AFFiNE/discussions)
+“We shape our tools and thereafter our tools shape us”. A lot of pioneers have inspired us along the way, e.g.:

-## Self-hosting
+- Quip & Notion with their great concept of “everything is a block”
+- Trello with their Kanban
+- Airtable & Miro with their no-code programmable datasheets
+- Miro & Whimiscal with their edgeless visual whiteboard
+- Remote & Capacities with their object-based tag system

-Want full control? Start with the official Docker-based self-hosting guide. The self-host stack uses the AFFiNE server image, Postgres/pgvector, Redis, and a migration job.
+There is a large overlap of their atomic “building blocks” between these apps. They are not open source, nor do they have a plugin system like Vscode for contributors to customize. We want to have something that contains all the features we love and also goes one step even further.

- Read the official guide: [Self-host AFFiNE](https://docs.affine.pro/self-host-affine)
- Inspect the Docker Compose stack: [`.docker/selfhost/compose.yml`](./.docker/selfhost/compose.yml)
- Review licensing before production deployment: [LICENSE](./LICENSE) and [packages/backend/server/LICENSE](./packages/backend/server/LICENSE)
+Thanks for checking us out, we appreciate your interest and sincerely hope that AFFiNE resonates with you! 🎵 Checking https://affine.pro/ for more details ions.
+
+## Contributing
+
+| Bug Reports                                                                                                                                         | Feature Requests                                                                                                                                               | Questions/Discussions                                                         | AFFiNE Community                                                  |
+| --------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ----------------------------------------------------------------- |
+| [Create a bug report](https://github.com/toeverything/AFFiNE/issues/new?assignees=&labels=bug%2Cproduct-review&template=BUG-REPORT.yml&title=TITLE) | [Submit a feature request](https://github.com/toeverything/AFFiNE/issues/new?assignees=&labels=feat%2Cproduct-review&template=FEATURE-REQUEST.yml&title=TITLE) | [Check GitHub Discussion](https://github.com/toeverything/AFFiNE/discussions) | [Visit the AFFiNE's Discord](https://affine.pro/redirect/discord) |
+| Something isn't working as expected                                                                                                                 | An idea for a new feature, or improvements                                                                                                                     | Discuss and ask questions                                                     | A place to ask, learn and engage with others                      |
+
+Calling all developers, testers, tech writers and more! Contributions of all types are more than welcome, you can read more in [docs/types-of-contributions.md](docs/types-of-contributions.md). If you are interested in contributing code, read our [docs/CONTRIBUTING.md](docs/CONTRIBUTING.md) and feel free to check out our GitHub issues to get stuck in to show us what you’re made of.
+
+**Before you start contributing, please make sure you have read and accepted our [Contributor License Agreement]. To indicate your agreement, simply edit this file and submit a pull request.**
+
+For **bug reports**, **feature requests** and other **suggestions** you can also [create a new issue](https://github.com/toeverything/AFFiNE/issues/new/choose) and choose the most appropriate template for your feedback.
+
+For **translation** and **language support** you can visit our [Discord](https://affine.pro/redirect/discord).
+
+If you have questions, you are welcome to contact us. One of the best places to get more info and learn more is in the [Discord](https://affine.pro/redirect/discord) where you can engage with other like-minded individuals.
+
+## Templates
+
+AFFiNE now provides pre-built [templates](https://affine.pro/templates) from our team. Following are the Top 10 most popular templates among AFFiNE users,if you want to contribute, you can contribute your own template so other people can use it too.
+
+- [vision board template](https://affine.pro/templates/category-vision-board-template)
+- [one pager template](https://affine.pro/templates/category-one-pager-template-free)
+- [sample lesson plan math template](https://affine.pro/templates/sample-lesson-plan-math-template)
+- [grr lesson plan template free](https://affine.pro/templates/grr-lesson-plan-template-free)
+- [free editable lesson plan template for pre k](https://affine.pro/templates/free-editable-lesson-plan-template-for-pre-k)
+- [high note collection planners](https://affine.pro/templates/high-note-collection-planners)
+- [digital planner](https://affine.pro/templates/category-digital-planner)
+- [ADHD Planner](https://affine.pro/templates/adhd-planner)
+- [Reading Log](https://affine.pro/templates/reading-log)
+- [Cornell Notes Template](https://affine.pro/templates/category-cornell-notes-template)
+
+## Blog
+
+Welcome to the AFFiNE blog section! Here, you’ll find the latest insights, tips, and guides on how to maximize your experience with AFFiNE and AFFiNE AI, the leading Canvas AI tool for flexible note-taking and creative organization.
+
+- [vision board template](https://affine.pro/blog/8-free-printable-vision-board-templates-examples-2023)
+- [ai homework helper](https://affine.pro/blog/ai-homework-helper)
+- [vision board maker](https://affine.pro/blog/vision-board-maker)
+- [itinerary template](https://affine.pro/blog/free-customized-travel-itinerary-planner-templates)
+- [one pager template](https://affine.pro/blog/top-12-one-pager-examples-how-to-create-your-own)
+- [cornell notes template](https://affine.pro/blog/the-cornell-notes-template-and-system-learning-tips)
+- [swot chart template](https://affine.pro/blog/top-10-free-editable-swot-analysis-template-examples)
+- [apps like luna task](https://affine.pro/blog/apps-like-luna-task)
+- [note taking ai from rough notes to mind map](https://affine.pro/blog/dynamic-AI-notes)
+- [canvas ai](https://affine.pro/blog/best-canvas-ai)
+- [one pager](https://affine.pro/blog/top-12-one-pager-examples-how-to-create-your-own)
+- [SOP Template](https://affine.pro/blog/how-to-write-sop-step-by-step-guide-5-best-free-tools-templates)
+- [Chore Chart](https://affine.pro/blog/10-best-free-chore-chart-templates-kids-adults)
+
+## Ecosystem
+
+| Name                                             |                            |                                                                                                                                         |
+| ------------------------------------------------ | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| [@affine/component](packages/frontend/component) | AFFiNE Component Resources | ![](https://img.shields.io/codecov/c/github/toeverything/affine?style=flat-square)                                                      |
+| [@toeverything/theme](packages/common/theme)     | AFFiNE theme               | [![](https://img.shields.io/npm/dm/@toeverything/theme?style=flat-square&color=eee)](https://www.npmjs.com/package/@toeverything/theme) |
+
+## Upstreams
+
+We would also like to give thanks to open-source projects that make AFFiNE possible:
+
+- [Blocksuite](https://github.com/toeverything/BlockSuite) - 💠 BlockSuite is the open-source collaborative editor project behind AFFiNE.
+- [y-octo](https://github.com/y-crdt/y-octo) - 🐙 y-octo is a native, high-performance, thread-safe YJS CRDT implementation, serving as the core engine enabling the AFFiNE Client/Server to achieve "local-first" functionality.
+- [OctoBase](https://github.com/toeverything/OctoBase) - 🐙 OctoBase is the open-source database behind AFFiNE, local-first, yet collaborative. A light-weight, scalable, data engine written in Rust.
+
+- [yjs](https://github.com/yjs/yjs) - Fundamental support of CRDTs for our implementation on state management and data sync on web.
+- [electron](https://github.com/electron/electron) - Build cross-platform desktop apps with JavaScript, HTML, and CSS.
+- [React](https://github.com/facebook/react) - The library for web and native user interfaces.
+- [napi-rs](https://github.com/napi-rs/napi-rs) - A framework for building compiled Node.js add-ons in Rust via Node-API.
+- [Jotai](https://github.com/pmndrs/jotai) - Primitive and flexible state management for React.
+- [async-call-rpc](https://github.com/Jack-Works/async-call-rpc) - A lightweight JSON RPC client & server.
+- [Vite](https://github.com/vitejs/vite) - Next generation frontend tooling.
+- Other upstream [dependencies](https://github.com/toeverything/AFFiNE/network/dependencies).
+
+Thanks a lot to the community for providing such powerful and simple libraries, so that we can focus more on the implementation of the product logic, and we hope that in the future our projects will also provide a more easy-to-use knowledge base for everyone.
+
+## Contributors
+
+We would like to express our gratitude to all the individuals who have already contributed to AFFiNE! If you have any AFFiNE-related project, documentation, tool or template, please feel free to contribute it by submitting a pull request to our curated list on GitHub: [awesome-affine](https://github.com/toeverything/awesome-affine).
+
+<a href="https://github.com/toeverything/affine/graphs/contributors">
+  <img alt="contributors" src="https://opencollective.com/affine/contributors.svg?width=890&button=false" />
+</a>
+
+## Self-Host
+
+Begin with Docker to deploy your own feature-rich, unrestricted version of AFFiNE. Our team is diligently updating to the latest version. For more information on how to self-host AFFiNE, please refer to our [documentation](https://docs.affine.pro/self-host-affine).

 [![Run on Sealos](https://sealos.io/Deploy-on-Sealos.svg)](https://sealos.io/products/app-store/affine)

 [![Run on ClawCloud](https://raw.githubusercontent.com/ClawCloud/Run-Template/refs/heads/main/Run-on-ClawCloud.svg)](https://template.run.claw.cloud/?openapp=system-fastdeploy%3FtemplateName%3Daffine)

-## Development
+## Feature Request

-Prerequisites: Node.js, Yarn 4, and Rust.
+For feature requests, please see [discussions](https://github.com/toeverything/AFFiNE/discussions/categories/ideas).

- Build from source: [docs/BUILDING.md](./docs/BUILDING.md)
- Desktop build: [docs/building-desktop-client-app.md](./docs/building-desktop-client-app.md)
- Server development: [docs/developing-server.md](./docs/developing-server.md)
- Monorepo CLI for contributors: [tools/cli/README.md](./tools/cli/README.md)
+## Building

-### Open in GitHub Codespaces
+### Codespaces

-Click the green **Code** button on the GitHub repo main page and select **Create codespace on canary**. This will open a new Codespace with the AFFiNE monorepo cloned and ready to go.
+From the GitHub repo main page, click the green "Code" button and select "Create codespace on master". This will open a new Codespace with the (supposedly auto-forked
+AFFiNE repo cloned, built, and ready to go).

-## Contributing, community, and security
+### Local

-We welcome contributions from developers, testers, designers, technical writers, template creators, and community members.
+See [BUILDING.md] for instructions on how to build AFFiNE from source code.

- Bug reports: [create a bug report](https://github.com/toeverything/AFFiNE/issues/new?assignees=&labels=bug%2Cproduct-review&template=BUG-REPORT.yml&title=TITLE)
- Feature requests and product ideas: [GitHub Discussions](https://github.com/toeverything/AFFiNE/discussions)
- Code contributions: [docs/CONTRIBUTING.md](./docs/CONTRIBUTING.md)
- Contribution types: [docs/types-of-contributions.md](./docs/types-of-contributions.md)
- Code of Conduct: [docs/CODE_OF_CONDUCT.md](./docs/CODE_OF_CONDUCT.md)
- Contributor License Agreement: [.github/CLA.md](./.github/CLA.md)
- Security: [SECURITY.md](./SECURITY.md)
- Sponsor AFFiNE: [GitHub Sponsors](https://github.com/sponsors/toeverything)
+## Contributing

-Translations are welcome. Join [Discord](https://affine.pro/redirect/discord) or open a discussion if you want to help localize AFFiNE.
-
-## Resources
-
- [Documentation](https://docs.affine.pro)
- [Templates](https://affine.pro/templates)
- [Blog](https://affine.pro/blog)
- [Roadmap & Discussions](https://github.com/toeverything/AFFiNE/discussions)
- [Awesome AFFiNE](https://github.com/toeverything/awesome-affine)
+We welcome contributions from everyone.
+See [docs/contributing/tutorial.md](./docs/contributing/tutorial.md) for details.

 ## License

-AFFiNE uses mixed licensing. Most source code outside `packages/backend` and `packages/common/native` is MIT-licensed; backend-related code is governed by the AFFiNE EE License. Please review [LICENSE](./LICENSE) and [packages/backend/server/LICENSE](./packages/backend/server/LICENSE) before production self-host deployment.
+### Editions

-## Upstreams
+- AFFiNE Community Edition (CE) is the current available version, it's free for self-host under the MIT license.

-We would also like to thank the open-source projects that make AFFiNE possible:
+- AFFiNE Enterprise Edition (EE) is yet to be published, it will have more advanced features and enterprise-oriented offerings, including but not exclusive to rebranding and SSO, advanced admin and audit, etc., you may refer to https://affine.pro/pricing for more information

- [BlockSuite](https://github.com/toeverything/BlockSuite) — the open-source collaborative editor project behind AFFiNE.
- [y-octo](https://github.com/y-crdt/y-octo) — a native, high-performance, thread-safe Yjs CRDT implementation.
- [OctoBase](https://github.com/toeverything/OctoBase) — a local-first collaborative data engine written in Rust.
- [Yjs](https://github.com/yjs/yjs) — CRDT support for state management and data sync on the web.
- [Electron](https://github.com/electron/electron) — cross-platform desktop apps with JavaScript, HTML, and CSS.
+See [LICENSE] for details.

-## Acknowledgements
-
-> "We shape our tools and thereafter our tools shape us."
-
-AFFiNE stands on the shoulders of pioneers like Notion, Miro, Whimsical, Airtable, Trello, Quip, and many others — projects that taught us what blocks, canvases, and structured knowledge can be. Thanks for checking us out; we appreciate your interest. See [Upstreams](#upstreams) and [Contributors](#contributors) for the full list of projects and people behind AFFiNE.
-
-## Contributors
-
-We would like to express our gratitude to everyone who has contributed to AFFiNE. If you have an AFFiNE-related project, documentation, tool, or template, please share it with the community through [awesome-affine](https://github.com/toeverything/awesome-affine).
-
-<a href="https://github.com/toeverything/AFFiNE/graphs/contributors">
-  <img alt="contributors" src="https://opencollective.com/affine/contributors.svg?width=890&button=false" />
-</a>
+[all-contributors-badge]: https://img.shields.io/github/contributors/toeverything/AFFiNE
+[license]: ./LICENSE
+[building.md]: ./docs/BUILDING.md
+[update page]: https://affine.pro/blog?tag=Release%20Note
+[jobs available]: ./docs/jobs.md
+[latest packages]: https://github.com/toeverything/AFFiNE/pkgs/container/affine-self-hosted
+[contributor license agreement]: https://github.com/toeverything/affine/edit/canary/.github/CLA.md
+[stars-icon]: https://img.shields.io/github/stars/toeverything/AFFiNE.svg?style=flat&logo=github&colorB=red&label=stars
+[codecov]: https://codecov.io/gh/toeverything/affine/branch/canary/graphs/badge.svg?branch=canary
+[node-version-icon]: https://img.shields.io/badge/node-%3E=18.16.1-success
+[typescript-version-icon]: https://img.shields.io/github/package-json/dependency-version/toeverything/affine/dev/typescript
+[react-version-icon]: https://img.shields.io/github/package-json/dependency-version/toeverything/AFFiNE/react?filename=packages%2Ffrontend%2Fcore%2Fpackage.json&color=rgb(97%2C228%2C251)
+[blocksuite-icon]: https://img.shields.io/github/package-json/dependency-version/toeverything/AFFiNE/@blocksuite/store?color=6880ff&filename=packages%2Ffrontend%2Fcore%2Fpackage.json&label=blocksuite
@@ -295,10 +295,10 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3",
+  "version": "0.27.0",
  "devDependencies": {
    "@vanilla-extract/vite-plugin": "^5.0.0",
    "msw": "^2.13.2",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.8"
  }
 }
@@ -270,6 +270,54 @@ Hello world
    expect(meta?.tags).toEqual(['a', 'b']);
  });

+  test('preserves list text inside blockquotes without list blocks', async () => {
+    const markdown = `> **Shopping List:**
+> - Apples
+> - Bananas
+> - Oranges
+`;
+    const mdAdapter = new MarkdownAdapter(createJob(), provider);
+    const snapshot = await mdAdapter.toDocSnapshot({
+      file: markdown,
+      assets: new AssetsManager({ blob: new MemoryBlobCRUD() }),
+    });
+
+    expect(simplifyBlockForSnapshot(snapshot.blocks, new Map())).toMatchObject({
+      children: [
+        {
+          flavour: 'affine:note',
+          children: [
+            {
+              flavour: 'affine:paragraph',
+              type: 'quote',
+              delta: [
+                { insert: 'Shopping List:' },
+                { insert: '\n' },
+                { insert: '- ' },
+                { insert: 'Apples' },
+                { insert: '\n' },
+                { insert: '- ' },
+                { insert: 'Bananas' },
+                { insert: '\n' },
+                { insert: '- ' },
+                { insert: 'Oranges' },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+
+    const exported = await mdAdapter.fromDocSnapshot({
+      snapshot,
+      assets: new AssetsManager({ blob: new MemoryBlobCRUD() }),
+    });
+    expect(exported.file).toContain('> **Shopping List:**');
+    expect(exported.file).toContain('> \\- Apples');
+    expect(exported.file).toContain('> \\- Bananas');
+    expect(exported.file).toContain('> \\- Oranges');
+  });
+
  test('imports obsidian vault fixtures', async () => {
    const schema = new Schema().register(AffineSchemas);
    const collection = new TestWorkspace();
@@ -0,0 +1,92 @@
+import { describe, expect, test } from 'vitest';
+
+import { bilibiliConfig } from '../../../blocks/embed/src/embed-iframe-block/configs/providers/bilibili.js';
+import { excalidrawConfig } from '../../../blocks/embed/src/embed-iframe-block/configs/providers/excalidraw.js';
+import { genericConfig } from '../../../blocks/embed/src/embed-iframe-block/configs/providers/generic.js';
+import { googleDocsConfig } from '../../../blocks/embed/src/embed-iframe-block/configs/providers/google-docs.js';
+import { googleDriveConfig } from '../../../blocks/embed/src/embed-iframe-block/configs/providers/google-drive.js';
+import { miroConfig } from '../../../blocks/embed/src/embed-iframe-block/configs/providers/miro.js';
+import { spotifyConfig } from '../../../blocks/embed/src/embed-iframe-block/configs/providers/spotify.js';
+
+describe('embed iframe provider config', () => {
+  test('validates final iframe URLs from oEmbed providers', () => {
+    expect(
+      spotifyConfig.validateIframeUrl?.(
+        'https://open.spotify.com/embed/track/0TK2YIli7K1leLovkQiNik'
+      )
+    ).toBe(true);
+    expect(
+      spotifyConfig.validateIframeUrl?.(
+        'https://example.com/embed/track/0TK2YIli7K1leLovkQiNik'
+      )
+    ).toBe(false);
+  });
+
+  test('validates provider-specific iframe URL shapes', () => {
+    expect(
+      googleDriveConfig.validateIframeUrl?.(
+        'https://drive.google.com/file/d/file-id/preview?usp=embed_googleplus'
+      )
+    ).toBe(true);
+    expect(
+      googleDriveConfig.validateIframeUrl?.(
+        'https://drive.google.com/drive/folders/folder-id?usp=sharing'
+      )
+    ).toBe(false);
+
+    expect(
+      bilibiliConfig.validateIframeUrl?.(
+        'https://player.bilibili.com/player.html?bvid=BV1xx411c7mD&autoplay=0'
+      )
+    ).toBe(true);
+    expect(
+      bilibiliConfig.match(
+        'https://player.bilibili.com/player.html?aid=123&autoplay=0'
+      )
+    ).toBe(true);
+    expect(
+      bilibiliConfig.buildOEmbedUrl(
+        'https://player.bilibili.com/video/BV1xx411c7mD'
+      )
+    ).toBe(
+      'https://player.bilibili.com/player.html?bvid=BV1xx411c7mD&autoplay=0'
+    );
+    expect(
+      bilibiliConfig.validateIframeUrl?.(
+        'https://www.bilibili.com/video/BV1xx411c7mD'
+      )
+    ).toBe(false);
+
+    expect(
+      googleDocsConfig.validateIframeUrl?.(
+        'https://docs.google.com/document/d/doc-id/edit?usp=sharing'
+      )
+    ).toBe(true);
+    expect(
+      miroConfig.validateIframeUrl?.(
+        'https://miro.com/app/live-embed/board-id/'
+      )
+    ).toBe(true);
+    expect(
+      excalidrawConfig.validateIframeUrl?.('https://excalidraw.com/#room-id')
+    ).toBe(true);
+  });
+
+  test('generic iframe validation excludes affine and non-https URLs', () => {
+    expect(genericConfig.validateIframeUrl?.('https://example.com/embed')).toBe(
+      true
+    );
+    expect(genericConfig.validateIframeUrl?.('http://example.com/embed')).toBe(
+      false
+    );
+    expect(
+      genericConfig.validateIframeUrl?.('https://app.affine.pro/embed')
+    ).toBe(false);
+    expect(genericConfig.validateIframeUrl?.('https://127.0.0.1/embed')).toBe(
+      false
+    );
+    expect(genericConfig.validateIframeUrl?.('https://localhost/embed')).toBe(
+      false
+    );
+  });
+});
@@ -0,0 +1,770 @@
+import { Bound } from '@blocksuite/global/gfx';
+import { Viewport, viewportRuntimeConfig } from '@blocksuite/std/gfx';
+import { afterEach, describe, expect, test, vi } from 'vitest';
+
+import * as viewportModule from '../../../../../framework/std/src/gfx/viewport.js';
+import * as viewportElementModule from '../../../../../framework/std/src/gfx/viewport-element.js';
+import * as canvasRendererModule from '../../../../blocks/surface/src/renderer/canvas-renderer.js';
+import {
+  paintPlaceholder,
+  syncCanvasSize,
+} from '../../../../gfx/turbo-renderer/src/renderer-utils.js';
+import type { ViewportLayoutTree } from '../../../../gfx/turbo-renderer/src/types.js';
+
+const originalCaps = [...viewportRuntimeConfig.CANVAS_DPR_CAP_BY_ZOOM];
+const originalDevicePixelRatio = Object.getOwnPropertyDescriptor(
+  window,
+  'devicePixelRatio'
+);
+
+function setDevicePixelRatio(value: number) {
+  Object.defineProperty(window, 'devicePixelRatio', {
+    configurable: true,
+    value,
+  });
+}
+
+function createRect(width: number, height: number): DOMRect {
+  return {
+    width,
+    height,
+    left: 0,
+    top: 0,
+    right: width,
+    bottom: height,
+    x: 0,
+    y: 0,
+    toJSON: () => ({}),
+  } as DOMRect;
+}
+
+function createFakeBlockModel(
+  id: string,
+  x: number,
+  y: number,
+  w = 10,
+  h = 10
+) {
+  return {
+    id,
+    elementBound: new Bound(x, y, w, h),
+  };
+}
+
+type PaintPlaceholderForTest = (
+  canvas: HTMLCanvasElement,
+  layout: ViewportLayoutTree,
+  viewport: {
+    zoom: number;
+    toViewCoord: (x: number, y: number) => [number, number];
+  }
+) => void;
+
+afterEach(() => {
+  viewportRuntimeConfig.CANVAS_DPR_CAP_BY_ZOOM = [...originalCaps];
+
+  if (originalDevicePixelRatio) {
+    Object.defineProperty(window, 'devicePixelRatio', originalDevicePixelRatio);
+  }
+
+  vi.restoreAllMocks();
+});
+
+describe('edgeless canvas budget', () => {
+  test('requests canvas budget sync when zoom crosses an effective dpr bucket', () => {
+    viewportRuntimeConfig.CANVAS_DPR_CAP_BY_ZOOM = [
+      [0.5, 1],
+      [0.8, 2],
+    ];
+
+    expect(
+      'shouldSyncCanvasBudgetOnViewportUpdate' in canvasRendererModule
+    ).toBe(true);
+
+    const shouldSyncCanvasBudgetOnViewportUpdate = (
+      canvasRendererModule as {
+        shouldSyncCanvasBudgetOnViewportUpdate: (
+          previousZoom: number,
+          nextZoom: number,
+          rawDpr?: number
+        ) => boolean;
+      }
+    ).shouldSyncCanvasBudgetOnViewportUpdate;
+
+    expect(shouldSyncCanvasBudgetOnViewportUpdate(0.95, 0.4, 2)).toBe(true);
+    expect(shouldSyncCanvasBudgetOnViewportUpdate(0.95, 0.75, 2)).toBe(false);
+    expect(shouldSyncCanvasBudgetOnViewportUpdate(0.45, 0.4, 2)).toBe(false);
+    expect(shouldSyncCanvasBudgetOnViewportUpdate(0.95, 0.4, 1)).toBe(false);
+  });
+
+  test('enables low-zoom survival mode only for active iOS gestures', () => {
+    expect('shouldUseLowZoomSurvivalMode' in canvasRendererModule).toBe(true);
+
+    const shouldUseLowZoomSurvivalMode = (
+      canvasRendererModule as {
+        shouldUseLowZoomSurvivalMode: (
+          isIOS: boolean,
+          zoom: number,
+          gestureActive: boolean
+        ) => boolean;
+      }
+    ).shouldUseLowZoomSurvivalMode;
+
+    expect(shouldUseLowZoomSurvivalMode(true, 0.4, true)).toBe(true);
+    expect(shouldUseLowZoomSurvivalMode(true, 0.6, true)).toBe(false);
+    expect(shouldUseLowZoomSurvivalMode(true, 0.4, false)).toBe(false);
+    expect(shouldUseLowZoomSurvivalMode(false, 0.4, true)).toBe(false);
+  });
+
+  test('does not enable canvas placeholders for low-zoom panning without zooming', () => {
+    expect('shouldRenderCanvasPlaceholders' in canvasRendererModule).toBe(true);
+
+    const shouldRenderCanvasPlaceholders = (
+      canvasRendererModule as {
+        shouldRenderCanvasPlaceholders: (params: {
+          isIOS: boolean;
+          zoom: number;
+          isPanning: boolean;
+          isZooming: boolean;
+          skipRefreshDuringGesture: boolean;
+          turboEnabled: boolean;
+        }) => boolean;
+      }
+    ).shouldRenderCanvasPlaceholders;
+
+    expect(
+      shouldRenderCanvasPlaceholders({
+        isIOS: true,
+        zoom: 0.4,
+        isPanning: true,
+        isZooming: false,
+        skipRefreshDuringGesture: true,
+        turboEnabled: true,
+      })
+    ).toBe(false);
+
+    expect(
+      shouldRenderCanvasPlaceholders({
+        isIOS: true,
+        zoom: 0.4,
+        isPanning: false,
+        isZooming: true,
+        skipRefreshDuringGesture: true,
+        turboEnabled: true,
+      })
+    ).toBe(true);
+  });
+
+  test('shares one bypass decision for placeholder and render paths only during the low-zoom iOS landscape gesture or recovery window', () => {
+    expect('getStackingCanvasBypassState' in canvasRendererModule).toBe(true);
+    expect(
+      'shouldBypassStackingCanvasesDuringLowZoomGesture' in canvasRendererModule
+    ).toBe(true);
+
+    const getStackingCanvasBypassState = (
+      canvasRendererModule as {
+        getStackingCanvasBypassState: (params: {
+          isIOS: boolean;
+          zoom: number;
+          gestureActive: boolean;
+          recoveryActive: boolean;
+          viewportWidth: number;
+          viewportHeight: number;
+        }) => boolean;
+      }
+    ).getStackingCanvasBypassState;
+    const shouldBypassStackingCanvasesDuringLowZoomGesture = (
+      canvasRendererModule as {
+        shouldBypassStackingCanvasesDuringLowZoomGesture: (params: {
+          isIOS: boolean;
+          zoom: number;
+          gestureActive: boolean;
+          recoveryActive: boolean;
+          viewportWidth: number;
+          viewportHeight: number;
+        }) => boolean;
+      }
+    ).shouldBypassStackingCanvasesDuringLowZoomGesture;
+
+    expect(
+      getStackingCanvasBypassState({
+        isIOS: true,
+        zoom: 0.4,
+        gestureActive: true,
+        recoveryActive: false,
+        viewportWidth: 932,
+        viewportHeight: 430,
+      })
+    ).toBe(true);
+    expect(
+      getStackingCanvasBypassState({
+        isIOS: true,
+        zoom: 0.4,
+        gestureActive: false,
+        recoveryActive: true,
+        viewportWidth: 932,
+        viewportHeight: 430,
+      })
+    ).toBe(true);
+    expect(
+      getStackingCanvasBypassState({
+        isIOS: true,
+        zoom: 0.4,
+        gestureActive: false,
+        recoveryActive: false,
+        viewportWidth: 932,
+        viewportHeight: 430,
+      })
+    ).toBe(false);
+    expect(
+      shouldBypassStackingCanvasesDuringLowZoomGesture({
+        isIOS: true,
+        zoom: 0.4,
+        gestureActive: false,
+        recoveryActive: false,
+        viewportWidth: 932,
+        viewportHeight: 430,
+      })
+    ).toBe(false);
+    expect(
+      getStackingCanvasBypassState({
+        isIOS: true,
+        zoom: 0.4,
+        gestureActive: true,
+        recoveryActive: false,
+        viewportWidth: 430,
+        viewportHeight: 932,
+      })
+    ).toBe(false);
+    expect(
+      getStackingCanvasBypassState({
+        isIOS: true,
+        zoom: 0.6,
+        gestureActive: true,
+        recoveryActive: false,
+        viewportWidth: 932,
+        viewportHeight: 430,
+      })
+    ).toBe(false);
+    expect(
+      getStackingCanvasBypassState({
+        isIOS: false,
+        zoom: 0.4,
+        gestureActive: true,
+        recoveryActive: false,
+        viewportWidth: 932,
+        viewportHeight: 430,
+      })
+    ).toBe(false);
+  });
+
+  test('gesture low-zoom landscape bypass detaches stacking canvases through the existing attachment path', () => {
+    expect(
+      'shouldBypassStackingCanvasesDuringLowZoomGesture' in canvasRendererModule
+    ).toBe(true);
+    expect('getStackingCanvasAttachmentDiff' in canvasRendererModule).toBe(
+      true
+    );
+
+    const shouldBypassStackingCanvasesDuringLowZoomGesture = (
+      canvasRendererModule as {
+        shouldBypassStackingCanvasesDuringLowZoomGesture: (params: {
+          isIOS: boolean;
+          zoom: number;
+          gestureActive: boolean;
+          recoveryActive: boolean;
+          viewportWidth: number;
+          viewportHeight: number;
+        }) => boolean;
+      }
+    ).shouldBypassStackingCanvasesDuringLowZoomGesture;
+    const getStackingCanvasAttachmentDiff = (
+      canvasRendererModule as {
+        getStackingCanvasAttachmentDiff: (params: {
+          canvases: HTMLCanvasElement[];
+          wasAttached: boolean;
+          shouldAttach: boolean;
+        }) => {
+          added: HTMLCanvasElement[];
+          removed: HTMLCanvasElement[];
+        };
+      }
+    ).getStackingCanvasAttachmentDiff;
+
+    const canvases = [document.createElement('canvas')];
+    const shouldBypass = shouldBypassStackingCanvasesDuringLowZoomGesture({
+      isIOS: true,
+      zoom: 0.4,
+      gestureActive: true,
+      recoveryActive: false,
+      viewportWidth: 932,
+      viewportHeight: 430,
+    });
+
+    expect(shouldBypass).toBe(true);
+    expect(
+      getStackingCanvasAttachmentDiff({
+        canvases,
+        wasAttached: true,
+        shouldAttach: !shouldBypass,
+      })
+    ).toEqual({
+      added: [],
+      removed: canvases,
+    });
+  });
+
+  test('uses overscan for main-canvas fallback culling and render origin', () => {
+    expect('getMainCanvasFallbackBounds' in canvasRendererModule).toBe(true);
+
+    const getMainCanvasFallbackBounds = (
+      canvasRendererModule as {
+        getMainCanvasFallbackBounds: (params: {
+          viewportBounds: Bound;
+          overscanViewportBounds: Bound;
+        }) => {
+          cullBound: Bound;
+          renderBound: Bound;
+        };
+      }
+    ).getMainCanvasFallbackBounds;
+
+    const viewportBounds = new Bound(100, 200, 300, 150);
+    const overscanViewportBounds = new Bound(40, 170, 420, 210);
+
+    expect(
+      getMainCanvasFallbackBounds({
+        viewportBounds,
+        overscanViewportBounds,
+      })
+    ).toEqual({
+      cullBound: overscanViewportBounds,
+      renderBound: overscanViewportBounds,
+    });
+  });
+
+  test('lays out overscan canvases relative to the exact viewport', () => {
+    expect('getCanvasViewportLayout' in canvasRendererModule).toBe(true);
+
+    const getCanvasViewportLayout = (
+      canvasRendererModule as {
+        getCanvasViewportLayout: (params: {
+          bound: Bound;
+          viewportBounds: Bound;
+          zoom: number;
+          viewScale: number;
+          dpr: number;
+        }) => {
+          actualHeight: number;
+          actualWidth: number;
+          height: number;
+          transform: string;
+          width: number;
+        };
+      }
+    ).getCanvasViewportLayout;
+
+    expect(
+      getCanvasViewportLayout({
+        bound: new Bound(40, 170, 420, 210),
+        viewportBounds: new Bound(100, 200, 300, 150),
+        zoom: 1,
+        viewScale: 1,
+        dpr: 2,
+      })
+    ).toEqual({
+      actualHeight: 420,
+      actualWidth: 840,
+      height: 210,
+      transform: 'translate(-60px, -30px) scale(1)',
+      width: 420,
+    });
+  });
+
+  test('computes stacking canvas DOM attachment diffs when bypass toggles', () => {
+    expect('getStackingCanvasAttachmentDiff' in canvasRendererModule).toBe(
+      true
+    );
+
+    const getStackingCanvasAttachmentDiff = (
+      canvasRendererModule as {
+        getStackingCanvasAttachmentDiff: (params: {
+          canvases: HTMLCanvasElement[];
+          wasAttached: boolean;
+          shouldAttach: boolean;
+        }) => {
+          added: HTMLCanvasElement[];
+          removed: HTMLCanvasElement[];
+        };
+      }
+    ).getStackingCanvasAttachmentDiff;
+
+    const canvasA = document.createElement('canvas');
+    const canvasB = document.createElement('canvas');
+    const canvases = [canvasA, canvasB];
+
+    expect(
+      getStackingCanvasAttachmentDiff({
+        canvases,
+        wasAttached: true,
+        shouldAttach: false,
+      })
+    ).toEqual({
+      added: [],
+      removed: canvases,
+    });
+
+    expect(
+      getStackingCanvasAttachmentDiff({
+        canvases,
+        wasAttached: false,
+        shouldAttach: true,
+      })
+    ).toEqual({
+      added: canvases,
+      removed: [],
+    });
+
+    expect(
+      getStackingCanvasAttachmentDiff({
+        canvases,
+        wasAttached: true,
+        shouldAttach: true,
+      })
+    ).toEqual({
+      added: [],
+      removed: [],
+    });
+  });
+
+  test('emits a lightweight zoom signal during gesture-skipped zoom updates so canvas budgets can shrink', () => {
+    viewportRuntimeConfig.CANVAS_DPR_CAP_BY_ZOOM = [
+      [0.5, 1],
+      [0.8, 2],
+    ];
+
+    const viewport = new Viewport();
+    viewport.SKIP_REFRESH_DURING_GESTURE = true;
+
+    const viewportUpdated = vi.fn();
+    const zoomUpdates: Array<{ previousZoom: number; zoom: number }> = [];
+    let lastCanvasBudgetZoom = viewport.zoom;
+    let budgetSyncCount = 0;
+
+    viewport.viewportUpdated.subscribe(viewportUpdated);
+
+    expect('zoomUpdated' in viewport).toBe(true);
+    const zoomUpdated = (
+      viewport as unknown as {
+        zoomUpdated: {
+          subscribe: (
+            callback: (update: { previousZoom: number; zoom: number }) => void
+          ) => void;
+        };
+      }
+    ).zoomUpdated;
+
+    zoomUpdated.subscribe(update => {
+      zoomUpdates.push(update);
+      if (
+        (
+          canvasRendererModule as {
+            shouldSyncCanvasBudgetOnViewportUpdate: (
+              previousZoom: number,
+              nextZoom: number,
+              rawDpr?: number
+            ) => boolean;
+          }
+        ).shouldSyncCanvasBudgetOnViewportUpdate(
+          lastCanvasBudgetZoom,
+          update.zoom,
+          2
+        )
+      ) {
+        budgetSyncCount += 1;
+      }
+      lastCanvasBudgetZoom = update.zoom;
+    });
+
+    viewport.panning$.next(true);
+    viewport.setZoom(0.4, { x: 0, y: 0 }, false, false, true);
+
+    expect(viewportUpdated).not.toHaveBeenCalled();
+    expect(zoomUpdates).toEqual([{ previousZoom: 1, zoom: 0.4 }]);
+    expect(budgetSyncCount).toBe(1);
+
+    viewport.dispose();
+  });
+
+  test('keeps programmatic setZoom on the normal viewport update path in skip mode', () => {
+    const viewport = new Viewport();
+    viewport.SKIP_REFRESH_DURING_GESTURE = true;
+
+    const viewportUpdated = vi.fn();
+    const zoomUpdated = vi.fn();
+
+    viewport.viewportUpdated.subscribe(viewportUpdated);
+    viewport.zoomUpdated.subscribe(zoomUpdated);
+
+    viewport.setZoom(0.4, { x: 0, y: 0 });
+
+    expect(viewportUpdated).toHaveBeenCalledTimes(1);
+    expect(zoomUpdated).toHaveBeenCalledWith({ previousZoom: 1, zoom: 0.4 });
+    expect(viewport.panning$.value).toBe(false);
+    expect(viewport.zooming$.value).toBe(false);
+
+    viewport.dispose();
+  });
+
+  test('enables low-zoom block survival only while the gesture is still active', () => {
+    expect('shouldUseLowZoomBlockSurvivalMode' in viewportElementModule).toBe(
+      true
+    );
+
+    const shouldUseLowZoomBlockSurvivalMode = (
+      viewportElementModule as {
+        shouldUseLowZoomBlockSurvivalMode: (params: {
+          zoom: number;
+          skipRefreshDuringGesture: boolean;
+          gestureActive: boolean;
+        }) => boolean;
+      }
+    ).shouldUseLowZoomBlockSurvivalMode;
+
+    expect(
+      shouldUseLowZoomBlockSurvivalMode({
+        zoom: 0.4,
+        skipRefreshDuringGesture: true,
+        gestureActive: true,
+      })
+    ).toBe(true);
+    expect(
+      shouldUseLowZoomBlockSurvivalMode({
+        zoom: 0.4,
+        skipRefreshDuringGesture: true,
+        gestureActive: false,
+      })
+    ).toBe(false);
+  });
+
+  test('keeps selected and one nearby viewport block active during low-zoom gesture survival', () => {
+    expect('getLowZoomGestureActiveModels' in viewportElementModule).toBe(true);
+
+    const getLowZoomGestureActiveModels = (
+      viewportElementModule as {
+        getLowZoomGestureActiveModels: (params: {
+          selectedModels: Set<{ id: string; elementBound: Bound }>;
+          viewportModels: Set<{ id: string; elementBound: Bound }>;
+          viewportBounds: Bound;
+          nearbyActiveBlockLimit: number;
+          nearbyDistanceRatio: number;
+        }) => Set<{ id: string; elementBound: Bound }>;
+      }
+    ).getLowZoomGestureActiveModels;
+
+    const selected = createFakeBlockModel('selected', 10, 10);
+    const nearby = createFakeBlockModel('nearby', 28, 12);
+    const far = createFakeBlockModel('far', 78, 78);
+
+    const activeModels = getLowZoomGestureActiveModels({
+      selectedModels: new Set([selected]),
+      viewportModels: new Set([selected, nearby, far]),
+      viewportBounds: new Bound(0, 0, 100, 100),
+      nearbyActiveBlockLimit: 1,
+      nearbyDistanceRatio: 0.35,
+    });
+
+    expect([...activeModels].map(model => model.id).sort()).toEqual([
+      'nearby',
+      'selected',
+    ]);
+  });
+
+  test('falls back to the nearest viewport block when nothing is selected', () => {
+    expect('getLowZoomGestureActiveModels' in viewportElementModule).toBe(true);
+
+    const getLowZoomGestureActiveModels = (
+      viewportElementModule as {
+        getLowZoomGestureActiveModels: (params: {
+          selectedModels: Set<{ id: string; elementBound: Bound }>;
+          viewportModels: Set<{ id: string; elementBound: Bound }>;
+          viewportBounds: Bound;
+          nearbyActiveBlockLimit: number;
+          nearbyDistanceRatio: number;
+        }) => Set<{ id: string; elementBound: Bound }>;
+      }
+    ).getLowZoomGestureActiveModels;
+
+    const nearest = createFakeBlockModel('nearest', 46, 46);
+    const farther = createFakeBlockModel('farther', 78, 78);
+
+    const activeModels = getLowZoomGestureActiveModels({
+      selectedModels: new Set(),
+      viewportModels: new Set([nearest, farther]),
+      viewportBounds: new Bound(0, 0, 100, 100),
+      nearbyActiveBlockLimit: 1,
+      nearbyDistanceRatio: 0.35,
+    });
+
+    expect([...activeModels].map(model => model.id)).toEqual(['nearest']);
+  });
+
+  test('starts post-gesture recovery immediately once gesture signals fully settle', () => {
+    expect('getPostGestureRecoveryDelay' in viewportModule).toBe(true);
+
+    const getPostGestureRecoveryDelay = (
+      viewportModule as {
+        getPostGestureRecoveryDelay: (params: {
+          isPanning: boolean;
+          isZooming: boolean;
+          fallbackDelayMs: number;
+        }) => number;
+      }
+    ).getPostGestureRecoveryDelay;
+
+    expect(
+      getPostGestureRecoveryDelay({
+        isPanning: false,
+        isZooming: false,
+        fallbackDelayMs: 220,
+      })
+    ).toBe(0);
+  });
+
+  test('keeps fallback post-gesture delay while a gesture signal is still active', () => {
+    expect('getPostGestureRecoveryDelay' in viewportModule).toBe(true);
+
+    const getPostGestureRecoveryDelay = (
+      viewportModule as {
+        getPostGestureRecoveryDelay: (params: {
+          isPanning: boolean;
+          isZooming: boolean;
+          fallbackDelayMs: number;
+        }) => number;
+      }
+    ).getPostGestureRecoveryDelay;
+
+    expect(
+      getPostGestureRecoveryDelay({
+        isPanning: true,
+        isZooming: false,
+        fallbackDelayMs: 220,
+      })
+    ).toBe(220);
+    expect(
+      getPostGestureRecoveryDelay({
+        isPanning: false,
+        isZooming: true,
+        fallbackDelayMs: 220,
+      })
+    ).toBe(220);
+  });
+
+  test('sizes turbo renderer canvas with effective dpr at low zoom', () => {
+    viewportRuntimeConfig.CANVAS_DPR_CAP_BY_ZOOM = [
+      [0.5, 1],
+      [0.8, 2],
+    ];
+    setDevicePixelRatio(2);
+
+    const canvas = document.createElement('canvas');
+    const host = document.createElement('div');
+    vi.spyOn(host, 'getBoundingClientRect').mockReturnValue(
+      createRect(200, 100)
+    );
+
+    (
+      syncCanvasSize as unknown as (
+        canvas: HTMLCanvasElement,
+        host: HTMLElement,
+        zoom: number
+      ) => void
+    )(canvas, host, 0.4);
+
+    expect(canvas.width).toBe(200);
+    expect(canvas.height).toBe(100);
+
+    (
+      syncCanvasSize as unknown as (
+        canvas: HTMLCanvasElement,
+        host: HTMLElement,
+        zoom: number
+      ) => void
+    )(canvas, host, 0.95);
+
+    expect(canvas.width).toBe(400);
+    expect(canvas.height).toBe(200);
+  });
+
+  test('paints turbo placeholders with effective dpr at low zoom', () => {
+    const previousTheme = document.documentElement.dataset.theme;
+    document.documentElement.dataset.theme = 'light';
+
+    try {
+      viewportRuntimeConfig.CANVAS_DPR_CAP_BY_ZOOM = [
+        [0.5, 1],
+        [0.8, 2],
+      ];
+      setDevicePixelRatio(2);
+
+      const canvas = document.createElement('canvas');
+      const fillRect = vi.fn();
+      const strokeRect = vi.fn();
+      let fillStyle = '';
+      let strokeStyle = '';
+      vi.spyOn(canvas, 'getContext').mockReturnValue({
+        get fillStyle() {
+          return fillStyle;
+        },
+        set fillStyle(value: string) {
+          fillStyle = value;
+        },
+        get strokeStyle() {
+          return strokeStyle;
+        },
+        set strokeStyle(value: string) {
+          strokeStyle = value;
+        },
+        fillRect,
+        strokeRect,
+      } as unknown as CanvasRenderingContext2D);
+
+      const layout: ViewportLayoutTree = {
+        roots: [
+          {
+            blockId: 'root',
+            type: 'affine:page',
+            layout: {
+              blockId: 'root',
+              type: 'affine:page',
+              rect: { x: 0, y: 0, w: 50, h: 20 },
+            },
+            children: [],
+          },
+        ],
+        overallRect: { x: 0, y: 0, w: 50, h: 20 },
+      };
+
+      const paintPlaceholderForTest =
+        paintPlaceholder as unknown as PaintPlaceholderForTest;
+
+      paintPlaceholderForTest(canvas, layout, {
+        zoom: 0.4,
+        toViewCoord: () => [0, 0],
+      });
+
+      expect(fillStyle).toBe('rgba(0, 0, 0, 0.04)');
+      expect(strokeStyle).toBe('rgba(0, 0, 0, 0.02)');
+      expect(fillRect).toHaveBeenLastCalledWith(0, 0, 20, 8);
+
+      paintPlaceholderForTest(canvas, layout, {
+        zoom: 0.95,
+        toViewCoord: () => [0, 0],
+      });
+
+      expect(fillRect).toHaveBeenLastCalledWith(0, 0, 95, 38);
+    } finally {
+      document.documentElement.dataset.theme = previousTheme;
+    }
+  });
+});
@@ -0,0 +1,34 @@
+import { ColorScheme } from '@blocksuite/affine-model';
+import { describe, expect, it } from 'vitest';
+
+import {
+  getAffinePlaceholderFillColor,
+  getAffinePlaceholderStrokeColor,
+  inferColorSchemeFromThemeMode,
+} from '../../../../shared/src/theme/placeholder-style.js';
+
+describe('affine placeholder style', () => {
+  it('returns subtle light placeholder colors', () => {
+    expect(getAffinePlaceholderFillColor(ColorScheme.Light)).toBe(
+      'rgba(0, 0, 0, 0.04)'
+    );
+    expect(getAffinePlaceholderStrokeColor(ColorScheme.Light)).toBe(
+      'rgba(0, 0, 0, 0.02)'
+    );
+  });
+
+  it('returns subtle dark placeholder colors', () => {
+    expect(getAffinePlaceholderFillColor(ColorScheme.Dark)).toBe(
+      'rgba(255, 255, 255, 0.08)'
+    );
+    expect(getAffinePlaceholderStrokeColor(ColorScheme.Dark)).toBe(
+      'rgba(255, 255, 255, 0.04)'
+    );
+  });
+
+  it('infers color scheme from theme mode', () => {
+    expect(inferColorSchemeFromThemeMode('dark')).toBe(ColorScheme.Dark);
+    expect(inferColorSchemeFromThemeMode('light')).toBe(ColorScheme.Light);
+    expect(inferColorSchemeFromThemeMode('')).toBe(ColorScheme.Light);
+  });
+});
@@ -0,0 +1,66 @@
+import { describe, expect, test } from 'vitest';
+
+import * as turboRendererModule from '../../../../gfx/turbo-renderer/src/turbo-renderer.js';
+
+describe('viewport turbo renderer policy', () => {
+  test.each([
+    { isIOS: true, zoom: 0.4, hasBitmap: true, expected: true },
+    { isIOS: true, zoom: 0.4, hasBitmap: false, expected: false },
+    { isIOS: false, zoom: 0.4, hasBitmap: true, expected: false },
+    { isIOS: true, zoom: 0.8, hasBitmap: true, expected: false },
+  ])(
+    'prefers cached bitmap only for iOS low-zoom gestures with a bitmap %#',
+    ({ isIOS, zoom, hasBitmap, expected }) => {
+      expect(
+        'shouldPreferBitmapCacheDuringLowZoomGesture' in turboRendererModule
+      ).toBe(true);
+
+      const shouldPreferBitmapCacheDuringLowZoomGesture = (
+        turboRendererModule as {
+          shouldPreferBitmapCacheDuringLowZoomGesture: (params: {
+            isIOS: boolean;
+            zoom: number;
+            hasBitmap: boolean;
+          }) => boolean;
+        }
+      ).shouldPreferBitmapCacheDuringLowZoomGesture;
+
+      expect(
+        shouldPreferBitmapCacheDuringLowZoomGesture({
+          isIOS,
+          zoom,
+          hasBitmap,
+        })
+      ).toBe(expected);
+    }
+  );
+
+  test.each([
+    { isIOS: true, zoom: 0.4, expected: false },
+    { isIOS: true, zoom: 0.8, expected: true },
+    { isIOS: false, zoom: 0.4, expected: true },
+  ])(
+    'idles turbo blocks outside iOS low-zoom survival mode %#',
+    ({ isIOS, zoom, expected }) => {
+      expect('shouldIdleTurboBlocksDuringZooming' in turboRendererModule).toBe(
+        true
+      );
+
+      const shouldIdleTurboBlocksDuringZooming = (
+        turboRendererModule as {
+          shouldIdleTurboBlocksDuringZooming: (params: {
+            isIOS: boolean;
+            zoom: number;
+          }) => boolean;
+        }
+      ).shouldIdleTurboBlocksDuringZooming;
+
+      expect(
+        shouldIdleTurboBlocksDuringZooming({
+          isIOS,
+          zoom,
+        })
+      ).toBe(expected);
+    }
+  );
+});
@@ -1,3 +1,5 @@
+import { fileURLToPath } from 'node:url';
+
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import { defineConfig } from 'vitest/config';

@@ -7,7 +9,9 @@ export default defineConfig({
  },
  plugins: [vanillaExtractPlugin()],
  test: {
-    globalSetup: '../../../scripts/vitest-global.js',
+    globalSetup: fileURLToPath(
+      new URL('../../../scripts/vitest-global.js', import.meta.url)
+    ),
    include: ['src/__tests__/**/*.unit.spec.ts'],
    testTimeout: 1000,
    coverage: {
@@ -37,5 +37,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -29,9 +29,9 @@
    "yjs": "^13.6.27"
  },
  "devDependencies": {
-    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/browser-playwright": "^4.1.8",
    "playwright": "=1.58.2",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.8"
  },
  "exports": {
    ".": "./src/index.ts",
@@ -44,5 +44,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -36,5 +36,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -44,5 +44,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -1,4 +1,5 @@
 import { deleteTextCommand } from '@blocksuite/affine-inline-preset';
+import type { RichText } from '@blocksuite/affine-rich-text';
 import {
  HtmlAdapter,
  pasteMiddleware,
@@ -18,6 +19,7 @@ import {
  LifeCycleWatcher,
  LifeCycleWatcherIdentifier,
  StdIdentifier,
+  TextSelection,
  type UIEventHandler,
 } from '@blocksuite/std';
 import type { ExtensionType } from '@blocksuite/store';
@@ -103,6 +105,30 @@ export class CodeBlockClipboardController extends LifeCycleWatcher {
    const e = ctx.get('clipboardState').raw;
    e.preventDefault();

+    const textSelection = this.std.selection.find(TextSelection);
+    const plainText = e.clipboardData
+      ?.getData('text/plain')
+      ?.replace(/\r?\n|\r/g, '\n');
+    const selectedBlockId = textSelection?.from.blockId;
+    const codeBlock = selectedBlockId
+      ? this.std.store.getBlock(selectedBlockId)?.model
+      : null;
+    if (plainText && codeBlock?.flavour === 'affine:code' && selectedBlockId) {
+      const richText = this.std.view
+        .getBlock(selectedBlockId)
+        ?.querySelector<RichText>('rich-text');
+      const inlineEditor = richText?.inlineEditor;
+      const inlineRange = inlineEditor?.getInlineRange();
+      if (inlineEditor && inlineRange) {
+        inlineEditor.insertText(inlineRange, plainText);
+        inlineEditor.setInlineRange({
+          index: inlineRange.index + plainText.length,
+          length: 0,
+        });
+        return true;
+      }
+    }
+
    this.std.store.captureSync();
    this.std.command
      .chain()
@@ -36,5 +36,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -254,6 +254,7 @@ export class DataViewBlockComponent extends CaptionedBlockComponent<DataViewBloc
    dataSource: this.dataSource,
    headerWidget: this.headerWidget,
    clipboard: this.std.clipboard,
+    dnd: this.std.dnd,
    notification: {
      toast: message => {
        const notification = this.std.getOptional(NotificationProvider);
@@ -29,7 +29,7 @@
    "@preact/signals-core": "^1.8.0",
    "@toeverything/theme": "^1.1.23",
    "@types/mdast": "^4.0.4",
-    "date-fns": "^4.0.0",
+    "date-fns": "^4.4.0",
    "lit": "^3.2.0",
    "yjs": "^13.6.27",
    "zod": "^3.25.76"
@@ -45,5 +45,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -54,9 +54,9 @@ type Cell = {
  value: string | { delta: DeltaInsert[] };
 };
 export const processTable = (
-  columns: ColumnDataType[],
-  children: BlockSnapshot[],
-  cells: SerializedCells
+  columns: ColumnDataType[] = [],
+  children: BlockSnapshot[] = [],
+  cells: SerializedCells = {}
 ): Table => {
  const table: Table = {
    headers: columns,
@@ -90,13 +90,17 @@ export const processTable = (
        return;
      }
      let value: string | { delta: DeltaInsert[] };
-      if (isDelta(cell.value)) {
-        value = cell.value;
-      } else {
-        value = property.config.rawValue.toString({
-          value: cell.value,
-          data: col.data,
-        });
+      try {
+        if (isDelta(cell.value)) {
+          value = cell.value;
+        } else {
+          value = property.config.rawValue.toString({
+            value: cell.value,
+            data: col.data,
+          });
+        }
+      } catch {
+        value = '';
      }
      row.cells.push({
        value,
@@ -6,6 +6,7 @@ import { viewPresets } from '@blocksuite/data-view/view-presets';
 import {
  DatabaseKanbanViewIcon,
  DatabaseTableViewIcon,
+  TodayIcon,
 } from '@blocksuite/icons/lit';

 import { insertDatabaseBlockCommand } from '../commands';
@@ -47,6 +48,35 @@ export const databaseSlashMenuConfig: SlashMenuConfig = {
      },
    },

+    {
+      name: 'Calendar View',
+      description: 'Display items by date in a calendar.',
+      searchAlias: ['database', 'calendar'],
+      icon: TodayIcon(),
+      group: '7_Database@1',
+      when: ({ model }) =>
+        !isInsideBlockByFlavour(model.store, model, 'affine:edgeless-text'),
+      action: ({ std }) => {
+        std.command
+          .chain()
+          .pipe(getSelectedModelsCommand)
+          .pipe(insertDatabaseBlockCommand, {
+            viewType: viewPresets.calendarViewMeta.type,
+            place: 'after',
+            removeEmptyLine: true,
+          })
+          .pipe(({ insertedDatabaseBlockId }) => {
+            if (insertedDatabaseBlockId) {
+              const telemetry = std.getOptional(TelemetryProvider);
+              telemetry?.track('BlockCreated', {
+                blockType: 'affine:database',
+              });
+            }
+          })
+          .run();
+      },
+    },
+
    {
      name: 'Kanban View',
      description: 'Visualize data in a dashboard.',
@@ -34,6 +34,7 @@ import {
  type SingleView,
  uniMap,
 } from '@blocksuite/data-view';
+import { CalendarExternalSourceProvider } from '@blocksuite/data-view/view-presets';
 import { widgetPresets } from '@blocksuite/data-view/widget-presets';
 import { IS_MOBILE } from '@blocksuite/global/env';
 import { Rect } from '@blocksuite/global/gfx';
@@ -150,6 +151,14 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
            config
          );
        });
+      this.std.provider
+        .getAll(CalendarExternalSourceProvider)
+        .forEach(source => {
+          dataSource.serviceSet(
+            CalendarExternalSourceProvider(source.id),
+            source
+          );
+        });
    });
    const id = currentViewStorage.getCurrentView(this.model.id);
    if (id && dataSource.viewManager.viewGet(id)) {
@@ -293,6 +302,12 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
      widgetPresets.tools.viewOptions,
      widgetPresets.tools.tableAddRow,
    ],
+    calendar: [
+      widgetPresets.tools.filter,
+      widgetPresets.tools.search,
+      widgetPresets.tools.viewOptions,
+      widgetPresets.tools.tableAddRow,
+    ],
  });

  private readonly viewSelection$ = computed(() => {
@@ -427,6 +442,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
        headerWidget: this.headerWidget,
        onDrag: this.onDrag,
        clipboard: this.std.clipboard,
+        dnd: this.std.dnd,
        notification: {
          toast: message => {
            const notification = this.std.getOptional(NotificationProvider);
@@ -4,6 +4,7 @@ import { viewConverts, viewPresets } from '@blocksuite/data-view/view-presets';
 export const databaseBlockViews: ViewMeta[] = [
  viewPresets.tableViewMeta,
  viewPresets.kanbanViewMeta,
+  viewPresets.calendarViewMeta,
 ];

 export const databaseBlockViewMap = Object.fromEntries(
@@ -31,5 +31,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -34,5 +34,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -41,5 +41,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -37,5 +37,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -117,7 +117,7 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent<

  override renderBlock() {
    const {
-      title = 'GitHub',
+      title,
      githubType,
      status,
      statusReason,
@@ -139,7 +139,7 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent<
      ? getGithubStatusIcon(githubType, status, statusReason)
      : nothing;
    const statusText = loading ? '' : status;
-    const titleText = loading ? 'Loading...' : title;
+    const titleText = loading ? 'Loading...' : title || 'GitHub';
    const descriptionText = loading ? '' : description;
    const bannerImage =
      !loading && image
@@ -35,7 +35,7 @@ const extractBvid = (url: string) => {

 const buildBiliPlayerEmbedUrl = (url: string) => {
  // If the user pasted the embed URL directly, keep it
-  if (validateEmbedIframeUrl(url, biliPlayerValidationOptions)) {
+  if (isValidBiliPlayerUrl(url)) {
    return url;
  }
  const avid = extractAvid(url);
@@ -57,13 +57,31 @@ const buildBiliPlayerEmbedUrl = (url: string) => {
  return undefined;
 };

-const bilibiliConfig = {
+function isValidBiliPlayerUrl(url: string) {
+  try {
+    if (!validateEmbedIframeUrl(url, biliPlayerValidationOptions)) {
+      return false;
+    }
+    const parsedUrl = new URL(url);
+    return (
+      parsedUrl.pathname === '/player.html' &&
+      (!!parsedUrl.searchParams.get('aid') ||
+        !!parsedUrl.searchParams.get('bvid'))
+    );
+  } catch {
+    return false;
+  }
+}
+
+export const bilibiliConfig = {
  name: 'bilibili',
  match: (url: string) =>
-    validateEmbedIframeUrl(url, bilibiliValidationOptions) &&
-    (!!extractAvid(url) || !!extractBvid(url)),
+    isValidBiliPlayerUrl(url) ||
+    (validateEmbedIframeUrl(url, bilibiliValidationOptions) &&
+      (!!extractAvid(url) || !!extractBvid(url))),
  buildOEmbedUrl: buildBiliPlayerEmbedUrl,
  useOEmbedUrlDirectly: true,
+  validateIframeUrl: (iframeUrl: string) => isValidBiliPlayerUrl(iframeUrl),
  options: {
    widthInSurface: BILIBILI_DEFAULT_WIDTH_IN_SURFACE,
    heightInSurface: BILIBILI_DEFAULT_HEIGHT_IN_SURFACE,
@@ -15,7 +15,7 @@ const excalidrawUrlValidationOptions: EmbedIframeUrlValidationOptions = {
  hostnames: ['excalidraw.com'],
 };

-const excalidrawConfig = {
+export const excalidrawConfig = {
  name: 'excalidraw',
  match: (url: string) =>
    validateEmbedIframeUrl(url, excalidrawUrlValidationOptions),
@@ -27,6 +27,8 @@ const excalidrawConfig = {
    return url;
  },
  useOEmbedUrlDirectly: true,
+  validateIframeUrl: (iframeUrl: string) =>
+    validateEmbedIframeUrl(iframeUrl, excalidrawUrlValidationOptions),
  options: {
    widthInSurface: EXCALIDRAW_DEFAULT_WIDTH_IN_SURFACE,
    heightInSurface: EXCALIDRAW_DEFAULT_HEIGHT_IN_SURFACE,
@@ -1,5 +1,10 @@
 import { EmbedIframeConfigExtension } from '@blocksuite/affine-shared/services';

+import {
+  type EmbedIframeUrlValidationOptions,
+  validateEmbedIframeUrl,
+} from '../../utils';
+
 const GENERIC_DEFAULT_WIDTH_IN_SURFACE = 800;
 const GENERIC_DEFAULT_HEIGHT_IN_SURFACE = 600;
 const GENERIC_DEFAULT_WIDTH_PERCENT = 100;
@@ -17,6 +22,11 @@ const AFFINE_DOMAINS = [
  'apple.getaffineapp.com', // Cloud domain for Apple app
 ];

+const genericUrlValidationOptions: EmbedIframeUrlValidationOptions = {
+  protocols: ['https:'],
+  hostnames: [],
+};
+
 /**
 * Validates if a URL is suitable for generic iframe embedding
 * Allows HTTPS URLs but excludes AFFiNE domains
@@ -27,8 +37,12 @@ function isValidGenericEmbedUrl(url: string): boolean {
  try {
    const parsedUrl = new URL(url);

-    // Only allow HTTPS for security
-    if (parsedUrl.protocol !== 'https:') {
+    if (
+      !validateEmbedIframeUrl(url, {
+        ...genericUrlValidationOptions,
+        hostnames: [parsedUrl.hostname],
+      })
+    ) {
      return false;
    }

@@ -49,7 +63,7 @@ function isValidGenericEmbedUrl(url: string): boolean {
  }
 }

-const genericConfig = {
+export const genericConfig = {
  name: 'generic',
  match: (url: string) => isValidGenericEmbedUrl(url),
  buildOEmbedUrl: (url: string) => {
@@ -59,6 +73,7 @@ const genericConfig = {
    return url;
  },
  useOEmbedUrlDirectly: true,
+  validateIframeUrl: (iframeUrl: string) => isValidGenericEmbedUrl(iframeUrl),
  options: {
    widthInSurface: GENERIC_DEFAULT_WIDTH_IN_SURFACE,
    heightInSurface: GENERIC_DEFAULT_HEIGHT_IN_SURFACE,
@@ -57,7 +57,7 @@ function isValidGoogleDocsUrl(url: string, strictMode = true): boolean {
  }
 }

-const googleDocsConfig = {
+export const googleDocsConfig = {
  name: 'google-docs',
  match: (url: string) => isValidGoogleDocsUrl(url),
  buildOEmbedUrl: (url: string) => {
@@ -67,6 +67,7 @@ const googleDocsConfig = {
    return url;
  },
  useOEmbedUrlDirectly: true,
+  validateIframeUrl: (iframeUrl: string) => isValidGoogleDocsUrl(iframeUrl),
  options: {
    widthInSurface: GOOGLE_DOCS_DEFAULT_WIDTH_IN_SURFACE,
    heightInSurface: GOOGLE_DOCS_DEFAULT_HEIGHT_IN_SURFACE,
@@ -113,6 +113,29 @@ function isValidGoogleDriveUrl(url: string, strictMode = true): boolean {
  }
 }

+function isValidGoogleDriveIframeUrl(url: string): boolean {
+  try {
+    if (!validateEmbedIframeUrl(url, googleDriveUrlValidationOptions)) {
+      return false;
+    }
+
+    const parsedUrl = new URL(url);
+    const pathSegments = parsedUrl.pathname.split('/').filter(Boolean);
+
+    if (isValidGoogleDriveFileUrl(parsedUrl)) {
+      return pathSegments[3] === 'preview';
+    }
+
+    return (
+      parsedUrl.pathname === '/embeddedfolderview' &&
+      !!parsedUrl.searchParams.get('id')
+    );
+  } catch (e) {
+    console.warn('Invalid Google Drive iframe URL:', e);
+    return false;
+  }
+}
+
 /**
 * Build embed URL for Google Drive files
 * @param fileId File ID
@@ -171,7 +194,7 @@ function buildGoogleDriveEmbedUrl(url: string): string | undefined {
  }
 }

-const googleDriveConfig = {
+export const googleDriveConfig = {
  name: 'google-drive',
  match: (url: string) => isValidGoogleDriveUrl(url),
  buildOEmbedUrl: (url: string) => {
@@ -183,6 +206,8 @@ const googleDriveConfig = {
    return buildGoogleDriveEmbedUrl(url);
  },
  useOEmbedUrlDirectly: true,
+  validateIframeUrl: (iframeUrl: string) =>
+    isValidGoogleDriveIframeUrl(iframeUrl),
  options: {
    widthInSurface: GOOGLE_DRIVE_DEFAULT_WIDTH_IN_SURFACE,
    heightInSurface: GOOGLE_DRIVE_DEFAULT_HEIGHT_IN_SURFACE,
@@ -18,7 +18,7 @@ const miroUrlValidationOptions: EmbedIframeUrlValidationOptions = {
  hostnames: ['miro.com'],
 };

-const miroConfig = {
+export const miroConfig = {
  name: 'miro',
  match: (url: string) => validateEmbedIframeUrl(url, miroUrlValidationOptions),
  buildOEmbedUrl: (url: string) => {
@@ -31,6 +31,12 @@ const miroConfig = {
    return oEmbedUrl;
  },
  useOEmbedUrlDirectly: false,
+  validateIframeUrl: (iframeUrl: string) => {
+    if (!validateEmbedIframeUrl(iframeUrl, miroUrlValidationOptions)) {
+      return false;
+    }
+    return new URL(iframeUrl).pathname.startsWith('/app/live-embed/');
+  },
  options: {
    widthInSurface: MIRO_DEFAULT_WIDTH_IN_SURFACE,
    heightInSurface: MIRO_DEFAULT_HEIGHT_IN_SURFACE,
@@ -18,7 +18,12 @@ const spotifyUrlValidationOptions: EmbedIframeUrlValidationOptions = {
  hostnames: ['open.spotify.com', 'spotify.link'],
 };

-const spotifyConfig = {
+const spotifyIframeUrlValidationOptions: EmbedIframeUrlValidationOptions = {
+  protocols: ['https:'],
+  hostnames: ['open.spotify.com'],
+};
+
+export const spotifyConfig = {
  name: 'spotify',
  match: (url: string) =>
    validateEmbedIframeUrl(url, spotifyUrlValidationOptions),
@@ -32,6 +37,13 @@ const spotifyConfig = {
    return oEmbedUrl;
  },
  useOEmbedUrlDirectly: false,
+  validateIframeUrl: (iframeUrl: string) => {
+    if (!validateEmbedIframeUrl(iframeUrl, spotifyIframeUrlValidationOptions)) {
+      return false;
+    }
+    const parsedUrl = new URL(iframeUrl);
+    return parsedUrl.pathname.split('/').find(Boolean) === 'embed';
+  },
  options: {
    widthInSurface: SPOTIFY_DEFAULT_WIDTH_IN_SURFACE,
    heightInSurface: SPOTIFY_DEFAULT_HEIGHT_IN_SURFACE,
@@ -141,7 +141,7 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
      });
      return;
    }
-    window.open(link, '_blank');
+    window.open(link, '_blank', 'noopener,noreferrer');
  };

  refreshData = async () => {
@@ -183,6 +183,12 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra

      // update model
      const iframeUrl = this._getIframeUrl(embedData) ?? currentIframeUrl;
+      if (!this._validateIframeUrl(url, iframeUrl)) {
+        throw new BlockSuiteError(
+          ErrorCode.ValueNotExists,
+          'Invalid embed iframe url'
+        );
+      }
      this.store.updateBlock(this.model, {
        iframeUrl,
        title: embedData?.title || previewData?.title,
@@ -291,6 +297,19 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
    }
  };

+  private readonly _validateIframeUrl = (url: string, iframeUrl?: string) => {
+    if (!iframeUrl) {
+      return false;
+    }
+    const config = this.embedIframeService?.getConfig(url);
+    if (!config) {
+      return false;
+    }
+    return config.validateIframeUrl
+      ? config.validateIframeUrl(iframeUrl, url)
+      : config.match(iframeUrl);
+  };
+
  private readonly _handleDoubleClick = () => {
    this.open();
  };
@@ -329,6 +348,16 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra

  private readonly _renderIframe = () => {
    const { iframeUrl } = this.model.props;
+    if (!iframeUrl || !this._isIframeUrlAllowed(iframeUrl)) {
+      return html`<embed-iframe-error-card
+        .error=${new Error('Invalid iframe URL')}
+        .model=${this.model}
+        .onRetry=${this._handleRetry}
+        .std=${this.std}
+        .inSurface=${this.inSurface}
+        .options=${this._statusCardOptions}
+      ></embed-iframe-error-card>`;
+    }
    const {
      widthPercent,
      heightInNote,
@@ -368,6 +397,10 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
        : nothing}`;
  };

+  private readonly _isIframeUrlAllowed = (iframeUrl: string) => {
+    return this._validateIframeUrl(this.model.props.url, iframeUrl);
+  };
+
  private readonly _getSourceHost = () => {
    const url = this.model.props.url ?? this.model.props.iframeUrl;
    if (!url) return null;
@@ -437,7 +470,12 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
    } else {
      // update iframe options, to ensure the iframe is rendered with the correct options
      this._updateIframeOptions(this.model.props.url);
-      this.status$.value = 'success';
+      this.status$.value = this._validateIframeUrl(
+        this.model.props.url,
+        this.model.props.iframeUrl
+      )
+        ? 'success'
+        : 'error';
    }

    // refresh data when original url changes
@@ -9,6 +9,25 @@ export interface EmbedIframeUrlValidationOptions {
  hostnames: string[]; // Allowed hostnames, e.g. ['docs.google.com']
 }

+function isLocalOrIpHostname(hostname: string): boolean {
+  const lower = hostname.toLowerCase();
+  if (
+    lower === 'localhost' ||
+    lower.endsWith('.localhost') ||
+    lower === '0.0.0.0' ||
+    lower === '::' ||
+    lower === '::1'
+  ) {
+    return true;
+  }
+
+  if (/^\d{1,3}(\.\d{1,3}){3}$/.test(lower)) {
+    return true;
+  }
+
+  return lower.startsWith('[') && lower.endsWith(']');
+}
+
 /**
 * Validate the url is allowed to embed in the iframe
 * @param url URL to validate
@@ -23,6 +42,15 @@ export function validateEmbedIframeUrl(
    const parsedUrl = new URL(url);

    const { protocols, hostnames } = options;
+    if (
+      parsedUrl.username ||
+      parsedUrl.password ||
+      parsedUrl.port ||
+      isLocalOrIpHostname(parsedUrl.hostname)
+    ) {
+      return false;
+    }
+
    return (
      protocols.includes(parsedUrl.protocol) &&
      hostnames.includes(parsedUrl.hostname)
@@ -89,14 +89,14 @@ export class EmbedLoomBlockComponent extends EmbedBlockComponent<
  }

  override renderBlock() {
-    const { image, title = 'Loom', description, videoId } = this.model.props;
+    const { image, title, description, videoId } = this.model.props;

    const loading = this.loading;
    const theme = this.std.get(ThemeProvider).theme;
    const imageProxyService = this.store.get(ImageProxyService);
    const { EmbedCardBannerIcon } = getEmbedCardIcons(theme);
    const titleIcon = loading ? LoadingIcon() : LoomIcon;
-    const titleText = loading ? 'Loading...' : title;
+    const titleText = loading ? 'Loading...' : title || 'Loom';
    const descriptionText = loading ? '' : description;
    const bannerImage =
      !loading && image
@@ -96,21 +96,15 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
  }

  override renderBlock() {
-    const {
-      image,
-      title = 'YouTube',
-      description,
-      creator,
-      creatorImage,
-      videoId,
-    } = this.model.props;
+    const { image, title, description, creator, creatorImage, videoId } =
+      this.model.props;

    const loading = this.loading;
    const theme = this.std.get(ThemeProvider).theme;
    const imageProxyService = this.store.get(ImageProxyService);
    const { EmbedCardBannerIcon } = getEmbedCardIcons(theme);
    const titleIcon = loading ? LoadingIcon() : YoutubeIcon;
-    const titleText = loading ? 'Loading...' : title;
+    const titleText = loading ? 'Loading...' : title || 'YouTube';
    const descriptionText = loading ? null : description;
    const bannerImage =
      !loading && image
@@ -38,5 +38,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -39,5 +39,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -276,7 +276,8 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod

  override renderGfxBlock() {
    const blobUrl = this.blobUrl;
-    const { rotate = 0, size = 0, caption = 'Image' } = this.model.props;
+    const { rotate, size: rawSize, caption = 'Image' } = this.model.props;
+    const size = rawSize ?? 0;
    this._resetLodSource(blobUrl);

    const containerStyleMap = styleMap({
@@ -37,5 +37,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -37,5 +37,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -47,5 +47,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -121,6 +121,38 @@ export const updateBlockType: Command<
    }
    return next({ updatedBlocks: [newModel] });
  };
+  const transformToLatex: Command<{}, { updatedBlocks: BlockModel[] }> = (
+    _,
+    next
+  ) => {
+    if (flavour !== 'affine:latex') return;
+
+    const newModels: BlockModel[] = [];
+    blockModels.forEach(model => {
+      if (
+        !matchModels(model, [
+          ParagraphBlockModel,
+          ListBlockModel,
+          CodeBlockModel,
+        ])
+      ) {
+        return;
+      }
+
+      const latex = model.text?.toString() ?? '';
+      const newId = transformModel(model, 'affine:latex', { latex });
+      if (!newId) {
+        return;
+      }
+      const newModel = doc.getModelById(newId);
+      if (newModel) {
+        newModels.push(newModel);
+      }
+    });
+
+    if (newModels.length === 0) return;
+    return next({ updatedBlocks: newModels });
+  };

  const focusText: Command<{ updatedBlocks: BlockModel[] }> = (ctx, next) => {
    const { updatedBlocks } = ctx;
@@ -185,6 +217,27 @@ export const updateBlockType: Command<
    });
    return next();
  };
+  const selectBlocks: Command<{ updatedBlocks: BlockModel[] }> = (
+    ctx,
+    next
+  ) => {
+    const { updatedBlocks } = ctx;
+    if (!updatedBlocks || updatedBlocks.length === 0) {
+      return false;
+    }
+
+    requestAnimationFrame(() => {
+      host.selection.setGroup(
+        'note',
+        updatedBlocks.map(model =>
+          host.selection.create(BlockSelection, {
+            blockId: model.id,
+          })
+        )
+      );
+    });
+    return next();
+  };

  const [result, resultCtx] = std.command
    .chain()
@@ -196,6 +249,7 @@ export const updateBlockType: Command<
    .try<{ updatedBlocks: BlockModel[] }>(chain => [
      chain.pipe(mergeToCode),
      chain.pipe(appendDivider),
+      chain.pipe(transformToLatex),
      chain.pipe((_, next) => {
        const newModels: BlockModel[] = [];
        blockModels.forEach(model => {
@@ -227,6 +281,14 @@ export const updateBlockType: Command<
    ])
    // focus
    .try(chain => [
+      chain
+        .pipe((_, next) => {
+          if (flavour === 'affine:latex') {
+            return next();
+          }
+          return false;
+        })
+        .pipe(selectBlocks),
      chain.pipe((_, next) => {
        if (['affine:code', 'affine:divider'].includes(flavour)) {
          return next();
@@ -38,5 +38,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -5,10 +5,11 @@ import {
  IN_PARAGRAPH_NODE_CONTEXT_KEY,
  isCalloutNode,
  type MarkdownAST,
+  type MarkdownDeltaConverter,
 } from '@blocksuite/affine-shared/adapters';
-import type { DeltaInsert } from '@blocksuite/store';
+import type { BlockSnapshot, DeltaInsert } from '@blocksuite/store';
 import { nanoid } from '@blocksuite/store';
-import type { Heading } from 'mdast';
+import type { Blockquote, Heading, List, ListItem } from 'mdast';

 /**
 * Extend the HeadingData type to include the collapsed property
@@ -24,6 +25,131 @@ const PARAGRAPH_MDAST_TYPE = new Set(['paragraph', 'heading', 'blockquote']);
 const isParagraphMDASTType = (node: MarkdownAST) =>
  PARAGRAPH_MDAST_TYPE.has(node.type);

+const joinDeltaLines = (
+  lines: DeltaInsert[][],
+  prefix?: string
+): DeltaInsert[] => {
+  const deltas: DeltaInsert[] = [];
+  lines.forEach(line => {
+    if (deltas.length) deltas.push({ insert: '\n' });
+    if (prefix) deltas.push({ insert: prefix });
+    deltas.push(...line);
+  });
+  return deltas;
+};
+
+const flattenListItemToDelta = (
+  node: ListItem,
+  deltaConverter: MarkdownDeltaConverter,
+  prefix: string,
+  depth: number
+): DeltaInsert[] => {
+  const firstParagraph = node.children[0];
+  const lines: DeltaInsert[][] = [];
+  if (firstParagraph?.type === 'paragraph') {
+    lines.push([
+      { insert: prefix },
+      ...deltaConverter.astToDelta(firstParagraph),
+    ]);
+  } else {
+    lines.push([{ insert: prefix.trimEnd() }]);
+  }
+  node.children
+    .slice(firstParagraph?.type === 'paragraph' ? 1 : 0)
+    .forEach(child => {
+      const delta = flattenMarkdownBlockToDelta(
+        child as MarkdownAST,
+        deltaConverter,
+        depth + 1
+      );
+      if (delta.length) {
+        lines.push(delta);
+      }
+    });
+  return joinDeltaLines(lines);
+};
+
+const flattenMarkdownBlockToDelta = (
+  node: MarkdownAST,
+  deltaConverter: MarkdownDeltaConverter,
+  depth = 0
+): DeltaInsert[] => {
+  switch (node.type) {
+    case 'paragraph':
+    case 'heading':
+      return deltaConverter.astToDelta(node);
+    case 'list': {
+      const list = node as List;
+      return joinDeltaLines(
+        list.children.map((item, index) => {
+          const order = (list.start ?? 1) + index;
+          const prefix =
+            '  '.repeat(depth) + (list.ordered ? `${order}. ` : '- ');
+          return flattenListItemToDelta(item, deltaConverter, prefix, depth);
+        })
+      );
+    }
+    case 'blockquote':
+      return flattenBlockquoteToDelta(node as Blockquote, deltaConverter);
+    default:
+      return 'children' in node
+        ? joinDeltaLines(
+            (node.children as MarkdownAST[]).map(child =>
+              flattenMarkdownBlockToDelta(child, deltaConverter, depth)
+            )
+          )
+        : [];
+  }
+};
+
+const flattenBlockquoteToDelta = (
+  node: Blockquote,
+  deltaConverter: MarkdownDeltaConverter
+) =>
+  joinDeltaLines(
+    node.children.map(child =>
+      flattenMarkdownBlockToDelta(child as MarkdownAST, deltaConverter)
+    )
+  );
+
+const getSnapshotTextDelta = (node: BlockSnapshot): DeltaInsert[] => {
+  const text = (node.props.text ?? { delta: [] }) as {
+    delta: DeltaInsert[];
+  };
+  return text.delta;
+};
+
+const flattenSnapshotBlockToDelta = (
+  node: BlockSnapshot,
+  depth = 0
+): DeltaInsert[] => {
+  if (node.flavour === 'affine:list') {
+    const type = node.props.type;
+    const order = (node.props.order as number | undefined) ?? 1;
+    const prefix =
+      '  '.repeat(depth) + (type === 'numbered' ? `${order}. ` : '- ');
+    return joinDeltaLines([
+      [{ insert: prefix }, ...getSnapshotTextDelta(node)],
+      ...node.children.map(child =>
+        flattenSnapshotBlockToDelta(child, depth + 1)
+      ),
+    ]);
+  }
+  return joinDeltaLines([
+    getSnapshotTextDelta(node),
+    ...node.children.map(child => flattenSnapshotBlockToDelta(child, depth)),
+  ]);
+};
+
+const flattenQuoteSnapshotToDelta = (
+  text: DeltaInsert[],
+  children: BlockSnapshot[]
+) =>
+  joinDeltaLines([
+    text,
+    ...children.map(child => flattenSnapshotBlockToDelta(child)),
+  ]);
+
 export const paragraphBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher =
  {
    flavour: ParagraphBlockSchema.model.flavour,
@@ -93,7 +219,10 @@ export const paragraphBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher =
                    type: 'quote',
                    text: {
                      '$blocksuite:internal:text$': true,
-                      delta: deltaConverter.astToDelta(o.node),
+                      delta: flattenBlockquoteToDelta(
+                        o.node as Blockquote,
+                        deltaConverter
+                      ),
                    },
                  },
                  children: [],
@@ -160,6 +289,10 @@ export const paragraphBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher =
            break;
          }
          case 'quote': {
+            const quoteDelta = flattenQuoteSnapshotToDelta(
+              text.delta,
+              o.node.children
+            );
            walkerContext
              .openNode(
                {
@@ -171,12 +304,13 @@ export const paragraphBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher =
              .openNode(
                {
                  type: 'paragraph',
-                  children: deltaConverter.deltaToAST(text.delta),
+                  children: deltaConverter.deltaToAST(quoteDelta),
                },
                'children'
              )
              .closeNode()
              .closeNode();
+            walkerContext.skipAllChildren();
            break;
          }
        }
@@ -42,7 +42,7 @@ export class ParagraphHeadingIcon extends SignalWatcher(
      margin-top: 0.3em;
      position: absolute;
      left: 0;
-      transform: translateX(-64px);
+      transform: translateX(-80px);
      border-radius: 4px;
      padding: 2px;
      cursor: pointer;
@@ -101,6 +101,9 @@ export const ParagraphKeymapExtension = KeymapExtension(
        return true;
      },
      Enter: ctx => {
+        const raw = ctx.get('keyboardState').raw;
+        if (raw.isComposing) return;
+
        const { store } = std;
        const text = std.selection.find(TextSelection);
        if (!text) return;
@@ -115,7 +118,6 @@ export const ParagraphKeymapExtension = KeymapExtension(
        const inlineRange = inlineEditor?.getInlineRange();
        if (!inlineRange || !inlineEditor) return;

-        const raw = ctx.get('keyboardState').raw;
        const isEnd = model.props.text.length === inlineRange.index;

        if (model.props.type === 'quote') {
@@ -30,6 +30,7 @@
    "@blocksuite/affine-gfx-pointer": "workspace:*",
    "@blocksuite/affine-gfx-shape": "workspace:*",
    "@blocksuite/affine-gfx-text": "workspace:*",
+    "@blocksuite/affine-inline-latex": "workspace:*",
    "@blocksuite/affine-inline-preset": "workspace:*",
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-rich-text": "workspace:*",
@@ -42,7 +43,7 @@
    "@blocksuite/store": "workspace:*",
    "@preact/signals-core": "^1.8.0",
    "@types/lodash-es": "^4.17.12",
-    "dompurify": "^3.3.0",
+    "dompurify": "^3.4.11",
    "html2canvas": "^1.4.1",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.23",
@@ -60,5 +61,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -15,6 +15,7 @@ import {
 import type { HighlightType } from '@blocksuite/affine-components/highlight-dropdown-menu';
 import { toast } from '@blocksuite/affine-components/toast';
 import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
+import { insertInlineLatex } from '@blocksuite/affine-inline-latex';
 import {
  deleteTextCommand,
  formatBlockCommand,
@@ -61,6 +62,7 @@ import {
  DeleteIcon,
  DuplicateIcon,
  LinkedPageIcon,
+  TeXIcon,
 } from '@blocksuite/icons/lit';
 import {
  type BlockComponent,
@@ -199,9 +201,9 @@ const alignActionGroup = {
 const inlineTextActionGroup = {
  id: 'b.inline-text',
  when: ({ chain }) => isFormatSupported(chain).run()[0],
-  actions: textFormatConfigs.map(
+  actions: textFormatConfigs.flatMap(
    ({ id, name, action, activeWhen, icon }, score) => {
-      return {
+      const textAction: ToolbarAction = {
        id,
        icon,
        score,
@@ -209,6 +211,28 @@ const inlineTextActionGroup = {
        run: ({ host }) => action(host),
        active: ({ host }) => activeWhen(host),
      };
+
+      if (id !== 'underline') {
+        return [textAction];
+      }
+
+      return [
+        textAction,
+        {
+          id: 'inline-latex',
+          icon: TeXIcon(),
+          score: score + 0.5,
+          tooltip: 'Inline Equation',
+          run: ({ host }) => {
+            host.std.command
+              .chain()
+              .pipe(getTextSelectionCommand)
+              .pipe(insertInlineLatex)
+              .run();
+          },
+          active: () => false,
+        },
+      ];
    }
  ),
 } as const satisfies ToolbarActionGroup;
@@ -212,7 +212,7 @@ export class EdgelessRootBlockComponent extends BlockComponent<
          currentCenter.y
        );

-        viewport.setZoom(zoom, new Point(baseX, baseY));
+        viewport.setZoom(zoom, new Point(baseX, baseY), false, true, true);

        return false;
      })
@@ -351,7 +351,7 @@ export class EdgelessRootBlockComponent extends BlockComponent<
          );

          const zoom = normalizeWheelDeltaY(e.deltaY, viewport.zoom);
-          viewport.setZoom(zoom, new Point(baseX, baseY), true);
+          viewport.setZoom(zoom, new Point(baseX, baseY), true, true, true);
          e.stopPropagation();
        }
        // pan
@@ -484,7 +484,7 @@ export class EdgelessRootBlockComponent extends BlockComponent<
          .viewport=${this.gfx.viewport}
          .getModelsInViewport=${() => {
            const blocks = this.gfx.grid.search(
-              this.gfx.viewport.viewportBounds,
+              this.gfx.viewport.overscanBlockBounds,
              {
                useSet: true,
                filter: ['block'],
@@ -230,7 +230,7 @@ export class EdgelessRootPreviewBlockComponent extends BlockComponent<RootBlockM
          .viewport=${this._gfx.viewport}
          .getModelsInViewport=${() => {
            const blocks = this._gfx.grid.search(
-              this._gfx.viewport.viewportBounds,
+              this._gfx.viewport.overscanBlockBounds,
              {
                useSet: true,
                filter: ['block'],
@@ -27,6 +27,7 @@
    { "path": "../../gfx/pointer" },
    { "path": "../../gfx/shape" },
    { "path": "../../gfx/text" },
+    { "path": "../../inlines/latex" },
    { "path": "../../inlines/preset" },
    { "path": "../../model" },
    { "path": "../../rich-text" },
@@ -36,5 +36,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -28,7 +28,7 @@
    "yjs": "^13.6.27"
  },
  "devDependencies": {
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.8"
  },
  "exports": {
    ".": "./src/index.ts",
@@ -41,5 +41,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -2,6 +2,7 @@ import { type Color, ColorScheme } from '@blocksuite/affine-model';
 import { FeatureFlagService } from '@blocksuite/affine-shared/services';
 import { requestConnectedFrame } from '@blocksuite/affine-shared/utils';
 import { DisposableGroup } from '@blocksuite/global/disposable';
+import { IS_IOS } from '@blocksuite/global/env';
 import {
  Bound,
  getBoundWithRotation,
@@ -18,7 +19,12 @@ import type {
  SurfaceBlockModel,
  Viewport,
 } from '@blocksuite/std/gfx';
-import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
+import {
+  getEffectiveDpr,
+  getPostGestureRecoveryDelay,
+  GfxControllerIdentifier,
+  viewportRuntimeConfig,
+} from '@blocksuite/std/gfx';
 import { effect } from '@preact/signals-core';
 import last from 'lodash-es/last';
 import { Subject } from 'rxjs';
@@ -28,6 +34,7 @@ import { ElementRendererIdentifier } from '../extensions/element-renderer.js';
 import { RoughCanvas } from '../utils/rough/canvas.js';
 import type { ElementRenderer } from './elements/index.js';
 import type { Overlay } from './overlay.js';
+import { resolveSurfacePlaceholderColor } from './placeholder-style.js';

 type EnvProvider = {
  generateColorProperty: (color: Color, fallback?: Color) => string;
@@ -116,6 +123,181 @@ type RefreshTarget =
    };

 const STACKING_CANVAS_PADDING = 32;
+const IOS_LOW_ZOOM_SURVIVAL_THRESHOLD = 0.5;
+
+export function shouldSyncCanvasBudgetOnViewportUpdate(
+  previousZoom: number,
+  nextZoom: number,
+  rawDpr = window.devicePixelRatio
+) {
+  if (rawDpr <= 1) {
+    return false;
+  }
+
+  return (
+    getEffectiveDpr(previousZoom, rawDpr) !== getEffectiveDpr(nextZoom, rawDpr)
+  );
+}
+
+export function shouldUseLowZoomSurvivalMode(
+  isIOS: boolean,
+  zoom: number,
+  gestureActive: boolean
+) {
+  return isIOS && gestureActive && zoom <= IOS_LOW_ZOOM_SURVIVAL_THRESHOLD;
+}
+
+export function getStackingCanvasBypassState(params: {
+  isIOS: boolean;
+  zoom: number;
+  gestureActive: boolean;
+  recoveryActive: boolean;
+  viewportWidth: number;
+  viewportHeight: number;
+}) {
+  const {
+    isIOS,
+    zoom,
+    gestureActive,
+    recoveryActive,
+    viewportWidth,
+    viewportHeight,
+  } = params;
+
+  return (
+    isIOS &&
+    zoom <= IOS_LOW_ZOOM_SURVIVAL_THRESHOLD &&
+    (gestureActive || recoveryActive) &&
+    viewportWidth > viewportHeight
+  );
+}
+
+export function shouldBypassStackingCanvasesDuringLowZoomGesture(params: {
+  isIOS: boolean;
+  zoom: number;
+  gestureActive: boolean;
+  recoveryActive: boolean;
+  viewportWidth: number;
+  viewportHeight: number;
+}) {
+  return getStackingCanvasBypassState(params);
+}
+
+export function getStackingCanvasAttachmentDiff(params: {
+  canvases: HTMLCanvasElement[];
+  wasAttached: boolean;
+  shouldAttach: boolean;
+}) {
+  const { canvases, wasAttached, shouldAttach } = params;
+
+  if (wasAttached === shouldAttach) {
+    return {
+      added: [],
+      removed: [],
+    };
+  }
+
+  return shouldAttach
+    ? {
+        added: canvases,
+        removed: [],
+      }
+    : {
+        added: [],
+        removed: canvases,
+      };
+}
+
+export function getMainCanvasFallbackBounds(params: {
+  viewportBounds: Bound;
+  overscanViewportBounds: Bound;
+}) {
+  const { overscanViewportBounds } = params;
+
+  return {
+    cullBound: overscanViewportBounds,
+    renderBound: overscanViewportBounds,
+  };
+}
+
+export function getCanvasViewportLayout(params: {
+  bound: Bound;
+  viewportBounds: Bound;
+  zoom: number;
+  viewScale: number;
+  dpr: number;
+}) {
+  const { bound, viewportBounds, zoom, viewScale, dpr } = params;
+  const width = bound.w * zoom;
+  const height = bound.h * zoom;
+  const left = (bound.x - viewportBounds.x) * zoom;
+  const top = (bound.y - viewportBounds.y) * zoom;
+
+  return {
+    actualHeight: Math.max(0, Math.ceil(height * dpr)),
+    actualWidth: Math.max(0, Math.ceil(width * dpr)),
+    height,
+    transform: `translate(${left}px, ${top}px) scale(${1 / viewScale})`,
+    width,
+  };
+}
+
+function applyCanvasViewportLayout(
+  canvas: HTMLCanvasElement,
+  layout: ReturnType<typeof getCanvasViewportLayout>
+) {
+  const width = `${layout.width}px`;
+  const height = `${layout.height}px`;
+
+  if (canvas.style.left !== '0px') {
+    canvas.style.left = '0px';
+  }
+  if (canvas.style.top !== '0px') {
+    canvas.style.top = '0px';
+  }
+  if (canvas.style.width !== width) {
+    canvas.style.width = width;
+  }
+  if (canvas.style.height !== height) {
+    canvas.style.height = height;
+  }
+  if (canvas.style.transform !== layout.transform) {
+    canvas.style.transform = layout.transform;
+  }
+  if (canvas.style.transformOrigin !== 'top left') {
+    canvas.style.transformOrigin = 'top left';
+  }
+  if (canvas.width !== layout.actualWidth) {
+    canvas.width = layout.actualWidth;
+  }
+  if (canvas.height !== layout.actualHeight) {
+    canvas.height = layout.actualHeight;
+  }
+}
+
+export function shouldRenderCanvasPlaceholders(params: {
+  isIOS: boolean;
+  zoom: number;
+  isPanning: boolean;
+  isZooming: boolean;
+  skipRefreshDuringGesture: boolean;
+  turboEnabled: boolean;
+}) {
+  const {
+    isIOS,
+    zoom,
+    isPanning,
+    isZooming,
+    skipRefreshDuringGesture,
+    turboEnabled,
+  } = params;
+
+  if (shouldUseLowZoomSurvivalMode(isIOS, zoom, isZooming)) {
+    return true;
+  }
+
+  return !skipRefreshDuringGesture && turboEnabled && isZooming && !isPanning;
+}

 export class CanvasRenderer {
  private _container!: HTMLElement;
@@ -145,6 +327,19 @@ export class CanvasRenderer {

  private _needsFullRender = true;

+  private _lastCanvasBudgetZoom = 1;
+
+  private _lastLowZoomSurvivalMode = false;
+
+  private _lastBypassStackingCanvases = false;
+
+  private _stackingCanvasesAttached = true;
+
+  private _stackingCanvasRecoveryUntil = 0;
+
+  private _stackingCanvasRecoveryTimerId: ReturnType<typeof setTimeout> | null =
+    null;
+
  private _debugMetrics: MutableCanvasRendererDebugMetrics = {
    refreshCount: 0,
    coalescedRefreshCount: 0,
@@ -189,6 +384,10 @@ export class CanvasRenderer {
    return this._stackingCanvas;
  }

+  get stackingCanvasesAttached() {
+    return this._stackingCanvasesAttached;
+  }
+
  constructor(options: RendererOptions) {
    const canvas = document.createElement('canvas');

@@ -196,6 +395,7 @@ export class CanvasRenderer {
    this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D;
    this.std = options.std;
    this.viewport = options.viewport;
+    this._lastCanvasBudgetZoom = this.viewport.zoom;
    this.layerManager = options.layerManager;
    this.grid = options.gridManager;
    this.provider = options.provider ?? {};
@@ -223,22 +423,28 @@ export class CanvasRenderer {
   *
   * It is not recommended to set width and height to 100%.
   */
-  private _canvasSizeUpdater(dpr = window.devicePixelRatio) {
-    const { width, height, viewScale } = this.viewport;
-    const actualWidth = Math.ceil(width * dpr);
-    const actualHeight = Math.ceil(height * dpr);
+  private _canvasSizeUpdater(
+    bound = this.viewport.overscanViewportBounds,
+    dpr = getEffectiveDpr(this.viewport.zoom)
+  ) {
+    const layout = getCanvasViewportLayout({
+      bound,
+      viewportBounds: this.viewport.viewportBounds,
+      zoom: this.viewport.zoom,
+      viewScale: this.viewport.viewScale,
+      dpr,
+    });

    return {
-      filter({ width, height }: HTMLCanvasElement) {
-        return width !== actualWidth || height !== actualHeight;
+      filter(canvas: HTMLCanvasElement) {
+        return (
+          canvas.width !== layout.actualWidth ||
+          canvas.height !== layout.actualHeight ||
+          canvas.style.transform !== layout.transform
+        );
      },
      update(canvas: HTMLCanvasElement) {
-        canvas.style.width = `${width}px`;
-        canvas.style.height = `${height}px`;
-        canvas.style.transform = `scale(${1 / viewScale})`;
-        canvas.style.transformOrigin = `top left`;
-        canvas.width = actualWidth;
-        canvas.height = actualHeight;
+        applyCanvasViewportLayout(canvas, layout);
      },
    };
  }
@@ -246,7 +452,7 @@ export class CanvasRenderer {
  private _applyStackingCanvasLayout(
    canvas: HTMLCanvasElement,
    bound: Bound | null,
-    dpr = window.devicePixelRatio
+    dpr = getEffectiveDpr(this.viewport.zoom)
  ) {
    const state =
      this._stackingCanvasState.get(canvas) ??
@@ -270,44 +476,18 @@ export class CanvasRenderer {
      return;
    }

-    const { viewportBounds, zoom, viewScale } = this.viewport;
-    const width = bound.w * zoom;
-    const height = bound.h * zoom;
-    const left = (bound.x - viewportBounds.x) * zoom;
-    const top = (bound.y - viewportBounds.y) * zoom;
-    const actualWidth = Math.max(1, Math.ceil(width * dpr));
-    const actualHeight = Math.max(1, Math.ceil(height * dpr));
-    const transform = `translate(${left}px, ${top}px) scale(${1 / viewScale})`;
+    const layout = getCanvasViewportLayout({
+      bound,
+      viewportBounds: this.viewport.viewportBounds,
+      zoom: this.viewport.zoom,
+      viewScale: this.viewport.viewScale,
+      dpr,
+    });

    if (canvas.style.display !== 'block') {
      canvas.style.display = 'block';
    }
-    if (canvas.style.left !== '0px') {
-      canvas.style.left = '0px';
-    }
-    if (canvas.style.top !== '0px') {
-      canvas.style.top = '0px';
-    }
-    if (canvas.style.width !== `${width}px`) {
-      canvas.style.width = `${width}px`;
-    }
-    if (canvas.style.height !== `${height}px`) {
-      canvas.style.height = `${height}px`;
-    }
-    if (canvas.style.transform !== transform) {
-      canvas.style.transform = transform;
-    }
-    if (canvas.style.transformOrigin !== 'top left') {
-      canvas.style.transformOrigin = 'top left';
-    }
-
-    if (canvas.width !== actualWidth) {
-      canvas.width = actualWidth;
-    }
-
-    if (canvas.height !== actualHeight) {
-      canvas.height = actualHeight;
-    }
+    applyCanvasViewportLayout(canvas, layout);

    state.bound = bound;
    state.layerId = canvas.dataset.layerId ?? null;
@@ -434,6 +614,125 @@ export class CanvasRenderer {
    this._applyStackingCanvasLayout(canvas, null);
  }

+  private _syncStackingCanvasAttachment(shouldAttach: boolean) {
+    const payloadDiff = getStackingCanvasAttachmentDiff({
+      canvases: this._stackingCanvas,
+      wasAttached: this._stackingCanvasesAttached,
+      shouldAttach,
+    });
+
+    this._stackingCanvasesAttached = shouldAttach;
+
+    if (!payloadDiff.added.length && !payloadDiff.removed.length) {
+      return;
+    }
+
+    this.stackingCanvasUpdated.next({
+      canvases: this._stackingCanvas,
+      ...payloadDiff,
+    });
+  }
+
+  private _isStackingCanvasRecoveryActive() {
+    return this._stackingCanvasRecoveryUntil > performance.now();
+  }
+
+  private _clearStackingCanvasRecoveryTimer() {
+    if (this._stackingCanvasRecoveryTimerId !== null) {
+      clearTimeout(this._stackingCanvasRecoveryTimerId);
+      this._stackingCanvasRecoveryTimerId = null;
+    }
+  }
+
+  private _scheduleStackingCanvasRecoveryWindow(
+    delayMs = viewportRuntimeConfig.POST_GESTURE_REFRESH_DELAY
+  ) {
+    this._clearStackingCanvasRecoveryTimer();
+    this._stackingCanvasRecoveryUntil = performance.now() + delayMs;
+    this._stackingCanvasRecoveryTimerId = setTimeout(() => {
+      this._stackingCanvasRecoveryTimerId = null;
+      this._stackingCanvasRecoveryUntil = 0;
+      if (this._container) {
+        this._updatePlaceholderMode();
+      }
+    }, delayMs);
+  }
+
+  private _syncCanvasBudgetForViewportZoom() {
+    const nextZoom = this.viewport.zoom;
+
+    if (
+      !shouldSyncCanvasBudgetOnViewportUpdate(
+        this._lastCanvasBudgetZoom,
+        nextZoom
+      )
+    ) {
+      this._lastCanvasBudgetZoom = nextZoom;
+      return;
+    }
+
+    this._lastCanvasBudgetZoom = nextZoom;
+    this._resetSize();
+    this._render();
+  }
+
+  private _updatePlaceholderMode() {
+    const gestureActive =
+      this.viewport.panning$.value || this.viewport.zooming$.value;
+    const recoveryActive = this._isStackingCanvasRecoveryActive();
+    const lowZoomSurvivalMode = shouldUseLowZoomSurvivalMode(
+      IS_IOS,
+      this.viewport.zoom,
+      gestureActive
+    );
+    const shouldBypassStackingCanvases =
+      shouldBypassStackingCanvasesDuringLowZoomGesture({
+        isIOS: IS_IOS,
+        zoom: this.viewport.zoom,
+        gestureActive,
+        recoveryActive,
+        viewportWidth: this.viewport.width,
+        viewportHeight: this.viewport.height,
+      });
+    const shouldRenderPlaceholders = shouldRenderCanvasPlaceholders({
+      isIOS: IS_IOS,
+      zoom: this.viewport.zoom,
+      isPanning: this.viewport.panning$.value,
+      isZooming: this.viewport.zooming$.value,
+      skipRefreshDuringGesture: this.viewport.SKIP_REFRESH_DURING_GESTURE,
+      turboEnabled: this._turboEnabled(),
+    });
+
+    const bypassModeChanged =
+      this._lastBypassStackingCanvases !== shouldBypassStackingCanvases;
+
+    this._syncStackingCanvasAttachment(!shouldBypassStackingCanvases);
+
+    if (this.usePlaceholder === shouldRenderPlaceholders) {
+      this._lastLowZoomSurvivalMode = lowZoomSurvivalMode;
+      this._lastBypassStackingCanvases = shouldBypassStackingCanvases;
+      if (bypassModeChanged) {
+        this.refresh({ type: 'all' });
+      }
+      return;
+    }
+
+    this.usePlaceholder = shouldRenderPlaceholders;
+    const survivalModeChanged =
+      this._lastLowZoomSurvivalMode !== lowZoomSurvivalMode;
+    this._lastLowZoomSurvivalMode = lowZoomSurvivalMode;
+    this._lastBypassStackingCanvases = shouldBypassStackingCanvases;
+
+    if (
+      survivalModeChanged ||
+      bypassModeChanged ||
+      !this.viewport.SKIP_REFRESH_DURING_GESTURE ||
+      !gestureActive
+    ) {
+      this.refresh({ type: 'all' });
+    }
+  }
+
  private _initStackingCanvas(onCreated?: (canvas: HTMLCanvasElement) => void) {
    const layer = this.layerManager;
    const updateStackingCanvas = () => {
@@ -476,7 +775,9 @@ export class CanvasRenderer {
        };

        if (diff > 0) {
-          payload.added = canvases.slice(-diff);
+          if (this._stackingCanvasesAttached) {
+            payload.added = canvases.slice(-diff);
+          }
        } else {
          payload.removed = currentCanvases.slice(diff);
          payload.removed.forEach(canvas => {
@@ -485,7 +786,9 @@ export class CanvasRenderer {
          });
        }

-        this.stackingCanvasUpdated.next(payload);
+        if (payload.added.length || payload.removed.length) {
+          this.stackingCanvasUpdated.next(payload);
+        }
      }

      this.refresh({ type: 'all' });
@@ -503,41 +806,131 @@ export class CanvasRenderer {
  private _initViewport() {
    let sizeUpdatedRafId: number | null = null;

+    this._disposables.add({
+      dispose: () => this._clearStackingCanvasRecoveryTimer(),
+    });
+
+    this._disposables.add(
+      this.viewport.zoomUpdated.subscribe(() => {
+        this._syncCanvasBudgetForViewportZoom();
+      })
+    );
+
    this._disposables.add(
      this.viewport.viewportUpdated.subscribe(() => {
+        this._updatePlaceholderMode();
+        if (
+          this.viewport.SKIP_REFRESH_DURING_GESTURE &&
+          (this.viewport.panning$.value || this.viewport.zooming$.value)
+        ) {
+          return;
+        }
        this.refresh({ type: 'all' });
      })
    );

    this._disposables.add(
      this.viewport.sizeUpdated.subscribe(() => {
+        if (
+          IS_IOS &&
+          this.viewport.zoom <= IOS_LOW_ZOOM_SURVIVAL_THRESHOLD &&
+          this.viewport.width > this.viewport.height
+        ) {
+          this._scheduleStackingCanvasRecoveryWindow();
+          if (this._container) {
+            this._updatePlaceholderMode();
+          }
+        }
+
        if (sizeUpdatedRafId) return;
        sizeUpdatedRafId = requestConnectedFrame(() => {
          sizeUpdatedRafId = null;
          this._resetSize();
-          this._render();
+          // When SKIP_REFRESH_DURING_GESTURE is active, schedule the render
+          // after a short delay to let the layout settle on orientation change,
+          // avoiding a white-flash from resizing + rendering in the same frame.
+          if (this.viewport.SKIP_REFRESH_DURING_GESTURE) {
+            setTimeout(() => this._render(), 16);
+          } else {
+            this._render();
+          }
        }, this._container);
      })
    );

    this._disposables.add(
-      this.viewport.zooming$.subscribe(isZooming => {
-        const shouldRenderPlaceholders = this._turboEnabled() && isZooming;
-
-        if (this.usePlaceholder !== shouldRenderPlaceholders) {
-          this.usePlaceholder = shouldRenderPlaceholders;
-          this.refresh({ type: 'all' });
-        }
+      this.viewport.zooming$.subscribe(() => {
+        this._updatePlaceholderMode();
      })
    );

+    // When SKIP_REFRESH_DURING_GESTURE is enabled, defer heavy canvas work
+    // while the gesture is still in-flight, but start the first recovery frame
+    // immediately once both gesture signals have fully settled.
+    if (this.viewport.SKIP_REFRESH_DURING_GESTURE) {
+      let pendingCanvasTimerId: ReturnType<typeof setTimeout> | null = null;
+
+      const cancelPendingCanvasRefresh = () => {
+        if (pendingCanvasTimerId !== null) {
+          clearTimeout(pendingCanvasTimerId);
+          pendingCanvasTimerId = null;
+        }
+      };
+
+      const scheduleCanvasRefresh = () => {
+        cancelPendingCanvasRefresh();
+        const delayMs = getPostGestureRecoveryDelay({
+          isPanning: this.viewport.panning$.value,
+          isZooming: this.viewport.zooming$.value,
+          fallbackDelayMs: viewportRuntimeConfig.POST_GESTURE_REFRESH_DELAY,
+        });
+        pendingCanvasTimerId = setTimeout(() => {
+          pendingCanvasTimerId = null;
+          // If a gesture is still in-flight when the timer fires, reschedule
+          // instead of dropping. Dropping here left connectors blank until a
+          // tap forced a synchronous refresh.
+          if (this.viewport.panning$.value || this.viewport.zooming$.value) {
+            scheduleCanvasRefresh();
+            return;
+          }
+          this.refresh({ type: 'all' });
+        }, delayMs);
+      };
+
+      this._disposables.add(
+        this.viewport.panning$.subscribe(panning => {
+          this._updatePlaceholderMode();
+          if (panning) {
+            cancelPendingCanvasRefresh();
+          } else {
+            scheduleCanvasRefresh();
+          }
+        })
+      );
+      this._disposables.add(
+        this.viewport.zooming$.subscribe(zooming => {
+          this._updatePlaceholderMode();
+          if (zooming) {
+            cancelPendingCanvasRefresh();
+          } else {
+            scheduleCanvasRefresh();
+          }
+        })
+      );
+      this._disposables.add({ dispose: cancelPendingCanvasRefresh });
+    }
+
    let wasDragging = false;
    this._disposables.add(
      effect(() => {
        const isDragging = this._gfx.tool.dragging$.value;

        if (wasDragging && !isDragging) {
-          this.refresh({ type: 'all' });
+          if (this.viewport.panning$.value || this.viewport.zooming$.value) {
+            // Deferred refresh will handle it after gesture ends
+          } else {
+            this.refresh({ type: 'all' });
+          }
        }

        wasDragging = isDragging;
@@ -572,16 +965,34 @@ export class CanvasRenderer {

  private _render() {
    const renderStart = performance.now();
-    const { viewportBounds, zoom } = this.viewport;
+    const { overscanViewportBounds, viewportBounds, zoom } = this.viewport;
+    const {
+      cullBound: mainCanvasCullBound,
+      renderBound: mainCanvasRenderBound,
+    } = getMainCanvasFallbackBounds({
+      viewportBounds,
+      overscanViewportBounds,
+    });
    const { ctx } = this;
-    const dpr = window.devicePixelRatio;
+    const dpr = getEffectiveDpr(zoom);
    const scale = zoom * dpr;
    const matrix = new DOMMatrix().scaleSelf(scale);
    const renderStats = this._createRenderPassStats();
    const fullRender = this._needsFullRender;
-    const stackingIndexesToRender = fullRender
-      ? this._stackingCanvas.map((_, idx) => idx)
-      : [...this._dirtyStackingCanvasIndexes];
+    const bypassStackingCanvases = getStackingCanvasBypassState({
+      isIOS: IS_IOS,
+      zoom: this.viewport.zoom,
+      gestureActive:
+        this.viewport.panning$.value || this.viewport.zooming$.value,
+      recoveryActive: this._isStackingCanvasRecoveryActive(),
+      viewportWidth: this.viewport.width,
+      viewportHeight: this.viewport.height,
+    });
+    const stackingIndexesToRender = bypassStackingCanvases
+      ? []
+      : fullRender
+        ? this._stackingCanvas.map((_, idx) => idx)
+        : [...this._dirtyStackingCanvasIndexes];
    /**
     * if a layer does not have a corresponding canvas
     * its element will be add to this array and drawing on the
@@ -589,7 +1000,15 @@ export class CanvasRenderer {
     */
    let fallbackElement: SurfaceElementModel[] = [];
    const allCanvasLayers = this.layerManager.getCanvasLayers();
-    const viewportBound = Bound.from(viewportBounds);
+    const stackingViewportBound = Bound.from(overscanViewportBounds);
+
+    this._canvasSizeUpdater(mainCanvasRenderBound, dpr).update(this.canvas);
+
+    if (bypassStackingCanvases) {
+      this._stackingCanvas.forEach(canvas => {
+        this._applyStackingCanvasLayout(canvas, null, dpr);
+      });
+    }

    for (const idx of stackingIndexesToRender) {
      const layer = allCanvasLayers[idx];
@@ -601,7 +1020,7 @@ export class CanvasRenderer {

      const layerRenderBound = this._getLayerRenderBound(
        layer.elements,
-        viewportBound
+        stackingViewportBound
      );
      const resolvedLayerRenderBound = this._getResolvedStackingCanvasBound(
        canvas,
@@ -638,7 +1057,12 @@ export class CanvasRenderer {

    if (fullRender || this._mainCanvasDirty) {
      allCanvasLayers.forEach((layer, idx) => {
-        if (!this._stackingCanvas[idx]) {
+        if (
+          bypassStackingCanvases ||
+          !this._stackingCanvas[idx] ||
+          this._stackingCanvas[idx].width === 0 ||
+          this._stackingCanvas[idx].height === 0
+        ) {
          fallbackElement = fallbackElement.concat(layer.elements);
        }
      });
@@ -651,10 +1075,11 @@ export class CanvasRenderer {
        ctx,
        matrix,
        new RoughCanvas(ctx.canvas),
-        viewportBounds,
+        mainCanvasRenderBound,
        fallbackElement,
        true,
-        renderStats
+        renderStats,
+        mainCanvasCullBound
      );
    }

@@ -726,7 +1151,8 @@ export class CanvasRenderer {
    bound: IBound,
    surfaceElements?: SurfaceElementModel[],
    overLay: boolean = false,
-    renderStats?: RenderPassStats
+    renderStats?: RenderPassStats,
+    cullBound: IBound = bound
  ) {
    if (!ctx) return;

@@ -734,13 +1160,13 @@ export class CanvasRenderer {

    const elements =
      surfaceElements ??
-      (this.grid.search(bound, {
+      (this.grid.search(cullBound, {
        filter: ['canvas', 'local'],
      }) as SurfaceElementModel[]);

    for (const element of elements) {
      const display = (element.display ?? true) && !element.hidden;
-      if (display && intersects(getBoundWithRotation(element), bound)) {
+      if (display && intersects(getBoundWithRotation(element), cullBound)) {
        renderStats && (renderStats.visibleElementCount += 1);
        if (
          this.usePlaceholder &&
@@ -748,7 +1174,7 @@ export class CanvasRenderer {
        ) {
          renderStats && (renderStats.placeholderElementCount += 1);
          ctx.save();
-          ctx.fillStyle = 'rgba(200, 200, 200, 0.5)';
+          ctx.fillStyle = resolveSurfacePlaceholderColor(this.getColorScheme());
          const drawX = element.x - bound.x;
          const drawY = element.y - bound.y;
          ctx.fillRect(drawX, drawY, element.w, element.h);
@@ -785,9 +1211,12 @@ export class CanvasRenderer {
  }

  private _resetSize() {
-    const sizeUpdater = this._canvasSizeUpdater();
+    const sizeUpdater = this._canvasSizeUpdater(
+      this.viewport.overscanViewportBounds
+    );

    sizeUpdater.update(this.canvas);
+    this._lastCanvasBudgetZoom = this.viewport.zoom;
    this._invalidate({ type: 'all' });
  }

@@ -838,6 +1267,7 @@ export class CanvasRenderer {
    this._container = container;
    container.append(this.canvas);

+    this._updatePlaceholderMode();
    this._resetSize();
    this.refresh({ type: 'all' });
  }
@@ -864,8 +1294,11 @@ export class CanvasRenderer {
    canvas = canvas || document.createElement('canvas');

    const dpr = window.devicePixelRatio || 1;
-    if (canvas.width !== bound.w * dpr) canvas.width = bound.w * dpr;
-    if (canvas.height !== bound.h * dpr) canvas.height = bound.h * dpr;
+    const actualWidth = Math.ceil(bound.w * dpr);
+    const actualHeight = Math.ceil(bound.h * dpr);
+
+    if (canvas.width !== actualWidth) canvas.width = actualWidth;
+    if (canvas.height !== actualHeight) canvas.height = actualHeight;

    canvas.style.width = `${bound.w}px`;
    canvas.style.height = `${bound.h}px`;
@@ -19,12 +19,14 @@ import type {
  SurfaceBlockModel,
  Viewport,
 } from '@blocksuite/std/gfx';
+import { viewportRuntimeConfig } from '@blocksuite/std/gfx';
 import { Subject } from 'rxjs';

 import type { SurfaceElementModel } from '../element-model/base.js';
 import type { DomElementRenderer } from './dom-elements/index.js';
 import { DomElementRendererIdentifier } from './dom-elements/index.js';
 import type { Overlay } from './overlay.js';
+import { resolveSurfacePlaceholderColor } from './placeholder-style.js';

 type EnvProvider = {
  generateColorProperty: (color: Color, fallback?: Color) => string;
@@ -222,6 +224,12 @@ export class DomRenderer {
  private _initViewport() {
    this._disposables.add(
      this.viewport.viewportUpdated.subscribe(() => {
+        if (
+          this.viewport.SKIP_REFRESH_DURING_GESTURE &&
+          (this.viewport.panning$.value || this.viewport.zooming$.value)
+        ) {
+          return;
+        }
        this._markViewportDirty();
        this.refresh();
      })
@@ -242,6 +250,9 @@ export class DomRenderer {

    this._disposables.add(
      this.viewport.zooming$.subscribe(isZooming => {
+        if (this.viewport.SKIP_REFRESH_DURING_GESTURE) {
+          return;
+        }
        const shouldRenderPlaceholders = this._turboEnabled() && isZooming;

        if (this.usePlaceholder !== shouldRenderPlaceholders) {
@@ -252,6 +263,43 @@ export class DomRenderer {
      })
    );

+    // Post-gesture refresh for SKIP mode
+    if (this.viewport.SKIP_REFRESH_DURING_GESTURE) {
+      let pendingTimerId: ReturnType<typeof setTimeout> | null = null;
+
+      const cancelRefresh = () => {
+        if (pendingTimerId !== null) {
+          clearTimeout(pendingTimerId);
+          pendingTimerId = null;
+        }
+      };
+
+      const scheduleRefresh = () => {
+        cancelRefresh();
+        pendingTimerId = setTimeout(() => {
+          pendingTimerId = null;
+          if (!this.viewport.panning$.value && !this.viewport.zooming$.value) {
+            this._markViewportDirty();
+            this.refresh();
+          }
+        }, viewportRuntimeConfig.POST_GESTURE_REFRESH_DELAY);
+      };
+
+      this._disposables.add(
+        this.viewport.panning$.subscribe(panning => {
+          if (panning) cancelRefresh();
+          else if (!this.viewport.zooming$.value) scheduleRefresh();
+        })
+      );
+      this._disposables.add(
+        this.viewport.zooming$.subscribe(zooming => {
+          if (zooming) cancelRefresh();
+          else if (!this.viewport.panning$.value) scheduleRefresh();
+        })
+      );
+      this._disposables.add({ dispose: cancelRefresh });
+    }
+
    this.usePlaceholder = false;
  }

@@ -292,12 +340,15 @@ export class DomRenderer {
      domElement = document.createElement('div');
      domElement.dataset.elementId = elementModel.id;
      domElement.style.position = 'absolute';
-      domElement.style.backgroundColor = 'rgba(200, 200, 200, 0.5)';
      this._elementsMap.set(elementModel.id, domElement);
      this.rootElement.append(domElement);
      addedElements.push(domElement);
    }

+    domElement.style.backgroundColor = resolveSurfacePlaceholderColor(
+      this.getColorScheme()
+    );
+
    const geometricStyles = calculatePlaceholderRect(
      elementModel,
      viewportBounds,
@@ -0,0 +1,10 @@
+import { type ColorScheme } from '@blocksuite/affine-model';
+import { getAffinePlaceholderFillColor } from '@blocksuite/affine-shared/theme';
+
+export function getSurfacePlaceholderFallback(colorScheme: ColorScheme) {
+  return getAffinePlaceholderFillColor(colorScheme);
+}
+
+export function resolveSurfacePlaceholderColor(colorScheme: ColorScheme) {
+  return getSurfacePlaceholderFallback(colorScheme);
+}
@@ -38,5 +38,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -527,6 +527,9 @@ export class SelectionController implements ReactiveController {
    removeNativeSelection = true
  ) {
    if (selection) {
+      if (this.hasExternalNativeSelection()) {
+        return;
+      }
      const previous = this.getSelected();
      if (TableSelectionData.equals(previous, selection)) {
        return;
@@ -551,4 +554,24 @@ export class SelectionController implements ReactiveController {
    );
    return selection?.is(TableSelection) ? selection.data : undefined;
  }
+
+  private hasExternalNativeSelection() {
+    const selection = getSelection();
+    if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
+      return false;
+    }
+
+    const range = selection.getRangeAt(0);
+    if (!range.intersectsNode(this.host)) {
+      return false;
+    }
+
+    const anchorNode = selection.anchorNode;
+    const focusNode = selection.focusNode;
+    return (
+      !!anchorNode &&
+      !!focusNode &&
+      (!this.host.contains(anchorNode) || !this.host.contains(focusNode))
+    );
+  }
 }
@@ -1,10 +1,32 @@
 import { css } from '@emotion/css';

+const externalRangeSelectionSelector =
+  'affine-table[data-external-range-selection]';
+const hiddenSelectionBackground = '#fff';
+
 export const tableContainer = css({
  display: 'block',
  padding: '10px 0 18px 10px',
  overflowX: 'auto',
  overflowY: 'visible',
+  userSelect: 'none',
+  WebkitUserSelect: 'none',
+  '& *': {
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+  },
+  [`${externalRangeSelectionSelector} &::selection`]: {
+    backgroundColor: hiddenSelectionBackground,
+  },
+  [`${externalRangeSelectionSelector} & *::selection`]: {
+    backgroundColor: hiddenSelectionBackground,
+  },
+  [`${externalRangeSelectionSelector} & rich-text::selection`]: {
+    backgroundColor: hiddenSelectionBackground,
+  },
+  [`${externalRangeSelectionSelector} & rich-text *::selection`]: {
+    backgroundColor: hiddenSelectionBackground,
+  },
  '::-webkit-scrollbar': {
    height: '8px',
  },
@@ -5,7 +5,10 @@ import { DocModeProvider } from '@blocksuite/affine-shared/services';
 import { VirtualPaddingController } from '@blocksuite/affine-shared/utils';
 import { IS_MOBILE } from '@blocksuite/global/env';
 import type { BlockComponent } from '@blocksuite/std';
-import { RANGE_SYNC_EXCLUDE_ATTR } from '@blocksuite/std/inline';
+import {
+  RANGE_QUERY_EXCLUDE_ATTR,
+  RANGE_SYNC_EXCLUDE_ATTR,
+} from '@blocksuite/std/inline';
 import { signal } from '@preact/signals-core';
 import { html, nothing } from 'lit';
 import { ref } from 'lit/directives/ref.js';
@@ -37,7 +40,80 @@ export class TableBlockComponent extends CaptionedBlockComponent<TableBlockModel
  override connectedCallback() {
    super.connectedCallback();
    this.setAttribute(RANGE_SYNC_EXCLUDE_ATTR, 'true');
+    this.setAttribute(RANGE_QUERY_EXCLUDE_ATTR, 'true');
    this.style.position = 'relative';
+    const doc = this.ownerDocument;
+    this.disposables.addFromEvent(doc, 'selectionchange', () => {
+      const hasExternalNativeSelection = this.hasExternalNativeSelection();
+      this.toggleAttribute(
+        'data-external-range-selection',
+        hasExternalNativeSelection
+      );
+      if (hasExternalNativeSelection) {
+        delete this.dataset.internalRangeSelection;
+      }
+      this.setInternalEditablesEnabled(!hasExternalNativeSelection);
+    });
+    this.disposables.addFromEvent(
+      doc,
+      'pointerdown',
+      event => {
+        const target = event.target;
+        const NodeConstructor = this.ownerDocument.defaultView?.Node;
+        if (
+          NodeConstructor &&
+          target instanceof NodeConstructor &&
+          this.contains(target)
+        ) {
+          this.setInternalEditablesEnabled(true);
+          if (this.hasExternalNativeSelection()) {
+            this.ownerDocument.getSelection()?.removeAllRanges();
+          }
+          delete this.dataset.externalRangeSelection;
+          this.dataset.internalRangeSelection = 'true';
+        } else {
+          delete this.dataset.internalRangeSelection;
+        }
+      },
+      { capture: true }
+    );
+  }
+
+  private setInternalEditablesEnabled(enabled: boolean) {
+    this.querySelectorAll<HTMLElement>('.inline-editor').forEach(editor => {
+      if (enabled) {
+        if (editor.dataset.tableExternalSelectionDisabled === 'true') {
+          editor.contentEditable = 'true';
+          delete editor.dataset.tableExternalSelectionDisabled;
+        }
+        return;
+      }
+
+      if (editor.contentEditable === 'true') {
+        editor.contentEditable = 'false';
+        editor.dataset.tableExternalSelectionDisabled = 'true';
+      }
+    });
+  }
+
+  private hasExternalNativeSelection() {
+    const selection = this.ownerDocument.getSelection();
+    if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
+      return false;
+    }
+
+    const range = selection.getRangeAt(0);
+    if (!range.intersectsNode(this)) {
+      return false;
+    }
+
+    const anchorNode = selection.anchorNode;
+    const focusNode = selection.focusNode;
+    return (
+      !!anchorNode &&
+      !!focusNode &&
+      (!this.contains(anchorNode) || !this.contains(focusNode))
+    );
  }

  override get topContenteditableElement() {
@@ -10,6 +10,18 @@ export const cellContainerStyle = css({
  isolation: 'auto',
  textAlign: 'start',
  verticalAlign: 'top',
+  'affine-table[data-internal-range-selection="true"] &': {
+    userSelect: 'text',
+    WebkitUserSelect: 'text',
+  },
+  'affine-table[data-internal-range-selection="true"] & rich-text': {
+    userSelect: 'text',
+    WebkitUserSelect: 'text',
+  },
+  'affine-table[data-internal-range-selection="true"] & rich-text *': {
+    userSelect: 'text',
+    WebkitUserSelect: 'text',
+  },
 });

 export const columnOptionsCellStyle = css({
@@ -649,12 +649,9 @@ export class TableCell extends SignalWatcher(
  }

  private readonly _handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key !== 'Escape') {
-      if (e.key === 'Tab') {
-        e.preventDefault();
-        return;
-      }
-      e.stopPropagation();
+    if (e.key !== 'Escape' && e.key === 'Tab') {
+      e.preventDefault();
+      return;
    }
  };

@@ -0,0 +1,7 @@
+import { textKeymap } from '@blocksuite/affine-inline-preset';
+import { TableBlockSchema } from '@blocksuite/affine-model';
+import { KeymapExtension } from '@blocksuite/std';
+
+export const TableKeymapExtension = KeymapExtension(textKeymap, {
+  flavour: TableBlockSchema.model.flavour,
+});
@@ -9,6 +9,7 @@ import { literal } from 'lit/static-html.js';

 import { tableSlashMenuConfig } from './configs/slash-menu';
 import { effects } from './effects';
+import { TableKeymapExtension } from './table-keymap.js';

 export class TableViewExtension extends ViewExtensionProvider {
  override name = 'affine-table-block';
@@ -22,6 +23,7 @@ export class TableViewExtension extends ViewExtensionProvider {
    super.setup(context);
    context.register([
      FlavourExtension(TableModelFlavour),
+      TableKeymapExtension,
      BlockViewExtension(TableModelFlavour, literal`affine-table`),
      SlashMenuConfigExtension(TableModelFlavour, tableSlashMenuConfig),
    ]);
@@ -23,7 +23,7 @@
    "@preact/signals-core": "^1.8.0",
    "@toeverything/theme": "^1.1.23",
    "@types/lodash-es": "^4.17.12",
-    "date-fns": "^4.0.0",
+    "date-fns": "^4.4.0",
    "lit": "^3.2.0",
    "lit-html": "^3.2.1",
    "lodash-es": "^4.17.23",
@@ -74,5 +74,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -95,7 +95,9 @@ export class MenuInput extends MenuFocusable {
    });
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
-        this.inputRef.select();
+        if (!this.data.disableAutoFocus) {
+          this.inputRef.select();
+        }
      });
    });
  }
@@ -223,6 +225,7 @@ export const menuInputItems = {
      onComplete?: (value: string) => void;
      onChange?: (value: string) => void;
      onBlur?: (value: string) => void;
+      disableAutoFocus?: boolean;
      class?: string;
      style?: Readonly<StyleInfo>;
    }) =>
@@ -237,6 +240,7 @@ export const menuInputItems = {
        onComplete: config.onComplete,
        onChange: config.onChange,
        onBlur: config.onBlur,
+        disableAutoFocus: config.disableAutoFocus,
      };
      const style = styleMap({
        display: 'flex',
@@ -111,8 +111,10 @@ export class MenuComponent
        }
        const onBack = this.menu.options.title?.onBack;
        if (e.key === 'Backspace' && onBack && !this.menu.showSearch$.value) {
-          this.menu.close();
-          onBack(this.menu);
+          const result = onBack(this.menu);
+          if (result !== false) {
+            this.menu.close();
+          }
          return;
        }
        if (e.key === 'Enter' && !e.isComposing) {
@@ -214,8 +216,10 @@ export class MenuComponent
        ${title.onBack
          ? html` <div
              @click="${() => {
-                title.onBack?.(this.menu);
-                this.menu.close();
+                const result = title.onBack?.(this.menu);
+                if (result !== false) {
+                  this.menu.close();
+                }
              }}"
              class="dv-icon-20 dv-hover dv-pd-2 dv-round-4"
              style="display:flex;"
@@ -15,7 +15,7 @@ export type MenuOptions = {
  onClose?: () => void;
  title?: {
    text: string;
-    onBack?: (menu: Menu) => void;
+    onBack?: (menu: Menu) => boolean | void;
    onClose?: () => void;
    postfix?: () => TemplateResult;
  };
@@ -57,7 +57,7 @@ export class DatePicker extends WithDisposable(LitElement) {

  private readonly _maxYear = 2099;

-  private readonly _minYear = 1970;
+  private readonly _minYear = 1000;

  get _cardStyle() {
    return {
@@ -286,8 +286,18 @@ export class DatePicker extends WithDisposable(LitElement) {
      </div>`;
  }

+  private _clampCursorYear() {
+    const year = this._cursor.getFullYear();
+    if (year < this._minYear) {
+      this._cursor = new Date(this._minYear, 0, 1);
+    } else if (year > this._maxYear) {
+      this._cursor = new Date(this._maxYear, 11, 31);
+    }
+  }
+
  private _moveMonth(offset: number) {
    this._cursor.setMonth(this._cursor.getMonth() + offset);
+    this._clampCursorYear();
    this._getMatrix();
  }

@@ -420,6 +430,7 @@ export class DatePicker extends WithDisposable(LitElement) {
          } else if (e.key === 'ArrowDown') {
            this._cursor.setDate(this._cursor.getDate() + 7);
          }
+          this._clampCursorYear();
          this._getMatrix();
          setTimeout(this.focusDateCell.bind(this));
        }
@@ -23,14 +23,14 @@
    "@toeverything/theme": "^1.1.23",
    "@types/lodash-es": "^4.17.12",
    "clsx": "^2.1.1",
-    "date-fns": "^4.0.0",
+    "date-fns": "^4.4.0",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.23",
    "yjs": "^13.6.27",
    "zod": "^3.25.76"
  },
  "devDependencies": {
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.8"
  },
  "exports": {
    ".": "./src/index.ts",
@@ -46,5 +46,5 @@
    "!src/__tests__",
    "!dist/__tests__"
  ],
-  "version": "0.26.3"
+  "version": "0.27.0"
 }
@@ -0,0 +1,371 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  type CalendarEntry,
+  createCalendarMonthLayout,
+  getCalendarDayContentSlots,
+  getCalendarVisibleMonthRange,
+} from '../view-presets/calendar/index.js';
+
+const day = (value: string) => new Date(`${value}T00:00:00`).getTime();
+
+describe('calendar month layout', () => {
+  it('buckets single day entries', () => {
+    const entry = {
+      kind: 'row',
+      id: 'database:row-1',
+      sourceId: 'database',
+      rowId: 'row-1',
+      title: 'Task',
+      startAt: day('2026-05-15'),
+      cardProperties: [],
+      canResizeRange: false,
+    } satisfies CalendarEntry;
+
+    const layout = createCalendarMonthLayout({
+      month: day('2026-05-01'),
+      entries: [entry],
+    });
+
+    expect(
+      layout.days.find(item => item.date === day('2026-05-15'))?.entries
+    ).toEqual([entry]);
+  });
+
+  it('splits range external entries across weeks', () => {
+    const entry = {
+      kind: 'external',
+      id: 'external:1',
+      sourceId: 'workspace-calendar',
+      externalId: '1',
+      title: 'Trip',
+      startAt: day('2026-05-09'),
+      endAt: new Date('2026-05-12T12:00:00').getTime(),
+      canResizeRange: false,
+    } satisfies CalendarEntry;
+
+    const layout = createCalendarMonthLayout({
+      month: day('2026-05-01'),
+      entries: [entry],
+    });
+
+    expect(layout.segments).toMatchObject([
+      { weekIndex: 1, startIndex: 6, span: 1 },
+      { weekIndex: 2, startIndex: 0, span: 3 },
+    ]);
+  });
+
+  it('treats all-day external midnight end as exclusive', () => {
+    const entry = {
+      kind: 'external',
+      id: 'external:1',
+      sourceId: 'workspace-calendar',
+      externalId: '1',
+      title: 'All day',
+      startAt: day('2026-05-15'),
+      endAt: day('2026-05-16'),
+      allDay: true,
+      canResizeRange: false,
+    } satisfies CalendarEntry;
+
+    const layout = createCalendarMonthLayout({
+      month: day('2026-05-01'),
+      entries: [entry],
+    });
+
+    expect(
+      layout.days.find(item => item.date === day('2026-05-15'))?.entries
+    ).toEqual([entry]);
+  });
+
+  it('treats row midnight end date as inclusive', () => {
+    const entry = {
+      kind: 'row',
+      id: 'database:row-1',
+      sourceId: 'database',
+      rowId: 'row-1',
+      title: 'Task',
+      startAt: day('2026-05-15'),
+      endAt: day('2026-05-16'),
+      cardProperties: [],
+      canResizeRange: true,
+    } satisfies CalendarEntry;
+
+    const layout = createCalendarMonthLayout({
+      month: day('2026-05-01'),
+      entries: [entry],
+    });
+
+    expect(layout.segments).toMatchObject([
+      { weekIndex: 2, startIndex: 5, span: 2 },
+    ]);
+  });
+
+  it('clips range entries to visible month range', () => {
+    const entry = {
+      kind: 'external',
+      id: 'external:1',
+      sourceId: 'workspace-calendar',
+      externalId: '1',
+      title: 'Long trip',
+      startAt: day('2026-04-01'),
+      endAt: day('2026-06-30'),
+      canResizeRange: false,
+    } satisfies CalendarEntry;
+
+    const layout = createCalendarMonthLayout({
+      month: day('2026-05-01'),
+      entries: [entry],
+    });
+
+    expect(layout.segments[0]).toMatchObject({
+      weekIndex: 0,
+      startIndex: 0,
+      span: 7,
+    });
+    expect(layout.segments.at(-1)).toMatchObject({
+      weekIndex: layout.weeks.length - 1,
+      startIndex: 0,
+      span: 7,
+    });
+  });
+
+  it('pads month view to full weeks', () => {
+    const range = getCalendarVisibleMonthRange(day('2026-05-01'));
+    const layout = createCalendarMonthLayout({
+      month: day('2026-05-01'),
+      entries: [],
+    });
+
+    expect(new Date(range.from).getDay()).toBe(0);
+    expect(new Date(range.to).getDay()).toBe(6);
+    expect(layout.days).toHaveLength(layout.weeks.length * 7);
+  });
+
+  it('keeps day buckets on local midnight across DST boundaries', () => {
+    const entry = {
+      kind: 'row',
+      id: 'database:row-1',
+      sourceId: 'database',
+      rowId: 'row-1',
+      title: 'DST task',
+      startAt: day('2026-03-09'),
+      cardProperties: [],
+      canResizeRange: false,
+    } satisfies CalendarEntry;
+
+    const layout = createCalendarMonthLayout({
+      month: day('2026-03-01'),
+      entries: [entry],
+    });
+
+    expect(
+      layout.days.every(item => {
+        const date = new Date(item.date);
+        return (
+          date.getHours() === 0 &&
+          date.getMinutes() === 0 &&
+          date.getSeconds() === 0 &&
+          date.getMilliseconds() === 0
+        );
+      })
+    ).toBe(true);
+    expect(
+      layout.days.find(item => item.date === day('2026-03-09'))?.entries
+    ).toEqual([entry]);
+  });
+
+  it('keeps range segment offsets across DST boundaries', () => {
+    const entry = {
+      kind: 'external',
+      id: 'external:1',
+      sourceId: 'workspace-calendar',
+      externalId: '1',
+      title: 'DST range',
+      startAt: day('2026-03-09'),
+      endAt: new Date('2026-03-10T12:00:00').getTime(),
+      canResizeRange: false,
+    } satisfies CalendarEntry;
+
+    const layout = createCalendarMonthLayout({
+      month: day('2026-03-01'),
+      entries: [entry],
+    });
+
+    expect(layout.segments).toMatchObject([
+      { weekIndex: 1, startIndex: 1, span: 2 },
+    ]);
+  });
+
+  it('keeps all same-day entries in the day bucket', () => {
+    const entries = Array.from(
+      { length: 4 },
+      (_, index) =>
+        ({
+          kind: 'row',
+          id: `database:row-${index}`,
+          sourceId: 'database',
+          rowId: `row-${index}`,
+          title: `Task ${index}`,
+          startAt: day('2026-05-15'),
+          cardProperties: [],
+          canResizeRange: false,
+        }) satisfies CalendarEntry
+    );
+
+    const layout = createCalendarMonthLayout({
+      month: day('2026-05-01'),
+      entries,
+    });
+
+    expect(
+      layout.days.find(item => item.date === day('2026-05-15'))?.entries
+    ).toHaveLength(4);
+  });
+
+  it('assigns each overlapping range segment to its own slot', () => {
+    const entries: CalendarEntry[] = [
+      ...Array.from(
+        { length: 3 },
+        (_, index) =>
+          ({
+            kind: 'external',
+            id: `external:full-${index}`,
+            sourceId: 'workspace-calendar',
+            externalId: `full-${index}`,
+            title: `Full ${index}`,
+            startAt: day('2026-05-15'),
+            endAt: new Date('2026-05-17T12:00:00').getTime(),
+            canResizeRange: false,
+          }) as const
+      ),
+      {
+        kind: 'external',
+        id: 'external:short',
+        sourceId: 'workspace-calendar',
+        externalId: 'short',
+        title: 'Short',
+        startAt: day('2026-05-18'),
+        endAt: new Date('2026-05-19T12:00:00').getTime(),
+        canResizeRange: false,
+      },
+    ];
+
+    const layout = createCalendarMonthLayout({
+      month: day('2026-05-01'),
+      entries,
+    });
+    const may15 = layout.days.find(item => item.date === day('2026-05-15'))!;
+    const may18 = layout.days.find(item => item.date === day('2026-05-18'))!;
+
+    expect(getCalendarDayContentSlots(may15)).toBe(3);
+    expect(may15.segments.map(segment => segment.slot)).toEqual([0, 1, 2]);
+    expect(getCalendarDayContentSlots(may18)).toBe(1);
+    expect(may18.segments.map(segment => segment.slot)).toEqual([0]);
+  });
+
+  it('counts segment and same-day slots for drag preview placement', () => {
+    const entries: CalendarEntry[] = [
+      ...Array.from(
+        { length: 3 },
+        (_, index) =>
+          ({
+            kind: 'external',
+            id: `external:range-${index}`,
+            sourceId: 'workspace-calendar',
+            externalId: `range-${index}`,
+            title: `Range ${index}`,
+            startAt: day('2026-05-08'),
+            endAt: new Date('2026-05-09T12:00:00').getTime(),
+            canResizeRange: false,
+          }) as const
+      ),
+      {
+        kind: 'row',
+        id: 'database:moving',
+        sourceId: 'database',
+        rowId: 'moving',
+        title: 'Moving',
+        startAt: day('2026-05-06'),
+        endAt: new Date('2026-05-08T12:00:00').getTime(),
+        cardProperties: [],
+        canResizeRange: true,
+      },
+      {
+        kind: 'row',
+        id: 'database:single',
+        sourceId: 'database',
+        rowId: 'single',
+        title: 'Single',
+        startAt: day('2026-05-08'),
+        cardProperties: [],
+        canResizeRange: false,
+      },
+    ];
+
+    const layout = createCalendarMonthLayout({
+      month: day('2026-05-01'),
+      entries,
+    });
+    const may8 = layout.days.find(item => item.date === day('2026-05-08'))!;
+
+    expect(getCalendarDayContentSlots(may8, 'database:moving')).toBe(4);
+  });
+
+  it('splits row range entries across weeks with continuation metadata', () => {
+    const entry = {
+      kind: 'row',
+      id: 'database:row-1',
+      sourceId: 'database',
+      rowId: 'row-1',
+      title: 'Project',
+      startAt: day('2026-05-09'),
+      endAt: new Date('2026-05-12T12:00:00').getTime(),
+      cardProperties: [],
+      canResizeRange: true,
+    } satisfies CalendarEntry;
+
+    const layout = createCalendarMonthLayout({
+      month: day('2026-05-01'),
+      entries: [entry],
+    });
+
+    expect(layout.segments).toMatchObject([
+      {
+        weekIndex: 1,
+        startIndex: 6,
+        span: 1,
+        startsBeforeWeek: false,
+        endsAfterWeek: true,
+      },
+      {
+        weekIndex: 2,
+        startIndex: 0,
+        span: 3,
+        startsBeforeWeek: true,
+        endsAfterWeek: false,
+      },
+    ]);
+  });
+
+  it('skips range entries completely outside the visible month range', () => {
+    const entry = {
+      kind: 'external',
+      id: 'external:outside',
+      sourceId: 'workspace-calendar',
+      externalId: 'outside',
+      title: 'Outside',
+      startAt: day('2026-06-10'),
+      endAt: day('2026-06-12'),
+      canResizeRange: false,
+    } satisfies CalendarEntry;
+
+    const layout = createCalendarMonthLayout({
+      month: day('2026-05-01'),
+      entries: [entry],
+    });
+
+    expect(layout.segments).toEqual([]);
+    expect(layout.days.every(day => day.segments.length === 0)).toBe(true);
+  });
+});
@@ -0,0 +1,812 @@
+import { DocDisplayMetaProvider } from '@blocksuite/affine-shared/services';
+import { signal } from '@preact/signals-core';
+import { describe, expect, it, vi } from 'vitest';
+
+import type { DataSource } from '../core/data-source/base.js';
+import {
+  CalendarSingleView,
+  type CalendarStoredViewData,
+  calendarViewModel,
+} from '../view-presets/calendar/index.js';
+import {
+  formatEntryTime,
+  openCalendarEntry,
+} from '../view-presets/calendar/pc/actions.js';
+import { getCalendarDndEntity } from '../view-presets/calendar/pc/dnd.js';
+import { viewConverts } from '../view-presets/convert.js';
+
+const day = (value: string) => new Date(`${value}T00:00:00`).getTime();
+
+const createCalendarView = (options?: {
+  startColumnId?: string;
+  endColumnId?: string;
+  datePropertyType?: string;
+  rows?: string[];
+  filterValue?: string;
+  titleValue?: unknown;
+  linkedDocTitles?: Record<string, string>;
+  visiblePropertyIds?: string[];
+  externalFactories?: Map<unknown, unknown>;
+}) => {
+  const rows = signal(options?.rows ?? ['row-1']);
+  const columns = signal(['title', 'date', 'end-date', 'status']);
+  const viewData = signal<CalendarStoredViewData>({
+    id: 'view-1',
+    name: 'Calendar',
+    mode: 'calendar',
+    filter: options?.filterValue
+      ? {
+          type: 'group',
+          op: 'and',
+          conditions: [
+            {
+              type: 'filter',
+              left: { type: 'ref', name: 'status' },
+              function: 'is',
+              args: [{ type: 'literal', value: options.filterValue }],
+            },
+          ],
+        }
+      : {
+          type: 'group',
+          op: 'and',
+          conditions: [],
+        },
+    date: {
+      startColumnId: options?.startColumnId,
+      endColumnId: options?.endColumnId,
+    },
+    card: {
+      titleColumnId: 'title',
+      visiblePropertyIds: options?.visiblePropertyIds ?? [],
+    },
+    sources: {
+      workspaceCalendar: {
+        enabled: true,
+      },
+    },
+  });
+  const values = new Map<string, unknown>([
+    ['row-1:date', day('2026-05-15')],
+    ['row-1:end-date', day('2026-05-17')],
+    ['row-1:status', 'Done'],
+    ['row-1:title', options?.titleValue ?? 'Task'],
+    ['row-2:date', day('2026-05-16')],
+    ['row-2:end-date', day('2026-05-14')],
+    ['row-2:status', 'Todo'],
+    ['row-2:title', 'Hidden'],
+  ]);
+  const types = new Map<string, string>([
+    ['title', 'title'],
+    ['date', options?.datePropertyType ?? 'date'],
+    ['end-date', 'date'],
+    ['status', 'text'],
+  ]);
+
+  const dataSource = {
+    rows$: rows,
+    properties$: columns,
+    readonly$: signal(false),
+    featureFlags$: signal({ enable_table_virtual_scroll: false }),
+    provider: {
+      getAll: () => options?.externalFactories ?? new Map(),
+    },
+    viewDataGet: () => viewData.value,
+    viewDataUpdate: (
+      _id: string,
+      updater: (data: CalendarStoredViewData) => Partial<CalendarStoredViewData>
+    ) => {
+      viewData.value = { ...viewData.value, ...updater(viewData.value) };
+    },
+    cellValueGet: (rowId: string, propertyId: string) =>
+      values.get(`${rowId}:${propertyId}`),
+    cellValueChange: (rowId: string, propertyId: string, value: unknown) => {
+      values.set(`${rowId}:${propertyId}`, value);
+    },
+    rowAdd: () => {
+      const rowId = `row-${rows.value.length + 1}`;
+      rows.value = [...rows.value, rowId];
+      return rowId;
+    },
+    propertyTypeGet: (propertyId: string) => types.get(propertyId),
+    propertyNameGet: (propertyId: string) => propertyId,
+    propertyDataGet: () => ({}),
+    propertyReadonlyGet: () => false,
+    serviceGet: (key: unknown) => {
+      if (key !== DocDisplayMetaProvider) {
+        return null;
+      }
+      return {
+        title: (pageId: string, referenceInfo?: { title?: string }) =>
+          signal(referenceInfo?.title ?? options?.linkedDocTitles?.[pageId]),
+      };
+    },
+    propertyMetaGet: (type: string) => ({
+      type,
+      config: {
+        rawValue: {
+          toJson: ({ value }: { value: unknown }) => {
+            const deltas =
+              typeof value === 'object' && value != null && 'deltas$' in value
+                ? (value as { deltas$?: { value?: unknown } }).deltas$?.value
+                : undefined;
+            if (!Array.isArray(deltas)) {
+              return value;
+            }
+            return deltas
+              .map(delta => {
+                const item = delta as {
+                  insert?: unknown;
+                  attributes?: {
+                    reference?: {
+                      type?: string;
+                      pageId?: unknown;
+                    };
+                  };
+                };
+                const pageId = item.attributes?.reference?.pageId;
+                if (
+                  item.attributes?.reference?.type === 'LinkedPage' &&
+                  typeof pageId === 'string'
+                ) {
+                  return (
+                    options?.linkedDocTitles?.[pageId] ?? item.insert ?? ''
+                  );
+                }
+                return item.insert ?? '';
+              })
+              .join('');
+          },
+          fromJson: ({ value }: { value: unknown }) => value,
+          toString: ({ value }: { value: unknown }) =>
+            typeof value === 'string' ? value : '',
+        },
+        jsonValue: {
+          schema: {
+            safeParse: (value: unknown) => ({ success: true, data: value }),
+          },
+          isEmpty: () => false,
+          type: () => undefined,
+        },
+      },
+      renderer: {},
+    }),
+    propertyAdd: () => {
+      columns.value = [...columns.value, 'created-date'];
+      types.set('created-date', 'date');
+      return 'created-date';
+    },
+    propertyCanDelete: () => true,
+    propertyCanDuplicate: () => true,
+    propertyTypeCanSet: () => true,
+  } as unknown as DataSource;
+  const manager = {
+    dataSource,
+    readonly$: signal(false),
+  };
+  return {
+    view: new CalendarSingleView(manager as any, 'view-1'),
+    viewData,
+    values,
+    types,
+    columns,
+  };
+};
+
+describe('CalendarSingleView', () => {
+  it('creates default view data without selecting a start date', () => {
+    const data = calendarViewModel.model.defaultData({
+      dataSource: {
+        properties$: signal(['title', 'date']),
+        propertyTypeGet: (id: string) => (id === 'title' ? 'title' : 'date'),
+      },
+    } as any);
+
+    expect(data.date).toEqual({});
+    expect(data.card).toEqual({
+      titleColumnId: 'title',
+      visiblePropertyIds: [],
+    });
+  });
+
+  it('enters setup state without a start date property', () => {
+    const { view } = createCalendarView();
+
+    expect(view.dateMapping$.value.status).toBe('setup');
+  });
+
+  it('enters setup state when start date column is not date', () => {
+    const { view } = createCalendarView({
+      startColumnId: 'date',
+      datePropertyType: 'text',
+    });
+
+    expect(view.dateMapping$.value.status).toBe('setup');
+  });
+
+  it('enters setup state after date property deletion', () => {
+    const { view, columns } = createCalendarView({ startColumnId: 'date' });
+
+    columns.value = ['title', 'status'];
+
+    expect(view.dateMapping$.value.status).toBe('setup');
+  });
+
+  it('creates row entries after filtering rows', () => {
+    const { view } = createCalendarView({
+      startColumnId: 'date',
+      rows: ['row-1', 'row-2'],
+      filterValue: 'Done',
+    });
+
+    expect(view.rowEntries$.value.map(entry => entry.rowId)).toEqual(['row-1']);
+  });
+
+  it('updates entry date after row date value changes', () => {
+    const { view, values } = createCalendarView({ startColumnId: 'date' });
+
+    values.set('row-1:date', day('2026-05-20'));
+
+    expect(view.rowEntries$.value[0]?.startAt).toBe(day('2026-05-20'));
+  });
+
+  it('creates row range entries and falls back when end date is invalid', () => {
+    const { view } = createCalendarView({
+      startColumnId: 'date',
+      endColumnId: 'end-date',
+      rows: ['row-1', 'row-2'],
+    });
+
+    expect(
+      view.rowEntries$.value.map(entry => [
+        entry.rowId,
+        entry.startAt,
+        entry.endAt,
+      ])
+    ).toEqual([
+      ['row-1', day('2026-05-15'), day('2026-05-17')],
+      ['row-2', day('2026-05-16'), undefined],
+    ]);
+    expect(view.rowEntries$.value[0]?.canResizeRange).toBe(true);
+  });
+
+  it('moves row range while preserving duration', () => {
+    const { view, values } = createCalendarView({
+      startColumnId: 'date',
+      endColumnId: 'end-date',
+    });
+
+    view.moveRowToDate('row-1', day('2026-05-20'));
+
+    expect(values.get('row-1:date')).toBe(day('2026-05-20'));
+    expect(values.get('row-1:end-date')).toBe(day('2026-05-22'));
+  });
+
+  it('resizes row range without crossing start and end', () => {
+    const { view, values } = createCalendarView({
+      startColumnId: 'date',
+      endColumnId: 'end-date',
+    });
+
+    view.resizeRowRange('row-1', 'start', day('2026-05-18'));
+    expect(values.get('row-1:date')).toBe(day('2026-05-17'));
+
+    view.resizeRowRange('row-1', 'end', day('2026-05-14'));
+    expect(values.get('row-1:end-date')).toBe(day('2026-05-17'));
+  });
+
+  it('creates a row with default filter values and target date', () => {
+    const { view, values } = createCalendarView({
+      startColumnId: 'date',
+      filterValue: 'Done',
+    });
+
+    const rowId = view.createRowOnDate(day('2026-05-25'));
+
+    expect(rowId).toBe('row-2');
+    expect(values.get('row-2:date')).toBe(day('2026-05-25'));
+    expect(values.get('row-2:status')).toBe('Done');
+    expect(view.emptyMonthHintDismissed$.value).toBe(true);
+  });
+
+  it('creates a dated linked-doc row', () => {
+    const { view, values } = createCalendarView({
+      startColumnId: 'date',
+      filterValue: 'Done',
+    });
+
+    const rowId = view.createLinkedDocRowOnDate(day('2026-05-25'), 'doc-1');
+    const title = values.get('row-2:title') as
+      | { toDelta?: () => unknown[] }
+      | undefined;
+
+    expect(rowId).toBe('row-2');
+    expect(values.get('row-2:date')).toBe(day('2026-05-25'));
+    expect(values.get('row-2:status')).toBe('Done');
+    expect(title?.toDelta?.()).toEqual([
+      {
+        insert: ' ',
+        attributes: {
+          reference: {
+            type: 'LinkedPage',
+            pageId: 'doc-1',
+          },
+        },
+      },
+    ]);
+  });
+
+  it('dismisses the empty month hint on the current calendar view', () => {
+    const { view, viewData } = createCalendarView({
+      startColumnId: 'date',
+    });
+
+    expect(view.emptyMonthHintDismissed$.value).toBe(false);
+
+    view.dismissEmptyMonthHint();
+
+    expect(view.emptyMonthHintDismissed$.value).toBe(true);
+    expect('ui' in viewData.value && viewData.value.ui).toEqual({
+      emptyMonthHintDismissed: true,
+    });
+  });
+
+  it('updates workspace calendar settings when legacy view data has no sources', () => {
+    const { view, viewData } = createCalendarView({
+      startColumnId: 'date',
+    });
+    viewData.value = {
+      ...viewData.value,
+      sources: undefined as unknown as CalendarStoredViewData['sources'],
+    };
+
+    view.setWorkspaceCalendarEnabled(false);
+
+    expect(viewData.value.sources.workspaceCalendar).toEqual({
+      enabled: false,
+    });
+  });
+
+  it('enters setup state when legacy view data has no date config', () => {
+    const { view, viewData } = createCalendarView({
+      startColumnId: 'date',
+      endColumnId: 'end-date',
+    });
+    viewData.value = {
+      ...viewData.value,
+      date: undefined as unknown as CalendarStoredViewData['date'],
+    };
+
+    expect(view.dateMapping$.value).toEqual({
+      status: 'setup',
+      propertyId: undefined,
+    });
+    expect(view.endDateMapping$.value).toEqual({
+      status: 'setup',
+      propertyId: undefined,
+    });
+  });
+
+  it('generates card properties from visible property ids', () => {
+    const { view } = createCalendarView({
+      startColumnId: 'date',
+      visiblePropertyIds: ['status'],
+    });
+
+    expect(view.rowEntries$.value[0]?.cardProperties).toEqual([
+      {
+        propertyId: 'status',
+        value: 'Done',
+      },
+    ]);
+  });
+
+  it('parses single linked doc id from title cell', () => {
+    const { view } = createCalendarView({
+      startColumnId: 'date',
+      linkedDocTitles: {
+        'doc-1': 'Linked doc title',
+      },
+      titleValue: {
+        deltas$: {
+          value: [
+            {
+              insert: 'Doc',
+              attributes: {
+                reference: {
+                  type: 'LinkedPage',
+                  pageId: 'doc-1',
+                },
+              },
+            },
+          ],
+        },
+      },
+    });
+
+    expect(view.rowEntries$.value[0]?.titleSegments).toEqual([
+      { text: 'Linked doc title', linkedDoc: true },
+    ]);
+    expect(view.rowEntries$.value[0]?.title).toBe('Linked doc title');
+  });
+
+  it('uses normal title text for multiple linked doc titles', () => {
+    const { view } = createCalendarView({
+      startColumnId: 'date',
+      linkedDocTitles: {
+        'doc-1': 'Doc 1',
+        'doc-2': 'Doc 2',
+      },
+      titleValue: {
+        deltas$: {
+          value: [
+            {
+              insert: 'Doc 1',
+              attributes: {
+                reference: {
+                  type: 'LinkedPage',
+                  pageId: 'doc-1',
+                },
+              },
+            },
+            {
+              insert: 'Doc 2',
+              attributes: {
+                reference: {
+                  type: 'LinkedPage',
+                  pageId: 'doc-2',
+                },
+              },
+            },
+          ],
+        },
+      },
+    });
+
+    expect(view.rowEntries$.value[0]?.titleSegments).toEqual([
+      { text: 'Doc 1', linkedDoc: true },
+      { text: 'Doc 2', linkedDoc: true },
+    ]);
+    expect(view.rowEntries$.value[0]?.title).toBe('Doc 1Doc 2');
+  });
+
+  it('falls back to the resolved title when linked doc deltas only contain placeholders', () => {
+    const { view } = createCalendarView({
+      startColumnId: 'date',
+      linkedDocTitles: {
+        'doc-1': 'Doc 1',
+        'doc-2': 'Doc 2',
+      },
+      titleValue: {
+        deltas$: {
+          value: [
+            {
+              insert: ' ',
+              attributes: {
+                reference: {
+                  type: 'LinkedPage',
+                  pageId: 'doc-1',
+                },
+              },
+            },
+            {
+              insert: ' ',
+              attributes: {
+                reference: {
+                  type: 'LinkedPage',
+                  pageId: 'doc-2',
+                },
+              },
+            },
+          ],
+        },
+      },
+    });
+
+    expect(view.rowEntries$.value[0]?.titleSegments).toEqual([
+      { text: 'Doc 1', linkedDoc: true },
+      { text: 'Doc 2', linkedDoc: true },
+    ]);
+  });
+
+  it('merges linked doc placeholders with the following plain title text', () => {
+    const { view } = createCalendarView({
+      startColumnId: 'date',
+      titleValue: {
+        deltas$: {
+          value: [
+            {
+              insert: ' ',
+              attributes: {
+                reference: { type: 'LinkedPage', pageId: 'doc-1' },
+              },
+            },
+            { insert: 'How to use folder and Tags' },
+          ],
+        },
+      },
+    });
+
+    expect(view.rowEntries$.value[0]?.titleSegments).toEqual([
+      { text: 'How to use folder and Tags', linkedDoc: true },
+    ]);
+  });
+
+  it('updates date mapping through setup APIs', () => {
+    const { view, viewData, values } = createCalendarView({
+      startColumnId: 'date',
+    });
+
+    view.moveRowToDate('row-1', day('2026-05-21'));
+    expect(values.get('row-1:date')).toBe(day('2026-05-21'));
+
+    view.setDateColumn('date');
+    expect('date' in viewData.value && viewData.value.date.startColumnId).toBe(
+      'date'
+    );
+
+    expect(view.createDateColumn()).toBe('created-date');
+    expect('date' in viewData.value && viewData.value.date.startColumnId).toBe(
+      'created-date'
+    );
+  });
+
+  it('aggregates external source entries without mutating view data', async () => {
+    const externalEntry = {
+      kind: 'external',
+      id: 'external:1',
+      sourceId: 'source',
+      externalId: '1',
+      title: 'External',
+      startAt: day('2026-05-15'),
+      canResizeRange: false,
+    } as const;
+    const anotherExternalEntry = {
+      kind: 'external',
+      id: 'external:2',
+      sourceId: 'another-source',
+      externalId: '2',
+      title: 'Another external',
+      startAt: day('2026-05-16'),
+      canResizeRange: false,
+    } as const;
+    const { view, viewData } = createCalendarView({
+      startColumnId: 'date',
+      externalFactories: new Map([
+        [
+          'source',
+          {
+            create: () => ({
+              id: 'source',
+              getEntries: () => [externalEntry],
+            }),
+          },
+        ],
+        [
+          'another-source',
+          {
+            create: () => ({
+              id: 'another-source',
+              getEntries: () => Promise.resolve([anotherExternalEntry]),
+            }),
+          },
+        ],
+      ]),
+    });
+    const viewDataBefore = JSON.stringify(viewData.value);
+
+    await expect(
+      view.loadExternalEntries({
+        from: day('2026-05-01'),
+        to: day('2026-05-31'),
+      })
+    ).resolves.toEqual([externalEntry, anotherExternalEntry]);
+    expect(JSON.stringify(viewData.value)).toBe(viewDataBefore);
+  });
+
+  it('keeps successful external entries when another source fails', async () => {
+    const externalEntry = {
+      kind: 'external',
+      id: 'external:1',
+      sourceId: 'source',
+      externalId: '1',
+      title: 'External',
+      startAt: day('2026-05-15'),
+      canResizeRange: false,
+    } as const;
+    const { view } = createCalendarView({
+      startColumnId: 'date',
+      externalFactories: new Map([
+        [
+          'source',
+          {
+            create: () => ({
+              id: 'source',
+              getEntries: () => [externalEntry],
+            }),
+          },
+        ],
+        [
+          'failing-source',
+          {
+            create: () => ({
+              id: 'failing-source',
+              getEntries: () => Promise.reject(new Error('denied')),
+            }),
+          },
+        ],
+      ]),
+    });
+
+    await expect(
+      view.loadExternalEntries({
+        from: day('2026-05-01'),
+        to: day('2026-05-31'),
+      })
+    ).resolves.toEqual([externalEntry]);
+  });
+
+  it('does not let stale external entry loads overwrite newer entries', async () => {
+    const oldEntry = {
+      kind: 'external',
+      id: 'external:old',
+      sourceId: 'source',
+      externalId: 'old',
+      title: 'Old',
+      startAt: day('2026-05-15'),
+      canResizeRange: false,
+    } as const;
+    const newEntry = {
+      kind: 'external',
+      id: 'external:new',
+      sourceId: 'source',
+      externalId: 'new',
+      title: 'New',
+      startAt: day('2026-06-15'),
+      canResizeRange: false,
+    } as const;
+    let resolveOld!: (entries: [typeof oldEntry]) => void;
+    let resolveNew!: (entries: [typeof newEntry]) => void;
+    const oldRequest = new Promise<[typeof oldEntry]>(resolve => {
+      resolveOld = resolve;
+    });
+    const newRequest = new Promise<[typeof newEntry]>(resolve => {
+      resolveNew = resolve;
+    });
+    const getEntries = vi
+      .fn()
+      .mockReturnValueOnce(oldRequest)
+      .mockReturnValueOnce(newRequest);
+    const { view } = createCalendarView({
+      startColumnId: 'date',
+      externalFactories: new Map([
+        [
+          'source',
+          {
+            create: () => ({
+              id: 'source',
+              getEntries,
+            }),
+          },
+        ],
+      ]),
+    });
+
+    const firstLoad = view.loadExternalEntries({
+      from: day('2026-05-01'),
+      to: day('2026-05-31'),
+    });
+    const secondLoad = view.loadExternalEntries({
+      from: day('2026-06-01'),
+      to: day('2026-06-30'),
+    });
+
+    resolveNew([newEntry]);
+    await expect(secondLoad).resolves.toEqual([newEntry]);
+    expect(
+      view.entries$.value.filter(entry => entry.kind === 'external')
+    ).toEqual([newEntry]);
+
+    resolveOld([oldEntry]);
+    await expect(firstLoad).resolves.toEqual([oldEntry]);
+    expect(
+      view.entries$.value.filter(entry => entry.kind === 'external')
+    ).toEqual([newEntry]);
+  });
+});
+
+describe('calendar entry actions', () => {
+  it('formats external event popover time ranges with end time', () => {
+    const label = formatEntryTime({
+      kind: 'external',
+      id: 'external:1',
+      sourceId: 'workspace-calendar',
+      externalId: '1',
+      title: 'Planning',
+      startAt: new Date('2026-05-15T10:00:00').getTime(),
+      endAt: new Date('2026-05-15T11:00:00').getTime(),
+      canResizeRange: false,
+    });
+
+    expect(label).toContain(' - ');
+    expect(label).toContain('2026');
+  });
+
+  it('opens row entries through the detail panel hook', () => {
+    const openDetailPanel = vi.fn();
+    const { view } = createCalendarView({ startColumnId: 'date' });
+    const target = {} as HTMLElement;
+
+    openCalendarEntry(
+      { openDetailPanel } as any,
+      view,
+      {
+        kind: 'row',
+        id: 'database:row-1',
+        sourceId: 'database',
+        rowId: 'row-1',
+        title: 'Doc',
+        startAt: day('2026-05-15'),
+        cardProperties: [],
+        canResizeRange: false,
+      },
+      target
+    );
+
+    expect(openDetailPanel).toHaveBeenCalledWith(
+      expect.objectContaining({ view, rowId: 'row-1' })
+    );
+  });
+});
+
+describe('calendar view converts', () => {
+  it('converts header/card semantics without date mapping', () => {
+    const tableToCalendar = viewConverts.find(
+      convert => convert.from === 'table' && convert.to === 'calendar'
+    );
+    const calendarToKanban = viewConverts.find(
+      convert => convert.from === 'calendar' && convert.to === 'kanban'
+    );
+    const filter = { type: 'group', op: 'and', conditions: [] } as const;
+    const sort = { columns: [] };
+    const header = { titleColumn: 'title' };
+
+    expect(tableToCalendar?.convert({ filter, sort, header } as any)).toEqual({
+      filter,
+      sort,
+      card: { titleColumnId: 'title', visiblePropertyIds: [] },
+    });
+    expect(
+      calendarToKanban?.convert({
+        filter,
+        sort,
+        card: { titleColumnId: 'title', visiblePropertyIds: ['status'] },
+        date: { startColumnId: 'date' },
+      } as any)
+    ).toEqual({ filter, sort, header });
+  });
+});
+
+describe('calendar dnd payload', () => {
+  it('reads calendar entry payloads from blocksuite dnd data', () => {
+    expect(
+      getCalendarDndEntity({
+        bsEntity: { type: 'calendar-entry', entryId: 'database:row-1' },
+      })
+    ).toEqual({ type: 'calendar-entry', entryId: 'database:row-1' });
+  });
+
+  it('normalizes affine doc entities for future document drops', () => {
+    expect(
+      getCalendarDndEntity({
+        entity: { type: 'doc', id: 'doc-1' },
+      })
+    ).toEqual({ type: 'doc', docId: 'doc-1' });
+  });
+
+  it('reads document payloads from blocksuite dnd data', () => {
+    expect(
+      getCalendarDndEntity({ bsEntity: { type: 'doc', docId: 'doc-1' } })
+    ).toEqual({ type: 'doc', docId: 'doc-1' });
+  });
+});
@@ -8,6 +8,7 @@ import { BlockSuiteError } from '@blocksuite/global/exceptions';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import {
  type Clipboard,
+  type DndController,
  type EventName,
  ShadowlessElement,
  type UIEventHandler,
@@ -29,6 +30,7 @@ import type { DataViewWidget } from './widget/index.js';

 export type DataViewRendererConfig = {
  clipboard: Clipboard;
+  dnd?: DndController;
  onDrag?: (evt: MouseEvent, id: string) => () => void;
  notification: {
    toast: (message: string) => void;
@@ -2,15 +2,10 @@ import {
  dropdownSubMenuMiddleware,
  menu,
  type MenuConfig,
-  type MenuOptions,
-  popMenu,
-  type PopupTarget,
 } from '@blocksuite/affine-components/context-menu';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import { DeleteIcon, InvisibleIcon, ViewIcon } from '@blocksuite/icons/lit';
 import { ShadowlessElement } from '@blocksuite/std';
-import type { Middleware } from '@floating-ui/dom';
-import { autoPlacement, offset, shift } from '@floating-ui/dom';
 import { computed } from '@preact/signals-core';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { css, html, unsafeCSS } from 'lit';
@@ -260,188 +255,183 @@ export class GroupSetting extends SignalWatcher(
  @query('.group-sort-setting') accessor groupContainer!: HTMLElement;
 }

-export const selectGroupByProperty = (
+export const buildGroupSelectItems = (
  group: GroupTrait,
-  ops?: {
-    onSelect?: (id?: string) => void;
-    onClose?: () => void;
-    onBack?: () => void;
-  }
-): MenuOptions => {
+  onSelect: (id?: string) => void
+): MenuConfig[] => {
  const view = group.view;
-  return {
-    onClose: ops?.onClose,
-    title: { text: 'Group by', onBack: ops?.onBack, onClose: ops?.onClose },
-    items: [
-      menu.group({
-        items: view.propertiesRaw$.value
-          .filter(property => {
-            if (property.type$.value === 'title') {
-              return false;
-            }
-            if (view instanceof KanbanSingleView) {
-              return canGroupable(view.manager.dataSource, property.id);
-            }
-            const dataType = property.dataType$.value;
-            if (!dataType) {
-              return false;
-            }
-            const groupByService = getGroupByService(view.manager.dataSource);
-            return !!groupByService?.matcher.match(dataType);
-          })
-          .map<MenuConfig>(property => {
-            return menu.action({
-              name: property.name$.value,
-              isSelected: group.property$.value?.id === property.id,
-              prefix: html` <uni-lit .uni="${property.icon}"></uni-lit>`,
-              select: () => {
-                group.changeGroup(property.id);
-                ops?.onSelect?.(property.id);
-              },
-            });
-          }),
-      }),
-      menu.group({
-        items: [
+  return [
+    menu.group({
+      items: view.propertiesRaw$.value
+        .filter(property => {
+          if (property.type$.value === 'title') {
+            return false;
+          }
+          if (view instanceof KanbanSingleView) {
+            return canGroupable(view.manager.dataSource, property.id);
+          }
+          const dataType = property.dataType$.value;
+          if (!dataType) {
+            return false;
+          }
+          const groupByService = getGroupByService(view.manager.dataSource);
+          return !!groupByService?.matcher.match(dataType);
+        })
+        .map<MenuConfig>(property =>
          menu.action({
-            prefix: DeleteIcon(),
-            hide: () =>
-              view instanceof KanbanSingleView || !group.property$.value,
-            class: { 'delete-item': true },
-            name: 'Remove Grouping',
+            name: property.name$.value,
+            isSelected: group.property$.value?.id === property.id,
+            prefix: html`<uni-lit .uni="${property.icon}"></uni-lit>`,
            select: () => {
-              group.changeGroup(undefined);
-              ops?.onSelect?.();
+              group.changeGroup(property.id);
+              onSelect(property.id);
+              return false;
            },
-          }),
-        ],
-      }),
-    ],
-  };
+          })
+        ),
+    }),
+    menu.group({
+      items: [
+        menu.action({
+          prefix: DeleteIcon(),
+          hide: () =>
+            view instanceof KanbanSingleView || !group.property$.value,
+          class: { 'delete-item': true },
+          name: 'Remove Grouping',
+          select: () => {
+            group.changeGroup(undefined);
+            onSelect(undefined);
+            return false;
+          },
+        }),
+      ],
+    }),
+  ];
 };

-export const popSelectGroupByProperty = (
-  target: PopupTarget,
+export const buildGroupSettingItems = (
  group: GroupTrait,
-  ops?: { onSelect?: () => void; onClose?: () => void; onBack?: () => void },
-  middleware?: Array<Middleware | null | undefined | false>
-) => {
-  const handler = popMenu(target, {
-    options: selectGroupByProperty(group, ops),
-    middleware,
-  });
-  handler.menu.menuElement.style.minHeight = '550px';
-};
-
-export const popGroupSetting = (
-  target: PopupTarget,
-  group: GroupTrait,
-  onBack: () => void,
-  onClose?: () => void,
-  middleware?: Array<Middleware | null | undefined | false>
-) => {
+  onGroupByClick: () => void,
+  onGroupRemoved?: () => void
+): MenuConfig[] => {
  const view = group.view;
  const gProp = group.property$.value;
-  if (!gProp) return;
+  if (!gProp) return [];
  const type = gProp.type$.value;
-  if (!type) return;
-
+  if (!type) return [];
  const icon = gProp.icon;
-  const menuHandler = popMenu(target, {
-    options: {
-      title: {
-        text: 'Group',
-        onBack,
-        onClose,
-      },
-      items: [
-        menu.group({
-          items: [
-            menu.action({
-              name: 'Group By',
-              postfix: html`
-                <div
-                  style="display:flex;align-items:center;gap:4px;font-size:14px;line-height:20px;color:var(--affine-text-secondary-color);margin-left:8px;"
-                  class="dv-icon-16"
-                >
-                  ${renderUniLit(icon, {})} ${gProp.name$.value}
-                </div>
-              `,
-              select: () => {
-                const subHandler = popMenu(target, {
-                  options: selectGroupByProperty(group, {
-                    onSelect: () => {
-                      menuHandler.close();
-                      popGroupSetting(
-                        target,
-                        group,
-                        onBack,
-                        onClose,
-                        middleware
-                      );
-                    },
-                    onBack: () => {
-                      menuHandler.close();
-                      popGroupSetting(
-                        target,
-                        group,
-                        onBack,
-                        onClose,
-                        middleware
-                      );
-                    },
-                    onClose,
-                  }),
-                  middleware: [
-                    autoPlacement({
-                      allowedPlacements: ['bottom-start', 'top-start'],
-                    }),
-                    offset({ mainAxis: 15, crossAxis: -162 }),
-                    shift({ crossAxis: true }),
-                  ],
-                });
-                subHandler.menu.menuElement.style.minHeight = '550px';
-              },
-            }),
-          ],
-        }),

-        ...(type === 'date'
-          ? [
-              menu.group({
-                items: [
-                  menu.dynamic(() => [
-                    menu.subMenu({
-                      name: 'Date by',
-                      openOnHover: false,
-                      middleware: dropdownSubMenuMiddleware,
-                      autoHeight: true,
-                      postfix: html`
-                        <div
-                          style="display:flex;align-items:center;gap:4px;font-size:14px;line-height:20px;color:var(--affine-text-secondary-color);margin-left:30px;"
-                        >
-                          ${dateModeLabel(group.groupInfo$.value?.config.name)}
-                        </div>
-                      `,
-                      options: {
-                        items: [
-                          menu.dynamic(() =>
-                            (
-                              [
-                                ['Relative', 'date-relative'],
-                                ['Day', 'date-day'],
+  return [
+    menu.group({
+      items: [
+        menu.action({
+          name: 'Group By',
+          postfix: html`
+            <div
+              style="display:flex;align-items:center;gap:4px;font-size:14px;line-height:20px;color:var(--affine-text-secondary-color);margin-left:8px;"
+              class="dv-icon-16"
+            >
+              ${renderUniLit(icon, {})} ${gProp.name$.value}
+            </div>
+          `,
+          select: () => {
+            onGroupByClick();
+            return false;
+          },
+        }),
+      ],
+    }),
+
+    ...(type === 'date'
+      ? [
+          menu.group({
+            items: [
+              menu.dynamic(() => [
+                menu.subMenu({
+                  name: 'Date by',
+                  openOnHover: false,
+                  middleware: dropdownSubMenuMiddleware,
+                  autoHeight: true,
+                  postfix: html`
+                    <div
+                      style="display:flex;align-items:center;gap:4px;font-size:14px;line-height:20px;color:var(--affine-text-secondary-color);margin-left:30px;"
+                    >
+                      ${dateModeLabel(group.groupInfo$.value?.config.name)}
+                    </div>
+                  `,
+                  options: {
+                    items: [
+                      menu.dynamic(() =>
+                        (
+                          [
+                            ['Relative', 'date-relative'],
+                            ['Day', 'date-day'],
+                            [
+                              'Week',
+                              group.groupInfo$.value?.config.name ===
+                              'date-week-mon'
+                                ? 'date-week-mon'
+                                : 'date-week-sun',
+                            ],
+                            ['Month', 'date-month'],
+                            ['Year', 'date-year'],
+                          ] as [string, string][]
+                        ).map(
+                          ([label, key]): MenuConfig =>
+                            menu.action({
+                              name: label,
+                              label: () => {
+                                const isSelected =
+                                  group.groupInfo$.value?.config.name === key;
+                                return html`<span
+                                  style="font-size:14px;color:${isSelected
+                                    ? 'var(--affine-text-emphasis-color)'
+                                    : 'var(--affine-text-secondary-color)'}"
+                                  >${label}</span
+                                >`;
+                              },
+                              isSelected:
+                                group.groupInfo$.value?.config.name === key,
+                              select: () => {
+                                group.changeGroupMode(key);
+                                return false;
+                              },
+                            })
+                        )
+                      ),
+                    ],
+                  },
+                }),
+              ]),
+            ],
+          }),
+
+          ...(group.groupInfo$.value?.config.name?.startsWith('date-week')
+            ? [
+                menu.group({
+                  items: [
+                    menu.dynamic(() => [
+                      menu.subMenu({
+                        name: 'Start week on',
+                        postfix: html`
+                          <div
+                            style="display:flex;align-items:center;gap:4px;font-size:14px;line-height:20px;color:var(--affine-text-secondary-color);margin-left:8px;"
+                          >
+                            ${group.groupInfo$.value?.config.name ===
+                            'date-week-mon'
+                              ? 'Monday'
+                              : 'Sunday'}
+                          </div>
+                        `,
+                        options: {
+                          items: [
+                            menu.dynamic(() =>
+                              (
                                [
-                                  'Week',
-                                  group.groupInfo$.value?.config.name ===
-                                  'date-week-mon'
-                                    ? 'date-week-mon'
-                                    : 'date-week-sun',
-                                ],
-                                ['Month', 'date-month'],
-                                ['Year', 'date-year'],
-                              ] as [string, string][]
-                            ).map(
-                              ([label, key]): MenuConfig =>
+                                  ['Monday', 'date-week-mon'],
+                                  ['Sunday', 'date-week-sun'],
+                                ] as [string, string][]
+                              ).map(([label, key]) =>
                                menu.action({
                                  name: label,
                                  label: () => {
@@ -462,179 +452,118 @@ export const popGroupSetting = (
                                    return false;
                                  },
                                })
-                            )
-                          ),
-                        ],
-                      },
-                    }),
-                  ]),
-                ],
-              }),
+                              )
+                            ),
+                          ],
+                        },
+                      }),
+                    ]),
+                  ],
+                }),
+              ]
+            : []),
+          menu.group({
+            items: [
+              menu.dynamic(() => [
+                menu.subMenu({
+                  name: 'Sort',
+                  openOnHover: false,
+                  middleware: dropdownSubMenuMiddleware,
+                  autoHeight: true,
+                  postfix: html`
+                    <div
+                      style="display:flex;align-items:center;gap:4px;font-size:14px;line-height:20px;color:var(--affine-text-secondary-color);margin-left:8px;"
+                    >
+                      ${group.sortAsc$.value ? 'Oldest first' : 'Newest first'}
+                    </div>
+                  `,
+                  options: {
+                    items: [
+                      menu.dynamic(() => [
+                        menu.action({
+                          name: 'Oldest first',
+                          label: () => {
+                            const isSelected = group.sortAsc$.value;
+                            return html`<span
+                              style="font-size:14px;color:${isSelected
+                                ? 'var(--affine-text-emphasis-color)'
+                                : 'var(--affine-text-secondary-color)'}"
+                              >Oldest first</span
+                            >`;
+                          },
+                          isSelected: group.sortAsc$.value,
+                          select: () => {
+                            group.setDateSortOrder(true);
+                            return false;
+                          },
+                        }),
+                        menu.action({
+                          name: 'Newest first',
+                          label: () => {
+                            const isSelected = !group.sortAsc$.value;
+                            return html`<span
+                              style="font-size:14px;color:${isSelected
+                                ? 'var(--affine-text-emphasis-color)'
+                                : 'var(--affine-text-secondary-color)'}"
+                              >Newest first</span
+                            >`;
+                          },
+                          isSelected: !group.sortAsc$.value,
+                          select: () => {
+                            group.setDateSortOrder(false);
+                            return false;
+                          },
+                        }),
+                      ]),
+                    ],
+                  },
+                }),
+              ]),
+            ],
+          }),
+        ]
+      : []),

-              ...(group.groupInfo$.value?.config.name?.startsWith('date-week')
-                ? [
-                    menu.group({
-                      items: [
-                        menu.dynamic(() => [
-                          menu.subMenu({
-                            name: 'Start week on',
-                            postfix: html`
-                              <div
-                                style="display:flex;align-items:center;gap:4px;font-size:14px;line-height:20px;color:var(--affine-text-secondary-color);margin-left:8px;"
-                              >
-                                ${group.groupInfo$.value?.config.name ===
-                                'date-week-mon'
-                                  ? 'Monday'
-                                  : 'Sunday'}
-                              </div>
-                            `,
-                            options: {
-                              items: [
-                                menu.dynamic(() =>
-                                  (
-                                    [
-                                      ['Monday', 'date-week-mon'],
-                                      ['Sunday', 'date-week-sun'],
-                                    ] as [string, string][]
-                                  ).map(([label, key]) =>
-                                    menu.action({
-                                      name: label,
-                                      label: () => {
-                                        const isSelected =
-                                          group.groupInfo$.value?.config
-                                            .name === key;
-                                        return html`<span
-                                          style="font-size:14px;color:${isSelected
-                                            ? 'var(--affine-text-emphasis-color)'
-                                            : 'var(--affine-text-secondary-color)'}"
-                                          >${label}</span
-                                        >`;
-                                      },
-                                      isSelected:
-                                        group.groupInfo$.value?.config.name ===
-                                        key,
-                                      select: () => {
-                                        group.changeGroupMode(key);
-                                        return false;
-                                      },
-                                    })
-                                  )
-                                ),
-                              ],
-                            },
-                          }),
-                        ]),
-                      ],
-                    }),
-                  ]
-                : []),
-              menu.group({
-                items: [
-                  menu.dynamic(() => [
-                    menu.subMenu({
-                      name: 'Sort',
-                      openOnHover: false,
-                      middleware: dropdownSubMenuMiddleware,
-                      autoHeight: true,
-                      postfix: html`
-                        <div
-                          style="display:flex;align-items:center;gap:4px;font-size:14px;line-height:20px;color:var(--affine-text-secondary-color);margin-left:8px;"
-                        >
-                          ${group.sortAsc$.value
-                            ? 'Oldest first'
-                            : 'Newest first'}
-                        </div>
-                      `,
-                      options: {
-                        items: [
-                          menu.dynamic(() => [
-                            menu.action({
-                              name: 'Oldest first',
-                              label: () => {
-                                const isSelected = group.sortAsc$.value;
-                                return html`<span
-                                  style="font-size:14px;color:${isSelected
-                                    ? 'var(--affine-text-emphasis-color)'
-                                    : 'var(--affine-text-secondary-color)'}"
-                                  >Oldest first</span
-                                >`;
-                              },
-                              isSelected: group.sortAsc$.value,
-                              select: () => {
-                                group.setDateSortOrder(true);
-                                return false;
-                              },
-                            }),
-                            menu.action({
-                              name: 'Newest first',
-                              label: () => {
-                                const isSelected = !group.sortAsc$.value;
-                                return html`<span
-                                  style="font-size:14px;color:${isSelected
-                                    ? 'var(--affine-text-emphasis-color)'
-                                    : 'var(--affine-text-secondary-color)'}"
-                                  >Newest first</span
-                                >`;
-                              },
-                              isSelected: !group.sortAsc$.value,
-                              select: () => {
-                                group.setDateSortOrder(false);
-                                return false;
-                              },
-                            }),
-                          ]),
-                        ],
-                      },
-                    }),
-                  ]),
-                ],
-              }),
-            ]
-          : []),
+    menu.group({
+      items: [
+        menu.dynamic(() => [
+          menu.action({
+            name: 'Hide empty groups',
+            isSelected: group.hideEmpty$.value,
+            select: () => {
+              group.setHideEmpty(!group.hideEmpty$.value);
+              return false;
+            },
+          }),
+        ]),
+      ],
+    }),
+    menu.group({
+      items: [
+        menuObj => html`
+          <data-view-group-setting
+            @mouseenter=${() => menuObj.closeSubMenu()}
+            .groupTrait=${group}
+            .columnId=${gProp.id}
+          ></data-view-group-setting>
+        `,
+      ],
+    }),

-        menu.group({
-          items: [
-            menu.dynamic(() => [
-              menu.action({
-                name: 'Hide empty groups',
-                isSelected: group.hideEmpty$.value,
-                select: () => {
-                  group.setHideEmpty(!group.hideEmpty$.value);
-                  return false;
-                },
-              }),
-            ]),
-          ],
-        }),
-        menu.group({
-          items: [
-            menu => html`
-              <data-view-group-setting
-                @mouseenter=${() => menu.closeSubMenu()}
-                .groupTrait=${group}
-                .columnId=${gProp.id}
-              ></data-view-group-setting>
-            `,
-          ],
-        }),
-
-        menu.group({
-          items: [
-            menu.action({
-              name: 'Remove grouping',
-              prefix: DeleteIcon(),
-              class: { 'delete-item': true },
-              hide: () => !(view instanceof TableSingleView),
-              select: () => {
-                group.changeGroup(undefined);
-                return false;
-              },
-            }),
-          ],
+    menu.group({
+      items: [
+        menu.action({
+          name: 'Remove grouping',
+          prefix: DeleteIcon(),
+          class: { 'delete-item': true },
+          hide: () => !(view instanceof TableSingleView),
+          select: () => {
+            group.changeGroup(undefined);
+            onGroupRemoved?.();
+            return false;
+          },
        }),
      ],
-    },
-    middleware,
-  });
-  menuHandler.menu.menuElement.style.minHeight = '550px';
+    }),
+  ];
 };
@@ -0,0 +1,605 @@
+import { DocDisplayMetaProvider } from '@blocksuite/affine-shared/services';
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import type { InsertToPosition } from '@blocksuite/affine-shared/utils';
+import { type DeltaInsert, Text } from '@blocksuite/store';
+import { computed, type ReadonlySignal, signal } from '@preact/signals-core';
+import { Doc } from 'yjs';
+
+import { evalFilter } from '../../core/filter/eval.js';
+import { generateDefaultValues } from '../../core/filter/generate-default-values.js';
+import { FilterTrait, filterTraitKey } from '../../core/filter/trait.js';
+import type { FilterGroup } from '../../core/filter/types.js';
+import { emptyFilterGroup } from '../../core/filter/utils.js';
+import { fromJson } from '../../core/property/utils';
+import { SortManager, sortTraitKey } from '../../core/sort/manager.js';
+import { PropertyBase } from '../../core/view-manager/property.js';
+import { type Row, RowBase } from '../../core/view-manager/row.js';
+import {
+  type SingleView,
+  SingleViewBase,
+} from '../../core/view-manager/single-view.js';
+import type { ViewManager } from '../../core/view-manager/view-manager.js';
+import { getCalendarExternalSources } from './source.js';
+import type {
+  CalendarEntry,
+  CalendarEntryRange,
+  CalendarExternalEntry,
+  CalendarExternalSource,
+  CalendarRowEntry,
+  CalendarStoredViewData,
+  CalendarTitleSegment,
+} from './types.js';
+
+export type CalendarDateMapping =
+  | {
+      status: 'ready';
+      propertyId: string;
+    }
+  | {
+      status: 'setup';
+      propertyId?: string;
+    };
+
+const getStartColumnId = (data?: CalendarStoredViewData) =>
+  data?.date?.startColumnId;
+
+const getEndColumnId = (data?: CalendarStoredViewData) => {
+  return data?.date?.endColumnId;
+};
+
+const getDateData = (data: CalendarStoredViewData) => ({
+  ...data.date,
+  startColumnId: getStartColumnId(data),
+});
+
+const getCardData = (data?: CalendarStoredViewData) => {
+  if (data) {
+    return data.card;
+  }
+  return {
+    visiblePropertyIds: [],
+  };
+};
+
+const toTimestamp = (date: number | Date) =>
+  date instanceof Date ? date.getTime() : date;
+
+const isValidTimestamp = (value: unknown): value is number =>
+  typeof value === 'number' && Number.isFinite(value);
+
+const createLinkedDocTitle = (docId: string) => {
+  const text = new Text<AffineTextAttributes>();
+  new Doc().getMap('root').set('text', text.yText);
+  text.applyDelta([
+    {
+      insert: ' ',
+      attributes: { reference: { type: 'LinkedPage', pageId: docId } },
+    },
+  ] satisfies DeltaInsert<AffineTextAttributes>[]);
+  return text;
+};
+
+const getTitleDeltas = (value: unknown) =>
+  typeof value === 'object' && value != null && 'deltas$' in value
+    ? (value as { deltas$?: { value?: unknown } }).deltas$?.value
+    : undefined;
+
+const getTitleSegments = (
+  value: unknown,
+  title: string,
+  getLinkedDocTitle?: (pageId: string, title?: string) => string | undefined
+): CalendarTitleSegment[] | undefined => {
+  const deltas = getTitleDeltas(value);
+  if (!Array.isArray(deltas)) {
+    return;
+  }
+  const segments = deltas.flatMap(delta => {
+    const item = delta as {
+      insert?: unknown;
+      attributes?: {
+        reference?: {
+          type?: string;
+          pageId?: unknown;
+          title?: unknown;
+        };
+      };
+    };
+    const linkedDoc =
+      item.attributes?.reference?.type === 'LinkedPage' &&
+      typeof item.attributes.reference.pageId === 'string';
+    const referenceTitle = item.attributes?.reference?.title;
+    const resolvedLinkedDocTitle =
+      linkedDoc && typeof item.attributes?.reference?.pageId === 'string'
+        ? getLinkedDocTitle?.(
+            item.attributes.reference.pageId,
+            typeof referenceTitle === 'string' ? referenceTitle : undefined
+          )
+        : undefined;
+    const text =
+      resolvedLinkedDocTitle ||
+      (linkedDoc && typeof referenceTitle === 'string' && referenceTitle
+        ? referenceTitle
+        : typeof item.insert === 'string'
+          ? item.insert.trim()
+          : '');
+    if (linkedDoc) {
+      return {
+        text,
+        linkedDoc,
+      };
+    }
+    if (!text) {
+      return [];
+    }
+    return {
+      text,
+    };
+  });
+  const normalizedSegments = segments.reduce<CalendarTitleSegment[]>(
+    (result, segment) => {
+      const previous = result.at(-1);
+      if (
+        previous?.linkedDoc &&
+        !previous.text &&
+        !segment.linkedDoc &&
+        segment.text
+      ) {
+        previous.text = segment.text;
+        return result;
+      }
+      result.push(segment);
+      return result;
+    },
+    []
+  );
+  if (!normalizedSegments.some(segment => segment.linkedDoc)) {
+    return;
+  }
+  if (!normalizedSegments.some(segment => segment.text)) {
+    return title
+      ? [...normalizedSegments, { text: title }]
+      : normalizedSegments;
+  }
+  return normalizedSegments;
+};
+
+export class CalendarSingleView extends SingleViewBase<CalendarStoredViewData> {
+  private readonly externalEntries$ = signal<CalendarExternalEntry[]>([]);
+
+  private externalEntriesRequestId = 0;
+
+  propertiesRaw$ = computed(() => {
+    return this.dataSource.properties$.value.map(id =>
+      this.propertyGetOrCreate(id)
+    );
+  });
+
+  properties$ = this.propertiesRaw$;
+
+  detailProperties$ = computed(() => {
+    return this.propertiesRaw$.value.filter(
+      property => property.type$.value !== 'title'
+    );
+  });
+
+  private readonly filter$ = computed(() => {
+    return this.data$.value?.filter ?? emptyFilterGroup;
+  });
+
+  private readonly sortList$ = computed(() => {
+    return this.data$.value?.sort;
+  });
+
+  emptyMonthHintDismissed$ = computed(() => {
+    return this.data$.value?.ui?.emptyMonthHintDismissed ?? false;
+  });
+
+  private readonly sortManager = this.traitSet(
+    sortTraitKey,
+    new SortManager(this.sortList$, this, {
+      setSortList: sortList => {
+        this.dataUpdate(data => ({
+          sort: {
+            ...data.sort,
+            ...sortList,
+          },
+        }));
+      },
+    })
+  );
+
+  filterTrait = this.traitSet(
+    filterTraitKey,
+    new FilterTrait(this.filter$, this, {
+      filterSet: (filter: FilterGroup) => {
+        this.dataUpdate(() => ({ filter }));
+      },
+    })
+  );
+
+  mainProperties$ = computed(() => {
+    const card = getCardData(this.data$.value);
+    return {
+      titleColumn:
+        card.titleColumnId ??
+        this.propertiesRaw$.value.find(
+          property => property.type$.value === 'title'
+        )?.id,
+    };
+  });
+
+  readonly$ = computed(() => {
+    return this.manager.readonly$.value;
+  });
+
+  dateProperties$ = computed(() => {
+    return this.propertiesRaw$.value.filter(
+      property => property.type$.value === 'date'
+    );
+  });
+
+  dateMapping$: ReadonlySignal<CalendarDateMapping> = computed(() => {
+    const propertyId = getStartColumnId(this.data$.value);
+    if (
+      propertyId &&
+      this.dataSource.properties$.value.includes(propertyId) &&
+      this.dataSource.propertyTypeGet(propertyId) === 'date'
+    ) {
+      return {
+        status: 'ready',
+        propertyId,
+      };
+    }
+    return {
+      status: 'setup',
+      propertyId,
+    };
+  });
+
+  startDateMapping$ = this.dateMapping$;
+
+  endDateMapping$: ReadonlySignal<CalendarDateMapping> = computed(() => {
+    const propertyId = getEndColumnId(this.data$.value);
+    if (
+      propertyId &&
+      this.dataSource.properties$.value.includes(propertyId) &&
+      this.dataSource.propertyTypeGet(propertyId) === 'date'
+    ) {
+      return {
+        status: 'ready',
+        propertyId,
+      };
+    }
+    return {
+      status: 'setup',
+      propertyId,
+    };
+  });
+
+  private readonly visibleCardProperties$ = computed(() => {
+    const card = getCardData(this.data$.value);
+    const visiblePropertyIds = card.visiblePropertyIds ?? [];
+    const titleColumn = card.titleColumnId;
+    return visiblePropertyIds
+      .filter(propertyId => propertyId !== titleColumn)
+      .map(propertyId => this.propertyGetOrCreate(propertyId));
+  });
+
+  rowEntries$ = computed<CalendarRowEntry[]>(() => {
+    const mapping = this.dateMapping$.value;
+    if (mapping.status !== 'ready') {
+      return [];
+    }
+    const endMapping = this.endDateMapping$.value;
+    return this.rows$.value.flatMap(row => {
+      const startAt = this.cellGetOrCreate(row.rowId, mapping.propertyId)
+        .jsonValue$.value;
+      if (!isValidTimestamp(startAt)) {
+        return [];
+      }
+      const endAt =
+        endMapping.status === 'ready'
+          ? this.cellGetOrCreate(row.rowId, endMapping.propertyId).jsonValue$
+              .value
+          : undefined;
+      const titleColumn = this.mainProperties$.value.titleColumn ?? 'title';
+      const titleCell = this.cellGetOrCreate(row.rowId, titleColumn);
+      const jsonTitle = titleCell.jsonValue$.value;
+      const title =
+        (typeof jsonTitle === 'string'
+          ? jsonTitle
+          : titleCell.stringValue$.value) ?? '';
+      const docDisplayMeta = this.manager.dataSource.serviceGet(
+        DocDisplayMetaProvider
+      );
+      const resolveLinkedDocTitle = (pageId: string, title?: string) =>
+        docDisplayMeta?.title(pageId, { title }).value;
+      const titleSegments = getTitleSegments(
+        titleCell.value$.value,
+        title,
+        resolveLinkedDocTitle
+      );
+      const cardProperties = this.visibleCardProperties$.value.flatMap(
+        property => {
+          const cell = this.cellGetOrCreate(row.rowId, property.id);
+          const value = cell.stringValue$.value;
+          if (!value) {
+            return [];
+          }
+          return {
+            propertyId: property.id,
+            value,
+          };
+        }
+      );
+      return {
+        kind: 'row',
+        id: `database:${row.rowId}`,
+        sourceId: 'database',
+        rowId: row.rowId,
+        title,
+        startAt,
+        endAt: isValidTimestamp(endAt) && endAt >= startAt ? endAt : undefined,
+        titleSegments,
+        cardProperties,
+        canResizeRange: endMapping.status === 'ready' && !this.readonly$.value,
+      } satisfies CalendarRowEntry;
+    });
+  });
+
+  entries$ = computed<CalendarEntry[]>(() => {
+    return [...this.rowEntries$.value, ...this.externalEntries$.value];
+  });
+
+  externalSources$ = computed<CalendarExternalSource[]>(() => {
+    const viewData = this.data$.value;
+    if (!viewData) {
+      return [];
+    }
+    return getCalendarExternalSources(this.dataSource, viewData);
+  });
+
+  get type(): string {
+    return this.data$.value?.mode ?? 'calendar';
+  }
+
+  constructor(viewManager: ViewManager, viewId: string) {
+    super(viewManager, viewId);
+  }
+
+  isShow(rowId: string): boolean {
+    if (this.filter$.value.conditions.length) {
+      const rowMap = Object.fromEntries(
+        this.propertiesRaw$.value.map(column => [
+          column.id,
+          column.cellGetOrCreate(rowId).jsonValue$.value,
+        ])
+      );
+      return evalFilter(this.filter$.value, rowMap);
+    }
+    return true;
+  }
+
+  override rowsMapping(rows: Row[]) {
+    return this.sortManager.sort(super.rowsMapping(rows));
+  }
+
+  propertyGetOrCreate(propertyId: string): CalendarProperty {
+    return new CalendarProperty(this, propertyId);
+  }
+
+  override rowGetOrCreate(rowId: string): CalendarRow {
+    return new CalendarRow(this, rowId);
+  }
+
+  setStartDateColumn(propertyId: string) {
+    this.dataUpdate(data => ({
+      date: {
+        ...getDateData(data),
+        startColumnId: propertyId,
+      },
+    }));
+  }
+
+  setDateColumn(propertyId: string) {
+    this.setStartDateColumn(propertyId);
+  }
+
+  setEndDateColumn(propertyId: string | undefined) {
+    this.dataUpdate(data => ({
+      date: {
+        ...getDateData(data),
+        endColumnId: propertyId,
+      },
+    }));
+  }
+
+  setWorkspaceCalendarEnabled(enabled: boolean) {
+    this.dataUpdate(data => ({
+      sources: {
+        ...data.sources,
+        workspaceCalendar: {
+          ...(data.sources?.workspaceCalendar ?? { enabled: true }),
+          enabled,
+        },
+      },
+    }));
+  }
+
+  setWorkspaceCalendarSubscriptionIds(subscriptionIds?: string[]) {
+    this.dataUpdate(data => ({
+      sources: {
+        ...data.sources,
+        workspaceCalendar: {
+          ...(data.sources?.workspaceCalendar ?? { enabled: true }),
+          subscriptionIds,
+        },
+      },
+    }));
+  }
+
+  dismissEmptyMonthHint() {
+    this.dataUpdate(data => ({
+      ui: {
+        ...data.ui,
+        emptyMonthHintDismissed: true,
+      },
+    }));
+  }
+
+  getDocDisplayTitle(docId: string) {
+    return (
+      this.manager.dataSource.serviceGet(DocDisplayMetaProvider)?.title(docId)
+        .value ?? 'Untitled'
+    );
+  }
+
+  createStartDateColumn() {
+    const id = this.propertyAdd('end', {
+      type: 'date',
+      name: 'Date',
+    });
+    if (id) {
+      this.setStartDateColumn(id);
+    }
+    return id;
+  }
+
+  createDateColumn() {
+    return this.createStartDateColumn();
+  }
+
+  createEndDateColumn() {
+    const id = this.propertyAdd('end', {
+      type: 'date',
+      name: 'End Date',
+    });
+    if (id) {
+      this.setEndDateColumn(id);
+    }
+    return id;
+  }
+
+  createRowOnDate(date: number | Date) {
+    const mapping = this.startDateMapping$.value;
+    if (mapping.status !== 'ready') {
+      return;
+    }
+    const rowId = this.rowAdd('end');
+    const filter = this.filter$.value;
+    if (filter.conditions.length > 0) {
+      const defaultValues = generateDefaultValues(filter, this.vars$.value);
+      Object.entries(defaultValues).forEach(([propertyId, jsonValue]) => {
+        const property = this.propertyGetOrCreate(propertyId);
+        const propertyMeta = property.meta$.value;
+        if (propertyMeta) {
+          const value = fromJson(propertyMeta.config, {
+            value: jsonValue,
+            data: property.data$.value,
+            dataSource: this.dataSource,
+          });
+          this.cellGetOrCreate(rowId, propertyId).valueSet(value);
+        }
+      });
+    }
+    this.cellGetOrCreate(rowId, mapping.propertyId).jsonValueSet(
+      toTimestamp(date)
+    );
+    this.dismissEmptyMonthHint();
+    return rowId;
+  }
+
+  createLinkedDocRowOnDate(date: number | Date, docId: string) {
+    const rowId = this.createRowOnDate(date);
+    if (!rowId) return;
+    const titleColumn = this.mainProperties$.value.titleColumn ?? 'title';
+    this.cellGetOrCreate(rowId, titleColumn).valueSet(
+      createLinkedDocTitle(docId)
+    );
+    return rowId;
+  }
+
+  moveRowToDate(rowId: string, date: number | Date) {
+    const mapping = this.startDateMapping$.value;
+    if (mapping.status !== 'ready') {
+      return;
+    }
+    const value = toTimestamp(date);
+    const oldStartAt = this.cellGetOrCreate(rowId, mapping.propertyId)
+      .jsonValue$.value;
+    const endMapping = this.endDateMapping$.value;
+    if (endMapping.status === 'ready' && isValidTimestamp(oldStartAt)) {
+      const oldEndAt = this.cellGetOrCreate(rowId, endMapping.propertyId)
+        .jsonValue$.value;
+      if (isValidTimestamp(oldEndAt) && oldEndAt >= oldStartAt) {
+        this.cellGetOrCreate(rowId, endMapping.propertyId).jsonValueSet(
+          value + (oldEndAt - oldStartAt)
+        );
+      }
+    }
+    this.cellGetOrCreate(rowId, mapping.propertyId).jsonValueSet(value);
+  }
+
+  resizeRowRange(rowId: string, edge: 'start' | 'end', date: number | Date) {
+    const startMapping = this.startDateMapping$.value;
+    const endMapping = this.endDateMapping$.value;
+    if (startMapping.status !== 'ready' || endMapping.status !== 'ready') {
+      return;
+    }
+    const startCell = this.cellGetOrCreate(rowId, startMapping.propertyId);
+    const endCell = this.cellGetOrCreate(rowId, endMapping.propertyId);
+    const startAt = startCell.jsonValue$.value;
+    const endAt = endCell.jsonValue$.value;
+    if (!isValidTimestamp(startAt) || !isValidTimestamp(endAt)) {
+      return;
+    }
+    const value = toTimestamp(date);
+    if (edge === 'start') {
+      startCell.jsonValueSet(Math.min(value, endAt));
+    } else {
+      endCell.jsonValueSet(Math.max(value, startAt));
+    }
+  }
+
+  async loadExternalEntries(range: CalendarEntryRange) {
+    const requestId = ++this.externalEntriesRequestId;
+    const viewData = this.data$.value;
+    if (!viewData) {
+      this.externalEntries$.value = [];
+      return [];
+    }
+    const results = await Promise.allSettled(
+      this.externalSources$.value.map(source =>
+        Promise.resolve(source.getEntries(range))
+      )
+    );
+    const entries = results.flatMap(result =>
+      result.status === 'fulfilled' ? result.value : []
+    );
+    if (requestId === this.externalEntriesRequestId) {
+      this.externalEntries$.value = entries;
+    }
+    return entries;
+  }
+}
+
+export class CalendarProperty extends PropertyBase {
+  hide$ = computed(() => false);
+
+  constructor(view: CalendarSingleView, propertyId: string) {
+    super(view as SingleView, propertyId);
+  }
+
+  hideSet(_hide: boolean): void {}
+
+  move(_position: InsertToPosition): void {}
+}
+
+export class CalendarRow extends RowBase {
+  constructor(
+    readonly calendarView: CalendarSingleView,
+    rowId: string
+  ) {
+    super(calendarView, rowId);
+  }
+}
@@ -0,0 +1,34 @@
+import { viewType } from '../../core/view/data-view.js';
+import { CalendarSingleView } from './calendar-view-manager.js';
+import type { CalendarViewData } from './types.js';
+
+export const calendarViewType = viewType('calendar');
+
+export const calendarViewModel = calendarViewType.createModel<CalendarViewData>(
+  {
+    defaultName: 'Calendar View',
+    dataViewManager: CalendarSingleView,
+    defaultData: viewManager => {
+      return {
+        filter: {
+          type: 'group',
+          op: 'and',
+          conditions: [],
+        },
+        date: {},
+        card: {
+          titleColumnId: viewManager.dataSource.properties$.value.find(
+            id => viewManager.dataSource.propertyTypeGet(id) === 'title'
+          ),
+          visiblePropertyIds: [],
+        },
+        sources: {
+          workspaceCalendar: {
+            enabled: true,
+          },
+        },
+        ui: {},
+      };
+    },
+  }
+);
@@ -0,0 +1,5 @@
+import { pcEffects } from './pc/effect.js';
+
+export function calendarEffects() {
+  pcEffects();
+}
@@ -0,0 +1,6 @@
+export * from './calendar-view-manager.js';
+export * from './define.js';
+export * from './layout.js';
+export * from './renderer.js';
+export * from './source.js';
+export * from './types.js';
@@ -0,0 +1,250 @@
+import type { CalendarEntry } from './types.js';
+
+export type CalendarDayLayout = {
+  date: number;
+  inMonth: boolean;
+  entries: CalendarEntry[];
+  segments: CalendarRangeSegment[];
+};
+
+export type CalendarRangeSegment = {
+  entry: CalendarEntry;
+  weekIndex: number;
+  startIndex: number;
+  span: number;
+  slot: number;
+  startsBeforeWeek: boolean;
+  endsAfterWeek: boolean;
+};
+
+export type CalendarMonthLayout = {
+  from: number;
+  to: number;
+  weeks: CalendarDayLayout[][];
+  days: CalendarDayLayout[];
+  segments: CalendarRangeSegment[];
+};
+
+export type CalendarMonthLayoutOptions = {
+  month: number | Date;
+  entries: CalendarEntry[];
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+};
+
+const startOfDay = (date: Date) =>
+  new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+
+const addDays = (date: number, days: number) => {
+  const current = new Date(date);
+  return startOfDay(
+    new Date(
+      current.getFullYear(),
+      current.getMonth(),
+      current.getDate() + days
+    )
+  );
+};
+
+const endOfDay = (date: number) => addDays(date, 1) - 1;
+
+const toDate = (value: number | Date) =>
+  value instanceof Date ? value : new Date(value);
+
+export const getCalendarVisibleMonthRange = (
+  month: number | Date,
+  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6 = 0
+) => {
+  const cursor = toDate(month);
+  const monthStart = new Date(cursor.getFullYear(), cursor.getMonth(), 1);
+  const monthEnd = new Date(cursor.getFullYear(), cursor.getMonth() + 1, 0);
+  const startOffset = (monthStart.getDay() - weekStartsOn + 7) % 7;
+  const endOffset = (weekStartsOn + 6 - monthEnd.getDay() + 7) % 7;
+  const from = startOfDay(
+    new Date(
+      monthStart.getFullYear(),
+      monthStart.getMonth(),
+      monthStart.getDate() - startOffset
+    )
+  );
+  const to = endOfDay(
+    startOfDay(
+      new Date(
+        monthEnd.getFullYear(),
+        monthEnd.getMonth(),
+        monthEnd.getDate() + endOffset
+      )
+    )
+  );
+
+  return {
+    from,
+    to,
+    monthStart: startOfDay(monthStart),
+    monthEnd: endOfDay(startOfDay(monthEnd)),
+  };
+};
+
+const isRangeEntry = (entry: CalendarEntry) =>
+  entry.endAt != null &&
+  getRangeEndDay(entry) > startOfDay(new Date(entry.startAt));
+
+const getRangeEndDay = (entry: CalendarEntry) => {
+  const endAt = entry.endAt ?? entry.startAt;
+  const end = new Date(endAt);
+  if (
+    entry.kind === 'external' &&
+    entry.allDay &&
+    endAt > entry.startAt &&
+    end.getHours() === 0 &&
+    end.getMinutes() === 0 &&
+    end.getSeconds() === 0 &&
+    end.getMilliseconds() === 0
+  ) {
+    return addDays(startOfDay(end), -1);
+  }
+  return startOfDay(end);
+};
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
+const getDayOffset = (days: CalendarDayLayout[], date: number) =>
+  days.findIndex(day => day.date === date);
+
+const assignSegmentSlots = (
+  weeks: CalendarDayLayout[][],
+  segments: CalendarRangeSegment[]
+) => {
+  for (let weekIndex = 0; weekIndex < weeks.length; weekIndex++) {
+    const weekSegments = segments.filter(
+      segment => segment.weekIndex === weekIndex
+    );
+    const slots: boolean[][] = [];
+    for (const segment of weekSegments) {
+      let slot = 0;
+      while (
+        slots[slot]?.some(
+          (occupied, index) =>
+            occupied &&
+            index >= segment.startIndex &&
+            index < segment.startIndex + segment.span
+        )
+      ) {
+        slot++;
+      }
+      const slotDays = (slots[slot] ??= Array.from({ length: 7 }, () => false));
+      for (
+        let index = segment.startIndex;
+        index < segment.startIndex + segment.span;
+        index++
+      ) {
+        slotDays[index] = true;
+      }
+      segment.slot = slot;
+    }
+  }
+};
+
+export const getCalendarDaySegmentSlots = (
+  day: CalendarDayLayout,
+  ignoredEntryId?: string
+) => {
+  return Math.max(
+    0,
+    ...day.segments
+      .filter(segment => segment.entry.id !== ignoredEntryId)
+      .map(segment => segment.slot + 1)
+  );
+};
+
+export const getCalendarDayContentSlots = (
+  day: CalendarDayLayout,
+  ignoredEntryId?: string
+) => {
+  return (
+    getCalendarDaySegmentSlots(day, ignoredEntryId) +
+    day.entries.filter(entry => entry.id !== ignoredEntryId).length
+  );
+};
+
+export const createCalendarMonthLayout = ({
+  month,
+  entries,
+  weekStartsOn = 0,
+}: CalendarMonthLayoutOptions): CalendarMonthLayout => {
+  const range = getCalendarVisibleMonthRange(month, weekStartsOn);
+  const cursor = toDate(month);
+  const days: CalendarDayLayout[] = [];
+  const dayByTime = new Map<number, CalendarDayLayout>();
+
+  for (let date = range.from; date <= range.to; date = addDays(date, 1)) {
+    const day: CalendarDayLayout = {
+      date,
+      inMonth:
+        new Date(date).getMonth() === cursor.getMonth() &&
+        new Date(date).getFullYear() === cursor.getFullYear(),
+      entries: [],
+      segments: [],
+    };
+    days.push(day);
+    dayByTime.set(date, day);
+  }
+
+  for (const entry of entries) {
+    if (isRangeEntry(entry)) {
+      continue;
+    }
+    const day = dayByTime.get(startOfDay(new Date(entry.startAt)));
+    if (day) {
+      day.entries.push(entry);
+    }
+  }
+
+  const segments: CalendarRangeSegment[] = [];
+  const rangeEntries = entries.filter(isRangeEntry);
+  const visibleEndDay = startOfDay(new Date(range.to));
+  for (const entry of rangeEntries) {
+    const entryStart = startOfDay(new Date(entry.startAt));
+    const entryEnd = getRangeEndDay(entry);
+    if (entryEnd < range.from || entryStart > visibleEndDay) {
+      continue;
+    }
+    const start = clamp(entryStart, range.from, visibleEndDay);
+    const end = clamp(entryEnd, range.from, visibleEndDay);
+    const startOffset = getDayOffset(days, start);
+    const endOffset = getDayOffset(days, end);
+    if (startOffset < 0 || endOffset < 0) {
+      continue;
+    }
+    let offset = startOffset;
+    while (offset <= endOffset) {
+      const weekIndex = Math.floor(offset / 7);
+      const startIndex = offset % 7;
+      const weekEndOffset = weekIndex * 7 + 6;
+      const span = Math.min(endOffset, weekEndOffset) - offset + 1;
+      const segment = {
+        entry,
+        weekIndex,
+        startIndex,
+        span,
+        slot: 0,
+        startsBeforeWeek: startOffset < weekIndex * 7,
+        endsAfterWeek: endOffset > weekEndOffset,
+      };
+      segments.push(segment);
+      for (let index = 0; index < span; index++) {
+        days[offset + index]?.segments.push(segment);
+      }
+      offset += span;
+    }
+  }
+
+  const weeks: CalendarDayLayout[][] = [];
+  for (let index = 0; index < days.length; index += 7) {
+    weeks.push(days.slice(index, index + 7));
+  }
+
+  assignSegmentSlots(weeks, segments);
+
+  return { from: range.from, to: range.to, weeks, days, segments };
+};
@@ -0,0 +1,87 @@
+import {
+  popMenu,
+  popupTargetFromElement,
+} from '@blocksuite/affine-components/context-menu';
+import {
+  CalendarPanelIcon,
+  DateTimeIcon,
+  PinIcon,
+  TextIcon,
+} from '@blocksuite/icons/lit';
+import { html } from 'lit';
+
+import type { DataViewRootUILogic } from '../../../core/data-view.js';
+import type { CalendarSingleView } from '../calendar-view-manager.js';
+import type { CalendarEntry } from '../types.js';
+
+const dateTimeFormatter = new Intl.DateTimeFormat(undefined, {
+  dateStyle: 'medium',
+  timeStyle: 'short',
+});
+
+const dateFormatter = new Intl.DateTimeFormat(undefined, {
+  dateStyle: 'medium',
+});
+
+export const formatEntryTime = (entry: CalendarEntry) => {
+  const formatter = entry.allDay ? dateFormatter : dateTimeFormatter;
+  const start = formatter.format(new Date(entry.startAt));
+  if (!entry.endAt) {
+    return start;
+  }
+  return `${start} - ${formatter.format(new Date(entry.endAt))}`;
+};
+
+export const openCalendarEntry = (
+  root: DataViewRootUILogic,
+  view: CalendarSingleView,
+  entry: CalendarEntry,
+  target: HTMLElement,
+  options?: { selectEntry?: (entryId: string | undefined) => void }
+) => {
+  if (entry.kind === 'row') {
+    options?.selectEntry?.(entry.id);
+    root.openDetailPanel({
+      view,
+      rowId: entry.rowId,
+      onClose: () => options?.selectEntry?.(undefined),
+    });
+    return;
+  }
+
+  popMenu(popupTargetFromElement(target), {
+    options: {
+      items: [
+        () => html`
+          <div class="calendar-event-popover">
+            <div class="calendar-event-popover-title">${entry.title}</div>
+            <div class="calendar-event-popover-row">
+              <span class="calendar-event-popover-icon"
+                >${CalendarPanelIcon()}</span
+              >
+              <span>${entry.calendarName ?? 'Calendar event'}</span>
+            </div>
+            <div class="calendar-event-popover-row">
+              <span class="calendar-event-popover-icon">${DateTimeIcon()}</span>
+              <span>${formatEntryTime(entry)}</span>
+            </div>
+            ${entry.location
+              ? html`<div class="calendar-event-popover-row">
+                  <span class="calendar-event-popover-icon">${PinIcon()}</span>
+                  <span>${entry.location}</span>
+                </div>`
+              : ''}
+            ${entry.description
+              ? html`<div class="calendar-event-popover-row">
+                  <span class="calendar-event-popover-icon">${TextIcon()}</span>
+                  <span class="calendar-event-popover-description"
+                    >${entry.description}</span
+                  >
+                </div>`
+              : ''}
+          </div>
+        `,
+      ],
+    },
+  });
+};
@@ -0,0 +1,244 @@
+import type { DndController } from '@blocksuite/std';
+
+import type { CalendarEntry, CalendarRowEntry } from '../types.js';
+import { getCalendarDateFromPoint } from './hit-test.js';
+
+export type CalendarDndEntity =
+  | {
+      type: 'calendar-entry';
+      entryId: string;
+    }
+  | {
+      type: 'doc';
+      docId: string;
+    };
+
+type CalendarDndData = {
+  bsEntity?: unknown;
+  entity?: unknown;
+};
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null;
+
+export const getCalendarDndEntity = (
+  data: unknown
+): CalendarDndEntity | undefined => {
+  if (!isRecord(data)) {
+    return;
+  }
+
+  const bsEntity = (data as CalendarDndData).bsEntity;
+  if (isRecord(bsEntity)) {
+    if (
+      bsEntity.type === 'calendar-entry' &&
+      typeof bsEntity.entryId === 'string'
+    ) {
+      return {
+        type: 'calendar-entry',
+        entryId: bsEntity.entryId,
+      };
+    }
+    if (bsEntity.type === 'doc' && typeof bsEntity.docId === 'string') {
+      return {
+        type: 'doc',
+        docId: bsEntity.docId,
+      };
+    }
+  }
+
+  const entity = (data as CalendarDndData).entity;
+  if (
+    isRecord(entity) &&
+    entity.type === 'doc' &&
+    typeof entity.id === 'string'
+  ) {
+    return {
+      type: 'doc',
+      docId: entity.id,
+    };
+  }
+
+  return;
+};
+
+export type CalendarDndCallbacks = {
+  getEntry: (entryId: string) => CalendarEntry | undefined;
+  canDragEntry: () => boolean;
+  canDrop: (entity: CalendarDndEntity) => boolean;
+  onEntryDragStart: (entry: CalendarRowEntry) => void;
+  onEntryDragEnd: () => void;
+  onDropTargetChange: (
+    date: number | undefined,
+    entity?: CalendarDndEntity
+  ) => void;
+  onDrop: (entity: CalendarDndEntity, date: number) => void;
+};
+
+type ElementCleanup = {
+  element: HTMLElement;
+  cleanup: () => void;
+};
+
+export class CalendarDnd {
+  private readonly entryCleanups = new Map<string, ElementCleanup>();
+
+  private rootCleanup?: ElementCleanup;
+
+  constructor(
+    private readonly dnd: DndController | undefined,
+    private readonly callbacks: CalendarDndCallbacks
+  ) {}
+
+  bindRoot(element?: Element) {
+    if (!this.dnd || !(element instanceof HTMLElement)) {
+      this.cleanupRoot();
+      return;
+    }
+
+    if (this.rootCleanup?.element === element) {
+      return;
+    }
+    this.cleanupRoot();
+
+    const cleanup = this.dnd.dropTarget<CalendarDndEntity, { date?: number }>({
+      element,
+      getIsSticky: () => true,
+      setDropData: ({ input }) => ({
+        date: getCalendarDateFromPoint(element, input.clientX, input.clientY),
+      }),
+      canDrop: ({ source, input }) => {
+        const entity = getCalendarDndEntity(source.data);
+        const date = getCalendarDateFromPoint(
+          element,
+          input.clientX,
+          input.clientY
+        );
+        return entity && date !== undefined
+          ? this.callbacks.canDrop(entity)
+          : false;
+      },
+      onDrag: ({ source, location }) => {
+        this.updateDropTarget(element, source.data, location.current.input);
+      },
+      onDragEnter: ({ source, location }) => {
+        this.updateDropTarget(element, source.data, location.current.input);
+      },
+      onDragLeave: () => {
+        this.callbacks.onDropTargetChange(undefined);
+      },
+      onDrop: ({ source, location }) => {
+        const entity = getCalendarDndEntity(source.data);
+        const date = getCalendarDateFromPoint(
+          element,
+          location.current.input.clientX,
+          location.current.input.clientY
+        );
+        if (entity && date !== undefined && this.callbacks.canDrop(entity)) {
+          this.callbacks.onDrop(entity, date);
+        }
+        this.callbacks.onDropTargetChange(undefined);
+      },
+    });
+
+    this.rootCleanup = { element, cleanup };
+  }
+
+  bindEntry(
+    key: string,
+    entry: CalendarEntry,
+    element?: Element,
+    disabled = false
+  ) {
+    if (
+      !this.dnd ||
+      !(element instanceof HTMLElement) ||
+      entry.kind !== 'row' ||
+      disabled
+    ) {
+      this.cleanupEntry(key);
+      if (element instanceof HTMLElement) {
+        element.setAttribute('draggable', 'false');
+      }
+      return;
+    }
+
+    const current = this.entryCleanups.get(key);
+    if (current?.element === element) {
+      return;
+    }
+    this.cleanupEntry(key);
+
+    const cleanup = this.dnd.draggable<CalendarDndEntity>({
+      element,
+      canDrag: () => {
+        const currentEntry = this.callbacks.getEntry(entry.id);
+        return currentEntry?.kind === 'row'
+          ? this.callbacks.canDragEntry()
+          : false;
+      },
+      setDragData: () => ({
+        type: 'calendar-entry',
+        entryId: entry.id,
+      }),
+      setDragPreview: ({ container, setOffset }) => {
+        const currentEntry = this.callbacks.getEntry(entry.id);
+        const preview = document.createElement('div');
+        preview.textContent = currentEntry?.title || 'Untitled';
+        preview.style.cssText =
+          'padding:0 6px;height:22px;line-height:22px;border-radius:4px;' +
+          'font-size:12px;white-space:nowrap;overflow:hidden;' +
+          'background:var(--affine-hover-color,#f5f5f5);' +
+          'color:var(--affine-text-primary-color,#333);' +
+          'max-width:140px;text-overflow:ellipsis;pointer-events:none;';
+        container.append(preview);
+        setOffset({ x: 10, y: 11 });
+      },
+      onDragStart: () => {
+        const currentEntry = this.callbacks.getEntry(entry.id);
+        if (currentEntry?.kind === 'row') {
+          this.callbacks.onEntryDragStart(currentEntry);
+        }
+      },
+      onDrop: () => {
+        this.callbacks.onEntryDragEnd();
+      },
+    });
+
+    this.entryCleanups.set(key, { element, cleanup });
+  }
+
+  cleanup() {
+    this.cleanupRoot();
+    for (const key of this.entryCleanups.keys()) {
+      this.cleanupEntry(key);
+    }
+  }
+
+  private cleanupEntry(key: string) {
+    this.entryCleanups.get(key)?.cleanup();
+    this.entryCleanups.delete(key);
+  }
+
+  private cleanupRoot() {
+    this.rootCleanup?.cleanup();
+    this.rootCleanup = undefined;
+  }
+
+  private updateDropTarget(
+    root: HTMLElement,
+    data: unknown,
+    input: {
+      clientX: number;
+      clientY: number;
+    }
+  ) {
+    const entity = getCalendarDndEntity(data);
+    const date = getCalendarDateFromPoint(root, input.clientX, input.clientY);
+    if (entity && date !== undefined && this.callbacks.canDrop(entity)) {
+      this.callbacks.onDropTargetChange(date, entity);
+    } else {
+      this.callbacks.onDropTargetChange(undefined);
+    }
+  }
+}
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .22.2
 .23.0