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

packages/block-editor/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./state.ts";
+export * from "./runtime.ts";

packages/block-editor/src/runtime.ts

@@ -0,0 +1,76 @@
+import { createDndManager, type DndAnnouncement, type DndManager } from "@wrnexus/dnd";
+
+export interface MountedEditor {
+  destroy(): void;
+  refresh(): void;
+}
+export interface MountEditorOptions {
+  direction?: "ltr" | "rtl";
+  announce?(announcement: DndAnnouncement): string;
+  onMove(intent: {
+    nodeIds: string[];
+    to: { parentId: string; slot: string; index: number };
+  }): boolean | void | Promise<boolean | void>;
+}
+
+export function mountBlockEditor(root: HTMLElement, options: MountEditorOptions): MountedEditor {
+  let manager: DndManager | undefined;
+  let cleanups: Array<() => void> = [];
+  const live = document.createElement("div");
+  live.setAttribute("role", "status");
+  live.setAttribute("aria-live", "polite");
+  live.setAttribute("aria-atomic", "true");
+  live.style.cssText =
+    "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0";
+  root.append(live);
+  const refresh = () => {
+    cleanups.forEach((cleanup) => cleanup());
+    cleanups = [];
+    manager?.destroy();
+    manager = createDndManager({
+      direction: options.direction ?? (getComputedStyle(root).direction === "rtl" ? "rtl" : "ltr"),
+      reducedMotion: matchMedia("(prefers-reduced-motion: reduce)").matches,
+      announce(announcement) {
+        live.textContent = options.announce?.(announcement) ?? announcement.type;
+      },
+      async onMoveIntent(intent) {
+        const [parentId, slot] = String(intent.to.group).split(":", 2);
+        if (!parentId || !slot) return false;
+        return options.onMove({
+          nodeIds: intent.ids.map(String),
+          to: { parentId, slot, index: intent.to.index },
+        });
+      },
+    });
+    for (const element of root.querySelectorAll<HTMLElement>(
+      "[data-block-id][data-block-parent][data-block-slot]",
+    )) {
+      const id = element.dataset.blockId!;
+      const parent = element.dataset.blockParent!;
+      const slot = element.dataset.blockSlot!;
+      const siblings = [
+        ...element.parentElement!.querySelectorAll<HTMLElement>(":scope > [data-block-id]"),
+      ];
+      const handle = element.querySelector<HTMLElement>("[data-block-handle]") ?? undefined;
+      cleanups.push(
+        manager.registerSortable({
+          id,
+          group: `${parent}:${slot}`,
+          index: siblings.indexOf(element),
+          element,
+          handle,
+          type: element.dataset.blockType,
+        }),
+      );
+    }
+  };
+  refresh();
+  return {
+    refresh,
+    destroy() {
+      cleanups.forEach((cleanup) => cleanup());
+      manager?.destroy();
+      live.remove();
+    },
+  };
+}

packages/block-editor/src/state.ts

@@ -0,0 +1,123 @@
+import { signal, type Signal } from "@wrnexus/reactive";
+import {
+  applyCommand,
+  type BlockCommand,
+  type BlockDocument,
+  type CommandResult,
+  type DocumentKindDefinition,
+  type ReadonlyBlockRegistry,
+  type Result,
+  type SelectionState,
+} from "@wrnexus/blocks";
+
+export interface EditorSnapshot {
+  document: BlockDocument;
+  revision: number;
+  selection: SelectionState;
+  dirty: boolean;
+  status: "idle" | "saving" | "saved" | "conflict" | "error";
+}
+
+interface HistoryEntry {
+  forward: BlockCommand;
+  inverse: BlockCommand;
+}
+
+export interface BlockEditorState extends Signal<EditorSnapshot> {
+  execute(command: BlockCommand): Result<CommandResult>;
+  undo(): boolean;
+  redo(): boolean;
+  select(ids: string[], primary?: string | null): void;
+  markSaving(): void;
+  markSaved(revision: number): void;
+  markConflict(): void;
+  replaceFromServer(document: BlockDocument, revision: number): void;
+  canUndo(): boolean;
+  canRedo(): boolean;
+}
+
+export function createBlockEditorState(options: {
+  document: BlockDocument;
+  revision: number;
+  kind: DocumentKindDefinition;
+  registry: ReadonlyBlockRegistry;
+  historyLimit?: number;
+}): BlockEditorState {
+  const current = signal<EditorSnapshot>({
+    document: options.document,
+    revision: options.revision,
+    selection: { primary: null, ordered: [] },
+    dirty: false,
+    status: "idle",
+  });
+  const past: HistoryEntry[] = [];
+  const future: HistoryEntry[] = [];
+  const limit = Math.max(1, options.historyLimit ?? 100);
+  const apply = (command: BlockCommand, remember: boolean): Result<CommandResult> => {
+    const result = applyCommand(current.get().document, command, options.kind, options.registry);
+    if (!result.ok) return result;
+    if (remember) {
+      past.push({ forward: command, inverse: result.value.inverse });
+      if (past.length > limit) past.shift();
+      future.length = 0;
+    }
+    current.set({
+      ...current.get(),
+      document: result.value.document,
+      selection: result.value.selection,
+      dirty: true,
+      status: "idle",
+    });
+    return result;
+  };
+  return Object.assign(current, {
+    execute: (command: BlockCommand) => apply(command, true),
+    undo() {
+      const entry = past.pop();
+      if (!entry) return false;
+      const result = apply(entry.inverse, false);
+      if (!result.ok) {
+        past.push(entry);
+        return false;
+      }
+      future.push(entry);
+      return true;
+    },
+    redo() {
+      const entry = future.pop();
+      if (!entry) return false;
+      const result = apply(entry.forward, false);
+      if (!result.ok) {
+        future.push(entry);
+        return false;
+      }
+      past.push(entry);
+      return true;
+    },
+    select(ids: string[], primary: string | null = ids[0] ?? null) {
+      current.set({ ...current.get(), selection: { primary, ordered: [...new Set(ids)] } });
+    },
+    markSaving() {
+      current.set({ ...current.get(), status: "saving" });
+    },
+    markSaved(revision: number) {
+      current.set({ ...current.get(), revision, dirty: false, status: "saved" });
+    },
+    markConflict() {
+      current.set({ ...current.get(), status: "conflict" });
+    },
+    replaceFromServer(document: BlockDocument, revision: number) {
+      past.length = 0;
+      future.length = 0;
+      current.set({
+        document,
+        revision,
+        selection: { primary: null, ordered: [] },
+        dirty: false,
+        status: "idle",
+      });
+    },
+    canUndo: () => past.length > 0,
+    canRedo: () => future.length > 0,
+  });
+}