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

packages/dnd/README.md

@@ -0,0 +1,4 @@
+# @wrnexus/dnd
+
+Stable WRNexus drag-and-drop API backed by `@dnd-kit/dom`. Applications consume
+move intents and never import dnd-kit directly.

packages/dnd/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@wrnexus/dnd",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Stable accessible drag-and-drop primitives for WRNexus.",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "bun test",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@dnd-kit/dom": "0.5.0"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.4.0",
+    "happy-dom": "^20.11.2",
+    "typescript": "^6.0.3"
+  }
+}

packages/dnd/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./types.ts";
+export * from "./reorder.ts";
+export * from "./manager.ts";

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();
+    },
+  };
+}

packages/dnd/src/reorder.ts

@@ -0,0 +1,42 @@
+import type { Direction, DndMoveIntent, SortableLocation } from "./types.ts";
+
+export function visualIndex(
+  index: number,
+  length: number,
+  orientation: "vertical" | "horizontal",
+  direction: Direction,
+): number {
+  return orientation === "horizontal" && direction === "rtl"
+    ? Math.max(0, length - 1 - index)
+    : index;
+}
+
+export function reorderGroups<T extends string | number>(
+  groups: ReadonlyMap<T, readonly T[]>,
+  intent: DndMoveIntent,
+): Map<T, T[]> {
+  const output = new Map<T, T[]>();
+  for (const [group, ids] of groups) output.set(group, [...ids]);
+  const moving = new Set(intent.ids as T[]);
+  for (const [group, ids] of output)
+    output.set(
+      group,
+      ids.filter((id) => !moving.has(id)),
+    );
+  const destination = output.get(intent.to.group as T);
+  if (!destination) throw new Error(`Unknown destination group ${String(intent.to.group)}.`);
+  destination.splice(
+    Math.max(0, Math.min(intent.to.index, destination.length)),
+    0,
+    ...(intent.ids as T[]),
+  );
+  return output;
+}
+
+export function deepestValidTarget<
+  T extends { depth: number; location: SortableLocation; disabled?: boolean },
+>(targets: readonly T[], accept: (location: SortableLocation) => boolean): T | undefined {
+  return [...targets]
+    .filter((target) => !target.disabled && accept(target.location))
+    .sort((left, right) => right.depth - left.depth)[0];
+}

packages/dnd/src/types.ts

@@ -0,0 +1,43 @@
+export type DndId = string | number;
+export type Direction = "ltr" | "rtl";
+export type Orientation = "vertical" | "horizontal" | "grid";
+
+export interface SortableLocation {
+  group: DndId;
+  index: number;
+}
+export interface DndMoveIntent {
+  ids: DndId[];
+  from: SortableLocation[];
+  to: SortableLocation;
+}
+export interface DndAnnouncement {
+  type: "pickedUp" | "movedOver" | "invalid" | "dropped" | "cancelled";
+  ids: DndId[];
+  location?: SortableLocation;
+}
+
+export interface SortableRegistration {
+  id: DndId;
+  group: DndId;
+  index: number;
+  element: HTMLElement;
+  handle?: HTMLElement;
+  type?: DndId;
+  accepts?: DndId[];
+  disabled?: boolean;
+  data?: Record<string, unknown>;
+}
+
+export interface DndManagerOptions {
+  direction?: Direction;
+  reducedMotion?: boolean;
+  announce?: (announcement: DndAnnouncement) => void;
+  accept?: (ids: DndId[], destination: SortableLocation) => boolean;
+  onMoveIntent(intent: DndMoveIntent): boolean | void | Promise<boolean | void>;
+}
+
+export interface DndManager {
+  registerSortable(registration: SortableRegistration): () => void;
+  destroy(): void;
+}

packages/dnd/test/reorder.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from "bun:test";
+import { deepestValidTarget, reorderGroups, visualIndex } from "../src/index.ts";
+
+describe("dnd pure behavior", () => {
+  test("moves across groups without mutation", () => {
+    const input = new Map([
+      ["a", ["1", "2"]],
+      ["b", ["3"]],
+    ]);
+    const result = reorderGroups(input, {
+      ids: ["2"],
+      from: [{ group: "a", index: 1 }],
+      to: { group: "b", index: 0 },
+    });
+    expect(result.get("a")).toEqual(["1"]);
+    expect(result.get("b")).toEqual(["2", "3"]);
+    expect(input.get("a")).toEqual(["1", "2"]);
+  });
+  test("mirrors horizontal RTL index", () =>
+    expect(visualIndex(0, 4, "horizontal", "rtl")).toBe(3));
+  test("selects deepest valid target", () =>
+    expect(
+      deepestValidTarget(
+        [
+          { depth: 1, location: { group: "a", index: 0 } },
+          { depth: 3, location: { group: "b", index: 0 } },
+        ],
+        (location) => location.group === "b",
+      )?.depth,
+    ).toBe(3));
+});

packages/dnd/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*.ts", "test/**/*.ts"]
+}