@measured/puck 0.7.1-canary.9b15c6b → 0.7.1-canary.c2d7fae

package/dist/index.js

@@ -147,10 +147,13 @@ var require_classnames = __commonJS({
 var core_exports = {};
 __export(core_exports, {
   Button: () => Button,
+  DropZone: () => DropZone,
+  DropZoneProvider: () => DropZoneProvider,
   FieldLabel: () => FieldLabel,
   IconButton: () => IconButton,
   Puck: () => Puck,
-  Render: () => Render
+  Render: () => Render,
+  dropZoneContext: () => dropZoneContext
 });
 module.exports = __toCommonJS(core_exports);
 init_react_import();
@@ -253,12 +256,584 @@ var Button = ({
   return el;
 };
 
+// components/DropZone/index.tsx
+init_react_import();
+var import_react7 = require("react");
+
+// components/DraggableComponent/index.tsx
+init_react_import();
+var import_react4 = require("react");
+var import_react_beautiful_dnd = require("react-beautiful-dnd");
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
+init_react_import();
+var styles_module_default = { "DraggableComponent": "_DraggableComponent_1nlo8_1", "DraggableComponent--isDragging": "_DraggableComponent--isDragging_1nlo8_6", "DraggableComponent-contents": "_DraggableComponent-contents_1nlo8_12", "DraggableComponent-overlay": "_DraggableComponent-overlay_1nlo8_24", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_1nlo8_39", "DraggableComponent--forceHover": "_DraggableComponent--forceHover_1nlo8_45", "DraggableComponent--indicativeHover": "_DraggableComponent--indicativeHover_1nlo8_50", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_1nlo8_57", "DraggableComponent-actions": "_DraggableComponent-actions_1nlo8_70", "DraggableComponent-actionsLabel": "_DraggableComponent-actionsLabel_1nlo8_93", "DraggableComponent-action": "_DraggableComponent-action_1nlo8_70" };
+
+// components/DraggableComponent/index.tsx
+var import_react_feather = require("react-feather");
+
+// lib/use-modifier-held.ts
+init_react_import();
+var import_react3 = require("react");
+var useModifierHeld = (modifier) => {
+  const [modifierHeld, setModifierHeld] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    function downHandler({ key }) {
+      if (key === modifier) {
+        setModifierHeld(true);
+      }
+    }
+    function upHandler({ key }) {
+      if (key === modifier) {
+        setModifierHeld(false);
+      }
+    }
+    window.addEventListener("keydown", downHandler);
+    window.addEventListener("keyup", upHandler);
+    return () => {
+      window.removeEventListener("keydown", downHandler);
+      window.removeEventListener("keyup", upHandler);
+    };
+  }, [modifier]);
+  return modifierHeld;
+};
+
+// components/DraggableComponent/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var getClassName2 = get_class_name_factory_default("DraggableComponent", styles_module_default);
+var DraggableComponent = ({
+  children,
+  id,
+  index,
+  isSelected = false,
+  onClick = () => null,
+  onMount = () => null,
+  onMouseOver = () => null,
+  onMouseOut = () => null,
+  onDelete = () => null,
+  onDuplicate = () => null,
+  debug,
+  label,
+  isLocked = false,
+  isDragDisabled,
+  forceHover = false,
+  indicativeHover = false,
+  style
+}) => {
+  const isModifierHeld = useModifierHeld("Alt");
+  (0, import_react4.useEffect)(onMount, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_beautiful_dnd.Draggable,
+    {
+      draggableId: id,
+      index,
+      isDragDisabled,
+      children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "div",
+        __spreadProps(__spreadValues(__spreadValues({
+          ref: provided.innerRef
+        }, provided.draggableProps), provided.dragHandleProps), {
+          className: getClassName2({
+            isSelected,
+            isModifierHeld,
+            isDragging: snapshot.isDragging,
+            isLocked,
+            forceHover,
+            indicativeHover
+          }),
+          style: __spreadProps(__spreadValues(__spreadValues({}, style), provided.draggableProps.style), {
+            cursor: isModifierHeld ? "initial" : "grab"
+          }),
+          onMouseOver,
+          onMouseOut,
+          onClick,
+          children: [
+            debug,
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName2("contents"), children }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName2("overlay"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: getClassName2("actions"), children: [
+              label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName2("actionsLabel"), children: label }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: getClassName2("action"), onClick: onDuplicate, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_feather.Copy, { size: 16 }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: getClassName2("action"), onClick: onDelete, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_feather.Trash, { size: 16 }) })
+            ] }) })
+          ]
+        })
+      )
+    },
+    id
+  );
+};
+
+// components/DroppableStrictMode/index.tsx
+init_react_import();
+var import_react5 = 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_react5.useState)(false);
+  (0, import_react5.useEffect)(() => {
+    const animation = requestAnimationFrame(() => setEnabled(true));
+    return () => {
+      cancelAnimationFrame(animation);
+      setEnabled(false);
+    };
+  }, []);
+  if (!enabled) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_beautiful_dnd2.Droppable, __spreadProps(__spreadValues({}, props), { children }));
+};
+var DroppableStrictMode_default = DroppableStrictMode;
+
+// lib/get-item.ts
+init_react_import();
+
+// lib/root-droppable-id.ts
+init_react_import();
+var rootDroppableId = "default-zone";
+
+// lib/setup-zone.ts
+init_react_import();
+var setupZone = (data, zoneKey) => {
+  if (zoneKey === rootDroppableId) {
+    return data;
+  }
+  const newData = __spreadValues({}, data);
+  newData.zones = data.zones || {};
+  newData.zones[zoneKey] = newData.zones[zoneKey] || [];
+  return newData;
+};
+
+// lib/get-item.ts
+var getItem = (selector, data) => {
+  if (!selector.zone || selector.zone === rootDroppableId) {
+    return data.content[selector.index];
+  }
+  return setupZone(data, selector.zone).zones[selector.zone][selector.index];
+};
+
+// lib/index.ts
+init_react_import();
+
+// lib/filter.ts
+init_react_import();
+var filter = (obj, validKeys) => {
+  return validKeys.reduce((acc, item) => {
+    if (typeof obj[item] !== "undefined") {
+      return __spreadProps(__spreadValues({}, acc), { [item]: obj[item] });
+    }
+    return acc;
+  }, {});
+};
+
+// lib/reorder.ts
+init_react_import();
+var reorder = (list, startIndex, endIndex) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+  return result;
+};
+
+// lib/replace.ts
+init_react_import();
+var replace = (list, index, newItem) => {
+  const result = Array.from(list);
+  result.splice(index, 1);
+  result.splice(index, 0, newItem);
+  return result;
+};
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css#css-module
+init_react_import();
+var styles_module_default2 = { "DropZone": "_DropZone_1980k_1", "DropZone-content": "_DropZone-content_1980k_11", "DropZone--userIsDragging": "_DropZone--userIsDragging_1980k_16", "DropZone--draggingOverArea": "_DropZone--draggingOverArea_1980k_20", "DropZone--draggingNewComponent": "_DropZone--draggingNewComponent_1980k_21", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_1980k_27", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_1980k_28", "DropZone--isDisabled": "_DropZone--isDisabled_1980k_29", "DropZone--isRootZone": "_DropZone--isRootZone_1980k_30", "DropZone--hasChildren": "_DropZone--hasChildren_1980k_36", "DropZone--isDestination": "_DropZone--isDestination_1980k_41", "DropZone-item": "_DropZone-item_1980k_49", "DropZone-hitbox": "_DropZone-hitbox_1980k_57" };
+
+// components/DropZone/context.tsx
+init_react_import();
+var import_react6 = require("react");
+var import_use_debounce = require("use-debounce");
+
+// lib/get-zone-id.ts
+init_react_import();
+var getZoneId = (zoneCompound) => {
+  if (!zoneCompound) {
+    return [];
+  }
+  if (zoneCompound && zoneCompound.indexOf(":") > -1) {
+    return zoneCompound.split(":");
+  }
+  return ["root", zoneCompound];
+};
+
+// components/DropZone/context.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var dropZoneContext = (0, import_react6.createContext)(null);
+var DropZoneProvider = ({
+  children,
+  value
+}) => {
+  const [hoveringArea, setHoveringArea] = (0, import_react6.useState)(null);
+  const [hoveringZone, setHoveringZone] = (0, import_react6.useState)(
+    rootDroppableId
+  );
+  const [hoveringComponent, setHoveringComponent] = (0, import_react6.useState)();
+  const [hoveringAreaDb] = (0, import_use_debounce.useDebounce)(hoveringArea, 75, { leading: false });
+  const [areasWithZones, setAreasWithZones] = (0, import_react6.useState)(
+    {}
+  );
+  const [activeZones, setActiveZones] = (0, import_react6.useState)({});
+  const { dispatch = null } = value ? value : {};
+  const registerZoneArea = (0, import_react6.useCallback)(
+    (area) => {
+      setAreasWithZones((latest) => __spreadProps(__spreadValues({}, latest), { [area]: true }));
+    },
+    [setAreasWithZones]
+  );
+  const registerZone = (0, import_react6.useCallback)(
+    (zoneCompound) => {
+      if (!dispatch) {
+        return;
+      }
+      dispatch({
+        type: "registerZone",
+        zone: zoneCompound
+      });
+      setActiveZones((latest) => __spreadProps(__spreadValues({}, latest), { [zoneCompound]: true }));
+    },
+    [setActiveZones, dispatch]
+  );
+  const unregisterZone = (0, import_react6.useCallback)(
+    (zoneCompound) => {
+      if (!dispatch) {
+        return;
+      }
+      dispatch({
+        type: "unregisterZone",
+        zone: zoneCompound
+      });
+      setActiveZones((latest) => __spreadProps(__spreadValues({}, latest), {
+        [zoneCompound]: false
+      }));
+    },
+    [setActiveZones, dispatch]
+  );
+  const [pathData, setPathData] = (0, import_react6.useState)();
+  const registerPath = (0, import_react6.useCallback)(
+    (selector) => {
+      if (!(value == null ? void 0 : value.data)) {
+        return;
+      }
+      const item = getItem(selector, value.data);
+      if (!item) {
+        return;
+      }
+      const [area] = getZoneId(selector.zone);
+      setPathData((latestPathData = {}) => {
+        const pathData2 = latestPathData[area] || [];
+        return __spreadProps(__spreadValues({}, latestPathData), {
+          [item.props.id]: [
+            ...pathData2,
+            {
+              selector,
+              label: item.type
+            }
+          ]
+        });
+      });
+    },
+    [value, setPathData]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: value && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    dropZoneContext.Provider,
+    {
+      value: __spreadValues({
+        hoveringArea: value.draggedItem ? hoveringAreaDb : hoveringArea,
+        setHoveringArea,
+        hoveringZone,
+        setHoveringZone,
+        hoveringComponent,
+        setHoveringComponent,
+        registerZoneArea,
+        areasWithZones,
+        registerZone,
+        unregisterZone,
+        activeZones,
+        registerPath,
+        pathData
+      }, value),
+      children
+    }
+  ) });
+};
+
+// components/DropZone/index.tsx
+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_react7.useContext)(dropZoneContext);
+  const {
+    // These all need setting via context
+    data,
+    dispatch = () => null,
+    config,
+    itemSelector,
+    setItemSelector = () => null,
+    areaId,
+    draggedItem,
+    placeholderStyle,
+    registerZoneArea,
+    areasWithZones,
+    hoveringComponent
+  } = ctx || {};
+  let content = data.content || [];
+  let zoneCompound = rootDroppableId;
+  (0, import_react7.useEffect)(() => {
+    if (areaId && registerZoneArea) {
+      registerZoneArea(areaId);
+    }
+  }, [areaId]);
+  (0, import_react7.useEffect)(() => {
+    if (ctx == null ? void 0 : ctx.registerZone) {
+      ctx == null ? void 0 : ctx.registerZone(zoneCompound);
+    }
+    return () => {
+      if (ctx == null ? void 0 : ctx.unregisterZone) {
+        ctx == null ? void 0 : ctx.unregisterZone(zoneCompound);
+      }
+    };
+  }, []);
+  if (areaId) {
+    if (zone !== rootDroppableId) {
+      zoneCompound = `${areaId}:${zone}`;
+      content = setupZone(data, zoneCompound).zones[zoneCompound];
+    }
+  }
+  const isRootZone = zoneCompound === rootDroppableId || zone === rootDroppableId || areaId === "root";
+  const draggedSourceId = draggedItem && draggedItem.source.droppableId;
+  const draggedDestinationId = draggedItem && ((_a = draggedItem.destination) == null ? void 0 : _a.droppableId);
+  const [zoneArea] = getZoneId(zoneCompound);
+  const [draggedSourceArea] = getZoneId(draggedSourceId);
+  const userIsDragging = !!draggedItem;
+  const draggingOverArea = userIsDragging && zoneArea === draggedSourceArea;
+  const draggingNewComponent = draggedSourceId === "component-list";
+  if (!(ctx == null ? void 0 : ctx.config) || !ctx.setHoveringArea || !ctx.setHoveringZone || !ctx.setHoveringComponent || !ctx.setItemSelector || !ctx.registerPath || !ctx.dispatch) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: "DropZone requires context to work." });
+  }
+  const {
+    hoveringArea = "root",
+    setHoveringArea,
+    hoveringZone,
+    setHoveringZone,
+    setHoveringComponent
+  } = ctx;
+  const hoveringOverArea = hoveringArea ? hoveringArea === zoneArea : isRootZone;
+  const hoveringOverZone = hoveringZone === zoneCompound;
+  let isEnabled = false;
+  if (userIsDragging) {
+    if (draggingNewComponent) {
+      isEnabled = hoveringOverArea;
+    } else {
+      isEnabled = draggingOverArea && hoveringOverZone;
+    }
+  }
+  const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
+  const isAreaSelected = selectedItem && zoneArea === selectedItem.props.id;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      className: getClassName3({
+        isRootZone,
+        userIsDragging,
+        draggingOverArea,
+        hoveringOverArea,
+        draggingNewComponent,
+        isDestination: draggedDestinationId === zoneCompound,
+        isDisabled: !isEnabled,
+        isAreaSelected,
+        hasChildren: content.length > 0
+      }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        DroppableStrictMode_default,
+        {
+          droppableId: zoneCompound,
+          direction: "vertical",
+          isDropDisabled: !isEnabled,
+          children: (provided, snapshot) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              "div",
+              __spreadProps(__spreadValues({}, (provided || { droppableProps: {} }).droppableProps), {
+                className: getClassName3("content"),
+                ref: provided == null ? void 0 : provided.innerRef,
+                style,
+                id: zoneCompound,
+                onMouseOver: (e) => {
+                  e.stopPropagation();
+                  setHoveringArea(zoneArea);
+                  setHoveringZone(zoneCompound);
+                },
+                children: [
+                  content.map((item, i) => {
+                    var _a2;
+                    const componentId = item.props.id;
+                    const defaultedProps = __spreadProps(__spreadValues(__spreadValues({}, (_a2 = config.components[item.type]) == null ? void 0 : _a2.defaultProps), item.props), {
+                      editMode: true
+                    });
+                    const isSelected = (selectedItem == null ? void 0 : selectedItem.props.id) === componentId || false;
+                    const containsZone = areasWithZones ? areasWithZones[componentId] : false;
+                    const Render2 = config.components[item.type] ? config.components[item.type].render : () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
+                      "No configuration for ",
+                      item.type
+                    ] });
+                    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: getClassName3("item"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        DropZoneProvider,
+                        {
+                          value: __spreadProps(__spreadValues({}, ctx), {
+                            areaId: componentId
+                          }),
+                          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                            DraggableComponent,
+                            {
+                              label: item.type.toString(),
+                              id: `draggable-${componentId}`,
+                              index: i,
+                              isSelected,
+                              isLocked: userIsDragging,
+                              forceHover: hoveringComponent === componentId && !userIsDragging,
+                              indicativeHover: userIsDragging && containsZone && hoveringArea === componentId,
+                              onMount: () => {
+                                ctx.registerPath({
+                                  index: i,
+                                  zone: zoneCompound
+                                });
+                              },
+                              onClick: (e) => {
+                                setItemSelector({
+                                  index: i,
+                                  zone: zoneCompound
+                                });
+                                e.stopPropagation();
+                              },
+                              onMouseOver: (e) => {
+                                e.stopPropagation();
+                                if (containsZone) {
+                                  setHoveringArea(componentId);
+                                } else {
+                                  setHoveringArea(zoneArea);
+                                }
+                                setHoveringComponent(componentId);
+                                setHoveringZone(zoneCompound);
+                              },
+                              onMouseOut: () => {
+                                setHoveringArea(null);
+                                setHoveringZone(null);
+                                setHoveringComponent(null);
+                              },
+                              onDelete: (e) => {
+                                dispatch({
+                                  type: "remove",
+                                  index: i,
+                                  zone: zoneCompound
+                                });
+                                setItemSelector(null);
+                                e.stopPropagation();
+                              },
+                              onDuplicate: (e) => {
+                                dispatch({
+                                  type: "duplicate",
+                                  sourceIndex: i,
+                                  sourceZone: zoneCompound
+                                });
+                                setItemSelector({
+                                  zone: zoneCompound,
+                                  index: i + 1
+                                });
+                                e.stopPropagation();
+                              },
+                              style: {
+                                pointerEvents: userIsDragging && draggingNewComponent ? "all" : void 0
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { zoom: 0.75 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Render2, __spreadValues({}, defaultedProps)) })
+                            }
+                          )
+                        }
+                      ),
+                      userIsDragging && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        "div",
+                        {
+                          className: getClassName3("hitbox"),
+                          onMouseOver: (e) => {
+                            e.stopPropagation();
+                            setHoveringArea(zoneArea);
+                            setHoveringZone(zoneCompound);
+                          }
+                        }
+                      )
+                    ] }, item.props.id);
+                  }),
+                  provided == null ? void 0 : provided.placeholder,
+                  (snapshot == null ? void 0 : snapshot.isDraggingOver) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    "div",
+                    {
+                      "data-puck-placeholder": true,
+                      style: __spreadProps(__spreadValues({}, placeholderStyle), {
+                        background: "var(--puck-color-azure-5)",
+                        opacity: 0.3,
+                        zIndex: 0
+                      })
+                    }
+                  )
+                ]
+              })
+            );
+          }
+        }
+      )
+    }
+  );
+}
+function DropZoneRender({ zone }) {
+  const ctx = (0, import_react7.useContext)(dropZoneContext);
+  const { data, areaId = "root", config } = ctx || {};
+  let zoneCompound = rootDroppableId;
+  let content = (data == null ? void 0 : data.content) || [];
+  if (!data || !config) {
+    return null;
+  }
+  if (areaId && zone && zone !== rootDroppableId) {
+    zoneCompound = `${areaId}:${zone}`;
+    content = setupZone(data, zoneCompound).zones[zoneCompound];
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: content.map((item) => {
+    const Component = config.components[item.type];
+    if (Component) {
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        DropZoneProvider,
+        {
+          value: { data, config, areaId: item.props.id },
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Component.render, __spreadValues({}, item.props))
+        },
+        item.props.id
+      );
+    }
+    return null;
+  }) });
+}
+function DropZone(props) {
+  const ctx = (0, import_react7.useContext)(dropZoneContext);
+  if ((ctx == null ? void 0 : ctx.mode) === "edit") {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DropZoneEdit, __spreadValues({}, props));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DropZoneRender, __spreadValues({}, props));
+}
+
 // components/IconButton/index.ts
 init_react_import();
 
 // components/IconButton/IconButton.tsx
 init_react_import();
-var import_react3 = require("react");
+var import_react8 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css#css-module
 init_react_import();
@@ -266,8 +841,8 @@ var IconButton_module_default = { "IconButton": "_IconButton_13gzt_1" };
 
 // components/IconButton/IconButton.tsx
 var import_react_spinners2 = require("react-spinners");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var getClassName2 = get_class_name_factory_default("IconButton", IconButton_module_default);
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var getClassName4 = get_class_name_factory_default("IconButton", IconButton_module_default);
 var IconButton = ({
   children,
   href,
@@ -280,12 +855,12 @@ var IconButton = ({
   fullWidth,
   title
 }) => {
-  const [loading, setLoading] = (0, import_react3.useState)(false);
+  const [loading, setLoading] = (0, import_react8.useState)(false);
   const ElementType = href ? "a" : "button";
-  const el = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  const el = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     ElementType,
     {
-      className: getClassName2({
+      className: getClassName4({
         primary: variant === "primary",
         secondary: variant === "secondary",
         disabled,
@@ -308,9 +883,9 @@ var IconButton = ({
       title,
       children: [
         children,
-        loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
           "\xA0\xA0",
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_spinners2.ClipLoader, { color: "inherit", size: "14px" })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_spinners2.ClipLoader, { color: "inherit", size: "14px" })
         ] })
       ]
     }
@@ -320,129 +895,33 @@ var IconButton = ({
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react8 = require("react");
+var import_react12 = require("react");
 var import_react_beautiful_dnd4 = require("react-beautiful-dnd");
 
-// components/DroppableStrictMode/index.tsx
-init_react_import();
-var import_react4 = require("react");
-var import_react_beautiful_dnd = 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_react4.useState)(false);
-  (0, import_react4.useEffect)(() => {
-    const animation = requestAnimationFrame(() => setEnabled(true));
-    return () => {
-      cancelAnimationFrame(animation);
-      setEnabled(false);
-    };
-  }, []);
-  if (!enabled) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_beautiful_dnd.Droppable, __spreadProps(__spreadValues({}, props), { children }));
-};
-var DroppableStrictMode_default = DroppableStrictMode;
-
-// components/DraggableComponent/index.tsx
-init_react_import();
-var import_react_beautiful_dnd2 = require("react-beautiful-dnd");
-
-// css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
-init_react_import();
-var styles_module_default = { "DraggableComponent": "_DraggableComponent_1ew8n_1", "DraggableComponent-contents": "_DraggableComponent-contents_1ew8n_5", "DraggableComponent-overlay": "_DraggableComponent-overlay_1ew8n_16", "DraggableComponent--isModifierHeld": "_DraggableComponent--isModifierHeld_1ew8n_32", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_1ew8n_36", "DraggableComponent-actions": "_DraggableComponent-actions_1ew8n_41", "DraggableComponent-actionsLabel": "_DraggableComponent-actionsLabel_1ew8n_56", "DraggableComponent-action": "_DraggableComponent-action_1ew8n_41" };
-
-// components/DraggableComponent/index.tsx
-var import_react_feather = require("react-feather");
-
-// lib/use-modifier-held.ts
-init_react_import();
-var import_react5 = require("react");
-var useModifierHeld = (modifier) => {
-  const [modifierHeld, setModifierHeld] = (0, import_react5.useState)(false);
-  function downHandler({ key }) {
-    if (key === modifier) {
-      setModifierHeld(true);
-    }
-  }
-  function upHandler({ key }) {
-    if (key === modifier) {
-      setModifierHeld(false);
-    }
-  }
-  (0, import_react5.useEffect)(() => {
-    window.addEventListener("keydown", downHandler);
-    window.addEventListener("keyup", upHandler);
-    return () => {
-      window.removeEventListener("keydown", downHandler);
-      window.removeEventListener("keyup", upHandler);
-    };
-  }, []);
-  return modifierHeld;
-};
-
-// components/DraggableComponent/index.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var getClassName3 = get_class_name_factory_default("DraggableComponent", styles_module_default);
-var DraggableComponent = ({
-  children,
-  id,
-  index,
-  isSelected = false,
-  onClick = () => null,
-  onDelete = () => null,
-  onDuplicate = () => null,
-  debug,
-  label
-}) => {
-  const isModifierHeld = useModifierHeld("Alt");
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_beautiful_dnd2.Draggable, { draggableId: id, index, children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "div",
-    __spreadProps(__spreadValues(__spreadValues({
-      ref: provided.innerRef
-    }, provided.draggableProps), provided.dragHandleProps), {
-      className: getClassName3({ isSelected, isModifierHeld }),
-      style: __spreadProps(__spreadValues({}, provided.draggableProps.style), {
-        cursor: isModifierHeld ? "initial" : "grab"
-      }),
-      children: [
-        debug,
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassName3("contents"), children }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassName3("overlay"), onClick, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: getClassName3("actions"), children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassName3("actionsLabel"), children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: getClassName3("action"), onClick: onDuplicate, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_feather.Copy, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: getClassName3("action"), onClick: onDelete, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_feather.Trash, {}) })
-        ] }) })
-      ]
-    })
-  ) }, id);
-};
-
 // components/InputOrGroup/index.tsx
 init_react_import();
 
 // components/ExternalInput/index.tsx
 init_react_import();
-var import_react6 = require("react");
+var import_react9 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
 init_react_import();
-var styles_module_default2 = { "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" };
+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
 var import_react_feather2 = require("react-feather");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var getClassName4 = get_class_name_factory_default("ExternalInput", styles_module_default2);
+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
 }) => {
-  const [data, setData] = (0, import_react6.useState)([]);
-  const [isOpen, setOpen] = (0, import_react6.useState)(false);
-  const [selectedData, setSelectedData] = (0, import_react6.useState)(value);
-  (0, import_react6.useEffect)(() => {
+  const [data, setData] = (0, import_react9.useState)([]);
+  const [isOpen, setOpen] = (0, import_react9.useState)(false);
+  const [selectedData, setSelectedData] = (0, import_react9.useState)(value);
+  (0, import_react9.useEffect)(() => {
     (() => __async(void 0, null, function* () {
       if (field.adaptor) {
         const listData = yield field.adaptor.fetchList(field.adaptorParams);
@@ -453,35 +932,35 @@ var ExternalInput = ({
     }))();
   }, [field.adaptor, field.adaptorParams]);
   if (!field.adaptor) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: "Incorrectly configured" });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: "Incorrectly configured" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
-      className: getClassName4({
+      className: getClassName5({
         hasData: !!selectedData,
         modalVisible: isOpen
       }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: getClassName4("actions"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: getClassName5("actions"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
               onClick: () => setOpen(true),
-              className: getClassName4("button"),
-              children: selectedData ? field.getItemSummary ? field.getItemSummary(selectedData) : `${field.adaptor.name} item` : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_feather2.Link, { size: "16" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+              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)(import_react_feather2.Link, { size: "16" }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
                   "Select from ",
                   field.adaptor.name
                 ] })
               ] })
             }
           ),
-          selectedData && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          selectedData && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
-              className: getClassName4("detachButton"),
+              className: getClassName5("detachButton"),
               onClick: () => {
                 setSelectedData(null);
                 onChange(null);
@@ -490,17 +969,17 @@ var ExternalInput = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: getClassName4("modal"), onClick: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName5("modal"), onClick: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
           {
-            className: getClassName4("modalInner"),
+            className: getClassName5("modalInner"),
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: getClassName4("modalHeading"), children: "Select content" }),
-              data.length ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: getClassName4("modalTableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: Object.keys(data[0]).map((key) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { style: { textAlign: "left" }, children: key }, key)) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { children: data.map((item, i) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__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" },
@@ -509,12 +988,12 @@ var ExternalInput = ({
                         setOpen(false);
                         setSelectedData(item);
                       },
-                      children: Object.keys(item).map((key) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { children: item[key] }, key))
+                      children: Object.keys(item).map((key) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { children: item[key] }, key))
                     },
                     i
                   );
                 }) })
-              ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { padding: 24 }, children: "No content" })
+              ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { padding: 24 }, children: "No content" })
             ]
           }
         ) })
@@ -525,52 +1004,20 @@ var ExternalInput = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css#css-module
 init_react_import();
-var styles_module_default3 = { "Input": "_Input_kf9j8_1", "Input-label": "_Input-label_kf9j8_27", "Input-labelIcon": "_Input-labelIcon_kf9j8_34", "Input-input": "_Input-input_kf9j8_39", "Input--readOnly": "_Input--readOnly_kf9j8_60", "Input-arrayItem": "_Input-arrayItem_kf9j8_69", "Input-arrayItemAction": "_Input-arrayItemAction_kf9j8_112", "Input-addButton": "_Input-addButton_kf9j8_131", "Input-array": "_Input-array_kf9j8_69", "Input-radioGroupItems": "_Input-radioGroupItems_kf9j8_152", "Input-radio": "_Input-radio_kf9j8_152", "Input-radioInner": "_Input-radioInner_kf9j8_169" };
-
-// lib/index.ts
-init_react_import();
-
-// lib/filter.ts
-init_react_import();
-var filter = (obj, validKeys) => {
-  return validKeys.reduce((acc, item) => {
-    if (typeof obj[item] !== "undefined") {
-      return __spreadProps(__spreadValues({}, acc), { [item]: obj[item] });
-    }
-    return acc;
-  }, {});
-};
-
-// lib/reorder.ts
-init_react_import();
-var reorder = (list, startIndex, endIndex) => {
-  const result = Array.from(list);
-  const [removed] = result.splice(startIndex, 1);
-  result.splice(endIndex, 0, removed);
-  return result;
-};
-
-// lib/replace.ts
-init_react_import();
-var replace = (list, index, newItem) => {
-  const result = Array.from(list);
-  result.splice(index, 1);
-  result.splice(index, 0, newItem);
-  return result;
-};
+var styles_module_default4 = { "Input": "_Input_16exs_1", "Input-label": "_Input-label_16exs_27", "Input-labelIcon": "_Input-labelIcon_16exs_34", "Input-input": "_Input-input_16exs_39", "Input--readOnly": "_Input--readOnly_16exs_60", "Input-arrayItem": "_Input-arrayItem_16exs_69", "Input-fieldset": "_Input-fieldset_16exs_95", "Input-arrayItemAction": "_Input-arrayItemAction_16exs_117", "Input-addButton": "_Input-addButton_16exs_136", "Input-array": "_Input-array_16exs_69", "Input-radioGroupItems": "_Input-radioGroupItems_16exs_157", "Input-radio": "_Input-radio_16exs_157", "Input-radioInner": "_Input-radioInner_16exs_174", "Input-radioInput": "_Input-radioInput_16exs_186" };
 
 // components/InputOrGroup/index.tsx
 var import_react_feather3 = require("react-feather");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var getClassName5 = get_class_name_factory_default("Input", styles_module_default3);
+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_runtime6.jsxs)("label", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: getClassName5("label"), children: [
-      icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: getClassName5("labelIcon") }),
+  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") }),
       label
     ] }),
     children
@@ -588,20 +1035,20 @@ var InputOrGroup = ({
     if (!field.arrayFields) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: getClassName5(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("b", { className: getClassName5("label"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: getClassName5("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_feather3.List, { size: 16 }) }),
+    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)(import_react_feather3.List, { size: 16 }) }),
         label || name
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: getClassName5("array"), children: [
-        Array.isArray(value) ? value.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      /* @__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: getClassName5("arrayItem"),
+            className: getClassName6("arrayItem"),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("summary", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("summary", { children: [
                 field.getItemSummary ? field.getItemSummary(item, i) : `Item #${i}`,
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: getClassName5("arrayItemAction"), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("arrayItemAction"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   IconButton,
                   {
                     onClick: () => {
@@ -610,17 +1057,17 @@ var InputOrGroup = ({
                       onChange(existingValue);
                     },
                     title: "Delete",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_feather3.Trash, { size: 21 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_feather3.Trash, { size: 21 })
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("fieldset", { children: Object.keys(field.arrayFields).map((fieldName) => {
+              /* @__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_runtime6.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   InputOrGroup,
                   {
                     name: `${name}_${i}_${fieldName}`,
-                    label: fieldName,
+                    label: subField.label || fieldName,
                     field: subField,
                     value: item[fieldName],
                     onChange: (val) => onChange(
@@ -633,11 +1080,11 @@ var InputOrGroup = ({
             ]
           },
           `${name}_${i}`
-        )) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        )) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "button",
           {
-            className: getClassName5("addButton"),
+            className: getClassName6("addButton"),
             onClick: () => {
               const existingValue = value || [];
               onChange([...existingValue, field.defaultItemProps || {}]);
@@ -652,24 +1099,24 @@ var InputOrGroup = ({
     if (!field.adaptor) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: getClassName5(""), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: getClassName5("label"), children: name === "_data" ? "External content" : label || name }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ExternalInput, { field, onChange, value })
+    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_runtime6.jsxs)("label", { className: getClassName5(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: getClassName5("label"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: getClassName5("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_feather3.ChevronDown, { size: 16 }) }),
+    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)(import_react_feather3.ChevronDown, { size: 16 }) }),
         label || name
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "select",
         {
-          className: getClassName5("input"),
+          className: getClassName6("input"),
           onChange: (e) => {
             if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
               onChange(Boolean(e.currentTarget.value));
@@ -678,7 +1125,7 @@ var InputOrGroup = ({
             onChange(e.currentTarget.value);
           },
           value,
-          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "option",
             {
               label: option.label,
@@ -691,18 +1138,18 @@ var InputOrGroup = ({
     ] });
   }
   if (field.type === "textarea") {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: getClassName5({ readOnly }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: getClassName5("label"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: getClassName5("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_feather3.Type, { size: 16 }) }),
+    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)(import_react_feather3.Type, { size: 16 }) }),
         label || name
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "textarea",
         {
-          className: getClassName5("input"),
+          className: getClassName6("input"),
           autoComplete: "off",
           name,
-          value,
+          value: typeof value === "undefined" ? "" : value,
           onChange: (e) => onChange(e.currentTarget.value),
           readOnly,
           rows: 5
@@ -714,20 +1161,21 @@ var InputOrGroup = ({
     if (!field.options) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: getClassName5(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: getClassName5("radioGroup"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: getClassName5("label"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: getClassName5("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_feather3.CheckCircle, { size: 16 }) }),
+    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)(import_react_feather3.CheckCircle, { size: 16 }) }),
         field.label || name
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: getClassName5("radioGroupItems"), children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("radioGroupItems"), children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "label",
         {
-          className: getClassName5("radio"),
+          className: getClassName6("radio"),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "input",
               {
                 type: "radio",
+                className: getClassName6("radioInput"),
                 value: option.value,
                 name,
                 onChange: (e) => {
@@ -741,7 +1189,7 @@ var InputOrGroup = ({
                 defaultChecked: value === option.value
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: getClassName5("radioInner"), children: option.label || option.value })
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("radioInner"), children: option.label || option.value })
           ]
         },
         option.label + option.value
@@ -752,7 +1200,7 @@ var InputOrGroup = ({
     if (!field.render) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: getClassName5(), children: field.render({
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6(), children: field.render({
       field,
       name,
       value,
@@ -760,23 +1208,29 @@ var InputOrGroup = ({
       readOnly
     }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: getClassName5({ readOnly }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: getClassName5("label"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: getClassName5("labelIcon"), children: [
-        field.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_feather3.Type, { size: 16 }),
-        field.type === "number" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_feather3.Hash, { size: 16 })
+  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)(import_react_feather3.Type, { size: 16 }),
+        field.type === "number" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_feather3.Hash, { size: 16 })
       ] }),
       label || name
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "input",
       {
-        className: getClassName5("input"),
+        className: getClassName6("input"),
         autoComplete: "off",
         type: field.type,
         name,
-        value,
-        onChange: (e) => onChange(e.currentTarget.value),
+        value: typeof value === "undefined" ? "" : value,
+        onChange: (e) => {
+          if (field.type === "number") {
+            onChange(Number(e.currentTarget.value));
+          } else {
+            onChange(e.currentTarget.value);
+          }
+        },
         readOnly
       }
     )
@@ -789,220 +1243,644 @@ 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_default4 = { "ComponentList": "_ComponentList_1sym6_1", "ComponentList-item": "_ComponentList-item_1sym6_8", "ComponentList-itemShadow": "_ComponentList-itemShadow_1sym6_9", "ComponentList-itemIcon": "_ComponentList-itemIcon_1sym6_28" };
+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" };
 
 // components/ComponentList/index.tsx
 var import_react_feather4 = require("react-feather");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var getClassName6 = get_class_name_factory_default("ComponentList", styles_module_default4);
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var getClassName7 = get_class_name_factory_default("ComponentList", styles_module_default5);
 var ComponentList = ({ config }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DroppableStrictMode_default, { droppableId: "component-list", isDropDisabled: true, children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DroppableStrictMode_default, { droppableId: "component-list", isDropDisabled: true, children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     __spreadProps(__spreadValues({}, provided.droppableProps), {
       ref: provided.innerRef,
-      className: getClassName6(),
-      children: Object.keys(config.components).map((componentKey, i) => {
-        const componentConfig = config[componentKey];
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_react_beautiful_dnd3.Draggable,
-          {
-            draggableId: componentKey,
-            index: i,
-            children: (provided2, snapshot2) => {
-              var _a;
-              return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-                  "div",
-                  __spreadProps(__spreadValues(__spreadValues({
-                    ref: provided2.innerRef
-                  }, provided2.draggableProps), provided2.dragHandleProps), {
-                    className: getClassName6("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_runtime7.jsx)("div", { className: getClassName6("itemIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_feather4.Grid, { size: 18 }) })
-                    ]
-                  })
-                ),
-                snapshot2.isDragging && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-                  "div",
-                  {
-                    className: getClassName6("itemShadow"),
-                    style: { transform: "none !important" },
-                    children: [
-                      componentKey,
-                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName6("itemIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_feather4.Grid, { size: 18 }) })
-                    ]
-                  }
-                )
-              ] });
-            }
-          },
-          componentKey
-        );
-      })
+      className: getClassName7(),
+      children: [
+        Object.keys(config.components).map((componentKey, i) => {
+          const componentConfig = config[componentKey];
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            import_react_beautiful_dnd3.Draggable,
+            {
+              draggableId: 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)(import_react_feather4.Grid, { 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)(import_react_feather4.Grid, { size: 18 }) })
+                      ]
+                    }
+                  )
+                ] });
+              }
+            },
+            componentKey
+          );
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "none" }, children: provided.placeholder })
+      ]
     })
   ) });
 };
 
-// components/OutlineList/index.tsx
+// lib/use-placeholder-style.ts
+init_react_import();
+var import_react10 = require("react");
+var usePlaceholderStyle = () => {
+  const queryAttr = "data-rbd-drag-handle-draggable-id";
+  const [placeholderStyle, setPlaceholderStyle] = (0, import_react10.useState)();
+  const onDragStartOrUpdate = (draggedItem) => {
+    var _a;
+    const draggableId = draggedItem.draggableId;
+    const destinationIndex = (draggedItem.destination || draggedItem.source).index;
+    const droppableId = (draggedItem.destination || draggedItem.source).droppableId;
+    const domQuery = `[${queryAttr}='${draggableId}']`;
+    const draggedDOM = document.querySelector(domQuery);
+    if (!draggedDOM) {
+      return;
+    }
+    const targetListElement = document.querySelector(
+      `[data-rbd-droppable-id='${droppableId}']`
+    );
+    const { clientHeight } = draggedDOM;
+    if (!targetListElement) {
+      return;
+    }
+    let clientY = 0;
+    const isSameDroppable = draggedItem.source.droppableId === ((_a = draggedItem.destination) == null ? void 0 : _a.droppableId);
+    if (destinationIndex > 0) {
+      const end = destinationIndex > draggedItem.source.index && isSameDroppable ? destinationIndex + 1 : destinationIndex;
+      const children = Array.from(targetListElement.children).filter(
+        (item) => item !== draggedDOM && item.getAttributeNames().indexOf("data-puck-placeholder") === -1 && item.getAttributeNames().indexOf("data-rbd-placeholder-context-id") === -1
+      ).slice(0, end);
+      clientY = children.reduce(
+        (total, item) => total + item.clientHeight + parseInt(window.getComputedStyle(item).marginTop.replace("px", "")) + parseInt(
+          window.getComputedStyle(item).marginBottom.replace("px", "")
+        ),
+        0
+      );
+    }
+    setPlaceholderStyle({
+      position: "absolute",
+      top: clientY,
+      left: 0,
+      height: clientHeight,
+      width: "100%"
+    });
+  };
+  return { onDragStartOrUpdate, placeholderStyle };
+};
+
+// components/SidebarSection/index.tsx
 init_react_import();
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/OutlineList/styles.module.css#css-module
+// css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
 init_react_import();
-var styles_module_default5 = { "OutlineList": "_OutlineList_gor6f_1", "OutlineList-clickableItem": "_OutlineList-clickableItem_gor6f_36" };
+var styles_module_default6 = { "SidebarSection": "_SidebarSection_ivnrs_1", "SidebarSection-title": "_SidebarSection-title_ivnrs_11", "SidebarSection-content": "_SidebarSection-content_ivnrs_18", "SidebarSection--noPadding": "_SidebarSection--noPadding_ivnrs_23", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_ivnrs_32", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_ivnrs_43", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_ivnrs_32", "SidebarSection-heading": "_SidebarSection-heading_ivnrs_55" };
 
-// components/OutlineList/index.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var getClassName7 = get_class_name_factory_default("OutlineList", styles_module_default5);
-var OutlineList = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: getClassName7(), children });
-};
-OutlineList.Clickable = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName7("clickableItem"), children });
-OutlineList.Item = ({
-  children,
-  onClick
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    "li",
+// 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_1y35v_1", "Heading--xxxxl": "_Heading--xxxxl_1y35v_12", "Heading--xxxl": "_Heading--xxxl_1y35v_18", "Heading--xxl": "_Heading--xxl_1y35v_22", "Heading--xl": "_Heading--xl_1y35v_26", "Heading--l": "_Heading--l_1y35v_30", "Heading--m": "_Heading--m_1y35v_34", "Heading--s": "_Heading--s_1y35v_38", "Heading--xs": "_Heading--xs_1y35v_42" };
+
+// components/Heading/index.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var getClassName8 = get_class_name_factory_default("Heading", styles_module_default7);
+var Heading = ({ children, rank, size = "m" }) => {
+  const Tag = rank ? `h${rank}` : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    Tag,
     {
-      className: onClick ? getClassName7("clickableItem") : "",
-      onClick,
+      className: getClassName8({
+        [size]: true
+      }),
       children
     }
   );
 };
 
-// lib/use-placeholder-style.ts
+// components/SidebarSection/index.tsx
+var import_react_feather5 = require("react-feather");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var getClassName9 = get_class_name_factory_default("SidebarSection", styles_module_default6);
+var SidebarSection = ({
+  children,
+  title,
+  background,
+  breadcrumbs = [],
+  breadcrumbClick,
+  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)(
+          "div",
+          {
+            className: getClassName9("breadcrumbLabel"),
+            onClick: () => breadcrumbClick && breadcrumbClick(breadcrumb),
+            children: breadcrumb.label
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_feather5.ChevronRight, { 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_runtime11.jsx)("div", { className: getClassName9("content"), children })
+  ] });
+};
+
+// components/Puck/index.tsx
+var import_react_feather7 = require("react-feather");
+
+// lib/reducer.ts
 init_react_import();
-var import_react7 = require("react");
-var usePlaceholderStyle = () => {
-  const queryAttr = "data-rbd-drag-handle-draggable-id";
-  const [placeholderStyle, setPlaceholderStyle] = (0, import_react7.useState)();
-  const onDragUpdate = (update) => {
-    if (!update.destination) {
-      return;
+
+// lib/insert.ts
+init_react_import();
+var insert = (list, index, item) => {
+  const result = Array.from(list);
+  result.splice(index, 0, item);
+  return result;
+};
+
+// lib/remove.ts
+init_react_import();
+var remove = (list, index) => {
+  const result = Array.from(list);
+  result.splice(index, 1);
+  return result;
+};
+
+// 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(
+      (acc, key) => {
+        const [parentId] = getZoneId(key);
+        if (parentId === item.props.id) {
+          const zones = data.zones;
+          return fn(acc, key, zones[key]);
+        }
+        return __spreadProps(__spreadValues({}, acc), { [key]: data.zones[key] });
+      },
+      {}
+    )
+  });
+};
+var findRelatedByZoneId = (zoneId, data) => {
+  const [zoneParentId] = getZoneId(zoneId);
+  return (data.zones[zoneId] || []).reduce((acc, zoneItem) => {
+    const related = findRelatedByItem(zoneItem, data);
+    if (zoneItem.props.id === zoneParentId) {
+      return __spreadProps(__spreadValues(__spreadValues({}, acc), related), { [zoneId]: zoneItem });
+    }
+    return __spreadValues(__spreadValues({}, acc), related);
+  }, {});
+};
+var findRelatedByItem = (item, data) => {
+  return Object.keys(data.zones || {}).reduce((acc, zoneId) => {
+    const [zoneParentId] = getZoneId(zoneId);
+    if (item.props.id === zoneParentId) {
+      const related = findRelatedByZoneId(zoneId, data);
+      return __spreadProps(__spreadValues(__spreadValues({}, acc), related), {
+        [zoneId]: data.zones[zoneId]
+      });
+    }
+    return acc;
+  }, {});
+};
+var removeRelatedZones = (item, data) => {
+  const newData = __spreadValues({}, data);
+  const related = findRelatedByItem(item, data);
+  Object.keys(related).forEach((key) => {
+    delete newData.zones[key];
+  });
+  return newData;
+};
+var duplicateRelatedZones = (item, data, newId) => {
+  return reduceRelatedZones(item, data, (acc, key, zone) => {
+    const dupedZone = zone.map((zoneItem) => __spreadProps(__spreadValues({}, zoneItem), {
+      props: __spreadProps(__spreadValues({}, zoneItem.props), { id: generateId(zoneItem.type) })
+    }));
+    const dupeOfDupes = dupedZone.reduce(
+      (dupeOfDupes2, item2, index) => __spreadValues(__spreadValues({}, dupeOfDupes2), duplicateRelatedZones(zone[index], data, item2.props.id).zones),
+      acc
+    );
+    const [_, zoneId] = getZoneId(key);
+    return __spreadProps(__spreadValues({}, dupeOfDupes), {
+      [key]: zone,
+      [`${newId}:${zoneId}`]: dupedZone
+    });
+  });
+};
+
+// lib/reducer.ts
+var zoneCache = {};
+var addToZoneCache = (key, data) => {
+  zoneCache[key] = data;
+};
+var createReducer = ({ config }) => (data, action) => {
+  if (action.type === "insert") {
+    const emptyComponentData = {
+      type: action.componentType,
+      props: __spreadProps(__spreadValues({}, config.components[action.componentType].defaultProps || {}), {
+        id: generateId(action.componentType)
+      })
+    };
+    if (action.destinationZone === rootDroppableId) {
+      return __spreadProps(__spreadValues({}, data), {
+        content: insert(
+          data.content,
+          action.destinationIndex,
+          emptyComponentData
+        )
+      });
+    }
+    const newData = setupZone(data, action.destinationZone);
+    return __spreadProps(__spreadValues({}, data), {
+      zones: __spreadProps(__spreadValues({}, newData.zones), {
+        [action.destinationZone]: insert(
+          newData.zones[action.destinationZone],
+          action.destinationIndex,
+          emptyComponentData
+        )
+      })
+    });
+  }
+  if (action.type === "duplicate") {
+    const item = getItem(
+      { index: action.sourceIndex, zone: action.sourceZone },
+      data
+    );
+    const newItem = __spreadProps(__spreadValues({}, item), {
+      props: __spreadProps(__spreadValues({}, item.props), {
+        id: generateId(item.type)
+      })
+    });
+    const dataWithRelatedDuplicated = duplicateRelatedZones(
+      item,
+      data,
+      newItem.props.id
+    );
+    if (action.sourceZone === rootDroppableId) {
+      return __spreadProps(__spreadValues({}, dataWithRelatedDuplicated), {
+        content: insert(data.content, action.sourceIndex + 1, newItem)
+      });
+    }
+    return __spreadProps(__spreadValues({}, dataWithRelatedDuplicated), {
+      zones: __spreadProps(__spreadValues({}, dataWithRelatedDuplicated.zones), {
+        [action.sourceZone]: insert(
+          dataWithRelatedDuplicated.zones[action.sourceZone],
+          action.sourceIndex + 1,
+          newItem
+        )
+      })
+    });
+  }
+  if (action.type === "reorder") {
+    if (action.destinationZone === rootDroppableId) {
+      return __spreadProps(__spreadValues({}, data), {
+        content: reorder(
+          data.content,
+          action.sourceIndex,
+          action.destinationIndex
+        )
+      });
     }
-    const draggableId = update.draggableId;
-    const destinationIndex = update.destination.index;
-    const domQuery = `[${queryAttr}='${draggableId}']`;
-    const draggedDOM = document.querySelector(domQuery);
-    if (!draggedDOM) {
-      return;
+    const newData = setupZone(data, action.destinationZone);
+    return __spreadProps(__spreadValues({}, data), {
+      zones: __spreadProps(__spreadValues({}, newData.zones), {
+        [action.destinationZone]: reorder(
+          newData.zones[action.destinationZone],
+          action.sourceIndex,
+          action.destinationIndex
+        )
+      })
+    });
+  }
+  if (action.type === "move") {
+    const newData = setupZone(
+      setupZone(data, action.sourceZone),
+      action.destinationZone
+    );
+    const item = getItem(
+      { zone: action.sourceZone, index: action.sourceIndex },
+      newData
+    );
+    if (action.sourceZone === rootDroppableId) {
+      return __spreadProps(__spreadValues({}, newData), {
+        content: remove(newData.content, action.sourceIndex),
+        zones: __spreadProps(__spreadValues({}, newData.zones), {
+          [action.destinationZone]: insert(
+            newData.zones[action.destinationZone],
+            action.destinationIndex,
+            item
+          )
+        })
+      });
     }
-    const targetListElement = document.querySelector("#puck-drop-zone");
-    const { clientHeight } = draggedDOM;
-    if (!targetListElement) {
-      return;
+    if (action.destinationZone === rootDroppableId) {
+      return __spreadProps(__spreadValues({}, newData), {
+        content: insert(newData.content, action.destinationIndex, item),
+        zones: __spreadProps(__spreadValues({}, newData.zones), {
+          [action.sourceZone]: remove(
+            newData.zones[action.sourceZone],
+            action.sourceIndex
+          )
+        })
+      });
     }
-    let clientY = 0;
-    if (destinationIndex > 0) {
-      const children = Array.from(targetListElement.children).filter((item) => item !== draggedDOM).slice(0, destinationIndex);
-      clientY = children.reduce(
-        (total, item) => total + item.clientHeight + parseInt(window.getComputedStyle(item).marginTop.replace("px", "")) + parseInt(
-          window.getComputedStyle(item).marginBottom.replace("px", "")
+    return __spreadProps(__spreadValues({}, newData), {
+      zones: __spreadProps(__spreadValues({}, newData.zones), {
+        [action.sourceZone]: remove(
+          newData.zones[action.sourceZone],
+          action.sourceIndex
         ),
-        0
-      );
+        [action.destinationZone]: insert(
+          newData.zones[action.destinationZone],
+          action.destinationIndex,
+          item
+        )
+      })
+    });
+  }
+  if (action.type === "replace") {
+    if (action.destinationZone === rootDroppableId) {
+      return __spreadProps(__spreadValues({}, data), {
+        content: replace(data.content, action.destinationIndex, action.data)
+      });
     }
-    setPlaceholderStyle({
-      position: "absolute",
-      top: clientY,
-      left: 0,
-      height: clientHeight,
-      width: "100%"
+    const newData = setupZone(data, action.destinationZone);
+    return __spreadProps(__spreadValues({}, newData), {
+      zones: __spreadProps(__spreadValues({}, newData.zones), {
+        [action.destinationZone]: replace(
+          newData.zones[action.destinationZone],
+          action.destinationIndex,
+          action.data
+        )
+      })
     });
-  };
-  return { onDragUpdate, placeholderStyle };
+  }
+  if (action.type === "remove") {
+    const item = getItem({ index: action.index, zone: action.zone }, data);
+    const dataWithRelatedRemoved = setupZone(
+      removeRelatedZones(item, data),
+      action.zone
+    );
+    if (action.zone === rootDroppableId) {
+      return __spreadProps(__spreadValues({}, dataWithRelatedRemoved), {
+        content: remove(data.content, action.index)
+      });
+    }
+    return __spreadProps(__spreadValues({}, dataWithRelatedRemoved), {
+      zones: __spreadProps(__spreadValues({}, dataWithRelatedRemoved.zones), {
+        [action.zone]: remove(
+          dataWithRelatedRemoved.zones[action.zone],
+          action.index
+        )
+      })
+    });
+  }
+  if (action.type === "registerZone") {
+    if (zoneCache[action.zone]) {
+      return __spreadProps(__spreadValues({}, data), {
+        zones: __spreadProps(__spreadValues({}, data.zones), {
+          [action.zone]: zoneCache[action.zone]
+        })
+      });
+    }
+    return setupZone(data, action.zone);
+  }
+  if (action.type === "unregisterZone") {
+    const _zones = __spreadValues({}, data.zones || {});
+    if (_zones[action.zone]) {
+      zoneCache[action.zone] = _zones[action.zone];
+      delete _zones[action.zone];
+    }
+    return __spreadProps(__spreadValues({}, data), { zones: _zones });
+  }
+  if (action.type === "set") {
+    return __spreadValues(__spreadValues({}, data), action.data);
+  }
+  return data;
 };
 
-// components/SidebarSection/index.tsx
+// components/LayerTree/index.tsx
 init_react_import();
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
+// css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css#css-module
 init_react_import();
-var styles_module_default6 = { "SidebarSection": "_SidebarSection_1y6bv_1", "SidebarSection-title": "_SidebarSection-title_1y6bv_11", "SidebarSection-content": "_SidebarSection-content_1y6bv_17", "SidebarSection--noPadding": "_SidebarSection--noPadding_1y6bv_22", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_1y6bv_31" };
+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" };
 
-// components/Heading/index.tsx
+// lib/scroll-into-view.ts
 init_react_import();
+var scrollIntoView = (el) => {
+  const oldStyle = __spreadValues({}, el.style);
+  el.style.scrollMargin = "256px";
+  if (el) {
+    el == null ? void 0 : el.scrollIntoView({ behavior: "smooth" });
+    el.style.scrollMargin = oldStyle.scrollMargin || "";
+  }
+};
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css#css-module
+// components/LayerTree/index.tsx
+var import_react_feather6 = require("react-feather");
+var import_react11 = require("react");
+
+// lib/find-zones-for-area.ts
 init_react_import();
-var styles_module_default7 = { "Heading": "_Heading_1y35v_1", "Heading--xxxxl": "_Heading--xxxxl_1y35v_12", "Heading--xxxl": "_Heading--xxxl_1y35v_18", "Heading--xxl": "_Heading--xxl_1y35v_22", "Heading--xl": "_Heading--xl_1y35v_26", "Heading--l": "_Heading--l_1y35v_30", "Heading--m": "_Heading--m_1y35v_34", "Heading--s": "_Heading--s_1y35v_38", "Heading--xs": "_Heading--xs_1y35v_42" };
+var findZonesForArea = (data, area) => {
+  const { zones = {} } = data;
+  const result = Object.keys(zones).filter(
+    (zoneId) => getZoneId(zoneId)[0] === area
+  );
+  return result.reduce((acc, key) => {
+    return __spreadProps(__spreadValues({}, acc), { [key]: zones[key] });
+  }, {});
+};
 
-// components/Heading/index.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var getClassName8 = get_class_name_factory_default("Heading", styles_module_default7);
-var Heading = ({ children, rank, size = "m" }) => {
-  const Tag = rank ? `h${rank}` : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    Tag,
-    {
-      className: getClassName8({
-        [size]: true
-      }),
-      children
+// lib/is-child-of-zone.ts
+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;
+  })) : false;
 };
 
-// components/SidebarSection/index.tsx
-var import_react_feather5 = require("react-feather");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var getClassName9 = get_class_name_factory_default("SidebarSection", styles_module_default6);
-var SidebarSection = ({
-  children,
-  title,
-  background,
-  breadcrumb,
-  breadcrumbClick,
-  noPadding
+// 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 LayerTree = ({
+  data,
+  zoneContent,
+  itemSelector,
+  setItemSelector,
+  zone,
+  label
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: getClassName9({ noPadding }), style: { background }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: getClassName9("title"), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-      "span",
-      {
-        style: {
-          display: "flex",
-          gap: 4,
-          alignItems: "center"
-        },
-        children: [
-          breadcrumb && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              "div",
-              {
-                className: getClassName9("breadcrumb"),
-                onClick: breadcrumbClick,
-                children: breadcrumb
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_feather5.ChevronRight, { size: 16 })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Heading, { rank: 2, size: "xs", children: title })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: getClassName9("content"), children })
+  const zones = data.zones || {};
+  const ctx = (0, import_react11.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)(import_react_feather6.Layers, { 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" }),
+      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);
+        const containsZone = Object.keys(zonesForItem).length > 0;
+        const {
+          setHoveringArea = () => {
+          },
+          setHoveringComponent = () => {
+          },
+          hoveringComponent
+        } = ctx || {};
+        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)(
+          "li",
+          {
+            className: getClassNameLayer({
+              isSelected,
+              isHovering,
+              containsZone,
+              childIsSelected
+            }),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                "div",
+                {
+                  className: getClassNameLayer("clickable"),
+                  onClick: () => {
+                    if (isSelected) {
+                      setItemSelector(null);
+                      return;
+                    }
+                    setItemSelector({
+                      index: i,
+                      zone
+                    });
+                    const id = zoneContent[i].props.id;
+                    scrollIntoView(
+                      document.querySelector(
+                        `[data-rbd-drag-handle-draggable-id="draggable-${id}"]`
+                      )
+                    );
+                  },
+                  onMouseOver: (e) => {
+                    e.stopPropagation();
+                    setHoveringArea(item.props.id);
+                    setHoveringComponent(item.props.id);
+                  },
+                  onMouseOut: (e) => {
+                    e.stopPropagation();
+                    setHoveringArea(null);
+                    setHoveringComponent(null);
+                  },
+                  children: [
+                    containsZone && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      "div",
+                      {
+                        className: getClassNameLayer("chevron"),
+                        title: isSelected ? "Collapse" : "Expand",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_feather6.ChevronDown, { 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)(import_react_feather6.Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_feather6.Grid, { 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)(
+                LayerTree,
+                {
+                  data,
+                  zoneContent: zones[zoneKey],
+                  setItemSelector,
+                  itemSelector,
+                  zone: zoneKey,
+                  label: getZoneId(zoneKey)[1]
+                }
+              ) }, idx))
+            ]
+          },
+          `${item.props.id}_${i}`
+        );
+      })
+    ] })
   ] });
 };
 
-// lib/scroll-into-view.ts
+// lib/area-contains-zones.ts
 init_react_import();
-var scrollIntoView = (el) => {
-  const oldStyle = __spreadValues({}, el.style);
-  el.style.scrollMargin = "256px";
-  if (el) {
-    el == null ? void 0 : el.scrollIntoView({ behavior: "smooth" });
-    el.style.scrollMargin = oldStyle.scrollMargin || "";
+var areaContainsZones = (data, area) => {
+  const zones = Object.keys(findZonesForArea(data, area));
+  return zones.length > 0;
+};
+
+// lib/flush-zones.ts
+init_react_import();
+var flushZones = (data) => {
+  const containsZones = typeof data.zones !== "undefined";
+  if (containsZones) {
+    Object.keys(data.zones || {}).forEach((zone) => {
+      addToZoneCache(zone, data.zones[zone]);
+    });
+    return __spreadProps(__spreadValues({}, data), {
+      zones: {}
+    });
   }
+  return data;
 };
 
 // components/Puck/index.tsx
-var import_react_feather6 = require("react-feather");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var defaultPageFields = {
   title: { type: "text" }
 };
@@ -1013,7 +1891,7 @@ var PluginRenderer = ({
   renderMethod
 }) => {
   return plugins.filter((item) => item[renderMethod]).map((item) => item[renderMethod]).reduce(
-    (accChildren, Item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Item, { data, children: accChildren }),
+    (accChildren, Item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Item, { data, children: accChildren }),
     children
   );
 };
@@ -1029,12 +1907,17 @@ function Puck({
   headerPath
 }) {
   var _a, _b;
-  const [data, setData] = (0, import_react8.useState)(initialData);
-  const [selectedIndex, setSelectedIndex] = (0, import_react8.useState)(null);
-  const Page = (0, import_react8.useCallback)(
+  const [reducer] = (0, import_react12.useState)(() => createReducer({ config }));
+  const [data, dispatch] = (0, import_react12.useReducer)(
+    reducer,
+    flushZones(initialData)
+  );
+  const [itemSelector, setItemSelector] = (0, import_react12.useState)(null);
+  const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
+  const Page = (0, import_react12.useCallback)(
     (pageProps) => {
       var _a2, _b2;
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         PluginRenderer,
         {
           plugins,
@@ -1046,8 +1929,8 @@ function Puck({
     },
     [config.root]
   );
-  const PageFieldWrapper = (0, import_react8.useCallback)(
-    (props) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  const PageFieldWrapper = (0, import_react12.useCallback)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       PluginRenderer,
       {
         plugins,
@@ -1058,8 +1941,8 @@ function Puck({
     ),
     []
   );
-  const ComponentFieldWrapper = (0, import_react8.useCallback)(
-    (props) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  const ComponentFieldWrapper = (0, import_react12.useCallback)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       PluginRenderer,
       {
         plugins,
@@ -1070,396 +1953,372 @@ function Puck({
     ),
     []
   );
-  const FieldWrapper = selectedIndex !== null ? ComponentFieldWrapper : PageFieldWrapper;
+  const FieldWrapper = itemSelector ? ComponentFieldWrapper : PageFieldWrapper;
   const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
-  let fields = selectedIndex !== null ? ((_b = config.components[data.content[selectedIndex].type]) == null ? void 0 : _b.fields) || {} : rootFields;
-  (0, import_react8.useEffect)(() => {
+  let fields = selectedItem ? ((_b = config.components[selectedItem.type]) == null ? void 0 : _b.fields) || {} : rootFields;
+  (0, import_react12.useEffect)(() => {
     if (onChange)
       onChange(data);
   }, [data]);
-  const { onDragUpdate, placeholderStyle } = usePlaceholderStyle();
-  const [leftSidebarVisible, setLeftSidebarVisible] = (0, import_react8.useState)(true);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "puck", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
+  const [leftSidebarVisible, setLeftSidebarVisible] = (0, import_react12.useState)(true);
+  const [draggedItem, setDraggedItem] = (0, import_react12.useState)();
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "puck", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     import_react_beautiful_dnd4.DragDropContext,
     {
-      onDragUpdate,
+      onDragUpdate: (update) => {
+        setDraggedItem(__spreadValues(__spreadValues({}, draggedItem), update));
+        onDragStartOrUpdate(update);
+      },
+      onBeforeDragStart: (start) => {
+        onDragStartOrUpdate(start);
+        setItemSelector(null);
+      },
       onDragEnd: (droppedItem) => {
+        setDraggedItem(void 0);
         if (!droppedItem.destination) {
-          console.warn("No destination specified");
           return;
         }
-        if (droppedItem.source.droppableId === "component-list") {
-          const emptyComponentData = {
-            type: droppedItem.draggableId,
-            props: __spreadProps(__spreadValues({}, config.components[droppedItem.draggableId].defaultProps || {}), {
-              id: `${droppedItem.draggableId}-${(/* @__PURE__ */ new Date()).getTime()}`
-              // TODO make random string
-            })
-          };
-          const newData = __spreadValues({}, data);
-          newData.content.splice(
-            droppedItem.destination.index,
-            0,
-            emptyComponentData
-          );
-          setData(newData);
-          setSelectedIndex(droppedItem.destination.index);
+        if (droppedItem.source.droppableId === "component-list" && droppedItem.destination) {
+          dispatch({
+            type: "insert",
+            componentType: droppedItem.draggableId,
+            destinationIndex: droppedItem.destination.index,
+            destinationZone: droppedItem.destination.droppableId
+          });
+          setItemSelector({
+            index: droppedItem.destination.index,
+            zone: droppedItem.destination.droppableId
+          });
+          return;
         } else {
-          setData(__spreadProps(__spreadValues({}, data), {
-            content: reorder(
-              data.content,
-              droppedItem.source.index,
-              droppedItem.destination.index
-            )
-          }));
-          setSelectedIndex(null);
+          const { source, destination } = droppedItem;
+          if (source.droppableId === destination.droppableId) {
+            dispatch({
+              type: "reorder",
+              sourceIndex: source.index,
+              destinationIndex: destination.index,
+              destinationZone: destination.droppableId
+            });
+          } else {
+            dispatch({
+              type: "move",
+              sourceZone: source.droppableId,
+              sourceIndex: source.index,
+              destinationIndex: destination.index,
+              destinationZone: destination.droppableId
+            });
+          }
+          setItemSelector({
+            index: destination.index,
+            zone: destination.droppableId
+          });
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-        "div",
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        DropZoneProvider,
         {
-          style: {
-            display: "grid",
-            gridTemplateAreas: '"header header header" "left editor right"',
-            gridTemplateColumns: `${leftSidebarVisible ? "288px" : "0px"} auto 288px`,
-            gridTemplateRows: "min-content auto",
-            height: "100vh",
-            position: "fixed",
-            top: 0,
-            bottom: 0,
-            left: 0,
-            right: 0
+          value: {
+            data,
+            itemSelector,
+            setItemSelector,
+            config,
+            dispatch,
+            draggedItem,
+            placeholderStyle,
+            mode: "edit",
+            areaId: "root"
           },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              "header",
+          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)(
+              "div",
               {
                 style: {
-                  gridArea: "header",
-                  borderBottom: "1px solid var(--puck-color-grey-8)"
+                  display: "grid",
+                  gridTemplateAreas: '"header header header" "left editor right"',
+                  gridTemplateColumns: `${leftSidebarVisible ? "288px" : "0px"} auto 288px`,
+                  gridTemplateRows: "min-content auto",
+                  height: "100vh",
+                  position: "fixed",
+                  top: 0,
+                  bottom: 0,
+                  left: 0,
+                  right: 0
                 },
-                children: renderHeader ? renderHeader({
-                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                    Button,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    "header",
                     {
-                      onClick: () => {
-                        onPublish(data);
+                      style: {
+                        gridArea: "header",
+                        borderBottom: "1px solid var(--puck-color-grey-8)"
                       },
-                      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_feather6.Globe, { size: "14px" }),
-                      children: "Publish"
-                    }
-                  ),
-                  data,
-                  setData
-                }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-                  "div",
-                  {
-                    style: {
-                      display: "grid",
-                      padding: 16,
-                      gridTemplateAreas: '"left middle right"',
-                      gridTemplateColumns: "288px auto 288px",
-                      gridTemplateRows: "auto"
-                    },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                        "div",
-                        {
-                          style: {
-                            display: "flex",
-                            gap: 16
-                          },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                            IconButton,
-                            {
-                              onClick: () => setLeftSidebarVisible(!leftSidebarVisible),
-                              title: "Toggle left sidebar",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_feather6.Sidebar, {})
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                        "div",
-                        {
-                          style: {
-                            display: "flex",
-                            justifyContent: "center",
-                            alignItems: "center"
-                          },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Heading, { rank: 2, size: "xs", children: [
-                            headerTitle || data.root.title || "Page",
-                            headerPath && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("small", { style: { fontWeight: 400, marginLeft: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("code", { children: headerPath }) })
-                          ] })
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                      children: renderHeader ? renderHeader({
+                        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          Button,
+                          {
+                            onClick: () => {
+                              onPublish(data);
+                            },
+                            icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_feather7.Globe, { size: "14px" }),
+                            children: "Publish"
+                          }
+                        ),
+                        data,
+                        dispatch
+                      }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                         "div",
                         {
                           style: {
-                            display: "flex",
-                            gap: 16,
-                            justifyContent: "flex-end"
+                            display: "grid",
+                            padding: 16,
+                            gridTemplateAreas: '"left middle right"',
+                            gridTemplateColumns: "288px auto 288px",
+                            gridTemplateRows: "auto"
                           },
                           children: [
-                            renderHeaderActions && renderHeaderActions({ data, setData }),
-                            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                              Button,
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                              "div",
+                              {
+                                style: {
+                                  display: "flex",
+                                  gap: 16
+                                },
+                                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                  IconButton,
+                                  {
+                                    onClick: () => setLeftSidebarVisible(!leftSidebarVisible),
+                                    title: "Toggle left sidebar",
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_feather7.Sidebar, {})
+                                  }
+                                )
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                              "div",
+                              {
+                                style: {
+                                  display: "flex",
+                                  justifyContent: "center",
+                                  alignItems: "center"
+                                },
+                                children: /* @__PURE__ */ (0, import_jsx_runtime13.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 }) })
+                                ] })
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                              "div",
                               {
-                                onClick: () => {
-                                  onPublish(data);
+                                style: {
+                                  display: "flex",
+                                  gap: 16,
+                                  justifyContent: "flex-end"
                                 },
-                                icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_feather6.Globe, { size: "14px" }),
-                                children: "Publish"
+                                children: [
+                                  renderHeaderActions && renderHeaderActions({ data, dispatch }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                    Button,
+                                    {
+                                      onClick: () => {
+                                        onPublish(data);
+                                      },
+                                      icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_feather7.Globe, { size: "14px" }),
+                                      children: "Publish"
+                                    }
+                                  )
+                                ]
                               }
                             )
                           ]
                         }
                       )
-                    ]
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-              "div",
-              {
-                style: {
-                  gridArea: "left",
-                  background: "var(--puck-color-grey-11)",
-                  borderRight: "1px solid var(--puck-color-grey-8)",
-                  overflowY: "auto",
-                  display: "flex",
-                  flexDirection: "column"
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SidebarSection, { title: "Components", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComponentList, { config }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(SidebarSection, { title: "Outline", children: [
-                    data.content.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                      "div",
-                      {
-                        style: {
-                          textAlign: "center",
-                          color: "var(--puck-color-grey-6)",
-                          fontFamily: "var(--puck-font-stack)"
-                        },
-                        children: "Add items to your page"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(OutlineList, { children: data.content.map((item, i) => {
-                      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                        OutlineList.Item,
-                        {
-                          onClick: () => {
-                            setSelectedIndex(i);
-                            const id = data.content[i].props.id;
-                            scrollIntoView(
-                              document.querySelector(
-                                `[data-rbd-drag-handle-draggable-id="draggable-${id}"]`
-                              )
-                            );
-                          },
-                          children: item.type
-                        },
-                        i
-                      );
-                    }) })
-                  ] })
-                ]
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              "div",
-              {
-                style: {
-                  background: "var(--puck-color-grey-9)",
-                  padding: 32,
-                  overflowY: "auto",
-                  gridArea: "editor"
-                },
-                onClick: () => setSelectedIndex(null),
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                  "div",
-                  {
-                    className: "puck-root",
-                    style: {
-                      background: "white",
-                      borderRadius: 16,
-                      border: "1px solid var(--puck-color-grey-8)",
-                      overflow: "hidden",
-                      zoom: 0.75
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Page, __spreadProps(__spreadValues({ data }, data.root), { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DroppableStrictMode_default, { droppableId: "droppable", children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-                      "div",
-                      __spreadProps(__spreadValues({}, provided.droppableProps), {
-                        ref: provided.innerRef,
-                        style: {
-                          minHeight: 128,
-                          position: "relative",
-                          zoom: 1.33
-                        },
-                        id: "puck-drop-zone",
-                        children: [
-                          data.content.map((item, i) => {
-                            var _a2;
-                            const Render2 = config.components[item.type] ? config.components[item.type].render : () => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
-                              "No configuration for ",
-                              item.type
-                            ] });
-                            return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                              DraggableComponent,
-                              {
-                                label: item.type.toString(),
-                                id: `draggable-${item.props.id}`,
-                                index: i,
-                                isSelected: selectedIndex === i,
-                                onClick: (e) => {
-                                  setSelectedIndex(i);
-                                  e.stopPropagation();
-                                },
-                                onDelete: (e) => {
-                                  const newData = __spreadValues({}, data);
-                                  newData.content.splice(i, 1);
-                                  setSelectedIndex(null);
-                                  setData(newData);
-                                  e.stopPropagation();
-                                },
-                                onDuplicate: (e) => {
-                                  const newData = __spreadValues({}, data);
-                                  const newItem = __spreadProps(__spreadValues({}, newData.content[i]), {
-                                    props: __spreadProps(__spreadValues({}, newData.content[i].props), {
-                                      id: `${newData.content[i].type}-${(/* @__PURE__ */ new Date()).getTime()}`
-                                    })
-                                  });
-                                  newData.content.splice(i + 1, 0, newItem);
-                                  setData(newData);
-                                  e.stopPropagation();
-                                },
-                                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { zoom: 0.75 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                                  Render2,
-                                  __spreadProps(__spreadValues(__spreadValues({}, (_a2 = config.components[item.type]) == null ? void 0 : _a2.defaultProps), item.props), {
-                                    editMode: true
-                                  })
-                                ) })
-                              },
-                              item.props.id
-                            );
-                          }),
-                          provided.placeholder,
-                          snapshot.isDraggingOver && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                            "div",
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                    "div",
+                    {
+                      style: {
+                        gridArea: "left",
+                        background: "var(--puck-color-grey-11)",
+                        borderRight: "1px solid var(--puck-color-grey-8)",
+                        overflowY: "auto",
+                        display: "flex",
+                        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)(
+                            LayerTree,
                             {
-                              style: __spreadProps(__spreadValues({}, placeholderStyle), {
-                                background: "var(--puck-color-azure-8)",
-                                zIndex: 0
-                              })
+                              data,
+                              label: areaContainsZones(data, "root") ? rootDroppableId : "",
+                              zoneContent: data.content,
+                              setItemSelector,
+                              itemSelector
+                            }
+                          ),
+                          Object.entries(findZonesForArea(data, "root")).map(
+                            ([zoneKey, zone]) => {
+                              return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                LayerTree,
+                                {
+                                  data,
+                                  label: zoneKey,
+                                  zone: zoneKey,
+                                  zoneContent: zone,
+                                  setItemSelector,
+                                  itemSelector
+                                },
+                                zoneKey
+                              );
                             }
                           )
-                        ]
-                      })
-                    ) }) }))
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              "div",
-              {
-                style: {
-                  borderLeft: "1px solid var(--puck-color-grey-8)",
-                  overflowY: "auto",
-                  gridArea: "right",
-                  fontFamily: "var(--puck-font-stack)",
-                  display: "flex",
-                  flexDirection: "column"
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FieldWrapper, { data, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                  SidebarSection,
-                  {
-                    noPadding: true,
-                    breadcrumb: selectedIndex !== null ? "Page" : "",
-                    breadcrumbClick: () => setSelectedIndex(null),
-                    title: selectedIndex !== null ? data.content[selectedIndex].type : "Page",
-                    children: Object.keys(fields).map((fieldName) => {
-                      var _a2, _b2, _c, _d;
-                      const field = fields[fieldName];
-                      const onChange2 = (value) => {
-                        let currentProps;
-                        let newProps;
-                        if (selectedIndex !== null) {
-                          currentProps = data.content[selectedIndex].props;
-                        } else {
-                          currentProps = data.root;
+                        ] })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    "div",
+                    {
+                      style: {
+                        background: "var(--puck-color-grey-10)",
+                        padding: 32,
+                        overflowY: "auto",
+                        gridArea: "editor",
+                        position: "relative"
+                      },
+                      onClick: () => setItemSelector(null),
+                      id: "puck-frame",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        "div",
+                        {
+                          className: "puck-root",
+                          style: {
+                            background: "white",
+                            border: "1px solid var(--puck-color-grey-8)",
+                            zoom: 0.75
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Page, __spreadProps(__spreadValues({ data }, data.root), { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropZone, { zone: rootDroppableId }) }))
                         }
-                        if (fieldName === "_data") {
-                          if (!value) {
-                            const _a3 = currentProps._meta || {}, { locked } = _a3, _meta = __objRest(_a3, ["locked"]);
-                            newProps = __spreadProps(__spreadValues({}, currentProps), {
-                              _data: void 0,
-                              _meta
-                            });
-                          } else {
-                            const changedFields = filter(
-                              // filter out anything not supported by this component
-                              value,
-                              Object.keys(fields)
-                            );
-                            newProps = __spreadProps(__spreadValues(__spreadValues({}, currentProps), changedFields), {
-                              _data: value,
-                              // TODO perf - this is duplicative and will make payload larger
-                              _meta: {
-                                locked: Object.keys(changedFields)
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    "div",
+                    {
+                      style: {
+                        borderLeft: "1px solid var(--puck-color-grey-8)",
+                        overflowY: "auto",
+                        gridArea: "right",
+                        fontFamily: "var(--puck-font-stack)",
+                        display: "flex",
+                        flexDirection: "column"
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FieldWrapper, { data, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        SidebarSection,
+                        {
+                          noPadding: true,
+                          breadcrumbs: path,
+                          breadcrumbClick: (breadcrumb) => setItemSelector(breadcrumb.selector),
+                          title: selectedItem ? selectedItem.type : "Page",
+                          children: Object.keys(fields).map((fieldName) => {
+                            var _a2, _b2, _c, _d;
+                            const field = fields[fieldName];
+                            const onChange2 = (value) => {
+                              let currentProps;
+                              let newProps;
+                              if (selectedItem) {
+                                currentProps = selectedItem.props;
+                              } else {
+                                currentProps = data.root;
                               }
-                            });
-                          }
-                        } else {
-                          newProps = __spreadProps(__spreadValues({}, currentProps), {
-                            [fieldName]: value
-                          });
-                        }
-                        if (selectedIndex !== null) {
-                          setData(__spreadProps(__spreadValues({}, data), {
-                            content: replace(data.content, selectedIndex, __spreadProps(__spreadValues({}, data.content[selectedIndex]), {
-                              props: newProps
-                            }))
-                          }));
-                        } else {
-                          setData(__spreadProps(__spreadValues({}, data), { root: newProps }));
+                              if (fieldName === "_data") {
+                                if (!value) {
+                                  const _a3 = currentProps._meta || {}, { locked } = _a3, _meta = __objRest(_a3, ["locked"]);
+                                  newProps = __spreadProps(__spreadValues({}, currentProps), {
+                                    _data: void 0,
+                                    _meta
+                                  });
+                                } else {
+                                  const changedFields = filter(
+                                    // filter out anything not supported by this component
+                                    value,
+                                    Object.keys(fields)
+                                  );
+                                  newProps = __spreadProps(__spreadValues(__spreadValues({}, currentProps), changedFields), {
+                                    _data: value,
+                                    // TODO perf - this is duplicative and will make payload larger
+                                    _meta: {
+                                      locked: Object.keys(changedFields)
+                                    }
+                                  });
+                                }
+                              } else {
+                                newProps = __spreadProps(__spreadValues({}, currentProps), {
+                                  [fieldName]: value
+                                });
+                              }
+                              if (itemSelector) {
+                                dispatch({
+                                  type: "replace",
+                                  destinationIndex: itemSelector.index,
+                                  destinationZone: itemSelector.zone || rootDroppableId,
+                                  data: __spreadProps(__spreadValues({}, selectedItem), { props: newProps })
+                                });
+                              } else {
+                                dispatch({
+                                  type: "set",
+                                  data: { root: newProps }
+                                });
+                              }
+                            };
+                            if (selectedItem && itemSelector) {
+                              return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                InputOrGroup,
+                                {
+                                  field,
+                                  name: fieldName,
+                                  label: field.label,
+                                  readOnly: ((_b2 = (_a2 = getItem(
+                                    itemSelector,
+                                    data
+                                  ).props._meta) == null ? void 0 : _a2.locked) == null ? void 0 : _b2.indexOf(fieldName)) > -1,
+                                  value: selectedItem.props[fieldName],
+                                  onChange: onChange2
+                                },
+                                `${selectedItem.props.id}_${fieldName}`
+                              );
+                            } else {
+                              return /* @__PURE__ */ (0, import_jsx_runtime13.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,
+                                  value: data.root[fieldName],
+                                  onChange: onChange2
+                                },
+                                `page_${fieldName}`
+                              );
+                            }
+                          })
                         }
-                      };
-                      if (selectedIndex !== null) {
-                        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                          InputOrGroup,
-                          {
-                            field,
-                            name: fieldName,
-                            label: field.label,
-                            readOnly: ((_b2 = (_a2 = data.content[selectedIndex].props._meta) == null ? void 0 : _a2.locked) == null ? void 0 : _b2.indexOf(fieldName)) > -1,
-                            value: data.content[selectedIndex].props[fieldName],
-                            onChange: onChange2
-                          },
-                          `${data.content[selectedIndex].props.id}_${fieldName}`
-                        );
-                      } else {
-                        return /* @__PURE__ */ (0, import_jsx_runtime11.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,
-                            value: data.root[fieldName],
-                            onChange: onChange2
-                          },
-                          `page_${fieldName}`
-                        );
-                      }
-                    })
-                  }
-                ) })
+                      ) })
+                    }
+                  )
+                ]
               }
-            )
-          ]
+            );
+          } })
         }
       )
     }
@@ -1468,28 +2327,23 @@ function Puck({
 
 // components/Render/index.tsx
 init_react_import();
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function Render({ config, data }) {
-  const children = data.content.map((item) => {
-    var _a;
-    const Component = (_a = config.components[item.type]) == null ? void 0 : _a.render;
-    if (Component) {
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Component, __spreadValues({}, item.props), item.props.id);
-    }
-    return null;
-  });
   if (config.root) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(config.root.render, __spreadProps(__spreadValues({}, data.root), { editMode: false, children }));
+    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, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropZone, { zone: rootDroppableId }) })) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropZone, { zone: rootDroppableId }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
+  DropZone,
+  DropZoneProvider,
   FieldLabel,
   IconButton,
   Puck,
-  Render
+  Render,
+  dropZoneContext
 });
 /*! Bundled license information: