feat(builder): add dynamic blocks email and dnd packages

packages/dnd/src/manager.ts

@@ -0,0 +1,108 @@
+import { DragDropManager } from "@dnd-kit/dom";
+import { Sortable } from "@dnd-kit/dom/sortable";
+import type {
+  DndManager,
+  DndManagerOptions,
+  DndMoveIntent,
+  SortableRegistration,
+} from "./types.ts";
+
+export function createDndManager(options: DndManagerOptions): DndManager {
+  const direction = options.direction ?? "ltr";
+  const reducedMotion = options.reducedMotion ?? false;
+  const entries = new Map<
+    string | number,
+    {
+      sortable: Sortable;
+      initial: { group: string | number; index: number };
+      current: SortableRegistration;
+    }
+  >();
+  const manager = new DragDropManager();
+  let activeIds: Array<string | number> = [];
+
+  manager.monitor.addEventListener("dragstart", (event) => {
+    const source = event.operation.source;
+    if (!source) return;
+    activeIds = [source.id];
+    options.announce?.({ type: "pickedUp", ids: activeIds });
+  });
+  manager.monitor.addEventListener("dragover", (event) => {
+    const source = event.operation.source as
+      (typeof event.operation.source & { group?: string | number; index?: number }) | null;
+    if (!source) return;
+    const destination = { group: source.group ?? "default", index: source.index ?? 0 };
+    if (options.accept && !options.accept(activeIds, destination)) {
+      event.preventDefault();
+      options.announce?.({ type: "invalid", ids: activeIds, location: destination });
+    } else options.announce?.({ type: "movedOver", ids: activeIds, location: destination });
+  });
+  manager.monitor.addEventListener("dragend", async (event) => {
+    const source = event.operation.source as
+      | (typeof event.operation.source & {
+          group?: string | number;
+          index?: number;
+          initialGroup?: string | number;
+          initialIndex?: number;
+        })
+      | null;
+    if (!source || event.operation.canceled) {
+      options.announce?.({ type: "cancelled", ids: activeIds });
+      activeIds = [];
+      return;
+    }
+    const intent: DndMoveIntent = {
+      ids: [...activeIds],
+      from: [
+        {
+          group: source.initialGroup ?? source.group ?? "default",
+          index: source.initialIndex ?? source.index ?? 0,
+        },
+      ],
+      to: { group: source.group ?? "default", index: source.index ?? 0 },
+    };
+    const accepted = await options.onMoveIntent(intent);
+    options.announce?.({
+      type: accepted === false ? "cancelled" : "dropped",
+      ids: activeIds,
+      location: intent.to,
+    });
+    activeIds = [];
+  });
+
+  return {
+    registerSortable(registration) {
+      if (entries.has(registration.id))
+        throw new Error(`Duplicate sortable id ${String(registration.id)}.`);
+      const sortable = new Sortable(
+        {
+          id: registration.id,
+          group: registration.group,
+          index: registration.index,
+          element: registration.element,
+          handle: registration.handle,
+          type: registration.type,
+          accept: registration.accepts,
+          disabled: registration.disabled,
+          transition: reducedMotion ? null : undefined,
+          data: { ...registration.data, direction },
+        },
+        manager,
+      );
+      entries.set(registration.id, {
+        sortable,
+        initial: { group: registration.group, index: registration.index },
+        current: registration,
+      });
+      return () => {
+        sortable.destroy();
+        entries.delete(registration.id);
+      };
+    },
+    destroy() {
+      for (const entry of entries.values()) entry.sortable.destroy();
+      entries.clear();
+      manager.destroy();
+    },
+  };
+}