@measured/puck 0.19.0-canary.5bf4fccf → 0.19.0-canary.6dc5101e

package/dist/index.mjs

@@ -4,16 +4,14 @@ import {
   __async,
   __commonJS,
   __objRest,
-  __privateAdd,
-  __privateGet,
-  __privateSet,
   __spreadProps,
   __spreadValues,
   __toESM,
-  createIsSlotConfig,
+  defaultAppState,
+  defaultViewports,
   getChanged,
   init_react_import,
-  isSlot,
+  migrate,
   resolveAllData,
   resolveComponentData,
   rootAreaId,
@@ -22,8 +20,9 @@ import {
   setupZone,
   transformProps,
   useSlots,
+  walkAppState,
   walkTree
-} from "./chunk-COT3ZFIM.mjs";
+} from "./chunk-DDGE2CCN.mjs";
 
 // ../../node_modules/classnames/index.js
 var require_classnames = __commonJS({
@@ -703,198 +702,6 @@ init_react_import();
 
 // reducer/actions/set.ts
 init_react_import();
-
-// lib/data/walk-app-state.ts
-init_react_import();
-
-// lib/data/for-each-slot.ts
-init_react_import();
-var forEachSlot = (item, cb, recursive = false, isSlot2 = isSlot) => {
-  const props = item.props || {};
-  const propKeys = Object.keys(props);
-  for (let i = 0; i < propKeys.length; i++) {
-    const propKey = propKeys[i];
-    const itemType = "type" in item ? item.type : "root";
-    if (isSlot2(itemType, propKey, props[propKey])) {
-      const content = props[propKey];
-      cb(props.id, propKey, content);
-      if (recursive) {
-        content.forEach(
-          (childItem) => __async(void 0, null, function* () {
-            return forEachSlot(childItem, cb, true, isSlot2);
-          })
-        );
-      }
-    }
-  }
-};
-
-// lib/data/for-related-zones.ts
-init_react_import();
-
-// lib/get-zone-id.ts
-init_react_import();
-var getZoneId = (zoneCompound) => {
-  if (!zoneCompound) {
-    return [];
-  }
-  if (zoneCompound && zoneCompound.indexOf(":") > -1) {
-    return zoneCompound.split(":");
-  }
-  return [rootDroppableId, zoneCompound];
-};
-
-// lib/data/for-related-zones.ts
-function forRelatedZones(item, data, cb, path = []) {
-  Object.entries(data.zones || {}).forEach(([zoneCompound, content]) => {
-    const [parentId] = getZoneId(zoneCompound);
-    if (parentId === item.props.id) {
-      cb(path, zoneCompound, content);
-    }
-  });
-}
-
-// lib/data/strip-slots.ts
-init_react_import();
-var stripSlots = (data) => {
-  return __spreadProps(__spreadValues({}, data), {
-    props: Object.entries(data.props).reduce(
-      (acc, [propKey, propVal]) => {
-        if (isSlot(propVal)) {
-          return acc;
-        }
-        return __spreadProps(__spreadValues({}, acc), { [propKey]: propVal });
-      },
-      { id: data.props.id }
-    )
-  });
-};
-
-// lib/data/walk-app-state.ts
-function walkAppState(state, config, mapContent = (content) => content, mapNodeOrSkip = (item) => item) {
-  var _a;
-  let newZones = {};
-  const newZoneIndex = {};
-  const newNodeIndex = {};
-  const processContent = (path, zoneCompound, content, zoneType, newId) => {
-    var _a2;
-    const [parentId] = zoneCompound.split(":");
-    const mappedContent = ((_a2 = mapContent(content, zoneCompound, zoneType)) != null ? _a2 : content) || [];
-    const [_2, zone] = zoneCompound.split(":");
-    const newZoneCompound = `${newId || parentId}:${zone}`;
-    const newContent2 = mappedContent.map(
-      (zoneChild, index) => processItem(zoneChild, [...path, newZoneCompound], index)
-    );
-    newZoneIndex[newZoneCompound] = {
-      contentIds: newContent2.map((item) => item.props.id),
-      type: zoneType
-    };
-    return [newZoneCompound, newContent2];
-  };
-  const processRelatedZones = (item, newId, initialPath) => {
-    forRelatedZones(
-      item,
-      state.data,
-      (relatedPath, relatedZoneCompound, relatedContent) => {
-        const [zoneCompound, newContent2] = processContent(
-          relatedPath,
-          relatedZoneCompound,
-          relatedContent,
-          "dropzone",
-          newId
-        );
-        newZones[zoneCompound] = newContent2;
-      },
-      initialPath
-    );
-  };
-  const processItem = (item, path, index) => {
-    const mappedItem = mapNodeOrSkip(item, path, index);
-    if (!mappedItem) return item;
-    const id = mappedItem.props.id;
-    const newProps = __spreadValues({}, mappedItem.props);
-    forEachSlot(
-      mappedItem,
-      (parentId2, slotId, content) => {
-        const zoneCompound = `${parentId2}:${slotId}`;
-        const [_2, newContent2] = processContent(
-          path,
-          zoneCompound,
-          content,
-          "slot",
-          parentId2
-        );
-        newProps[slotId] = newContent2;
-      },
-      false,
-      createIsSlotConfig(config)
-    );
-    processRelatedZones(item, id, path);
-    const newItem = __spreadProps(__spreadValues({}, item), { props: newProps });
-    const thisZoneCompound = path[path.length - 1];
-    const [parentId, zone] = thisZoneCompound ? thisZoneCompound.split(":") : [null, ""];
-    newNodeIndex[id] = {
-      data: newItem,
-      flatData: stripSlots(newItem),
-      path,
-      parentId,
-      zone
-    };
-    const finalData = __spreadProps(__spreadValues({}, newItem), { props: __spreadValues({}, newItem.props) });
-    if (newProps.id === "root") {
-      delete finalData["type"];
-      delete finalData.props["id"];
-    }
-    return finalData;
-  };
-  const zones = state.data.zones || {};
-  const [_, newContent] = processContent(
-    [],
-    rootDroppableId,
-    state.data.content,
-    "root"
-  );
-  const processedContent = newContent;
-  const zonesAlreadyProcessed = Object.keys(newZones);
-  Object.keys(zones || {}).forEach((zoneCompound) => {
-    const [parentId] = zoneCompound.split(":");
-    if (zonesAlreadyProcessed.includes(zoneCompound)) {
-      return;
-    }
-    const [_2, newContent2] = processContent(
-      [rootDroppableId],
-      zoneCompound,
-      zones[zoneCompound],
-      "dropzone",
-      parentId
-    );
-    newZones[zoneCompound] = newContent2;
-  }, newZones);
-  const processedRoot = processItem(
-    {
-      type: "root",
-      props: __spreadProps(__spreadValues({}, (_a = state.data.root.props) != null ? _a : state.data.root), { id: "root" })
-    },
-    [],
-    -1
-  );
-  const root = __spreadProps(__spreadValues({}, state.data.root), {
-    props: processedRoot.props
-  });
-  return __spreadProps(__spreadValues({}, state), {
-    data: {
-      root,
-      content: processedContent,
-      zones: __spreadValues(__spreadValues({}, state.data.zones), newZones)
-    },
-    indexes: {
-      nodes: __spreadValues(__spreadValues({}, state.indexes.nodes), newNodeIndex),
-      zones: __spreadValues(__spreadValues({}, state.indexes.zones), newZoneIndex)
-    }
-  });
-}
-
-// reducer/actions/set.ts
 var setAction = (state, action, appStore) => {
   if (typeof action.state === "object") {
     const newState = __spreadValues(__spreadValues({}, state), action.state);
@@ -1377,14 +1184,6 @@ function createReducer({
   );
 }
 
-// components/ViewportControls/default-viewports.ts
-init_react_import();
-var defaultViewports = [
-  { width: 360, height: "auto", icon: "Smartphone", label: "Small" },
-  { width: 768, height: "auto", icon: "Tablet", label: "Medium" },
-  { width: 1280, height: "auto", icon: "Monitor", label: "Large" }
-];
-
 // store/index.ts
 import { create as create2, useStore } from "zustand";
 import { subscribeWithSelector as subscribeWithSelector2 } from "zustand/middleware";
@@ -1905,31 +1704,6 @@ var toRoot = (item) => {
 };
 
 // store/index.ts
-var defaultAppState = {
-  data: { content: [], root: {}, zones: {} },
-  ui: {
-    leftSideBarVisible: true,
-    rightSideBarVisible: true,
-    arrayState: {},
-    itemSelector: null,
-    componentList: {},
-    isDragging: false,
-    previewMode: "edit",
-    viewports: {
-      current: {
-        width: defaultViewports[0].width,
-        height: defaultViewports[0].height || "auto"
-      },
-      options: [],
-      controlsVisible: true
-    },
-    field: { focus: null }
-  },
-  indexes: {
-    nodes: {},
-    zones: {}
-  }
-};
 var defaultPageFields = {
   title: { type: "text" }
 };
@@ -2118,326 +1892,11 @@ function useAppStoreApi() {
 init_react_import();
 import { DragDropProvider } from "@dnd-kit/react";
 
-// lib/dnd/dnd-kit/safe.ts
-init_react_import();
-import {
-  useDraggable,
-  useDroppable
-} from "@dnd-kit/react";
-import { useSortable } from "@dnd-kit/react/sortable";
-function useDroppableSafe(input) {
-  if (typeof window === "undefined") {
-    return { ref: () => {
-    } };
-  }
-  return useDroppable(input);
-}
-function useDraggableSafe(input) {
-  if (typeof window === "undefined") {
-    return { ref: () => {
-    } };
-  }
-  return useDraggable(input);
-}
-function useSortableSafe(input) {
-  if (typeof window === "undefined") {
-    return { ref: () => {
-    }, status: "idle", handleRef: () => {
-    } };
-  }
-  return useSortable(input);
-}
-
 // lib/dnd/use-sensors.ts
 init_react_import();
 import { useState as useState2 } from "react";
-
-// lib/dnd/PointerSensor.ts
-init_react_import();
-import { batch, effect } from "@dnd-kit/state";
-import { Sensor, configurator } from "@dnd-kit/abstract";
-import {
-  exceedsDistance
-} from "@dnd-kit/geometry";
-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;
-    this.started = false;
-    __privateAdd(this, _clearTimeout);
-    this.handleCancel = this.handleCancel.bind(this);
-    this.handlePointerUp = this.handlePointerUp.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    effect(() => {
-      const unbindGlobal = this.bindGlobal(options != null ? options : {});
-      return () => {
-        unbindGlobal();
-      };
-    });
-  }
-  bind(source, options = this.options) {
-    const unbind = effect(() => {
-      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) {
-    if (!this.source) {
-      return;
-    }
-    event.preventDefault();
-    event.stopPropagation();
-    const { status } = this.manager.dragOperation;
-    if (!status.idle) {
-      const canceled = !status.initialized;
-      this.manager.actions.stop({ canceled });
-    } else if (this.started) {
-      setTimeout(() => {
-        if (!this.manager.dragOperation.status.idle) {
-          this.manager.actions.stop({ canceled: false });
-        }
-      }, 10);
-    }
-    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 || this.started) {
-      return;
-    }
-    if (event.defaultPrevented) {
-      return;
-    }
-    this.started = true;
-    event.preventDefault();
-    batch(() => {
-      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);
-    this.cleanup.add(() => {
-      this.started = false;
-    });
-  }
-  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);
-}
-
-// lib/dnd/use-sensors.ts
-import { isElement as isElement2 } from "@dnd-kit/dom/utilities";
+import { PointerSensor } from "@dnd-kit/react";
+import { isElement } from "@dnd-kit/dom/utilities";
 var useSensors = ({
   other,
   mouse,
@@ -2451,7 +1910,7 @@ var useSensors = ({
       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)))) {
+        if (pointerType === "mouse" && isElement(target) && (source.handle === target || ((_a = source.handle) == null ? void 0 : _a.contains(target)))) {
           return mouse;
         }
         if (pointerType === "touch") {
@@ -2621,7 +2080,7 @@ import { Point as Point2 } from "@dnd-kit/geometry";
 import { CollisionPriority as CollisionPriority2, CollisionType as CollisionType22 } from "@dnd-kit/abstract";
 import { Point as Point22 } from "@dnd-kit/geometry";
 import { CollisionPriority as CollisionPriority3, CollisionType as CollisionType3 } from "@dnd-kit/abstract";
-import { Point as Point3 } from "@dnd-kit/geometry";
+import { Point as Point3, Rectangle } from "@dnd-kit/geometry";
 import { CollisionPriority as CollisionPriority4, CollisionType as CollisionType4 } from "@dnd-kit/abstract";
 import { Point as Point4 } from "@dnd-kit/geometry";
 import { CollisionPriority as CollisionPriority5, CollisionType as CollisionType5 } from "@dnd-kit/abstract";
@@ -2657,31 +2116,15 @@ var closestCorners = (input) => {
   if (!droppable.shape) {
     return null;
   }
-  const { left, top, right, bottom } = droppable.shape.boundingRectangle;
-  const corners = [
-    {
-      x: left,
-      y: top
-    },
-    {
-      x: right,
-      y: top
-    },
-    {
-      x: left,
-      y: bottom
-    },
-    {
-      x: right,
-      y: bottom
-    }
-  ];
-  const distance = corners.reduce(
-    (acc, corner) => {
+  const shapeCorners = shape ? Rectangle.from(shape.current.boundingRectangle).corners : void 0;
+  const distance = Rectangle.from(
+    droppable.shape.boundingRectangle
+  ).corners.reduce(
+    (acc, corner, index) => {
       var _a;
       return acc + Point3.distance(
         Point3.from(corner),
-        (_a = shape == null ? void 0 : shape.current.center) != null ? _a : position.current
+        (_a = shapeCorners == null ? void 0 : shapeCorners[index]) != null ? _a : position.current
       );
     },
     0
@@ -2716,12 +2159,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
   const { center: dragCenter } = dragShape;
   const { fallbackEnabled } = collisionStore.getState();
   const interval = trackMovementInterval(position.current, dragAxis);
-  dragOperation.data = __spreadProps(__spreadValues({}, dragOperation.data), {
-    direction: interval.direction
-  });
-  const collisionMap = dragOperation.data.collisionMap || {};
-  dragOperation.data.collisionMap = collisionMap;
-  collisionMap[droppable.id] = {
+  const data = {
     direction: interval.direction
   };
   const { center: dropCenter } = dropShape;
@@ -2736,7 +2174,8 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
     collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "yellow");
     if (collision) {
       return __spreadProps(__spreadValues({}, collision), {
-        priority: CollisionPriority7.Highest
+        priority: CollisionPriority7.Highest,
+        data
       });
     }
   }
@@ -2758,7 +2197,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
     };
     const shouldFlushId = flushNext === droppable.id;
     flushNext = "";
-    return __spreadProps(__spreadValues({}, collision), { id: shouldFlushId ? "flush" : collision.id });
+    return __spreadProps(__spreadValues({}, collision), { id: shouldFlushId ? "flush" : collision.id, data });
   }
   if (fallbackEnabled && ((_c = dragOperation.source) == null ? void 0 : _c.id) !== droppable.id) {
     const xAxisIntersection = dropShape.boundingRectangle.right > dragShape.boundingRectangle.left && dropShape.boundingRectangle.left < dragShape.boundingRectangle.right;
@@ -2770,9 +2209,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
           x: dragShape.center.x - (((_d = droppable.shape) == null ? void 0 : _d.center.x) || 0),
           y: dragShape.center.y - (((_e = droppable.shape) == null ? void 0 : _e.center.y) || 0)
         });
-        collisionMap[droppable.id] = {
-          direction
-        };
+        data.direction = direction;
         if (intersectionArea) {
           collisionDebug(
             dragCenter,
@@ -2783,7 +2220,8 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
           );
           flushNext = droppable.id;
           return __spreadProps(__spreadValues({}, fallbackCollision), {
-            priority: CollisionPriority7.Low
+            priority: CollisionPriority7.Low,
+            data
           });
         }
         collisionDebug(
@@ -2793,16 +2231,19 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
           "orange",
           direction || ""
         );
-        return __spreadProps(__spreadValues({}, fallbackCollision), { priority: CollisionPriority7.Lowest });
+        return __spreadProps(__spreadValues({}, fallbackCollision), {
+          priority: CollisionPriority7.Lowest,
+          data
+        });
       }
     }
   }
   collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "hotpink");
-  delete collisionMap[droppable.id];
   return null;
 };
 
 // components/Sortable/index.tsx
+import { useSortable } from "@dnd-kit/react/sortable";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var SortableProvider = ({
   children,
@@ -2822,16 +2263,16 @@ var SortableProvider = ({
         return onDragStart((_b = (_a = event.operation.source) == null ? void 0 : _a.id.toString()) != null ? _b : "");
       },
       onDragOver: (event, manager) => {
-        var _a, _b;
+        var _a;
         event.preventDefault();
         const { operation } = event;
         const { source, target } = operation;
         if (!source || !target) return;
         let sourceIndex = source.data.index;
         let targetIndex = target.data.index;
-        const collisionData = (_b = (_a = manager.dragOperation.data) == null ? void 0 : _a.collisionMap) == null ? void 0 : _b[target.id];
+        const collisionData = (_a = manager.collisionObserver.collisions[0]) == null ? void 0 : _a.data;
         if (sourceIndex !== targetIndex && source.id !== target.id) {
-          const collisionPosition = collisionData.direction === "up" ? "before" : "after";
+          const collisionPosition = (collisionData == null ? void 0 : collisionData.direction) === "up" ? "before" : "after";
           if (targetIndex >= sourceIndex) {
             targetIndex = targetIndex - 1;
           }
@@ -2862,9 +2303,10 @@ var Sortable = ({
 }) => {
   const {
     ref: sortableRef,
-    status,
+    isDragging,
+    isDropping,
     handleRef
-  } = useSortableSafe({
+  } = useSortable({
     id,
     type,
     index,
@@ -2872,7 +2314,7 @@ var Sortable = ({
     data: { index },
     collisionDetector: createDynamicCollisionDetector("y")
   });
-  return children({ status, ref: sortableRef, handleRef });
+  return children({ isDragging, isDropping, ref: sortableRef, handleRef });
 };
 
 // components/AutoField/context.tsx
@@ -2997,7 +2439,7 @@ var ArrayField = ({
     }
   }, []);
   const [draggedItem, setDraggedItem] = useState3("");
-  const isDragging = !!draggedItem;
+  const isDraggingAny = !!draggedItem;
   const canEdit = useAppStore(
     (s) => s.permissions.getPermissions({ item: s.selectedItem }).edit
   );
@@ -3062,13 +2504,13 @@ var ArrayField = ({
                       id: _arrayId,
                       index: i,
                       disabled: readOnly,
-                      children: ({ status, ref, handleRef }) => /* @__PURE__ */ jsxs3(
+                      children: ({ isDragging, ref, handleRef }) => /* @__PURE__ */ jsxs3(
                         "div",
                         {
                           ref,
                           className: getClassNameItem({
                             isExpanded: arrayState.openId === _arrayId,
-                            isDragging: status === "dragging",
+                            isDragging,
                             readOnly
                           }),
                           children: [
@@ -3209,7 +2651,7 @@ var ArrayField = ({
                     type: "button",
                     className: getClassName5("addButton"),
                     onClick: () => {
-                      if (isDragging) return;
+                      if (isDraggingAny) return;
                       const existingValue = value || [];
                       const newValue = [
                         ...existingValue,
@@ -4344,6 +3786,7 @@ function useContextStore(context, selector) {
 
 // components/DraggableComponent/index.tsx
 import { useShallow as useShallow2 } from "zustand/react/shallow";
+import { useSortable as useSortable2 } from "@dnd-kit/react/sortable";
 import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 var getClassName16 = get_class_name_factory_default("DraggableComponent", styles_module_default11);
 var DEBUG2 = false;
@@ -4429,7 +3872,7 @@ var DraggableComponent = ({
   const canCollide = permissions.drag || userIsDragging;
   const disabled = !isEnabled || !canCollide;
   const [dragAxis, setDragAxis] = useState10(userDragAxis || autoDragAxis);
-  const { ref: sortableRef, status } = useSortableSafe({
+  const { ref: sortableRef, isDragging: thisIsDragging } = useSortable2({
     id,
     index,
     group: zoneCompound,
@@ -4451,9 +3894,9 @@ var DraggableComponent = ({
     transition: {
       duration: 200,
       easing: "cubic-bezier(0.2, 0, 0, 1)"
-    }
+    },
+    feedback: "clone"
   });
-  const thisIsDragging = status === "dragging";
   const ref = useRef2(null);
   const refSetter = useCallback6(
     (el) => {
@@ -4593,18 +4036,12 @@ var DraggableComponent = ({
     el.addEventListener("click", onClick);
     el.addEventListener("mouseover", _onMouseOver);
     el.addEventListener("mouseout", _onMouseOut);
-    if (thisIsDragging) {
-      el.setAttribute("data-puck-dragging", "");
-    } else {
-      el.removeAttribute("data-puck-dragging");
-    }
     return () => {
       el.removeAttribute("data-puck-component");
       el.removeAttribute("data-puck-dnd");
       el.removeEventListener("click", onClick);
       el.removeEventListener("mouseover", _onMouseOver);
       el.removeEventListener("mouseout", _onMouseOut);
-      el.removeAttribute("data-puck-dragging");
     };
   }, [
     ref,
@@ -4756,6 +4193,9 @@ var DraggableComponent = ({
 init_react_import();
 var styles_module_default12 = { "DropZone": "_DropZone_3dmev_1", "DropZone--hasChildren": "_DropZone--hasChildren_3dmev_11", "DropZone--userIsDragging": "_DropZone--userIsDragging_3dmev_19", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_3dmev_23", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_3dmev_24", "DropZone--isRootZone": "_DropZone--isRootZone_3dmev_24", "DropZone--isDestination": "_DropZone--isDestination_3dmev_34", "DropZone-item": "_DropZone-item_3dmev_46", "DropZone-hitbox": "_DropZone-hitbox_3dmev_50", "DropZone--isEnabled": "_DropZone--isEnabled_3dmev_58", "DropZone--isAnimating": "_DropZone--isAnimating_3dmev_67" };
 
+// components/DropZone/index.tsx
+import { useDroppable } from "@dnd-kit/react";
+
 // components/DropZone/lib/use-min-empty-height.ts
 init_react_import();
 import { useEffect as useEffect12, useState as useState11 } from "react";
@@ -5268,7 +4708,7 @@ var DropZoneEdit = forwardRef3(
         path: path || []
       }
     };
-    const { ref: dropRef } = useDroppableSafe(droppableConfig);
+    const { ref: dropRef } = useDroppable(droppableConfig);
     const isAreaSelected = useAppStore(
       (s) => (s == null ? void 0 : s.selectedItem) && areaId === (s == null ? void 0 : s.selectedItem.props.id)
     );
@@ -5401,7 +4841,6 @@ var DropZone = forwardRef3(
 // lib/dnd/NestedDroppablePlugin.ts
 init_react_import();
 import { Plugin } from "@dnd-kit/abstract";
-import { effects } from "@dnd-kit/state";
 
 // lib/throttle.ts
 init_react_import();
@@ -5515,7 +4954,7 @@ var depthSort = (candidates) => {
     return 0;
   });
 };
-var getZoneId2 = (candidate) => {
+var getZoneId = (candidate) => {
   let id = candidate == null ? void 0 : candidate.id;
   if (!candidate) return null;
   if (candidate.type === "component") {
@@ -5555,7 +4994,8 @@ var getPointerCollisions = (position, manager) => {
       const element = elements[i];
       const dropzoneId = element.getAttribute("data-puck-dropzone");
       const id = element.getAttribute("data-puck-dnd");
-      if (BUFFER && (dropzoneId || id)) {
+      const isVoid = element.hasAttribute("data-puck-dnd-void");
+      if (BUFFER && (dropzoneId || id) && !isVoid) {
         const box = element.getBoundingClientRect();
         const contractedBox = {
           left: box.left + BUFFER,
@@ -5621,7 +5061,7 @@ var findDeepestCandidate = (position, manager) => {
       return true;
     });
     filteredCandidates.reverse();
-    const zone = getZoneId2(filteredCandidates[0]);
+    const zone = getZoneId(filteredCandidates[0]);
     const area = (_a = filteredCandidates[0]) == null ? void 0 : _a.data.areaId;
     return { zone, area };
   }
@@ -5636,7 +5076,7 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
     if (typeof window === "undefined") {
       return;
     }
-    const cleanupEffect = effects(() => {
+    this.registerEffect(() => {
       const handleMove = (event) => {
         const target = event instanceof BubbledPointerEvent ? event.originalTarget || event.target : event.target;
         const position = new GlobalPosition(target, {
@@ -5660,12 +5100,12 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
         capture: true
         // dndkit's PointerSensor prevents propagation during drag
       });
-      this.destroy = () => {
+      const cleanup = () => {
         document.body.removeEventListener("pointermove", handlePointerMove, {
           capture: true
         });
-        cleanupEffect();
       };
+      return cleanup;
     });
   }
 };
@@ -5967,7 +5407,7 @@ var DragDropContextClient = ({
             }, 250);
           },
           onDragOver: (event, manager) => {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d;
             event.preventDefault();
             const draggedItem = (_a = zoneStore.getState()) == null ? void 0 : _a.draggedItem;
             if (!draggedItem) return;
@@ -5985,7 +5425,7 @@ var DragDropContextClient = ({
               const targetData = target.data;
               targetZone = targetData.zone;
               targetIndex = targetData.index;
-              const collisionData = (_c = (_b = manager.dragOperation.data) == null ? void 0 : _b.collisionMap) == null ? void 0 : _c[targetId];
+              const collisionData = (_b = manager.collisionObserver.collisions[0]) == null ? void 0 : _b.data;
               const dir = getDeepDir(target.element);
               const collisionPosition = (collisionData == null ? void 0 : collisionData.direction) === "up" || dir === "ltr" && (collisionData == null ? void 0 : collisionData.direction) === "left" || dir === "rtl" && (collisionData == null ? void 0 : collisionData.direction) === "right" ? "before" : "after";
               if (targetIndex >= sourceIndex && sourceZone === targetZone) {
@@ -5998,7 +5438,7 @@ var DragDropContextClient = ({
               targetZone = target.id.toString();
               targetIndex = 0;
             }
-            const path = ((_d = appStore.getState().state.indexes.nodes[target.id]) == null ? void 0 : _d.path) || [];
+            const path = ((_c = appStore.getState().state.indexes.nodes[target.id]) == null ? void 0 : _c.path) || [];
             if (targetId === sourceId || path.find((path2) => {
               const [pathId] = path2.split(":");
               return pathId === sourceId;
@@ -6044,16 +5484,12 @@ var DragDropContextClient = ({
                 });
               }
             }
-            (_e = dragListeners.dragover) == null ? void 0 : _e.forEach((fn) => {
+            (_d = dragListeners.dragover) == null ? void 0 : _d.forEach((fn) => {
               fn(event, manager);
             });
           },
           onDragStart: (event, manager) => {
             var _a;
-            dispatch({
-              type: "setUi",
-              ui: { itemSelector: null, isDragging: true }
-            });
             const { source } = event.operation;
             if (source && source.type !== "void") {
               const sourceData = source.data;
@@ -6084,10 +5520,17 @@ var DragDropContextClient = ({
           },
           onBeforeDragStart: (event) => {
             var _a;
-            const isNewComponent = ((_a = event.operation.source) == null ? void 0 : _a.data.type) === "drawer";
+            const isNewComponent = ((_a = event.operation.source) == null ? void 0 : _a.type) === "drawer";
             dragMode.current = isNewComponent ? "new" : "existing";
             initialSelector.current = void 0;
             zoneStore.setState({ draggedItem: event.operation.source });
+            dispatch({
+              type: "setUi",
+              ui: {
+                isDragging: true
+              },
+              recordHistory: false
+            });
           },
           children: /* @__PURE__ */ jsx24(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ jsx24(DropZoneProvider, { value: nextContextValue, children }) })
         }
@@ -6107,6 +5550,7 @@ var DragDropContext = ({
 };
 
 // components/Drawer/index.tsx
+import { useDraggable, useDroppable as useDroppable2 } from "@dnd-kit/react";
 import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
 var getClassName18 = get_class_name_factory_default("Drawer", styles_module_default10);
 var getClassNameItem2 = get_class_name_factory_default("DrawerItem", styles_module_default10);
@@ -6143,10 +5587,11 @@ var DrawerItemDraggable = ({
   id,
   isDragDisabled
 }) => {
-  const { ref } = useDraggableSafe({
+  const { ref } = useDraggable({
     id,
-    data: { type: "drawer", componentType: name },
-    disabled: isDragDisabled
+    data: { componentType: name },
+    disabled: isDragDisabled,
+    type: "drawer"
   });
   return /* @__PURE__ */ jsxs11("div", { className: getClassName18("draggable"), children: [
     /* @__PURE__ */ jsx25("div", { className: getClassName18("draggableBg"), children: /* @__PURE__ */ jsx25(DrawerItemInner, { name, label, children }) }),
@@ -6211,7 +5656,7 @@ var Drawer = ({
     );
   }
   const id = useSafeId();
-  const { ref } = useDroppableSafe({
+  const { ref } = useDroppable2({
     id,
     type: "void",
     collisionPriority: 0
@@ -6224,6 +5669,7 @@ var Drawer = ({
       ref,
       "data-puck-dnd": id,
       "data-puck-drawer": true,
+      "data-puck-dnd-void": true,
       children
     }
   );
@@ -7977,6 +7423,13 @@ function usePuck() {
   }, []);
   return createUsePuck()((s) => s);
 }
+function useGetPuck() {
+  const usePuckApi = useContext10(UsePuckStoreContext);
+  if (!usePuckApi) {
+    throw new Error("usePuckGet must be used inside <Puck>.");
+  }
+  return usePuckApi.getState;
+}
 
 // components/Puck/index.tsx
 import fdeq from "fast-deep-equal";
@@ -8400,86 +7853,6 @@ Puck.Components = Components;
 Puck.Fields = Fields;
 Puck.Outline = Outline;
 Puck.Preview = Preview3;
-
-// lib/migrate.ts
-init_react_import();
-var migrations = [
-  // Migrate root to root.props
-  (data) => {
-    const rootProps = data.root.props || data.root;
-    if (Object.keys(data.root).length > 0 && !data.root.props) {
-      console.warn(
-        "Migration applied: Root props moved from `root` to `root.props`."
-      );
-      return __spreadProps(__spreadValues({}, data), {
-        root: {
-          props: __spreadValues({}, rootProps)
-        }
-      });
-    }
-    return data;
-  },
-  // Migrate zones to slots
-  (data, config) => {
-    var _a;
-    if (!config) return data;
-    console.log("Migrating DropZones to slots...");
-    const updatedItems = {};
-    const appState = __spreadProps(__spreadValues({}, defaultAppState), { data });
-    const { indexes } = walkAppState(appState, config);
-    const deletedCompounds = [];
-    walkAppState(appState, config, (content, zoneCompound, zoneType) => {
-      var _a2, _b;
-      if (zoneType === "dropzone") {
-        const [id, slotName] = zoneCompound.split(":");
-        const nodeData = indexes.nodes[id].data;
-        const componentType = nodeData.type;
-        const configForComponent = config.components[componentType];
-        if (((_b = (_a2 = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _a2[slotName]) == null ? void 0 : _b.type) === "slot") {
-          updatedItems[id] = __spreadProps(__spreadValues({}, nodeData), {
-            props: __spreadProps(__spreadValues({}, nodeData.props), {
-              [slotName]: content
-            })
-          });
-          deletedCompounds.push(zoneCompound);
-        }
-        return content;
-      }
-      return content;
-    });
-    const updated = walkAppState(
-      appState,
-      config,
-      (content) => content,
-      (item) => {
-        var _a2;
-        return (_a2 = updatedItems[item.props.id]) != null ? _a2 : item;
-      }
-    );
-    deletedCompounds.forEach((zoneCompound) => {
-      var _a2;
-      const [_, propName] = zoneCompound.split(":");
-      console.log(
-        `\u2713 Success: Migrated "${zoneCompound}" from DropZone to slot field "${propName}"`
-      );
-      (_a2 = updated.data.zones) == null ? true : delete _a2[zoneCompound];
-    });
-    Object.keys((_a = updated.data.zones) != null ? _a : {}).forEach((zoneCompound) => {
-      const [_, propName] = zoneCompound.split(":");
-      throw new Error(
-        `Could not migrate DropZone "${zoneCompound}" to slot field. No slot exists with the name "${propName}".`
-      );
-    });
-    delete updated.data.zones;
-    return updated.data;
-  }
-];
-function migrate(data, config) {
-  return migrations == null ? void 0 : migrations.reduce(
-    (acc, migration) => migration(acc, config),
-    data
-  );
-}
 export {
   Action,
   ActionBar,
@@ -8499,6 +7872,7 @@ export {
   renderContext,
   resolveAllData,
   transformProps,
+  useGetPuck,
   usePuck,
   walkTree
 };