@measured/puck 0.8.0 → 0.9.0-canary.1822536

package/dist/index.js

@@ -327,7 +327,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment8 = REACT_FRAGMENT_TYPE;
+        var Fragment9 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -386,7 +386,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment8;
+        exports.Fragment = Fragment9;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal;
@@ -1214,16 +1214,16 @@ var Button = ({
 
 // components/DropZone/index.tsx
 init_react_import();
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // components/DraggableComponent/index.tsx
 init_react_import();
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_react_beautiful_dnd = require("react-beautiful-dnd");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
-var styles_module_default = { "DraggableComponent": "_DraggableComponent_1nlo8_1", "DraggableComponent--isDragging": "_DraggableComponent--isDragging_1nlo8_6", "DraggableComponent-contents": "_DraggableComponent-contents_1nlo8_12", "DraggableComponent-overlay": "_DraggableComponent-overlay_1nlo8_24", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_1nlo8_39", "DraggableComponent--forceHover": "_DraggableComponent--forceHover_1nlo8_45", "DraggableComponent--indicativeHover": "_DraggableComponent--indicativeHover_1nlo8_50", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_1nlo8_57", "DraggableComponent-actions": "_DraggableComponent-actions_1nlo8_70", "DraggableComponent-actionsLabel": "_DraggableComponent-actionsLabel_1nlo8_93", "DraggableComponent-action": "_DraggableComponent-action_1nlo8_70" };
+var styles_module_default = { "DraggableComponent": "_DraggableComponent_1phls_1", "DraggableComponent--isDragging": "_DraggableComponent--isDragging_1phls_5", "DraggableComponent-contents": "_DraggableComponent-contents_1phls_11", "DraggableComponent-overlay": "_DraggableComponent-overlay_1phls_24", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_1phls_38", "DraggableComponent--forceHover": "_DraggableComponent--forceHover_1phls_44", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_1phls_49", "DraggableComponent--indicativeHover": "_DraggableComponent--indicativeHover_1phls_54", "DraggableComponent-actions": "_DraggableComponent-actions_1phls_80", "DraggableComponent-actionsLabel": "_DraggableComponent-actionsLabel_1phls_103", "DraggableComponent-action": "_DraggableComponent-action_1phls_80" };
 
 // ../../node_modules/react-feather/dist/index.js
 init_react_import();
@@ -1378,7 +1378,7 @@ ChevronDown.propTypes = {
 ChevronDown.displayName = "ChevronDown";
 var chevron_down_default = ChevronDown;
 
-// ../../node_modules/react-feather/dist/icons/chevron-right.js
+// ../../node_modules/react-feather/dist/icons/chevron-left.js
 init_react_import();
 var import_react5 = __toESM(require("react"));
 var import_prop_types3 = __toESM(require_prop_types());
@@ -1428,7 +1428,7 @@ function _objectWithoutPropertiesLoose3(source, excluded) {
   }
   return target;
 }
-var ChevronRight = (0, import_react5.forwardRef)(function(_ref, ref) {
+var ChevronLeft = (0, import_react5.forwardRef)(function(_ref, ref) {
   var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties3(_ref, ["color", "size"]);
   return /* @__PURE__ */ import_react5.default.createElement("svg", _extends3({
     ref,
@@ -1442,17 +1442,17 @@ var ChevronRight = (0, import_react5.forwardRef)(function(_ref, ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }, rest), /* @__PURE__ */ import_react5.default.createElement("polyline", {
-    points: "9 18 15 12 9 6"
+    points: "15 18 9 12 15 6"
   }));
 });
-ChevronRight.propTypes = {
+ChevronLeft.propTypes = {
   color: import_prop_types3.default.string,
   size: import_prop_types3.default.oneOfType([import_prop_types3.default.string, import_prop_types3.default.number])
 };
-ChevronRight.displayName = "ChevronRight";
-var chevron_right_default = ChevronRight;
+ChevronLeft.displayName = "ChevronLeft";
+var chevron_left_default = ChevronLeft;
 
-// ../../node_modules/react-feather/dist/icons/copy.js
+// ../../node_modules/react-feather/dist/icons/chevron-right.js
 init_react_import();
 var import_react6 = __toESM(require("react"));
 var import_prop_types4 = __toESM(require_prop_types());
@@ -1502,7 +1502,7 @@ function _objectWithoutPropertiesLoose4(source, excluded) {
   }
   return target;
 }
-var Copy = (0, import_react6.forwardRef)(function(_ref, ref) {
+var ChevronRight = (0, import_react6.forwardRef)(function(_ref, ref) {
   var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties4(_ref, ["color", "size"]);
   return /* @__PURE__ */ import_react6.default.createElement("svg", _extends4({
     ref,
@@ -1515,25 +1515,18 @@ var Copy = (0, import_react6.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react6.default.createElement("rect", {
-    x: "9",
-    y: "9",
-    width: "13",
-    height: "13",
-    rx: "2",
-    ry: "2"
-  }), /* @__PURE__ */ import_react6.default.createElement("path", {
-    d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+  }, rest), /* @__PURE__ */ import_react6.default.createElement("polyline", {
+    points: "9 18 15 12 9 6"
   }));
 });
-Copy.propTypes = {
+ChevronRight.propTypes = {
   color: import_prop_types4.default.string,
   size: import_prop_types4.default.oneOfType([import_prop_types4.default.string, import_prop_types4.default.number])
 };
-Copy.displayName = "Copy";
-var copy_default = Copy;
+ChevronRight.displayName = "ChevronRight";
+var chevron_right_default = ChevronRight;
 
-// ../../node_modules/react-feather/dist/icons/globe.js
+// ../../node_modules/react-feather/dist/icons/copy.js
 init_react_import();
 var import_react7 = __toESM(require("react"));
 var import_prop_types5 = __toESM(require_prop_types());
@@ -1583,7 +1576,7 @@ function _objectWithoutPropertiesLoose5(source, excluded) {
   }
   return target;
 }
-var Globe = (0, import_react7.forwardRef)(function(_ref, ref) {
+var Copy = (0, import_react7.forwardRef)(function(_ref, ref) {
   var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties5(_ref, ["color", "size"]);
   return /* @__PURE__ */ import_react7.default.createElement("svg", _extends5({
     ref,
@@ -1596,27 +1589,25 @@ var Globe = (0, import_react7.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react7.default.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /* @__PURE__ */ import_react7.default.createElement("line", {
-    x1: "2",
-    y1: "12",
-    x2: "22",
-    y2: "12"
+  }, rest), /* @__PURE__ */ import_react7.default.createElement("rect", {
+    x: "9",
+    y: "9",
+    width: "13",
+    height: "13",
+    rx: "2",
+    ry: "2"
   }), /* @__PURE__ */ import_react7.default.createElement("path", {
-    d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
+    d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
   }));
 });
-Globe.propTypes = {
+Copy.propTypes = {
   color: import_prop_types5.default.string,
   size: import_prop_types5.default.oneOfType([import_prop_types5.default.string, import_prop_types5.default.number])
 };
-Globe.displayName = "Globe";
-var globe_default = Globe;
+Copy.displayName = "Copy";
+var copy_default = Copy;
 
-// ../../node_modules/react-feather/dist/icons/grid.js
+// ../../node_modules/react-feather/dist/icons/globe.js
 init_react_import();
 var import_react8 = __toESM(require("react"));
 var import_prop_types6 = __toESM(require_prop_types());
@@ -1666,7 +1657,7 @@ function _objectWithoutPropertiesLoose6(source, excluded) {
   }
   return target;
 }
-var Grid = (0, import_react8.forwardRef)(function(_ref, ref) {
+var Globe = (0, import_react8.forwardRef)(function(_ref, ref) {
   var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties6(_ref, ["color", "size"]);
   return /* @__PURE__ */ import_react8.default.createElement("svg", _extends6({
     ref,
@@ -1679,22 +1670,105 @@ var Grid = (0, import_react8.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react8.default.createElement("rect", {
+  }, rest), /* @__PURE__ */ import_react8.default.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /* @__PURE__ */ import_react8.default.createElement("line", {
+    x1: "2",
+    y1: "12",
+    x2: "22",
+    y2: "12"
+  }), /* @__PURE__ */ import_react8.default.createElement("path", {
+    d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
+  }));
+});
+Globe.propTypes = {
+  color: import_prop_types6.default.string,
+  size: import_prop_types6.default.oneOfType([import_prop_types6.default.string, import_prop_types6.default.number])
+};
+Globe.displayName = "Globe";
+var globe_default = Globe;
+
+// ../../node_modules/react-feather/dist/icons/grid.js
+init_react_import();
+var import_react9 = __toESM(require("react"));
+var import_prop_types7 = __toESM(require_prop_types());
+function _extends7() {
+  _extends7 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends7.apply(this, arguments);
+}
+function _objectWithoutProperties7(source, excluded) {
+  if (source == null)
+    return {};
+  var target = _objectWithoutPropertiesLoose7(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0)
+        continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key))
+        continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _objectWithoutPropertiesLoose7(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0)
+      continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+var Grid = (0, import_react9.forwardRef)(function(_ref, ref) {
+  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties7(_ref, ["color", "size"]);
+  return /* @__PURE__ */ import_react9.default.createElement("svg", _extends7({
+    ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /* @__PURE__ */ import_react9.default.createElement("rect", {
     x: "3",
     y: "3",
     width: "7",
     height: "7"
-  }), /* @__PURE__ */ import_react8.default.createElement("rect", {
+  }), /* @__PURE__ */ import_react9.default.createElement("rect", {
     x: "14",
     y: "3",
     width: "7",
     height: "7"
-  }), /* @__PURE__ */ import_react8.default.createElement("rect", {
+  }), /* @__PURE__ */ import_react9.default.createElement("rect", {
     x: "14",
     y: "14",
     width: "7",
     height: "7"
-  }), /* @__PURE__ */ import_react8.default.createElement("rect", {
+  }), /* @__PURE__ */ import_react9.default.createElement("rect", {
     x: "3",
     y: "14",
     width: "7",
@@ -1702,18 +1776,18 @@ var Grid = (0, import_react8.forwardRef)(function(_ref, ref) {
   }));
 });
 Grid.propTypes = {
-  color: import_prop_types6.default.string,
-  size: import_prop_types6.default.oneOfType([import_prop_types6.default.string, import_prop_types6.default.number])
+  color: import_prop_types7.default.string,
+  size: import_prop_types7.default.oneOfType([import_prop_types7.default.string, import_prop_types7.default.number])
 };
 Grid.displayName = "Grid";
 var grid_default = Grid;
 
 // ../../node_modules/react-feather/dist/icons/hash.js
 init_react_import();
-var import_react9 = __toESM(require("react"));
-var import_prop_types7 = __toESM(require_prop_types());
-function _extends7() {
-  _extends7 = Object.assign || function(target) {
+var import_react10 = __toESM(require("react"));
+var import_prop_types8 = __toESM(require_prop_types());
+function _extends8() {
+  _extends8 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1724,12 +1798,12 @@ function _extends7() {
     }
     return target;
   };
-  return _extends7.apply(this, arguments);
+  return _extends8.apply(this, arguments);
 }
-function _objectWithoutProperties7(source, excluded) {
+function _objectWithoutProperties8(source, excluded) {
   if (source == null)
     return {};
-  var target = _objectWithoutPropertiesLoose7(source, excluded);
+  var target = _objectWithoutPropertiesLoose8(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1744,7 +1818,7 @@ function _objectWithoutProperties7(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose7(source, excluded) {
+function _objectWithoutPropertiesLoose8(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -1758,9 +1832,9 @@ function _objectWithoutPropertiesLoose7(source, excluded) {
   }
   return target;
 }
-var Hash = (0, import_react9.forwardRef)(function(_ref, ref) {
-  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties7(_ref, ["color", "size"]);
-  return /* @__PURE__ */ import_react9.default.createElement("svg", _extends7({
+var Hash = (0, import_react10.forwardRef)(function(_ref, ref) {
+  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties8(_ref, ["color", "size"]);
+  return /* @__PURE__ */ import_react10.default.createElement("svg", _extends8({
     ref,
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -1771,22 +1845,22 @@ var Hash = (0, import_react9.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react9.default.createElement("line", {
+  }, rest), /* @__PURE__ */ import_react10.default.createElement("line", {
     x1: "4",
     y1: "9",
     x2: "20",
     y2: "9"
-  }), /* @__PURE__ */ import_react9.default.createElement("line", {
+  }), /* @__PURE__ */ import_react10.default.createElement("line", {
     x1: "4",
     y1: "15",
     x2: "20",
     y2: "15"
-  }), /* @__PURE__ */ import_react9.default.createElement("line", {
+  }), /* @__PURE__ */ import_react10.default.createElement("line", {
     x1: "10",
     y1: "3",
     x2: "8",
     y2: "21"
-  }), /* @__PURE__ */ import_react9.default.createElement("line", {
+  }), /* @__PURE__ */ import_react10.default.createElement("line", {
     x1: "16",
     y1: "3",
     x2: "14",
@@ -1794,18 +1868,18 @@ var Hash = (0, import_react9.forwardRef)(function(_ref, ref) {
   }));
 });
 Hash.propTypes = {
-  color: import_prop_types7.default.string,
-  size: import_prop_types7.default.oneOfType([import_prop_types7.default.string, import_prop_types7.default.number])
+  color: import_prop_types8.default.string,
+  size: import_prop_types8.default.oneOfType([import_prop_types8.default.string, import_prop_types8.default.number])
 };
 Hash.displayName = "Hash";
 var hash_default = Hash;
 
 // ../../node_modules/react-feather/dist/icons/layers.js
 init_react_import();
-var import_react10 = __toESM(require("react"));
-var import_prop_types8 = __toESM(require_prop_types());
-function _extends8() {
-  _extends8 = Object.assign || function(target) {
+var import_react11 = __toESM(require("react"));
+var import_prop_types9 = __toESM(require_prop_types());
+function _extends9() {
+  _extends9 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1816,12 +1890,12 @@ function _extends8() {
     }
     return target;
   };
-  return _extends8.apply(this, arguments);
+  return _extends9.apply(this, arguments);
 }
-function _objectWithoutProperties8(source, excluded) {
+function _objectWithoutProperties9(source, excluded) {
   if (source == null)
     return {};
-  var target = _objectWithoutPropertiesLoose8(source, excluded);
+  var target = _objectWithoutPropertiesLoose9(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1836,7 +1910,7 @@ function _objectWithoutProperties8(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose8(source, excluded) {
+function _objectWithoutPropertiesLoose9(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -1850,9 +1924,9 @@ function _objectWithoutPropertiesLoose8(source, excluded) {
   }
   return target;
 }
-var Layers = (0, import_react10.forwardRef)(function(_ref, ref) {
-  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties8(_ref, ["color", "size"]);
-  return /* @__PURE__ */ import_react10.default.createElement("svg", _extends8({
+var Layers = (0, import_react11.forwardRef)(function(_ref, ref) {
+  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties9(_ref, ["color", "size"]);
+  return /* @__PURE__ */ import_react11.default.createElement("svg", _extends9({
     ref,
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -1863,27 +1937,27 @@ var Layers = (0, import_react10.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react10.default.createElement("polygon", {
+  }, rest), /* @__PURE__ */ import_react11.default.createElement("polygon", {
     points: "12 2 2 7 12 12 22 7 12 2"
-  }), /* @__PURE__ */ import_react10.default.createElement("polyline", {
+  }), /* @__PURE__ */ import_react11.default.createElement("polyline", {
     points: "2 17 12 22 22 17"
-  }), /* @__PURE__ */ import_react10.default.createElement("polyline", {
+  }), /* @__PURE__ */ import_react11.default.createElement("polyline", {
     points: "2 12 12 17 22 12"
   }));
 });
 Layers.propTypes = {
-  color: import_prop_types8.default.string,
-  size: import_prop_types8.default.oneOfType([import_prop_types8.default.string, import_prop_types8.default.number])
+  color: import_prop_types9.default.string,
+  size: import_prop_types9.default.oneOfType([import_prop_types9.default.string, import_prop_types9.default.number])
 };
 Layers.displayName = "Layers";
 var layers_default = Layers;
 
 // ../../node_modules/react-feather/dist/icons/link.js
 init_react_import();
-var import_react11 = __toESM(require("react"));
-var import_prop_types9 = __toESM(require_prop_types());
-function _extends9() {
-  _extends9 = Object.assign || function(target) {
+var import_react12 = __toESM(require("react"));
+var import_prop_types10 = __toESM(require_prop_types());
+function _extends10() {
+  _extends10 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1894,12 +1968,12 @@ function _extends9() {
     }
     return target;
   };
-  return _extends9.apply(this, arguments);
+  return _extends10.apply(this, arguments);
 }
-function _objectWithoutProperties9(source, excluded) {
+function _objectWithoutProperties10(source, excluded) {
   if (source == null)
     return {};
-  var target = _objectWithoutPropertiesLoose9(source, excluded);
+  var target = _objectWithoutPropertiesLoose10(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1914,7 +1988,7 @@ function _objectWithoutProperties9(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose9(source, excluded) {
+function _objectWithoutPropertiesLoose10(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -1928,9 +2002,9 @@ function _objectWithoutPropertiesLoose9(source, excluded) {
   }
   return target;
 }
-var Link = (0, import_react11.forwardRef)(function(_ref, ref) {
-  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties9(_ref, ["color", "size"]);
-  return /* @__PURE__ */ import_react11.default.createElement("svg", _extends9({
+var Link = (0, import_react12.forwardRef)(function(_ref, ref) {
+  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties10(_ref, ["color", "size"]);
+  return /* @__PURE__ */ import_react12.default.createElement("svg", _extends10({
     ref,
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -1941,25 +2015,25 @@ var Link = (0, import_react11.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react11.default.createElement("path", {
+  }, rest), /* @__PURE__ */ import_react12.default.createElement("path", {
     d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
-  }), /* @__PURE__ */ import_react11.default.createElement("path", {
+  }), /* @__PURE__ */ import_react12.default.createElement("path", {
     d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
   }));
 });
 Link.propTypes = {
-  color: import_prop_types9.default.string,
-  size: import_prop_types9.default.oneOfType([import_prop_types9.default.string, import_prop_types9.default.number])
+  color: import_prop_types10.default.string,
+  size: import_prop_types10.default.oneOfType([import_prop_types10.default.string, import_prop_types10.default.number])
 };
 Link.displayName = "Link";
 var link_default = Link;
 
 // ../../node_modules/react-feather/dist/icons/list.js
 init_react_import();
-var import_react12 = __toESM(require("react"));
-var import_prop_types10 = __toESM(require_prop_types());
-function _extends10() {
-  _extends10 = Object.assign || function(target) {
+var import_react13 = __toESM(require("react"));
+var import_prop_types11 = __toESM(require_prop_types());
+function _extends11() {
+  _extends11 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1970,12 +2044,12 @@ function _extends10() {
     }
     return target;
   };
-  return _extends10.apply(this, arguments);
+  return _extends11.apply(this, arguments);
 }
-function _objectWithoutProperties10(source, excluded) {
+function _objectWithoutProperties11(source, excluded) {
   if (source == null)
     return {};
-  var target = _objectWithoutPropertiesLoose10(source, excluded);
+  var target = _objectWithoutPropertiesLoose11(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1990,7 +2064,7 @@ function _objectWithoutProperties10(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose10(source, excluded) {
+function _objectWithoutPropertiesLoose11(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2004,9 +2078,9 @@ function _objectWithoutPropertiesLoose10(source, excluded) {
   }
   return target;
 }
-var List = (0, import_react12.forwardRef)(function(_ref, ref) {
-  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties10(_ref, ["color", "size"]);
-  return /* @__PURE__ */ import_react12.default.createElement("svg", _extends10({
+var List = (0, import_react13.forwardRef)(function(_ref, ref) {
+  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties11(_ref, ["color", "size"]);
+  return /* @__PURE__ */ import_react13.default.createElement("svg", _extends11({
     ref,
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -2017,32 +2091,32 @@ var List = (0, import_react12.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react12.default.createElement("line", {
+  }, rest), /* @__PURE__ */ import_react13.default.createElement("line", {
     x1: "8",
     y1: "6",
     x2: "21",
     y2: "6"
-  }), /* @__PURE__ */ import_react12.default.createElement("line", {
+  }), /* @__PURE__ */ import_react13.default.createElement("line", {
     x1: "8",
     y1: "12",
     x2: "21",
     y2: "12"
-  }), /* @__PURE__ */ import_react12.default.createElement("line", {
+  }), /* @__PURE__ */ import_react13.default.createElement("line", {
     x1: "8",
     y1: "18",
     x2: "21",
     y2: "18"
-  }), /* @__PURE__ */ import_react12.default.createElement("line", {
+  }), /* @__PURE__ */ import_react13.default.createElement("line", {
     x1: "3",
     y1: "6",
     x2: "3.01",
     y2: "6"
-  }), /* @__PURE__ */ import_react12.default.createElement("line", {
+  }), /* @__PURE__ */ import_react13.default.createElement("line", {
     x1: "3",
     y1: "12",
     x2: "3.01",
     y2: "12"
-  }), /* @__PURE__ */ import_react12.default.createElement("line", {
+  }), /* @__PURE__ */ import_react13.default.createElement("line", {
     x1: "3",
     y1: "18",
     x2: "3.01",
@@ -2050,18 +2124,18 @@ var List = (0, import_react12.forwardRef)(function(_ref, ref) {
   }));
 });
 List.propTypes = {
-  color: import_prop_types10.default.string,
-  size: import_prop_types10.default.oneOfType([import_prop_types10.default.string, import_prop_types10.default.number])
+  color: import_prop_types11.default.string,
+  size: import_prop_types11.default.oneOfType([import_prop_types11.default.string, import_prop_types11.default.number])
 };
 List.displayName = "List";
 var list_default = List;
 
 // ../../node_modules/react-feather/dist/icons/sidebar.js
 init_react_import();
-var import_react13 = __toESM(require("react"));
-var import_prop_types11 = __toESM(require_prop_types());
-function _extends11() {
-  _extends11 = Object.assign || function(target) {
+var import_react14 = __toESM(require("react"));
+var import_prop_types12 = __toESM(require_prop_types());
+function _extends12() {
+  _extends12 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2072,12 +2146,12 @@ function _extends11() {
     }
     return target;
   };
-  return _extends11.apply(this, arguments);
+  return _extends12.apply(this, arguments);
 }
-function _objectWithoutProperties11(source, excluded) {
+function _objectWithoutProperties12(source, excluded) {
   if (source == null)
     return {};
-  var target = _objectWithoutPropertiesLoose11(source, excluded);
+  var target = _objectWithoutPropertiesLoose12(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -2092,7 +2166,7 @@ function _objectWithoutProperties11(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose11(source, excluded) {
+function _objectWithoutPropertiesLoose12(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2106,9 +2180,9 @@ function _objectWithoutPropertiesLoose11(source, excluded) {
   }
   return target;
 }
-var Sidebar = (0, import_react13.forwardRef)(function(_ref, ref) {
-  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties11(_ref, ["color", "size"]);
-  return /* @__PURE__ */ import_react13.default.createElement("svg", _extends11({
+var Sidebar = (0, import_react14.forwardRef)(function(_ref, ref) {
+  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties12(_ref, ["color", "size"]);
+  return /* @__PURE__ */ import_react14.default.createElement("svg", _extends12({
     ref,
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -2119,14 +2193,14 @@ var Sidebar = (0, import_react13.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react13.default.createElement("rect", {
+  }, rest), /* @__PURE__ */ import_react14.default.createElement("rect", {
     x: "3",
     y: "3",
     width: "18",
     height: "18",
     rx: "2",
     ry: "2"
-  }), /* @__PURE__ */ import_react13.default.createElement("line", {
+  }), /* @__PURE__ */ import_react14.default.createElement("line", {
     x1: "9",
     y1: "3",
     x2: "9",
@@ -2134,18 +2208,18 @@ var Sidebar = (0, import_react13.forwardRef)(function(_ref, ref) {
   }));
 });
 Sidebar.propTypes = {
-  color: import_prop_types11.default.string,
-  size: import_prop_types11.default.oneOfType([import_prop_types11.default.string, import_prop_types11.default.number])
+  color: import_prop_types12.default.string,
+  size: import_prop_types12.default.oneOfType([import_prop_types12.default.string, import_prop_types12.default.number])
 };
 Sidebar.displayName = "Sidebar";
 var sidebar_default = Sidebar;
 
 // ../../node_modules/react-feather/dist/icons/trash.js
 init_react_import();
-var import_react14 = __toESM(require("react"));
-var import_prop_types12 = __toESM(require_prop_types());
-function _extends12() {
-  _extends12 = Object.assign || function(target) {
+var import_react15 = __toESM(require("react"));
+var import_prop_types13 = __toESM(require_prop_types());
+function _extends13() {
+  _extends13 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2156,12 +2230,12 @@ function _extends12() {
     }
     return target;
   };
-  return _extends12.apply(this, arguments);
+  return _extends13.apply(this, arguments);
 }
-function _objectWithoutProperties12(source, excluded) {
+function _objectWithoutProperties13(source, excluded) {
   if (source == null)
     return {};
-  var target = _objectWithoutPropertiesLoose12(source, excluded);
+  var target = _objectWithoutPropertiesLoose13(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -2176,7 +2250,7 @@ function _objectWithoutProperties12(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose12(source, excluded) {
+function _objectWithoutPropertiesLoose13(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2190,9 +2264,9 @@ function _objectWithoutPropertiesLoose12(source, excluded) {
   }
   return target;
 }
-var Trash = (0, import_react14.forwardRef)(function(_ref, ref) {
-  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties12(_ref, ["color", "size"]);
-  return /* @__PURE__ */ import_react14.default.createElement("svg", _extends12({
+var Trash = (0, import_react15.forwardRef)(function(_ref, ref) {
+  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties13(_ref, ["color", "size"]);
+  return /* @__PURE__ */ import_react15.default.createElement("svg", _extends13({
     ref,
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -2203,25 +2277,25 @@ var Trash = (0, import_react14.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react14.default.createElement("polyline", {
+  }, rest), /* @__PURE__ */ import_react15.default.createElement("polyline", {
     points: "3 6 5 6 21 6"
-  }), /* @__PURE__ */ import_react14.default.createElement("path", {
+  }), /* @__PURE__ */ import_react15.default.createElement("path", {
     d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
   }));
 });
 Trash.propTypes = {
-  color: import_prop_types12.default.string,
-  size: import_prop_types12.default.oneOfType([import_prop_types12.default.string, import_prop_types12.default.number])
+  color: import_prop_types13.default.string,
+  size: import_prop_types13.default.oneOfType([import_prop_types13.default.string, import_prop_types13.default.number])
 };
 Trash.displayName = "Trash";
 var trash_default = Trash;
 
 // ../../node_modules/react-feather/dist/icons/type.js
 init_react_import();
-var import_react15 = __toESM(require("react"));
-var import_prop_types13 = __toESM(require_prop_types());
-function _extends13() {
-  _extends13 = Object.assign || function(target) {
+var import_react16 = __toESM(require("react"));
+var import_prop_types14 = __toESM(require_prop_types());
+function _extends14() {
+  _extends14 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2232,12 +2306,12 @@ function _extends13() {
     }
     return target;
   };
-  return _extends13.apply(this, arguments);
+  return _extends14.apply(this, arguments);
 }
-function _objectWithoutProperties13(source, excluded) {
+function _objectWithoutProperties14(source, excluded) {
   if (source == null)
     return {};
-  var target = _objectWithoutPropertiesLoose13(source, excluded);
+  var target = _objectWithoutPropertiesLoose14(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -2252,7 +2326,7 @@ function _objectWithoutProperties13(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose13(source, excluded) {
+function _objectWithoutPropertiesLoose14(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2266,9 +2340,9 @@ function _objectWithoutPropertiesLoose13(source, excluded) {
   }
   return target;
 }
-var Type = (0, import_react15.forwardRef)(function(_ref, ref) {
-  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties13(_ref, ["color", "size"]);
-  return /* @__PURE__ */ import_react15.default.createElement("svg", _extends13({
+var Type = (0, import_react16.forwardRef)(function(_ref, ref) {
+  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties14(_ref, ["color", "size"]);
+  return /* @__PURE__ */ import_react16.default.createElement("svg", _extends14({
     ref,
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -2279,14 +2353,14 @@ var Type = (0, import_react15.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react15.default.createElement("polyline", {
+  }, rest), /* @__PURE__ */ import_react16.default.createElement("polyline", {
     points: "4 7 4 4 20 4 20 7"
-  }), /* @__PURE__ */ import_react15.default.createElement("line", {
+  }), /* @__PURE__ */ import_react16.default.createElement("line", {
     x1: "9",
     y1: "20",
     x2: "15",
     y2: "20"
-  }), /* @__PURE__ */ import_react15.default.createElement("line", {
+  }), /* @__PURE__ */ import_react16.default.createElement("line", {
     x1: "12",
     y1: "4",
     x2: "12",
@@ -2294,18 +2368,18 @@ var Type = (0, import_react15.forwardRef)(function(_ref, ref) {
   }));
 });
 Type.propTypes = {
-  color: import_prop_types13.default.string,
-  size: import_prop_types13.default.oneOfType([import_prop_types13.default.string, import_prop_types13.default.number])
+  color: import_prop_types14.default.string,
+  size: import_prop_types14.default.oneOfType([import_prop_types14.default.string, import_prop_types14.default.number])
 };
 Type.displayName = "Type";
 var type_default = Type;
 
 // lib/use-modifier-held.ts
 init_react_import();
-var import_react16 = require("react");
+var import_react17 = require("react");
 var useModifierHeld = (modifier) => {
-  const [modifierHeld, setModifierHeld] = (0, import_react16.useState)(false);
-  (0, import_react16.useEffect)(() => {
+  const [modifierHeld, setModifierHeld] = (0, import_react17.useState)(false);
+  (0, import_react17.useEffect)(() => {
     function downHandler({ key }) {
       if (key === modifier) {
         setModifierHeld(true);
@@ -2349,7 +2423,7 @@ var DraggableComponent = ({
   style
 }) => {
   const isModifierHeld = useModifierHeld("Alt");
-  (0, import_react17.useEffect)(onMount, []);
+  (0, import_react18.useEffect)(onMount, []);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_react_beautiful_dnd.Draggable,
     {
@@ -2377,12 +2451,12 @@ var DraggableComponent = ({
           onClick,
           children: [
             debug,
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName2("contents"), children }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName2("overlay"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: getClassName2("actions"), children: [
               label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName2("actionsLabel"), children: label }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: getClassName2("action"), onClick: onDuplicate, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(copy_default, { size: 16 }) }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: getClassName2("action"), onClick: onDelete, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(trash_default, { size: 16 }) })
-            ] }) })
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName2("contents"), children })
           ]
         })
       )
@@ -2393,13 +2467,13 @@ var DraggableComponent = ({
 
 // components/DroppableStrictMode/index.tsx
 init_react_import();
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_react_beautiful_dnd2 = require("react-beautiful-dnd");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var DroppableStrictMode = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  const [enabled, setEnabled] = (0, import_react18.useState)(false);
-  (0, import_react18.useEffect)(() => {
+  const [enabled, setEnabled] = (0, import_react19.useState)(false);
+  (0, import_react19.useEffect)(() => {
     const animation = requestAnimationFrame(() => setEnabled(true));
     return () => {
       cancelAnimationFrame(animation);
@@ -2474,11 +2548,11 @@ var replace = (list, index, newItem) => {
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css#css-module
 init_react_import();
-var styles_module_default2 = { "DropZone": "_DropZone_1980k_1", "DropZone-content": "_DropZone-content_1980k_11", "DropZone--userIsDragging": "_DropZone--userIsDragging_1980k_16", "DropZone--draggingOverArea": "_DropZone--draggingOverArea_1980k_20", "DropZone--draggingNewComponent": "_DropZone--draggingNewComponent_1980k_21", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_1980k_27", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_1980k_28", "DropZone--isDisabled": "_DropZone--isDisabled_1980k_29", "DropZone--isRootZone": "_DropZone--isRootZone_1980k_30", "DropZone--hasChildren": "_DropZone--hasChildren_1980k_36", "DropZone--isDestination": "_DropZone--isDestination_1980k_41", "DropZone-item": "_DropZone-item_1980k_49", "DropZone-hitbox": "_DropZone-hitbox_1980k_57" };
+var styles_module_default2 = { "DropZone": "_DropZone_ou0z5_1", "DropZone-content": "_DropZone-content_ou0z5_11", "DropZone--userIsDragging": "_DropZone--userIsDragging_ou0z5_16", "DropZone--draggingOverArea": "_DropZone--draggingOverArea_ou0z5_20", "DropZone--draggingNewComponent": "_DropZone--draggingNewComponent_ou0z5_21", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_ou0z5_27", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_ou0z5_28", "DropZone--isDisabled": "_DropZone--isDisabled_ou0z5_29", "DropZone--isRootZone": "_DropZone--isRootZone_ou0z5_30", "DropZone--hasChildren": "_DropZone--hasChildren_ou0z5_36", "DropZone--isDestination": "_DropZone--isDestination_ou0z5_41", "DropZone-item": "_DropZone-item_ou0z5_49", "DropZone-hitbox": "_DropZone-hitbox_ou0z5_54" };
 
 // components/DropZone/context.tsx
 init_react_import();
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_use_debounce = require("use-debounce");
 
 // lib/get-zone-id.ts
@@ -2495,29 +2569,29 @@ var getZoneId = (zoneCompound) => {
 
 // components/DropZone/context.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var dropZoneContext = (0, import_react19.createContext)(null);
+var dropZoneContext = (0, import_react20.createContext)(null);
 var DropZoneProvider = ({
   children,
   value
 }) => {
-  const [hoveringArea, setHoveringArea] = (0, import_react19.useState)(null);
-  const [hoveringZone, setHoveringZone] = (0, import_react19.useState)(
+  const [hoveringArea, setHoveringArea] = (0, import_react20.useState)(null);
+  const [hoveringZone, setHoveringZone] = (0, import_react20.useState)(
     rootDroppableId
   );
-  const [hoveringComponent, setHoveringComponent] = (0, import_react19.useState)();
+  const [hoveringComponent, setHoveringComponent] = (0, import_react20.useState)();
   const [hoveringAreaDb] = (0, import_use_debounce.useDebounce)(hoveringArea, 75, { leading: false });
-  const [areasWithZones, setAreasWithZones] = (0, import_react19.useState)(
+  const [areasWithZones, setAreasWithZones] = (0, import_react20.useState)(
     {}
   );
-  const [activeZones, setActiveZones] = (0, import_react19.useState)({});
+  const [activeZones, setActiveZones] = (0, import_react20.useState)({});
   const { dispatch = null } = value ? value : {};
-  const registerZoneArea = (0, import_react19.useCallback)(
+  const registerZoneArea = (0, import_react20.useCallback)(
     (area) => {
       setAreasWithZones((latest) => __spreadProps(__spreadValues({}, latest), { [area]: true }));
     },
     [setAreasWithZones]
   );
-  const registerZone = (0, import_react19.useCallback)(
+  const registerZone = (0, import_react20.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -2530,7 +2604,7 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const unregisterZone = (0, import_react19.useCallback)(
+  const unregisterZone = (0, import_react20.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -2545,8 +2619,8 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const [pathData, setPathData] = (0, import_react19.useState)();
-  const registerPath = (0, import_react19.useCallback)(
+  const [pathData, setPathData] = (0, import_react20.useState)();
+  const registerPath = (0, import_react20.useCallback)(
     (selector) => {
       if (!(value == null ? void 0 : value.data)) {
         return;
@@ -2599,7 +2673,7 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var getClassName3 = get_class_name_factory_default("DropZone", styles_module_default2);
 function DropZoneEdit({ zone, style }) {
   var _a;
-  const ctx = (0, import_react20.useContext)(dropZoneContext);
+  const ctx = (0, import_react21.useContext)(dropZoneContext);
   const {
     // These all need setting via context
     data,
@@ -2616,12 +2690,12 @@ function DropZoneEdit({ zone, style }) {
   } = ctx || {};
   let content = data.content || [];
   let zoneCompound = rootDroppableId;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (areaId && registerZoneArea) {
       registerZoneArea(areaId);
     }
   }, [areaId]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (ctx == null ? void 0 : ctx.registerZone) {
       ctx == null ? void 0 : ctx.registerZone(zoneCompound);
     }
@@ -2708,97 +2782,108 @@ function DropZoneEdit({ zone, style }) {
                       editMode: true
                     });
                     const isSelected = (selectedItem == null ? void 0 : selectedItem.props.id) === componentId || false;
+                    const isDragging = ((draggedItem == null ? void 0 : draggedItem.draggableId) || "draggable-").split(
+                      "draggable-"
+                    )[1] === componentId;
                     const containsZone = areasWithZones ? areasWithZones[componentId] : false;
                     const Render2 = config.components[item.type] ? config.components[item.type].render : () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
                       "No configuration for ",
                       item.type
                     ] });
-                    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: getClassName3("item"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                        DropZoneProvider,
-                        {
-                          value: __spreadProps(__spreadValues({}, ctx), {
-                            areaId: componentId
-                          }),
-                          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                            DraggableComponent,
+                    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                      "div",
+                      {
+                        className: getClassName3("item"),
+                        style: { zIndex: isDragging ? 1 : void 0 },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                            DropZoneProvider,
                             {
-                              label: item.type.toString(),
-                              id: `draggable-${componentId}`,
-                              index: i,
-                              isSelected,
-                              isLocked: userIsDragging,
-                              forceHover: hoveringComponent === componentId && !userIsDragging,
-                              indicativeHover: userIsDragging && containsZone && hoveringArea === componentId,
-                              onMount: () => {
-                                ctx.registerPath({
-                                  index: i,
-                                  zone: zoneCompound
-                                });
-                              },
-                              onClick: (e) => {
-                                setItemSelector({
+                              value: __spreadProps(__spreadValues({}, ctx), {
+                                areaId: componentId
+                              }),
+                              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                                DraggableComponent,
+                                {
+                                  label: item.type.toString(),
+                                  id: `draggable-${componentId}`,
                                   index: i,
-                                  zone: zoneCompound
-                                });
-                                e.stopPropagation();
-                              },
+                                  isSelected,
+                                  isLocked: userIsDragging,
+                                  forceHover: hoveringComponent === componentId && !userIsDragging,
+                                  indicativeHover: userIsDragging && containsZone && hoveringArea === componentId,
+                                  onMount: () => {
+                                    ctx.registerPath({
+                                      index: i,
+                                      zone: zoneCompound
+                                    });
+                                  },
+                                  onClick: (e) => {
+                                    setItemSelector({
+                                      index: i,
+                                      zone: zoneCompound
+                                    });
+                                    e.stopPropagation();
+                                  },
+                                  onMouseOver: (e) => {
+                                    e.stopPropagation();
+                                    if (containsZone) {
+                                      setHoveringArea(componentId);
+                                    } else {
+                                      setHoveringArea(zoneArea);
+                                    }
+                                    setHoveringComponent(componentId);
+                                    setHoveringZone(zoneCompound);
+                                  },
+                                  onMouseOut: () => {
+                                    setHoveringArea(null);
+                                    setHoveringZone(null);
+                                    setHoveringComponent(null);
+                                  },
+                                  onDelete: (e) => {
+                                    dispatch({
+                                      type: "remove",
+                                      index: i,
+                                      zone: zoneCompound
+                                    });
+                                    setItemSelector(null);
+                                    e.stopPropagation();
+                                  },
+                                  onDuplicate: (e) => {
+                                    dispatch({
+                                      type: "duplicate",
+                                      sourceIndex: i,
+                                      sourceZone: zoneCompound
+                                    });
+                                    setItemSelector({
+                                      zone: zoneCompound,
+                                      index: i + 1
+                                    });
+                                    e.stopPropagation();
+                                  },
+                                  style: {
+                                    pointerEvents: userIsDragging && draggingNewComponent ? "all" : void 0
+                                  },
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { zoom: 0.75 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Render2, __spreadValues({}, defaultedProps)) })
+                                }
+                              )
+                            }
+                          ),
+                          userIsDragging && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                            "div",
+                            {
+                              className: getClassName3("hitbox"),
                               onMouseOver: (e) => {
                                 e.stopPropagation();
-                                if (containsZone) {
-                                  setHoveringArea(componentId);
-                                } else {
-                                  setHoveringArea(zoneArea);
-                                }
-                                setHoveringComponent(componentId);
+                                setHoveringArea(zoneArea);
                                 setHoveringZone(zoneCompound);
-                              },
-                              onMouseOut: () => {
-                                setHoveringArea(null);
-                                setHoveringZone(null);
-                                setHoveringComponent(null);
-                              },
-                              onDelete: (e) => {
-                                dispatch({
-                                  type: "remove",
-                                  index: i,
-                                  zone: zoneCompound
-                                });
-                                setItemSelector(null);
-                                e.stopPropagation();
-                              },
-                              onDuplicate: (e) => {
-                                dispatch({
-                                  type: "duplicate",
-                                  sourceIndex: i,
-                                  sourceZone: zoneCompound
-                                });
-                                setItemSelector({
-                                  zone: zoneCompound,
-                                  index: i + 1
-                                });
-                                e.stopPropagation();
-                              },
-                              style: {
-                                pointerEvents: userIsDragging && draggingNewComponent ? "all" : void 0
-                              },
-                              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { zoom: 0.75 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Render2, __spreadValues({}, defaultedProps)) })
+                              }
                             }
                           )
-                        }
-                      ),
-                      userIsDragging && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                        "div",
-                        {
-                          className: getClassName3("hitbox"),
-                          onMouseOver: (e) => {
-                            e.stopPropagation();
-                            setHoveringArea(zoneArea);
-                            setHoveringZone(zoneCompound);
-                          }
-                        }
-                      )
-                    ] }, item.props.id);
+                        ]
+                      },
+                      item.props.id
+                    );
                   }),
                   provided == null ? void 0 : provided.placeholder,
                   (snapshot == null ? void 0 : snapshot.isDraggingOver) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -2822,7 +2907,7 @@ function DropZoneEdit({ zone, style }) {
   );
 }
 function DropZoneRender({ zone }) {
-  const ctx = (0, import_react20.useContext)(dropZoneContext);
+  const ctx = (0, import_react21.useContext)(dropZoneContext);
   const { data, areaId = "root", config } = ctx || {};
   let zoneCompound = rootDroppableId;
   let content = (data == null ? void 0 : data.content) || [];
@@ -2849,7 +2934,7 @@ function DropZoneRender({ zone }) {
   }) });
 }
 function DropZone(props) {
-  const ctx = (0, import_react20.useContext)(dropZoneContext);
+  const ctx = (0, import_react21.useContext)(dropZoneContext);
   if ((ctx == null ? void 0 : ctx.mode) === "edit") {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DropZoneEdit, __spreadValues({}, props));
   }
@@ -2861,7 +2946,7 @@ init_react_import();
 
 // components/IconButton/IconButton.tsx
 init_react_import();
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css#css-module
 init_react_import();
@@ -2883,7 +2968,7 @@ var IconButton = ({
   fullWidth,
   title
 }) => {
-  const [loading, setLoading] = (0, import_react21.useState)(false);
+  const [loading, setLoading] = (0, import_react22.useState)(false);
   const ElementType = href ? "a" : "button";
   const el = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     ElementType,
@@ -2923,7 +3008,7 @@ var IconButton = ({
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react25 = require("react");
+var import_react28 = require("react");
 var import_react_beautiful_dnd4 = require("react-beautiful-dnd");
 
 // components/InputOrGroup/index.tsx
@@ -2931,7 +3016,7 @@ init_react_import();
 
 // components/ExternalInput/index.tsx
 init_react_import();
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
 init_react_import();
@@ -2945,10 +3030,10 @@ var ExternalInput = ({
   onChange,
   value = null
 }) => {
-  const [data, setData] = (0, import_react22.useState)([]);
-  const [isOpen, setOpen] = (0, import_react22.useState)(false);
-  const [selectedData, setSelectedData] = (0, import_react22.useState)(value);
-  (0, import_react22.useEffect)(() => {
+  const [data, setData] = (0, import_react23.useState)([]);
+  const [isOpen, setOpen] = (0, import_react23.useState)(false);
+  const [selectedData, setSelectedData] = (0, import_react23.useState)(value);
+  (0, import_react23.useEffect)(() => {
     (() => __async(void 0, null, function* () {
       if (field.adaptor) {
         const listData = yield field.adaptor.fetchList(field.adaptorParams);
@@ -3043,7 +3128,7 @@ var FieldLabel = ({
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("label"), children: [
-      icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("labelIcon") }),
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("labelIcon"), children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, {}),
       label
     ] }),
     children
@@ -3331,10 +3416,10 @@ var ComponentList = ({ config }) => {
 
 // lib/use-placeholder-style.ts
 init_react_import();
-var import_react23 = require("react");
+var import_react24 = require("react");
 var usePlaceholderStyle = () => {
   const queryAttr = "data-rbd-drag-handle-draggable-id";
-  const [placeholderStyle, setPlaceholderStyle] = (0, import_react23.useState)();
+  const [placeholderStyle, setPlaceholderStyle] = (0, import_react24.useState)();
   const onDragStartOrUpdate = (draggedItem) => {
     var _a;
     const draggableId = draggedItem.draggableId;
@@ -3389,7 +3474,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css#css-module
 init_react_import();
-var styles_module_default7 = { "Heading": "_Heading_1y35v_1", "Heading--xxxxl": "_Heading--xxxxl_1y35v_12", "Heading--xxxl": "_Heading--xxxl_1y35v_18", "Heading--xxl": "_Heading--xxl_1y35v_22", "Heading--xl": "_Heading--xl_1y35v_26", "Heading--l": "_Heading--l_1y35v_30", "Heading--m": "_Heading--m_1y35v_34", "Heading--s": "_Heading--s_1y35v_38", "Heading--xs": "_Heading--xs_1y35v_42" };
+var styles_module_default7 = { "Heading": "_Heading_1bvy5_1", "Heading--xxxxl": "_Heading--xxxxl_1bvy5_13", "Heading--xxxl": "_Heading--xxxl_1bvy5_19", "Heading--xxl": "_Heading--xxl_1bvy5_23", "Heading--xl": "_Heading--xl_1bvy5_27", "Heading--l": "_Heading--l_1bvy5_31", "Heading--m": "_Heading--m_1bvy5_35", "Heading--s": "_Heading--s_1bvy5_39", "Heading--xs": "_Heading--xs_1bvy5_43" };
 
 // components/Heading/index.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
@@ -3527,12 +3612,125 @@ var duplicateRelatedZones = (item, data, newId) => {
   });
 };
 
+// lib/use-puck-history.ts
+init_react_import();
+var import_react26 = require("react");
+
+// lib/use-action-history.ts
+init_react_import();
+var import_react25 = require("react");
+var EMPTY_HISTORY_INDEX = -1;
+function useActionHistory() {
+  const [histories, setHistories] = (0, import_react25.useState)([]);
+  const [currentHistoryIndex, setCurrentHistoryIndex] = (0, import_react25.useState)(EMPTY_HISTORY_INDEX);
+  const currentHistory = histories[currentHistoryIndex];
+  const canRewind = currentHistoryIndex > EMPTY_HISTORY_INDEX;
+  const canForward = currentHistoryIndex < histories.length - 1;
+  const record = (params) => {
+    const history = __spreadValues({
+      id: Math.random().toString()
+    }, params);
+    setHistories((prev) => [
+      ...prev.slice(0, currentHistoryIndex + 1),
+      history
+    ]);
+    setCurrentHistoryIndex((prev) => prev + 1);
+  };
+  const rewind = () => {
+    if (canRewind) {
+      currentHistory.rewind();
+      setCurrentHistoryIndex((prev) => prev - 1);
+    }
+  };
+  const forward = () => {
+    const forwardHistory = histories[currentHistoryIndex + 1];
+    if (canForward && forwardHistory) {
+      forwardHistory.forward();
+      setCurrentHistoryIndex((prev) => prev + 1);
+    }
+  };
+  return {
+    currentHistory,
+    canRewind,
+    canForward,
+    record,
+    rewind,
+    forward
+  };
+}
+
+// lib/use-puck-history.ts
+var import_react_hotkeys_hook = require("react-hotkeys-hook");
+var import_event_emitter = __toESM(require("event-emitter"));
+var import_use_debounce2 = require("use-debounce");
+var import_deep_diff = require("deep-diff");
+var DEBOUNCE_TIME = 250;
+var RECORD_DIFF = "RECORD_DIFF";
+var historyEmitter = (0, import_event_emitter.default)();
+var recordDiff = (newData) => historyEmitter.emit(RECORD_DIFF, newData);
+function usePuckHistory({
+  data,
+  dispatch
+}) {
+  const { canForward, canRewind, rewind, forward, record } = useActionHistory();
+  (0, import_react_hotkeys_hook.useHotkeys)("meta+z", rewind, { preventDefault: true });
+  (0, import_react_hotkeys_hook.useHotkeys)("meta+shift+z", forward, { preventDefault: true });
+  (0, import_react_hotkeys_hook.useHotkeys)("meta+y", forward, { preventDefault: true });
+  const [snapshot] = (0, import_use_debounce2.useDebounce)(data, DEBOUNCE_TIME);
+  const handleRecordDiff = (0, import_use_debounce2.useDebouncedCallback)((newData) => {
+    const _diff = (0, import_deep_diff.diff)(snapshot, newData);
+    if (!_diff) {
+      return;
+    }
+    record({
+      forward: () => {
+        const target = structuredClone(data);
+        _diff.reduce((target2, change) => {
+          (0, import_deep_diff.applyChange)(target2, true, change);
+          return target2;
+        }, target);
+        dispatch({ type: "set", data: target });
+      },
+      rewind: () => {
+        const target = structuredClone(data);
+        _diff.reduce((target2, change) => {
+          (0, import_deep_diff.revertChange)(target2, true, change);
+          return target2;
+        }, target);
+        dispatch({ type: "set", data: target });
+      }
+    });
+  }, DEBOUNCE_TIME);
+  (0, import_react26.useEffect)(() => {
+    historyEmitter.on(RECORD_DIFF, handleRecordDiff);
+    return () => {
+      historyEmitter.off(RECORD_DIFF, handleRecordDiff);
+    };
+  }, [handleRecordDiff]);
+  return {
+    canForward,
+    canRewind,
+    rewind,
+    forward,
+    record
+  };
+}
+
 // lib/reducer.ts
 var zoneCache = {};
 var addToZoneCache = (key, data) => {
   zoneCache[key] = data;
 };
-var createReducer = ({ config }) => (data, action) => {
+var storeInterceptor = (reducer) => {
+  return (data, action) => {
+    const newData = reducer(data, action);
+    if (!["registerZone", "unregisterZone", "set"].includes(action.type)) {
+      recordDiff(newData);
+    }
+    return newData;
+  };
+};
+var createReducer = ({ config }) => storeInterceptor((data, action) => {
   if (action.type === "insert") {
     const emptyComponentData = {
       type: action.componentType,
@@ -3716,7 +3914,7 @@ var createReducer = ({ config }) => (data, action) => {
     return __spreadValues(__spreadValues({}, data), action.data);
   }
   return data;
-};
+});
 
 // components/LayerTree/index.tsx
 init_react_import();
@@ -3737,7 +3935,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-var import_react24 = require("react");
+var import_react27 = require("react");
 
 // lib/find-zones-for-area.ts
 init_react_import();
@@ -3778,7 +3976,7 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = (0, import_react24.useContext)(dropZoneContext);
+  const ctx = (0, import_react27.useContext)(dropZoneContext);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassName10("zoneTitle"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassName10("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(layers_default, { size: "16" }) }),
@@ -3927,14 +4125,18 @@ function Puck({
   headerPath
 }) {
   var _a, _b;
-  const [reducer] = (0, import_react25.useState)(() => createReducer({ config }));
-  const [data, dispatch] = (0, import_react25.useReducer)(
+  const [reducer] = (0, import_react28.useState)(() => createReducer({ config }));
+  const [data, dispatch] = (0, import_react28.useReducer)(
     reducer,
     flushZones(initialData)
   );
-  const [itemSelector, setItemSelector] = (0, import_react25.useState)(null);
+  const { canForward, canRewind, rewind, forward } = usePuckHistory({
+    data,
+    dispatch
+  });
+  const [itemSelector, setItemSelector] = (0, import_react28.useState)(null);
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  const Page = (0, import_react25.useCallback)(
+  const Page = (0, import_react28.useCallback)(
     (pageProps) => {
       var _a2, _b2;
       return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -3949,7 +4151,7 @@ function Puck({
     },
     [config.root]
   );
-  const PageFieldWrapper = (0, import_react25.useCallback)(
+  const PageFieldWrapper = (0, import_react28.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       PluginRenderer,
       {
@@ -3961,7 +4163,7 @@ function Puck({
     ),
     []
   );
-  const ComponentFieldWrapper = (0, import_react25.useCallback)(
+  const ComponentFieldWrapper = (0, import_react28.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       PluginRenderer,
       {
@@ -3976,13 +4178,13 @@ function Puck({
   const FieldWrapper = itemSelector ? ComponentFieldWrapper : PageFieldWrapper;
   const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
   let fields = selectedItem ? ((_b = config.components[selectedItem.type]) == null ? void 0 : _b.fields) || {} : rootFields;
-  (0, import_react25.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (onChange)
       onChange(data);
   }, [data]);
   const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-  const [leftSidebarVisible, setLeftSidebarVisible] = (0, import_react25.useState)(true);
-  const [draggedItem, setDraggedItem] = (0, import_react25.useState)();
+  const [leftSidebarVisible, setLeftSidebarVisible] = (0, import_react28.useState)(true);
+  const [draggedItem, setDraggedItem] = (0, import_react28.useState)();
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "puck", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     import_react_beautiful_dnd4.DragDropContext,
     {
@@ -4144,6 +4346,38 @@ function Puck({
                                   justifyContent: "flex-end"
                                 },
                                 children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex" }, children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                      IconButton,
+                                      {
+                                        title: "undo",
+                                        disabled: !canRewind,
+                                        onClick: rewind,
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                          chevron_left_default,
+                                          {
+                                            size: 21,
+                                            stroke: canRewind ? "var(--puck-color-black)" : "var(--puck-color-grey-7)"
+                                          }
+                                        )
+                                      }
+                                    ),
+                                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                      IconButton,
+                                      {
+                                        title: "redo",
+                                        disabled: !canForward,
+                                        onClick: forward,
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                          chevron_right_default,
+                                          {
+                                            size: 21,
+                                            stroke: canForward ? "var(--puck-color-black)" : "var(--puck-color-grey-7)"
+                                          }
+                                        )
+                                      }
+                                    )
+                                  ] }),
                                   renderHeaderActions && renderHeaderActions({ data, dispatch }),
                                   /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                                     Button,
@@ -4207,29 +4441,50 @@ function Puck({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                     "div",
                     {
                       style: {
-                        padding: 32,
                         overflowY: "auto",
                         gridArea: "editor",
-                        position: "relative"
+                        position: "relative",
+                        display: "flex",
+                        flexDirection: "column"
                       },
                       onClick: () => setItemSelector(null),
                       id: "puck-frame",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                        "div",
-                        {
-                          className: "puck-root",
-                          style: {
-                            border: "1px solid var(--puck-color-grey-8)",
-                            boxShadow: "0px 0px 0px 3rem var(--puck-color-grey-10)",
-                            zoom: 0.75
-                          },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Page, __spreadProps(__spreadValues({ data }, data.root), { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropZone, { zone: rootDroppableId }) }))
-                        }
-                      )
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          "div",
+                          {
+                            className: "puck-root",
+                            style: {
+                              boxShadow: "0px 0px 0px 32px var(--puck-color-grey-10)",
+                              margin: 32,
+                              zoom: 0.75
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                              "div",
+                              {
+                                style: {
+                                  border: "1px solid var(--puck-color-grey-8)"
+                                },
+                                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Page, __spreadProps(__spreadValues({ data }, data.root), { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropZone, { zone: rootDroppableId }) }))
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          "div",
+                          {
+                            style: {
+                              background: "var(--puck-color-grey-10)",
+                              height: "100%",
+                              flexGrow: 1
+                            }
+                          }
+                        )
+                      ]
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(