@measured/puck 0.17.0-canary.2d82115 → 0.17.0-canary.552c8f9

package/dist/index.mjs

@@ -2,6 +2,9 @@ import {
   __async,
   __commonJS,
   __objRest,
+  __privateAdd,
+  __privateGet,
+  __privateSet,
   __spreadProps,
   __spreadValues,
   __toESM,
@@ -13,7 +16,7 @@ import {
   resolveRootData,
   rootDroppableId,
   setupZone
-} from "./chunk-7IH6SUIT.mjs";
+} from "./chunk-EXKSBUY5.mjs";
 
 // ../../node_modules/classnames/index.js
 var require_classnames = __commonJS({
@@ -2245,7 +2248,7 @@ import {
   useRef as useRef5,
   useState as useState15
 } from "react";
-import { defaultPreset, PointerSensor } from "@dnd-kit/dom";
+import { defaultPreset } from "@dnd-kit/dom";
 
 // components/DropZone/index.tsx
 init_react_import();
@@ -2271,7 +2274,7 @@ import {
 
 // 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_146qs_1", "DraggableComponent-overlay": "_DraggableComponent-overlay_146qs_12", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_146qs_29", "DraggableComponent--hover": "_DraggableComponent--hover_146qs_45", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_146qs_45", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_146qs_54", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_146qs_66", "DraggableComponent-actions": "_DraggableComponent-actions_146qs_66" };
+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();
@@ -2716,6 +2719,7 @@ var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.
 var __typeError = (msg) => {
   throw TypeError(msg);
 };
+var __pow = Math.pow;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __decoratorStart = (base) => {
@@ -2735,17 +2739,17 @@ 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) && __getOwnPropDesc(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);
@@ -2756,9 +2760,9 @@ var __decorateElement = (array, flags, name, decorators, target, extra) => {
 };
 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 __privateGet2 = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd2 = (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 __privateSet2 = (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 Point = class _Point {
   /**
@@ -2817,14 +2821,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;
@@ -2849,7 +2853,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;
@@ -2867,12 +2871,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)
@@ -2893,6 +2897,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";
@@ -2942,17 +2963,17 @@ 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) && __getOwnPropDesc2(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);
@@ -2963,9 +2984,9 @@ var __decorateElement2 = (array, flags, name, decorators, target, extra) => {
 };
 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 __privateGet3 = (obj, member, getter) => (__accessCheck2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd3 = (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 __privateSet3 = (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);
 function configure(plugin, options) {
   return {
@@ -2973,6 +2994,11 @@ function configure(plugin, options) {
     options
   };
 }
+function configurator(plugin) {
+  return (options) => {
+    return configure(plugin, options);
+  };
+}
 var _disabled_dec;
 var _init2;
 var _disabled;
@@ -2981,7 +3007,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.
@@ -3068,10 +3094,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;
@@ -3151,9 +3177,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;
@@ -3190,11 +3216,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;
@@ -3240,6 +3266,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();
@@ -3586,7 +3619,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
@@ -3618,7 +3651,6 @@ var DraggableComponent = ({
   } = useAppContext();
   const isModifierHeld = useModifierHeld("Alt");
   const ctx = useContext2(dropZoneContext);
-  const overlayRef = useRef3(null);
   const [localZones, setLocalZones] = useState12({});
   const registerLocalZone = useCallback6(
     (zoneCompound2, active) => {
@@ -3707,11 +3739,11 @@ var DraggableComponent = ({
       width: `${rect.width}px`
     };
     return style2;
-  }, [ref, overlayRef, iframe]);
+  }, [ref, iframe]);
   const [style, setStyle] = useState12();
   const sync = useCallback6(() => {
     setStyle(getStyle());
-  }, [ref, overlayRef, iframe]);
+  }, [ref, iframe]);
   useEffect11(() => {
     ctx == null ? void 0 : ctx.registerPath({
       index,
@@ -3793,6 +3825,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);
@@ -3800,7 +3833,6 @@ var DraggableComponent = ({
     };
   }, [
     ref,
-    overlayRef,
     onClick,
     containsActiveZone,
     zoneCompound,
@@ -3827,19 +3859,26 @@ var DraggableComponent = ({
       setIsVisible(false);
     }
   }, [isSelected, hover, indicativeHover, iframe, state.data, userIsDragging]);
-  const [actionsWidth, setActionsWidth] = useState12(250);
-  const actionsRef = useRef3(null);
-  const updateActionsWidth = useCallback6(() => {
-    if (actionsRef.current) {
-      const rect = actionsRef.current.getBoundingClientRect();
-      setActionsWidth(rect.width);
-    }
-  }, []);
-  useEffect11(updateActionsWidth, [
-    actionsRef.current,
-    zoomConfig.zoom,
-    isSelected
-  ]);
+  const syncActionsPosition = useCallback6(
+    (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]
+  );
   useEffect11(() => {
     if (userDragAxis) {
       setDragAxis(userDragAxis);
@@ -3876,7 +3915,6 @@ var DraggableComponent = ({
                 isModifierHeld,
                 hover: hover || indicativeHover
               }),
-              ref: overlayRef,
               style: __spreadValues({}, style),
               children: [
                 debug,
@@ -3886,9 +3924,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__ */ jsx21(
                       "div",
@@ -3897,9 +3933,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__ */ jsxs10(CustomActionBar, { label: DEBUG2 ? id : label, children: [
                           permissions.duplicate && /* @__PURE__ */ jsx21(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx21(Copy, { size: 16 }) }),
                           permissions.delete && /* @__PURE__ */ jsx21(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx21(Trash, { size: 16 }) })
@@ -3922,7 +3960,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();
@@ -4802,6 +4840,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;
 };
 
@@ -4887,7 +4930,274 @@ var insertComponent = (componentType, zone, index, {
 
 // components/DragDropContext/index.tsx
 import { useDebouncedCallback as useDebouncedCallback2 } from "use-debounce";
-import { isElement } from "@dnd-kit/dom/utilities";
+import { isElement as isElement2 } from "@dnd-kit/dom/utilities";
+
+// components/DragDropContext/PointerSensor.ts
+init_react_import();
+import {
+  getDocument,
+  isElement,
+  isHTMLElement,
+  isPointerEvent,
+  Listeners,
+  getFrameTransform
+} from "@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 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 (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(getDocument(draggable.element));
+      }
+    }
+    for (const droppable of this.manager.registry.droppables.value) {
+      if (droppable.element) {
+        documents.add(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 || !isElement(event.target) || source.disabled) {
+      return;
+    }
+    const offset = 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 && getDocument(this.source.element);
+    if (doc !== ownerDocument) {
+      return;
+    }
+    const coordinates = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    const offset = 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 = 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 (!isElement(target)) {
+      return;
+    }
+    const isNativeDraggable = 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
 import { jsx as jsx24 } from "react/jsx-runtime";
 var dragListenerContext = createContext3({
   dragListeners: {}
@@ -4907,6 +5217,7 @@ var AREA_CHANGE_DEBOUNCE_MS = 100;
 var DragDropContextClient = ({ children }) => {
   const { state, config, dispatch, resolveData } = useAppContext();
   const [preview, setPreview] = useState15(null);
+  const previewRef = useRef5(null);
   const { data } = state;
   const [deepest, setDeepest] = useState15(null);
   const [nextDeepest, setNextDeepest] = useState15(null);
@@ -4958,7 +5269,7 @@ var DragDropContextClient = ({ children }) => {
       activationConstraints(event, source) {
         var _a;
         const { pointerType, target } = event;
-        if (pointerType === "mouse" && isElement(target) && (source.handle === target || ((_a = source.handle) == null ? void 0 : _a.contains(target)))) {
+        if (pointerType === "mouse" && isElement2(target) && (source.handle === target || ((_a = source.handle) == null ? void 0 : _a.contains(target)))) {
           return void 0;
         }
         const delay = { value: 200, tolerance: 10 };
@@ -5023,21 +5334,20 @@ var DragDropContextClient = ({ children }) => {
               var _a, _b;
               setDraggedItem(null);
               if (event.canceled || (target == null ? void 0 : target.type) === "void") {
-                if (preview) {
-                  setPreview(null);
-                }
+                setPreview(null);
+                previewRef.current = null;
                 (_a = dragListeners.dragend) == null ? void 0 : _a.forEach((fn) => {
                   fn(event, manager);
                 });
                 return;
               }
-              if (preview) {
+              if (previewRef.current) {
                 setPreview(null);
-                if (preview.type === "insert") {
+                if (previewRef.current.type === "insert") {
                   insertComponent(
-                    preview.componentType,
-                    preview.zone,
-                    preview.index,
+                    previewRef.current.componentType,
+                    previewRef.current.zone,
+                    previewRef.current.index,
                     { config, dispatch, resolveData, state }
                   );
                 } else if (initialSelector.current) {
@@ -5045,11 +5355,12 @@ var DragDropContextClient = ({ children }) => {
                     type: "move",
                     sourceIndex: initialSelector.current.index,
                     sourceZone: initialSelector.current.zone,
-                    destinationIndex: preview.index,
-                    destinationZone: preview.zone,
+                    destinationIndex: previewRef.current.index,
+                    destinationZone: previewRef.current.zone,
                     recordHistory: false
                   });
                 }
+                previewRef.current = null;
               }
               dispatch({
                 type: "setUi",
@@ -5100,7 +5411,7 @@ var DragDropContextClient = ({ children }) => {
               return;
             }
             if (dragMode.current === "new") {
-              setPreview({
+              previewRef.current = {
                 componentType: sourceData.componentType,
                 type: "insert",
                 index: targetIndex,
@@ -5108,7 +5419,8 @@ var DragDropContextClient = ({ children }) => {
                 props: {
                   id: source.id.toString()
                 }
-              });
+              };
+              setPreview(previewRef.current);
             } else {
               if (!initialSelector.current) {
                 initialSelector.current = {
@@ -5118,13 +5430,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) => {
@@ -6919,7 +7232,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_cf3je_1", "PuckCanvas-controls": "_PuckCanvas-controls_cf3je_16", "PuckCanvas-inner": "_PuckCanvas-inner_cf3je_21", "PuckCanvas-root": "_PuckCanvas-root_cf3je_32", "PuckCanvas--ready": "_PuckCanvas--ready_cf3je_57", "PuckCanvas-loader": "_PuckCanvas-loader_cf3je_62", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_cf3je_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();