diff --git a/blocksuite/affine/all/package.json b/blocksuite/affine/all/package.json
index eb5014174..b510e390b 100644
--- a/blocksuite/affine/all/package.json
+++ b/blocksuite/affine/all/package.json
@@ -61,6 +61,7 @@
     "@blocksuite/affine-widget-frame-title": "workspace:*",
     "@blocksuite/affine-widget-keyboard-toolbar": "workspace:*",
     "@blocksuite/affine-widget-linked-doc": "workspace:*",
+    "@blocksuite/affine-widget-page-dragging-area": "workspace:*",
     "@blocksuite/affine-widget-remote-selection": "workspace:*",
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*",
     "@blocksuite/affine-widget-slash-menu": "workspace:*",
@@ -188,6 +189,8 @@
     "./widgets/keyboard-toolbar/view": "./src/widgets/keyboard-toolbar/view.ts",
     "./widgets/viewport-overlay": "./src/widgets/viewport-overlay/index.ts",
     "./widgets/viewport-overlay/view": "./src/widgets/viewport-overlay/view.ts",
+    "./widgets/page-dragging-area": "./src/widgets/page-dragging-area/index.ts",
+    "./widgets/page-dragging-area/view": "./src/widgets/page-dragging-area/view.ts",
     "./fragments/doc-title": "./src/fragments/doc-title.ts",
     "./fragments/frame-panel": "./src/fragments/frame-panel.ts",
     "./fragments/outline": "./src/fragments/outline.ts",
diff --git a/blocksuite/affine/all/src/extensions/view.ts b/blocksuite/affine/all/src/extensions/view.ts
index fd5301db4..52d38576e 100644
--- a/blocksuite/affine/all/src/extensions/view.ts
+++ b/blocksuite/affine/all/src/extensions/view.ts
@@ -39,6 +39,7 @@ import { EdgelessZoomToolbarViewExtension } from '@blocksuite/affine-widget-edge
 import { FrameTitleViewExtension } from '@blocksuite/affine-widget-frame-title/view';
 import { KeyboardToolbarViewExtension } from '@blocksuite/affine-widget-keyboard-toolbar/view';
 import { LinkedDocViewExtension } from '@blocksuite/affine-widget-linked-doc/view';
+import { PageDraggingAreaViewExtension } from '@blocksuite/affine-widget-page-dragging-area/view';
 import { RemoteSelectionViewExtension } from '@blocksuite/affine-widget-remote-selection/view';
 import { ScrollAnchoringViewExtension } from '@blocksuite/affine-widget-scroll-anchoring/view';
 import { SlashMenuViewExtension } from '@blocksuite/affine-widget-slash-menu/view';
@@ -104,5 +105,6 @@ export function getInternalViewExtensions() {
     ToolbarViewExtension,
     ViewportOverlayViewExtension,
     EdgelessZoomToolbarViewExtension,
+    PageDraggingAreaViewExtension,
   ];
 }
diff --git a/blocksuite/affine/all/src/widgets/page-dragging-area/index.ts b/blocksuite/affine/all/src/widgets/page-dragging-area/index.ts
new file mode 100644
index 000000000..25e86b00b
--- /dev/null
+++ b/blocksuite/affine/all/src/widgets/page-dragging-area/index.ts
@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-page-dragging-area';
diff --git a/blocksuite/affine/all/src/widgets/page-dragging-area/view.ts b/blocksuite/affine/all/src/widgets/page-dragging-area/view.ts
new file mode 100644
index 000000000..2b34434ad
--- /dev/null
+++ b/blocksuite/affine/all/src/widgets/page-dragging-area/view.ts
@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-page-dragging-area/view';
diff --git a/blocksuite/affine/all/tsconfig.json b/blocksuite/affine/all/tsconfig.json
index c4c25c4ad..9dd823ff1 100644
--- a/blocksuite/affine/all/tsconfig.json
+++ b/blocksuite/affine/all/tsconfig.json
@@ -58,6 +58,7 @@
     { "path": "../widgets/frame-title" },
     { "path": "../widgets/keyboard-toolbar" },
     { "path": "../widgets/linked-doc" },
+    { "path": "../widgets/page-dragging-area" },
     { "path": "../widgets/remote-selection" },
     { "path": "../widgets/scroll-anchoring" },
     { "path": "../widgets/slash-menu" },
diff --git a/blocksuite/affine/blocks/root/src/effects.ts b/blocksuite/affine/blocks/root/src/effects.ts
index dd23485f8..0ab77045c 100644
--- a/blocksuite/affine/blocks/root/src/effects.ts
+++ b/blocksuite/affine/blocks/root/src/effects.ts
@@ -21,15 +21,10 @@ import {
   PageRootBlockComponent,
   PreviewRootBlockComponent,
 } from './index.js';
-import {
-  AFFINE_PAGE_DRAGGING_AREA_WIDGET,
-  AffinePageDraggingAreaWidget,
-} from './widgets/page-dragging-area/page-dragging-area.js';
 
 export function effects() {
   // Register components by category
   registerRootComponents();
-  registerWidgets();
   registerEdgelessToolbarComponents();
   registerMiscComponents();
 }
@@ -44,13 +39,6 @@ function registerRootComponents() {
   );
 }
 
-function registerWidgets() {
-  customElements.define(
-    AFFINE_PAGE_DRAGGING_AREA_WIDGET,
-    AffinePageDraggingAreaWidget
-  );
-}
-
 function registerEdgelessToolbarComponents() {
   // Tool buttons
   customElements.define('edgeless-link-tool-button', EdgelessLinkToolButton);
diff --git a/blocksuite/affine/blocks/root/src/index.ts b/blocksuite/affine/blocks/root/src/index.ts
index 053b46c2d..4175a0144 100644
--- a/blocksuite/affine/blocks/root/src/index.ts
+++ b/blocksuite/affine/blocks/root/src/index.ts
@@ -16,7 +16,6 @@ export * from './preview/preview-root-block.js';
 export { RootService } from './root-service.js';
 export * from './types.js';
 export * from './utils/index.js';
-export * from './widgets/index.js';
 
 declare type _GLOBAL_ =
   | typeof PointerEffect
diff --git a/blocksuite/affine/blocks/root/src/page/page-root-spec.ts b/blocksuite/affine/blocks/root/src/page/page-root-spec.ts
index 68153a870..419b7a21f 100644
--- a/blocksuite/affine/blocks/root/src/page/page-root-spec.ts
+++ b/blocksuite/affine/blocks/root/src/page/page-root-spec.ts
@@ -1,23 +1,15 @@
 import { ViewportElementExtension } from '@blocksuite/affine-shared/services';
-import { BlockViewExtension, WidgetViewExtension } from '@blocksuite/std';
+import { BlockViewExtension } from '@blocksuite/std';
 import type { ExtensionType } from '@blocksuite/store';
-import { literal, unsafeStatic } from 'lit/static-html.js';
+import { literal } from 'lit/static-html.js';
 
 import { PageClipboard } from '../clipboard/page-clipboard.js';
 import { CommonSpecs } from '../common-specs/index.js';
-import { AFFINE_PAGE_DRAGGING_AREA_WIDGET } from '../widgets/page-dragging-area/page-dragging-area.js';
 import { PageRootService } from './page-root-service.js';
 
-export const pageDraggingAreaWidget = WidgetViewExtension(
-  'affine:page',
-  AFFINE_PAGE_DRAGGING_AREA_WIDGET,
-  literal`${unsafeStatic(AFFINE_PAGE_DRAGGING_AREA_WIDGET)}`
-);
-
 const PageCommonExtension: ExtensionType[] = [
   CommonSpecs,
   PageRootService,
-  pageDraggingAreaWidget,
   ViewportElementExtension('.affine-page-viewport'),
 ].flat();
 
diff --git a/blocksuite/affine/blocks/root/src/widgets/index.ts b/blocksuite/affine/blocks/root/src/widgets/index.ts
deleted file mode 100644
index e1476732c..000000000
--- a/blocksuite/affine/blocks/root/src/widgets/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { AffinePageDraggingAreaWidget } from './page-dragging-area/page-dragging-area.js';
diff --git a/blocksuite/affine/widgets/page-dragging-area/package.json b/blocksuite/affine/widgets/page-dragging-area/package.json
new file mode 100644
index 000000000..76fb4487d
--- /dev/null
+++ b/blocksuite/affine/widgets/page-dragging-area/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@blocksuite/affine-widget-page-dragging-area",
+  "description": "Affine page dragging area widget.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/std": "workspace:*",
+    "@blocksuite/store": "workspace:*",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.12",
+    "@types/lodash-es": "^4.17.12",
+    "fflate": "^0.8.2",
+    "lit": "^3.2.0",
+    "lodash-es": "^4.17.21",
+    "rxjs": "^7.8.1"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts",
+    "./view": "./src/view.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.21.0"
+}
diff --git a/blocksuite/affine/widgets/page-dragging-area/src/effects.ts b/blocksuite/affine/widgets/page-dragging-area/src/effects.ts
new file mode 100644
index 000000000..c80d6c142
--- /dev/null
+++ b/blocksuite/affine/widgets/page-dragging-area/src/effects.ts
@@ -0,0 +1,11 @@
+import {
+  AFFINE_PAGE_DRAGGING_AREA_WIDGET,
+  AffinePageDraggingAreaWidget,
+} from './index';
+
+export function effects() {
+  customElements.define(
+    AFFINE_PAGE_DRAGGING_AREA_WIDGET,
+    AffinePageDraggingAreaWidget
+  );
+}
diff --git a/blocksuite/affine/blocks/root/src/widgets/page-dragging-area/page-dragging-area.ts b/blocksuite/affine/widgets/page-dragging-area/src/index.ts
similarity index 67%
rename from blocksuite/affine/blocks/root/src/widgets/page-dragging-area/page-dragging-area.ts
rename to blocksuite/affine/widgets/page-dragging-area/src/index.ts
index d3c6392fe..b1fcf3a29 100644
--- a/blocksuite/affine/blocks/root/src/widgets/page-dragging-area/page-dragging-area.ts
+++ b/blocksuite/affine/widgets/page-dragging-area/src/index.ts
@@ -1,32 +1,27 @@
-import { NoteBlockModel, RootBlockModel } from '@blocksuite/affine-model';
+import type { RootBlockModel } from '@blocksuite/affine-model';
 import { ViewportElementProvider } from '@blocksuite/affine-shared/services';
 import {
   autoScroll,
   getScrollContainer,
-  matchModels,
 } from '@blocksuite/affine-shared/utils';
 import {
-  BLOCK_ID_ATTR,
   BlockComponent,
   BlockSelection,
   type PointerEventState,
   WidgetComponent,
+  WidgetViewExtension,
 } from '@blocksuite/std';
 import { html, nothing } from 'lit';
 import { state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { literal, unsafeStatic } from 'lit/static-html.js';
 
-type Rect = {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-};
-
-type BlockInfo = {
-  element: BlockComponent;
-  rect: Rect;
-};
+import {
+  type BlockInfo,
+  getSelectingBlockPaths,
+  isDragArea,
+  type Rect,
+} from './utils';
 
 export const AFFINE_PAGE_DRAGGING_AREA_WIDGET =
   'affine-page-dragging-area-widget';
@@ -323,129 +318,11 @@ export class AffinePageDraggingAreaWidget extends WidgetComponent<RootBlockModel
   accessor rect: Rect | null = null;
 }
 
-function rectIntersects(a: Rect, b: Rect) {
-  return (
-    a.left < b.left + b.width &&
-    a.left + a.width > b.left &&
-    a.top < b.top + b.height &&
-    a.top + a.height > b.top
-  );
-}
-
-function rectIncludesTopAndBottom(a: Rect, b: Rect) {
-  return a.top <= b.top && a.top + a.height >= b.top + b.height;
-}
-
-function filterBlockInfos(blockInfos: BlockInfo[], userRect: Rect) {
-  const results: BlockInfo[] = [];
-  for (const blockInfo of blockInfos) {
-    const rect = blockInfo.rect;
-    if (userRect.top + userRect.height < rect.top) break;
-
-    results.push(blockInfo);
-  }
-
-  return results;
-}
-
-function filterBlockInfosByParent(
-  parentInfos: BlockInfo,
-  userRect: Rect,
-  filteredBlockInfos: BlockInfo[]
-) {
-  const targetBlock = parentInfos.element;
-  let results = [parentInfos];
-  if (targetBlock.childElementCount > 0) {
-    const childBlockInfos = targetBlock.childBlocks
-      .map(el =>
-        filteredBlockInfos.find(
-          blockInfo => blockInfo.element.model.id === el.model.id
-        )
-      )
-      .filter(block => block) as BlockInfo[];
-    const firstIndex = childBlockInfos.findIndex(
-      bl => rectIntersects(bl.rect, userRect) && bl.rect.top < userRect.top
-    );
-    const lastIndex = childBlockInfos.findIndex(
-      bl =>
-        rectIntersects(bl.rect, userRect) &&
-        bl.rect.top + bl.rect.height > userRect.top + userRect.height
-    );
-
-    if (firstIndex !== -1 && lastIndex !== -1) {
-      results = childBlockInfos.slice(firstIndex, lastIndex + 1);
-    }
-  }
-
-  return results;
-}
-
-function getSelectingBlockPaths(blockInfos: BlockInfo[], userRect: Rect) {
-  const filteredBlockInfos = filterBlockInfos(blockInfos, userRect);
-  const len = filteredBlockInfos.length;
-  const blockPaths: string[] = [];
-  let singleTargetParentBlock: BlockInfo | null = null;
-  let blocks: BlockInfo[] = [];
-  if (len === 0) return blockPaths;
-
-  // To get the single target parent block info
-  for (const block of filteredBlockInfos) {
-    const rect = block.rect;
-
-    if (
-      rectIntersects(userRect, rect) &&
-      rectIncludesTopAndBottom(rect, userRect)
-    ) {
-      singleTargetParentBlock = block;
-    }
-  }
-
-  if (singleTargetParentBlock) {
-    blocks = filterBlockInfosByParent(
-      singleTargetParentBlock,
-      userRect,
-      filteredBlockInfos
-    );
-  } else {
-    // If there is no block contains the top and bottom of the userRect
-    // Then get all the blocks that intersect with the userRect
-    for (const block of filteredBlockInfos) {
-      if (rectIntersects(userRect, block.rect)) {
-        blocks.push(block);
-      }
-    }
-  }
-
-  // Filter out the blocks which parent is in the blocks
-  // eslint-disable-next-line @typescript-eslint/prefer-for-of
-  for (let i = 0; i < blocks.length; i++) {
-    const block = blocks[i];
-    const parent = blocks[i].element.doc.getParent(block.element.model);
-    const parentId = parent?.id;
-    if (parentId) {
-      const isParentInBlocks = blocks.some(
-        block => block.element.model.id === parentId
-      );
-      if (!isParentInBlocks) {
-        blockPaths.push(blocks[i].element.blockId);
-      }
-    }
-  }
-
-  return blockPaths;
-}
-
-function isDragArea(e: PointerEventState) {
-  const el = e.raw.target;
-  if (!(el instanceof Element)) {
-    return false;
-  }
-  const block = el.closest<BlockComponent>(`[${BLOCK_ID_ATTR}]`);
-  if (!block) {
-    return false;
-  }
-  return matchModels(block.model, [RootBlockModel, NoteBlockModel]);
-}
+export const pageDraggingAreaWidget = WidgetViewExtension(
+  'affine:page',
+  AFFINE_PAGE_DRAGGING_AREA_WIDGET,
+  literal`${unsafeStatic(AFFINE_PAGE_DRAGGING_AREA_WIDGET)}`
+);
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/blocksuite/affine/widgets/page-dragging-area/src/utils.ts b/blocksuite/affine/widgets/page-dragging-area/src/utils.ts
new file mode 100644
index 000000000..3cf2ce645
--- /dev/null
+++ b/blocksuite/affine/widgets/page-dragging-area/src/utils.ts
@@ -0,0 +1,146 @@
+import { NoteBlockModel, RootBlockModel } from '@blocksuite/affine-model';
+import { matchModels } from '@blocksuite/affine-shared/utils';
+import {
+  BLOCK_ID_ATTR,
+  type BlockComponent,
+  type PointerEventState,
+} from '@blocksuite/std';
+
+export type Rect = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+};
+
+export type BlockInfo = {
+  element: BlockComponent;
+  rect: Rect;
+};
+
+function rectIntersects(a: Rect, b: Rect) {
+  return (
+    a.left < b.left + b.width &&
+    a.left + a.width > b.left &&
+    a.top < b.top + b.height &&
+    a.top + a.height > b.top
+  );
+}
+
+function rectIncludesTopAndBottom(a: Rect, b: Rect) {
+  return a.top <= b.top && a.top + a.height >= b.top + b.height;
+}
+
+function filterBlockInfos(blockInfos: BlockInfo[], userRect: Rect) {
+  const results: BlockInfo[] = [];
+  for (const blockInfo of blockInfos) {
+    const rect = blockInfo.rect;
+    if (userRect.top + userRect.height < rect.top) break;
+
+    results.push(blockInfo);
+  }
+
+  return results;
+}
+
+function filterBlockInfosByParent(
+  parentInfos: BlockInfo,
+  userRect: Rect,
+  filteredBlockInfos: BlockInfo[]
+) {
+  const targetBlock = parentInfos.element;
+  let results = [parentInfos];
+  if (targetBlock.childElementCount > 0) {
+    const childBlockInfos = targetBlock.childBlocks
+      .map(el =>
+        filteredBlockInfos.find(
+          blockInfo => blockInfo.element.model.id === el.model.id
+        )
+      )
+      .filter(block => block) as BlockInfo[];
+    const firstIndex = childBlockInfos.findIndex(
+      bl => rectIntersects(bl.rect, userRect) && bl.rect.top < userRect.top
+    );
+    const lastIndex = childBlockInfos.findIndex(
+      bl =>
+        rectIntersects(bl.rect, userRect) &&
+        bl.rect.top + bl.rect.height > userRect.top + userRect.height
+    );
+
+    if (firstIndex !== -1 && lastIndex !== -1) {
+      results = childBlockInfos.slice(firstIndex, lastIndex + 1);
+    }
+  }
+
+  return results;
+}
+
+export function getSelectingBlockPaths(
+  blockInfos: BlockInfo[],
+  userRect: Rect
+) {
+  const filteredBlockInfos = filterBlockInfos(blockInfos, userRect);
+  const len = filteredBlockInfos.length;
+  const blockPaths: string[] = [];
+  let singleTargetParentBlock: BlockInfo | null = null;
+  let blocks: BlockInfo[] = [];
+  if (len === 0) return blockPaths;
+
+  // To get the single target parent block info
+  for (const block of filteredBlockInfos) {
+    const rect = block.rect;
+
+    if (
+      rectIntersects(userRect, rect) &&
+      rectIncludesTopAndBottom(rect, userRect)
+    ) {
+      singleTargetParentBlock = block;
+    }
+  }
+
+  if (singleTargetParentBlock) {
+    blocks = filterBlockInfosByParent(
+      singleTargetParentBlock,
+      userRect,
+      filteredBlockInfos
+    );
+  } else {
+    // If there is no block contains the top and bottom of the userRect
+    // Then get all the blocks that intersect with the userRect
+    for (const block of filteredBlockInfos) {
+      if (rectIntersects(userRect, block.rect)) {
+        blocks.push(block);
+      }
+    }
+  }
+
+  // Filter out the blocks which parent is in the blocks
+  // eslint-disable-next-line @typescript-eslint/prefer-for-of
+  for (let i = 0; i < blocks.length; i++) {
+    const block = blocks[i];
+    const parent = blocks[i].element.doc.getParent(block.element.model);
+    const parentId = parent?.id;
+    if (parentId) {
+      const isParentInBlocks = blocks.some(
+        block => block.element.model.id === parentId
+      );
+      if (!isParentInBlocks) {
+        blockPaths.push(blocks[i].element.blockId);
+      }
+    }
+  }
+
+  return blockPaths;
+}
+
+export function isDragArea(e: PointerEventState) {
+  const el = e.raw.target;
+  if (!(el instanceof Element)) {
+    return false;
+  }
+  const block = el.closest<BlockComponent>(`[${BLOCK_ID_ATTR}]`);
+  if (!block) {
+    return false;
+  }
+  return matchModels(block.model, [RootBlockModel, NoteBlockModel]);
+}
diff --git a/blocksuite/affine/widgets/page-dragging-area/src/view.ts b/blocksuite/affine/widgets/page-dragging-area/src/view.ts
new file mode 100644
index 000000000..a889411bc
--- /dev/null
+++ b/blocksuite/affine/widgets/page-dragging-area/src/view.ts
@@ -0,0 +1,24 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { effects } from './effects';
+import { pageDraggingAreaWidget } from './index';
+
+export class PageDraggingAreaViewExtension extends ViewExtensionProvider {
+  override name = 'affine-page-dragging-area-widget';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    if (this.isEdgeless(context.scope)) {
+      return;
+    }
+    context.register(pageDraggingAreaWidget);
+  }
+}
diff --git a/blocksuite/affine/widgets/page-dragging-area/tsconfig.json b/blocksuite/affine/widgets/page-dragging-area/tsconfig.json
new file mode 100644
index 000000000..d60ba97d5
--- /dev/null
+++ b/blocksuite/affine/widgets/page-dragging-area/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../../components" },
+    { "path": "../../ext-loader" },
+    { "path": "../../model" },
+    { "path": "../../shared" },
+    { "path": "../../../framework/global" },
+    { "path": "../../../framework/std" },
+    { "path": "../../../framework/store" }
+  ]
+}
diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts
index 010d2fad7..ae362e000 100644
--- a/tools/utils/src/workspace.gen.ts
+++ b/tools/utils/src/workspace.gen.ts
@@ -56,6 +56,7 @@ export const PackageList = [
       'blocksuite/affine/widgets/frame-title',
       'blocksuite/affine/widgets/keyboard-toolbar',
       'blocksuite/affine/widgets/linked-doc',
+      'blocksuite/affine/widgets/page-dragging-area',
       'blocksuite/affine/widgets/remote-selection',
       'blocksuite/affine/widgets/scroll-anchoring',
       'blocksuite/affine/widgets/slash-menu',
@@ -899,6 +900,19 @@ export const PackageList = [
       'blocksuite/framework/store',
     ],
   },
+  {
+    location: 'blocksuite/affine/widgets/page-dragging-area',
+    name: '@blocksuite/affine-widget-page-dragging-area',
+    workspaceDependencies: [
+      'blocksuite/affine/components',
+      'blocksuite/affine/ext-loader',
+      'blocksuite/affine/model',
+      'blocksuite/affine/shared',
+      'blocksuite/framework/global',
+      'blocksuite/framework/std',
+      'blocksuite/framework/store',
+    ],
+  },
   {
     location: 'blocksuite/affine/widgets/remote-selection',
     name: '@blocksuite/affine-widget-remote-selection',
@@ -1386,6 +1400,7 @@ export type PackageName =
   | '@blocksuite/affine-widget-frame-title'
   | '@blocksuite/affine-widget-keyboard-toolbar'
   | '@blocksuite/affine-widget-linked-doc'
+  | '@blocksuite/affine-widget-page-dragging-area'
   | '@blocksuite/affine-widget-remote-selection'
   | '@blocksuite/affine-widget-scroll-anchoring'
   | '@blocksuite/affine-widget-slash-menu'
diff --git a/tsconfig.json b/tsconfig.json
index c1710f379..4a921b966 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -103,6 +103,7 @@
     { "path": "./blocksuite/affine/widgets/frame-title" },
     { "path": "./blocksuite/affine/widgets/keyboard-toolbar" },
     { "path": "./blocksuite/affine/widgets/linked-doc" },
+    { "path": "./blocksuite/affine/widgets/page-dragging-area" },
     { "path": "./blocksuite/affine/widgets/remote-selection" },
     { "path": "./blocksuite/affine/widgets/scroll-anchoring" },
     { "path": "./blocksuite/affine/widgets/slash-menu" },
diff --git a/yarn.lock b/yarn.lock
index e03d0731a..5804586fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3861,6 +3861,29 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@blocksuite/affine-widget-page-dragging-area@workspace:*, @blocksuite/affine-widget-page-dragging-area@workspace:blocksuite/affine/widgets/page-dragging-area":
+  version: 0.0.0-use.local
+  resolution: "@blocksuite/affine-widget-page-dragging-area@workspace:blocksuite/affine/widgets/page-dragging-area"
+  dependencies:
+    "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-ext-loader": "workspace:*"
+    "@blocksuite/affine-model": "workspace:*"
+    "@blocksuite/affine-shared": "workspace:*"
+    "@blocksuite/global": "workspace:*"
+    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/std": "workspace:*"
+    "@blocksuite/store": "workspace:*"
+    "@lit/context": "npm:^1.1.2"
+    "@preact/signals-core": "npm:^1.8.0"
+    "@toeverything/theme": "npm:^1.1.12"
+    "@types/lodash-es": "npm:^4.17.12"
+    fflate: "npm:^0.8.2"
+    lit: "npm:^3.2.0"
+    lodash-es: "npm:^4.17.21"
+    rxjs: "npm:^7.8.1"
+  languageName: unknown
+  linkType: soft
+
 "@blocksuite/affine-widget-remote-selection@workspace:*, @blocksuite/affine-widget-remote-selection@workspace:blocksuite/affine/widgets/remote-selection":
   version: 0.0.0-use.local
   resolution: "@blocksuite/affine-widget-remote-selection@workspace:blocksuite/affine/widgets/remote-selection"
@@ -4020,6 +4043,7 @@ __metadata:
     "@blocksuite/affine-widget-frame-title": "workspace:*"
     "@blocksuite/affine-widget-keyboard-toolbar": "workspace:*"
     "@blocksuite/affine-widget-linked-doc": "workspace:*"
+    "@blocksuite/affine-widget-page-dragging-area": "workspace:*"
     "@blocksuite/affine-widget-remote-selection": "workspace:*"
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*"
     "@blocksuite/affine-widget-slash-menu": "workspace:*"