refactor(editor): add a layer of ui-logic to enhance type safety (#12511)

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

- **New Features**
  - Introduced modular UI logic layers for Kanban and Table views, enhancing maintainability and scalability.
  - Added new CSS-in-JS style modules for database blocks and table views, improving visual consistency.
  - Expanded telemetry event tracking for database views, properties, filters, and groups.
  - Added utility functions for lazy initialization and cached computed values.

- **Refactor**
  - Unified logic and state management across Kanban and Table views by replacing direct component dependencies with logic-centric architecture.
  - Updated components and widgets to use the new logic-based approach for state, selection, and event handling.
  - Replaced inline styles with CSS classes; updated class names to align with new component structure.
  - Centralized state access through UI logic instances, eliminating direct DOM queries and simplifying dependencies.
  - Consolidated Kanban and Table view presets effects for streamlined initialization.
  - Replaced Lit reactive state with Preact signals in multiple components for improved reactivity.
  - Split monolithic components into separate logic and UI classes for clearer separation of concerns.
  - Removed obsolete components and consolidated exports for cleaner API surface.

- **Bug Fixes**
  - Enhanced selection and interaction reliability in database cells and views.
  - Fixed scrolling issues on mobile table views for improved compatibility.

- **Chores**
  - Updated end-to-end test selectors to reflect new component names and structure.
  - Removed deprecated utilities and cleaned up unused imports.

- **Documentation**
  - Improved type definitions and public API exports for better developer experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

tests/blocksuite/e2e/drag.spec.ts

@@ -15,7 +15,6 @@ import {
   type,
 } from './utils/actions/index.js';
 import {
-  getBoundingClientRect,
   getEditorHostLocator,
   getPageSnapshot,
   initParagraphsByCount,
@@ -239,7 +238,7 @@ test('should sync selected-blocks to session-manager when clicking drag handle',
   await assertRichTexts(page, ['123', '456', '789']);
 
   await focusRichText(page, 1);
-  const rect = await getBoundingClientRect(page, '[data-block-id="1"]');
+  const rect = await page.locator('[data-block-id="1"]').boundingBox();
   if (!rect) {
     throw new Error();
   }
@@ -363,10 +362,10 @@ test('hide drag handle when mouse is hovering over the title', async ({
   await initEmptyParagraphState(page);
   await initThreeParagraphs(page);
 
-  const rect = await getBoundingClientRect(
-    page,
-    '.affine-note-block-container'
-  );
+  const rect = await page.locator('.affine-note-block-container').boundingBox();
+  if (!rect) {
+    throw new Error();
+  }
   const dragHandle = page.locator('.affine-drag-handle-container');
   // When there is a gap between paragraph blocks, it is the correct behavior for the drag handle to appear
   // when the mouse is over the gap. Therefore, we use rect.y - 20 to make the Y offset greater than the gap between the