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/block-note/src/note-edgeless-block.css.ts

@@ -0,0 +1,85 @@
+import { EDGELESS_BLOCK_CHILD_PADDING } from '@blocksuite/affine-shared/consts';
+import { cssVar } from '@toeverything/theme';
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const ACTIVE_NOTE_EXTRA_PADDING = 20;
+
+export const edgelessNoteContainer = style({
+  height: '100%',
+  padding: `${EDGELESS_BLOCK_CHILD_PADDING}px`,
+  boxSizing: 'border-box',
+  pointerEvents: 'all',
+  transformOrigin: '0 0',
+  fontWeight: '400',
+  lineHeight: cssVar('lineHeight'),
+});
+
+export const collapseButton = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '28px',
+  height: '28px',
+  zIndex: 2,
+  position: 'absolute',
+  bottom: 0,
+  left: '50%',
+  transform: 'translateX(-50%)',
+  opacity: 0.2,
+  transition: 'opacity 0.3s',
+
+  ':hover': {
+    opacity: 1,
+  },
+  selectors: {
+    '&.flip': {
+      transform: 'translateX(-50%) rotate(180deg)',
+    },
+  },
+});
+
+export const noteBackground = style({
+  position: 'absolute',
+  borderColor: cssVar('black10'),
+  left: 0,
+  top: 0,
+  width: '100%',
+  height: '100%',
+
+  selectors: {
+    [`${edgelessNoteContainer}[data-editing="true"] &`]: {
+      left: `${-ACTIVE_NOTE_EXTRA_PADDING}px`,
+      top: `${-ACTIVE_NOTE_EXTRA_PADDING}px`,
+      width: `calc(100% + ${ACTIVE_NOTE_EXTRA_PADDING * 2}px)`,
+      height: `calc(100% + ${ACTIVE_NOTE_EXTRA_PADDING * 2}px)`,
+      transition: 'left 0.3s, top 0.3s, width 0.3s, height 0.3s',
+      boxShadow: cssVar('activeShadow'),
+    },
+  },
+});
+
+globalStyle(`${edgelessNoteContainer} > doc-title`, {
+  position: 'relative',
+});
+
+globalStyle(`${edgelessNoteContainer} > doc-title .doc-title-container`, {
+  padding: '26px 0px',
+  fontSize: cssVar('fontTitle'),
+  fontWeight: 700,
+  lineHeight: '44px',
+});
+
+export const pageContent = style({
+  width: '100%',
+  height: '100%',
+});
+
+export const collapsedContent = style({
+  position: 'absolute',
+  background: cssVar('white'),
+  opacity: 0.5,
+  pointerEvents: 'none',
+  border: `2px ${cssVar('blue')} solid`,
+  borderTop: 'unset',
+  borderRadius: '0 0 8px 8px',
+});