feat(editor): header of edgeless embed doc (#12029)

Close [BS-3268](https://linear.app/affine-design/issue/BS-3268/edgeless-下，-dark-mode-embed的配色应该更加清晰)
Close [BS-3067](https://linear.app/affine-design/issue/BS-3067/在embed上，添加split-view等相关的操作入口，基本接近page-block（见设计稿）)

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

- **New Features**
  - Introduced an interactive header for embedded synced documents with fold/unfold toggle, document opening, and multiple view options.
  - Added info and copy link buttons for embedded synced documents and notes to improve document management and sharing.
- **Enhancements**
  - Updated styles for embedded synced document blocks and headers for better visual consistency.
  - Added new localization entries for header actions: "Fold", "Unfold", and "Open".
  - Disabled redundant open document actions in toolbars, centralizing controls in the header.
- **Refactor**
  - Unified header button components for notes and embedded synced documents into reusable components.
  - Simplified header components by delegating button behaviors to shared components.
- **Bug Fixes**
  - Fixed conditional rendering of editor content in embedded synced documents when folded.
- **Chores**
  - Upgraded theme dependency version from "^1.1.12" to "^1.1.14" across multiple packages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/blocks/attachment/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.12",
+    "@toeverything/theme": "^1.1.14",
     "file-type": "^20.0.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

blocksuite/affine/blocks/bookmark/package.json

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

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.12",
+    "@toeverything/theme": "^1.1.14",
     "@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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

blocksuite/affine/blocks/database/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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/mdast": "^4.0.4",
     "@vanilla-extract/css": "^1.17.0",
     "date-fns": "^4.0.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.12",
+    "@toeverything/theme": "^1.1.14",
     "@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.12",
+    "@toeverything/theme": "^1.1.14",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "rxjs": "^7.8.1",

blocksuite/affine/blocks/embed/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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "lit": "^3.2.0",
     "lodash-es": "^4.17.21",

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

@@ -3,6 +3,8 @@ import { css, html } from 'lit';
 
 import { embedNoteContentStyles } from '../common/embed-note-content-styles.js';
 
+unsafeCSSVarV2('layer/background/linkedDocOnEdgeless');
+
 export const styles = css`
   .affine-embed-linked-doc-block {
     box-sizing: border-box;
@@ -11,11 +13,15 @@ export const styles = css`
     height: 100%;
     border-radius: 8px;
     border: 1px solid var(--affine-background-tertiary-color);
-    background: var(--affine-background-primary-color);
     user-select: none;
     position: relative;
   }
 
+  .affine-embed-linked-doc-block.in-canvas {
+    border: 1px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
+    background: ${unsafeCSSVarV2('layer/background/linkedDocOnEdgeless')};
+  }
+
   .affine-embed-linked-doc-content {
     flex-grow: 1;
     height: 100%;

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

@@ -0,0 +1,18 @@
+import {
+  EmbedSyncedDocBlockSchema,
+  type EmbedSyncedDocModel,
+} from '@blocksuite/affine-model';
+import { type BlockStdScope, ConfigExtensionFactory } from '@blocksuite/std';
+import type { TemplateResult } from 'lit';
+
+export type EmbedSyncedDocConfig = {
+  edgelessHeader: (context: {
+    model: EmbedSyncedDocModel;
+    std: BlockStdScope;
+  }) => TemplateResult;
+};
+
+export const EmbedSyncedDocConfigExtension =
+  ConfigExtensionFactory<EmbedSyncedDocConfig>(
+    EmbedSyncedDocBlockSchema.model.flavour
+  );

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

@@ -289,7 +289,6 @@ const builtinToolbarConfig = {
 
 const builtinSurfaceToolbarConfig = {
   actions: [
-    // TODO(@L-Sun): remove this after impl header toolbar for embed-edgeless-synced-doc
     openDocActionGroup,
     conversionsActionGroup,
     {

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

@@ -18,8 +18,10 @@ import { choose } from 'lit/directives/choose.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { guard } from 'lit/directives/guard.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { when } from 'lit/directives/when.js';
 
 import { toEdgelessEmbedBlock } from '../common/to-edgeless-embed-block.js';
+import { EmbedSyncedDocConfigExtension } from './configs/index.js';
 import { EmbedSyncedDocBlockComponent } from './embed-synced-doc-block.js';
 
 export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
@@ -89,6 +91,14 @@ export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
       ]);
     };
 
+    const header =
+      this.std
+        .getOptional(EmbedSyncedDocConfigExtension.identifier)
+        ?.edgelessHeader({
+          model: this.model,
+          std: this.std,
+        }) ?? nothing;
+
     return this.renderEmbed(
       () => html`
         <div
@@ -103,18 +113,25 @@ export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
           style=${containerStyleMap}
           ?data-scale=${scale}
         >
-          <div class="affine-embed-synced-doc-editor">
+          <div class="affine-embed-synced-doc-edgeless-header-wrapper">
-            ${this.isPageMode && this._isEmptySyncedDoc
+            ${header}
-              ? html`
-                  <div class="affine-embed-synced-doc-editor-empty">
-                    <span>
-                      This is a linked doc, you can add content here.
-                    </span>
-                  </div>
-                `
-              : guard([editorMode, syncedDoc], renderEditor)}
           </div>
-          <div class="affine-embed-synced-doc-editor-overlay"></div>
+          ${when(
+            !this.model.isFolded,
+            () =>
+              html`<div class="affine-embed-synced-doc-editor">
+                  ${this.isPageMode && this._isEmptySyncedDoc
+                    ? html`
+                        <div class="affine-embed-synced-doc-editor-empty">
+                          <span>
+                            This is a linked doc, you can add content here.
+                          </span>
+                        </div>
+                      `
+                    : guard([editorMode, syncedDoc], renderEditor)}
+                </div>
+                <div class="affine-embed-synced-doc-editor-overlay"></div>`
+          )}
         </div>
       `
     );
@@ -156,8 +173,8 @@ export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
   };
 
   override renderGfxBlock() {
-    const { style, xywh } = this.model.props;
+    const { style, xywh$ } = this.model.props;
-    const bound = Bound.deserialize(xywh);
+    const bound = Bound.deserialize(xywh$.value);
 
     this.embedContainerStyle.width = `${bound.w}px`;
     this.embedContainerStyle.height = `${bound.h}px`;

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

@@ -1,5 +1,6 @@
-export * from './adapters/index.js';
+export * from './adapters';
+export * from './configs';
 export * from './edgeless-clipboard-config';
-export * from './embed-synced-doc-block.js';
+export * from './embed-synced-doc-block';
-export * from './embed-synced-doc-spec.js';
+export * from './embed-synced-doc-spec';
 export { SYNCED_MIN_HEIGHT, SYNCED_MIN_WIDTH } from '@blocksuite/affine-model';

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

@@ -2,8 +2,8 @@ import {
   EMBED_CARD_HEIGHT,
   EMBED_CARD_WIDTH,
 } from '@blocksuite/affine-shared/consts';
-import { cssVarV2 } from '@toeverything/theme/v2';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
-import { css, html, unsafeCSS } from 'lit';
+import { css, html } from 'lit';
 
 import { embedNoteContentStyles } from '../common/embed-note-content-styles.js';
 
@@ -101,7 +101,7 @@ export const blockStyles = css`
   }
   .affine-embed-synced-doc-icon {
     line-height: 0;
-    color: ${unsafeCSS(cssVarV2.icon.primary)};
+    color: ${unsafeCSSVarV2('icon/primary')};
   }
   .affine-embed-synced-doc-title {
     font-size: 14px;
@@ -151,8 +151,8 @@ export const blockStyles = css`
   }
 
   .affine-embed-synced-doc-container.surface {
-    border-color: var(--affine-border-color);
+    border-color: ${unsafeCSSVarV2('layer/insideBorder/border')};
-    background: var(--affine-background-primary-color);
+    background: ${unsafeCSSVarV2('layer/background/linkedDocOnEdgeless')};
 
     affine-preview-root {
       padding: 0 24px;
@@ -533,6 +533,11 @@ export const cardStyles = css`
       align-items: center;
     }
   }
+
+  .affine-embed-synced-doc-edgeless-header-wrapper {
+    position: relative;
+    z-index: 2; // Make sure the header is above the overlay
+  }
 `;
 
 export const SyncedDocErrorIcon = html`<svg

blocksuite/affine/blocks/frame/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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

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.12",
+    "@toeverything/theme": "^1.1.14",
     "file-type": "^20.0.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/katex": "^0.16.7",
     "@types/mdast": "^4.0.4",
     "katex": "^0.16.11",

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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "@types/mdast": "^4.0.4",
     "@vanilla-extract/css": "^1.17.0",

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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

blocksuite/affine/blocks/root/package.json

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

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.12",
+    "@toeverything/theme": "^1.1.14",
     "@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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "fractional-indexing": "^3.2.0",
     "html2canvas": "^1.4.1",

blocksuite/affine/components/package.json

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

blocksuite/affine/data-view/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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "@vanilla-extract/css": "^1.17.0",
     "clsx": "^2.1.1",

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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "lit": "^3.2.0",
     "lodash-es": "^4.17.21",

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.12",
+    "@toeverything/theme": "^1.1.14",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "rxjs": "^7.8.1",

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.12",
+    "@toeverything/theme": "^1.1.14",
     "@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.12",
+    "@toeverything/theme": "^1.1.14",
     "@vanilla-extract/css": "^1.17.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

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.12",
+    "@toeverything/theme": "^1.1.14",
     "@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.12",
+    "@toeverything/theme": "^1.1.14",
     "@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.12",
+    "@toeverything/theme": "^1.1.14",
     "@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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "lit": "^3.2.0",
     "lodash-es": "^4.17.21",

blocksuite/affine/gfx/mindmap/package.json

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

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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "lit": "^3.2.0",
     "lodash-es": "^4.17.21",

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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "lit": "^3.2.0",
     "lodash-es": "^4.17.21",

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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "lit": "^3.2.0",
     "lodash-es": "^4.17.21",

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.12",
+    "@toeverything/theme": "^1.1.14",
     "@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.12",
+    "@toeverything/theme": "^1.1.14",
     "@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.12",
+    "@toeverything/theme": "^1.1.14",
     "@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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/hast": "^3.0.4",
     "@types/katex": "^0.16.7",
     "@types/lodash-es": "^4.17.12",

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.12",
+    "@toeverything/theme": "^1.1.14",
     "@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.12",
+    "@toeverything/theme": "^1.1.14",
     "@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.12",
+    "@toeverything/theme": "^1.1.14",
     "@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.12",
+    "@toeverything/theme": "^1.1.14",
     "@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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "fractional-indexing": "^3.2.0",
     "lodash-es": "^4.17.21",

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

@@ -11,9 +11,14 @@ export type EmbedSyncedDocBlockProps = {
   style: EmbedCardStyle;
   caption?: string | null;
   scale?: number;
+  preFoldHeight?: number;
 } & ReferenceInfo &
   GfxCompatibleProps;
 
 export class EmbedSyncedDocModel extends defineEmbedModel<EmbedSyncedDocBlockProps>(
   BlockModel
-) {}
+) {
+  get isFolded() {
+    return !!this.props.preFoldHeight$.value;
+  }
+}

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

@@ -15,6 +15,7 @@ export const defaultEmbedSyncedDocBlockProps: EmbedSyncedDocBlockProps = {
   style: EmbedSyncedDocStyles[0],
   caption: undefined,
   scale: undefined,
+  preFoldHeight: undefined,
   // title & description aliases
   title: undefined,
   description: undefined,

blocksuite/affine/rich-text/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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "collapse-white-space": "^2.1.0",
     "date-fns": "^4.0.0",

blocksuite/affine/shared/package.json

@@ -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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/hast": "^3.0.4",
     "@types/lodash-es": "^4.17.12",
     "@types/mdast": "^4.0.4",

blocksuite/affine/widgets/drag-handle/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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "lit": "^3.2.0",
     "lodash-es": "^4.17.21",

blocksuite/affine/widgets/edgeless-auto-connect/package.json

@@ -20,7 +20,7 @@
     "@blocksuite/icons": "^2.2.12",
     "@blocksuite/std": "workspace:*",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.12",
+    "@toeverything/theme": "^1.1.14",
     "lit": "^3.2.0",
     "rxjs": "^7.8.1"
   },

blocksuite/affine/widgets/edgeless-toolbar/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.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "lit": "^3.2.0",
     "lodash-es": "^4.17.21",

blocksuite/affine/widgets/edgeless-zoom-toolbar/package.json

@@ -20,7 +20,7 @@
     "@blocksuite/std": "workspace:*",
     "@floating-ui/dom": "^1.6.13",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "lit": "^3.2.0",
     "lodash-es": "^4.17.21",

blocksuite/affine/widgets/frame-title/package.json

@@ -19,7 +19,7 @@
     "@blocksuite/std": "workspace:*",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.12",
+    "@toeverything/theme": "^1.1.14",
     "lit": "^3.2.0",
     "rxjs": "^7.8.1"
   },

blocksuite/affine/widgets/keyboard-toolbar/package.json

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

blocksuite/affine/widgets/linked-doc/package.json

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

blocksuite/affine/widgets/page-dragging-area/package.json

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

blocksuite/affine/widgets/remote-selection/package.json

@@ -19,7 +19,7 @@
     "@blocksuite/icons": "^2.2.12",
     "@blocksuite/std": "workspace:*",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "lit": "^3.2.0",
     "lodash-es": "^4.17.21",

blocksuite/affine/widgets/scroll-anchoring/package.json

@@ -16,7 +16,7 @@
     "@blocksuite/global": "workspace:*",
     "@blocksuite/std": "workspace:*",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.12",
+    "@toeverything/theme": "^1.1.14",
     "lit": "^3.2.0",
     "rxjs": "^7.8.1"
   },

blocksuite/affine/widgets/slash-menu/package.json

@@ -20,7 +20,7 @@
     "@blocksuite/store": "workspace:*",
     "@floating-ui/dom": "^1.6.13",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "lit": "^3.2.0",
     "lodash-es": "^4.17.21",

blocksuite/affine/widgets/toolbar/package.json

@@ -22,7 +22,7 @@
     "@blocksuite/std": "workspace:*",
     "@floating-ui/dom": "^1.6.13",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "lit": "^3.2.0",
     "lodash-es": "^4.17.21",

blocksuite/affine/widgets/viewport-overlay/package.json

@@ -19,7 +19,7 @@
     "@blocksuite/std": "workspace:*",
     "@floating-ui/dom": "^1.6.13",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/lodash-es": "^4.17.12",
     "lit": "^3.2.0",
     "lodash-es": "^4.17.21",

blocksuite/integration-test/package.json

@@ -19,7 +19,7 @@
     "@lit/context": "^1.1.3",
     "@lottiefiles/dotlottie-wc": "^0.5.0",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.12",
+    "@toeverything/theme": "^1.1.14",
     "@vanilla-extract/css": "^1.17.0",
     "lit": "^3.2.0",
     "rxjs": "^7.8.1",

packages/frontend/admin/package.json

@@ -39,7 +39,7 @@
     "@sentry/react": "^9.2.0",
     "@tanstack/react-table": "^8.20.5",
     "@toeverything/infra": "workspace:*",
-    "@toeverything/theme": "^1.1.12",
+    "@toeverything/theme": "^1.1.14",
     "cmdk": "^1.0.4",
     "embla-carousel-react": "^8.5.1",
     "input-otp": "^1.4.1",

packages/frontend/apps/electron-renderer/package.json

@@ -19,7 +19,7 @@
     "@emotion/react": "^11.14.0",
     "@sentry/react": "^9.2.0",
     "@toeverything/infra": "workspace:*",
-    "@toeverything/theme": "^1.1.12",
+    "@toeverything/theme": "^1.1.14",
     "@vanilla-extract/css": "^1.17.0",
     "async-call-rpc": "^6.4.2",
     "next-themes": "^0.4.4",

packages/frontend/component/package.json

@@ -44,7 +44,7 @@
     "@radix-ui/react-toast": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.1.5",
     "@radix-ui/react-visually-hidden": "^1.1.1",
-    "@toeverything/theme": "^1.1.12",
+    "@toeverything/theme": "^1.1.14",
     "@vanilla-extract/dynamic": "^2.1.2",
     "bytes": "^3.1.2",
     "check-password-strength": "^3.0.0",

packages/frontend/core/package.json

@@ -37,7 +37,7 @@
     "@sentry/react": "^9.2.0",
     "@toeverything/infra": "workspace:*",
     "@toeverything/pdf-viewer": "^0.1.1",
-    "@toeverything/theme": "^1.1.12",
+    "@toeverything/theme": "^1.1.14",
     "@vanilla-extract/dynamic": "^2.1.2",
     "animejs": "^4.0.0",
     "bytes": "^3.1.2",

packages/frontend/core/src/blocksuite/block-suite-editor/lit-adaper.tsx

@@ -58,11 +58,14 @@ import {
 import { patchDatabaseBlockConfigService } from '../extensions/database-block-config-service';
 import { patchDocModeService } from '../extensions/doc-mode-service';
 import { patchDocUrlExtensions } from '../extensions/doc-url';
+import {
+  patchForEdgelessNoteConfig,
+  patchForEmbedSyncedDocConfig,
+} from '../extensions/edgeless-block-header';
 import { EdgelessClipboardAIChatConfig } from '../extensions/edgeless-clipboard';
 import { patchForClipboardInElectron } from '../extensions/electron-clipboard';
 import { enableEditorExtension } from '../extensions/entry/enable-editor';
 import { enableMobileExtension } from '../extensions/entry/enable-mobile';
-import { patchForEdgelessNoteConfig } from '../extensions/note-config';
 import { patchNotificationService } from '../extensions/notification-service';
 import { patchOpenDocExtension } from '../extensions/open-doc';
 import { patchPeekViewService } from '../extensions/peek-view-service';
@@ -162,6 +165,7 @@ const usePatchSpecs = (mode: DocMode) => {
       [
         patchReferenceRenderer(reactToLit, referenceRenderer),
         patchForEdgelessNoteConfig(framework, reactToLit, insidePeekView),
+        patchForEmbedSyncedDocConfig(reactToLit),
         patchNotificationService(confirmModal),
         patchPeekViewService(peekViewService),
         patchOpenDocExtension(),

packages/frontend/core/src/blocksuite/extensions/edgeless-block-header/common.tsx

@@ -0,0 +1,80 @@
+import { IconButton } from '@affine/component';
+import { useSharingUrl } from '@affine/core/components/hooks/affine/use-share-url';
+import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
+import { WorkspaceService } from '@affine/core/modules/workspace';
+import { useI18n } from '@affine/i18n';
+import { type DocMode } from '@blocksuite/affine/model';
+import { InformationIcon, LinkIcon } from '@blocksuite/icons/rc';
+import { useService } from '@toeverything/infra';
+import { useCallback } from 'react';
+
+import * as styles from './edgeless-block-header.css';
+
+export const DocInfoButton = ({
+  docId,
+  trackFn,
+  'data-testid': dataTestId,
+}: {
+  docId: string;
+  trackFn?: () => void;
+  'data-testid'?: string;
+}) => {
+  const t = useI18n();
+  const workspaceDialogService = useService(WorkspaceDialogService);
+
+  const onClick = useCallback(() => {
+    trackFn?.();
+    workspaceDialogService.open('doc-info', { docId });
+  }, [docId, trackFn, workspaceDialogService]);
+
+  return (
+    <IconButton
+      className={styles.button}
+      size={styles.iconSize}
+      tooltip={t['com.affine.page-properties.page-info.view']()}
+      data-testid={dataTestId}
+      onClick={onClick}
+    >
+      <InformationIcon />
+    </IconButton>
+  );
+};
+
+export const CopyLinkButton = ({
+  pageId,
+  blockId,
+  mode,
+  trackFn,
+  'data-testid': dataTestId,
+}: {
+  pageId: string;
+  blockId?: string;
+  mode?: DocMode;
+  trackFn?: () => void;
+  'data-testid'?: string;
+}) => {
+  const t = useI18n();
+  const workspace = useService(WorkspaceService).workspace;
+
+  const { onClickCopyLink } = useSharingUrl({
+    workspaceId: workspace.id,
+    pageId,
+  });
+
+  const copyLink = useCallback(() => {
+    trackFn?.();
+    onClickCopyLink(mode, blockId ? [blockId] : undefined);
+  }, [blockId, mode, onClickCopyLink, trackFn]);
+
+  return (
+    <IconButton
+      className={styles.button}
+      size={styles.iconSize}
+      tooltip={t['com.affine.share-menu.copy']()}
+      data-testid={dataTestId}
+      onClick={copyLink}
+    >
+      <LinkIcon />
+    </IconButton>
+  );
+};

packages/frontend/core/src/blocksuite/extensions/edgeless-block-header/edgeless-block-header.css.ts

@@ -17,18 +17,50 @@ export const title = style({
   alignItems: 'center',
   gap: 4,
   flex: 1,
-  color: cssVarV2('text/primary'),
   fontFamily: 'Inter',
-  fontWeight: 600,
-  lineHeight: '30px',
 });
 
+export const noteTitle = style([
+  title,
+  {
+    color: cssVarV2('text/primary'),
+    fontWeight: 600,
+    lineHeight: '30px',
+  },
+]);
+
+export const embedSyncedDocTitle = style([
+  title,
+  {
+    color: cssVarV2('text/secondary'),
+    fontWeight: 400,
+    lineHeight: '24px',
+    fontSize: '15px',
+    selectors: {
+      '&[data-collapsed="true"]': {
+        color: cssVarV2('text/primary'),
+        fontWeight: 500,
+      },
+    },
+  },
+]);
+
 export const iconSize = 24;
 const buttonPadding = 4;
 export const button = style({
   padding: buttonPadding,
   pointerEvents: 'auto',
   color: cssVarV2('icon/transparentBlack'),
+  borderRadius: 4,
 });
 
+export const buttonText = style([
+  embedSyncedDocTitle,
+  {
+    paddingLeft: 4,
+    paddingRight: 4,
+    fontWeight: 500,
+  },
+]);
+
 export const headerHeight = 2 * headerPadding + iconSize + 2 * buttonPadding;

packages/frontend/core/src/blocksuite/extensions/edgeless-block-header/edgeless-embed-synced-doc-header.tsx

@@ -0,0 +1,265 @@
+import { Button, IconButton, Menu, MenuItem } from '@affine/component';
+import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
+import { WorkbenchService } from '@affine/core/modules/workbench';
+import { stopPropagation } from '@affine/core/utils';
+import { useI18n } from '@affine/i18n';
+import { EmbedSyncedDocBlockComponent } from '@blocksuite/affine/blocks/embed';
+import { isPeekable, peek } from '@blocksuite/affine/components/peek';
+import { DisposableGroup } from '@blocksuite/affine/global/disposable';
+import { Bound } from '@blocksuite/affine/global/gfx';
+import type { EmbedSyncedDocModel } from '@blocksuite/affine-model';
+import {
+  ArrowDownSmallIcon,
+  CenterPeekIcon,
+  ExpandFullIcon,
+  LinkedPageIcon,
+  OpenInNewIcon,
+  SplitViewIcon,
+  ToggleDownIcon,
+  ToggleRightIcon,
+} from '@blocksuite/icons/rc';
+import type { BlockStdScope } from '@blocksuite/std';
+import { batch } from '@preact/signals-core';
+import { useLiveData, useService } from '@toeverything/infra';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { CopyLinkButton, DocInfoButton } from './common';
+import * as styles from './edgeless-block-header.css';
+
+const ToggleButton = ({ model }: { model: EmbedSyncedDocModel }) => {
+  const [isFolded, setIsFolded] = useState(model.isFolded);
+  const t = useI18n();
+
+  useEffect(() => {
+    const disposables = new DisposableGroup();
+    disposables.add(
+      model.props.preFoldHeight$.subscribe(value => setIsFolded(!!value))
+    );
+    // the height may be changed by dragging selected rect
+    disposables.add(
+      model.xywh$.subscribe(value => {
+        const bound = Bound.deserialize(value);
+        const preFoldHeight = model.props.preFoldHeight$.peek();
+        if (
+          bound.h !== styles.headerHeight &&
+          preFoldHeight !== undefined &&
+          bound.h !== preFoldHeight
+        ) {
+          model.props.preFoldHeight$.value = 0;
+        }
+      })
+    );
+
+    return () => disposables.dispose();
+  }, [model.props.preFoldHeight$, model.xywh$]);
+
+  const toggle = useCallback(() => {
+    model.doc.captureSync();
+
+    batch(() => {
+      const { x, y, w, h } = model.elementBound;
+      if (model.isFolded) {
+        model.props.xywh$.value = `[${x},${y},${w},${model.props.preFoldHeight$.peek() ?? 1}]`;
+        model.props.preFoldHeight$.value = 0;
+      } else {
+        model.props.preFoldHeight$.value = h;
+        model.props.xywh$.value = `[${x},${y},${w},${styles.headerHeight}]`;
+      }
+    });
+  }, [model]);
+
+  return (
+    <IconButton
+      className={styles.button}
+      size={styles.iconSize}
+      onClick={toggle}
+      tooltip={
+        isFolded
+          ? t['com.affine.editor.edgeless-embed-synced-doc-header.unfold']()
+          : t['com.affine.editor.edgeless-embed-synced-doc-header.fold']()
+      }
+      icon={isFolded ? <ToggleRightIcon /> : <ToggleDownIcon />}
+    />
+  );
+};
+
+const Title = ({ model }: { model: EmbedSyncedDocModel }) => {
+  const docDisplayMetaService = useService(DocDisplayMetaService);
+  const title = useLiveData(
+    docDisplayMetaService.title$(model.props.pageId, {
+      title: model.props.title,
+      reference: true,
+    })
+  );
+
+  return (
+    <div
+      className={styles.embedSyncedDocTitle}
+      data-collapsed={!!model.props.preFoldHeight}
+      data-testid="edgeless-embed-synced-doc-title"
+    >
+      <LinkedPageIcon />
+      <span>{title}</span>
+    </div>
+  );
+};
+
+const EmbedSyncedDocInfoButton = ({
+  model,
+}: {
+  model: EmbedSyncedDocModel;
+}) => {
+  return (
+    <DocInfoButton
+      docId={model.props.pageId}
+      data-testid="edgeless-embed-synced-doc-info-button"
+    />
+  );
+};
+
+const EmbedSyncedDocCopyLinkButton = ({
+  model,
+}: {
+  model: EmbedSyncedDocModel;
+}) => {
+  return (
+    <CopyLinkButton
+      pageId={model.props.pageId}
+      data-testid="edgeless-embed-synced-doc-copy-link-button"
+    />
+  );
+};
+
+const OpenButton = ({ model }: { model: EmbedSyncedDocModel }) => {
+  const t = useI18n();
+  const workbench = useService(WorkbenchService).workbench;
+
+  const open = useCallback(() => {
+    workbench.openDoc({
+      docId: model.props.pageId,
+    });
+  }, [model.props.pageId, workbench]);
+
+  return (
+    <Button
+      className={styles.button}
+      variant="plain"
+      size="custom"
+      onClick={open}
+      prefixStyle={{
+        width: `${styles.iconSize}px`,
+        height: `${styles.iconSize}px`,
+      }}
+      prefix={<ExpandFullIcon />}
+    >
+      <span className={styles.buttonText}>
+        {t['com.affine.editor.edgeless-embed-synced-doc-header.open']()}
+      </span>
+    </Button>
+  );
+};
+
+const MoreMenu = ({
+  model,
+  std,
+}: {
+  model: EmbedSyncedDocModel;
+  std: BlockStdScope;
+}) => {
+  const t = useI18n();
+  const workbench = useService(WorkbenchService).workbench;
+
+  const controls = useMemo(() => {
+    return [
+      {
+        type: 'open-in-active-view',
+        label: t['com.affine.peek-view-controls.open-doc'](),
+        icon: <ExpandFullIcon />,
+        onClick: () => {
+          workbench.openDoc(model.props.pageId);
+        },
+        enabled: true,
+      },
+      {
+        type: 'open-in-center-peek',
+        label: t['com.affine.peek-view-controls.open-doc-in-center-peek'](),
+        icon: <CenterPeekIcon />,
+        onClick: () => {
+          const block = std.view.getBlock(model.id);
+          if (
+            !(
+              block instanceof EmbedSyncedDocBlockComponent && isPeekable(block)
+            )
+          )
+            return;
+          peek(block);
+        },
+        enabled: true,
+      },
+      {
+        type: 'open-in-split-view',
+        label: t['com.affine.peek-view-controls.open-doc-in-split-view'](),
+        icon: <SplitViewIcon />,
+        onClick: () => {
+          workbench.openDoc(model.props.pageId, { at: 'beside' });
+        },
+        enabled: BUILD_CONFIG.isElectron,
+      },
+      {
+        type: 'open-in-new-tab',
+        label: t['com.affine.peek-view-controls.open-doc-in-new-tab'](),
+        icon: <OpenInNewIcon />,
+        onClick: () => {
+          workbench.openDoc(model.props.pageId, {
+            at: 'new-tab',
+          });
+        },
+        enabled: true,
+      },
+    ].filter(({ enabled }) => enabled);
+  }, [model.id, model.props.pageId, std.view, t, workbench]);
+
+  return (
+    <Menu
+      items={controls.map(option => (
+        <MenuItem
+          key={option.type}
+          type="default"
+          prefixIcon={option.icon}
+          onClick={option.onClick}
+        >
+          {option.label}
+        </MenuItem>
+      ))}
+      contentOptions={{
+        align: 'center',
+      }}
+    >
+      <IconButton
+        className={styles.button}
+        size={styles.iconSize}
+        icon={<ArrowDownSmallIcon />}
+        onDoubleClickCapture={stopPropagation}
+      />
+    </Menu>
+  );
+};
+
+export const EdgelessEmbedSyncedDocHeader = ({
+  model,
+  std,
+}: {
+  model: EmbedSyncedDocModel;
+  std: BlockStdScope;
+}) => {
+  return (
+    <div className={styles.header} onPointerDown={stopPropagation}>
+      <ToggleButton model={model} />
+      <Title model={model} />
+      <OpenButton model={model} />
+      <MoreMenu model={model} std={std} />
+      <EmbedSyncedDocInfoButton model={model} />
+      <EmbedSyncedDocCopyLinkButton model={model} />
+    </div>
+  );
+};

packages/frontend/core/src/blocksuite/extensions/edgeless-block-header/edgeless-note-header.tsx

@@ -1,10 +1,7 @@
 import { IconButton } from '@affine/component';
-import { useSharingUrl } from '@affine/core/components/hooks/affine/use-share-url';
-import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
 import { DocService } from '@affine/core/modules/doc';
 import { EditorService } from '@affine/core/modules/editor';
 import { useInsidePeekView } from '@affine/core/modules/peek-view/view/modal-container';
-import { WorkspaceService } from '@affine/core/modules/workspace';
 import { extractEmojiIcon } from '@affine/core/utils';
 import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
@@ -12,16 +9,15 @@ import { Bound } from '@blocksuite/affine/global/gfx';
 import { type NoteBlockModel } from '@blocksuite/affine/model';
 import { GfxControllerIdentifier } from '@blocksuite/affine/std/gfx';
 import {
-  InformationIcon,
   LinkedPageIcon,
-  LinkIcon,
   ToggleDownIcon,
   ToggleRightIcon,
 } from '@blocksuite/icons/rc';
-import { useLiveData, useService, useServices } from '@toeverything/infra';
+import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import * as styles from './edgeless-note-header.css';
+import { CopyLinkButton, DocInfoButton } from './common';
+import * as styles from './edgeless-block-header.css';
 
 const EdgelessNoteToggleButton = ({ note }: { note: NoteBlockModel }) => {
   const t = useI18n();
@@ -97,7 +93,7 @@ const EdgelessNoteToggleButton = ({ note }: { note: NoteBlockModel }) => {
       >
         {collapsed ? <ToggleRightIcon /> : <ToggleDownIcon />}
       </IconButton>
-      <div className={styles.title} data-testid="edgeless-note-title">
+      <div className={styles.noteTitle} data-testid="edgeless-note-title">
         {collapsed && (
           <>
             {emoji && <span>{emoji}</span>}
@@ -131,55 +127,33 @@ const ViewInPageButton = () => {
   );
 };
 
-const InfoButton = ({ note }: { note: NoteBlockModel }) => {
+const PageBlockInfoButton = ({ note }: { note: NoteBlockModel }) => {
-  const t = useI18n();
+  const trackFn = useCallback(() => {
-  const workspaceDialogService = useService(WorkspaceDialogService);
-
-  const onOpenInfoModal = useCallback(() => {
     track.edgeless.pageBlock.headerToolbar.openDocInfo();
-    workspaceDialogService.open('doc-info', { docId: note.doc.id });
+  }, []);
-  }, [note.doc.id, workspaceDialogService]);
 
   return (
-    <IconButton
+    <DocInfoButton
-      className={styles.button}
+      docId={note.doc.id}
-      size={styles.iconSize}
+      trackFn={trackFn}
-      tooltip={t['com.affine.page-properties.page-info.view']()}
       data-testid="edgeless-note-info-button"
-      onClick={onOpenInfoModal}
+    />
-    >
-      <InformationIcon />
-    </IconButton>
   );
 };
 
-const LinkButton = ({ note }: { note: NoteBlockModel }) => {
+const NoteCopyLinkButton = ({ note }: { note: NoteBlockModel }) => {
-  const t = useI18n();
+  const trackFn = useCallback(() => {
-  const { workspaceService, editorService } = useServices({
-    WorkspaceService,
-    EditorService,
-  });
-
-  const { onClickCopyLink } = useSharingUrl({
-    workspaceId: workspaceService.workspace.id,
-    pageId: editorService.editor.doc.id,
-  });
-
-  const copyLink = useCallback(() => {
     track.edgeless.pageBlock.headerToolbar.copyBlockToLink();
-    onClickCopyLink('edgeless', [note.id]);
+  }, []);
-  }, [note.id, onClickCopyLink]);
 
   return (
-    <IconButton
+    <CopyLinkButton
-      className={styles.button}
+      pageId={note.doc.id}
-      size={styles.iconSize}
+      blockId={note.id}
-      tooltip={t['com.affine.share-menu.copy']()}
+      mode="edgeless"
+      trackFn={trackFn}
       data-testid="edgeless-note-link-button"
-      onClick={copyLink}
+    />
-    >
-      <LinkIcon />
-    </IconButton>
   );
 };
 
@@ -192,8 +166,8 @@ export const EdgelessNoteHeader = ({ note }: { note: NoteBlockModel }) => {
     <div className={styles.header} data-testid="edgeless-page-block-header">
       <EdgelessNoteToggleButton note={note} />
       <ViewInPageButton />
-      {!insidePeekView && <InfoButton note={note} />}
+      {!insidePeekView && <PageBlockInfoButton note={note} />}
-      <LinkButton note={note} />
+      <NoteCopyLinkButton note={note} />
     </div>
   );
 };

packages/frontend/core/src/blocksuite/extensions/edgeless-block-header/index.tsx

@@ -1,5 +1,6 @@
 import type { ElementOrFactory } from '@affine/component';
 import { JournalService } from '@affine/core/modules/journal';
+import { EmbedSyncedDocConfigExtension } from '@blocksuite/affine/blocks/embed';
 import { NoteConfigExtension } from '@blocksuite/affine/blocks/note';
 import { EDGELESS_BLOCK_CHILD_PADDING } from '@blocksuite/affine/blocks/root';
 import { Bound, Vec } from '@blocksuite/affine/global/gfx';
@@ -12,6 +13,7 @@ import type { FrameworkProvider } from '@toeverything/infra';
 import { html, type TemplateResult } from 'lit';
 
 import { BlocksuiteEditorJournalDocTitle } from '../../block-suite-editor/journal-doc-title';
+import { EdgelessEmbedSyncedDocHeader } from './edgeless-embed-synced-doc-header';
 import { EdgelessNoteHeader } from './edgeless-note-header';
 
 export function patchForEdgelessNoteConfig(
@@ -97,3 +99,12 @@ export function patchForEdgelessNoteConfig(
         },
   });
 }
+
+export function patchForEmbedSyncedDocConfig(
+  reactToLit: (element: ElementOrFactory) => TemplateResult
+) {
+  return EmbedSyncedDocConfigExtension({
+    edgelessHeader: ({ model, std }) =>
+      reactToLit(<EdgelessEmbedSyncedDocHeader model={model} std={std} />),
+  });
+}

packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts

@@ -1094,7 +1094,19 @@ export const createCustomToolbarExtension = (
         actions: [
           embedSyncedDocToolbarConfig.actions,
           createOpenDocActionGroup(EmbedSyncedDocBlockComponent, settings),
-          createEdgelessOpenDocActionGroup(EmbedSyncedDocBlockComponent),
+        ].flat(),
+      },
+    }),
+
+    ToolbarModuleExtension({
+      id: BlockFlavourIdentifier('custom:affine:surface:embed-synced-doc'),
+      config: {
+        actions: [
+          // the open actions are provided by the header of embed-edgeless-synced-doc-block
+          {
+            id: 'A.open-doc',
+            when: () => false,
+          },
         ].flat(),
       },
     }),

packages/frontend/i18n/src/i18n-completenesses.json

@@ -1,26 +1,26 @@
 {
-  "ar": 99,
+  "ar": 98,
   "ca": 4,
   "da": 4,
-  "de": 99,
+  "de": 98,
-  "el-GR": 99,
+  "el-GR": 98,
   "en": 100,
   "es-AR": 99,
   "es-CL": 100,
-  "es": 99,
+  "es": 98,
-  "fa": 99,
+  "fa": 98,
-  "fr": 99,
+  "fr": 98,
   "hi": 2,
-  "it-IT": 99,
+  "it-IT": 98,
   "it": 1,
-  "ja": 99,
+  "ja": 98,
   "ko": 57,
-  "pl": 99,
+  "pl": 98,
-  "pt-BR": 99,
+  "pt-BR": 98,
-  "ru": 99,
+  "ru": 98,
-  "sv-SE": 99,
+  "sv-SE": 98,
-  "uk": 99,
+  "uk": 98,
   "ur": 2,
-  "zh-Hans": 99,
+  "zh-Hans": 98,
-  "zh-Hant": 99
+  "zh-Hant": 98
 }

packages/frontend/i18n/src/i18n.gen.ts

@@ -7143,6 +7143,18 @@ export function useAFFiNEI18N(): {
       * `View in page`
       */
     ["com.affine.editor.edgeless-note-header.view-in-page"](): string;
+    /**
+      * `Fold`
+      */
+    ["com.affine.editor.edgeless-embed-synced-doc-header.fold"](): string;
+    /**
+      * `Unfold`
+      */
+    ["com.affine.editor.edgeless-embed-synced-doc-header.unfold"](): string;
+    /**
+      * `Open`
+      */
+    ["com.affine.editor.edgeless-embed-synced-doc-header.open"](): string;
     /**
       * `Empower Your Team with Seamless Collaboration`
       */

packages/frontend/i18n/src/resources/en.json

@@ -1775,6 +1775,9 @@
   "com.affine.editor.bi-directional-link-panel.hide": "Hide",
   "com.affine.editor.edgeless-note-header.fold-page-block": "Fold page block",
   "com.affine.editor.edgeless-note-header.view-in-page": "View in page",
+  "com.affine.editor.edgeless-embed-synced-doc-header.fold": "Fold",
+  "com.affine.editor.edgeless-embed-synced-doc-header.unfold": "Unfold",
+  "com.affine.editor.edgeless-embed-synced-doc-header.open": "Open",
   "com.affine.upgrade-to-team-page.title": "Empower Your Team with Seamless Collaboration",
   "com.affine.upgrade-to-team-page.workspace-selector.placeholder": "Select an existing workspace or create a new one",
   "com.affine.upgrade-to-team-page.workspace-selector.create-workspace": "Create Workspace",

tests/blocksuite/e2e/edgeless/linked-doc.spec.ts

@@ -7,7 +7,6 @@ import {
   createShapeElement,
   edgelessCommonSetup,
   getConnectorPath,
-  locatorComponentToolbarMoreButton,
   selectNoteInEdgeless,
   Shape,
   triggerComponentToolbarAction,
@@ -36,20 +35,15 @@ test.describe('note to linked doc', () => {
     await selectNoteInEdgeless(page, noteId);
     await triggerComponentToolbarAction(page, 'turnIntoLinkedDoc');
 
-    await waitNextFrame(page, 200);
+    const embedSyncedBlock = page.locator(
-    const embedSyncedBlock = page.locator('affine-embed-synced-doc-block');
+      'affine-embed-edgeless-synced-doc-block'
-    if (!embedSyncedBlock) {
+    );
-      throw new Error('embedSyncedBlock is not found');
+    await expect(embedSyncedBlock).toBeVisible();
-    }
+    const paragraph = embedSyncedBlock.locator(
-
+      'affine-paragraph [data-v-text="true"]'
-    await triggerComponentToolbarAction(page, 'openLinkedDoc');
+    );
-    await waitNextFrame(page, 200);
+    await expect(paragraph.nth(0)).toHaveText('Hello');
-    const noteBlock = page.locator('affine-edgeless-note');
+    await expect(paragraph.nth(1)).toHaveText('World');
-    if (!noteBlock) {
-      throw new Error('noteBlock is not found');
-    }
-    const noteContent = await noteBlock.innerText();
-    expect(noteContent).toBe('Hello\nWorld');
   });
 
   test('turn note into a linked doc, connector keeps', async ({ page }) => {
@@ -71,47 +65,6 @@ test.describe('note to linked doc', () => {
 
     await assertConnectorPath(page, [connectorPath[0], connectorPath[1]], 0);
   });
-
-  // TODO FIX ME
-  test.skip('embed-synced-doc card can not turn into linked doc', async ({
-    page,
-  }) => {
-    await edgelessCommonSetup(page);
-    const noteId = await createNote(page, [100, 0]);
-    await activeNoteInEdgeless(page, noteId);
-    await waitNextFrame(page, 200);
-    await type(page, 'Hello World');
-
-    await page.mouse.click(10, 50);
-    await selectNoteInEdgeless(page, noteId);
-    await triggerComponentToolbarAction(page, 'turnIntoLinkedDoc');
-
-    const moreButton = locatorComponentToolbarMoreButton(page);
-    await moreButton.click();
-    const turnButton = page.locator('.turn-into-linked-doc');
-    await expect(turnButton).toBeHidden();
-  });
-
-  // TODO FIX ME
-  test.skip('embed-linked-doc card can not turn into linked doc', async ({
-    page,
-  }) => {
-    await edgelessCommonSetup(page);
-    const noteId = await createNote(page, [100, 0]);
-    await activeNoteInEdgeless(page, noteId);
-    await waitNextFrame(page, 200);
-    await type(page, 'Hello World');
-
-    await page.mouse.click(10, 50);
-    await selectNoteInEdgeless(page, noteId);
-    await triggerComponentToolbarAction(page, 'turnIntoLinkedDoc');
-
-    await triggerComponentToolbarAction(page, 'toCardView');
-    const moreButton = locatorComponentToolbarMoreButton(page);
-    await moreButton.click();
-    const turnButton = page.locator('.turn-into-linked-doc');
-    await expect(turnButton).toBeHidden();
-  });
 });
 
 test.describe('single edgeless element to linked doc', () => {

tests/blocksuite/package.json

@@ -9,7 +9,7 @@
     "@blocksuite/affine": "workspace:*",
     "@blocksuite/integration-test": "workspace:*",
     "@playwright/test": "=1.52.0",
-    "@toeverything/theme": "^1.1.12",
+    "@toeverything/theme": "^1.1.14",
     "json-stable-stringify": "^1.2.1",
     "rxjs": "^7.8.1"
   },

yarn.lock

@@ -87,7 +87,7 @@ __metadata:
     "@blocksuite/affine": "workspace:*"
     "@blocksuite/integration-test": "workspace:*"
     "@playwright/test": "npm:=1.52.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     json-stable-stringify: "npm:^1.2.1"
     rxjs: "npm:^7.8.1"
   languageName: unknown
@@ -215,7 +215,7 @@ __metadata:
     "@sentry/react": "npm:^9.2.0"
     "@tanstack/react-table": "npm:^8.20.5"
     "@toeverything/infra": "workspace:*"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     class-variance-authority: "npm:^0.7.1"
     clsx: "npm:^2.1.1"
@@ -339,7 +339,7 @@ __metadata:
     "@storybook/react-vite": "npm:^8.4.7"
     "@testing-library/dom": "npm:^10.4.0"
     "@testing-library/react": "npm:^16.1.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/bytes": "npm:^3.1.5"
     "@types/react": "npm:^19.0.1"
     "@types/react-dom": "npm:^19.0.2"
@@ -424,7 +424,7 @@ __metadata:
     "@testing-library/react": "npm:^16.1.0"
     "@toeverything/infra": "workspace:*"
     "@toeverything/pdf-viewer": "npm:^0.1.1"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/animejs": "npm:^3.1.12"
     "@types/bytes": "npm:^3.1.5"
     "@types/image-blob-reduce": "npm:^4.1.4"
@@ -524,7 +524,7 @@ __metadata:
     "@emotion/react": "npm:^11.14.0"
     "@sentry/react": "npm:^9.2.0"
     "@toeverything/infra": "workspace:*"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/react": "npm:^19.0.1"
     "@types/react-dom": "npm:^19.0.2"
     "@vanilla-extract/css": "npm:^1.17.0"
@@ -2421,7 +2421,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     file-type: "npm:^20.0.0"
     lit: "npm:^3.2.0"
     minimatch: "npm:^10.0.1"
@@ -2447,7 +2447,7 @@ __metadata:
     "@blocksuite/store": "workspace:*"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     lit: "npm:^3.2.0"
     minimatch: "npm:^10.0.1"
     rxjs: "npm:^7.8.1"
@@ -2476,7 +2476,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.10"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/mdast": "npm:^4.0.4"
     emoji-mart: "npm:^5.6.0"
     lit: "npm:^3.2.0"
@@ -2507,7 +2507,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/mdast": "npm:^4.0.4"
     lit: "npm:^3.2.0"
     minimatch: "npm:^10.0.1"
@@ -2535,7 +2535,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/mdast": "npm:^4.0.4"
     lit: "npm:^3.2.0"
     minimatch: "npm:^10.0.1"
@@ -2565,7 +2565,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/mdast": "npm:^4.0.4"
     "@vanilla-extract/css": "npm:^1.17.0"
     date-fns: "npm:^4.0.0"
@@ -2591,7 +2591,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/mdast": "npm:^4.0.4"
     lit: "npm:^3.2.0"
     minimatch: "npm:^10.0.1"
@@ -2620,7 +2620,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     lit: "npm:^3.2.0"
     minimatch: "npm:^10.0.1"
     rxjs: "npm:^7.8.1"
@@ -2647,7 +2647,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     lit: "npm:^3.2.0"
     lodash-es: "npm:^4.17.21"
@@ -2677,7 +2677,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/mdast": "npm:^4.0.4"
     lit: "npm:^3.2.0"
     minimatch: "npm:^10.0.1"
@@ -2706,7 +2706,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     file-type: "npm:^20.0.0"
     lit: "npm:^3.2.0"
     minimatch: "npm:^10.0.1"
@@ -2734,7 +2734,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/katex": "npm:^0.16.7"
     "@types/mdast": "npm:^4.0.4"
     katex: "npm:^0.16.11"
@@ -2764,7 +2764,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/mdast": "npm:^4.0.4"
     lit: "npm:^3.2.0"
     minimatch: "npm:^10.0.1"
@@ -2795,7 +2795,7 @@ __metadata:
     "@blocksuite/store": "workspace:*"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     "@types/mdast": "npm:^4.0.4"
     "@vanilla-extract/css": "npm:^1.17.0"
@@ -2824,7 +2824,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/mdast": "npm:^4.0.4"
     lit: "npm:^3.2.0"
     minimatch: "npm:^10.0.1"
@@ -2870,7 +2870,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     dompurify: "npm:^3.2.4"
     html2canvas: "npm:^1.4.1"
@@ -2902,7 +2902,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     fractional-indexing: "npm:^3.2.0"
     lit: "npm:^3.2.0"
@@ -2927,7 +2927,7 @@ __metadata:
     "@blocksuite/store": "workspace:*"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     fractional-indexing: "npm:^3.2.0"
     html2canvas: "npm:^1.4.1"
@@ -2983,7 +2983,7 @@ __metadata:
     "@lit/context": "npm:^1.1.2"
     "@lottiefiles/dotlottie-wc": "npm:^0.5.0"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/hast": "npm:^3.0.4"
     "@types/katex": "npm:^0.16.7"
     "@types/lodash-es": "npm:^4.17.12"
@@ -3029,7 +3029,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     lit: "npm:^3.2.0"
     lodash-es: "npm:^4.17.21"
@@ -3057,7 +3057,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     lit: "npm:^3.2.0"
     minimatch: "npm:^10.0.1"
     rxjs: "npm:^7.8.1"
@@ -3083,7 +3083,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     lit: "npm:^3.2.0"
     lodash-es: "npm:^4.17.21"
@@ -3111,7 +3111,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@vanilla-extract/css": "npm:^1.17.0"
     lit: "npm:^3.2.0"
     minimatch: "npm:^10.0.1"
@@ -3137,7 +3137,7 @@ __metadata:
     "@blocksuite/store": "workspace:*"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     lit: "npm:^3.2.0"
     lodash-es: "npm:^4.17.21"
@@ -3166,7 +3166,7 @@ __metadata:
     "@blocksuite/store": "workspace:*"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     lit: "npm:^3.2.0"
     lodash-es: "npm:^4.17.21"
@@ -3195,7 +3195,7 @@ __metadata:
     "@blocksuite/store": "workspace:*"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     lit: "npm:^3.2.0"
     lodash-es: "npm:^4.17.21"
@@ -3226,7 +3226,7 @@ __metadata:
     "@blocksuite/store": "workspace:*"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     lit: "npm:^3.2.0"
     lodash-es: "npm:^4.17.21"
@@ -3260,7 +3260,7 @@ __metadata:
     "@blocksuite/store": "workspace:*"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     lit: "npm:^3.2.0"
     lodash-es: "npm:^4.17.21"
@@ -3292,7 +3292,7 @@ __metadata:
     "@blocksuite/store": "workspace:*"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     lit: "npm:^3.2.0"
     lodash-es: "npm:^4.17.21"
@@ -3320,7 +3320,7 @@ __metadata:
     "@blocksuite/store": "workspace:*"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     lit: "npm:^3.2.0"
     lodash-es: "npm:^4.17.21"
@@ -3349,7 +3349,7 @@ __metadata:
     "@blocksuite/store": "workspace:*"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     lit: "npm:^3.2.0"
     lodash-es: "npm:^4.17.21"
@@ -3379,7 +3379,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     lit: "npm:^3.2.0"
     lodash-es: "npm:^4.17.21"
@@ -3407,7 +3407,7 @@ __metadata:
     "@blocksuite/store": "workspace:*"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     lit: "npm:^3.2.0"
     lodash-es: "npm:^4.17.21"
@@ -3445,7 +3445,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     collapse-white-space: "npm:^2.1.0"
     date-fns: "npm:^4.0.0"
@@ -3475,7 +3475,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/hast": "npm:^3.0.4"
     "@types/katex": "npm:^0.16.7"
     "@types/lodash-es": "npm:^4.17.12"
@@ -3509,7 +3509,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     collapse-white-space: "npm:^2.1.0"
     date-fns: "npm:^4.0.0"
@@ -3537,7 +3537,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     collapse-white-space: "npm:^2.1.0"
     date-fns: "npm:^4.0.0"
@@ -3571,7 +3571,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/hast": "npm:^3.0.4"
     "@types/katex": "npm:^0.16.7"
     "@types/lodash-es": "npm:^4.17.12"
@@ -3605,7 +3605,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     collapse-white-space: "npm:^2.1.0"
     date-fns: "npm:^4.0.0"
@@ -3625,7 +3625,7 @@ __metadata:
     "@blocksuite/global": "workspace:*"
     "@blocksuite/std": "workspace:*"
     "@blocksuite/store": "workspace:*"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     fractional-indexing: "npm:^3.2.0"
     lodash-es: "npm:^4.17.21"
@@ -3649,7 +3649,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     collapse-white-space: "npm:^2.1.0"
     date-fns: "npm:^4.0.0"
@@ -3674,7 +3674,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/hast": "npm:^3.0.4"
     "@types/lodash-es": "npm:^4.17.12"
     "@types/mdast": "npm:^4.0.4"
@@ -3728,7 +3728,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     lit: "npm:^3.2.0"
     lodash-es: "npm:^4.17.21"
@@ -3752,7 +3752,7 @@ __metadata:
     "@blocksuite/icons": "npm:^2.2.12"
     "@blocksuite/std": "workspace:*"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     lit: "npm:^3.2.0"
     rxjs: "npm:^7.8.1"
   languageName: unknown
@@ -3774,7 +3774,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     lit: "npm:^3.2.0"
     lodash-es: "npm:^4.17.21"
@@ -3796,7 +3796,7 @@ __metadata:
     "@blocksuite/std": "workspace:*"
     "@floating-ui/dom": "npm:^1.6.13"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     lit: "npm:^3.2.0"
     lodash-es: "npm:^4.17.21"
@@ -3817,7 +3817,7 @@ __metadata:
     "@blocksuite/std": "workspace:*"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     lit: "npm:^3.2.0"
     rxjs: "npm:^7.8.1"
   languageName: unknown
@@ -3854,7 +3854,7 @@ __metadata:
     "@blocksuite/store": "workspace:*"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     fflate: "npm:^0.8.2"
     lit: "npm:^3.2.0"
@@ -3880,7 +3880,7 @@ __metadata:
     "@blocksuite/store": "workspace:*"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     fflate: "npm:^0.8.2"
     lit: "npm:^3.2.0"
@@ -3903,7 +3903,7 @@ __metadata:
     "@blocksuite/store": "workspace:*"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     fflate: "npm:^0.8.2"
     lit: "npm:^3.2.0"
@@ -3925,7 +3925,7 @@ __metadata:
     "@blocksuite/icons": "npm:^2.2.12"
     "@blocksuite/std": "workspace:*"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     lit: "npm:^3.2.0"
     lodash-es: "npm:^4.17.21"
@@ -3943,7 +3943,7 @@ __metadata:
     "@blocksuite/global": "workspace:*"
     "@blocksuite/std": "workspace:*"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     lit: "npm:^3.2.0"
     rxjs: "npm:^7.8.1"
   languageName: unknown
@@ -3963,7 +3963,7 @@ __metadata:
     "@blocksuite/store": "workspace:*"
     "@floating-ui/dom": "npm:^1.6.13"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     lit: "npm:^3.2.0"
     lodash-es: "npm:^4.17.21"
@@ -3987,7 +3987,7 @@ __metadata:
     "@blocksuite/std": "workspace:*"
     "@floating-ui/dom": "npm:^1.6.13"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     lit: "npm:^3.2.0"
     lodash-es: "npm:^4.17.21"
@@ -4008,7 +4008,7 @@ __metadata:
     "@blocksuite/std": "workspace:*"
     "@floating-ui/dom": "npm:^1.6.13"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     lit: "npm:^3.2.0"
     lodash-es: "npm:^4.17.21"
@@ -4113,7 +4113,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@types/lodash-es": "npm:^4.17.12"
     "@vanilla-extract/css": "npm:^1.17.0"
     clsx: "npm:^2.1.1"
@@ -4166,7 +4166,7 @@ __metadata:
     "@lit/context": "npm:^1.1.3"
     "@lottiefiles/dotlottie-wc": "npm:^0.5.0"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.12"
+    "@toeverything/theme": "npm:^1.1.14"
     "@vanilla-extract/css": "npm:^1.17.0"
     "@vanilla-extract/vite-plugin": "npm:^5.0.0"
     lit: "npm:^3.2.0"
@@ -14529,7 +14529,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@toeverything/theme@npm:^1.1.12":
+"@toeverything/theme@npm:^1.1.14":
   version: 1.1.14
   resolution: "@toeverything/theme@npm:1.1.14"
   checksum: 10/40d94903d2424e1877c9a50f4fa32a89a6995defc9c2c78dbcfbb73525b93f73f3b241b15db5144496c9311cf57b254ad084de63f33c1b2c31dbdb8a05d55f7f