diff --git a/blocksuite/affine/blocks/block-edgeless-text/package.json b/blocksuite/affine/blocks/block-edgeless-text/package.json
index a95f785153..707f8fb03c 100644
--- a/blocksuite/affine/blocks/block-edgeless-text/package.json
+++ b/blocksuite/affine/blocks/block-edgeless-text/package.json
@@ -16,6 +16,7 @@
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",
     "@blocksuite/icons": "^2.2.6",
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/edgeless-text.ts b/blocksuite/affine/blocks/block-edgeless-text/src/edgelss-toolbar/config.ts
similarity index 90%
rename from blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/edgeless-text.ts
rename to blocksuite/affine/blocks/block-edgeless-text/src/edgelss-toolbar/config.ts
index 8fddbf596a..aba36f45f5 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/edgeless-text.ts
+++ b/blocksuite/affine/blocks/block-edgeless-text/src/edgelss-toolbar/config.ts
@@ -2,7 +2,7 @@ import { EdgelessTextBlockModel } from '@blocksuite/affine-model';
 import { type ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
 import { createTextActions } from '@blocksuite/affine-widget-edgeless-toolbar';
 
-export const builtinEdgelessTextToolbarConfig = {
+export const edgelessTextToolbarConfig = {
   // No need to adjust element bounds, which updates itself using ResizeObserver
   actions: createTextActions(EdgelessTextBlockModel, 'edgeless-text'),
 
diff --git a/blocksuite/affine/blocks/block-edgeless-text/src/edgelss-toolbar/index.ts b/blocksuite/affine/blocks/block-edgeless-text/src/edgelss-toolbar/index.ts
new file mode 100644
index 0000000000..f03c2281a9
--- /dev/null
+++ b/blocksuite/affine/blocks/block-edgeless-text/src/edgelss-toolbar/index.ts
@@ -0,0 +1 @@
+export * from './config';
diff --git a/blocksuite/affine/blocks/block-edgeless-text/src/index.ts b/blocksuite/affine/blocks/block-edgeless-text/src/index.ts
index 35218cbef2..355d04d986 100644
--- a/blocksuite/affine/blocks/block-edgeless-text/src/index.ts
+++ b/blocksuite/affine/blocks/block-edgeless-text/src/index.ts
@@ -1,3 +1,4 @@
 export * from './commands';
 export * from './edgeless-text-block.js';
 export * from './edgeless-text-spec.js';
+export * from './edgelss-toolbar';
diff --git a/blocksuite/affine/blocks/block-edgeless-text/tsconfig.json b/blocksuite/affine/blocks/block-edgeless-text/tsconfig.json
index 8b82812cb7..0166f9138d 100644
--- a/blocksuite/affine/blocks/block-edgeless-text/tsconfig.json
+++ b/blocksuite/affine/blocks/block-edgeless-text/tsconfig.json
@@ -13,6 +13,7 @@
     { "path": "../../model" },
     { "path": "../../rich-text" },
     { "path": "../../shared" },
+    { "path": "../../widgets/widget-edgeless-toolbar" },
     { "path": "../../../framework/block-std" },
     { "path": "../../../framework/global" },
     { "path": "../../../framework/store" }
diff --git a/blocksuite/affine/blocks/block-frame/package.json b/blocksuite/affine/blocks/block-frame/package.json
index 83b68369e5..807fbb2bdc 100644
--- a/blocksuite/affine/blocks/block-frame/package.json
+++ b/blocksuite/affine/blocks/block-frame/package.json
@@ -14,6 +14,7 @@
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
     "@blocksuite/affine-widget-frame-title": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/frame/config.ts b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/config.ts
similarity index 100%
rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/frame/config.ts
rename to blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/config.ts
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/frame/frame-dense-menu.ts b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/frame-dense-menu.ts
similarity index 81%
rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/frame/frame-dense-menu.ts
rename to blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/frame-dense-menu.ts
index ae12d61c23..7850008864 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/frame/frame-dense-menu.ts
+++ b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/frame-dense-menu.ts
@@ -1,8 +1,8 @@
-import { EdgelessFrameManagerIdentifier } from '@blocksuite/affine-block-frame';
 import { menu } from '@blocksuite/affine-components/context-menu';
+import type { DenseMenuBuilder } from '@blocksuite/affine-widget-edgeless-toolbar';
 import { FrameIcon } from '@blocksuite/icons/lit';
 
-import type { DenseMenuBuilder } from '../common/type.js';
+import { EdgelessFrameManagerIdentifier } from '../frame-manager.js';
 import { FrameConfig } from './config.js';
 
 export const buildFrameDenseMenu: DenseMenuBuilder = (edgeless, gfx) =>
@@ -22,6 +22,7 @@ export const buildFrameDenseMenu: DenseMenuBuilder = (edgeless, gfx) =>
             name: `Slide ${config.name}`,
             select: () => {
               const frame = edgeless.std.get(EdgelessFrameManagerIdentifier);
+              // @ts-expect-error FIXME: resolve after gfx tool refactor
               gfx.tool.setTool('default');
               frame.createFrameOnViewportCenter(config.wh);
             },
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/frame/frame-menu.ts b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/frame-menu.ts
similarity index 94%
rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/frame/frame-menu.ts
rename to blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/frame-menu.ts
index 844f816b9c..ed63d38490 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/frame/frame-menu.ts
+++ b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/frame-menu.ts
@@ -1,9 +1,9 @@
-import { EdgelessFrameManagerIdentifier } from '@blocksuite/affine-block-frame';
 import { EdgelessToolbarToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar';
 import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
 import { css, html, LitElement } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 
+import { EdgelessFrameManagerIdentifier } from '../frame-manager.js';
 import { FrameConfig } from './config.js';
 
 export class EdgelessFrameMenu extends EdgelessToolbarToolMixin(LitElement) {
@@ -84,6 +84,7 @@ export class EdgelessFrameMenu extends EdgelessToolbarToolMixin(LitElement) {
             (item, index) => html`
               <div
                 @click=${() => {
+                  // @ts-expect-error FIXME: resolve after gfx tool refactor
                   gfx.tool.setTool('default');
                   frameManager.createFrameOnViewportCenter(item.wh);
                 }}
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/frame/frame-tool-button.ts b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/frame-tool-button.ts
similarity index 100%
rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/frame/frame-tool-button.ts
rename to blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/frame-tool-button.ts
diff --git a/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/index.ts b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/index.ts
new file mode 100644
index 0000000000..9acaaed752
--- /dev/null
+++ b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/index.ts
@@ -0,0 +1,5 @@
+export * from './config';
+export * from './frame-dense-menu';
+export * from './frame-menu';
+export * from './frame-tool-button';
+export * from './quick-tool';
diff --git a/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/quick-tool.ts b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/quick-tool.ts
new file mode 100644
index 0000000000..4769de3bb1
--- /dev/null
+++ b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/quick-tool.ts
@@ -0,0 +1,15 @@
+import { QuickToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar';
+import { html } from 'lit';
+
+import { buildFrameDenseMenu } from './frame-dense-menu';
+
+export const frameQuickTool = QuickToolExtension('frame', ({ block, gfx }) => {
+  return {
+    type: 'frame',
+    content: html`<edgeless-frame-tool-button
+      .edgeless=${block}
+    ></edgeless-frame-tool-button>`,
+    menu: buildFrameDenseMenu(block, gfx),
+    enable: !block.doc.readonly,
+  };
+});
diff --git a/blocksuite/affine/blocks/block-frame/src/effects.ts b/blocksuite/affine/blocks/block-frame/src/effects.ts
index 557ff8b6a3..9502a23e13 100644
--- a/blocksuite/affine/blocks/block-frame/src/effects.ts
+++ b/blocksuite/affine/blocks/block-frame/src/effects.ts
@@ -1,5 +1,16 @@
+import { EdgelessFrameMenu, EdgelessFrameToolButton } from './edgeless-toolbar';
 import { FrameBlockComponent } from './frame-block';
 
 export function effects() {
   customElements.define('affine-frame', FrameBlockComponent);
+  customElements.define('edgeless-frame-tool-button', EdgelessFrameToolButton);
+  customElements.define('edgeless-frame-menu', EdgelessFrameMenu);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-frame': FrameBlockComponent;
+    'edgeless-frame-tool-button': EdgelessFrameToolButton;
+    'edgeless-frame-menu': EdgelessFrameMenu;
+  }
 }
diff --git a/blocksuite/affine/blocks/block-frame/src/index.ts b/blocksuite/affine/blocks/block-frame/src/index.ts
index aca317812f..49a8c0fe05 100644
--- a/blocksuite/affine/blocks/block-frame/src/index.ts
+++ b/blocksuite/affine/blocks/block-frame/src/index.ts
@@ -1,6 +1,7 @@
 import type { FrameTool } from './frame-tool';
 import type { PresentTool, PresentToolOption } from './preset-tool';
 
+export * from './edgeless-toolbar';
 export * from './frame-block';
 export * from './frame-highlight-manager';
 export * from './frame-manager';
diff --git a/blocksuite/affine/blocks/block-frame/tsconfig.json b/blocksuite/affine/blocks/block-frame/tsconfig.json
index 3df4c6c17c..04c8d82d8c 100644
--- a/blocksuite/affine/blocks/block-frame/tsconfig.json
+++ b/blocksuite/affine/blocks/block-frame/tsconfig.json
@@ -11,6 +11,7 @@
     { "path": "../../components" },
     { "path": "../../model" },
     { "path": "../../shared" },
+    { "path": "../../widgets/widget-edgeless-toolbar" },
     { "path": "../../widgets/widget-frame-title" },
     { "path": "../../../framework/block-std" },
     { "path": "../../../framework/global" },
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/type.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/type.ts
deleted file mode 100644
index 747d420d2a..0000000000
--- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/type.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { MenuConfig } from '@blocksuite/affine-components/context-menu';
-import type { BlockComponent } from '@blocksuite/block-std';
-import type { GfxController } from '@blocksuite/block-std/gfx';
-
-/**
- * Helper function to build a menu configuration for a tool in dense mode
- */
-export type DenseMenuBuilder = (
-  edgeless: BlockComponent,
-  gfx: GfxController
-) => MenuConfig;
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/connector/connector-dense-menu.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/connector/connector-dense-menu.ts
index d8ad2c9958..f9c878f622 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/connector/connector-dense-menu.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/connector/connector-dense-menu.ts
@@ -1,14 +1,13 @@
 import { menu } from '@blocksuite/affine-components/context-menu';
 import { ConnectorMode } from '@blocksuite/affine-model';
 import { EditPropsStore } from '@blocksuite/affine-shared/services';
+import type { DenseMenuBuilder } from '@blocksuite/affine-widget-edgeless-toolbar';
 import {
   ConnectorCIcon,
   ConnectorEIcon,
   ConnectorLIcon,
 } from '@blocksuite/icons/lit';
 
-import type { DenseMenuBuilder } from '../common/type.js';
-
 export const buildConnectorDenseMenu: DenseMenuBuilder = (edgeless, gfx) => {
   const prevMode =
     edgeless.std.get(EditPropsStore).lastProps$.value.connector.mode;
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/lasso/lasso-dense-menu.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/lasso/lasso-dense-menu.ts
index a64f9ce496..ca82117540 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/lasso/lasso-dense-menu.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/lasso/lasso-dense-menu.ts
@@ -1,7 +1,7 @@
 import { menu } from '@blocksuite/affine-components/context-menu';
 import { LassoMode } from '@blocksuite/affine-shared/types';
+import type { DenseMenuBuilder } from '@blocksuite/affine-widget-edgeless-toolbar';
 
-import type { DenseMenuBuilder } from '../common/type.js';
 import { LassoFreeHandIcon, LassoPolygonalIcon } from './icons.js';
 
 export const buildLassoDenseMenu: DenseMenuBuilder = (_, gfx) => {
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/link/link-dense-menu.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/link/link-dense-menu.ts
index a55a75838c..c04dc90a36 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/link/link-dense-menu.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/link/link-dense-menu.ts
@@ -2,8 +2,7 @@ import { insertLinkByQuickSearchCommand } from '@blocksuite/affine-block-bookmar
 import { menu } from '@blocksuite/affine-components/context-menu';
 import { LinkIcon } from '@blocksuite/affine-components/icons';
 import { TelemetryProvider } from '@blocksuite/affine-shared/services';
-
-import type { DenseMenuBuilder } from '../common/type.js';
+import type { DenseMenuBuilder } from '@blocksuite/affine-widget-edgeless-toolbar';
 
 export const buildLinkDenseMenu: DenseMenuBuilder = edgeless =>
   menu.action({
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/tools.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/tools.ts
index 5a9db97b9e..432722f829 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/tools.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/tools.ts
@@ -1,10 +1,11 @@
+import { frameQuickTool } from '@blocksuite/affine-block-frame';
+import { shapeSeniorTool } from '@blocksuite/affine-gfx-shape';
 import {
   QuickToolExtension,
   SeniorToolExtension,
 } from '@blocksuite/affine-widget-edgeless-toolbar';
 import { html } from 'lit';
 
-import { buildFrameDenseMenu } from './frame/frame-dense-menu.js';
 import { buildLinkDenseMenu } from './link/link-dense-menu.js';
 
 const defaultQuickTool = QuickToolExtension('default', ({ block }) => {
@@ -16,17 +17,6 @@ const defaultQuickTool = QuickToolExtension('default', ({ block }) => {
   };
 });
 
-const frameQuickTool = QuickToolExtension('frame', ({ block, gfx }) => {
-  return {
-    type: 'frame',
-    content: html`<edgeless-frame-tool-button
-      .edgeless=${block}
-    ></edgeless-frame-tool-button>`,
-    menu: buildFrameDenseMenu(block, gfx),
-    enable: !block.doc.readonly,
-  };
-});
-
 const connectorQuickTool = QuickToolExtension('connector', ({ block }) => {
   return {
     type: 'connector',
@@ -69,19 +59,6 @@ const penSeniorTool = SeniorToolExtension('pen', ({ block }) => {
   };
 });
 
-const shapeSeniorTool = SeniorToolExtension(
-  'shape',
-  ({ block, toolbarContainer }) => {
-    return {
-      name: 'Shape',
-      content: html`<edgeless-shape-tool-button
-        .edgeless=${block}
-        .toolbarContainer=${toolbarContainer}
-      ></edgeless-shape-tool-button>`,
-    };
-  }
-);
-
 const mindMapSeniorTool = SeniorToolExtension(
   'mindMap',
   ({ block, toolbarContainer }) => {
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts
index b9f17c3eaf..aa24887d23 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts
@@ -1,3 +1,4 @@
+import { edgelessTextToolbarConfig } from '@blocksuite/affine-block-edgeless-text';
 import { frameToolbarExtension } from '@blocksuite/affine-block-frame';
 import { textToolbarConfig } from '@blocksuite/affine-gfx-text';
 import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
@@ -6,7 +7,6 @@ import type { ExtensionType } from '@blocksuite/store';
 
 import { builtinBrushToolbarConfig } from './brush';
 import { builtinConnectorToolbarConfig } from './connector';
-import { builtinEdgelessTextToolbarConfig } from './edgeless-text';
 import { builtinGroupToolbarConfig } from './group';
 import { builtinMindmapToolbarConfig } from './mindmap';
 import { builtinLockedToolbarConfig, builtinMiscToolbarConfig } from './misc';
@@ -42,7 +42,7 @@ export const EdgelessElementToolbarExtension: ExtensionType[] = [
 
   ToolbarModuleExtension({
     id: BlockFlavourIdentifier('affine:surface:edgeless-text'),
-    config: builtinEdgelessTextToolbarConfig,
+    config: edgelessTextToolbarConfig,
   }),
 
   ToolbarModuleExtension({
diff --git a/blocksuite/affine/blocks/block-root/src/effects.ts b/blocksuite/affine/blocks/block-root/src/effects.ts
index f3729980ae..3ae20bfe6a 100644
--- a/blocksuite/affine/blocks/block-root/src/effects.ts
+++ b/blocksuite/affine/blocks/block-root/src/effects.ts
@@ -36,8 +36,6 @@ import { EdgelessConnectorMenu } from './edgeless/components/toolbar/connector/c
 import { EdgelessConnectorToolButton } from './edgeless/components/toolbar/connector/connector-tool-button.js';
 import { EdgelessDefaultToolButton } from './edgeless/components/toolbar/default/default-tool-button.js';
 import { EdgelessEraserToolButton } from './edgeless/components/toolbar/eraser/eraser-tool-button.js';
-import { EdgelessFrameMenu } from './edgeless/components/toolbar/frame/frame-menu.js';
-import { EdgelessFrameToolButton } from './edgeless/components/toolbar/frame/frame-tool-button.js';
 import { EdgelessLassoToolButton } from './edgeless/components/toolbar/lasso/lasso-tool-button.js';
 import { EdgelessLinkToolButton } from './edgeless/components/toolbar/link/link-tool-button.js';
 import { MindMapPlaceholder } from './edgeless/components/toolbar/mindmap/mindmap-importing-placeholder.js';
@@ -157,7 +155,6 @@ function registerEdgelessToolbarComponents() {
     'edgeless-eraser-tool-button',
     EdgelessEraserToolButton
   );
-  customElements.define('edgeless-frame-tool-button', EdgelessFrameToolButton);
   customElements.define('edgeless-link-tool-button', EdgelessLinkToolButton);
   customElements.define('edgeless-lasso-tool-button', EdgelessLassoToolButton);
   customElements.define(
@@ -170,7 +167,6 @@ function registerEdgelessToolbarComponents() {
   // Menus
   customElements.define('edgeless-brush-menu', EdgelessBrushMenu);
   customElements.define('edgeless-connector-menu', EdgelessConnectorMenu);
-  customElements.define('edgeless-frame-menu', EdgelessFrameMenu);
   customElements.define('edgeless-mindmap-menu', EdgelessMindmapMenu);
   customElements.define('edgeless-note-menu', EdgelessNoteMenu);
   customElements.define('edgeless-slide-menu', EdgelessSlideMenu);
@@ -301,8 +297,6 @@ declare global {
     'edgeless-connector-tool-button': EdgelessConnectorToolButton;
     'edgeless-default-tool-button': EdgelessDefaultToolButton;
     'edgeless-eraser-tool-button': EdgelessEraserToolButton;
-    'edgeless-frame-menu': EdgelessFrameMenu;
-    'edgeless-frame-tool-button': EdgelessFrameToolButton;
     'edgeless-lasso-tool-button': EdgelessLassoToolButton;
     'edgeless-link-tool-button': EdgelessLinkToolButton;
     'mindmap-import-placeholder': MindMapPlaceholder;
diff --git a/blocksuite/affine/gfx/shape/src/toolbar/index.ts b/blocksuite/affine/gfx/shape/src/toolbar/index.ts
index ec5763d072..c3e5edfb7f 100644
--- a/blocksuite/affine/gfx/shape/src/toolbar/index.ts
+++ b/blocksuite/affine/gfx/shape/src/toolbar/index.ts
@@ -1,3 +1,4 @@
 export * from './config';
 export * from './icons';
+export * from './senior-tool';
 export * from './shape-menu-config';
diff --git a/blocksuite/affine/gfx/shape/src/toolbar/senior-tool.ts b/blocksuite/affine/gfx/shape/src/toolbar/senior-tool.ts
new file mode 100644
index 0000000000..bc7277a33f
--- /dev/null
+++ b/blocksuite/affine/gfx/shape/src/toolbar/senior-tool.ts
@@ -0,0 +1,15 @@
+import { SeniorToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar';
+import { html } from 'lit';
+
+export const shapeSeniorTool = SeniorToolExtension(
+  'shape',
+  ({ block, toolbarContainer }) => {
+    return {
+      name: 'Shape',
+      content: html`<edgeless-shape-tool-button
+        .edgeless=${block}
+        .toolbarContainer=${toolbarContainer}
+      ></edgeless-shape-tool-button>`,
+    };
+  }
+);
diff --git a/blocksuite/affine/widgets/widget-edgeless-toolbar/src/config/types.ts b/blocksuite/affine/widgets/widget-edgeless-toolbar/src/config/types.ts
index e817284374..cfc968dea4 100644
--- a/blocksuite/affine/widgets/widget-edgeless-toolbar/src/config/types.ts
+++ b/blocksuite/affine/widgets/widget-edgeless-toolbar/src/config/types.ts
@@ -1,3 +1,6 @@
+import type { MenuConfig } from '@blocksuite/affine-components/context-menu';
+import type { BlockComponent } from '@blocksuite/block-std';
+import type { GfxController } from '@blocksuite/block-std/gfx';
 import type { TemplateResult } from 'lit';
 
 export type MenuItem<T> = {
@@ -15,3 +18,11 @@ export type Menu<T> = {
   currentValue: T;
   onPick: (value: T) => void;
 };
+
+/**
+ * Helper function to build a menu configuration for a tool in dense mode
+ */
+export type DenseMenuBuilder = (
+  edgeless: BlockComponent,
+  gfx: GfxController
+) => MenuConfig;
diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts
index a4aa5b68e9..073d0d32c5 100644
--- a/tools/utils/src/workspace.gen.ts
+++ b/tools/utils/src/workspace.gen.ts
@@ -171,6 +171,7 @@ export const PackageList = [
       'blocksuite/affine/model',
       'blocksuite/affine/rich-text',
       'blocksuite/affine/shared',
+      'blocksuite/affine/widgets/widget-edgeless-toolbar',
       'blocksuite/framework/block-std',
       'blocksuite/framework/global',
       'blocksuite/framework/store',
@@ -200,6 +201,7 @@ export const PackageList = [
       'blocksuite/affine/components',
       'blocksuite/affine/model',
       'blocksuite/affine/shared',
+      'blocksuite/affine/widgets/widget-edgeless-toolbar',
       'blocksuite/affine/widgets/widget-frame-title',
       'blocksuite/framework/block-std',
       'blocksuite/framework/global',
diff --git a/yarn.lock b/yarn.lock
index 5c3106e0f6..f51b2662a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2509,6 +2509,7 @@ __metadata:
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-rich-text": "workspace:*"
     "@blocksuite/affine-shared": "workspace:*"
+    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
     "@blocksuite/block-std": "workspace:*"
     "@blocksuite/global": "workspace:*"
     "@blocksuite/icons": "npm:^2.2.6"
@@ -2562,6 +2563,7 @@ __metadata:
     "@blocksuite/affine-components": "workspace:*"
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-shared": "workspace:*"
+    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
     "@blocksuite/affine-widget-frame-title": "workspace:*"
     "@blocksuite/block-std": "workspace:*"
     "@blocksuite/global": "workspace:*"