fix: peekable in edgeless mode (#12271)

Fixes [BS-3374](https://linear.app/affine-design/issue/BS-3374/)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Improved control over when the peek view is shown in "edgeless" editor mode, ensuring it only activates when interacting directly with the relevant component.
- **Bug Fixes**
  - Prevented unintended peek view activation in "edgeless" mode when clicking outside the associated component.
- **Tests**
  - Added end-to-end test verifying the peek view does not open when content is covered by a canvas element.
- **Chores**
  - Added utility function to streamline creating synced pages in edgeless mode during tests.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

tests/kit/src/utils/page-logic.ts

@@ -75,6 +75,20 @@ export const createLinkedPage = async (page: Page, pageName?: string) => {
     .click();
 };
 
+export const createSyncedPageInEdgeless = async (
+  page: Page,
+  pageName?: string
+) => {
+  await page.keyboard.type('@', { delay: 50 });
+  const cmdkPopover = page.locator('[data-testid="cmdk-quick-search"]');
+  await expect(cmdkPopover).toBeVisible();
+  await type(page, pageName || 'Untitled');
+
+  await cmdkPopover
+    .locator('[cmdk-item][data-value="creation:create-page"]')
+    .click();
+};
+
 export const createTodayPage = async (page: Page) => {
   // fixme: workaround for @ popover not showing up when editor is not ready
   await page.waitForTimeout(500);