diff --git a/blocksuite/affine/block-table/package.json b/blocksuite/affine/block-table/package.json
index ea81b1daa8..521c66ca2f 100644
--- a/blocksuite/affine/block-table/package.json
+++ b/blocksuite/affine/block-table/package.json
@@ -24,7 +24,7 @@
     "@blocksuite/store": "workspace:*",
     "@floating-ui/dom": "^1.6.10",
     "@preact/signals-core": "^1.8.0",
-    "@vanilla-extract/css": "^1.14.0",
+    "@vanilla-extract/css": "^1.17.0",
     "lit": "^3.2.0",
     "yjs": "^13.6.21",
     "zod": "^3.24.1"
diff --git a/blocksuite/affine/fragment-outline/package.json b/blocksuite/affine/fragment-outline/package.json
new file mode 100644
index 0000000000..ef8fb0a53a
--- /dev/null
+++ b/blocksuite/affine/fragment-outline/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "@blocksuite/affine-fragment-outline",
+  "description": "Outline fragment for BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "test:unit": "nx vite:test --run --passWithNoTests",
+    "test:unit:coverage": "nx vite:test --run --coverage",
+    "test:e2e": "playwright test"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-block-note": "workspace:*",
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/block-std": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.1",
+    "@blocksuite/inline": "workspace:*",
+    "@blocksuite/store": "workspace:*",
+    "@floating-ui/dom": "^1.6.10",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.11",
+    "@vanilla-extract/css": "^1.17.0",
+    "lit": "^3.2.0",
+    "minimatch": "^10.0.1",
+    "zod": "^3.23.8"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.19.0"
+}
diff --git a/blocksuite/presets/src/fragments/outline/body/outline-notice.css.ts b/blocksuite/affine/fragment-outline/src/body/outline-notice.css.ts
similarity index 100%
rename from blocksuite/presets/src/fragments/outline/body/outline-notice.css.ts
rename to blocksuite/affine/fragment-outline/src/body/outline-notice.css.ts
diff --git a/blocksuite/presets/src/fragments/outline/body/outline-notice.ts b/blocksuite/affine/fragment-outline/src/body/outline-notice.ts
similarity index 100%
rename from blocksuite/presets/src/fragments/outline/body/outline-notice.ts
rename to blocksuite/affine/fragment-outline/src/body/outline-notice.ts
diff --git a/blocksuite/presets/src/fragments/outline/body/outline-panel-body.css.ts b/blocksuite/affine/fragment-outline/src/body/outline-panel-body.css.ts
similarity index 100%
rename from blocksuite/presets/src/fragments/outline/body/outline-panel-body.css.ts
rename to blocksuite/affine/fragment-outline/src/body/outline-panel-body.css.ts
diff --git a/blocksuite/presets/src/fragments/outline/body/outline-panel-body.ts b/blocksuite/affine/fragment-outline/src/body/outline-panel-body.ts
similarity index 93%
rename from blocksuite/presets/src/fragments/outline/body/outline-panel-body.ts
rename to blocksuite/affine/fragment-outline/src/body/outline-panel-body.ts
index ff73429c24..b0da8c260a 100644
--- a/blocksuite/presets/src/fragments/outline/body/outline-panel-body.ts
+++ b/blocksuite/affine/fragment-outline/src/body/outline-panel-body.ts
@@ -1,18 +1,10 @@
-import { effects } from '@blocksuite/affine-block-note/effects';
+import { changeNoteDisplayMode } from '@blocksuite/affine-block-note';
+import { NoteBlockModel, NoteDisplayMode } from '@blocksuite/affine-model';
+import { DocModeProvider } from '@blocksuite/affine-shared/services';
+import { matchModels } from '@blocksuite/affine-shared/utils';
 import { ShadowlessElement, SurfaceSelection } from '@blocksuite/block-std';
-import {
-  changeNoteDisplayMode,
-  DocModeProvider,
-  matchModels,
-  NoteBlockModel,
-  NoteDisplayMode,
-} from '@blocksuite/blocks';
-import {
-  Bound,
-  noop,
-  SignalWatcher,
-  WithDisposable,
-} from '@blocksuite/global/utils';
+import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
+import { Bound, SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
 import type { BlockModel } from '@blocksuite/store';
 import { consume } from '@lit/context';
 import { effect, signal } from '@preact/signals-core';
@@ -22,8 +14,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { when } from 'lit/directives/when.js';
 
-noop(effects);
-
 import { type TocContext, tocContext } from '../config';
 import type {
   ClickBlockEvent,
@@ -79,10 +69,6 @@ export class OutlinePanelBody extends SignalWatcher(
     return this.editor.doc;
   }
 
-  private get edgeless() {
-    return this.editor.querySelector('affine-edgeless-root');
-  }
-
   get viewportPadding(): [number, number, number, number] {
     const fitPadding = this._context.fitPadding$.value;
     return fitPadding.length === 4
@@ -93,9 +79,9 @@ export class OutlinePanelBody extends SignalWatcher(
   }
 
   private _deSelectNoteInEdgelessMode(note: NoteBlockModel) {
-    if (!this.edgeless) return;
+    const gfx = this.editor.std.get(GfxControllerIdentifier);
+    const selection = gfx.selection;
 
-    const { selection } = this.edgeless.service;
     if (!selection.has(note.id)) return;
     const selectedIds = selection.selectedIds.filter(id => id !== note.id);
     selection.set({
@@ -116,18 +102,12 @@ export class OutlinePanelBody extends SignalWatcher(
   }
 
   private _fitToElement(e: FitViewEvent) {
-    const edgeless = this.edgeless;
-
-    if (!edgeless) return;
+    const gfx = this.editor.std.get(GfxControllerIdentifier);
 
     const { block } = e.detail;
     const bound = Bound.deserialize(block.xywh);
 
-    edgeless.service.viewport.setViewportByBound(
-      bound,
-      this.viewportPadding,
-      true
-    );
+    gfx.viewport.setViewportByBound(bound, this.viewportPadding, true);
   }
 
   // when display mode change to page only, we should de-select the note if it is selected in edgeless mode
@@ -200,6 +180,8 @@ export class OutlinePanelBody extends SignalWatcher(
 
   private _selectNote(e: SelectEvent) {
     const { selected, id, multiselect } = e.detail;
+    const gfx = this.editor.std.get(GfxControllerIdentifier);
+    const editorMode = this.editor.std.get(DocModeProvider).getEditorMode();
     const note = this.doc.getBlock(id)?.model;
     if (!note || !matchModels(note, [NoteBlockModel])) return;
 
@@ -213,8 +195,8 @@ export class OutlinePanelBody extends SignalWatcher(
       selectedNotes = [note];
     }
 
-    if (this.edgeless) {
-      this.edgeless?.service.selection.set({
+    if (editorMode === 'edgeless') {
+      gfx.selection.set({
         elements: selectedNotes.map(({ id }) => id),
         editing: false,
       });
diff --git a/blocksuite/presets/src/fragments/outline/card/outline-card.css.ts b/blocksuite/affine/fragment-outline/src/card/outline-card.css.ts
similarity index 100%
rename from blocksuite/presets/src/fragments/outline/card/outline-card.css.ts
rename to blocksuite/affine/fragment-outline/src/card/outline-card.css.ts
diff --git a/blocksuite/presets/src/fragments/outline/card/outline-card.ts b/blocksuite/affine/fragment-outline/src/card/outline-card.ts
similarity index 98%
rename from blocksuite/presets/src/fragments/outline/card/outline-card.ts
rename to blocksuite/affine/fragment-outline/src/card/outline-card.ts
index d3e1194b97..4e1ccafd5b 100644
--- a/blocksuite/presets/src/fragments/outline/card/outline-card.ts
+++ b/blocksuite/affine/fragment-outline/src/card/outline-card.ts
@@ -1,9 +1,6 @@
+import { type NoteBlockModel, NoteDisplayMode } from '@blocksuite/affine-model';
+import { createButtonPopper } from '@blocksuite/affine-shared/utils';
 import { ShadowlessElement } from '@blocksuite/block-std';
-import {
-  createButtonPopper,
-  type NoteBlockModel,
-  NoteDisplayMode,
-} from '@blocksuite/blocks';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
 import { ArrowDownSmallIcon, InvisibleIcon } from '@blocksuite/icons/lit';
 import type { BlockModel } from '@blocksuite/store';
diff --git a/blocksuite/presets/src/fragments/outline/card/outline-preview.css.ts b/blocksuite/affine/fragment-outline/src/card/outline-preview.css.ts
similarity index 100%
rename from blocksuite/presets/src/fragments/outline/card/outline-preview.css.ts
rename to blocksuite/affine/fragment-outline/src/card/outline-preview.css.ts
diff --git a/blocksuite/presets/src/fragments/outline/card/outline-preview.ts b/blocksuite/affine/fragment-outline/src/card/outline-preview.ts
similarity index 95%
rename from blocksuite/presets/src/fragments/outline/card/outline-preview.ts
rename to blocksuite/affine/fragment-outline/src/card/outline-preview.ts
index 997c8ee987..d956fa4d54 100644
--- a/blocksuite/presets/src/fragments/outline/card/outline-preview.ts
+++ b/blocksuite/affine/fragment-outline/src/card/outline-preview.ts
@@ -1,16 +1,16 @@
+import type {
+  AttachmentBlockModel,
+  BookmarkBlockModel,
+  CodeBlockModel,
+  DatabaseBlockModel,
+  ImageBlockModel,
+  ListBlockModel,
+  ParagraphBlockModel,
+  RootBlockModel,
+} from '@blocksuite/affine-model';
+import { DocDisplayMetaProvider } from '@blocksuite/affine-shared/services';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
 import { ShadowlessElement } from '@blocksuite/block-std';
-import {
-  type AttachmentBlockModel,
-  type BookmarkBlockModel,
-  type CodeBlockModel,
-  type DatabaseBlockModel,
-  DocDisplayMetaProvider,
-  type ImageBlockModel,
-  type ListBlockModel,
-  type ParagraphBlockModel,
-  type RootBlockModel,
-} from '@blocksuite/blocks';
 import { noop, SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
 import { LinkedPageIcon } from '@blocksuite/icons/lit';
 import type { DeltaInsert } from '@blocksuite/inline';
diff --git a/blocksuite/presets/src/fragments/outline/config.ts b/blocksuite/affine/fragment-outline/src/config.ts
similarity index 94%
rename from blocksuite/presets/src/fragments/outline/config.ts
rename to blocksuite/affine/fragment-outline/src/config.ts
index cca821d0ca..cea37bddca 100644
--- a/blocksuite/presets/src/fragments/outline/config.ts
+++ b/blocksuite/affine/fragment-outline/src/config.ts
@@ -1,5 +1,5 @@
+import type { ParagraphBlockModel } from '@blocksuite/affine-model';
 import type { EditorHost } from '@blocksuite/block-std';
-import type { ParagraphBlockModel, Signal } from '@blocksuite/blocks';
 import {
   AttachmentIcon,
   BlockIcon,
@@ -21,6 +21,7 @@ import {
   TextIcon,
 } from '@blocksuite/icons/lit';
 import { createContext } from '@lit/context';
+import type { Signal } from '@preact/signals-core';
 import type { TemplateResult } from 'lit';
 
 const _16px = { width: '16px', height: '16px' };
diff --git a/blocksuite/affine/fragment-outline/src/effects.ts b/blocksuite/affine/fragment-outline/src/effects.ts
new file mode 100644
index 0000000000..ff0493547c
--- /dev/null
+++ b/blocksuite/affine/fragment-outline/src/effects.ts
@@ -0,0 +1,39 @@
+import { AFFINE_OUTLINE_NOTICE, OutlineNotice } from './body/outline-notice';
+import {
+  AFFINE_OUTLINE_PANEL_BODY,
+  OutlinePanelBody,
+} from './body/outline-panel-body';
+import { AFFINE_OUTLINE_NOTE_CARD, OutlineNoteCard } from './card/outline-card';
+import {
+  AFFINE_OUTLINE_BLOCK_PREVIEW,
+  OutlineBlockPreview,
+} from './card/outline-preview';
+import {
+  AFFINE_OUTLINE_PANEL_HEADER,
+  OutlinePanelHeader,
+} from './header/outline-panel-header';
+import {
+  AFFINE_OUTLINE_NOTE_PREVIEW_SETTING_MENU,
+  OutlineNotePreviewSettingMenu,
+} from './header/outline-setting-menu';
+import {
+  AFFINE_MOBILE_OUTLINE_MENU,
+  MobileOutlineMenu,
+} from './mobile-outline-panel';
+import { AFFINE_OUTLINE_PANEL, OutlinePanel } from './outline-panel';
+import { AFFINE_OUTLINE_VIEWER, OutlineViewer } from './outline-viewer';
+
+export function effects() {
+  customElements.define(
+    AFFINE_OUTLINE_NOTE_PREVIEW_SETTING_MENU,
+    OutlineNotePreviewSettingMenu
+  );
+  customElements.define(AFFINE_OUTLINE_NOTICE, OutlineNotice);
+  customElements.define(AFFINE_OUTLINE_PANEL, OutlinePanel);
+  customElements.define(AFFINE_OUTLINE_PANEL_HEADER, OutlinePanelHeader);
+  customElements.define(AFFINE_OUTLINE_NOTE_CARD, OutlineNoteCard);
+  customElements.define(AFFINE_OUTLINE_VIEWER, OutlineViewer);
+  customElements.define(AFFINE_MOBILE_OUTLINE_MENU, MobileOutlineMenu);
+  customElements.define(AFFINE_OUTLINE_BLOCK_PREVIEW, OutlineBlockPreview);
+  customElements.define(AFFINE_OUTLINE_PANEL_BODY, OutlinePanelBody);
+}
diff --git a/blocksuite/presets/src/fragments/outline/header/outline-panel-header.css.ts b/blocksuite/affine/fragment-outline/src/header/outline-panel-header.css.ts
similarity index 100%
rename from blocksuite/presets/src/fragments/outline/header/outline-panel-header.css.ts
rename to blocksuite/affine/fragment-outline/src/header/outline-panel-header.css.ts
diff --git a/blocksuite/presets/src/fragments/outline/header/outline-panel-header.ts b/blocksuite/affine/fragment-outline/src/header/outline-panel-header.ts
similarity index 97%
rename from blocksuite/presets/src/fragments/outline/header/outline-panel-header.ts
rename to blocksuite/affine/fragment-outline/src/header/outline-panel-header.ts
index 95718aea9e..e03a95f6a5 100644
--- a/blocksuite/presets/src/fragments/outline/header/outline-panel-header.ts
+++ b/blocksuite/affine/fragment-outline/src/header/outline-panel-header.ts
@@ -1,5 +1,5 @@
+import { createButtonPopper } from '@blocksuite/affine-shared/utils';
 import { ShadowlessElement } from '@blocksuite/block-std';
-import { createButtonPopper } from '@blocksuite/blocks';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
 import { SettingsIcon, SortIcon } from '@blocksuite/icons/lit';
 import { consume } from '@lit/context';
diff --git a/blocksuite/presets/src/fragments/outline/header/outline-setting-menu.css.ts b/blocksuite/affine/fragment-outline/src/header/outline-setting-menu.css.ts
similarity index 100%
rename from blocksuite/presets/src/fragments/outline/header/outline-setting-menu.css.ts
rename to blocksuite/affine/fragment-outline/src/header/outline-setting-menu.css.ts
diff --git a/blocksuite/presets/src/fragments/outline/header/outline-setting-menu.ts b/blocksuite/affine/fragment-outline/src/header/outline-setting-menu.ts
similarity index 100%
rename from blocksuite/presets/src/fragments/outline/header/outline-setting-menu.ts
rename to blocksuite/affine/fragment-outline/src/header/outline-setting-menu.ts
diff --git a/blocksuite/presets/src/fragments/outline/index.ts b/blocksuite/affine/fragment-outline/src/index.ts
similarity index 100%
rename from blocksuite/presets/src/fragments/outline/index.ts
rename to blocksuite/affine/fragment-outline/src/index.ts
diff --git a/blocksuite/presets/src/fragments/outline/mobile-outline-panel.ts b/blocksuite/affine/fragment-outline/src/mobile-outline-panel.ts
similarity index 96%
rename from blocksuite/presets/src/fragments/outline/mobile-outline-panel.ts
rename to blocksuite/affine/fragment-outline/src/mobile-outline-panel.ts
index a18b189fcc..a8add1d349 100644
--- a/blocksuite/presets/src/fragments/outline/mobile-outline-panel.ts
+++ b/blocksuite/affine/fragment-outline/src/mobile-outline-panel.ts
@@ -1,16 +1,16 @@
+import {
+  NoteDisplayMode,
+  ParagraphBlockModel,
+  RootBlockModel,
+} from '@blocksuite/affine-model';
+import { DocModeProvider } from '@blocksuite/affine-shared/services';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { matchModels } from '@blocksuite/affine-shared/utils';
 import {
   type EditorHost,
   PropTypes,
   requiredProperties,
 } from '@blocksuite/block-std';
-import {
-  DocModeProvider,
-  matchModels,
-  NoteDisplayMode,
-  ParagraphBlockModel,
-  RootBlockModel,
-} from '@blocksuite/blocks';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
 import type { BlockModel } from '@blocksuite/store';
 import { signal } from '@preact/signals-core';
diff --git a/blocksuite/presets/src/fragments/outline/outline-panel.css.ts b/blocksuite/affine/fragment-outline/src/outline-panel.css.ts
similarity index 100%
rename from blocksuite/presets/src/fragments/outline/outline-panel.css.ts
rename to blocksuite/affine/fragment-outline/src/outline-panel.css.ts
diff --git a/blocksuite/presets/src/fragments/outline/outline-panel.ts b/blocksuite/affine/fragment-outline/src/outline-panel.ts
similarity index 97%
rename from blocksuite/presets/src/fragments/outline/outline-panel.ts
rename to blocksuite/affine/fragment-outline/src/outline-panel.ts
index 0e54b217c6..7fffd086cf 100644
--- a/blocksuite/presets/src/fragments/outline/outline-panel.ts
+++ b/blocksuite/affine/fragment-outline/src/outline-panel.ts
@@ -1,10 +1,10 @@
+import { DocModeProvider } from '@blocksuite/affine-shared/services';
 import {
   type EditorHost,
   PropTypes,
   requiredProperties,
   ShadowlessElement,
 } from '@blocksuite/block-std';
-import { DocModeProvider } from '@blocksuite/blocks';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
 import { provide } from '@lit/context';
 import { effect, signal } from '@preact/signals-core';
diff --git a/blocksuite/presets/src/fragments/outline/outline-viewer.ts b/blocksuite/affine/fragment-outline/src/outline-viewer.ts
similarity index 97%
rename from blocksuite/presets/src/fragments/outline/outline-viewer.ts
rename to blocksuite/affine/fragment-outline/src/outline-viewer.ts
index ca410643ee..064a74b024 100644
--- a/blocksuite/presets/src/fragments/outline/outline-viewer.ts
+++ b/blocksuite/affine/fragment-outline/src/outline-viewer.ts
@@ -1,14 +1,12 @@
+import { NoteDisplayMode } from '@blocksuite/affine-model';
+import { DocModeProvider } from '@blocksuite/affine-shared/services';
+import { scrollbarStyle } from '@blocksuite/affine-shared/styles';
 import {
   type EditorHost,
   PropTypes,
   requiredProperties,
   ShadowlessElement,
 } from '@blocksuite/block-std';
-import {
-  DocModeProvider,
-  NoteDisplayMode,
-  scrollbarStyle,
-} from '@blocksuite/blocks';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
 import { TocIcon } from '@blocksuite/icons/lit';
 import { provide } from '@lit/context';
diff --git a/blocksuite/presets/src/fragments/outline/utils/custom-events.ts b/blocksuite/affine/fragment-outline/src/utils/custom-events.ts
similarity index 96%
rename from blocksuite/presets/src/fragments/outline/utils/custom-events.ts
rename to blocksuite/affine/fragment-outline/src/utils/custom-events.ts
index 7140eb0baa..11324c0d2d 100644
--- a/blocksuite/presets/src/fragments/outline/utils/custom-events.ts
+++ b/blocksuite/affine/fragment-outline/src/utils/custom-events.ts
@@ -1,4 +1,4 @@
-import type { NoteBlockModel, NoteDisplayMode } from '@blocksuite/blocks';
+import type { NoteBlockModel, NoteDisplayMode } from '@blocksuite/affine-model';
 
 export type ReorderEvent = CustomEvent<{
   currentNumber: number;
diff --git a/blocksuite/presets/src/fragments/outline/utils/drag.ts b/blocksuite/affine/fragment-outline/src/utils/drag.ts
similarity index 100%
rename from blocksuite/presets/src/fragments/outline/utils/drag.ts
rename to blocksuite/affine/fragment-outline/src/utils/drag.ts
diff --git a/blocksuite/presets/src/fragments/outline/utils/query.ts b/blocksuite/affine/fragment-outline/src/utils/query.ts
similarity index 88%
rename from blocksuite/presets/src/fragments/outline/utils/query.ts
rename to blocksuite/affine/fragment-outline/src/utils/query.ts
index 0ddc4f5878..f1beff057d 100644
--- a/blocksuite/presets/src/fragments/outline/utils/query.ts
+++ b/blocksuite/affine/fragment-outline/src/utils/query.ts
@@ -1,11 +1,10 @@
 import {
-  BlocksUtils,
-  matchModels,
   NoteBlockModel,
   NoteDisplayMode,
   ParagraphBlockModel,
   RootBlockModel,
-} from '@blocksuite/blocks';
+} from '@blocksuite/affine-model';
+import { matchModels } from '@blocksuite/affine-shared/utils';
 import type { BlockModel, Store } from '@blocksuite/store';
 
 import { headingKeys } from '../config.js';
@@ -35,14 +34,14 @@ export function getNotesFromDoc(
 }
 
 export function isRootBlock(block: BlockModel): block is RootBlockModel {
-  return BlocksUtils.matchModels(block, [RootBlockModel]);
+  return matchModels(block, [RootBlockModel]);
 }
 
 export function isHeadingBlock(
   block: BlockModel
 ): block is ParagraphBlockModel {
   return (
-    BlocksUtils.matchModels(block, [ParagraphBlockModel]) &&
+    matchModels(block, [ParagraphBlockModel]) &&
     headingKeys.has(block.type$.value)
   );
 }
diff --git a/blocksuite/presets/src/fragments/outline/utils/scroll.ts b/blocksuite/affine/fragment-outline/src/utils/scroll.ts
similarity index 91%
rename from blocksuite/presets/src/fragments/outline/utils/scroll.ts
rename to blocksuite/affine/fragment-outline/src/utils/scroll.ts
index 855de2c1c9..f21d633273 100644
--- a/blocksuite/presets/src/fragments/outline/utils/scroll.ts
+++ b/blocksuite/affine/fragment-outline/src/utils/scroll.ts
@@ -1,9 +1,8 @@
+import { getDocTitleByEditorHost } from '@blocksuite/affine-components/doc-title';
+import { NoteDisplayMode } from '@blocksuite/affine-model';
+import { DocModeProvider } from '@blocksuite/affine-shared/services';
+import type { Viewport } from '@blocksuite/affine-shared/types';
 import type { EditorHost } from '@blocksuite/block-std';
-import {
-  DocModeProvider,
-  getDocTitleByEditorHost,
-  NoteDisplayMode,
-} from '@blocksuite/blocks';
 import { clamp, DisposableGroup } from '@blocksuite/global/utils';
 
 import { getHeadingBlocksFromDoc } from './query.js';
@@ -13,7 +12,7 @@ export function scrollToBlock(host: EditorHost, blockId: string) {
   const mode = docModeService.getEditorMode();
   if (mode === 'edgeless') return;
 
-  if (editor.doc.root?.id === blockId) {
+  if (host.doc.root?.id === blockId) {
     const docTitle = getDocTitleByEditorHost(host);
     if (!docTitle) return;
 
@@ -89,7 +88,9 @@ function highlightBlock(host: EditorHost, blockId: string) {
 
   if (host.doc.root?.id === blockId) return emptyClear;
 
-  const rootComponent = host.querySelector('affine-page-root');
+  const rootComponent = host.querySelector<
+    HTMLElement & { viewport: Viewport }
+  >('affine-page-root');
   if (!rootComponent) return emptyClear;
 
   if (!rootComponent.viewport) {
diff --git a/blocksuite/affine/fragment-outline/tsconfig.json b/blocksuite/affine/fragment-outline/tsconfig.json
new file mode 100644
index 0000000000..5617ed4f35
--- /dev/null
+++ b/blocksuite/affine/fragment-outline/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../block-note" },
+    { "path": "../components" },
+    { "path": "../model" },
+    { "path": "../shared" },
+    { "path": "../../framework/block-std" },
+    { "path": "../../framework/global" },
+    { "path": "../../framework/inline" },
+    { "path": "../../framework/store" }
+  ]
+}
diff --git a/blocksuite/blocks/package.json b/blocksuite/blocks/package.json
index c4f73c4098..f42b15a849 100644
--- a/blocksuite/blocks/package.json
+++ b/blocksuite/blocks/package.json
@@ -33,6 +33,7 @@
     "@blocksuite/affine-block-table": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-fragment-frame-panel": "workspace:*",
+    "@blocksuite/affine-fragment-outline": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/affine-widget-drag-handle": "workspace:*",
diff --git a/blocksuite/blocks/src/effects.ts b/blocksuite/blocks/src/effects.ts
index 9b68a5de56..f607b7035d 100644
--- a/blocksuite/blocks/src/effects.ts
+++ b/blocksuite/blocks/src/effects.ts
@@ -34,6 +34,7 @@ import { effects as componentToggleButtonEffects } from '@blocksuite/affine-comp
 import { ToggleSwitch } from '@blocksuite/affine-components/toggle-switch';
 import { effects as componentToolbarEffects } from '@blocksuite/affine-components/toolbar';
 import { effects as fragmentFramePanelEffects } from '@blocksuite/affine-fragment-frame-panel/effects';
+import { effects as fragmentOutlineEffects } from '@blocksuite/affine-fragment-outline/effects';
 import { effects as widgetDragHandleEffects } from '@blocksuite/affine-widget-drag-handle/effects';
 import { effects as widgetEdgelessAutoConnectEffects } from '@blocksuite/affine-widget-edgeless-auto-connect/effects';
 import { effects as widgetFrameTitleEffects } from '@blocksuite/affine-widget-frame-title/effects';
@@ -229,6 +230,7 @@ export function effects() {
   widgetEdgelessAutoConnectEffects();
 
   fragmentFramePanelEffects();
+  fragmentOutlineEffects();
 
   customElements.define('affine-page-root', PageRootBlockComponent);
   customElements.define('affine-preview-root', PreviewRootBlockComponent);
diff --git a/blocksuite/blocks/src/index.ts b/blocksuite/blocks/src/index.ts
index 7dc6f757b5..eafc99426a 100644
--- a/blocksuite/blocks/src/index.ts
+++ b/blocksuite/blocks/src/index.ts
@@ -91,6 +91,7 @@ export {
   Tooltip,
 } from '@blocksuite/affine-components/toolbar';
 export * from '@blocksuite/affine-fragment-frame-panel';
+export * from '@blocksuite/affine-fragment-outline';
 export * from '@blocksuite/affine-model';
 export {
   AttachmentAdapter,
diff --git a/blocksuite/blocks/tsconfig.json b/blocksuite/blocks/tsconfig.json
index 713345bb05..681b898bcc 100644
--- a/blocksuite/blocks/tsconfig.json
+++ b/blocksuite/blocks/tsconfig.json
@@ -26,6 +26,7 @@
     { "path": "../affine/block-table" },
     { "path": "../affine/components" },
     { "path": "../affine/fragment-frame-panel" },
+    { "path": "../affine/fragment-outline" },
     { "path": "../affine/model" },
     { "path": "../affine/shared" },
     { "path": "../affine/widget-drag-handle" },
diff --git a/blocksuite/presets/src/effects.ts b/blocksuite/presets/src/effects.ts
index 3e9dd2c64d..6aa7fa2681 100644
--- a/blocksuite/presets/src/effects.ts
+++ b/blocksuite/presets/src/effects.ts
@@ -7,56 +7,12 @@ import {
   PageEditor,
 } from './editors/index.js';
 import { CommentInput } from './fragments/comment/comment-input.js';
-import {
-  AFFINE_MOBILE_OUTLINE_MENU,
-  AFFINE_OUTLINE_PANEL,
-  AFFINE_OUTLINE_VIEWER,
-  CommentPanel,
-  MobileOutlineMenu,
-  OutlinePanel,
-  OutlineViewer,
-} from './fragments/index.js';
-import {
-  AFFINE_OUTLINE_NOTICE,
-  OutlineNotice,
-} from './fragments/outline/body/outline-notice.js';
-import {
-  AFFINE_OUTLINE_PANEL_BODY,
-  OutlinePanelBody,
-} from './fragments/outline/body/outline-panel-body.js';
-import {
-  AFFINE_OUTLINE_NOTE_CARD,
-  OutlineNoteCard,
-} from './fragments/outline/card/outline-card.js';
-import {
-  AFFINE_OUTLINE_BLOCK_PREVIEW,
-  OutlineBlockPreview,
-} from './fragments/outline/card/outline-preview.js';
-import {
-  AFFINE_OUTLINE_PANEL_HEADER,
-  OutlinePanelHeader,
-} from './fragments/outline/header/outline-panel-header.js';
-import {
-  AFFINE_OUTLINE_NOTE_PREVIEW_SETTING_MENU,
-  OutlineNotePreviewSettingMenu,
-} from './fragments/outline/header/outline-setting-menu.js';
+import { CommentPanel } from './fragments/index.js';
 
 export function effects() {
   customElements.define('page-editor', PageEditor);
   customElements.define('comment-input', CommentInput);
-  customElements.define(
-    AFFINE_OUTLINE_NOTE_PREVIEW_SETTING_MENU,
-    OutlineNotePreviewSettingMenu
-  );
-  customElements.define(AFFINE_OUTLINE_NOTICE, OutlineNotice);
   customElements.define('comment-panel', CommentPanel);
-  customElements.define(AFFINE_OUTLINE_PANEL, OutlinePanel);
-  customElements.define(AFFINE_OUTLINE_PANEL_HEADER, OutlinePanelHeader);
   customElements.define('affine-editor-container', AffineEditorContainer);
-  customElements.define(AFFINE_OUTLINE_NOTE_CARD, OutlineNoteCard);
   customElements.define('edgeless-editor', EdgelessEditor);
-  customElements.define(AFFINE_OUTLINE_VIEWER, OutlineViewer);
-  customElements.define(AFFINE_MOBILE_OUTLINE_MENU, MobileOutlineMenu);
-  customElements.define(AFFINE_OUTLINE_BLOCK_PREVIEW, OutlineBlockPreview);
-  customElements.define(AFFINE_OUTLINE_PANEL_BODY, OutlinePanelBody);
 }
diff --git a/blocksuite/presets/src/fragments/index.ts b/blocksuite/presets/src/fragments/index.ts
index 87d148805e..9881073fab 100644
--- a/blocksuite/presets/src/fragments/index.ts
+++ b/blocksuite/presets/src/fragments/index.ts
@@ -1,2 +1 @@
 export * from './comment/index.js';
-export * from './outline/index.js';
diff --git a/packages/frontend/apps/electron-renderer/package.json b/packages/frontend/apps/electron-renderer/package.json
index deb3f80059..777fc52100 100644
--- a/packages/frontend/apps/electron-renderer/package.json
+++ b/packages/frontend/apps/electron-renderer/package.json
@@ -17,7 +17,7 @@
     "@sentry/react": "^8.44.0",
     "@toeverything/infra": "workspace:*",
     "@toeverything/theme": "^1.1.11",
-    "@vanilla-extract/css": "^1.16.1",
+    "@vanilla-extract/css": "^1.17.0",
     "async-call-rpc": "^6.4.2",
     "next-themes": "^0.4.4",
     "react": "^19.0.0",
diff --git a/packages/frontend/component/package.json b/packages/frontend/component/package.json
index 8eaf2abdfd..dcb350cdc6 100644
--- a/packages/frontend/component/package.json
+++ b/packages/frontend/component/package.json
@@ -79,7 +79,7 @@
     "@testing-library/react": "^16.1.0",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
-    "@vanilla-extract/css": "^1.16.1",
+    "@vanilla-extract/css": "^1.17.0",
     "storybook": "^8.4.7",
     "typescript": "^5.7.2",
     "unplugin-swc": "^1.5.1",
diff --git a/packages/frontend/core/package.json b/packages/frontend/core/package.json
index 657152c995..102bef54da 100644
--- a/packages/frontend/core/package.json
+++ b/packages/frontend/core/package.json
@@ -88,7 +88,7 @@
     "@types/bytes": "^3.1.5",
     "@types/image-blob-reduce": "^4.1.4",
     "@types/lodash-es": "^4.17.12",
-    "@vanilla-extract/css": "^1.16.1",
+    "@vanilla-extract/css": "^1.17.0",
     "fake-indexeddb": "^6.0.0",
     "lodash-es": "^4.17.21",
     "vitest": "3.0.6"
diff --git a/packages/frontend/core/src/components/blocksuite/outline-viewer/index.tsx b/packages/frontend/core/src/components/blocksuite/outline-viewer/index.tsx
index 97fb92a136..bccd74ddb9 100644
--- a/packages/frontend/core/src/components/blocksuite/outline-viewer/index.tsx
+++ b/packages/frontend/core/src/components/blocksuite/outline-viewer/index.tsx
@@ -1,5 +1,5 @@
 import type { EditorHost } from '@blocksuite/affine/block-std';
-import { OutlineViewer } from '@blocksuite/affine/presets';
+import { OutlineViewer } from '@blocksuite/affine/blocks';
 import { useCallback, useRef } from 'react';
 
 import * as styles from './outline-viewer.css';
diff --git a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/outline.tsx b/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/outline.tsx
index 9912fc356f..b00ba259fe 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/outline.tsx
+++ b/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/outline.tsx
@@ -1,5 +1,5 @@
 import type { EditorHost } from '@blocksuite/affine/block-std';
-import { OutlinePanel } from '@blocksuite/affine/presets';
+import { OutlinePanel } from '@blocksuite/affine/blocks';
 import { useCallback, useEffect, useRef } from 'react';
 
 import * as styles from './outline.css';
diff --git a/packages/frontend/core/src/mobile/components/toc-menu/index.tsx b/packages/frontend/core/src/mobile/components/toc-menu/index.tsx
index 48b07c69f1..809786bf3e 100644
--- a/packages/frontend/core/src/mobile/components/toc-menu/index.tsx
+++ b/packages/frontend/core/src/mobile/components/toc-menu/index.tsx
@@ -1,5 +1,5 @@
 import type { EditorHost } from '@blocksuite/affine/block-std';
-import { MobileOutlineMenu } from '@blocksuite/affine/presets';
+import { MobileOutlineMenu } from '@blocksuite/affine/blocks';
 import { useCallback, useRef } from 'react';
 
 export const MobileTocMenu = ({ editor }: { editor: EditorHost | null }) => {
diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts
index bd4f24cbd3..0a3e6408d9 100644
--- a/tools/utils/src/workspace.gen.ts
+++ b/tools/utils/src/workspace.gen.ts
@@ -289,6 +289,20 @@ export const PackageList = [
       'blocksuite/framework/store',
     ],
   },
+  {
+    location: 'blocksuite/affine/fragment-outline',
+    name: '@blocksuite/affine-fragment-outline',
+    workspaceDependencies: [
+      'blocksuite/affine/block-note',
+      'blocksuite/affine/components',
+      'blocksuite/affine/model',
+      'blocksuite/affine/shared',
+      'blocksuite/framework/block-std',
+      'blocksuite/framework/global',
+      'blocksuite/framework/inline',
+      'blocksuite/framework/store',
+    ],
+  },
   {
     location: 'blocksuite/affine/model',
     name: '@blocksuite/affine-model',
@@ -396,6 +410,7 @@ export const PackageList = [
       'blocksuite/affine/block-table',
       'blocksuite/affine/components',
       'blocksuite/affine/fragment-frame-panel',
+      'blocksuite/affine/fragment-outline',
       'blocksuite/affine/model',
       'blocksuite/affine/shared',
       'blocksuite/affine/widget-drag-handle',
@@ -780,6 +795,7 @@ export type PackageName =
   | '@blocksuite/affine-components'
   | '@blocksuite/data-view'
   | '@blocksuite/affine-fragment-frame-panel'
+  | '@blocksuite/affine-fragment-outline'
   | '@blocksuite/affine-model'
   | '@blocksuite/affine-shared'
   | '@blocksuite/affine-widget-drag-handle'
diff --git a/tsconfig.json b/tsconfig.json
index 7e51c2a2b4..a8dc236d1a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -71,6 +71,7 @@
     { "path": "./blocksuite/affine/components" },
     { "path": "./blocksuite/affine/data-view" },
     { "path": "./blocksuite/affine/fragment-frame-panel" },
+    { "path": "./blocksuite/affine/fragment-outline" },
     { "path": "./blocksuite/affine/model" },
     { "path": "./blocksuite/affine/shared" },
     { "path": "./blocksuite/affine/widget-drag-handle" },
diff --git a/yarn.lock b/yarn.lock
index 0fa0c5221f..5e69660c19 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -311,7 +311,7 @@ __metadata:
     "@toeverything/theme": "npm:^1.1.11"
     "@types/react": "npm:^19.0.1"
     "@types/react-dom": "npm:^19.0.2"
-    "@vanilla-extract/css": "npm:^1.16.1"
+    "@vanilla-extract/css": "npm:^1.17.0"
     "@vanilla-extract/dynamic": "npm:^2.1.2"
     check-password-strength: "npm:^3.0.0"
     clsx: "npm:^2.1.1"
@@ -396,7 +396,7 @@ __metadata:
     "@types/bytes": "npm:^3.1.5"
     "@types/image-blob-reduce": "npm:^4.1.4"
     "@types/lodash-es": "npm:^4.17.12"
-    "@vanilla-extract/css": "npm:^1.16.1"
+    "@vanilla-extract/css": "npm:^1.17.0"
     "@vanilla-extract/dynamic": "npm:^2.1.2"
     animejs: "npm:^3.2.2"
     bytes: "npm:^3.1.2"
@@ -488,7 +488,7 @@ __metadata:
     "@toeverything/theme": "npm:^1.1.11"
     "@types/react": "npm:^19.0.1"
     "@types/react-dom": "npm:^19.0.2"
-    "@vanilla-extract/css": "npm:^1.16.1"
+    "@vanilla-extract/css": "npm:^1.17.0"
     async-call-rpc: "npm:^6.4.2"
     cross-env: "npm:^7.0.3"
     next-themes: "npm:^0.4.4"
@@ -3680,7 +3680,7 @@ __metadata:
     "@blocksuite/store": "workspace:*"
     "@floating-ui/dom": "npm:^1.6.10"
     "@preact/signals-core": "npm:^1.8.0"
-    "@vanilla-extract/css": "npm:^1.14.0"
+    "@vanilla-extract/css": "npm:^1.17.0"
     lit: "npm:^3.2.0"
     yjs: "npm:^13.6.21"
     zod: "npm:^3.24.1"
@@ -3744,6 +3744,30 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@blocksuite/affine-fragment-outline@workspace:*, @blocksuite/affine-fragment-outline@workspace:blocksuite/affine/fragment-outline":
+  version: 0.0.0-use.local
+  resolution: "@blocksuite/affine-fragment-outline@workspace:blocksuite/affine/fragment-outline"
+  dependencies:
+    "@blocksuite/affine-block-note": "workspace:*"
+    "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-model": "workspace:*"
+    "@blocksuite/affine-shared": "workspace:*"
+    "@blocksuite/block-std": "workspace:*"
+    "@blocksuite/global": "workspace:*"
+    "@blocksuite/icons": "npm:^2.2.1"
+    "@blocksuite/inline": "workspace:*"
+    "@blocksuite/store": "workspace:*"
+    "@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.11"
+    "@vanilla-extract/css": "npm:^1.17.0"
+    lit: "npm:^3.2.0"
+    minimatch: "npm:^10.0.1"
+    zod: "npm:^3.23.8"
+  languageName: unknown
+  linkType: soft
+
 "@blocksuite/affine-model@workspace:*, @blocksuite/affine-model@workspace:blocksuite/affine/model":
   version: 0.0.0-use.local
   resolution: "@blocksuite/affine-model@workspace:blocksuite/affine/model"
@@ -3962,6 +3986,7 @@ __metadata:
     "@blocksuite/affine-block-table": "workspace:*"
     "@blocksuite/affine-components": "workspace:*"
     "@blocksuite/affine-fragment-frame-panel": "workspace:*"
+    "@blocksuite/affine-fragment-outline": "workspace:*"
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-shared": "workspace:*"
     "@blocksuite/affine-widget-drag-handle": "workspace:*"
@@ -15886,7 +15911,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vanilla-extract/css@npm:^1.14.0, @vanilla-extract/css@npm:^1.16.1, @vanilla-extract/css@npm:^1.17.0, @vanilla-extract/css@npm:^1.17.1":
+"@vanilla-extract/css@npm:^1.17.0, @vanilla-extract/css@npm:^1.17.1":
   version: 1.17.1
   resolution: "@vanilla-extract/css@npm:1.17.1"
   dependencies: