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/tests-legacy/utils/asserts.ts

@@ -1,5 +1,6 @@
 import './declare-test-window.js';
 
+import type { EdgelessNoteBackground } from '@blocksuite/affine-block-note';
 import type {
   BlockComponent,
   EditorHost,
@@ -965,12 +966,13 @@ export async function assertEdgelessNoteBackground(
   const backgroundColor = await editor
     .locator(`affine-edgeless-note[data-block-id="${noteId}"]`)
     .evaluate(ele => {
-      const noteWrapper =
-        ele?.querySelector<HTMLDivElement>('.note-background');
+      const noteWrapper = ele?.querySelector<EdgelessNoteBackground>(
+        'edgeless-note-background'
+      );
       if (!noteWrapper) {
         throw new Error(`Could not find note: ${noteId}`);
       }
-      return noteWrapper.style.backgroundColor;
+      return noteWrapper.backgroundStyle$.value.backgroundColor;
     });
 
   expect(toHex(backgroundColor)).toEqual(color);