feat(editor): show doc title in page block (#9975)

Close [BS-2392](https://linear.app/affine-design/issue/BS-2392/page-block-需要显示文章title)

### What Changes
- Add `<doc-title>` to edgeless page block (a.k.a the first page visible note block)
- Refactors:
  - Move `<doc-title>` to `@blocksuite/affine-component`, but you can aslo import it from `@blocksuite/preset`
  - Extract `<edgeless-note-mask>` and `<edgeless-note-background>` from `<affine-edgeless-note>` to a seperate file
  - Rewrite styles of `<affine-edgeless-note>` with `@vanilla-extract/css`

https://github.com/user-attachments/assets/a0c03239-803e-4bfa-b30e-33b919213b12

blocksuite/affine/widget-drag-handle/src/utils.ts

@@ -1,3 +1,7 @@
+import {
+  AFFINE_EDGELESS_NOTE,
+  type EdgelessNoteBlockComponent,
+} from '@blocksuite/affine-block-note';
 import { ParagraphBlockComponent } from '@blocksuite/affine-block-paragraph';
 import type { ParagraphBlockModel } from '@blocksuite/affine-model';
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
@@ -155,7 +159,7 @@ export const getClosestNoteBlock = (
     editorHost.std.get(DocModeProvider).getEditorMode() === 'page';
   return isInsidePageEditor
     ? findClosestBlockComponent(rootComponent, point, 'affine-note')
-    : getHoveringNote(point)?.closest('affine-edgeless-note');
+    : getHoveringNote(point);
 };
 
 export const getClosestBlockByPoint = (
@@ -261,11 +265,11 @@ export function getDuplicateBlocks(blocks: BlockModel[]) {
  */
 function getHoveringNote(point: Point) {
   return (
-    document.elementsFromPoint(point.x, point.y).find(isEdgelessChildNote) ||
-    null
+    document
+      .elementsFromPoint(point.x, point.y)
+      .find(
+        (e): e is EdgelessNoteBlockComponent =>
+          e.tagName.toLowerCase() === AFFINE_EDGELESS_NOTE
+      ) || null
   );
 }
-
-function isEdgelessChildNote({ classList }: Element) {
-  return classList.contains('note-background');
-}