@vizejs/ui 0.426.3 → 0.427.0

package/registry/files/families/interaction/drag-and-drop/drag-and-drop-announce.ts

@@ -0,0 +1,71 @@
+import type { DragAnnouncementContext, DragAnnouncements } from "./drag-and-drop-types.ts";
+
+const visuallyHiddenStyles: readonly (readonly [string, string])[] = [
+  ["border", "0"],
+  ["clip-path", "inset(50%)"],
+  ["height", "1px"],
+  ["margin", "-1px"],
+  ["overflow", "hidden"],
+  ["padding", "0"],
+  ["position", "fixed"],
+  ["white-space", "nowrap"],
+  ["width", "1px"],
+];
+
+/** Owned assertive live region created lazily so SSR never touches the DOM. */
+export interface DragLiveRegion {
+  /** Speak one message; repeated messages are re-announced. */
+  readonly announce: (document: Document, message: string) => void;
+
+  /** Remove the live region element when it was created. */
+  readonly dispose: () => void;
+}
+
+/** Create a lazily mounted `role="status"` live region for drag announcements. */
+export function createDragLiveRegion(): DragLiveRegion {
+  let element: HTMLElement | null = null;
+  return Object.freeze({
+    announce(document: Document, message: string) {
+      if (!element || !element.isConnected || element.ownerDocument !== document) {
+        element?.remove();
+        element = document.createElement("div");
+        element.setAttribute("role", "status");
+        element.setAttribute("aria-live", "assertive");
+        element.setAttribute("aria-atomic", "true");
+        element.setAttribute("data-vize-ui", "drag-and-drop-live");
+        for (const [property, value] of visuallyHiddenStyles) {
+          element.style.setProperty(property, value);
+        }
+        document.body.append(element);
+      }
+      // Alternate a trailing no-break space so identical messages re-announce.
+      element.textContent = element.textContent === message ? `${message} ` : message;
+    },
+    dispose() {
+      element?.remove();
+      element = null;
+    },
+  });
+}
+
+function position(context: DragAnnouncementContext): string {
+  return context.targetIndex !== null && context.targetCount !== null
+    ? `, drop target ${context.targetIndex} of ${context.targetCount}`
+    : "";
+}
+
+/** Built-in English announcement builders; consumers override to localize. */
+export const defaultDragAnnouncements: Required<DragAnnouncements> = Object.freeze({
+  grab: (context) =>
+    context.pointerType === "keyboard"
+      ? `Picked up ${context.sourceLabel}. Use the arrow keys to choose a drop target, ` +
+        "Enter to drop, Escape to cancel."
+      : `Picked up ${context.sourceLabel}.`,
+  move: (context) =>
+    context.targetLabel === null ? null : `Over ${context.targetLabel}${position(context)}.`,
+  drop: (context) =>
+    context.targetLabel === null
+      ? `${context.sourceLabel} released without a drop target.`
+      : `Dropped ${context.sourceLabel} on ${context.targetLabel}.`,
+  cancel: (context) => `Drag canceled. ${context.sourceLabel} was not moved.`,
+});

package/registry/files/families/interaction/drag-and-drop/drag-and-drop-autoscroll.ts

@@ -0,0 +1,85 @@
+import { toValue } from "vue";
+
+import type { DragAutoScrollOptions } from "./drag-and-drop-controller-types.ts";
+import { measureRect, readDistance } from "./drag-and-drop-internal.ts";
+import type { Point } from "./drag-and-drop-internal.ts";
+
+/** Session-scoped auto-scroller driven by pointer samples and frame callbacks. */
+export interface DragAutoScroller {
+  /** Record the latest pointer sample and apply one scroll step when engaged. */
+  readonly update: (point: Point) => void;
+
+  /** Stop the frame loop and forget the last pointer sample. */
+  readonly stop: () => void;
+}
+
+interface ScrollableElement extends Element {
+  scrollLeft: number;
+  scrollTop: number;
+}
+
+function isScrollable(element: Element | null | undefined): element is ScrollableElement {
+  return Boolean(
+    element && "scrollTop" in element && typeof (element as Element).scrollTop === "number",
+  );
+}
+
+/**
+ * Create an edge-proximity auto-scroller for one controller.
+ *
+ * Each pointer sample applies one immediate scroll step; while a sample stays
+ * inside a threshold band, an animation-frame loop keeps scrolling so a held
+ * pointer near an edge continues to advance the container.
+ */
+export function createDragAutoScroller(
+  options: DragAutoScrollOptions | undefined,
+): DragAutoScroller {
+  if (!options) return Object.freeze({ update: () => undefined, stop: () => undefined });
+  let lastPoint: Point | null = null;
+  let frame: number | null = null;
+
+  const step = (): boolean => {
+    const point = lastPoint;
+    const container = toValue(options.container);
+    if (!point || !isScrollable(container)) return false;
+    const rect = measureRect(container, options.getRect);
+    if (!rect) return false;
+    const threshold = readDistance(options.threshold, "autoScroll.threshold", 48, Number.MIN_VALUE);
+    const speed = readDistance(options.speed, "autoScroll.speed", 16, Number.MIN_VALUE);
+    const along = (distance: number): number =>
+      distance < threshold
+        ? Math.ceil(((threshold - Math.max(distance, 0)) / threshold) * speed)
+        : 0;
+    const nearLeft = along(point.x - rect.left);
+    const nearTop = along(point.y - rect.top);
+    const deltaX = nearLeft > 0 ? -nearLeft : along(rect.right - point.x);
+    const deltaY = nearTop > 0 ? -nearTop : along(rect.bottom - point.y);
+    if (deltaX === 0 && deltaY === 0) return false;
+    container.scrollLeft += deltaX;
+    container.scrollTop += deltaY;
+    return true;
+  };
+
+  const loop = () => {
+    frame = null;
+    if (!step()) return;
+    const raf = globalThis.requestAnimationFrame;
+    if (typeof raf === "function") frame = raf(loop);
+  };
+
+  return Object.freeze({
+    update(point: Point) {
+      lastPoint = point;
+      const engaged = step();
+      const raf = globalThis.requestAnimationFrame;
+      if (engaged && frame === null && typeof raf === "function") frame = raf(loop);
+    },
+    stop() {
+      lastPoint = null;
+      if (frame !== null && typeof globalThis.cancelAnimationFrame === "function") {
+        globalThis.cancelAnimationFrame(frame);
+      }
+      frame = null;
+    },
+  });
+}

package/registry/files/families/interaction/drag-and-drop/drag-and-drop-controller-types.ts

@@ -0,0 +1,248 @@
+import type { MaybeRefOrGetter, ShallowRef } from "vue";
+
+import type {
+  DragAnnouncements,
+  DragEndEvent,
+  DragMoveEvent,
+  DragPayload,
+  DragStartEvent,
+  DropEdge,
+  DropIndicatorState,
+  DropTargetEvent,
+  DropTargetRect,
+} from "./drag-and-drop-types.ts";
+
+/** Edge-proximity auto-scroll configuration for pointer sessions. */
+export interface DragAutoScrollOptions {
+  /** Scrollable element driven while a pointer drag approaches its edges. */
+  readonly container: MaybeRefOrGetter<Element | null | undefined>;
+
+  /**
+   * Viewport rectangle of the container used for edge proximity.
+   *
+   * @default the container's `getBoundingClientRect()`
+   */
+  readonly getRect?: () => DropTargetRect | DOMRectReadOnly | null | undefined;
+
+  /**
+   * Distance in CSS pixels from a container edge that engages scrolling.
+   * The resolved value must be finite and greater than zero.
+   *
+   * @default 48
+   */
+  readonly threshold?: MaybeRefOrGetter<number | undefined>;
+
+  /**
+   * Maximum scroll distance in CSS pixels applied per scroll step.
+   * The resolved value must be finite and greater than zero.
+   *
+   * @default 16
+   */
+  readonly speed?: MaybeRefOrGetter<number | undefined>;
+}
+
+/** Options shared by `createDragAndDrop` and `useDragAndDrop`. */
+export interface DragAndDropOptions<Data = unknown> {
+  /**
+   * Suppress new sessions and cancel the active session on its next event.
+   *
+   * @default false
+   */
+  readonly isDisabled?: MaybeRefOrGetter<boolean | undefined>;
+
+  /**
+   * Chebyshev distance in CSS pixels a pointer must travel before a session
+   * starts. The resolved value must be finite and greater than or equal to zero.
+   *
+   * @default 4
+   */
+  readonly startDistance?: MaybeRefOrGetter<number | undefined>;
+
+  /**
+   * Edge-proximity auto-scroll for pointer sessions.
+   *
+   * @default undefined
+   */
+  readonly autoScroll?: DragAutoScrollOptions;
+
+  /**
+   * Overrides merged over the built-in English announcement builders.
+   *
+   * @default built-in English announcements
+   */
+  readonly announcements?: DragAnnouncements<Data>;
+
+  /** Called exactly once when a session starts. */
+  readonly onDragStart?: (event: DragStartEvent<Data>) => void;
+
+  /** Called for pointer movement and keyboard target changes inside a session. */
+  readonly onDragMove?: (event: DragMoveEvent<Data>) => void;
+
+  /** Called exactly once after a session drops or cancels. */
+  readonly onDragEnd?: (event: DragEndEvent<Data>) => void;
+}
+
+/** Declaration of one draggable source owned by a controller. */
+export interface DragSourceOptions<Data = unknown> {
+  /** Stable key unique among this controller's sources. */
+  readonly key: string;
+
+  /** Dragged item element used for geometry; the handle receives `sourceProps`. */
+  readonly element?: MaybeRefOrGetter<Element | null | undefined>;
+
+  /**
+   * Typed payload resolved when a session starts.
+   *
+   * @default undefined
+   */
+  readonly payload?: MaybeRefOrGetter<DragPayload<Data> | undefined>;
+
+  /**
+   * Human-readable name used by announcements.
+   *
+   * @default the source key
+   */
+  readonly label?: MaybeRefOrGetter<string | undefined>;
+
+  /**
+   * Suppress new sessions from this source.
+   *
+   * @default false
+   */
+  readonly isDisabled?: MaybeRefOrGetter<boolean | undefined>;
+
+  /**
+   * Whether Enter or Space on the handle starts a keyboard session.
+   *
+   * @default true
+   */
+  readonly keyboard?: MaybeRefOrGetter<boolean | undefined>;
+}
+
+/** Native handlers to spread onto exactly one drag handle per source. */
+export interface DragSourceProps {
+  readonly onDragstart: (event: DragEvent) => void;
+  readonly onFocusout: (event: FocusEvent) => void;
+  readonly onKeydown: (event: KeyboardEvent) => void;
+  readonly onMousedown: (event: MouseEvent) => void;
+  readonly onPointerdown: (event: PointerEvent) => void;
+  readonly onTouchstart: (event: TouchEvent) => void;
+}
+
+/** Live registration owned by one drag source. */
+export interface DragSourceRegistration {
+  /** Key this registration was created with. */
+  readonly key: string;
+
+  /** Whether this source owns the active session. */
+  readonly isDragging: Readonly<ShallowRef<boolean>>;
+
+  /** Stable native handlers to spread or merge onto one drag handle. */
+  readonly sourceProps: Readonly<DragSourceProps>;
+
+  /** Remove the source; its active session is canceled first. */
+  readonly dispose: () => void;
+}
+
+/** Declaration of one drop target owned by a controller. */
+export interface DropTargetOptions<Data = unknown> {
+  /** Stable key unique among this controller's targets. */
+  readonly key: string;
+
+  /** Element that owns this target's geometry and keyboard order. */
+  readonly element: MaybeRefOrGetter<Element | null | undefined>;
+
+  /**
+   * Drop edges this target resolves, in preference order for keyboard sessions.
+   *
+   * @default ["inside"]
+   */
+  readonly edges?: MaybeRefOrGetter<readonly DropEdge[] | undefined>;
+
+  /**
+   * Viewport rectangle used for hit testing and indicator geometry.
+   *
+   * @default the element's `getBoundingClientRect()`
+   */
+  readonly getRect?: () => DropTargetRect | DOMRectReadOnly | null | undefined;
+
+  /**
+   * Whether this target accepts the session payload.
+   *
+   * @default every payload is accepted
+   */
+  readonly accepts?: (payload: DragPayload<Data> | null) => boolean;
+
+  /**
+   * Remove this target from hit testing and keyboard navigation.
+   *
+   * @default false
+   */
+  readonly isDisabled?: MaybeRefOrGetter<boolean | undefined>;
+
+  /**
+   * Human-readable name used by announcements.
+   *
+   * @default the target key
+   */
+  readonly label?: MaybeRefOrGetter<string | undefined>;
+
+  /** Called when the drag enters this target. */
+  readonly onEnter?: (event: DropTargetEvent<Data>) => void;
+
+  /** Called when the drag moves inside this target or its edge changes. */
+  readonly onMove?: (event: DropTargetEvent<Data>) => void;
+
+  /** Called when the drag leaves this target without dropping. */
+  readonly onLeave?: (event: DropTargetEvent<Data>) => void;
+
+  /** Called when the session drops on this target. */
+  readonly onDrop?: (event: DropTargetEvent<Data>) => void;
+}
+
+/** Live registration owned by one drop target. */
+export interface DropTargetRegistration {
+  /** Key this registration was created with. */
+  readonly key: string;
+
+  /** Whether the active session is currently over this target. */
+  readonly isOver: Readonly<ShallowRef<boolean>>;
+
+  /** Remove the target from hit testing and keyboard navigation. */
+  readonly dispose: () => void;
+}
+
+/** Stateful drag-and-drop coordinator with explicit ownership and disposal. */
+export interface DragAndDropController<Data = unknown> {
+  /** Whether a pointer or keyboard session is active. */
+  readonly isDragging: Readonly<ShallowRef<boolean>>;
+
+  /** Key of the source that owns the active session, or `null`. */
+  readonly sourceKey: Readonly<ShallowRef<string | null>>;
+
+  /** Key of the target currently under the active session, or `null`. */
+  readonly targetKey: Readonly<ShallowRef<string | null>>;
+
+  /** Indicator state for the target currently under the active session. */
+  readonly indicator: Readonly<ShallowRef<DropIndicatorState | null>>;
+
+  /** Register one draggable source. Duplicate keys are rejected. */
+  readonly registerSource: (options: DragSourceOptions<Data>) => DragSourceRegistration;
+
+  /** Register one drop target. Duplicate keys are rejected. */
+  readonly registerTarget: (options: DropTargetOptions<Data>) => DropTargetRegistration;
+
+  /** Speak one message through the controller's assertive live region. */
+  readonly announce: (message: string) => void;
+
+  /**
+   * Cancel the active session, including one that has not started yet.
+   *
+   * @returns `true` when an owned session or armed pointer was settled.
+   * @throws An error carrying `VIZE_UI_DRAG_AND_DROP_DISPOSED` after disposal.
+   */
+  readonly cancel: () => boolean;
+
+  /** Release listeners, the live region, and reactive state without callbacks. */
+  readonly dispose: () => void;
+}

package/registry/files/families/interaction/drag-and-drop/drag-and-drop-internal.ts

@@ -0,0 +1,279 @@
+import { toValue } from "vue";
+
+import type {
+  DragAndDropOptions,
+  DragSourceOptions,
+  DropTargetOptions,
+} from "./drag-and-drop-controller-types.ts";
+import type {
+  DragEventType,
+  DragLifecycleEvent,
+  DragPayload,
+  DragPointerType,
+  DropEdge,
+  DropIndicatorState,
+  DropTargetEvent,
+  DropTargetEventType,
+  DropTargetRect,
+} from "./drag-and-drop-types.ts";
+
+const invalidOptionDiagnostic = "VIZE_UI_DRAG_AND_DROP_OPTION";
+const dropEdges = new Set<DropEdge>(["bottom", "inside", "left", "right", "top"]);
+
+export interface Point {
+  readonly x: number;
+  readonly y: number;
+}
+
+/** Resolve and validate a reactive boolean option for JavaScript consumers. */
+export function readBoolean(value: MaybeBoolean, name: string, defaultValue = false): boolean {
+  const resolved = toValue(value);
+  if (resolved === undefined) return defaultValue;
+  if (typeof resolved !== "boolean") {
+    throw new TypeError(`${invalidOptionDiagnostic}: ${name} must resolve to a boolean`);
+  }
+  return resolved;
+}
+
+type MaybeBoolean = DragAndDropOptions["isDisabled"];
+
+/** Resolve a finite non-negative pixel distance with an explicit default. */
+export function readDistance(
+  value: DragAndDropOptions["startDistance"],
+  name: string,
+  defaultValue: number,
+  minimum = 0,
+): number {
+  const resolved = toValue(value) ?? defaultValue;
+  if (typeof resolved !== "number" || !Number.isFinite(resolved) || resolved < minimum) {
+    throw new TypeError(
+      `${invalidOptionDiagnostic}: ${name} must resolve to a finite number >= ${minimum}`,
+    );
+  }
+  return resolved;
+}
+
+/** Resolve an announcement label falling back to the owning key. */
+export function readLabel(value: DragSourceOptions["label"], key: string): string {
+  const resolved = toValue(value) ?? key;
+  if (typeof resolved !== "string") {
+    throw new TypeError(`${invalidOptionDiagnostic}: label must resolve to a string`);
+  }
+  return resolved;
+}
+
+/** Validate one callback slot eagerly so setup failures never install listeners. */
+export function validateCallbacks(options: object, names: readonly string[]): void {
+  for (const name of names) {
+    const callback = (options as Record<string, unknown>)[name];
+    if (callback !== undefined && typeof callback !== "function") {
+      throw new TypeError(`${invalidOptionDiagnostic}: ${name} must be a function`);
+    }
+  }
+}
+
+/** Validate a registration key and its uniqueness inside one controller. */
+export function validateKey(
+  key: unknown,
+  existing: ReadonlySet<string> | ReadonlyMap<string, unknown>,
+): string {
+  if (typeof key !== "string" || key.length === 0) {
+    throw new TypeError(`${invalidOptionDiagnostic}: key must be a non-empty string`);
+  }
+  if (existing.has(key)) {
+    throw new TypeError(`${invalidOptionDiagnostic}: duplicate key "${key}"`);
+  }
+  return key;
+}
+
+/** Validate the closed drop-edge union without accepting mistyped JavaScript. */
+export function validateEdges(edges: DropTargetOptions["edges"]): readonly DropEdge[] {
+  if (edges === undefined) return ["inside"];
+  if (!Array.isArray(edges) || edges.length === 0 || edges.some((edge) => !dropEdges.has(edge))) {
+    throw new TypeError(
+      `${invalidOptionDiagnostic}: edges must be a non-empty array of drop edges`,
+    );
+  }
+  return [...edges];
+}
+
+/** Normalize a measured rectangle, rejecting rects that cannot own a drop. */
+export function normalizeRect(
+  rect: DropTargetRect | DOMRectReadOnly | null | undefined,
+): DropTargetRect | null {
+  if (!rect) return null;
+  const { top, left, right, bottom } = rect;
+  if (![top, left, right, bottom].every(Number.isFinite)) return null;
+  if (right < left || bottom < top) return null;
+  return { top, left, right, bottom };
+}
+
+/** Measure one element through its override or the live layout. */
+export function measureRect(
+  element: Element | null | undefined,
+  getRect: (() => DropTargetRect | DOMRectReadOnly | null | undefined) | undefined,
+): DropTargetRect | null {
+  if (getRect) return normalizeRect(getRect());
+  if (!element || typeof element.getBoundingClientRect !== "function") return null;
+  return normalizeRect(element.getBoundingClientRect());
+}
+
+/** Whether a client point lies inside an axis-aligned rectangle. */
+export function containsPoint(rect: DropTargetRect, point: Point): boolean {
+  return (
+    point.x >= rect.left && point.x <= rect.right && point.y >= rect.top && point.y <= rect.bottom
+  );
+}
+
+/** Chebyshev distance gate deciding when an armed pointer becomes a session. */
+export function exceedsDistance(origin: Point, point: Point, threshold: number): boolean {
+  return Math.max(Math.abs(point.x - origin.x), Math.abs(point.y - origin.y)) >= threshold;
+}
+
+/**
+ * Resolve the drop edge for a point inside a rectangle.
+ *
+ * When `"inside"` is allowed together with directional edges, the central half
+ * of each constrained axis resolves to `"inside"`; otherwise the nearest
+ * allowed edge on the dominant axis wins.
+ */
+export function resolveEdge(
+  rect: DropTargetRect,
+  point: Point,
+  edges: readonly DropEdge[],
+): DropEdge {
+  const allowed = new Set(edges);
+  const width = Math.max(rect.right - rect.left, 1);
+  const height = Math.max(rect.bottom - rect.top, 1);
+  const relativeX = (point.x - rect.left) / width - 0.5;
+  const relativeY = (point.y - rect.top) / height - 0.5;
+  const horizontal = allowed.has("left") || allowed.has("right");
+  const vertical = allowed.has("top") || allowed.has("bottom");
+  if (allowed.has("inside")) {
+    const insideX = !horizontal || Math.abs(relativeX) <= 0.25;
+    const insideY = !vertical || Math.abs(relativeY) <= 0.25;
+    if ((insideX && insideY) || (!horizontal && !vertical)) return "inside";
+  }
+  const preferHorizontal = horizontal && (!vertical || Math.abs(relativeX) >= Math.abs(relativeY));
+  const axisEdges: readonly [DropEdge, DropEdge] = preferHorizontal
+    ? ["left", "right"]
+    : ["top", "bottom"];
+  const negative = preferHorizontal ? relativeX < 0 : relativeY < 0;
+  const preferred = negative ? axisEdges[0] : axisEdges[1];
+  const opposite = negative ? axisEdges[1] : axisEdges[0];
+  if (allowed.has(preferred)) return preferred;
+  if (allowed.has(opposite)) return opposite;
+  return edges[0] ?? "inside";
+}
+
+/** Build indicator geometry: a placeholder rect plus a collapsed edge line. */
+export function indicatorFor(
+  targetKey: string,
+  edge: DropEdge,
+  rect: DropTargetRect | null,
+): DropIndicatorState {
+  let line: DropTargetRect | null = null;
+  if (rect && edge !== "inside") {
+    if (edge === "top") line = { ...rect, bottom: rect.top };
+    else if (edge === "bottom") line = { ...rect, top: rect.bottom };
+    else if (edge === "left") line = { ...rect, right: rect.left };
+    else line = { ...rect, left: rect.right };
+  }
+  return Object.freeze({ targetKey, edge, rect, line });
+}
+
+/** Sort elements into document order, treating detached elements as later. */
+export function compareDocumentOrder(left: Element, right: Element): number {
+  if (left === right) return 0;
+  const position = left.compareDocumentPosition(right);
+  if (position & 4) return -1; // DOCUMENT_POSITION_FOLLOWING
+  if (position & 2) return 1; // DOCUMENT_POSITION_PRECEDING
+  return 0;
+}
+
+export interface HitCandidate {
+  readonly element: Element | null;
+  readonly rect: DropTargetRect;
+}
+
+/**
+ * Overlay-safe hit test: measured rectangles are compared directly, so drag
+ * previews and overlays can never mask a target. Nested ownership prefers the
+ * innermost target by DOM containment, then the smallest area.
+ */
+export function hitTest<Candidate extends HitCandidate>(
+  candidates: readonly Candidate[],
+  point: Point,
+): Candidate | null {
+  const containing = candidates.filter((candidate) => containsPoint(candidate.rect, point));
+  let winner: Candidate | null = null;
+  let winnerDepth = -1;
+  let winnerArea = Number.POSITIVE_INFINITY;
+  for (const candidate of containing) {
+    const depth = containing.filter(
+      (other) =>
+        other !== candidate &&
+        other.element !== null &&
+        candidate.element !== null &&
+        other.element.contains(candidate.element),
+    ).length;
+    const area =
+      (candidate.rect.right - candidate.rect.left) * (candidate.rect.bottom - candidate.rect.top);
+    if (depth > winnerDepth || (depth === winnerDepth && area < winnerArea)) {
+      winner = candidate;
+      winnerDepth = depth;
+      winnerArea = area;
+    }
+  }
+  return winner;
+}
+
+/** Build a frozen lifecycle snapshot for controller-level callbacks. */
+export function createDragEvent<Data, Type extends DragEventType>(
+  type: Type,
+  pointerType: DragPointerType,
+  sourceKey: string,
+  payload: DragPayload<Data> | null,
+  targetKey: string | null,
+  edge: DropEdge | null,
+  point: Point | null,
+  originalEvent: Event | null,
+  isCanceled = false,
+): DragLifecycleEvent<Data, Type> {
+  return Object.freeze({
+    type,
+    pointerType,
+    sourceKey,
+    payload,
+    targetKey,
+    edge,
+    x: point?.x ?? null,
+    y: point?.y ?? null,
+    originalEvent,
+    isCanceled,
+  });
+}
+
+/** Build a frozen target-scoped snapshot for drop-target callbacks. */
+export function createDropTargetEvent<Data>(
+  type: DropTargetEventType,
+  targetKey: string,
+  sourceKey: string,
+  pointerType: DragPointerType,
+  payload: DragPayload<Data> | null,
+  edge: DropEdge | null,
+  point: Point | null,
+  originalEvent: Event | null,
+): DropTargetEvent<Data> {
+  return Object.freeze({
+    type,
+    targetKey,
+    sourceKey,
+    pointerType,
+    payload,
+    edge,
+    x: point?.x ?? null,
+    y: point?.y ?? null,
+    originalEvent,
+  });
+}