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

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({
@@ -2229,7 +2232,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
 import { useMemo as useMemo5, useState as useState16 } from "react";
@@ -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_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();
@@ -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();
@@ -3579,6 +3612,25 @@ function useSortableSafe(input) {
   return 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
 import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
 var getClassName16 = get_class_name_factory_default("DraggableComponent", styles_module_default11);
@@ -3586,7 +3638,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 +3670,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) => {
@@ -3688,24 +3739,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 = useCallback6(() => {
+  const portalContainerRect = useMemo3(() => {
+    const portalContainerEl = iframe.enabled ? null : document.getElementById("puck-preview");
+    return portalContainerEl == null ? void 0 : portalContainerEl.getBoundingClientRect();
+  }, [iframe.enabled]);
+  const getStyle = useCallback6(() => {
     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] = useState12();
+  const sync = useCallback6(() => {
+    setStyle(getStyle());
+  }, [ref, iframe]);
   useEffect11(() => {
     ctx == null ? void 0 : ctx.registerPath({
       index,
@@ -3787,6 +3845,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);
@@ -3794,7 +3853,6 @@ var DraggableComponent = ({
     };
   }, [
     ref,
-    overlayRef,
     onClick,
     containsActiveZone,
     zoneCompound,
@@ -3812,20 +3870,35 @@ var DraggableComponent = ({
       };
     }
   }, [disabled, ref]);
-  const isVisible = isSelected || hover || indicativeHover;
-  const [actionsWidth, setActionsWidth] = useState12(250);
-  const actionsRef = useRef3(null);
-  const updateActionsWidth = useCallback6(() => {
-    if (actionsRef.current) {
-      const rect = actionsRef.current.getBoundingClientRect();
-      setActionsWidth(rect.width);
+  const [isVisible, setIsVisible] = useState12(false);
+  useEffect11(() => {
+    sync();
+    if ((isSelected || hover || indicativeHover) && !userIsDragging) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
     }
-  }, []);
-  useEffect11(updateActionsWidth, [
-    actionsRef.current,
-    zoomConfig.zoom,
-    isSelected
-  ]);
+  }, [isSelected, hover, indicativeHover, iframe, state.data, userIsDragging]);
+  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);
@@ -3840,7 +3913,6 @@ var DraggableComponent = ({
     }
     setDragAxis(autoDragAxis);
   }, [ref, userDragAxis, autoDragAxis]);
-  useEffect11(sync, [ref, overlayRef, isVisible, hover, iframe, state.data]);
   return /* @__PURE__ */ jsxs10(
     DropZoneProvider,
     {
@@ -3863,7 +3935,7 @@ var DraggableComponent = ({
                 isModifierHeld,
                 hover: hover || indicativeHover
               }),
-              ref: overlayRef,
+              style: __spreadValues({}, style),
               children: [
                 debug,
                 isLoading && /* @__PURE__ */ jsx21("div", { className: getClassName16("loadingOverlay"), children: /* @__PURE__ */ jsx21(Loader, {}) }),
@@ -3872,9 +3944,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",
@@ -3883,9 +3953,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 }) })
@@ -3908,7 +3980,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();
@@ -4122,7 +4194,7 @@ function DropZoneEdit({
   const [dragAxis, setDragAxis] = useState14(
     collisionAxis || DEFAULT_DRAG_AXIS
   );
-  useEffect12(() => {
+  const calculateDragAxis = useCallback8(() => {
     if (ref.current) {
       const computedStyle = window.getComputedStyle(ref.current);
       if (computedStyle.display === "grid") {
@@ -4133,7 +4205,17 @@ function DropZoneEdit({
         setDragAxis(DEFAULT_DRAG_AXIS);
       }
     }
-  }, [ref, appContext2.status, collisionAxis]);
+  }, [ref.current]);
+  useEffect12(calculateDragAxis, [appContext2.status, collisionAxis]);
+  useEffect12(() => {
+    const onViewportChange = () => {
+      calculateDragAxis();
+    };
+    window.addEventListener("viewportchange", onViewportChange);
+    return () => {
+      window.removeEventListener("viewportchange", onViewportChange);
+    };
+  }, []);
   return /* @__PURE__ */ jsxs11(
     "div",
     {
@@ -4422,6 +4504,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;
     });
@@ -4459,9 +4546,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();
       };
     });
@@ -4773,6 +4865,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;
 };
 
@@ -4858,6 +4955,274 @@ var insertComponent = (componentType, zone, index, {
 
 // components/DragDropContext/index.tsx
 import { useDebouncedCallback as useDebouncedCallback2 } from "use-debounce";
+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: {}
@@ -4873,10 +5238,11 @@ function useDragListener(type, fn, deps = []) {
   }, deps);
 }
 var previewContext = createContext3(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] = useState15(null);
+  const previewRef = useRef5(null);
   const { data } = state;
   const [deepest, setDeepest] = useState15(null);
   const [nextDeepest, setNextDeepest] = useState15(null);
@@ -4923,6 +5289,25 @@ var DragDropContextClient = ({ children }) => {
       }
     })
   ]);
+  const [sensors] = useState15(() => [
+    PointerSensor.configure({
+      activationConstraints(event, source) {
+        var _a;
+        const { pointerType, target } = event;
+        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 };
+        if (pointerType === "touch") {
+          return { delay };
+        }
+        return {
+          delay,
+          distance: { value: 5 }
+        };
+      }
+    })
+  ]);
   const [draggedItem, setDraggedItem] = useState15();
   const [dragListeners, setDragListeners] = useState15({});
   const [pathData, setPathData] = useState15();
@@ -4961,32 +5346,34 @@ var DragDropContextClient = ({ children }) => {
         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) {
@@ -4994,8 +5381,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
                   });
                 }
@@ -5011,7 +5398,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;
@@ -5049,7 +5436,7 @@ var DragDropContextClient = ({ children }) => {
               return;
             }
             if (dragMode.current === "new") {
-              setPreview({
+              previewRef.current = {
                 componentType: sourceData.componentType,
                 type: "insert",
                 index: targetIndex,
@@ -5057,7 +5444,8 @@ var DragDropContextClient = ({ children }) => {
                 props: {
                   id: source.id.toString()
                 }
-              });
+              };
+              setPreview(previewRef.current);
             } else {
               if (!initialSelector.current) {
                 initialSelector.current = {
@@ -5067,13 +5455,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) => {
@@ -5240,7 +5629,9 @@ var Drawer = ({
   const [id] = useState16(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__ */ jsx25("div", { className: getClassName18(), ref, children });
 };
@@ -6107,11 +6498,12 @@ var styles_module_default18 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPrev
 import { Fragment as Fragment14, jsx as jsx33 } from "react/jsx-runtime";
 var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
 var useBubbleIframeEvents = (ref) => {
+  const { status } = useAppContext();
   useEffect17(() => {
     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", {
@@ -6122,9 +6514,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();
@@ -6851,7 +7257,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();
@@ -7006,6 +7412,14 @@ var Canvas = () => {
               },
               suppressHydrationWarning: true,
               id: "puck-canvas-root",
+              onTransitionEnd: () => {
+                window.dispatchEvent(
+                  new CustomEvent("viewportchange", {
+                    bubbles: true,
+                    cancelable: false
+                  })
+                );
+              },
               children: /* @__PURE__ */ jsx37(CustomPreview, { children: /* @__PURE__ */ jsx37(Preview, {}) })
             }
           ),
@@ -7076,6 +7490,7 @@ import { useEffect as useEffect20, useState as useState23 } from "react";
 var styles = `
 /* Prevent user from interacting with underlying component */
 [data-puck-component] * {
+  pointer-events: none;
   user-select: none;
     -webkit-user-select: none;
 }