refactor: extract common builder

refactor: use path builder
feat(editor): support connector dom renderer
2026-07-04 03:01:25 +08:00 · 2025-05-29 16:13:48 +08:00 · 2025-05-29 16:13:48 +08:00 · 2025-05-29 16:13:48 +08:00 · 2025-05-29 16:13:48 +08:00 · 2025-05-29 16:13:48 +08:00
233 changed files with 8485 additions and 1557 deletions
@@ -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",
@@ -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}
@@ -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);
@@ -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 {
@@ -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",
@@ -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",
@@ -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",
@@ -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;
@@ -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,
@@ -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() {
@@ -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,
 ];
@@ -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",
@@ -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",
@@ -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",
@@ -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",
@@ -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",
@@ -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',
@@ -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;

@@ -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",
@@ -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",
@@ -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",
@@ -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>`
      )}
    `;
@@ -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(),
@@ -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>`
            )}
          `,
@@ -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",
@@ -58,7 +58,6 @@ export class LatexBlockComponent extends CaptionedBlockComponent<LatexBlockModel
          try {
            katex.render(latex, katexContainer, {
              displayMode: true,
-              output: 'mathml',
            });
          } catch {
            katexContainer.replaceChildren();
@@ -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",
@@ -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;
@@ -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",
@@ -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;
@@ -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",
@@ -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",
@@ -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",
@@ -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",
@@ -35,7 +35,9 @@ export abstract class Overlay extends Extension {
    ]);
  }

-  clear() {}
+  clear() {
+    this.refresh();
+  }

  dispose() {}

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

 import { manageClassNames, setStyles } from './utils';

@@ -9,18 +10,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 +96,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 +110,77 @@ 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;
+
+    let svgPoints = '';
+    if (model.shapeType === 'diamond') {
+      // Generate diamond points using shared utility
+      svgPoints = SVGShapeBuilder.diamond(
+        unscaledWidth,
+        unscaledHeight,
+        strokeW
+      );
+    } else {
+      // triangle - generate triangle points using shared utility
+      svgPoints = SVGShapeBuilder.triangle(
+        unscaledWidth,
+        unscaledHeight,
+        strokeW
+      );
+    }
+
+    // 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);
@@ -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",
@@ -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",
@@ -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",
@@ -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",
@@ -139,8 +139,7 @@ export class AffineLatexNode extends SignalWatcher(
            } else {
              try {
                katex.render(latex, latexContainer, {
-                  displayMode: true,
-                  output: 'mathml',
+                  displayMode: false,
                });
              } catch {
                latexContainer.replaceChildren();
@@ -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",
@@ -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",
@@ -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",
@@ -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",
@@ -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",
@@ -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/lodash-es": "^4.17.12",
    "collapse-white-space": "^2.1.0",
    "date-fns": "^4.0.0",
@@ -18,7 +18,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/bytes": "^3.1.5",
    "@types/hast": "^3.0.4",
    "@types/lodash-es": "^4.17.12",
@@ -19,7 +19,6 @@ export interface BlockSuiteFlags {
  enable_callout: boolean;
  enable_edgeless_scribbled_style: boolean;
  enable_table_virtual_scroll: boolean;
-  enable_embed_doc_with_alias: boolean;
  enable_turbo_renderer: boolean;
  enable_dom_renderer: boolean;
 }
@@ -45,7 +44,6 @@ export class FeatureFlagService extends StoreExtension {
    enable_callout: false,
    enable_edgeless_scribbled_style: false,
    enable_table_virtual_scroll: false,
-    enable_embed_doc_with_alias: false,
    enable_turbo_renderer: false,
    enable_dom_renderer: false,
  });
@@ -0,0 +1,8 @@
+import type { TelemetryEvent } from './types.js';
+
+export type CodeBlockEventType =
+  | 'codeBlockLanguageSelect'
+  | 'htmlBlockTogglePreview'
+  | 'htmlBlockPreviewFailed';
+
+export type CodeBlockEvents = Record<CodeBlockEventType, TelemetryEvent>;
@@ -45,6 +45,9 @@ export type DatabaseGroupEvents = {

 export type DatabaseEvents = {
  AddDatabase: {};
+  AddDatabaseView: {
+    type: string;
+  };
 };

 export interface DatabaseAllSortEvents {
@@ -1,6 +1,7 @@
 import { createIdentifier } from '@blocksuite/global/di';
 import type { ExtensionType } from '@blocksuite/store';

+import type { CodeBlockEvents } from './code-block.js';
 import type { OutDatabaseAllEvents } from './database.js';
 import type { LinkToolbarEvents } from './link.js';
 import type { NoteEvents } from './note.js';
@@ -26,6 +27,7 @@ import type {
 export type TelemetryEventMap = OutDatabaseAllEvents &
  LinkToolbarEvents &
  SlashMenuEvents &
+  CodeBlockEvents &
  NoteEvents & {
    DocCreated: DocCreatedEvent;
    Link: TelemetryEvent;
@@ -65,7 +65,7 @@ export interface AttachmentReloadedEvent extends TelemetryEvent {
  page: 'doc editor' | 'whiteboard editor';
  segment: 'doc' | 'whiteboard';
  module: 'attachment';
-  control: 'reload';
+  control: 'reload' | 'retry';
  category: 'card' | 'embed';
  type: string; // file type
 }
@@ -1,5 +1,6 @@
 import { createIdentifier } from '@blocksuite/global/di';
 import { BlockSuiteError } from '@blocksuite/global/exceptions';
+import { StdIdentifier } from '@blocksuite/std';
 import type { ExtensionType } from '@blocksuite/store';

 import type { Viewport } from '../types';
@@ -16,9 +17,10 @@ export const ViewportElementProvider = createIdentifier<ViewportElementService>(
 export const ViewportElementExtension = (selector: string): ExtensionType => {
  return {
    setup: di => {
-      di.override(ViewportElementProvider, () => {
+      di.override(ViewportElementProvider, provider => {
        const getViewportElement = (): HTMLElement => {
-          const viewportElement = document.querySelector<HTMLElement>(selector);
+          const std = provider.get(StdIdentifier);
+          const viewportElement = std.host.closest<HTMLElement>(selector);
          if (!viewportElement) {
            throw new BlockSuiteError(
              BlockSuiteError.ErrorCode.ValueNotExists,
@@ -23,7 +23,8 @@ export function affineTextStyles(
      'border-radius': '4px',
      color: 'var(--affine-text-primary-color)',
      'font-variant-ligatures': 'none',
-      'line-height': 'auto',
+      'vertical-align': 'bottom',
+      'line-height': 'inherit',
    };
  }

@@ -112,21 +112,11 @@ type AcceptTypes =
  | 'Html'
  | 'Zip'
  | 'MindMap';
-export function openFileOrFiles(options?: {
-  acceptType?: AcceptTypes;
-}): Promise<File | null>;
-export function openFileOrFiles(options: {
-  acceptType?: AcceptTypes;
-  multiple: false;
-}): Promise<File | null>;
-export function openFileOrFiles(options: {
-  acceptType?: AcceptTypes;
-  multiple: true;
-}): Promise<File[] | null>;
-export async function openFileOrFiles({
-  acceptType = 'Any',
-  multiple = false,
-} = {}) {
+
+export async function openFilesWith(
+  acceptType: AcceptTypes = 'Any',
+  multiple: boolean = true
+): Promise<File[] | null> {
  // Feature detection. The API needs to be supported
  // and the app not run in an iframe.
  const supportsFileSystemAccess =
@@ -138,6 +128,7 @@ export async function openFileOrFiles({
        return false;
      }
    })();
+
  // If the File System Access API is supported…
  if (supportsFileSystemAccess && window.showOpenFilePicker) {
    try {
@@ -153,30 +144,14 @@ export async function openFileOrFiles({
      } satisfies OpenFilePickerOptions;
      // Show the file picker, optionally allowing multiple files.
      const handles = await window.showOpenFilePicker(pickerOpts);
-      // Only one file is requested.
-      if (!multiple) {
-        // Add the `FileSystemFileHandle` as `.handle`.
-        const file = await handles[0].getFile();
-        // Add the `FileSystemFileHandle` as `.handle`.
-        // file.handle = handles[0];
-        return file;
-      } else {
-        const files = await Promise.all(
-          handles.map(async handle => {
-            const file = await handle.getFile();
-            // Add the `FileSystemFileHandle` as `.handle`.
-            // file.handle = handles[0];
-            return file;
-          })
-        );
-        return files;
-      }
+
+      return await Promise.all(handles.map(handle => handle.getFile()));
    } catch (err) {
-      console.error('Error opening file');
      console.error(err);
      return null;
    }
  }
+
  // Fallback if the File System Access API is not supported.
  return new Promise(resolve => {
    // Append a new `<input type="file" multiple? />` and hide it.
@@ -184,9 +159,8 @@ export async function openFileOrFiles({
    input.classList.add('affine-upload-input');
    input.style.display = 'none';
    input.type = 'file';
-    if (multiple) {
-      input.multiple = true;
-    }
+    input.multiple = multiple;
+
    if (acceptType !== 'Any') {
      // For example, `accept="image/*"` or `accept="video/*,audio/*"`.
      input.accept = Object.keys(
@@ -198,17 +172,8 @@ export async function openFileOrFiles({
    input.addEventListener('change', () => {
      // Remove the `<input type="file" multiple? />` again from the DOM.
      input.remove();
-      // If no files were selected, return.
-      if (!input.files) {
-        resolve(null);
-        return;
-      }
-      // Return all files or just one file.
-      if (multiple) {
-        resolve(Array.from(input.files));
-        return;
-      }
-      resolve(input.files[0]);
+
+      resolve(input.files ? Array.from(input.files) : null);
    });
    // The `cancel` event fires when the user cancels the dialog.
    input.addEventListener('cancel', () => {
@@ -223,11 +188,14 @@ export async function openFileOrFiles({
  });
 }

+export function openSingleFileWith(
+  acceptType?: AcceptTypes
+): Promise<File | null> {
+  return openFilesWith(acceptType, false).then(files => files?.at(0) ?? null);
+}
+
 export async function getImageFilesFromLocal() {
-  const imageFiles = await openFileOrFiles({
-    acceptType: 'Images',
-    multiple: true,
-  });
+  const imageFiles = await openFilesWith('Images');
  if (!imageFiles) return [];
  return imageFiles;
 }
@@ -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/lodash-es": "^4.17.12",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
@@ -20,7 +20,7 @@
    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.14",
+    "@toeverything/theme": "^1.1.15",
    "lit": "^3.2.0",
    "rxjs": "^7.8.1"
  },
@@ -21,7 +21,7 @@
    "@blocksuite/std": "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",
    "rxjs": "^7.8.1",
    "yjs": "^13.6.21"
@@ -25,7 +25,7 @@
    "@blocksuite/std": "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",
    "rxjs": "^7.8.1",
    "yjs": "^13.6.21"
@@ -28,7 +28,6 @@ import { state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { type Subscription } from 'rxjs';

 import { RenderResizeHandles } from './resize-handles.js';
 import { generateCursorUrl, getRotatedResizeCursor } from './utils.js';
@@ -359,21 +358,6 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>
    }
  `;

-  private readonly _initSelectedSlot = () => {
-    this._propDisposables.forEach(disposable => disposable.unsubscribe());
-    this._propDisposables = [];
-
-    this.selection.selectedElements.forEach(element => {
-      if ('flavour' in element) {
-        this._propDisposables.push(
-          element.propsUpdated.subscribe(() => {
-            this._updateOnElementChange(element.id);
-          })
-        );
-      }
-    });
-  };
-
  private readonly _dragEndCleanup = () => {
    this._isWidthLimit = false;
    this._isHeightLimit = false;
@@ -386,16 +370,15 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>
    this.frameOverlay.clear();
  };

-  private _propDisposables: Subscription[] = [];
-
  private readonly _updateCursor = (options?: {
    type: 'resize' | 'rotate';
    angle: number;
    handle: ResizeHandle;
+    pure?: boolean;
  }) => {
    if (!options) {
      !this._isResizing && (this.gfx.cursor$.value = 'default');
-      return;
+      return 'default';
    }

    const { type, angle, handle } = options;
@@ -410,7 +393,11 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>
      });
    }

-    this.gfx.cursor$.value = cursor;
+    if (options.pure !== true) {
+      this.gfx.cursor$.value = cursor;
+    }
+
+    return cursor;
  };

  private readonly _updateOnElementChange = (
@@ -423,8 +410,30 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>
    }
  };

+  private readonly _updateHandles = () => {
+    const interaction = this._interaction;
+    const { store, selection } = this;
+    const elements = selection.selectedElements;
+
+    if (interaction && !selection.editing && !store.readonly) {
+      const resizeHandles = interaction.getResizeHandlers({
+        elements,
+      });
+      const { rotatable } = interaction.getRotateConfig({
+        elements,
+      });
+
+      this._allowedHandles = {
+        rotatable,
+        resizeHandles,
+      };
+    } else {
+      this._allowedHandles = null;
+    }
+  };
+
  private readonly _updateOnSelectionChange = () => {
-    this._initSelectedSlot();
+    this._updateHandles();
    this._updateSelectedRect();
    // Reset the cursor
    this._updateCursor();
@@ -554,10 +563,6 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>
        })
      );
    }
-
-    _disposables.add(() => {
-      this._propDisposables.forEach(disposable => disposable.unsubscribe());
-    });
  }

  private get _interaction() {
@@ -569,7 +574,7 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>
  }

  private _renderHandles() {
-    const { selection, gfx, block, store } = this;
+    const { selection, gfx, block } = this;
    const elements = selection.selectedElements;

    if (selection.inoperable) {
@@ -579,23 +584,16 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>
    const handles = [];

    if (
+      this._allowedHandles &&
      this._interaction &&
-      !selection.editing &&
-      !store.readonly &&
      !elements.some(element => element.isLocked())
    ) {
      const interaction = this._interaction;
-      const resizeHandlers = interaction.getResizeHandlers({
-        elements,
-      });
-      const { rotatable } = interaction.getRotateConfig({
-        elements,
-      });

      handles.push(
        RenderResizeHandles(
-          resizeHandlers,
-          rotatable,
+          this._allowedHandles.resizeHandles,
+          this._allowedHandles.rotatable,
          (e: PointerEvent, handle: ResizeHandle) => {
            const isRotate = (e.target as HTMLElement).classList.contains(
              'rotate'
@@ -603,7 +601,7 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>

            if (isRotate) {
              interaction.handleElementRotate({
-                elements: this.selection.selectedElements,
+                elements,
                event: e,
                onRotateStart: () => {
                  this._mode = 'rotate';
@@ -622,7 +620,7 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>
              });
            } else {
              interaction.handleElementResize({
-                elements: this.selection.selectedElements,
+                elements,
                handle,
                event: e,
                onResizeStart: () => {
@@ -632,12 +630,19 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>
                  if (lockRatio) {
                    this._scaleDirection = handle;
                    this._scalePercent = `${Math.round(scaleX * 100)}%`;
+                    this._mode = 'scale';
                  }

                  if (exceed) {
                    this._isWidthLimit = exceed.w;
                    this._isHeightLimit = exceed.h;
                  }
+
+                  this._updateCursor({
+                    type: 'resize',
+                    angle: elements.length > 1 ? 0 : (elements[0]?.rotate ?? 0),
+                    handle,
+                  });
                },
                onResizeEnd: () => {
                  this._mode = 'resize';
@@ -647,14 +652,11 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>
            }
          },
          option => {
-            if (option) {
-              this._updateCursor({
-                ...option,
-                angle: elements.length > 1 ? 0 : (elements[0]?.rotate ?? 0),
-              });
-            } else {
-              this._updateCursor();
-            }
+            return this._updateCursor({
+              ...option,
+              angle: elements.length > 1 ? 0 : (elements[0]?.rotate ?? 0),
+              pure: true,
+            });
          }
        )
      );
@@ -784,6 +786,12 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<RootBlockModel>
    `;
  }

+  @state()
+  private accessor _allowedHandles: {
+    rotatable: boolean;
+    resizeHandles: ResizeHandle[];
+  } | null = null;
+
  @state()
  private accessor _isHeightLimit = false;

@@ -1,6 +1,7 @@
 import type { ResizeHandle } from '@blocksuite/std/gfx';
 import { html, nothing } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';

 export enum HandleDirection {
  Bottom = 'bottom',
@@ -17,36 +18,28 @@ function ResizeHandleRenderer(
  handle: ResizeHandle,
  rotatable: boolean,
  onPointerDown?: (e: PointerEvent, direction: ResizeHandle) => void,
-  updateCursor?: (options?: {
+  getCursor?: (options: {
    type: 'resize' | 'rotate';
    handle: ResizeHandle;
-  }) => void
+  }) => string
 ) {
  const handlerPointerDown = (e: PointerEvent) => {
    e.stopPropagation();
    onPointerDown && onPointerDown(e, handle);
  };

-  const pointerEnter = (type: 'resize' | 'rotate') => (e: PointerEvent) => {
-    e.stopPropagation();
-    if (e.buttons === 1 || !updateCursor) return;
-
-    updateCursor({ type, handle });
-  };
-
-  const pointerLeave = (e: PointerEvent) => {
-    e.stopPropagation();
-    if (e.buttons === 1 || !updateCursor) return;
-
-    updateCursor();
-  };
-
  const rotationTpl =
    handle.length > 6 && rotatable
      ? html`<div
          class="rotate"
-          @pointerover=${pointerEnter('rotate')}
-          @pointerout=${pointerLeave}
+          style=${styleMap({
+            cursor: getCursor
+              ? getCursor({
+                  type: 'rotate',
+                  handle,
+                })
+              : 'default',
+          })}
        ></div>`
      : nothing;

@@ -58,8 +51,14 @@ function ResizeHandleRenderer(
    ${rotationTpl}
    <div
      class="resize transparent-handle"
-      @pointerover=${pointerEnter('resize')}
-      @pointerout=${pointerLeave}
+      style=${styleMap({
+        cursor: getCursor
+          ? getCursor({
+              type: 'resize',
+              handle,
+            })
+          : 'default',
+      })}
    ></div>
  </div>`;
 }
@@ -79,17 +78,17 @@ export function RenderResizeHandles(
  resizeHandles: ResizeHandle[],
  rotatable: boolean,
  onPointerDown: (e: PointerEvent, direction: ResizeHandle) => void,
-  updateCursor?: (options?: {
+  getCursor?: (options: {
    type: 'resize' | 'rotate';
    handle: ResizeHandle;
-  }) => void
+  }) => string
 ) {
  return html`
    ${repeat(
      resizeHandles,
      handle => handle,
      handle =>
-        ResizeHandleRenderer(handle, rotatable, onPointerDown, updateCursor)
+        ResizeHandleRenderer(handle, rotatable, onPointerDown, getCursor)
    )}
  `;
 }
@@ -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",
@@ -20,7 +20,7 @@
    "@blocksuite/std": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
    "@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",
@@ -20,7 +20,7 @@
    "@blocksuite/std": "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",
    "rxjs": "^7.8.1"
  },
@@ -37,7 +37,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",
    "fflate": "^0.8.2",
    "lit": "^3.2.0",
@@ -48,7 +48,7 @@ import { REFERENCE_NODE } from '@blocksuite/affine-shared/consts';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
 import {
  createDefaultDoc,
-  openFileOrFiles,
+  openSingleFileWith,
  type Signal,
 } from '@blocksuite/affine-shared/utils';
 import type { AffineLinkedDocWidget } from '@blocksuite/affine-widget-linked-doc';
@@ -418,7 +418,7 @@ const contentMediaToolGroup: KeyboardToolPanelGroup = {
        const model = selectedModels?.[0];
        if (!model) return;

-        const file = await openFileOrFiles();
+        const file = await openSingleFileWith();
        if (!file) return;

        await addSiblingAttachmentBlocks(std, [file], model);
@@ -1040,7 +1040,7 @@ export const defaultKeyboardToolbarConfig: KeyboardToolbarConfig = {
        const model = selectedModels?.[0];
        if (!model) return;

-        const file = await openFileOrFiles();
+        const file = await openSingleFileWith();
        if (!file) return;

        await addSiblingAttachmentBlocks(std, [file], model);
@@ -8,7 +8,7 @@ import {
  requiredProperties,
  ShadowlessElement,
 } from '@blocksuite/std';
-import { effect, type Signal, signal } from '@preact/signals-core';
+import { effect, type Signal, signal, untracked } from '@preact/signals-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -260,6 +260,11 @@ export class AffineKeyboardToolbar extends SignalWatcher(
        if (this.keyboard.visible$.value) {
          this._closeToolPanel();
        }
+        // when keyboard is closed and the panel is not opened, we need to close the toolbar,
+        // this usually happens when user close keyboard from system side
+        else if (this.hasUpdated && untracked(() => !this.panelOpened)) {
+          this.close(true);
+        }
      })
    );

@@ -308,9 +313,12 @@ export class AffineKeyboardToolbar extends SignalWatcher(

  override firstUpdated() {
    // workaround for the virtual keyboard showing transition animation
-    setTimeout(() => {
+    const timeoutId = setTimeout(() => {
      this._scrollCurrentBlockIntoView();
    }, 700);
+    this.disposables.add(() => {
+      clearTimeout(timeoutId);
+    });
  }

  override render() {
@@ -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",
    "fflate": "^0.8.2",
    "lit": "^3.2.0",
@@ -6,7 +6,10 @@ import {
  NewIcon,
  NotionIcon,
 } from '@blocksuite/affine-components/icons';
-import { openFileOrFiles } from '@blocksuite/affine-shared/utils';
+import {
+  openFilesWith,
+  openSingleFileWith,
+} from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/lit';
 import type { ExtensionType, Schema, Workspace } from '@blocksuite/store';
 import { html, LitElement, type PropertyValues } from 'lit';
@@ -50,7 +53,7 @@ export class ImportDoc extends WithDisposable(LitElement) {
  }

  private async _importHtml() {
-    const files = await openFileOrFiles({ acceptType: 'Html', multiple: true });
+    const files = await openFilesWith('Html');
    if (!files) return;
    const pageIds: string[] = [];
    for (const file of files) {
@@ -79,10 +82,7 @@ export class ImportDoc extends WithDisposable(LitElement) {
  }

  private async _importMarkDown() {
-    const files = await openFileOrFiles({
-      acceptType: 'Markdown',
-      multiple: true,
-    });
+    const files = await openFilesWith('Markdown');
    if (!files) return;
    const pageIds: string[] = [];
    for (const file of files) {
@@ -111,7 +111,7 @@ export class ImportDoc extends WithDisposable(LitElement) {
  }

  private async _importNotion() {
-    const file = await openFileOrFiles({ acceptType: 'Zip' });
+    const file = await openSingleFileWith('Zip');
    if (!file) return;
    const needLoading = file.size > SHOW_LOADING_SIZE;
    if (needLoading) {
@@ -22,7 +22,7 @@
    "@blocksuite/std": "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",
    "rxjs": "^7.8.1",
    "yjs": "^13.6.21"
@@ -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",
    "fflate": "^0.8.2",
    "lit": "^3.2.0",
--- a/Show More
+++ b/Show More