refactor: rewrite blocksuite dnd (#9595)

### Changed

- Refactored BlockSuite drag-and-drop using @atlaskit/pragmatic-drag-and-drop/element/adapter.
- Updated block dragging to use the new drag-and-drop infrastructure.

### BlockSuite DND API

Access the BlockSuite drag-and-drop API via `std.dnd`. This is a lightweight wrapper around pragmatic-drag-and-drop, offering convenient generic types and more intuitive option names.

#### Drag payload structure
There's some constrain about drag payload. The whole drag payload looks like this:

```typescript
type DragPayload = {
  entity: {
    type: string
  },
  from: {
    at: 'blocksuite',
    docId: string
  }
}
```
- The `from` field is auto-generated—no need for manual handling.
- The `entity` field is customizable, but it must include a `type`.

All drag-and-drop methods accept a generic type for entity, ensuring more accurate payloads in event handlers.

```typescript
type BlockEntity = {
  type: 'blocks',
  blockIds: string[]
}

dnd.draggable<BlockEntity>({
  element: someElement,
  setDragData: () => {
    // the return type must satisfy the generic type
    // in this case, it's BlockEntity
    return {
      type: 'blocks',
      blockIds: []
    }
  }
});

dnd.monitor<BlockEntity>({
  // the arguments is same for other event handler
  onDrag({ source }) {
    // the type of this is BlockEntity
    source.data.entity
  }
})
```

#### Drop payload
When hover on droppable target. You can set drop payload as well. All drag-and-drop methods accept a second generic type for drop payload.

The drop payload is customizable. Additionally, the DND system will add an `edge` field to the final payload object, indicating the nearest edge of the drop target relative to the current drag position.

```typescript
type DropPayload = {
  blockId: string;
}

dnd.dropTarget<BlockEntity, DropPayload>({
  getData() {
    // the type should be DropPayload
    return {
      blockId: 'someId'
    }
  }
});

dnd.monitor<BlockEntity, DropPayload>({
  // drag over on drop target
  onDrag({ location }) {
    const target = location.current.dropTargets[0];

    // the type is DropPayload
    target.data;
    // retrieve the nearest edge of the drop target relative to the current drop position.
    target.data.edge;
  }
})
```

blocksuite/framework/block-std/src/view/view-store.ts

@@ -1,11 +1,31 @@
+import { Slot } from '@blocksuite/global/utils';
+
 import { LifeCycleWatcher } from '../extension/index.js';
 import type { BlockComponent, WidgetComponent } from './element/index.js';
 
+type ViewUpdatePayload =
+  | {
+      id: string;
+      type: 'delete';
+      view: BlockComponent;
+    }
+  | {
+      id: string;
+      type: 'add';
+      view: BlockComponent;
+    };
+
 export class ViewStore extends LifeCycleWatcher {
   static override readonly key = 'viewStore';
 
   private readonly _blockMap = new Map<string, BlockComponent>();
 
+  viewUpdated: Slot<ViewUpdatePayload> = new Slot();
+
+  get views() {
+    return Array.from(this._blockMap.values());
+  }
+
   private readonly _fromId = (
     blockId: string | undefined | null
   ): BlockComponent | null => {
@@ -19,7 +39,12 @@ export class ViewStore extends LifeCycleWatcher {
   private readonly _widgetMap = new Map<string, WidgetComponent>();
 
   deleteBlock = (node: BlockComponent) => {
-    this._blockMap.delete(node.id);
+    this._blockMap.delete(node.model.id);
+    this.viewUpdated.emit({
+      id: node.model.id,
+      type: 'delete',
+      view: node,
+    });
   };
 
   deleteWidget = (node: WidgetComponent) => {
@@ -41,7 +66,15 @@ export class ViewStore extends LifeCycleWatcher {
   };
 
   setBlock = (node: BlockComponent) => {
+    if (this._blockMap.has(node.model.id)) {
+      this.deleteBlock(node);
+    }
     this._blockMap.set(node.model.id, node);
+    this.viewUpdated.emit({
+      id: node.model.id,
+      type: 'add',
+      view: node,
+    });
   };
 
   setWidget = (node: WidgetComponent) => {