@measured/puck 0.17.0-canary.9de5e5e → 0.17.0-canary.bda6153

package/dist/index.js

@@ -9,6 +9,9 @@ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues = (a2, b2) => {
   for (var prop in b2 || (b2 = {}))
@@ -61,6 +64,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -2411,7 +2418,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css#css-module
 init_react_import();
-var styles_module_default10 = { "Drawer": "_Drawer_1pb1t_1", "DrawerItem-draggable": "_DrawerItem-draggable_1pb1t_8", "DrawerItem--disabled": "_DrawerItem--disabled_1pb1t_20", "DrawerItem": "_DrawerItem_1pb1t_8", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_1pb1t_30", "DrawerItem-name": "_DrawerItem-name_1pb1t_48" };
+var styles_module_default10 = { "Drawer": "_Drawer_1ob9x_1", "DrawerItem-draggable": "_DrawerItem-draggable_1ob9x_8", "DrawerItem--disabled": "_DrawerItem--disabled_1ob9x_21", "DrawerItem": "_DrawerItem_1ob9x_8", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_1ob9x_31", "DrawerItem-name": "_DrawerItem-name_1ob9x_49" };
 
 // components/Drawer/index.tsx
 var import_react21 = require("react");
@@ -2432,7 +2439,7 @@ var import_react16 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
-var styles_module_default11 = { "DraggableComponent": "_DraggableComponent_33bhx_1", "DraggableComponent-overlay": "_DraggableComponent-overlay_33bhx_13", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_33bhx_30", "DraggableComponent--hover": "_DraggableComponent--hover_33bhx_46", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_33bhx_46", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_33bhx_55", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_33bhx_67", "DraggableComponent-actions": "_DraggableComponent-actions_33bhx_67" };
+var styles_module_default11 = { "DraggableComponent": "_DraggableComponent_1uqah_1", "DraggableComponent-overlay": "_DraggableComponent-overlay_1uqah_12", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_1uqah_29", "DraggableComponent--hover": "_DraggableComponent--hover_1uqah_45", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_1uqah_45", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_1uqah_54", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_1uqah_66", "DraggableComponent-actions": "_DraggableComponent-actions_1uqah_66" };
 
 // lib/use-modifier-held.ts
 init_react_import();
@@ -2874,9 +2881,10 @@ var __create2 = Object.create;
 var __defProp2 = Object.defineProperty;
 var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
 var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError = (msg) => {
+var __typeError2 = (msg) => {
   throw TypeError(msg);
 };
+var __pow = Math.pow;
 var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __name = (target, value) => __defProp2(target, "name", { value, configurable: true });
 var __decoratorStart = (base) => {
@@ -2884,8 +2892,8 @@ var __decoratorStart = (base) => {
   return [, , , __create2((_a = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a : null)];
 };
 var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
-var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError2("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError2("Already initialized") : fns.push(__expectFn(fn || null)) });
 var __decoratorMetadata = (array, target) => __defNormalProp2(target, __knownSymbol("metadata"), array[3]);
 var __runInitializers = (array, flags, self, value) => {
   for (var i2 = 0, fns = array[flags >> 1], n2 = fns && fns.length; i2 < n2; i2++) flags & 1 ? fns[i2].call(self) : value = fns[i2].call(self, value);
@@ -2896,31 +2904,31 @@ var __decorateElement = (array, flags, name, decorators, target, extra) => {
   var j = k > 3 ? array.length + 1 : k ? s2 ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
   var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
   var desc = k && (!p2 && !s2 && (target = target.prototype), k < 5 && (k > 3 || !p2) && __getOwnPropDesc2(k < 4 ? target : { get [name]() {
-    return __privateGet(this, extra);
+    return __privateGet2(this, extra);
   }, set [name](x) {
-    return __privateSet(this, extra, x);
+    return __privateSet2(this, extra, x);
   } }, name));
   k ? p2 && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
   for (var i2 = decorators.length - 1; i2 >= 0; i2--) {
     ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
     if (k) {
       ctx.static = s2, ctx.private = p2, access = ctx.access = { has: p2 ? (x) => __privateIn(target, x) : (x) => name in x };
-      if (k ^ 3) access.get = p2 ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
-      if (k > 2) access.set = p2 ? (x, y2) => __privateSet(x, target, y2, k ^ 4 ? extra : desc.set) : (x, y2) => x[name] = y2;
+      if (k ^ 3) access.get = p2 ? (x) => (k ^ 1 ? __privateGet2 : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p2 ? (x, y2) => __privateSet2(x, target, y2, k ^ 4 ? extra : desc.set) : (x, y2) => x[name] = y2;
     }
     it = (0, decorators[i2])(k ? k < 4 ? p2 ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
     if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p2 ? extra = it : desc[key] = it : target = it);
-    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else if (typeof it !== "object" || it === null) __typeError2("Object expected");
     else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
   }
   return k || __decoratorMetadata(array, target), desc && __defProp2(target, name, desc), p2 ? k ^ 4 ? extra : desc : target;
 };
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var __accessCheck2 = (obj, member, msg) => member.has(obj) || __typeError2("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError2('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet2 = (obj, member, getter) => (__accessCheck2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd2 = (obj, member, value) => member.has(obj) ? __typeError2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet2 = (obj, member, value, setter) => (__accessCheck2(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck2(obj, member, "access private method"), method);
 var Point = class _Point {
   /**
    * @param {number} Coordinate of the point on the horizontal axis
@@ -2978,14 +2986,14 @@ _velocity_dec = [reactive], _initial_dec = [reactive], _previous_dec = [reactive
 var Position = class {
   constructor(initialValue) {
     __runInitializers(_init, 5, this);
-    __privateAdd(this, _timestamp, 0);
-    __privateAdd(this, _velocity, __runInitializers(_init, 8, this, {
+    __privateAdd2(this, _timestamp, 0);
+    __privateAdd2(this, _velocity, __runInitializers(_init, 8, this, {
       x: 0,
       y: 0
     })), __runInitializers(_init, 11, this);
-    __privateAdd(this, _initial, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
-    __privateAdd(this, _previous, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
-    __privateAdd(this, _current, __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __privateAdd2(this, _initial, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __privateAdd2(this, _previous, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __privateAdd2(this, _current, __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
     const point = Point.from(initialValue);
     this.initial = point;
     this.current = point;
@@ -3010,7 +3018,7 @@ var Position = class {
   reset(coordinates) {
     const point = Point.from(coordinates);
     o(() => {
-      __privateSet(this, _timestamp, 0);
+      __privateSet2(this, _timestamp, 0);
       this.velocity = { x: 0, y: 0 };
       this.current = point;
       this.previous = point;
@@ -3028,12 +3036,12 @@ var Position = class {
       y: point.y - current.y
     };
     const timestamp = Date.now();
-    const timeDelta = timestamp - __privateGet(this, _timestamp);
+    const timeDelta = timestamp - __privateGet2(this, _timestamp);
     const velocity = (delta2) => Math.round(delta2 / timeDelta * 100);
     if (Math.abs(delta.x) < SENSITIVITY || Math.abs(delta.y) < SENSITIVITY) {
       this.previous = current;
     }
-    __privateSet(this, _timestamp, timestamp);
+    __privateSet2(this, _timestamp, timestamp);
     this.velocity = {
       x: velocity(delta.x),
       y: velocity(delta.y)
@@ -3054,6 +3062,23 @@ __decorateElement(_init, 4, "current", _current_dec, Position, _current);
 __decorateElement(_init, 2, "delta", _delta_dec, Position);
 __decorateElement(_init, 2, "direction", _direction_dec, Position);
 __decoratorMetadata(_init, Position);
+function exceedsDistance({ x, y: y2 }, distance) {
+  const dx = Math.abs(x);
+  const dy = Math.abs(y2);
+  if (typeof distance === "number") {
+    return Math.sqrt(__pow(dx, 2) + __pow(dy, 2)) > distance;
+  }
+  if ("x" in distance && "y" in distance) {
+    return dx > distance.x && dy > distance.y;
+  }
+  if ("x" in distance) {
+    return dx > distance.x;
+  }
+  if ("y" in distance) {
+    return dy > distance.y;
+  }
+  return false;
+}
 var Axis = /* @__PURE__ */ ((Axis2) => {
   Axis2["Horizontal"] = "x";
   Axis2["Vertical"] = "y";
@@ -3069,7 +3094,7 @@ var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
 var __hasOwnProp2 = Object.prototype.hasOwnProperty;
 var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
 var __knownSymbol2 = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError2 = (msg) => {
+var __typeError3 = (msg) => {
   throw TypeError(msg);
 };
 var __defNormalProp3 = (obj, key, value) => key in obj ? __defProp3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -3091,8 +3116,8 @@ var __decoratorStart2 = (base) => {
   return [, , , __create3((_a = base == null ? void 0 : base[__knownSymbol2("metadata")]) != null ? _a : null)];
 };
 var __decoratorStrings2 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn2 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError2("Function expected") : fn;
-var __decoratorContext2 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings2[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError2("Already initialized") : fns.push(__expectFn2(fn || null)) });
+var __expectFn2 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError3("Function expected") : fn;
+var __decoratorContext2 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings2[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError3("Already initialized") : fns.push(__expectFn2(fn || null)) });
 var __decoratorMetadata2 = (array, target) => __defNormalProp3(target, __knownSymbol2("metadata"), array[3]);
 var __runInitializers2 = (array, flags, self, value) => {
   for (var i2 = 0, fns = array[flags >> 1], n2 = fns && fns.length; i2 < n2; i2++) flags & 1 ? fns[i2].call(self) : value = fns[i2].call(self, value);
@@ -3103,37 +3128,42 @@ var __decorateElement2 = (array, flags, name, decorators, target, extra) => {
   var j = k > 3 ? array.length + 1 : k ? s2 ? 1 : 2 : 0, key = __decoratorStrings2[k + 5];
   var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
   var desc = k && (!p2 && !s2 && (target = target.prototype), k < 5 && (k > 3 || !p2) && __getOwnPropDesc3(k < 4 ? target : { get [name]() {
-    return __privateGet2(this, extra);
+    return __privateGet3(this, extra);
   }, set [name](x) {
-    return __privateSet2(this, extra, x);
+    return __privateSet3(this, extra, x);
   } }, name));
   k ? p2 && k < 4 && __name2(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name2(target, name);
   for (var i2 = decorators.length - 1; i2 >= 0; i2--) {
     ctx = __decoratorContext2(k, name, done = {}, array[3], extraInitializers);
     if (k) {
       ctx.static = s2, ctx.private = p2, access = ctx.access = { has: p2 ? (x) => __privateIn2(target, x) : (x) => name in x };
-      if (k ^ 3) access.get = p2 ? (x) => (k ^ 1 ? __privateGet2 : __privateMethod2)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
-      if (k > 2) access.set = p2 ? (x, y2) => __privateSet2(x, target, y2, k ^ 4 ? extra : desc.set) : (x, y2) => x[name] = y2;
+      if (k ^ 3) access.get = p2 ? (x) => (k ^ 1 ? __privateGet3 : __privateMethod2)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p2 ? (x, y2) => __privateSet3(x, target, y2, k ^ 4 ? extra : desc.set) : (x, y2) => x[name] = y2;
     }
     it = (0, decorators[i2])(k ? k < 4 ? p2 ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
     if (k ^ 4 || it === void 0) __expectFn2(it) && (k > 4 ? initializers.unshift(it) : k ? p2 ? extra = it : desc[key] = it : target = it);
-    else if (typeof it !== "object" || it === null) __typeError2("Object expected");
+    else if (typeof it !== "object" || it === null) __typeError3("Object expected");
     else __expectFn2(fn = it.get) && (desc.get = fn), __expectFn2(fn = it.set) && (desc.set = fn), __expectFn2(fn = it.init) && initializers.unshift(fn);
   }
   return k || __decoratorMetadata2(array, target), desc && __defProp3(target, name, desc), p2 ? k ^ 4 ? extra : desc : target;
 };
-var __accessCheck2 = (obj, member, msg) => member.has(obj) || __typeError2("Cannot " + msg);
-var __privateIn2 = (member, obj) => Object(obj) !== obj ? __typeError2('Cannot use the "in" operator on this value') : member.has(obj);
-var __privateGet2 = (obj, member, getter) => (__accessCheck2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd2 = (obj, member, value) => member.has(obj) ? __typeError2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet2 = (obj, member, value, setter) => (__accessCheck2(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod2 = (obj, member, method) => (__accessCheck2(obj, member, "access private method"), method);
+var __accessCheck3 = (obj, member, msg) => member.has(obj) || __typeError3("Cannot " + msg);
+var __privateIn2 = (member, obj) => Object(obj) !== obj ? __typeError3('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet3 = (obj, member, getter) => (__accessCheck3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd3 = (obj, member, value) => member.has(obj) ? __typeError3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet3 = (obj, member, value, setter) => (__accessCheck3(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod2 = (obj, member, method) => (__accessCheck3(obj, member, "access private method"), method);
 function configure(plugin, options) {
   return {
     plugin,
     options
   };
 }
+function configurator(plugin) {
+  return (options) => {
+    return configure(plugin, options);
+  };
+}
 var _disabled_dec;
 var _init2;
 var _disabled;
@@ -3142,7 +3172,7 @@ var Plugin = class {
   constructor(manager, options) {
     this.manager = manager;
     this.options = options;
-    __privateAdd2(this, _disabled, __runInitializers2(_init2, 8, this, false)), __runInitializers2(_init2, 11, this);
+    __privateAdd3(this, _disabled, __runInitializers2(_init2, 8, this, false)), __runInitializers2(_init2, 11, this);
   }
   /**
    * Enable a disabled plugin instance.
@@ -3229,10 +3259,10 @@ var Entity = class {
    * @param manager - The manager that controls the drag and drop operations.
    */
   constructor(input, manager) {
-    __privateAdd2(this, _manager, __runInitializers2(_init22, 8, this)), __runInitializers2(_init22, 11, this);
-    __privateAdd2(this, _id, __runInitializers2(_init22, 12, this)), __runInitializers2(_init22, 15, this);
-    __privateAdd2(this, _data, __runInitializers2(_init22, 16, this)), __runInitializers2(_init22, 19, this);
-    __privateAdd2(this, _disabled2, __runInitializers2(_init22, 20, this)), __runInitializers2(_init22, 23, this);
+    __privateAdd3(this, _manager, __runInitializers2(_init22, 8, this)), __runInitializers2(_init22, 11, this);
+    __privateAdd3(this, _id, __runInitializers2(_init22, 12, this)), __runInitializers2(_init22, 15, this);
+    __privateAdd3(this, _data, __runInitializers2(_init22, 16, this)), __runInitializers2(_init22, 19, this);
+    __privateAdd3(this, _disabled2, __runInitializers2(_init22, 20, this)), __runInitializers2(_init22, 23, this);
     this.effects = void 0;
     const { effects: effects5, id, data = {}, disabled = false } = input;
     let previousId = id;
@@ -3312,9 +3342,9 @@ var Draggable2 = class extends (_c = Entity, _modifiers_dec = [reactive], _type_
     super(input, manager);
     __runInitializers2(_init3, 5, this);
     this.sensors = void 0;
-    __privateAdd2(this, _modifiers, __runInitializers2(_init3, 8, this)), __runInitializers2(_init3, 11, this);
-    __privateAdd2(this, _type, __runInitializers2(_init3, 12, this)), __runInitializers2(_init3, 15, this);
-    __privateAdd2(this, _status, __runInitializers2(_init3, 16, this, "idle")), __runInitializers2(_init3, 19, this);
+    __privateAdd3(this, _modifiers, __runInitializers2(_init3, 8, this)), __runInitializers2(_init3, 11, this);
+    __privateAdd3(this, _type, __runInitializers2(_init3, 12, this)), __runInitializers2(_init3, 15, this);
+    __privateAdd3(this, _status, __runInitializers2(_init3, 16, this, "idle")), __runInitializers2(_init3, 19, this);
     this.type = type;
     this.sensors = sensors;
     this.modifiers = modifiers;
@@ -3351,11 +3381,11 @@ var Droppable2 = class extends (_c2 = Entity, _accept_dec = [reactive], _type_de
     var _b = _a, { accept, collisionDetector, collisionPriority, type } = _b, input = __objRest2(_b, ["accept", "collisionDetector", "collisionPriority", "type"]);
     super(input, manager);
     __runInitializers2(_init4, 5, this);
-    __privateAdd2(this, _accept, __runInitializers2(_init4, 8, this)), __runInitializers2(_init4, 11, this);
-    __privateAdd2(this, _type2, __runInitializers2(_init4, 12, this)), __runInitializers2(_init4, 15, this);
-    __privateAdd2(this, _collisionDetector, __runInitializers2(_init4, 16, this)), __runInitializers2(_init4, 19, this);
-    __privateAdd2(this, _collisionPriority, __runInitializers2(_init4, 20, this)), __runInitializers2(_init4, 23, this);
-    __privateAdd2(this, _shape, __runInitializers2(_init4, 24, this)), __runInitializers2(_init4, 27, this);
+    __privateAdd3(this, _accept, __runInitializers2(_init4, 8, this)), __runInitializers2(_init4, 11, this);
+    __privateAdd3(this, _type2, __runInitializers2(_init4, 12, this)), __runInitializers2(_init4, 15, this);
+    __privateAdd3(this, _collisionDetector, __runInitializers2(_init4, 16, this)), __runInitializers2(_init4, 19, this);
+    __privateAdd3(this, _collisionPriority, __runInitializers2(_init4, 20, this)), __runInitializers2(_init4, 23, this);
+    __privateAdd3(this, _shape, __runInitializers2(_init4, 24, this)), __runInitializers2(_init4, 27, this);
     this.accept = accept;
     this.collisionDetector = collisionDetector;
     this.collisionPriority = collisionPriority;
@@ -3401,6 +3431,13 @@ __decorateElement2(_init4, 4, "collisionPriority", _collisionPriority_dec, Dropp
 __decorateElement2(_init4, 4, "shape", _shape_dec, Droppable2, _shape);
 __decorateElement2(_init4, 2, "isDropTarget", _isDropTarget_dec, Droppable2);
 __decoratorMetadata2(_init4, Droppable2);
+var Sensor = class extends Plugin {
+  constructor(manager, options) {
+    super(manager, options);
+    this.manager = manager;
+    this.options = options;
+  }
+};
 
 // components/DraggableComponent/collision/directional/index.ts
 init_react_import();
@@ -3737,6 +3774,25 @@ function useSortableSafe(input) {
   return (0, import_sortable.useSortable)(input);
 }
 
+// lib/get-deep-scroll-position.ts
+init_react_import();
+function getDeepScrollPosition(element) {
+  let totalScroll = {
+    x: 0,
+    y: 0
+  };
+  let current = element;
+  while (current && current !== document.documentElement) {
+    const parent = current.parentElement;
+    if (parent) {
+      totalScroll.x += parent.scrollLeft;
+      totalScroll.y += parent.scrollTop;
+    }
+    current = parent;
+  }
+  return totalScroll;
+}
+
 // components/DraggableComponent/index.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var getClassName16 = get_class_name_factory_default("DraggableComponent", styles_module_default11);
@@ -3744,7 +3800,7 @@ var DEBUG2 = false;
 var space = 8;
 var actionsOverlayTop = space * 6.5;
 var actionsTop = -(actionsOverlayTop - 8);
-var actionsRight = space;
+var actionsSide = space;
 var DefaultActionBar = ({
   label,
   children
@@ -3776,7 +3832,6 @@ var DraggableComponent = ({
   } = useAppContext();
   const isModifierHeld = useModifierHeld("Alt");
   const ctx = (0, import_react16.useContext)(dropZoneContext);
-  const overlayRef = (0, import_react16.useRef)(null);
   const [localZones, setLocalZones] = (0, import_react16.useState)({});
   const registerLocalZone = (0, import_react16.useCallback)(
     (zoneCompound2, active) => {
@@ -3846,24 +3901,31 @@ var DraggableComponent = ({
       (_b = iframe.enabled ? (_a = ref.current) == null ? void 0 : _a.ownerDocument.body : document.getElementById("puck-preview")) != null ? _b : document.body
     );
   }, [iframe.enabled]);
-  const sync = (0, import_react16.useCallback)(() => {
+  const portalContainerRect = (0, import_react16.useMemo)(() => {
+    const portalContainerEl = iframe.enabled ? null : document.getElementById("puck-preview");
+    return portalContainerEl == null ? void 0 : portalContainerEl.getBoundingClientRect();
+  }, [iframe.enabled]);
+  const getStyle = (0, import_react16.useCallback)(() => {
     var _a, _b;
-    if (!ref.current || !overlayRef.current) return;
+    if (!ref.current) return;
     const rect = ref.current.getBoundingClientRect();
-    const doc = ref.current.ownerDocument;
-    const view = doc.defaultView;
-    const portalContainerEl = iframe.enabled ? null : document.getElementById("puck-preview");
-    const portalContainerRect = portalContainerEl == null ? void 0 : portalContainerEl.getBoundingClientRect();
+    const deepScrollPosition = getDeepScrollPosition(ref.current);
     const scroll = {
-      x: ((view == null ? void 0 : view.scrollX) || 0) - ((_a = portalContainerRect == null ? void 0 : portalContainerRect.left) != null ? _a : 0),
-      y: ((view == null ? void 0 : view.scrollY) || 0) - ((_b = portalContainerRect == null ? void 0 : portalContainerRect.top) != null ? _b : 0)
+      x: deepScrollPosition.x - ((_a = portalContainerRect == null ? void 0 : portalContainerRect.left) != null ? _a : 0),
+      y: deepScrollPosition.y - ((_b = portalContainerRect == null ? void 0 : portalContainerRect.top) != null ? _b : 0)
+    };
+    const style2 = {
+      left: `${rect.left + scroll.x}px`,
+      top: `${rect.top + scroll.y}px`,
+      height: `${rect.height}px`,
+      width: `${rect.width}px`
     };
-    overlayRef.current.style.left = `${rect.left + scroll.x}px`;
-    overlayRef.current.style.top = `${rect.top + scroll.y}px`;
-    overlayRef.current.style.height = `${rect.height}px`;
-    overlayRef.current.style.width = `${rect.width}px`;
-    overlayRef.current.style.opacity = "1";
-  }, [ref, overlayRef, iframe]);
+    return style2;
+  }, [ref, portalContainerRect]);
+  const [style, setStyle] = (0, import_react16.useState)();
+  const sync = (0, import_react16.useCallback)(() => {
+    setStyle(getStyle());
+  }, [ref, iframe]);
   (0, import_react16.useEffect)(() => {
     ctx == null ? void 0 : ctx.registerPath({
       index,
@@ -3945,6 +4007,7 @@ var DraggableComponent = ({
       el.removeAttribute("data-puck-dragging");
     }
     return () => {
+      el.removeAttribute("data-puck-component");
       el.removeEventListener("click", onClick);
       el.removeEventListener("mouseover", _onMouseOver);
       el.removeEventListener("mouseout", _onMouseOut);
@@ -3952,7 +4015,6 @@ var DraggableComponent = ({
     };
   }, [
     ref,
-    overlayRef,
     onClick,
     containsActiveZone,
     zoneCompound,
@@ -3970,20 +4032,35 @@ var DraggableComponent = ({
       };
     }
   }, [disabled, ref]);
-  const isVisible = isSelected || hover || indicativeHover;
-  const [actionsWidth, setActionsWidth] = (0, import_react16.useState)(250);
-  const actionsRef = (0, import_react16.useRef)(null);
-  const updateActionsWidth = (0, import_react16.useCallback)(() => {
-    if (actionsRef.current) {
-      const rect = actionsRef.current.getBoundingClientRect();
-      setActionsWidth(rect.width);
+  const [isVisible, setIsVisible] = (0, import_react16.useState)(false);
+  (0, import_react16.useEffect)(() => {
+    sync();
+    if ((isSelected || hover || indicativeHover) && !userIsDragging) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
     }
-  }, []);
-  (0, import_react16.useEffect)(updateActionsWidth, [
-    actionsRef.current,
-    zoomConfig.zoom,
-    isSelected
-  ]);
+  }, [isSelected, hover, indicativeHover, iframe, state.data, userIsDragging]);
+  const syncActionsPosition = (0, import_react16.useCallback)(
+    (el) => {
+      if (el) {
+        const view = el.ownerDocument.defaultView;
+        if (view) {
+          const rect = el.getBoundingClientRect();
+          const diffLeft = rect.x;
+          const exceedsBoundsLeft = diffLeft < 0;
+          if (exceedsBoundsLeft) {
+            el.style.transformOrigin = "left top";
+            el.style.left = "0px";
+          } else {
+            el.style.transformOrigin = "right top";
+            el.style.left = "";
+          }
+        }
+      }
+    },
+    [zoomConfig]
+  );
   (0, import_react16.useEffect)(() => {
     if (userDragAxis) {
       setDragAxis(userDragAxis);
@@ -3998,7 +4075,6 @@ var DraggableComponent = ({
     }
     setDragAxis(autoDragAxis);
   }, [ref, userDragAxis, autoDragAxis]);
-  (0, import_react16.useEffect)(sync, [ref, overlayRef, isVisible, hover, iframe, state.data]);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     DropZoneProvider,
     {
@@ -4021,7 +4097,7 @@ var DraggableComponent = ({
                 isModifierHeld,
                 hover: hover || indicativeHover
               }),
-              ref: overlayRef,
+              style: __spreadValues({}, style),
               children: [
                 debug,
                 isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: getClassName16("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader, {}) }),
@@ -4030,9 +4106,7 @@ var DraggableComponent = ({
                   {
                     className: getClassName16("actionsOverlay"),
                     style: {
-                      top: actionsOverlayTop / zoomConfig.zoom,
-                      // Offset against left of frame
-                      minWidth: actionsWidth + 2 * actionsRight
+                      top: actionsOverlayTop / zoomConfig.zoom
                     },
                     children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                       "div",
@@ -4041,9 +4115,11 @@ var DraggableComponent = ({
                         style: {
                           transform: `scale(${1 / zoomConfig.zoom}`,
                           top: actionsTop / zoomConfig.zoom,
-                          right: actionsRight / zoomConfig.zoom
+                          right: 0,
+                          paddingLeft: actionsSide,
+                          paddingRight: actionsSide
                         },
-                        ref: actionsRef,
+                        ref: syncActionsPosition,
                         children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CustomActionBar, { label: DEBUG2 ? id : label, children: [
                           permissions.duplicate && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Copy, { size: 16 }) }),
                           permissions.delete && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Trash, { size: 16 }) })
@@ -4066,7 +4142,7 @@ var DraggableComponent = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css#css-module
 init_react_import();
-var styles_module_default12 = { "DropZone": "_DropZone_q2ip3_1", "DropZone--hasChildren": "_DropZone--hasChildren_q2ip3_12", "DropZone--userIsDragging": "_DropZone--userIsDragging_q2ip3_20", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_q2ip3_29", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_q2ip3_30", "DropZone--isRootZone": "_DropZone--isRootZone_q2ip3_30", "DropZone--isDestination": "_DropZone--isDestination_q2ip3_40", "DropZone-item": "_DropZone-item_q2ip3_52", "DropZone-hitbox": "_DropZone-hitbox_q2ip3_56", "DropZone--isEnabled": "_DropZone--isEnabled_q2ip3_64" };
+var styles_module_default12 = { "DropZone": "_DropZone_74ebh_1", "DropZone--hasChildren": "_DropZone--hasChildren_74ebh_12", "DropZone--userIsDragging": "_DropZone--userIsDragging_74ebh_20", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_74ebh_29", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_74ebh_30", "DropZone--isRootZone": "_DropZone--isRootZone_74ebh_30", "DropZone--isDestination": "_DropZone--isDestination_74ebh_40", "DropZone-item": "_DropZone-item_74ebh_52", "DropZone-hitbox": "_DropZone-hitbox_74ebh_56", "DropZone--isEnabled": "_DropZone--isEnabled_74ebh_64" };
 
 // components/DropZone/context.tsx
 init_react_import();
@@ -4280,7 +4356,7 @@ function DropZoneEdit({
   const [dragAxis, setDragAxis] = (0, import_react18.useState)(
     collisionAxis || DEFAULT_DRAG_AXIS
   );
-  (0, import_react18.useEffect)(() => {
+  const calculateDragAxis = (0, import_react18.useCallback)(() => {
     if (ref.current) {
       const computedStyle = window.getComputedStyle(ref.current);
       if (computedStyle.display === "grid") {
@@ -4291,7 +4367,17 @@ function DropZoneEdit({
         setDragAxis(DEFAULT_DRAG_AXIS);
       }
     }
-  }, [ref, appContext2.status, collisionAxis]);
+  }, [ref.current]);
+  (0, import_react18.useEffect)(calculateDragAxis, [appContext2.status, collisionAxis]);
+  (0, import_react18.useEffect)(() => {
+    const onViewportChange = () => {
+      calculateDragAxis();
+    };
+    window.addEventListener("viewportchange", onViewportChange);
+    return () => {
+      window.removeEventListener("viewportchange", onViewportChange);
+    };
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
@@ -4580,6 +4666,11 @@ var findDeepestCandidate = (position, manager) => {
         if (candidateData2.areaId === draggedCandidateId) {
           return false;
         }
+      } else if (candidate.type === "component") {
+        const candidateData2 = candidate.data;
+        if (!candidateData2.inDroppableZone) {
+          return false;
+        }
       }
       return true;
     });
@@ -4617,9 +4708,14 @@ var createNestedDroppablePlugin = ({
           y: event.clientY
         });
       };
-      document.body.addEventListener("pointermove", handlePointerMove);
+      document.body.addEventListener("pointermove", handlePointerMove, {
+        capture: true
+        // dndkit's PointerSensor prevents propagation during drag
+      });
       this.destroy = () => {
-        document.body.removeEventListener("pointermove", handlePointerMove);
+        document.body.removeEventListener("pointermove", handlePointerMove, {
+          capture: true
+        });
         cleanupEffect();
       };
     });
@@ -4931,6 +5027,11 @@ var reduceUi = (ui, action) => {
     }
     return __spreadValues(__spreadValues({}, ui), action.ui(ui));
   }
+  if (action.type === "duplicate") {
+    return __spreadProps(__spreadValues({}, ui), {
+      itemSelector: { index: action.sourceIndex + 1, zone: action.sourceZone }
+    });
+  }
   return ui;
 };
 
@@ -5016,6 +5117,267 @@ var insertComponent = (componentType, zone, index, {
 
 // components/DragDropContext/index.tsx
 var import_use_debounce2 = require("use-debounce");
+var import_utilities2 = require("@dnd-kit/dom/utilities");
+
+// components/DragDropContext/PointerSensor.ts
+init_react_import();
+var import_utilities = require("@dnd-kit/dom/utilities");
+var _clearTimeout;
+var _PointerSensor = class _PointerSensor extends Sensor {
+  constructor(manager, options) {
+    super(manager);
+    this.manager = manager;
+    this.options = options;
+    this.listeners = new import_utilities.Listeners();
+    this.cleanup = /* @__PURE__ */ new Set();
+    this.source = void 0;
+    __privateAdd(this, _clearTimeout);
+    this.handleCancel = this.handleCancel.bind(this);
+    this.handlePointerUp = this.handlePointerUp.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    E(() => {
+      const unbindGlobal = this.bindGlobal(options != null ? options : {});
+      return () => {
+        unbindGlobal();
+      };
+    });
+  }
+  bind(source, options = this.options) {
+    const unbind = E(() => {
+      var _a;
+      const target = (_a = source.handle) != null ? _a : source.element;
+      const listener = (event) => {
+        if ((0, import_utilities.isPointerEvent)(event)) {
+          this.handlePointerDown(event, source, options);
+        }
+      };
+      if (target) {
+        patchWindow(target.ownerDocument.defaultView);
+        target.addEventListener("pointerdown", listener);
+        return () => {
+          target.removeEventListener("pointerdown", listener);
+        };
+      }
+    });
+    return unbind;
+  }
+  bindGlobal(options) {
+    const documents = /* @__PURE__ */ new Set();
+    for (const draggable of this.manager.registry.draggables.value) {
+      if (draggable.element) {
+        documents.add((0, import_utilities.getDocument)(draggable.element));
+      }
+    }
+    for (const droppable of this.manager.registry.droppables.value) {
+      if (droppable.element) {
+        documents.add((0, import_utilities.getDocument)(droppable.element));
+      }
+    }
+    const unbindFns = Array.from(documents).map(
+      (doc) => this.listeners.bind(doc, [
+        {
+          type: "pointermove",
+          listener: (event) => this.handlePointerMove(event, doc, options)
+        },
+        {
+          type: "pointerup",
+          listener: this.handlePointerUp,
+          options: {
+            capture: true
+          }
+        },
+        {
+          // Cancel activation if there is a competing Drag and Drop interaction
+          type: "dragstart",
+          listener: this.handleDragStart
+        }
+      ])
+    );
+    return () => {
+      unbindFns.forEach((unbind) => unbind());
+    };
+  }
+  handlePointerDown(event, source, options = {}) {
+    if (this.disabled || !event.isPrimary || event.button !== 0 || !(0, import_utilities.isElement)(event.target) || source.disabled) {
+      return;
+    }
+    const offset = (0, import_utilities.getFrameTransform)(source.element);
+    this.initialCoordinates = {
+      x: event.clientX * offset.scaleX + offset.x,
+      y: event.clientY * offset.scaleY + offset.y
+    };
+    this.source = source;
+    const { activationConstraints } = options;
+    const constraints = typeof activationConstraints === "function" ? activationConstraints(event, source) : activationConstraints;
+    event.stopImmediatePropagation();
+    if (!(constraints == null ? void 0 : constraints.delay) && !(constraints == null ? void 0 : constraints.distance)) {
+      this.handleStart(source, event);
+    } else {
+      const { delay } = constraints;
+      if (delay) {
+        const timeout3 = setTimeout(
+          () => this.handleStart(source, event),
+          delay.value
+        );
+        __privateSet(this, _clearTimeout, () => {
+          clearTimeout(timeout3);
+          __privateSet(this, _clearTimeout, void 0);
+        });
+      }
+    }
+    const cleanup = () => {
+      var _a;
+      (_a = __privateGet(this, _clearTimeout)) == null ? void 0 : _a.call(this);
+      this.initialCoordinates = void 0;
+      this.source = void 0;
+    };
+    this.cleanup.add(cleanup);
+  }
+  handlePointerMove(event, doc, options) {
+    if (!this.source) {
+      return;
+    }
+    const ownerDocument = this.source.element && (0, import_utilities.getDocument)(this.source.element);
+    if (doc !== ownerDocument) {
+      return;
+    }
+    const coordinates = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    const offset = (0, import_utilities.getFrameTransform)(this.source.element);
+    coordinates.x = coordinates.x * offset.scaleX + offset.x;
+    coordinates.y = coordinates.y * offset.scaleY + offset.y;
+    if (this.manager.dragOperation.status.dragging) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.manager.actions.move({ to: coordinates });
+      return;
+    }
+    if (!this.initialCoordinates) {
+      return;
+    }
+    const delta = {
+      x: coordinates.x - this.initialCoordinates.x,
+      y: coordinates.y - this.initialCoordinates.y
+    };
+    const { activationConstraints } = options;
+    const constraints = typeof activationConstraints === "function" ? activationConstraints(event, this.source) : activationConstraints;
+    const { distance, delay } = constraints != null ? constraints : {};
+    if (distance) {
+      if (distance.tolerance != null && exceedsDistance(delta, distance.tolerance)) {
+        return this.handleCancel();
+      }
+      if (exceedsDistance(delta, distance.value)) {
+        return this.handleStart(this.source, event);
+      }
+    }
+    if (delay) {
+      if (exceedsDistance(delta, delay.tolerance)) {
+        return this.handleCancel();
+      }
+    }
+  }
+  handlePointerUp(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    const { status } = this.manager.dragOperation;
+    if (!status.idle) {
+      const canceled = !status.initialized;
+      this.manager.actions.stop({ canceled });
+    }
+    this.cleanup.forEach((cleanup) => cleanup());
+    this.cleanup.clear();
+  }
+  handleKeyDown(event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      this.handleCancel();
+    }
+  }
+  handleStart(source, event) {
+    var _a;
+    const { manager, initialCoordinates } = this;
+    (_a = __privateGet(this, _clearTimeout)) == null ? void 0 : _a.call(this);
+    if (!initialCoordinates || manager.dragOperation.status.initialized) {
+      return;
+    }
+    if (event.defaultPrevented) {
+      return;
+    }
+    event.preventDefault();
+    o(() => {
+      manager.actions.setDragSource(source.id);
+      manager.actions.start({ coordinates: initialCoordinates, event });
+    });
+    const ownerDocument = (0, import_utilities.getDocument)(event.target);
+    const unbind = this.listeners.bind(ownerDocument, [
+      {
+        // Prevent scrolling on touch devices
+        type: "touchmove",
+        listener: preventDefault,
+        options: {
+          passive: false
+        }
+      },
+      {
+        // Prevent click events
+        type: "click",
+        listener: preventDefault
+      },
+      {
+        type: "keydown",
+        listener: this.handleKeyDown
+      }
+    ]);
+    ownerDocument.body.setPointerCapture(event.pointerId);
+    this.cleanup.add(unbind);
+  }
+  handleDragStart(event) {
+    const { target } = event;
+    if (!(0, import_utilities.isElement)(target)) {
+      return;
+    }
+    const isNativeDraggable = (0, import_utilities.isHTMLElement)(target) && target.draggable && target.getAttribute("draggable") === "true";
+    if (isNativeDraggable) {
+      this.handleCancel();
+    } else {
+      preventDefault(event);
+    }
+  }
+  handleCancel() {
+    const { dragOperation } = this.manager;
+    if (dragOperation.status.initialized) {
+      this.manager.actions.stop({ canceled: true });
+    }
+    this.cleanup.forEach((cleanup) => cleanup());
+    this.cleanup.clear();
+  }
+  destroy() {
+    this.listeners.clear();
+  }
+};
+_clearTimeout = new WeakMap();
+_PointerSensor.configure = configurator(_PointerSensor);
+var PointerSensor = _PointerSensor;
+function preventDefault(event) {
+  event.preventDefault();
+}
+function noop() {
+}
+var windows = /* @__PURE__ */ new WeakSet();
+function patchWindow(window2) {
+  if (!window2 || windows.has(window2)) {
+    return;
+  }
+  window2.addEventListener("touchmove", noop, {
+    capture: false,
+    passive: false
+  });
+  windows.add(window2);
+}
+
+// components/DragDropContext/index.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var dragListenerContext = (0, import_react20.createContext)({
   dragListeners: {}
@@ -5031,10 +5393,11 @@ function useDragListener(type, fn, deps = []) {
   }, deps);
 }
 var previewContext = (0, import_react20.createContext)(null);
-var AREA_CHANGE_DEBOUNCE_MS = 150;
+var AREA_CHANGE_DEBOUNCE_MS = 100;
 var DragDropContextClient = ({ children }) => {
   const { state, config, dispatch, resolveData } = useAppContext();
   const [preview, setPreview] = (0, import_react20.useState)(null);
+  const previewRef = (0, import_react20.useRef)(null);
   const { data } = state;
   const [deepest, setDeepest] = (0, import_react20.useState)(null);
   const [nextDeepest, setNextDeepest] = (0, import_react20.useState)(null);
@@ -5081,6 +5444,25 @@ var DragDropContextClient = ({ children }) => {
       }
     })
   ]);
+  const [sensors] = (0, import_react20.useState)(() => [
+    PointerSensor.configure({
+      activationConstraints(event, source) {
+        var _a;
+        const { pointerType, target } = event;
+        if (pointerType === "mouse" && (0, import_utilities2.isElement)(target) && (source.handle === target || ((_a = source.handle) == null ? void 0 : _a.contains(target)))) {
+          return void 0;
+        }
+        const delay = { value: 200, tolerance: 10 };
+        if (pointerType === "touch") {
+          return { delay };
+        }
+        return {
+          delay,
+          distance: { value: 5 }
+        };
+      }
+    })
+  ]);
   const [draggedItem, setDraggedItem] = (0, import_react20.useState)();
   const [dragListeners, setDragListeners] = (0, import_react20.useState)({});
   const [pathData, setPathData] = (0, import_react20.useState)();
@@ -5119,32 +5501,34 @@ var DragDropContextClient = ({ children }) => {
         import_react19.DragDropProvider,
         {
           plugins,
+          sensors,
           onDragEnd: (event, manager) => {
             const { source, target } = event.operation;
+            deepestRef.current = null;
             if (!source) {
               setDraggedItem(null);
               return;
             }
             const { zone, index } = source.data;
+            const thisPreview = previewRef.current ? __spreadValues({}, previewRef.current) : null;
+            previewRef.current = null;
             setTimeout(() => {
               var _a, _b;
               setDraggedItem(null);
               if (event.canceled || (target == null ? void 0 : target.type) === "void") {
-                if (preview) {
-                  setPreview(null);
-                }
+                setPreview(null);
                 (_a = dragListeners.dragend) == null ? void 0 : _a.forEach((fn) => {
                   fn(event, manager);
                 });
                 return;
               }
-              if (preview) {
+              if (thisPreview) {
                 setPreview(null);
-                if (preview.type === "insert") {
+                if (thisPreview.type === "insert") {
                   insertComponent(
-                    preview.componentType,
-                    preview.zone,
-                    preview.index,
+                    thisPreview.componentType,
+                    thisPreview.zone,
+                    thisPreview.index,
                     { config, dispatch, resolveData, state }
                   );
                 } else if (initialSelector.current) {
@@ -5152,8 +5536,8 @@ var DragDropContextClient = ({ children }) => {
                     type: "move",
                     sourceIndex: initialSelector.current.index,
                     sourceZone: initialSelector.current.zone,
-                    destinationIndex: preview.index,
-                    destinationZone: preview.zone,
+                    destinationIndex: thisPreview.index,
+                    destinationZone: thisPreview.zone,
                     recordHistory: false
                   });
                 }
@@ -5169,7 +5553,7 @@ var DragDropContextClient = ({ children }) => {
               (_b = dragListeners.dragend) == null ? void 0 : _b.forEach((fn) => {
                 fn(event, manager);
               });
-            }, 250);
+            }, 300);
           },
           onDragOver: (event, manager) => {
             var _a, _b, _c3, _d;
@@ -5207,7 +5591,7 @@ var DragDropContextClient = ({ children }) => {
               return;
             }
             if (dragMode.current === "new") {
-              setPreview({
+              previewRef.current = {
                 componentType: sourceData.componentType,
                 type: "insert",
                 index: targetIndex,
@@ -5215,7 +5599,8 @@ var DragDropContextClient = ({ children }) => {
                 props: {
                   id: source.id.toString()
                 }
-              });
+              };
+              setPreview(previewRef.current);
             } else {
               if (!initialSelector.current) {
                 initialSelector.current = {
@@ -5225,13 +5610,14 @@ var DragDropContextClient = ({ children }) => {
               }
               const item = getItem(initialSelector.current, data);
               if (item) {
-                setPreview({
+                previewRef.current = {
                   componentType: sourceData.componentType,
                   type: "move",
                   index: targetIndex,
                   zone: targetZone,
                   props: item.props
-                });
+                };
+                setPreview(previewRef.current);
               }
             }
             (_d = dragListeners.dragover) == null ? void 0 : _d.forEach((fn) => {
@@ -5398,7 +5784,9 @@ var Drawer = ({
   const [id] = (0, import_react21.useState)(generateId());
   const { ref } = useDroppableSafe({
     id,
-    type: "void"
+    type: "void",
+    collisionPriority: 0
+    // Never collide with this, but we use it so NestedDroppablePlugin respects the Drawer
   });
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassName18(), ref, children });
 };
@@ -6254,11 +6642,12 @@ var styles_module_default18 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPrev
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
 var useBubbleIframeEvents = (ref) => {
+  const { status } = useAppContext();
   (0, import_react28.useEffect)(() => {
     var _a;
-    if (ref.current) {
+    if (ref.current && status === "READY") {
       const iframe = ref.current;
-      (_a = iframe.contentWindow) == null ? void 0 : _a.addEventListener("mousemove", function(event) {
+      const handlePointerMove = (event) => {
         var _a2;
         const rect = iframe.getBoundingClientRect();
         const evt = new CustomEvent("pointermove", {
@@ -6269,9 +6658,23 @@ var useBubbleIframeEvents = (ref) => {
         evt.clientX = event.clientX * scaleFactor + rect.left;
         evt.clientY = event.clientY * scaleFactor + rect.top;
         iframe.dispatchEvent(evt);
-      });
+      };
+      (_a = iframe.contentDocument) == null ? void 0 : _a.addEventListener(
+        "pointermove",
+        handlePointerMove,
+        {
+          capture: true
+        }
+      );
+      return () => {
+        var _a2;
+        (_a2 = iframe.contentDocument) == null ? void 0 : _a2.removeEventListener(
+          "pointermove",
+          handlePointerMove
+        );
+      };
     }
-  }, [ref]);
+  }, [status]);
 };
 var Preview = ({ id = "puck-preview" }) => {
   const { config, dispatch, state, setStatus, iframe, overrides } = useAppContext();
@@ -6992,7 +7395,7 @@ var ViewportControls = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css#css-module
 init_react_import();
-var styles_module_default21 = { "PuckCanvas": "_PuckCanvas_avf1c_1", "PuckCanvas-controls": "_PuckCanvas-controls_avf1c_16", "PuckCanvas-inner": "_PuckCanvas-inner_avf1c_21", "PuckCanvas-root": "_PuckCanvas-root_avf1c_32", "PuckCanvas--ready": "_PuckCanvas--ready_avf1c_57", "PuckCanvas-loader": "_PuckCanvas-loader_avf1c_62", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_avf1c_72" };
+var styles_module_default21 = { "PuckCanvas": "_PuckCanvas_18jay_1", "PuckCanvas-controls": "_PuckCanvas-controls_18jay_16", "PuckCanvas-inner": "_PuckCanvas-inner_18jay_21", "PuckCanvas-root": "_PuckCanvas-root_18jay_30", "PuckCanvas--ready": "_PuckCanvas--ready_18jay_55", "PuckCanvas-loader": "_PuckCanvas-loader_18jay_60", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_18jay_70" };
 
 // lib/get-zoom-config.ts
 init_react_import();
@@ -7147,6 +7550,14 @@ var Canvas = () => {
               },
               suppressHydrationWarning: true,
               id: "puck-canvas-root",
+              onTransitionEnd: () => {
+                window.dispatchEvent(
+                  new CustomEvent("viewportchange", {
+                    bubbles: true,
+                    cancelable: false
+                  })
+                );
+              },
               children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Preview, {}) })
             }
           ),
@@ -7217,6 +7628,7 @@ var import_react35 = require("react");
 var styles = `
 /* Prevent user from interacting with underlying component */
 [data-puck-component] * {
+  pointer-events: none;
   user-select: none;
     -webkit-user-select: none;
 }