@reacteditor/core 0.0.2 → 0.0.4

package/dist/{chunk-BQ2PZ2YN.mjs → chunk-D2RG73WI.mjs}

@@ -392,11 +392,14 @@ init_react_import();
 import { useState as useState3 } from "react";
 import { PointerSensor } from "@dnd-kit/react";
 import { isElement } from "@dnd-kit/dom/utilities";
-var touchDefault = { delay: { value: 200, tolerance: 10 } };
-var otherDefault = {
-  delay: { value: 200, tolerance: 10 },
-  distance: { value: 5 }
-};
+import { PointerActivationConstraints } from "@dnd-kit/dom";
+var touchDefault = [
+  new PointerActivationConstraints.Delay({ value: 200, tolerance: 10 })
+];
+var otherDefault = [
+  new PointerActivationConstraints.Delay({ value: 200, tolerance: 10 }),
+  new PointerActivationConstraints.Distance({ value: 5 })
+];
 var useSensors = ({
   other = otherDefault,
   mouse,
@@ -426,8 +429,8 @@ var useSensors = ({
 // lib/dnd/collision/dynamic/index.ts
 init_react_import();
 import {
-  CollisionPriority as CollisionPriority7,
-  CollisionType as CollisionType7
+  CollisionPriority,
+  CollisionType as CollisionType2
 } from "@dnd-kit/abstract";
 
 // lib/dnd/collision/directional/index.ts
@@ -573,70 +576,8 @@ var trackMovementInterval = (point, dragAxis = "dynamic") => {
   return intervalCache;
 };
 
-// ../../node_modules/@dnd-kit/collision/dist/index.js
-init_react_import();
-import { CollisionPriority, CollisionType as CollisionType2 } from "@dnd-kit/abstract";
-import { Point as Point2 } from "@dnd-kit/geometry";
-import { CollisionPriority as CollisionPriority2, CollisionType as CollisionType22 } from "@dnd-kit/abstract";
-import { Point as Point22 } from "@dnd-kit/geometry";
-import { CollisionPriority as CollisionPriority3, CollisionType as CollisionType3 } from "@dnd-kit/abstract";
-import { Point as Point3, Rectangle } from "@dnd-kit/geometry";
-import { CollisionPriority as CollisionPriority4, CollisionType as CollisionType4 } from "@dnd-kit/abstract";
-import { Point as Point4 } from "@dnd-kit/geometry";
-import { CollisionPriority as CollisionPriority5, CollisionType as CollisionType5 } from "@dnd-kit/abstract";
-import { Point as Point5 } from "@dnd-kit/geometry";
-import { CollisionPriority as CollisionPriority6, CollisionType as CollisionType6 } from "@dnd-kit/abstract";
-import { Point as Point6 } from "@dnd-kit/geometry";
-var pointerIntersection = ({
-  dragOperation,
-  droppable
-}) => {
-  const pointerCoordinates = dragOperation.position.current;
-  if (!pointerCoordinates) {
-    return null;
-  }
-  const { id } = droppable;
-  if (!droppable.shape) {
-    return null;
-  }
-  if (droppable.shape.containsPoint(pointerCoordinates)) {
-    const distance = Point2.distance(droppable.shape.center, pointerCoordinates);
-    return {
-      id,
-      value: 1 / distance,
-      type: CollisionType2.PointerIntersection,
-      priority: CollisionPriority.High
-    };
-  }
-  return null;
-};
-var closestCorners = (input) => {
-  const { dragOperation, droppable } = input;
-  const { shape, position } = dragOperation;
-  if (!droppable.shape) {
-    return null;
-  }
-  const shapeCorners = shape ? Rectangle.from(shape.current.boundingRectangle).corners : void 0;
-  const distance = Rectangle.from(
-    droppable.shape.boundingRectangle
-  ).corners.reduce(
-    (acc, corner, index) => {
-      var _a;
-      return acc + Point3.distance(
-        Point3.from(corner),
-        (_a = shapeCorners == null ? void 0 : shapeCorners[index]) != null ? _a : position.current
-      );
-    },
-    0
-  );
-  const value = distance / 4;
-  return {
-    id: droppable.id,
-    value: 1 / value,
-    type: CollisionType3.Collision,
-    priority: CollisionPriority3.Normal
-  };
-};
+// lib/dnd/collision/dynamic/index.ts
+import { closestCorners } from "@dnd-kit/collision";
 
 // lib/dnd/collision/dynamic/store.ts
 init_react_import();
@@ -674,7 +615,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
     collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "yellow");
     if (collision) {
       return __spreadProps(__spreadValues({}, collision), {
-        priority: CollisionPriority7.Highest,
+        priority: CollisionPriority.Highest,
         data
       });
     }
@@ -692,8 +633,8 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
     const collision = {
       id: droppable.id,
       value: intersectionRatio,
-      priority: CollisionPriority7.High,
-      type: CollisionType7.Collision
+      priority: CollisionPriority.High,
+      type: CollisionType2.Collision
     };
     const shouldFlushId = flushNext === droppable.id;
     flushNext = "";
@@ -720,7 +661,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
           );
           flushNext = droppable.id;
           return __spreadProps(__spreadValues({}, fallbackCollision), {
-            priority: CollisionPriority7.Low,
+            priority: CollisionPriority.Low,
             data
           });
         }
@@ -732,7 +673,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
           direction || ""
         );
         return __spreadProps(__spreadValues({}, fallbackCollision), {
-          priority: CollisionPriority7.Lowest,
+          priority: CollisionPriority.Lowest,
           data
         });
       }
@@ -744,6 +685,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
 
 // components/Sortable/index.tsx
 import { useSortable } from "@dnd-kit/react/sortable";
+import { PointerActivationConstraints as PointerActivationConstraints2 } from "@dnd-kit/dom";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var SortableProvider = ({
   children,
@@ -752,7 +694,7 @@ var SortableProvider = ({
   onMove
 }) => {
   const sensors = useSensors({
-    mouse: { distance: { value: 5 } }
+    mouse: [new PointerActivationConstraints2.Distance({ value: 5 })]
   });
   return /* @__PURE__ */ jsx5(
     DragDropProvider,
@@ -2512,6 +2454,7 @@ var DropZoneProvider = ({
 // components/DraggableComponent/index.tsx
 import { useShallow as useShallow4 } from "zustand/react/shallow";
 import { useSortable as useSortable2 } from "@dnd-kit/react/sortable";
+import { Feedback } from "@dnd-kit/dom";
 
 // lib/dnd/use-on-drag-finished.ts
 init_react_import();
@@ -2657,6 +2600,13 @@ var DraggableComponent = ({
     () => createDynamicCollisionDetector(dragAxis),
     [dragAxis]
   );
+  const sortablePlugins = useMemo7(
+    () => (defaults) => [
+      ...defaults,
+      Feedback.configure({ feedback: "clone" })
+    ],
+    []
+  );
   const {
     ref: sortableRef,
     isDragging: thisIsDragging,
@@ -2682,8 +2632,7 @@ var DraggableComponent = ({
     transition: {
       duration: 200,
       easing: "cubic-bezier(0.2, 0, 0, 1)"
-    },
-    feedback: "clone"
+    }
   });
   useEffect8(() => {
     const isEnabled = zoneStore.getState().enabledIndex[zoneCompound];
@@ -3196,6 +3145,7 @@ import {
 // lib/dnd/NestedDroppablePlugin.ts
 init_react_import();
 import { Plugin } from "@dnd-kit/abstract";
+import { getDocuments } from "@dnd-kit/dom/utilities";
 
 // lib/throttle.ts
 init_react_import();
@@ -3276,25 +3226,6 @@ var GlobalPosition = class {
   }
 };
 
-// lib/bubble-pointer-event.ts
-init_react_import();
-var BaseEvent = typeof PointerEvent !== "undefined" ? PointerEvent : Event;
-var BubbledPointerEvent = class extends BaseEvent {
-  constructor(type, data) {
-    super(type, data);
-    this._originalTarget = null;
-    this.originalTarget = data.originalTarget;
-  }
-  // Necessary for Firefox
-  set originalTarget(target) {
-    this._originalTarget = target;
-  }
-  // Necessary for Firefox
-  get originalTarget() {
-    return this._originalTarget;
-  }
-};
-
 // lib/dnd/NestedDroppablePlugin.ts
 var depthSort = (candidates) => {
   return candidates.sort((a, b) => {
@@ -3437,7 +3368,7 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
     }
     this.registerEffect(() => {
       const handleMove = (event) => {
-        const target = event instanceof BubbledPointerEvent ? event.originalTarget || event.target : event.target;
+        const target = event.target;
         const position = new GlobalPosition(target, {
           x: event.clientX,
           y: event.clientY
@@ -3455,15 +3386,55 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
       const handlePointerMove = (event) => {
         handleMoveThrottled(event);
       };
-      document.body.addEventListener("pointermove", handlePointerMove, {
-        capture: true
-        // dndkit's PointerSensor prevents propagation during drag
-      });
-      const cleanup = () => {
-        document.body.removeEventListener("pointermove", handlePointerMove, {
+      const bound = /* @__PURE__ */ new Set();
+      const bind = (doc) => {
+        if (bound.has(doc)) return;
+        bound.add(doc);
+        doc.addEventListener("pointermove", handlePointerMove, {
           capture: true
+          // dndkit's PointerSensor prevents propagation during drag
         });
       };
+      const bindAll = () => {
+        for (const doc of getDocuments()) bind(doc);
+      };
+      bindAll();
+      const onIframeLoad = () => bindAll();
+      const observed = /* @__PURE__ */ new Set();
+      const observeFrame = (el) => {
+        if (observed.has(el)) return;
+        observed.add(el);
+        el.addEventListener("load", onIframeLoad);
+      };
+      for (const el of Array.from(
+        document.querySelectorAll(
+          "iframe, frame"
+        )
+      )) {
+        observeFrame(el);
+      }
+      const observer = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+          for (const node of Array.from(m.addedNodes)) {
+            if (node instanceof HTMLIFrameElement || typeof HTMLFrameElement !== "undefined" && node instanceof HTMLFrameElement) {
+              observeFrame(node);
+            }
+          }
+        }
+        bindAll();
+      });
+      observer.observe(document.body, { childList: true, subtree: true });
+      const cleanup = () => {
+        observer.disconnect();
+        for (const el of observed) {
+          el.removeEventListener("load", onIframeLoad);
+        }
+        for (const doc of bound) {
+          doc.removeEventListener("pointermove", handlePointerMove, {
+            capture: true
+          });
+        }
+      };
       return cleanup;
     });
   }
@@ -4139,6 +4110,9 @@ var Drawer = ({
 };
 Drawer.Item = DrawerItem;
 
+// components/DropZone/index.tsx
+import { pointerIntersection } from "@dnd-kit/collision";
+
 // components/DropZone/lib/use-min-empty-height.ts
 init_react_import();
 import { useEffect as useEffect10, useRef as useRef4, useState as useState12 } from "react";
@@ -7017,44 +6991,6 @@ var styles_module_default21 = { "EditorPreview": "_EditorPreview_xou64_1", "Edit
 // components/Editor/components/Preview/index.tsx
 import { Fragment as Fragment11, jsx as jsx44 } from "react/jsx-runtime";
 var getClassName26 = get_class_name_factory_default("EditorPreview", styles_module_default21);
-var useBubbleIframeEvents = (ref) => {
-  const status = useAppStore((s) => s.status);
-  useEffect21(() => {
-    if (ref.current && status === "READY") {
-      const iframe = ref.current;
-      const handlePointerMove = (event) => {
-        const evt = new BubbledPointerEvent("pointermove", __spreadProps(__spreadValues({}, event), {
-          bubbles: true,
-          cancelable: false,
-          clientX: event.clientX,
-          clientY: event.clientY,
-          originalTarget: event.target
-        }));
-        iframe.dispatchEvent(evt);
-      };
-      const register = () => {
-        var _a;
-        unregister();
-        (_a = iframe.contentDocument) == null ? void 0 : _a.addEventListener(
-          "pointermove",
-          handlePointerMove,
-          { capture: true }
-        );
-      };
-      const unregister = () => {
-        var _a;
-        (_a = iframe.contentDocument) == null ? void 0 : _a.removeEventListener(
-          "pointermove",
-          handlePointerMove
-        );
-      };
-      register();
-      return () => {
-        unregister();
-      };
-    }
-  }, [status]);
-};
 var Preview2 = ({ id = "editor-preview" }) => {
   const dispatch = useAppStore((s) => s.dispatch);
   const root = useAppStore((s) => s.state.data.root);
@@ -7087,7 +7023,6 @@ var Preview2 = ({ id = "editor-preview" }) => {
   const Frame = useMemo18(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
   const ref = useRef11(null);
-  useBubbleIframeEvents(ref);
   const inner = !renderData ? /* @__PURE__ */ jsx44(
     Page,
     __spreadProps(__spreadValues({}, rootProps), {

package/dist/index.js

@@ -5633,11 +5633,14 @@ init_react_import();
 var import_react12 = require("react");
 var import_react13 = require("@dnd-kit/react");
 var import_utilities = require("@dnd-kit/dom/utilities");
-var touchDefault = { delay: { value: 200, tolerance: 10 } };
-var otherDefault = {
-  delay: { value: 200, tolerance: 10 },
-  distance: { value: 5 }
-};
+var import_dom = require("@dnd-kit/dom");
+var touchDefault = [
+  new import_dom.PointerActivationConstraints.Delay({ value: 200, tolerance: 10 })
+];
+var otherDefault = [
+  new import_dom.PointerActivationConstraints.Delay({ value: 200, tolerance: 10 }),
+  new import_dom.PointerActivationConstraints.Distance({ value: 5 })
+];
 var useSensors = ({
   other = otherDefault,
   mouse,
@@ -5666,7 +5669,7 @@ var useSensors = ({
 
 // lib/dnd/collision/dynamic/index.ts
 init_react_import();
-var import_abstract8 = require("@dnd-kit/abstract");
+var import_abstract2 = require("@dnd-kit/abstract");
 
 // lib/dnd/collision/directional/index.ts
 init_react_import();
@@ -5811,70 +5814,8 @@ var trackMovementInterval = (point, dragAxis = "dynamic") => {
   return intervalCache;
 };
 
-// ../../node_modules/@dnd-kit/collision/dist/index.js
-init_react_import();
-var import_abstract2 = require("@dnd-kit/abstract");
-var import_geometry2 = require("@dnd-kit/geometry");
-var import_abstract3 = require("@dnd-kit/abstract");
-var import_geometry3 = require("@dnd-kit/geometry");
-var import_abstract4 = require("@dnd-kit/abstract");
-var import_geometry4 = require("@dnd-kit/geometry");
-var import_abstract5 = require("@dnd-kit/abstract");
-var import_geometry5 = require("@dnd-kit/geometry");
-var import_abstract6 = require("@dnd-kit/abstract");
-var import_geometry6 = require("@dnd-kit/geometry");
-var import_abstract7 = require("@dnd-kit/abstract");
-var import_geometry7 = require("@dnd-kit/geometry");
-var pointerIntersection = ({
-  dragOperation,
-  droppable
-}) => {
-  const pointerCoordinates = dragOperation.position.current;
-  if (!pointerCoordinates) {
-    return null;
-  }
-  const { id } = droppable;
-  if (!droppable.shape) {
-    return null;
-  }
-  if (droppable.shape.containsPoint(pointerCoordinates)) {
-    const distance = import_geometry2.Point.distance(droppable.shape.center, pointerCoordinates);
-    return {
-      id,
-      value: 1 / distance,
-      type: import_abstract2.CollisionType.PointerIntersection,
-      priority: import_abstract2.CollisionPriority.High
-    };
-  }
-  return null;
-};
-var closestCorners = (input) => {
-  const { dragOperation, droppable } = input;
-  const { shape, position } = dragOperation;
-  if (!droppable.shape) {
-    return null;
-  }
-  const shapeCorners = shape ? import_geometry4.Rectangle.from(shape.current.boundingRectangle).corners : void 0;
-  const distance = import_geometry4.Rectangle.from(
-    droppable.shape.boundingRectangle
-  ).corners.reduce(
-    (acc, corner, index) => {
-      var _a;
-      return acc + import_geometry4.Point.distance(
-        import_geometry4.Point.from(corner),
-        (_a = shapeCorners == null ? void 0 : shapeCorners[index]) != null ? _a : position.current
-      );
-    },
-    0
-  );
-  const value = distance / 4;
-  return {
-    id: droppable.id,
-    value: 1 / value,
-    type: import_abstract4.CollisionType.Collision,
-    priority: import_abstract4.CollisionPriority.Normal
-  };
-};
+// lib/dnd/collision/dynamic/index.ts
+var import_collision = require("@dnd-kit/collision");
 
 // lib/dnd/collision/dynamic/store.ts
 init_react_import();
@@ -5912,7 +5853,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
     collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "yellow");
     if (collision) {
       return __spreadProps(__spreadValues({}, collision), {
-        priority: import_abstract8.CollisionPriority.Highest,
+        priority: import_abstract2.CollisionPriority.Highest,
         data
       });
     }
@@ -5930,8 +5871,8 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
     const collision = {
       id: droppable.id,
       value: intersectionRatio,
-      priority: import_abstract8.CollisionPriority.High,
-      type: import_abstract8.CollisionType.Collision
+      priority: import_abstract2.CollisionPriority.High,
+      type: import_abstract2.CollisionType.Collision
     };
     const shouldFlushId = flushNext === droppable.id;
     flushNext = "";
@@ -5941,7 +5882,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
     const xAxisIntersection = dropShape.boundingRectangle.right > dragShape.boundingRectangle.left && dropShape.boundingRectangle.left < dragShape.boundingRectangle.right;
     const yAxisIntersection = dropShape.boundingRectangle.bottom > dragShape.boundingRectangle.top && dropShape.boundingRectangle.top < dragShape.boundingRectangle.bottom;
     if (dragAxis === "y" && xAxisIntersection || yAxisIntersection) {
-      const fallbackCollision = closestCorners(input);
+      const fallbackCollision = (0, import_collision.closestCorners)(input);
       if (fallbackCollision) {
         const direction = getDirection(dragAxis, {
           x: dragShape.center.x - (((_d = droppable.shape) == null ? void 0 : _d.center.x) || 0),
@@ -5958,7 +5899,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
           );
           flushNext = droppable.id;
           return __spreadProps(__spreadValues({}, fallbackCollision), {
-            priority: import_abstract8.CollisionPriority.Low,
+            priority: import_abstract2.CollisionPriority.Low,
             data
           });
         }
@@ -5970,7 +5911,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
           direction || ""
         );
         return __spreadProps(__spreadValues({}, fallbackCollision), {
-          priority: import_abstract8.CollisionPriority.Lowest,
+          priority: import_abstract2.CollisionPriority.Lowest,
           data
         });
       }
@@ -5982,6 +5923,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
 
 // components/Sortable/index.tsx
 var import_sortable = require("@dnd-kit/react/sortable");
+var import_dom2 = require("@dnd-kit/dom");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var SortableProvider = ({
   children,
@@ -5990,7 +5932,7 @@ var SortableProvider = ({
   onMove
 }) => {
   const sensors = useSensors({
-    mouse: { distance: { value: 5 } }
+    mouse: [new import_dom2.PointerActivationConstraints.Distance({ value: 5 })]
   });
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_react14.DragDropProvider,
@@ -7873,7 +7815,7 @@ init_react_import();
 var import_react69 = require("@dnd-kit/react");
 init_store();
 var import_react70 = require("react");
-var import_dom = require("@dnd-kit/dom");
+var import_dom4 = require("@dnd-kit/dom");
 
 // components/DropZone/index.tsx
 init_react_import();
@@ -7971,6 +7913,7 @@ var DropZoneProvider = ({
 var import_shallow4 = require("zustand/react/shallow");
 init_get_item();
 var import_sortable2 = require("@dnd-kit/react/sortable");
+var import_dom3 = require("@dnd-kit/dom");
 
 // lib/dnd/use-on-drag-finished.ts
 init_react_import();
@@ -8120,6 +8063,13 @@ var DraggableComponent = ({
     () => createDynamicCollisionDetector(dragAxis),
     [dragAxis]
   );
+  const sortablePlugins = (0, import_react51.useMemo)(
+    () => (defaults) => [
+      ...defaults,
+      import_dom3.Feedback.configure({ feedback: "clone" })
+    ],
+    []
+  );
   const {
     ref: sortableRef,
     isDragging: thisIsDragging,
@@ -8145,8 +8095,7 @@ var DraggableComponent = ({
     transition: {
       duration: 200,
       easing: "cubic-bezier(0.2, 0, 0, 1)"
-    },
-    feedback: "clone"
+    }
   });
   (0, import_react51.useEffect)(() => {
     const isEnabled = zoneStore.getState().enabledIndex[zoneCompound];
@@ -8632,6 +8581,7 @@ var styles_module_default18 = { "DropZone": "_DropZone_q9qsx_1", "DropZone--hasC
 // components/DropZone/index.tsx
 init_store();
 var import_react68 = require("@dnd-kit/react");
+var import_collision2 = require("@dnd-kit/collision");
 
 // components/DropZone/lib/use-min-empty-height.ts
 init_react_import();
@@ -10126,7 +10076,7 @@ var DropZoneEdit = (0, import_react67.forwardRef)(
       id: zoneCompound,
       collisionPriority: isEnabled ? depth : 0,
       disabled: !isDropEnabled,
-      collisionDetector: pointerIntersection,
+      collisionDetector: import_collision2.pointerIntersection,
       type: "dropzone",
       data: {
         areaId,
@@ -10290,7 +10240,8 @@ init_get_item();
 
 // lib/dnd/NestedDroppablePlugin.ts
 init_react_import();
-var import_abstract9 = require("@dnd-kit/abstract");
+var import_abstract3 = require("@dnd-kit/abstract");
+var import_utilities2 = require("@dnd-kit/dom/utilities");
 
 // lib/throttle.ts
 init_react_import();
@@ -10360,25 +10311,6 @@ var GlobalPosition = class {
   }
 };
 
-// lib/bubble-pointer-event.ts
-init_react_import();
-var BaseEvent = typeof PointerEvent !== "undefined" ? PointerEvent : Event;
-var BubbledPointerEvent = class extends BaseEvent {
-  constructor(type, data) {
-    super(type, data);
-    this._originalTarget = null;
-    this.originalTarget = data.originalTarget;
-  }
-  // Necessary for Firefox
-  set originalTarget(target) {
-    this._originalTarget = target;
-  }
-  // Necessary for Firefox
-  get originalTarget() {
-    return this._originalTarget;
-  }
-};
-
 // lib/dnd/NestedDroppablePlugin.ts
 init_root_droppable_id();
 var depthSort = (candidates) => {
@@ -10514,7 +10446,7 @@ var findDeepestCandidate = (position, manager) => {
     area: rootAreaId
   };
 };
-var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlugin extends import_abstract9.Plugin {
+var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlugin extends import_abstract3.Plugin {
   constructor(manager, options) {
     super(manager);
     if (typeof window === "undefined") {
@@ -10522,7 +10454,7 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
     }
     this.registerEffect(() => {
       const handleMove = (event) => {
-        const target = event instanceof BubbledPointerEvent ? event.originalTarget || event.target : event.target;
+        const target = event.target;
         const position = new GlobalPosition(target, {
           x: event.clientX,
           y: event.clientY
@@ -10540,15 +10472,55 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
       const handlePointerMove = (event) => {
         handleMoveThrottled(event);
       };
-      document.body.addEventListener("pointermove", handlePointerMove, {
-        capture: true
-        // dndkit's PointerSensor prevents propagation during drag
-      });
-      const cleanup = () => {
-        document.body.removeEventListener("pointermove", handlePointerMove, {
+      const bound = /* @__PURE__ */ new Set();
+      const bind = (doc) => {
+        if (bound.has(doc)) return;
+        bound.add(doc);
+        doc.addEventListener("pointermove", handlePointerMove, {
           capture: true
+          // dndkit's PointerSensor prevents propagation during drag
         });
       };
+      const bindAll = () => {
+        for (const doc of (0, import_utilities2.getDocuments)()) bind(doc);
+      };
+      bindAll();
+      const onIframeLoad = () => bindAll();
+      const observed = /* @__PURE__ */ new Set();
+      const observeFrame = (el) => {
+        if (observed.has(el)) return;
+        observed.add(el);
+        el.addEventListener("load", onIframeLoad);
+      };
+      for (const el of Array.from(
+        document.querySelectorAll(
+          "iframe, frame"
+        )
+      )) {
+        observeFrame(el);
+      }
+      const observer = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+          for (const node of Array.from(m.addedNodes)) {
+            if (node instanceof HTMLIFrameElement || typeof HTMLFrameElement !== "undefined" && node instanceof HTMLFrameElement) {
+              observeFrame(node);
+            }
+          }
+        }
+        bindAll();
+      });
+      observer.observe(document.body, { childList: true, subtree: true });
+      const cleanup = () => {
+        observer.disconnect();
+        for (const el of observed) {
+          el.removeEventListener("load", onIframeLoad);
+        }
+        for (const doc of bound) {
+          doc.removeEventListener("pointermove", handlePointerMove, {
+            capture: true
+          });
+        }
+      };
       return cleanup;
     });
   }
@@ -10784,9 +10756,9 @@ var DragDropContextClient = ({
     }
   }, []);
   const [plugins] = (0, import_react70.useState)(() => [
-    import_dom.ScrollListener,
-    import_dom.Scroller,
-    ...disableAutoScroll ? import_dom.defaultPreset.plugins.filter((plugin) => plugin !== import_dom.AutoScroller) : import_dom.defaultPreset.plugins,
+    import_dom4.ScrollListener,
+    import_dom4.Scroller,
+    ...disableAutoScroll ? import_dom4.defaultPreset.plugins.filter((plugin) => plugin !== import_dom4.AutoScroller) : import_dom4.defaultPreset.plugins,
     createNestedDroppablePlugin(
       {
         onChange: (params, manager) => {
@@ -11911,44 +11883,6 @@ var styles_module_default22 = { "EditorPreview": "_EditorPreview_xou64_1", "Edit
 init_lib();
 var import_jsx_runtime76 = require("react/jsx-runtime");
 var getClassName30 = get_class_name_factory_default("EditorPreview", styles_module_default22);
-var useBubbleIframeEvents = (ref) => {
-  const status = useAppStore((s) => s.status);
-  (0, import_react77.useEffect)(() => {
-    if (ref.current && status === "READY") {
-      const iframe = ref.current;
-      const handlePointerMove = (event) => {
-        const evt = new BubbledPointerEvent("pointermove", __spreadProps(__spreadValues({}, event), {
-          bubbles: true,
-          cancelable: false,
-          clientX: event.clientX,
-          clientY: event.clientY,
-          originalTarget: event.target
-        }));
-        iframe.dispatchEvent(evt);
-      };
-      const register = () => {
-        var _a;
-        unregister();
-        (_a = iframe.contentDocument) == null ? void 0 : _a.addEventListener(
-          "pointermove",
-          handlePointerMove,
-          { capture: true }
-        );
-      };
-      const unregister = () => {
-        var _a;
-        (_a = iframe.contentDocument) == null ? void 0 : _a.removeEventListener(
-          "pointermove",
-          handlePointerMove
-        );
-      };
-      register();
-      return () => {
-        unregister();
-      };
-    }
-  }, [status]);
-};
 var Preview2 = ({ id = "editor-preview" }) => {
   const dispatch = useAppStore((s) => s.dispatch);
   const root = useAppStore((s) => s.state.data.root);
@@ -11981,7 +11915,6 @@ var Preview2 = ({ id = "editor-preview" }) => {
   const Frame = (0, import_react77.useMemo)(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
   const ref = (0, import_react77.useRef)(null);
-  useBubbleIframeEvents(ref);
   const inner = !renderData ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     Page,
     __spreadProps(__spreadValues({}, rootProps), {

package/dist/index.mjs

@@ -19,7 +19,7 @@ import {
   setDeep,
   useEditor,
   useGetEditor
-} from "./chunk-BQ2PZ2YN.mjs";
+} from "./chunk-D2RG73WI.mjs";
 import "./chunk-TCVU3WEN.mjs";
 import {
   migrate,

package/dist/no-external.js

@@ -5633,11 +5633,14 @@ init_react_import();
 var import_react12 = require("react");
 var import_react13 = require("@dnd-kit/react");
 var import_utilities = require("@dnd-kit/dom/utilities");
-var touchDefault = { delay: { value: 200, tolerance: 10 } };
-var otherDefault = {
-  delay: { value: 200, tolerance: 10 },
-  distance: { value: 5 }
-};
+var import_dom = require("@dnd-kit/dom");
+var touchDefault = [
+  new import_dom.PointerActivationConstraints.Delay({ value: 200, tolerance: 10 })
+];
+var otherDefault = [
+  new import_dom.PointerActivationConstraints.Delay({ value: 200, tolerance: 10 }),
+  new import_dom.PointerActivationConstraints.Distance({ value: 5 })
+];
 var useSensors = ({
   other = otherDefault,
   mouse,
@@ -5666,7 +5669,7 @@ var useSensors = ({
 
 // lib/dnd/collision/dynamic/index.ts
 init_react_import();
-var import_abstract8 = require("@dnd-kit/abstract");
+var import_abstract2 = require("@dnd-kit/abstract");
 
 // lib/dnd/collision/directional/index.ts
 init_react_import();
@@ -5811,70 +5814,8 @@ var trackMovementInterval = (point, dragAxis = "dynamic") => {
   return intervalCache;
 };
 
-// ../../node_modules/@dnd-kit/collision/dist/index.js
-init_react_import();
-var import_abstract2 = require("@dnd-kit/abstract");
-var import_geometry2 = require("@dnd-kit/geometry");
-var import_abstract3 = require("@dnd-kit/abstract");
-var import_geometry3 = require("@dnd-kit/geometry");
-var import_abstract4 = require("@dnd-kit/abstract");
-var import_geometry4 = require("@dnd-kit/geometry");
-var import_abstract5 = require("@dnd-kit/abstract");
-var import_geometry5 = require("@dnd-kit/geometry");
-var import_abstract6 = require("@dnd-kit/abstract");
-var import_geometry6 = require("@dnd-kit/geometry");
-var import_abstract7 = require("@dnd-kit/abstract");
-var import_geometry7 = require("@dnd-kit/geometry");
-var pointerIntersection = ({
-  dragOperation,
-  droppable
-}) => {
-  const pointerCoordinates = dragOperation.position.current;
-  if (!pointerCoordinates) {
-    return null;
-  }
-  const { id } = droppable;
-  if (!droppable.shape) {
-    return null;
-  }
-  if (droppable.shape.containsPoint(pointerCoordinates)) {
-    const distance = import_geometry2.Point.distance(droppable.shape.center, pointerCoordinates);
-    return {
-      id,
-      value: 1 / distance,
-      type: import_abstract2.CollisionType.PointerIntersection,
-      priority: import_abstract2.CollisionPriority.High
-    };
-  }
-  return null;
-};
-var closestCorners = (input) => {
-  const { dragOperation, droppable } = input;
-  const { shape, position } = dragOperation;
-  if (!droppable.shape) {
-    return null;
-  }
-  const shapeCorners = shape ? import_geometry4.Rectangle.from(shape.current.boundingRectangle).corners : void 0;
-  const distance = import_geometry4.Rectangle.from(
-    droppable.shape.boundingRectangle
-  ).corners.reduce(
-    (acc, corner, index) => {
-      var _a;
-      return acc + import_geometry4.Point.distance(
-        import_geometry4.Point.from(corner),
-        (_a = shapeCorners == null ? void 0 : shapeCorners[index]) != null ? _a : position.current
-      );
-    },
-    0
-  );
-  const value = distance / 4;
-  return {
-    id: droppable.id,
-    value: 1 / value,
-    type: import_abstract4.CollisionType.Collision,
-    priority: import_abstract4.CollisionPriority.Normal
-  };
-};
+// lib/dnd/collision/dynamic/index.ts
+var import_collision = require("@dnd-kit/collision");
 
 // lib/dnd/collision/dynamic/store.ts
 init_react_import();
@@ -5912,7 +5853,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
     collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "yellow");
     if (collision) {
       return __spreadProps(__spreadValues({}, collision), {
-        priority: import_abstract8.CollisionPriority.Highest,
+        priority: import_abstract2.CollisionPriority.Highest,
         data
       });
     }
@@ -5930,8 +5871,8 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
     const collision = {
       id: droppable.id,
       value: intersectionRatio,
-      priority: import_abstract8.CollisionPriority.High,
-      type: import_abstract8.CollisionType.Collision
+      priority: import_abstract2.CollisionPriority.High,
+      type: import_abstract2.CollisionType.Collision
     };
     const shouldFlushId = flushNext === droppable.id;
     flushNext = "";
@@ -5941,7 +5882,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
     const xAxisIntersection = dropShape.boundingRectangle.right > dragShape.boundingRectangle.left && dropShape.boundingRectangle.left < dragShape.boundingRectangle.right;
     const yAxisIntersection = dropShape.boundingRectangle.bottom > dragShape.boundingRectangle.top && dropShape.boundingRectangle.top < dragShape.boundingRectangle.bottom;
     if (dragAxis === "y" && xAxisIntersection || yAxisIntersection) {
-      const fallbackCollision = closestCorners(input);
+      const fallbackCollision = (0, import_collision.closestCorners)(input);
       if (fallbackCollision) {
         const direction = getDirection(dragAxis, {
           x: dragShape.center.x - (((_d = droppable.shape) == null ? void 0 : _d.center.x) || 0),
@@ -5958,7 +5899,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
           );
           flushNext = droppable.id;
           return __spreadProps(__spreadValues({}, fallbackCollision), {
-            priority: import_abstract8.CollisionPriority.Low,
+            priority: import_abstract2.CollisionPriority.Low,
             data
           });
         }
@@ -5970,7 +5911,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
           direction || ""
         );
         return __spreadProps(__spreadValues({}, fallbackCollision), {
-          priority: import_abstract8.CollisionPriority.Lowest,
+          priority: import_abstract2.CollisionPriority.Lowest,
           data
         });
       }
@@ -5982,6 +5923,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
 
 // components/Sortable/index.tsx
 var import_sortable = require("@dnd-kit/react/sortable");
+var import_dom2 = require("@dnd-kit/dom");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var SortableProvider = ({
   children,
@@ -5990,7 +5932,7 @@ var SortableProvider = ({
   onMove
 }) => {
   const sensors = useSensors({
-    mouse: { distance: { value: 5 } }
+    mouse: [new import_dom2.PointerActivationConstraints.Distance({ value: 5 })]
   });
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_react14.DragDropProvider,
@@ -7873,7 +7815,7 @@ init_react_import();
 var import_react69 = require("@dnd-kit/react");
 init_store();
 var import_react70 = require("react");
-var import_dom = require("@dnd-kit/dom");
+var import_dom4 = require("@dnd-kit/dom");
 
 // components/DropZone/index.tsx
 init_react_import();
@@ -7971,6 +7913,7 @@ var DropZoneProvider = ({
 var import_shallow4 = require("zustand/react/shallow");
 init_get_item();
 var import_sortable2 = require("@dnd-kit/react/sortable");
+var import_dom3 = require("@dnd-kit/dom");
 
 // lib/dnd/use-on-drag-finished.ts
 init_react_import();
@@ -8120,6 +8063,13 @@ var DraggableComponent = ({
     () => createDynamicCollisionDetector(dragAxis),
     [dragAxis]
   );
+  const sortablePlugins = (0, import_react51.useMemo)(
+    () => (defaults) => [
+      ...defaults,
+      import_dom3.Feedback.configure({ feedback: "clone" })
+    ],
+    []
+  );
   const {
     ref: sortableRef,
     isDragging: thisIsDragging,
@@ -8145,8 +8095,7 @@ var DraggableComponent = ({
     transition: {
       duration: 200,
       easing: "cubic-bezier(0.2, 0, 0, 1)"
-    },
-    feedback: "clone"
+    }
   });
   (0, import_react51.useEffect)(() => {
     const isEnabled = zoneStore.getState().enabledIndex[zoneCompound];
@@ -8632,6 +8581,7 @@ var styles_module_default18 = { "DropZone": "_DropZone_q9qsx_1", "DropZone--hasC
 // components/DropZone/index.tsx
 init_store();
 var import_react68 = require("@dnd-kit/react");
+var import_collision2 = require("@dnd-kit/collision");
 
 // components/DropZone/lib/use-min-empty-height.ts
 init_react_import();
@@ -10126,7 +10076,7 @@ var DropZoneEdit = (0, import_react67.forwardRef)(
       id: zoneCompound,
       collisionPriority: isEnabled ? depth : 0,
       disabled: !isDropEnabled,
-      collisionDetector: pointerIntersection,
+      collisionDetector: import_collision2.pointerIntersection,
       type: "dropzone",
       data: {
         areaId,
@@ -10290,7 +10240,8 @@ init_get_item();
 
 // lib/dnd/NestedDroppablePlugin.ts
 init_react_import();
-var import_abstract9 = require("@dnd-kit/abstract");
+var import_abstract3 = require("@dnd-kit/abstract");
+var import_utilities2 = require("@dnd-kit/dom/utilities");
 
 // lib/throttle.ts
 init_react_import();
@@ -10360,25 +10311,6 @@ var GlobalPosition = class {
   }
 };
 
-// lib/bubble-pointer-event.ts
-init_react_import();
-var BaseEvent = typeof PointerEvent !== "undefined" ? PointerEvent : Event;
-var BubbledPointerEvent = class extends BaseEvent {
-  constructor(type, data) {
-    super(type, data);
-    this._originalTarget = null;
-    this.originalTarget = data.originalTarget;
-  }
-  // Necessary for Firefox
-  set originalTarget(target) {
-    this._originalTarget = target;
-  }
-  // Necessary for Firefox
-  get originalTarget() {
-    return this._originalTarget;
-  }
-};
-
 // lib/dnd/NestedDroppablePlugin.ts
 init_root_droppable_id();
 var depthSort = (candidates) => {
@@ -10514,7 +10446,7 @@ var findDeepestCandidate = (position, manager) => {
     area: rootAreaId
   };
 };
-var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlugin extends import_abstract9.Plugin {
+var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlugin extends import_abstract3.Plugin {
   constructor(manager, options) {
     super(manager);
     if (typeof window === "undefined") {
@@ -10522,7 +10454,7 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
     }
     this.registerEffect(() => {
       const handleMove = (event) => {
-        const target = event instanceof BubbledPointerEvent ? event.originalTarget || event.target : event.target;
+        const target = event.target;
         const position = new GlobalPosition(target, {
           x: event.clientX,
           y: event.clientY
@@ -10540,15 +10472,55 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
       const handlePointerMove = (event) => {
         handleMoveThrottled(event);
       };
-      document.body.addEventListener("pointermove", handlePointerMove, {
-        capture: true
-        // dndkit's PointerSensor prevents propagation during drag
-      });
-      const cleanup = () => {
-        document.body.removeEventListener("pointermove", handlePointerMove, {
+      const bound = /* @__PURE__ */ new Set();
+      const bind = (doc) => {
+        if (bound.has(doc)) return;
+        bound.add(doc);
+        doc.addEventListener("pointermove", handlePointerMove, {
           capture: true
+          // dndkit's PointerSensor prevents propagation during drag
         });
       };
+      const bindAll = () => {
+        for (const doc of (0, import_utilities2.getDocuments)()) bind(doc);
+      };
+      bindAll();
+      const onIframeLoad = () => bindAll();
+      const observed = /* @__PURE__ */ new Set();
+      const observeFrame = (el) => {
+        if (observed.has(el)) return;
+        observed.add(el);
+        el.addEventListener("load", onIframeLoad);
+      };
+      for (const el of Array.from(
+        document.querySelectorAll(
+          "iframe, frame"
+        )
+      )) {
+        observeFrame(el);
+      }
+      const observer = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+          for (const node of Array.from(m.addedNodes)) {
+            if (node instanceof HTMLIFrameElement || typeof HTMLFrameElement !== "undefined" && node instanceof HTMLFrameElement) {
+              observeFrame(node);
+            }
+          }
+        }
+        bindAll();
+      });
+      observer.observe(document.body, { childList: true, subtree: true });
+      const cleanup = () => {
+        observer.disconnect();
+        for (const el of observed) {
+          el.removeEventListener("load", onIframeLoad);
+        }
+        for (const doc of bound) {
+          doc.removeEventListener("pointermove", handlePointerMove, {
+            capture: true
+          });
+        }
+      };
       return cleanup;
     });
   }
@@ -10784,9 +10756,9 @@ var DragDropContextClient = ({
     }
   }, []);
   const [plugins] = (0, import_react70.useState)(() => [
-    import_dom.ScrollListener,
-    import_dom.Scroller,
-    ...disableAutoScroll ? import_dom.defaultPreset.plugins.filter((plugin) => plugin !== import_dom.AutoScroller) : import_dom.defaultPreset.plugins,
+    import_dom4.ScrollListener,
+    import_dom4.Scroller,
+    ...disableAutoScroll ? import_dom4.defaultPreset.plugins.filter((plugin) => plugin !== import_dom4.AutoScroller) : import_dom4.defaultPreset.plugins,
     createNestedDroppablePlugin(
       {
         onChange: (params, manager) => {
@@ -11911,44 +11883,6 @@ var styles_module_default22 = { "EditorPreview": "_EditorPreview_xou64_1", "Edit
 init_lib();
 var import_jsx_runtime76 = require("react/jsx-runtime");
 var getClassName30 = get_class_name_factory_default("EditorPreview", styles_module_default22);
-var useBubbleIframeEvents = (ref) => {
-  const status = useAppStore((s) => s.status);
-  (0, import_react77.useEffect)(() => {
-    if (ref.current && status === "READY") {
-      const iframe = ref.current;
-      const handlePointerMove = (event) => {
-        const evt = new BubbledPointerEvent("pointermove", __spreadProps(__spreadValues({}, event), {
-          bubbles: true,
-          cancelable: false,
-          clientX: event.clientX,
-          clientY: event.clientY,
-          originalTarget: event.target
-        }));
-        iframe.dispatchEvent(evt);
-      };
-      const register = () => {
-        var _a;
-        unregister();
-        (_a = iframe.contentDocument) == null ? void 0 : _a.addEventListener(
-          "pointermove",
-          handlePointerMove,
-          { capture: true }
-        );
-      };
-      const unregister = () => {
-        var _a;
-        (_a = iframe.contentDocument) == null ? void 0 : _a.removeEventListener(
-          "pointermove",
-          handlePointerMove
-        );
-      };
-      register();
-      return () => {
-        unregister();
-      };
-    }
-  }, [status]);
-};
 var Preview2 = ({ id = "editor-preview" }) => {
   const dispatch = useAppStore((s) => s.dispatch);
   const root = useAppStore((s) => s.state.data.root);
@@ -11981,7 +11915,6 @@ var Preview2 = ({ id = "editor-preview" }) => {
   const Frame = (0, import_react77.useMemo)(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
   const ref = (0, import_react77.useRef)(null);
-  useBubbleIframeEvents(ref);
   const inner = !renderData ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     Page,
     __spreadProps(__spreadValues({}, rootProps), {

package/dist/no-external.mjs

@@ -19,7 +19,7 @@ import {
   setDeep,
   useEditor,
   useGetEditor
-} from "./chunk-BQ2PZ2YN.mjs";
+} from "./chunk-D2RG73WI.mjs";
 import "./chunk-TCVU3WEN.mjs";
 import {
   migrate,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reacteditor/core",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "The open-source visual editor for React",
   "author": "Rami Bitar <rami@frontend.co>",
   "repository": "frontend-inc/react-editor",
@@ -98,8 +98,13 @@
     "typescript": "^5.5.4"
   },
   "dependencies": {
-    "@dnd-kit/helpers": "0.1.18",
-    "@dnd-kit/react": "0.1.18",
+    "@dnd-kit/abstract": "0.4.0",
+    "@dnd-kit/collision": "0.4.0",
+    "@dnd-kit/dom": "0.4.0",
+    "@dnd-kit/geometry": "0.4.0",
+    "@dnd-kit/helpers": "0.4.0",
+    "@dnd-kit/react": "0.4.0",
+    "@dnd-kit/state": "0.4.0",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",
     "@tanstack/react-virtual": "^3.13.9",