fix(core): generate the image cannot enter text prompt (#12717)

Close [AI-167](https://linear.app/affine-design/issue/AI-167)

![截屏2025-06-05 12.15.49.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/c1afff0e-1197-46dc-ae43-ff7257039509.png)

![截屏2025-06-05 12.14.07.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/1439b0a7-1cca-4848-aea2-84bc73c536c5.png)

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

- **New Features**
  - Improved AI panel behavior with explicit modes for input and answer generation, providing a more intuitive user experience when interacting with AI features.

- **Refactor**
  - Streamlined AI panel toggling logic for more consistent and predictable panel states during different actions.

- **Tests**
  - Enhanced AI image generation test to simulate user input and send actions for more accurate end-to-end validation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

.docker/selfhost/schema.json

@@ -886,8 +886,8 @@
       "properties": {
         "enabled": {
           "type": "boolean",
-          "description": "Enable indexer plugin\n@default true\n@environment `AFFINE_INDEXER_ENABLED`",
-          "default": true
+          "description": "Enable indexer plugin\n@default false\n@environment `AFFINE_INDEXER_ENABLED`",
+          "default": false
         },
         "provider.type": {
           "type": "string",

.github/workflows/build-images.yml

@@ -113,6 +113,7 @@ jobs:
   build-server-native:
     name: Build Server native - ${{ matrix.targets.name }}
     runs-on: ubuntu-latest
+    environment: ${{ github.event.inputs.flavor }}
     strategy:
       fail-fast: false
       matrix:

.github/workflows/build-test.yml

@@ -20,6 +20,7 @@ env:
   COVERAGE: true
   MACOSX_DEPLOYMENT_TARGET: '10.13'
   DEPLOYMENT_TYPE: affine
+  AFFINE_INDEXER_ENABLED: true
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -151,7 +152,8 @@ jobs:
       - name: Clippy
         run: |
           rustup component add clippy
-          cargo clippy --all-targets --all-features -- -D warnings
+          cargo clippy --workspace --exclude affine_server_native --all-targets --all-features -- -D warnings
+          cargo clippy -p affine_server_native --all-targets --all-features -- -D warnings
 
   check-git-status:
     name: Check Git Status
@@ -923,7 +925,7 @@ jobs:
         uses: taiki-e/install-action@nextest
 
       - name: Run tests
-        run: cargo nextest run --release --no-fail-fast
+        run: cargo nextest run --workspace --exclude affine_server_native --features use-as-lib --release --no-fail-fast
 
   copilot-api-test:
     name: Server Copilot Api Test

.github/workflows/release-mobile.yml

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

Cargo.toml

@@ -47,9 +47,9 @@ log                    = "0.4"
 loom                   = { version = "0.7", features = ["checkpoint"] }
 mimalloc               = "0.1"
 nanoid                 = "0.4"
-napi                   = { version = "3.0.0-alpha.31", features = ["async", "chrono_date", "error_anyhow", "napi9", "serde"] }
+napi                   = { version = "3.0.0-beta.3", features = ["async", "chrono_date", "error_anyhow", "napi9", "serde"] }
 napi-build             = { version = "2" }
-napi-derive            = { version = "3.0.0-alpha.28" }
+napi-derive            = { version = "3.0.0-beta.3" }
 nom                    = "8"
 notify                 = { version = "8", features = ["serde"] }
 objc2                  = "0.6"
@@ -77,12 +77,12 @@ smol_str               = "0.3"
 sqlx                   = { version = "0.8", default-features = false, features = ["chrono", "macros", "migrate", "runtime-tokio", "sqlite", "tls-rustls"] }
 strum_macros           = "0.27.0"
 symphonia              = { version = "0.5", features = ["all", "opt-simd"] }
-text-splitter          = "0.25"
+text-splitter          = "0.27"
 thiserror              = "2"
-tiktoken-rs            = "0.6"
-tokio                  = "1.37"
+tiktoken-rs            = "0.7"
+tokio                  = "1.45"
 tree-sitter            = { version = "0.25" }
-tree-sitter-c          = { version = "0.23" }
+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" }

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

@@ -17,6 +17,7 @@ import {
   AttachmentBlockStyles,
 } from '@blocksuite/affine-model';
 import {
+  CitationProvider,
   DocModeProvider,
   FileSizeLimitProvider,
   TelemetryProvider,
@@ -37,6 +38,7 @@ import { type ClassInfo, classMap } from 'lit/directives/class-map.js';
 import { guard } from 'lit/directives/guard.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
+import { filter } from 'rxjs/operators';
 
 import { AttachmentEmbedProvider } from './embed';
 import { styles } from './styles';
@@ -79,8 +81,12 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
     return this.std.get(FileSizeLimitProvider).maxFileSize;
   }
 
+  get citationService() {
+    return this.std.get(CitationProvider);
+  }
+
   get isCitation() {
-    return !!this.model.props.footnoteIdentifier;
+    return this.citationService.isCitationModel(this.model);
   }
 
   convertTo = () => {
@@ -139,6 +145,34 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
     selectionManager.setGroup('note', [blockSelection]);
   }
 
+  private readonly _trackCitationDeleteEvent = () => {
+    // Check citation delete event
+    this._disposables.add(
+      this.std.store.slots.blockUpdated
+        .pipe(
+          filter(payload => {
+            if (!payload.isLocal) return false;
+
+            const { flavour, id, type } = payload;
+            if (
+              type !== 'delete' ||
+              flavour !== this.model.flavour ||
+              id !== this.model.id
+            )
+              return false;
+
+            const { model } = payload;
+            if (!this.citationService.isCitationModel(model)) return false;
+
+            return true;
+          })
+        )
+        .subscribe(() => {
+          this.citationService.trackEvent('Delete');
+        })
+    );
+  };
+
   override connectedCallback() {
     super.connectedCallback();
 
@@ -162,6 +196,8 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
         });
       });
     }
+
+    this._trackCitationDeleteEvent();
   }
 
   override firstUpdated() {

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

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

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

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

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

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

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

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

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

@@ -58,11 +58,7 @@ export class PreviewButton extends WithDisposable(SignalWatcher(LitElement)) {
   `;
 
   private readonly _toggle = (value: boolean) => {
-    if (this.blockComponent.store.readonly) return;
-
-    this.blockComponent.store.updateBlock(this.blockComponent.model, {
-      preview: value,
-    });
+    this.blockComponent.setPreviewState(value);
 
     const std = this.blockComponent.std;
     const mode = std.getOptional(DocModeProvider)?.getEditorMode() ?? 'page';
@@ -77,7 +73,7 @@ export class PreviewButton extends WithDisposable(SignalWatcher(LitElement)) {
   };
 
   get preview() {
-    return !!this.blockComponent.model.props.preview$.value;
+    return this.blockComponent.preview$.value;
   }
 
   override render() {

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

@@ -259,18 +259,18 @@ const builtinToolbarConfig = {
     conversionsActionGroup,
     {
       id: 'c.style',
-      actions: [
-        {
-          id: 'horizontal',
-          label: 'Large horizontal style',
-        },
-        {
-          id: 'list',
-          label: 'Small horizontal style',
-        },
-      ].filter(action =>
-        EmbedLinkedDocStyles.includes(action.id as EmbedCardStyle)
-      ),
+      actions: (
+        [
+          {
+            id: 'horizontal',
+            label: 'Large horizontal style',
+          },
+          {
+            id: 'list',
+            label: 'Small horizontal style',
+          },
+        ] as const
+      ).filter(action => EmbedLinkedDocStyles.includes(action.id)),
       content(ctx) {
         const model = ctx.getCurrentModelByType(EmbedLinkedDocModel);
         if (!model) return null;
@@ -368,26 +368,26 @@ const builtinSurfaceToolbarConfig = {
     conversionsActionGroup,
     {
       id: 'c.style',
-      actions: [
-        {
-          id: 'horizontal',
-          label: 'Large horizontal style',
-        },
-        {
-          id: 'list',
-          label: 'Small horizontal style',
-        },
-        {
-          id: 'vertical',
-          label: 'Large vertical style',
-        },
-        {
-          id: 'cube',
-          label: 'Small vertical style',
-        },
-      ].filter(action =>
-        EmbedLinkedDocStyles.includes(action.id as EmbedCardStyle)
-      ),
+      actions: (
+        [
+          {
+            id: 'horizontal',
+            label: 'Large horizontal style',
+          },
+          {
+            id: 'list',
+            label: 'Small horizontal style',
+          },
+          {
+            id: 'vertical',
+            label: 'Large vertical style',
+          },
+          {
+            id: 'cube',
+            label: 'Small vertical style',
+          },
+        ] as const
+      ).filter(action => EmbedLinkedDocStyles.includes(action.id)),
       content(ctx) {
         const model = ctx.getCurrentModelByType(EmbedLinkedDocModel);
         if (!model) return null;

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

@@ -17,6 +17,7 @@ import {
   REFERENCE_NODE,
 } from '@blocksuite/affine-shared/consts';
 import {
+  CitationProvider,
   DocDisplayMetaProvider,
   DocModeProvider,
   OpenDocExtensionIdentifier,
@@ -43,6 +44,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
 import throttle from 'lodash-es/throttle';
+import { filter } from 'rxjs/operators';
 import * as Y from 'yjs';
 
 import { renderLinkedDocInCard } from '../common/render-linked-doc';
@@ -254,11 +256,12 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
     return this.store.readonly;
   }
 
+  get citationService() {
+    return this.std.get(CitationProvider);
+  }
+
   get isCitation() {
-    return (
-      !!this.model.props.footnoteIdentifier &&
-      this.model.props.style === 'citation'
-    );
+    return this.citationService.isCitationModel(this.model);
   }
 
   private readonly _handleDoubleClick = (event: MouseEvent) => {
@@ -454,6 +457,31 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
     );
   };
 
+  private readonly _trackCitationDeleteEvent = () => {
+    // Check citation delete event
+    this._disposables.add(
+      this.std.store.slots.blockUpdated
+        .pipe(
+          filter(payload => {
+            if (!payload.isLocal) return false;
+            const { flavour, id, type } = payload;
+            if (
+              type !== 'delete' ||
+              flavour !== this.model.flavour ||
+              id !== this.model.id
+            )
+              return false;
+            const { model } = payload;
+            if (!this.citationService.isCitationModel(model)) return false;
+            return true;
+          })
+        )
+        .subscribe(() => {
+          this.citationService.trackEvent('Delete');
+        })
+    );
+  };
+
   override connectedCallback() {
     super.connectedCallback();
 
@@ -532,6 +560,8 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
         }
       })
     );
+
+    this._trackCitationDeleteEvent();
   }
 
   getInitialState(): {

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

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

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

@@ -16,6 +16,7 @@ import {
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { html } from 'lit';
 import { state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import {
@@ -87,6 +88,12 @@ export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> {
       this.gfx.tool.currentToolName$.value === 'frameNavigator';
     const frameIndex = this.gfx.layer.getZIndex(model);
 
+    const widgets = html`${repeat(
+      Object.entries(this.widgets),
+      ([id]) => id,
+      ([_, widget]) => widget
+    )}`;
+
     return html`
       <div
         class="affine-frame-container"
@@ -102,6 +109,7 @@ export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> {
               : `1px solid ${cssVarV2('edgeless/frame/border/default')}`,
         })}
       ></div>
+      ${widgets}
     `;
   }
 
@@ -178,11 +186,22 @@ export const FrameBlockInteraction =
           selectable(context) {
             const { model } = context;
 
+            const onTitle =
+              model.externalBound?.containsPoint([
+                context.position.x,
+                context.position.y,
+              ]) ?? false;
+
             return (
               context.default(context) &&
-              (model.isLocked() || !isTransparent(model.props.background))
+              (model.isLocked() ||
+                !isTransparent(model.props.background) ||
+                onTitle)
             );
           },
+          onSelect(context) {
+            return context.default(context);
+          },
         };
       },
     }

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

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

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

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

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

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

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

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

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

@@ -43,14 +43,16 @@ type RendererOptions = {
   surfaceModel: SurfaceBlockModel;
 };
 
-enum UpdateType {
-  ELEMENT_ADDED = 'element-added',
-  ELEMENT_REMOVED = 'element-removed',
-  ELEMENT_UPDATED = 'element-updated',
-  VIEWPORT_CHANGED = 'viewport-changed',
-  SIZE_CHANGED = 'size-changed',
-  ZOOM_STATE_CHANGED = 'zoom-state-changed',
-}
+const UpdateType = {
+  ELEMENT_ADDED: 'element-added',
+  ELEMENT_REMOVED: 'element-removed',
+  ELEMENT_UPDATED: 'element-updated',
+  VIEWPORT_CHANGED: 'viewport-changed',
+  SIZE_CHANGED: 'size-changed',
+  ZOOM_STATE_CHANGED: 'zoom-state-changed',
+} as const;
+
+type UpdateType = (typeof UpdateType)[keyof typeof UpdateType];
 
 interface IncrementalUpdateState {
   dirtyElementIds: Set<string>;
@@ -384,21 +386,21 @@ export class DomRenderer {
     );
   }
 
-  addOverlay(overlay: Overlay) {
+  addOverlay = (overlay: Overlay) => {
     overlay.setRenderer(null);
     this._overlays.add(overlay);
     this.refresh();
-  }
+  };
 
-  attach(container: HTMLElement) {
+  attach = (container: HTMLElement) => {
     this._container = container;
     container.append(this.rootElement);
 
     this._resetSize();
     this.refresh();
-  }
+  };
 
-  dispose(): void {
+  dispose = () => {
     this._overlays.forEach(overlay => overlay.dispose());
     this._overlays.clear();
     this._disposables.dispose();
@@ -414,65 +416,65 @@ export class DomRenderer {
 
     this.rootElement.remove();
     this._elementsMap.clear();
-  }
+  };
 
-  generateColorProperty(color: Color, fallback?: Color) {
+  generateColorProperty = (color: Color, fallback?: Color) => {
     return (
       this.provider.generateColorProperty?.(color, fallback) ?? 'transparent'
     );
-  }
+  };
 
-  getColorScheme() {
+  getColorScheme = () => {
     return this.provider.getColorScheme?.() ?? ColorScheme.Light;
-  }
+  };
 
-  getColorValue(color: Color, fallback?: Color, real?: boolean) {
+  getColorValue = (color: Color, fallback?: Color, real?: boolean) => {
     return (
       this.provider.getColorValue?.(color, fallback, real) ?? 'transparent'
     );
-  }
+  };
 
-  getPropertyValue(property: string) {
+  getPropertyValue = (property: string) => {
     return this.provider.getPropertyValue?.(property) ?? '';
-  }
+  };
 
-  refresh() {
+  refresh = () => {
     if (this._refreshRafId !== null) return;
 
     this._refreshRafId = requestConnectedFrame(() => {
       this._refreshRafId = null;
       this._render();
     }, this._container);
-  }
+  };
 
-  removeOverlay(overlay: Overlay) {
+  removeOverlay = (overlay: Overlay) => {
     if (!this._overlays.has(overlay)) {
       return;
     }
 
     this._overlays.delete(overlay);
     this.refresh();
-  }
+  };
 
   /**
    * Mark a specific element as dirty for incremental updates
    * @param elementId - The ID of the element to mark as dirty
    * @param updateType - The type of update (optional, defaults to ELEMENT_UPDATED)
    */
-  markElementDirty(
+  markElementDirty = (
     elementId: string,
     updateType: UpdateType = UpdateType.ELEMENT_UPDATED
-  ) {
+  ) => {
     this._markElementDirty(elementId, updateType);
-  }
+  };
 
   /**
    * Force a full re-render of all elements
    */
-  forceFullRender() {
+  forceFullRender = () => {
     this._updateState.viewportDirty = true;
     this.refresh();
-  }
+  };
 
   private _markElementDirty(elementId: string, updateType: UpdateType) {
     this._updateState.dirtyElementIds.add(elementId);

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

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

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

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

blocksuite/affine/data-view/src/widget-presets/quick-setting-bar/filter/index.ts

@@ -16,5 +16,6 @@ export const renderFilterBar = (props: DataViewWidgetProps) => {
     .vars="${filterTrait.view.vars$}"
     .filterGroup="${filterTrait.filter$}"
     .onChange="${filterTrait.filterSet}"
+    .dataViewLogic="${props.dataViewLogic}"
   ></filter-bar>`;
 };

blocksuite/affine/data-view/src/widget-presets/quick-setting-bar/filter/list-view.ts

@@ -16,6 +16,7 @@ import { property } from 'lit/decorators.js';
 import type { Variable } from '../../../core/expression/types.js';
 import type { Filter, FilterGroup } from '../../../core/filter/types.js';
 import { popCreateFilter } from '../../../core/index.js';
+import type { DataViewUILogicBase } from '../../../core/view/data-view-base.js';
 import { popFilterGroup } from './group-panel-view.js';
 
 export class FilterBar extends SignalWatcher(ShadowlessElement) {
@@ -99,6 +100,7 @@ export class FilterBar extends SignalWatcher(ShadowlessElement) {
         requestAnimationFrame(() => {
           this.expandGroup(element, index);
         });
+        this.dataViewLogic.eventTrace('CreateDatabaseFilter', {});
       },
     });
   };
@@ -206,6 +208,9 @@ export class FilterBar extends SignalWatcher(ShadowlessElement) {
 
   @property({ attribute: false })
   accessor vars!: ReadonlySignal<Variable[]>;
+
+  @property({ attribute: false })
+  accessor dataViewLogic!: DataViewUILogicBase;
 }
 
 declare global {

blocksuite/affine/data-view/src/widget-presets/quick-setting-bar/filter/root-panel-view.ts

@@ -26,7 +26,10 @@ import { repeat } from 'lit/directives/repeat.js';
 import type { Variable } from '../../../core/expression/types.js';
 import type { FilterTrait } from '../../../core/filter/trait.js';
 import type { Filter, FilterGroup } from '../../../core/filter/types.js';
-import { popCreateFilter } from '../../../core/index.js';
+import {
+  type DataViewUILogicBase,
+  popCreateFilter,
+} from '../../../core/index.js';
 import {
   type FilterGroupView,
   getDepth,
@@ -375,6 +378,7 @@ export const popFilterRoot = (
   props: {
     filterTrait: FilterTrait;
     onBack: () => void;
+    dataViewLogic: DataViewUILogicBase;
   }
 ) => {
   const filterTrait = props.filterTrait;
@@ -414,6 +418,10 @@ export const popFilterRoot = (
                         ...value,
                         conditions: [...value.conditions, filter],
                       });
+                      props.dataViewLogic.eventTrace(
+                        'CreateDatabaseFilter',
+                        {}
+                      );
                     },
                   },
                   { middleware: subMenuMiddleware }

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

@@ -75,6 +75,7 @@ export class DataViewHeaderToolsFilter extends WidgetBase {
             conditions: [filter],
           };
           this.toggleShowFilter(true);
+          this.dataViewLogic.eventTrace('CreateDatabaseFilter', {});
         },
       }
     );

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

@@ -145,13 +145,16 @@ const createSettingMenus = (
                 popFilterRoot(target, {
                   filterTrait: filterTrait,
                   onBack: reopen,
+                  dataViewLogic: dataViewLogic,
                 });
+                dataViewLogic.eventTrace('CreateDatabaseFilter', {});
               },
             });
           } else {
             popFilterRoot(target, {
               filterTrait: filterTrait,
               onBack: reopen,
+              dataViewLogic: dataViewLogic,
             });
           }
         },

blocksuite/affine/foundation/src/view.ts

@@ -9,6 +9,7 @@ import {
 } from '@blocksuite/affine-ext-loader';
 import {
   AutoClearSelectionService,
+  CitationService,
   DefaultOpenDocExtension,
   DNDAPIExtension,
   DocDisplayMetaService,
@@ -76,6 +77,7 @@ export class FoundationViewExtension extends ViewExtensionProvider<FoundationVie
       FileSizeLimitService,
       LinkPreviewCache,
       LinkPreviewService,
+      CitationService,
     ]);
     context.register(clipboardConfigs);
     if (this.isEdgeless(context.scope)) {

blocksuite/affine/fragments/doc-title/src/doc-title.ts

@@ -192,10 +192,14 @@ export class DocTitle extends WithDisposable(ShadowlessElement) {
       this._updateTitleInMeta();
       this.requestUpdate();
     };
-    this._rootModel?.props.title.yText.observe(updateMetaTitle);
-    this._disposables.add(() => {
-      this._rootModel?.props.title.yText.unobserve(updateMetaTitle);
-    });
+
+    if (this._rootModel) {
+      const rootModel = this._rootModel;
+      rootModel.props.title.yText.observe(updateMetaTitle);
+      this._disposables.add(() => {
+        rootModel.props.title.yText.unobserve(updateMetaTitle);
+      });
+    }
   }
 
   override render() {

blocksuite/affine/gfx/brush/src/element-renderer/brush-dom.ts

@@ -1,11 +0,0 @@
-import { DomElementRendererExtension } from '@blocksuite/affine-block-surface';
-
-import { brushDomRenderer } from './brush-dom/index.js';
-
-/**
- * Extension to register the DOM-based renderer for 'brush' elements.
- */
-export const BrushDomRendererExtension = DomElementRendererExtension(
-  'brush',
-  brushDomRenderer
-);

blocksuite/affine/gfx/brush/src/element-renderer/brush-dom/index.ts

@@ -1,63 +0,0 @@
-import type { DomRenderer } from '@blocksuite/affine-block-surface';
-import type { BrushElementModel } from '@blocksuite/affine-model';
-import { DefaultTheme } from '@blocksuite/affine-model';
-
-/**
- * Renders a BrushElementModel to a given HTMLElement using DOM properties.
- * This function is intended to be registered via the DomElementRendererExtension.
- *
- * @param model - The brush element model containing rendering properties.
- * @param element - The HTMLElement to apply the brush's styles to.
- * @param renderer - The main DOMRenderer instance, providing access to viewport and color utilities.
- */
-export const brushDomRenderer = (
-  model: BrushElementModel,
-  element: HTMLElement,
-  renderer: DomRenderer
-): void => {
-  const { zoom } = renderer.viewport;
-  const unscaledWidth = model.w;
-  const unscaledHeight = model.h;
-
-  const color = renderer.getColorValue(model.color, DefaultTheme.black, true);
-
-  element.style.width = `${unscaledWidth * zoom}px`;
-  element.style.height = `${unscaledHeight * zoom}px`;
-  element.style.boxSizing = 'border-box';
-  element.style.overflow = 'hidden';
-
-  // Clear any existing content
-  element.replaceChildren();
-
-  // Create SVG element to render the brush stroke
-  const SVG_NS = 'http://www.w3.org/2000/svg';
-  const svg = document.createElementNS(SVG_NS, 'svg');
-  svg.setAttribute('width', '100%');
-  svg.setAttribute('height', '100%');
-  svg.setAttribute('viewBox', `0 0 ${unscaledWidth} ${unscaledHeight}`);
-  svg.setAttribute('preserveAspectRatio', 'none');
-
-  // Create path element for the brush stroke
-  const path = document.createElementNS(SVG_NS, 'path');
-  path.setAttribute('d', model.commands);
-  path.setAttribute('fill', color);
-  path.setAttribute('stroke', 'none');
-
-  svg.append(path);
-  element.append(svg);
-
-  // Apply rotation if needed
-  if (model.rotate) {
-    element.style.transform = `rotate(${model.rotate}deg)`;
-    element.style.transformOrigin = 'center';
-  }
-
-  // Apply opacity
-  element.style.opacity = `${model.opacity ?? 1}`;
-
-  // Set z-index
-  element.style.zIndex = renderer.layerManager.getZIndex(model).toString();
-
-  // Add brush-specific class for styling
-  element.classList.add('brush-element');
-};

blocksuite/affine/gfx/brush/src/index.ts

@@ -1,7 +1,6 @@
 export * from './adapter';
 export * from './brush-tool';
 export * from './element-renderer';
-export * from './element-renderer/brush-dom';
 export * from './eraser-tool';
 export * from './highlighter-tool';
 export * from './toolbar/configs';

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

@@ -6,7 +6,6 @@ import {
 import { BrushTool } from './brush-tool';
 import { effects } from './effects';
 import { BrushElementRendererExtension } from './element-renderer';
-import { BrushDomRendererExtension } from './element-renderer/brush-dom';
 import { EraserTool } from './eraser-tool';
 import { HighlighterTool } from './highlighter-tool';
 import {
@@ -31,7 +30,6 @@ export class BrushViewExtension extends ViewExtensionProvider {
     context.register(HighlighterTool);
 
     context.register(BrushElementRendererExtension);
-    context.register(BrushDomRendererExtension);
 
     context.register(brushToolbarExtension);
     context.register(highlighterToolbarExtension);

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

@@ -1,11 +0,0 @@
-import { DomElementRendererExtension } from '@blocksuite/affine-block-surface';
-
-import { connectorDomRenderer } from './connector-dom/index.js';
-
-/**
- * Extension to register the DOM-based renderer for 'connector' elements.
- */
-export const ConnectorDomRendererExtension = DomElementRendererExtension(
-  'connector',
-  connectorDomRenderer
-);

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

@@ -1,367 +0,0 @@
-import type { DomRenderer } from '@blocksuite/affine-block-surface';
-import {
-  type ConnectorElementModel,
-  ConnectorMode,
-  DefaultTheme,
-  type PointStyle,
-} from '@blocksuite/affine-model';
-import { PointLocation, SVGPathBuilder } from '@blocksuite/global/gfx';
-
-import { isConnectorWithLabel } from '../../connector-manager.js';
-import { DEFAULT_ARROW_SIZE } from '../utils.js';
-
-interface PathBounds {
-  minX: number;
-  minY: number;
-  maxX: number;
-  maxY: number;
-}
-
-function calculatePathBounds(path: PointLocation[]): PathBounds {
-  if (path.length === 0) {
-    return { minX: 0, minY: 0, maxX: 0, maxY: 0 };
-  }
-
-  let minX = path[0][0];
-  let minY = path[0][1];
-  let maxX = path[0][0];
-  let maxY = path[0][1];
-
-  for (const point of path) {
-    minX = Math.min(minX, point[0]);
-    minY = Math.min(minY, point[1]);
-    maxX = Math.max(maxX, point[0]);
-    maxY = Math.max(maxY, point[1]);
-  }
-
-  return { minX, minY, maxX, maxY };
-}
-
-function createConnectorPath(
-  points: PointLocation[],
-  mode: ConnectorMode
-): string {
-  if (points.length < 2) return '';
-
-  const pathBuilder = new SVGPathBuilder();
-  pathBuilder.moveTo(points[0][0], points[0][1]);
-
-  if (mode === ConnectorMode.Curve) {
-    // Use bezier curves
-    for (let i = 1; i < points.length; i++) {
-      const prev = points[i - 1];
-      const curr = points[i];
-      pathBuilder.curveTo(
-        prev.absOut[0],
-        prev.absOut[1],
-        curr.absIn[0],
-        curr.absIn[1],
-        curr[0],
-        curr[1]
-      );
-    }
-  } else {
-    // Use straight lines
-    for (let i = 1; i < points.length; i++) {
-      pathBuilder.lineTo(points[i][0], points[i][1]);
-    }
-  }
-
-  return pathBuilder.build();
-}
-
-function createArrowMarker(
-  id: string,
-  style: PointStyle,
-  color: string,
-  strokeWidth: number,
-  isStart: boolean = false
-): SVGMarkerElement {
-  const marker = document.createElementNS(
-    'http://www.w3.org/2000/svg',
-    'marker'
-  );
-  const size = DEFAULT_ARROW_SIZE * (strokeWidth / 2);
-
-  marker.id = id;
-  marker.setAttribute('viewBox', '0 0 20 20');
-  marker.setAttribute('refX', isStart ? '20' : '0');
-  marker.setAttribute('refY', '10');
-  marker.setAttribute('markerWidth', String(size));
-  marker.setAttribute('markerHeight', String(size));
-  marker.setAttribute('orient', 'auto');
-  marker.setAttribute('markerUnits', 'strokeWidth');
-
-  switch (style) {
-    case 'Arrow': {
-      const path = document.createElementNS(
-        'http://www.w3.org/2000/svg',
-        'path'
-      );
-      path.setAttribute(
-        'd',
-        isStart ? 'M 20 5 L 10 10 L 20 15 Z' : 'M 0 5 L 10 10 L 0 15 Z'
-      );
-      path.setAttribute('fill', color);
-      path.setAttribute('stroke', color);
-      marker.append(path);
-      break;
-    }
-    case 'Triangle': {
-      const path = document.createElementNS(
-        'http://www.w3.org/2000/svg',
-        'path'
-      );
-      path.setAttribute(
-        'd',
-        isStart ? 'M 20 7 L 12 10 L 20 13 Z' : 'M 0 7 L 8 10 L 0 13 Z'
-      );
-      path.setAttribute('fill', color);
-      path.setAttribute('stroke', color);
-      marker.append(path);
-      break;
-    }
-    case 'Circle': {
-      const circle = document.createElementNS(
-        'http://www.w3.org/2000/svg',
-        'circle'
-      );
-      circle.setAttribute('cx', '10');
-      circle.setAttribute('cy', '10');
-      circle.setAttribute('r', '4');
-      circle.setAttribute('fill', color);
-      circle.setAttribute('stroke', color);
-      marker.append(circle);
-      break;
-    }
-    case 'Diamond': {
-      const path = document.createElementNS(
-        'http://www.w3.org/2000/svg',
-        'path'
-      );
-      path.setAttribute('d', 'M 10 6 L 14 10 L 10 14 L 6 10 Z');
-      path.setAttribute('fill', color);
-      path.setAttribute('stroke', color);
-      marker.append(path);
-      break;
-    }
-  }
-
-  return marker;
-}
-
-function renderConnectorLabel(
-  model: ConnectorElementModel,
-  container: HTMLElement,
-  renderer: DomRenderer,
-  zoom: number
-) {
-  if (!isConnectorWithLabel(model) || !model.labelXYWH) {
-    return;
-  }
-
-  const [lx, ly, lw, lh] = model.labelXYWH;
-  const {
-    labelStyle: {
-      color,
-      fontSize,
-      fontWeight,
-      fontStyle,
-      fontFamily,
-      textAlign,
-    },
-  } = model;
-
-  // Create label element
-  const labelElement = document.createElement('div');
-  labelElement.style.position = 'absolute';
-  labelElement.style.left = `${lx * zoom}px`;
-  labelElement.style.top = `${ly * zoom}px`;
-  labelElement.style.width = `${lw * zoom}px`;
-  labelElement.style.height = `${lh * zoom}px`;
-  labelElement.style.pointerEvents = 'none';
-  labelElement.style.overflow = 'hidden';
-  labelElement.style.display = 'flex';
-  labelElement.style.alignItems = 'center';
-  labelElement.style.justifyContent =
-    textAlign === 'center'
-      ? 'center'
-      : textAlign === 'right'
-        ? 'flex-end'
-        : 'flex-start';
-
-  // Style the text
-  labelElement.style.color = renderer.getColorValue(
-    color,
-    DefaultTheme.black,
-    true
-  );
-  labelElement.style.fontSize = `${fontSize * zoom}px`;
-  labelElement.style.fontWeight = fontWeight;
-  labelElement.style.fontStyle = fontStyle;
-  labelElement.style.fontFamily = fontFamily;
-  labelElement.style.textAlign = textAlign;
-  labelElement.style.lineHeight = '1.2';
-  labelElement.style.whiteSpace = 'pre-wrap';
-  labelElement.style.wordWrap = 'break-word';
-
-  // Add text content
-  if (model.text) {
-    labelElement.textContent = model.text.toString();
-  }
-
-  container.append(labelElement);
-}
-
-/**
- * Renders a ConnectorElementModel to a given HTMLElement using DOM/SVG.
- * This function is intended to be registered via the DomElementRendererExtension.
- *
- * @param model - The connector element model containing rendering properties.
- * @param element - The HTMLElement to apply the connector's styles to.
- * @param renderer - The main DOMRenderer instance, providing access to viewport and color utilities.
- */
-export const connectorDomRenderer = (
-  model: ConnectorElementModel,
-  element: HTMLElement,
-  renderer: DomRenderer
-): void => {
-  const { zoom } = renderer.viewport;
-  const {
-    mode,
-    path: points,
-    strokeStyle,
-    frontEndpointStyle,
-    rearEndpointStyle,
-    strokeWidth,
-    stroke,
-  } = model;
-
-  // Clear previous content
-  element.innerHTML = '';
-
-  // Early return if no path points
-  if (!points || points.length < 2) {
-    return;
-  }
-
-  // Calculate bounds for the SVG viewBox
-  const pathBounds = calculatePathBounds(points);
-  const padding = Math.max(strokeWidth * 2, 20); // Add padding for arrows
-  const svgWidth = (pathBounds.maxX - pathBounds.minX + padding * 2) * zoom;
-  const svgHeight = (pathBounds.maxY - pathBounds.minY + padding * 2) * zoom;
-  const offsetX = pathBounds.minX - padding;
-  const offsetY = pathBounds.minY - padding;
-
-  // Create SVG element
-  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  svg.style.position = 'absolute';
-  svg.style.left = `${offsetX * zoom}px`;
-  svg.style.top = `${offsetY * zoom}px`;
-  svg.style.width = `${svgWidth}px`;
-  svg.style.height = `${svgHeight}px`;
-  svg.style.overflow = 'visible';
-  svg.style.pointerEvents = 'none';
-  svg.setAttribute('viewBox', `0 0 ${svgWidth / zoom} ${svgHeight / zoom}`);
-
-  // Create defs for markers
-  const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
-  svg.append(defs);
-
-  const strokeColor = renderer.getColorValue(
-    stroke,
-    DefaultTheme.connectorColor,
-    true
-  );
-
-  // Create markers for endpoints
-  let startMarkerId = '';
-  let endMarkerId = '';
-
-  if (frontEndpointStyle !== 'None') {
-    startMarkerId = `start-marker-${model.id}`;
-    const startMarker = createArrowMarker(
-      startMarkerId,
-      frontEndpointStyle,
-      strokeColor,
-      strokeWidth,
-      true
-    );
-    defs.append(startMarker);
-  }
-
-  if (rearEndpointStyle !== 'None') {
-    endMarkerId = `end-marker-${model.id}`;
-    const endMarker = createArrowMarker(
-      endMarkerId,
-      rearEndpointStyle,
-      strokeColor,
-      strokeWidth,
-      false
-    );
-    defs.append(endMarker);
-  }
-
-  // Create path element
-  const pathElement = document.createElementNS(
-    'http://www.w3.org/2000/svg',
-    'path'
-  );
-
-  // Adjust points relative to the SVG coordinate system
-  const adjustedPoints = points.map(point => {
-    const adjustedPoint = new PointLocation([
-      point[0] - offsetX,
-      point[1] - offsetY,
-    ]);
-    if (point.absIn) {
-      adjustedPoint.in = [
-        point.absIn[0] - offsetX - adjustedPoint[0],
-        point.absIn[1] - offsetY - adjustedPoint[1],
-      ];
-    }
-    if (point.absOut) {
-      adjustedPoint.out = [
-        point.absOut[0] - offsetX - adjustedPoint[0],
-        point.absOut[1] - offsetY - adjustedPoint[1],
-      ];
-    }
-    return adjustedPoint;
-  });
-
-  const pathData = createConnectorPath(adjustedPoints, mode);
-  pathElement.setAttribute('d', pathData);
-  pathElement.setAttribute('stroke', strokeColor);
-  pathElement.setAttribute('stroke-width', String(strokeWidth));
-  pathElement.setAttribute('fill', 'none');
-  pathElement.setAttribute('stroke-linecap', 'round');
-  pathElement.setAttribute('stroke-linejoin', 'round');
-
-  // Apply stroke style
-  if (strokeStyle === 'dash') {
-    pathElement.setAttribute('stroke-dasharray', '12,12');
-  }
-
-  // Apply markers
-  if (startMarkerId) {
-    pathElement.setAttribute('marker-start', `url(#${startMarkerId})`);
-  }
-  if (endMarkerId) {
-    pathElement.setAttribute('marker-end', `url(#${endMarkerId})`);
-  }
-
-  svg.append(pathElement);
-  element.append(svg);
-
-  // Set element size and position
-  element.style.width = `${model.w * zoom}px`;
-  element.style.height = `${model.h * zoom}px`;
-  element.style.overflow = 'visible';
-  element.style.pointerEvents = 'none';
-
-  // Set z-index for layering
-  element.style.zIndex = renderer.layerManager.getZIndex(model).toString();
-
-  // Render label if present
-  renderConnectorLabel(model, element, renderer, zoom);
-};

blocksuite/affine/gfx/connector/src/index.ts

@@ -2,7 +2,6 @@ export * from './adapter';
 export * from './connector-manager';
 export * from './connector-tool';
 export * from './element-renderer';
-export { ConnectorDomRendererExtension } from './element-renderer/connector-dom';
 export * from './element-transform';
 export * from './text';
 export * from './toolbar/config';

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

@@ -7,7 +7,6 @@ import { ConnectionOverlay } from './connector-manager';
 import { ConnectorTool } from './connector-tool';
 import { effects } from './effects';
 import { ConnectorElementRendererExtension } from './element-renderer';
-import { ConnectorDomRendererExtension } from './element-renderer/connector-dom';
 import { ConnectorFilter } from './element-transform';
 import { connectorToolbarExtension } from './toolbar/config';
 import { connectorQuickTool } from './toolbar/quick-tool';
@@ -25,7 +24,6 @@ export class ConnectorViewExtension extends ViewExtensionProvider {
     super.setup(context);
     context.register(ConnectorElementView);
     context.register(ConnectorElementRendererExtension);
-    context.register(ConnectorDomRendererExtension);
     if (this.isEdgeless(context.scope)) {
       context.register(ConnectorTool);
       context.register(ConnectorFilter);

blocksuite/affine/gfx/pointer/src/snap/snap-manager.ts

@@ -1,6 +1,6 @@
 import { OverlayIdentifier } from '@blocksuite/affine-block-surface';
 import { MindmapElementModel } from '@blocksuite/affine-model';
-import { Bound } from '@blocksuite/global/gfx';
+import { type Bound } from '@blocksuite/global/gfx';
 import {
   type DragExtensionInitializeContext,
   type ExtensionDragMoveContext,
@@ -74,47 +74,63 @@ export class SnapExtension extends InteractivityExtension {
         return {};
       }
 
-      let alignBound: Bound | null = null;
-
       return {
         onResizeStart(context) {
-          alignBound = snapOverlay.setMovingElements(context.elements);
+          snapOverlay.setMovingElements(context.elements);
         },
         onResizeMove(context) {
-          if (!alignBound || alignBound.w === 0 || alignBound.h === 0) {
-            return;
+          const {
+            handle,
+            originalBound,
+            scaleX,
+            scaleY,
+            handleSign,
+            currentHandlePos,
+            elements,
+          } = context;
+          const rotate = elements.length > 1 ? 0 : elements[0].rotate;
+          const alignDirection: ('vertical' | 'horizontal')[] = [];
+          let switchDirection = false;
+          let nx = handleSign.x;
+          let ny = handleSign.y;
+
+          if (handle.length > 6) {
+            alignDirection.push('vertical', 'horizontal');
+          } else if (rotate % 90 === 0) {
+            nx =
+              handleSign.x * Math.cos((rotate / 180) * Math.PI) -
+              handleSign.y * Math.sin((rotate / 180) * Math.PI);
+            ny =
+              handleSign.x * Math.sin((rotate / 180) * Math.PI) +
+              handleSign.y * Math.cos((rotate / 180) * Math.PI);
+
+            if (Math.abs(nx) > Math.abs(ny)) {
+              alignDirection.push('horizontal');
+            } else {
+              alignDirection.push('vertical');
+            }
+
+            if (rotate % 180 !== 0) {
+              switchDirection = true;
+            }
           }
 
-          const { handle, handleSign, lockRatio } = context;
-          let { dx, dy } = context;
-
-          if (lockRatio) {
-            const min = Math.min(
-              Math.abs(dx / alignBound.w),
-              Math.abs(dy / alignBound.h)
+          if (alignDirection.length > 0) {
+            const rst = snapOverlay.alignResize(
+              currentHandlePos,
+              alignDirection
             );
 
-            dx = min * Math.sign(dx) * alignBound.w;
-            dy = min * Math.sign(dy) * alignBound.h;
+            const dx = switchDirection ? ny * rst.dy : nx * rst.dx;
+            const dy = switchDirection ? nx * rst.dx : ny * rst.dy;
+
+            context.suggest({
+              scaleX: scaleX + dx / originalBound.w,
+              scaleY: scaleY + dy / originalBound.h,
+            });
           }
-
-          const currentBound = new Bound(
-            alignBound.x +
-              (handle.includes('left') ? -dx * handleSign.xSign : 0),
-            alignBound.y +
-              (handle.includes('top') ? -dy * handleSign.ySign : 0),
-            Math.abs(alignBound.w + dx * handleSign.xSign),
-            Math.abs(alignBound.h + dy * handleSign.ySign)
-          );
-          const alignRst = snapOverlay.align(currentBound);
-
-          context.suggest({
-            dx: alignRst.dx + context.dx,
-            dy: alignRst.dy + context.dy,
-          });
         },
         onResizeEnd() {
-          alignBound = null;
           snapOverlay.clear();
         },
       };

blocksuite/affine/gfx/pointer/src/snap/snap-overlay.ts

@@ -3,7 +3,7 @@ import {
   ConnectorElementModel,
   MindmapElementModel,
 } from '@blocksuite/affine-model';
-import { almostEqual, Bound, Point } from '@blocksuite/global/gfx';
+import { almostEqual, Bound, type IVec, Point } from '@blocksuite/global/gfx';
 import type { GfxModel } from '@blocksuite/std/gfx';
 
 interface Distance {
@@ -586,6 +586,60 @@ export class SnapOverlay extends Overlay {
     );
   }
 
+  alignResize(position: IVec, direction: ('vertical' | 'horizontal')[]) {
+    const rst = { dx: 0, dy: 0 };
+
+    const { viewport } = this.gfx;
+    const threshold = ALIGN_THRESHOLD / viewport.zoom;
+    const searchBound = new Bound(
+      position[0] - threshold / 2,
+      position[1] - threshold / 2,
+      threshold,
+      threshold
+    );
+    const alignBound = new Bound(position[0], position[1], 0, 0);
+
+    this._intraGraphicAlignLines = {
+      horizontal: [],
+      vertical: [],
+    };
+    this._distributedAlignLines = [];
+    this._updateAlignCandidates(searchBound);
+
+    for (const other of this._referenceBounds.all) {
+      const closestDistances = this._calculateClosestDistances(
+        alignBound,
+        other
+      );
+
+      if (
+        direction.includes('horizontal') &&
+        closestDistances.horiz &&
+        (!this._intraGraphicAlignLines.horizontal.length ||
+          Math.abs(closestDistances.horiz.distance) < Math.abs(rst.dx))
+      ) {
+        this._updateXAlignPoint(rst, alignBound, other, closestDistances);
+      }
+
+      if (
+        direction.includes('vertical') &&
+        closestDistances.vert &&
+        (!this._intraGraphicAlignLines.vertical.length ||
+          Math.abs(closestDistances.vert.distance) < Math.abs(rst.dy))
+      ) {
+        this._updateYAlignPoint(rst, alignBound, other, closestDistances);
+      }
+    }
+
+    this._intraGraphicAlignLines.horizontal =
+      this._intraGraphicAlignLines.horizontal.slice(0, 1);
+    this._intraGraphicAlignLines.vertical =
+      this._intraGraphicAlignLines.vertical.slice(0, 1);
+    this._renderer?.refresh();
+
+    return rst;
+  }
+
   align(bound: Bound): { dx: number; dy: number } {
     const rst = { dx: 0, dy: 0 };
     const threshold = ALIGN_THRESHOLD / this.gfx.viewport.zoom;

blocksuite/affine/gfx/shape/src/element-renderer/shape-dom/index.ts

@@ -1,7 +1,6 @@
 import type { DomRenderer } from '@blocksuite/affine-block-surface';
 import type { ShapeElementModel } from '@blocksuite/affine-model';
 import { DefaultTheme } from '@blocksuite/affine-model';
-import { SVGShapeBuilder } from '@blocksuite/global/gfx';
 
 import { manageClassNames, setStyles } from './utils';
 
@@ -123,22 +122,25 @@ export const shapeDomRenderer = (
     element.style.backgroundColor = 'transparent'; // Host element is transparent
 
     const strokeW = model.strokeWidth;
+    const halfStroke = strokeW / 2; // Calculate half stroke width for point adjustment
 
     let svgPoints = '';
     if (model.shapeType === 'diamond') {
-      // Generate diamond points using shared utility
-      svgPoints = SVGShapeBuilder.diamond(
-        unscaledWidth,
-        unscaledHeight,
-        strokeW
-      );
+      // Adjusted points for diamond
+      svgPoints = [
+        `${unscaledWidth / 2},${halfStroke}`,
+        `${unscaledWidth - halfStroke},${unscaledHeight / 2}`,
+        `${unscaledWidth / 2},${unscaledHeight - halfStroke}`,
+        `${halfStroke},${unscaledHeight / 2}`,
+      ].join(' ');
     } else {
-      // triangle - generate triangle points using shared utility
-      svgPoints = SVGShapeBuilder.triangle(
-        unscaledWidth,
-        unscaledHeight,
-        strokeW
-      );
+      // triangle
+      // Adjusted points for triangle
+      svgPoints = [
+        `${unscaledWidth / 2},${halfStroke}`,
+        `${unscaledWidth - halfStroke},${unscaledHeight - halfStroke}`,
+        `${halfStroke},${unscaledHeight - halfStroke}`,
+      ].join(' ');
     }
 
     // Determine if stroke should be visible and its color

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

@@ -1,6 +1,7 @@
 import { HoverController } from '@blocksuite/affine-components/hover';
 import { PeekViewProvider } from '@blocksuite/affine-components/peek';
 import type { FootNote } from '@blocksuite/affine-model';
+import { CitationProvider } from '@blocksuite/affine-shared/services';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
 import { WithDisposable } from '@blocksuite/global/lit';
@@ -117,6 +118,10 @@ export class AffineFootnoteNode extends WithDisposable(ShadowlessElement) {
     return this.std.store.readonly;
   }
 
+  get citationService() {
+    return this.std.get(CitationProvider);
+  }
+
   onFootnoteClick = () => {
     if (!this.footnote) {
       return;
@@ -215,6 +220,10 @@ export class AffineFootnoteNode extends WithDisposable(ShadowlessElement) {
         return null;
       }
 
+      this.citationService.trackEvent('Hover', {
+        control: 'Source Footnote',
+      });
+
       return {
         template: this._FootNotePopup(footnote, abortController),
         container: this.std.host,

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

@@ -188,6 +188,8 @@ export class AffineLatexNode extends SignalWatcher(
     this._editorAbortController?.abort();
     this._editorAbortController = new AbortController();
 
+    blockComponent.selection.setGroup('note', []);
+
     const portal = createLitPortal({
       template: html`<latex-editor-menu
         .std=${this.std}

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

@@ -30,11 +30,12 @@ import { AttachmentBlockTransformer } from './attachment-transformer.js';
  */
 type BackwardCompatibleUndefined = undefined;
 
-export const AttachmentBlockStyles: EmbedCardStyle[] = [
+export const AttachmentBlockStyles = [
   'cubeThick',
   'horizontalThin',
   'pdf',
-] as const;
+  'citation',
+] as const satisfies EmbedCardStyle[];
 
 export type AttachmentBlockProps = {
   name: string;

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

@@ -15,13 +15,13 @@ import type {
   LinkPreviewData,
 } from '../../utils/index.js';
 
-export const BookmarkStyles: EmbedCardStyle[] = [
+export const BookmarkStyles = [
   'vertical',
   'horizontal',
   'list',
   'cube',
   'citation',
-] as const;
+] as const satisfies EmbedCardStyle[];
 
 export type BookmarkBlockProps = {
   style: (typeof BookmarkStyles)[number];

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

@@ -8,7 +8,7 @@ export type EmbedFigmaBlockUrlData = {
   description: string | null;
 };
 
-export const EmbedFigmaStyles: EmbedCardStyle[] = ['figma'] as const;
+export const EmbedFigmaStyles = ['figma'] as const satisfies EmbedCardStyle[];
 
 export type EmbedFigmaBlockProps = {
   style: (typeof EmbedFigmaStyles)[number];

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

@@ -13,12 +13,12 @@ export type EmbedGithubBlockUrlData = {
   assignees: string[] | null;
 };
 
-export const EmbedGithubStyles: EmbedCardStyle[] = [
+export const EmbedGithubStyles = [
   'vertical',
   'horizontal',
   'list',
   'cube',
-] as const;
+] as const satisfies EmbedCardStyle[];
 
 export type EmbedGithubBlockProps = {
   style: (typeof EmbedGithubStyles)[number];

blocksuite/affine/model/src/blocks/embed/html/html-model.ts

@@ -3,7 +3,7 @@ import { BlockModel } from '@blocksuite/store';
 import type { EmbedCardStyle } from '../../../utils/index.js';
 import { defineEmbedModel } from '../../../utils/index.js';
 
-export const EmbedHtmlStyles: EmbedCardStyle[] = ['html'] as const;
+export const EmbedHtmlStyles = ['html'] as const satisfies EmbedCardStyle[];
 
 export type EmbedHtmlBlockProps = {
   style: (typeof EmbedHtmlStyles)[number];

blocksuite/affine/model/src/blocks/embed/iframe/iframe-model.ts

@@ -7,7 +7,7 @@ import { BlockModel } from '@blocksuite/store';
 
 import { type EmbedCardStyle } from '../../../utils/index.js';
 
-export const EmbedIframeStyles: EmbedCardStyle[] = ['figma'] as const;
+export const EmbedIframeStyles = ['figma'] as const satisfies EmbedCardStyle[];
 
 export type EmbedIframeBlockProps = {
   url: string; // the original url that user input

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

@@ -4,17 +4,17 @@ import type { ReferenceInfo } from '../../../consts/doc.js';
 import type { EmbedCardStyle } from '../../../utils/index.js';
 import { defineEmbedModel } from '../../../utils/index.js';
 
-export const EmbedLinkedDocStyles: EmbedCardStyle[] = [
+export const EmbedLinkedDocStyles = [
   'vertical',
   'horizontal',
   'list',
   'cube',
   'horizontalThin',
   'citation',
-];
+] as const satisfies EmbedCardStyle[];
 
 export type EmbedLinkedDocBlockProps = {
-  style: EmbedCardStyle;
+  style: (typeof EmbedLinkedDocStyles)[number];
   caption: string | null;
   footnoteIdentifier: string | null;
 } & ReferenceInfo;

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

@@ -10,7 +10,7 @@ export type EmbedLoomBlockUrlData = {
   description: string | null;
 };
 
-export const EmbedLoomStyles: EmbedCardStyle[] = ['video'] as const;
+export const EmbedLoomStyles = ['video'] as const satisfies EmbedCardStyle[];
 
 export type EmbedLoomBlockProps = {
   style: (typeof EmbedLoomStyles)[number];

blocksuite/affine/model/src/blocks/embed/synced-doc/synced-doc-model.ts

@@ -5,7 +5,9 @@ import type { ReferenceInfo } from '../../../consts/doc.js';
 import type { EmbedCardStyle } from '../../../utils/index.js';
 import { defineEmbedModel } from '../../../utils/index.js';
 
-export const EmbedSyncedDocStyles: EmbedCardStyle[] = ['syncedDoc'];
+export const EmbedSyncedDocStyles = [
+  'syncedDoc',
+] as const satisfies EmbedCardStyle[];
 
 export type EmbedSyncedDocBlockProps = {
   style: EmbedCardStyle;

blocksuite/affine/model/src/blocks/embed/types.ts

@@ -1,6 +1,7 @@
 import type { GfxModel } from '@blocksuite/std/gfx';
 import type { BlockModel } from '@blocksuite/store';
 
+import type { BookmarkBlockModel } from '../bookmark';
 import { EmbedFigmaModel } from './figma';
 import { EmbedGithubModel } from './github';
 import type { EmbedHtmlModel } from './html';
@@ -30,7 +31,10 @@ export type EmbedCardModel = InstanceType<
   ExternalEmbedModel | InternalEmbedModel
 >;
 
-export type LinkableEmbedModel = EmbedCardModel | EmbedIframeBlockModel;
+export type LinkableEmbedModel =
+  | EmbedCardModel
+  | EmbedIframeBlockModel
+  | BookmarkBlockModel;
 
 export type BuiltInEmbedModel = EmbedCardModel | EmbedHtmlModel;
 

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

@@ -13,7 +13,7 @@ export type EmbedYoutubeBlockUrlData = {
   creatorImage: string | null;
 };
 
-export const EmbedYoutubeStyles: EmbedCardStyle[] = ['video'] as const;
+export const EmbedYoutubeStyles = ['video'] as const satisfies EmbedCardStyle[];
 
 export type EmbedYoutubeBlockProps = {
   style: (typeof EmbedYoutubeStyles)[number];

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

@@ -80,4 +80,8 @@ describe('isValidUrl: determining whether a URL is valid is very complicated', (
     // See also https://stackoverflow.com/questions/9238640/how-long-can-a-tld-possibly-be#:~:text=Longest%20TLD%20up%20to%20date,17%20when%20decoded%20%5Bverm%C3%B6gensberatung%5D.
     expect(isValidUrl('example.xn--vermgensberatung-pwb')).toEqual(false);
   });
+
+  test('should allow ip address url when origin is same', () => {
+    expect(isValidUrl('http://127.0.0.1', 'http://127.0.0.1')).toEqual(true);
+  });
 });

blocksuite/affine/shared/src/adapters/middlewares/copy.ts

@@ -37,7 +37,7 @@ const handlePoint = (
 };
 
 const sliceText = (slots: TransformerSlots, std: EditorHost['std']) => {
-  slots.afterExport.subscribe(payload => {
+  const afterExportSubscription = slots.afterExport.subscribe(payload => {
     if (payload.type === 'block') {
       const snapshot = payload.snapshot;
 
@@ -53,10 +53,14 @@ const sliceText = (slots: TransformerSlots, std: EditorHost['std']) => {
       }
     }
   });
+
+  return () => {
+    afterExportSubscription.unsubscribe();
+  };
 };
 
 export const copyMiddleware = (std: BlockStdScope): TransformerMiddleware => {
   return ({ slots }) => {
-    sliceText(slots, std);
+    return sliceText(slots, std);
   };
 };

blocksuite/affine/shared/src/adapters/middlewares/file-name.ts

@@ -3,7 +3,7 @@ import type { TransformerMiddleware } from '@blocksuite/store';
 export const fileNameMiddleware =
   (fileName?: string): TransformerMiddleware =>
   ({ slots }) => {
-    slots.beforeImport.subscribe(payload => {
+    const beforeImportSubscription = slots.beforeImport.subscribe(payload => {
       if (payload.type !== 'page') {
         return;
       }
@@ -20,4 +20,8 @@ export const fileNameMiddleware =
         ],
       };
     });
+
+    return () => {
+      beforeImportSubscription.unsubscribe();
+    };
   };

blocksuite/affine/shared/src/adapters/middlewares/paste.ts

@@ -528,7 +528,7 @@ export const pasteMiddleware = (
 ): TransformerMiddleware => {
   return ({ slots }) => {
     let tr: PasteTr | undefined;
-    slots.beforeImport.subscribe(payload => {
+    const beforeImportSubscription = slots.beforeImport.subscribe(payload => {
       if (payload.type === 'slice') {
         const { snapshot } = payload;
         flatNote(snapshot);
@@ -543,13 +543,18 @@ export const pasteMiddleware = (
         }
       }
     });
-    slots.afterImport.subscribe(payload => {
+    const afterImportSubscription = slots.afterImport.subscribe(payload => {
       if (tr && payload.type === 'slice') {
         tr.pasted();
         tr.focusPasted();
         tr.convertToLinkedDoc();
       }
     });
+
+    return () => {
+      beforeImportSubscription.unsubscribe();
+      afterImportSubscription.unsubscribe();
+    };
   };
 };
 

blocksuite/affine/shared/src/adapters/middlewares/replace-id.ts

@@ -32,7 +32,7 @@ export const replaceIdMiddleware =
       map(({ model }) => model)
     );
 
-    afterImportBlock$
+    const afterImportBlockSubscription = afterImportBlock$
       .pipe(filter(model => matchModels(model, [DatabaseBlockModel])))
       .subscribe(model => {
         Object.keys(model.props.cells).forEach(cellId => {
@@ -44,7 +44,7 @@ export const replaceIdMiddleware =
       });
 
     // replace LinkedPage pageId with new id in paragraph blocks
-    afterImportBlock$
+    const replaceLinkedPageIdSubscription = afterImportBlock$
       .pipe(
         filter(model =>
           matchModels(model, [ParagraphBlockModel, ListBlockModel])
@@ -84,7 +84,7 @@ export const replaceIdMiddleware =
         }
       });
 
-    afterImportBlock$
+    const replaceSurfaceRefIdSubscription = afterImportBlock$
       .pipe(filter(model => matchModels(model, [SurfaceRefBlockModel])))
       .subscribe(model => {
         const original = model.props.reference;
@@ -105,7 +105,7 @@ export const replaceIdMiddleware =
       });
 
     // TODO(@fundon): process linked block/element
-    afterImportBlock$
+    const replaceLinkedDocIdSubscription = afterImportBlock$
       .pipe(
         filter(model =>
           matchModels(model, [EmbedLinkedDocModel, EmbedSyncedDocModel])
@@ -128,7 +128,7 @@ export const replaceIdMiddleware =
 
     // Before Import
 
-    slots.beforeImport
+    const beforeImportPageSubscription = slots.beforeImport
       .pipe(filter(payload => payload.type === 'page'))
       .subscribe(payload => {
         if (idMap.has(payload.snapshot.meta.id)) {
@@ -140,7 +140,7 @@ export const replaceIdMiddleware =
         payload.snapshot.meta.id = newId;
       });
 
-    slots.beforeImport
+    const beforeImportBlockSubscription = slots.beforeImport
       .pipe(
         filter(
           (payload): payload is BeforeImportBlockPayload =>
@@ -244,4 +244,13 @@ export const replaceIdMiddleware =
           });
         }
       });
+
+    return () => {
+      afterImportBlockSubscription.unsubscribe();
+      replaceLinkedPageIdSubscription.unsubscribe();
+      replaceSurfaceRefIdSubscription.unsubscribe();
+      replaceLinkedDocIdSubscription.unsubscribe();
+      beforeImportPageSubscription.unsubscribe();
+      beforeImportBlockSubscription.unsubscribe();
+    };
   };

blocksuite/affine/shared/src/adapters/middlewares/surface-ref-to-embed.ts

@@ -5,33 +5,42 @@ export const surfaceRefToEmbed =
   (std: BlockStdScope): TransformerMiddleware =>
   ({ slots }) => {
     let pageId: string | null = null;
-    slots.beforeImport.subscribe(payload => {
-      if (payload.type === 'slice') {
-        pageId = payload.snapshot.pageId;
+    const beforeImportSliceSubscription = slots.beforeImport.subscribe(
+      payload => {
+        if (payload.type === 'slice') {
+          pageId = payload.snapshot.pageId;
+        }
       }
-    });
-    slots.beforeImport.subscribe(payload => {
-      // only handle surface-ref block snapshot
-      if (
-        payload.type !== 'block' ||
-        payload.snapshot.flavour !== 'affine:surface-ref'
-      )
-        return;
+    );
+    const beforeImportBlockSubscription = slots.beforeImport.subscribe(
+      payload => {
+        // only handle surface-ref block snapshot
+        if (
+          payload.type !== 'block' ||
+          payload.snapshot.flavour !== 'affine:surface-ref'
+        )
+          return;
 
-      // turn into embed-linked-doc if the current doc is different from the pageId of the surface-ref block
-      const isNotSameDoc = pageId !== std.store.doc.id;
-      if (pageId && isNotSameDoc) {
-        // The blockId of the original surface-ref block
-        const blockId = payload.snapshot.id;
-        payload.snapshot.id = std.workspace.idGenerator();
-        payload.snapshot.flavour = 'affine:embed-linked-doc';
-        payload.snapshot.props = {
-          pageId,
-          params: {
-            mode: 'page',
-            blockIds: [blockId],
-          },
-        };
+        // turn into embed-linked-doc if the current doc is different from the pageId of the surface-ref block
+        const isNotSameDoc = pageId !== std.store.doc.id;
+        if (pageId && isNotSameDoc) {
+          // The blockId of the original surface-ref block
+          const blockId = payload.snapshot.id;
+          payload.snapshot.id = std.workspace.idGenerator();
+          payload.snapshot.flavour = 'affine:embed-linked-doc';
+          payload.snapshot.props = {
+            pageId,
+            params: {
+              mode: 'page',
+              blockIds: [blockId],
+            },
+          };
+        }
       }
-    });
+    );
+
+    return () => {
+      beforeImportSliceSubscription.unsubscribe();
+      beforeImportBlockSubscription.unsubscribe();
+    };
   };

blocksuite/affine/shared/src/adapters/middlewares/title.ts

@@ -3,9 +3,13 @@ import type { DocMeta, TransformerMiddleware } from '@blocksuite/store';
 export const titleMiddleware =
   (metas: DocMeta[]): TransformerMiddleware =>
   ({ slots, adapterConfigs }) => {
-    slots.beforeExport.subscribe(() => {
+    const beforeExportSubscription = slots.beforeExport.subscribe(() => {
       for (const meta of metas) {
         adapterConfigs.set('title:' + meta.id, meta.title);
       }
     });
+
+    return () => {
+      beforeExportSubscription.unsubscribe();
+    };
   };

blocksuite/affine/shared/src/adapters/middlewares/upload.ts

@@ -79,7 +79,7 @@ export const uploadMiddleware = (
       }
     }
 
-    blockView$
+    const blockViewSubscription = blockView$
       .pipe(
         map(payload => {
           if (assetsManager.uploadingAssetsMap.size === 0) return null;
@@ -110,5 +110,9 @@ export const uploadMiddleware = (
         )
       )
       .subscribe();
+
+    return () => {
+      blockViewSubscription.unsubscribe();
+    };
   };
 };

blocksuite/affine/shared/src/services/citation-service/citation-service.ts

@@ -0,0 +1,84 @@
+import { type Container, createIdentifier } from '@blocksuite/global/di';
+import { type BlockStdScope, StdIdentifier } from '@blocksuite/std';
+import { type BlockModel, Extension } from '@blocksuite/store';
+
+import { DocModeProvider } from '../doc-mode-service';
+import type {
+  CitationEvents,
+  CitationEventType,
+} from '../telemetry-service/citation';
+import { TelemetryProvider } from '../telemetry-service/telemetry-service';
+
+const CitationEventTypeMap = {
+  Hover: 'AICitationHoverSource',
+  Expand: 'AICitationExpandSource',
+  Delete: 'AICitationDelete',
+  Edit: 'AICitationEdit',
+} as const;
+
+type EventType = keyof typeof CitationEventTypeMap;
+
+type EventTypeMapping = {
+  [K in EventType]: CitationEventType;
+};
+
+export interface CitationViewService {
+  /**
+   * Tracks citation-related events
+   * @param type - The type of citation event to track
+   * @param properties - The properties of the event
+   */
+  trackEvent<T extends EventType>(
+    type: T,
+    properties?: CitationEvents[EventTypeMapping[T]]
+  ): void;
+  /**
+   * Checks if the model is a citation model
+   * @param model - The model to check
+   * @returns True if the model is a citation model, false otherwise
+   */
+  isCitationModel(model: BlockModel): boolean;
+}
+
+export const CitationProvider =
+  createIdentifier<CitationViewService>('CitationService');
+
+export class CitationService extends Extension implements CitationViewService {
+  constructor(private readonly std: BlockStdScope) {
+    super();
+  }
+
+  static override setup(di: Container) {
+    di.addImpl(CitationProvider, CitationService, [StdIdentifier]);
+  }
+
+  get docModeService() {
+    return this.std.getOptional(DocModeProvider);
+  }
+
+  get telemetryService() {
+    return this.std.getOptional(TelemetryProvider);
+  }
+
+  isCitationModel = (model: BlockModel) => {
+    return (
+      'footnoteIdentifier' in model.props &&
+      !!model.props.footnoteIdentifier &&
+      'style' in model.props &&
+      model.props.style === 'citation'
+    );
+  };
+
+  trackEvent<T extends EventType>(
+    type: T,
+    properties?: CitationEvents[EventTypeMapping[T]]
+  ) {
+    const editorMode = this.docModeService?.getEditorMode() ?? 'page';
+    this.telemetryService?.track(CitationEventTypeMap[type], {
+      page: editorMode === 'page' ? 'doc editor' : 'whiteboard editor',
+      module: 'AI Result',
+      control: 'Source',
+      ...properties,
+    });
+  }
+}

blocksuite/affine/shared/src/services/citation-service/index.ts

@@ -0,0 +1 @@
+export * from './citation-service';

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

@@ -1,5 +1,6 @@
 export * from './auto-clear-selection-service';
 export * from './block-meta-service';
+export * from './citation-service';
 export * from './doc-display-meta-service';
 export * from './doc-mode-service';
 export * from './drag-handle-config';

blocksuite/affine/shared/src/services/telemetry-service/citation.ts

@@ -0,0 +1,8 @@
+import type { TelemetryEvent } from './types';
+export type CitationEventType =
+  | 'AICitationHoverSource'
+  | 'AICitationExpandSource'
+  | 'AICitationDelete'
+  | 'AICitationEdit';
+
+export type CitationEvents = Record<CitationEventType, TelemetryEvent>;

blocksuite/affine/shared/src/services/telemetry-service/index.ts

@@ -1,3 +1,4 @@
+export * from './citation.js';
 export * from './database.js';
 export * from './link.js';
 export * from './telemetry-service.js';

blocksuite/affine/shared/src/services/telemetry-service/telemetry-service.ts

@@ -1,6 +1,7 @@
 import { createIdentifier } from '@blocksuite/global/di';
 import type { ExtensionType } from '@blocksuite/store';
 
+import type { CitationEvents } from './citation.js';
 import type { CodeBlockEvents } from './code-block.js';
 import type { OutDatabaseAllEvents } from './database.js';
 import type { LinkToolbarEvents } from './link.js';
@@ -28,7 +29,8 @@ export type TelemetryEventMap = OutDatabaseAllEvents &
   LinkToolbarEvents &
   SlashMenuEvents &
   CodeBlockEvents &
-  NoteEvents & {
+  NoteEvents &
+  CitationEvents & {
     DocCreated: DocCreatedEvent;
     Link: TelemetryEvent;
     LinkedDocCreated: LinkedDocCreatedEvent;

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

@@ -11,6 +11,9 @@ const ALLOWED_SCHEMES = new Set([
 // https://publicsuffix.org/
 const TLD_REGEXP = /(?:\.[a-zA-Z]+)?(\.[a-zA-Z]{2,})$/;
 
+const IPV4_ADDR_REGEXP =
+  /^(25[0-5]|2[0-4]\d|[01]?\d\d?)(\.(25[0-5]|2[0-4]\d|[01]?\d\d?)){3}$/;
+
 const toURL = (str: string) => {
   try {
     if (!URL.canParse(str)) return null;
@@ -21,16 +24,20 @@ const toURL = (str: string) => {
   }
 };
 
-function resolveURL(str: string) {
+function resolveURL(str: string, baseUrl: string, padded = false) {
   const url = toURL(str);
   if (!url) return null;
 
   const protocol = url.protocol.substring(0, url.protocol.length - 1);
   const hostname = url.hostname;
+  const origin = url.origin;
 
   let allowed = ALLOWED_SCHEMES.has(protocol);
   if (allowed && hostname.includes('.')) {
-    allowed = TLD_REGEXP.test(hostname);
+    allowed =
+      origin === baseUrl ||
+      TLD_REGEXP.test(hostname) ||
+      (padded ? false : IPV4_ADDR_REGEXP.test(hostname));
   }
 
   return { url, allowed };
@@ -68,10 +75,10 @@ export function normalizeUrl(str: string) {
  *
  * For more detail see https://www.ietf.org/rfc/rfc1738.txt
  */
-export function isValidUrl(str: string) {
+export function isValidUrl(str: string, baseUrl = location.origin) {
   str = str.trim();
 
-  let result = resolveURL(str);
+  let result = resolveURL(str, baseUrl);
 
   if (result && !result.allowed) return false;
 
@@ -80,7 +87,7 @@ export function isValidUrl(str: string) {
     if (!hasScheme) {
       const dotIdx = str.indexOf('.');
       if (dotIdx > 0 && dotIdx < str.length - 1) {
-        result = resolveURL(`https://${str}`);
+        result = resolveURL(`https://${str}`, baseUrl, true);
       }
     }
   }

blocksuite/affine/widgets/drag-handle/src/middleware/blocks-filter.ts

@@ -40,7 +40,7 @@ export const gfxBlocksFilter = (
   }
 
   return ({ slots, transformerConfigs }) => {
-    slots.beforeExport.subscribe(payload => {
+    const beforeExportSubscription = slots.beforeExport.subscribe(payload => {
       if (payload.type !== 'block') {
         return;
       }
@@ -54,7 +54,7 @@ export const gfxBlocksFilter = (
       }
     });
 
-    slots.afterExport.subscribe(payload => {
+    const afterExportSubscription = slots.afterExport.subscribe(payload => {
       if (payload.type !== 'block') {
         return;
       }
@@ -110,5 +110,10 @@ export const gfxBlocksFilter = (
         });
       }
     });
+
+    return () => {
+      beforeExportSubscription.unsubscribe();
+      afterExportSubscription.unsubscribe();
+    };
   };
 };

blocksuite/affine/widgets/drag-handle/src/middleware/card-style-updater.ts

@@ -0,0 +1,56 @@
+import {
+  AttachmentBlockModel,
+  BookmarkBlockModel,
+  EmbedGithubModel,
+  EmbedLinkedDocModel,
+  NoteBlockModel,
+} from '@blocksuite/affine-model';
+import { matchModels } from '@blocksuite/affine-shared/utils';
+import type { BlockStdScope } from '@blocksuite/std';
+import type { TransformerMiddleware } from '@blocksuite/store';
+
+export const cardStyleUpdater =
+  (std: BlockStdScope): TransformerMiddleware =>
+  ({ slots }) => {
+    slots.beforeImport.subscribe(payload => {
+      if (payload.type !== 'block' || !payload.parent) return;
+      const parentModel = std.store.getModelById(payload.parent);
+      if (!matchModels(parentModel, [NoteBlockModel])) return;
+
+      // TODO(@L-Sun): Refactor this after refactor `store.moveBlocks`
+      // Currently, drag a block will use store.moveBlocks to update the tree of blocks
+      // but the instance of it is not changed.
+      // So change the style of snapshot.props in the middleware is not working.
+      // Instead, we can change the style of the model instance in the middleware,
+      const model = std.store.getModelById(payload.snapshot.id);
+      if (!model) return;
+
+      if (model instanceof AttachmentBlockModel) {
+        std.store.updateBlock(model, {
+          style: 'horizontalThin',
+        });
+        return;
+      }
+
+      if (model instanceof BookmarkBlockModel) {
+        std.store.updateBlock(model, {
+          style: 'horizontal',
+        });
+        return;
+      }
+
+      if (model instanceof EmbedGithubModel) {
+        std.store.updateBlock(model, {
+          style: 'horizontal',
+        });
+        return;
+      }
+
+      if (model instanceof EmbedLinkedDocModel) {
+        std.store.updateBlock(model, {
+          style: 'horizontal',
+        });
+        return;
+      }
+    });
+  };

blocksuite/affine/widgets/drag-handle/src/middleware/new-id-cross-doc.ts

@@ -9,36 +9,45 @@ export const newIdCrossDoc =
     let samePage = false;
     const oldToNewIdMap = new Map<string, string>();
 
-    slots.beforeImport.subscribe(payload => {
-      if (payload.type === 'slice') {
-        samePage = payload.snapshot.pageId === std.store.id;
+    const beforeImportSliceSubscription = slots.beforeImport.subscribe(
+      payload => {
+        if (payload.type === 'slice') {
+          samePage = payload.snapshot.pageId === std.store.id;
+        }
+        if (payload.type === 'block' && !samePage) {
+          const newId = std.workspace.idGenerator();
+
+          oldToNewIdMap.set(payload.snapshot.id, newId);
+          payload.snapshot.id = newId;
+        }
       }
-      if (payload.type === 'block' && !samePage) {
-        const newId = std.workspace.idGenerator();
+    );
 
-        oldToNewIdMap.set(payload.snapshot.id, newId);
-        payload.snapshot.id = newId;
+    const afterImportBlockSubscription = slots.afterImport.subscribe(
+      payload => {
+        if (
+          !samePage &&
+          payload.type === 'block' &&
+          matchModels(payload.model, [DatabaseBlockModel])
+        ) {
+          const originalCells = payload.model.props.cells;
+          const newCells = {
+            ...originalCells,
+          };
+
+          Object.keys(originalCells).forEach(cellId => {
+            if (oldToNewIdMap.has(cellId)) {
+              newCells[oldToNewIdMap.get(cellId)!] = originalCells[cellId];
+            }
+          });
+
+          payload.model.props.cells$.value = newCells;
+        }
       }
-    });
+    );
 
-    slots.afterImport.subscribe(payload => {
-      if (
-        !samePage &&
-        payload.type === 'block' &&
-        matchModels(payload.model, [DatabaseBlockModel])
-      ) {
-        const originalCells = payload.model.props.cells;
-        const newCells = {
-          ...originalCells,
-        };
-
-        Object.keys(originalCells).forEach(cellId => {
-          if (oldToNewIdMap.has(cellId)) {
-            newCells[oldToNewIdMap.get(cellId)!] = originalCells[cellId];
-          }
-        });
-
-        payload.model.props.cells$.value = newCells;
-      }
-    });
+    return () => {
+      beforeImportSliceSubscription.unsubscribe();
+      afterImportBlockSubscription.unsubscribe();
+    };
   };

blocksuite/affine/widgets/drag-handle/src/middleware/reorder-list.ts

@@ -7,19 +7,25 @@ import type { TransformerMiddleware } from '@blocksuite/store';
 export const reorderList =
   (std: BlockStdScope): TransformerMiddleware =>
   ({ slots }) => {
-    slots.afterImport.subscribe(payload => {
-      if (payload.type === 'block') {
-        const model = payload.model;
-        if (
-          matchModels(model, [ListBlockModel]) &&
-          model.props.type === 'numbered'
-        ) {
-          const next = std.store.getNext(model);
-          correctNumberedListsOrderToPrev(std.store, model);
-          if (next) {
-            correctNumberedListsOrderToPrev(std.store, next);
+    const afterImportBlockSubscription = slots.afterImport.subscribe(
+      payload => {
+        if (payload.type === 'block') {
+          const model = payload.model;
+          if (
+            matchModels(model, [ListBlockModel]) &&
+            model.props.type === 'numbered'
+          ) {
+            const next = std.store.getNext(model);
+            correctNumberedListsOrderToPrev(std.store, model);
+            if (next) {
+              correctNumberedListsOrderToPrev(std.store, next);
+            }
           }
         }
       }
-    });
+    );
+
+    return () => {
+      afterImportBlockSubscription.unsubscribe();
+    };
   };

blocksuite/affine/widgets/drag-handle/src/watchers/drag-event-watcher.ts

@@ -76,6 +76,7 @@ import last from 'lodash-es/last';
 import type { AffineDragHandleWidget } from '../drag-handle.js';
 import { PreviewHelper } from '../helpers/preview-helper.js';
 import { gfxBlocksFilter } from '../middleware/blocks-filter.js';
+import { cardStyleUpdater } from '../middleware/card-style-updater.js';
 import { newIdCrossDoc } from '../middleware/new-id-cross-doc.js';
 import { reorderList } from '../middleware/reorder-list';
 import {
@@ -1433,6 +1434,7 @@ export class DragEventWatcher {
       newIdCrossDoc(std),
       reorderList(std),
       surfaceRefToEmbed(std),
+      cardStyleUpdater(std),
     ];
 
     if (selectedIds) {

blocksuite/affine/widgets/edgeless-selected-rect/src/edgeless-selected-rect.ts

@@ -374,6 +374,8 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>
     type: 'resize' | 'rotate';
     angle: number;
     handle: ResizeHandle;
+    flipX?: boolean;
+    flipY?: boolean;
     pure?: boolean;
   }) => {
     if (!options) {
@@ -381,8 +383,25 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>
       return 'default';
     }
 
-    const { type, angle, handle } = options;
+    const { type, angle, flipX, flipY } = options;
     let cursor: CursorType = 'default';
+    let handle: ResizeHandle = options.handle;
+
+    if (flipX) {
+      handle = (
+        handle.includes('left')
+          ? handle.replace('left', 'right')
+          : handle.replace('right', 'left')
+      ) as ResizeHandle;
+    }
+
+    if (flipY) {
+      handle = (
+        handle.includes('top')
+          ? handle.replace('top', 'bottom')
+          : handle.replace('bottom', 'top')
+      ) as ResizeHandle;
+    }
 
     if (type === 'rotate') {
       cursor = generateCursorUrl(angle, handle);
@@ -626,7 +645,7 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>
                 onResizeStart: () => {
                   this._mode = 'resize';
                 },
-                onResizeUpdate: ({ lockRatio, scaleX, exceed }) => {
+                onResizeUpdate: ({ lockRatio, scaleX, scaleY, exceed }) => {
                   if (lockRatio) {
                     this._scaleDirection = handle;
                     this._scalePercent = `${Math.round(scaleX * 100)}%`;
@@ -642,6 +661,8 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>
                     type: 'resize',
                     angle: elements.length > 1 ? 0 : (elements[0]?.rotate ?? 0),
                     handle,
+                    flipX: scaleX < 0,
+                    flipY: scaleY < 0,
                   });
                 },
                 onResizeEnd: () => {
@@ -652,6 +673,14 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>
             }
           },
           option => {
+            if (
+              ['resize', 'rotate'].includes(
+                interaction.activeInteraction$.value?.type ?? ''
+              )
+            ) {
+              return '';
+            }
+
             return this._updateCursor({
               ...option,
               angle: elements.length > 1 ? 0 : (elements[0]?.rotate ?? 0),

blocksuite/affine/widgets/frame-title/src/affine-frame-title-widget.ts

@@ -1,43 +1,21 @@
-import { FrameBlockModel, type RootBlockModel } from '@blocksuite/affine-model';
+import { type FrameBlockModel } from '@blocksuite/affine-model';
 import { WidgetComponent, WidgetViewExtension } from '@blocksuite/std';
 import { html } from 'lit';
-import { repeat } from 'lit/directives/repeat.js';
 import { literal, unsafeStatic } from 'lit/static-html.js';
 
-import type { AffineFrameTitle } from './frame-title.js';
-
 export const AFFINE_FRAME_TITLE_WIDGET = 'affine-frame-title-widget';
 
-export class AffineFrameTitleWidget extends WidgetComponent<RootBlockModel> {
-  private get _frames() {
-    return Object.values(this.store.blocks.value)
-      .map(({ model }) => model)
-      .filter(model => model instanceof FrameBlockModel);
-  }
-
-  getFrameTitle(frame: FrameBlockModel | string) {
-    const id = typeof frame === 'string' ? frame : frame.id;
-    const frameTitle = this.shadowRoot?.querySelector(
-      `affine-frame-title[data-id="${id}"]`
-    ) as AffineFrameTitle | null;
-    return frameTitle;
-  }
-
+export class AffineFrameTitleWidget extends WidgetComponent<FrameBlockModel> {
   override render() {
-    return repeat(
-      this._frames,
-      ({ id }) => id,
-      frame =>
-        html`<affine-frame-title
-          .model=${frame}
-          data-id=${frame.id}
-        ></affine-frame-title>`
-    );
+    return html`<affine-frame-title
+      .model=${this.model}
+      data-id=${this.model.id}
+    ></affine-frame-title>`;
   }
 }
 
 export const frameTitleWidget = WidgetViewExtension(
-  'affine:page',
+  'affine:frame',
   AFFINE_FRAME_TITLE_WIDGET,
   literal`${unsafeStatic(AFFINE_FRAME_TITLE_WIDGET)}`
 );

blocksuite/affine/widgets/frame-title/src/edgeless-frame-title-editor.ts

@@ -14,6 +14,7 @@ import {
   AFFINE_FRAME_TITLE_WIDGET,
   type AffineFrameTitleWidget,
 } from './affine-frame-title-widget';
+import type { AffineFrameTitle } from './frame-title';
 import { frameTitleStyleVars } from './styles';
 
 export class EdgelessFrameTitleEditor extends WithDisposable(
@@ -135,12 +136,13 @@ export class EdgelessFrameTitleEditor extends WithDisposable(
 
     const frameTitleWidget = this.edgeless.std.view.getWidget(
       AFFINE_FRAME_TITLE_WIDGET,
-      rootBlockId
+      this.frameModel.id
     ) as AffineFrameTitleWidget | null;
 
     if (!frameTitleWidget) return nothing;
 
-    const frameTitle = frameTitleWidget.getFrameTitle(this.frameModel);
+    const frameTitle =
+      frameTitleWidget.querySelector<AffineFrameTitle>('affine-frame-title');
 
     const colors = frameTitle?.colors ?? {
       background: cssVarV2('edgeless/frame/background/white'),

blocksuite/affine/widgets/frame-title/src/frame-title.ts

@@ -142,12 +142,10 @@ export class AffineFrameTitle extends SignalWatcher(
       }px)`,
     ];
 
-    const anchor = this.gfx.viewport.toViewCoord(bound.x, bound.y);
-
     this.style.display = '';
     this.style.setProperty('--bg-color', this.colors.background);
-    this.style.left = `${anchor[0]}px`;
-    this.style.top = `${anchor[1]}px`;
+    this.style.left = '0px';
+    this.style.top = '0px';
     this.style.display = hidden ? 'none' : 'flex';
     this.style.transform = transformOperation.join(' ');
     this.style.maxWidth = `${maxWidth}px`;
@@ -205,18 +203,6 @@ export class AffineFrameTitle extends SignalWatcher(
       })
     );
 
-    _disposables.add(
-      on(this, 'click', evt => {
-        if (evt.shiftKey) {
-          this.gfx.selection.toggle(this.model);
-        } else {
-          this.gfx.selection.set({
-            elements: [this.model.id],
-          });
-        }
-      })
-    );
-
     _disposables.add(
       on(this, 'dblclick', () => {
         const edgeless = this.std.view.getBlock(this.std.store.root?.id || '');

blocksuite/docs/api/@blocksuite/store/classes/Store.md

@@ -566,23 +566,29 @@ Optional flag to insert before sibling
 
 ### updateBlock()
 
-> **updateBlock**(`modelOrId`, `callBackOrProps`): `void`
+> **updateBlock**\<`T`\>(`modelOrId`, `callBackOrProps`): `void`
 
 Updates a block's properties or executes a callback in a transaction
 
+#### Type Parameters
+
+##### T
+
+`T` *extends* `BlockModel`\<`object`\> = `BlockModel`\<`object`\>
+
 #### Parameters
 
 ##### modelOrId
 
 The block model or block ID to update
 
-`string` | `BlockModel`\<`object`\>
+`string` | `T`
 
 ##### callBackOrProps
 
 Either a callback function to execute or properties to update
 
-`Partial`\<`BlockProps`\> | () => `void`
+() => `void` | `Partial`\<`BlockProps` \| `PropsOfModel`\<`T`\> & `BlockSysProps`\>
 
 #### Returns
 

blocksuite/framework/global/src/__tests__/svg-path.unit.spec.ts

@@ -1,73 +0,0 @@
-import { describe, expect, test } from 'vitest';
-
-import { SVGPathBuilder, SVGShapeBuilder } from '../gfx/svg-path.js';
-
-describe('SVGPathBuilder', () => {
-  test('should build a simple path', () => {
-    const pathBuilder = new SVGPathBuilder();
-    const result = pathBuilder.moveTo(10, 20).lineTo(30, 40).build();
-
-    expect(result).toBe('M 10 20 L 30 40');
-  });
-
-  test('should build a path with curves', () => {
-    const pathBuilder = new SVGPathBuilder();
-    const result = pathBuilder
-      .moveTo(0, 0)
-      .curveTo(10, 0, 10, 10, 20, 10)
-      .build();
-
-    expect(result).toBe('M 0 0 C 10 0 10 10 20 10');
-  });
-
-  test('should build a closed path', () => {
-    const pathBuilder = new SVGPathBuilder();
-    const result = pathBuilder
-      .moveTo(0, 0)
-      .lineTo(10, 0)
-      .lineTo(5, 10)
-      .closePath()
-      .build();
-
-    expect(result).toBe('M 0 0 L 10 0 L 5 10 Z');
-  });
-
-  test('should clear commands', () => {
-    const pathBuilder = new SVGPathBuilder();
-    pathBuilder.moveTo(10, 20).lineTo(30, 40);
-    pathBuilder.clear();
-    const result = pathBuilder.moveTo(0, 0).build();
-
-    expect(result).toBe('M 0 0');
-  });
-});
-
-describe('SVGShapeBuilder', () => {
-  test('should generate diamond polygon points', () => {
-    const result = SVGShapeBuilder.diamond(100, 80, 2);
-    expect(result).toBe('50,1 99,40 50,79 1,40');
-  });
-
-  test('should generate triangle polygon points', () => {
-    const result = SVGShapeBuilder.triangle(100, 80, 2);
-    expect(result).toBe('50,1 99,79 1,79');
-  });
-
-  test('should generate diamond path', () => {
-    const result = SVGShapeBuilder.diamondPath(100, 80, 2);
-    expect(result).toBe('M 50 1 L 99 40 L 50 79 L 1 40 Z');
-  });
-
-  test('should generate triangle path', () => {
-    const result = SVGShapeBuilder.trianglePath(100, 80, 2);
-    expect(result).toBe('M 50 1 L 99 79 L 1 79 Z');
-  });
-
-  test('should handle zero stroke width', () => {
-    const diamondResult = SVGShapeBuilder.diamond(100, 80, 0);
-    expect(diamondResult).toBe('50,0 100,40 50,80 0,40');
-
-    const triangleResult = SVGShapeBuilder.triangle(100, 80, 0);
-    expect(triangleResult).toBe('50,0 100,80 0,80');
-  });
-});

blocksuite/framework/global/src/gfx/index.ts

@@ -4,5 +4,4 @@ export * from './math.js';
 export * from './model/index.js';
 export * from './perfect-freehand/index.js';
 export * from './polyline.js';
-export * from './svg-path.js';
 export * from './xywh.js';

blocksuite/framework/global/src/gfx/svg-path.ts

@@ -1,160 +0,0 @@
-interface PathCommand {
-  command: string;
-  coordinates: number[];
-}
-
-/**
- * A utility class for building SVG path strings using command-based API.
- * Supports moveTo, lineTo, curveTo operations and can build complete path strings.
- */
-export class SVGPathBuilder {
-  private commands: PathCommand[] = [];
-
-  /**
-   * Move to a specific point without drawing
-   */
-  moveTo(x: number, y: number): this {
-    this.commands.push({
-      command: 'M',
-      coordinates: [x, y],
-    });
-    return this;
-  }
-
-  /**
-   * Draw a line to a specific point
-   */
-  lineTo(x: number, y: number): this {
-    this.commands.push({
-      command: 'L',
-      coordinates: [x, y],
-    });
-    return this;
-  }
-
-  /**
-   * Draw a cubic Bézier curve
-   */
-  curveTo(
-    cp1x: number,
-    cp1y: number,
-    cp2x: number,
-    cp2y: number,
-    x: number,
-    y: number
-  ): this {
-    this.commands.push({
-      command: 'C',
-      coordinates: [cp1x, cp1y, cp2x, cp2y, x, y],
-    });
-    return this;
-  }
-
-  /**
-   * Close the current path
-   */
-  closePath(): this {
-    this.commands.push({
-      command: 'Z',
-      coordinates: [],
-    });
-    return this;
-  }
-
-  /**
-   * Build the complete SVG path string
-   */
-  build(): string {
-    const pathSegments = this.commands.map(cmd => {
-      const coords = cmd.coordinates.join(' ');
-      return coords ? `${cmd.command} ${coords}` : cmd.command;
-    });
-
-    return pathSegments.join(' ');
-  }
-
-  /**
-   * Clear all commands and reset the builder
-   */
-  clear(): this {
-    this.commands = [];
-    return this;
-  }
-}
-
-/**
- * Create SVG polygon points string for common shapes
- */
-export class SVGShapeBuilder {
-  /**
-   * Generate diamond (rhombus) polygon points
-   */
-  static diamond(
-    width: number,
-    height: number,
-    strokeWidth: number = 0
-  ): string {
-    const halfStroke = strokeWidth / 2;
-    return [
-      `${width / 2},${halfStroke}`,
-      `${width - halfStroke},${height / 2}`,
-      `${width / 2},${height - halfStroke}`,
-      `${halfStroke},${height / 2}`,
-    ].join(' ');
-  }
-
-  /**
-   * Generate triangle polygon points
-   */
-  static triangle(
-    width: number,
-    height: number,
-    strokeWidth: number = 0
-  ): string {
-    const halfStroke = strokeWidth / 2;
-    return [
-      `${width / 2},${halfStroke}`,
-      `${width - halfStroke},${height - halfStroke}`,
-      `${halfStroke},${height - halfStroke}`,
-    ].join(' ');
-  }
-
-  /**
-   * Generate diamond path using SVGPathBuilder
-   */
-  static diamondPath(
-    width: number,
-    height: number,
-    strokeWidth: number = 0
-  ): string {
-    const halfStroke = strokeWidth / 2;
-    const pathBuilder = new SVGPathBuilder();
-
-    return pathBuilder
-      .moveTo(width / 2, halfStroke)
-      .lineTo(width - halfStroke, height / 2)
-      .lineTo(width / 2, height - halfStroke)
-      .lineTo(halfStroke, height / 2)
-      .closePath()
-      .build();
-  }
-
-  /**
-   * Generate triangle path using SVGPathBuilder
-   */
-  static trianglePath(
-    width: number,
-    height: number,
-    strokeWidth: number = 0
-  ): string {
-    const halfStroke = strokeWidth / 2;
-    const pathBuilder = new SVGPathBuilder();
-
-    return pathBuilder
-      .moveTo(width / 2, halfStroke)
-      .lineTo(width - halfStroke, height - halfStroke)
-      .lineTo(halfStroke, height - halfStroke)
-      .closePath()
-      .build();
-  }
-}

blocksuite/framework/std/src/event/dispatcher.ts

@@ -220,6 +220,12 @@ export class UIEventDispatcher extends LifeCycleWatcher {
 
       this._setActive(false);
     });
+    // When the document is hidden, the event dispatcher should be inactive
+    this.disposables.addFromEvent(document, 'visibilitychange', () => {
+      if (document.visibilityState === 'hidden') {
+        this._setActive(false);
+      }
+    });
   }
 
   private _buildEventScopeBySelection(name: EventName) {

blocksuite/framework/std/src/gfx/interactivity/manager.ts

@@ -947,23 +947,34 @@ export class InteractivityManager extends GfxExtension {
       ...options,
       lockRatio,
       elements,
-      onResizeMove: ({ dx, dy, handleSign, lockRatio }) => {
+      onResizeMove: ({
+        scaleX,
+        scaleY,
+        originalBound,
+        handleSign,
+        handlePos,
+        currentHandlePos,
+        lockRatio,
+      }) => {
         const suggested: {
-          dx: number;
-          dy: number;
+          scaleX: number;
+          scaleY: number;
           priority?: number;
         }[] = [];
-        const suggest = (distance: { dx: number; dy: number }) => {
+        const suggest = (distance: { scaleX: number; scaleY: number }) => {
           suggested.push(distance);
         };
 
         extensionHandlers.forEach(ext => {
           ext.onResizeMove?.({
-            dx,
-            dy,
+            scaleX,
+            scaleY,
             elements,
-            handleSign,
             handle,
+            handleSign,
+            handlePos,
+            originalBound,
+            currentHandlePos,
             lockRatio,
             suggest,
           });
@@ -973,9 +984,9 @@ export class InteractivityManager extends GfxExtension {
           return (a.priority ?? 0) - (b.priority ?? 0);
         });
 
-        return last(suggested) ?? { dx, dy };
+        return last(suggested) ?? { scaleX, scaleY };
       },
-      onResizeStart: ({ data }) => {
+      onResizeStart: ({ handleSign, handlePos, data }) => {
         this.activeInteraction$.value = {
           type: 'resize',
           elements,
@@ -984,6 +995,8 @@ export class InteractivityManager extends GfxExtension {
           ext.onResizeStart?.({
             elements,
             handle,
+            handlePos,
+            handleSign,
           });
         });
 
@@ -1045,13 +1058,15 @@ export class InteractivityManager extends GfxExtension {
 
         options.onResizeUpdate?.({ scaleX, scaleY, lockRatio, exceed });
       },
-      onResizeEnd: ({ data }) => {
+      onResizeEnd: ({ handleSign, handlePos, data }) => {
         this.activeInteraction$.value = null;
 
         extensionHandlers.forEach(ext => {
           ext.onResizeEnd?.({
             elements,
             handle,
+            handlePos,
+            handleSign,
           });
         });
         options.onResizeEnd?.();

blocksuite/framework/std/src/gfx/interactivity/resize/manager.ts

@@ -2,6 +2,7 @@ import {
   Bound,
   getCommonBoundWithRotation,
   type IBound,
+  type IPoint,
   type IVec,
 } from '@blocksuite/global/gfx';
 
@@ -29,7 +30,7 @@ export const DEFAULT_HANDLES: ResizeHandle[] = [
   'bottom',
 ];
 
-type ElementInitialSnapshot = Readonly<Required<IBound>>;
+type ReadonlyIBound = Readonly<Required<IBound>>;
 
 export interface OptionResize {
   elements: GfxModel[];
@@ -37,16 +38,18 @@ export interface OptionResize {
   lockRatio: boolean;
   event: PointerEvent;
   onResizeMove: (payload: {
-    dx: number;
-    dy: number;
+    scaleX: number;
+    scaleY: number;
 
-    handleSign: {
-      xSign: number;
-      ySign: number;
-    };
+    originalBound: IBound;
+
+    handleSign: IPoint;
+
+    handlePos: IVec;
+    currentHandlePos: IVec;
 
     lockRatio: boolean;
-  }) => { dx: number; dy: number };
+  }) => { scaleX: number; scaleY: number };
   onResizeUpdate: (payload: {
     lockRatio: boolean;
     scaleX: number;
@@ -59,8 +62,16 @@ export interface OptionResize {
       matrix: DOMMatrix;
     }[];
   }) => void;
-  onResizeStart?: (payload: { data: { model: GfxModel }[] }) => void;
-  onResizeEnd?: (payload: { data: { model: GfxModel }[] }) => void;
+  onResizeStart?: (payload: {
+    handlePos: IVec;
+    handleSign: IPoint;
+    data: { model: GfxModel }[];
+  }) => void;
+  onResizeEnd?: (payload: {
+    handlePos: IVec;
+    handleSign: IPoint;
+    data: { model: GfxModel }[];
+  }) => void;
 }
 
 export type RotateOption = {
@@ -95,11 +106,102 @@ export class ResizeController {
     this.gfx = option.gfx;
   }
 
+  getCoordsTransform(originalBound: IBound, handle: ResizeHandle) {
+    const { x: xSign, y: ySign } = this.getHandleSign(handle);
+    const pivot = new DOMPoint(
+      originalBound.x + ((-xSign + 1) / 2) * originalBound.w,
+      originalBound.y + ((-ySign + 1) / 2) * originalBound.h
+    );
+    const toLocalM = new DOMMatrix().translate(-pivot.x, -pivot.y);
+    const toLocalRotatedM = new DOMMatrix()
+      .translate(-pivot.x, -pivot.y)
+      .translate(
+        originalBound.w / 2 + originalBound.x,
+        originalBound.h / 2 + originalBound.y
+      )
+      .rotate(-(originalBound.rotate ?? 0))
+      .translate(
+        -(originalBound.w / 2 + originalBound.x),
+        -(originalBound.h / 2 + originalBound.y)
+      );
+
+    const toLocal = (p: DOMPoint, withRotation: boolean = false) =>
+      p.matrixTransform(withRotation ? toLocalRotatedM : toLocalM);
+    const toModel = (p: DOMPoint) =>
+      p.matrixTransform(toLocalRotatedM.inverse());
+
+    const handlePos = toModel(
+      new DOMPoint(originalBound.w * xSign, originalBound.h * ySign)
+    );
+
+    return {
+      xSign,
+      ySign,
+      originalBound,
+      toLocalM,
+      toLocalRotatedM,
+      toLocal,
+      toModel,
+      handlePos: [handlePos.x, handlePos.y] as IVec,
+    };
+  }
+
+  getScaleFromDelta(
+    transform: ReturnType<ResizeController['getCoordsTransform']>,
+    delta: { dx: number; dy: number },
+    handleStartPos: IVec,
+    lockRatio: boolean
+  ) {
+    const { originalBound, xSign, ySign, toModel, toLocal } = transform;
+    const currentPos = toLocal(
+      new DOMPoint(handleStartPos[0] + delta.dx, handleStartPos[1] + delta.dy),
+      true
+    );
+
+    let scaleX = xSign ? currentPos.x / (originalBound.w * xSign) : 1;
+    let scaleY = ySign ? currentPos.y / (originalBound.h * ySign) : 1;
+
+    if (lockRatio) {
+      const min = Math.min(Math.abs(scaleX), Math.abs(scaleY));
+      scaleX = Math.sign(scaleX) * min;
+      scaleY = Math.sign(scaleY) * min;
+    }
+
+    const finalHandlePos = toModel(
+      new DOMPoint(
+        originalBound.w * xSign * scaleX,
+        originalBound.h * ySign * scaleY
+      )
+    );
+
+    return {
+      scaleX,
+      scaleY,
+      handlePos: [finalHandlePos.x, finalHandlePos.y] as IVec,
+    };
+  }
+
+  getScaleMatrix(
+    { scaleX, scaleY }: { scaleX: number; scaleY: number },
+    lockRatio: boolean
+  ) {
+    if (lockRatio) {
+      const min = Math.min(Math.abs(scaleX), Math.abs(scaleY));
+      scaleX = Math.sign(scaleX) * min;
+      scaleY = Math.sign(scaleY) * min;
+    }
+
+    return {
+      scaleX,
+      scaleY,
+      scaleM: new DOMMatrix().scaleSelf(scaleX, scaleY),
+    };
+  }
+
   startResize(options: OptionResize) {
     const {
       elements,
       handle,
-      lockRatio,
       onResizeStart,
       onResizeMove,
       onResizeUpdate,
@@ -107,19 +209,32 @@ export class ResizeController {
       event,
     } = options;
 
-    const originals: ElementInitialSnapshot[] = elements.map(el => ({
+    const originals: ReadonlyIBound[] = elements.map(el => ({
       x: el.x,
       y: el.y,
       w: el.w,
       h: el.h,
       rotate: el.rotate,
     }));
-    const originalBound = getCommonBoundWithRotation(originals);
+    const originalBound: IBound =
+      originals.length > 1
+        ? getCommonBoundWithRotation(originals)
+        : {
+            x: originals[0].x,
+            y: originals[0].y,
+            w: originals[0].w,
+            h: originals[0].h,
+            rotate: originals[0].rotate,
+          };
     const startPt = this.gfx.viewport.toModelCoordFromClientCoord([
       event.clientX,
       event.clientY,
     ]);
-    const handleSign = this.getHandleSign(handle);
+    const transform = this.getCoordsTransform(originalBound, handle);
+    const handleSign = {
+      x: transform.xSign,
+      y: transform.ySign,
+    };
 
     const onPointerMove = (e: PointerEvent) => {
       const currPt = this.gfx.viewport.toModelCoordFromClientCoord([
@@ -130,45 +245,69 @@ export class ResizeController {
         dx: currPt[0] - startPt[0],
         dy: currPt[1] - startPt[1],
       };
-      const shouldLockRatio = lockRatio || e.shiftKey;
+      const shouldLockRatio =
+        options.lockRatio || e.shiftKey || elements.length > 1;
+      const {
+        scaleX,
+        scaleY,
+        handlePos: currentHandlePos,
+      } = this.getScaleFromDelta(
+        transform,
+        delta,
+        transform.handlePos,
+        shouldLockRatio
+      );
+
+      const scale = onResizeMove({
+        scaleX,
+        scaleY,
+
+        originalBound,
 
-      delta = onResizeMove({
-        dx: delta.dx,
-        dy: delta.dy,
         handleSign,
+
+        handlePos: transform.handlePos,
+        currentHandlePos,
+
         lockRatio: shouldLockRatio,
       });
+      const scaleInfo = this.getScaleMatrix(scale, shouldLockRatio);
 
       if (elements.length === 1) {
         this.resizeSingle(
           originals[0],
           elements[0],
           shouldLockRatio,
-          startPt,
-          delta,
-          handleSign,
+          transform,
+          scaleInfo,
           onResizeUpdate
         );
       } else {
         this.resizeMulti(
-          originalBound,
           originals,
           elements,
-          startPt,
-          delta,
-          handleSign,
+          transform,
+          scaleInfo,
           onResizeUpdate
         );
       }
     };
 
-    onResizeStart?.({ data: elements.map(model => ({ model })) });
+    onResizeStart?.({
+      handleSign,
+      handlePos: transform.handlePos,
+      data: elements.map(model => ({ model })),
+    });
 
     const onPointerUp = () => {
       this.host.removeEventListener('pointermove', onPointerMove);
       this.host.removeEventListener('pointerup', onPointerUp);
 
-      onResizeEnd?.({ data: elements.map(model => ({ model })) });
+      onResizeEnd?.({
+        handleSign,
+        handlePos: transform.handlePos,
+        data: elements.map(model => ({ model })),
+      });
     };
 
     this.host.addEventListener('pointermove', onPointerMove);
@@ -176,55 +315,15 @@ export class ResizeController {
   }
 
   private resizeSingle(
-    orig: ElementInitialSnapshot,
+    orig: ReadonlyIBound,
     model: GfxModel,
     lockRatio: boolean,
-    startPt: IVec,
-    delta: {
-      dx: number;
-      dy: number;
-    },
-    handleSign: { xSign: number; ySign: number },
+    transform: ReturnType<typeof ResizeController.prototype.getCoordsTransform>,
+    scale: { scaleX: number; scaleY: number; scaleM: DOMMatrix },
     updateCallback: OptionResize['onResizeUpdate']
   ) {
-    const { xSign, ySign } = handleSign;
-
-    const pivot = new DOMPoint(
-      orig.x + (-xSign === 1 ? orig.w : 0),
-      orig.y + (-ySign === 1 ? orig.h : 0)
-    );
-    const toLocalRotatedM = new DOMMatrix()
-      .translate(-pivot.x, -pivot.y)
-      .translate(orig.w / 2 + orig.x, orig.h / 2 + orig.y)
-      .rotate(-orig.rotate)
-      .translate(-(orig.w / 2 + orig.x), -(orig.h / 2 + orig.y));
-    const toLocalM = new DOMMatrix().translate(-pivot.x, -pivot.y);
-
-    const toLocal = (p: DOMPoint, withRotation: boolean) =>
-      p.matrixTransform(withRotation ? toLocalRotatedM : toLocalM);
-    const toModel = (p: DOMPoint) =>
-      p.matrixTransform(toLocalRotatedM.inverse());
-
-    const handleLocal = toLocal(new DOMPoint(startPt[0], startPt[1]), true);
-    const currPtLocal = toLocal(
-      new DOMPoint(startPt[0] + delta.dx, startPt[1] + delta.dy),
-      true
-    );
-
-    let scaleX = xSign
-      ? (xSign * (currPtLocal.x - handleLocal.x) + orig.w) / orig.w
-      : 1;
-    let scaleY = ySign
-      ? (ySign * (currPtLocal.y - handleLocal.y) + orig.h) / orig.h
-      : 1;
-
-    if (lockRatio) {
-      const min = Math.min(Math.abs(scaleX), Math.abs(scaleY));
-      scaleX = Math.sign(scaleX) * min;
-      scaleY = Math.sign(scaleY) * min;
-    }
-
-    const scaleM = new DOMMatrix().scale(scaleX, scaleY);
+    const { toLocalM, toLocalRotatedM, toLocal, toModel } = transform;
+    const { scaleX, scaleY, scaleM } = scale;
 
     const [visualTopLeft, visualBottomRight] = [
       new DOMPoint(orig.x, orig.y),
@@ -282,45 +381,14 @@ export class ResizeController {
   }
 
   private resizeMulti(
-    originalBound: Bound,
-    originals: ElementInitialSnapshot[],
+    originals: ReadonlyIBound[],
     elements: GfxModel[],
-    startPt: IVec,
-    delta: {
-      dx: number;
-      dy: number;
-    },
-    handleSign: { xSign: number; ySign: number },
+    transform: ReturnType<ResizeController['getCoordsTransform']>,
+    scale: { scaleX: number; scaleY: number; scaleM: DOMMatrix },
     updateCallback: OptionResize['onResizeUpdate']
   ) {
-    const { xSign, ySign } = handleSign;
-    const pivot = new DOMPoint(
-      originalBound.x + ((-xSign + 1) / 2) * originalBound.w,
-      originalBound.y + ((-ySign + 1) / 2) * originalBound.h
-    );
-    const toLocalM = new DOMMatrix().translate(-pivot.x, -pivot.y);
-
-    const toLocal = (p: DOMPoint) => p.matrixTransform(toLocalM);
-
-    const handleLocal = toLocal(new DOMPoint(startPt[0], startPt[1]));
-    const currPtLocal = toLocal(
-      new DOMPoint(startPt[0] + delta.dx, startPt[1] + delta.dy)
-    );
-
-    let scaleX = xSign
-      ? (xSign * (currPtLocal.x - handleLocal.x) + originalBound.w) /
-        originalBound.w
-      : 1;
-    let scaleY = ySign
-      ? (ySign * (currPtLocal.y - handleLocal.y) + originalBound.h) /
-        originalBound.h
-      : 1;
-
-    const min = Math.max(Math.abs(scaleX), Math.abs(scaleY));
-    scaleX = Math.sign(scaleX) * min;
-    scaleY = Math.sign(scaleY) * min;
-
-    const scaleM = new DOMMatrix().scale(scaleX, scaleY);
+    const { toLocalM } = transform;
+    const { scaleX, scaleY, scaleM } = scale;
 
     const data = elements.map((model, i) => {
       const orig = originals[i];
@@ -357,7 +425,7 @@ export class ResizeController {
   startRotate(option: RotateOption) {
     const { event, elements, onRotateUpdate } = option;
 
-    const originals: ElementInitialSnapshot[] = elements.map(el => ({
+    const originals: ReadonlyIBound[] = elements.map(el => ({
       x: el.x,
       y: el.y,
       w: el.w,
@@ -429,7 +497,7 @@ export class ResizeController {
   }
 
   private rotateSingle(option: {
-    orig: ElementInitialSnapshot;
+    orig: ReadonlyIBound;
     model: GfxModel;
     startPt: IVec;
     currentPt: IVec;
@@ -481,7 +549,7 @@ export class ResizeController {
   }
 
   private rotateMulti(option: {
-    origs: ElementInitialSnapshot[];
+    origs: ReadonlyIBound[];
     models: GfxModel[];
     startPt: IVec;
     currentPt: IVec;
@@ -567,23 +635,23 @@ export class ResizeController {
   private getHandleSign(handle: ResizeHandle) {
     switch (handle) {
       case 'top-left':
-        return { xSign: -1, ySign: -1 };
+        return { x: -1, y: -1 };
       case 'top':
-        return { xSign: 0, ySign: -1 };
+        return { x: 0, y: -1 };
       case 'top-right':
-        return { xSign: 1, ySign: -1 };
+        return { x: 1, y: -1 };
       case 'right':
-        return { xSign: 1, ySign: 0 };
+        return { x: 1, y: 0 };
       case 'bottom-right':
-        return { xSign: 1, ySign: 1 };
+        return { x: 1, y: 1 };
       case 'bottom':
-        return { xSign: 0, ySign: 1 };
+        return { x: 0, y: 1 };
       case 'bottom-left':
-        return { xSign: -1, ySign: 1 };
+        return { x: -1, y: 1 };
       case 'left':
-        return { xSign: -1, ySign: 0 };
+        return { x: -1, y: 0 };
       default:
-        return { xSign: 0, ySign: 0 };
+        return { x: 0, y: 0 };
     }
   }
 }

blocksuite/framework/std/src/gfx/interactivity/types/resize.ts

@@ -1,3 +1,5 @@
+import type { IBound, IPoint, IVec } from '@blocksuite/global/gfx';
+
 import type { GfxModel } from '../../model/model';
 import type { ResizeHandle } from '../resize/manager';
 
@@ -8,6 +10,16 @@ export type ExtensionElementResizeContext = {
 export type ExtensionElementResizeStartContext = {
   elements: GfxModel[];
 
+  /**
+   * The position of the handle in the browser coordinate space.
+   */
+  handlePos: IVec;
+
+  /**
+   * The sign (or normal vector) of the handle.
+   */
+  handleSign: IPoint;
+
   handle: ResizeHandle;
 };
 
@@ -16,15 +28,14 @@ export type ExtensionElementResizeEndContext =
 
 export type ExtensionElementResizeMoveContext =
   ExtensionElementResizeStartContext & {
-    dx: number;
-    dy: number;
+    scaleX: number;
+    scaleY: number;
+
+    originalBound: IBound;
+
+    currentHandlePos: IVec;
 
     lockRatio: boolean;
 
-    handleSign: {
-      xSign: number;
-      ySign: number;
-    };
-
-    suggest: (distance: { dx: number; dy: number }) => void;
+    suggest: (distance: { scaleX: number; scaleY: number }) => void;
   };

blocksuite/framework/std/src/gfx/layer.ts

@@ -825,7 +825,7 @@ export class LayerManager extends GfxExtension {
           const block = store.getModelById(payload.id);
 
           if (block instanceof GfxBlockElementModel) {
-            this.delete(block as GfxBlockElementModel);
+            this.delete(block);
           }
         }
       })
@@ -834,20 +834,29 @@ export class LayerManager extends GfxExtension {
     const watchSurface = (surface: SurfaceBlockModel) => {
       let lastChildMap = new Map(surface.childMap.peek());
       this._disposable.add(
-        surface.childMap.subscribe(val => {
-          val.forEach((_, id) => {
+        surface.childMap.subscribe(currentChildMap => {
+          currentChildMap.forEach((_, id) => {
             if (lastChildMap.has(id)) {
               lastChildMap.delete(id);
               return;
             }
           });
           lastChildMap.forEach((_, id) => {
-            const block = this._doc.getBlock(id);
-            if (block?.model) {
-              this.delete(block.model as GfxBlockElementModel);
+            const model = this._doc.getModelById(id);
+            if (model instanceof GfxBlockElementModel) {
+              this.delete(model);
             }
           });
-          lastChildMap = new Map(val);
+          currentChildMap.forEach((_, id) => {
+            const model = store.getModelById(id);
+            if (
+              model instanceof GfxBlockElementModel &&
+              !this.blocks.includes(model)
+            ) {
+              this.add(model);
+            }
+          });
+          lastChildMap = new Map(currentChildMap);
         })
       );
 

blocksuite/framework/store/src/model/block/types.ts

@@ -19,3 +19,5 @@ export type BlockSysProps = {
   children?: BlockModel[];
 };
 export type BlockProps = BlockSysProps & Record<string, unknown>;
+
+export type PropsOfModel<T> = T extends BlockModel<infer P> ? P : never;

blocksuite/framework/store/src/model/store/store.ts

@@ -22,6 +22,8 @@ import {
   type BlockModel,
   type BlockOptions,
   type BlockProps,
+  type BlockSysProps,
+  type PropsOfModel,
   type YBlock,
 } from '../block/index.js';
 import { DocCRUD } from './crud.js';
@@ -852,9 +854,12 @@ export class Store {
    *
    * @category Block CRUD
    */
-  updateBlock(
-    modelOrId: BlockModel | string,
-    callBackOrProps: (() => void) | Partial<BlockProps>
+
+  updateBlock<T extends BlockModel = BlockModel>(
+    modelOrId: T | string,
+    callBackOrProps:
+      | (() => void)
+      | Partial<(PropsOfModel<T> & BlockSysProps) | BlockProps>
   ) {
     if (this.readonly) {
       console.error('cannot modify data in readonly mode');

blocksuite/framework/store/src/transformer/middleware.ts

@@ -113,6 +113,8 @@ type TransformerMiddlewareOptions = {
   transformerConfigs: Map<string, unknown>;
 };
 
+type TransformerMiddlewareCleanup = () => void;
+
 export type TransformerMiddleware = (
   options: TransformerMiddlewareOptions
-) => void;
+) => void | TransformerMiddlewareCleanup;

blocksuite/framework/store/src/transformer/transformer.ts

@@ -1,3 +1,4 @@
+import { DisposableGroup } from '@blocksuite/global/disposable';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
 import { nextTick } from '@blocksuite/global/utils';
 import { Subject } from 'rxjs';
@@ -67,6 +68,8 @@ export class Transformer {
 
   private readonly _docCRUD: DocCRUD;
 
+  private readonly _disposables: DisposableGroup = new DisposableGroup();
+
   private readonly _slots: TransformerSlots = {
     beforeImport: new Subject<BeforeImportPayload>(),
     afterImport: new Subject<AfterImportPayload>(),
@@ -366,13 +369,16 @@ export class Transformer {
     this._docCRUD = docCRUD;
 
     middlewares.forEach(middleware => {
-      middleware({
+      const cleanup = middleware({
         slots: this._slots,
         docCRUD: this._docCRUD,
         assetsManager: this._assetsManager,
         adapterConfigs: this._adapterConfigs,
         transformerConfigs: this._transformerConfigs,
       });
+      if (cleanup) {
+        this._disposables.add(cleanup);
+      }
     });
   }
 
@@ -646,4 +652,9 @@ export class Transformer {
   reset() {
     this._assetsManager.cleanup();
   }
+
+  [Symbol.dispose]() {
+    this._disposables.dispose();
+    this._assetsManager.cleanup();
+  }
 }

blocksuite/framework/sync/src/doc/engine.ts

@@ -132,12 +132,13 @@ export class DocEngine {
         this.logger
       );
 
-      cleanUp.push(
-        state.mainPeer.onStatusChange.subscribe(() => {
-          if (!signal.aborted)
-            this.updateSyncingState(state.mainPeer, state.shadowPeers);
-        }).unsubscribe
-      );
+      const subscriber = state.mainPeer.onStatusChange.subscribe(() => {
+        if (!signal.aborted)
+          this.updateSyncingState(state.mainPeer, state.shadowPeers);
+      });
+      cleanUp.push(() => {
+        subscriber.unsubscribe();
+      });
 
       this.updateSyncingState(state.mainPeer, state.shadowPeers);
 
@@ -152,12 +153,15 @@ export class DocEngine {
           this.priorityTarget,
           this.logger
         );
-        cleanUp.push(
-          peer.onStatusChange.subscribe(() => {
-            if (!signal.aborted)
-              this.updateSyncingState(state.mainPeer, state.shadowPeers);
-          }).unsubscribe
-        );
+
+        const subscriber = peer.onStatusChange.subscribe(() => {
+          if (!signal.aborted)
+            this.updateSyncingState(state.mainPeer, state.shadowPeers);
+        });
+        cleanUp.push(() => {
+          subscriber.unsubscribe();
+        });
+
         return peer;
       });
 

blocksuite/integration-test/src/__tests__/edgeless/brush-dom.spec.ts

@@ -1,268 +0,0 @@
-import { DomRenderer } from '@blocksuite/affine-block-surface';
-import { beforeEach, describe, expect, test } from 'vitest';
-
-import { wait } from '../utils/common.js';
-import { getSurface } from '../utils/edgeless.js';
-import { setupEditor } from '../utils/setup.js';
-
-/**
- * Tests for brush element rendering with DOM renderer.
- * These tests verify that brush elements are correctly rendered as DOM nodes
- * when the DOM renderer is enabled, similar to connector element tests.
- */
-
-describe('Brush rendering with DOM renderer', () => {
-  beforeEach(async () => {
-    const cleanup = await setupEditor('edgeless', [], {
-      enableDomRenderer: true,
-    });
-    return cleanup;
-  });
-
-  test('should use DomRenderer when enable_dom_renderer flag is true', async () => {
-    const surface = getSurface(doc, editor);
-    expect(surface).not.toBeNull();
-    expect(surface?.renderer).toBeInstanceOf(DomRenderer);
-  });
-
-  test('should render a brush element as a DOM node', async () => {
-    const surfaceView = getSurface(window.doc, window.editor);
-    const surfaceModel = surfaceView.model;
-
-    // Create a brush element with points (commands will be auto-generated)
-    const brushProps = {
-      type: 'brush',
-      points: [
-        [10, 10],
-        [50, 50],
-        [100, 20],
-      ],
-      color: '#000000',
-      lineWidth: 2,
-    };
-    const brushId = surfaceModel.addElement(brushProps);
-
-    await wait(100);
-
-    const brushElement = surfaceView?.renderRoot.querySelector(
-      `[data-element-id="${brushId}"]`
-    );
-
-    expect(brushElement).not.toBeNull();
-    expect(brushElement).toBeInstanceOf(HTMLElement);
-
-    // Check if SVG element is present for brush rendering
-    const svgElement = brushElement?.querySelector('svg');
-    expect(svgElement).not.toBeNull();
-
-    // Check if path element is present
-    const pathElement = svgElement?.querySelector('path');
-    expect(pathElement).not.toBeNull();
-    // Commands are auto-generated from points, so just check it exists
-    expect(pathElement?.getAttribute('d')).toBeTruthy();
-  });
-
-  test('should render brush with different colors', async () => {
-    const surfaceView = getSurface(window.doc, window.editor);
-    const surfaceModel = surfaceView.model;
-
-    // Create a red brush element
-    const brushProps = {
-      type: 'brush',
-      points: [
-        [20, 20],
-        [35, 15],
-        [50, 25],
-        [65, 45],
-        [80, 80],
-      ],
-      color: '#ff0000',
-      lineWidth: 3,
-    };
-    const brushId = surfaceModel.addElement(brushProps);
-
-    await wait(100);
-
-    const brushElement = surfaceView?.renderRoot.querySelector(
-      `[data-element-id="${brushId}"]`
-    );
-
-    expect(brushElement).not.toBeNull();
-
-    const svgElement = brushElement?.querySelector('svg');
-    expect(svgElement).not.toBeNull();
-
-    const pathElement = svgElement?.querySelector('path');
-    expect(pathElement).not.toBeNull();
-
-    // Check if color is applied (the actual color value might be processed)
-    const fillColor = pathElement?.getAttribute('fill');
-    expect(fillColor).toBeTruthy();
-  });
-
-  test('should render brush with opacity', async () => {
-    const surfaceView = getSurface(window.doc, window.editor);
-    const surfaceModel = surfaceView.model;
-
-    const brushProps = {
-      type: 'brush',
-      points: [
-        [10, 10],
-        [50, 50],
-        [90, 90],
-      ],
-      color: '#0000ff',
-      lineWidth: 2,
-    };
-    const brushId = surfaceModel.addElement(brushProps);
-
-    // Set opacity after creation through model update
-    const brushModel = surfaceModel.getElementById(brushId);
-    if (brushModel) {
-      surfaceModel.updateElement(brushId, { opacity: 0.5 });
-    }
-
-    await wait(100);
-
-    const brushElement = surfaceView?.renderRoot.querySelector(
-      `[data-element-id="${brushId}"]`
-    );
-
-    expect(brushElement).not.toBeNull();
-
-    // Check opacity style
-    const opacity = (brushElement as HTMLElement)?.style.opacity;
-    expect(opacity).toBe('0.5');
-  });
-
-  test('should render brush with rotation', async () => {
-    const surfaceView = getSurface(window.doc, window.editor);
-    const surfaceModel = surfaceView.model;
-
-    const brushProps = {
-      type: 'brush',
-      points: [
-        [25, 25],
-        [50, 50],
-        [75, 75],
-      ],
-      color: '#00ff00',
-      lineWidth: 2,
-      rotate: 45,
-    };
-    const brushId = surfaceModel.addElement(brushProps);
-
-    await wait(100);
-
-    const brushElement = surfaceView?.renderRoot.querySelector(
-      `[data-element-id="${brushId}"]`
-    );
-
-    expect(brushElement).not.toBeNull();
-
-    // Check rotation transform
-    const transform = (brushElement as HTMLElement)?.style.transform;
-    expect(transform).toContain('rotate(45deg)');
-
-    const transformOrigin = (brushElement as HTMLElement)?.style
-      .transformOrigin;
-    expect(transformOrigin).toBe('center center');
-  });
-
-  test('should have proper SVG viewport and sizing', async () => {
-    const surfaceView = getSurface(window.doc, window.editor);
-    const surfaceModel = surfaceView.model;
-
-    const brushProps = {
-      type: 'brush',
-      points: [
-        [0, 0],
-        [60, 40],
-        [120, 80],
-      ],
-      color: '#333333',
-      lineWidth: 2,
-    };
-    const brushId = surfaceModel.addElement(brushProps);
-
-    await wait(100);
-
-    const brushElement = surfaceView?.renderRoot.querySelector(
-      `[data-element-id="${brushId}"]`
-    );
-
-    expect(brushElement).not.toBeNull();
-
-    const svgElement = brushElement?.querySelector('svg');
-    expect(svgElement).not.toBeNull();
-
-    // Check SVG attributes
-    expect(svgElement?.getAttribute('width')).toBe('100%');
-    expect(svgElement?.getAttribute('height')).toBe('100%');
-    expect(svgElement?.getAttribute('viewBox')).toBeTruthy();
-    expect(svgElement?.getAttribute('preserveAspectRatio')).toBe('none');
-  });
-
-  test('should add brush-specific CSS class', async () => {
-    const surfaceView = getSurface(window.doc, window.editor);
-    const surfaceModel = surfaceView.model;
-
-    const brushProps = {
-      type: 'brush',
-      points: [
-        [10, 10],
-        [25, 25],
-        [40, 40],
-      ],
-      color: '#666666',
-      lineWidth: 2,
-    };
-    const brushId = surfaceModel.addElement(brushProps);
-
-    await wait(100);
-
-    const brushElement = surfaceView?.renderRoot.querySelector(
-      `[data-element-id="${brushId}"]`
-    );
-
-    expect(brushElement).not.toBeNull();
-    expect(brushElement?.classList.contains('brush-element')).toBe(true);
-  });
-
-  test('should remove brush DOM node when element is deleted', async () => {
-    const surfaceView = getSurface(window.doc, window.editor);
-    const surfaceModel = surfaceView.model;
-
-    expect(surfaceView.renderer).toBeInstanceOf(DomRenderer);
-
-    const brushProps = {
-      type: 'brush',
-      points: [
-        [25, 25],
-        [75, 25],
-        [75, 75],
-        [25, 75],
-        [25, 25],
-      ],
-      color: '#aa00aa',
-      lineWidth: 2,
-    };
-    const brushId = surfaceModel.addElement(brushProps);
-
-    await wait(100);
-
-    let brushElement = surfaceView.renderRoot.querySelector(
-      `[data-element-id="${brushId}"]`
-    );
-    expect(brushElement).not.toBeNull();
-
-    surfaceModel.deleteElement(brushId);
-
-    await wait(100);
-
-    brushElement = surfaceView.renderRoot.querySelector(
-      `[data-element-id="${brushId}"]`
-    );
-    expect(brushElement).toBeNull();
-  });
-});

blocksuite/integration-test/src/__tests__/edgeless/connector-dom.spec.ts

@@ -1,158 +0,0 @@
-import { DomRenderer } from '@blocksuite/affine-block-surface';
-import { beforeEach, describe, expect, test } from 'vitest';
-
-import { wait } from '../utils/common.js';
-import { getSurface } from '../utils/edgeless.js';
-import { setupEditor } from '../utils/setup.js';
-
-describe('Connector rendering with DOM renderer', () => {
-  beforeEach(async () => {
-    const cleanup = await setupEditor('edgeless', [], {
-      enableDomRenderer: true,
-    });
-    return cleanup;
-  });
-
-  test('should use DomRenderer when enable_dom_renderer flag is true', async () => {
-    const surface = getSurface(doc, editor);
-    expect(surface).not.toBeNull();
-    expect(surface?.renderer).toBeInstanceOf(DomRenderer);
-  });
-
-  test('should render a connector element as a DOM node', async () => {
-    const surfaceView = getSurface(window.doc, window.editor);
-    const surfaceModel = surfaceView.model;
-
-    // Create two shapes to connect
-    const shape1Id = surfaceModel.addElement({
-      type: 'shape',
-      xywh: '[100, 100, 80, 60]',
-    });
-
-    const shape2Id = surfaceModel.addElement({
-      type: 'shape',
-      xywh: '[300, 200, 80, 60]',
-    });
-
-    // Create a connector between the shapes
-    const connectorProps = {
-      type: 'connector',
-      source: { id: shape1Id },
-      target: { id: shape2Id },
-      stroke: '#000000',
-      strokeWidth: 2,
-    };
-    const connectorId = surfaceModel.addElement(connectorProps);
-
-    await wait(100);
-
-    const connectorElement = surfaceView?.renderRoot.querySelector(
-      `[data-element-id="${connectorId}"]`
-    );
-
-    expect(connectorElement).not.toBeNull();
-    expect(connectorElement).toBeInstanceOf(HTMLElement);
-
-    // Check if SVG element is present for connector rendering
-    const svgElement = connectorElement?.querySelector('svg');
-    expect(svgElement).not.toBeNull();
-  });
-
-  test('should render connector with different stroke styles', async () => {
-    const surfaceView = getSurface(window.doc, window.editor);
-    const surfaceModel = surfaceView.model;
-
-    // Create a dashed connector
-    const connectorProps = {
-      type: 'connector',
-      source: { position: [100, 100] },
-      target: { position: [200, 200] },
-      strokeStyle: 'dash',
-      stroke: '#ff0000',
-      strokeWidth: 4,
-    };
-    const connectorId = surfaceModel.addElement(connectorProps);
-
-    // Wait for path generation and rendering
-    await wait(500);
-
-    const connectorElement = surfaceView?.renderRoot.querySelector(
-      `[data-element-id="${connectorId}"]`
-    );
-
-    expect(connectorElement).not.toBeNull();
-
-    const svgElement = connectorElement?.querySelector('svg');
-    expect(svgElement).not.toBeNull();
-
-    // Find the main path element (not the ones inside markers)
-    const pathElements = svgElement?.querySelectorAll('path');
-    // The main connector path should be the last one (after marker paths)
-    const pathElement = pathElements?.[pathElements.length - 1];
-
-    expect(pathElement).not.toBeNull();
-
-    // Check stroke-dasharray attribute
-    const strokeDasharray = pathElement!.getAttribute('stroke-dasharray');
-    expect(strokeDasharray).toBe('12,12');
-  });
-
-  test('should render connector with arrow endpoints', async () => {
-    const surfaceView = getSurface(window.doc, window.editor);
-    const surfaceModel = surfaceView.model;
-
-    const connectorProps = {
-      type: 'connector',
-      source: { position: [100, 100] },
-      target: { position: [200, 200] },
-      frontEndpointStyle: 'Triangle',
-      rearEndpointStyle: 'Arrow',
-    };
-    const connectorId = surfaceModel.addElement(connectorProps);
-
-    await wait(100);
-
-    const connectorElement = surfaceView?.renderRoot.querySelector(
-      `[data-element-id="${connectorId}"]`
-    );
-
-    expect(connectorElement).not.toBeNull();
-
-    // Check for markers in defs
-    const defsElement = connectorElement?.querySelector('defs');
-    expect(defsElement).not.toBeNull();
-
-    const markers = defsElement?.querySelectorAll('marker');
-    expect(markers?.length).toBeGreaterThan(0);
-  });
-
-  test('should remove connector DOM node when element is deleted', async () => {
-    const surfaceView = getSurface(window.doc, window.editor);
-    const surfaceModel = surfaceView.model;
-
-    expect(surfaceView.renderer).toBeInstanceOf(DomRenderer);
-
-    const connectorProps = {
-      type: 'connector',
-      source: { position: [50, 50] },
-      target: { position: [150, 150] },
-    };
-    const connectorId = surfaceModel.addElement(connectorProps);
-
-    await wait(100);
-
-    let connectorElement = surfaceView.renderRoot.querySelector(
-      `[data-element-id="${connectorId}"]`
-    );
-    expect(connectorElement).not.toBeNull();
-
-    surfaceModel.deleteElement(connectorId);
-
-    await wait(100);
-
-    connectorElement = surfaceView.renderRoot.querySelector(
-      `[data-element-id="${connectorId}"]`
-    );
-    expect(connectorElement).toBeNull();
-  });
-});

blocksuite/integration-test/src/__tests__/edgeless/frame.spec.ts

@@ -31,12 +31,15 @@ describe('frame', () => {
     );
     await wait();
 
-    const frameTitleWidget = service.std.view.getWidget(
-      'affine-frame-title-widget',
-      doc.root!.id
-    ) as AffineFrameTitleWidget | null;
+    const getFrameTitle = (frameId: string) => {
+      const frameTitleWidget = service.std.view.getWidget(
+        'affine-frame-title-widget',
+        frameId
+      ) as AffineFrameTitleWidget | null;
+      return frameTitleWidget?.shadowRoot?.querySelector('affine-frame-title');
+    };
 
-    const frameTitle = frameTitleWidget?.getFrameTitle(frame);
+    const frameTitle = getFrameTitle(frame);
     const rect = frameTitle?.getBoundingClientRect();
 
     expect(frameTitle).toBeTruthy();
@@ -58,7 +61,7 @@ describe('frame', () => {
     );
     await wait();
 
-    const nestedTitle = frameTitleWidget?.getFrameTitle(nestedFrame);
+    const nestedTitle = getFrameTitle(nestedFrame);
     expect(nestedTitle).toBeTruthy();
     if (!nestedTitle) return;
 

blocksuite/integration-test/src/__tests__/edgeless/surface-ref.spec.ts

@@ -40,6 +40,7 @@ describe('basic', () => {
       xywh: '[100, 0, 100, 100]',
       index: service.generateIndex(),
     })!;
+    await wait(0); // wait next frame
     frameId = service.crud.addBlock(
       'affine:frame',
       {

blocksuite/playground/apps/starter/data/preset.ts

@@ -7,30 +7,40 @@ import type { InitFn } from './utils.js';
 const presetMarkdown = `Click the 🔁 button to switch between editors dynamically - they are fully compatible!`;
 
 export const preset: InitFn = async (collection: Workspace, id: string) => {
-  const doc = collection.createDoc(id).getStore({ id });
-  doc.load();
-  // Add root block and surface block at root level
-  const rootId = doc.addBlock('affine:page', {
-    title: new Text('BlockSuite Playground'),
-  });
-  doc.addBlock('affine:surface', {}, rootId);
+  let doc = collection.getDoc(id);
+  const hasDoc = !!doc;
+  if (!doc) {
+    doc = collection.createDoc(id);
+  }
 
-  // Add note block inside root block
-  const noteId = doc.addBlock(
-    'affine:note',
-    { xywh: '[0, 100, 800, 640]' },
-    rootId
-  );
+  const store = doc.getStore({ id });
+  store.load();
 
-  // Import preset markdown content inside note block
-  await MarkdownTransformer.importMarkdownToBlock({
-    doc,
-    blockId: noteId,
-    markdown: presetMarkdown,
-    extensions: getTestStoreManager().get('store'),
-  });
+  // Run only once on all clients.
+  let noteId: string;
+  if (!hasDoc) {
+    // Add root block and surface block at root level
+    const rootId = store.addBlock('affine:page', {
+      title: new Text('BlockSuite Playground'),
+    });
+    store.addBlock('affine:surface', {}, rootId);
 
-  doc.resetHistory();
+    // Add note block inside root block
+    noteId = store.addBlock(
+      'affine:note',
+      { xywh: '[0, 100, 800, 640]' },
+      rootId
+    );
+    // Import preset markdown content inside note block
+    await MarkdownTransformer.importMarkdownToBlock({
+      doc: store,
+      blockId: noteId,
+      markdown: presetMarkdown,
+      extensions: getTestStoreManager().get('store'),
+    });
+  }
+
+  store.resetHistory();
 };
 
 preset.id = 'preset';

blocksuite/playground/package.json

@@ -24,6 +24,7 @@
     "@types/katex": "^0.16.7",
     "browser-fs-access": "^0.37.0",
     "jszip": "^3.10.1",
+    "katex": "^0.16.11",
     "lit": "^3.2.0",
     "lz-string": "^1.5.0",
     "rxjs": "^7.8.1",

blocksuite/playground/style.css

@@ -1,6 +1,8 @@
 @import '@toeverything/theme/style.css';
 @import '@toeverything/theme/fonts.css';
 
+@import 'katex/dist/katex.min.css';
+
 @font-face {
   font-family: 'color-emoji';
   src:

package.json

@@ -68,7 +68,7 @@
     "@vitest/coverage-istanbul": "3.1.3",
     "@vitest/ui": "3.1.3",
     "cross-env": "^7.0.3",
-    "electron": "^36.0.0",
+    "electron": "^35.0.0",
     "eslint": "^9.16.0",
     "eslint-config-prettier": "^10.0.0",
     "eslint-import-resolver-typescript": "^4.0.0",