@measured/puck 0.9.1-canary.f4e8d4a → 0.10.0-canary.18b3473

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 Fragment9 = REACT_FRAGMENT_TYPE;
+        var Fragment11 = 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 = Fragment9;
+        exports.Fragment = Fragment11;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal;
@@ -760,7 +760,7 @@ var require_factoryWithTypeCheckers = __commonJS({
         function validate(props, propName, componentName, location, propFullName) {
           if (!(props[propName] instanceof expectedClass)) {
             var expectedClassName = expectedClass.name || ANONYMOUS;
-            var actualClassName = getClassName11(props[propName]);
+            var actualClassName = getClassName18(props[propName]);
             return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type " + ("`" + actualClassName + "` supplied to `" + componentName + "`, expected ") + ("instance of `" + expectedClassName + "`."));
           }
           return null;
@@ -1012,7 +1012,7 @@ var require_factoryWithTypeCheckers = __commonJS({
             return type;
         }
       }
-      function getClassName11(propValue) {
+      function getClassName18(propValue) {
         if (!propValue.constructor || !propValue.constructor.name) {
           return ANONYMOUS;
         }
@@ -1214,11 +1214,11 @@ var Button = ({
 
 // components/DropZone/index.tsx
 init_react_import();
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // components/DraggableComponent/index.tsx
 init_react_import();
-var import_react18 = require("react");
+var import_react19 = 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
@@ -2130,7 +2130,7 @@ List.propTypes = {
 List.displayName = "List";
 var list_default = List;
 
-// ../../node_modules/react-feather/dist/icons/sidebar.js
+// ../../node_modules/react-feather/dist/icons/plus.js
 init_react_import();
 var import_react14 = __toESM(require("react"));
 var import_prop_types12 = __toESM(require_prop_types());
@@ -2180,7 +2180,7 @@ function _objectWithoutPropertiesLoose12(source, excluded) {
   }
   return target;
 }
-var Sidebar = (0, import_react14.forwardRef)(function(_ref, ref) {
+var Plus = (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,
@@ -2193,28 +2193,26 @@ var Sidebar = (0, import_react14.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react14.default.createElement("rect", {
-    x: "3",
-    y: "3",
-    width: "18",
-    height: "18",
-    rx: "2",
-    ry: "2"
+  }, rest), /* @__PURE__ */ import_react14.default.createElement("line", {
+    x1: "12",
+    y1: "5",
+    x2: "12",
+    y2: "19"
   }), /* @__PURE__ */ import_react14.default.createElement("line", {
-    x1: "9",
-    y1: "3",
-    x2: "9",
-    y2: "21"
+    x1: "5",
+    y1: "12",
+    x2: "19",
+    y2: "12"
   }));
 });
-Sidebar.propTypes = {
+Plus.propTypes = {
   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;
+Plus.displayName = "Plus";
+var plus_default = Plus;
 
-// ../../node_modules/react-feather/dist/icons/trash.js
+// ../../node_modules/react-feather/dist/icons/sidebar.js
 init_react_import();
 var import_react15 = __toESM(require("react"));
 var import_prop_types13 = __toESM(require_prop_types());
@@ -2264,7 +2262,7 @@ function _objectWithoutPropertiesLoose13(source, excluded) {
   }
   return target;
 }
-var Trash = (0, import_react15.forwardRef)(function(_ref, ref) {
+var Sidebar = (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,
@@ -2277,20 +2275,28 @@ var Trash = (0, import_react15.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react15.default.createElement("polyline", {
-    points: "3 6 5 6 21 6"
-  }), /* @__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"
+  }, rest), /* @__PURE__ */ import_react15.default.createElement("rect", {
+    x: "3",
+    y: "3",
+    width: "18",
+    height: "18",
+    rx: "2",
+    ry: "2"
+  }), /* @__PURE__ */ import_react15.default.createElement("line", {
+    x1: "9",
+    y1: "3",
+    x2: "9",
+    y2: "21"
   }));
 });
-Trash.propTypes = {
+Sidebar.propTypes = {
   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;
+Sidebar.displayName = "Sidebar";
+var sidebar_default = Sidebar;
 
-// ../../node_modules/react-feather/dist/icons/type.js
+// ../../node_modules/react-feather/dist/icons/trash.js
 init_react_import();
 var import_react16 = __toESM(require("react"));
 var import_prop_types14 = __toESM(require_prop_types());
@@ -2340,7 +2346,7 @@ function _objectWithoutPropertiesLoose14(source, excluded) {
   }
   return target;
 }
-var Type = (0, import_react16.forwardRef)(function(_ref, ref) {
+var Trash = (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,
@@ -2354,13 +2360,89 @@ var Type = (0, import_react16.forwardRef)(function(_ref, ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }, rest), /* @__PURE__ */ import_react16.default.createElement("polyline", {
+    points: "3 6 5 6 21 6"
+  }), /* @__PURE__ */ import_react16.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_types14.default.string,
+  size: import_prop_types14.default.oneOfType([import_prop_types14.default.string, import_prop_types14.default.number])
+};
+Trash.displayName = "Trash";
+var trash_default = Trash;
+
+// ../../node_modules/react-feather/dist/icons/type.js
+init_react_import();
+var import_react17 = __toESM(require("react"));
+var import_prop_types15 = __toESM(require_prop_types());
+function _extends15() {
+  _extends15 = 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 _extends15.apply(this, arguments);
+}
+function _objectWithoutProperties15(source, excluded) {
+  if (source == null)
+    return {};
+  var target = _objectWithoutPropertiesLoose15(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 _objectWithoutPropertiesLoose15(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 Type = (0, import_react17.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 = _objectWithoutProperties15(_ref, ["color", "size"]);
+  return /* @__PURE__ */ import_react17.default.createElement("svg", _extends15({
+    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_react17.default.createElement("polyline", {
     points: "4 7 4 4 20 4 20 7"
-  }), /* @__PURE__ */ import_react16.default.createElement("line", {
+  }), /* @__PURE__ */ import_react17.default.createElement("line", {
     x1: "9",
     y1: "20",
     x2: "15",
     y2: "20"
-  }), /* @__PURE__ */ import_react16.default.createElement("line", {
+  }), /* @__PURE__ */ import_react17.default.createElement("line", {
     x1: "12",
     y1: "4",
     x2: "12",
@@ -2368,18 +2450,18 @@ var Type = (0, import_react16.forwardRef)(function(_ref, ref) {
   }));
 });
 Type.propTypes = {
-  color: import_prop_types14.default.string,
-  size: import_prop_types14.default.oneOfType([import_prop_types14.default.string, import_prop_types14.default.number])
+  color: import_prop_types15.default.string,
+  size: import_prop_types15.default.oneOfType([import_prop_types15.default.string, import_prop_types15.default.number])
 };
 Type.displayName = "Type";
 var type_default = Type;
 
 // lib/use-modifier-held.ts
 init_react_import();
-var import_react17 = require("react");
+var import_react18 = require("react");
 var useModifierHeld = (modifier) => {
-  const [modifierHeld, setModifierHeld] = (0, import_react17.useState)(false);
-  (0, import_react17.useEffect)(() => {
+  const [modifierHeld, setModifierHeld] = (0, import_react18.useState)(false);
+  (0, import_react18.useEffect)(() => {
     function downHandler({ key }) {
       if (key === modifier) {
         setModifierHeld(true);
@@ -2423,7 +2505,7 @@ var DraggableComponent = ({
   style
 }) => {
   const isModifierHeld = useModifierHeld("Alt");
-  (0, import_react18.useEffect)(onMount, []);
+  (0, import_react19.useEffect)(onMount, []);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_react_beautiful_dnd.Draggable,
     {
@@ -2467,13 +2549,13 @@ var DraggableComponent = ({
 
 // components/DroppableStrictMode/index.tsx
 init_react_import();
-var import_react19 = require("react");
+var import_react20 = 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_react19.useState)(false);
-  (0, import_react19.useEffect)(() => {
+  const [enabled, setEnabled] = (0, import_react20.useState)(false);
+  (0, import_react20.useEffect)(() => {
     const animation = requestAnimationFrame(() => setEnabled(true));
     return () => {
       cancelAnimationFrame(animation);
@@ -2552,7 +2634,7 @@ var styles_module_default2 = { "DropZone": "_DropZone_ou0z5_1", "DropZone-conten
 
 // components/DropZone/context.tsx
 init_react_import();
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_use_debounce = require("use-debounce");
 
 // lib/get-zone-id.ts
@@ -2564,34 +2646,34 @@ var getZoneId = (zoneCompound) => {
   if (zoneCompound && zoneCompound.indexOf(":") > -1) {
     return zoneCompound.split(":");
   }
-  return ["root", zoneCompound];
+  return [rootDroppableId, zoneCompound];
 };
 
 // components/DropZone/context.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var dropZoneContext = (0, import_react20.createContext)(null);
+var dropZoneContext = (0, import_react21.createContext)(null);
 var DropZoneProvider = ({
   children,
   value
 }) => {
-  const [hoveringArea, setHoveringArea] = (0, import_react20.useState)(null);
-  const [hoveringZone, setHoveringZone] = (0, import_react20.useState)(
+  const [hoveringArea, setHoveringArea] = (0, import_react21.useState)(null);
+  const [hoveringZone, setHoveringZone] = (0, import_react21.useState)(
     rootDroppableId
   );
-  const [hoveringComponent, setHoveringComponent] = (0, import_react20.useState)();
+  const [hoveringComponent, setHoveringComponent] = (0, import_react21.useState)();
   const [hoveringAreaDb] = (0, import_use_debounce.useDebounce)(hoveringArea, 75, { leading: false });
-  const [areasWithZones, setAreasWithZones] = (0, import_react20.useState)(
+  const [areasWithZones, setAreasWithZones] = (0, import_react21.useState)(
     {}
   );
-  const [activeZones, setActiveZones] = (0, import_react20.useState)({});
+  const [activeZones, setActiveZones] = (0, import_react21.useState)({});
   const { dispatch = null } = value ? value : {};
-  const registerZoneArea = (0, import_react20.useCallback)(
+  const registerZoneArea = (0, import_react21.useCallback)(
     (area) => {
       setAreasWithZones((latest) => __spreadProps(__spreadValues({}, latest), { [area]: true }));
     },
     [setAreasWithZones]
   );
-  const registerZone = (0, import_react20.useCallback)(
+  const registerZone = (0, import_react21.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -2604,7 +2686,7 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const unregisterZone = (0, import_react20.useCallback)(
+  const unregisterZone = (0, import_react21.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -2619,8 +2701,8 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const [pathData, setPathData] = (0, import_react20.useState)();
-  const registerPath = (0, import_react20.useCallback)(
+  const [pathData, setPathData] = (0, import_react21.useState)();
+  const registerPath = (0, import_react21.useCallback)(
     (selector) => {
       if (!(value == null ? void 0 : value.data)) {
         return;
@@ -2631,15 +2713,15 @@ var DropZoneProvider = ({
       }
       const [area] = getZoneId(selector.zone);
       setPathData((latestPathData = {}) => {
-        const pathData2 = latestPathData[area] || [];
+        const parentPathData = latestPathData[area] || { path: [] };
         return __spreadProps(__spreadValues({}, latestPathData), {
-          [item.props.id]: [
-            ...pathData2,
-            {
-              selector,
-              label: item.type
-            }
-          ]
+          [item.props.id]: {
+            path: [
+              ...parentPathData.path,
+              ...selector.zone ? [selector.zone] : []
+            ],
+            label: item.type
+          }
         });
       });
     },
@@ -2673,7 +2755,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_react21.useContext)(dropZoneContext);
+  const ctx = (0, import_react22.useContext)(dropZoneContext);
   const {
     // These all need setting via context
     data,
@@ -2690,12 +2772,12 @@ function DropZoneEdit({ zone, style }) {
   } = ctx || {};
   let content = data.content || [];
   let zoneCompound = rootDroppableId;
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (areaId && registerZoneArea) {
       registerZoneArea(areaId);
     }
   }, [areaId]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (ctx == null ? void 0 : ctx.registerZone) {
       ctx == null ? void 0 : ctx.registerZone(zoneCompound);
     }
@@ -2907,7 +2989,7 @@ function DropZoneEdit({ zone, style }) {
   );
 }
 function DropZoneRender({ zone }) {
-  const ctx = (0, import_react21.useContext)(dropZoneContext);
+  const ctx = (0, import_react22.useContext)(dropZoneContext);
   const { data, areaId = "root", config } = ctx || {};
   let zoneCompound = rootDroppableId;
   let content = (data == null ? void 0 : data.content) || [];
@@ -2934,7 +3016,7 @@ function DropZoneRender({ zone }) {
   }) });
 }
 function DropZone(props) {
-  const ctx = (0, import_react21.useContext)(dropZoneContext);
+  const ctx = (0, import_react22.useContext)(dropZoneContext);
   if ((ctx == null ? void 0 : ctx.mode) === "edit") {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DropZoneEdit, __spreadValues({}, props));
   }
@@ -2946,7 +3028,7 @@ init_react_import();
 
 // components/IconButton/IconButton.tsx
 init_react_import();
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css#css-module
 init_react_import();
@@ -2968,7 +3050,7 @@ var IconButton = ({
   fullWidth,
   title
 }) => {
-  const [loading, setLoading] = (0, import_react22.useState)(false);
+  const [loading, setLoading] = (0, import_react23.useState)(false);
   const ElementType = href ? "a" : "button";
   const el = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     ElementType,
@@ -3008,329 +3090,327 @@ var IconButton = ({
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react28 = require("react");
-var import_react_beautiful_dnd4 = require("react-beautiful-dnd");
+var import_react32 = require("react");
+var import_react_beautiful_dnd5 = require("react-beautiful-dnd");
 
 // components/InputOrGroup/index.tsx
 init_react_import();
 
-// components/ExternalInput/index.tsx
+// css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css#css-module
 init_react_import();
-var import_react23 = require("react");
+var styles_module_default3 = { "Input": "_Input_nkpu6_1", "Input-label": "_Input-label_nkpu6_27", "Input-labelIcon": "_Input-labelIcon_nkpu6_34", "Input-input": "_Input-input_nkpu6_39", "Input--readOnly": "_Input--readOnly_nkpu6_60", "Input-radioGroupItems": "_Input-radioGroupItems_nkpu6_69", "Input-radio": "_Input-radio_nkpu6_69", "Input-radioInner": "_Input-radioInner_nkpu6_86", "Input-radioInput": "_Input-radioInput_nkpu6_98" };
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
+// components/InputOrGroup/fields/index.tsx
 init_react_import();
-var styles_module_default3 = { "ExternalInput": "_ExternalInput_l4bks_1", "ExternalInput-actions": "_ExternalInput-actions_l4bks_5", "ExternalInput-button": "_ExternalInput-button_l4bks_9", "ExternalInput-detachButton": "_ExternalInput-detachButton_l4bks_28", "ExternalInput--hasData": "_ExternalInput--hasData_l4bks_35", "ExternalInput-modal": "_ExternalInput-modal_l4bks_55", "ExternalInput--modalVisible": "_ExternalInput--modalVisible_l4bks_69", "ExternalInput-modalInner": "_ExternalInput-modalInner_l4bks_73", "ExternalInput-modalHeading": "_ExternalInput-modalHeading_l4bks_84", "ExternalInput-modalTableWrapper": "_ExternalInput-modalTableWrapper_l4bks_89" };
 
-// components/ExternalInput/index.tsx
+// components/InputOrGroup/fields/ArrayField/index.tsx
+init_react_import();
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css#css-module
+init_react_import();
+var styles_module_default4 = { "ArrayField": "_ArrayField_zp334_5", "ArrayField--isDraggingFrom": "_ArrayField--isDraggingFrom_zp334_13", "ArrayField-addButton": "_ArrayField-addButton_zp334_17", "ArrayField--hasItems": "_ArrayField--hasItems_zp334_31", "ArrayFieldItem": "_ArrayFieldItem_zp334_45", "ArrayFieldItem--isDragging": "_ArrayFieldItem--isDragging_zp334_53", "ArrayFieldItem--isExpanded": "_ArrayFieldItem--isExpanded_zp334_58", "ArrayFieldItem-summary": "_ArrayFieldItem-summary_zp334_72", "ArrayFieldItem-body": "_ArrayFieldItem-body_zp334_104", "ArrayFieldItem-fieldset": "_ArrayFieldItem-fieldset_zp334_112", "ArrayFieldItem-rhs": "_ArrayFieldItem-rhs_zp334_119", "ArrayFieldItem-actions": "_ArrayFieldItem-actions_zp334_125", "ArrayFieldItem-action": "_ArrayFieldItem-action_zp334_125" };
+
+// components/InputOrGroup/fields/ArrayField/index.tsx
+var import_react_beautiful_dnd4 = require("react-beautiful-dnd");
+
+// components/Draggable/index.tsx
+init_react_import();
+var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var getClassName5 = get_class_name_factory_default("ExternalInput", styles_module_default3);
-var ExternalInput = ({
-  field,
-  onChange,
-  value = null
+var Draggable2 = ({
+  className,
+  children,
+  id,
+  index,
+  showShadow,
+  disableAnimations = false
 }) => {
-  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);
-        if (listData) {
-          setData(listData);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_beautiful_dnd3.Draggable, { draggableId: id, index, children: (provided, snapshot) => {
+    var _a;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "div",
+        __spreadProps(__spreadValues(__spreadValues({
+          className: className && className(provided, snapshot),
+          ref: provided.innerRef
+        }, provided.draggableProps), provided.dragHandleProps), {
+          style: __spreadProps(__spreadValues({}, provided.draggableProps.style), {
+            transform: snapshot.isDragging || !disableAnimations ? (_a = provided.draggableProps.style) == null ? void 0 : _a.transform : "translate(0px, 0px)"
+          }),
+          children: children(provided, snapshot)
+        })
+      ),
+      showShadow && snapshot.isDragging && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "div",
+        {
+          className: className && className(provided, snapshot),
+          style: { transform: "none !important" },
+          children: children(provided, snapshot)
         }
-      }
-    }))();
-  }, [field.adaptor, field.adaptorParams]);
-  if (!field.adaptor) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: "Incorrectly configured" });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    "div",
-    {
-      className: getClassName5({
-        hasData: !!selectedData,
-        modalVisible: isOpen
-      }),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: getClassName5("actions"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "button",
-            {
-              onClick: () => setOpen(true),
-              className: getClassName5("button"),
-              children: selectedData ? field.getItemSummary ? field.getItemSummary(selectedData) : `${field.adaptor.name} item` : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(link_default, { size: "16" }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
-                  "Select from ",
-                  field.adaptor.name
-                ] })
-              ] })
-            }
-          ),
-          selectedData && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "button",
-            {
-              className: getClassName5("detachButton"),
-              onClick: () => {
-                setSelectedData(null);
-                onChange(null);
-              },
-              children: "Detach"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName5("modal"), onClick: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-          "div",
-          {
-            className: getClassName5("modalInner"),
-            onClick: (e) => e.stopPropagation(),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { className: getClassName5("modalHeading"), children: "Select content" }),
-              data.length ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName5("modalTableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("table", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tr", { children: Object.keys(data[0]).map((key) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("th", { style: { textAlign: "left" }, children: key }, key)) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tbody", { children: data.map((item, i) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                    "tr",
-                    {
-                      style: { whiteSpace: "nowrap" },
-                      onClick: (e) => {
-                        onChange(item);
-                        setOpen(false);
-                        setSelectedData(item);
-                      },
-                      children: Object.keys(item).map((key) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { children: item[key] }, key))
-                    },
-                    i
-                  );
-                }) })
-              ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { padding: 24 }, children: "No content" })
-            ]
-          }
-        ) })
-      ]
-    }
-  );
+      )
+    ] });
+  } });
 };
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css#css-module
+// lib/generate-id.ts
 init_react_import();
-var styles_module_default4 = { "Input": "_Input_izwhv_1", "Input-label": "_Input-label_izwhv_27", "Input-labelIcon": "_Input-labelIcon_izwhv_34", "Input-input": "_Input-input_izwhv_39", "Input--readOnly": "_Input--readOnly_izwhv_60", "Input-arrayItem": "_Input-arrayItem_izwhv_69", "Input-fieldset": "_Input-fieldset_izwhv_95", "Input-arrayItemAction": "_Input-arrayItemAction_izwhv_116", "Input-addButton": "_Input-addButton_izwhv_135", "Input-array": "_Input-array_izwhv_69", "Input-radioGroupItems": "_Input-radioGroupItems_izwhv_156", "Input-radio": "_Input-radio_izwhv_156", "Input-radioInner": "_Input-radioInner_izwhv_173", "Input-radioInput": "_Input-radioInput_izwhv_185" };
+var import_crypto = require("crypto");
+var generateId = (type) => `${type}-${(0, import_crypto.randomBytes)(20).toString("hex")}`;
 
-// components/InputOrGroup/index.tsx
+// components/InputOrGroup/fields/ArrayField/index.tsx
+var import_react25 = require("react");
+
+// components/DragIcon/index.tsx
+init_react_import();
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/DragIcon/styles.module.css#css-module
+init_react_import();
+var styles_module_default5 = { "DragIcon": "_DragIcon_o29on_1" };
+
+// components/DragIcon/index.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var getClassName6 = get_class_name_factory_default("Input", styles_module_default4);
-var FieldLabel = ({
-  children,
-  icon,
-  label
-}) => {
-  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"), children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, {}),
-      label
-    ] }),
-    children
-  ] });
+var getClassName5 = get_class_name_factory_default("DragIcon", styles_module_default5);
+var DragIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName5(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { viewBox: "0 0 20 20", width: "12", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" }) }) });
+
+// components/Puck/context.tsx
+init_react_import();
+var import_react24 = require("react");
+var defaultAppState = {
+  data: { content: [], root: { title: "" } },
+  ui: {
+    leftSideBarVisible: true,
+    arrayState: {},
+    itemSelector: null
+  }
 };
-var InputOrGroup = ({
-  name,
+var appContext = (0, import_react24.createContext)({
+  state: defaultAppState,
+  dispatch: () => null
+});
+var AppProvider = appContext.Provider;
+var useAppContext = () => {
+  const mainContext = (0, import_react24.useContext)(appContext);
+  const selectedItem = mainContext.state.ui.itemSelector ? getItem(mainContext.state.ui.itemSelector, mainContext.state.data) : void 0;
+  return __spreadProps(__spreadValues({}, mainContext), {
+    // Helpers
+    selectedItem,
+    setUi: (ui, recordHistory) => {
+      return mainContext.dispatch({
+        type: "setUi",
+        ui,
+        recordHistory
+      });
+    }
+  });
+};
+
+// components/InputOrGroup/fields/ArrayField/index.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var getClassNameInput = get_class_name_factory_default("Input", styles_module_default3);
+var getClassName6 = get_class_name_factory_default("ArrayField", styles_module_default4);
+var getClassNameItem = get_class_name_factory_default("ArrayFieldItem", styles_module_default4);
+var ArrayField = ({
   field,
-  value,
-  label,
   onChange,
-  readOnly
+  value,
+  name,
+  label
 }) => {
-  if (field.type === "array") {
-    if (!field.arrayFields) {
-      return null;
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("b", { className: getClassName6("label"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(list_default, { size: 16 }) }),
-        label || name
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("array"), children: [
-        Array.isArray(value) ? value.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-          "details",
-          {
-            className: getClassName6("arrayItem"),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("summary", { children: [
-                field.getItemSummary ? field.getItemSummary(item, i) : `Item #${i}`,
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("arrayItemAction"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                  IconButton,
-                  {
-                    onClick: () => {
-                      const existingValue = value || [];
-                      existingValue.splice(i, 1);
-                      onChange(existingValue);
-                    },
-                    title: "Delete",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(trash_default, { size: 21 })
-                  }
-                ) })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("fieldset", { className: getClassName6("fieldset"), children: Object.keys(field.arrayFields).map((fieldName) => {
-                const subField = field.arrayFields[fieldName];
-                return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                  InputOrGroup,
-                  {
-                    name: `${name}_${i}_${fieldName}`,
-                    label: subField.label || fieldName,
-                    field: subField,
-                    value: item[fieldName],
-                    onChange: (val) => onChange(
-                      replace(value, i, __spreadProps(__spreadValues({}, item), { [fieldName]: val }))
-                    )
-                  },
-                  `${name}_${i}_${fieldName}`
-                );
-              }) })
-            ]
-          },
-          `${name}_${i}`
-        )) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          "button",
-          {
-            className: getClassName6("addButton"),
-            onClick: () => {
-              const existingValue = value || [];
-              onChange([...existingValue, field.defaultItemProps || {}]);
-            },
-            children: "+ Add item"
-          }
-        )
-      ] })
-    ] });
-  }
-  if (field.type === "external") {
-    if (!field.adaptor) {
-      return null;
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6(""), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("label"), children: name === "_data" ? "External content" : label || name }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ExternalInput, { field, onChange, value })
-    ] });
-  }
-  if (field.type === "select") {
-    if (!field.options) {
-      return null;
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: getClassName6(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("label"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(chevron_down_default, { size: 16 }) }),
-        label || name
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        "select",
-        {
-          className: getClassName6("input"),
-          onChange: (e) => {
-            if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
-              onChange(Boolean(e.currentTarget.value));
-              return;
-            }
-            onChange(e.currentTarget.value);
-          },
-          value,
-          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            "option",
-            {
-              label: option.label,
-              value: option.value
-            },
-            option.label + option.value
-          ))
-        }
-      )
-    ] });
-  }
-  if (field.type === "textarea") {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: getClassName6({ readOnly }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("label"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(type_default, { size: 16 }) }),
-        label || name
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        "textarea",
-        {
-          className: getClassName6("input"),
-          autoComplete: "off",
-          name,
-          value: typeof value === "undefined" ? "" : value,
-          onChange: (e) => onChange(e.currentTarget.value),
-          readOnly,
-          rows: 5
-        }
-      )
-    ] });
-  }
-  if (field.type === "radio") {
-    if (!field.options) {
-      return null;
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("radioGroup"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("label"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(check_circle_default, { size: 16 }) }),
-        field.label || name
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("radioGroupItems"), children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-        "label",
+  const [arrayFieldId] = (0, import_react25.useState)(generateId("ArrayField"));
+  const { state, setUi } = useAppContext();
+  const arrayState = state.ui.arrayState[arrayFieldId] || {
+    items: Array.from(value).map((v) => ({
+      _arrayId: generateId("ArrayItem"),
+      data: v
+    })),
+    openId: ""
+  };
+  const setArrayState = (0, import_react25.useCallback)(
+    (newArrayState, recordHistory = false) => {
+      setUi(
         {
-          className: getClassName6("radio"),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "input",
-              {
-                type: "radio",
-                className: getClassName6("radioInput"),
-                value: option.value,
-                name,
-                onChange: (e) => {
-                  if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
-                    onChange(JSON.parse(e.currentTarget.value));
-                    return;
-                  }
-                  onChange(e.currentTarget.value);
-                },
-                readOnly,
-                defaultChecked: value === option.value
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("radioInner"), children: option.label || option.value })
-          ]
+          arrayState: __spreadProps(__spreadValues({}, state.ui.arrayState), {
+            [arrayFieldId]: __spreadValues(__spreadValues({}, arrayState), newArrayState)
+          })
         },
-        option.label + option.value
-      )) })
-    ] }) });
-  }
-  if (field.type === "custom") {
-    if (!field.render) {
-      return null;
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6(), children: field.render({
-      field,
-      name,
-      value,
-      onChange,
-      readOnly
-    }) });
+        recordHistory
+      );
+    },
+    [arrayState]
+  );
+  (0, import_react25.useEffect)(() => {
+    const newItems = Array.from(value).map((item, idx) => {
+      var _a;
+      return {
+        _arrayId: ((_a = arrayState.items[idx]) == null ? void 0 : _a._arrayId) || generateId("ArrayItem"),
+        data: item
+      };
+    });
+    setArrayState({ items: newItems });
+  }, [value]);
+  if (!field.arrayFields) {
+    return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: getClassName6({ readOnly }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("label"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("labelIcon"), children: [
-        field.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(type_default, { size: 16 }),
-        field.type === "number" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(hash_default, { size: 16 })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: getClassNameInput(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("b", { className: getClassNameInput("label"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameInput("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(list_default, { size: 16 }) }),
+      label || name
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_react_beautiful_dnd4.DragDropContext,
+      {
+        onDragEnd: (event) => {
+          var _a;
+          if (event.destination) {
+            const newValue = reorder(
+              arrayState.items,
+              event.source.index,
+              (_a = event.destination) == null ? void 0 : _a.index
+            );
+            setArrayState(__spreadProps(__spreadValues({}, arrayState), { items: newValue }), false);
+            onChange(newValue.map(({ data }) => data));
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DroppableStrictMode_default, { droppableId: "array", children: (provided, snapshot) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            "div",
+            __spreadProps(__spreadValues({}, provided.droppableProps), {
+              ref: provided.innerRef,
+              className: getClassName6({
+                isDraggingFrom: !!snapshot.draggingFromThisWith,
+                hasItems: value.length > 0
+              }),
+              children: [
+                Array.isArray(value) && value.length > 0 ? arrayState.items.map(({ _arrayId, data }, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  Draggable2,
+                  {
+                    id: _arrayId,
+                    index: i,
+                    className: (_, snapshot2) => getClassNameItem({
+                      isExpanded: arrayState.openId === _arrayId,
+                      isDragging: snapshot2.isDragging
+                    }),
+                    children: () => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                        "div",
+                        {
+                          onClick: () => {
+                            if (arrayState.openId === _arrayId) {
+                              setArrayState({
+                                openId: ""
+                              });
+                            } else {
+                              setArrayState({
+                                openId: _arrayId
+                              });
+                            }
+                          },
+                          className: getClassNameItem("summary"),
+                          children: [
+                            field.getItemSummary ? field.getItemSummary(data, i) : `Item #${i}`,
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: getClassNameItem("rhs"), children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameItem("actions"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                IconButton,
+                                {
+                                  onClick: () => {
+                                    const existingValue = [
+                                      ...value || []
+                                    ];
+                                    const existingItems = [
+                                      ...arrayState.items || []
+                                    ];
+                                    existingValue.splice(i, 1);
+                                    existingItems.splice(i, 1);
+                                    setArrayState(
+                                      { items: existingItems },
+                                      true
+                                    );
+                                    onChange(existingValue);
+                                  },
+                                  title: "Delete",
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(trash_default, { size: 16 })
+                                }
+                              ) }) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DragIcon, {}) })
+                            ] })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        "fieldset",
+                        {
+                          className: getClassNameItem("fieldset"),
+                          children: Object.keys(field.arrayFields).map(
+                            (fieldName) => {
+                              const subField = field.arrayFields[fieldName];
+                              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                InputOrGroup,
+                                {
+                                  name: `${name}_${i}_${fieldName}`,
+                                  label: subField.label || fieldName,
+                                  field: subField,
+                                  value: data[fieldName],
+                                  onChange: (val) => onChange(
+                                    replace(value, i, __spreadProps(__spreadValues({}, data), {
+                                      [fieldName]: val
+                                    }))
+                                  )
+                                },
+                                `${name}_${i}_${fieldName}`
+                              );
+                            }
+                          )
+                        }
+                      ) })
+                    ] })
+                  },
+                  _arrayId
+                )) : null,
+                provided.placeholder,
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "button",
+                  {
+                    className: getClassName6("addButton"),
+                    onClick: () => {
+                      const existingValue = value || [];
+                      onChange([...existingValue, field.defaultItemProps || {}]);
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(plus_default, { size: "21" })
+                  }
+                )
+              ]
+            })
+          );
+        } })
+      }
+    )
+  ] });
+};
+
+// components/InputOrGroup/fields/DefaultField/index.tsx
+init_react_import();
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var getClassName7 = get_class_name_factory_default("Input", styles_module_default3);
+var DefaultField = ({
+  field,
+  onChange,
+  readOnly,
+  value,
+  name,
+  label
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: getClassName7({ readOnly }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: getClassName7("label"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: getClassName7("labelIcon"), children: [
+        field.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(type_default, { size: 16 }),
+        field.type === "number" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(hash_default, { size: 16 })
       ] }),
       label || name
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "input",
       {
-        className: getClassName6("input"),
+        className: getClassName7("input"),
         autoComplete: "off",
         type: field.type,
         name,
@@ -3348,67 +3428,350 @@ var InputOrGroup = ({
   ] });
 };
 
+// components/InputOrGroup/fields/ExternalField/index.tsx
+init_react_import();
+
+// components/ExternalInput/index.tsx
+init_react_import();
+var import_react26 = require("react");
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
+init_react_import();
+var styles_module_default6 = { "ExternalInput": "_ExternalInput_l4bks_1", "ExternalInput-actions": "_ExternalInput-actions_l4bks_5", "ExternalInput-button": "_ExternalInput-button_l4bks_9", "ExternalInput-detachButton": "_ExternalInput-detachButton_l4bks_28", "ExternalInput--hasData": "_ExternalInput--hasData_l4bks_35", "ExternalInput-modal": "_ExternalInput-modal_l4bks_55", "ExternalInput--modalVisible": "_ExternalInput--modalVisible_l4bks_69", "ExternalInput-modalInner": "_ExternalInput-modalInner_l4bks_73", "ExternalInput-modalHeading": "_ExternalInput-modalHeading_l4bks_84", "ExternalInput-modalTableWrapper": "_ExternalInput-modalTableWrapper_l4bks_89" };
+
+// components/ExternalInput/index.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var getClassName8 = get_class_name_factory_default("ExternalInput", styles_module_default6);
+var ExternalInput = ({
+  field,
+  onChange,
+  value = null
+}) => {
+  const [data, setData] = (0, import_react26.useState)([]);
+  const [isOpen, setOpen] = (0, import_react26.useState)(false);
+  const [selectedData, setSelectedData] = (0, import_react26.useState)(value);
+  const keys = (0, import_react26.useMemo)(() => {
+    const validKeys = /* @__PURE__ */ new Set();
+    for (const item of data) {
+      for (const key of Object.keys(item)) {
+        if (typeof item[key] === "string" || typeof item[key] === "number") {
+          validKeys.add(key);
+        }
+      }
+    }
+    return Array.from(validKeys);
+  }, [data]);
+  (0, import_react26.useEffect)(() => {
+    (() => __async(void 0, null, function* () {
+      if (field.adaptor) {
+        const listData = yield field.adaptor.fetchList(field.adaptorParams);
+        if (listData) {
+          setData(listData);
+        }
+      }
+    }))();
+  }, [field.adaptor, field.adaptorParams]);
+  if (!field.adaptor) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: "Incorrectly configured" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      className: getClassName8({
+        hasData: !!selectedData,
+        modalVisible: isOpen
+      }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName8("actions"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "button",
+            {
+              onClick: () => setOpen(true),
+              className: getClassName8("button"),
+              children: selectedData ? field.getItemSummary ? field.getItemSummary(selectedData) : `${field.adaptor.name} item` : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(link_default, { size: "16" }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
+                  "Select from ",
+                  field.adaptor.name
+                ] })
+              ] })
+            }
+          ),
+          selectedData && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "button",
+            {
+              className: getClassName8("detachButton"),
+              onClick: () => {
+                setSelectedData(null);
+                onChange(null);
+              },
+              children: "Detach"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName8("modal"), onClick: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          "div",
+          {
+            className: getClassName8("modalInner"),
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h2", { className: getClassName8("modalHeading"), children: "Select content" }),
+              data.length ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName8("modalTableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("table", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tr", { children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("th", { style: { textAlign: "left" }, children: key }, key)) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tbody", { children: data.map((item, i) => {
+                  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    "tr",
+                    {
+                      style: { whiteSpace: "nowrap" },
+                      onClick: (e) => {
+                        onChange(item);
+                        setOpen(false);
+                        setSelectedData(item);
+                      },
+                      children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { children: item[key] }, key))
+                    },
+                    i
+                  );
+                }) })
+              ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { padding: 24 }, children: "No content" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+// components/InputOrGroup/fields/ExternalField/index.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var getClassName9 = get_class_name_factory_default("Input", styles_module_default3);
+var ExternalField = ({
+  field,
+  onChange,
+  readOnly,
+  value,
+  name,
+  label
+}) => {
+  if (!field.adaptor) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassName9(""), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassName9("label"), children: name === "_data" ? "External content" : label || name }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ExternalInput, { field, onChange, value })
+  ] });
+};
+
+// components/InputOrGroup/fields/RadioField/index.tsx
+init_react_import();
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var getClassName10 = get_class_name_factory_default("Input", styles_module_default3);
+var RadioField = ({
+  field,
+  onChange,
+  readOnly,
+  value,
+  name
+}) => {
+  if (!field.options) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassName10(), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: getClassName10("radioGroup"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: getClassName10("label"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassName10("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(check_circle_default, { size: 16 }) }),
+      field.label || name
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassName10("radioGroupItems"), children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "label",
+      {
+        className: getClassName10("radio"),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "input",
+            {
+              type: "radio",
+              className: getClassName10("radioInput"),
+              value: option.value,
+              name,
+              onChange: (e) => {
+                if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
+                  onChange(JSON.parse(e.currentTarget.value));
+                  return;
+                }
+                onChange(e.currentTarget.value);
+              },
+              readOnly,
+              defaultChecked: value === option.value
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassName10("radioInner"), children: option.label || option.value })
+        ]
+      },
+      option.label + option.value
+    )) })
+  ] }) });
+};
+
+// components/InputOrGroup/fields/SelectField/index.tsx
+init_react_import();
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var getClassName11 = get_class_name_factory_default("Input", styles_module_default3);
+var SelectField = ({
+  field,
+  onChange,
+  label,
+  value,
+  name
+}) => {
+  if (!field.options) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: getClassName11(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: getClassName11("label"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassName11("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(chevron_down_default, { size: 16 }) }),
+      label || name
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "select",
+      {
+        className: getClassName11("input"),
+        onChange: (e) => {
+          if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
+            onChange(Boolean(e.currentTarget.value));
+            return;
+          }
+          onChange(e.currentTarget.value);
+        },
+        value,
+        children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "option",
+          {
+            label: option.label,
+            value: option.value
+          },
+          option.label + option.value
+        ))
+      }
+    )
+  ] });
+};
+
+// components/InputOrGroup/fields/TextareaField/index.tsx
+init_react_import();
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var getClassName12 = get_class_name_factory_default("Input", styles_module_default3);
+var TextareaField = ({
+  onChange,
+  readOnly,
+  value,
+  name,
+  label
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: getClassName12({ readOnly }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: getClassName12("label"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassName12("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(type_default, { size: 16 }) }),
+      label || name
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "textarea",
+      {
+        className: getClassName12("input"),
+        autoComplete: "off",
+        name,
+        value: typeof value === "undefined" ? "" : value,
+        onChange: (e) => onChange(e.currentTarget.value),
+        readOnly,
+        rows: 5
+      }
+    )
+  ] });
+};
+
+// components/InputOrGroup/index.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var getClassName13 = get_class_name_factory_default("Input", styles_module_default3);
+var FieldLabel = ({
+  children,
+  icon,
+  label
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: getClassName13("label"), children: [
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: getClassName13("labelIcon"), children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}),
+      label
+    ] }),
+    children
+  ] });
+};
+var InputOrGroup = (props) => {
+  const { name, field, value, onChange, readOnly } = props;
+  if (field.type === "array") {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ArrayField, __spreadValues({}, props));
+  }
+  if (field.type === "external") {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ExternalField, __spreadValues({}, props));
+  }
+  if (field.type === "select") {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SelectField, __spreadValues({}, props));
+  }
+  if (field.type === "textarea") {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TextareaField, __spreadValues({}, props));
+  }
+  if (field.type === "radio") {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RadioField, __spreadValues({}, props));
+  }
+  if (field.type === "custom") {
+    if (!field.render) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: getClassName13(), children: field.render({
+      field,
+      name,
+      value,
+      onChange,
+      readOnly
+    }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DefaultField, __spreadValues({}, props));
+};
+
 // components/ComponentList/index.tsx
 init_react_import();
-var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css#css-module
 init_react_import();
-var styles_module_default5 = { "ComponentList": "_ComponentList_1ybn0_1", "ComponentList-item": "_ComponentList-item_1ybn0_9", "ComponentList-itemShadow": "_ComponentList-itemShadow_1ybn0_10", "ComponentList-itemIcon": "_ComponentList-itemIcon_1ybn0_28" };
+var styles_module_default7 = { "ComponentList": "_ComponentList_bvy0z_1", "ComponentList-item": "_ComponentList-item_bvy0z_6", "ComponentList-itemIcon": "_ComponentList-itemIcon_bvy0z_24", "ComponentList--isDraggingFrom": "_ComponentList--isDraggingFrom_bvy0z_28" };
 
 // components/ComponentList/index.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var getClassName7 = get_class_name_factory_default("ComponentList", styles_module_default5);
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var getClassName14 = get_class_name_factory_default("ComponentList", styles_module_default7);
 var ComponentList = ({ config }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DroppableStrictMode_default, { droppableId: "component-list", isDropDisabled: true, children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DroppableStrictMode_default, { droppableId: "component-list", isDropDisabled: true, children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
     __spreadProps(__spreadValues({}, provided.droppableProps), {
       ref: provided.innerRef,
-      className: getClassName7(),
+      className: getClassName14({
+        isDraggingFrom: !!snapshot.draggingFromThisWith
+      }),
       children: [
         Object.keys(config.components).map((componentKey, i) => {
-          const componentConfig = config[componentKey];
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            import_react_beautiful_dnd3.Draggable,
+          return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            Draggable2,
             {
-              draggableId: componentKey,
+              id: componentKey,
               index: i,
-              children: (provided2, snapshot2) => {
-                var _a;
-                return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                    "div",
-                    __spreadProps(__spreadValues(__spreadValues({
-                      ref: provided2.innerRef
-                    }, provided2.draggableProps), provided2.dragHandleProps), {
-                      className: getClassName7("item"),
-                      style: __spreadProps(__spreadValues({}, provided2.draggableProps.style), {
-                        transform: snapshot2.isDragging ? (_a = provided2.draggableProps.style) == null ? void 0 : _a.transform : "translate(0px, 0px)"
-                      }),
-                      children: [
-                        componentKey,
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassName7("itemIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(grid_default, { size: 18 }) })
-                      ]
-                    })
-                  ),
-                  snapshot2.isDragging && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                    "div",
-                    {
-                      className: getClassName7("itemShadow"),
-                      style: { transform: "none !important" },
-                      children: [
-                        componentKey,
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassName7("itemIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(grid_default, { size: 18 }) })
-                      ]
-                    }
-                  )
-                ] });
-              }
+              showShadow: true,
+              disableAnimations: true,
+              className: () => getClassName14("item"),
+              children: () => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+                componentKey,
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: getClassName14("itemIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DragIcon, {}) })
+              ] })
             },
             componentKey
           );
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "none" }, children: provided.placeholder })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { display: "none" }, children: provided.placeholder })
       ]
     })
   ) });
@@ -3416,10 +3779,10 @@ var ComponentList = ({ config }) => {
 
 // lib/use-placeholder-style.ts
 init_react_import();
-var import_react24 = require("react");
+var import_react27 = require("react");
 var usePlaceholderStyle = () => {
   const queryAttr = "data-rbd-drag-handle-draggable-id";
-  const [placeholderStyle, setPlaceholderStyle] = (0, import_react24.useState)();
+  const [placeholderStyle, setPlaceholderStyle] = (0, import_react27.useState)();
   const onDragStartOrUpdate = (draggedItem) => {
     var _a;
     const draggableId = draggedItem.draggableId;
@@ -3467,24 +3830,24 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
 init_react_import();
-var styles_module_default6 = { "SidebarSection": "_SidebarSection_f1p35_1", "SidebarSection-title": "_SidebarSection-title_f1p35_12", "SidebarSection-content": "_SidebarSection-content_f1p35_19", "SidebarSection--noPadding": "_SidebarSection--noPadding_f1p35_24", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_f1p35_33", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_f1p35_44", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_f1p35_33", "SidebarSection-heading": "_SidebarSection-heading_f1p35_56" };
+var styles_module_default8 = { "SidebarSection": "_SidebarSection_f1p35_1", "SidebarSection-title": "_SidebarSection-title_f1p35_12", "SidebarSection-content": "_SidebarSection-content_f1p35_19", "SidebarSection--noPadding": "_SidebarSection--noPadding_f1p35_24", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_f1p35_33", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_f1p35_44", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_f1p35_33", "SidebarSection-heading": "_SidebarSection-heading_f1p35_56" };
 
 // components/Heading/index.tsx
 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_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" };
+var styles_module_default9 = { "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");
-var getClassName8 = get_class_name_factory_default("Heading", styles_module_default7);
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var getClassName15 = get_class_name_factory_default("Heading", styles_module_default9);
 var Heading = ({ children, rank, size = "m" }) => {
   const Tag = rank ? `h${rank}` : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     Tag,
     {
-      className: getClassName8({
+      className: getClassName15({
         [size]: true
       }),
       children
@@ -3492,37 +3855,210 @@ var Heading = ({ children, rank, size = "m" }) => {
   );
 };
 
+// lib/use-breadcrumbs.ts
+init_react_import();
+var import_react28 = require("react");
+var convertPathDataToBreadcrumbs = (selectedItem, pathData, data) => {
+  const id = selectedItem ? selectedItem == null ? void 0 : selectedItem.props.id : "";
+  const currentPathData = pathData && id && pathData[id] ? __spreadValues({}, pathData[id]) : { label: "Page", path: [] };
+  if (!id) {
+    return [];
+  }
+  return currentPathData == null ? void 0 : currentPathData.path.reduce((acc, zoneCompound) => {
+    const [area] = getZoneId(zoneCompound);
+    if (area === rootDroppableId) {
+      return [
+        {
+          label: "Page",
+          selector: null
+        }
+      ];
+    }
+    const parentZoneCompound = acc.length > 0 ? acc[acc.length - 1].zoneCompound : rootDroppableId;
+    let parentZone = data.content;
+    if (parentZoneCompound && parentZoneCompound !== rootDroppableId) {
+      parentZone = data.zones[parentZoneCompound];
+    }
+    if (!parentZone) {
+      return acc;
+    }
+    const itemIndex = parentZone.findIndex(
+      (queryItem) => queryItem.props.id === area
+    );
+    const item = parentZone[itemIndex];
+    if (!item) {
+      return acc;
+    }
+    return [
+      ...acc,
+      {
+        label: item.type.toString(),
+        selector: {
+          index: itemIndex,
+          zone: parentZoneCompound
+        },
+        zoneCompound
+      }
+    ];
+  }, []);
+};
+var useBreadcrumbs = (renderCount) => {
+  const {
+    state: { data },
+    selectedItem
+  } = useAppContext();
+  const dzContext = (0, import_react28.useContext)(dropZoneContext);
+  return (0, import_react28.useMemo)(() => {
+    const breadcrumbs = convertPathDataToBreadcrumbs(
+      selectedItem,
+      dzContext == null ? void 0 : dzContext.pathData,
+      data
+    );
+    if (renderCount) {
+      return breadcrumbs.slice(breadcrumbs.length - renderCount);
+    }
+    return breadcrumbs;
+  }, [selectedItem, dzContext == null ? void 0 : dzContext.pathData, renderCount]);
+};
+
 // components/SidebarSection/index.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var getClassName9 = get_class_name_factory_default("SidebarSection", styles_module_default6);
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var getClassName16 = get_class_name_factory_default("SidebarSection", styles_module_default8);
 var SidebarSection = ({
   children,
   title,
   background,
-  breadcrumbs = [],
-  breadcrumbClick,
+  showBreadcrumbs,
   noPadding
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName9({ noPadding }), style: { background }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName9("title"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName9("breadcrumbs"), children: [
-      breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName9("breadcrumb"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  const { setUi } = useAppContext();
+  const breadcrumbs = useBreadcrumbs(1);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16({ noPadding }), style: { background }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("title"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16("breadcrumbs"), children: [
+      showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16("breadcrumb"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "div",
           {
-            className: getClassName9("breadcrumbLabel"),
-            onClick: () => breadcrumbClick && breadcrumbClick(breadcrumb),
+            className: getClassName16("breadcrumbLabel"),
+            onClick: () => setUi({ itemSelector: breadcrumb.selector }),
             children: breadcrumb.label
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(chevron_right_default, { size: 16 })
-      ] }, i)),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName9("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Heading, { rank: 2, size: "xs", children: title }) })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(chevron_right_default, { size: 16 })
+      ] }, i)) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Heading, { rank: 2, size: "xs", children: title }) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName9("content"), children })
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("content"), children })
   ] });
 };
 
-// lib/reducer.ts
+// reducer/index.ts
+init_react_import();
+
+// lib/use-puck-history.ts
+init_react_import();
+var import_react30 = require("react");
+
+// lib/use-action-history.ts
+init_react_import();
+var import_react29 = require("react");
+var EMPTY_HISTORY_INDEX = -1;
+function useActionHistory() {
+  const [histories, setHistories] = (0, import_react29.useState)([]);
+  const [currentHistoryIndex, setCurrentHistoryIndex] = (0, import_react29.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 DEBOUNCE_TIME = 250;
+var RECORD_DIFF = "RECORD_DIFF";
+var historyEmitter = (0, import_event_emitter.default)();
+var recordDiff = (newAppState) => historyEmitter.emit(RECORD_DIFF, newAppState);
+var _recordHistory = ({
+  snapshot,
+  newSnapshot,
+  record,
+  dispatch
+}) => {
+  if (JSON.stringify(snapshot) === JSON.stringify(newSnapshot))
+    return;
+  record({
+    forward: () => {
+      dispatch({ type: "set", state: newSnapshot });
+    },
+    rewind: () => {
+      dispatch({ type: "set", state: snapshot });
+    }
+  });
+};
+function usePuckHistory({
+  appState,
+  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)(appState, DEBOUNCE_TIME);
+  const handleRecordDiff = (0, import_use_debounce2.useDebouncedCallback)((newAppState) => {
+    return _recordHistory({
+      snapshot,
+      newSnapshot: newAppState,
+      record,
+      dispatch
+    });
+  }, DEBOUNCE_TIME);
+  (0, import_react30.useEffect)(() => {
+    historyEmitter.on(RECORD_DIFF, handleRecordDiff);
+    return () => {
+      historyEmitter.off(RECORD_DIFF, handleRecordDiff);
+    };
+  }, [handleRecordDiff]);
+  return {
+    canForward,
+    canRewind,
+    rewind,
+    forward
+  };
+}
+
+// reducer/data.ts
 init_react_import();
 
 // lib/insert.ts
@@ -3543,13 +4079,6 @@ var remove = (list, index) => {
 
 // lib/reduce-related-zones.ts
 init_react_import();
-
-// lib/generate-id.ts
-init_react_import();
-var import_crypto = require("crypto");
-var generateId = (type) => `${type}-${(0, import_crypto.randomBytes)(20).toString("hex")}`;
-
-// lib/reduce-related-zones.ts
 var reduceRelatedZones = (item, data, fn) => {
   return __spreadProps(__spreadValues({}, data), {
     zones: Object.keys(data.zones || {}).reduce(
@@ -3612,125 +4141,12 @@ 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
+// reducer/data.ts
 var zoneCache = {};
 var addToZoneCache = (key, data) => {
   zoneCache[key] = data;
 };
-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) => {
+var reduceData = (data, action, config) => {
   if (action.type === "insert") {
     const emptyComponentData = {
       type: action.componentType,
@@ -3910,10 +4326,48 @@ var createReducer = ({ config }) => storeInterceptor((data, action) => {
     }
     return __spreadProps(__spreadValues({}, data), { zones: _zones });
   }
-  if (action.type === "set") {
+  if (action.type === "setData") {
     return __spreadValues(__spreadValues({}, data), action.data);
   }
   return data;
+};
+
+// reducer/state.ts
+init_react_import();
+var reduceState = (ui, action) => {
+  if (action.type === "setUi") {
+    return __spreadValues(__spreadValues({}, ui), action.ui);
+  }
+  return ui;
+};
+
+// reducer/actions.tsx
+init_react_import();
+
+// reducer/index.ts
+var storeInterceptor = (reducer) => {
+  return (state, action) => {
+    const newAppState = reducer(state, action);
+    const isValidType = ![
+      "registerZone",
+      "unregisterZone",
+      "setData",
+      "setState",
+      "set"
+    ].includes(action.type);
+    if (typeof action.recordHistory !== "undefined" ? action.recordHistory : isValidType) {
+      recordDiff(newAppState);
+    }
+    return newAppState;
+  };
+};
+var createReducer = ({ config }) => storeInterceptor((state, action) => {
+  const data = reduceData(state.data, action, config);
+  const ui = reduceState(state.ui, action);
+  if (action.type === "set") {
+    return __spreadValues(__spreadValues({}, state), action.state);
+  }
+  return { data, ui };
 });
 
 // components/LayerTree/index.tsx
@@ -3921,7 +4375,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css#css-module
 init_react_import();
-var styles_module_default8 = { "LayerTree": "_LayerTree_1dcmd_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_1dcmd_11", "LayerTree-helper": "_LayerTree-helper_1dcmd_17", "Layer": "_Layer_1dcmd_1", "Layer-inner": "_Layer-inner_1dcmd_29", "Layer--containsZone": "_Layer--containsZone_1dcmd_35", "Layer-clickable": "_Layer-clickable_1dcmd_39", "Layer--isSelected": "_Layer--isSelected_1dcmd_48", "Layer--isHovering": "_Layer--isHovering_1dcmd_49", "Layer-chevron": "_Layer-chevron_1dcmd_65", "Layer--childIsSelected": "_Layer--childIsSelected_1dcmd_66", "Layer-zones": "_Layer-zones_1dcmd_70", "Layer-title": "_Layer-title_1dcmd_84", "Layer-icon": "_Layer-icon_1dcmd_92", "Layer-zoneIcon": "_Layer-zoneIcon_1dcmd_97" };
+var styles_module_default10 = { "LayerTree": "_LayerTree_1dcmd_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_1dcmd_11", "LayerTree-helper": "_LayerTree-helper_1dcmd_17", "Layer": "_Layer_1dcmd_1", "Layer-inner": "_Layer-inner_1dcmd_29", "Layer--containsZone": "_Layer--containsZone_1dcmd_35", "Layer-clickable": "_Layer-clickable_1dcmd_39", "Layer--isSelected": "_Layer--isSelected_1dcmd_48", "Layer--isHovering": "_Layer--isHovering_1dcmd_49", "Layer-chevron": "_Layer-chevron_1dcmd_65", "Layer--childIsSelected": "_Layer--childIsSelected_1dcmd_66", "Layer-zones": "_Layer-zones_1dcmd_70", "Layer-title": "_Layer-title_1dcmd_84", "Layer-icon": "_Layer-icon_1dcmd_92", "Layer-zoneIcon": "_Layer-zoneIcon_1dcmd_97" };
 
 // lib/scroll-into-view.ts
 init_react_import();
@@ -3935,7 +4389,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-var import_react27 = require("react");
+var import_react31 = require("react");
 
 // lib/find-zones-for-area.ts
 init_react_import();
@@ -3954,19 +4408,16 @@ init_react_import();
 var isChildOfZone = (item, maybeChild, ctx) => {
   var _a;
   const { data, pathData = {} } = ctx || {};
-  return maybeChild && data ? !!((_a = pathData[maybeChild.props.id]) == null ? void 0 : _a.find((path) => {
-    if (path.selector) {
-      const pathItem = getItem(path.selector, data);
-      return (pathItem == null ? void 0 : pathItem.props.id) === item.props.id;
-    }
-    return false;
+  return maybeChild && data ? !!((_a = pathData[maybeChild.props.id]) == null ? void 0 : _a.path.find((zoneCompound) => {
+    const [area] = getZoneId(zoneCompound);
+    return area === item.props.id;
   })) : false;
 };
 
 // components/LayerTree/index.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var getClassName10 = get_class_name_factory_default("LayerTree", styles_module_default8);
-var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default8);
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var getClassName17 = get_class_name_factory_default("LayerTree", styles_module_default10);
+var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default10);
 var LayerTree = ({
   data,
   zoneContent,
@@ -3976,15 +4427,15 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  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" }) }),
+  const ctx = (0, import_react31.useContext)(dropZoneContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: getClassName17("zoneTitle"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName17("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(layers_default, { size: "16" }) }),
       " ",
       label
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("ul", { className: getClassName10(), children: [
-      zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassName10("helper"), children: "No items" }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("ul", { className: getClassName17(), children: [
+      zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName17("helper"), children: "No items" }),
       zoneContent.map((item, i) => {
         const isSelected = (itemSelector == null ? void 0 : itemSelector.index) === i && (itemSelector.zone === zone || itemSelector.zone === rootDroppableId && !zone);
         const zonesForItem = findZonesForArea(data, item.props.id);
@@ -3999,7 +4450,7 @@ var LayerTree = ({
         const selectedItem = itemSelector && data ? getItem(itemSelector, data) : null;
         const isHovering = hoveringComponent === item.props.id;
         const childIsSelected = isChildOfZone(item, selectedItem, ctx);
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           "li",
           {
             className: getClassNameLayer({
@@ -4009,7 +4460,7 @@ var LayerTree = ({
               childIsSelected
             }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                 "div",
                 {
                   className: getClassNameLayer("clickable"),
@@ -4040,22 +4491,22 @@ var LayerTree = ({
                     setHoveringComponent(null);
                   },
                   children: [
-                    containsZone && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    containsZone && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                       "div",
                       {
                         className: getClassNameLayer("chevron"),
                         title: isSelected ? "Collapse" : "Expand",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(chevron_down_default, { size: "12" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(chevron_down_default, { size: "12" })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassNameLayer("title"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(type_default, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(grid_default, { size: "16" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: getClassNameLayer("title"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(type_default, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(grid_default, { size: "16" }) }),
                       item.type
                     ] })
                   ]
                 }
               ) }),
-              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 LayerTree,
                 {
                   data,
@@ -4084,32 +4535,35 @@ var areaContainsZones = (data, area) => {
 
 // lib/flush-zones.ts
 init_react_import();
-var flushZones = (data) => {
-  const containsZones = typeof data.zones !== "undefined";
+var flushZones = (appState) => {
+  const containsZones = typeof appState.data.zones !== "undefined";
   if (containsZones) {
-    Object.keys(data.zones || {}).forEach((zone) => {
-      addToZoneCache(zone, data.zones[zone]);
+    Object.keys(appState.data.zones || {}).forEach((zone) => {
+      addToZoneCache(zone, appState.data.zones[zone]);
     });
-    return __spreadProps(__spreadValues({}, data), {
-      zones: {}
+    return __spreadProps(__spreadValues({}, appState), {
+      data: __spreadProps(__spreadValues({}, appState.data), {
+        zones: {}
+      })
     });
   }
-  return data;
+  return appState;
 };
 
 // components/Puck/index.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var defaultPageFields = {
   title: { type: "text" }
 };
 var PluginRenderer = ({
   children,
-  data,
+  dispatch,
+  state,
   plugins,
   renderMethod
 }) => {
   return plugins.filter((item) => item[renderMethod]).map((item) => item[renderMethod]).reduce(
-    (accChildren, Item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Item, { data, children: accChildren }),
+    (accChildren, Item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Item, { dispatch, state, children: accChildren }),
     children
   );
 };
@@ -4125,51 +4579,67 @@ function Puck({
   headerPath
 }) {
   var _a, _b;
-  const [reducer] = (0, import_react28.useState)(() => createReducer({ config }));
-  const [data, dispatch] = (0, import_react28.useReducer)(
+  const [reducer] = (0, import_react32.useState)(() => createReducer({ config }));
+  const initialAppState = __spreadProps(__spreadValues({}, defaultAppState), {
+    data: initialData
+  });
+  const [appState, dispatch] = (0, import_react32.useReducer)(
     reducer,
-    flushZones(initialData)
+    flushZones(initialAppState)
   );
+  const { data, ui } = appState;
   const { canForward, canRewind, rewind, forward } = usePuckHistory({
-    data,
+    appState,
     dispatch
   });
-  const [itemSelector, setItemSelector] = (0, import_react28.useState)(null);
+  const { itemSelector, leftSideBarVisible } = ui;
+  const setItemSelector = (0, import_react32.useCallback)(
+    (newItemSelector) => {
+      dispatch({
+        type: "setUi",
+        ui: { itemSelector: newItemSelector }
+      });
+    },
+    []
+  );
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  const Page = (0, import_react28.useCallback)(
+  const Page = (0, import_react32.useCallback)(
     (pageProps) => {
       var _a2, _b2;
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         PluginRenderer,
         {
           plugins,
           renderMethod: "renderRoot",
-          data: pageProps.data,
+          dispatch: pageProps.dispatch,
+          state: pageProps.state,
           children: ((_a2 = config.root) == null ? void 0 : _a2.render) ? (_b2 = config.root) == null ? void 0 : _b2.render(__spreadProps(__spreadValues({}, pageProps), { editMode: true })) : pageProps.children
         }
       );
     },
     [config.root]
   );
-  const PageFieldWrapper = (0, import_react28.useCallback)(
-    (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  const PageFieldWrapper = (0, import_react32.useCallback)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       PluginRenderer,
       {
         plugins,
         renderMethod: "renderRootFields",
-        data: props.data,
+        dispatch: props.dispatch,
+        state: props.state,
         children: props.children
       }
     ),
     []
   );
-  const ComponentFieldWrapper = (0, import_react28.useCallback)(
-    (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  const ComponentFieldWrapper = (0, import_react32.useCallback)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       PluginRenderer,
       {
         plugins,
         renderMethod: "renderFields",
-        data: props.data,
+        dispatch: props.dispatch,
+        state: props.state,
         children: props.children
       }
     ),
@@ -4178,15 +4648,14 @@ 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_react28.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (onChange)
       onChange(data);
   }, [data]);
   const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-  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,
+  const [draggedItem, setDraggedItem] = (0, import_react32.useState)();
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "puck", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AppProvider, { value: { state: appState, dispatch }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_react_beautiful_dnd5.DragDropContext,
     {
       onDragUpdate: (update) => {
         setDraggedItem(__spreadValues(__spreadValues({}, draggedItem), update));
@@ -4237,7 +4706,7 @@ function Puck({
           });
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         DropZoneProvider,
         {
           value: {
@@ -4251,19 +4720,14 @@ function Puck({
             mode: "edit",
             areaId: "root"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(dropZoneContext.Consumer, { children: (ctx) => {
-            let path = (ctx == null ? void 0 : ctx.pathData) && selectedItem ? ctx == null ? void 0 : ctx.pathData[selectedItem == null ? void 0 : selectedItem.props.id] : void 0;
-            if (path) {
-              path = [{ label: "Page", selector: null }, ...path];
-              path = path.slice(path.length - 2, path.length - 1);
-            }
-            return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(dropZoneContext.Consumer, { children: (ctx) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
               "div",
               {
                 style: {
                   display: "grid",
                   gridTemplateAreas: '"header header header" "left editor right"',
-                  gridTemplateColumns: `${leftSidebarVisible ? "288px" : "0px"} auto 288px`,
+                  gridTemplateColumns: `${leftSideBarVisible ? "288px" : "0px"} auto 288px`,
                   gridTemplateRows: "min-content auto",
                   height: "100vh",
                   position: "fixed",
@@ -4273,7 +4737,7 @@ function Puck({
                   right: 0
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "header",
                     {
                       style: {
@@ -4283,19 +4747,19 @@ function Puck({
                         borderBottom: "1px solid var(--puck-color-grey-8)"
                       },
                       children: renderHeader ? renderHeader({
-                        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                           Button,
                           {
                             onClick: () => {
                               onPublish(data);
                             },
-                            icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(globe_default, { size: "14px" }),
+                            icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(globe_default, { size: "14px" }),
                             children: "Publish"
                           }
                         ),
-                        data,
-                        dispatch
-                      }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                        dispatch,
+                        state: appState
+                      }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                         "div",
                         {
                           style: {
@@ -4306,24 +4770,29 @@ function Puck({
                             gridTemplateRows: "auto"
                           },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                               "div",
                               {
                                 style: {
                                   display: "flex",
                                   gap: 16
                                 },
-                                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                                   IconButton,
                                   {
-                                    onClick: () => setLeftSidebarVisible(!leftSidebarVisible),
+                                    onClick: () => dispatch({
+                                      type: "setUi",
+                                      ui: {
+                                        leftSideBarVisible: !leftSideBarVisible
+                                      }
+                                    }),
                                     title: "Toggle left sidebar",
-                                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(sidebar_default, {})
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(sidebar_default, {})
                                   }
                                 )
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                               "div",
                               {
                                 style: {
@@ -4331,13 +4800,19 @@ function Puck({
                                   justifyContent: "center",
                                   alignItems: "center"
                                 },
-                                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Heading, { rank: 2, size: "xs", children: [
+                                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Heading, { rank: 2, size: "xs", children: [
                                   headerTitle || data.root.title || "Page",
-                                  headerPath && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("small", { style: { fontWeight: 400, marginLeft: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("code", { children: headerPath }) })
+                                  headerPath && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                                    "small",
+                                    {
+                                      style: { fontWeight: 400, marginLeft: 4 },
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("code", { children: headerPath })
+                                    }
+                                  )
                                 ] })
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                               "div",
                               {
                                 style: {
@@ -4346,14 +4821,14 @@ function Puck({
                                   justifyContent: "flex-end"
                                 },
                                 children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex" }, children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex" }, children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                                       IconButton,
                                       {
                                         title: "undo",
                                         disabled: !canRewind,
                                         onClick: rewind,
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                                           chevron_left_default,
                                           {
                                             size: 21,
@@ -4362,13 +4837,13 @@ function Puck({
                                         )
                                       }
                                     ),
-                                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                                       IconButton,
                                       {
                                         title: "redo",
                                         disabled: !canForward,
                                         onClick: forward,
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                                           chevron_right_default,
                                           {
                                             size: 21,
@@ -4378,14 +4853,17 @@ function Puck({
                                       }
                                     )
                                   ] }),
-                                  renderHeaderActions && renderHeaderActions({ data, dispatch }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                  renderHeaderActions && renderHeaderActions({
+                                    state: appState,
+                                    dispatch
+                                  }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                                     Button,
                                     {
                                       onClick: () => {
                                         onPublish(data);
                                       },
-                                      icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(globe_default, { size: "14px" }),
+                                      icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(globe_default, { size: "14px" }),
                                       children: "Publish"
                                     }
                                   )
@@ -4397,7 +4875,7 @@ function Puck({
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                     "div",
                     {
                       style: {
@@ -4409,9 +4887,9 @@ function Puck({
                         flexDirection: "column"
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SidebarSection, { title: "Components", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ComponentList, { config }) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(SidebarSection, { title: "Outline", children: [
-                          (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SidebarSection, { title: "Components", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ComponentList, { config }) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(SidebarSection, { title: "Outline", children: [
+                          (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                             LayerTree,
                             {
                               data,
@@ -4423,7 +4901,7 @@ function Puck({
                           ),
                           Object.entries(findZonesForArea(data, "root")).map(
                             ([zoneKey, zone]) => {
-                              return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                              return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                                 LayerTree,
                                 {
                                   data,
@@ -4441,7 +4919,7 @@ function Puck({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                     "div",
                     {
                       style: {
@@ -4454,7 +4932,7 @@ function Puck({
                       onClick: () => setItemSelector(null),
                       id: "puck-frame",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                           "div",
                           {
                             className: "puck-root",
@@ -4463,18 +4941,26 @@ function Puck({
                               margin: 32,
                               zoom: 0.75
                             },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                            children: /* @__PURE__ */ (0, import_jsx_runtime21.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 }) }))
+                                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                                  Page,
+                                  __spreadProps(__spreadValues({
+                                    dispatch,
+                                    state: appState
+                                  }, data.root), {
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropZone, { zone: rootDroppableId })
+                                  })
+                                )
                               }
                             )
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                           "div",
                           {
                             style: {
@@ -4487,7 +4973,7 @@ function Puck({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "div",
                     {
                       style: {
@@ -4499,12 +4985,11 @@ function Puck({
                         flexDirection: "column",
                         background: "var(--puck-color-white)"
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FieldWrapper, { data, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FieldWrapper, { dispatch, state: appState, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                         SidebarSection,
                         {
                           noPadding: true,
-                          breadcrumbs: path,
-                          breadcrumbClick: (breadcrumb) => setItemSelector(breadcrumb.selector),
+                          showBreadcrumbs: true,
                           title: selectedItem ? selectedItem.type : "Page",
                           children: Object.keys(fields).map((fieldName) => {
                             var _a2, _b2, _c, _d;
@@ -4552,13 +5037,13 @@ function Puck({
                                 });
                               } else {
                                 dispatch({
-                                  type: "set",
+                                  type: "setData",
                                   data: { root: newProps }
                                 });
                               }
                             };
                             if (selectedItem && itemSelector) {
-                              return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                              return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                                 InputOrGroup,
                                 {
                                   field,
@@ -4574,13 +5059,15 @@ function Puck({
                                 `${selectedItem.props.id}_${fieldName}`
                               );
                             } else {
-                              return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                              return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                                 InputOrGroup,
                                 {
                                   field,
                                   name: fieldName,
                                   label: field.label,
-                                  readOnly: ((_d = (_c = data.root._meta) == null ? void 0 : _c.locked) == null ? void 0 : _d.indexOf(fieldName)) > -1,
+                                  readOnly: ((_d = (_c = data.root._meta) == null ? void 0 : _c.locked) == null ? void 0 : _d.indexOf(
+                                    fieldName
+                                  )) > -1,
                                   value: data.root[fieldName],
                                   onChange: onChange2
                                 },
@@ -4599,17 +5086,17 @@ function Puck({
         }
       )
     }
-  ) });
+  ) }) });
 }
 
 // components/Render/index.tsx
 init_react_import();
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function Render({ config, data }) {
   if (config.root) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(config.root.render, __spreadProps(__spreadValues({}, data.root), { editMode: false, id: "puck-root", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropZone, { zone: rootDroppableId }) })) });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(config.root.render, __spreadProps(__spreadValues({}, data.root), { editMode: false, id: "puck-root", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZone, { zone: rootDroppableId }) })) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropZone, { zone: rootDroppableId }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZone, { zone: rootDroppableId }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {