chore(server): ignore never applied rolled back error (#12703)

closes #12701

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

## Summary by CodeRabbit

- **Bug Fixes**
  - Improved error handling during migration rollbacks to prevent unnecessary errors when migrations were never applied.

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

.github/workflows/build-test.yml

@@ -151,7 +151,8 @@ jobs:
       - name: Clippy
         run: |
           rustup component add clippy
-          cargo clippy --all-targets --all-features -- -D warnings
+          cargo clippy --workspace --exclude affine_server_native --all-targets --all-features -- -D warnings
+          cargo clippy -p affine_server_native --all-targets --all-features -- -D warnings
 
   check-git-status:
     name: Check Git Status
@@ -923,7 +924,7 @@ jobs:
         uses: taiki-e/install-action@nextest
 
       - name: Run tests
-        run: cargo nextest run --release --no-fail-fast
+        run: cargo nextest run --workspace --exclude affine_server_native --features use-as-lib --release --no-fail-fast
 
   copilot-api-test:
     name: Server Copilot Api Test

.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/package.json

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

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

@@ -64,6 +64,11 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
     return this.resourceController.blobUrl$.value;
   }
 
+  get filetype() {
+    const name = this.model.props.name$.value;
+    return name.split('.').pop() ?? '';
+  }
+
   protected containerStyleMap = styleMap({
     position: 'relative',
     width: '100%',
@@ -212,13 +217,23 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
     );
   };
 
-  protected renderReloadButton = () => {
+  protected renderNormalButton = (needUpload: boolean) => {
+    const label = needUpload ? 'retry' : 'reload';
+    const run = async () => {
+      if (needUpload) {
+        await this.resourceController.upload();
+        return;
+      }
+
+      this.refreshData();
+    };
+
     return html`
       <button
         class="affine-attachment-content-button"
         @click=${(event: MouseEvent) => {
           event.stopPropagation();
-          this.refreshData();
+          run().catch(console.error);
 
           {
             const mode =
@@ -230,21 +245,28 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
                 segment,
                 page: `${segment} editor`,
                 module: 'attachment',
-                control: 'reload',
+                control: label,
                 category: 'card',
-                type: this.model.props.name.split('.').pop() ?? '',
+                type: this.filetype,
               });
           }
         }}
       >
-        ${ResetIcon()} Reload
+        ${ResetIcon()} ${label}
       </button>
     `;
   };
 
   protected renderWithHorizontal(
     classInfo: ClassInfo,
-    { icon, title, description, kind, state }: AttachmentResolvedStateInfo
+    {
+      icon,
+      title,
+      description,
+      kind,
+      state,
+      needUpload,
+    }: AttachmentResolvedStateInfo
   ) {
     return html`
       <div class=${classMap(classInfo)}>
@@ -261,7 +283,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
               ${description}
             </div>
             ${choose(state, [
-              ['error', this.renderReloadButton],
+              ['error', () => this.renderNormalButton(needUpload)],
               ['error:oversize', this.renderUpgradeButton],
             ])}
           </div>
@@ -274,7 +296,14 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
 
   protected renderWithVertical(
     classInfo: ClassInfo,
-    { icon, title, description, kind, state }: AttachmentResolvedStateInfo
+    {
+      icon,
+      title,
+      description,
+      kind,
+      state,
+      needUpload,
+    }: AttachmentResolvedStateInfo
   ) {
     return html`
       <div class=${classMap(classInfo)}>
@@ -294,7 +323,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
         <div class="affine-attachment-banner">
           ${kind}
           ${choose(state, [
-            ['error', this.renderReloadButton],
+            ['error', () => this.renderNormalButton(needUpload)],
             ['error:oversize', this.renderUpgradeButton],
           ])}
         </div>
@@ -305,7 +334,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
   protected resolvedState$ = computed<AttachmentResolvedStateInfo>(() => {
     const size = this.model.props.size;
     const name = this.model.props.name$.value;
-    const kind = getAttachmentFileIcon(name.split('.').pop() ?? '');
+    const kind = getAttachmentFileIcon(this.filetype);
 
     const resolvedState = this.resourceController.resolveStateWith({
       loadingIcon: LoadingIcon(),
@@ -359,11 +388,16 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
         const message = resolvedState.description;
         if (!message) return null;
 
+        const needUpload = resolvedState.needUpload;
+        const action = () =>
+          needUpload ? this.resourceController.upload() : this.reload();
+
         return html`
           <affine-resource-status
             class="affine-attachment-embed-status"
             .message=${message}
-            .reload=${() => this.reload()}
+            .needUpload=${needUpload}
+            .action=${action}
           ></affine-resource-status>
         `;
       })}
@@ -372,10 +406,10 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
 
   private readonly _renderCitation = () => {
     const { name, footnoteIdentifier } = this.model.props;
-    const fileType = name.split('.').pop() ?? '';
-    const fileTypeIcon = getAttachmentFileIcon(fileType);
+    const icon = getAttachmentFileIcon(this.filetype);
+
     return html`<affine-citation-card
-      .icon=${fileTypeIcon}
+      .icon=${icon}
       .citationTitle=${name}
       .citationIdentifier=${footnoteIdentifier}
       .active=${this.selected$.value}

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

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

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

@@ -91,6 +91,7 @@ export const styles = css`
     font-size: var(--affine-font-xs);
     font-style: normal;
     font-weight: 500;
+    text-transform: capitalize;
     line-height: 20px;
 
     svg {

blocksuite/affine/blocks/bookmark/package.json

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

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

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

blocksuite/affine/blocks/callout/package.json

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

blocksuite/affine/blocks/code/package.json

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

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

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

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

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

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

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

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

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

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

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

blocksuite/affine/blocks/database/package.json

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

blocksuite/affine/blocks/divider/package.json

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

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

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

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

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

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

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

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

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

blocksuite/affine/blocks/embed/package.json

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

blocksuite/affine/blocks/embed/src/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/package.json

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

blocksuite/affine/blocks/frame/src/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/image/package.json

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

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

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

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

@@ -135,6 +135,7 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
     const resovledState = this.resourceController.resolveStateWith({
       loadingIcon: LoadingIcon({
         strokeColor: cssVarV2('button/pureWhiteText'),
+        ringColor: cssVarV2('loading/imageLoadingLayer', '#ffffff8f'),
       }),
       errorIcon: BrokenImageIcon(),
       icon: ImageIcon(),

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

@@ -42,7 +42,10 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
       height: 36px;
       padding: 5px;
       border-radius: 8px;
-      background: ${unsafeCSSVarV2('loading/backgroundLayer')};
+      background: ${unsafeCSSVarV2(
+        'loading/imageLoadingBackground',
+        '#92929238'
+      )};
 
       & > svg {
         font-size: 25.71px;
@@ -126,6 +129,7 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
     const resovledState = this.resourceController.resolveStateWith({
       loadingIcon: LoadingIcon({
         strokeColor: cssVarV2('button/pureWhiteText'),
+        ringColor: cssVarV2('loading/imageLoadingLayer', '#ffffff8f'),
       }),
       errorIcon: BrokenImageIcon(),
       icon: ImageIcon(),
@@ -133,6 +137,8 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
       description: formatSize(size),
     });
 
+    const { loading, icon, description, error, needUpload } = resovledState;
+
     return html`
       <div class="affine-image-container" style=${containerStyleMap}>
         ${when(
@@ -148,17 +154,18 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
                 @error=${this._handleError}
               />
             </div>
+            ${when(loading, () => html`<div class="loading">${icon}</div>`)}
             ${when(
-              resovledState.loading,
-              () => html`<div class="loading">${resovledState.icon}</div>`
-            )}
-            ${when(
-              resovledState.error && resovledState.description,
+              Boolean(error && description),
               () =>
                 html`<affine-resource-status
                   class="affine-image-status"
-                  .message=${resovledState.description}
-                  .reload=${() => this.refreshData()}
+                  .message=${description}
+                  .needUpload=${needUpload}
+                  .action=${() =>
+                    needUpload
+                      ? this.resourceController.upload()
+                      : this.refreshData()}
                 ></affine-resource-status>`
             )}
           `,

blocksuite/affine/blocks/latex/package.json

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

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

@@ -58,7 +58,6 @@ export class LatexBlockComponent extends CaptionedBlockComponent<LatexBlockModel
           try {
             katex.render(latex, katexContainer, {
               displayMode: true,
-              output: 'mathml',
             });
           } catch {
             katexContainer.replaceChildren();

blocksuite/affine/blocks/list/package.json

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

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

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

blocksuite/affine/blocks/note/package.json

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

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

@@ -400,7 +400,7 @@ export const EdgelessNoteInteraction =
 
           onResizeMove(context): void {
             const { originalBound, newBound, lockRatio, constraint } = context;
-            const { minWidth, minHeight } = constraint;
+            const { minWidth, minHeight, maxHeight, maxWidth } = constraint;
 
             let scale = initialScale;
             let edgelessProp = { ...model.props.edgeless };
@@ -411,8 +411,8 @@ export const EdgelessNoteInteraction =
               edgelessProp.scale = scale;
             }
 
-            newBound.w = clamp(newBound.w, minWidth, Number.MAX_SAFE_INTEGER);
-            newBound.h = clamp(newBound.h, minHeight, Number.MAX_SAFE_INTEGER);
+            newBound.w = clamp(newBound.w, minWidth * scale, maxWidth);
+            newBound.h = clamp(newBound.h, minHeight * scale, maxHeight);
 
             if (newBound.h > minHeight * scale) {
               edgelessProp.collapse = true;

blocksuite/affine/blocks/paragraph/package.json

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

blocksuite/affine/blocks/root/package.json

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

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

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

blocksuite/affine/blocks/root/src/edgeless/edgeless-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-ref/package.json

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

blocksuite/affine/blocks/surface/package.json

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

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

@@ -43,6 +43,25 @@ type RendererOptions = {
   surfaceModel: SurfaceBlockModel;
 };
 
+const UpdateType = {
+  ELEMENT_ADDED: 'element-added',
+  ELEMENT_REMOVED: 'element-removed',
+  ELEMENT_UPDATED: 'element-updated',
+  VIEWPORT_CHANGED: 'viewport-changed',
+  SIZE_CHANGED: 'size-changed',
+  ZOOM_STATE_CHANGED: 'zoom-state-changed',
+} as const;
+
+type UpdateType = (typeof UpdateType)[keyof typeof UpdateType];
+
+interface IncrementalUpdateState {
+  dirtyElementIds: Set<string>;
+  viewportDirty: boolean;
+  sizeDirty: boolean;
+  usePlaceholderDirty: boolean;
+  pendingUpdates: Map<string, UpdateType[]>;
+}
+
 const PLACEHOLDER_RESET_STYLES = {
   border: 'none',
   borderRadius: '0',
@@ -141,6 +160,18 @@ export class DomRenderer {
 
   private _sizeUpdatedRafId: number | null = null;
 
+  private readonly _updateState: IncrementalUpdateState = {
+    dirtyElementIds: new Set(),
+    viewportDirty: false,
+    sizeDirty: false,
+    usePlaceholderDirty: false,
+    pendingUpdates: new Map(),
+  };
+
+  private _lastViewportBounds: Bound | null = null;
+  private _lastZoom: number | null = null;
+  private _lastUsePlaceholder: boolean = false;
+
   rootElement: HTMLElement;
 
   private readonly _elementsMap = new Map<string, HTMLElement>();
@@ -186,6 +217,7 @@ export class DomRenderer {
   private _initViewport() {
     this._disposables.add(
       this.viewport.viewportUpdated.subscribe(() => {
+        this._markViewportDirty();
         this.refresh();
       })
     );
@@ -195,6 +227,7 @@ export class DomRenderer {
         if (this._sizeUpdatedRafId) return;
         this._sizeUpdatedRafId = requestConnectedFrame(() => {
           this._sizeUpdatedRafId = null;
+          this._markSizeDirty();
           this._resetSize();
           this._render();
           this.refresh();
@@ -208,6 +241,7 @@ export class DomRenderer {
 
         if (this.usePlaceholder !== shouldRenderPlaceholders) {
           this.usePlaceholder = shouldRenderPlaceholders;
+          this._markUsePlaceholderDirty();
           this.refresh();
         }
       })
@@ -307,6 +341,292 @@ export class DomRenderer {
   }
 
   private _render() {
+    this._renderIncremental();
+  }
+
+  private _watchSurface(surfaceModel: SurfaceBlockModel) {
+    this._disposables.add(
+      surfaceModel.elementAdded.subscribe(payload => {
+        this._markElementDirty(payload.id, UpdateType.ELEMENT_ADDED);
+        this.refresh();
+      })
+    );
+    this._disposables.add(
+      surfaceModel.elementRemoved.subscribe(payload => {
+        this._markElementDirty(payload.id, UpdateType.ELEMENT_REMOVED);
+        this.refresh();
+      })
+    );
+    this._disposables.add(
+      surfaceModel.localElementAdded.subscribe(payload => {
+        this._markElementDirty(payload.id, UpdateType.ELEMENT_ADDED);
+        this.refresh();
+      })
+    );
+    this._disposables.add(
+      surfaceModel.localElementDeleted.subscribe(payload => {
+        this._markElementDirty(payload.id, UpdateType.ELEMENT_REMOVED);
+        this.refresh();
+      })
+    );
+    this._disposables.add(
+      surfaceModel.localElementUpdated.subscribe(payload => {
+        this._markElementDirty(payload.model.id, UpdateType.ELEMENT_UPDATED);
+        this.refresh();
+      })
+    );
+
+    this._disposables.add(
+      surfaceModel.elementUpdated.subscribe(payload => {
+        // ignore externalXYWH update cause it's updated by the renderer
+        if (payload.props['externalXYWH']) return;
+        this._markElementDirty(payload.id, UpdateType.ELEMENT_UPDATED);
+        this.refresh();
+      })
+    );
+  }
+
+  addOverlay = (overlay: Overlay) => {
+    overlay.setRenderer(null);
+    this._overlays.add(overlay);
+    this.refresh();
+  };
+
+  attach = (container: HTMLElement) => {
+    this._container = container;
+    container.append(this.rootElement);
+
+    this._resetSize();
+    this.refresh();
+  };
+
+  dispose = () => {
+    this._overlays.forEach(overlay => overlay.dispose());
+    this._overlays.clear();
+    this._disposables.dispose();
+
+    if (this._refreshRafId) {
+      cancelAnimationFrame(this._refreshRafId);
+      this._refreshRafId = null;
+    }
+    if (this._sizeUpdatedRafId) {
+      cancelAnimationFrame(this._sizeUpdatedRafId);
+      this._sizeUpdatedRafId = null;
+    }
+
+    this.rootElement.remove();
+    this._elementsMap.clear();
+  };
+
+  generateColorProperty = (color: Color, fallback?: Color) => {
+    return (
+      this.provider.generateColorProperty?.(color, fallback) ?? 'transparent'
+    );
+  };
+
+  getColorScheme = () => {
+    return this.provider.getColorScheme?.() ?? ColorScheme.Light;
+  };
+
+  getColorValue = (color: Color, fallback?: Color, real?: boolean) => {
+    return (
+      this.provider.getColorValue?.(color, fallback, real) ?? 'transparent'
+    );
+  };
+
+  getPropertyValue = (property: string) => {
+    return this.provider.getPropertyValue?.(property) ?? '';
+  };
+
+  refresh = () => {
+    if (this._refreshRafId !== null) return;
+
+    this._refreshRafId = requestConnectedFrame(() => {
+      this._refreshRafId = null;
+      this._render();
+    }, this._container);
+  };
+
+  removeOverlay = (overlay: Overlay) => {
+    if (!this._overlays.has(overlay)) {
+      return;
+    }
+
+    this._overlays.delete(overlay);
+    this.refresh();
+  };
+
+  /**
+   * Mark a specific element as dirty for incremental updates
+   * @param elementId - The ID of the element to mark as dirty
+   * @param updateType - The type of update (optional, defaults to ELEMENT_UPDATED)
+   */
+  markElementDirty = (
+    elementId: string,
+    updateType: UpdateType = UpdateType.ELEMENT_UPDATED
+  ) => {
+    this._markElementDirty(elementId, updateType);
+  };
+
+  /**
+   * Force a full re-render of all elements
+   */
+  forceFullRender = () => {
+    this._updateState.viewportDirty = true;
+    this.refresh();
+  };
+
+  private _markElementDirty(elementId: string, updateType: UpdateType) {
+    this._updateState.dirtyElementIds.add(elementId);
+    const currentUpdates =
+      this._updateState.pendingUpdates.get(elementId) || [];
+    if (!currentUpdates.includes(updateType)) {
+      currentUpdates.push(updateType);
+      this._updateState.pendingUpdates.set(elementId, currentUpdates);
+    }
+  }
+
+  private _markViewportDirty() {
+    this._updateState.viewportDirty = true;
+  }
+
+  private _markSizeDirty() {
+    this._updateState.sizeDirty = true;
+  }
+
+  private _markUsePlaceholderDirty() {
+    this._updateState.usePlaceholderDirty = true;
+  }
+
+  private _clearUpdateState() {
+    this._updateState.dirtyElementIds.clear();
+    this._updateState.viewportDirty = false;
+    this._updateState.sizeDirty = false;
+    this._updateState.usePlaceholderDirty = false;
+    this._updateState.pendingUpdates.clear();
+  }
+
+  private _isViewportChanged(): boolean {
+    const { viewportBounds, zoom } = this.viewport;
+
+    if (!this._lastViewportBounds || !this._lastZoom) {
+      return true;
+    }
+
+    return (
+      this._lastViewportBounds.x !== viewportBounds.x ||
+      this._lastViewportBounds.y !== viewportBounds.y ||
+      this._lastViewportBounds.w !== viewportBounds.w ||
+      this._lastViewportBounds.h !== viewportBounds.h ||
+      this._lastZoom !== zoom
+    );
+  }
+
+  private _isUsePlaceholderChanged(): boolean {
+    return this._lastUsePlaceholder !== this.usePlaceholder;
+  }
+
+  private _updateLastState() {
+    const { viewportBounds, zoom } = this.viewport;
+    this._lastViewportBounds = {
+      x: viewportBounds.x,
+      y: viewportBounds.y,
+      w: viewportBounds.w,
+      h: viewportBounds.h,
+    } as Bound;
+    this._lastZoom = zoom;
+    this._lastUsePlaceholder = this.usePlaceholder;
+  }
+
+  private _renderIncremental() {
+    const { viewportBounds, zoom } = this.viewport;
+    const addedElements: HTMLElement[] = [];
+    const elementsToRemove: HTMLElement[] = [];
+
+    const needsFullRender =
+      this._isViewportChanged() ||
+      this._isUsePlaceholderChanged() ||
+      this._updateState.sizeDirty ||
+      this._updateState.viewportDirty ||
+      this._updateState.usePlaceholderDirty;
+
+    if (needsFullRender) {
+      this._renderFull();
+      this._updateLastState();
+      this._clearUpdateState();
+      return;
+    }
+
+    // Only update dirty elements
+    const elementsFromGrid = this.grid.search(viewportBounds, {
+      filter: ['canvas', 'local'],
+    }) as SurfaceElementModel[];
+
+    const visibleElementIds = new Set<string>();
+
+    // 1. Update dirty elements
+    for (const elementModel of elementsFromGrid) {
+      const display = (elementModel.display ?? true) && !elementModel.hidden;
+      if (
+        display &&
+        intersects(getBoundWithRotation(elementModel), viewportBounds)
+      ) {
+        visibleElementIds.add(elementModel.id);
+
+        // Only update dirty elements
+        if (this._updateState.dirtyElementIds.has(elementModel.id)) {
+          if (
+            this.usePlaceholder &&
+            !(elementModel as GfxCompatibleInterface).forceFullRender
+          ) {
+            this._renderOrUpdatePlaceholder(
+              elementModel,
+              viewportBounds,
+              zoom,
+              addedElements
+            );
+          } else {
+            this._renderOrUpdateFullElement(
+              elementModel,
+              viewportBounds,
+              zoom,
+              addedElements
+            );
+          }
+        }
+      }
+    }
+
+    // 2. Remove elements that are no longer in the grid
+    for (const elementId of this._updateState.dirtyElementIds) {
+      const updateTypes = this._updateState.pendingUpdates.get(elementId) || [];
+      if (
+        updateTypes.includes(UpdateType.ELEMENT_REMOVED) ||
+        !visibleElementIds.has(elementId)
+      ) {
+        const domElem = this._elementsMap.get(elementId);
+        if (domElem) {
+          domElem.remove();
+          this._elementsMap.delete(elementId);
+          elementsToRemove.push(domElem);
+        }
+      }
+    }
+
+    // 3. Notify changes
+    if (addedElements.length > 0 || elementsToRemove.length > 0) {
+      this.elementsUpdated.next({
+        elements: Array.from(this._elementsMap.values()),
+        added: addedElements,
+        removed: elementsToRemove,
+      });
+    }
+
+    this._updateLastState();
+    this._clearUpdateState();
+  }
+
+  private _renderFull() {
     const { viewportBounds, zoom } = this.viewport;
     const addedElements: HTMLElement[] = [];
     const elementsToRemove: HTMLElement[] = [];
@@ -387,100 +707,4 @@ export class DomRenderer {
       });
     }
   }
-
-  private _watchSurface(surfaceModel: SurfaceBlockModel) {
-    this._disposables.add(
-      surfaceModel.elementAdded.subscribe(() => this.refresh())
-    );
-    this._disposables.add(
-      surfaceModel.elementRemoved.subscribe(() => this.refresh())
-    );
-    this._disposables.add(
-      surfaceModel.localElementAdded.subscribe(() => this.refresh())
-    );
-    this._disposables.add(
-      surfaceModel.localElementDeleted.subscribe(() => this.refresh())
-    );
-    this._disposables.add(
-      surfaceModel.localElementUpdated.subscribe(() => this.refresh())
-    );
-
-    this._disposables.add(
-      surfaceModel.elementUpdated.subscribe(payload => {
-        // ignore externalXYWH update cause it's updated by the renderer
-        if (payload.props['externalXYWH']) return;
-        this.refresh();
-      })
-    );
-  }
-
-  addOverlay(overlay: Overlay) {
-    overlay.setRenderer(null);
-    this._overlays.add(overlay);
-    this.refresh();
-  }
-
-  attach(container: HTMLElement) {
-    this._container = container;
-    container.append(this.rootElement);
-
-    this._resetSize();
-    this.refresh();
-  }
-
-  dispose(): void {
-    this._overlays.forEach(overlay => overlay.dispose());
-    this._overlays.clear();
-    this._disposables.dispose();
-
-    if (this._refreshRafId) {
-      cancelAnimationFrame(this._refreshRafId);
-      this._refreshRafId = null;
-    }
-    if (this._sizeUpdatedRafId) {
-      cancelAnimationFrame(this._sizeUpdatedRafId);
-      this._sizeUpdatedRafId = null;
-    }
-
-    this.rootElement.remove();
-    this._elementsMap.clear();
-  }
-
-  generateColorProperty(color: Color, fallback?: Color) {
-    return (
-      this.provider.generateColorProperty?.(color, fallback) ?? 'transparent'
-    );
-  }
-
-  getColorScheme() {
-    return this.provider.getColorScheme?.() ?? ColorScheme.Light;
-  }
-
-  getColorValue(color: Color, fallback?: Color, real?: boolean) {
-    return (
-      this.provider.getColorValue?.(color, fallback, real) ?? 'transparent'
-    );
-  }
-
-  getPropertyValue(property: string) {
-    return this.provider.getPropertyValue?.(property) ?? '';
-  }
-
-  refresh() {
-    if (this._refreshRafId !== null) return;
-
-    this._refreshRafId = requestConnectedFrame(() => {
-      this._refreshRafId = null;
-      this._render();
-    }, this._container);
-  }
-
-  removeOverlay(overlay: Overlay) {
-    if (!this._overlays.has(overlay)) {
-      return;
-    }
-
-    this._overlays.delete(overlay);
-    this.refresh();
-  }
 }

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

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

blocksuite/affine/components/package.json

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

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

@@ -4,10 +4,12 @@ import { html } from 'lit';
 export const LoadingIcon = ({
   size = '1em',
   progress = 0.2,
+  ringColor = cssVarV2('loading/background'),
   strokeColor = cssVarV2('loading/foreground'),
 }: {
   size?: string;
   progress?: number;
+  ringColor?: string;
   strokeColor?: string;
 } = {}) =>
   html`<svg
@@ -28,13 +30,7 @@ export const LoadingIcon = ({
         }
       }
     </style>
-    <circle
-      cx="12"
-      cy="12"
-      r="8"
-      stroke="${cssVarV2('loading/background')}"
-      stroke-width="4"
-    />
+    <circle cx="12" cy="12" r="8" stroke="${ringColor}" stroke-width="4" />
     <circle
       class="spinner"
       cx="12"

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

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

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

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

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

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

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

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

blocksuite/affine/data-view/package.json

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

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/data-view/src/widget-presets/views-bar/views-view.ts

@@ -74,6 +74,14 @@ export class DataViewHeaderViews extends WidgetBase {
     }
   `;
 
+  private addView(type: string) {
+    const id = this.viewManager.viewAdd(type);
+    this.viewManager.setCurrentView(id);
+    this.dataViewLogic.root.config.eventTrace('AddDatabaseView', {
+      type: type,
+    });
+  }
+
   _addViewMenu = (event: MouseEvent) => {
     popFilterableSimpleMenu(
       popupTargetFromElement(event.currentTarget as HTMLElement),
@@ -82,8 +90,7 @@ export class DataViewHeaderViews extends WidgetBase {
           name: v.model.defaultName,
           prefix: html`<uni-lit .uni=${v.renderer.icon}></uni-lit>`,
           select: () => {
-            const id = this.viewManager.viewAdd(v.type);
-            this.viewManager.setCurrentView(id);
+            this.addView(v.type);
           },
         });
       })
@@ -135,8 +142,7 @@ export class DataViewHeaderViews extends WidgetBase {
               hide: () => this.readonly,
               prefix: PlusIcon(),
               select: () => {
-                const id = this.viewManager.viewAdd(v.type);
-                this.viewManager.setCurrentView(id);
+                this.addView(v.type);
               },
             });
           }),

blocksuite/affine/foundation/package.json

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

blocksuite/affine/fragments/adapter-panel/package.json

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

blocksuite/affine/fragments/doc-title/package.json

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

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/fragments/frame-panel/package.json

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

blocksuite/affine/fragments/outline/package.json

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

blocksuite/affine/fragments/outline/src/card/outline-card.ts

@@ -120,6 +120,8 @@ export class OutlineNoteCard extends SignalWatcher(
           setOffset({ x: clientX - left, y: clientY - top });
 
           container.style.width = `${this.parentElement?.clientWidth ?? 0}px`;
+          container.style.maxHeight = '500px';
+          container.style.overflow = 'hidden';
           container.style.backgroundColor = cssVarV2(
             'layer/background/primary'
           );

blocksuite/affine/gfx/brush/package.json

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

blocksuite/affine/gfx/connector/package.json

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

blocksuite/affine/gfx/group/package.json

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

blocksuite/affine/gfx/link/package.json

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

blocksuite/affine/gfx/mindmap/package.json

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

blocksuite/affine/gfx/mindmap/src/toolbar/basket-elements.ts

@@ -17,7 +17,7 @@ import {
   FeatureFlagService,
   TelemetryProvider,
 } from '@blocksuite/affine-shared/services';
-import { openFileOrFiles } from '@blocksuite/affine-shared/utils';
+import { openSingleFileWith } from '@blocksuite/affine-shared/utils';
 import { Bound, type IVec } from '@blocksuite/global/gfx';
 import type { BlockComponent } from '@blocksuite/std';
 import type { TemplateResult } from 'lit';
@@ -158,7 +158,7 @@ export const textRender: DraggableTool['render'] = async (bound, edgeless) => {
 export const mediaRender: DraggableTool['render'] = async (bound, edgeless) => {
   let file: File | null = null;
   try {
-    file = await openFileOrFiles();
+    file = await openSingleFileWith();
   } catch (e) {
     console.error(e);
     return null;

blocksuite/affine/gfx/mindmap/src/toolbar/utils/import-mindmap.ts

@@ -1,4 +1,4 @@
-import { openFileOrFiles } from '@blocksuite/affine-shared/utils';
+import { openSingleFileWith } from '@blocksuite/affine-shared/utils';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
 import type { Bound } from '@blocksuite/global/gfx';
 import c from 'simple-xml-to-json';
@@ -12,9 +12,7 @@ type MindMapNode = {
 };
 
 export async function importMindmap(bound: Bound): Promise<MindMapNode> {
-  const file = await openFileOrFiles({
-    acceptType: 'MindMap',
-  });
+  const file = await openSingleFileWith('MindMap');
 
   if (!file) {
     throw new BlockSuiteError(ErrorCode.UserAbortError, 'Aborted by user');

blocksuite/affine/gfx/note/package.json

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

blocksuite/affine/gfx/note/src/toolbar/note-menu.ts

@@ -7,7 +7,7 @@ import { TelemetryProvider } from '@blocksuite/affine-shared/services';
 import type { NoteChildrenFlavour } from '@blocksuite/affine-shared/types';
 import {
   getImageFilesFromLocal,
-  openFileOrFiles,
+  openSingleFileWith,
 } from '@blocksuite/affine-shared/utils';
 import { EdgelessToolbarToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar';
 import { AttachmentIcon, ImageIcon, LinkIcon } from '@blocksuite/icons/lit';
@@ -139,7 +139,7 @@ export class EdgelessNoteMenu extends EdgelessToolbarToolMixin(LitElement) {
               .activeMode=${'background'}
               .tooltip=${'File'}
               @click=${async () => {
-                const file = await openFileOrFiles();
+                const file = await openSingleFileWith();
                 if (!file) return;
                 await addAttachments(this.edgeless.std, [file]);
                 this.gfx.tool.setTool(DefaultTool);

blocksuite/affine/gfx/pointer/package.json

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

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 type { Bound } from '@blocksuite/global/gfx';
+import { type Bound } from '@blocksuite/global/gfx';
 import {
   type DragExtensionInitializeContext,
   type ExtensionDragMoveContext,
@@ -28,7 +28,7 @@ export class SnapExtension extends InteractivityExtension {
           return {};
         }
 
-        let alignBound: Bound;
+        let alignBound: Bound | null = null;
 
         return {
           onDragStart() {
@@ -46,6 +46,7 @@ export class SnapExtension extends InteractivityExtension {
           onDragMove(context: ExtensionDragMoveContext) {
             if (
               context.elements.length === 0 ||
+              !alignBound ||
               alignBound.w === 0 ||
               alignBound.h === 0
             ) {
@@ -58,11 +59,81 @@ export class SnapExtension extends InteractivityExtension {
             context.dx = alignRst.dx + context.dx;
             context.dy = alignRst.dy + context.dy;
           },
-          onDragEnd() {
+          clear() {
+            alignBound = null;
             snapOverlay.clear();
           },
         };
       }
     );
+
+    this.action.onElementResize(() => {
+      const snapOverlay = this.snapOverlay;
+
+      if (!snapOverlay) {
+        return {};
+      }
+
+      return {
+        onResizeStart(context) {
+          snapOverlay.setMovingElements(context.elements);
+        },
+        onResizeMove(context) {
+          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;
+            }
+          }
+
+          if (alignDirection.length > 0) {
+            const rst = snapOverlay.alignResize(
+              currentHandlePos,
+              alignDirection
+            );
+
+            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,
+            });
+          }
+        },
+        onResizeEnd() {
+          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/package.json

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

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

@@ -9,18 +9,35 @@ function applyShapeSpecificStyles(
   element: HTMLElement,
   zoom: number
 ) {
-  if (model.shapeType === 'rect') {
-    const w = model.w * zoom;
-    const h = model.h * zoom;
-    const r = model.radius ?? 0;
-    const borderRadius =
-      r < 1 ? `${Math.min(w * r, h * r)}px` : `${r * zoom}px`;
-    element.style.borderRadius = borderRadius;
-  } else if (model.shapeType === 'ellipse') {
-    element.style.borderRadius = '50%';
-  } else {
-    element.style.borderRadius = '';
+  // Reset properties that might be set by different shape types
+  element.style.removeProperty('clip-path');
+  element.style.removeProperty('border-radius');
+  // Clear DOM for shapes that don't use SVG, or if type changes from SVG-based to non-SVG-based
+  if (model.shapeType !== 'diamond' && model.shapeType !== 'triangle') {
+    while (element.firstChild) element.firstChild.remove();
   }
+
+  switch (model.shapeType) {
+    case 'rect': {
+      const w = model.w * zoom;
+      const h = model.h * zoom;
+      const r = model.radius ?? 0;
+      const borderRadius =
+        r < 1 ? `${Math.min(w * r, h * r)}px` : `${r * zoom}px`;
+      element.style.borderRadius = borderRadius;
+      break;
+    }
+    case 'ellipse':
+      element.style.borderRadius = '50%';
+      break;
+    case 'diamond':
+      element.style.clipPath = 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)';
+      break;
+    case 'triangle':
+      element.style.clipPath = 'polygon(50% 0%, 100% 100%, 0% 100%)';
+      break;
+  }
+  // No 'else' needed to clear styles, as they are reset at the beginning of the function.
 }
 
 function applyBorderStyles(
@@ -78,6 +95,9 @@ export const shapeDomRenderer = (
   renderer: DomRenderer
 ): void => {
   const { zoom } = renderer.viewport;
+  const unscaledWidth = model.w;
+  const unscaledHeight = model.h;
+
   const fillColor = renderer.getColorValue(
     model.fillColor,
     DefaultTheme.shapeFillColor,
@@ -89,17 +109,80 @@ export const shapeDomRenderer = (
     true
   );
 
-  element.style.width = `${model.w * zoom}px`;
-  element.style.height = `${model.h * zoom}px`;
+  element.style.width = `${unscaledWidth * zoom}px`;
+  element.style.height = `${unscaledHeight * zoom}px`;
+  element.style.boxSizing = 'border-box';
 
+  // Apply shape-specific clipping, border-radius, and potentially clear innerHTML
   applyShapeSpecificStyles(model, element, zoom);
 
-  element.style.backgroundColor = model.filled ? fillColor : 'transparent';
+  if (model.shapeType === 'diamond' || model.shapeType === 'triangle') {
+    // For diamond and triangle, fill and border are handled by inline SVG
+    element.style.border = 'none'; // Ensure no standard CSS border interferes
+    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') {
+      // Adjusted points for diamond
+      svgPoints = [
+        `${unscaledWidth / 2},${halfStroke}`,
+        `${unscaledWidth - halfStroke},${unscaledHeight / 2}`,
+        `${unscaledWidth / 2},${unscaledHeight - halfStroke}`,
+        `${halfStroke},${unscaledHeight / 2}`,
+      ].join(' ');
+    } else {
+      // 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
+    const finalStrokeColor =
+      model.strokeStyle !== 'none' && strokeW > 0 ? strokeColor : 'transparent';
+    // Determine dash array, only if stroke is visible and style is 'dash'
+    const finalStrokeDasharray =
+      model.strokeStyle === 'dash' && finalStrokeColor !== 'transparent'
+        ? '12, 12'
+        : 'none';
+    // Determine fill color
+    const finalFillColor = model.filled ? fillColor : 'transparent';
+
+    // Build SVG safely with DOM-API
+    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');
+
+    const polygon = document.createElementNS(SVG_NS, 'polygon');
+    polygon.setAttribute('points', svgPoints);
+    polygon.setAttribute('fill', finalFillColor);
+    polygon.setAttribute('stroke', finalStrokeColor);
+    polygon.setAttribute('stroke-width', String(strokeW));
+    if (finalStrokeDasharray !== 'none') {
+      polygon.setAttribute('stroke-dasharray', finalStrokeDasharray);
+    }
+    svg.append(polygon);
+
+    // Replace existing children to avoid memory leaks
+    element.replaceChildren(svg);
+  } else {
+    // Standard rendering for other shapes (e.g., rect, ellipse)
+    // innerHTML was already cleared by applyShapeSpecificStyles if necessary
+    element.style.backgroundColor = model.filled ? fillColor : 'transparent';
+    applyBorderStyles(model, element, strokeColor, zoom); // Uses standard CSS border
+  }
 
-  applyBorderStyles(model, element, strokeColor, zoom);
   applyTransformStyles(model, element);
 
-  element.style.boxSizing = 'border-box';
   element.style.zIndex = renderer.layerManager.getZIndex(model).toString();
 
   manageClassNames(model, element);

blocksuite/affine/gfx/template/package.json

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

blocksuite/affine/gfx/text/package.json

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

blocksuite/affine/inlines/footnote/package.json

@@ -22,7 +22,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.14",
+    "@toeverything/theme": "^1.1.15",
     "@types/lodash-es": "^4.17.12",
     "collapse-white-space": "^2.1.0",
     "date-fns": "^4.0.0",

blocksuite/affine/inlines/latex/package.json

@@ -23,7 +23,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.14",
+    "@toeverything/theme": "^1.1.15",
     "@types/hast": "^3.0.4",
     "@types/katex": "^0.16.7",
     "@types/lodash-es": "^4.17.12",

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

@@ -139,8 +139,7 @@ export class AffineLatexNode extends SignalWatcher(
             } else {
               try {
                 katex.render(latex, latexContainer, {
-                  displayMode: true,
-                  output: 'mathml',
+                  displayMode: false,
                 });
               } catch {
                 latexContainer.replaceChildren();
@@ -189,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/inlines/link/package.json

@@ -22,7 +22,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.14",
+    "@toeverything/theme": "^1.1.15",
     "@types/lodash-es": "^4.17.12",
     "collapse-white-space": "^2.1.0",
     "date-fns": "^4.0.0",

blocksuite/affine/inlines/mention/package.json

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

blocksuite/affine/inlines/preset/package.json

@@ -27,7 +27,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.14",
+    "@toeverything/theme": "^1.1.15",
     "@types/hast": "^3.0.4",
     "@types/katex": "^0.16.7",
     "@types/lodash-es": "^4.17.12",

blocksuite/affine/inlines/reference/package.json

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

blocksuite/affine/model/package.json

@@ -13,7 +13,7 @@
     "@blocksuite/global": "workspace:*",
     "@blocksuite/std": "workspace:*",
     "@blocksuite/store": "workspace:*",
-    "@toeverything/theme": "^1.1.14",
+    "@toeverything/theme": "^1.1.15",
     "@types/lodash-es": "^4.17.12",
     "fractional-indexing": "^3.2.0",
     "lodash-es": "^4.17.21",

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;